@khipu/design-system 0.3.5-alpha.5 → 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.
Files changed (6) hide show
  1. package/dist/beercss/khipu-beercss.css +1 -1
  2. package/dist/beercss/khipu-beercss.scoped.css +1 -1
  3. package/dist/beercss/metadata.json +5 -5
  4. package/dist/index.js +20 -11
  5. package/dist/index.mjs +20 -11
  6. package/package.json +1 -1
package/dist/beercss/khipu-beercss.css CHANGED
@@ -13,7 +13,7 @@
13
13
  *
14
14
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
15
15
  * Source: design-system/src/tokens/tokens.json
16
- * Generated: 2026-08-13T18:35:56.760Z
16
+ * Generated: 2026-08-14T15:36:49.015Z
17
17
  *
18
18
  * To regenerate:
19
19
  * cd design-system && npm run tokens:generate
package/dist/beercss/khipu-beercss.scoped.css CHANGED
@@ -15,7 +15,7 @@
15
15
  *
16
16
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
17
17
  * Source: design-system/src/tokens/tokens.json
18
- * Generated: 2026-08-13T18:35:56.760Z
18
+ * Generated: 2026-08-14T15:36:49.015Z
19
19
  *
20
20
  * To regenerate:
21
21
  * cd design-system && npm run tokens:generate
package/dist/beercss/metadata.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@khipu/design-system/beercss",
3
- "version": "0.3.5-alpha.5",
3
+ "version": "0.3.5-alpha.7",
4
4
  "description": "Khipu BeerCSS bundle with Material Design 3 and Khipu customizations",
5
- "buildDate": "2026-08-13T18:35:59.338Z",
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.5/dist/beercss/khipu-beercss.min.css",
23
- "cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.5/dist/beercss/khipu-beercss.scoped.min.css",
24
- "js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.5/dist/beercss/khipu-beercss.min.js"
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
@@ -219,10 +219,22 @@ function useCardHeightTransition() {
219
219
  return;
220
220
  }
221
221
  const observers = [];
222
- const animate = (card, from, to) => card.animate(
223
- [{ height: `${from}px` }, { height: `${to}px` }],
224
- { duration: CARD_TRANSITION_MS, easing: "ease-out" }
225
- );
222
+ const animate = (card, from, to) => {
223
+ card.style.height = `${from}px`;
224
+ const animation = card.animate(
225
+ [{ height: `${from}px` }, { height: `${to}px` }],
226
+ { duration: CARD_TRANSITION_MS, easing: "ease-out" }
227
+ );
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
+ }
234
+ card.style.height = "";
235
+ return void 0;
236
+ });
237
+ };
226
238
  const observe = (card) => {
227
239
  if (card.getAttribute(CARD_MARK_ATTRIBUTE) === "on") {
228
240
  return;
@@ -236,10 +248,9 @@ function useCardHeightTransition() {
236
248
  const from = Number(remembered);
237
249
  if (Number.isFinite(from) && from > 0 && Math.abs(from - previous) >= CARD_MIN_DELTA_PX) {
238
250
  animating = true;
239
- animate(card, from, previous).finished.then(() => {
240
- animating = false;
241
- }).catch(() => {
251
+ animate(card, from, previous).then(() => {
242
252
  animating = false;
253
+ previous = card.offsetHeight;
243
254
  });
244
255
  }
245
256
  }
@@ -255,15 +266,13 @@ function useCardHeightTransition() {
255
266
  return;
256
267
  }
257
268
  animating = true;
258
- const animation = animate(card, previous, next);
269
+ const from = previous;
259
270
  previous = next;
260
271
  screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(next));
261
- animation.finished.then(() => {
272
+ animate(card, from, next).then(() => {
262
273
  animating = false;
263
274
  previous = card.offsetHeight;
264
275
  screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(previous));
265
- }).catch(() => {
266
- animating = false;
267
276
  });
268
277
  });
269
278
  observer.observe(card);
package/dist/index.mjs CHANGED
@@ -91,10 +91,22 @@ function useCardHeightTransition() {
91
91
  return;
92
92
  }
93
93
  const observers = [];
94
- const animate = (card, from, to) => card.animate(
95
- [{ height: `${from}px` }, { height: `${to}px` }],
96
- { duration: CARD_TRANSITION_MS, easing: "ease-out" }
97
- );
94
+ const animate = (card, from, to) => {
95
+ card.style.height = `${from}px`;
96
+ const animation = card.animate(
97
+ [{ height: `${from}px` }, { height: `${to}px` }],
98
+ { duration: CARD_TRANSITION_MS, easing: "ease-out" }
99
+ );
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
+ }
106
+ card.style.height = "";
107
+ return void 0;
108
+ });
109
+ };
98
110
  const observe = (card) => {
99
111
  if (card.getAttribute(CARD_MARK_ATTRIBUTE) === "on") {
100
112
  return;
@@ -108,10 +120,9 @@ function useCardHeightTransition() {
108
120
  const from = Number(remembered);
109
121
  if (Number.isFinite(from) && from > 0 && Math.abs(from - previous) >= CARD_MIN_DELTA_PX) {
110
122
  animating = true;
111
- animate(card, from, previous).finished.then(() => {
112
- animating = false;
113
- }).catch(() => {
123
+ animate(card, from, previous).then(() => {
114
124
  animating = false;
125
+ previous = card.offsetHeight;
115
126
  });
116
127
  }
117
128
  }
@@ -127,15 +138,13 @@ function useCardHeightTransition() {
127
138
  return;
128
139
  }
129
140
  animating = true;
130
- const animation = animate(card, previous, next);
141
+ const from = previous;
131
142
  previous = next;
132
143
  screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(next));
133
- animation.finished.then(() => {
144
+ animate(card, from, next).then(() => {
134
145
  animating = false;
135
146
  previous = card.offsetHeight;
136
147
  screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(previous));
137
- }).catch(() => {
138
- animating = false;
139
148
  });
140
149
  });
141
150
  observer.observe(card);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khipu/design-system",
3
- "version": "0.3.5-alpha.5",
3
+ "version": "0.3.5-alpha.7",
4
4
  "description": "Khipu Design System - UI components and design tokens for the Khipu payment platform",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",