@tenphi/renderer 0.20.3 → 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,6 +94,7 @@ var CookbookHeaderLinks = class extends HTMLElement {
 		const close = () => {
 			if (panel?.matches(":popover-open")) panel.hidePopover();
 		};
+		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    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/client/search.js

@@ -52,7 +52,10 @@ function initializeSearch(element, options, development, base) {
 	const show = async () => {
 		if (dialog.open) return;
 		returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : open;
+		dialog.removeAttribute("data-open");
 		dialog.showModal();
+		dialog.getBoundingClientRect();
+		dialog.setAttribute("data-open", "");
 		document.body.setAttribute("data-search-modal-open", "");
 		if (!development && status) status.hidden = true;
 		try {
@@ -70,6 +73,7 @@ function initializeSearch(element, options, development, base) {
 		if (event.target.closest("a[href]") || !frame.contains(event.target)) dialog.close();
 	});
 	dialog.addEventListener("close", () => {
+		dialog.removeAttribute("data-open");
 		document.body.removeAttribute("data-search-modal-open");
 		returnFocus?.focus();
 	});

package/dist/client/search.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.js","names":[],"sources":["../../src/client/search.ts"],"sourcesContent":["type SearchResult = { url: string; sub_results?: SearchResult[] };\ntype PagefindOptions = Record<string, unknown> & {\n  processResult?: (result: SearchResult) => SearchResult | void;\n};\n\n/** Own the dialog lifecycle; Pagefind owns indexing, filtering and result rendering. */\nexport function initializeSearch(\n  element: HTMLElement,\n  options: PagefindOptions,\n  development: boolean,\n  base: string,\n): void {\n  if (element.dataset.initialized) return;\n  element.dataset.initialized = \"true\";\n  const open = element.querySelector<HTMLButtonElement>(\"[data-open-modal]\")!;\n  const close = element.querySelector<HTMLButtonElement>(\"[data-close-modal]\")!;\n  const dialog = element.querySelector(\"dialog\")!;\n  const frame = element.querySelector(\".dialog-frame\")!;\n  const status = element.querySelector<HTMLElement>(\"[data-search-status]\");\n  const shortcut = open.querySelector(\"kbd\")!;\n  if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {\n    shortcut.querySelector(\"kbd\")!.textContent = \"⌘\";\n    open.setAttribute(\"aria-keyshortcuts\", \"Meta+K\");\n  }\n  delete shortcut.dataset.pending;\n  let initialized: Promise<void> | undefined;\n  let returnFocus: HTMLElement | null = null;\n  const initialize = () => {\n    if (development) return Promise.resolve();\n    return (initialized ??= (async () => {\n      // @ts-expect-error Pagefind publishes no declarations for its default UI.\n      const { PagefindUI } = await import(\"@pagefind/default-ui\");\n      const translations = JSON.parse(element.dataset.translations ?? \"{}\");\n      const format = (url: string) =>\n        element.hasAttribute(\"data-strip-trailing-slash\")\n          ? url.replace(/(.)\\/(#.*)?$/, \"$1$2\")\n          : url;\n      new PagefindUI({\n        ...options,\n        element: \"#cookbook__search\",\n        baseUrl: base,\n        bundlePath: `${base.replace(/\\/$/, \"\")}/pagefind/`,\n        showImages: false,\n        showSubResults: true,\n        translations,\n        processResult(result: SearchResult) {\n          result = options.processResult?.(result) ?? result;\n          result.url = format(result.url);\n          result.sub_results?.forEach((child) => {\n            child.url = format(child.url);\n          });\n          return result;\n        },\n      });\n    })().catch((error: unknown) => {\n      initialized = undefined;\n      if (status) {\n        status.hidden = false;\n        // Reuse the localized Pagefind error, with a plain fallback.\n        const translations = JSON.parse(element.dataset.translations ?? \"{}\");\n        status.textContent =\n          translations.error ?? \"Search could not load. Close and try again.\";\n      }\n      throw error;\n    }));\n  };\n  const show = async () => {\n    if (dialog.open) return;\n    returnFocus =\n      document.activeElement instanceof HTMLElement\n        ? document.activeElement\n        : open;\n    dialog.showModal();\n    document.body.setAttribute(\"data-search-modal-open\", \"\");\n    if (!development && status) status.hidden = true;\n    try {\n      await initialize();\n      // Pagefind mounts synchronously. Only focus if the user has not closed it.\n      if (dialog.open) element.querySelector(\"input\")?.focus();\n    } catch {\n      /* Keep the close control usable when the search bundle fails. */\n    }\n  };\n  open.addEventListener(\"click\", () => {\n    void show();\n  });\n  open.disabled = false;\n  close.addEventListener(\"click\", () => dialog.close());\n  dialog.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return;\n    if (event.target.closest(\"a[href]\") || !frame.contains(event.target))\n      dialog.close();\n  });\n  dialog.addEventListener(\"close\", () => {\n    document.body.removeAttribute(\"data-search-modal-open\");\n    returnFocus?.focus();\n  });\n  window.addEventListener(\"keydown\", (event) => {\n    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === \"k\") {\n      event.preventDefault();\n      if (dialog.open) dialog.close();\n      else void show();\n    }\n  });\n}\n"],"mappings":";;AAMA,SAAgB,iBACd,SACA,SACA,aACA,MACM;CACN,IAAI,QAAQ,QAAQ,aAAa;CACjC,QAAQ,QAAQ,cAAc;CAC9B,MAAM,OAAO,QAAQ,cAAiC,mBAAmB;CACzE,MAAM,QAAQ,QAAQ,cAAiC,oBAAoB;CAC3E,MAAM,SAAS,QAAQ,cAAc,QAAQ;CAC7C,MAAM,QAAQ,QAAQ,cAAc,eAAe;CACnD,MAAM,SAAS,QAAQ,cAA2B,sBAAsB;CACxE,MAAM,WAAW,KAAK,cAAc,KAAK;CACzC,IAAI,0BAA0B,KAAK,UAAU,QAAQ,GAAG;EACtD,SAAS,cAAc,KAAK,CAAC,CAAE,cAAc;EAC7C,KAAK,aAAa,qBAAqB,QAAQ;CACjD;CACA,OAAO,SAAS,QAAQ;CACxB,IAAI;CACJ,IAAI,cAAkC;CACtC,MAAM,mBAAmB;EACvB,IAAI,aAAa,OAAO,QAAQ,QAAQ;EACxC,OAAQ,iBAAiB,YAAY;GAEnC,MAAM,EAAE,eAAe,MAAM,OAAO;GACpC,MAAM,eAAe,KAAK,MAAM,QAAQ,QAAQ,gBAAgB,IAAI;GACpE,MAAM,UAAU,QACd,QAAQ,aAAa,2BAA2B,IAC5C,IAAI,QAAQ,gBAAgB,MAAM,IAClC;GACN,IAAI,WAAW;IACb,GAAG;IACH,SAAS;IACT,SAAS;IACT,YAAY,GAAG,KAAK,QAAQ,OAAO,EAAE,EAAE;IACvC,YAAY;IACZ,gBAAgB;IAChB;IACA,cAAc,QAAsB;KAClC,SAAS,QAAQ,gBAAgB,MAAM,KAAK;KAC5C,OAAO,MAAM,OAAO,OAAO,GAAG;KAC9B,OAAO,aAAa,SAAS,UAAU;MACrC,MAAM,MAAM,OAAO,MAAM,GAAG;KAC9B,CAAC;KACD,OAAO;IACT;GACF,CAAC;EACH,EAAA,CAAG,CAAC,CAAC,OAAO,UAAmB;GAC7B,cAAc,KAAA;GACd,IAAI,QAAQ;IACV,OAAO,SAAS;IAEhB,MAAM,eAAe,KAAK,MAAM,QAAQ,QAAQ,gBAAgB,IAAI;IACpE,OAAO,cACL,aAAa,SAAS;GAC1B;GACA,MAAM;EACR,CAAC;CACH;CACA,MAAM,OAAO,YAAY;EACvB,IAAI,OAAO,MAAM;EACjB,cACE,SAAS,yBAAyB,cAC9B,SAAS,gBACT;EACN,OAAO,UAAU;EACjB,SAAS,KAAK,aAAa,0BAA0B,EAAE;EACvD,IAAI,CAAC,eAAe,QAAQ,OAAO,SAAS;EAC5C,IAAI;GACF,MAAM,WAAW;GAEjB,IAAI,OAAO,MAAM,QAAQ,cAAc,OAAO,CAAC,EAAE,MAAM;EACzD,QAAQ,CAER;CACF;CACA,KAAK,iBAAiB,eAAe;EACnC,KAAU;CACZ,CAAC;CACD,KAAK,WAAW;CAChB,MAAM,iBAAiB,eAAe,OAAO,MAAM,CAAC;CACpD,OAAO,iBAAiB,UAAU,UAAU;EAC1C,IAAI,EAAE,MAAM,kBAAkB,UAAU;EACxC,IAAI,MAAM,OAAO,QAAQ,SAAS,KAAK,CAAC,MAAM,SAAS,MAAM,MAAM,GACjE,OAAO,MAAM;CACjB,CAAC;CACD,OAAO,iBAAiB,eAAe;EACrC,SAAS,KAAK,gBAAgB,wBAAwB;EACtD,aAAa,MAAM;CACrB,CAAC;CACD,OAAO,iBAAiB,YAAY,UAAU;EAC5C,KAAK,MAAM,WAAW,MAAM,YAAY,MAAM,IAAI,YAAY,MAAM,KAAK;GACvE,MAAM,eAAe;GACrB,IAAI,OAAO,MAAM,OAAO,MAAM;QACzB,KAAU;EACjB;CACF,CAAC;AACH"}
+{"version":3,"file":"search.js","names":[],"sources":["../../src/client/search.ts"],"sourcesContent":["type SearchResult = { url: string; sub_results?: SearchResult[] };\ntype PagefindOptions = Record<string, unknown> & {\n  processResult?: (result: SearchResult) => SearchResult | void;\n};\n\n/** Own the dialog lifecycle; Pagefind owns indexing, filtering and result rendering. */\nexport function initializeSearch(\n  element: HTMLElement,\n  options: PagefindOptions,\n  development: boolean,\n  base: string,\n): void {\n  if (element.dataset.initialized) return;\n  element.dataset.initialized = \"true\";\n  const open = element.querySelector<HTMLButtonElement>(\"[data-open-modal]\")!;\n  const close = element.querySelector<HTMLButtonElement>(\"[data-close-modal]\")!;\n  const dialog = element.querySelector(\"dialog\")!;\n  const frame = element.querySelector(\".dialog-frame\")!;\n  const status = element.querySelector<HTMLElement>(\"[data-search-status]\");\n  const shortcut = open.querySelector(\"kbd\")!;\n  if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {\n    shortcut.querySelector(\"kbd\")!.textContent = \"⌘\";\n    open.setAttribute(\"aria-keyshortcuts\", \"Meta+K\");\n  }\n  delete shortcut.dataset.pending;\n  let initialized: Promise<void> | undefined;\n  let returnFocus: HTMLElement | null = null;\n  const initialize = () => {\n    if (development) return Promise.resolve();\n    return (initialized ??= (async () => {\n      // @ts-expect-error Pagefind publishes no declarations for its default UI.\n      const { PagefindUI } = await import(\"@pagefind/default-ui\");\n      const translations = JSON.parse(element.dataset.translations ?? \"{}\");\n      const format = (url: string) =>\n        element.hasAttribute(\"data-strip-trailing-slash\")\n          ? url.replace(/(.)\\/(#.*)?$/, \"$1$2\")\n          : url;\n      new PagefindUI({\n        ...options,\n        element: \"#cookbook__search\",\n        baseUrl: base,\n        bundlePath: `${base.replace(/\\/$/, \"\")}/pagefind/`,\n        showImages: false,\n        showSubResults: true,\n        translations,\n        processResult(result: SearchResult) {\n          result = options.processResult?.(result) ?? result;\n          result.url = format(result.url);\n          result.sub_results?.forEach((child) => {\n            child.url = format(child.url);\n          });\n          return result;\n        },\n      });\n    })().catch((error: unknown) => {\n      initialized = undefined;\n      if (status) {\n        status.hidden = false;\n        // Reuse the localized Pagefind error, with a plain fallback.\n        const translations = JSON.parse(element.dataset.translations ?? \"{}\");\n        status.textContent =\n          translations.error ?? \"Search could not load. Close and try again.\";\n      }\n      throw error;\n    }));\n  };\n  const show = async () => {\n    if (dialog.open) return;\n    returnFocus =\n      document.activeElement instanceof HTMLElement\n        ? document.activeElement\n        : open;\n    dialog.removeAttribute(\"data-open\");\n    dialog.showModal();\n    // Establish the initial state after entering the top layer. The global\n    // style renderer does not preserve @starting-style in server output.\n    dialog.getBoundingClientRect();\n    dialog.setAttribute(\"data-open\", \"\");\n    document.body.setAttribute(\"data-search-modal-open\", \"\");\n    if (!development && status) status.hidden = true;\n    try {\n      await initialize();\n      // Pagefind mounts synchronously. Only focus if the user has not closed it.\n      if (dialog.open) element.querySelector(\"input\")?.focus();\n    } catch {\n      /* Keep the close control usable when the search bundle fails. */\n    }\n  };\n  open.addEventListener(\"click\", () => {\n    void show();\n  });\n  open.disabled = false;\n  close.addEventListener(\"click\", () => dialog.close());\n  dialog.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return;\n    if (event.target.closest(\"a[href]\") || !frame.contains(event.target))\n      dialog.close();\n  });\n  dialog.addEventListener(\"close\", () => {\n    dialog.removeAttribute(\"data-open\");\n    document.body.removeAttribute(\"data-search-modal-open\");\n    returnFocus?.focus();\n  });\n  window.addEventListener(\"keydown\", (event) => {\n    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === \"k\") {\n      event.preventDefault();\n      if (dialog.open) dialog.close();\n      else void show();\n    }\n  });\n}\n"],"mappings":";;AAMA,SAAgB,iBACd,SACA,SACA,aACA,MACM;CACN,IAAI,QAAQ,QAAQ,aAAa;CACjC,QAAQ,QAAQ,cAAc;CAC9B,MAAM,OAAO,QAAQ,cAAiC,mBAAmB;CACzE,MAAM,QAAQ,QAAQ,cAAiC,oBAAoB;CAC3E,MAAM,SAAS,QAAQ,cAAc,QAAQ;CAC7C,MAAM,QAAQ,QAAQ,cAAc,eAAe;CACnD,MAAM,SAAS,QAAQ,cAA2B,sBAAsB;CACxE,MAAM,WAAW,KAAK,cAAc,KAAK;CACzC,IAAI,0BAA0B,KAAK,UAAU,QAAQ,GAAG;EACtD,SAAS,cAAc,KAAK,CAAC,CAAE,cAAc;EAC7C,KAAK,aAAa,qBAAqB,QAAQ;CACjD;CACA,OAAO,SAAS,QAAQ;CACxB,IAAI;CACJ,IAAI,cAAkC;CACtC,MAAM,mBAAmB;EACvB,IAAI,aAAa,OAAO,QAAQ,QAAQ;EACxC,OAAQ,iBAAiB,YAAY;GAEnC,MAAM,EAAE,eAAe,MAAM,OAAO;GACpC,MAAM,eAAe,KAAK,MAAM,QAAQ,QAAQ,gBAAgB,IAAI;GACpE,MAAM,UAAU,QACd,QAAQ,aAAa,2BAA2B,IAC5C,IAAI,QAAQ,gBAAgB,MAAM,IAClC;GACN,IAAI,WAAW;IACb,GAAG;IACH,SAAS;IACT,SAAS;IACT,YAAY,GAAG,KAAK,QAAQ,OAAO,EAAE,EAAE;IACvC,YAAY;IACZ,gBAAgB;IAChB;IACA,cAAc,QAAsB;KAClC,SAAS,QAAQ,gBAAgB,MAAM,KAAK;KAC5C,OAAO,MAAM,OAAO,OAAO,GAAG;KAC9B,OAAO,aAAa,SAAS,UAAU;MACrC,MAAM,MAAM,OAAO,MAAM,GAAG;KAC9B,CAAC;KACD,OAAO;IACT;GACF,CAAC;EACH,EAAA,CAAG,CAAC,CAAC,OAAO,UAAmB;GAC7B,cAAc,KAAA;GACd,IAAI,QAAQ;IACV,OAAO,SAAS;IAEhB,MAAM,eAAe,KAAK,MAAM,QAAQ,QAAQ,gBAAgB,IAAI;IACpE,OAAO,cACL,aAAa,SAAS;GAC1B;GACA,MAAM;EACR,CAAC;CACH;CACA,MAAM,OAAO,YAAY;EACvB,IAAI,OAAO,MAAM;EACjB,cACE,SAAS,yBAAyB,cAC9B,SAAS,gBACT;EACN,OAAO,gBAAgB,WAAW;EAClC,OAAO,UAAU;EAGjB,OAAO,sBAAsB;EAC7B,OAAO,aAAa,aAAa,EAAE;EACnC,SAAS,KAAK,aAAa,0BAA0B,EAAE;EACvD,IAAI,CAAC,eAAe,QAAQ,OAAO,SAAS;EAC5C,IAAI;GACF,MAAM,WAAW;GAEjB,IAAI,OAAO,MAAM,QAAQ,cAAc,OAAO,CAAC,EAAE,MAAM;EACzD,QAAQ,CAER;CACF;CACA,KAAK,iBAAiB,eAAe;EACnC,KAAU;CACZ,CAAC;CACD,KAAK,WAAW;CAChB,MAAM,iBAAiB,eAAe,OAAO,MAAM,CAAC;CACpD,OAAO,iBAAiB,UAAU,UAAU;EAC1C,IAAI,EAAE,MAAM,kBAAkB,UAAU;EACxC,IAAI,MAAM,OAAO,QAAQ,SAAS,KAAK,CAAC,MAAM,SAAS,MAAM,MAAM,GACjE,OAAO,MAAM;CACjB,CAAC;CACD,OAAO,iBAAiB,eAAe;EACrC,OAAO,gBAAgB,WAAW;EAClC,SAAS,KAAK,gBAAgB,wBAAwB;EACtD,aAAa,MAAM;CACrB,CAAC;CACD,OAAO,iBAAiB,YAAY,UAAU;EAC5C,KAAK,MAAM,WAAW,MAAM,YAAY,MAAM,IAAI,YAAY,MAAM,KAAK;GACvE,MAAM,eAAe;GACrB,IAAI,OAAO,MAAM,OAAO,MAAM;QACzB,KAAU;EACjB;CACF,CAAC;AACH"}

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";
@@ -40,7 +41,7 @@ export default function GlobalStyles() {
       colorScheme: "dark",
       "$docs-nav-height": {
         "": "4.5rem",
-        ":has(.td-top-tabs)": "7rem",
+        ":has(.td-top-tabs)": "7.25rem",
         "@mobile": "3.5rem",
         "@mobile & [data-has-sidebar]": "6.5rem",
       },
@@ -313,6 +314,7 @@ export default function GlobalStyles() {
     "site-search",
     resolveComponentStyles("Search", {
       display: "contents",
+      "$dialog-transition": "120ms",
       Status: {
         $: "[data-search-status]",
         margin: "auto",
@@ -323,7 +325,7 @@ export default function GlobalStyles() {
       Dialog: {
         $: "dialog",
         radius: { "": "$card-radius", "@mobile": "0" },
-        inlineSize: { "": "90% max 40rem", "@mobile": "100% max 100%" },
+        inlineSize: { "": "0 90% 40rem", "@mobile": "100%" },
         blockSize: { "": "max-content", "@mobile": "100%" },
         maxBlockSize: { "": "(100% - 8rem)", "@mobile": "100%" },
         minBlockSize: { "": "15rem", "@mobile": "100%" },
@@ -333,6 +335,13 @@ export default function GlobalStyles() {
         border: true,
         fill: "#surface",
         shadow: "0 1rem 3rem #shadow",
+        opacity: "0",
+        scale: { "": "0.98", "@mobile": "1" },
+        transition: {
+          "": "none",
+          "!@reduced-motion":
+            "opacity $dialog-transition ease-out, scale $dialog-transition ease-out, display $dialog-transition allow-discrete, overlay $dialog-transition allow-discrete",
+        },
       },
       CloseIcon: {
         $: "button[data-close-modal]::before",
@@ -347,46 +356,58 @@ export default function GlobalStyles() {
         mask: `url("${svgIconUrl(closeIcon)}") center / contain no-repeat`,
       },
       OpenDialog: { $: "dialog[open]", display: "flex" },
+      EnteredDialog: {
+        $: "dialog[open][data-open]",
+        opacity: "1",
+        scale: "1",
+      },
       Backdrop: {
         $: "dialog::backdrop",
         fill: "#overlay",
         backdropFilter: "blur(0.25rem)",
+        opacity: "0",
+        transition: {
+          "": "none",
+          "!@reduced-motion":
+            "opacity $dialog-transition ease-out, display $dialog-transition allow-discrete, overlay $dialog-transition allow-discrete",
+        },
+      },
+      EnteredBackdrop: {
+        $: "dialog[open][data-open]::backdrop",
+        opacity: "1",
       },
       Frame: {
         $: ".dialog-frame",
-        position: "relative",
         display: "flex",
         flow: "column",
         flexGrow: "1",
+        minBlockSize: "0",
         gap: "($gap * 2)",
-        padding: { "": "($gap * 3)", "@mobile": "($gap * 2)" },
-        overflow: "auto",
+        padding: { "": "($gap * 3)", "@mobile": "($gap * 2) ($gap * 2) 0" },
+        overflow: "hidden",
       },
       Container: {
         $: ".search-container",
+        display: "flex",
+        flow: "column",
+        flexGrow: "1",
         inlineSize: "100%",
-        paddingBlockStart: { "": "0", "@mobile": "4rem" },
+        minBlockSize: "0",
       },
       Close: {
         $: "button[data-close-modal]",
-        position: "absolute",
-        zIndex: "1",
-        insetBlockStart: "($gap * 2)",
-        insetInlineEnd: "($gap * 2)",
-        display: { "": "none", "@mobile": "flex" },
-        alignItems: "center",
-        justifyContent: "center",
-        gap: "0.375rem",
-        blockSize: "3rem",
-        minBlockSize: "3rem",
-        paddingInlineStart: "0.625rem",
-        paddingInlineEnd: "0.625rem",
+        display: { "": "none", "@mobile": "grid" },
+        placeItems: "center",
+        alignSelf: "flex-end",
+        flexShrink: "0",
+        inlineSize: "$docs-menu-button-size",
+        blockSize: "$docs-menu-button-size",
+        minBlockSize: "$docs-menu-button-size",
+        padding: "0",
         color: "#text-soft",
-        border: true,
-        borderColor: "#border",
-        radius: "$radius",
-        fill: "#surface-3",
-        preset: "small / strong",
+        border: "0",
+        radius: "$header-control-radius",
+        fill: "#clear",
         boxShadow: "none",
         cursor: "pointer",
         transition: "color $transition, background-color $transition",
@@ -394,12 +415,12 @@ export default function GlobalStyles() {
       HoverClose: {
         $: "button[data-close-modal]:hover",
         color: "#text",
-        fill: "#surface-3-hover",
+        fill: "#surface-2-hover",
       },
       ActiveClose: {
         $: "button[data-close-modal]:active",
         color: "#text",
-        fill: "#surface-3-pressed",
+        fill: "#surface-2-pressed",
       },
     }),
   );
@@ -600,7 +621,7 @@ export default function GlobalStyles() {
         minBlockSize: "100%",
         inlinePadding: "$docs-sidebar-pad-x",
         gap: "($gap * 2)",
-        paddingBlockStart: "($gap * 2)",
+        paddingBlockStart: { "": "($gap * 3)", "@mobile": "($gap * 2)" },
         paddingBlockEnd: "($gap * 6)",
       },
       Tree: { $: "cookbook-sidebar", display: "block" },
@@ -723,7 +744,7 @@ export default function GlobalStyles() {
       },
       TopLevelLink: {
         $: 'a.large:not([aria-current="page"])',
-        color: "#text",
+        color: "#sidebar-text",
         preset: "navigation",
       },
     }),
@@ -734,7 +755,7 @@ export default function GlobalStyles() {
     resolveComponentStyles("TableOfContents", {
       display: "block",
       hide: { "": false, "@narrow-layout": true },
-      paddingBlockStart: "($gap * 3)",
+      paddingBlockStart: "($gap * 4)",
       paddingInlineStart: "$docs-sidebar-pad-x",
       paddingInlineEnd: "$docs-sidebar-pad-x",
       Heading: {
@@ -915,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: {
@@ -1153,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",
       },
     }),
@@ -1367,6 +1389,10 @@ export default function GlobalStyles() {
       gap: "$gap",
       inlineSize: { "": "100%", "@mobile": "$docs-menu-button-size" },
       maxInlineSize: "22rem",
+      marginInlineStart: {
+        "": "0",
+        "@media(w >= 80rem)": "min(5rem, max(0px, calc(100% - 22rem)))",
+      },
       blockSize: { "": "$control-height", "@mobile": "$docs-menu-button-size" },
       minBlockSize: "0",
       padding: { "": "0 $gap 0 ($gap * 1.5)", "@mobile": "0" },
@@ -1407,53 +1433,95 @@ 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",
       },
-      Option: { $: "option", color: "#text", fill: "#surface-2" },
+      CompactLabel: {
+        $: "&[data-compact] > button > .trigger-label",
+        hide: true,
+      },
+      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,
     }),
   );
 
   useGlobalStyles(
     "#cookbook__search",
     resolveComponentStyles("SearchResults", {
+      display: "flex",
+      flow: "column",
+      flexGrow: "1",
+      minBlockSize: "0",
       "$pagefind-ui-primary": "#accent-text",
       "$pagefind-ui-text": "#text-soft",
       "$pagefind-ui-background": "#surface",
@@ -1461,9 +1529,31 @@ export default function GlobalStyles() {
       "$pagefind-ui-border-width": "$border-width",
       "$pagefind-ui-tag": "#surface-3",
       preset: "body",
-      Form: { $: ".pagefind-ui__form", position: "relative" },
+      UI: {
+        $: ".pagefind-ui",
+        display: "flex",
+        flow: "column",
+        flexGrow: "1",
+        minBlockSize: "0",
+      },
+      Form: {
+        $: ".pagefind-ui__form",
+        position: "relative",
+        display: "flex",
+        flow: "column",
+        flexGrow: "1",
+        minBlockSize: "0",
+      },
+      Drawer: {
+        $: ".pagefind-ui__drawer",
+        display: "flex",
+        flow: "column",
+        flexGrow: "1",
+        minBlockSize: "0",
+      },
       Input: {
         $: ".pagefind-ui__search-input",
+        flexShrink: "0",
         inlineSize: "100%",
         minBlockSize: "3rem",
         paddingInlineStart: "2.75rem",
@@ -1494,7 +1584,15 @@ export default function GlobalStyles() {
       },
       Results: {
         $: ".pagefind-ui__results-area",
-        marginBlockStart: "($gap * 3)",
+        flexGrow: "1",
+        minBlockSize: "0",
+        overflowY: "auto",
+        marginBlockStart: { "": "($gap * 3)", "@mobile": "($gap * 2)" },
+        borderBlockStart: "$border-width solid #border",
+        inlineSize: { "@mobile": "(100% + ($gap * 4))" },
+        inlineMargin: { "@mobile": "(-1 * $gap * 2)" },
+        inlinePadding: { "@mobile": "($gap * 2)" },
+        paddingBlockEnd: { "@mobile": "($gap * 2)" },
       },
       Result: {
         $: ".pagefind-ui__result",
@@ -1544,6 +1642,9 @@ export default function GlobalStyles() {
       },
       More: {
         $: ".pagefind-ui__button",
+        display: { "@mobile": "block" },
+        inlineSize: { "@mobile": "max-content" },
+        marginInlineStart: { "@mobile": "auto" },
         padding: "1x 2x",
         border: true,
         radius: "$radius",

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: