fix: match release status pill colors to the release schedule (#9246)

Use the same colors as the release schedule chart: EOL is red, Alpha is
orange, Current is green, Active LTS is blue and Maintenance LTS is
grey. Release data now flags LTS lines past their maintenance date so
the table and the version dropdown can tell them apart.

Also show the latest Alpha in the footer pills, which now wrap on
narrow screens.

Assisted-by: Claude Opus 5.5 <noreply@anthropic.com>

Author: ovflowd

.changeset/orange-pills-match.md

@@ -0,0 +1,5 @@
+---
+'@node-core/website-i18n': patch
+---
+
+Add the Latest Alpha footer pill label.

apps/site/components/Downloads/Release/VersionDropdown.tsx

@@ -66,10 +66,13 @@ const VersionDropdown: FC = () => {
   return (
     <WithNoScriptSelect
       ariaLabel={t('layouts.download.dropdown.version')}
-      values={releases.map(({ status, versionWithPrefix }) => ({
+      values={releases.map(({ status, isMaintenance, versionWithPrefix }) => ({
         value: versionWithPrefix,
         label: versionWithPrefix,
-        badge: { label: status, kind: STATUS_KIND_MAP[status] },
+        badge: {
+          label: status,
+          kind: isMaintenance ? 'neutral' : STATUS_KIND_MAP[status],
+        },
       }))}
       defaultValue={release.versionWithPrefix}
       onChange={setVersionOrNavigate}

apps/site/components/Downloads/Release/__tests__/VersionDropdown.test.jsx

@@ -31,7 +31,7 @@ const statuses = [
   {
     status: 'EOL',
     path: '/download',
-    badgeKind: 'warning',
+    badgeKind: 'error',
     versions: ['v18.0.0', 'v16.0.0'],
   },
   {
@@ -49,7 +49,7 @@ const statuses = [
   {
     status: 'Alpha',
     path: '/download/alpha',
-    badgeKind: 'default',
+    badgeKind: 'warning',
     versions: ['v26.0.0-alpha.1', 'v26.0.0-alpha.2'],
   },
 ];
@@ -58,15 +58,15 @@ const releases = statuses.flatMap(({ status, versions }) =>
   versions.map(versionWithPrefix => ({ versionWithPrefix, status }))
 );
 
-const renderDropdown = (release = releases[0]) => {
+const renderDropdown = (release = releases[0], allReleases = releases) => {
   const Dropdown = () => {
     const [version, updateVersion] = useState(release.versionWithPrefix);
     setVersion.mock.mockImplementation(updateVersion);
 
     return (
       <ReleaseContext
         value={{
-          release: releases.find(
+          release: allReleases.find(
             candidate => candidate.versionWithPrefix === version
           ),
           setVersion,
@@ -78,7 +78,7 @@ const renderDropdown = (release = releases[0]) => {
   };
 
   render(
-    <ReleasesContext value={{ releases, snippets: [] }}>
+    <ReleasesContext value={{ releases: allReleases, snippets: [] }}>
       <Dropdown />
     </ReleasesContext>
   );
@@ -180,4 +180,22 @@ describe('VersionDropdown', () => {
       }
     });
   }
+
+  it('provides the neutral badge for LTS versions in maintenance', () => {
+    const release = {
+      versionWithPrefix: 'v22.0.0',
+      status: 'LTS',
+      isMaintenance: true,
+    };
+
+    const { values } = renderDropdown(release, [release]);
+
+    assert.deepEqual(values, [
+      {
+        value: 'v22.0.0',
+        label: 'v22.0.0',
+        badge: { label: 'LTS', kind: 'neutral' },
+      },
+    ]);
+  });
 });

apps/site/components/Footer.tsx

@@ -26,7 +26,7 @@ const Footer: FC = () => {
   };
 
   const primary = (
-    <div className="flex flex-row gap-2">
+    <div className="flex flex-row flex-wrap justify-center gap-2">
       <WithNodeRelease status="LTS">
         {({ release }) => (
           <BadgeGroup
@@ -51,6 +51,19 @@ const Footer: FC = () => {
           </BadgeGroup>
         )}
       </WithNodeRelease>
+
+      <WithNodeRelease status="Alpha">
+        {({ release }) => (
+          <BadgeGroup
+            size="small"
+            kind="warning"
+            badgeText={release.versionWithPrefix}
+            href={`/blog/release/${release.versionWithPrefix}`}
+          >
+            {t('components.containers.footer.releasePills.latestAlpha')}
+          </BadgeGroup>
+        )}
+      </WithNodeRelease>
     </div>
   );
 

apps/site/components/Releases/PreviousReleasesTable/TableBody.tsx

@@ -51,7 +51,14 @@ const PreviousReleasesTableBody: FC<PreviousReleasesTableBodyProps> = ({
             </td>
 
             <td data-label={t('components.downloadReleasesTable.status')}>
-              <Badge kind={STATUS_KIND_MAP[release.status]} size="small">
+              <Badge
+                kind={
+                  release.isMaintenance
+                    ? 'neutral'
+                    : STATUS_KIND_MAP[release.status]
+                }
+                size="small"
+              >
                 {release.status}
               </Badge>
             </td>

apps/site/next-data/generators/__tests__/releaseData.test.mjs

@@ -102,6 +102,37 @@ describe('generateReleaseData', () => {
     });
 
     assert.equal(result[0]?.status, 'LTS');
+    assert.equal(result[0]?.isMaintenance, false);
+  });
+
+  it('flags LTS releases on or past their maintenance date', async t => {
+    const result = await runWithNodevuData(t, '2026-10-20', {
+      24: {
+        releases: {
+          '24.11.0': {
+            semver: { major: 24, raw: '24.11.0' },
+            dependencies: { npm: '11.6.1', v8: '13.6.233.10' },
+            lts: { isLts: true },
+            alpha: { isAlpha: false },
+            releaseDate: '2026-10-14',
+            modules: { version: '137' },
+          },
+        },
+        support: {
+          phases: {
+            dates: {
+              start: '2025-05-06',
+              lts: '2025-10-28',
+              maintenance: '2026-10-20',
+              end: '2028-04-30',
+            },
+          },
+        },
+      },
+    });
+
+    assert.equal(result[0]?.status, 'LTS');
+    assert.equal(result[0]?.isMaintenance, true);
   });
 
   it('returns Current when release is not EOL and LTS date has passed but latest is not LTS', async t => {

apps/site/next-data/generators/releaseData.mjs

@@ -35,11 +35,10 @@ const generateReleaseData = async () => {
     const latestVersion = versions[0];
     const initialVersion = versions[versions.length - 1];
 
+    const { maintenance, end } = major.support.phases.dates;
+
     // Get the major release status based on our Release Schedule
-    const status = getNodeReleaseStatus(
-      latestVersion,
-      major.support.phases.dates.end
-    );
+    const status = getNodeReleaseStatus(latestVersion, end);
 
     const minorVersions = Object.entries(major.releases).map(([, release]) => ({
       modules: release.modules.version || '',
@@ -52,6 +51,7 @@ const generateReleaseData = async () => {
 
     return {
       status,
+      isMaintenance: status === 'LTS' && new Date() >= new Date(maintenance),
       major: latestVersion.semver.major,
       version: latestVersion.semver.raw,
       versionWithPrefix: `v${latestVersion.semver.raw}`,

apps/site/next.constants.mjs

@@ -142,10 +142,10 @@ export const SEVERITY_KIND_MAP = {
  * @type {Record<import('./types/releases').NodeReleaseStatus, import('@node-core/ui-components/Common/Badge').BadgeKind>}
  */
 export const STATUS_KIND_MAP = {
-  EOL: 'warning',
+  EOL: 'error',
   LTS: 'info',
   Current: 'default',
-  Alpha: 'default',
+  Alpha: 'warning',
 };
 
 /**

apps/site/types/releases.ts

@@ -23,5 +23,6 @@ export type MinorVersion = {
 export type NodeRelease = {
   versionWithPrefix: string;
   status: NodeReleaseStatus;
+  isMaintenance: boolean;
   minorVersions: Array<MinorVersion>;
 } & NodeReleaseSource;

packages/i18n/src/locales/en.json

@@ -25,7 +25,8 @@
         },
         "releasePills": {
           "latestLTS": "Latest LTS",
-          "latestRelease": "Latest Release"
+          "latestRelease": "Latest Release",
+          "latestAlpha": "Latest Alpha"
         }
       },
       "navBar": {