@celestia-island/hikari 0.49.3 → 0.49.5

package/package.json

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

package/src/components/HkDatePicker.test.ts

@@ -393,7 +393,7 @@ describe("HkDatePicker", () => {
     await nextTick();
     panel()?.querySelector<HTMLButtonElement>(".hk-dp-title-btn")?.click();
     await settle();
-    expect(panel()?.querySelector<HTMLButtonElement>(".hk-dp-title-btn")?.textContent).toBe("2026");
+    await waitForTitle("2026");
     const navs = () => panel()?.querySelectorAll<HTMLButtonElement>(".hk-dp-nav");
     navs()?.[1].click();
     await nextTick();
@@ -413,23 +413,36 @@ describe("HkDatePicker", () => {
     const stage = panel()?.querySelector<HTMLElement>(".hk-dp-stage");
     expect(stage).not.toBeNull();
     expect(stage?.children.length).toBe(1); // the single days pane
+    const pickCount = () =>
+      stage?.querySelectorAll<HTMLButtonElement>(".hk-dp-cell[data-variant='pick']").length ?? 0;
+    // Destination state = the entering pane mounted AND the leaving pane
+    // gone; mid-transition both conditions half-hold.
+    const settledDrill = (days: boolean) => (): boolean =>
+      days
+        ? stage?.children.length === 1 &&
+          stage?.querySelectorAll<HTMLButtonElement>(".hk-dp-cell:not([data-variant])").length === 42
+        : pickCount() === 12 && stage?.children.length === 1;
     panel()?.querySelector<HTMLButtonElement>(".hk-dp-title-btn")?.click();
     await settle();
+    await waitForView("the months grid settled to one pane", settledDrill(false));
     expect(panel()?.querySelector<HTMLElement>(".hk-dp-stage")).toBe(stage);
     expect(stage?.getAttribute("data-dir")).toBe("fwd");
     expect(stage?.children.length).toBe(1); // one pane at a time after settle
-    expect(stage?.querySelectorAll<HTMLButtonElement>(".hk-dp-cell[data-variant='pick']").length).toBe(12);
+    expect(pickCount()).toBe(12);
     panel()?.querySelector<HTMLButtonElement>(".hk-dp-title-btn")?.click();
     await settle();
+    await waitForView("the years grid settled to one pane", settledDrill(false));
     expect(stage?.getAttribute("data-dir")).toBe("fwd");
-    expect(stage?.querySelectorAll<HTMLButtonElement>(".hk-dp-cell[data-variant='pick']").length).toBe(12);
+    expect(pickCount()).toBe(12);
     // back steps down the stack one level at a time: years → months → days.
     panel()?.querySelector<HTMLButtonElement>(".hk-dp-back")?.click();
     await settle();
+    await waitForView("the months grid again, one pane", settledDrill(false));
     expect(stage?.getAttribute("data-dir")).toBe("back");
-    expect(stage?.querySelectorAll<HTMLButtonElement>(".hk-dp-cell[data-variant='pick']").length).toBe(12);
+    expect(pickCount()).toBe(12);
     panel()?.querySelector<HTMLButtonElement>(".hk-dp-back")?.click();
     await settle();
+    await waitForView("the days grid settled to one pane", settledDrill(true));
     expect(stage?.getAttribute("data-dir")).toBe("back");
     expect(stage?.querySelectorAll<HTMLButtonElement>(".hk-dp-cell:not([data-variant])").length).toBe(42);
   });

package/src/components/HkDateTimePicker.test.ts

@@ -83,6 +83,20 @@ async function waitForTitle(expected: string): Promise<void> {
   }
 }
 
+/** The pick cells of the drilled months view (exactly 12 once mounted). */
+function pickCells(): HTMLButtonElement[] {
+  return Array.from(picker()?.querySelectorAll<HTMLButtonElement>(".hk-dtp-cell[data-variant='pick']") ?? []);
+}
+
+/** Generic state poll over the same drill race: wait until `probe` holds. */
+async function waitForView(desc: string, probe: () => boolean): Promise<void> {
+  const deadline = Date.now() + 2000;
+  while (!probe()) {
+    if (Date.now() > deadline) throw new Error(`view never reached: ${desc}`);
+    await new Promise((r) => setTimeout(r, 10));
+  }
+}
+
 function picker(): HTMLElement | null {
   return document.querySelector<HTMLElement>(".hk-dtp");
 }
@@ -178,6 +192,10 @@ describe("HkDateTimePicker", () => {
     const monthBtn = picker()?.querySelectorAll<HTMLButtonElement>(".hk-dtp-title-btn")[0];
     monthBtn?.click();
     await settle();
+    // Destination state = the months pane mounted AND the leaving days
+    // pane gone — mid-transition both conditions half-hold.
+    await waitForView("the months grid settled to one pane", () =>
+      pickCells().length === 12 && picker()?.querySelectorAll(".hk-dtp-cell").length === 12);
     const cells = Array.from(picker()?.querySelectorAll<HTMLElement>(".hk-dtp-cell") ?? [])
       .map((c) => c.textContent ?? "");
     const expected = Array.from({ length: 12 }, (_, i) =>
@@ -196,6 +214,7 @@ describe("HkDateTimePicker", () => {
     const monthBtn = picker()?.querySelectorAll<HTMLButtonElement>(".hk-dtp-title-btn")[0];
     monthBtn?.click();
     await settle();
+    await waitForView("the months grid", () => pickCells().length === 12);
     expect(stage?.getAttribute("data-dir")).toBe("fwd");
     expect(picker()?.querySelector<HTMLElement>(".hk-dtp-stage")).toBe(stage);
     expect(stage?.children.length).toBe(1); // one pane at a time after settle
@@ -205,8 +224,9 @@ describe("HkDateTimePicker", () => {
     expect(picker()?.querySelectorAll(".hk-dtp-step").length).toBe(2);
     picker()?.querySelector<HTMLButtonElement>(".hk-dtp-back")?.click();
     await settle();
+    await waitForView("the days grid settled to one pane", () =>
+      dayCells().length === 42 && stage?.children.length === 1);
     expect(stage?.getAttribute("data-dir")).toBe("back");
-    expect(dayCells().length).toBe(42);
   });
 
   it("shifts the year with the chevrons inside the month view", async () => {
@@ -229,7 +249,8 @@ describe("HkDateTimePicker", () => {
     const monthBtn = picker()?.querySelectorAll<HTMLButtonElement>(".hk-dtp-title-btn")[0];
     monthBtn?.click();
     await settle();
-    expect(picker()?.querySelectorAll<HTMLButtonElement>(".hk-dtp-cell[data-variant='pick']").length).toBe(12);
+    await waitForView("the months grid", () => pickCells().length === 12);
+    expect(pickCells().length).toBe(12);
     // The first step button is "Hour +"; bumping it changes only the time
     // part of the model, which must not yank the view back to days.
     const upBtn = picker()?.querySelector<HTMLButtonElement>(".hk-dtp-step-btn");

package/src/components/HkModal.scss

@@ -118,32 +118,43 @@
     will-change: transform, opacity, clip-path;
   }
 
+  // Close: the whole frame fades and drifts down as ONE piece — the
+  // unveil's clip does NOT re-run on close. Re-clipping first made the
+  // bottom band (usually the footer) vanish at the very first frame of
+  // the close while the rest was still on screen, which read as broken
+  // (user report 2026-09-14).
   .hk-modal-content-leave-active {
     transition:
       opacity var(--hk-modal-duration, 0.25s)
         var(--hk-modal-ease-in, cubic-bezier(0.4, 0, 1, 1)),
       transform var(--hk-modal-duration, 0.25s)
-        var(--hk-modal-ease-in, cubic-bezier(0.4, 0, 1, 1)),
-      clip-path var(--hk-modal-duration, 0.25s)
         var(--hk-modal-ease-in, cubic-bezier(0.4, 0, 1, 1));
-    will-change: transform, opacity, clip-path;
+    will-change: transform, opacity;
   }
 
-  .hk-modal-content-enter-from,
-  .hk-modal-content-leave-to {
+  .hk-modal-content-enter-from {
     opacity: 0;
     transform: translate(-50%, -50%) translateY(5%);
     clip-path: inset(0 0 10% 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
                                  var(--hk-modal-radius, var(--radius-lg, 12px)));
   }
 
-  .hk-modal-content-enter-to,
-  .hk-modal-content-leave-from {
+  .hk-modal-content-enter-to {
     opacity: 1;
     transform: translate(-50%, -50%);
     clip-path: inset(0 0 0 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
                               var(--hk-modal-radius, var(--radius-lg, 12px)));
   }
+
+  .hk-modal-content-leave-from {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+
+  .hk-modal-content-leave-to {
+    opacity: 0;
+    transform: translate(-50%, -50%) translateY(5%);
+  }
 }
 
 // ------