@takazudo/zudo-doc 5.28.2 → 6.0.1

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

@@ -144,7 +144,7 @@ html[data-theme-pack="scandi"] header[data-header] {
   border-bottom-color: color-mix(in srgb, var(--zd-muted) 26%, transparent);
 }
 html[data-theme-pack="scandi"] [data-header-logo] {
-  font-weight: 800;
+  font-weight: var(--zdc-header-logo-weight, 800);
   letter-spacing: -0.02em;
 }
 html[data-theme-pack="scandi"] [data-nav-item] {

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

@@ -4,7 +4,7 @@
   "name": "Solar",
   "description": "Solarized precision — low-eyestrain paper tones, blue/cyan/orange accents, mono labels, technical calm in both modes.",
   "mode": "light",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "fonts": {
     "sans": "Source Sans 3",
     "mono": "Source Code Pro",

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

@@ -190,7 +190,7 @@ html[data-theme-pack="solar"] body {
 
 /* logo gets the sun glyph in solarized orange */
 html[data-theme-pack="solar"] [data-header-logo] {
-  font-weight: 600;
+  font-weight: var(--zdc-header-logo-weight, 600);
   letter-spacing: -0.01em;
 }
 html[data-theme-pack="solar"] [data-header-logo]::after {

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

@@ -4,7 +4,7 @@
   "name": "Sumi",
   "description": "Sumi-e ink on washi — bold mincho brush headings, deep black strokes, one vermillion hanko seal accent.",
   "mode": "light",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "fonts": {
     "sans": "Zen Kaku Gothic New",
     "mono": "IBM Plex Mono",

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

@@ -253,8 +253,8 @@ html[data-theme-pack="sumi"] header[data-header] {
   border-bottom: 3px solid var(--zd-fg);
 }
 html[data-theme-pack="sumi"] [data-header-logo] {
-  font-family: var(--font-display);
-  font-weight: 800;
+  font-family: var(--zdc-header-logo-font, var(--font-display));
+  font-weight: var(--zdc-header-logo-weight, 800);
   letter-spacing: 0.02em;
 }
 html[data-theme-pack="sumi"] [data-header-logo]::after {

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

@@ -4,7 +4,7 @@
   "name": "Swissgrid",
   "description": "International Typographic Style — grid discipline, black on white, one hot Swiss-red accent, oversized section numbers.",
   "mode": "light",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "fonts": {
     "sans": "Inter",
     "mono": "IBM Plex Mono",

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

@@ -204,7 +204,7 @@ html[data-theme-pack="swissgrid"] header[data-header] {
   border-bottom: 3px solid var(--zd-fg);
 }
 html[data-theme-pack="swissgrid"] [data-header-logo] {
-  font-weight: 900;
+  font-weight: var(--zdc-header-logo-weight, 900);
   letter-spacing: -0.03em;
 }
 html[data-theme-pack="swissgrid"] [data-header-logo]::before {

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

@@ -4,7 +4,7 @@
   "name": "Timberline",
   "description": "Forest cabin after dark — pine & umber planks, cream prose, and matte lantern-amber accents; light mode is the same lodge at morning.",
   "mode": "dark",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "fonts": {
     "sans": "Source Sans 3",
     "mono": "JetBrains Mono",

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

@@ -212,8 +212,8 @@ html[data-theme-pack="timberline"] header[data-header] {
   box-shadow: 0 1px 0 0 light-dark(oklch(0.988 0.008 95 / 0.85), oklch(0.87 0.07 80 / 0.13));
 }
 html[data-theme-pack="timberline"] [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);
   letter-spacing: -0.005em;
   color: var(--zd-accent);
 }

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

@@ -4,7 +4,7 @@
   "name": "Washi",
   "description": "Warm washi paper, sumi ink, and ai-iro indigo seals — quiet Japanese stationery for calm documentation.",
   "mode": "light",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "fonts": {
     "sans": "Zen Kaku Gothic New",
     "mono": "M PLUS 1 Code",

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

@@ -276,8 +276,8 @@ html[data-theme-pack="washi"] header[data-header] {
 
 /* header logo: mincho wordmark with a small square indigo mark */
 html[data-theme-pack="washi"] [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.02em;
 }
 html[data-theme-pack="washi"] [data-header-logo]::before {

package/dist/theme-toggle/index.d.ts

@@ -13,7 +13,7 @@ export interface ThemeToggleProps {
     /** Keep activation pending until the first successful mount. @default true */
     pendingUntilHydrated?: boolean;
 }
-export declare function ThemeToggle({ defaultMode, respectPrefersColorScheme, labels, pendingUntilHydrated, }: ThemeToggleProps): import("preact").JSX.Element;
+export declare function ThemeToggle({ defaultMode, respectPrefersColorScheme, labels, pendingUntilHydrated }: ThemeToggleProps): import("@takazudo/zfb").Description;
 export declare namespace ThemeToggle {
     var displayName: string;
 }

package/dist/theme-toggle/index.js

@@ -1,8 +1,7 @@
 "use client";
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
-import { useState, useEffect, useRef } from "preact/hooks";
-import { createPortal } from "preact/compat";
-import { useHydrationPending } from "../hydration-pending.js";
+import { Fragment, jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
+import { computed, getScope, Show, signal } from "@takazudo/zfb/zudo-react";
+import { hydrationPending } from "../hydration-pending.js";
 import { AFTER_NAVIGATE_EVENT } from "../transitions/index.js";
 import {
   applyThemePreference,
@@ -14,23 +13,26 @@ import {
 const preferences = ["light", "dark", "system"];
 let menuSequence = 0;
 function PreferenceIcon({ preference }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "svg",
     {
       "aria-hidden": "true",
-      xmlns: "http://www.w3.org/2000/svg",
       width: "20",
       height: "20",
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
-      strokeWidth: "1.2",
-      strokeLinecap: "square",
-      strokeLinejoin: "miter",
-      children: preference === "light" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3.6" }),
-        /* @__PURE__ */ jsx("path", { d: "M12 2.5V6M12 18V21.5M2.5 12H6M18 12H21.5M5.3 5.3L7.8 7.8M16.2 16.2L18.7 18.7M5.3 18.7L7.8 16.2M16.2 7.8L18.7 5.3" })
-      ] }) : preference === "dark" ? /* @__PURE__ */ jsx("path", { d: "M10.2 2.9C5.7 3.9 2.6 7.9 3 12.6C3.4 17.7 7.9 21.5 13 21.1C16.9 20.7 20.1 17.9 21 14.1C18.6 15.7 15.6 15.8 13.2 14.3C9.3 12 8 6.8 10.2 2.9Z" }) : /* @__PURE__ */ jsx("path", { d: "M2.5 3.5H21.5V16.5H2.5ZM12 16.5V20.5M7.5 20.5H16.5" })
+      "stroke-width": "1.2",
+      "stroke-linecap": "square",
+      "stroke-linejoin": "miter",
+      children: [
+        /* @__PURE__ */ jsx(Show, { when: computed(() => preference === "light"), children: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3.6" }),
+          /* @__PURE__ */ jsx("path", { d: "M12 2.5V6M12 18V21.5M2.5 12H6M18 12H21.5M5.3 5.3L7.8 7.8M16.2 16.2L18.7 18.7M5.3 18.7L7.8 16.2M16.2 7.8L18.7 5.3" })
+        ] }) }),
+        /* @__PURE__ */ jsx(Show, { when: computed(() => preference === "dark"), children: () => /* @__PURE__ */ jsx("path", { d: "M10.2 2.9C5.7 3.9 2.6 7.9 3 12.6C3.4 17.7 7.9 21.5 13 21.1C16.9 20.7 20.1 17.9 21 14.1C18.6 15.7 15.6 15.8 13.2 14.3C9.3 12 8 6.8 10.2 2.9Z" }) }),
+        /* @__PURE__ */ jsx(Show, { when: computed(() => preference === "system"), children: () => /* @__PURE__ */ jsx("path", { d: "M2.5 3.5H21.5V16.5H2.5ZM12 16.5V20.5M7.5 20.5H16.5" }) })
+      ]
     }
   );
 }
@@ -41,207 +43,192 @@ const englishLabels = {
   system: "System",
   systemHelper: "Follows device \xB7 currently {mode}"
 };
-function ThemeToggle({
-  defaultMode = "dark",
-  respectPrefersColorScheme = true,
-  labels = englishLabels,
-  pendingUntilHydrated = true
-}) {
-  const pending = useHydrationPending(pendingUntilHydrated);
-  const menuId = useRef("");
-  const ensureMenuId = () => {
-    if (!menuId.current) menuId.current = `zd-appearance-${++menuSequence}`;
-  };
-  const rootRef = useRef(null);
-  const menuRef = useRef(null);
-  const triggerRef = useRef(null);
-  const itemRefs = useRef([]);
-  const restoreFocusRef = useRef(false);
-  const [preference, setPreference] = useState(
-    respectPrefersColorScheme ? "system" : defaultMode
-  );
-  const [resolved, setResolved] = useState(defaultMode);
-  const [open, setOpen] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(0);
-  const [placement, setPlacement] = useState(null);
-  useEffect(() => {
-    const sync = () => {
-      setPreference(readThemePreference(defaultMode, respectPrefersColorScheme));
-      setResolved(readColorSchemeFromDom(defaultMode));
-    };
-    sync();
-    const unsubscribePreference = subscribeThemePreferenceChanged(() => {
-      sync();
-      setOpen(false);
-    });
-    const unsubscribeScheme = subscribeColorSchemeChanged(sync);
-    return () => {
-      unsubscribePreference();
-      unsubscribeScheme();
-    };
-  }, [defaultMode, respectPrefersColorScheme]);
-  useEffect(() => {
-    if (!open) return;
+function AppearanceMenu({ id, labels, preference, resolved, activeIndex, triggerRef, rootRef, close, select, move }) {
+  const scope = getScope();
+  const menuRef = { current: null };
+  const itemRefs = preferences.map(() => ({ current: null }));
+  const placement = signal({ visibility: "hidden", left: "0px", top: "0px", right: "auto", bottom: "auto", margin: "0", width: "260px", "max-height": "none" });
+  scope.onActivate(() => {
     const menu = menuRef.current;
-    menu?.showPopover?.();
+    if (!menu) return;
+    menu.showPopover?.();
     const position = () => {
       const rect = triggerRef.current?.getBoundingClientRect();
       if (!rect) return;
       const gap = 8;
-      const width = Math.min(260, window.innerWidth - gap * 2);
-      const desiredHeight = menu?.scrollHeight ?? 280;
+      const width = Math.max(0, Math.min(260, window.innerWidth - gap * 2));
+      const desiredHeight = menu.scrollHeight || 280;
       const roomBelow = window.innerHeight - rect.bottom - gap * 2;
       const roomAbove = rect.top - gap * 2;
       const above = roomBelow < desiredHeight && roomAbove > roomBelow;
       const maxHeight = Math.max(80, Math.min(desiredHeight, above ? roomAbove : roomBelow));
-      setPlacement({
-        left: Math.max(gap, Math.min(rect.right - width, window.innerWidth - width - gap)),
-        top: above ? Math.max(gap, rect.top - gap - maxHeight) : rect.bottom + gap,
-        width,
-        maxHeight
-      });
+      const left = Math.max(gap, Math.min(rect.right - width, window.innerWidth - width - gap));
+      const top = above ? Math.max(gap, rect.top - gap - maxHeight) : rect.bottom + gap;
+      placement.value = { visibility: "visible", left: `${left}px`, top: `${top}px`, right: "auto", bottom: "auto", margin: "0", width: `${width}px`, "max-height": `${maxHeight}px` };
     };
     const onPointerDown = (event) => {
-      if (!rootRef.current?.contains(event.target) && !menuRef.current?.contains(event.target)) setOpen(false);
+      if (!rootRef.current?.contains(event.target) && !menu.contains(event.target)) close();
     };
-    const onNavigate = () => setOpen(false);
+    const onNavigate = () => close();
     position();
+    const focusFrame = requestAnimationFrame(() => {
+      if (!scope.abortSignal.aborted) itemRefs[activeIndex.value]?.current?.focus();
+    });
     document.addEventListener("pointerdown", onPointerDown);
     window.addEventListener("resize", position);
     window.addEventListener("scroll", position, true);
     document.addEventListener(AFTER_NAVIGATE_EVENT, onNavigate);
     return () => {
-      if (menu?.hidePopover && menu.matches(":popover-open")) menu.hidePopover();
+      cancelAnimationFrame(focusFrame);
+      if (menu.hidePopover && menu.matches(":popover-open")) menu.hidePopover();
       document.removeEventListener("pointerdown", onPointerDown);
       window.removeEventListener("resize", position);
       window.removeEventListener("scroll", position, true);
       document.removeEventListener(AFTER_NAVIGATE_EVENT, onNavigate);
     };
-  }, [open]);
-  useEffect(() => {
-    if (open && placement) itemRefs.current[activeIndex]?.focus();
-  }, [open, placement]);
-  useEffect(() => {
-    if (open || !restoreFocusRef.current) return;
-    restoreFocusRef.current = false;
-    requestAnimationFrame(() => triggerRef.current?.focus());
-  }, [open]);
+  });
+  const onMenuKeyDown = (event) => {
+    const keyboard = event;
+    if (keyboard.isComposing) return;
+    if (keyboard.key === "Escape") {
+      keyboard.preventDefault();
+      keyboard.stopPropagation();
+      close(true);
+    } else if (keyboard.key === "Tab") {
+      window.setTimeout(() => close(), 0);
+    } else if (keyboard.key === "ArrowDown" || keyboard.key === "ArrowUp" || keyboard.key === "Home" || keyboard.key === "End") {
+      keyboard.preventDefault();
+      const next = keyboard.key === "Home" ? 0 : keyboard.key === "End" ? 2 : activeIndex.value + (keyboard.key === "ArrowDown" ? 1 : -1);
+      move(next);
+      itemRefs[(next + preferences.length) % preferences.length]?.current?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: menuRef,
+      id,
+      role: "menu",
+      "aria-label": labels.appearance,
+      "on:keydown": onMenuKeyDown,
+      class: "fixed z-tooltip overflow-y-auto rounded-lg border border-muted bg-surface p-hsp-xs text-fg shadow-lg",
+      style: placement,
+      popover: "manual",
+      children: [
+        /* @__PURE__ */ jsx("div", { class: "px-hsp-sm py-vsp-xs text-small font-semibold", "aria-hidden": "true", children: labels.appearance }),
+        preferences.map((option, index) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: itemRefs[index],
+            type: "button",
+            role: "menuitemradio",
+            "aria-checked": computed(() => preference.value === option),
+            "on:focus": () => move(index),
+            "on:click": () => select(option),
+            class: computed(() => `flex min-h-[44px] w-full items-center gap-hsp-sm rounded px-hsp-sm text-left text-small ${preference.value === option ? "bg-accent/10" : ""} hover:bg-accent/10 focus-visible:bg-accent/10 focus-visible:outline-2 focus-visible:outline-accent`),
+            children: [
+              /* @__PURE__ */ jsx(PreferenceIcon, { preference: option }),
+              /* @__PURE__ */ jsx("span", { class: "flex-1", children: labels[option] }),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", class: "text-accent", children: computed(() => preference.value === option ? "\u2713" : "") })
+            ]
+          }
+        )),
+        /* @__PURE__ */ jsx("div", { class: "px-hsp-sm py-vsp-xs text-small text-muted", children: computed(() => labels.systemHelper.replace("{mode}", labels[resolved.value])) })
+      ]
+    }
+  );
+}
+function ThemeToggle({ defaultMode = "dark", respectPrefersColorScheme = true, labels = englishLabels, pendingUntilHydrated = true }) {
+  const scope = getScope();
+  const pending = hydrationPending(scope, pendingUntilHydrated);
+  const rootRef = { current: null };
+  const triggerRef = { current: null };
+  const preference = signal(respectPrefersColorScheme ? "system" : defaultMode);
+  const resolved = signal(defaultMode);
+  const open = signal(false);
+  const activeIndex = signal(0);
+  let menuId = "";
+  const ensureMenuId = () => {
+    if (!menuId) menuId = `zd-appearance-${++menuSequence}`;
+  };
+  scope.onActivate(() => {
+    const sync = () => {
+      preference.value = readThemePreference(defaultMode, respectPrefersColorScheme);
+      resolved.value = readColorSchemeFromDom(defaultMode);
+    };
+    sync();
+    const unsubscribePreference = subscribeThemePreferenceChanged(() => {
+      sync();
+      open.value = false;
+    });
+    const unsubscribeScheme = subscribeColorSchemeChanged(sync);
+    return () => {
+      unsubscribePreference();
+      unsubscribeScheme();
+    };
+  });
   const close = (restoreFocus = false) => {
-    restoreFocusRef.current = restoreFocus;
-    setOpen(false);
+    open.value = false;
+    if (restoreFocus) requestAnimationFrame(() => {
+      if (!scope.abortSignal.aborted && !open.value) triggerRef.current?.focus();
+    });
   };
   const select = (next) => {
     close(true);
     applyThemePreference(next);
-    setPreference(next);
-    setResolved(readColorSchemeFromDom(defaultMode));
+    preference.value = next;
+    resolved.value = readColorSchemeFromDom(defaultMode);
   };
   const move = (index) => {
-    const next = (index + preferences.length) % preferences.length;
-    setActiveIndex(next);
-    itemRefs.current[next]?.focus();
+    activeIndex.value = (index + preferences.length) % preferences.length;
   };
-  const onMenuKeyDown = (event) => {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      event.stopPropagation();
-      close(true);
-    } else if (event.key === "Tab") {
-      window.setTimeout(() => close(), 0);
-    } else if (event.key === "ArrowDown") {
-      event.preventDefault();
-      move(activeIndex + 1);
-    } else if (event.key === "ArrowUp") {
-      event.preventDefault();
-      move(activeIndex - 1);
-    } else if (event.key === "Home") {
-      event.preventDefault();
-      move(0);
-    } else if (event.key === "End") {
-      event.preventDefault();
-      move(2);
-    }
+  const show = (index) => {
+    ensureMenuId();
+    move(index);
+    open.value = true;
   };
-  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: "relative inline-flex", "data-zd-theme-menu": "", children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, class: "relative inline-flex", "data-zd-theme-menu": "", children: [
+    /* @__PURE__ */ jsxs(
       "button",
       {
         ref: triggerRef,
         type: "button",
         "aria-haspopup": "menu",
         "aria-expanded": open,
-        "aria-controls": open ? menuId.current : void 0,
-        "aria-label": `${labels.appearance}: ${labels[preference]}`,
-        "aria-disabled": pending ? "true" : void 0,
-        "data-zd-pending": pending ? "" : void 0,
-        onClick: () => {
-          if (pending) return;
-          if (open) close(true);
-          else {
-            setPlacement(null);
-            ensureMenuId();
-            setActiveIndex(preferences.indexOf(preference));
-            setOpen(true);
-          }
+        "aria-controls": computed(() => open.value ? menuId : void 0),
+        "aria-label": computed(() => `${labels.appearance}: ${labels[preference.value]}`),
+        "aria-disabled": computed(() => pending.value ? "true" : void 0),
+        "data-zd-pending": computed(() => pending.value ? "" : void 0),
+        "on:click": () => {
+          if (pending.value) return;
+          if (open.value) close(true);
+          else show(preferences.indexOf(preference.value));
         },
-        onKeyDown: (event) => {
-          if (pending) {
-            if (event.key === "Enter" || event.key === " ") event.preventDefault();
+        "on:keydown": (event) => {
+          const keyboard = event;
+          if (keyboard.isComposing) return;
+          if (pending.value) {
+            if (keyboard.key === "Enter" || keyboard.key === " ") keyboard.preventDefault();
             return;
           }
-          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-            event.preventDefault();
-            setPlacement(null);
-            ensureMenuId();
-            setActiveIndex(event.key === "ArrowDown" ? 0 : 2);
-            setOpen(true);
-          } else if (event.key === "Escape" && open) {
-            event.preventDefault();
-            event.stopPropagation();
+          if (keyboard.key === "ArrowDown" || keyboard.key === "ArrowUp") {
+            keyboard.preventDefault();
+            show(keyboard.key === "ArrowDown" ? 0 : 2);
+          } else if (keyboard.key === "Escape" && open.value) {
+            keyboard.preventDefault();
+            keyboard.stopPropagation();
             close(true);
           }
         },
-        className: "inline-flex h-[40px] w-[40px] shrink-0 items-center justify-center text-muted hover:text-fg focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2",
-        children: /* @__PURE__ */ jsx(PreferenceIcon, { preference })
-      }
-    ),
-    open && createPortal(/* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: menuRef,
-        id: menuId.current,
-        role: "menu",
-        "aria-label": labels.appearance,
-        popover: typeof HTMLElement !== "undefined" && "showPopover" in HTMLElement.prototype ? "manual" : void 0,
-        onKeyDown: onMenuKeyDown,
-        className: "fixed z-tooltip overflow-y-auto rounded-lg border border-muted bg-surface p-hsp-xs text-fg shadow-lg",
-        style: placement ? { left: placement.left, top: placement.top, right: "auto", bottom: "auto", margin: 0, width: placement.width, maxHeight: placement.maxHeight } : { visibility: "hidden", left: 0, top: 0, right: "auto", bottom: "auto", margin: 0, width: Math.min(260, window.innerWidth - 16) },
+        class: "inline-flex h-[40px] w-[40px] shrink-0 items-center justify-center text-muted hover:text-fg focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2",
         children: [
-          /* @__PURE__ */ jsx("div", { className: "px-hsp-sm py-vsp-xs text-small font-semibold", "aria-hidden": "true", children: labels.appearance }),
-          preferences.map((option, index) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              ref: (node) => {
-                itemRefs.current[index] = node;
-              },
-              type: "button",
-              role: "menuitemradio",
-              "aria-checked": preference === option,
-              onFocus: () => setActiveIndex(index),
-              onClick: () => select(option),
-              className: `flex min-h-[44px] w-full items-center gap-hsp-sm rounded px-hsp-sm text-left text-small ${preference === option ? "bg-accent/10" : ""} hover:bg-accent/10 focus-visible:bg-accent/10 focus-visible:outline-2 focus-visible:outline-accent`,
-              children: [
-                /* @__PURE__ */ jsx(PreferenceIcon, { preference: option }),
-                /* @__PURE__ */ jsx("span", { className: "flex-1", children: labels[option] }),
-                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-accent", children: preference === option ? "\u2713" : "" })
-              ]
-            },
-            option
-          )),
-          /* @__PURE__ */ jsx("div", { className: "px-hsp-sm py-vsp-xs text-small text-muted", children: labels.systemHelper.replace("{mode}", labels[resolved]) })
+          /* @__PURE__ */ jsx(Show, { when: computed(() => preference.value === "light"), children: () => /* @__PURE__ */ jsx(PreferenceIcon, { preference: "light" }) }),
+          /* @__PURE__ */ jsx(Show, { when: computed(() => preference.value === "dark"), children: () => /* @__PURE__ */ jsx(PreferenceIcon, { preference: "dark" }) }),
+          /* @__PURE__ */ jsx(Show, { when: computed(() => preference.value === "system"), children: () => /* @__PURE__ */ jsx(PreferenceIcon, { preference: "system" }) })
         ]
       }
-    ), document.body)
+    ),
+    /* @__PURE__ */ jsx(Show, { when: open, children: () => /* @__PURE__ */ jsx(AppearanceMenu, { id: menuId, labels, preference, resolved, activeIndex, triggerRef, rootRef, close, select, move }) })
   ] });
 }
 ThemeToggle.displayName = "ThemeToggle";