@tenphi/renderer 0.20.4 → 0.21.0

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/client/search.js

@@ -8,6 +8,8 @@ function initializeSearch(element, options, development, base) {
 	const dialog = element.querySelector("dialog");
 	const frame = element.querySelector(".dialog-frame");
 	const status = element.querySelector("[data-search-status]");
+	const input = element.querySelector("[data-search-input]");
+	const clear = element.querySelector("[data-clear-search]");
 	const shortcut = open.querySelector("kbd");
 	if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
 		shortcut.querySelector("kbd").textContent = "⌘";
@@ -15,7 +17,24 @@ function initializeSearch(element, options, development, base) {
 	}
 	delete shortcut.dataset.pending;
 	let initialized;
+	let engineInput = null;
 	let returnFocus = null;
+	let closing = false;
+	let generation = 0;
+	const updateSearch = () => {
+		if (clear) clear.hidden = !input?.value;
+		if (engineInput) {
+			engineInput.value = input?.value ?? "";
+			engineInput.dispatchEvent(new Event("input", { bubbles: true }));
+		}
+	};
+	input?.addEventListener("input", updateSearch);
+	clear?.addEventListener("click", () => {
+		if (!input) return;
+		input.value = "";
+		updateSearch();
+		input.focus();
+	});
 	const initialize = () => {
 		if (development) return Promise.resolve();
 		return initialized ??= (async () => {
@@ -24,7 +43,7 @@ function initializeSearch(element, options, development, base) {
 			const format = (url) => element.hasAttribute("data-strip-trailing-slash") ? url.replace(/(.)\/(#.*)?$/, "$1$2") : url;
 			new PagefindUI({
 				...options,
-				element: "#cookbook__search",
+				element: element.querySelector("[data-search-results]"),
 				baseUrl: base,
 				bundlePath: `${base.replace(/\/$/, "")}/pagefind/`,
 				showImages: false,
@@ -39,6 +58,13 @@ function initializeSearch(element, options, development, base) {
 					return result;
 				}
 			});
+			engineInput = element.querySelector(".pagefind-ui__search-input");
+			element.querySelector(".pagefind-ui__form")?.removeAttribute("role");
+			element.querySelectorAll(".pagefind-ui__search-input, .pagefind-ui__search-clear").forEach((control) => {
+				control.hidden = true;
+				control.tabIndex = -1;
+			});
+			updateSearch();
 		})().catch((error) => {
 			initialized = void 0;
 			if (status) {
@@ -49,38 +75,53 @@ function initializeSearch(element, options, development, base) {
 			throw error;
 		});
 	};
-	const show = async () => {
-		if (dialog.open) return;
-		returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : open;
-		dialog.removeAttribute("data-open");
-		dialog.showModal();
+	const show = (trigger) => {
+		if (dialog.open && !closing) return;
+		generation += 1;
+		closing = false;
+		if (!dialog.open) {
+			returnFocus = trigger ?? (document.activeElement instanceof HTMLElement && document.activeElement !== document.body ? document.activeElement : open);
+			dialog.removeAttribute("data-open");
+			dialog.showModal();
+		}
+		input?.focus({ preventScroll: true });
 		dialog.getBoundingClientRect();
 		dialog.setAttribute("data-open", "");
 		document.body.setAttribute("data-search-modal-open", "");
 		if (!development && status) status.hidden = true;
-		try {
-			await initialize();
-			if (dialog.open) element.querySelector("input")?.focus();
-		} catch {}
+		initialize().catch(() => {});
+	};
+	const hide = async () => {
+		if (!dialog.open || closing) return;
+		closing = true;
+		const current = ++generation;
+		dialog.removeAttribute("data-open");
+		await Promise.allSettled(dialog.getAnimations().filter((animation) => Number.isFinite(animation.effect?.getComputedTiming().endTime)).map((animation) => animation.finished));
+		if (current === generation && dialog.open) dialog.close();
 	};
 	open.addEventListener("click", () => {
-		show();
+		show(open);
 	});
 	open.disabled = false;
-	close.addEventListener("click", () => dialog.close());
+	close.addEventListener("click", () => void hide());
+	dialog.addEventListener("cancel", (event) => {
+		event.preventDefault();
+		hide();
+	});
 	dialog.addEventListener("click", (event) => {
 		if (!(event.target instanceof Element)) return;
-		if (event.target.closest("a[href]") || !frame.contains(event.target)) dialog.close();
+		if (event.target.closest("a[href]") || !frame.contains(event.target)) hide();
 	});
 	dialog.addEventListener("close", () => {
 		dialog.removeAttribute("data-open");
+		closing = false;
 		document.body.removeAttribute("data-search-modal-open");
 		returnFocus?.focus();
 	});
 	window.addEventListener("keydown", (event) => {
 		if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
 			event.preventDefault();
-			if (dialog.open) dialog.close();
+			if (dialog.open && !closing) hide();
 			else show();
 		}
 	});

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.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"}
+{"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 input = element.querySelector<HTMLInputElement>(\"[data-search-input]\");\n  const clear = element.querySelector<HTMLButtonElement>(\"[data-clear-search]\");\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 engineInput: HTMLInputElement | null = null;\n  let returnFocus: HTMLElement | null = null;\n  let closing = false;\n  let generation = 0;\n  const updateSearch = () => {\n    if (clear) clear.hidden = !input?.value;\n    if (engineInput) {\n      engineInput.value = input?.value ?? \"\";\n      engineInput.dispatchEvent(new Event(\"input\", { bubbles: true }));\n    }\n  };\n  input?.addEventListener(\"input\", updateSearch);\n  clear?.addEventListener(\"click\", () => {\n    if (!input) return;\n    input.value = \"\";\n    updateSearch();\n    input.focus();\n  });\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: element.querySelector(\"[data-search-results]\"),\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      engineInput = element.querySelector(\".pagefind-ui__search-input\");\n      element.querySelector(\".pagefind-ui__form\")?.removeAttribute(\"role\");\n      // Cookbook owns the field so focus stays within the opening tap on mobile.\n      // Pagefind still owns query processing and its lazily rendered results.\n      element\n        .querySelectorAll<HTMLElement>(\n          \".pagefind-ui__search-input, .pagefind-ui__search-clear\",\n        )\n        .forEach((control) => {\n          control.hidden = true;\n          control.tabIndex = -1;\n        });\n      updateSearch();\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 = (trigger?: HTMLElement) => {\n    if (dialog.open && !closing) return;\n    generation += 1;\n    closing = false;\n    if (!dialog.open) {\n      returnFocus =\n        trigger ??\n        (document.activeElement instanceof HTMLElement &&\n        document.activeElement !== document.body\n          ? document.activeElement\n          : open);\n      dialog.removeAttribute(\"data-open\");\n      dialog.showModal();\n    }\n    // Do this synchronously, before the lazy import releases user activation.\n    input?.focus({ preventScroll: true });\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    void initialize().catch(() => {\n      /* Keep the close control usable when the search bundle fails. */\n    });\n  };\n  const hide = async () => {\n    if (!dialog.open || closing) return;\n    closing = true;\n    const current = ++generation;\n    dialog.removeAttribute(\"data-open\");\n    // Keep the modal in the top layer until its exit transition has finished.\n    // This also works in browsers without discrete display/overlay transitions.\n    await Promise.allSettled(\n      dialog\n        .getAnimations()\n        .filter((animation) =>\n          Number.isFinite(animation.effect?.getComputedTiming().endTime),\n        )\n        .map((animation) => animation.finished),\n    );\n    if (current === generation && dialog.open) dialog.close();\n  };\n  open.addEventListener(\"click\", () => {\n    show(open);\n  });\n  open.disabled = false;\n  close.addEventListener(\"click\", () => void hide());\n  dialog.addEventListener(\"cancel\", (event) => {\n    event.preventDefault();\n    void hide();\n  });\n  dialog.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return;\n    if (event.target.closest(\"a[href]\") || !frame.contains(event.target))\n      void hide();\n  });\n  dialog.addEventListener(\"close\", () => {\n    dialog.removeAttribute(\"data-open\");\n    closing = false;\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 && !closing) void hide();\n      else void show();\n    }\n  });\n}\n"],"mappings":"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"}

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";
@@ -362,18 +363,18 @@ export default function GlobalStyles() {
       },
       Backdrop: {
         $: "dialog::backdrop",
-        fill: "#overlay",
-        backdropFilter: "blur(0.25rem)",
+        fill: { "": "#overlay", "@mobile": "#clear" },
+        backdropFilter: { "": "blur(0.25rem)", "@mobile": "none" },
         opacity: "0",
         transition: {
           "": "none",
-          "!@reduced-motion":
+          "!@reduced-motion & !@mobile":
             "opacity $dialog-transition ease-out, display $dialog-transition allow-discrete, overlay $dialog-transition allow-discrete",
         },
       },
       EnteredBackdrop: {
         $: "dialog[open][data-open]::backdrop",
-        opacity: "1",
+        opacity: { "": "1", "@mobile": "0" },
       },
       Frame: {
         $: ".dialog-frame",
@@ -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" },
       },
-      Option: { $: "option", color: "#text", fill: "#surface-2" },
+      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,
+      },
+      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,
     }),
   );
 
@@ -1490,7 +1530,7 @@ export default function GlobalStyles() {
       "$pagefind-ui-tag": "#surface-3",
       preset: "body",
       UI: {
-        $: ".pagefind-ui",
+        $: ".pagefind-ui, [data-search-results]",
         display: "flex",
         flow: "column",
         flexGrow: "1",
@@ -1504,6 +1544,15 @@ export default function GlobalStyles() {
         flexGrow: "1",
         minBlockSize: "0",
       },
+      Field: {
+        $: ".cookbook-search-field",
+        position: "relative",
+        flexShrink: "0",
+      },
+      EngineControls: {
+        $: ".pagefind-ui__search-input, .pagefind-ui__search-clear",
+        display: "none",
+      },
       Drawer: {
         $: ".pagefind-ui__drawer",
         display: "flex",
@@ -1512,7 +1561,7 @@ export default function GlobalStyles() {
         minBlockSize: "0",
       },
       Input: {
-        $: ".pagefind-ui__search-input",
+        $: ".cookbook-search-input",
         flexShrink: "0",
         inlineSize: "100%",
         minBlockSize: "3rem",
@@ -1526,7 +1575,7 @@ export default function GlobalStyles() {
         boxShadow: "none",
       },
       Clear: {
-        $: ".pagefind-ui__search-clear",
+        $: ".cookbook-search-clear",
         position: "absolute",
         insetBlockStart: "0",
         insetInlineEnd: "0",
@@ -1614,7 +1663,7 @@ export default function GlobalStyles() {
       },
       HoverMore: { $: ".pagefind-ui__button:hover", fill: "#surface-2-hover" },
       SearchIcon: {
-        $: ".pagefind-ui__form::before",
+        $: ".cookbook-search-field::before",
         content: '""',
         position: "absolute",
         zIndex: "1",
@@ -1628,7 +1677,7 @@ export default function GlobalStyles() {
         pointerEvents: "none",
       },
       ClearIcon: {
-        $: ".pagefind-ui__search-clear::before",
+        $: ".cookbook-search-clear::before",
         content: '""',
         display: "block",
         inlineSize: "1rem",
@@ -1637,7 +1686,7 @@ export default function GlobalStyles() {
         mask: `url("${svgIconUrl(closeIcon)}") center / 1rem no-repeat`,
       },
       SuppressedClear: {
-        $: ".pagefind-ui__search-clear.pagefind-ui__suppressed",
+        $: ".cookbook-search-clear[hidden]",
         display: "none",
       },
     }),

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: