@celestia-island/hikari 0.53.1 → 0.54.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.53.1",
+  "version": "0.54.0",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkThemeToggle.test.ts

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { createApp, h, nextTick } from "vue";
+import { createApp, h, nextTick, ref } from "vue";
 
 import { HkThemeToggle } from "./HkThemeToggle";
 import { themePresets, useTheme, type CustomThemePreset } from "../theme";
@@ -356,3 +356,65 @@ describe("HkThemeToggle item slots", () => {
     }
   });
 });
+
+describe("HkThemeToggle exposed closeMenu", () => {
+  /** Public surface HkThemeToggle exposes via setup expose() —
+   *  InstanceType does not carry expose() members, so type it
+   *  structurally (the consumer-side contract this ships for). */
+  interface ThemeTogglePublic {
+    closeMenu: () => void;
+  }
+
+  function mountToggleWithRef(): {
+    container: HTMLElement;
+    toggle: () => ThemeTogglePublic;
+  } {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const handle = ref<ThemeTogglePublic | null>(null);
+    const app = createApp({
+      render: () => h(HkThemeToggle, { ref: handle, externalCustomize: true }),
+    });
+    app.mount(container);
+    mounts.push({ app, container });
+    return {
+      container,
+      toggle: () => {
+        const t = handle.value;
+        if (!t) throw new Error("HkThemeToggle ref never populated");
+        return t;
+      },
+    };
+  }
+
+  it("closes the open menu through the exposed closeMenu", async () => {
+    const { container, toggle } = mountToggleWithRef();
+    await settle();
+
+    openMenu(container);
+    await settle();
+    expect(document.body.querySelector(".s-theme-menu")).toBeTruthy();
+
+    // Host-row affordances (e.g. a per-theme edit button) open delegated
+    // second-level windows: the desktop popover must be dismissable
+    // programmatically — the same teardown path as every internal close.
+    toggle().closeMenu();
+    await settle();
+
+    expect(document.body.querySelector(".s-theme-menu")).toBeNull();
+  });
+
+  it("closeMenu is a no-op while the menu is closed", async () => {
+    const { container, toggle } = mountToggleWithRef();
+    await settle();
+
+    expect(() => toggle().closeMenu()).not.toThrow();
+    await settle();
+    expect(document.body.querySelector(".s-theme-menu")).toBeNull();
+
+    // The menu still opens normally afterwards.
+    openMenu(container);
+    await settle();
+    expect(document.body.querySelector(".s-theme-menu")).toBeTruthy();
+  });
+});

package/src/components/HkThemeToggle.tsx

@@ -56,6 +56,15 @@ export interface ThemeItemScope {
  * group (before the divider). Mode-adjacent host chrome that is NOT a
  * theme-editor concern lives here (e.g. display-scale control).
  *
+ * `closeMenu()` (setup expose) — programmatic close for host content
+ * living INSIDE the menu (row slot affordances). A host that opens a
+ * delegated second-level window from a row (e.g. a per-theme editor)
+ * calls it to dismiss the menu; the menu is ONE state in both its forms
+ * (desktop popover, mobile bottom sheet), so this closes whichever is
+ * showing — a mobile-aware host decides whether to call it at all, no
+ * automatic close fires from here. InstanceType does not carry
+ * expose() members — type the ref structurally at the consumer.
+ *
  * Color-mode group: the unified HTabs strip in segmented (radiogroup)
  * working mode (Auto | Light | Dark) — same pill chrome as every other
  * group. In AUTO mode the Light/Dark halves merge into the strip's
@@ -84,7 +93,7 @@ export const HkThemeToggle = defineComponent({
     "update:scheme": (_theme: HCustomTheme) => true,
     "open-customize": () => true,
   },
-  setup(props, { emit, slots }) {
+  setup(props, { emit, slots, expose }) {
     const { t } = useI18n();
     const { currentTheme, currentMode, effectiveMode, geo, setTheme, setMode, toggleMode, allThemeList, addCustomTheme, removeCustomTheme, customThemes } = useTheme();
 
@@ -104,6 +113,19 @@ export const HkThemeToggle = defineComponent({
     const triggerRef = ref<HTMLElement | null>(null);
     const schemeDialogOpen = ref(false);
 
+    /** Programmatic close for host content inside the menu (row slot
+     *  affordances): a host opening a delegated second-level window from
+     *  a theme row calls this to dismiss the menu. The menu is ONE state
+     *  in both its forms — desktop popover and mobile bottom sheet — so
+     *  this closes whichever is showing, with no breakpoint branching
+     *  here; a mobile-aware host decides whether to call it at all.
+     *  Same teardown as every internal close — the alt-timer cleanup
+     *  rides the menuOpen watcher. */
+    function closeMenu() {
+      menuOpen.value = false;
+    }
+    expose({ closeMenu });
+
     // ── Solar-altitude readout (auto-mode merged cell) ──────────────
     // `geo` comes from the theme clock (timezone estimate until the real
     // fix lands) — the engine and this readout share one resolution.
@@ -189,7 +211,7 @@ export const HkThemeToggle = defineComponent({
 
     function onSelectTheme(id: ThemeId) {
       setTheme(id);
-      menuOpen.value = false;
+      closeMenu();
     }
 
     function onConfirmScheme(theme: HCustomTheme) {
@@ -334,7 +356,7 @@ export const HkThemeToggle = defineComponent({
               type="button"
               class="s-theme-item-btn s-theme-item-customize"
               onClick={() => {
-                menuOpen.value = false;
+                closeMenu();
                 if (props.externalCustomize) {
                   emit("open-customize");
                 } else {