@celestia-island/hikari 0.49.2 → 0.49.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/HkModal.scss +52 -36
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@celestia-island/hikari",
3
- "version": "0.49.2",
3
+ "version": "0.49.3",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",
package/src/components/HkModal.scss CHANGED
@@ -86,48 +86,64 @@
86
86
  }
87
87
 
88
88
  // ------
89
- // Content enter/leave transitions
89
+ // Content enter/leave transitions (desktop ≥768px)
90
90
  //
91
- // Compositor-driven pop: the frame fades and scales 0.94 → 1 — transform
92
- // and opacity ONLY, no layout properties. The previous desktop reveal
93
- // animated `height` (calc-size keywords): height is a layout property, so
94
- // every animation frame re-laid-out the entire modal subtree — for a
95
- // content-heavy modal (a full graph stage, long report bodies) that is
96
- // visible frame drops through the whole open/close, made worse by the
97
- // frame's own backdrop-filter whose sampling region then also changed per
98
- // frame. transform/opacity run on the compositor: zero layout, zero
99
- // paint, and the blurred surface keeps a constant region. Mirrors the
100
- // mobile sheet's translateY reveal, which has always been transform-based.
91
+ // Height-style unveil WITHOUT layout: the visible box starts at 90% of
92
+ // its height and grows to 100% while the frame settles from a +5% offset
93
+ // back to rest (user spec 2026-09-14). Numbers line up so the character
94
+ // of the old height-grow reveal is preserved exactly:
95
+ // t=0 box [center−0.45h, center+0.45h] shifted +0.05h, bottom 10%
96
+ // clipped → visible [center−0.40h, center+0.40h] (the old 80%
97
+ // centered start);
98
+ // t=1 clip 0, offset 0 → visible [center−0.50h, center+0.50h];
99
+ // the bottom edge is pinned at its final line the whole time and the
100
+ // top edge sweeps up 0.1h — content rides rigidly (never squashed).
101
+ // Implemented with transform (translate) + clip-path (inset) + opacity:
102
+ // all compositor/paint-level, zero layout per frame — the previous
103
+ // height-keyword reveal re-laid-out the entire modal subtree every frame
104
+ // and re-filtered the frame's own backdrop blur per frame (visible frame
105
+ // drops on content-heavy modals, chest history topic detail). Scoped to
106
+ // ≥768px; ≤767px keeps the sheet's translateY choreography below.
101
107
  // ------
102
108
 
103
- .hk-modal-content-enter-active {
104
- transition:
105
- opacity var(--hk-modal-duration, 0.3s)
106
- var(--hk-modal-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
107
- transform var(--hk-modal-duration, 0.3s)
108
- var(--hk-modal-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
109
- will-change: transform, opacity;
110
- }
109
+ @media (min-width: 768px) {
110
+ .hk-modal-content-enter-active {
111
+ transition:
112
+ opacity var(--hk-modal-duration, 0.3s)
113
+ var(--hk-modal-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
114
+ transform var(--hk-modal-duration, 0.3s)
115
+ var(--hk-modal-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
116
+ clip-path var(--hk-modal-duration, 0.3s)
117
+ var(--hk-modal-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
118
+ will-change: transform, opacity, clip-path;
119
+ }
111
120
 
112
- .hk-modal-content-leave-active {
113
- transition:
114
- opacity var(--hk-modal-duration, 0.25s)
115
- var(--hk-modal-ease-in, cubic-bezier(0.4, 0, 1, 1)),
116
- transform var(--hk-modal-duration, 0.25s)
117
- var(--hk-modal-ease-in, cubic-bezier(0.4, 0, 1, 1));
118
- will-change: transform, opacity;
119
- }
121
+ .hk-modal-content-leave-active {
122
+ transition:
123
+ opacity var(--hk-modal-duration, 0.25s)
124
+ var(--hk-modal-ease-in, cubic-bezier(0.4, 0, 1, 1)),
125
+ transform var(--hk-modal-duration, 0.25s)
126
+ var(--hk-modal-ease-in, cubic-bezier(0.4, 0, 1, 1)),
127
+ clip-path var(--hk-modal-duration, 0.25s)
128
+ var(--hk-modal-ease-in, cubic-bezier(0.4, 0, 1, 1));
129
+ will-change: transform, opacity, clip-path;
130
+ }
120
131
 
121
- .hk-modal-content-enter-from,
122
- .hk-modal-content-leave-to {
123
- opacity: 0;
124
- transform: translate(-50%, -50%) scale(0.94);
125
- }
132
+ .hk-modal-content-enter-from,
133
+ .hk-modal-content-leave-to {
134
+ opacity: 0;
135
+ transform: translate(-50%, -50%) translateY(5%);
136
+ clip-path: inset(0 0 10% 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
137
+ var(--hk-modal-radius, var(--radius-lg, 12px)));
138
+ }
126
139
 
127
- .hk-modal-content-enter-to,
128
- .hk-modal-content-leave-from {
129
- opacity: 1;
130
- transform: translate(-50%, -50%) scale(1);
140
+ .hk-modal-content-enter-to,
141
+ .hk-modal-content-leave-from {
142
+ opacity: 1;
143
+ transform: translate(-50%, -50%);
144
+ clip-path: inset(0 0 0 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
145
+ var(--hk-modal-radius, var(--radius-lg, 12px)));
146
+ }
131
147
  }
132
148
 
133
149
  // ------