@takazudo/zudo-doc 5.28.2 → 6.0.0

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-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";