feat(menu): support entry localization

components/menu/l10n.js

@@ -0,0 +1,39 @@
+import { TABS } from "./tabs.js";
+
+/**
+ * All localizable menu strings, derived from tabs.js.
+ * Used by the l10n extractor only — not imported at runtime.
+ *
+ * @type {Map<string, string>}
+ */
+export const strings = new Map(
+  TABS.flatMap((tab) => {
+    /** @type {[string, string][]} */
+    const entries = [];
+
+    if (typeof tab.buttonL10nId === "string") {
+      entries.push([tab.buttonL10nId, /** @type {string} */ (tab.buttonText)]);
+    } else {
+      entries.push([tab.buttonL10nId.long, tab.buttonText.long], [tab.buttonL10nId.short, tab.buttonText.short]);
+    }
+
+    if (!("panelTitle" in tab)) return entries;
+
+    entries.push([tab.panelTitle.l10nId, tab.panelTitle.text]);
+
+    for (const group of tab.panelGroups) {
+      if (group.titleL10nId) {
+        entries.push([group.titleL10nId, /** @type {string} */ (group.title)]);
+      }
+      for (const item of group.items) {
+        if (!("l10nId" in item)) continue;
+        entries.push([item.l10nId, item.text]);
+        if (item.labelL10nId) {
+          entries.push([item.labelL10nId, /** @type {string} */ (item.label)]);
+        }
+      }
+    }
+
+    return entries;
+  }),
+);

components/menu/tabs.js

@@ -0,0 +1,61 @@
+import tabsData from "./tabs.json" with { type: "json" };
+
+/**
+ * Converts a string to a kebab-case slug for use in l10n IDs.
+ * @param {string} str
+ */
+const slugify = (str) =>
+  str
+    .toLowerCase()
+    .replaceAll(/[^\p{L}\p{N}]+/gu, "-")
+    .replaceAll(/^-|-$/g, "");
+
+/**
+ * Menu tabs enriched with l10n IDs.
+ *
+ * @type {ReadonlyArray<import("./types.js").MenuTab>}
+ */
+export const TABS = Object.freeze(
+  /** @type {import("./types.js").MenuTab[]} */ (
+    tabsData.map((tab) => {
+      const buttonL10nId =
+        typeof tab.buttonText === "string"
+          ? `menu-${tab.id}`
+          : {
+              long: `menu-${tab.id}`,
+              short: `menu-${tab.id}-short`,
+            };
+
+      if (!("panelTitle" in tab)) {
+        return { ...tab, buttonL10nId };
+      }
+
+      return {
+        ...tab,
+        buttonL10nId,
+        panelTitle: {
+          ...tab.panelTitle,
+          l10nId: `menu-${tab.id}-panel-title`,
+        },
+        panelGroups: tab.panelGroups.map((group, gi) => {
+          const groupSlug = group.title ? slugify(group.title) : String(gi);
+          return {
+            ...group,
+            titleL10nId: group.title
+              ? `menu-${tab.id}-${groupSlug}`
+              : undefined,
+            items: group.items.map((item) => {
+              if ("render" in item) return item;
+              const l10nId = `menu-${tab.id}-${groupSlug}-${slugify(item.text)}`;
+              return {
+                ...item,
+                l10nId,
+                labelL10nId: item.label ? `${l10nId}-label` : undefined,
+              };
+            }),
+          };
+        }),
+      };
+    })
+  ),
+);

components/menu/types.d.ts

@@ -1,19 +1,25 @@
 import { ServerRenderedTemplate } from "@lit-labs/ssr";
+
+type ButtonText = string | { long: string; short: string };
+type ButtonL10nId = string | { long: string; short: string };
+
 interface BaseTab {
   id: string;
   buttonText: ButtonText;
+  buttonL10nId: ButtonL10nId;
 }
 
-type ButtonText = string | { long: string; short: string };
-
 interface PanelTitle {
   text: string;
   slug?: string;
+  l10nId: string;
 }
 
 interface BaseItem {
   text: string;
   label?: string;
+  l10nId: string;
+  labelL10nId?: string;
 }
 
 interface SlugItem extends BaseItem {
@@ -35,6 +41,7 @@ type PanelItem = LinkItem | RenderItem;
 
 interface PanelGroup {
   title?: string;
+  titleL10nId?: string;
   items: PanelItem[];
 }
 
@@ -45,6 +52,7 @@ interface DropdownTab extends BaseTab {
 
 interface LinkTab extends BaseTab {
   href: string;
+  buttonL10nId: string;
 }
 
 export type MenuTab = DropdownTab | LinkTab;