@mdn/fred 2.6.2 → 2.6.5

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Changelog
 
+## [2.6.5](https://github.com/mdn/fred/compare/v2.6.4...v2.6.5) (2026-06-01)
+
+
+### Bug Fixes
+
+* **button:** increase contrast ([#666](https://github.com/mdn/fred/issues/666)) ([60f3f48](https://github.com/mdn/fred/commit/60f3f481de1838e95fbb3fed9495b10f1a590678))
+* **compat-table:** support arbitrary nesting depth ([#1604](https://github.com/mdn/fred/issues/1604)) ([573fb9e](https://github.com/mdn/fred/commit/573fb9e9bddb4b2622f34222e92847d0b2b059f0))
+* **content-section:** add margin before table ([#1550](https://github.com/mdn/fred/issues/1550)) ([ad5f4ae](https://github.com/mdn/fred/commit/ad5f4ae0b6162d819bd2296ef4f5c8f7ca2099d4))
+
+
+### Miscellaneous
+
+* **deps:** bump @mdn/rari from 0.2.25 to 0.2.26 ([#1620](https://github.com/mdn/fred/issues/1620)) ([545b25a](https://github.com/mdn/fred/commit/545b25acd9636634c897b7a58e1eebf19c65cf76))
+* **deps:** bump http-proxy-middleware from 3.0.5 to 4.0.0 ([#1538](https://github.com/mdn/fred/issues/1538)) ([433da7c](https://github.com/mdn/fred/commit/433da7c7b56725ec271de6dbff08acbf81298508))
+* **deps:** bump qs and express ([#1598](https://github.com/mdn/fred/issues/1598)) ([84866ab](https://github.com/mdn/fred/commit/84866abc13aaba8d5a782d50de33292738344f85))
+* **footer:** remove foundation link ([#1607](https://github.com/mdn/fred/issues/1607)) ([4c726e6](https://github.com/mdn/fred/commit/4c726e63017f64d69ccfe0cafbe47d92c66f51fe))
+* **l10n:** add Japanese strings ([#1318](https://github.com/mdn/fred/issues/1318)) ([71fbab5](https://github.com/mdn/fred/commit/71fbab5c7d619479b692501a41a546c2f5651365))
+* **outer-layout:** skip Transcend snippet on Playground ([#1610](https://github.com/mdn/fred/issues/1610)) ([d0a8f0e](https://github.com/mdn/fred/commit/d0a8f0e581ccc7c44e62d27cbb2366a16f15ef99))
+
+## [2.6.4](https://github.com/mdn/fred/compare/v2.6.3...v2.6.4) (2026-05-22)
+
+
+### Bug Fixes
+
+* **l10n:** correct compat-support-flags rendering across locales ([#1562](https://github.com/mdn/fred/issues/1562)) ([2f5b04f](https://github.com/mdn/fred/commit/2f5b04fa8ea970c839102d211aa8efd06a585880))
+
+
+### Miscellaneous
+
+* **deps:** bump @mdn/rari from 0.2.24 to 0.2.25 ([#1597](https://github.com/mdn/fred/issues/1597)) ([ed147d1](https://github.com/mdn/fred/commit/ed147d19d49fdb3e1d6b8b3e222a492f86844bcd))
+
+## [2.6.3](https://github.com/mdn/fred/compare/v2.6.2...v2.6.3) (2026-05-21)
+
+
+### Bug Fixes
+
+* **content-section:** display index in multiple columns ([#1563](https://github.com/mdn/fred/issues/1563)) ([77cb0d0](https://github.com/mdn/fred/commit/77cb0d07f9b322e6e9d118932280193cfba5984e))
+
+
+### Miscellaneous
+
+* **deps:** bump @mdn/rari from 0.2.23 to 0.2.24 ([#1594](https://github.com/mdn/fred/issues/1594)) ([f7a9855](https://github.com/mdn/fred/commit/f7a985549bfc357d6b565ca0f17488a4c954d951))
+* **tests:** move from args to commands in cli ([#1590](https://github.com/mdn/fred/issues/1590)) ([f3afadc](https://github.com/mdn/fred/commit/f3afadc5f64d6f02e9cf923d70673adf545b6cc1))
+
 ## [2.6.2](https://github.com/mdn/fred/compare/v2.6.1...v2.6.2) (2026-05-15)
 
 

package/components/button/sandbox.js

@@ -18,6 +18,7 @@ export class ButtonSandbox extends SandboxComponent {
       { icon, iconOnly: false },
       { icon, iconOnly: true },
     ];
+    const disabled = [false, true];
 
     return html`
       <style>
@@ -43,29 +44,41 @@ export class ButtonSandbox extends SandboxComponent {
         Button in <mdn-button .icon=${icon}>the middle</mdn-button> of text with
         icon.
       </p>
-      ${hrefs.map(
-        (href) => html`
-          <h3><code>${href ? "<a>" : "<button>"}</code></h3>
-          <section>
-            ${variants.map((variant) =>
-              actions.map((action) =>
-                icons.map(
-                  ({ icon, iconOnly }) => html`
-                    <mdn-button
-                      href=${ifDefined(href)}
-                      variant=${ifDefined(variant)}
-                      action=${ifDefined(action)}
-                      .icon=${icon}
-                      ?icon-only=${iconOnly}
-                    >
-                      ${variant || "no variant"} ${action} ${icon ? "icon" : ""}
-                    </mdn-button>
-                  `,
-                ),
-              ),
-            )}
-          </section>
-        `,
+      ${hrefs.map((href) =>
+        disabled
+          .filter((isDisabled) => !(href && isDisabled))
+          .map(
+            (isDisabled) => html`
+              <h3>
+                <code
+                  >${href
+                    ? "<a>"
+                    : `<button${isDisabled ? " disabled" : ""}>`}</code
+                >
+              </h3>
+              <section>
+                ${variants.map((variant) =>
+                  actions.map((action) =>
+                    icons.map(
+                      ({ icon, iconOnly }) => html`
+                        <mdn-button
+                          href=${ifDefined(href)}
+                          variant=${ifDefined(variant)}
+                          action=${ifDefined(action)}
+                          .icon=${icon}
+                          ?icon-only=${iconOnly}
+                          ?disabled=${isDisabled}
+                        >
+                          ${variant || "no variant"} ${action}
+                          ${icon ? "icon" : ""} ${isDisabled ? "disabled" : ""}
+                        </mdn-button>
+                      `,
+                    ),
+                  ),
+                )}
+              </section>
+            `,
+          ),
       )}
       <h2>Server component</h2>
       <div class="manual-size">

package/components/button/server.css

@@ -34,7 +34,7 @@
     background-color: light-dark(var(--color-black), var(--color-white));
 
     &:hover {
-      background-color: light-dark(var(--color-gray-20), var(--color-gray-80));
+      background-color: light-dark(var(--color-gray-40), var(--color-gray-60));
     }
 
     &[data-action="positive"] {
@@ -68,16 +68,16 @@
     border-color: currentcolor;
 
     &:hover {
-      background-color: light-dark(var(--color-gray-80), var(--color-gray-20));
+      background-color: light-dark(var(--color-gray-80), var(--color-gray-40));
     }
 
     &[data-action="positive"] {
-      color: light-dark(var(--color-green-50), var(--color-green-80));
+      color: light-dark(var(--color-green-20), var(--color-green-80));
 
       &:hover {
         background-color: light-dark(
           var(--color-green-90),
-          var(--color-green-10)
+          var(--color-green-20)
         );
       }
     }
@@ -86,6 +86,7 @@
       color: light-dark(var(--color-red-50), var(--color-red-80));
 
       &:hover {
+        color: light-dark(var(--color-red-20), var(--color-red-80));
         background-color: light-dark(var(--color-red-90), var(--color-red-10));
       }
     }
@@ -95,16 +96,16 @@
 
   &[data-variant="plain"] {
     &:hover {
-      background-color: light-dark(var(--color-gray-80), var(--color-gray-20));
+      background-color: light-dark(var(--color-gray-80), var(--color-gray-40));
     }
 
     &[data-action="positive"] {
-      color: light-dark(var(--color-green-50), var(--color-green-80));
+      color: light-dark(var(--color-green-20), var(--color-green-80));
 
       &:hover {
         background-color: light-dark(
           var(--color-green-90),
-          var(--color-green-10)
+          var(--color-green-20)
         );
       }
     }
@@ -113,6 +114,7 @@
       color: light-dark(var(--color-red-50), var(--color-red-80));
 
       &:hover {
+        color: light-dark(var(--color-red-20), var(--color-red-80));
         background-color: light-dark(var(--color-red-90), var(--color-red-10));
       }
     }

package/components/compat-table/element.js

@@ -456,7 +456,11 @@ export class MDNCompatTable extends L10nMixin(LitElement) {
       });
 
       return html`<tr>
-        <th class=${`bc-feature bc-feature-depth-${depth}`} scope="row">
+        <th
+          class="bc-feature"
+          style=${`--compat-feature-depth: ${depth}`}
+          scope="row"
+        >
           ${titleNode}
         </th>
         ${browserCells}

package/components/compat-table/index-common.css

@@ -207,20 +207,17 @@ table {
     text-align: left;
 
     border: none;
+    border-left: max(
+        0px,
+        calc((var(--compat-feature-depth, 1) - 1) * 8px - 1px)
+      )
+      solid var(--color-border-primary);
 
     > * {
       flex-basis: max-content;
       border: none !important;
     }
   }
-
-  .bc-feature-depth-2 {
-    border-left: 7px solid var(--color-border-primary);
-  }
-
-  .bc-feature-depth-3 {
-    border-left: 15px solid var(--color-border-primary);
-  }
 }
 
 .bc-head-txt-label {

package/components/content-section/server.css

@@ -222,6 +222,10 @@
     }
   }
 
+  .table-container {
+    margin: 1rem 0;
+  }
+
   .code-example,
   mdn-code-example,
   mdn-live-sample-result {
@@ -384,6 +388,18 @@
     }
   }
 
+  /* Alphabetical/grouped indexes (rari `CSS_Ref`, `ListGroups`, `APIListAlpha`, `css_ref_list`) */
+  .index {
+    ul {
+      columns: 18rem;
+      column-gap: 2rem;
+    }
+
+    li {
+      break-inside: avoid;
+    }
+  }
+
   /* Article footer */
   &.article-footer {
     margin: 2rem 0;

package/components/footer/server.js

@@ -243,13 +243,6 @@ export class Footer extends ServerComponent {
             )}
           </ul>
           <p>
-            ${context.l10n.raw({
-              id: "footer-mofo",
-              elements: {
-                moco: { tag: "a", href: "https://www.mozilla.org/" },
-                mofo: { tag: "a", href: "https://foundation.mozilla.org/" },
-              },
-            })}<br />
             ${context.l10n.raw({
               id: "footer-copyright",
               args: {

package/components/outer-layout/server.js

@@ -117,6 +117,7 @@ export class OuterLayout extends ServerComponent {
               />`,
           )}
           ${TRANSCEND_AIRGAP_URL &&
+          context.renderer !== "SpaPlay" &&
           html`<script
             data-cfasync="false"
             data-report-only="on"

package/l10n/fluent.js

@@ -5,7 +5,8 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import enUS_ftl from "./locales/en-US.ftl";
 
 /**
- * @import { AllowedTags } from "insane";
+ * @import { FluentVariable } from "@fluent/bundle"
+ * @import { AllowedTags } from "insane"
  */
 
 /** @type {Record<string, string>} */
@@ -56,7 +57,7 @@ export class Fluent {
   /**
    * @param {string} id
    * @param {string} [attr]
-   * @param {Record<string, any>} [args]
+   * @param {Record<string, FluentVariable | undefined>} [args]
    * @param {Record<string, import("../types/fluent.js").Element>} [elements]
    * @returns {string | ReturnType<typeof unsafeHTML> | undefined}
    */
@@ -123,7 +124,7 @@ export class Fluent {
   /**
    * @param {string} id
    * @param {string} [attr]
-   * @param {Record<string, any>} [args]
+   * @param {Record<string, FluentVariable | undefined>} [args]
    * @param {FluentBundle | undefined} [bundle]
    * @param {boolean} [us]
    * @returns {string | undefined}
@@ -165,7 +166,7 @@ export class Fluent {
 
     /** @type {Error[]} */
     const errors = [];
-    const formatted = bundle?.formatPattern(message, args, errors);
+    const formatted = bundle?.formatPattern(message, escapeArgs(args), errors);
     if (errors.length > 0) {
       console.error(errors);
     }
@@ -173,6 +174,35 @@ export class Fluent {
   }
 }
 
+/**
+ * HTML-escape string-valued args so that variable substitution can't inject
+ * tags that confuse the downstream sanitizer. Only string values are touched
+ * so that Number/Date selectors keep working.
+ *
+ * @param {Record<string, FluentVariable | undefined>} args
+ * @returns {Record<string, FluentVariable>}
+ */
+function escapeArgs(args) {
+  /** @type {Record<string, FluentVariable>} */
+  const out = {};
+  for (const [k, v] of Object.entries(args)) {
+    if (v !== undefined) {
+      out[k] = typeof v === "string" ? escapeHtml(v) : v;
+    }
+  }
+  return out;
+}
+
+/**
+ * @param {string} s
+ */
+function escapeHtml(s) {
+  return s
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}
+
 /** @type {Map<string, Fluent>} */
 const fluent = new Map();
 
@@ -245,7 +275,7 @@ export default function getFluentContext(locale) {
   }
 
   /**
-   * @param {{ id: string, attr?: string, args?: Record<string, any>, elements?: Record<string, import("../types/fluent.js").Element> }} param0
+   * @param {{ id: string, attr?: string, args?: Record<string, FluentVariable | undefined>, elements?: Record<string, import("../types/fluent.js").Element> }} param0
    */
   l10n.raw = function ({ id, attr, args, elements }) {
     const fluent = getLocale(locale);

package/l10n/locales/de.ftl

@@ -3,7 +3,6 @@ content-feedback-reason = Warum war diese Übersetzung nicht hilfreich?
 content-feedback-thanks = Vielen Dank für die Rückmeldung!
 
 footer-tagline = Der Bauplan für ein besseres Internet.
-footer-mofo = Besuche die gemeinnützige Muttergesellschaft der <a data-l10n-name="moco">Mozilla Corporation</a>, die <a data-l10n-name="mofo">Mozilla Foundation</a>.
 footer-copyright = Teile dieses Inhalts sind ©1998–{ $year } von einzelnen mozilla.org-Mitwirkenden. Inhalte sind verfügbar unter <a data-l10n-name="cc">einer Creative-Commons-Lizenz</a>.
 
 search-modal-site-search = Website-Suche nach <em>{ $query }</em>
@@ -58,19 +57,19 @@ compat-support-altname = Alternativer Name: { $altname }
 compat-support-removed = Ab { $version } entfernt
 compat-support-see-impl-url = Siehe <a data-l10n-name="impl_url">{ $label }</a>
 compat-support-flags =
-    { NUMBER($has_added) ->
-        [one] Ab Version { $version_added }
-        *[other] { "" }
+    { $has_added ->
+        [1] Ab Version { $version_added }
+        *[0] { "" }
     }{ $has_last ->
-        [one]
-            { NUMBER($has_added) ->
-                *[zero] Bis { $versionLast } muss
-                [one] { " " }bis { $versionLast } muss
+        [1]
+            { $has_added ->
+                *[0] Bis { $versionLast } muss
+                [1] { " " }bis { $versionLast } muss
             }
-        *[zero]
-            { NUMBER($has_added) ->
-                *[zero] muss
-                [one] { " " }muss
+        *[0]
+            { $has_added ->
+                *[0] muss
+                [1] { " " }muss
             }
     }
     { " " }die Einstellung <code data-l10n-name="name">{ $flag_name }</code>{ " " }
@@ -78,17 +77,17 @@ compat-support-flags =
         *[preference] explizit festgelegt werden
         [runtime_flag] als Laufzeit-Flag explizit festgelegt werden
 
-    }{ NUMBER($has_value) ->
-        [one] { " " }auf <code data-l10n-name="value">{ $flag_value }</code>
-        *[other] { "" }
+    }{ $has_value ->
+        [1] { " " }auf <code data-l10n-name="value">{ $flag_value }</code>
+        *[0] { "" }
     }{ "." }
-    { NUMBER($has_pref_url) ->
-        [one]
+    { $has_pref_url ->
+        [1]
             { $flag_type ->
                 [preference] Um die Einstellungen in { $browser_name } zu ändern, besuchen Sie { $browser_pref_url }.
                 *[other] { "" }
             }
-        *[other] { "" }
+        *[0] { "" }
     }
 compat-legend-yes = { compat-support-full }
 compat-legend-partial = { compat-support-partial }

package/l10n/locales/en-US.ftl

@@ -28,7 +28,6 @@ not-found-back = Go back to the home page
 
 reference-toc-header = In this article
 
-footer-mofo = Visit <a data-l10n-name="moco">Mozilla Corporation’s</a> not-for-profit parent, the <a data-l10n-name="mofo">Mozilla Foundation</a>.
 footer-copyright = Portions of this content are ©1998–{ $year } by individual mozilla.org contributors. Content available under <a data-l10n-name="cc">a Creative Commons license</a>.
 
 search-modal-site-search = Site search for <em>{ $query }</em>
@@ -91,33 +90,33 @@ compat-support-altname = Alternate name: { $altname }
 compat-support-removed = Removed in { $version } and later
 compat-support-see-impl-url = See <a data-l10n-name="impl_url">{ $label }</a>
 compat-support-flags =
-  { NUMBER($has_added) ->
-    [one] From version { $version_added }
-    *[other] {""}
+  { $has_added ->
+    [1] From version { $version_added }
+    *[0] {""}
   }{ $has_last ->
-    [one] { NUMBER($has_added) ->
-          *[zero] Until { $versionLast } users
-          [one] {" "}until { $versionLast } users
+    [1] { $has_added ->
+          *[0] Until { $versionLast } users
+          [1] {" "}until { $versionLast } users
       }
-    *[zero] { NUMBER($has_added) ->
-          *[zero] Users
-          [one] {" "}users
+    *[0] { $has_added ->
+          *[0] Users
+          [1] {" "}users
       }
   }
   {" "}must explicitly set the <code data-l10n-name="name">{ $flag_name }</code>{" "}
   { $flag_type ->
     *[preference] preference
     [runtime_flag] runtime flag
-  }{ NUMBER($has_value) ->
-    [one] {" "}to <code data-l10n-name="value">{ $flag_value }</code>
-    *[other] {""}
+  }{ $has_value ->
+    [1] {" "}to <code data-l10n-name="value">{ $flag_value }</code>
+    *[0] {""}
   }{"."}
-  { NUMBER($has_pref_url) ->
-    [one] { $flag_type ->
+  { $has_pref_url ->
+    [1] { $flag_type ->
       [preference] To change preferences in { $browser_name }, visit { $browser_pref_url }.
       *[other] {""}
     }
-    *[other] {""}
+    *[0] {""}
   }
 
 compat-legend = Legend

package/l10n/locales/fr.ftl

@@ -14,7 +14,6 @@ not-found-description = Désolé, la page <code data-l10n-name="url">{ $url }</c
 not-found-fallback-english = <strong data-l10n-name="strong">Bonne nouvelle :</strong> La page que vous cherchez existe en <em data-l10n-name="em">Anglais</em>.
 not-found-fallback-search = La page que vous avez demandée n'existe pas, mais vous pouvez essayer une recherche sur le site pour :
 not-found-back = Retour à la page d'accueil
-footer-mofo = Visitez la société mère à but non lucratif de <a data-l10n-name="moco">Mozilla Corporation</a>, la <a data-l10n-name="mofo">Fondation Mozilla</a>.
 footer-copyright = Certaines parties de ce contenu sont protégées par le droit d'auteur ©1998—{ $year } des contributeurs individuels de mozilla.org. Contenu disponible sous <a data-l10n-name="cc">une licence Creative Commons</a>.
 search-modal-site-search = Rechercher sur le site <em>{ $query }</em>
 site-search-search-stats = { $results } documents trouvés.
@@ -52,19 +51,19 @@ compat-support-altname = Nom alternatif : { $altname }
 compat-support-removed = Supprimé en version { $version } et supérieure
 compat-support-see-impl-url = Voir <a data-l10n-name="impl_url">{ $label }</a>
 compat-support-flags =
-    { NUMBER($has_added) ->
-        [one] De la version { $version_added }
-       *[other] { "" }
+    { $has_added ->
+        [1] De la version { $version_added }
+       *[0] { "" }
     }{ $has_last ->
-        [one]
-            { NUMBER($has_added) ->
-               *[zero] Jusqu'à la version { $versionLast }, les utilisateur·ice·s
-                [one] { " " }jusqu'à { $versionLast }, les utilisateur·ice·s
+        [1]
+            { $has_added ->
+               *[0] Jusqu'à la version { $versionLast }, les utilisateur·ice·s
+                [1] { " " }jusqu'à { $versionLast }, les utilisateur·ice·s
             }
-       *[zero]
-            { NUMBER($has_added) ->
-               *[zero] Les utilisateur·ice·s
-                [one] {" "}les utilisateur·ice·s
+       *[0]
+            { $has_added ->
+               *[0] Les utilisateur·ice·s
+                [1] {" "}les utilisateur·ice·s
             }
     }
     { " " }doivent explicitement définir
@@ -73,17 +72,17 @@ compat-support-flags =
         [runtime_flag] l'indicateur d'exécution
     }
     { " " }<code data-l10n-name="name">{ $flag_name }</code>
-    { NUMBER($has_value) ->
-        [one] { " " }à <code data-l10n-name="value">{ $flag_value }</code>
-       *[other] { "" }
+    { $has_value ->
+        [1] { " " }à <code data-l10n-name="value">{ $flag_value }</code>
+       *[0] { "" }
     }{"."}
-    { NUMBER($has_pref_url) ->
-        [one]
+    { $has_pref_url ->
+        [1]
             { $flag_type ->
                 [preference] Pour changer vos préférences sur le navigateur { $browser_name }, visitez { $browser_pref_url }.
                *[other] { "" }
             }
-       *[other] { "" }
+       *[0] { "" }
     }
 compat-legend-yes = { compat-support-full }
 compat-legend-partial = { compat-support-partial }