@tenphi/renderer 0.20.4 → 0.20.5

package/README.md

@@ -10,7 +10,7 @@ collections remain independent.
 
 `@tenphi/renderer/styling` exports `tasty`, `useGlobalStyles`, `mergeStyles`,
 the `Styles` type, and the `defineComponent` and `resolveComponentStyles`
-helpers for merging `theme.styles` into custom components. The facade exposes
+helpers for merging `theme.customStyles` into custom components. The facade exposes
 the same API through `@tenphi/cookbook/styling`.
 
 `@tenphi/renderer/eslint-plugin` exports the default Tasty ESLint plugin,
@@ -19,5 +19,5 @@ the same API through `@tenphi/cookbook/styling`.
 Use `extends: "@tenphi/renderer"` in `tasty.config.ts` to inherit this preset
 and list only your additional tokens, states, or presets.
 It matches `@tenphi/cookbook/eslint-plugin`; see
-[Linting custom styles](https://cookbook.tenphi.me/theme-and-components/#linting-custom-styles)
+[Linting custom styles](https://cookbook.tenphi.me/custom-components/#linting-custom-styles)
 for ESLint and oxlint setup.

package/dist/client/navigation.js

@@ -1,3 +1,4 @@
+import { initializePopoverMotion } from "./popover-motion.js";
 //#region src/client/navigation.ts
 var CookbookSidebarPane = class extends HTMLElement {
 	#listeners;
@@ -93,12 +94,7 @@ var CookbookHeaderLinks = class extends HTMLElement {
 		const close = () => {
 			if (panel?.matches(":popover-open")) panel.hidePopover();
 		};
-		panel?.addEventListener("toggle", () => {
-			if (panel.matches(":popover-open")) {
-				panel.getBoundingClientRect();
-				panel.setAttribute("data-open", "");
-			} else panel.removeAttribute("data-open");
-		}, { signal });
+		if (panel) initializePopoverMotion(panel, signal);
 		desktop.addEventListener("change", () => {
 			if (desktop.matches) close();
 		}, { signal });

package/dist/client/navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.js","names":[],"sources":["../../src/client/navigation.ts"],"sourcesContent":["export {};\n\nclass CookbookSidebarPane extends HTMLElement {\n  #listeners?: AbortController;\n  #inert = new Map<HTMLElement, boolean>();\n  #trigger: HTMLButtonElement | undefined;\n\n  connectedCallback() {\n    this.#listeners?.abort();\n    this.#listeners = new AbortController();\n    const { signal } = this.#listeners;\n    this.#trigger =\n      document.querySelector<HTMLButtonElement>(\n        '.td-menu-button[popovertarget=\"cookbook__sidebar\"]',\n      ) ?? undefined;\n    const desktop = matchMedia(\"(min-width: 50rem)\");\n    const syncViewport = () => {\n      if (desktop.matches) {\n        if (this.matches(\":popover-open\")) this.hidePopover();\n        this.#release();\n        this.popover = null;\n        this.removeAttribute(\"role\");\n        this.removeAttribute(\"aria-modal\");\n      } else {\n        this.popover = \"auto\";\n        this.setAttribute(\"role\", \"dialog\");\n        this.setAttribute(\"aria-modal\", \"true\");\n      }\n    };\n    syncViewport();\n    desktop.addEventListener(\"change\", syncViewport, { signal });\n    this.addEventListener(\n      \"toggle\",\n      () => {\n        const open = !desktop.matches && this.matches(\":popover-open\");\n        this.#trigger?.setAttribute(\"aria-expanded\", String(open));\n        if (open) {\n          // Establish the closed position after the popover enters the top\n          // layer so its attribute change transitions from an actual layout.\n          // Tasty's global SSR renderer does not preserve @starting-style.\n          this.getBoundingClientRect();\n          this.setAttribute(\"data-open\", \"\");\n          for (const element of document.querySelectorAll<HTMLElement>(\n            \".header, .main-frame, .cookbook-skip-link\",\n          )) {\n            this.#inert.set(element, element.inert);\n            element.inert = true;\n          }\n          this.querySelector<HTMLElement>(\"[autofocus]\")?.focus({\n            preventScroll: true,\n          });\n        } else {\n          const restoreFocus =\n            this.contains(document.activeElement) ||\n            document.activeElement === document.body;\n          this.#release();\n          if (restoreFocus && !desktop.matches) this.#trigger?.focus();\n        }\n      },\n      { signal },\n    );\n    this.addEventListener(\n      \"keydown\",\n      (event) => {\n        if (desktop.matches || !this.matches(\":popover-open\")) return;\n        const sections = this.querySelector<HTMLDetailsElement>(\n          \".td-mobile-tabs details[open]\",\n        );\n        if (event.key === \"Escape\" && sections) {\n          event.preventDefault();\n          sections.open = false;\n          sections.querySelector(\"summary\")?.focus();\n          return;\n        }\n        if (event.key !== \"Tab\") return;\n        const focusable = Array.from(\n          this.querySelectorAll<HTMLElement>(\n            'a[href], button:not([disabled]), select:not([disabled]), input:not([disabled]), summary, [tabindex=\"0\"]',\n          ),\n        ).filter(\n          (element) =>\n            element.tabIndex >= 0 && element.getClientRects().length > 0,\n        );\n        const first = focusable[0];\n        const last = focusable.at(-1);\n        if (!first || !last) {\n          event.preventDefault();\n          this.focus();\n          return;\n        }\n        if (\n          event.shiftKey &&\n          (document.activeElement === first || document.activeElement === this)\n        ) {\n          event.preventDefault();\n          last.focus();\n        } else if (!event.shiftKey && document.activeElement === last) {\n          event.preventDefault();\n          first.focus();\n        }\n      },\n      { signal },\n    );\n    this.addEventListener(\n      \"click\",\n      (event) => {\n        if (\n          !event.defaultPrevented &&\n          event.target instanceof Element &&\n          event.target.closest(\"a[href]\") &&\n          this.matches(\":popover-open\")\n        )\n          this.hidePopover();\n      },\n      { signal },\n    );\n  }\n\n  #release() {\n    this.removeAttribute(\"data-open\");\n    for (const [element, inert] of this.#inert) element.inert = inert;\n    this.#inert.clear();\n    this.#trigger?.setAttribute(\"aria-expanded\", \"false\");\n  }\n\n  disconnectedCallback() {\n    this.#listeners?.abort();\n    this.#release();\n  }\n}\n\nclass CookbookHeaderLinks extends HTMLElement {\n  #listeners?: AbortController;\n  connectedCallback() {\n    this.#listeners?.abort();\n    this.#listeners = new AbortController();\n    const { signal } = this.#listeners;\n    const panel = this.querySelector<HTMLElement>(\"[popover]\");\n    const desktop = matchMedia(\"(min-width: 50rem)\");\n    const close = () => {\n      if (panel?.matches(\":popover-open\")) panel.hidePopover();\n    };\n    panel?.addEventListener(\n      \"toggle\",\n      () => {\n        if (panel.matches(\":popover-open\")) {\n          panel.getBoundingClientRect();\n          panel.setAttribute(\"data-open\", \"\");\n        } else {\n          panel.removeAttribute(\"data-open\");\n        }\n      },\n      { signal },\n    );\n    desktop.addEventListener(\n      \"change\",\n      () => {\n        if (desktop.matches) close();\n      },\n      { signal },\n    );\n    panel?.addEventListener(\n      \"click\",\n      (event) => {\n        if (event.target instanceof Element && event.target.closest(\"a[href]\"))\n          close();\n      },\n      { signal },\n    );\n  }\n  disconnectedCallback() {\n    this.#listeners?.abort();\n  }\n}\n\nif (!customElements.get(\"cookbook-sidebar-pane\"))\n  customElements.define(\"cookbook-sidebar-pane\", CookbookSidebarPane);\nif (!customElements.get(\"cookbook-header-links\"))\n  customElements.define(\"cookbook-header-links\", CookbookHeaderLinks);\n"],"mappings":"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"}
+{"version":3,"file":"navigation.js","names":[],"sources":["../../src/client/navigation.ts"],"sourcesContent":["import { initializePopoverMotion } from \"./popover-motion.js\";\n\nclass CookbookSidebarPane extends HTMLElement {\n  #listeners?: AbortController;\n  #inert = new Map<HTMLElement, boolean>();\n  #trigger: HTMLButtonElement | undefined;\n\n  connectedCallback() {\n    this.#listeners?.abort();\n    this.#listeners = new AbortController();\n    const { signal } = this.#listeners;\n    this.#trigger =\n      document.querySelector<HTMLButtonElement>(\n        '.td-menu-button[popovertarget=\"cookbook__sidebar\"]',\n      ) ?? undefined;\n    const desktop = matchMedia(\"(min-width: 50rem)\");\n    const syncViewport = () => {\n      if (desktop.matches) {\n        if (this.matches(\":popover-open\")) this.hidePopover();\n        this.#release();\n        this.popover = null;\n        this.removeAttribute(\"role\");\n        this.removeAttribute(\"aria-modal\");\n      } else {\n        this.popover = \"auto\";\n        this.setAttribute(\"role\", \"dialog\");\n        this.setAttribute(\"aria-modal\", \"true\");\n      }\n    };\n    syncViewport();\n    desktop.addEventListener(\"change\", syncViewport, { signal });\n    this.addEventListener(\n      \"toggle\",\n      () => {\n        const open = !desktop.matches && this.matches(\":popover-open\");\n        this.#trigger?.setAttribute(\"aria-expanded\", String(open));\n        if (open) {\n          // Establish the closed position after the popover enters the top\n          // layer so its attribute change transitions from an actual layout.\n          // Tasty's global SSR renderer does not preserve @starting-style.\n          this.getBoundingClientRect();\n          this.setAttribute(\"data-open\", \"\");\n          for (const element of document.querySelectorAll<HTMLElement>(\n            \".header, .main-frame, .cookbook-skip-link\",\n          )) {\n            this.#inert.set(element, element.inert);\n            element.inert = true;\n          }\n          this.querySelector<HTMLElement>(\"[autofocus]\")?.focus({\n            preventScroll: true,\n          });\n        } else {\n          const restoreFocus =\n            this.contains(document.activeElement) ||\n            document.activeElement === document.body;\n          this.#release();\n          if (restoreFocus && !desktop.matches) this.#trigger?.focus();\n        }\n      },\n      { signal },\n    );\n    this.addEventListener(\n      \"keydown\",\n      (event) => {\n        if (desktop.matches || !this.matches(\":popover-open\")) return;\n        const sections = this.querySelector<HTMLDetailsElement>(\n          \".td-mobile-tabs details[open]\",\n        );\n        if (event.key === \"Escape\" && sections) {\n          event.preventDefault();\n          sections.open = false;\n          sections.querySelector(\"summary\")?.focus();\n          return;\n        }\n        if (event.key !== \"Tab\") return;\n        const focusable = Array.from(\n          this.querySelectorAll<HTMLElement>(\n            'a[href], button:not([disabled]), select:not([disabled]), input:not([disabled]), summary, [tabindex=\"0\"]',\n          ),\n        ).filter(\n          (element) =>\n            element.tabIndex >= 0 && element.getClientRects().length > 0,\n        );\n        const first = focusable[0];\n        const last = focusable.at(-1);\n        if (!first || !last) {\n          event.preventDefault();\n          this.focus();\n          return;\n        }\n        if (\n          event.shiftKey &&\n          (document.activeElement === first || document.activeElement === this)\n        ) {\n          event.preventDefault();\n          last.focus();\n        } else if (!event.shiftKey && document.activeElement === last) {\n          event.preventDefault();\n          first.focus();\n        }\n      },\n      { signal },\n    );\n    this.addEventListener(\n      \"click\",\n      (event) => {\n        if (\n          !event.defaultPrevented &&\n          event.target instanceof Element &&\n          event.target.closest(\"a[href]\") &&\n          this.matches(\":popover-open\")\n        )\n          this.hidePopover();\n      },\n      { signal },\n    );\n  }\n\n  #release() {\n    this.removeAttribute(\"data-open\");\n    for (const [element, inert] of this.#inert) element.inert = inert;\n    this.#inert.clear();\n    this.#trigger?.setAttribute(\"aria-expanded\", \"false\");\n  }\n\n  disconnectedCallback() {\n    this.#listeners?.abort();\n    this.#release();\n  }\n}\n\nclass CookbookHeaderLinks extends HTMLElement {\n  #listeners?: AbortController;\n  connectedCallback() {\n    this.#listeners?.abort();\n    this.#listeners = new AbortController();\n    const { signal } = this.#listeners;\n    const panel = this.querySelector<HTMLElement>(\"[popover]\");\n    const desktop = matchMedia(\"(min-width: 50rem)\");\n    const close = () => {\n      if (panel?.matches(\":popover-open\")) panel.hidePopover();\n    };\n    if (panel) initializePopoverMotion(panel, signal);\n    desktop.addEventListener(\n      \"change\",\n      () => {\n        if (desktop.matches) close();\n      },\n      { signal },\n    );\n    panel?.addEventListener(\n      \"click\",\n      (event) => {\n        if (event.target instanceof Element && event.target.closest(\"a[href]\"))\n          close();\n      },\n      { signal },\n    );\n  }\n  disconnectedCallback() {\n    this.#listeners?.abort();\n  }\n}\n\nif (!customElements.get(\"cookbook-sidebar-pane\"))\n  customElements.define(\"cookbook-sidebar-pane\", CookbookSidebarPane);\nif (!customElements.get(\"cookbook-header-links\"))\n  customElements.define(\"cookbook-header-links\", CookbookHeaderLinks);\n"],"mappings":"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"}

package/dist/client/popover-motion.d.ts

@@ -0,0 +1,6 @@
+//#region src/client/popover-motion.d.ts
+/** Animate popovers after they have entered the top layer. */
+declare function initializePopoverMotion(panel: HTMLElement, signal?: AbortSignal): void;
+//#endregion
+export { initializePopoverMotion };
+//# sourceMappingURL=popover-motion.d.ts.map

package/dist/client/popover-motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-motion.d.ts","names":[],"sources":["../../src/client/popover-motion.ts"],"mappings":";;iBACgB,wBACd,OAAO,aACP,SAAS"}

package/dist/client/popover-motion.js

@@ -0,0 +1,14 @@
+//#region src/client/popover-motion.ts
+/** Animate popovers after they have entered the top layer. */
+function initializePopoverMotion(panel, signal) {
+	panel.addEventListener("toggle", () => {
+		if (panel.matches(":popover-open")) {
+			panel.getBoundingClientRect();
+			panel.setAttribute("data-open", "");
+		} else panel.removeAttribute("data-open");
+	}, signal ? { signal } : void 0);
+}
+//#endregion
+export { initializePopoverMotion };
+
+//# sourceMappingURL=popover-motion.js.map

package/dist/client/popover-motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-motion.js","names":[],"sources":["../../src/client/popover-motion.ts"],"sourcesContent":["/** Animate popovers after they have entered the top layer. */\nexport function initializePopoverMotion(\n  panel: HTMLElement,\n  signal?: AbortSignal,\n): void {\n  panel.addEventListener(\n    \"toggle\",\n    () => {\n      if (panel.matches(\":popover-open\")) {\n        panel.getBoundingClientRect();\n        panel.setAttribute(\"data-open\", \"\");\n      } else {\n        panel.removeAttribute(\"data-open\");\n      }\n    },\n    signal ? { signal } : undefined,\n  );\n}\n"],"mappings":";;AACA,SAAgB,wBACd,OACA,QACM;CACN,MAAM,iBACJ,gBACM;EACJ,IAAI,MAAM,QAAQ,eAAe,GAAG;GAClC,MAAM,sBAAsB;GAC5B,MAAM,aAAa,aAAa,EAAE;EACpC,OACE,MAAM,gBAAgB,WAAW;CAErC,GACA,SAAS,EAAE,OAAO,IAAI,KAAA,CACxB;AACF"}

package/dist/components/GlobalStyles.js

@@ -9,6 +9,7 @@ import closeIcon from "../icons/close.svg?raw";
 import copyIcon from "../icons/copy.svg?raw";
 import searchIcon from "../icons/search.svg?raw";
 import { resolveComponentStyles } from "./component-styles.js";
+import { selectPopoverStyles } from "./select-popover-styles.js";
 import { svgIconUrl } from "./svg-icon.js";
 import { configureCookbookStates } from "./tasty-states.js";
 import { getDefaultFontUsage, getFontFaces } from "../theme/fonts.js";
@@ -935,8 +936,9 @@ export default function GlobalStyles() {
         marginBlockStart: "0",
         marginBlockEnd: "0",
       },
+      // Linked Cards are block content even though their root is an anchor.
       BlockSpacing: {
-        $: ":not(a):not(strong):not(em):not(del):not(span):not(input):not(code):not(br) + :not(a):not(strong):not(em):not(del):not(span):not(input):not(code):not(br):not(li):not(dt):not(dd):not(.not-content *)",
+        $: ":not(a):not(strong):not(em):not(del):not(span):not(input):not(code):not(br) + :not(a):not(strong):not(em):not(del):not(span):not(input):not(code):not(br):not(li):not(dt):not(dd):not(.not-content *), :not(a):not(strong):not(em):not(del):not(span):not(input):not(code):not(br) + a.td-card, a.td-card + :not(a):not(strong):not(em):not(del):not(span):not(input):not(code):not(br):not(li):not(dt):not(dd):not(.not-content *), a.td-card + a.td-card",
         marginBlockStart: "($gap * 3)",
       },
       HeadingSpacing: {
@@ -1173,21 +1175,21 @@ export default function GlobalStyles() {
         lineHeight: "0",
       },
       DiffLine: {
-        $: "pre.td-diff .line",
+        $: "pre.td-diff > code > .line",
         display: "block",
         inlinePadding: "1rem",
         preset: "code",
       },
       EmptyDiffLine: {
-        $: "pre.td-diff .line:empty::before",
+        $: "pre.td-diff > code > .line:empty::before",
         content: '"\\200b"',
       },
       InsertedLine: {
-        $: "pre.td-diff .td-diff-line--inserted",
+        $: "pre.td-diff > code > .td-diff-line--inserted",
         fill: "#green-surface",
       },
       DeletedLine: {
-        $: "pre.td-diff .td-diff-line--deleted",
+        $: "pre.td-diff > code > .td-diff-line--deleted",
         fill: "#red-surface",
       },
     }),
@@ -1431,47 +1433,85 @@ export default function GlobalStyles() {
     }),
   );
 
+  const languageSelectStyles = selectPopoverStyles();
   useGlobalStyles(
     "cookbook-language-select",
     resolveComponentStyles("LanguageSelect", {
-      display: "block",
-      Label: {
-        $: "label",
-        position: "relative",
-        display: "flex",
-        alignItems: "center",
-        color: "#text-soft",
-      },
-      HoverLabel: { $: "label:hover", color: "#text" },
-      LabelIcon: {
-        $: ".label-icon",
-        position: "absolute",
-        zIndex: "1",
-        insetInlineStart: "$gap",
-        pointerEvents: "none",
+      display: "flex",
+      flexShrink: "0",
+      "$popover-transition": languageSelectStyles["$popover-transition"],
+      Compact: {
+        $: "&[data-compact]",
       },
-      Select: {
-        $: "select",
-        appearance: "none",
+      Trigger: {
+        ...languageSelectStyles.Trigger,
         inlineSize: "8rem",
-        minBlockSize: "$control-height",
-        paddingInlineStart: "($gap * 3.5)",
-        paddingInlineEnd: "($gap * 3.5)",
-        color: "#text-soft",
-        border: "0",
-        radius: "$header-control-radius",
+        blockSize: "$control-height",
+        padding: "0 $gap",
         fill: "#clear",
-        preset: "small",
-        cursor: "pointer",
-        textOverflow: "ellipsis",
+        border: "0",
+        transition: "color $transition, fill $transition",
       },
-      Caret: {
-        $: ".caret",
-        position: "absolute",
-        insetInlineEnd: "$gap",
-        pointerEvents: "none",
+      HoverTrigger: languageSelectStyles.HoverTrigger,
+      ActiveTrigger: {
+        $: "> button:active",
+        color: "#text",
+        fill: "#surface-2-pressed",
+      },
+      LabelIcon: {
+        $: "> button > .label-icon",
+        display: "block",
+        flexShrink: "0",
+        inlineSize: { "": "1.25rem", "@mobile": "1.125rem" },
+        blockSize: { "": "1.25rem", "@mobile": "1.125rem" },
+      },
+      TriggerLabel: languageSelectStyles.TriggerLabel,
+      Caret: languageSelectStyles.Caret,
+      CompactTrigger: {
+        $: "&[data-compact] > button",
+        inlineSize: "$docs-menu-button-size",
+        blockSize: "$docs-menu-button-size",
+        padding: "0",
+      },
+      CompactLabel: {
+        $: "&[data-compact] > button > .trigger-label",
+        hide: true,
       },
-      Option: { $: "option", color: "#text", fill: "#surface-2" },
+      CompactCaret: { $: "&[data-compact] > button > .caret", hide: true },
+      Label: { $: "> button" },
+      HoverLabel: { $: "> button:hover" },
+      Select: { $: "> button" },
+      CompactSelect: { $: "&[data-compact] > button" },
+      CompactLabelIcon: { $: "&[data-compact] > button > .label-icon" },
+      SidebarTrigger: {
+        $: "&[data-sidebar] > button",
+        anchorName: "--language-trigger",
+      },
+      Panel: {
+        ...languageSelectStyles.Panel,
+        blockInset: { "": "4rem start", "@mobile": "3.5rem start" },
+        inlineInset:
+          "max($docs-nav-pad-x, ((100vw - $layout-width) / 2 + $docs-sidebar-pad-x)) end",
+      },
+      SidebarPanel: {
+        $: "&[data-sidebar] > [popover]",
+        positionAnchor: "--language-trigger",
+        blockInset: "auto start, anchor(top) end",
+        blockMargin: "$gap end",
+        inlineInset: "$gap start, auto end",
+        inlineSize: "min(20rem, calc(100vw - 4rem))",
+        blockSize: "max (100dvh - 8rem)",
+        transformOrigin: "bottom",
+      },
+      OpenPanel: languageSelectStyles.OpenPanel,
+      PanelTitle: languageSelectStyles.PanelTitle,
+      Options: languageSelectStyles.Options,
+      Option: languageSelectStyles.Option,
+      HoverOption: languageSelectStyles.HoverOption,
+      CurrentOption: languageSelectStyles.CurrentOption,
+      Fallback: { $: ".fallback-label", color: "#text-muted" },
+      Checkmark: languageSelectStyles.Checkmark,
+      SelectedCheckmark: languageSelectStyles.SelectedCheckmark,
     }),
   );
 

package/dist/components/HeaderLinks.astro

@@ -1,11 +1,22 @@
 ---
 import { messages } from "../localization.js";
+import { localeHref, routeLocale } from "../localization.js";
+import { navigationPath } from "../navigation.js";
 import { content } from "virtual:cookbook/config";
 import { HeaderLinksRoot } from "./LayoutComponents.js";
 
 const links = content.site.headerLinks ?? [];
 const base = import.meta.env.BASE_URL.replace(/\/$/, "");
-const href = (link: string) => (link.startsWith("/") ? `${base}${link}` : link);
+const currentPath = navigationPath(Astro.url.pathname, base || "/");
+const href = (link: string) =>
+  localeHref(link, currentPath, content.routes, content, base || "/");
+const locale = routeLocale(currentPath, content);
+const language =
+  content.locales?.[locale]?.lang ?? (locale === "root" ? "en" : locale);
+const label = (value: string) =>
+  content.translations?.[language]?.[`navigation.${value}`] ??
+  content.translations?.[language.split("-")[0]!]?.[`navigation.${value}`] ??
+  value;
 const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
 ---
 
@@ -20,7 +31,7 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
             target={link.newTab ? "_blank" : undefined}
             rel={link.newTab ? "noopener noreferrer" : undefined}
           >
-            {link.label}
+            {label(link.label)}
           </a>
         ))}
       </nav>
@@ -74,7 +85,7 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
               target={link.newTab ? "_blank" : undefined}
               rel={link.newTab ? "noopener noreferrer" : undefined}
             >
-              {link.label}
+              {label(link.label)}
             </a>
           ))}
         </nav>

package/dist/components/Icon.astro

@@ -23,7 +23,7 @@ const originals: Record<string, string> = {
   laptop: desktop,
   "approve-check": check,
   translate:
-    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18"/></svg>',
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><ellipse cx="12" cy="12" rx="4" ry="9"/><path d="M3 12h18"/></svg>',
   github:
     '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.77.6-3.36-1.18-3.36-1.18-.45-1.14-1.1-1.44-1.1-1.44-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.89 1.52 2.33 1.08 2.9.83.09-.65.35-1.08.63-1.33-2.21-.25-4.53-1.1-4.53-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02A9.6 9.6 0 0 1 12 6.66c.85 0 1.7.11 2.5.34 1.9-1.29 2.74-1.02 2.74-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.85-2.33 4.68-4.55 4.93.36.31.68.92.68 1.86v2.91c0 .27.18.58.69.48A10 10 0 0 0 12 2Z"/></svg>',
   gitlab:

package/dist/components/LayoutComponents.js

@@ -1,5 +1,6 @@
 import { tasty } from "@tenphi/tasty";
 import { customizeComponent } from "./customize-component.js";
+import { selectPopoverStyles } from "./select-popover-styles.js";
 import { configureCookbookStates } from "./tasty-states.js";
 
 configureCookbookStates();
@@ -117,56 +118,37 @@ export const PackageVersionRoot = customizeComponent(
   }),
 );
 
+const versionSelectStyles = selectPopoverStyles({
+  option: "Link",
+  hoverOption: "HoverLink",
+  currentOption: "CurrentLink",
+});
+
 export const VersionSwitcherRoot = customizeComponent(
   "VersionSwitcher",
   tasty({
-    as: "details",
+    as: "div",
     styles: {
+      ...versionSelectStyles,
       display: "inline-flex",
-      position: "relative",
       flexShrink: "0",
-      color: "#text-soft",
       Trigger: {
-        $: "> summary",
-        display: "flex",
-        alignItems: "center",
+        ...versionSelectStyles.Trigger,
         blockSize: "min $control-height",
         inlinePadding: "$gap",
         fill: "#surface-2",
         border: true,
-        radius: "$header-control-radius",
         preset: "small / strong",
-        cursor: "pointer",
-        whiteSpace: "nowrap",
+        anchorName: "--version-trigger",
       },
       Panel: {
-        $: "> nav",
-        position: "absolute",
-        inset: { "": "100% auto auto 0", "@mobile": "100% 0 auto auto" },
-        zIndex: "10",
-        inlineSize: "min 8rem",
-        padding: "($gap * 0.5)",
-        fill: "#surface",
-        border: true,
-        radius: "$radius",
-        shadow: "0 0.75rem 2rem #shadow",
-      },
-      OpenPanel: {
-        $: "&[open] > nav",
-        display: "grid",
-      },
-      Link: {
-        $: "> nav > a",
-        display: "block",
-        padding: "($gap * 0.5) $gap",
-        color: "#text-soft",
-        preset: "small",
-        textDecoration: "none",
-      },
-      CurrentLink: {
-        $: '> nav > a[aria-current="page"]',
-        color: "#accent-text",
-        preset: "small / strong",
+        ...versionSelectStyles.Panel,
+        positionAnchor: "--version-trigger",
+        blockInset: "(anchor(bottom) + $gap) start, auto end",
+        inlineInset: {
+          "": "anchor(left) start, auto end",
+          "@mobile": "auto start, anchor(right) end",
+        },
       },
     },
   }),
@@ -320,6 +302,15 @@ export const HeaderRoot = customizeComponent(
         inlineSize: "$docs-menu-button-size",
         blockSize: "$docs-menu-button-size",
       },
+      MobileLanguage: {
+        $: ".td-header__mobile-language",
+        display: "grid",
+        hide: { "": true, "@mobile": false },
+        flexShrink: "0",
+        order: "1",
+        inlineSize: "$docs-menu-button-size",
+        blockSize: "$docs-menu-button-size",
+      },
     },
   }),
 );
@@ -394,9 +385,9 @@ export const ThemeSelectRoot = customizeComponent(
         },
       },
       OpenPanel: {
-        $: "[popover]:popover-open",
-        opacity: { "": "1", "@starting": "0" },
-        scale: { "": "1", "@starting": "1 0.96" },
+        $: "[popover]:popover-open[data-open]",
+        opacity: "1",
+        scale: "1",
       },
       Section: {
         $: "fieldset",
@@ -745,7 +736,7 @@ export const HeaderLinksRoot = customizeComponent(
         shadow: "0 0.75rem 2rem #shadow",
         opacity: "0",
         scale: "1 0.96",
-        transformOrigin: "top right",
+        transformOrigin: "top",
         transition: {
           "": "none",
           "!@reduced-motion":

package/dist/components/Preview.astro

@@ -14,7 +14,7 @@ const ui = messages(
 ---
 
 <PreviewRoot
-  className="td-preview"
+  className="td-preview not-content"
   aria-label={title}
   data-tasty-anatomy="Preview"
 >

package/dist/components/SelectPopover.astro

@@ -0,0 +1,64 @@
+---
+import Icon from "./Icon.astro";
+
+interface Option {
+  href: string;
+  label: string;
+  lang?: string;
+  hint?: string;
+  current?: boolean;
+}
+
+interface Props {
+  triggerLabel: string;
+  selectedLabel: string;
+  title: string;
+  options: Option[];
+  icon?: string;
+}
+
+const { triggerLabel, selectedLabel, title, options, icon } = Astro.props;
+const id = `select-${crypto.randomUUID()}`;
+---
+
+<button
+  type="button"
+  popovertarget={id}
+  aria-label={triggerLabel}
+  title={title}
+>
+  {icon && <Icon name={icon} class="label-icon" />}
+  <span class="trigger-label">{selectedLabel}</span>
+  <Icon name="down-caret" class="caret" />
+</button>
+<div
+  id={id}
+  popover="auto"
+  role="group"
+  aria-label={title}
+  data-select-popover-panel
+>
+  <div class="panel-title">{title}</div>
+  <nav aria-label={title}>
+    {
+      options.map((option) => (
+        <a
+          href={option.href}
+          aria-current={option.current ? "page" : undefined}
+        >
+          <span lang={option.lang}>{option.label}</span>
+          {option.hint && <span class="fallback-label">({option.hint})</span>}
+          <Icon name="approve-check" class="checkmark" />
+        </a>
+      ))
+    }
+  </nav>
+</div>
+
+<script>
+  import { initializePopoverMotion } from "../client/popover-motion.js";
+
+  document
+    .querySelectorAll<HTMLElement>("[data-select-popover-panel]")
+    .forEach((panel) => initializePopoverMotion(panel));
+</script>

package/dist/components/TastyComponents.js

@@ -84,13 +84,13 @@ export const PreviewRoot = customizeComponent(
         fill: "#surface-2",
       },
       Stage: {
-        padding: "3x",
+        padding: "2x",
         fill: "#surface",
       },
       Frame: {
         display: "block",
         width: "100%",
-        height: "min 18rem",
+        height: "min 10rem",
         border: "0",
         fill: "#surface",
       },
@@ -102,9 +102,23 @@ export const PreviewRoot = customizeComponent(
         preset: "small",
         fill: "#surface-2",
         cursor: "pointer",
+        transition: "fill $transition",
+      },
+      HoverSummary: {
+        $: "> details > summary:hover",
+        fill: "#surface-2-hover",
+      },
+      ActiveSummary: {
+        $: "> details > summary:active",
+        fill: "#surface-2-pressed",
       },
       Pre: {
         margin: "0",
+        padding: "2x",
+        overflowX: "auto",
+        color: "#syntax-text",
+        fill: "#syntax-bg",
+        preset: "code",
         radius: "0",
       },
     },

package/dist/components/VersionSwitcher.astro

@@ -4,6 +4,7 @@ import { content } from "virtual:cookbook/config";
 import type { DocsRoute, SiteVersion } from "@tenphi/docs";
 import { versionLinks } from "../versioning.js";
 import { VersionSwitcherRoot } from "./LayoutComponents.js";
+import SelectPopover from "./SelectPopover.astro";
 
 interface Props {
   versions: SiteVersion[];
@@ -23,22 +24,14 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
 ---
 
 <VersionSwitcherRoot data-tasty-anatomy="VersionSwitcher">
-  <summary
-    aria-label={`${ui.documentationVersion}: ${current?.label ?? ui.versions}`}
-    >{current?.label ?? ui.versions}</summary
-  >
-  <nav aria-label={ui.documentationVersions}>
-    {
-      links.map((version) => (
-        <a
-          href={version.href}
-          aria-current={
-            version.routeBase === current?.routeBase ? "page" : undefined
-          }
-        >
-          {version.label}
-        </a>
-      ))
-    }
-  </nav>
+  <SelectPopover
+    triggerLabel={`${ui.documentationVersion}: ${current?.label ?? ui.versions}`}
+    selectedLabel={current?.label ?? ui.versions}
+    title={ui.documentationVersions}
+    options={links.map((version) => ({
+      href: version.href,
+      label: version.label,
+      current: version.routeBase === current?.routeBase,
+    }))}
+  />
 </VersionSwitcherRoot>

package/dist/components/select-popover-styles.js

@@ -0,0 +1,107 @@
+/** Shared server-side styles for the language and version selectors. */
+export function selectPopoverStyles({
+  option = "Option",
+  hoverOption = "HoverOption",
+  currentOption = "CurrentOption",
+} = {}) {
+  return {
+    "$popover-transition": "120ms",
+    Trigger: {
+      $: "> button",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "($gap * 0.5)",
+      color: "#text-soft",
+      radius: "$header-control-radius",
+      preset: "small",
+      cursor: "pointer",
+    },
+    HoverTrigger: {
+      $: "> button:hover, &:has([popover]:popover-open) > button",
+      color: "#text",
+      fill: "#surface-2-hover",
+    },
+    TriggerLabel: {
+      $: ".trigger-label",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+    },
+    Caret: {
+      $: "> button > .caret",
+      flexShrink: "0",
+      inlineSize: "0.875rem",
+      blockSize: "0.875rem",
+    },
+    Panel: {
+      $: "> [popover]",
+      position: "fixed",
+      inset: "auto",
+      inlineSize: "min(15rem, calc(100vw - 2 * $docs-nav-pad-x))",
+      blockSize: "max (100dvh - $docs-nav-height - $gap)",
+      overflowY: "auto",
+      margin: "0",
+      padding: "$gap",
+      color: "#text",
+      fill: "#surface-2",
+      border: true,
+      radius: "$card-radius",
+      shadow: "0 0.75rem 2rem #shadow",
+      opacity: "0",
+      scale: "1 0.96",
+      transformOrigin: "top",
+      transition: {
+        "": "none",
+        "!@reduced-motion":
+          "opacity $popover-transition ease-out, scale $popover-transition ease-out, display $popover-transition allow-discrete, overlay $popover-transition allow-discrete",
+      },
+    },
+    OpenPanel: {
+      $: "> [popover]:popover-open[data-open]",
+      opacity: "1",
+      scale: "1",
+    },
+    PanelTitle: {
+      $: ".panel-title",
+      padding: "($gap * 0.75) $gap",
+      color: "#text-muted",
+      preset: "small / strong",
+    },
+    Options: { $: "nav", display: "grid", gap: "($gap * 0.25)" },
+    [option]: {
+      $: "nav a",
+      display: "flex",
+      alignItems: "center",
+      gap: "$gap",
+      minBlockSize: "2.25rem",
+      padding: "($gap * 0.75) $gap",
+      color: "#text-soft",
+      preset: "small",
+      textDecoration: "none",
+      radius: "$radius",
+    },
+    [hoverOption]: {
+      $: "nav a:hover",
+      color: "#text",
+      fill: "#surface-2-hover",
+    },
+    [currentOption]: {
+      $: 'nav a[aria-current="page"]',
+      color: "#accent-text",
+      fill: "#accent-surface-2-subtle",
+    },
+    Checkmark: {
+      $: "nav a > .checkmark",
+      flexShrink: "0",
+      inlineMargin: "auto start",
+      inlineSize: "1rem",
+      blockSize: "1rem",
+      visibility: "hidden",
+    },
+    SelectedCheckmark: {
+      $: 'nav a[aria-current="page"] > .checkmark',
+      visibility: "visible",
+    },
+  };
+}

package/dist/localization.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"localization.d.ts","names":[],"sources":["../src/localization.ts"],"mappings":";;;KAMK;EACH,UAAU;EACV,gBAAgB;EAChB,eAAe;;iBAGD,YAAY,cAAc,SAAS;;iBAMnC,gBACd,kBACA,cACA,SAAS;iBAWK,WAAW,cAAc,SAAS;iBAQlC,eACd,cACA,gBACA,SAAS;;iBASK,aACd,cACA,gBACA,QAAQ,aACR,SAAS;iBAoBK,WACd,cACA,qBACA,QAAQ,aACR,SAAS,eACT;;iBAec,oBACd,QAAQ,0BACR,QAAQ,aACR,qBACA,SAAS;EACN,QAAQ;EAA0B,QAAQ;;cAiElC;WACX;WACA;WACA;WACA;WACA;WACA;WAEA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;;KAEU,0BAA0B;iBA0CtB,SACd,cACA,UAAS,gBACR,OAAO;iBAUM,iBACd,cACA,QAAQ,aACR,SAAS,gBACR;EAAQ;EAAc"}
+{"version":3,"file":"localization.d.ts","names":[],"sources":["../src/localization.ts"],"mappings":";;;KAMK;EACH,UAAU;EACV,gBAAgB;EAChB,eAAe;;iBAGD,YAAY,cAAc,SAAS;;iBAMnC,gBACd,kBACA,cACA,SAAS;iBAWK,WAAW,cAAc,SAAS;iBAQlC,eACd,cACA,gBACA,SAAS;;iBASK,aACd,cACA,gBACA,QAAQ,aACR,SAAS;iBAoBK,WACd,cACA,qBACA,QAAQ,aACR,SAAS,eACT;;iBAec,oBACd,QAAQ,0BACR,QAAQ,aACR,qBACA,SAAS;EACN,QAAQ;EAA0B,QAAQ;;cA8FlC;WACX;WACA;WACA;WACA;WACA;WACA;WAEA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;;KAEU,0BAA0B;iBA0CtB,SACd,cACA,UAAS,gBACR,OAAO;iBAUM,iBACd,cACA,QAAQ,aACR,SAAS,gBACR;EAAQ;EAAc"}

package/dist/localization.js

@@ -51,24 +51,38 @@ function localizedNavigation(layout, routes, currentPath, options) {
 		route: localePath(route.route, options)
 	}));
 	const available = new Set(localRoutes.filter((route) => route.discoverable !== false).map((route) => route.route));
+	const visibleRoutes = new Map(routes.filter((route) => route.discoverable !== false).map((route) => [route.route, route]));
+	const fallbackLocale = options.defaultLocale ?? (options.locales.root ? "root" : Object.keys(options.locales)[0]);
 	const convert = (items) => items.flatMap((item) => {
 		const link = typeof item === "string" ? item : item.link;
 		const internal = link?.startsWith("/") && !link.startsWith("//");
 		const translated = internal ? localePath(link, options) : link;
-		if (typeof item === "string") return !internal || available.has(translated) ? [translated] : [];
+		const fallback = internal ? localizedRoute(link, fallbackLocale, options) : void 0;
+		const target = !internal || available.has(translated) ? translated : fallback && visibleRoutes.has(fallback) ? fallback : void 0;
+		if (typeof item === "string") {
+			if (!target) return [];
+			if (!internal || available.has(translated)) return [target];
+			const route = visibleRoutes.get(target);
+			return [{
+				label: typeof route.sidebar === "object" && route.sidebar.label ? route.sidebar.label : route.title,
+				link: target
+			}];
+		}
 		if ("items" in item || "autogenerate" in item) {
 			const { link: _link, ...group } = item;
+			const children = "items" in item ? convert(item.items) : void 0;
+			if (children?.length === 0 && !target) return [];
 			return [{
 				...group,
 				label: label(group.label),
-				...translated && (!internal || available.has(translated)) ? { link: translated } : {},
-				..."items" in item ? { items: convert(item.items) } : { autogenerate: { directory: localePath(item.autogenerate.directory, options) } }
+				...target ? { link: target } : {},
+				..."items" in item ? { items: children } : { autogenerate: { directory: localePath(item.autogenerate.directory, options) } }
 			}];
 		}
-		return !internal || available.has(translated) ? [{
+		return target ? [{
 			...item,
 			label: label(item.label),
-			link: translated
+			link: target
 		}] : [];
 	});
 	return {

package/dist/localization.js.map

@@ -1 +1 @@
-{"version":3,"file":"localization.js","names":[],"sources":["../src/localization.ts"],"sourcesContent":["import type { DocsConfig, DocsRoute, NavigationItem } from \"@tenphi/docs\";\nimport {\n  normalizeNavigationPath,\n  type ResolvedNavigationLayout,\n} from \"./navigation.js\";\n\ntype LocaleOptions = {\n  locales?: DocsConfig[\"locales\"] | undefined;\n  defaultLocale?: DocsConfig[\"defaultLocale\"] | undefined;\n  translations?: DocsConfig[\"translations\"] | undefined;\n};\n\nexport function routeLocale(path: string, options: LocaleOptions): string {\n  const first = normalizeNavigationPath(path).split(\"/\")[1];\n  return first && first !== \"root\" && options.locales?.[first] ? first : \"root\";\n}\n\n/** Author components can render before the page initializes route locals. */\nexport function requestLanguage(\n  pathname: string,\n  base: string,\n  options: LocaleOptions,\n): string {\n  const prefix = base.replace(/\\/$/, \"\");\n  const path =\n    prefix && (pathname === prefix || pathname.startsWith(`${prefix}/`))\n      ? pathname.slice(prefix.length)\n      : pathname;\n  const locale = routeLocale(path, options);\n  return options.locales?.[locale]?.lang ?? (locale === \"root\" ? \"en\" : locale);\n}\n\nexport function localePath(path: string, options: LocaleOptions): string {\n  const route = normalizeNavigationPath(path);\n  const locale = routeLocale(route, options);\n  return locale === \"root\"\n    ? route\n    : normalizeNavigationPath(route.slice(locale.length + 1));\n}\n\nexport function localizedRoute(\n  path: string,\n  locale: string,\n  options: LocaleOptions,\n): string {\n  const suffix = localePath(path, options);\n  return normalizeNavigationPath(\n    `${locale === \"root\" ? \"\" : `/${locale}`}${suffix}`,\n  );\n}\n\n/** Missing translations use a real default-language page, then a real locale home. */\nexport function localeTarget(\n  path: string,\n  locale: string,\n  routes: DocsRoute[],\n  options: LocaleOptions,\n): string | undefined {\n  const visible = new Set(\n    routes\n      .filter((route) => route.discoverable !== false)\n      .map((route) => route.route),\n  );\n  const fallback =\n    options.defaultLocale ??\n    (options.locales?.root\n      ? \"root\"\n      : (Object.keys(options.locales ?? {})[0] ?? \"root\"));\n  return [\n    localizedRoute(path, locale, options),\n    localizedRoute(path, fallback, options),\n    localizedRoute(\"/\", locale, options),\n    localizedRoute(\"/\", fallback, options),\n  ].find((route) => visible.has(route));\n}\n\nexport function localeHref(\n  link: string,\n  currentPath: string,\n  routes: DocsRoute[],\n  options: LocaleOptions,\n  base = \"/\",\n): string {\n  if (!link.startsWith(\"/\") || link.startsWith(\"//\")) return link;\n  const suffix = /[?#].*$/.exec(link)?.[0] ?? \"\";\n  const path = suffix ? link.slice(0, -suffix.length) : link;\n  const target = options.locales\n    ? localeTarget(path, routeLocale(currentPath, options), routes, options)\n    : normalizeNavigationPath(path);\n  return (\n    `${base.replace(/\\/$/, \"\")}${target ?? normalizeNavigationPath(path)}${suffix}` ||\n    \"/\"\n  );\n}\n\n/** Resolve navigation against the current locale's available routes. */\nexport function localizedNavigation(\n  layout: ResolvedNavigationLayout,\n  routes: DocsRoute[],\n  currentPath: string,\n  options: LocaleOptions,\n): { layout: ResolvedNavigationLayout; routes: DocsRoute[] } {\n  if (!options.locales) return { layout, routes };\n  const locale = routeLocale(currentPath, options);\n  const language =\n    options.locales[locale]?.lang ?? (locale === \"root\" ? \"en\" : locale);\n  const label = (value: string) =>\n    options.translations?.[language]?.[`navigation.${value}`] ??\n    options.translations?.[language.split(\"-\")[0]!]?.[`navigation.${value}`] ??\n    value;\n  const localRoutes = routes\n    .filter((route) => routeLocale(route.route, options) === locale)\n    .map((route) => ({ ...route, route: localePath(route.route, options) }));\n  const available = new Set(\n    localRoutes\n      .filter((route) => route.discoverable !== false)\n      .map((route) => route.route),\n  );\n  const convert = (items: NavigationItem[]): NavigationItem[] =>\n    items.flatMap((item): NavigationItem[] => {\n      const link = typeof item === \"string\" ? item : item.link;\n      const internal = link?.startsWith(\"/\") && !link.startsWith(\"//\");\n      const translated = internal ? localePath(link!, options) : link;\n      if (typeof item === \"string\")\n        return !internal || available.has(translated!) ? [translated!] : [];\n      if (\"items\" in item || \"autogenerate\" in item) {\n        const { link: _link, ...group } = item;\n        return [\n          {\n            ...group,\n            label: label(group.label),\n            ...(translated && (!internal || available.has(translated))\n              ? { link: translated }\n              : {}),\n            ...(\"items\" in item\n              ? { items: convert(item.items) }\n              : {\n                  autogenerate: {\n                    directory: localePath(item.autogenerate.directory, options),\n                  },\n                }),\n          },\n        ];\n      }\n      return !internal || available.has(translated!)\n        ? [{ ...item, label: label(item.label), link: translated! }]\n        : [];\n    });\n  return {\n    layout: {\n      ...layout,\n      ...(layout.items ? { items: convert(layout.items) } : {}),\n      tabs: layout.tabs.map((tab) => ({\n        ...tab,\n        label: label(tab.label),\n        link:\n          tab.link.startsWith(\"/\") && !tab.link.startsWith(\"//\")\n            ? localePath(tab.link, options)\n            : tab.link,\n        ...(tab.items ? { items: convert(tab.items) } : {}),\n      })),\n    },\n    routes: localRoutes,\n  };\n}\n\nexport const ENGLISH_MESSAGES = {\n  copyPage: \"Copy page\",\n  viewMarkdown: \"Download Markdown\",\n  pageCopied: \"Page copied\",\n  pageCopyError: \"Could not copy. Download Markdown to read or copy the text.\",\n  draftTitle: \"Draft\",\n  draftNotice:\n    \"This page is available by direct link and excluded from navigation and indexes.\",\n  searchError: \"Search could not load. Close and try again.\",\n  appearance: \"Appearance\",\n  colorScheme: \"Color scheme\",\n  contrast: \"Contrast\",\n  normalContrast: \"Normal\",\n  highContrast: \"High\",\n  auto: \"Auto\",\n  closeNavigation: \"Close navigation\",\n  primary: \"Primary\",\n  sections: \"Sections\",\n  chooseSection: \"Choose section\",\n  headerLinks: \"Header links\",\n  more: \"More\",\n  closeMore: \"Close more menu\",\n  moreLinks: \"More links\",\n  versions: \"Versions\",\n  documentationVersion: \"Documentation version\",\n  documentationVersions: \"Documentation versions\",\n  version: \"Version\",\n  home: \"Home\",\n  generatedWith: \"Generated with\",\n  viewSource: \"View source\",\n  copyCode: \"Copy code\",\n  codeCopied: \"Code copied\",\n  codeCopyError: \"Could not copy code\",\n  copyHeading: \"Copy link to “{heading}”\",\n  linkCopied: \"Link copied\",\n  linkCopyError: \"Could not copy link\",\n  notFound: \"Page not found\",\n  notFoundDescription: \"The page you requested could not be found.\",\n  fallback: \"fallback\",\n} as const;\nexport type MessageKey = keyof typeof ENGLISH_MESSAGES;\nconst FRENCH_MESSAGES: Record<MessageKey, string> = {\n  copyPage: \"Copier la page\",\n  viewMarkdown: \"Télécharger le Markdown\",\n  pageCopied: \"Page copiée\",\n  pageCopyError:\n    \"Copie impossible. Téléchargez le Markdown pour lire ou copier le texte.\",\n  draftTitle: \"Brouillon\",\n  draftNotice:\n    \"Cette page est accessible par son lien direct et exclue de la navigation et des index.\",\n  searchError: \"La recherche n’a pas pu se charger. Fermez et réessayez.\",\n  appearance: \"Apparence\",\n  colorScheme: \"Thème de couleur\",\n  contrast: \"Contraste\",\n  normalContrast: \"Normal\",\n  highContrast: \"Élevé\",\n  auto: \"Auto\",\n  closeNavigation: \"Fermer la navigation\",\n  primary: \"Navigation principale\",\n  sections: \"Sections\",\n  chooseSection: \"Choisir une section\",\n  headerLinks: \"Liens d’en-tête\",\n  more: \"Plus\",\n  closeMore: \"Fermer le menu\",\n  moreLinks: \"Autres liens\",\n  versions: \"Versions\",\n  documentationVersion: \"Version de la documentation\",\n  documentationVersions: \"Versions de la documentation\",\n  version: \"Version\",\n  home: \"Accueil\",\n  generatedWith: \"Créé avec\",\n  viewSource: \"Voir le code source\",\n  copyCode: \"Copier le code\",\n  codeCopied: \"Code copié\",\n  codeCopyError: \"Impossible de copier le code\",\n  copyHeading: \"Copier le lien vers « {heading} »\",\n  linkCopied: \"Lien copié\",\n  linkCopyError: \"Impossible de copier le lien\",\n  notFound: \"Page introuvable\",\n  notFoundDescription: \"La page demandée est introuvable.\",\n  fallback: \"langue de secours\",\n};\nexport function messages(\n  lang: string,\n  options: LocaleOptions = {},\n): Record<MessageKey, string> {\n  const language = lang.split(\"-\")[0] ?? \"en\";\n  return {\n    ...ENGLISH_MESSAGES,\n    ...(language === \"fr\" ? FRENCH_MESSAGES : {}),\n    ...options.translations?.[language],\n    ...options.translations?.[lang],\n  };\n}\n\nexport function localeAlternates(\n  path: string,\n  routes: DocsRoute[],\n  options: LocaleOptions,\n): Array<{ lang: string; route: string }> {\n  const available = new Set(\n    routes\n      .filter((route) => route.discoverable !== false)\n      .map((route) => route.route),\n  );\n  if (!options.locales || !available.has(path)) return [];\n  const alternates = Object.entries(options.locales).flatMap(\n    ([locale, config]) => {\n      const route = localizedRoute(path, locale, options);\n      return available.has(route)\n        ? [{ lang: config.lang ?? locale, route }]\n        : [];\n    },\n  );\n  const fallback = localizedRoute(\n    path,\n    options.defaultLocale ??\n      (options.locales.root ? \"root\" : Object.keys(options.locales)[0]!),\n    options,\n  );\n  if (available.has(fallback))\n    alternates.push({ lang: \"x-default\", route: fallback });\n  return alternates;\n}\n"],"mappings":"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"}
+{"version":3,"file":"localization.js","names":[],"sources":["../src/localization.ts"],"sourcesContent":["import type { DocsConfig, DocsRoute, NavigationItem } from \"@tenphi/docs\";\nimport {\n  normalizeNavigationPath,\n  type ResolvedNavigationLayout,\n} from \"./navigation.js\";\n\ntype LocaleOptions = {\n  locales?: DocsConfig[\"locales\"] | undefined;\n  defaultLocale?: DocsConfig[\"defaultLocale\"] | undefined;\n  translations?: DocsConfig[\"translations\"] | undefined;\n};\n\nexport function routeLocale(path: string, options: LocaleOptions): string {\n  const first = normalizeNavigationPath(path).split(\"/\")[1];\n  return first && first !== \"root\" && options.locales?.[first] ? first : \"root\";\n}\n\n/** Author components can render before the page initializes route locals. */\nexport function requestLanguage(\n  pathname: string,\n  base: string,\n  options: LocaleOptions,\n): string {\n  const prefix = base.replace(/\\/$/, \"\");\n  const path =\n    prefix && (pathname === prefix || pathname.startsWith(`${prefix}/`))\n      ? pathname.slice(prefix.length)\n      : pathname;\n  const locale = routeLocale(path, options);\n  return options.locales?.[locale]?.lang ?? (locale === \"root\" ? \"en\" : locale);\n}\n\nexport function localePath(path: string, options: LocaleOptions): string {\n  const route = normalizeNavigationPath(path);\n  const locale = routeLocale(route, options);\n  return locale === \"root\"\n    ? route\n    : normalizeNavigationPath(route.slice(locale.length + 1));\n}\n\nexport function localizedRoute(\n  path: string,\n  locale: string,\n  options: LocaleOptions,\n): string {\n  const suffix = localePath(path, options);\n  return normalizeNavigationPath(\n    `${locale === \"root\" ? \"\" : `/${locale}`}${suffix}`,\n  );\n}\n\n/** Missing translations use a real default-language page, then a real locale home. */\nexport function localeTarget(\n  path: string,\n  locale: string,\n  routes: DocsRoute[],\n  options: LocaleOptions,\n): string | undefined {\n  const visible = new Set(\n    routes\n      .filter((route) => route.discoverable !== false)\n      .map((route) => route.route),\n  );\n  const fallback =\n    options.defaultLocale ??\n    (options.locales?.root\n      ? \"root\"\n      : (Object.keys(options.locales ?? {})[0] ?? \"root\"));\n  return [\n    localizedRoute(path, locale, options),\n    localizedRoute(path, fallback, options),\n    localizedRoute(\"/\", locale, options),\n    localizedRoute(\"/\", fallback, options),\n  ].find((route) => visible.has(route));\n}\n\nexport function localeHref(\n  link: string,\n  currentPath: string,\n  routes: DocsRoute[],\n  options: LocaleOptions,\n  base = \"/\",\n): string {\n  if (!link.startsWith(\"/\") || link.startsWith(\"//\")) return link;\n  const suffix = /[?#].*$/.exec(link)?.[0] ?? \"\";\n  const path = suffix ? link.slice(0, -suffix.length) : link;\n  const target = options.locales\n    ? localeTarget(path, routeLocale(currentPath, options), routes, options)\n    : normalizeNavigationPath(path);\n  return (\n    `${base.replace(/\\/$/, \"\")}${target ?? normalizeNavigationPath(path)}${suffix}` ||\n    \"/\"\n  );\n}\n\n/** Resolve navigation against the current locale's available routes. */\nexport function localizedNavigation(\n  layout: ResolvedNavigationLayout,\n  routes: DocsRoute[],\n  currentPath: string,\n  options: LocaleOptions,\n): { layout: ResolvedNavigationLayout; routes: DocsRoute[] } {\n  if (!options.locales) return { layout, routes };\n  const locale = routeLocale(currentPath, options);\n  const language =\n    options.locales[locale]?.lang ?? (locale === \"root\" ? \"en\" : locale);\n  const label = (value: string) =>\n    options.translations?.[language]?.[`navigation.${value}`] ??\n    options.translations?.[language.split(\"-\")[0]!]?.[`navigation.${value}`] ??\n    value;\n  const localRoutes = routes\n    .filter((route) => routeLocale(route.route, options) === locale)\n    .map((route) => ({ ...route, route: localePath(route.route, options) }));\n  const available = new Set(\n    localRoutes\n      .filter((route) => route.discoverable !== false)\n      .map((route) => route.route),\n  );\n  const visibleRoutes = new Map(\n    routes\n      .filter((route) => route.discoverable !== false)\n      .map((route) => [route.route, route]),\n  );\n  const fallbackLocale =\n    options.defaultLocale ??\n    (options.locales.root ? \"root\" : Object.keys(options.locales)[0]!);\n  const convert = (items: NavigationItem[]): NavigationItem[] =>\n    items.flatMap((item): NavigationItem[] => {\n      const link = typeof item === \"string\" ? item : item.link;\n      const internal = link?.startsWith(\"/\") && !link.startsWith(\"//\");\n      const translated = internal ? localePath(link!, options) : link;\n      const fallback = internal\n        ? localizedRoute(link!, fallbackLocale, options)\n        : undefined;\n      const target =\n        !internal || available.has(translated!)\n          ? translated\n          : fallback && visibleRoutes.has(fallback)\n            ? fallback\n            : undefined;\n      if (typeof item === \"string\") {\n        if (!target) return [];\n        if (!internal || available.has(translated!)) return [target];\n        const route = visibleRoutes.get(target)!;\n        return [\n          {\n            label:\n              typeof route.sidebar === \"object\" && route.sidebar.label\n                ? route.sidebar.label\n                : route.title,\n            link: target,\n          },\n        ];\n      }\n      if (\"items\" in item || \"autogenerate\" in item) {\n        const { link: _link, ...group } = item;\n        const children = \"items\" in item ? convert(item.items) : undefined;\n        if (children?.length === 0 && !target) return [];\n        return [\n          {\n            ...group,\n            label: label(group.label),\n            ...(target ? { link: target } : {}),\n            ...(\"items\" in item\n              ? { items: children! }\n              : {\n                  autogenerate: {\n                    directory: localePath(item.autogenerate.directory, options),\n                  },\n                }),\n          },\n        ];\n      }\n      return target\n        ? [{ ...item, label: label(item.label), link: target }]\n        : [];\n    });\n  return {\n    layout: {\n      ...layout,\n      ...(layout.items ? { items: convert(layout.items) } : {}),\n      tabs: layout.tabs.map((tab) => ({\n        ...tab,\n        label: label(tab.label),\n        link:\n          tab.link.startsWith(\"/\") && !tab.link.startsWith(\"//\")\n            ? localePath(tab.link, options)\n            : tab.link,\n        ...(tab.items ? { items: convert(tab.items) } : {}),\n      })),\n    },\n    routes: localRoutes,\n  };\n}\n\nexport const ENGLISH_MESSAGES = {\n  copyPage: \"Copy page\",\n  viewMarkdown: \"Download Markdown\",\n  pageCopied: \"Page copied\",\n  pageCopyError: \"Could not copy. Download Markdown to read or copy the text.\",\n  draftTitle: \"Draft\",\n  draftNotice:\n    \"This page is available by direct link and excluded from navigation and indexes.\",\n  searchError: \"Search could not load. Close and try again.\",\n  appearance: \"Appearance\",\n  colorScheme: \"Color scheme\",\n  contrast: \"Contrast\",\n  normalContrast: \"Normal\",\n  highContrast: \"High\",\n  auto: \"Auto\",\n  closeNavigation: \"Close navigation\",\n  primary: \"Primary\",\n  sections: \"Sections\",\n  chooseSection: \"Choose section\",\n  headerLinks: \"Header links\",\n  more: \"More\",\n  closeMore: \"Close more menu\",\n  moreLinks: \"More links\",\n  versions: \"Versions\",\n  documentationVersion: \"Documentation version\",\n  documentationVersions: \"Documentation versions\",\n  version: \"Version\",\n  home: \"Home\",\n  generatedWith: \"Generated with\",\n  viewSource: \"View source\",\n  copyCode: \"Copy code\",\n  codeCopied: \"Code copied\",\n  codeCopyError: \"Could not copy code\",\n  copyHeading: \"Copy link to “{heading}”\",\n  linkCopied: \"Link copied\",\n  linkCopyError: \"Could not copy link\",\n  notFound: \"Page not found\",\n  notFoundDescription: \"The page you requested could not be found.\",\n  fallback: \"fallback\",\n} as const;\nexport type MessageKey = keyof typeof ENGLISH_MESSAGES;\nconst FRENCH_MESSAGES: Record<MessageKey, string> = {\n  copyPage: \"Copier la page\",\n  viewMarkdown: \"Télécharger le Markdown\",\n  pageCopied: \"Page copiée\",\n  pageCopyError:\n    \"Copie impossible. Téléchargez le Markdown pour lire ou copier le texte.\",\n  draftTitle: \"Brouillon\",\n  draftNotice:\n    \"Cette page est accessible par son lien direct et exclue de la navigation et des index.\",\n  searchError: \"La recherche n’a pas pu se charger. Fermez et réessayez.\",\n  appearance: \"Apparence\",\n  colorScheme: \"Thème de couleur\",\n  contrast: \"Contraste\",\n  normalContrast: \"Normal\",\n  highContrast: \"Élevé\",\n  auto: \"Auto\",\n  closeNavigation: \"Fermer la navigation\",\n  primary: \"Navigation principale\",\n  sections: \"Sections\",\n  chooseSection: \"Choisir une section\",\n  headerLinks: \"Liens d’en-tête\",\n  more: \"Plus\",\n  closeMore: \"Fermer le menu\",\n  moreLinks: \"Autres liens\",\n  versions: \"Versions\",\n  documentationVersion: \"Version de la documentation\",\n  documentationVersions: \"Versions de la documentation\",\n  version: \"Version\",\n  home: \"Accueil\",\n  generatedWith: \"Créé avec\",\n  viewSource: \"Voir le code source\",\n  copyCode: \"Copier le code\",\n  codeCopied: \"Code copié\",\n  codeCopyError: \"Impossible de copier le code\",\n  copyHeading: \"Copier le lien vers « {heading} »\",\n  linkCopied: \"Lien copié\",\n  linkCopyError: \"Impossible de copier le lien\",\n  notFound: \"Page introuvable\",\n  notFoundDescription: \"La page demandée est introuvable.\",\n  fallback: \"langue de secours\",\n};\nexport function messages(\n  lang: string,\n  options: LocaleOptions = {},\n): Record<MessageKey, string> {\n  const language = lang.split(\"-\")[0] ?? \"en\";\n  return {\n    ...ENGLISH_MESSAGES,\n    ...(language === \"fr\" ? FRENCH_MESSAGES : {}),\n    ...options.translations?.[language],\n    ...options.translations?.[lang],\n  };\n}\n\nexport function localeAlternates(\n  path: string,\n  routes: DocsRoute[],\n  options: LocaleOptions,\n): Array<{ lang: string; route: string }> {\n  const available = new Set(\n    routes\n      .filter((route) => route.discoverable !== false)\n      .map((route) => route.route),\n  );\n  if (!options.locales || !available.has(path)) return [];\n  const alternates = Object.entries(options.locales).flatMap(\n    ([locale, config]) => {\n      const route = localizedRoute(path, locale, options);\n      return available.has(route)\n        ? [{ lang: config.lang ?? locale, route }]\n        : [];\n    },\n  );\n  const fallback = localizedRoute(\n    path,\n    options.defaultLocale ??\n      (options.locales.root ? \"root\" : Object.keys(options.locales)[0]!),\n    options,\n  );\n  if (available.has(fallback))\n    alternates.push({ lang: \"x-default\", route: fallback });\n  return alternates;\n}\n"],"mappings":"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"}

package/dist/overrides/Header.astro

@@ -107,6 +107,14 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
     >
       <ThemeSelect />
     </div>
+    {
+      !Astro.locals.cookbookRoute.hasSidebar &&
+        Object.keys(content.locales ?? {}).length > 1 && (
+          <div class="td-header__mobile-language cookbook-print-hidden">
+            <LanguageSelect compact />
+          </div>
+        )
+    }
     <div
       class="td-header__tools cookbook-hidden md:cookbook-flex cookbook-print-hidden"
     >

package/dist/overrides/LanguageSelect.astro

@@ -2,10 +2,16 @@
 import { content } from "virtual:cookbook/config";
 import { localeTarget, routeLocale, messages } from "../localization.js";
 import { navigationPath } from "../navigation.js";
-import Icon from "../components/Icon.astro";
+import SelectPopover from "../components/SelectPopover.astro";
+interface Props {
+  compact?: boolean;
+  sidebar?: boolean;
+}
+const { compact = false, sidebar = false } = Astro.props;
 const current = navigationPath(Astro.url.pathname, content.base);
 const selected = routeLocale(current, content);
 const ui = messages(Astro.locals.cookbookRoute.lang, content);
+const accessibleLabel = Astro.locals.t("languageSelect.accessibleLabel");
 const options = Object.entries(content.locales ?? {}).flatMap(
   ([locale, config]) => {
     const target = localeTarget(current, locale, content.routes, content);
@@ -14,50 +20,38 @@ const options = Object.entries(content.locales ?? {}).flatMap(
       ? [
           {
             locale,
-            label: `${config.label}${fallback ? ` (${ui.fallback})` : ""}`,
+            label: config.label,
+            lang: config.lang ?? (locale === "root" ? "en" : locale),
+            fallback,
             href: `${content.base.replace(/\/$/, "")}${target === "/" ? "/" : `${target}/`}`,
           },
         ]
       : [];
   },
 );
+const selectedOption = options.find((option) => option.locale === selected);
 ---
 
 {
   options.length > 1 && (
-    <cookbook-language-select>
-      <label>
-        <Icon name="translate" class="label-icon" />
-        <span class="sr-only">
-          {Astro.locals.t("languageSelect.accessibleLabel")}
-        </span>
-        <select>
-          {options.map((option) => (
-            <option value={option.href} selected={option.locale === selected}>
-              {option.label}
-            </option>
-          ))}
-        </select>
-        <Icon name="down-caret" class="caret" />
-      </label>
+    <cookbook-language-select
+      data-compact={compact ? "" : undefined}
+      data-sidebar={sidebar ? "" : undefined}
+      data-tasty-anatomy="LanguageSelect"
+    >
+      <SelectPopover
+        triggerLabel={`${accessibleLabel}: ${selectedOption?.label ?? ""}`}
+        selectedLabel={selectedOption?.label ?? ""}
+        title={accessibleLabel}
+        icon="translate"
+        options={options.map((option) => ({
+          href: option.href,
+          label: option.label,
+          lang: option.lang,
+          hint: option.fallback ? ui.fallback : undefined,
+          current: option.locale === selected,
+        }))}
+      />
     </cookbook-language-select>
   )
 }
-
-<script>
-  class CookbookLanguageSelect extends HTMLElement {
-    connectedCallback() {
-      const select = this.querySelector("select");
-      select?.addEventListener("change", () => {
-        window.location.href = select.value;
-      });
-      window.addEventListener("pageshow", () => {
-        if (select)
-          select.selectedIndex =
-            select.querySelector("option[selected]")?.index ?? 0;
-      });
-    }
-  }
-  if (!customElements.get("cookbook-language-select"))
-    customElements.define("cookbook-language-select", CookbookLanguageSelect);
-</script>

package/dist/overrides/MobileMenuFooter.astro

@@ -11,5 +11,5 @@ import { MobileMenuFooterRoot } from "../components/LayoutComponents.js";
   <div class="td-mobile-preferences__social">
     <SocialIcons />
   </div>
-  <LanguageSelect />
+  <LanguageSelect sidebar />
 </MobileMenuFooterRoot>

package/dist/overrides/ThemeSelect.astro

@@ -82,6 +82,7 @@ const contrasts = [
     parseScheme,
     parseContrast,
   } from "../components/appearance-preferences.js";
+  import { initializePopoverMotion } from "../client/popover-motion.js";
 
   let current = loadPreferences();
   const systemScheme = matchMedia("(prefers-color-scheme: light)");
@@ -127,6 +128,7 @@ const contrasts = [
     connectedCallback(): void {
       if (this.dataset.ready) return;
       this.dataset.ready = "true";
+      initializePopoverMotion(this.querySelector<HTMLElement>("[popover]")!);
       this.addEventListener("change", (event) => {
         const input = event.target;
         if (!(input instanceof HTMLInputElement)) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/renderer",
-  "version": "0.20.4",
+  "version": "0.20.5",
   "description": "Astro renderer and Tasty theme for Cookbook",
   "type": "module",
   "sideEffects": [
@@ -61,7 +61,7 @@
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@fontsource-variable/onest": "^5.3.0",
     "@pagefind/default-ui": "1.5.2",
-    "@tenphi/docs": "0.20.4",
+    "@tenphi/docs": "0.20.5",
     "@tenphi/eslint-plugin-tasty": "1.1.0",
     "@tenphi/glaze": "2.0.0",
     "@tenphi/tasty": "3.8.0",