@takazudo/zudo-doc 5.28.2 → 6.0.1

package/dist/theme-pack-switcher/index.js

@@ -1,8 +1,8 @@
 "use client";
-import { jsx, jsxs } from "preact/jsx-runtime";
-import { useEffect, useRef, useState } from "preact/hooks";
+import { jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
+import { computed, getScope, signal, Show } from "@takazudo/zfb/zudo-react";
 import { ChevronLeft, ChevronRight, Close } from "../icons/index.js";
-import { useHydrationPending } from "../hydration-pending.js";
+import { hydrationPending } from "../hydration-pending.js";
 import { ThemePackDialog } from "../theme-pack-dialog/index.js";
 import { applyThemePack } from "./theme-pack-sync.js";
 import {
@@ -17,7 +17,6 @@ function GridIcon({ className }) {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
-      xmlns: "http://www.w3.org/2000/svg",
       class: className || void 0,
       fill: "none",
       viewBox: "0 0 24 24",
@@ -37,7 +36,6 @@ function PaletteIcon({ className }) {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
-      xmlns: "http://www.w3.org/2000/svg",
       class: className || void 0,
       fill: "none",
       viewBox: "0 0 24 24",
@@ -60,43 +58,46 @@ function PaletteIcon({ className }) {
     }
   );
 }
-const CONTROL_BUTTON_CLASS = "flex items-center gap-hsp-xs rounded border border-muted bg-bg px-hsp-md py-hsp-2xs text-caption text-fg transition-colors hover:border-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 disabled:opacity-50 disabled:pointer-events-none";
-const ICON_BUTTON_CLASS = "flex items-center justify-center rounded p-hsp-2xs text-muted transition-colors hover:text-fg focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 disabled:opacity-50 disabled:pointer-events-none";
+const CONTROL_BUTTON_CLASS = "flex items-center gap-hsp-xs rounded border border-muted bg-bg px-hsp-md py-hsp-2xs text-caption text-fg transition-colors duration-0 hover:border-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 disabled:opacity-50 disabled:pointer-events-none";
+const ICON_BUTTON_CLASS = "flex items-center justify-center rounded p-hsp-2xs text-muted transition-colors duration-0 hover:text-fg focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 disabled:opacity-50 disabled:pointer-events-none";
 function ThemePackSwitcher({
   active,
   order,
   base,
   pendingUntilHydrated = true
 }) {
-  const pending = useHydrationPending(pendingUntilHydrated);
-  const [open, setOpen] = useState(false);
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [activeSlug, setActiveSlug] = useState(active);
-  const launcherRef = useRef(null);
-  const cardRef = useRef(null);
-  useEffect(() => connectActivePackSync(setActiveSlug), []);
-  useEffect(() => {
-    if (!open || dialogOpen) return void 0;
+  const scope = getScope();
+  const pending = hydrationPending(scope, pendingUntilHydrated);
+  const open = signal(false);
+  const dialogOpen = signal(false);
+  const activeSlug = signal(active);
+  const launcherRef = { current: null };
+  const cardRef = { current: null };
+  scope.onActivate(() => connectActivePackSync((slug) => {
+    activeSlug.value = slug;
+  }));
+  scope.effect(() => {
+    if (!open.value || dialogOpen.value) return;
     return connectEscapeToClose(() => {
-      setOpen(false);
+      open.value = false;
       launcherRef.current?.focus();
     });
-  }, [open, dialogOpen]);
-  useEffect(() => {
-    if (open) cardRef.current?.focus();
-  }, [open]);
-  const entry = resolveActiveEntry(order, activeSlug);
+  });
+  scope.effect(() => {
+    if (open.value) cardRef.current?.focus();
+  });
+  const entry = computed(() => resolveActiveEntry(order, activeSlug.value));
   function cycle(step) {
-    const target = step === 1 ? nextPackSlug(order, activeSlug) : prevPackSlug(order, activeSlug);
-    if (target !== null && target !== activeSlug) void applyThemePack(target);
+    const target = step === 1 ? nextPackSlug(order, activeSlug.value) : prevPackSlug(order, activeSlug.value);
+    if (target !== null && target !== activeSlug.value) void applyThemePack(target);
   }
   function closeCard() {
-    setOpen(false);
+    open.value = false;
     launcherRef.current?.focus();
   }
   function openDialog() {
-    setOpen(false);
-    setDialogOpen(true);
+    open.value = false;
+    dialogOpen.value = true;
   }
   return /* @__PURE__ */ jsxs(
     "div",
@@ -104,18 +105,18 @@ function ThemePackSwitcher({
       class: "fixed right-hsp-lg bottom-hsp-lg z-popover flex flex-col items-end gap-vsp-2xs",
       "data-theme-pack-switcher": true,
       children: [
-        open ? /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(Show, { when: open, children: () => /* @__PURE__ */ jsxs(
           "div",
           {
             ref: cardRef,
-            tabIndex: -1,
+            tabindex: -1,
             role: "dialog",
             "aria-label": "Theme pack switcher",
             "data-switcher-card": true,
-            class: "flex w-[360px] max-w-[calc(100vw-2rem)] flex-col gap-vsp-2xs rounded-lg border border-muted bg-surface p-hsp-lg shadow-lg focus-visible:outline-2 focus-visible:outline-accent",
+            class: "flex w-[360px] max-w-[calc(100vw_-_2rem)] flex-col gap-vsp-2xs rounded-lg border border-muted bg-surface p-hsp-lg shadow-lg focus-visible:outline-2 focus-visible:outline-accent",
             children: [
               /* @__PURE__ */ jsxs("div", { class: "flex items-start justify-between gap-hsp-sm", children: [
-                /* @__PURE__ */ jsx("p", { class: "min-w-0 break-words text-body font-bold text-fg", "aria-live": "polite", children: entry?.name ?? activeSlug }),
+                /* @__PURE__ */ jsx("p", { class: "min-w-0 break-words text-body font-bold text-fg", "aria-live": "polite", children: computed(() => entry.value?.name ?? activeSlug.value) }),
                 /* @__PURE__ */ jsxs("div", { class: "flex shrink-0 items-center gap-hsp-2xs", children: [
                   /* @__PURE__ */ jsx(
                     "button",
@@ -124,7 +125,7 @@ function ThemePackSwitcher({
                       "aria-label": "Browse all theme packs",
                       title: "Browse all theme packs",
                       disabled: ThemePackDialogSlot === null,
-                      onClick: openDialog,
+                      "on:click": openDialog,
                       class: ICON_BUTTON_CLASS,
                       children: /* @__PURE__ */ jsx(GridIcon, { className: "h-icon-sm w-icon-sm" })
                     }
@@ -135,15 +136,15 @@ function ThemePackSwitcher({
                       type: "button",
                       "aria-label": "Close theme pack switcher",
                       title: "Close",
-                      onClick: closeCard,
+                      "on:click": closeCard,
                       class: ICON_BUTTON_CLASS,
-                      children: /* @__PURE__ */ jsx(Close, { className: "h-icon-sm w-icon-sm" })
+                      children: /* @__PURE__ */ jsx(Close, { class: "h-icon-sm w-icon-sm" })
                     }
                   )
                 ] })
               ] }),
-              entry !== null && /* @__PURE__ */ jsx("span", { class: "self-start rounded-full border border-muted px-hsp-sm text-micro tracking-wide text-muted uppercase", children: entry.mode === "dark" ? "Dark" : "Light" }),
-              entry !== null && entry.description !== "" && /* @__PURE__ */ jsx("p", { class: "break-words text-caption text-muted", children: entry.description }),
+              /* @__PURE__ */ jsx(Show, { when: computed(() => entry.value !== null), children: () => /* @__PURE__ */ jsx("span", { class: "self-start rounded-full border border-muted px-hsp-sm text-micro tracking-wide text-muted uppercase", children: computed(() => entry.value?.mode === "dark" ? "Dark" : "Light") }) }),
+              /* @__PURE__ */ jsx(Show, { when: computed(() => entry.value !== null && entry.value.description !== ""), children: () => /* @__PURE__ */ jsx("p", { class: "break-words text-caption text-muted", children: computed(() => entry.value?.description) }) }),
               /* @__PURE__ */ jsxs("div", { class: "flex items-center justify-between gap-hsp-sm", children: [
                 /* @__PURE__ */ jsxs(
                   "button",
@@ -151,10 +152,10 @@ function ThemePackSwitcher({
                     type: "button",
                     "aria-label": "Previous theme pack",
                     disabled: order.length < 2,
-                    onClick: () => cycle(-1),
+                    "on:click": () => cycle(-1),
                     class: CONTROL_BUTTON_CLASS,
                     children: [
-                      /* @__PURE__ */ jsx(ChevronLeft, { className: "h-icon-xs w-icon-xs" }),
+                      /* @__PURE__ */ jsx(ChevronLeft, { class: "h-icon-xs w-icon-xs" }),
                       "Prev"
                     ]
                   }
@@ -165,18 +166,18 @@ function ThemePackSwitcher({
                     type: "button",
                     "aria-label": "Next theme pack",
                     disabled: order.length < 2,
-                    onClick: () => cycle(1),
+                    "on:click": () => cycle(1),
                     class: CONTROL_BUTTON_CLASS,
                     children: [
                       "Next",
-                      /* @__PURE__ */ jsx(ChevronRight, { className: "h-icon-xs w-icon-xs" })
+                      /* @__PURE__ */ jsx(ChevronRight, { class: "h-icon-xs w-icon-xs" })
                     ]
                   }
                 )
               ] })
             ]
           }
-        ) : null,
+        ) }),
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -185,15 +186,15 @@ function ThemePackSwitcher({
             "aria-haspopup": "dialog",
             "aria-expanded": open,
             "aria-label": "Theme pack switcher",
-            "aria-disabled": pending ? "true" : void 0,
+            "aria-disabled": computed(() => pending.value ? "true" : void 0),
             title: "Theme packs",
             "data-switcher-launcher": true,
-            "data-zd-pending": pending ? "" : void 0,
-            onClick: () => {
-              if (pending) return;
-              setOpen(!open);
+            "data-zd-pending": computed(() => pending.value ? "" : void 0),
+            "on:click": () => {
+              if (pending.value) return;
+              open.value = !open.value;
             },
-            class: "flex h-[2.5rem] w-[2.5rem] items-center justify-center rounded-full border border-muted bg-surface text-fg shadow-lg transition-colors hover:text-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2",
+            class: "flex h-[2.5rem] w-[2.5rem] items-center justify-center rounded-full border border-muted bg-surface text-fg shadow-lg transition-colors duration-0 hover:text-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2",
             children: /* @__PURE__ */ jsx(PaletteIcon, { className: "h-icon-md w-icon-md" })
           }
         ),
@@ -201,9 +202,11 @@ function ThemePackSwitcher({
           ThemePackDialogSlot,
           {
             open: dialogOpen,
-            onClose: () => setDialogOpen(false),
+            onClose: () => {
+              dialogOpen.value = false;
+            },
             order,
-            active: activeSlug,
+            active: activeSlug.value,
             base
           }
         ) : null

package/dist/theme-packs/academia/meta.json

@@ -4,7 +4,7 @@
   "name": "Academia",
   "description": "A LaTeX paper for the web — white page, Computer-Modern-black ink, hyperref navy links, numbered theorem admonitions, booktabs tables. Dark mode is a scholarly slate.",
   "mode": "light",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "fonts": {
     "sans": "Source Serif 4",
     "mono": "Courier Prime",

package/dist/theme-packs/academia/pack.css

@@ -397,7 +397,7 @@ html[data-theme-pack="academia"] header[data-header] {
 }
 html[data-theme-pack="academia"] [data-header-logo] {
   font-variant-caps: small-caps;
-  font-weight: 600;
+  font-weight: var(--zdc-header-logo-weight, 600);
   letter-spacing: 0.03em;
   font-size: 1.3rem;
 }

package/dist/theme-packs/bauhaus/meta.json

@@ -4,7 +4,7 @@
   "name": "Bauhaus",
   "description": "Primary triad as structure — gallery white, near-black ink, and red, yellow, blue doing structural work: circle, triangle, square markers, thick geometric rules, zero radius.",
   "mode": "light",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "fonts": {
     "sans": "Jost",
     "mono": "Space Mono",

package/dist/theme-packs/bauhaus/pack.css

@@ -207,8 +207,8 @@ html[data-theme-pack="bauhaus"] header[data-header] {
   background-repeat: no-repeat;
 }
 html[data-theme-pack="bauhaus"] [data-header-logo] {
-  font-family: var(--font-display);
-  font-weight: 400;
+  font-family: var(--zdc-header-logo-font, var(--font-display));
+  font-weight: var(--zdc-header-logo-weight, 400);
   letter-spacing: 0.01em;
 }
 html[data-theme-pack="bauhaus"] [data-header-logo]::before {

package/dist/theme-packs/blueprint/meta.json

@@ -4,7 +4,7 @@
   "name": "Blueprint",
   "description": "Cyanotype drafting sheet — pale-cyan linework on prussian grid paper, title-block caps, dashed rules, mono-caps labels. Light mode is the vellum original.",
   "mode": "dark",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "fonts": {
     "sans": "Inter",
     "mono": "IBM Plex Mono",

package/dist/theme-packs/blueprint/pack.css

@@ -274,9 +274,9 @@ html[data-theme-pack="blueprint"] header[data-header]::after {
 /* the logo is the title-block cell: Josefin caps, bordered, with a
    drafting center-mark stamp */
 html[data-theme-pack="blueprint"] [data-header-logo] {
-  font-family: var(--font-display);
+  font-family: var(--zdc-header-logo-font, var(--font-display));
   font-size: 1rem;
-  font-weight: 600;
+  font-weight: var(--zdc-header-logo-weight, 600);
   text-transform: uppercase;
   letter-spacing: 0.14em;
   border: 1px solid color-mix(in oklch, var(--zd-fg) 55%, transparent);

package/dist/theme-packs/botanica/meta.json

@@ -4,7 +4,7 @@
   "name": "Botanica",
   "description": "A vintage botanical plate — herbarium cream, deep green ink, engraved double rules, Latin small-caps plate labels.",
   "mode": "light",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "fonts": {
     "sans": "Crimson Pro",
     "mono": "Courier Prime",

package/dist/theme-packs/botanica/pack.css

@@ -208,9 +208,9 @@ html[data-theme-pack="botanica"] header[data-header] {
   border-bottom: 3px double color-mix(in oklch, var(--zd-fg) 50%, transparent);
 }
 html[data-theme-pack="botanica"] [data-header-logo] {
-  font-family: var(--font-display);
+  font-family: var(--zdc-header-logo-font, var(--font-display));
   font-size: 1.45rem;
-  font-weight: 600;
+  font-weight: var(--zdc-header-logo-weight, 600);
   letter-spacing: 0.02em;
 }
 html[data-theme-pack="botanica"] [data-header-logo]::before {

package/dist/theme-packs/broadsheet/meta.json

@@ -4,7 +4,7 @@
   "name": "Broadsheet",
   "description": "Newspaper editorial — Playfair masthead, Oxford ink rules, a red drop cap, and a night-edition dark mode.",
   "mode": "light",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "fonts": {
     "sans": "Source Serif 4",
     "mono": "Courier Prime",

package/dist/theme-packs/broadsheet/pack.css

@@ -202,8 +202,8 @@ html[data-theme-pack="broadsheet"] header[data-header] {
   box-shadow: 0 6px 0 -5px var(--zd-fg);
 }
 html[data-theme-pack="broadsheet"] [data-header-logo] {
-  font-family: var(--font-display);
-  font-weight: 900;
+  font-family: var(--zdc-header-logo-font, var(--font-display));
+  font-weight: var(--zdc-header-logo-weight, 900);
   letter-spacing: 0.01em;
 }
 html[data-theme-pack="broadsheet"] [data-nav-item] {

package/dist/theme-packs/brutalist/meta.json

@@ -4,7 +4,7 @@
   "name": "Brutalist",
   "description": "Raw concrete web — stark black on white, 4px slab borders, zero radius, hazard-orange tape. Structure you can see.",
   "mode": "light",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "fonts": {
     "sans": "Space Grotesk",
     "mono": "IBM Plex Mono",

package/dist/theme-packs/brutalist/pack.css

@@ -255,8 +255,8 @@ html[data-theme-pack="brutalist"] header[data-header] button:focus-visible {
 
 html[data-theme-pack="brutalist"] [data-header-logo] {
   color: var(--zd-bg);
-  font-family: var(--font-display);
-  font-weight: 400;
+  font-family: var(--zdc-header-logo-font, var(--font-display));
+  font-weight: var(--zdc-header-logo-weight, 400);
   font-size: 1.02rem;
   text-transform: uppercase;
   letter-spacing: 0.04em;

package/dist/theme-packs/eink/meta.json

@@ -4,7 +4,7 @@
   "name": "E-Ink",
   "description": "E-reader grayscale — warm paper, near-black ink, shadowless hairline chrome, zero radius. Code is told by weight, slant, and gray value; only diffs keep a trace of ink-blue and ink-red.",
   "mode": "light",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "fonts": {
     "sans": "EB Garamond",
     "mono": "Courier Prime",

package/dist/theme-packs/eink/pack.css

@@ -255,7 +255,7 @@ html[data-theme-pack="eink"] .zd-content hr {
 
 /* device-menu chrome labels: small, letterspaced, even in Garamond */
 html[data-theme-pack="eink"] [data-header-logo] {
-  font-weight: 600;
+  font-weight: var(--zdc-header-logo-weight, 600);
   font-size: 1.3rem;
   letter-spacing: 0.01em;
 }

package/dist/theme-packs/futura-editorial/meta.json

@@ -4,7 +4,7 @@
   "name": "Futura Editorial",
   "description": "Normal-weight geometric Futura headings over Noto Sans body — clean white, near-black ink, one restrained red accent.",
   "mode": "light",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "fonts": {
     "sans": "Noto Sans",
     "mono": "Space Mono",

package/dist/theme-packs/futura-editorial/pack.css

@@ -175,8 +175,8 @@ html[data-theme-pack="futura-editorial"] header[data-header] {
   border-bottom: 1px solid var(--zd-fg);
 }
 html[data-theme-pack="futura-editorial"] [data-header-logo] {
-  font-family: var(--font-display);
-  font-weight: 400;
+  font-family: var(--zdc-header-logo-font, var(--font-display));
+  font-weight: var(--zdc-header-logo-weight, 400);
   font-size: 1.05rem;
   text-transform: uppercase;
   letter-spacing: 0.16em;

package/dist/theme-packs/hearth/meta.json

@@ -4,7 +4,7 @@
   "name": "Hearth",
   "description": "Warm cream & brick-red fireside docs — Fraunces headings, amber code blocks, ember-glow dark mode.",
   "mode": "light",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "fonts": {
     "sans": "Nunito",
     "mono": "Spline Sans Mono",

package/dist/theme-packs/hearth/pack.css

@@ -193,8 +193,8 @@ html[data-theme-pack="hearth"] header[data-header] {
   );
 }
 html[data-theme-pack="hearth"] [data-header-logo] {
-  font-family: var(--font-display);
-  font-weight: 620;
+  font-family: var(--zdc-header-logo-font, var(--font-display));
+  font-weight: var(--zdc-header-logo-weight, 620);
   color: var(--zd-accent);
 }
 /* Exclude the current page: it carries the base `bg-fg text-bg` inverted

package/dist/theme-packs/ledger/meta.json

@@ -4,7 +4,7 @@
   "name": "Ledger",
   "description": "Cream academic serif in the Tufte tradition — warm paper, ink prose, oxblood links, hairline rules, quiet code.",
   "mode": "light",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "fonts": {
     "sans": "Crimson Pro",
     "mono": "IBM Plex Mono",

package/dist/theme-packs/ledger/pack.css

@@ -203,7 +203,7 @@ html[data-theme-pack="ledger"] header[data-header] {
   border-bottom-color: color-mix(in srgb, var(--zd-fg) 30%, transparent);
 }
 html[data-theme-pack="ledger"] [data-header-logo] {
-  font-weight: 500;
+  font-weight: var(--zdc-header-logo-weight, 500);
   font-style: italic;
   font-size: 1.4rem;
   letter-spacing: 0.01em;

package/dist/theme-packs/manuscript/meta.json

@@ -4,7 +4,7 @@
   "name": "Manuscript",
   "description": "A quiet Garamond book page — warm paper, soft ink, sepia rubrication, small-caps subheads, fleuron section marks.",
   "mode": "light",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "fonts": {
     "sans": "EB Garamond",
     "mono": "Courier Prime",

package/dist/theme-packs/manuscript/pack.css

@@ -183,7 +183,7 @@ html[data-theme-pack="manuscript"] header[data-header] {
 html[data-theme-pack="manuscript"] [data-header-logo] {
   font-variant-caps: small-caps;
   letter-spacing: 0.06em;
-  font-weight: 600;
+  font-weight: var(--zdc-header-logo-weight, 600);
   font-size: 1.35rem;
 }
 html[data-theme-pack="manuscript"] [data-nav-item] {

package/dist/theme-packs/matcha/meta.json

@@ -4,7 +4,7 @@
   "name": "Matcha",
   "description": "Green tea ceremony — deep matcha on warm cream, mincho headings, zen whitespace, tea-foam surfaces in both modes.",
   "mode": "light",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "fonts": {
     "sans": "Zen Kaku Gothic New",
     "mono": "M PLUS 1 Code",

package/dist/theme-packs/matcha/pack.css

@@ -251,8 +251,8 @@ html[data-theme-pack="matcha"] header[data-header] {
   );
 }
 html[data-theme-pack="matcha"] [data-header-logo] {
-  font-family: var(--font-display);
-  font-weight: 600;
+  font-family: var(--zdc-header-logo-font, var(--font-display));
+  font-weight: var(--zdc-header-logo-weight, 600);
   letter-spacing: 0.05em;
 }
 

package/dist/theme-packs/nocturne/meta.json

@@ -4,7 +4,7 @@
   "name": "Nocturne",
   "description": "Purple midnight — velvet aubergine depths, lavender links, and muted gold hairlines. Elegant, never neon.",
   "mode": "dark",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "fonts": {
     "sans": "Manrope",
     "mono": "IBM Plex Mono",

package/dist/theme-packs/nocturne/pack.css

@@ -235,8 +235,8 @@ html[data-theme-pack="nocturne"] header[data-header] {
   );
 }
 html[data-theme-pack="nocturne"] [data-header-logo] {
-  font-family: var(--font-display);
-  font-weight: 600;
+  font-family: var(--zdc-header-logo-font, var(--font-display));
+  font-weight: var(--zdc-header-logo-weight, 600);
   font-size: 1.45rem;
   letter-spacing: 0.02em;
 }

package/dist/theme-packs/observatory/meta.json

@@ -4,7 +4,7 @@
   "name": "Observatory",
   "description": "Night-sky atlas: star-field depth, constellation-line rules, nebula violet and comet gold over astronomer's navy.",
   "mode": "dark",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "fonts": {
     "sans": "Jost",
     "mono": "Space Mono",

package/dist/theme-packs/observatory/pack.css

@@ -288,8 +288,8 @@ html[data-theme-pack="observatory"] header[data-header] {
   );
 }
 html[data-theme-pack="observatory"] [data-header-logo] {
-  font-family: var(--font-display);
-  font-weight: 300;
+  font-family: var(--zdc-header-logo-font, var(--font-display));
+  font-weight: var(--zdc-header-logo-weight, 300);
   font-size: 1.05rem;
   letter-spacing: 0.16em;
   text-transform: uppercase;

package/dist/theme-packs/onyx/meta.json

@@ -4,7 +4,7 @@
   "name": "Onyx",
   "description": "Luxury noir — jet black, champagne serif headings, and a single gold hairline accent. Watch-brand restraint.",
   "mode": "dark",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "fonts": {
     "sans": "Jost",
     "mono": "IBM Plex Mono",

package/dist/theme-packs/onyx/pack.css

@@ -229,8 +229,8 @@ html[data-theme-pack="onyx"] header[data-header] {
   border-bottom: 1px solid color-mix(in oklch, var(--zd-accent) 38%, transparent);
 }
 html[data-theme-pack="onyx"] [data-header-logo] {
-  font-family: var(--font-display);
-  font-weight: 600;
+  font-family: var(--zdc-header-logo-font, var(--font-display));
+  font-weight: var(--zdc-header-logo-weight, 600);
   font-size: 1.35rem;
   letter-spacing: 0.04em;
 }

package/dist/theme-packs/phosphor/meta.json

@@ -4,7 +4,7 @@
   "name": "Phosphor",
   "description": "Green CRT terminal — phosphor glow, scanlines, inverse-video nav, monospace everything.",
   "mode": "dark",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "fonts": {
     "sans": "JetBrains Mono",
     "mono": "JetBrains Mono",

package/dist/theme-packs/phosphor/pack.css

@@ -225,8 +225,8 @@ html[data-theme-pack="phosphor"] header[data-header] {
   border-bottom-color: color-mix(in oklch, var(--zd-accent) 40%, transparent);
 }
 html[data-theme-pack="phosphor"] [data-header-logo] {
-  font-family: var(--font-display);
-  font-weight: 400;
+  font-family: var(--zdc-header-logo-font, var(--font-display));
+  font-weight: var(--zdc-header-logo-weight, 400);
   font-size: 1.55rem;
   color: var(--zd-accent);
 }

package/dist/theme-packs/riso/meta.json

@@ -4,7 +4,7 @@
   "name": "Riso",
   "description": "Risograph duotone print — warm paper, two inks (riso blue + fluorescent coral), misregistered offset shadows, and a soft linear paper grain.",
   "mode": "light",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "fonts": {
     "sans": "Space Grotesk",
     "mono": "Space Mono",

package/dist/theme-packs/riso/pack.css

@@ -235,8 +235,8 @@ html[data-theme-pack="riso"] header[data-header] {
   border-bottom: 3px solid var(--zd-accent);
 }
 html[data-theme-pack="riso"] [data-header-logo] {
-  font-family: var(--font-display);
-  font-weight: 400;
+  font-family: var(--zdc-header-logo-font, var(--font-display));
+  font-weight: var(--zdc-header-logo-weight, 400);
   letter-spacing: 0.01em;
 }
 html[data-theme-pack="riso"] [data-header-logo]::before {

package/dist/theme-packs/sakura/meta.json

@@ -4,7 +4,7 @@
   "name": "Sakura",
   "description": "Cherry-blossom pastels — blush-white paper, plum ink, and rose accents on petal-soft corners; dark mode is yozakura, night blossoms under lantern-pink light.",
   "mode": "light",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "fonts": {
     "sans": "Nunito",
     "mono": "M PLUS 1 Code",

package/dist/theme-packs/sakura/pack.css

@@ -215,8 +215,8 @@ html[data-theme-pack="sakura"] header[data-header] {
 
 /* wordmark — mincho voice with a single blossom */
 html[data-theme-pack="sakura"] [data-header-logo] {
-  font-family: var(--font-display);
-  font-weight: 700;
+  font-family: var(--zdc-header-logo-font, var(--font-display));
+  font-weight: var(--zdc-header-logo-weight, 700);
   letter-spacing: 0.015em;
 }
 html[data-theme-pack="sakura"] [data-header-logo]::after {

package/dist/theme-packs/scandi/meta.json

@@ -4,7 +4,7 @@
   "name": "Scandi",
   "description": "Hygge minimalism — oat linen, sage & clay, pill nav actives and 8px corners; night mode is warm charcoal lit by candle amber.",
   "mode": "light",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "fonts": {
     "sans": "Manrope",
     "mono": "Spline Sans Mono",