Update Baseline card to feature year more prominently and future Widely available date

components/baseline-indicator/server.css

@@ -23,6 +23,7 @@
     --baseline-engine-bg: light-dark(#ceead6, #031b05);
     --baseline-img: url("./icons/status/high.svg");
     --baseline-check: #099949;
+    --baseline-pill-bg: #23a446;
 
     @media (prefers-color-scheme: dark) {
       --baseline-img: url("./icons/status/high-dark.svg");

components/baseline-indicator/server.js

@@ -136,22 +136,24 @@ export class BaselineIndicator extends ServerComponent {
             : context.l10n`Baseline Check`}
         ></span>
         <div class="status-title">
-          ${level === "not"
-            ? html`<span class="not-bold"
-                >${context.l10n`Limited availability`}</span
-              >`
-            : html`
-                ${context.l10n`Baseline`}
+          ${low_date
+            ? html`${context.l10n`Baseline`}
                 <span class="not-bold">
-                  ${level === "high"
-                    ? context.l10n`Widely available`
-                    : low_date?.getFullYear()}
+                  ${low_date.toLocaleDateString(context.locale, {
+                    year: "numeric",
+                  })}
                 </span>
-                ${status.asterisk && " *"}
-              `}
+                ${status.asterisk && " *"} `
+            : html`<span class="not-bold">
+                ${context.l10n`Limited availability`}</span
+              >`}
         </div>
-        ${level === "low"
-          ? html`<div class="pill">${context.l10n`Newly available`}</div>`
+        ${low_date
+          ? html`<div class="pill">
+              ${level === "high"
+                ? context.l10n`Widely available`
+                : context.l10n`Newly available`}
+            </div>`
           : nothing}
         <div class="browsers">
           ${ENGINES.map(
@@ -192,19 +194,32 @@ export class BaselineIndicator extends ServerComponent {
             </p>`
           : level === "low" && low_date
             ? html`<p>
-                ${context.l10n.raw({
-                  id: "baseline-low-extra",
-                  args: {
-                    date: low_date.toLocaleDateString(DEFAULT_LOCALE, {
-                      year: "numeric",
-                      month: "long",
-                    }),
-                  },
-                })}
-              </p>`
+                  ${context.l10n.raw({
+                    id: "baseline-low-extra",
+                    args: {
+                      date: low_date.toLocaleDateString(DEFAULT_LOCALE, {
+                        year: "numeric",
+                        month: "long",
+                      }),
+                    },
+                  })}
+                </p>
+                <p>
+                  ${context.l10n.raw({
+                    id: "baseline-low-extra-widely",
+                    args: {
+                      date: new Date(
+                        low_date.setMonth(low_date.getMonth() + 30),
+                      ).toLocaleDateString(DEFAULT_LOCALE, {
+                        year: "numeric",
+                        month: "long",
+                      }),
+                    },
+                  })}
+                </p>`
             : html`<p>${context.l10n("baseline-not-extra")}</p>`}
         ${status.asterisk
-          ? html`<p>{"* "}${context.l10n("baseline-asterisk")}</p>`
+          ? html`<p>* ${context.l10n("baseline-asterisk")}</p>`
           : nothing}
         <ul>
           <li>

l10n/en-US.ftl

@@ -7,6 +7,7 @@ article-footer-source-title = Folder: { $folder } (Opens in a new tab)
 baseline-asterisk = Some parts of this feature may have varying levels of support.
 baseline-high-extra = This feature is well established and works across many devices and browser versions. It’s been available across browsers since { $date }.
 baseline-low-extra = Since { $date }, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
+baseline-low-extra-widely = This feature will become Widely available in <strong>{ $date }</strong>.
 baseline-not-extra = This feature is not Baseline because it does not work in some of the most widely-used browsers.
 baseline-supported-in = Supported in { $browsers }
 baseline-unsupported-in = Not widely supported in { $browsers }