@mdn/fred 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # Changelog
 
+## [1.8.0](https://github.com/mdn/fred/compare/v1.7.0...v1.8.0) (2025-10-31)
+
+
+### Features
+
+* **server:** add auto open browser when launching dev server ([#805](https://github.com/mdn/fred/issues/805)) ([89b1198](https://github.com/mdn/fred/commit/89b11982d34c0cda6b32d594996a0712060af9d8))
+
+
+### Bug Fixes
+
+* **breadcrumbs-bar:** avoid overlap with Theme/Language dropdown ([#864](https://github.com/mdn/fred/issues/864)) ([fe569a0](https://github.com/mdn/fred/commit/fe569a0ed3013e189f474a48c7e7c58d44f57315))
+* **ci:** add the gh token to the run-tests stage ([7b15761](https://github.com/mdn/fred/commit/7b15761a10178ef85d3a86fa13dfaad1ec41e4e6))
+* **content-section:** add `<kbd>` style ([#1003](https://github.com/mdn/fred/issues/1003)) ([d6495dc](https://github.com/mdn/fred/commit/d6495dccf4d6a321d8b30558f99a9333b2bfb997))
+* **content-section:** loosen restrictions on heading ids ([#1008](https://github.com/mdn/fred/issues/1008)) ([d473156](https://github.com/mdn/fred/commit/d4731566badf9ef2b215253bfe85d802f0b8873c))
+* **content-section:** use white img bg-color for all themes ([#934](https://github.com/mdn/fred/issues/934)) ([e4a22f1](https://github.com/mdn/fred/commit/e4a22f181561ae9f853a5947c5a072ca1f1d967e))
+* **search-modal:** disable autocompletions on search input ([#993](https://github.com/mdn/fred/issues/993)) ([1242fd4](https://github.com/mdn/fred/commit/1242fd4d39d0b868c4a6f51ba5581ad35b442600))
+* **search-modal:** fix unexpected autocompletions from search input ([1242fd4](https://github.com/mdn/fred/commit/1242fd4d39d0b868c4a6f51ba5581ad35b442600))
+
+
+### Miscellaneous
+
+* **deps-dev:** bump @mdn/browser-compat-data from 7.1.14 to 7.1.15 ([#953](https://github.com/mdn/fred/issues/953)) ([64151d6](https://github.com/mdn/fred/commit/64151d6030a5f5660419fddb1a4d1c391b9dd515))
+* **deps-dev:** bump @mdn/browser-compat-data from 7.1.15 to 7.1.16 ([#999](https://github.com/mdn/fred/issues/999)) ([b4dc524](https://github.com/mdn/fred/commit/b4dc5242a5353902412db50f655c643aa5611a95))
+* **deps-dev:** bump @mdn/browser-compat-data from 7.1.16 to 7.1.17 ([#1015](https://github.com/mdn/fred/issues/1015)) ([126d6ff](https://github.com/mdn/fred/commit/126d6ff93a877f5f990305e1532b74da0bf947f1))
+* **deps-dev:** bump @types/express from 5.0.4 to 5.0.5 in the dev group ([#1009](https://github.com/mdn/fred/issues/1009)) ([2636ff3](https://github.com/mdn/fred/commit/2636ff3cfc4712a202f53d9b9e72d600f3bf2cfc))
+* **deps-dev:** bump eslint-plugin-jsdoc from 55.0.3 to 61.1.4 ([2d50777](https://github.com/mdn/fred/commit/2d50777d71b76e605dad3c086225bac43bfd7eae))
+* **deps-dev:** bump eslint-plugin-jsdoc from 55.0.3 to 61.1.4 ([#918](https://github.com/mdn/fred/issues/918)) ([2d50777](https://github.com/mdn/fred/commit/2d50777d71b76e605dad3c086225bac43bfd7eae))
+* **deps-dev:** bump eslint-plugin-unicorn from 61.0.2 to 62.0.0 ([#998](https://github.com/mdn/fred/issues/998)) ([bdf76af](https://github.com/mdn/fred/commit/bdf76af48db723447d9377479b1a0ccb8b205253))
+* **deps-dev:** bump lefthook from 1.13.6 to 2.0.0 ([#949](https://github.com/mdn/fred/issues/949)) ([8b5c31b](https://github.com/mdn/fred/commit/8b5c31b0b6d3f112751ffc529b91141305b80199))
+* **deps-dev:** bump the dev group with 5 updates ([#958](https://github.com/mdn/fred/issues/958)) ([78ffe61](https://github.com/mdn/fred/commit/78ffe61f0415c2229a96bfd203bd4f7f6b0d78d6))
+* **deps-dev:** bump the dev group with 5 updates ([#996](https://github.com/mdn/fred/issues/996)) ([e32d4c1](https://github.com/mdn/fred/commit/e32d4c1cc215d4fa405189e4ee2390946b881a90))
+* **deps-dev:** migrate from `@typescript-eslint/eslint-plugin` to `typescript-eslint` ([#946](https://github.com/mdn/fred/issues/946)) ([2d50777](https://github.com/mdn/fred/commit/2d50777d71b76e605dad3c086225bac43bfd7eae))
+* **deps:** bump @mdn/rari from 0.1.53 to 0.1.54 ([#1010](https://github.com/mdn/fred/issues/1010)) ([03480ae](https://github.com/mdn/fred/commit/03480aea9914f8b1450d3567d990ed0065e915d7))
+* **deps:** bump @mdn/watify from 1.1.3 to 1.1.4 ([#1014](https://github.com/mdn/fred/issues/1014)) ([baafc43](https://github.com/mdn/fred/commit/baafc4373fb9f7762b086a81db0c1f61c01dde97))
+* **deps:** bump @mdn/watify from 1.1.4 to 1.1.5 ([#1043](https://github.com/mdn/fred/issues/1043)) ([9dc734b](https://github.com/mdn/fred/commit/9dc734bb9787ce563d408929cf512b707c87ffc7))
+* **l10n:** localize more strings ([#893](https://github.com/mdn/fred/issues/893)) ([8fd8227](https://github.com/mdn/fred/commit/8fd822729c16c75eabb59c28236b5f481870a07e))
+* **menu:** improve Learn items ([#942](https://github.com/mdn/fred/issues/942)) ([32442b2](https://github.com/mdn/fred/commit/32442b2fa21af6b3c6089ab55d027879f95bb8ec))
+* **menu:** update Layout Cookbook slugs ([#1023](https://github.com/mdn/fred/issues/1023)) ([d2d89ae](https://github.com/mdn/fred/commit/d2d89aef8ce72487b8e52085901f8153bd2b444e))
+* migrate GitHub team references ([#1002](https://github.com/mdn/fred/issues/1002)) ([6f59543](https://github.com/mdn/fred/commit/6f5954333be011e38e9f9c49428d1465c1146e5f))
+* **npm:** migrate to Trusted Publishing ([#1019](https://github.com/mdn/fred/issues/1019)) ([a4414ad](https://github.com/mdn/fred/commit/a4414adcef346860854e2193fcbb355b3fd8bfec))
+
 ## [1.7.0](https://github.com/mdn/fred/compare/v1.6.2...v1.7.0) (2025-10-21)
 
 

package/CONTRIBUTING.md

@@ -46,7 +46,7 @@ If you want to contribute but don't know where to start or can't find a suitable
 
 Once you find an issue you'd like to work on, please post a comment saying you want to work on it.
 Something like "I want to work on this" is fine.
-Also, mention the community team using the `@mdn/mdn-community-engagement` handle to ensure someone will get back to you.
+Also, mention the community team using the `@mdn/community` handle to ensure someone will get back to you.
 
 ## Asking for help
 
@@ -54,7 +54,7 @@ The best way to reach us with a question when contributing is to use the followi
 
 - [Start a discussion](https://github.com/orgs/mdn/discussions)
 - Ask your question or highlight your discussion on [Matrix](https://matrix.to/#/#mdn:mozilla.org).
-- File an issue and tag the community team using the `@mdn/mdn-community-engagement` handle.
+- File an issue and tag the community team using the `@mdn/community` handle.
 
 ## Pull request process
 

package/README.md

@@ -4,7 +4,12 @@ MDN's next fr(ont)e(n)d.
 
 ## Getting started
 
-1. Copy `.env-dist` to `.env` and update
+1. Copy `.env-dist` to `.env` and update values as needed. The file contains comments for guidance:
+
+```bash
+   cp .env-dist .env
+```
+
 2. Install dependencies `npm install`
 3. Bring up the dev environment with `npm run start`
 
@@ -41,6 +46,30 @@ This is useful to test changes on mobile, tablets and other platforms.
 
 ## Development principles
 
+### Supported Browsers
+
+_tl;dr_ For visitors to MDN, we support the _Baseline widely available browser set_, with some minor modifications.
+
+#### Browsers
+
+The [_Baseline widely available browser set_](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility) is defined as browsers from the _Core browser set_ whose initial release date is on or before 30 months prior to today's date, plus long-term support releases.
+
+MDN supports these browsers, along with Firefox for iOS and all currently active Firefox ESR versions:
+
+- Apple Safari (iOS, macOS) — released within the last 2½ years
+- Google Chrome (Android, Desktop) — released within the last 2½ years
+- Microsoft Edge (Desktop) — released within the last 2½ years
+- Mozilla Firefox (Android, Desktop, iOS) — released within the last 2½ years
+- Mozilla Firefox ESR — currently supported by Mozilla
+
+#### "Supported"
+
+In this context, _supported_ means that any issues with rendering or functionality are considered bugs and will be addressed as soon as reasonably possible.
+
+For issues encountered while using unsupported browsers, we decide on a case-by-case assessment of whether the issue will be addressed; however, these issues may have lower priority. Issues with screen readers and other accessibility aids are likely to carry higher levels of importance.
+
+We make our best efforts to design MDN to degrade gracefully; however, there are no guarantees of any level of functionality outside the supported browser set.
+
 ### Environment variables
 
 See [the environment variables README](./components/env/README.md).
@@ -72,7 +101,7 @@ Logs a CSP hash for the source of the file during the production build.
 Most commonly used alongside `?source` to import the source of a file for inlining in a component, which needs to be allowlisted in our CSP:
 
 ```js
-import inlineScript from "./inline.js?source&csp=true`;
+import inlineScript from "./inline.js?source&csp=true";
 ```
 
 ### Layout

package/components/breadcrumbs-bar/server.css

@@ -31,6 +31,18 @@
     display: none;
   }
 
+  mdn-color-theme,
+  mdn-language-switcher {
+    display: flex;
+  }
+
+  mdn-color-theme,
+  mdn-language-switcher,
+  mdn-color-theme::part(button),
+  mdn-language-switcher::part(button) {
+    height: 100%;
+  }
+
   @media (--screen-layout-1-sidebar-or-less) {
     &:has(mdn-toggle-sidebar) {
       padding-left: 0;

package/components/color-theme/element.js

@@ -63,6 +63,7 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
     return html`<div class="color-theme">
       <mdn-dropdown>
         <button
+          part="button"
           slot="button"
           class="color-theme__button"
           data-mode=${this._mode}

package/components/content-feedback/element.js

@@ -14,24 +14,6 @@ import styles from "./element.css?lit";
  * @typedef {"outdated"|"incomplete"|"code_examples"|"technical"|"consistency"|"incomprehensible"|"linguistic"|"other"} FeedbackReason
  */
 
-/** @type {Partial<Record<FeedbackReason, string>>} */
-const FEEDBACK_REASONS = {
-  outdated: "Content is out of date",
-  incomplete: "Missing information",
-  code_examples: "Code examples not working as expected",
-  other: "Other",
-};
-
-/** @type {Partial<Record<FeedbackReason, string>>} */
-const FEEDBACK_REASONS_DE = {
-  technical: "Übersetzung enthält fachliche Fehler",
-  consistency: "Begriffe sind inkonsistent übersetzt",
-  incomprehensible: "Übersetzung ist nicht verständlich",
-  linguistic: "Übersetzung enthält sprachliche Fehler",
-  code_examples: "Code-Beispiele funktionieren nicht",
-  other: "Sonstige",
-};
-
 export class MDNContentFeedback extends L10nMixin(LitElement) {
   static styles = styles;
 
@@ -70,6 +52,60 @@ export class MDNContentFeedback extends L10nMixin(LitElement) {
     gleanClick(`article_footer: feedback -> ${this._reason}`);
   }
 
+  /**
+   * Get list of feedback reasons with localized labels
+   * @returns {Array<{key: FeedbackReason, label: import("@lit").L10nResult}>}
+   */
+  _getFeedbackReasons() {
+    if (this.locale === "de") {
+      return [
+        {
+          key: "technical",
+          label: "Übersetzung enthält fachliche Fehler",
+        },
+        {
+          key: "consistency",
+          label: "Begriffe sind inkonsistent übersetzt",
+        },
+        {
+          key: "incomprehensible",
+          label: "Übersetzung ist nicht verständlich",
+        },
+        {
+          key: "linguistic",
+          label: "Übersetzung enthält sprachliche Fehler",
+        },
+        {
+          key: "code_examples",
+          label: "Code-Beispiele funktionieren nicht",
+        },
+        {
+          key: "other",
+          label: "Sonstige",
+        },
+      ];
+    }
+
+    return [
+      {
+        key: "outdated",
+        label: this.l10n`Content is out of date`,
+      },
+      {
+        key: "incomplete",
+        label: this.l10n`Missing information`,
+      },
+      {
+        key: "code_examples",
+        label: this.l10n`Code examples not working as expected`,
+      },
+      {
+        key: "other",
+        label: this.l10n`Other`,
+      },
+    ];
+  }
+
   _renderVote() {
     return html`<label
         >${this.l10n(
@@ -107,15 +143,15 @@ export class MDNContentFeedback extends L10nMixin(LitElement) {
         }
       };
 
+    const reasons = this._getFeedbackReasons();
+
     return html`<label
         >${this.l10n(
           "content-feedback-reason",
         )`Why was this page not helpful to you?`}</label
       >
-      ${Object.entries(
-        this.locale === "de" ? FEEDBACK_REASONS_DE : FEEDBACK_REASONS,
-      ).map(
-        ([key, label]) =>
+      ${reasons.map(
+        ({ key, label }) =>
           html`<div class="content-feedback--radios">
             <input
               type="radio"

package/components/content-section/server.css

@@ -119,7 +119,20 @@
 
   code {
     padding: 0.125em 0.25em;
-    border-radius: 0.25em;
+    border-radius: var(--radius-normal);
+  }
+
+  kbd {
+    padding: 0.0625em 0.125em;
+
+    font-family: var(--font-family-code);
+
+    color: var(--color-text-secondary);
+
+    background-color: var(--color-background-primary);
+    border: 1px solid var(--color-border-primary);
+    border-bottom-width: 2px;
+    border-radius: var(--radius-normal);
   }
 
   img {
@@ -127,7 +140,7 @@
 
     margin: 2rem auto;
 
-    background-color: var(--color-background-secondary);
+    background-color: var(--color-white);
     border: 1px solid var(--color-border-primary);
     border-radius: 0.25rem;
   }

package/components/env/index.js

@@ -8,6 +8,9 @@ export const PLAYGROUND_LOCAL = parseBool("PLAYGROUND_LOCAL", false, {
   runtime: true,
 });
 export const PORT = parseInt("PORT", 3000, { runtime: true });
+export const OPEN_BROWSER_ON_START = parseBool("OPEN_BROWSER_ON_START", false, {
+  runtime: true,
+});
 export const PLAYGROUND_PORT = parseInt("PLAYGROUND_PORT", 3001, {
   runtime: true,
 });

package/components/heading-anchor/server.js

@@ -11,8 +11,6 @@ export class HeadingAnchor extends ServerComponent {
    * @param {string} title
    */
   render(level, id, title) {
-    // remove leading numbers, dots, underscores, and commas to form a valid element id
-    id = id ? id.replace(/^[0-9._,]+/, "") : id;
     return id
       ? hh`<${unsafeStatic("h" + level)} id=${ifDefined(id)} class="heading"><a class="heading-anchor" href="#${id}">${unsafeStatic(title)}</a></${unsafeStatic("h" + level)}>`
       : nothing;

package/components/issues-table/element.js

@@ -1,8 +1,10 @@
 import { LitElement, html, nothing } from "lit";
 
+import { L10nMixin } from "../../l10n/mixin.js";
+
 import styles from "./element.css?lit";
 
-export class MDNIssuesTable extends LitElement {
+export class MDNIssuesTable extends L10nMixin(LitElement) {
   static styles = styles;
 
   static properties = {
@@ -58,7 +60,7 @@ export class MDNIssuesTable extends LitElement {
 
   render() {
     if (this._isLoading) {
-      return html`loading issues…`;
+      return html`${this.l10n`loading issues…`}`;
     }
     if (this._error) {
       return html`${this._error}`;
@@ -71,8 +73,8 @@ export class MDNIssuesTable extends LitElement {
       <table>
         <thead>
           <tr>
-            <th>Title</th>
-            <th>Repository</th>
+            <th>${this.l10n`Title`}</th>
+            <th>${this.l10n`Repository`}</th>
           </tr>
         </thead>
         <tbody>

package/components/language-switcher/element.js

@@ -82,6 +82,7 @@ export class MDNLanguageSwitcher extends L10nMixin(LitElement) {
     return html`<div class="language-switcher">
       <mdn-dropdown>
         <button
+          part="button"
           slot="button"
           class="language-switcher__button"
           type="button"

package/components/menu/constants.js

@@ -104,15 +104,18 @@ export const TABS = [
         title: "Layout cookbook",
         items: [
           {
-            slug: "Web/CSS/Layout_cookbook/Column_layouts",
+            slug: "Web/CSS/How_to/Layout_cookbook/Column_layouts",
             text: "Column layouts",
           },
           {
-            slug: "Web/CSS/Layout_cookbook/Center_an_element",
+            slug: "Web/CSS/How_to/Layout_cookbook/Center_an_element",
             text: "Centering an element",
           },
-          { slug: "Web/CSS/Layout_cookbook/Card", text: "Card component" },
-          { slug: "Web/CSS/Layout_cookbook", text: "See all…" },
+          {
+            slug: "Web/CSS/How_to/Layout_cookbook/Card",
+            text: "Card component",
+          },
+          { slug: "Web/CSS/How_to/Layout_cookbook", text: "See all…" },
         ],
       },
     ],
@@ -285,12 +288,12 @@ export const TABS = [
         items: [
           {
             slug: "Learn_web_development/Getting_started",
-            text: "Getting started",
+            text: "Getting started modules",
           },
-          { slug: "Learn_web_development/Howto", text: "Common questions" },
+          { slug: "Learn_web_development/Core", text: "Core modules" },
           {
             href: "/en-US/curriculum/",
-            text: "Curriculum",
+            text: "MDN Curriculum",
           },
         ],
       },
@@ -299,11 +302,7 @@ export const TABS = [
         items: [
           {
             slug: "Learn_web_development/Core/Structuring_content",
-            text: "Introduction to HTML",
-          },
-          {
-            slug: "Learn_web_development/Core/Structuring_content/Basic_HTML_syntax",
-            text: "Getting started with HTML",
+            text: "Structuring content with HTML module",
           },
         ],
       },
@@ -311,12 +310,12 @@ export const TABS = [
         title: "Learn CSS",
         items: [
           {
-            slug: "Learn_web_development/Core/Styling_basics/What_is_CSS",
-            text: "What is CSS",
+            slug: "Learn_web_development/Core/Styling_basics",
+            text: "CSS styling basics module",
           },
           {
-            slug: "Learn_web_development/Core/Styling_basics/Getting_started",
-            text: "Getting started with CSS",
+            slug: "Learn_web_development/Core/CSS_layout",
+            text: "CSS layout module",
           },
         ],
       },
@@ -324,12 +323,8 @@ export const TABS = [
         title: "Learn JavaScript",
         items: [
           {
-            slug: "Web/HTML/How_to/Use_data_attributes",
-            text: "How to use data attributes",
-          },
-          {
-            slug: "Web/HTML/How_to/Add_JavaScript_to_your_web_page",
-            text: "Add JavaScript to your web page",
+            slug: "Learn_web_development/Core/Scripting",
+            text: "Dynamic scripting with JavaScript module",
           },
         ],
       },

package/components/menu/missing-docs.json

@@ -1,32 +1,28 @@
 {
   "es": [
-    "Web/API/HTML_DOM_API",
     "Web/API/History_API/Working_with_the_History_API",
     "Web/API/Web_Animations_API/Using_the_Web_Animations_API",
-    "Web/CSS/CSS_values_and_units",
     "Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator",
     "Web/CSS/CSS_colors/Color_mixer",
     "Web/CSS/CSS_shapes/Shape_generator",
+    "Web/CSS/CSS_values_and_units",
     "Web/CSS/Guides",
-    "Web/CSS/Layout_cookbook/Card",
-    "Web/CSS/Layout_cookbook/Center_an_element",
-    "Web/CSS/Layout_cookbook/Column_layouts",
+    "Web/CSS/How_to/Layout_cookbook/Card",
+    "Web/CSS/How_to/Layout_cookbook/Center_an_element",
+    "Web/CSS/How_to/Layout_cookbook/Column_layouts",
     "Web/CSS/Properties",
     "Web/HTML/Guides",
     "Web/HTML/Guides/Cheatsheet",
     "Web/HTML/Guides/Date_and_time_formats",
-    "Web/HTML/How_to/Add_JavaScript_to_your_web_page",
     "Web/JavaScript/Guide/Using_classes",
     "Web/Privacy",
     "Web/URI",
     "Web/WebDriver"
   ],
   "fr": [],
-  "ja": [
-    "Web/CSS/CSS_colors/Color_mixer",
-    "Web/CSS/CSS_shapes/Shape_generator"
-  ],
+  "ja": [],
   "ko": [
+    "Learn_web_development/Core",
     "Web/API/Performance",
     "Web/API/Web_Animations_API/Using_the_Web_Animations_API",
     "Web/API/Web_Speech_API/Using_the_Web_Speech_API",
@@ -34,38 +30,36 @@
     "Web/CSS/CSS_colors/Color_mixer",
     "Web/CSS/CSS_shapes/Shape_generator",
     "Web/CSS/Guides",
-    "Web/CSS/Layout_cookbook",
-    "Web/CSS/Layout_cookbook/Card",
-    "Web/CSS/Layout_cookbook/Column_layouts",
+    "Web/CSS/How_to/Layout_cookbook",
+    "Web/CSS/How_to/Layout_cookbook/Card",
+    "Web/CSS/How_to/Layout_cookbook/Column_layouts",
     "Web/CSS/Properties",
     "Web/HTML/Guides",
     "Web/HTML/Guides/Cheatsheet",
-    "Web/HTML/How_to/Add_JavaScript_to_your_web_page",
     "Web/JavaScript/Guide/Using_classes",
-    "Web/URI",
     "Web/WebDriver"
   ],
   "pt-BR": [
+    "Learn_web_development/Core",
     "Learn_web_development/Getting_started",
     "Web/API/File_System_API",
     "Web/API/HTML_DOM_API",
     "Web/API/Performance",
     "Web/API/Web_Speech_API/Using_the_Web_Speech_API",
     "Web/API/Web_Workers_API/Using_web_workers",
-    "Web/CSS/CSS_values_and_units",
     "Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator",
     "Web/CSS/CSS_colors",
     "Web/CSS/CSS_colors/Color_mixer",
     "Web/CSS/CSS_shapes/Shape_generator",
+    "Web/CSS/CSS_values_and_units",
     "Web/CSS/Guides",
-    "Web/CSS/Layout_cookbook/Card",
-    "Web/CSS/Layout_cookbook/Center_an_element",
-    "Web/CSS/Layout_cookbook/Column_layouts",
+    "Web/CSS/How_to/Layout_cookbook/Card",
+    "Web/CSS/How_to/Layout_cookbook/Center_an_element",
+    "Web/CSS/How_to/Layout_cookbook/Column_layouts",
     "Web/CSS/Properties",
     "Web/HTML/Guides",
     "Web/HTML/Guides/Cheatsheet",
     "Web/HTML/Guides/Date_and_time_formats",
-    "Web/HTML/How_to/Add_JavaScript_to_your_web_page",
     "Web/JavaScript/Guide/Using_classes",
     "Web/Media",
     "Web/Privacy",
@@ -74,20 +68,20 @@
     "Web/XML"
   ],
   "ru": [
+    "Learn_web_development/Core",
     "Learn_web_development/Getting_started",
     "Web/API/HTML_DOM_API",
-    "Web/CSS/CSS_values_and_units",
     "Web/CSS/CSS_colors/Color_mixer",
     "Web/CSS/CSS_shapes/Shape_generator",
+    "Web/CSS/CSS_values_and_units",
     "Web/CSS/Guides",
-    "Web/CSS/Layout_cookbook/Card",
-    "Web/CSS/Layout_cookbook/Center_an_element",
-    "Web/CSS/Layout_cookbook/Column_layouts",
+    "Web/CSS/How_to/Layout_cookbook/Card",
+    "Web/CSS/How_to/Layout_cookbook/Center_an_element",
+    "Web/CSS/How_to/Layout_cookbook/Column_layouts",
     "Web/CSS/Properties",
     "Web/HTML/Guides",
     "Web/HTML/Guides/Cheatsheet",
     "Web/HTML/Guides/Date_and_time_formats",
-    "Web/HTML/How_to/Add_JavaScript_to_your_web_page",
     "Web/JavaScript/Guide/Using_classes",
     "Web/Media",
     "Web/Privacy",
@@ -95,6 +89,7 @@
   ],
   "zh-CN": ["Web/CSS/Properties"],
   "zh-TW": [
+    "Learn_web_development/Core",
     "Learn_web_development/Getting_started",
     "Web/API/File_System_API",
     "Web/API/HTML_DOM_API",
@@ -104,7 +99,6 @@
     "Web/API/Service_Worker_API",
     "Web/API/Web_Animations_API/Using_the_Web_Animations_API",
     "Web/API/Web_Speech_API/Using_the_Web_Speech_API",
-    "Web/CSS/CSS_values_and_units",
     "Web/CSS/CSS_backgrounds_and_borders/Border-image_generator",
     "Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator",
     "Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator",
@@ -113,19 +107,18 @@
     "Web/CSS/CSS_colors/Color_mixer",
     "Web/CSS/CSS_shapes/Shape_generator",
     "Web/CSS/CSS_syntax/At-rule",
+    "Web/CSS/CSS_values_and_units",
     "Web/CSS/Guides",
-    "Web/CSS/Layout_cookbook",
-    "Web/CSS/Layout_cookbook/Card",
-    "Web/CSS/Layout_cookbook/Center_an_element",
-    "Web/CSS/Layout_cookbook/Column_layouts",
+    "Web/CSS/How_to/Layout_cookbook",
+    "Web/CSS/How_to/Layout_cookbook/Card",
+    "Web/CSS/How_to/Layout_cookbook/Center_an_element",
+    "Web/CSS/How_to/Layout_cookbook/Column_layouts",
     "Web/CSS/Properties",
     "Web/CSS/Reference",
     "Web/HTML/Guides",
     "Web/HTML/Guides/Cheatsheet",
     "Web/HTML/Guides/Date_and_time_formats",
     "Web/HTML/Guides/Responsive_images",
-    "Web/HTML/How_to/Add_JavaScript_to_your_web_page",
-    "Web/HTML/How_to/Use_data_attributes",
     "Web/HTML/Reference/Elements",
     "Web/HTML/Reference/Global_attributes",
     "Web/JavaScript/Guide/Using_classes",

package/components/modal/element.js

@@ -1,11 +1,12 @@
 import { LitElement, html, nothing } from "lit";
 
+import { L10nMixin } from "../../l10n/mixin.js";
 import exitIcon from "../icon/cancel.svg?lit";
 
 import "../button/element.js";
 import styles from "./element.css?lit";
 
-export class MDNModal extends LitElement {
+export class MDNModal extends L10nMixin(LitElement) {
   static styles = styles;
 
   static properties = {
@@ -35,7 +36,7 @@ export class MDNModal extends LitElement {
             icon-only
             .icon=${exitIcon}
             @click=${this.close}
-            >Exit modal</mdn-button
+            >${this.l10n`Exit modal`}</mdn-button
           >
         </header>
         <slot></slot>

package/components/navigation/server.js

@@ -29,7 +29,7 @@ export class Navigation extends ServerComponent {
           type="button"
           aria-expanded="false"
           aria-controls="navigation__popup"
-          aria-label="Toggle navigation"
+          aria-label=${context.l10n`Toggle navigation`}
         ></button>
         <div class="navigation__popup" id="navigation__popup">
           <div class="navigation__menu">${Menu.render(context)}</div>