@mdn/fred 2.6.2 → 2.6.4

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## [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/content-section/server.css

@@ -384,6 +384,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/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

@@ -58,19 +58,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 +78,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

@@ -91,33 +91,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

@@ -52,19 +52,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 +73,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 }

package/l10n/locales/zh-CN.ftl

@@ -52,36 +52,36 @@ compat-support-altname = 备用名称：{ $altname }
 compat-support-removed = 已在 { $version } 及更高版本中移除
 compat-support-see-impl-url = 参见 <a data-l10n-name="impl_url">{ $label }</a>
 compat-support-flags =
-    { NUMBER($has_added) ->
-        [one] 自版本 { $version_added } 起
-       *[other] { "" }
+    { $has_added ->
+        [1] 自版本 { $version_added } 起
+       *[0] { "" }
     }{ $has_last ->
-        [one]
-            { NUMBER($has_added) ->
-               *[zero] 截至 { $versionLast }，用户
-                [one] { " " }截至 { $versionLast }，用户
+        [1]
+            { $has_added ->
+               *[0] 截至 { $versionLast }，用户
+                [1] { " " }截至 { $versionLast }，用户
             }
-       *[zero]
-            { NUMBER($has_added) ->
-               *[zero] 用户
-                [one] { " " }用户
+       *[0]
+            { $has_added ->
+               *[0] 用户
+                [1] { " " }用户
             }
     }
     { " " }必须显式将 <code data-l10n-name="name">{ $flag_name }</code>{ " " }
     { $flag_type ->
        *[preference] 首选项
         [runtime_flag] 运行时标志
-    }{ 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] 要更改 { $browser_name } 中的首选项，请访问 { $browser_pref_url }。
                *[other] { "" }
             }
-       *[other] { "" }
+        *[0] { "" }
     }
 compat-legend-yes = { compat-support-full }
 compat-legend-partial = { compat-support-partial }

package/l10n/template.ftl

@@ -56,36 +56,36 @@ 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]
+    { $has_pref_url ->
+        [1]
             { $flag_type ->
                 [preference] To change preferences in { $browser_name }, visit { $browser_pref_url }.
                *[other] { "" }
             }
-       *[other] { "" }
+       *[0] { "" }
     }
 compat-legend-yes = { compat-support-full }
 compat-legend-partial = { compat-support-partial }