@celestia-island/hikari 0.40.27 → 0.40.29

package/package.json

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

package/src/animation/registerAnimations.ts

@@ -103,3 +103,20 @@ registerCssAnimation("s-voice-wave-bounce", { infinite: true });
 // components/HkPlaceholderMarquee.scss — overflowing placeholder sweep
 // (loops forever; pure CSS, loop geometry on inline custom properties).
 registerCssAnimation("hk-placeholder-marquee-scroll", { infinite: true });
+// styles/theme/mixins.scss — ambient/glow pulses (loop forever) and the
+// one-shot entrance/exit grammar, vendored byte-identical from
+// packages/theme. #353 brought the file under src/ without registering
+// its keyframes — the parity test caught the gap 6 days later.
+registerCssAnimation("pulse", { infinite: true });
+registerCssAnimation("ambient-move", { infinite: true });
+registerCssAnimation("pulse-glow-animation", { infinite: true });
+registerCssAnimation("expand-horizontal");
+registerCssAnimation("collapse-vertical");
+registerCssAnimation("slide-in-left");
+registerCssAnimation("slide-in-right");
+registerCssAnimation("slide-in-top");
+registerCssAnimation("slide-in-bottom");
+registerCssAnimation("fade-in-scale");
+registerCssAnimation("fade-out-scale");
+registerCssAnimation("blur-in");
+registerCssAnimation("bounce-in");

package/src/components/HkAffixPicker.test.tsx

@@ -281,7 +281,6 @@ describe("HkAffixPicker", () => {
       .find((b) => !b.classList.contains("hk-message-box-confirm"))!
       .click();
     await flush();
-    console.log("DBG-cancel openEvents", JSON.stringify(events.open), "tags", tags().length, "box", !!document.body.querySelector(".hk-message-box-text"));
     expect(events.remove).toHaveLength(0);
     expect(tag("China")).toBeTruthy();
     // Second pass: the dialog's Confirm is what erases.

package/src/components/HkDatePicker.scss

@@ -136,6 +136,18 @@
   color: var(--hi-color-text-primary);
 }
 
+/* Mobile sheet context (#424 centered-cap pattern): the calendar keeps its
+ * designed measure inside the viewport-wide sheet instead of left-gluing
+ * at the anchored popover's min-width. Safe to stretch: the stage pins
+ * only its height (HkPickerPane.scss) and the day/month grids use 1fr
+ * tracks, so nothing fixed fights width: 100%. */
+.hk-popover-panel.hk-is-sheet .hk-dp-panel {
+  min-width: 0;
+  max-width: min(22rem, 100%);
+  margin-inline: auto;
+  width: 100%;
+}
+
 .hk-dp-header {
   display: grid;
   grid-template-columns: 1fr auto 1fr;

package/src/components/HkDatePicker.sheet.test.ts

@@ -0,0 +1,56 @@
+/**
+ * Source contract for the date/datetime picker mobile sheet docking
+ * (2026-09-08 mobile audit deferred item, family contract completion):
+ * HkDatePicker and HkDateTimePicker were the last anchored surfaces that
+ * never docked as bottom sheets on phones — on non-native touch hosts
+ * (nativeOnMobile=false) their calendars opened as tiny trigger-anchored
+ * popovers while every other popover-family window docked. Both pickers
+ * must pass sheetOnMobile to HPopover (the native path returns before the
+ * popover renders, so this is inherently non-native-touch-only) and cap
+ * their panels with the #424 centered-cap pattern inside the sheet.
+ */
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const read = (name: string) => readFileSync(join(here, name), "utf-8");
+/* Fixed window from the opening tag — a non-greedy `[\s\S]*?>` would stop
+ * at the `=>` inside the onUpdate prop's inline arrow. */
+const popoverTag = (src: string) => {
+  const at = src.indexOf("<HPopover");
+  return at < 0 ? "" : src.slice(at, at + 700);
+};
+
+describe("date picker mobile sheet family contract", () => {
+  it("HkDatePicker opts its calendar popover into mobile sheet docking", () => {
+    const popover = popoverTag(read("HkDatePicker.tsx"));
+    expect(popover).toContain("sheetOnMobile");
+  });
+
+  it("HkDateTimePicker opts its popup popover into mobile sheet docking", () => {
+    const popover = popoverTag(read("HkDateTimePicker.tsx"));
+    expect(popover).toContain("sheetOnMobile");
+  });
+
+  it("HkDatePicker caps the calendar panel with the #424 centered-cap pattern", () => {
+    const src = read("HkDatePicker.scss");
+    const block = src.match(/\.hk-popover-panel\.hk-is-sheet \.hk-dp-panel\s*\{[^}]*\}/)?.[0] ?? "";
+    expect(block).toContain("min-width: 0");
+    expect(block).toContain("max-width: min(22rem, 100%)");
+    expect(block).toContain("margin-inline: auto");
+    expect(block).toContain("width: 100%");
+  });
+
+  it("HkDateTimePicker caps the popup panel and lifts the body floor in the sheet", () => {
+    const src = read("HkDateTimePicker.scss");
+    const popup = src.match(/\.hk-popover-panel\.hk-is-sheet \.hk-dtp-popup\s*\{[^}]*\}/)?.[0] ?? "";
+    expect(popup).toContain("min-width: 0");
+    expect(popup).toContain("max-width: min(22rem, 100%)");
+    expect(popup).toContain("margin-inline: auto");
+    expect(popup).toContain("width: 100%");
+    const body = src.match(/\.hk-popover-panel\.hk-is-sheet \.hk-dtp\s*\{[^}]*\}/)?.[0] ?? "";
+    expect(body).toContain("min-width: 0");
+  });
+});

package/src/components/HkDatePicker.tsx

@@ -539,6 +539,10 @@ export default defineComponent({
             placement="bottom-start"
             offset={6}
             backdrop={false}
+            sheetOnMobile
+            // The calendar docks as a bottom sheet on non-native touch
+            // hosts (nativeOnMobile=false); the native path returns
+            // before this popover ever renders.
             title={t("hikari::datePicker.pickDate")}
             class="hk-dp-popover"
           >

package/src/components/HkDateTimePicker.scss

@@ -331,6 +331,23 @@
   min-width: 260px;
 }
 
+/* Mobile sheet context (#424 centered-cap pattern): the popup wrapper is
+ * the sheet's direct content child, so it takes the centered cap; the
+ * .hk-dtp body root already fills via width: 100% and only needs its
+ * 17.5rem floor lifted so narrow sheets never overflow. The stage pins
+ * height only (HkPickerPane.scss) and the grids use 1fr tracks, so
+ * stretching fights no fixed geometry. */
+.hk-popover-panel.hk-is-sheet .hk-dtp-popup {
+  min-width: 0;
+  max-width: min(22rem, 100%);
+  margin-inline: auto;
+  width: 100%;
+}
+
+.hk-popover-panel.hk-is-sheet .hk-dtp {
+  min-width: 0;
+}
+
 .hk-dtp-popup-foot {
   display: flex;
   justify-content: flex-end;

package/src/components/HkDateTimePicker.tsx

@@ -578,6 +578,10 @@ export default defineComponent({
             anchorRef={triggerWrapRef.value ?? null}
             placement={props.placement}
             offset={props.offset}
+            sheetOnMobile
+            // The popup docks as a bottom sheet on non-native touch hosts
+            // (nativeOnMobile=false); the native path returns before this
+            // popover ever renders.
             title={t("hikari::dateTimePicker.pickDate")}
           >
             <div class="hk-dtp-popup">