@celestia-island/hikari 0.54.8 → 0.55.0

package/package.json

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

package/src/DemoApp.tsx

@@ -8,7 +8,7 @@ import { utf8ToBase64 } from "./utils/base64";
 import {
   HButton, HIconButton, HIconButtonGroup, HTooltip, HBadge, HTag, HIcon, HSpinner,
   HProgressBar, HProgressRing, HGaugeRing,
-  HInput, HSearchInput, HNumberInput, HPasswordInput, HTextarea,
+  HInput, HSearchInput, HNumberInput, HTextarea,
   HFileField,
   HFilePickerField,
   type PickedFile, type RemoteFsAdapter,
@@ -360,13 +360,15 @@ export default defineComponent({
         </section>
 
         <section>
-          <h2>HInput / HSearchInput / HNumberInput / HPasswordInput / HTextarea</h2>
+          <h2>HInput (text / password) / HSearchInput / HNumberInput / HTextarea</h2>
           <div class="form-grid">
             <HInput modelValue={form.value.text} onUpdate:modelValue={(v: string) => (form.value.text = v)} placeholder="Text input" />
             <HInput modelValue={form.value.text} onUpdate:modelValue={(v: string) => (form.value.text = v)} placeholder="Disabled" disabled />
             <HSearchInput modelValue={form.value.search} onUpdate:modelValue={(v: string | number) => (form.value.search = String(v))} placeholder="Search..." />
             <HNumberInput modelValue={form.value.number} onUpdate:modelValue={(v: number) => (form.value.number = v)} placeholder="Number" />
-            <HPasswordInput modelValue={form.value.password} onUpdate:modelValue={(v: string) => (form.value.password = v)} placeholder="Password" />
+            <HInput variant="password" modelValue={form.value.password} onUpdate:modelValue={(v: string) => (form.value.password = v)} placeholder="Password (hold the eye)" />
+            <HInput variant="password" passwordTrailing="strength" modelValue={form.value.password} onUpdate:modelValue={(v: string) => (form.value.password = v)} placeholder="Password (strength light)" />
+            <HInput variant="password" passwordTrailing="none" modelValue={form.value.password} onUpdate:modelValue={(v: string) => (form.value.password = v)} placeholder="Password (no affordance)" />
             <HTextarea modelValue={form.value.textarea} onUpdate:modelValue={(v: string) => (form.value.textarea = v)} placeholder="Textarea" rows={3} />
           </div>
           {anyForm.value ? <p class="result">Form: {anyForm.value}</p> : null}

package/src/animation/registerAnimations.ts

@@ -82,9 +82,9 @@ registerCssAnimation("hk-skeleton-shimmer", { infinite: true });
 registerCssAnimation("hk-image-preview-shimmer", { infinite: true });
 // components/HkProgressBar.scss — indeterminate bar sweep (loops forever).
 registerCssAnimation("hk-progress-indeterminate", { infinite: true });
-// components/HkPasswordInput.scss — caps-lock warning flash (plays once).
+// components/HkPasswordSurface.scss — caps-lock warning flash (plays once).
 registerCssAnimation("hk-pwd-flash");
-// components/HkPasswordInput.scss — breathing hint glow (loops forever).
+// components/HkPasswordSurface.scss — breathing hint glow (loops forever).
 registerCssAnimation("hk-pwd-breathe", { infinite: true });
 // components/HkPickerPane.scss — date/time picker view drill forward
 // (plays once, shared by HkDatePicker and HkDateTimePicker).

package/src/components/HkDrawer.test.tsx

@@ -2,6 +2,7 @@ import { afterEach, describe, expect, it } from "vitest";
 import { createApp, defineComponent, h, nextTick, ref } from "vue";
 
 import HkDrawer from "./HkDrawer";
+import { usePopupManager } from "../runtime/usePopupManager";
 
 const mounts: ReturnType<typeof createApp>[] = [];
 const containers: HTMLElement[] = [];
@@ -89,3 +90,59 @@ describe("HkDrawer back-guard (window-first back priority)", () => {
     app.unmount();
   });
 });
+
+describe("HkDrawer window-stack close channel", () => {
+  function mount(open: { value: boolean }, closable: boolean, title: string) {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(HkDrawer, {
+            modelValue: open.value,
+            closable,
+            title,
+            "onUpdate:modelValue": (v: boolean) => { open.value = v; },
+          }, { default: () => h("div", "content") });
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+    return app;
+  }
+
+  it("closes through the popup manager when the stack navigates back", async () => {
+    const manager = usePopupManager();
+    const below = manager.register("modal", true, "Below");
+    try {
+      const open = ref(true);
+      mount(open, true, "Details");
+      await nextTick();
+
+      expect(manager.closeAbove(below.id)).toBe(1);
+      await nextTick();
+      expect(open.value).toBe(false);
+    } finally {
+      manager.unregister(below.id);
+    }
+  });
+
+  it("cannot close a non-closable drawer", async () => {
+    const manager = usePopupManager();
+    const below = manager.register("modal", true, "Below");
+    try {
+      const open = ref(true);
+      mount(open, false, "Locked");
+      await nextTick();
+
+      // Asked, but the drawer refuses — exactly as it does for Escape.
+      expect(manager.closeAbove(below.id)).toBe(1);
+      await nextTick();
+      expect(open.value).toBe(true);
+    } finally {
+      manager.unregister(below.id);
+    }
+  });
+});

package/src/components/HkDrawer.tsx

@@ -126,7 +126,12 @@ export default defineComponent({
           // Register with the drawer title so the modal-stack breadcrumb
           // labels this layer by name — a drawer is a window on every
           // form factor and must never fall back to a generic label.
-          handle.value = manager.register("drawer", true, props.title);
+          // Close channel for the modal-stack breadcrumb (see
+          // usePopupManager): the drawer owns its dismissal, and a
+          // non-closable drawer refuses like it does for Escape.
+          handle.value = manager.register("drawer", true, props.title, false, () => {
+            if (props.closable) close();
+          });
           overlayHook.open();
           previouslyFocused = document.activeElement as HTMLElement | null;
           if (backGuardEnabled() && backGuard.entries === 0) {