@tenphi/renderer 0.30.1 → 0.31.0

package/dist/client/elements.d.ts

@@ -4,8 +4,8 @@ import { UniElement } from "@uniaria/elements";
 //#region src/client/elements.d.ts
 declare global {
   interface HTMLElementTagNameMap {
-    "cb-popover": UniElement<typeof popover>;
-    "cb-dialog": UniElement<typeof dialog>;
+    "cookbook-popover": UniElement<typeof popover>;
+    "cookbook-dialog": UniElement<typeof dialog>;
   }
 }
 //# sourceMappingURL=elements.d.ts.map

package/dist/client/elements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"elements.d.ts","names":[],"sources":["../../src/client/elements.ts"],"mappings":";;;;QAiBQ;YACI;IACR,cAAc,kBAAkB;IAChC,aAAa,kBAAkB"}
+{"version":3,"file":"elements.d.ts","names":[],"sources":["../../src/client/elements.ts"],"mappings":";;;;QAiBQ;YACI;IACR,oBAAoB,kBAAkB;IACtC,mBAAmB,kBAAkB"}

package/dist/client/elements.js

@@ -4,12 +4,12 @@ import { popover } from "@uniaria/core/popover";
 import { defineElement } from "@uniaria/elements";
 //#region src/client/elements.ts
 /**
-* Register UniAria's behaviors as `cb-*` light-DOM elements on server-rendered
-* markup. Cookbook's own elements keep the `cookbook-*` prefix.
+* Register UniAria's behaviors as `cookbook-*` light-DOM elements, using the
+* same prefix as every other Cookbook-owned custom element.
 */
 configure({ positioning: "css" });
-defineElement(popover, { prefix: "cb" });
-defineElement(dialog, { prefix: "cb" });
+defineElement(popover, { prefix: "cookbook" });
+defineElement(dialog, { prefix: "cookbook" });
 //#endregion
 export {};
 

package/dist/client/elements.js.map

@@ -1 +1 @@
-{"version":3,"file":"elements.js","names":[],"sources":["../../src/client/elements.ts"],"sourcesContent":["/**\n * Register UniAria's behaviors as `cb-*` light-DOM elements on server-rendered\n * markup. Cookbook's own elements keep the `cookbook-*` prefix.\n */\nimport { dialog } from \"@uniaria/core/dialog\";\nimport { configure } from \"@uniaria/core/dom\";\nimport { popover } from \"@uniaria/core/popover\";\nimport type { UniElement } from \"@uniaria/elements\";\nimport { defineElement } from \"@uniaria/elements\";\n\n// Panels keep the placement Cookbook's styles give them; UniAria only links\n// each one to its anchor and reads the side back.\nconfigure({ positioning: \"css\" });\n// Each returns undefined without `customElements` and skips a defined name.\ndefineElement(popover, { prefix: \"cb\" });\ndefineElement(dialog, { prefix: \"cb\" });\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"cb-popover\": UniElement<typeof popover>;\n    \"cb-dialog\": UniElement<typeof dialog>;\n  }\n}\n"],"mappings":";;;;;;;;;AAYA,UAAU,EAAE,aAAa,MAAM,CAAC;AAEhC,cAAc,SAAS,EAAE,QAAQ,KAAK,CAAC;AACvC,cAAc,QAAQ,EAAE,QAAQ,KAAK,CAAC"}
+{"version":3,"file":"elements.js","names":[],"sources":["../../src/client/elements.ts"],"sourcesContent":["/**\n * Register UniAria's behaviors as `cookbook-*` light-DOM elements, using the\n * same prefix as every other Cookbook-owned custom element.\n */\nimport { dialog } from \"@uniaria/core/dialog\";\nimport { configure } from \"@uniaria/core/dom\";\nimport { popover } from \"@uniaria/core/popover\";\nimport type { UniElement } from \"@uniaria/elements\";\nimport { defineElement } from \"@uniaria/elements\";\n\n// Panels keep the placement Cookbook's styles give them; UniAria only links\n// each one to its anchor and reads the side back.\nconfigure({ positioning: \"css\" });\n// Each returns undefined without `customElements` and skips a defined name.\ndefineElement(popover, { prefix: \"cookbook\" });\ndefineElement(dialog, { prefix: \"cookbook\" });\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"cookbook-popover\": UniElement<typeof popover>;\n    \"cookbook-dialog\": UniElement<typeof dialog>;\n  }\n}\n"],"mappings":";;;;;;;;;AAYA,UAAU,EAAE,aAAa,MAAM,CAAC;AAEhC,cAAc,SAAS,EAAE,QAAQ,WAAW,CAAC;AAC7C,cAAc,QAAQ,EAAE,QAAQ,WAAW,CAAC"}

package/dist/client/navigation.js

@@ -44,13 +44,6 @@ var CookbookSidebarPane = class extends HTMLElement {
 		}, { signal });
 		this.addEventListener("keydown", (event) => {
 			if (desktop.matches || !this.matches(":popover-open")) return;
-			const sections = this.querySelector("[data-element=MobileNavigationTabs] details[open]");
-			if (event.key === "Escape" && sections) {
-				event.preventDefault();
-				sections.open = false;
-				sections.querySelector("summary")?.focus();
-				return;
-			}
 			if (event.key !== "Tab") return;
 			const focusable = Array.from(this.querySelectorAll("a[href], button:not([disabled]), select:not([disabled]), input:not([disabled]), summary, [tabindex=\"0\"]")).filter((element) => element.tabIndex >= 0 && element.getClientRects().length > 0);
 			const first = focusable[0];

package/dist/client/navigation.js.map

@@ -1 +1 @@
-{"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        '[data-element=MobileMenuToggle][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            \"[data-element=HeaderFrame], [data-element=MainFrame], [data-element=SkipLink]\",\n          )) {\n            this.#inert.set(element, element.inert);\n            element.inert = true;\n          }\n          // The browser focuses [autofocus] as the popover opens, but this\n          // event arrives later; never pull back focus that moved on since.\n          if (!this.contains(document.activeElement))\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          \"[data-element=MobileNavigationTabs] 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":";;AAEA,IAAM,sBAAN,cAAkC,YAAY;CAC5C;CACA,yBAAS,IAAI,IAA0B;CACvC;CAEA,oBAAoB;EAClB,KAAK,YAAY,MAAM;EACvB,KAAK,aAAa,IAAI,gBAAgB;EACtC,MAAM,EAAE,WAAW,KAAK;EACxB,KAAK,WACH,SAAS,cACP,sEACF,KAAK,KAAA;EACP,MAAM,UAAU,WAAW,oBAAoB;EAC/C,MAAM,qBAAqB;GACzB,IAAI,QAAQ,SAAS;IACnB,IAAI,KAAK,QAAQ,eAAe,GAAG,KAAK,YAAY;IACpD,KAAK,SAAS;IACd,KAAK,UAAU;IACf,KAAK,gBAAgB,MAAM;IAC3B,KAAK,gBAAgB,YAAY;GACnC,OAAO;IACL,KAAK,UAAU;IACf,KAAK,aAAa,QAAQ,QAAQ;IAClC,KAAK,aAAa,cAAc,MAAM;GACxC;EACF;EACA,aAAa;EACb,QAAQ,iBAAiB,UAAU,cAAc,EAAE,OAAO,CAAC;EAC3D,KAAK,iBACH,gBACM;GACJ,MAAM,OAAO,CAAC,QAAQ,WAAW,KAAK,QAAQ,eAAe;GAC7D,KAAK,UAAU,aAAa,iBAAiB,OAAO,IAAI,CAAC;GACzD,IAAI,MAAM;IAIR,KAAK,sBAAsB;IAC3B,KAAK,aAAa,aAAa,EAAE;IACjC,KAAK,MAAM,WAAW,SAAS,iBAC7B,+EACF,GAAG;KACD,KAAK,OAAO,IAAI,SAAS,QAAQ,KAAK;KACtC,QAAQ,QAAQ;IAClB;IAGA,IAAI,CAAC,KAAK,SAAS,SAAS,aAAa,GACvC,KAAK,cAA2B,aAAa,CAAC,EAAE,MAAM,EACpD,eAAe,KACjB,CAAC;GACL,OAAO;IACL,MAAM,eACJ,KAAK,SAAS,SAAS,aAAa,KACpC,SAAS,kBAAkB,SAAS;IACtC,KAAK,SAAS;IACd,IAAI,gBAAgB,CAAC,QAAQ,SAAS,KAAK,UAAU,MAAM;GAC7D;EACF,GACA,EAAE,OAAO,CACX;EACA,KAAK,iBACH,YACC,UAAU;GACT,IAAI,QAAQ,WAAW,CAAC,KAAK,QAAQ,eAAe,GAAG;GACvD,MAAM,WAAW,KAAK,cACpB,mDACF;GACA,IAAI,MAAM,QAAQ,YAAY,UAAU;IACtC,MAAM,eAAe;IACrB,SAAS,OAAO;IAChB,SAAS,cAAc,SAAS,CAAC,EAAE,MAAM;IACzC;GACF;GACA,IAAI,MAAM,QAAQ,OAAO;GACzB,MAAM,YAAY,MAAM,KACtB,KAAK,iBACH,2GACF,CACF,CAAC,CAAC,QACC,YACC,QAAQ,YAAY,KAAK,QAAQ,eAAe,CAAC,CAAC,SAAS,CAC/D;GACA,MAAM,QAAQ,UAAU;GACxB,MAAM,OAAO,UAAU,GAAG,EAAE;GAC5B,IAAI,CAAC,SAAS,CAAC,MAAM;IACnB,MAAM,eAAe;IACrB,KAAK,MAAM;IACX;GACF;GACA,IACE,MAAM,aACL,SAAS,kBAAkB,SAAS,SAAS,kBAAkB,OAChE;IACA,MAAM,eAAe;IACrB,KAAK,MAAM;GACb,OAAO,IAAI,CAAC,MAAM,YAAY,SAAS,kBAAkB,MAAM;IAC7D,MAAM,eAAe;IACrB,MAAM,MAAM;GACd;EACF,GACA,EAAE,OAAO,CACX;EACA,KAAK,iBACH,UACC,UAAU;GACT,IACE,CAAC,MAAM,oBACP,MAAM,kBAAkB,WACxB,MAAM,OAAO,QAAQ,SAAS,KAC9B,KAAK,QAAQ,eAAe,GAE5B,KAAK,YAAY;EACrB,GACA,EAAE,OAAO,CACX;CACF;CAEA,WAAW;EACT,KAAK,gBAAgB,WAAW;EAChC,KAAK,MAAM,CAAC,SAAS,UAAU,KAAK,QAAQ,QAAQ,QAAQ;EAC5D,KAAK,OAAO,MAAM;EAClB,KAAK,UAAU,aAAa,iBAAiB,OAAO;CACtD;CAEA,uBAAuB;EACrB,KAAK,YAAY,MAAM;EACvB,KAAK,SAAS;CAChB;AACF;AAEA,IAAM,sBAAN,cAAkC,YAAY;CAC5C;CACA,oBAAoB;EAClB,KAAK,YAAY,MAAM;EACvB,KAAK,aAAa,IAAI,gBAAgB;EACtC,MAAM,EAAE,WAAW,KAAK;EACxB,MAAM,QAAQ,KAAK,cAA2B,WAAW;EACzD,MAAM,UAAU,WAAW,oBAAoB;EAC/C,MAAM,cAAc;GAClB,IAAI,OAAO,QAAQ,eAAe,GAAG,MAAM,YAAY;EACzD;EACA,IAAI,OAAO,wBAAwB,OAAO,MAAM;EAChD,QAAQ,iBACN,gBACM;GACJ,IAAI,QAAQ,SAAS,MAAM;EAC7B,GACA,EAAE,OAAO,CACX;EACA,OAAO,iBACL,UACC,UAAU;GACT,IAAI,MAAM,kBAAkB,WAAW,MAAM,OAAO,QAAQ,SAAS,GACnE,MAAM;EACV,GACA,EAAE,OAAO,CACX;CACF;CACA,uBAAuB;EACrB,KAAK,YAAY,MAAM;CACzB;AACF;AAEA,IAAI,CAAC,eAAe,IAAI,uBAAuB,GAC7C,eAAe,OAAO,yBAAyB,mBAAmB;AACpE,IAAI,CAAC,eAAe,IAAI,uBAAuB,GAC7C,eAAe,OAAO,yBAAyB,mBAAmB"}
+{"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        '[data-element=MobileMenuToggle][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            \"[data-element=HeaderFrame], [data-element=MainFrame], [data-element=SkipLink]\",\n          )) {\n            this.#inert.set(element, element.inert);\n            element.inert = true;\n          }\n          // The browser focuses [autofocus] as the popover opens, but this\n          // event arrives later; never pull back focus that moved on since.\n          if (!this.contains(document.activeElement))\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        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/search.js

@@ -133,7 +133,7 @@ function initializeSearch(element, options, development, base) {
 		dialog.removeAttribute("data-open");
 		document.body.removeAttribute("data-search-modal-open");
 		const next = event.newDocument;
-		const nextRoot = persistenceKey ? [...next.querySelectorAll("site-search")].find((root) => root.dataset.searchKey === persistenceKey) : void 0;
+		const nextRoot = persistenceKey ? [...next.querySelectorAll("cookbook-search")].find((root) => root.dataset.searchKey === persistenceKey) : void 0;
 		if (nextRoot) nextRoot.setAttribute("data-astro-transition-persist", persistenceKey);
 		else listeners.abort();
 	}, { signal: listeners.signal });

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[] };\nimport type { TransitionBeforeSwapEvent } from \"astro:transitions/client\";\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 listeners = new AbortController();\n  // Astro strips transition attributes from unhydrated framework roots. Apply\n  // the public persistence hook here and to the incoming matching search root.\n  const persistenceKey = element.dataset.searchKey;\n  if (persistenceKey)\n    element.setAttribute(\"data-astro-transition-persist\", persistenceKey);\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(\"[data-element=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      // Pagefind names pages by their files: x/ for x/index.html, x.html otherwise.\n      const format = (url: string) => {\n        const trailingSlash = element.dataset.trailingSlash;\n        if (trailingSlash === \"always\") return url;\n        const page = url.replace(/\\.html(?=#|$)/, \"\");\n        return trailingSlash === \"never\"\n          ? page.replace(/(.)\\/(#.*)?$/, \"$1$2\")\n          : page;\n      };\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      // Pagefind generates and controls these nodes; its UI API exposes only classes.\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  document.addEventListener(\n    \"astro:before-swap\",\n    (event) => {\n      // Keep the query and lazy engine for matching localized search shells,\n      // while dismissing the modal before the destination content is displayed.\n      generation += 1;\n      returnFocus = null;\n      if (dialog.open) dialog.close();\n      dialog.removeAttribute(\"data-open\");\n      document.body.removeAttribute(\"data-search-modal-open\");\n      const next = (event as TransitionBeforeSwapEvent).newDocument;\n      const nextRoot = persistenceKey\n        ? [...next.querySelectorAll<HTMLElement>(\"site-search\")].find(\n            (root) => root.dataset.searchKey === persistenceKey,\n          )\n        : undefined;\n      if (nextRoot)\n        nextRoot.setAttribute(\"data-astro-transition-persist\", persistenceKey!);\n      else listeners.abort();\n    },\n    { signal: listeners.signal },\n  );\n  window.addEventListener(\n    \"keydown\",\n    (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    { signal: listeners.signal },\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"search.js","names":[],"sources":["../../src/client/search.ts"],"sourcesContent":["type SearchResult = { url: string; sub_results?: SearchResult[] };\nimport type { TransitionBeforeSwapEvent } from \"astro:transitions/client\";\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 listeners = new AbortController();\n  // Astro strips transition attributes from unhydrated framework roots. Apply\n  // the public persistence hook here and to the incoming matching search root.\n  const persistenceKey = element.dataset.searchKey;\n  if (persistenceKey)\n    element.setAttribute(\"data-astro-transition-persist\", persistenceKey);\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(\"[data-element=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      // Pagefind names pages by their files: x/ for x/index.html, x.html otherwise.\n      const format = (url: string) => {\n        const trailingSlash = element.dataset.trailingSlash;\n        if (trailingSlash === \"always\") return url;\n        const page = url.replace(/\\.html(?=#|$)/, \"\");\n        return trailingSlash === \"never\"\n          ? page.replace(/(.)\\/(#.*)?$/, \"$1$2\")\n          : page;\n      };\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      // Pagefind generates and controls these nodes; its UI API exposes only classes.\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  document.addEventListener(\n    \"astro:before-swap\",\n    (event) => {\n      // Keep the query and lazy engine for matching localized search shells,\n      // while dismissing the modal before the destination content is displayed.\n      generation += 1;\n      returnFocus = null;\n      if (dialog.open) dialog.close();\n      dialog.removeAttribute(\"data-open\");\n      document.body.removeAttribute(\"data-search-modal-open\");\n      const next = (event as TransitionBeforeSwapEvent).newDocument;\n      const nextRoot = persistenceKey\n        ? [...next.querySelectorAll<HTMLElement>(\"cookbook-search\")].find(\n            (root) => root.dataset.searchKey === persistenceKey,\n          )\n        : undefined;\n      if (nextRoot)\n        nextRoot.setAttribute(\"data-astro-transition-persist\", persistenceKey!);\n      else listeners.abort();\n    },\n    { signal: listeners.signal },\n  );\n  window.addEventListener(\n    \"keydown\",\n    (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    { signal: listeners.signal },\n  );\n}\n"],"mappings":"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"}

package/dist/components/Header.styles.js

@@ -60,7 +60,7 @@ export const HeaderRoot = defineComponent("Header", {
       inlineMargin: { "": "auto", "!@md": "0" },
     },
     SearchElement: {
-      $: "Search site-search",
+      $: "Search cookbook-search",
       inlineSize: "0 100% 28rem",
       inlineMargin: "auto",
     },

package/dist/components/MobileMenuFooter.styles.js

@@ -12,7 +12,7 @@ export const MobileMenuFooterRoot = defineComponent("MobileMenuFooter", {
     justifyContent: "space-between",
     flow: "row wrap",
     gap: "2x",
-    blockPadding: "1x",
+    padding: "1x $docs-sidebar-pad-x",
     blockBorder: "1bw solid #border start",
     Social: {
       $: "Social",
@@ -21,7 +21,7 @@ export const MobileMenuFooterRoot = defineComponent("MobileMenuFooter", {
       alignItems: "center",
       gap: "2x",
       inlineMargin: "auto end",
-      blockPadding: "2x",
+      blockPadding: "1x",
     },
   },
 });

package/dist/components/MobileNavigationTabs.astro

@@ -9,6 +9,7 @@ import { content } from "virtual:cookbook/config";
 import { layout as configuredLayout } from "virtual:cookbook/layout";
 import { activeNavigationTab, navigationPath } from "../navigation.js";
 import { MobileNavigationTabsRoot } from "./MobileNavigationTabs.styles.js";
+import SelectPopover from "./SelectPopover.astro";
 
 interface Props {
   base?: string;
@@ -45,35 +46,38 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
     <MobileNavigationTabsRoot
       className="td-mobile-tabs"
       data-print-hidden=""
-      aria-label={ui.sections}
+      non-modal=""
+      focus-on-open="false"
     >
-      <details>
-        <summary aria-label={ui.chooseSection}>
-          <span data-element="Label">
-            {layout.tabs[activeTab]?.label ?? ui.sections}
-          </span>
-          <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
-            <path
-              d="m4 6 4 4 4-4"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
-            />
-          </svg>
-        </summary>
-        <ul>
-          {layout.tabs.map((tab, index) => (
-            <li>
-              <a
-                href={tabHref(tab.link)}
-                aria-current={index === activeTab ? "page" : undefined}
-              >
-                {tab.label}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </details>
+      <SelectPopover
+        managed
+        triggerLabel={ui.chooseSection}
+        selectedLabel={layout.tabs[activeTab]?.label ?? ui.sections}
+        title={ui.sections}
+        options={layout.tabs.map((tab, index) => ({
+          href: tabHref(tab.link),
+          label: tab.label,
+          current: index === activeTab,
+        }))}
+      />
     </MobileNavigationTabsRoot>
   )
 }
+
+<script>
+  // The section selector is mobile-only. Keep the behavior runtime out of
+  // desktop page loads, including when a reader later narrows the viewport.
+  const mobile = matchMedia("(width < 50rem)");
+  const initialize = () => {
+    if (
+      mobile.matches &&
+      document.querySelector(
+        "cookbook-popover[data-element=MobileNavigationTabs]",
+      )
+    )
+      void import("../client/elements.js");
+  };
+  mobile.addEventListener("change", initialize);
+  document.addEventListener("astro:page-load", initialize);
+  initialize();
+</script>

package/dist/components/MobileNavigationTabs.styles.js

@@ -1,86 +1,63 @@
+import { selectPopoverStyles } from "./select-popover-styles.js";
 import { configureCookbookStates } from "./tasty-states.js";
 import { defineComponent } from "../define-component.js";
 
 configureCookbookStates();
 
+const sectionSelectStyles = selectPopoverStyles({
+  option: "Link",
+  hoverOption: "HoverLink",
+  currentOption: "CurrentLink",
+});
+
 export const MobileNavigationTabsRoot = defineComponent(
   "MobileNavigationTabs",
   {
-    as: "nav",
+    as: "cookbook-popover",
     "data-element": "MobileNavigationTabs",
     styles: {
+      // Reuse the shared, server-only popover anatomy.
+      // eslint-disable-next-line tasty/no-style-spread
+      ...sectionSelectStyles,
       display: "grid",
       hide: { "": false, "@md": true },
-      gap: "1x",
+      inlineSize: "min 0",
       blockMargin: "0",
-      Label: {
-        $: "Label",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-      },
       Trigger: {
-        $: "summary",
-        display: "flex",
-        alignItems: "center",
+        // Reuse the shared, server-only popover anatomy.
+        // eslint-disable-next-line tasty/no-style-spread
+        ...sectionSelectStyles.Trigger,
         justifyContent: "space-between",
-        gap: "1x",
+        inlineSize: "100%",
         blockSize: "min 2.75rem",
         padding: "1x 1.25x",
         border: true,
         radius: "1r",
-        color: "#text-soft",
         fill: "#surface",
         preset: "navigation",
-        listStyle: "none",
-      },
-      Marker: {
-        $: "summary::marker, summary::-webkit-details-marker",
-        hide: true,
-      },
-      Caret: { $: "summary > svg", flexShrink: "0" },
-      ExpandedCaret: {
-        $: "details > summary > svg",
-        rotate: {
-          "": null,
-          "@own(:is([open] > summary >))": "180deg",
-        },
-      },
-      List: {
-        $: "ul",
-        display: "grid",
-        gap: "1bw",
-        padding: "1x",
-        margin: "1x top",
-        listStyle: "none",
-        border: true,
-        radius: "1r",
-        fill: "#surface",
+        anchorName: "--section-trigger",
       },
-      Item: { $: "li", margin: "0" },
-      Link: {
-        $: "a",
-        display: "flex",
-        alignItems: "center",
-        blockSize: "min 2.25rem",
-        padding: "0.75x 1.25x",
-        color: "#text-soft",
-        preset: "navigation",
-        textDecoration: "none",
-        radius: "1r",
+      Panel: {
+        // Reuse the shared, server-only popover anatomy.
+        // eslint-disable-next-line tasty/no-style-spread
+        ...sectionSelectStyles.Panel,
+        positionAnchor: "--section-trigger",
+        blockInset: "(anchor(bottom) + 1x) start, auto end",
+        inlineInset: "anchor(start) start, auto end",
+        inlineSize: "anchor-size(width)",
+        blockSize: "max (100dvh - anchor(bottom) - 2x)",
       },
-      HoverLink: {
-        $: "a",
-        color: { "": null, "@own(:hover)": "#text" },
-        fill: { "": null, "@own(:hover)": "#surface-2-hover" },
+      // Keep the original disclosure's customization names on the Select anatomy.
+      Label: {
+        // eslint-disable-next-line tasty/no-style-spread -- shared label anatomy, retained under its original customization name.
+        ...sectionSelectStyles.TriggerLabel,
       },
-      CurrentLink: {
-        $: "a",
-        color: { "": null, '@own([aria-current="page"])': "#accent-text" },
-        fill: {
-          "": null,
-          '@own([aria-current="page"])': "#accent-surface-subtle",
-        },
+      List: { $: "> Panel > nav" },
+      Item: { $: "> Panel > nav > a" },
+      Marker: { $: "> button::marker" },
+      ExpandedCaret: {
+        $: "> button > Caret",
+        rotate: { "": null, ":has([popover]:popover-open)": "180deg" },
       },
     },
   },

package/dist/components/Search.styles.js

@@ -6,7 +6,7 @@ import { defineComponent } from "../define-component.js";
 configureCookbookStates();
 
 export const SearchRoot = defineComponent("Search", {
-  as: "site-search",
+  as: "cookbook-search",
   "data-element": "Search",
   styles: {
     display: "contents",

package/dist/components/SelectPopover.astro

@@ -15,15 +15,25 @@ interface Props {
   title: string;
   options: Option[];
   icon?: string;
+  /** UniAria owns behavior when rendered inside a cookbook-popover host. */
+  managed?: boolean;
 }
 
-const { triggerLabel, selectedLabel, title, options, icon } = Astro.props;
+const {
+  triggerLabel,
+  selectedLabel,
+  title,
+  options,
+  icon,
+  managed = false,
+} = Astro.props;
 const id = `select-${crypto.randomUUID()}`;
 ---
 
 <button
   type="button"
-  popovertarget={id}
+  popovertarget={managed ? undefined : id}
+  data-uni-part={managed ? "popover-trigger" : undefined}
   aria-label={triggerLabel}
   title={title}
 >
@@ -34,10 +44,11 @@ const id = `select-${crypto.randomUUID()}`;
 <div
   id={id}
   data-element="Panel"
-  popover="auto"
+  popover={managed ? "manual" : "auto"}
+  data-uni={managed ? "popover" : undefined}
   role="group"
   aria-label={title}
-  data-select-popover-panel
+  data-select-popover-panel={managed ? undefined : ""}
 >
   <div data-element="PanelTitle">{title}</div>
   <nav aria-label={title}>

package/dist/components/Sidebar.styles.js

@@ -31,7 +31,7 @@ export const SidebarRoot = defineComponent("Sidebar", {
     border: "0",
     color: "#text",
     overflowY: "auto",
-    scrollbar: "auto stable",
+    scrollbar: { "": "auto stable", "!@md": "auto" },
     fill: "#surface",
     overscrollBehavior: "contain",
     shadow: { "": "none", "!@md": "0.25rem 0 1rem #shadow" },
@@ -59,6 +59,14 @@ export const SidebarRoot = defineComponent("Sidebar", {
       $: "&::backdrop",
       opacity: { "": null, ":popover-open & [data-open]": "1" },
     },
+    MobileHeader: {
+      display: "grid",
+      hide: { "": true, "!@md": false },
+      flexShrink: "0",
+      gap: "2x",
+      padding: "2x $docs-sidebar-pad-x",
+      blockBorder: "1bw solid #border end",
+    },
     MobileHeading: {
       $: "MobileHeading",
       display: "flex",
@@ -135,15 +143,29 @@ export const SidebarRoot = defineComponent("Sidebar", {
       $: "Content",
       display: "flex",
       flow: "column",
-      blockSize: "min 100%",
-      inlinePadding: "$docs-sidebar-pad-x",
-      gap: "2x",
+      blockSize: { "": "min 100%", "!@md": "100%" },
+      inlinePadding: { "": "$docs-sidebar-pad-x", "!@md": "0" },
+      gap: { "": "2x", "!@md": "0" },
       blockPadding: {
         "": "3x start, 6x end",
-        "!@md": "2x start, 6x end",
+        "!@md": "0",
       },
     },
-    Tree: { $: "cookbook-sidebar", display: "block" },
+    Tree: {
+      $: "cookbook-sidebar",
+      display: "block",
+      flexGrow: { "": null, "!@md": "1" },
+      flexBasis: { "": null, "!@md": "0" },
+      blockSize: { "": null, "!@md": "min 0" },
+      padding: { "": null, "!@md": "2x $docs-sidebar-pad-x" },
+      overflowY: { "": null, "!@md": "auto" },
+      scrollbar: { "": null, "!@md": "auto stable" },
+      overscrollBehavior: { "": null, "!@md": "contain" },
+    },
+    MobileFooter: {
+      hide: { "": true, "!@md": false },
+      flexShrink: "0",
+    },
     List: {
       $: "cookbook-sidebar ul",
       display: "grid",

package/dist/components/ThemeSelect.styles.js

@@ -104,7 +104,7 @@ export const ThemeSelectRoot = defineComponent("ThemeSelect", {
       inlineSize: "100%",
       padding: "0.75x 1x",
       color: "#text-muted",
-      preset: "small / strong",
+      preset: "control-label / strong",
     },
     Option: {
       $: "label",

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

@@ -1,4 +1,4 @@
-/** Shared server-side styles for the language and version selectors. */
+/** Shared server-side styles for the language, version, and section selectors. */
 export function selectPopoverStyles({
   option = "Option",
   hoverOption = "HoverOption",
@@ -65,17 +65,22 @@ export function selectPopoverStyles({
     },
     OpenPanel: {
       $: '> [data-element="Panel"]',
+      // UniAria clears data-entering after two frames in the top layer,
+      // giving the closed opacity and scale a painted starting point.
       opacity: {
         "": null,
-        "@own(:popover-open & [data-open])": "1",
+        "@own(:popover-open & [data-open] & ![data-entering])": "1",
+      },
+      scale: {
+        "": null,
+        "@own(:popover-open & [data-open] & ![data-entering])": "1",
       },
-      scale: { "": null, "@own(:popover-open & [data-open])": "1" },
     },
     PanelTitle: {
       $: "PanelTitle",
       padding: "0.75x 1x",
       color: "#text-muted",
-      preset: "small / strong",
+      preset: "control-label / strong",
     },
     Options: { $: "nav", display: "grid", gap: "0.25x" },
     [option]: {

package/dist/eslint-plugin.js

@@ -144,7 +144,8 @@ var tasty_config_default = {
 		"hero-title",
 		"hero-tagline",
 		"prose",
-		"inline-code"
+		"inline-code",
+		"control-label"
 	]
 };
 //#endregion

package/dist/eslint-plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"eslint-plugin.js","names":["validationConfig"],"sources":["../src/tasty.config.ts","../src/eslint-plugin.ts"],"sourcesContent":["import type { TastyValidationConfig } from \"@tenphi/eslint-plugin-tasty\";\n\nexport default {\n  importSources: [\n    \"@tenphi/cookbook/styling\",\n    \"@tenphi/renderer/styling\",\n    \"./component-styles.js\",\n    \"../define-component.js\",\n  ],\n  styleFunctions: {\n    defineComponent: { argument: 1, kind: \"options\" },\n    extendComponent: { argument: 2, kind: \"options\", partial: true },\n    resolveComponentStyles: { argument: 1, kind: \"styles\" },\n  },\n  tokens: [\n    \"$gap\",\n    \"$margin-block-start\",\n    \"$margin-block-end\",\n    \"$padding-block-start\",\n    \"$padding-block-end\",\n    \"$radius\",\n    \"$header-control-radius\",\n    \"$card-radius\",\n    \"$border-width\",\n    \"$outline-width\",\n    \"$outline-offset\",\n    \"$layout-width\",\n    \"$content-width\",\n    \"$sidebar-width\",\n    \"$control-height\",\n    \"$transition\",\n    \"$sharp-radius\",\n    \"$bold-font-weight\",\n    \"#white\",\n    \"#black\",\n    \"#clear\",\n    \"#current\",\n    \"#surface\",\n    \"#header\",\n    \"#heading\",\n    \"#surface-2\",\n    \"#surface-3\",\n    \"#surface-2-hover\",\n    \"#surface-2-pressed\",\n    \"#surface-3-hover\",\n    \"#surface-3-pressed\",\n    \"#text\",\n    \"#text-soft\",\n    \"#text-muted\",\n    \"#sidebar-text\",\n    \"#border\",\n    \"#border-strong\",\n    \"#accent-text\",\n    \"#accent-surface\",\n    \"#accent-surface-text\",\n    \"#logo-surface\",\n    \"#logo-mark\",\n    \"#accent-surface-subtle\",\n    \"#accent-surface-2-subtle\",\n    \"#focus\",\n    \"#shadow\",\n    \"#overlay\",\n    \"#syntax-bg\",\n    \"#syntax-text\",\n    \"#syntax-comment\",\n    \"#syntax-punctuation\",\n    \"#syntax-keyword\",\n    \"#syntax-string\",\n    \"#syntax-token\",\n    \"#syntax-property\",\n    \"#syntax-number\",\n    \"#syntax-function\",\n    \"#syntax-value\",\n    \"#syntax-operator\",\n    \"#info\",\n    \"#info-surface\",\n    \"#info-text\",\n    \"#success\",\n    \"#success-surface\",\n    \"#success-text\",\n    \"#warning\",\n    \"#warning-surface\",\n    \"#warning-text\",\n    \"#danger\",\n    \"#danger-surface\",\n    \"#danger-text\",\n    \"#orange-surface\",\n    \"#orange\",\n    \"#orange-text\",\n    \"#green-surface\",\n    \"#green\",\n    \"#green-text\",\n    \"#blue-surface\",\n    \"#blue\",\n    \"#blue-text\",\n    \"#purple-surface\",\n    \"#purple\",\n    \"#purple-text\",\n    \"#red-surface\",\n    \"#red\",\n    \"#red-text\",\n  ],\n  units: [\"x\", \"r\", \"cr\", \"bw\"],\n  states: [\n    \"@system-light\",\n    \"@system-dark\",\n    \"@light\",\n    \"@dark\",\n    \"@sm\",\n    \"@md\",\n    \"@lg\",\n    \"@reduced-motion\",\n    \"@prose\",\n    \"@prose-block\",\n    \"@prose-heading\",\n  ],\n  presets: [\n    \"body\",\n    \"heading\",\n    \"h1\",\n    \"h2\",\n    \"h3\",\n    \"h4\",\n    \"h5\",\n    \"h6\",\n    \"navigation\",\n    \"small\",\n    \"code\",\n    \"hero-title\",\n    \"hero-tagline\",\n    \"prose\",\n    \"inline-code\",\n  ],\n} satisfies TastyValidationConfig;\n","export { default, recommended, strict } from \"@tenphi/eslint-plugin-tasty\";\nexport type {\n  ResolvedConfig,\n  StyleFunctionConfig,\n  TastyValidationConfig,\n} from \"@tenphi/eslint-plugin-tasty\";\nexport { default as validationConfig } from \"./tasty.config.js\";\n\nimport type { ThemeConfig } from \"@tenphi/docs\";\nimport type { TastyValidationConfig } from \"@tenphi/eslint-plugin-tasty\";\nimport validationConfig from \"./tasty.config.js\";\n\n/** Keep editor/linter names aligned with a Cookbook theme. */\nexport function createValidationConfig(\n  theme: ThemeConfig = {},\n): TastyValidationConfig {\n  return {\n    ...validationConfig,\n    tokens: [\n      ...validationConfig.tokens,\n      ...Object.keys(theme.tokens ?? {}),\n      ...Object.keys(theme.palette ?? {}).map((name) => `#${name}`),\n    ],\n    units: [...validationConfig.units, ...Object.keys(theme.units ?? {})],\n    states: [...validationConfig.states, ...Object.keys(theme.states ?? {})],\n    presets: [...validationConfig.presets, ...Object.keys(theme.presets ?? {})],\n    recipes: Object.keys(theme.recipes ?? {}),\n  };\n}\n"],"mappings":";;AAEA,IAAA,uBAAe;CACb,eAAe;EACb;EACA;EACA;EACA;CACF;CACA,gBAAgB;EACd,iBAAiB;GAAE,UAAU;GAAG,MAAM;EAAU;EAChD,iBAAiB;GAAE,UAAU;GAAG,MAAM;GAAW,SAAS;EAAK;EAC/D,wBAAwB;GAAE,UAAU;GAAG,MAAM;EAAS;CACxD;CACA,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,OAAO;EAAC;EAAK;EAAK;EAAM;CAAI;CAC5B,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF;;;;ACxHA,SAAgB,uBACd,QAAqB,CAAC,GACC;CACvB,OAAO;EACL,GAAGA;EACH,QAAQ;GACN,GAAGA,qBAAiB;GACpB,GAAG,OAAO,KAAK,MAAM,UAAU,CAAC,CAAC;GACjC,GAAG,OAAO,KAAK,MAAM,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,SAAS,IAAI,MAAM;EAC9D;EACA,OAAO,CAAC,GAAGA,qBAAiB,OAAO,GAAG,OAAO,KAAK,MAAM,SAAS,CAAC,CAAC,CAAC;EACpE,QAAQ,CAAC,GAAGA,qBAAiB,QAAQ,GAAG,OAAO,KAAK,MAAM,UAAU,CAAC,CAAC,CAAC;EACvE,SAAS,CAAC,GAAGA,qBAAiB,SAAS,GAAG,OAAO,KAAK,MAAM,WAAW,CAAC,CAAC,CAAC;EAC1E,SAAS,OAAO,KAAK,MAAM,WAAW,CAAC,CAAC;CAC1C;AACF"}
+{"version":3,"file":"eslint-plugin.js","names":["validationConfig"],"sources":["../src/tasty.config.ts","../src/eslint-plugin.ts"],"sourcesContent":["import type { TastyValidationConfig } from \"@tenphi/eslint-plugin-tasty\";\n\nexport default {\n  importSources: [\n    \"@tenphi/cookbook/styling\",\n    \"@tenphi/renderer/styling\",\n    \"./component-styles.js\",\n    \"../define-component.js\",\n  ],\n  styleFunctions: {\n    defineComponent: { argument: 1, kind: \"options\" },\n    extendComponent: { argument: 2, kind: \"options\", partial: true },\n    resolveComponentStyles: { argument: 1, kind: \"styles\" },\n  },\n  tokens: [\n    \"$gap\",\n    \"$margin-block-start\",\n    \"$margin-block-end\",\n    \"$padding-block-start\",\n    \"$padding-block-end\",\n    \"$radius\",\n    \"$header-control-radius\",\n    \"$card-radius\",\n    \"$border-width\",\n    \"$outline-width\",\n    \"$outline-offset\",\n    \"$layout-width\",\n    \"$content-width\",\n    \"$sidebar-width\",\n    \"$control-height\",\n    \"$transition\",\n    \"$sharp-radius\",\n    \"$bold-font-weight\",\n    \"#white\",\n    \"#black\",\n    \"#clear\",\n    \"#current\",\n    \"#surface\",\n    \"#header\",\n    \"#heading\",\n    \"#surface-2\",\n    \"#surface-3\",\n    \"#surface-2-hover\",\n    \"#surface-2-pressed\",\n    \"#surface-3-hover\",\n    \"#surface-3-pressed\",\n    \"#text\",\n    \"#text-soft\",\n    \"#text-muted\",\n    \"#sidebar-text\",\n    \"#border\",\n    \"#border-strong\",\n    \"#accent-text\",\n    \"#accent-surface\",\n    \"#accent-surface-text\",\n    \"#logo-surface\",\n    \"#logo-mark\",\n    \"#accent-surface-subtle\",\n    \"#accent-surface-2-subtle\",\n    \"#focus\",\n    \"#shadow\",\n    \"#overlay\",\n    \"#syntax-bg\",\n    \"#syntax-text\",\n    \"#syntax-comment\",\n    \"#syntax-punctuation\",\n    \"#syntax-keyword\",\n    \"#syntax-string\",\n    \"#syntax-token\",\n    \"#syntax-property\",\n    \"#syntax-number\",\n    \"#syntax-function\",\n    \"#syntax-value\",\n    \"#syntax-operator\",\n    \"#info\",\n    \"#info-surface\",\n    \"#info-text\",\n    \"#success\",\n    \"#success-surface\",\n    \"#success-text\",\n    \"#warning\",\n    \"#warning-surface\",\n    \"#warning-text\",\n    \"#danger\",\n    \"#danger-surface\",\n    \"#danger-text\",\n    \"#orange-surface\",\n    \"#orange\",\n    \"#orange-text\",\n    \"#green-surface\",\n    \"#green\",\n    \"#green-text\",\n    \"#blue-surface\",\n    \"#blue\",\n    \"#blue-text\",\n    \"#purple-surface\",\n    \"#purple\",\n    \"#purple-text\",\n    \"#red-surface\",\n    \"#red\",\n    \"#red-text\",\n  ],\n  units: [\"x\", \"r\", \"cr\", \"bw\"],\n  states: [\n    \"@system-light\",\n    \"@system-dark\",\n    \"@light\",\n    \"@dark\",\n    \"@sm\",\n    \"@md\",\n    \"@lg\",\n    \"@reduced-motion\",\n    \"@prose\",\n    \"@prose-block\",\n    \"@prose-heading\",\n  ],\n  presets: [\n    \"body\",\n    \"heading\",\n    \"h1\",\n    \"h2\",\n    \"h3\",\n    \"h4\",\n    \"h5\",\n    \"h6\",\n    \"navigation\",\n    \"small\",\n    \"code\",\n    \"hero-title\",\n    \"hero-tagline\",\n    \"prose\",\n    \"inline-code\",\n    \"control-label\",\n  ],\n} satisfies TastyValidationConfig;\n","export { default, recommended, strict } from \"@tenphi/eslint-plugin-tasty\";\nexport type {\n  ResolvedConfig,\n  StyleFunctionConfig,\n  TastyValidationConfig,\n} from \"@tenphi/eslint-plugin-tasty\";\nexport { default as validationConfig } from \"./tasty.config.js\";\n\nimport type { ThemeConfig } from \"@tenphi/docs\";\nimport type { TastyValidationConfig } from \"@tenphi/eslint-plugin-tasty\";\nimport validationConfig from \"./tasty.config.js\";\n\n/** Keep editor/linter names aligned with a Cookbook theme. */\nexport function createValidationConfig(\n  theme: ThemeConfig = {},\n): TastyValidationConfig {\n  return {\n    ...validationConfig,\n    tokens: [\n      ...validationConfig.tokens,\n      ...Object.keys(theme.tokens ?? {}),\n      ...Object.keys(theme.palette ?? {}).map((name) => `#${name}`),\n    ],\n    units: [...validationConfig.units, ...Object.keys(theme.units ?? {})],\n    states: [...validationConfig.states, ...Object.keys(theme.states ?? {})],\n    presets: [...validationConfig.presets, ...Object.keys(theme.presets ?? {})],\n    recipes: Object.keys(theme.recipes ?? {}),\n  };\n}\n"],"mappings":";;AAEA,IAAA,uBAAe;CACb,eAAe;EACb;EACA;EACA;EACA;CACF;CACA,gBAAgB;EACd,iBAAiB;GAAE,UAAU;GAAG,MAAM;EAAU;EAChD,iBAAiB;GAAE,UAAU;GAAG,MAAM;GAAW,SAAS;EAAK;EAC/D,wBAAwB;GAAE,UAAU;GAAG,MAAM;EAAS;CACxD;CACA,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,OAAO;EAAC;EAAK;EAAK;EAAM;CAAI;CAC5B,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF;;;;ACzHA,SAAgB,uBACd,QAAqB,CAAC,GACC;CACvB,OAAO;EACL,GAAGA;EACH,QAAQ;GACN,GAAGA,qBAAiB;GACpB,GAAG,OAAO,KAAK,MAAM,UAAU,CAAC,CAAC;GACjC,GAAG,OAAO,KAAK,MAAM,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,SAAS,IAAI,MAAM;EAC9D;EACA,OAAO,CAAC,GAAGA,qBAAiB,OAAO,GAAG,OAAO,KAAK,MAAM,SAAS,CAAC,CAAC,CAAC;EACpE,QAAQ,CAAC,GAAGA,qBAAiB,QAAQ,GAAG,OAAO,KAAK,MAAM,UAAU,CAAC,CAAC,CAAC;EACvE,SAAS,CAAC,GAAGA,qBAAiB,SAAS,GAAG,OAAO,KAAK,MAAM,WAAW,CAAC,CAAC,CAAC;EAC1E,SAAS,OAAO,KAAK,MAAM,WAAW,CAAC,CAAC;CAC1C;AACF"}

package/dist/overrides/Search.astro

@@ -84,15 +84,17 @@ const translations = {
 <script>
   import { initializeSearch } from "../client/search.js";
   function initialize(): void {
-    document.querySelectorAll<HTMLElement>("site-search").forEach((element) => {
-      if (element.dataset.searchBase !== import.meta.env.BASE_URL) return;
-      initializeSearch(
-        element,
-        {},
-        import.meta.env.DEV,
-        import.meta.env.BASE_URL,
-      );
-    });
+    document
+      .querySelectorAll<HTMLElement>("cookbook-search")
+      .forEach((element) => {
+        if (element.dataset.searchBase !== import.meta.env.BASE_URL) return;
+        initializeSearch(
+          element,
+          {},
+          import.meta.env.DEV,
+          import.meta.env.BASE_URL,
+        );
+      });
   }
   initialize();
   document.addEventListener("astro:page-load", initialize);

package/dist/overrides/Sidebar.astro

@@ -46,35 +46,37 @@ const sidebar =
 const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
 ---
 
-<div data-element="MobileHeading">
-  <a
-    data-element="HomeLink"
-    href={localeHref(
-      (content.logo && content.logo.href) || "/",
-      currentPath,
-      content.routes,
-      content,
-      content.base,
-    )}
-  >
-    <Logo />
-    <span data-element="HomeLabel" data-site-title
-      >{Astro.locals.cookbookRoute.siteTitle}</span
+<div data-element="MobileHeader">
+  <div data-element="MobileHeading">
+    <a
+      data-element="HomeLink"
+      href={localeHref(
+        (content.logo && content.logo.href) || "/",
+        currentPath,
+        content.routes,
+        content,
+        content.base,
+      )}
     >
-  </a>
-  <button
-    type="button"
-    popovertarget="cookbook__sidebar"
-    popovertargetaction="hide"
-    aria-label={ui.closeNavigation}
-    autofocus><Icon name="close" /></button
-  >
-</div>
+      <Logo />
+      <span data-element="HomeLabel" data-site-title
+        >{Astro.locals.cookbookRoute.siteTitle}</span
+      >
+    </a>
+    <button
+      type="button"
+      popovertarget="cookbook__sidebar"
+      popovertargetaction="hide"
+      aria-label={ui.closeNavigation}
+      autofocus><Icon name="close" /></button
+    >
+  </div>
 
-<MobileNavigationTabs
-  base={import.meta.env.BASE_URL}
-  currentPath={Astro.url.pathname}
-/>
+  <MobileNavigationTabs
+    base={import.meta.env.BASE_URL}
+    currentPath={Astro.url.pathname}
+  />
+</div>
 
 <cookbook-sidebar
   data-storage-key={`cookbook-sidebar:${import.meta.env.BASE_URL}:${groupIndex ?? "all"}`}
@@ -82,7 +84,7 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
   <SidebarList entries={sidebar} />
 </cookbook-sidebar>
 
-<div data-mobile="">
+<div data-element="MobileFooter" data-mobile="">
   <MobileMenuFooter />
 </div>
 

package/dist/theme/defaults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.d.ts","names":[],"sources":["../../src/theme/defaults.ts"],"mappings":";;cAMa;;;;;;;;;;;;;cAmBA,4BAA4B,eAAe;iBA4ExC,mBAAmB,SAAQ,cAAmB;iBAI9C,yBACd,UAAS,mBACT,eAAc,QAAQ,+CACrB,eAAe"}
+{"version":3,"file":"defaults.d.ts","names":[],"sources":["../../src/theme/defaults.ts"],"mappings":";;cAMa;;;;;;;;;;;;;cAmBA,4BAA4B,eAAe;iBAkFxC,mBAAmB,SAAQ,cAAmB;iBAI9C,yBACd,UAAS,mBACT,eAAc,QAAQ,+CACrB,eAAe"}

package/dist/theme/defaults.js

@@ -66,7 +66,13 @@ const DEFAULT_TYPOGRAPHY_PRESETS = {
 		lineHeight: 1.55
 	}),
 	prose: derivedPreset("body", { fontSize: "1.025rem" }),
-	"inline-code": derivedPreset("code", { fontSize: "0.875em" })
+	"inline-code": derivedPreset("code", { fontSize: "0.875em" }),
+	"control-label": derivedPreset("small", {
+		fontSize: "0.75rem",
+		lineHeight: 1.4,
+		letterSpacing: "0.06em",
+		textTransform: "uppercase"
+	})
 };
 /** Keep specialized typography linked to user-configured base presets. */
 function derivedPreset(base, overrides) {

package/dist/theme/defaults.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.js","names":[],"sources":["../../src/theme/defaults.ts"],"sourcesContent":["import type {\n  ThemeTokens,\n  TypographyPreset,\n  TypographyPresets,\n} from \"@tenphi/docs\";\n\nexport const DEFAULT_THEME_TOKENS = {\n  $gap: \"0.5rem\",\n  $radius: \"8px\",\n  \"$header-control-radius\": \"999px\",\n  \"$card-radius\": \"16px\",\n  \"$border-width\": \"1px\",\n  \"$outline-width\": \"2px\",\n  \"$outline-offset\": \"2px\",\n  \"$layout-width\": \"87.5rem\",\n  \"$content-width\": \"58rem\",\n  \"$sidebar-width\": \"17.5rem\",\n  \"$control-height\": \"2.5rem\",\n} satisfies ThemeTokens;\n\nconst BODY_FONT =\n  \"'Onest Variable', Onest, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\";\nconst MONO_FONT =\n  \"'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace\";\n\nexport const DEFAULT_TYPOGRAPHY_PRESETS: Record<string, TypographyPreset> = {\n  body: {\n    fontFamily: BODY_FONT,\n    fontSize: \"1rem\",\n    lineHeight: 1.65,\n    letterSpacing: \"0\",\n    fontWeight: 400,\n    boldFontWeight: 640,\n  },\n  heading: {\n    fontFamily: BODY_FONT,\n    fontSize: \"1rem\",\n    lineHeight: 1.15,\n    letterSpacing: \"-0.006em\",\n    fontWeight: 610,\n    boldFontWeight: 720,\n  },\n  h1: heading(\"clamp(2.5rem, 5vw, 3.25rem)\", 1.05, \"-0.015em\"),\n  h2: heading(\"clamp(1.75rem, 3vw, 2.125rem)\", 1.1, \"-0.01em\"),\n  h3: heading(\"1.5rem\", 1.15, \"-0.006em\"),\n  h4: heading(\"1.25rem\", 1.2, \"-0.003em\"),\n  h5: heading(\"1.125rem\", 1.25, \"0\"),\n  h6: heading(\"1rem\", 1.3, \"0\"),\n  navigation: {\n    fontFamily: \"var(--body-font-family)\",\n    fontSize: \"0.9375rem\",\n    lineHeight: 1.4,\n    letterSpacing: \"0\",\n    fontWeight: 450,\n    boldFontWeight: 580,\n  },\n  small: {\n    fontFamily: \"var(--body-font-family)\",\n    fontSize: \"0.875rem\",\n    lineHeight: 1.45,\n    letterSpacing: \"-0.002em\",\n    fontWeight: 420,\n    boldFontWeight: 600,\n  },\n  code: {\n    fontFamily: MONO_FONT,\n    fontSize: \"0.875rem\",\n    lineHeight: 1.65,\n    letterSpacing: \"0\",\n    fontWeight: 400,\n    boldFontWeight: 650,\n  },\n  \"hero-title\": derivedPreset(\"h1\", {\n    fontSize: \"clamp(2.75rem, 7vw, 4.75rem)\",\n  }),\n  \"hero-tagline\": derivedPreset(\"body\", {\n    fontSize: \"clamp(1.05rem, 2.5vw, 1.35rem)\",\n    lineHeight: 1.55,\n  }),\n  prose: derivedPreset(\"body\", { fontSize: \"1.025rem\" }),\n  \"inline-code\": derivedPreset(\"code\", { fontSize: \"0.875em\" }),\n};\n\n/** Keep specialized typography linked to user-configured base presets. */\nfunction derivedPreset(\n  base: string,\n  overrides: TypographyPreset,\n): TypographyPreset {\n  return {\n    fontFamily: `var(--${base}-font-family)`,\n    fontSize: `var(--${base}-font-size)`,\n    lineHeight: `var(--${base}-line-height)`,\n    letterSpacing: `var(--${base}-letter-spacing)`,\n    fontWeight: `var(--${base}-font-weight)`,\n    boldFontWeight: `var(--${base}-bold-font-weight)`,\n    fontStyle: `var(--${base}-font-style, var(--default-font-style))`,\n    textTransform: `var(--${base}-text-transform, var(--default-text-transform))`,\n    ...overrides,\n  };\n}\n\nexport function resolveThemeTokens(tokens: ThemeTokens = {}): ThemeTokens {\n  return { ...DEFAULT_THEME_TOKENS, ...tokens };\n}\n\nexport function resolveTypographyPresets(\n  presets: TypographyPresets = {},\n  fontFamilies: Partial<Record<\"body\" | \"heading\" | \"code\", string>> = {},\n): Record<string, TypographyPreset> {\n  const body = DEFAULT_TYPOGRAPHY_PRESETS.body;\n  if (!body) throw new Error(\"The body typography preset is required.\");\n  const names = new Set([\n    ...Object.keys(DEFAULT_TYPOGRAPHY_PRESETS),\n    ...Object.keys(presets),\n  ]);\n  return Object.fromEntries(\n    [...names].map((name) => [\n      name,\n      {\n        ...(DEFAULT_TYPOGRAPHY_PRESETS[name] ?? body),\n        ...(name in fontFamilies\n          ? { fontFamily: fontFamilies[name as keyof typeof fontFamilies] }\n          : {}),\n        ...(presets[name] ?? {}),\n      },\n    ]),\n  );\n}\n\nfunction heading(\n  fontSize: string,\n  lineHeight: number,\n  letterSpacing: string,\n): TypographyPreset {\n  return {\n    fontFamily: \"var(--heading-font-family)\",\n    fontSize,\n    lineHeight,\n    letterSpacing,\n    fontWeight: \"var(--heading-font-weight)\",\n    boldFontWeight: \"var(--heading-bold-font-weight)\",\n  };\n}\n"],"mappings":";AAMA,MAAa,uBAAuB;CAClC,MAAM;CACN,SAAS;CACT,0BAA0B;CAC1B,gBAAgB;CAChB,iBAAiB;CACjB,kBAAkB;CAClB,mBAAmB;CACnB,iBAAiB;CACjB,kBAAkB;CAClB,kBAAkB;CAClB,mBAAmB;AACrB;AAEA,MAAM,YACJ;AAIF,MAAa,6BAA+D;CAC1E,MAAM;EACJ,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;CAClB;CACA,SAAS;EACP,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;CAClB;CACA,IAAI,QAAQ,+BAA+B,MAAM,UAAU;CAC3D,IAAI,QAAQ,iCAAiC,KAAK,SAAS;CAC3D,IAAI,QAAQ,UAAU,MAAM,UAAU;CACtC,IAAI,QAAQ,WAAW,KAAK,UAAU;CACtC,IAAI,QAAQ,YAAY,MAAM,GAAG;CACjC,IAAI,QAAQ,QAAQ,KAAK,GAAG;CAC5B,YAAY;EACV,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;CAClB;CACA,OAAO;EACL,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;CAClB;CACA,MAAM;EACJ,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;CAClB;CACA,cAAc,cAAc,MAAM,EAChC,UAAU,+BACZ,CAAC;CACD,gBAAgB,cAAc,QAAQ;EACpC,UAAU;EACV,YAAY;CACd,CAAC;CACD,OAAO,cAAc,QAAQ,EAAE,UAAU,WAAW,CAAC;CACrD,eAAe,cAAc,QAAQ,EAAE,UAAU,UAAU,CAAC;AAC9D;;AAGA,SAAS,cACP,MACA,WACkB;CAClB,OAAO;EACL,YAAY,SAAS,KAAK;EAC1B,UAAU,SAAS,KAAK;EACxB,YAAY,SAAS,KAAK;EAC1B,eAAe,SAAS,KAAK;EAC7B,YAAY,SAAS,KAAK;EAC1B,gBAAgB,SAAS,KAAK;EAC9B,WAAW,SAAS,KAAK;EACzB,eAAe,SAAS,KAAK;EAC7B,GAAG;CACL;AACF;AAEA,SAAgB,mBAAmB,SAAsB,CAAC,GAAgB;CACxE,OAAO;EAAE,GAAG;EAAsB,GAAG;CAAO;AAC9C;AAEA,SAAgB,yBACd,UAA6B,CAAC,GAC9B,eAAqE,CAAC,GACpC;CAClC,MAAM,OAAO,2BAA2B;CACxC,IAAI,CAAC,MAAM,MAAM,IAAI,MAAM,yCAAyC;CACpE,MAAM,wBAAQ,IAAI,IAAI,CACpB,GAAG,OAAO,KAAK,0BAA0B,GACzC,GAAG,OAAO,KAAK,OAAO,CACxB,CAAC;CACD,OAAO,OAAO,YACZ,CAAC,GAAG,KAAK,CAAC,CAAC,KAAK,SAAS,CACvB,MACA;EACE,GAAI,2BAA2B,SAAS;EACxC,GAAI,QAAQ,eACR,EAAE,YAAY,aAAa,MAAmC,IAC9D,CAAC;EACL,GAAI,QAAQ,SAAS,CAAC;CACxB,CACF,CAAC,CACH;AACF;AAEA,SAAS,QACP,UACA,YACA,eACkB;CAClB,OAAO;EACL,YAAY;EACZ;EACA;EACA;EACA,YAAY;EACZ,gBAAgB;CAClB;AACF"}
+{"version":3,"file":"defaults.js","names":[],"sources":["../../src/theme/defaults.ts"],"sourcesContent":["import type {\n  ThemeTokens,\n  TypographyPreset,\n  TypographyPresets,\n} from \"@tenphi/docs\";\n\nexport const DEFAULT_THEME_TOKENS = {\n  $gap: \"0.5rem\",\n  $radius: \"8px\",\n  \"$header-control-radius\": \"999px\",\n  \"$card-radius\": \"16px\",\n  \"$border-width\": \"1px\",\n  \"$outline-width\": \"2px\",\n  \"$outline-offset\": \"2px\",\n  \"$layout-width\": \"87.5rem\",\n  \"$content-width\": \"58rem\",\n  \"$sidebar-width\": \"17.5rem\",\n  \"$control-height\": \"2.5rem\",\n} satisfies ThemeTokens;\n\nconst BODY_FONT =\n  \"'Onest Variable', Onest, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\";\nconst MONO_FONT =\n  \"'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace\";\n\nexport const DEFAULT_TYPOGRAPHY_PRESETS: Record<string, TypographyPreset> = {\n  body: {\n    fontFamily: BODY_FONT,\n    fontSize: \"1rem\",\n    lineHeight: 1.65,\n    letterSpacing: \"0\",\n    fontWeight: 400,\n    boldFontWeight: 640,\n  },\n  heading: {\n    fontFamily: BODY_FONT,\n    fontSize: \"1rem\",\n    lineHeight: 1.15,\n    letterSpacing: \"-0.006em\",\n    fontWeight: 610,\n    boldFontWeight: 720,\n  },\n  h1: heading(\"clamp(2.5rem, 5vw, 3.25rem)\", 1.05, \"-0.015em\"),\n  h2: heading(\"clamp(1.75rem, 3vw, 2.125rem)\", 1.1, \"-0.01em\"),\n  h3: heading(\"1.5rem\", 1.15, \"-0.006em\"),\n  h4: heading(\"1.25rem\", 1.2, \"-0.003em\"),\n  h5: heading(\"1.125rem\", 1.25, \"0\"),\n  h6: heading(\"1rem\", 1.3, \"0\"),\n  navigation: {\n    fontFamily: \"var(--body-font-family)\",\n    fontSize: \"0.9375rem\",\n    lineHeight: 1.4,\n    letterSpacing: \"0\",\n    fontWeight: 450,\n    boldFontWeight: 580,\n  },\n  small: {\n    fontFamily: \"var(--body-font-family)\",\n    fontSize: \"0.875rem\",\n    lineHeight: 1.45,\n    letterSpacing: \"-0.002em\",\n    fontWeight: 420,\n    boldFontWeight: 600,\n  },\n  code: {\n    fontFamily: MONO_FONT,\n    fontSize: \"0.875rem\",\n    lineHeight: 1.65,\n    letterSpacing: \"0\",\n    fontWeight: 400,\n    boldFontWeight: 650,\n  },\n  \"hero-title\": derivedPreset(\"h1\", {\n    fontSize: \"clamp(2.75rem, 7vw, 4.75rem)\",\n  }),\n  \"hero-tagline\": derivedPreset(\"body\", {\n    fontSize: \"clamp(1.05rem, 2.5vw, 1.35rem)\",\n    lineHeight: 1.55,\n  }),\n  prose: derivedPreset(\"body\", { fontSize: \"1.025rem\" }),\n  \"inline-code\": derivedPreset(\"code\", { fontSize: \"0.875em\" }),\n  \"control-label\": derivedPreset(\"small\", {\n    fontSize: \"0.75rem\",\n    lineHeight: 1.4,\n    letterSpacing: \"0.06em\",\n    textTransform: \"uppercase\",\n  }),\n};\n\n/** Keep specialized typography linked to user-configured base presets. */\nfunction derivedPreset(\n  base: string,\n  overrides: TypographyPreset,\n): TypographyPreset {\n  return {\n    fontFamily: `var(--${base}-font-family)`,\n    fontSize: `var(--${base}-font-size)`,\n    lineHeight: `var(--${base}-line-height)`,\n    letterSpacing: `var(--${base}-letter-spacing)`,\n    fontWeight: `var(--${base}-font-weight)`,\n    boldFontWeight: `var(--${base}-bold-font-weight)`,\n    fontStyle: `var(--${base}-font-style, var(--default-font-style))`,\n    textTransform: `var(--${base}-text-transform, var(--default-text-transform))`,\n    ...overrides,\n  };\n}\n\nexport function resolveThemeTokens(tokens: ThemeTokens = {}): ThemeTokens {\n  return { ...DEFAULT_THEME_TOKENS, ...tokens };\n}\n\nexport function resolveTypographyPresets(\n  presets: TypographyPresets = {},\n  fontFamilies: Partial<Record<\"body\" | \"heading\" | \"code\", string>> = {},\n): Record<string, TypographyPreset> {\n  const body = DEFAULT_TYPOGRAPHY_PRESETS.body;\n  if (!body) throw new Error(\"The body typography preset is required.\");\n  const names = new Set([\n    ...Object.keys(DEFAULT_TYPOGRAPHY_PRESETS),\n    ...Object.keys(presets),\n  ]);\n  return Object.fromEntries(\n    [...names].map((name) => [\n      name,\n      {\n        ...(DEFAULT_TYPOGRAPHY_PRESETS[name] ?? body),\n        ...(name in fontFamilies\n          ? { fontFamily: fontFamilies[name as keyof typeof fontFamilies] }\n          : {}),\n        ...(presets[name] ?? {}),\n      },\n    ]),\n  );\n}\n\nfunction heading(\n  fontSize: string,\n  lineHeight: number,\n  letterSpacing: string,\n): TypographyPreset {\n  return {\n    fontFamily: \"var(--heading-font-family)\",\n    fontSize,\n    lineHeight,\n    letterSpacing,\n    fontWeight: \"var(--heading-font-weight)\",\n    boldFontWeight: \"var(--heading-bold-font-weight)\",\n  };\n}\n"],"mappings":";AAMA,MAAa,uBAAuB;CAClC,MAAM;CACN,SAAS;CACT,0BAA0B;CAC1B,gBAAgB;CAChB,iBAAiB;CACjB,kBAAkB;CAClB,mBAAmB;CACnB,iBAAiB;CACjB,kBAAkB;CAClB,kBAAkB;CAClB,mBAAmB;AACrB;AAEA,MAAM,YACJ;AAIF,MAAa,6BAA+D;CAC1E,MAAM;EACJ,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;CAClB;CACA,SAAS;EACP,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;CAClB;CACA,IAAI,QAAQ,+BAA+B,MAAM,UAAU;CAC3D,IAAI,QAAQ,iCAAiC,KAAK,SAAS;CAC3D,IAAI,QAAQ,UAAU,MAAM,UAAU;CACtC,IAAI,QAAQ,WAAW,KAAK,UAAU;CACtC,IAAI,QAAQ,YAAY,MAAM,GAAG;CACjC,IAAI,QAAQ,QAAQ,KAAK,GAAG;CAC5B,YAAY;EACV,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;CAClB;CACA,OAAO;EACL,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;CAClB;CACA,MAAM;EACJ,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;CAClB;CACA,cAAc,cAAc,MAAM,EAChC,UAAU,+BACZ,CAAC;CACD,gBAAgB,cAAc,QAAQ;EACpC,UAAU;EACV,YAAY;CACd,CAAC;CACD,OAAO,cAAc,QAAQ,EAAE,UAAU,WAAW,CAAC;CACrD,eAAe,cAAc,QAAQ,EAAE,UAAU,UAAU,CAAC;CAC5D,iBAAiB,cAAc,SAAS;EACtC,UAAU;EACV,YAAY;EACZ,eAAe;EACf,eAAe;CACjB,CAAC;AACH;;AAGA,SAAS,cACP,MACA,WACkB;CAClB,OAAO;EACL,YAAY,SAAS,KAAK;EAC1B,UAAU,SAAS,KAAK;EACxB,YAAY,SAAS,KAAK;EAC1B,eAAe,SAAS,KAAK;EAC7B,YAAY,SAAS,KAAK;EAC1B,gBAAgB,SAAS,KAAK;EAC9B,WAAW,SAAS,KAAK;EACzB,eAAe,SAAS,KAAK;EAC7B,GAAG;CACL;AACF;AAEA,SAAgB,mBAAmB,SAAsB,CAAC,GAAgB;CACxE,OAAO;EAAE,GAAG;EAAsB,GAAG;CAAO;AAC9C;AAEA,SAAgB,yBACd,UAA6B,CAAC,GAC9B,eAAqE,CAAC,GACpC;CAClC,MAAM,OAAO,2BAA2B;CACxC,IAAI,CAAC,MAAM,MAAM,IAAI,MAAM,yCAAyC;CACpE,MAAM,wBAAQ,IAAI,IAAI,CACpB,GAAG,OAAO,KAAK,0BAA0B,GACzC,GAAG,OAAO,KAAK,OAAO,CACxB,CAAC;CACD,OAAO,OAAO,YACZ,CAAC,GAAG,KAAK,CAAC,CAAC,KAAK,SAAS,CACvB,MACA;EACE,GAAI,2BAA2B,SAAS;EACxC,GAAI,QAAQ,eACR,EAAE,YAAY,aAAa,MAAmC,IAC9D,CAAC;EACL,GAAI,QAAQ,SAAS,CAAC;CACxB,CACF,CAAC,CACH;AACF;AAEA,SAAS,QACP,UACA,YACA,eACkB;CAClB,OAAO;EACL,YAAY;EACZ;EACA;EACA;EACA,YAAY;EACZ,gBAAgB;CAClB;AACF"}

package/package.json

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