@celestia-island/hikari 0.50.4 → 0.51.2

package/package.json

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

package/src/components/HkModal.scss

@@ -31,7 +31,7 @@
   // handle hasn't resolved yet — zIndex briefly starts at 0).
   z-index: 0;
   background: var(--hk-modal-overlay-bg, rgba(0, 0, 0, 0.45));
-  backdrop-filter: var(--hk-modal-overlay-blur, blur(6px));
+  backdrop-filter: var(--hk-modal-overlay-blur, blur(3px));
   pointer-events: auto;
 }
 
@@ -40,10 +40,10 @@
 // viewport in place, never sliding or scaling with the content frame.
 @include sf.scrim-fade(
   "hk-modal-overlay",
-  $enter-duration: var(--hk-modal-duration, 0.3s),
-  $enter-ease: var(--hk-modal-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
-  $leave-duration: var(--hk-modal-duration, 0.3s),
-  $leave-ease: var(--hk-modal-ease-in, cubic-bezier(0.4, 0, 1, 1))
+  $enter-duration: var(--hk-modal-duration, 0.42s),
+  $enter-ease: var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1)),
+  $leave-duration: var(--hk-modal-duration, 0.42s),
+  $leave-ease: var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1))
 );
 
 // ------
@@ -72,7 +72,7 @@
     height var(--duration-fast, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
     max-height var(--duration-fast, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
   background: var(--hk-modal-bg, var(--hi-color-surface, rgba(240,244,248,0.95)));
-  backdrop-filter: var(--hk-modal-blur, blur(12px));
+  backdrop-filter: var(--hk-modal-blur, none);
   border: 1px solid var(--hk-modal-border-color, var(--hi-color-border, rgba(100,100,100,0.08)));
   border-radius: var(--hk-modal-radius, var(--radius-lg, 12px));
   box-shadow:
@@ -109,12 +109,12 @@
 @media (min-width: 768px) {
   .hk-modal-content-enter-active {
     transition:
-      opacity var(--hk-modal-duration, 0.3s)
-        var(--hk-modal-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
-      transform var(--hk-modal-duration, 0.3s)
-        var(--hk-modal-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
-      clip-path var(--hk-modal-duration, 0.3s)
-        var(--hk-modal-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
+      opacity var(--hk-modal-duration, 0.42s)
+        var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1)),
+      transform var(--hk-modal-duration, 0.42s)
+        var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1)),
+      clip-path var(--hk-modal-duration, 0.42s)
+        var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1));
     will-change: transform, opacity, clip-path;
   }
 
@@ -125,16 +125,11 @@
   // (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));
+      opacity var(--hk-modal-duration, 0.32s)
+        var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1)),
+      transform var(--hk-modal-duration, 0.32s)
+        var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1));
     will-change: transform, opacity;
-    // Collapse toward the frame's own top edge: the height shrink reads as
-    // the box folding upward (the unveil's reverse), not as a centered
-    // shrink — and the top-of-content (header) keeps its anchor while the
-    // rest eases down and out with the fade.
-    transform-origin: 50% 0;
   }
 
   .hk-modal-content-enter-from {
@@ -153,12 +148,12 @@
 
   .hk-modal-content-leave-from {
     opacity: 1;
-    transform: translate(-50%, -50%) scaleY(1);
+    transform: translate(-50%, -50%);
   }
 
   .hk-modal-content-leave-to {
     opacity: 0;
-    transform: translate(-50%, -50%) scaleY(0.9);
+    transform: translate(-50%, -50%) translateY(5%);
   }
 }
 
@@ -445,17 +440,17 @@
   // Sheet slide reveal replaces the height-clip reveal on mobile.
   .hk-modal-content-enter-active {
     transition:
-      opacity var(--hk-modal-duration, 0.3s) ease-out,
-      transform var(--hk-modal-duration, 0.3s)
-        var(--hk-modal-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
+      opacity var(--hk-modal-duration, 0.42s) ease-out,
+      transform var(--hk-modal-duration, 0.42s)
+        var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1));
     will-change: transform, opacity;
   }
 
   .hk-modal-content-leave-active {
     transition:
-      opacity var(--hk-modal-duration, 0.25s) ease-in,
-      transform var(--hk-modal-duration, 0.25s)
-        var(--hk-modal-ease-in, cubic-bezier(0.4, 0, 1, 1));
+      opacity var(--hk-modal-duration, 0.32s) ease-in,
+      transform var(--hk-modal-duration, 0.32s)
+        var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1));
     will-change: transform, opacity;
   }
 
@@ -474,13 +469,8 @@
     padding: 0.625rem 1rem 0.625rem;
   }
 
-  // The gutter contract retunes here too — the covers and the inner's
-  // padding both consume the vars, so one override moves both.
-  .hk-modal-body {
-    --hk-scroll-pad-top: 1rem;
-    --hk-scroll-pad-right: 1rem;
-    --hk-scroll-pad-bottom: 1rem;
-    --hk-scroll-pad-left: 1rem;
+  .hk-modal-body-inner {
+    padding: 1rem;
   }
 
   // Lift the desktop 70vh body cap on phones: with a docked sheet the cap
@@ -491,6 +481,13 @@
   // scrolls, and the footer always sits on the sheet's bottom edge.
   .hk-modal-body {
     max-height: none;
+
+    // The gutter contract retunes here too — the covers and the inner's
+    // padding both consume the vars, so one override moves both.
+    --hk-scroll-pad-top: 1rem;
+    --hk-scroll-pad-right: 1rem;
+    --hk-scroll-pad-bottom: 1rem;
+    --hk-scroll-pad-left: 1rem;
   }
 
   .hk-modal-footer {

package/src/styles/index.scss

@@ -21,6 +21,7 @@
 // import them granularly only for legacy compositions. The previous
 // version of this file re-exported packages/theme + packages/components
 // through paths that escape the npm package and did not compile.
+@use "./reset.scss";
 @use "./theme/channels.scss";
 @use "./theme/scale.scss";
 @use "./admin-tokens.scss";

package/src/styles/reset.scss

@@ -0,0 +1,60 @@
+/* ── Host reset (L2) ────────────────────────────────────────────────────
+ * The base normalization every hikari host needs and none of them should
+ * have to hand-roll. Component sheets self-declare their critical box
+ * geometry (`.hk-input-element`'s border-box, borders, appearance), but
+ * the wrappers and the native controls they contain still inherit the
+ * UA's default typography chain — measured 2026-09-14 in the flasher on
+ * hikari 0.49: without a host reset the sign-in fields render ~100px
+ * (min-height 2.5rem plus UA line-height/font inflation of the in-flow
+ * content), with one exactly ~40px. The chest webui historically rode
+ * UnoCSS with preflight planned around it; hosts without a utility
+ * layer had nothing. This sheet is that nothing: preflight-equivalent,
+ * token-aware, and part of the canonical composition (index.scss).
+ *
+ * Order: FIRST in the composition. It only ever lowers UA defaults;
+ * component sheets and host styles override it by specificity/order. */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: rgb(var(--color-border, 120 120 120) / 40%);
+}
+
+html {
+  line-height: 1.5;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif);
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  line-height: inherit;
+  color: inherit;
+  background: none;
+}
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  cursor: pointer;
+}
+
+img,
+svg,
+canvas {
+  display: block;
+  max-width: 100%;
+}

package/src/styles/resetSheet.test.ts

@@ -0,0 +1,43 @@
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { describe, expect, it } from "vitest";
+
+/**
+ * Host-reset composition guard.
+ *
+ * reset.scss is the base normalization every hikari host needs (measured
+ * 2026-09-14 in the flasher: without it the UA typography chain inflates
+ * the component wrappers — sign-in fields ~100px vs ~40px with it). Hosts
+ * that historically rode a utility-layer preflight (chest: UnoCSS, with
+ * preflight later disabled) no longer need a hand-rolled equivalent.
+ *
+ * The contract under test: the canonical composition (index.scss) loads
+ * the reset FIRST, and the reset actually normalizes the native control
+ * typography chain — the exact rules the flasher regression hinged on.
+ */
+
+const stylesDir = resolve(dirname(fileURLToPath(import.meta.url)));
+
+function read(path: string): string {
+  return readFileSync(resolve(stylesDir, path), "utf8").replace(/\r\n/g, "\n");
+}
+
+describe("host reset sheet", () => {
+  it("loads first in the canonical composition", () => {
+    const index = read("index.scss");
+    const first = index.match(/^@use "([^"]+)";/m)?.[1];
+    expect(first).toBe("./reset.scss");
+  });
+
+  it("normalizes the native control typography chain", () => {
+    const reset = read("reset.scss");
+    for (const selector of ["button,", "input,", "textarea"]) {
+      expect(reset).toContain(selector);
+    }
+    expect(reset).toContain("font: inherit");
+    expect(reset).toContain("line-height: inherit");
+    expect(reset).toContain("box-sizing: border-box");
+  });
+});