@tenphi/renderer 0.30.0 → 0.30.2

package/dist/client/elements.d.ts

@@ -0,0 +1,11 @@
+import { dialog } from "@uniaria/core/dialog";
+import { popover } from "@uniaria/core/popover";
+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>;
+  }
+}
+//# sourceMappingURL=elements.d.ts.map

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

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

package/dist/client/elements.js

@@ -0,0 +1,16 @@
+import { dialog } from "@uniaria/core/dialog";
+import { configure } from "@uniaria/core/dom";
+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.
+*/
+configure({ positioning: "css" });
+defineElement(popover, { prefix: "cb" });
+defineElement(dialog, { prefix: "cb" });
+//#endregion
+export {};
+
+//# sourceMappingURL=elements.js.map

package/dist/client/elements.js.map

@@ -0,0 +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"}

package/dist/client/navigation.js

@@ -35,7 +35,7 @@ var CookbookSidebarPane = class extends HTMLElement {
 					this.#inert.set(element, element.inert);
 					element.inert = true;
 				}
-				this.querySelector("[autofocus]")?.focus({ preventScroll: true });
+				if (!this.contains(document.activeElement)) this.querySelector("[autofocus]")?.focus({ preventScroll: true });
 			} else {
 				const restoreFocus = this.contains(document.activeElement) || document.activeElement === document.body;
 				this.#release();
@@ -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          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":"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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        '[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/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,36 @@ 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("cb-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: "cb-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/SelectPopover.astro

@@ -15,15 +15,25 @@ interface Props {
   title: string;
   options: Option[];
   icon?: string;
+  /** UniAria owns behavior when rendered inside a cb-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/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.0",
+  "version": "0.30.2",
   "description": "Astro renderer and Tasty theme for Cookbook",
   "type": "module",
   "sideEffects": [
@@ -61,10 +61,12 @@
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@fontsource-variable/onest": "^5.3.0",
     "@pagefind/default-ui": "1.5.2",
-    "@tenphi/docs": "0.30.0",
+    "@tenphi/docs": "0.30.2",
     "@tenphi/eslint-plugin-tasty": "1.12.0",
     "@tenphi/glaze": "2.0.1",
     "@tenphi/tasty": "3.14.0",
+    "@uniaria/core": "0.3.0",
+    "@uniaria/elements": "0.3.0",
     "beautiful-mermaid": "^1.1.3",
     "hast-util-from-html": "^2.0.3",
     "pagefind": "1.5.2",