@celestia-island/hikari 0.55.144 → 0.55.145

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.144",
+  "version": "0.55.145",
   "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

@@ -194,7 +194,7 @@ describe("HkDatePicker", () => {
   });
 
   it("disables days outside the inclusive min/max bounds", async () => {
-    const p = mountPicker({ modelValue: "2026-08-16", min: "2026-08-10", max: "2026-08-20" });
+    const p = mountPicker({ modelValue: "2026-08-16", min: "2026-08-10", max: "2026-08-20", nativeOnMobile: true });
     openViaEnter(p);
     await nextTick();
     const byDay = new Map(
@@ -453,22 +453,12 @@ describe("HkDatePicker", () => {
     expect(stage?.querySelectorAll<HTMLButtonElement>(".hk-dp-cell:not([data-variant])").length).toBe(42);
   });
 
-  // ── Mobile pass-through to the native OS control ────────────────
+  // ── Mobile: the CALENDAR is the default; the native input is the
+  // ── explicit opt-out (2026-10-11 direction: no native controls) ──
 
-  it("renders a native date input instead of the calendar on mobile", () => {
+  it("keeps the calendar on mobile by default (no native input)", async () => {
     useMobileViewport();
     const p = mountPicker({ modelValue: "2026-08-16" });
-    const input = nativeInput(p.container);
-    expect(input).not.toBeNull();
-    expect(input?.type).toBe("date");
-    expect(input?.value).toBe("2026-08-16");
-    expect(p.container.querySelector(".hk-dp-trigger")).toBeNull();
-    expect(p.container.querySelector(".hk-dp-panel")).toBeNull();
-  });
-
-  it("keeps the custom calendar on mobile when nativeOnMobile is false", async () => {
-    useMobileViewport();
-    const p = mountPicker({ modelValue: "2026-08-16", nativeOnMobile: false });
     expect(p.container.querySelector(".hk-dp-trigger")).not.toBeNull();
     expect(nativeInput(p.container)).toBeNull();
     openViaEnter(p);
@@ -479,17 +469,28 @@ describe("HkDatePicker", () => {
     expect(panel()?.classList.contains("is-touch")).toBe(true);
   });
 
-  it("passes min/max through to the native input", () => {
+  it("renders a native date input on mobile only when nativeOnMobile opts in", () => {
+    useMobileViewport();
+    const p = mountPicker({ modelValue: "2026-08-16", nativeOnMobile: true });
+    const input = nativeInput(p.container);
+    expect(input).not.toBeNull();
+    expect(input?.type).toBe("date");
+    expect(input?.value).toBe("2026-08-16");
+    expect(p.container.querySelector(".hk-dp-trigger")).toBeNull();
+    expect(p.container.querySelector(".hk-dp-panel")).toBeNull();
+  });
+
+  it("passes min/max through to the native input (explicit opt-in)", () => {
     useMobileViewport();
-    const p = mountPicker({ modelValue: "2026-08-16", min: "2026-08-10", max: "2026-08-20" });
+    const p = mountPicker({ modelValue: "2026-08-16", min: "2026-08-10", max: "2026-08-20", nativeOnMobile: true });
     const input = nativeInput(p.container);
     expect(input?.min).toBe("2026-08-10");
     expect(input?.max).toBe("2026-08-20");
   });
 
-  it("native input edits emit the ISO date and clearing emits null", async () => {
+  it("native input edits emit the ISO date and clearing emits null (explicit opt-in)", async () => {
     useMobileViewport();
-    const p = mountPicker({ modelValue: "2026-08-16" });
+    const p = mountPicker({ modelValue: "2026-08-16", nativeOnMobile: true });
     const input = nativeInput(p.container);
     input!.value = "2026-08-20";
     input!.dispatchEvent(new Event("input", { bubbles: true }));
@@ -503,9 +504,9 @@ describe("HkDatePicker", () => {
     expect(p.emitted).toEqual(["2026-08-20", null]);
   });
 
-  it("native input edits outside the bounds are rejected and re-synced", async () => {
+  it("native input edits outside the bounds are rejected and re-synced (explicit opt-in)", async () => {
     useMobileViewport();
-    const p = mountPicker({ modelValue: "2026-08-16", max: "2026-08-20" });
+    const p = mountPicker({ modelValue: "2026-08-16", max: "2026-08-20", nativeOnMobile: true });
     const input = nativeInput(p.container);
     input!.value = "2026-09-01";
     input!.dispatchEvent(new Event("input", { bubbles: true }));

package/src/components/HkDatePicker.tsx

@@ -73,8 +73,12 @@ export default defineComponent({
     min: { type: String as PropType<string | undefined>, default: undefined },
     /** Inclusive upper bound as an ISO date; later days render disabled. */
     max: { type: String as PropType<string | undefined>, default: undefined },
-    /** Render the OS native `<input type="date">` on touch-sized viewports. */
-    nativeOnMobile: { type: Boolean, default: true },
+    /** Render the OS native `<input type="date">` on touch-sized viewports.
+     *  DEFAULTS FALSE since 2026-10-11 (user direction: no native controls
+     *  anywhere) — the calendar serves phones as a bottom sheet with the
+     *  enlarged touch chrome. The prop stays for one-off hosts that truly
+     *  want the OS picker; new callers should not set it. */
+    nativeOnMobile: { type: Boolean, default: false },
   },
   emits: {
     "update:modelValue": (_value: string | null) => true,

package/src/components/HkDateTimePicker.test.ts

@@ -324,11 +324,12 @@ describe("HkDateTimePicker", () => {
     expect(document.querySelectorAll(".hk-dtp-popup .hk-dtp-cell").length).toBe(42);
   });
 
-  // ── Mobile pass-through to the native OS control ────────────────
+  // ── Mobile: the calendar is the default; native is the explicit ──
+  // ── opt-out (2026-10-11 direction: no native controls) ───────────
 
-  it("renders a native datetime-local input instead of the calendar on mobile", () => {
+  it("renders a native datetime-local input on mobile only when nativeOnMobile opts in", () => {
     useMobileViewport();
-    const p = mountPicker();
+    const p = mountPicker({ nativeOnMobile: true });
     const input = nativeInput(p.container);
     expect(input).not.toBeNull();
     expect(input?.type).toBe("datetime-local");
@@ -337,9 +338,9 @@ describe("HkDateTimePicker", () => {
     expect(p.container.querySelector(".hk-dtp-grid")).toBeNull();
   });
 
-  it("uses a native date input when showTime is false", () => {
+  it("uses a native date input when showTime is false (explicit opt-in)", () => {
     useMobileViewport();
-    const p = mountPicker({ showTime: false });
+    const p = mountPicker({ showTime: false, nativeOnMobile: true });
     const input = nativeInput(p.container);
     expect(input?.type).toBe("date");
     expect(input?.value).toBe(isoDay(BASE));
@@ -347,15 +348,15 @@ describe("HkDateTimePicker", () => {
 
   it("passes min/max through to the native input in its wire format", () => {
     useMobileViewport();
-    const p = mountPicker({ min: dayOf(10, 8, 0), max: dayOf(20, 18, 30) });
+    const p = mountPicker({ min: dayOf(10, 8, 0), max: dayOf(20, 18, 30), nativeOnMobile: true });
     const input = nativeInput(p.container);
     expect(input?.min).toBe(isoMinute(dayOf(10, 8, 0)));
     expect(input?.max).toBe(isoMinute(dayOf(20, 18, 30)));
   });
 
-  it("keeps the custom calendar on mobile when nativeOnMobile is false", () => {
+  it("keeps the custom calendar on mobile by default", () => {
     useMobileViewport();
-    const p = mountPicker({ nativeOnMobile: false });
+    const p = mountPicker();
     expect(p.container.querySelector(".hk-dtp")).not.toBeNull();
     expect(dayCells().length).toBe(42);
     expect(nativeInput(p.container)).toBeNull();
@@ -365,7 +366,7 @@ describe("HkDateTimePicker", () => {
 
   it("native input edits update the model as a local-time Date", async () => {
     useMobileViewport();
-    const p = mountPicker();
+    const p = mountPicker({ nativeOnMobile: true });
     const input = nativeInput(p.container);
     input!.value = isoMinute(dayOf(20, 14, 5));
     input!.dispatchEvent(new Event("input", { bubbles: true }));
@@ -377,7 +378,7 @@ describe("HkDateTimePicker", () => {
 
   it("native date edits preserve the clock time when showTime is false", async () => {
     useMobileViewport();
-    const p = mountPicker({ showTime: false });
+    const p = mountPicker({ showTime: false, nativeOnMobile: true });
     const input = nativeInput(p.container);
     input!.value = isoDay(dayOf(20));
     input!.dispatchEvent(new Event("input", { bubbles: true }));
@@ -387,7 +388,7 @@ describe("HkDateTimePicker", () => {
 
   it("native input edits outside the bounds are rejected and re-synced", async () => {
     useMobileViewport();
-    const p = mountPicker({ max: dayOf(20, 23, 59) });
+    const p = mountPicker({ max: dayOf(20, 23, 59), nativeOnMobile: true });
     const input = nativeInput(p.container);
     // Next month, past the max bound.
     input!.value = isoMinute(new Date(BASE.getFullYear(), BASE.getMonth() + 1, 1, 10, 0));
@@ -399,7 +400,7 @@ describe("HkDateTimePicker", () => {
 
   it("clearing the native input falls back to the model value", async () => {
     useMobileViewport();
-    const p = mountPicker();
+    const p = mountPicker({ nativeOnMobile: true });
     const input = nativeInput(p.container);
     input!.value = "";
     input!.dispatchEvent(new Event("input", { bubbles: true }));
@@ -408,9 +409,9 @@ describe("HkDateTimePicker", () => {
     expect(input?.value).toBe(isoMinute(BASE));
   });
 
-  it("native input replaces even the popup chrome on mobile", () => {
+  it("native input replaces even the popup chrome on mobile (explicit opt-in)", () => {
     useMobileViewport();
-    const p = mountPicker({ mode: "popup", confirmLabel: "Confirm" });
+    const p = mountPicker({ mode: "popup", confirmLabel: "Confirm", nativeOnMobile: true });
     expect(nativeInput(p.container)).not.toBeNull();
     expect(p.container.querySelector(".hk-dtp-trigger")).toBeNull();
   });

package/src/components/HkDateTimePicker.tsx

@@ -95,7 +95,7 @@ export default defineComponent({
     confirmLabel: { type: String, default: undefined },
     showTime: { type: Boolean, default: true },
     /** Render the OS native `<input type="datetime-local">` on touch-sized viewports. */
-    nativeOnMobile: { type: Boolean, default: true },
+    nativeOnMobile: { type: Boolean, default: false }, // 2026-10-11: no native controls — the picker sheet serves phones
   },
   emits: {
     "update:modelValue": (_d: Date) => true,

package/src/components/HkFilterBar.tsx

@@ -99,6 +99,7 @@ export default defineComponent({
               anchorRef={anchorRef.value}
               placement={props.placement}
               offset={6}
+              sheetOnMobile
               title={label}
             >
               <div class="hk-filter-bar-panel" data-testid="hk-filter-bar-panel">

package/src/components/HkFilterPanel.tsx

@@ -1,5 +1,6 @@
 import { computed, defineComponent, type PropType } from "vue";
 
+import HkDatePicker from "./HkDatePicker";
 import HkInput from "./HkInput";
 import HkPopupSelect, { type HkPopupSelectOption } from "./HkPopupSelect";
 import { useI18n } from "../i18n/context";
@@ -168,9 +169,20 @@ export default defineComponent({
                       disabled={props.disabled}
                       options={selectOptions(field)}
                     />
+                  ) : field.kind === "date" ? (
+                    // The calendar picker — never the OS native input
+                    // (2026-10-11 direction); the wire format is the same
+                    // ISO YYYY-MM-DD the native input spoke.
+                    <HkDatePicker
+                      modelValue={condition.value || null}
+                      onUpdate:modelValue={(v: string | null) =>
+                        emitCondition(field, { value: v ?? "" })
+                      }
+                      disabled={props.disabled}
+                    />
                   ) : (
                     <HkInput
-                      type={field.kind === "date" ? "date" : "text"}
+                      type="text"
                       variant={field.kind === "number" ? "number" : "text"}
                       modelValue={condition.value}
                       onUpdate:modelValue={(v: string) =>