@celestia-island/hikari 0.54.10 → 0.55.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.54.10",
+  "version": "0.55.1",
   "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.tsx

@@ -19,6 +19,7 @@ import { createBackGuard } from "../runtime/backStack";
 import { attachOverlayScrollbars, type OverlayScrollbarHandle } from "../composables/useOverlayScrollbar";
 import { useSurfaceTransition } from "../composables/useSurfaceTransition";
 import { useSurfaceMachine } from "../composables/useSurfaceMachine";
+import { useSurfaceContentHold } from "../composables/useSurfaceContentHold";
 import HIconButton from "./HkIconButton";
 import HIcon from "./HkIcon";
 import "./window-close.scss";
@@ -269,6 +270,8 @@ export default defineComponent({
       cleanup();
     });
 
+    const contentHold = useSurfaceContentHold(machine.phase);
+
     return () => {
       if (!machine.mounted.value) return null;
       const panelPrefix = `hk-drawer-${props.side}`;
@@ -295,7 +298,11 @@ export default defineComponent({
                 else if (e.key === "Tab" && panelRef.value) trapFocus(panelRef.value, e);
               }}
             >
-              {props.title || slots.header ? (
+              {/* Same close-fold content hold as HkModal: the sheet's
+                  slide-away plays over the last live content even when
+                  the consumer tears its state down on close. */}
+              {contentHold.hold(() => [
+              props.title || slots.header ? (
                 <div class="hk-drawer-header">
                   {slots.header ? (
                     slots.header()
@@ -314,13 +321,14 @@ export default defineComponent({
                     </HIconButton>
                   ) : null}
                 </div>
-              ) : null}
+              ) : null,
               <div ref={bodyWrapRef} class="hk-drawer-body-wrap">
                 <div ref={bodyRef} class="hk-drawer-body">{slots.default?.()}</div>
-              </div>
-              {slots.footer ? (
+              </div>,
+              slots.footer ? (
                 <div class="hk-drawer-footer">{slots.footer()}</div>
-              ) : null}
+              ) : null,
+              ])}
             </div>
       </Teleport>
       );