@khipu/design-system 0.3.5-alpha.6 → 0.3.5-alpha.7
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.
- package/dist/beercss/khipu-beercss.css +1 -1
- package/dist/beercss/khipu-beercss.scoped.css +1 -1
- package/dist/beercss/metadata.json +5 -5
- package/dist/index.js +12 -11
- package/dist/index.mjs +12 -11
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khipu/design-system/beercss",
|
|
3
|
-
"version": "0.3.5-alpha.
|
|
3
|
+
"version": "0.3.5-alpha.7",
|
|
4
4
|
"description": "Khipu BeerCSS bundle with Material Design 3 and Khipu customizations",
|
|
5
|
-
"buildDate": "2026-08-14T15:
|
|
5
|
+
"buildDate": "2026-08-14T15:36:51.847Z",
|
|
6
6
|
"includes": {
|
|
7
7
|
"beercss": "4.0.1",
|
|
8
8
|
"khipu-tokens": "latest",
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
},
|
|
20
20
|
"scopeClass": ".kds-theme-root",
|
|
21
21
|
"cdn": {
|
|
22
|
-
"css": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.
|
|
23
|
-
"cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.
|
|
24
|
-
"js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.
|
|
22
|
+
"css": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.7/dist/beercss/khipu-beercss.min.css",
|
|
23
|
+
"cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.7/dist/beercss/khipu-beercss.scoped.min.css",
|
|
24
|
+
"js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.7/dist/beercss/khipu-beercss.min.js"
|
|
25
25
|
}
|
|
26
26
|
}
|
package/dist/index.js
CHANGED
|
@@ -225,11 +225,15 @@ function useCardHeightTransition() {
|
|
|
225
225
|
[{ height: `${from}px` }, { height: `${to}px` }],
|
|
226
226
|
{ duration: CARD_TRANSITION_MS, easing: "ease-out" }
|
|
227
227
|
);
|
|
228
|
-
|
|
228
|
+
return animation.finished.catch(() => void 0).then(() => {
|
|
229
|
+
const current = parseFloat(card.style.height) || card.offsetHeight;
|
|
230
|
+
const natural = card.scrollHeight;
|
|
231
|
+
if (Math.abs(natural - current) >= CARD_MIN_DELTA_PX) {
|
|
232
|
+
return animate(card, current, natural);
|
|
233
|
+
}
|
|
229
234
|
card.style.height = "";
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
return animation;
|
|
235
|
+
return void 0;
|
|
236
|
+
});
|
|
233
237
|
};
|
|
234
238
|
const observe = (card) => {
|
|
235
239
|
if (card.getAttribute(CARD_MARK_ATTRIBUTE) === "on") {
|
|
@@ -244,10 +248,9 @@ function useCardHeightTransition() {
|
|
|
244
248
|
const from = Number(remembered);
|
|
245
249
|
if (Number.isFinite(from) && from > 0 && Math.abs(from - previous) >= CARD_MIN_DELTA_PX) {
|
|
246
250
|
animating = true;
|
|
247
|
-
animate(card, from, previous).
|
|
248
|
-
animating = false;
|
|
249
|
-
}).catch(() => {
|
|
251
|
+
animate(card, from, previous).then(() => {
|
|
250
252
|
animating = false;
|
|
253
|
+
previous = card.offsetHeight;
|
|
251
254
|
});
|
|
252
255
|
}
|
|
253
256
|
}
|
|
@@ -263,15 +266,13 @@ function useCardHeightTransition() {
|
|
|
263
266
|
return;
|
|
264
267
|
}
|
|
265
268
|
animating = true;
|
|
266
|
-
const
|
|
269
|
+
const from = previous;
|
|
267
270
|
previous = next;
|
|
268
271
|
screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(next));
|
|
269
|
-
|
|
272
|
+
animate(card, from, next).then(() => {
|
|
270
273
|
animating = false;
|
|
271
274
|
previous = card.offsetHeight;
|
|
272
275
|
screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(previous));
|
|
273
|
-
}).catch(() => {
|
|
274
|
-
animating = false;
|
|
275
276
|
});
|
|
276
277
|
});
|
|
277
278
|
observer.observe(card);
|
package/dist/index.mjs
CHANGED
|
@@ -97,11 +97,15 @@ function useCardHeightTransition() {
|
|
|
97
97
|
[{ height: `${from}px` }, { height: `${to}px` }],
|
|
98
98
|
{ duration: CARD_TRANSITION_MS, easing: "ease-out" }
|
|
99
99
|
);
|
|
100
|
-
|
|
100
|
+
return animation.finished.catch(() => void 0).then(() => {
|
|
101
|
+
const current = parseFloat(card.style.height) || card.offsetHeight;
|
|
102
|
+
const natural = card.scrollHeight;
|
|
103
|
+
if (Math.abs(natural - current) >= CARD_MIN_DELTA_PX) {
|
|
104
|
+
return animate(card, current, natural);
|
|
105
|
+
}
|
|
101
106
|
card.style.height = "";
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
return animation;
|
|
107
|
+
return void 0;
|
|
108
|
+
});
|
|
105
109
|
};
|
|
106
110
|
const observe = (card) => {
|
|
107
111
|
if (card.getAttribute(CARD_MARK_ATTRIBUTE) === "on") {
|
|
@@ -116,10 +120,9 @@ function useCardHeightTransition() {
|
|
|
116
120
|
const from = Number(remembered);
|
|
117
121
|
if (Number.isFinite(from) && from > 0 && Math.abs(from - previous) >= CARD_MIN_DELTA_PX) {
|
|
118
122
|
animating = true;
|
|
119
|
-
animate(card, from, previous).
|
|
120
|
-
animating = false;
|
|
121
|
-
}).catch(() => {
|
|
123
|
+
animate(card, from, previous).then(() => {
|
|
122
124
|
animating = false;
|
|
125
|
+
previous = card.offsetHeight;
|
|
123
126
|
});
|
|
124
127
|
}
|
|
125
128
|
}
|
|
@@ -135,15 +138,13 @@ function useCardHeightTransition() {
|
|
|
135
138
|
return;
|
|
136
139
|
}
|
|
137
140
|
animating = true;
|
|
138
|
-
const
|
|
141
|
+
const from = previous;
|
|
139
142
|
previous = next;
|
|
140
143
|
screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(next));
|
|
141
|
-
|
|
144
|
+
animate(card, from, next).then(() => {
|
|
142
145
|
animating = false;
|
|
143
146
|
previous = card.offsetHeight;
|
|
144
147
|
screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(previous));
|
|
145
|
-
}).catch(() => {
|
|
146
|
-
animating = false;
|
|
147
148
|
});
|
|
148
149
|
});
|
|
149
150
|
observer.observe(card);
|
package/package.json
CHANGED