@aviala-design/spiral 0.0.2 → 0.2.0

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 (10) hide show
  1. package/LICENSE +20 -20
  2. package/dist/index.cjs +2925 -904
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +1750 -759
  5. package/dist/index.d.ts +1750 -759
  6. package/dist/index.js +2757 -716
  7. package/dist/index.js.map +1 -1
  8. package/dist/props.json +1754 -0
  9. package/dist/styles.css +349 -142
  10. package/package.json +9 -6
package/dist/styles.css CHANGED
@@ -1,16 +1,16 @@
1
1
  /* Generated from ALD base-numbers — do not edit by hand */
2
2
  :root {
3
- --size-tiny: 10px;
4
- --size-small: 12px;
5
- --size-regular: 14px;
6
- --size-middle: 16px;
7
- --size-big: 20px;
8
- --size-semilarge: 22px;
9
- --size-semilarger: 24px;
10
- --size-large: 26px;
11
- --size-huge: 30px;
12
- --size-huger: 34px;
13
- --size-max: 38px;
3
+ --size-tiny: 0.625rem;
4
+ --size-small: 0.75rem;
5
+ --size-regular: 0.875rem;
6
+ --size-middle: 1rem;
7
+ --size-big: 1.25rem;
8
+ --size-semilarge: 1.375rem;
9
+ --size-semilarger: 1.5rem;
10
+ --size-large: 1.625rem;
11
+ --size-huge: 1.875rem;
12
+ --size-huger: 2.125rem;
13
+ --size-max: 2.375rem;
14
14
  --gap-none: 0px;
15
15
  --gap-inside: 4px;
16
16
  --gap-inside-space: 6px;
@@ -30,15 +30,15 @@
30
30
  --border-thickness-default: 1px;
31
31
  --border-thickness-middle: 2px;
32
32
  --border-thickness-large: 3px;
33
- --line-height-tiny: 12px;
34
- --line-height-small: 16px;
35
- --line-height-regular: 18px;
36
- --line-height-middle: 22px;
37
- --line-height-big: 30px;
38
- --line-height-semilarge: 34px;
39
- --line-height-large: 46px;
40
- --line-height-huge: 52px;
41
- --line-height-max: 44px;
33
+ --line-height-tiny: 0.75rem;
34
+ --line-height-small: 1rem;
35
+ --line-height-regular: 1.125rem;
36
+ --line-height-middle: 1.375rem;
37
+ --line-height-big: 1.875rem;
38
+ --line-height-semilarge: 2.125rem;
39
+ --line-height-large: 2.875rem;
40
+ --line-height-huge: 3.25rem;
41
+ --line-height-max: 2.75rem;
42
42
  --padding-none: 0px;
43
43
  --padding-min: 2px;
44
44
  --padding-tinyer: 3px;
@@ -56,17 +56,17 @@
56
56
  --transparency-placeholder: 0.6;
57
57
  }
58
58
  [data-density="mobile-friendly"] {
59
- --size-tiny: 12px;
60
- --size-small: 16px;
61
- --size-regular: 18px;
62
- --size-middle: 20px;
63
- --size-big: 20px;
64
- --size-semilarge: 22px;
65
- --size-semilarger: 24px;
66
- --size-large: 26px;
67
- --size-huge: 30px;
68
- --size-huger: 34px;
69
- --size-max: 38px;
59
+ --size-tiny: 0.75rem;
60
+ --size-small: 1rem;
61
+ --size-regular: 1.125rem;
62
+ --size-middle: 1.25rem;
63
+ --size-big: 1.25rem;
64
+ --size-semilarge: 1.375rem;
65
+ --size-semilarger: 1.5rem;
66
+ --size-large: 1.625rem;
67
+ --size-huge: 1.875rem;
68
+ --size-huger: 2.125rem;
69
+ --size-max: 2.375rem;
70
70
  --gap-none: 0px;
71
71
  --gap-inside: 4px;
72
72
  --gap-inside-space: 6px;
@@ -86,15 +86,15 @@
86
86
  --border-thickness-default: 1px;
87
87
  --border-thickness-middle: 2px;
88
88
  --border-thickness-large: 3px;
89
- --line-height-tiny: 16px;
90
- --line-height-small: 20px;
91
- --line-height-regular: 24px;
92
- --line-height-middle: 26px;
93
- --line-height-big: 30px;
94
- --line-height-semilarge: 34px;
95
- --line-height-large: 46px;
96
- --line-height-huge: 52px;
97
- --line-height-max: 44px;
89
+ --line-height-tiny: 1rem;
90
+ --line-height-small: 1.25rem;
91
+ --line-height-regular: 1.5rem;
92
+ --line-height-middle: 1.625rem;
93
+ --line-height-big: 1.875rem;
94
+ --line-height-semilarge: 2.125rem;
95
+ --line-height-large: 2.875rem;
96
+ --line-height-huge: 3.25rem;
97
+ --line-height-max: 2.75rem;
98
98
  --padding-none: 0px;
99
99
  --padding-min: 2px;
100
100
  --padding-tinyer: 3px;
@@ -165,7 +165,11 @@
165
165
  --card: #242424;
166
166
  --card-foreground: var(--foreground);
167
167
  --popover: var(--card);
168
- --border: var(--border-border-normal-light, #3d3d3d);
168
+ /* Override light :root neutrals — fallbacks alone never win once :root defines the var */
169
+ --border-border-normal-light: #3d3d3d;
170
+ --border-border-normal-primary: #2c2c2c;
171
+ --border-border-theme-light: var(--border-border-normal-light);
172
+ --border: var(--border-border-normal-light);
169
173
  --input: var(--border);
170
174
  --muted: var(--control-control-normal-lightbackground-light, #2a2a2a);
171
175
  --accent: var(--control-control-normal-lightbackground-light, #2a2a2a);
@@ -223,45 +227,45 @@
223
227
  /* noBackgroundCustom — neutral-4 hover, neutral-5 press */
224
228
  --button-no-bg-custom-hover: var(--aviala-neutral-neutral-4, #faf8f8);
225
229
  --button-no-bg-custom-active: var(--aviala-neutral-neutral-5, #f5f3f3);
226
- --button-icon-size: var(--icon-size-text-bigger, var(--size-middle, 16px));
227
- --button-icon-slot-height: var(--line-height-regular, 18px);
230
+ --button-icon-size: var(--icon-size-text-bigger, var(--size-middle, 1rem));
231
+ --button-icon-slot-height: var(--line-height-regular, 1.125rem);
228
232
 
229
233
  /* Button size — padding / line-height / radius (height is content-driven) */
230
234
  --button-tiny-padding-x: var(--padding-tiny, 4px);
231
235
  --button-tiny-padding-y: var(--padding-min, 2px);
232
236
  --button-tiny-radius: var(--border-radius-extra-small-2, 6px);
233
- --button-tiny-line-height: var(--line-height-small, 16px);
234
- --button-tiny-icon-size: var(--icon-size-caption-bigger, var(--size-regular, 14px));
235
- --button-tiny-icon-slot-height: var(--line-height-small, 16px);
237
+ --button-tiny-line-height: var(--line-height-small, 1rem);
238
+ --button-tiny-icon-size: var(--icon-size-caption-bigger, var(--size-regular, 0.875rem));
239
+ --button-tiny-icon-slot-height: var(--line-height-small, 1rem);
236
240
 
237
241
  --button-small-padding-x: var(--padding-small, 6px);
238
242
  --button-small-padding-y: var(--padding-min, 2px);
239
243
  --button-small-radius: var(--border-radius-extra-small-2, 6px);
240
- --button-small-line-height: var(--line-height-regular, 18px);
241
- --button-small-icon-size: var(--icon-size-text-bigger, var(--size-middle, 16px));
242
- --button-small-icon-slot-height: var(--line-height-regular, 18px);
244
+ --button-small-line-height: var(--line-height-regular, 1.125rem);
245
+ --button-small-icon-size: var(--icon-size-text-bigger, var(--size-middle, 1rem));
246
+ --button-small-icon-slot-height: var(--line-height-regular, 1.125rem);
243
247
 
244
248
  --button-regular-padding-x: var(--padding-middle, 10px);
245
249
  --button-regular-padding-y: var(--padding-small, 6px);
246
250
  --button-regular-radius: var(--border-radius-small, 8px);
247
- --button-regular-line-height: var(--line-height-regular, 18px);
248
- --button-regular-icon-size: var(--icon-size-text-bigger, var(--size-middle, 16px));
249
- --button-regular-icon-slot-height: var(--line-height-regular, 18px);
251
+ --button-regular-line-height: var(--line-height-regular, 1.125rem);
252
+ --button-regular-icon-size: var(--icon-size-text-bigger, var(--size-middle, 1rem));
253
+ --button-regular-icon-slot-height: var(--line-height-regular, 1.125rem);
250
254
 
251
255
  --button-big-padding-x: var(--padding-big, 14px);
252
256
  --button-big-padding-y: var(--padding-default, 8px);
253
257
  --button-big-radius: var(--border-radius-small, 8px);
254
- --button-big-line-height: var(--line-height-regular, 18px);
255
- --button-big-icon-size: var(--icon-size-text-bigger, var(--size-middle, 16px));
256
- --button-big-icon-slot-height: var(--line-height-regular, 18px);
258
+ --button-big-line-height: var(--line-height-regular, 1.125rem);
259
+ --button-big-icon-size: var(--icon-size-text-bigger, var(--size-middle, 1rem));
260
+ --button-big-icon-slot-height: var(--line-height-regular, 1.125rem);
257
261
 
258
262
  /* Segmentator — padding / line-height (height is content-driven) */
259
263
  --segmentator-group-padding: var(--padding-min, 2px);
260
264
  --segmentator-group-gap: var(--gap-inside, 4px);
261
265
  --segmentator-group-radius: var(--border-radius-small, 8px);
262
266
  --segmentator-item-gap: var(--gap-inside-space, 6px);
263
- --segmentator-item-line-height: var(--line-height-regular, 18px);
264
- --segmentator-icon-slot-height: var(--line-height-regular, 18px);
267
+ --segmentator-item-line-height: var(--line-height-regular, 1.125rem);
268
+ --segmentator-icon-slot-height: var(--line-height-regular, 1.125rem);
265
269
  --segmentator-item-nested-padding-y: var(--padding-tiny, 4px);
266
270
  --segmentator-item-nested-padding-x: var(--padding-small, 6px);
267
271
  --segmentator-item-nested-radius: var(--border-radius-extra-small-2, 6px);
@@ -270,20 +274,20 @@
270
274
  --segmentator-item-tiled-radius: var(--border-radius-small, 8px);
271
275
 
272
276
  /* Icons component — Figma Components → Icons (level × BiggerSize) */
273
- --icon-size-display: var(--size-max, 38px);
274
- --icon-size-display-bigger: var(--size-max, 38px);
275
- --icon-size-headline1: var(--size-huge, 30px);
276
- --icon-size-headline1-bigger: var(--size-huger, 34px);
277
- --icon-size-headline2: var(--size-large, 26px);
278
- --icon-size-headline2-bigger: var(--size-huge, 30px);
279
- --icon-size-title: var(--size-semilarge, 22px);
280
- --icon-size-title-bigger: var(--size-semilarger, 24px);
281
- --icon-size-subtitle: var(--size-middle, 16px);
282
- --icon-size-subtitle-bigger: var(--size-big, 20px);
283
- --icon-size-text: var(--size-regular, 14px);
284
- --icon-size-text-bigger: var(--size-middle, 16px);
285
- --icon-size-caption: var(--size-small, 12px);
286
- --icon-size-caption-bigger: var(--size-regular, 14px);
277
+ --icon-size-display: var(--size-max, 2.375rem);
278
+ --icon-size-display-bigger: var(--size-max, 2.375rem);
279
+ --icon-size-headline1: var(--size-huge, 1.875rem);
280
+ --icon-size-headline1-bigger: var(--size-huger, 2.125rem);
281
+ --icon-size-headline2: var(--size-large, 1.625rem);
282
+ --icon-size-headline2-bigger: var(--size-huge, 1.875rem);
283
+ --icon-size-title: var(--size-semilarge, 1.375rem);
284
+ --icon-size-title-bigger: var(--size-semilarger, 1.5rem);
285
+ --icon-size-subtitle: var(--size-middle, 1rem);
286
+ --icon-size-subtitle-bigger: var(--size-big, 1.25rem);
287
+ --icon-size-text: var(--size-regular, 0.875rem);
288
+ --icon-size-text-bigger: var(--size-middle, 1rem);
289
+ --icon-size-caption: var(--size-small, 0.75rem);
290
+ --icon-size-caption-bigger: var(--size-regular, 0.875rem);
287
291
 
288
292
  --input-bg-default: var(--control-control-normal-lightbackground-light, #f5f3f3);
289
293
  --input-bg-hover: var(--control-control-normal-background-deep, #e2e0e0);
@@ -308,7 +312,7 @@
308
312
  --input-font-size: var(--typography-text-size);
309
313
  --input-line-height: var(--typography-text-line-height);
310
314
  --input-icon-slot-height: var(--input-line-height);
311
- --input-slot-icon-size: var(--icon-size-text-bigger, var(--size-middle, 16px));
315
+ --input-slot-icon-size: var(--icon-size-text-bigger, var(--size-middle, 1rem));
312
316
 
313
317
  --textarea-min-height-regular: 70px;
314
318
  --textarea-min-height-big: 70px;
@@ -317,8 +321,8 @@
317
321
  --textarea-controller-bg: var(--control-control-normal-lightbackground-light, #f5f3f3);
318
322
  --textarea-counter-fg: var(--text-text-normal-text-caption-black, #858484);
319
323
 
320
- --radio-size: var(--size-big, 20px);
321
- --radio-indicator-size: 8px;
324
+ --radio-size: var(--size-big, 1.25rem);
325
+ --radio-indicator-size: 0.5rem;
322
326
  --radio-bg-unchecked: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
323
327
  --radio-border-unchecked: var(--border-border-normal-light, #e8e6e6);
324
328
  --radio-checked-bg: var(--control-control-theme-background, var(--button-primary-bg));
@@ -339,8 +343,8 @@
339
343
  --select-item-selected-bg: var(--box-box-theme-secondarybackground, #ffdad2);
340
344
  --select-item-selected-fg: var(--text-text-theme-primary-black, #bf2300);
341
345
  --select-item-checked-bg: var(--box-box-theme-lightbackground, #fff3f0);
342
- --select-item-avatar-size: 26px;
343
- --select-item-form-control-size: 20px;
346
+ --select-item-avatar-size: 1.625rem;
347
+ --select-item-form-control-size: 1.25rem;
344
348
  --select-item-subtitle-fg: var(--select-label-fg);
345
349
  --select-item-subtitle-font-size: var(--select-label-font-size);
346
350
  --select-item-subtitle-line-height: var(--select-label-line-height);
@@ -355,8 +359,8 @@
355
359
  --select-item-gap: var(--gap-component-space, 8px);
356
360
  --select-item-px: var(--padding-default, 8px);
357
361
  --select-item-py: var(--padding-tiny, 4px);
358
- --select-item-function-icon-size: var(--icon-size-text-bigger, var(--size-middle, 16px));
359
- --select-item-function-height: var(--line-height-regular, 18px);
362
+ --select-item-function-icon-size: var(--icon-size-text-bigger, var(--size-middle, 1rem));
363
+ --select-item-function-height: var(--line-height-regular, 1.125rem);
360
364
  --select-label-font-size: var(--typography-caption-size);
361
365
  --select-label-line-height: var(--typography-caption-line-height);
362
366
  --select-label-pt: var(--padding-tiny, 4px);
@@ -404,11 +408,11 @@
404
408
  --input-border: var(--input-border-activated);
405
409
  --input-bg: var(--input-bg-activated);
406
410
 
407
- --checkbox-size: var(--size-big, 20px);
411
+ --checkbox-size: var(--size-big, 1.25rem);
408
412
  --checkbox-radius: var(--border-radius-small, 8px);
409
413
  --checkbox-radius-round: var(--border-radius-allround, 99px);
410
- --checkbox-icon-size: 12px;
411
- --checkbox-indeterminate-mark-size: 12px;
414
+ --checkbox-icon-size: 0.75rem;
415
+ --checkbox-indeterminate-mark-size: 0.75rem;
412
416
  --checkbox-indeterminate-mark-radius: var(--border-radius-extra-small-2, 6px);
413
417
  --checkbox-bg-unchecked: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
414
418
  --checkbox-border-unchecked: var(--border-border-normal-primary, #e2e0e0);
@@ -469,6 +473,50 @@
469
473
  --badge-px: var(--padding-tiny, 4px);
470
474
  --badge-radius: var(--border-radius-extra-small-2, 6px);
471
475
  --badge-fg: var(--text-text-normal-text-black, #343333);
476
+ --badge-icon-slot-height: var(--line-height-small, 1rem);
477
+ --badge-icon-size: var(--icon-size-caption, 0.75rem);
478
+
479
+ --avatar-bg: var(--text-text-theme-secondary-black, #ff8368);
480
+ --avatar-fg: var(--text-text-normal-text-black, #343333);
481
+
482
+ --tag-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
483
+ --tag-border: var(--border-border-normal-light, #f5f3f3);
484
+ --tag-fg: var(--text-text-normal-text-caption-black, #858484);
485
+ --tag-gap: var(--padding-tiny, 4px);
486
+ --tag-px: var(--padding-min, 2px);
487
+ --tag-radius: var(--border-radius-extra-small-2, 6px);
488
+ --tag-disabled-opacity: var(--transparency-disable, 0.55);
489
+
490
+ --progress-gap: var(--gap-inside-space, 6px);
491
+ --progress-bar-width: 80px;
492
+ --progress-bar-height: 4px;
493
+ --progress-bar-height-big: 6px;
494
+ --progress-label-width: 22px;
495
+ --progress-label-fg: var(--text-text-normal-text-caption-black, #858484);
496
+ --progress-track-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
497
+ --progress-track-border: var(--border-border-normal-light, #f5f3f3);
498
+ --progress-ring-size: 16px;
499
+
500
+ --scroll-size: 10px;
501
+ --scroll-size-small: 8px;
502
+ --scroll-thumb-bg: var(--control-control-normal-background-deep, #e2e0e0);
503
+ --scroll-track-padding-y: var(--padding-tiny, 4px);
504
+ --scroll-track-padding-x: var(--padding-min, 2px);
505
+ --scroll-thumb-inset: 2px;
506
+ --scroll-thumb-inset-small: 1px;
507
+
508
+ --table-bg: var(--box-box-normal-lightbackground-white, #fdfbfb);
509
+ --table-border: var(--border-border-normal-light, #f5f3f3);
510
+ --table-radius: var(--border-radius-middle, 10px);
511
+ --table-head-height: 38px;
512
+ --table-cell-height: 50px;
513
+ --table-cell-px: var(--padding-big, 14px);
514
+ --table-cell-py: var(--padding-default, 8px);
515
+ --table-cell-gap: var(--gap-component-space, 8px);
516
+ --table-checkbox-col-width: 40px;
517
+ --table-cell-icon-size: var(--icon-size-text-bigger, 1rem);
518
+ --table-head-fg: var(--text-text-normal-text-caption-black, #858484);
519
+ --table-cell-fg: var(--text-text-normal-text-black, #343333);
472
520
 
473
521
  --color-picker-panel-width: 370px;
474
522
  --color-picker-area-height: 160px;
@@ -513,10 +561,10 @@
513
561
  --datepicker-footer-bg: var(--control-normal-lightbackground-light, #f5f3f3);
514
562
  --datepicker-grid-rows: 6;
515
563
  --datepicker-day-height: calc(
516
- var(--padding-min, 2px) * 2 + var(--line-height-line-height-regular, 18px)
564
+ var(--padding-min, 2px) * 2 + var(--line-height-line-height-regular, 1.125rem)
517
565
  );
518
566
  --datepicker-header-height: calc(
519
- var(--padding-tiny, 4px) * 4 + var(--icon-size-text-bigger, var(--size-middle, 16px))
567
+ var(--padding-tiny, 4px) * 4 + var(--icon-size-text-bigger, var(--size-middle, 1rem))
520
568
  );
521
569
  --datepicker-grid-height: calc(
522
570
  var(--datepicker-grid-rows) * var(--datepicker-day-height) +
@@ -566,11 +614,11 @@
566
614
  --modal-footer-bg: var(--modal-content-bg);
567
615
  --modal-footer-gap: var(--gap-content-space, 10px);
568
616
  --modal-footer-actions-gap: var(--gap-component-space, 8px);
569
- --modal-icon-size: var(--size-middle, 16px);
570
- --modal-icon-slot-height: var(--size-semilarge, 22px);
617
+ --modal-icon-size: var(--size-middle, 1rem);
618
+ --modal-icon-slot-height: var(--size-semilarge, 1.375rem);
571
619
  --modal-icon-py: var(--padding-min, 2px);
572
620
  --modal-icon-fg: var(--text-text-infomation-primary-black, #3489c8);
573
- --modal-close-icon-size: var(--size-middle, 16px);
621
+ --modal-close-icon-size: var(--size-middle, 1rem);
574
622
  --modal-close-fg: var(--text-text-normal-text-caption-black, #858484);
575
623
  --modal-description-fg: var(--text-text-normal-text-caption-black, #858484);
576
624
 
@@ -642,8 +690,8 @@
642
690
  --navigation-indicator-width-horizontal: 50px;
643
691
  --navigation-transition-duration: var(--switch-transition-duration, 0.3s);
644
692
  --navigation-transition-easing: cubic-bezier(0.33, 1, 0.68, 1);
645
- --navigation-icon-box: var(--line-height-regular, 18px);
646
- --navigation-icon-size: var(--icon-size-text-bigger, var(--size-middle, 16px));
693
+ --navigation-icon-box: var(--line-height-regular, 1.125rem);
694
+ --navigation-icon-size: var(--icon-size-text-bigger, var(--size-middle, 1rem));
647
695
  --navigation-item-hover-bg: var(--button-no-bg-custom-hover);
648
696
  --navigation-actions-slot-gap: 2px;
649
697
 
@@ -667,10 +715,10 @@
667
715
  --feedback-body-gap: var(--gap-component-space, 8px);
668
716
  --feedback-body-px: var(--padding-middle, 10px);
669
717
  --feedback-body-py: var(--padding-default, 8px);
670
- --feedback-icon-size: var(--size-semilarge, 22px);
718
+ --feedback-icon-size: var(--size-semilarge, 1.375rem);
671
719
  --feedback-icon-slot-height: var(--feedback-icon-size);
672
- --feedback-close-icon-size: var(--size-middle, 16px);
673
- --feedback-close-icon-size-primary: var(--size-regular, 14px);
720
+ --feedback-close-icon-size: var(--size-middle, 1rem);
721
+ --feedback-close-icon-size-primary: var(--size-regular, 0.875rem);
674
722
  --feedback-content-max-width: 480px;
675
723
  --feedback-title-fg-default: var(--text-text-normal-text-black, #343333);
676
724
  --feedback-description-fg-default: var(--text-text-normal-text-caption-black, #858484);
@@ -704,8 +752,8 @@
704
752
  --alert-body-gap: var(--gap-component-space, 8px);
705
753
  --alert-body-px: var(--padding-default, 8px);
706
754
  --alert-body-py: var(--padding-small, 6px);
707
- --alert-icon-size: var(--size-middle, 16px);
708
- --alert-icon-slot-height: var(--line-height-regular, 18px);
755
+ --alert-icon-size: var(--size-middle, 1rem);
756
+ --alert-icon-slot-height: var(--line-height-regular, 1.125rem);
709
757
  --alert-title-fg: var(--text-text-normal-text-black, #343333);
710
758
  --alert-description-fg: var(--text-text-normal-text-caption-black, #858484);
711
759
  --alert-close-fg: var(--text-text-normal-text-caption-black, #858484);
@@ -736,37 +784,158 @@
736
784
  --alert-neutral-icon-fg: var(--text-text-normal-text-caption-black, #858484);
737
785
 
738
786
  /* Keyboard focus ring — Tab focus: ring 12px→3px, flush outer border, 250ms */
739
- --focus-ring-width-start: var(--size-small, 12px);
787
+ --focus-ring-width-start: var(--size-small, 0.75rem);
740
788
  --focus-ring-width-end: var(--border-thickness-large, 3px);
741
789
  --focus-ring-color: var(--ring, var(--border-border-theme-primary, #ff5532));
742
790
  --focus-transition-duration: 250ms;
743
791
  --focus-transition-easing: ease;
792
+
793
+ /* Slider — Figma Information Collect → Slider (384:21584) */
794
+ --slider-width: 70px;
795
+ --slider-track-height: 4px;
796
+ --slider-track-height-big: 6px;
797
+ --slider-thumb-size: 8px;
798
+ --slider-thumb-size-big: 12px;
799
+ --slider-track-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
800
+ --slider-track-border: var(--border-border-normal-primary, #e2e0e0);
801
+ --slider-range-bg: var(--box-box-theme-primarybackground, #ff5532);
802
+ --slider-thumb-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
803
+ --slider-thumb-border: var(--border-border-theme-primary, #ff5532);
804
+ --slider-disabled-opacity: var(--transparency-disable, 0.55);
805
+
806
+ /* Upload — Figma Information Collect → Upload (527:56238 / 527:56237) */
807
+ --upload-radius: var(--border-radius-small, 8px);
808
+ --upload-gap: var(--gap-inside, 4px);
809
+ --upload-large-gap: var(--gap-content-space, 10px);
810
+ --upload-large-px: var(--padding-big, 14px);
811
+ --upload-large-py: var(--padding-default, 8px);
812
+ --upload-large-bg: var(--control-control-normal-lightbackground-light, #f5f3f3);
813
+ --upload-large-fg: var(--text-text-normal-text-black, #343333);
814
+ --upload-large-caption-fg: var(--text-text-normal-text-caption-black, #858484);
815
+ --upload-drag-border: var(--border-border-theme-primary, #ff5532);
816
+ --upload-drag-bg: var(--box-box-theme-secondarybackground, #ffdad2);
817
+ --upload-disabled-opacity: var(--transparency-disable, 0.55);
818
+
819
+ /* ScrollPicker — Figma Information Collect → ScrollPicker (579:88681) */
820
+ --scroll-picker-width: 200px;
821
+ --scroll-picker-height: 230px;
822
+ --scroll-picker-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
823
+ --scroll-picker-border: var(--border-border-normal-light, #f5f3f3);
824
+ --scroll-picker-radius: var(--border-radius-middle, 10px);
825
+ --scroll-picker-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.06);
826
+ --scroll-picker-column-px: var(--gap-inside-space, 6px);
827
+ --scroll-picker-item-height: 26px;
828
+ --scroll-picker-item-gap: var(--gap-inside, 4px);
829
+ --scroll-picker-item-px: var(--padding-default, 8px);
830
+ --scroll-picker-item-py: var(--padding-tiny, 4px);
831
+ --scroll-picker-item-radius: var(--border-radius-extra-small-2, 6px);
832
+ --scroll-picker-item-fg: var(--text-text-normal-text-black, #343333);
833
+ --scroll-picker-item-fg-selected: var(--text-text-theme-primary-black, #bf2300);
834
+ --scroll-picker-item-bg-selected: var(--control-control-theme-lightbackground, #ffdad2);
835
+ --scroll-picker-item-opacity: var(--transparency-placeholder, 0.6);
836
+ --scroll-picker-visible-count: 9;
837
+
838
+ /* Breadcrumb — Figma Structure Navigation → Breadcrumb (622:7883) */
839
+ --breadcrumb-gap: 2px;
840
+ --breadcrumb-item-gap: var(--gap-inside, 4px);
841
+ --breadcrumb-item-px: var(--padding-tiny, 4px);
842
+ --breadcrumb-item-radius: var(--border-radius-extra-small-2, 6px);
843
+ --breadcrumb-fg: var(--text-text-normal-text-black, #343333);
844
+ --breadcrumb-fg-muted: var(--text-text-normal-text-caption-black, #858484);
845
+ --breadcrumb-separator-opacity: var(--transparency-placeholder, 0.6);
846
+ --breadcrumb-icon-size: 0.875rem;
847
+ --breadcrumb-icon-size-small: 0.75rem;
848
+ --breadcrumb-ellipsis-menu-width: 120px;
849
+
850
+ /* Pagehead — Figma Structure Navigation → Pagehead (643:172156) */
851
+ --pagehead-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
852
+ --pagehead-border: var(--border-border-normal-light, #f5f3f3);
853
+ --pagehead-gap: var(--gap-content-space, 10px);
854
+ --pagehead-px: var(--padding-large, 18px);
855
+ --pagehead-title-gap: var(--gap-inside-space, 6px);
856
+ --pagehead-actions-gap: var(--gap-inside, 4px);
857
+ --pagehead-actions-py: var(--padding-default, 8px);
858
+ --pagehead-main-py: var(--padding-tiny, 4px);
859
+ --pagehead-title-pl: var(--gap-inside-space, 6px);
860
+
861
+ /* Steps — Figma Structure Navigation → Steps (791:143425) */
862
+ --steps-gap: var(--gap-block-space, 14px);
863
+ --steps-item-gap: var(--gap-component-space, 8px);
864
+ --steps-item-min-width: 120px;
865
+ --steps-icon-size: var(--size-semilarge, 1.375rem);
866
+ --steps-title-fg: var(--text-text-normal-text-black, #343333);
867
+ /* Figma StepsItem description uses Typography Text (not Caption) */
868
+ --steps-description-fg: var(--text-text-normal-text-black, #343333);
869
+ --steps-done-bg: var(--box-box-success-secondarybackground, #dff6ce);
870
+ --steps-done-fg: var(--text-text-success-primary-black, #47842b);
871
+ --steps-fail-bg: var(--box-box-fail-secondarybackground, #ffdfdf);
872
+ --steps-fail-fg: var(--text-text-fail-primary-black, #960024);
873
+ --steps-warning-bg: var(--box-box-warning-secondarybackground, #ffebdd);
874
+ --steps-warning-fg: var(--text-text-warning-primary-black, #ab6200);
875
+ --steps-waiting-bg: var(--box-box-infomation-secondarybackground, #eaf3ff);
876
+ --steps-waiting-fg: var(--text-text-infomation-primary-black, #3489c8);
877
+ --steps-in-progress-bg: var(--box-box-theme-primarybackground, #ff5532);
878
+ --steps-in-progress-fg: var(--text-text-theme-primary-black, #bf2300);
879
+ --steps-in-progress-icon-fg: var(--text-text-normal-text-caption-white, #fefcfc);
880
+ --steps-default-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
881
+ --steps-default-border: var(--border-border-normal-light, #f5f3f3);
882
+ --steps-default-fg: var(--text-text-normal-text-caption-black, #858484);
883
+
884
+ /* Pagination — Figma Structure Navigation → Pagination (791:146366) */
885
+ --pagination-gap: var(--gap-content-space, 10px);
886
+ --pagination-controls-gap: 4px;
887
+ --pagination-page-gap: var(--gap-inside-space, 6px);
888
+ --pagination-page-px: var(--padding-default, 8px);
889
+ --pagination-page-py: var(--padding-tiny, 4px);
890
+ --pagination-page-active-px: var(--padding-middle, 10px);
891
+ --pagination-page-active-py: var(--padding-small, 6px);
892
+ --pagination-page-radius: var(--border-radius-small, 8px);
893
+ --pagination-page-fg: var(--text-text-normal-text-black, #343333);
894
+ --pagination-page-active-bg: var(--box-box-theme-secondarybackground, #ffdad2);
895
+ --pagination-page-active-fg: var(--text-text-theme-primary-black, #bf2300);
896
+ --pagination-jump-gap: 4px;
897
+ --pagination-jump-input-width: 65px;
898
+ --pagination-size-select-width: 77px;
899
+
900
+ /* Card — Figma Structure Navigation → Card (738:145715) */
901
+ --card-bg: var(--box-box-normal-lightbackground-white, #fdfbfb);
902
+ --card-radius: var(--border-radius-middle, 10px);
903
+ --card-px: var(--padding-big, 14px);
904
+ --card-gap: var(--gap-content-space, 10px);
905
+ --card-head-pt: var(--padding-default, 8px);
906
+ --card-head-pb: var(--padding-tiny, 4px);
907
+ --card-bottom-pt: var(--padding-tiny, 4px);
908
+ --card-bottom-pb: var(--padding-default, 8px);
909
+ --card-body-py: var(--padding-default, 8px);
910
+ --card-fg: var(--text-text-normal-text-black, #343333);
911
+ --card-divider-height: 14px;
912
+ --card-trailing-gap: 10px;
744
913
  }
745
914
 
746
- @theme inline {
747
- --color-background: var(--background);
748
- --color-foreground: var(--foreground);
749
- --color-primary: var(--primary);
750
- --color-primary-foreground: var(--primary-foreground);
751
- --color-secondary: var(--secondary);
752
- --color-secondary-foreground: var(--secondary-foreground);
753
- --color-muted: var(--muted);
754
- --color-muted-foreground: var(--muted-foreground);
755
- --color-accent: var(--accent);
756
- --color-accent-foreground: var(--accent-foreground);
757
- --color-destructive: var(--destructive);
758
- --color-destructive-foreground: var(--destructive-foreground);
759
- --color-border: var(--border);
760
- --color-input: var(--input);
761
- --color-ring: var(--ring);
762
- --color-card: var(--card);
763
- --color-card-foreground: var(--card-foreground);
764
- --color-popover: var(--popover);
765
- --color-popover-foreground: var(--popover-foreground);
766
- --radius-sm: var(--border-radius-small, 8px);
767
- --radius-md: var(--border-radius-middle, 10px);
768
- --radius-lg: var(--border-radius-big, 12px);
769
- }
915
+ @theme inline {
916
+ --color-background: var(--background);
917
+ --color-foreground: var(--foreground);
918
+ --color-primary: var(--primary);
919
+ --color-primary-foreground: var(--primary-foreground);
920
+ --color-secondary: var(--secondary);
921
+ --color-secondary-foreground: var(--secondary-foreground);
922
+ --color-muted: var(--muted);
923
+ --color-muted-foreground: var(--muted-foreground);
924
+ --color-accent: var(--accent);
925
+ --color-accent-foreground: var(--accent-foreground);
926
+ --color-destructive: var(--destructive);
927
+ --color-destructive-foreground: var(--destructive-foreground);
928
+ --color-border: var(--border);
929
+ --color-input: var(--input);
930
+ --color-ring: var(--ring);
931
+ --color-card: var(--card);
932
+ --color-card-foreground: var(--card-foreground);
933
+ --color-popover: var(--popover);
934
+ --color-popover-foreground: var(--popover-foreground);
935
+ --radius-sm: var(--border-radius-small, 8px);
936
+ --radius-md: var(--border-radius-middle, 10px);
937
+ --radius-lg: var(--border-radius-big, 12px);
938
+ }
770
939
 
771
940
  :root {
772
941
  --radius-none: var(--border-radius-none, 0px);
@@ -792,51 +961,51 @@
792
961
  --font-weight-semibold: 600;
793
962
  --font-weight-bold: 700;
794
963
 
795
- --font-size-xs: 12px;
796
- --font-size-sm: 14px;
797
- --font-size-base: 16px;
798
- --font-size-lg: 18px;
799
- --font-size-xl: 20px;
964
+ --font-size-xs: 0.75rem;
965
+ --font-size-sm: 0.875rem;
966
+ --font-size-base: 1rem;
967
+ --font-size-lg: 1.125rem;
968
+ --font-size-xl: 1.25rem;
800
969
 
801
- --line-height-xs: var(--line-height-tiny, 12px);
802
- --line-height-sm: var(--line-height-small, 16px);
803
- --line-height-base: var(--line-height-regular, 18px);
804
- --line-height-lg: var(--line-height-middle, 22px);
805
- --line-height-xl: var(--line-height-big, 30px);
970
+ --line-height-xs: var(--line-height-tiny, 0.75rem);
971
+ --line-height-sm: var(--line-height-small, 1rem);
972
+ --line-height-base: var(--line-height-regular, 1.125rem);
973
+ --line-height-lg: var(--line-height-middle, 1.375rem);
974
+ --line-height-xl: var(--line-height-big, 1.875rem);
806
975
 
807
976
  /* Typography levels — Figma System Composition → Typography (128:85) */
808
- --typography-display-size: var(--size-huge, 30px);
809
- --typography-display-line-height: var(--line-height-max, 44px);
977
+ --typography-display-size: var(--size-huge, 1.875rem);
978
+ --typography-display-line-height: var(--line-height-max, 2.75rem);
810
979
  --typography-display-weight-text: var(--font-weight-medium, 500);
811
980
  --typography-display-weight-number: var(--font-weight-medium, 500);
812
981
 
813
- --typography-headline1-size: var(--size-large, 26px);
814
- --typography-headline1-line-height: var(--line-height-large, 46px);
982
+ --typography-headline1-size: var(--size-large, 1.625rem);
983
+ --typography-headline1-line-height: var(--line-height-large, 2.875rem);
815
984
  --typography-headline1-weight-text: var(--font-weight-medium, 500);
816
985
  --typography-headline1-weight-number: var(--font-weight-medium, 500);
817
986
 
818
- --typography-headline2-size: var(--size-semilarge, 22px);
819
- --typography-headline2-line-height: var(--line-height-semilarge, 34px);
987
+ --typography-headline2-size: var(--size-semilarge, 1.375rem);
988
+ --typography-headline2-line-height: var(--line-height-semilarge, 2.125rem);
820
989
  --typography-headline2-weight-text: var(--font-weight-medium, 500);
821
990
  --typography-headline2-weight-number: var(--font-weight-medium, 500);
822
991
 
823
- --typography-title-size: var(--size-big, 20px);
824
- --typography-title-line-height: var(--line-height-big, 30px);
992
+ --typography-title-size: var(--size-big, 1.25rem);
993
+ --typography-title-line-height: var(--line-height-big, 1.875rem);
825
994
  --typography-title-weight-text: var(--font-weight-semibold, 600);
826
995
  --typography-title-weight-number: var(--font-weight-bold, 700);
827
996
 
828
- --typography-subtitle-size: var(--size-middle, 16px);
829
- --typography-subtitle-line-height: var(--line-height-middle, 22px);
997
+ --typography-subtitle-size: var(--size-middle, 1rem);
998
+ --typography-subtitle-line-height: var(--line-height-middle, 1.375rem);
830
999
  --typography-subtitle-weight-text: var(--font-weight-medium, 500);
831
1000
  --typography-subtitle-weight-number: var(--font-weight-medium, 500);
832
1001
 
833
- --typography-text-size: var(--size-regular, 14px);
834
- --typography-text-line-height: var(--line-height-regular, 18px);
1002
+ --typography-text-size: var(--size-regular, 0.875rem);
1003
+ --typography-text-line-height: var(--line-height-regular, 1.125rem);
835
1004
  --typography-text-weight-text: var(--font-weight-regular, 400);
836
1005
  --typography-text-weight-number: var(--font-weight-light, 300);
837
1006
 
838
- --typography-caption-size: var(--size-small, 12px);
839
- --typography-caption-line-height: var(--line-height-small, 16px);
1007
+ --typography-caption-size: var(--size-small, 0.75rem);
1008
+ --typography-caption-line-height: var(--line-height-small, 1rem);
840
1009
  --typography-caption-weight-text: var(--font-weight-regular, 400);
841
1010
  --typography-caption-weight-number: var(--font-weight-light, 300);
842
1011
 
@@ -850,6 +1019,44 @@
850
1019
  --typeface-gap: var(--gap-inside, 4px);
851
1020
  }
852
1021
 
1022
+ /* Keyboard focus ring - opt-in via `.aviala-focus-ring`.
1023
+ Uses :focus-visible (no JS gate). Animated box-shadow: 12px to 3px, 250ms. */
1024
+
1025
+ :root {
1026
+ --focus-ring-width-start: var(--size-small, 12px);
1027
+ --focus-ring-width-end: var(--border-thickness-large, 3px);
1028
+ --focus-ring-color: var(--ring, var(--border-border-theme-primary, #ff5532));
1029
+ --focus-transition-duration: 250ms;
1030
+ --focus-transition-easing: ease;
1031
+ }
1032
+
1033
+ /* Suppress native outline; custom ring only on .aviala-focus-ring:focus-visible */
1034
+ .aviala-focus-ring:focus {
1035
+ outline: none;
1036
+ }
1037
+
1038
+ .aviala-focus-ring:focus-visible {
1039
+ outline: none;
1040
+ animation: aviala-focus-ring-settle var(--focus-transition-duration)
1041
+ var(--focus-transition-easing) forwards;
1042
+ }
1043
+
1044
+ @keyframes aviala-focus-ring-settle {
1045
+ from {
1046
+ box-shadow: 0 0 0 var(--focus-ring-width-start) var(--focus-ring-color);
1047
+ }
1048
+ to {
1049
+ box-shadow: 0 0 0 var(--focus-ring-width-end) var(--focus-ring-color);
1050
+ }
1051
+ }
1052
+
1053
+ @media (prefers-reduced-motion: reduce) {
1054
+ .aviala-focus-ring:focus-visible {
1055
+ animation: none;
1056
+ box-shadow: 0 0 0 var(--focus-ring-width-end) var(--focus-ring-color);
1057
+ }
1058
+ }
1059
+
853
1060
 
854
1061
 
855
1062
  @layer base {