@celestia-island/hikari 0.49.1 → 0.49.3

package/package.json

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

@@ -56,18 +56,18 @@
   z-index: 1;
   top: 50%;
   left: 50%;
+  // The centering translate is part of EVERY transform state — the
+  // enter/leave choreography scales on top of it and must never re-seat
+  // the frame.
   transform: translate(-50%, -50%);
-  interpolate-size: allow-keywords;
   width: 100%;
   // Size changes animate instead of snapping: `height: auto` growth
   // cannot fire a CSS transition (verified in Chromium — neither auto
   // nor calc-size(auto, size) changes its computed value on content
-  // growth, even under interpolate-size), so HkModal's useSizeMorph
-  // measures the frame's natural (capped) height and pins it as px on
-  // every content change — the transition below animates old→new px.
-  // `interpolate-size: allow-keywords` stays for the enter/leave height
-  // choreography's calc-size() keywords. The enter/leave classes below
-  // override this transition during open/close, as they always have.
+  // growth), so HkModal's useSizeMorph measures the frame's natural
+  // (capped) height and pins it as px on every content change — the
+  // transition below animates old→new px. Both pinned values are
+  // explicit px, so this needs no interpolate-size keyword support.
   transition:
     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));
@@ -86,49 +86,64 @@
 }
 
 // ------
-// Content enter/leave transitions
+// Content enter/leave transitions (desktop ≥768px)
 //
-// Height-clipped reveal: the frame grows from 80% of its
-// natural height to full height while fading in. Content
-// children are pinned at natural size (not squashed) —
-// overflow: hidden on the frame clips the viewport.
+// Height-style unveil WITHOUT layout: the visible box starts at 90% of
+// its height and grows to 100% while the frame settles from a +5% offset
+// back to rest (user spec 2026-09-14). Numbers line up so the character
+// of the old height-grow reveal is preserved exactly:
+//   t=0  box [center−0.45h, center+0.45h] shifted +0.05h, bottom 10%
+//        clipped → visible [center−0.40h, center+0.40h] (the old 80%
+//        centered start);
+//   t=1  clip 0, offset 0 → visible [center−0.50h, center+0.50h];
+//   the bottom edge is pinned at its final line the whole time and the
+//   top edge sweeps up 0.1h — content rides rigidly (never squashed).
+// Implemented with transform (translate) + clip-path (inset) + opacity:
+// all compositor/paint-level, zero layout per frame — the previous
+// height-keyword reveal re-laid-out the entire modal subtree every frame
+// and re-filtered the frame's own backdrop blur per frame (visible frame
+// drops on content-heavy modals, chest history topic detail). Scoped to
+// ≥768px; ≤767px keeps the sheet's translateY choreography below.
 // ------
 
-.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)),
-    height var(--hk-modal-duration, 0.3s)
-      var(--hk-modal-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
-  will-change: height, opacity;
-}
-
-.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)),
-    height var(--hk-modal-duration, 0.25s)
-      var(--hk-modal-ease-in, cubic-bezier(0.4, 0, 1, 1));
-  will-change: height, opacity;
-}
+@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));
+    will-change: transform, opacity, clip-path;
+  }
 
-// Pin children to natural flex-basis during animation so the
-// frame's overflow: hidden does the clipping, not flex-shrink.
-.hk-modal-content-enter-active > *,
-.hk-modal-content-leave-active > * {
-  flex: 0 0 auto;
-}
+  .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;
+  }
 
-.hk-modal-content-enter-from,
-.hk-modal-content-leave-to {
-  opacity: 0;
-  height: calc-size(auto, size * 0.8);
-}
+  .hk-modal-content-enter-from,
+  .hk-modal-content-leave-to {
+    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 {
-  opacity: 1;
-  height: auto;
+  .hk-modal-content-enter-to,
+  .hk-modal-content-leave-from {
+    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)));
+  }
 }
 
 // ------

package/src/components/HkModal.tsx

@@ -344,7 +344,8 @@ export default defineComponent({
           surfTrack.cancel();
           onAfterEnter();
           // Size morphs arm once the open choreography finished —
-          // pinning during enter would override its height reveal.
+          // pinning during enter would fight the reveal's transform
+          // transition.
           morph.start();
         } else if (to === "closingFrom") {
           // Close-request bookkeeping (was the watcher's close arm): the