@mdn/fred 1.6.2 → 1.8.0

package/.env-dist

@@ -25,6 +25,10 @@ RARI_URL="http://localhost:8083"
 # FRED_GLEAN_ENABLED=true
 # FRED_GLEAN_DEBUG=true
 
+# uncomment to enable Google Analytics 4
+# FRED_GA_ENABLED=true
+# FRED_GA_MEASUREMENT_ID=G-XXXXXXXXXX
+
 # legacy react-specific environment variables
 REACT_APP_KUMA_HOST="localhost:3000"
 REACT_APP_FXA_SIGNIN_URL="/users/fxa/login/authenticate/"

package/CHANGELOG.md

@@ -1,5 +1,71 @@
 # 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)
+
+
+### Features
+
+* **menu:** convert content to data + manage missing with script ([#861](https://github.com/mdn/fred/issues/861)) ([e9be891](https://github.com/mdn/fred/commit/e9be891e1972ebecd4160e6e6b9f6e34aa491616))
+* **telemetry:** port Google Analytics ([#905](https://github.com/mdn/fred/issues/905)) ([e88d977](https://github.com/mdn/fred/commit/e88d977effe722f5619aebd9cdac64e796ceb530))
+
+
+### Bug Fixes
+
+* **live-sample-result:** use code hash as subdomain ([#922](https://github.com/mdn/fred/issues/922)) ([db48f7b](https://github.com/mdn/fred/commit/db48f7b8f9a858a2c85b6ea3727d9e6468374b49))
+* **windows:** remove fdir from ssr bundle ([#926](https://github.com/mdn/fred/issues/926)) ([f724bff](https://github.com/mdn/fred/commit/f724bff89278402e958da1a7a90e5d4a5e2dcb6b))
+
+
+### Miscellaneous
+
+* **deps-dev:** bump @mdn/browser-compat-data from 7.1.12 to 7.1.13 ([#916](https://github.com/mdn/fred/issues/916)) ([81b9966](https://github.com/mdn/fred/commit/81b99662edbdd0abb1da8641a6491d7010a3adf0))
+* **deps-dev:** bump @mdn/browser-compat-data from 7.1.13 to 7.1.14 ([#938](https://github.com/mdn/fred/issues/938)) ([411240f](https://github.com/mdn/fred/commit/411240f96714cf6c5404645cdc913e637ed72809))
+* **deps-dev:** bump the dev group across 1 directory with 6 updates ([#943](https://github.com/mdn/fred/issues/943)) ([2911855](https://github.com/mdn/fred/commit/29118556f9d618fa41c860de781d54064a03d34e))
+* **deps:** bump @mdn/rari from 0.1.52 to 0.1.53 ([#932](https://github.com/mdn/fred/issues/932)) ([42d79e4](https://github.com/mdn/fred/commit/42d79e42187698697d080d2d5d7de721e96220e8))
+* **l10n:** update french localization strings for various features ([#767](https://github.com/mdn/fred/issues/767)) ([be247ea](https://github.com/mdn/fred/commit/be247eafcbf5dc48dc300919c8bd5be6fac846d5))
+* **menu:** adjust case of "CSS values and units" links ([#910](https://github.com/mdn/fred/issues/910)) ([236a727](https://github.com/mdn/fred/commit/236a7275dcaf3e98a657674f72b8628743774338))
+* update ill cased links ([236a727](https://github.com/mdn/fred/commit/236a7275dcaf3e98a657674f72b8628743774338))
+
 ## [1.6.2](https://github.com/mdn/fred/compare/v1.6.1...v1.6.2) (2025-10-13)
 
 

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/build/eslint-fred.js

@@ -1,6 +1,6 @@
 import path from "node:path";
 
-import { toCamelCase } from "./utils.js";
+import { camelToKebabCase } from "../utils/name-transformation.js";
 
 /** @type {import("eslint").ESLint.Plugin} */
 export default {
@@ -26,7 +26,9 @@ export default {
                 });
               }
 
-              const expectedDir = toCamelCase(className.replace(/^MDN/, ""));
+              const expectedDir = camelToKebabCase(
+                className.replace(/^MDN/, ""),
+              );
               const expectedPath = path.join(
                 "components",
                 expectedDir,
@@ -57,7 +59,7 @@ export default {
             const [className, superClassName] = getClassNames(node);
 
             if (superClassName === "ServerComponent") {
-              const expectedDir = toCamelCase(className);
+              const expectedDir = camelToKebabCase(className);
               const expectedPath = path.join(
                 "components",
                 expectedDir,
@@ -95,7 +97,7 @@ export default {
                 });
               }
 
-              const expectedDir = toCamelCase(
+              const expectedDir = camelToKebabCase(
                 className.replace(/Sandbox$/, ""),
               );
               const expectedPath = path.join(

package/build/plugins/generate-element-map.js

@@ -1,7 +1,8 @@
 import fs from "node:fs/promises";
 import path from "node:path";
 
-import { crawl, toPascalCase } from "../utils.js";
+import { kebabToPascalCase } from "../../utils/name-transformation.js";
+import { crawl } from "../utils.js";
 
 /**
  * @import { Compiler } from "@rspack/core"
@@ -26,7 +27,7 @@ export class GenerateElementMapPlugin {
             path.relative(compiler.context, filePath).replaceAll("\\", "/");
           const folderName = relPath.split("/").at(-2);
           const tagName = `mdn-${folderName}`;
-          const className = toPascalCase(tagName);
+          const className = kebabToPascalCase(tagName);
           return `"${tagName}": import("${relPath}").${className};`;
         });
 

package/build/utils.js

@@ -1,28 +1,5 @@
 import { fdir } from "fdir";
 
-const ACRONYMS = new Set(["MDN", "IX"]);
-
-/** @param {string} name */
-export function toPascalCase(name) {
-  return name
-    .split("-")
-    .map((word) => {
-      if (ACRONYMS.has(word.toUpperCase())) {
-        return word.toUpperCase();
-      }
-      return word.charAt(0).toUpperCase() + word.slice(1);
-    })
-    .join("");
-}
-
-/** @param {string} name */
-export function toCamelCase(name) {
-  return name
-    .replaceAll(/([a-z0-9])([A-Z])/g, "$1-$2")
-    .replaceAll(/([A-Z])([A-Z][a-z])/g, "$1-$2")
-    .toLowerCase();
-}
-
 /**
  * @param {string} root
  * @param {(path: string, isDirectory: boolean) => boolean} filter

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/curriculum/module.css

@@ -93,6 +93,7 @@
 
             background: var(--curriculum-bg-color);
             border-radius: 1em;
+
             text-rendering: optimizelegibility;
           }
         }

package/components/curriculum-module/server.css

@@ -111,6 +111,7 @@
 
           background: var(--curriculum-bg-color);
           border-radius: 1em;
+
           text-rendering: optimizelegibility;
         }
       }

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,
 });
@@ -21,6 +24,9 @@ export const FXA_SIGNOUT_URL = parseString(
   "/users/fxa/login/logout/",
 );
 
+export const GA_ENABLED = parseBool("GA_ENABLED", false);
+export const GA_MEASUREMENT_ID = parseString("GA_MEASUREMENT_ID", "");
+
 /** Set to non-prod default, because we don't want glean to run without explicitly enabling. */
 export const GLEAN_ENABLED = parseBool("GLEAN_ENABLED", false);
 /** Set to non-prod default, because we don't want glean to run without explicitly enabling. */

package/components/footer/server.js

@@ -129,7 +129,7 @@ const mozillaLinks = (context) => [
     external: true,
   },
   {
-    text: context.l10n`Cookies`,
+    text: context.l10n`Telemetry Settings`,
     href: "https://www.mozilla.org/en-US/privacy/websites/data-preferences/",
     external: 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/live-sample-result/element.js

@@ -113,6 +113,7 @@ export class MDNLiveSampleResult extends L10nMixin(LitElement) {
             ...new Set(["allow-modals", ...(this.sandbox?.split(" ") || [])]),
           ].join(" ")}
           .srcPrefix=${this.srcPrefix}
+          permalink
           style=${styleMap({
             height: this.height
               ? `${this.height}${/[0-9]$/.test(this.height) ? "px" : ""}`

package/components/menu/base.css

@@ -158,7 +158,6 @@
 
 .menu__panel-icon {
   display: inline-flex;
-  column-gap: 0.5rem;
   align-items: center;
 
   &::before {
@@ -167,6 +166,8 @@
     width: 1.25rem;
     height: 1.25rem;
 
+    margin-inline-end: 0.5rem;
+
     content: "";
 
     background-color: currentcolor;