@mdn/fred 2.4.3 → 2.6.0

package/.nvmrc

@@ -1 +1 @@
-v24
+v24.15.0

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # Changelog
 
+## [2.6.0](https://github.com/mdn/fred/compare/v2.5.0...v2.6.0) (2026-04-28)
+
+
+### Features
+
+* **glean:** port missing measurements ([#1279](https://github.com/mdn/fred/issues/1279)) ([bdbc1a1](https://github.com/mdn/fred/commit/bdbc1a166cbd4fd2dd01ce898b0f5ff7837599d9))
+
+
+### Bug Fixes
+
+* **content-section:** add iframe styling ([#1414](https://github.com/mdn/fred/issues/1414)) ([2696dbc](https://github.com/mdn/fred/commit/2696dbc9ad769855ef9c3356a54ef06ebdcd132c))
+
+
+### Miscellaneous
+
+* **deps-dev:** bump @mdn/browser-compat-data from 7.3.12 to 7.3.13 ([#1517](https://github.com/mdn/fred/issues/1517)) ([6dbfba4](https://github.com/mdn/fred/commit/6dbfba4c396c0490f753c7a0cbc8e29f267adacb))
+* **deps-dev:** bump postcss from 8.5.10 to 8.5.12 in the npm-dev group ([#1516](https://github.com/mdn/fred/issues/1516)) ([b605a17](https://github.com/mdn/fred/commit/b605a170bb1c003c728ecee9695197add9e07957))
+* **deps-dev:** bump the npm-dev group with 2 updates ([#1519](https://github.com/mdn/fred/issues/1519)) ([e1f4d25](https://github.com/mdn/fred/commit/e1f4d258df237b192d391e337b72e5026ed022d0))
+* **deps:** bump @mdn/rari from 0.2.20 to 0.2.21 ([#1525](https://github.com/mdn/fred/issues/1525)) ([63a0803](https://github.com/mdn/fred/commit/63a08039823627b6816469f7798ed54941b33a30))
+* **I10n:** add Simplified Chinese translation ([#1510](https://github.com/mdn/fred/issues/1510)) ([ae1bf08](https://github.com/mdn/fred/commit/ae1bf083d88e3579d99e3587b687245ce26a8107))
+
+## [2.5.0](https://github.com/mdn/fred/compare/v2.4.3...v2.5.0) (2026-04-23)
+
+
+### Features
+
+* **baseline-indicator:** add renderSimplified method ([#1500](https://github.com/mdn/fred/issues/1500)) ([556412d](https://github.com/mdn/fred/commit/556412d6ac6b5398e773eedd89fa4ae710ad6f43))
+* **bcd:** render links to JSON in simplified HTML ([#1502](https://github.com/mdn/fred/issues/1502)) ([d82fd33](https://github.com/mdn/fred/commit/d82fd33921bea39e23c2b1aae3123848ddae0b5c))
+* **specifications:** render a list in simplified mode ([#1504](https://github.com/mdn/fred/issues/1504)) ([abf1784](https://github.com/mdn/fred/commit/abf17843f6dc0f6a18f6bff6f523255ed74e37b2))
+
+
+### Bug Fixes
+
+* **sidebar-filter:** remove only highlight spans on reset ([#1496](https://github.com/mdn/fred/issues/1496)) ([c647e79](https://github.com/mdn/fred/commit/c647e794552c08f1574545378ba5986699633e7f))
+
+
+### Miscellaneous
+
+* **deps-dev:** bump @codemirror/view from 6.41.0 to 6.41.1 in the npm-dev group ([#1494](https://github.com/mdn/fred/issues/1494)) ([06be168](https://github.com/mdn/fred/commit/06be168411bf3efe7a38bc6a291e9a91b1b6c309))
+* **deps-dev:** bump @codemirror/view in the npm-dev group ([06be168](https://github.com/mdn/fred/commit/06be168411bf3efe7a38bc6a291e9a91b1b6c309))
+* **deps-dev:** bump npm from 11.6.2 to 11.12.1 ([#1490](https://github.com/mdn/fred/issues/1490)) ([fbc5e9a](https://github.com/mdn/fred/commit/fbc5e9a78d5332ade4f99d931011fc681c653f77))
+* **deps-dev:** bump stylelint from 17.8.0 to 17.9.0 in the npm-dev group ([#1514](https://github.com/mdn/fred/issues/1514)) ([87617be](https://github.com/mdn/fred/commit/87617be8e0f3c712385ccce424edf07756b9bf8c))
+* **deps-dev:** bump stylelint in the npm-dev group ([87617be](https://github.com/mdn/fred/commit/87617be8e0f3c712385ccce424edf07756b9bf8c))
+* **deps-dev:** bump typescript-eslint from 8.58.2 to 8.59.0 in the npm-dev group ([#1499](https://github.com/mdn/fred/issues/1499)) ([b25912c](https://github.com/mdn/fred/commit/b25912ceb942de26ac5df8153317b8de172a4e2c))
+* **deps-dev:** bump typescript-eslint in the npm-dev group ([b25912c](https://github.com/mdn/fred/commit/b25912ceb942de26ac5df8153317b8de172a4e2c))
+* **deps:** bump @mdn/rari from 0.2.19 to 0.2.20 ([#1515](https://github.com/mdn/fred/issues/1515)) ([d292b8a](https://github.com/mdn/fred/commit/d292b8aedf464a17ab7f5a3224fbeaef330ade2e))
+* **transcend:** use TRANSCEND_AIRGAP_URL ([#1497](https://github.com/mdn/fred/issues/1497)) ([5e8a62a](https://github.com/mdn/fred/commit/5e8a62a1437718631ca1ee010e53cda377126a1b))
+
 ## [2.4.3](https://github.com/mdn/fred/compare/v2.4.2...v2.4.3) (2026-04-17)
 
 

package/README.md

@@ -172,6 +172,8 @@ This issue is tracked upstream: https://github.com/lit/lit/issues/1434
 
 Any server component can define a `renderSimplified` method to define the simplified form of that component. When in the top-level `renderSimplified` context, any calls of `ServerComponent.render()` will automatically call the `renderSimplified` method of that component, falling back to the `render` method. This is so we can nest components with a `renderSimplified` method ("simplified components") within ones without.
 
+Server components also have a `simplifiedMode` property set, which is `true` when rendered from the top-level `renderSimplified` function: this allows a small tweak within a `render` method without having to totally re-implement logic in the `renderSimplified` method.
+
 There shouldn't be standalone simplified components: the nesting of components should be defined by the requirements of the `render` method. `renderSimplified` should only be added to a component which already exists with a `render` method to give a simplified view of it. This is especially important as, in the future, we may need to add options of what is/isn't rendered within `renderSimplified` for use in different contexts (one context may require a sidebar, another may not, for instance).
 
 You can preview the rendering locally by setting `FRED_SIMPLE_HTML`:

package/components/a11y-menu/server.js

@@ -9,14 +9,14 @@ export class A11yMenu extends ServerComponent {
   render(context) {
     return html`<ul class="a11y-menu">
       <li>
-        <a href="#content"
+        <a href="#content" data-glean-id="a11y_menu: click #content"
           >${context.l10n(
             "a11y-menu-skip-to-main-content",
           )`Skip to main content`}</a
         >
       </li>
       <li>
-        <a href="#search"
+        <a href="#search" data-glean-id="a11y_menu: click #search"
           >${context.l10n("a11y-menu-skip-to-search")`Skip to search`}</a
         >
       </li>

package/components/baseline-indicator/server.js

@@ -51,7 +51,43 @@ export class BaselineIndicator extends ServerComponent {
   static inlineScript = inlineScript;
 
   /**
-   *
+   * @param {string | null | undefined} date
+   */
+  parseDate(date) {
+    const lowDateRange = date?.match(/^([^0-9])/)?.[0];
+    return date ? new Date(date.slice(lowDateRange ? 1 : 0)) : undefined;
+  }
+
+  /**
+   * @param {import("@fred").Context<import("@rari").DocPage>} context
+   * @param {string} level
+   * @param {Date} [lowDate]
+   */
+  getExtraText(context, level, lowDate) {
+    return level === "high" && lowDate
+      ? context.l10n.raw({
+          id: "baseline-high-extra",
+          args: {
+            date: lowDate.toLocaleDateString(context.locale, {
+              year: "numeric",
+              month: "long",
+            }),
+          },
+        })
+      : level === "low" && lowDate
+        ? context.l10n.raw({
+            id: "baseline-low-extra",
+            args: {
+              date: lowDate.toLocaleDateString(DEFAULT_LOCALE, {
+                year: "numeric",
+                month: "long",
+              }),
+            },
+          })
+        : context.l10n("baseline-not-extra");
+  }
+
+  /**
    * @param {import("@fred").Context<import("@rari").DocPage>} context
    */
   render(context) {
@@ -71,11 +107,7 @@ export class BaselineIndicator extends ServerComponent {
       LOCALIZED_BCD_IDS[context.locale] || LOCALIZED_BCD_IDS[DEFAULT_LOCALE]
     }`;
 
-    const low_date_range = status.baseline_low_date?.match(/^([^0-9])/)?.[0];
-    const low_date = status.baseline_low_date
-      ? new Date(status.baseline_low_date.slice(low_date_range ? 1 : 0))
-      : undefined;
-
+    const lowDate = this.parseDate(status.baseline_low_date);
     const level = status.baseline || "not";
 
     const feedbackLink = `${SURVEY_URL}?page=${encodeURIComponent(context.url)}&level=${level}`;
@@ -154,7 +186,7 @@ export class BaselineIndicator extends ServerComponent {
                     ? context.l10n(
                         "baseline-indicator-widely-available",
                       )`Widely available`
-                    : low_date?.getFullYear()}
+                    : lowDate?.getFullYear()}
                 </span>
                 ${status.asterisk && " *"}
               `}
@@ -191,31 +223,7 @@ export class BaselineIndicator extends ServerComponent {
         <span class="icon icon-chevron"></span>
       </summary>
       <div class="extra">
-        ${level === "high" && low_date
-          ? html`<p>
-              ${context.l10n.raw({
-                id: "baseline-high-extra",
-                args: {
-                  date: low_date.toLocaleDateString(context.locale, {
-                    year: "numeric",
-                    month: "long",
-                  }),
-                },
-              })}
-            </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>`
-            : html`<p>${context.l10n("baseline-not-extra")}</p>`}
+        <p>${this.getExtraText(context, level, lowDate)}</p>
         ${status.asterisk
           ? html`<p>* ${context.l10n("baseline-asterisk")}</p>`
           : nothing}
@@ -254,4 +262,50 @@ export class BaselineIndicator extends ServerComponent {
       </div>
     </details>`;
   }
+
+  /**
+   * @param {import("@fred").Context<import("@rari").DocPage>} context
+   */
+  renderSimplified(context) {
+    const { doc } = context;
+
+    if (!doc) {
+      return nothing;
+    }
+
+    const status = doc.baseline;
+
+    if (!status) {
+      return nothing;
+    }
+
+    const lowDate = this.parseDate(status.baseline_low_date);
+    const level = status.baseline || "not";
+
+    return html`<p>
+      <strong>
+        ${level === "not"
+          ? context.l10n(
+              "baseline-indicator-limited-availability",
+            )`Limited availability`
+          : context.l10n("baseline-indicator-baseline")`Baseline`}
+        ${level === "high"
+          ? context.l10n(
+              "baseline-indicator-widely-available",
+            )`Widely available`
+          : level === "low"
+            ? html`${lowDate?.getFullYear()}
+              ${context.l10n(
+                "baseline-indicator-newly-available",
+              )`Newly available`}`
+            : nothing}
+        ${status.asterisk ? " *" : nothing}
+      </strong>
+      <br />
+      ${this.getExtraText(context, level, lowDate)}
+      ${status.asterisk
+        ? html`<br />* ${context.l10n("baseline-asterisk")}`
+        : nothing}
+    </p>`;
+  }
 }

package/components/breadcrumbs/server.js

@@ -18,6 +18,7 @@ export class Breadcrumbs extends ServerComponent {
       return nothing;
     }
 
+    const total = parents.length;
     return html`
       <ol
         class="breadcrumbs"
@@ -27,7 +28,11 @@ export class Breadcrumbs extends ServerComponent {
         ${parents.map(
           ({ uri, title }, index) => html`
             <li property="itemListElement" typeof="ListItem">
-              <a href=${uri} property="item" typeof="WebPage"
+              <a
+                href=${uri}
+                property="item"
+                typeof="WebPage"
+                data-glean-id="breadcrumb_click: ${total - index}/${total}"
                 ><span property="name">${title}</span></a
               >
               <meta property="position" content=${index + 1} />

package/components/collection-save-button/element.js

@@ -2,6 +2,7 @@ import { Task } from "@lit/task";
 import { LitElement, html, nothing } from "lit";
 
 import { L10nMixin } from "../../l10n/mixin.js";
+import { gleanClick } from "../../utils/glean.js";
 import { globalUser } from "../user/context.js";
 
 import styles from "./element.css?lit";
@@ -89,16 +90,26 @@ export class MDNCollectionSaveButton extends L10nMixin(LitElement) {
   });
 
   _open() {
+    this._selectFocusEventTriggered = false;
+    gleanClick("article_actions_collections_opened");
     this._bookmarks.run();
     this._collections.run();
     this.shadowRoot?.querySelector("mdn-modal")?.showModal();
   }
 
+  _selectOpen() {
+    if (!this._selectFocusEventTriggered) {
+      gleanClick("article_actions_collection_select_opened");
+      this._selectFocusEventTriggered = true;
+    }
+  }
+
   /** @param {Event} event */
   _selectChange({ target }) {
     if (target instanceof HTMLSelectElement) {
       const { value } = target;
       if (value === ADD_VALUE) {
+        gleanClick("article_actions_new_collection");
         this.shadowRoot?.querySelector("mdn-modal")?.close();
         open("/en-US/plus/collections");
       } else {
@@ -149,6 +160,9 @@ export class MDNCollectionSaveButton extends L10nMixin(LitElement) {
       this._lastAction = "save";
 
       const url = `/api/v2/collections/${collectionId}/items/${item ? `${item.id}/` : ""}`;
+
+      gleanClick("new_collection_modal_submit_article_actions");
+
       const res = await fetch(url, {
         body: JSON.stringify({
           url: this.docUrl,
@@ -229,6 +243,7 @@ export class MDNCollectionSaveButton extends L10nMixin(LitElement) {
                           )`Collection:`}
                           <select
                             .value=${this._item?.collection_id}
+                            @focus=${this._selectOpen}
                             @change=${this._selectChange}
                           >
                             ${collections.map(

package/components/color-theme/element.js

@@ -1,6 +1,7 @@
 import { LitElement, html } from "lit";
 
 import { L10nMixin } from "../../l10n/mixin.js";
+import { gleanClick } from "../../utils/glean.js";
 
 import styles from "./element.css?lit";
 
@@ -17,6 +18,7 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
     super();
     /** @type {import("./types.js").ColorScheme} */
     this._mode = "light dark";
+    this._closingFromSelect = false;
     this._options = Object.entries({
       "light dark": this.l10n("theme-default")`OS default`,
       light: this.l10n("color-theme-light")`Light`,
@@ -30,6 +32,8 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
       const mode = target.dataset.mode;
       if (mode === "light dark" || mode === "light" || mode === "dark") {
         this._mode = mode;
+        const gleanMode = mode === "light dark" ? "os-default" : mode;
+        gleanClick(`theme_switcher: switch -> ${gleanMode}`);
         try {
           localStorage.setItem("theme", mode);
         } catch (error) {
@@ -37,12 +41,24 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
         }
         const dropdown = this.shadowRoot?.querySelector("mdn-dropdown");
         if (dropdown) {
+          this._closingFromSelect = true;
           dropdown.open = false;
         }
       }
     }
   }
 
+  /** @param {Event} event */
+  _onDropdownToggle({ target }) {
+    if (target instanceof HTMLElement && "open" in target) {
+      if (!target.open && this._closingFromSelect) {
+        this._closingFromSelect = false;
+        return;
+      }
+      gleanClick(`theme_switcher: ${target.open ? "open" : "close"}`);
+    }
+  }
+
   /**
    * @param {import("lit").PropertyValues<this>} changedProperties
    */
@@ -61,7 +77,7 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
 
   render() {
     return html`<div class="color-theme">
-      <mdn-dropdown>
+      <mdn-dropdown @toggle=${this._onDropdownToggle}>
         <button
           part="button"
           slot="button"

package/components/compat-section/server.js

@@ -0,0 +1,45 @@
+import { html } from "@lit-labs/ssr";
+import { nothing } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+import { queryToUrl } from "../compat-table/utils.js";
+import { HeadingAnchor } from "../heading-anchor/server.js";
+import { ServerComponent } from "../server/index.js";
+
+export class CompatSection extends ServerComponent {
+  /**
+   * @param {import("@fred").Context} _context
+   * @param {import("@rari").Compat} section
+   */
+  render(_context, { id, title, query, isH3 }) {
+    const level = isH3 ? 3 : 2;
+    return html`<section
+      class="content-section"
+      aria-labelledby=${ifDefined(id ?? undefined)}
+    >
+      ${HeadingAnchor.render(level, id ? String(id) : null, String(title))}
+      <mdn-compat-table-lazy
+        locale="en-US"
+        query=${query}
+      ></mdn-compat-table-lazy>
+    </section>`;
+  }
+
+  /**
+   * @param {import("@fred").Context} _context
+   * @param {import("@rari").Compat} section
+   */
+  renderSimplified(_context, { id, title, query, isH3 }) {
+    return html`<section
+      class="content-section"
+      aria-labelledby=${ifDefined(id ?? undefined)}
+    >
+      ${isH3
+        ? nothing
+        : HeadingAnchor.render(2, id ? String(id) : null, String(title))}
+      <a href=${queryToUrl(query)} target="_blank" rel="noopener"
+        ><code>${query}</code></a
+      >
+    </section>`;
+  }
+}

package/components/compat-table/element.js

@@ -1,8 +1,11 @@
 import { LitElement, html, nothing } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 import { L10nMixin } from "../../l10n/mixin.js";
+import { gleanClick } from "../../utils/glean.js";
+import { ViewedController } from "../viewed-controller/viewed-controller.js";
 
 import { DEFAULT_LOCALE, ISSUE_METADATA_TEMPLATE } from "./constants.js";
 import styles from "./element.css?lit";
@@ -73,6 +76,9 @@ export class MDNCompatTable extends L10nMixin(LitElement) {
 
   static styles = styles;
 
+  /** @type {import("lit/directives/ref.js").Ref<HTMLElement>} */
+  _ref = createRef();
+
   constructor() {
     super();
     this.query = "";
@@ -88,6 +94,9 @@ export class MDNCompatTable extends L10nMixin(LitElement) {
     this._browsers = [];
     /** @type {string|undefined} */
     this._showTimelineId = undefined;
+    new ViewedController(this, this._ref, () => {
+      gleanClick(`bcd: view -> ${this.query}`);
+    });
   }
 
   get _breadcrumbs() {
@@ -255,7 +264,7 @@ export class MDNCompatTable extends L10nMixin(LitElement) {
   }
 
   _renderTable() {
-    return html`<figure class="table-container">
+    return html`<figure ${ref(this._ref)} class="table-container">
       <figure class="table-container-inner">
         ${this._renderIssueLink()}
         <table

package/components/compat-table/utils.js

@@ -1,3 +1,5 @@
+import { BCD_BASE_URL } from "../env/index.js";
+
 /**
  * A list of browsers to be hidden.
  * @constant {string[]}
@@ -293,3 +295,11 @@ export function getCurrentSupport(support) {
   // Default (likely never reached).
   return getFirst(support);
 }
+
+/**
+ * Get the URL to the JSON file for a given BCD key
+ * @param {string} query
+ */
+export function queryToUrl(query) {
+  return `${BCD_BASE_URL}/bcd/api/v0/current/${query}.json`;
+}

package/components/compat-table-lazy/element.js

@@ -8,7 +8,7 @@ import {
   DEFAULT_LOCALE,
   ISSUE_METADATA_TEMPLATE,
 } from "../compat-table/constants.js";
-import { BCD_BASE_URL } from "../env/index.js";
+import { queryToUrl } from "../compat-table/utils.js";
 
 import styles from "./element.css?lit";
 
@@ -76,10 +76,7 @@ export class MDNCompatTableLazy extends L10nMixin(LitElement) {
   _dataTask = new Task(this, {
     args: () => [this.query],
     task: async ([query], { signal }) => {
-      const response = await fetch(
-        `${BCD_BASE_URL}/bcd/api/v0/current/${query}.json`,
-        { signal },
-      );
+      const response = await fetch(queryToUrl(query), { signal });
       if (!response.ok) {
         console.error("Failed to fetch BCD data:", response);
 

package/components/content-section/server.css

@@ -138,6 +138,11 @@
     border-radius: 0.25rem;
   }
 
+  iframe {
+    border: 1px solid var(--color-border-primary);
+    border-radius: 0.25rem;
+  }
+
   table {
     width: 100%;
     border-collapse: collapse;

package/components/content-section/server.js

@@ -2,20 +2,20 @@ import { html } from "@lit-labs/ssr";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
+import { CompatSection } from "../compat-section/server.js";
 import { HeadingAnchor } from "../heading-anchor/server.js";
 import { ServerComponent } from "../server/index.js";
-import { SpecificationsList } from "../specifications-list/index.js";
+import { SpecificationsList } from "../specifications-list/server.js";
 
 export class ContentSection extends ServerComponent {
   /**
    * @param {import("@fred").Context} context
    * @param {import("@rari").Section} section
-   * @returns {import("@lit").TemplateResult}
    */
   render(context, { type, value }) {
     switch (type) {
       case "browser_compatibility": {
-        return BCD(value);
+        return CompatSection.render(context, value);
       }
       case "specifications": {
         return SpecificationsSection(context, value);
@@ -43,24 +43,6 @@ function Prose({ id, title, content, isH3 }) {
   </section>`;
 }
 
-/**
- * @param {import("@rari").Compat} section
- * @returns {import("@lit").TemplateResult}
- */
-function BCD({ id, title, query, isH3 }) {
-  const level = isH3 ? 3 : 2;
-  return html`<section
-    class="content-section"
-    aria-labelledby=${ifDefined(id ?? undefined)}
-  >
-    ${HeadingAnchor.render(level, id ? String(id) : null, String(title))}
-    <mdn-compat-table-lazy
-      locale="en-US"
-      query=${query}
-    ></mdn-compat-table-lazy>
-  </section>`;
-}
-
 /**
  * @param {import("@fred").Context} context
  * @param {import("@rari").SpecificationSection} section
@@ -72,6 +54,6 @@ function SpecificationsSection(context, { id, title, specifications, isH3 }) {
     aria-labelledby=${ifDefined(id ?? undefined)}
   >
     ${HeadingAnchor.render(level, id ? String(id) : null, String(title))}
-    ${SpecificationsList(context, specifications)}
+    ${SpecificationsList.render(context, specifications)}
   </section>`;
 }

package/components/curriculum/sidebar.css

@@ -78,7 +78,7 @@
   }
 
   a,
-  span:not(.highlight-container) {
+  span:not(.sidebar-filter-mark-container) {
     display: inline-flex;
     padding-block: 0.25rem;
   }

package/components/curriculum-landing/server.js

@@ -257,7 +257,10 @@ export class CurriculumLanding extends ServerComponent {
     const bannerLight = partnerBannerLight;
 
     return html`
-      <section class="curriculum-partner-banner-container">
+      <section
+        class="curriculum-partner-banner-container"
+        data-glean-view="curriculum: partner banner view"
+      >
         <div class="partner-banner">
           <section>
             <h2>Learn the curriculum with Scrimba and become job ready</h2>

package/components/dropdown/element.js

@@ -96,8 +96,19 @@ export class MDNDropdown extends LitElement {
     `;
   }
 
-  updated() {
+  /**
+   * @param {import("lit").PropertyValues<this>} changedProperties
+   */
+  updated(changedProperties) {
     this._setAriaAttributes();
+    if (
+      changedProperties.has("open") &&
+      changedProperties.get("open") !== undefined
+    ) {
+      this.dispatchEvent(
+        new Event("toggle", { bubbles: true, composed: true }),
+      );
+    }
   }
 
   firstUpdated() {

package/components/env/index.js

@@ -50,4 +50,4 @@ export const OBSERVATORY_API_URL = parseString(
 );
 
 // Transcend Consent Management - https://docs.transcend.io/docs/consent
-export const TRANSCEND_BUNDLE_ID = parseString("TRANSCEND_BUNDLE_ID", "");
+export const TRANSCEND_AIRGAP_URL = parseString("TRANSCEND_AIRGAP_URL", "");

package/components/featured-articles/server.js

@@ -10,16 +10,23 @@ export class FeaturedArticles extends ServerComponent {
   render(articles) {
     return html`<ul class="featured-articles">
       ${articles.map(
-        (article) =>
+        (article, index) =>
           html`<li>
             <article class="featured-articles__article">
               ${article.tag
-                ? html`<a class="featured-articles__tag" href=${article.tag.uri}
+                ? html`<a
+                    class="featured-articles__tag"
+                    href=${article.tag.uri}
+                    data-glean-id=${`homepage: article_tag ${index + 1} -> ${article.tag.uri}`}
                     >${article.tag.title}</a
                   >`
                 : nothing}
               <h3 class="featured-articles__title">
-                <a href=${article.mdn_url}>${article.title}</a>
+                <a
+                  href=${article.mdn_url}
+                  data-glean-id=${`homepage: article ${index + 1} -> ${article.mdn_url}`}
+                  >${article.title}</a
+                >
               </h3>
               <p class="featured-articles__summary">${article.summary}</p>
             </article>