@techsio/ui-kit 0.46.0 → 0.48.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 (33) hide show
  1. package/dist/internal/molecules/vertical-navigation.context.js +15 -0
  2. package/dist/internal/molecules/vertical-navigation.styles.js +68 -0
  3. package/dist/molecules/vertical-navigation.js +228 -0
  4. package/dist/organisms/data-table.js +51 -46
  5. package/dist/src/internal/molecules/vertical-navigation.context.d.ts +25 -0
  6. package/dist/src/internal/molecules/vertical-navigation.context.d.ts.map +1 -0
  7. package/dist/src/internal/molecules/vertical-navigation.styles.d.ts +143 -0
  8. package/dist/src/internal/molecules/vertical-navigation.styles.d.ts.map +1 -0
  9. package/dist/src/molecules/vertical-navigation.d.ts +44 -0
  10. package/dist/src/molecules/vertical-navigation.d.ts.map +1 -0
  11. package/dist/src/organisms/data-table.d.ts.map +1 -1
  12. package/dist/src/types/zag.d.ts +1 -0
  13. package/dist/src/types/zag.d.ts.map +1 -1
  14. package/dist/stories/changelog/changelog.stories.d.ts.map +1 -1
  15. package/dist/stories/molecules/vertical-navigation.stories.d.ts +75 -0
  16. package/dist/stories/molecules/vertical-navigation.stories.d.ts.map +1 -0
  17. package/dist/test/vertical-navigation.behavior.spec.d.ts +2 -0
  18. package/dist/test/vertical-navigation.behavior.spec.d.ts.map +1 -0
  19. package/dist/test/vertical-navigation.playwright.config.d.ts +4 -0
  20. package/dist/test/vertical-navigation.playwright.config.d.ts.map +1 -0
  21. package/package.json +2 -1
  22. package/src/tokens/components/components.css +1 -0
  23. package/src/tokens/components/molecules/_vertical-navigation.css +155 -0
  24. package/src/tokens/components/organisms/_data-table.css +30 -7
  25. package/src/tokens/components/organisms/_table.css +0 -17
  26. package/src/tokens/figma/akros/variables.css +438 -0
  27. package/src/tokens/figma/brand-overrides.css +1 -1
  28. package/src/tokens/figma/business/variables.css +2 -2
  29. package/src/tokens/figma/dark/variables.css +39 -1
  30. package/src/tokens/figma/light/variables.css +431 -6
  31. package/src/tokens/figma/neo/variables.css +2 -2
  32. package/src/tokens/figma/neo-dark/variables.css +1 -1
  33. package/src/tokens/figma/variables.css +430 -5
package/src/tokens/figma/variables.css CHANGED
@@ -33,12 +33,23 @@
33
33
  --border-width-checkbox-error: var(--border-md);
34
34
  --border-width-color-select: var(--border-md);
35
35
  --border-width-combobox: var(--border-width-form-control);
36
+ --border-width-command: var(--border-width-popup);
37
+ --border-width-data-table: var(--border-table-width);
38
+ --border-width-date-picker-content: var(--border-sm);
39
+ --border-width-date-picker-control: var(--border-width-form-control);
40
+ --border-width-date-picker-day: var(--border-sm);
41
+ --border-width-date-picker-time: var(--border-width-form-control);
36
42
  --border-width-dialog: var(--border-sm);
43
+ --border-width-drawer: var(--border-sm);
44
+ --border-width-file-upload-dropzone: var(--border-md);
45
+ --border-width-file-upload-focus: var(--default-ring-width);
46
+ --border-width-file-upload-item: var(--border-sm);
37
47
  --border-width-form-control: var(--border-md);
48
+ --border-width-hotkeys-key: var(--border-sm);
38
49
  --border-width-input: var(--border-width-form-control);
39
50
  --border-width-input-validation: var(--border-lg);
40
51
  --border-width-numeric-input: var(--border-width-input);
41
- --border-width-pagination: var(--border-sm);
52
+ --border-width-pagination: var(--border-width-form-control);
42
53
  --border-width-popup: var(--border-sm);
43
54
  --border-width-product-card: var(--border-sm);
44
55
  --border-width-radio-card: var(--border-sm);
@@ -48,6 +59,7 @@
48
59
  --border-width-search-form: var(--border-width-form-control);
49
60
  --border-width-select: var(--border-width-form-control);
50
61
  --border-width-select-validation: var(--border-lg);
62
+ --border-width-sidebar: var(--border-sm);
51
63
  --border-width-slider: var(--border-sm);
52
64
  --border-width-slider-error: var(--border-lg);
53
65
  --border-width-steps-content: var(--border-sm);
@@ -58,6 +70,7 @@
58
70
  --border-width-textarea-validation: var(--border-width-input-validation);
59
71
  --border-width-toast: var(--border-sm);
60
72
  --border-width-tooltip: var(--size-1);
73
+ --border-width-tour: var(--border-sm);
61
74
  --breakpoint-2xl: 96rem;
62
75
  --breakpoint-lg: 64rem;
63
76
  --breakpoint-md: 48rem;
@@ -263,6 +276,20 @@
263
276
  --color-carousel-trigger-bg-hover: var(--color-fill-hover);
264
277
  --color-carousel-trigger-fg-base: var(--color-fg-primary);
265
278
  --color-carousel-trigger-fg-hover: var(--color-fg-primary);
279
+ --color-cascade-select-bg-disabled: var(--color-bg-disabled);
280
+ --color-cascade-select-border-disabled: var(--color-border-disabled);
281
+ --color-cascade-select-border-error: var(--color-bg-danger-base);
282
+ --color-cascade-select-border-success: var(--color-bg-success);
283
+ --color-cascade-select-border-warning: var(--color-bg-warning-base);
284
+ --color-cascade-select-fg-disabled: var(--color-fg-disabled);
285
+ --color-cascade-select-placeholder: var(--color-form-control-fg-placeholder);
286
+ --color-cascade-select-ring: var(--color-form-control-ring);
287
+ --color-cascade-select-trigger-bg-hover: var(--color-form-control-bg-hover);
288
+ --color-cascade-select-trigger-border: var(--color-form-control-border);
289
+ --color-cascade-select-trigger-border-focus: var(--color-form-control-border-focus);
290
+ --color-cascade-select-trigger-border-hover: var(--color-form-control-border-hover);
291
+ --color-cascade-select-trigger-fg-base: var(--color-fg-primary);
292
+ --color-cascade-select-trigger-fg-hover: var(--color-fg-accent-primary);
266
293
  --color-checkbox-bg-base: var(--color-bg-disabled);
267
294
  --color-checkbox-bg-checked: var(--color-bg-success);
268
295
  --color-checkbox-bg-disabled: var(--color-bg-disabled);
@@ -313,6 +340,17 @@
313
340
  --color-combobox-trigger-fg-base: var(--color-fg-primary);
314
341
  --color-combobox-trigger-fg-hover: var(--color-bg-primary-base);
315
342
  --color-combobox-warning-fg: var(--color-fg-accent-warning);
343
+ --color-command-bg: var(--color-popup-bg);
344
+ --color-command-border: var(--color-popup-border);
345
+ --color-command-empty-fg: var(--color-popup-item-fg-muted);
346
+ --color-command-fg: var(--color-popup-item-fg);
347
+ --color-command-foreground: var(--color-popup-item-fg);
348
+ --color-command-group-label-fg: var(--color-popup-item-fg-muted);
349
+ --color-command-highlight: var(--color-popup-item-bg-hover);
350
+ --color-command-item-bg-highlighted: var(--color-popup-item-bg-hover);
351
+ --color-command-item-fg-disabled: var(--color-popup-item-fg-disabled);
352
+ --color-command-muted: var(--color-popup-item-fg-muted);
353
+ --color-command-surface: var(--color-popup-bg);
316
354
  --color-danger: var(--color-danger-400);
317
355
  --color-danger-100: oklch(0.936 0.031 17.717);
318
356
  --color-danger-200: oklch(0.885 0.059 18.334);
@@ -331,6 +369,98 @@
331
369
  --color-danger-light-active: var(--color-bg-light-danger-active);
332
370
  --color-danger-light-disabled: var(--color-bg-disabled);
333
371
  --color-danger-light-hover: var(--color-bg-light-danger-hover);
372
+ --color-data-table-bg: var(--color-table-bg);
373
+ --color-data-table-border: var(--color-table-border);
374
+ --color-data-table-drag-handle-fg: var(--color-fg-secondary);
375
+ --color-data-table-editor-error-fg: var(--color-fg-status-error);
376
+ --color-data-table-empty-fg: var(--color-fg-secondary);
377
+ --color-data-table-expander-fg: var(--color-fg-secondary);
378
+ --color-data-table-filter-icon-fg: var(--color-fg-secondary);
379
+ --color-data-table-filter-row-bg: var(--color-table-header-bg);
380
+ --color-data-table-footer-bg: var(--color-table-footer-bg);
381
+ --color-data-table-header-bg: var(--color-table-header-bg);
382
+ --color-data-table-pagination-bg: var(--color-table-header-bg);
383
+ --color-data-table-pagination-fg: var(--color-table-header-fg);
384
+ --color-data-table-pinned-cell-bg: var(--color-table-bg);
385
+ --color-data-table-resize-handle-bg: var(--color-table-border);
386
+ --color-data-table-row-bg-hover: var(--color-table-row-bg-hover);
387
+ --color-data-table-row-bg-nested: var(--color-fill-active);
388
+ --color-data-table-row-bg-selected: var(--color-table-row-bg-selected);
389
+ --color-data-table-row-bg-striped-primary: var(--color-table-row-striped-primary);
390
+ --color-data-table-row-bg-striped-secondary: var(--color-table-row-striped-secondary);
391
+ --color-data-table-sort-icon-fg: var(--color-fg-secondary);
392
+ --color-data-table-sort-icon-fg-active: var(--color-fg-accent-primary);
393
+ --color-data-table-toolbar-bg: var(--color-table-header-bg);
394
+ --color-data-table-toolbar-fg: var(--color-table-header-fg);
395
+ --color-date-picker-accent: var(--color-bg-primary-base);
396
+ --color-date-picker-accent-foreground: var(--color-fg-light);
397
+ --color-date-picker-accent-hover: var(--color-bg-primary-hover);
398
+ --color-date-picker-border: var(--color-form-control-border);
399
+ --color-date-picker-border-hover: var(--color-form-control-border-hover);
400
+ --color-date-picker-content-bg: var(--color-date-picker-surface);
401
+ --color-date-picker-content-border: var(--color-date-picker-border);
402
+ --color-date-picker-content-fg: var(--color-date-picker-text);
403
+ --color-date-picker-control-bg: var(--color-date-picker-fill);
404
+ --color-date-picker-control-bg-disabled: var(--color-form-control-bg-disabled);
405
+ --color-date-picker-control-bg-focus: var(--color-date-picker-fill-active);
406
+ --color-date-picker-control-bg-hover: var(--color-date-picker-fill-hover);
407
+ --color-date-picker-control-bg-readonly: var(--color-date-picker-fill);
408
+ --color-date-picker-control-border: var(--color-date-picker-border);
409
+ --color-date-picker-control-border-disabled: var(--color-form-control-border-disabled);
410
+ --color-date-picker-control-border-error: var(--color-date-picker-error);
411
+ --color-date-picker-control-border-error-focus: var(--color-date-picker-error-focus);
412
+ --color-date-picker-control-border-error-hover: var(--color-date-picker-error-hover);
413
+ --color-date-picker-control-border-focus: var(--color-date-picker-focus);
414
+ --color-date-picker-control-border-hover: var(--color-date-picker-border-hover);
415
+ --color-date-picker-control-fg: var(--color-date-picker-text);
416
+ --color-date-picker-control-fg-disabled: var(--color-date-picker-disabled);
417
+ --color-date-picker-control-ring: var(--color-date-picker-ring);
418
+ --color-date-picker-day-bg: var(--color-date-picker-transparent);
419
+ --color-date-picker-day-bg-hover: var(--color-date-picker-fill-hover);
420
+ --color-date-picker-day-bg-selected: var(--color-date-picker-accent);
421
+ --color-date-picker-day-bg-selected-hover: var(--color-date-picker-accent-hover);
422
+ --color-date-picker-day-border: var(--color-date-picker-transparent);
423
+ --color-date-picker-day-fg: var(--color-date-picker-text);
424
+ --color-date-picker-day-fg-selected: var(--color-date-picker-accent-foreground);
425
+ --color-date-picker-day-fg-unavailable: var(--color-date-picker-disabled);
426
+ --color-date-picker-day-ring: var(--color-date-picker-ring);
427
+ --color-date-picker-day-today-border: var(--color-date-picker-accent);
428
+ --color-date-picker-disabled: var(--color-form-control-fg-disabled);
429
+ --color-date-picker-error: var(--color-danger);
430
+ --color-date-picker-error-focus: var(--color-border-danger-focus);
431
+ --color-date-picker-error-hover: var(--color-border-danger-hover);
432
+ --color-date-picker-fill: var(--color-form-control-bg);
433
+ --color-date-picker-fill-active: var(--color-form-control-bg-focus);
434
+ --color-date-picker-fill-hover: var(--color-form-control-bg-hover);
435
+ --color-date-picker-focus: var(--color-form-control-border-focus);
436
+ --color-date-picker-footer-border: var(--color-date-picker-border);
437
+ --color-date-picker-label-fg: var(--color-date-picker-text);
438
+ --color-date-picker-month-divider-border: var(--color-date-picker-border);
439
+ --color-date-picker-navigation-bg-hover: var(--color-date-picker-fill-hover);
440
+ --color-date-picker-navigation-fg: var(--color-date-picker-text);
441
+ --color-date-picker-navigation-fg-disabled: var(--color-date-picker-disabled);
442
+ --color-date-picker-navigation-ring: var(--color-date-picker-ring);
443
+ --color-date-picker-placeholder: var(--color-form-control-fg-placeholder);
444
+ --color-date-picker-range-separator-fg: var(--color-date-picker-text-muted);
445
+ --color-date-picker-ring: var(--color-form-control-ring);
446
+ --color-date-picker-segment-bg-focus: var(--color-date-picker-fill-hover);
447
+ --color-date-picker-segment-fg-placeholder: var(--color-date-picker-placeholder);
448
+ --color-date-picker-surface: var(--color-fill-overlay);
449
+ --color-date-picker-text: var(--color-fg-primary);
450
+ --color-date-picker-text-muted: var(--color-fg-secondary);
451
+ --color-date-picker-time-bg: var(--color-date-picker-fill);
452
+ --color-date-picker-time-border: var(--color-date-picker-border);
453
+ --color-date-picker-time-fg: var(--color-date-picker-text);
454
+ --color-date-picker-time-label-fg: var(--color-date-picker-text);
455
+ --color-date-picker-time-ring: var(--color-date-picker-ring);
456
+ --color-date-picker-transparent: var(--color-bg-transparent);
457
+ --color-date-picker-trigger-bg: var(--color-date-picker-fill);
458
+ --color-date-picker-trigger-bg-active: var(--color-date-picker-fill-active);
459
+ --color-date-picker-trigger-bg-hover: var(--color-date-picker-fill-hover);
460
+ --color-date-picker-trigger-fg: var(--color-date-picker-text);
461
+ --color-date-picker-trigger-fg-disabled: var(--color-date-picker-disabled);
462
+ --color-date-picker-trigger-ring: var(--color-date-picker-ring);
463
+ --color-date-picker-weekday-fg: var(--color-date-picker-text);
334
464
  --color-dialog-backdrop-bg-modal: var(--color-bg-scrim);
335
465
  --color-dialog-backdrop-bg-modeless: var(--color-transparent);
336
466
  --color-dialog-close-trigger-fg: var(--color-fg-primary);
@@ -340,6 +470,20 @@
340
470
  --color-dialog-description-fg: var(--color-fg-primary);
341
471
  --color-dialog-ring: var(--color-ring-default);
342
472
  --color-dialog-title-fg: var(--color-fg-primary);
473
+ --color-drawer-backdrop-bg: var(--color-drawer-overlay);
474
+ --color-drawer-border: var(--color-border-primary);
475
+ --color-drawer-content-bg: var(--color-drawer-surface);
476
+ --color-drawer-content-border: var(--color-drawer-border);
477
+ --color-drawer-content-fg: var(--color-drawer-foreground);
478
+ --color-drawer-description-fg: var(--color-drawer-muted-foreground);
479
+ --color-drawer-focus: var(--color-primary);
480
+ --color-drawer-foreground: var(--color-fg-primary);
481
+ --color-drawer-grabber-bg: var(--color-drawer-border);
482
+ --color-drawer-muted-foreground: var(--color-fg-secondary);
483
+ --color-drawer-overlay: var(--color-bg-scrim);
484
+ --color-drawer-ring: var(--color-drawer-focus);
485
+ --color-drawer-surface: var(--color-fill-surface);
486
+ --color-drawer-title-fg: var(--color-drawer-foreground);
343
487
  --color-fg-accent-danger: light-dark(var(--color-danger-600), var(--color-danger-300));
344
488
  --color-fg-accent-primary: light-dark(oklch(0.507 0.063 255.385), var(--color-primary-300));
345
489
  --color-fg-accent-secondary: light-dark(oklch(0.447 0.076 49.767), var(--color-secondary-300));
@@ -359,9 +503,40 @@
359
503
  --color-fg-primary: light-dark(var(--color-slate-950), var(--color-white));
360
504
  --color-fg-reverse: light-dark(var(--color-white), var(--color-slate-950));
361
505
  --color-fg-secondary: oklch(0.494 0.037 261.595);
362
- --color-fg-status-error: light-dark(var(--color-danger-600), var(--color-danger-300));
506
+ --color-fg-status-error: light-dark(var(--color-danger-700), var(--color-danger-300));
363
507
  --color-fg-status-success: light-dark(var(--color-success-700), var(--color-success-300));
364
508
  --color-fg-status-warning: light-dark(var(--color-warning-500), var(--color-warning-400));
509
+ --color-file-upload-accent: var(--color-primary);
510
+ --color-file-upload-accent-subtle: var(--color-primary-light);
511
+ --color-file-upload-content: var(--color-fg-primary);
512
+ --color-file-upload-danger: var(--color-danger);
513
+ --color-file-upload-disabled-content: var(--color-fg-disabled);
514
+ --color-file-upload-disabled-outline: var(--color-border-disabled);
515
+ --color-file-upload-disabled-surface: var(--color-bg-disabled);
516
+ --color-file-upload-dropzone-bg: var(--color-file-upload-surface);
517
+ --color-file-upload-dropzone-bg-disabled: var(--color-file-upload-disabled-surface);
518
+ --color-file-upload-dropzone-bg-dragging: var(--color-file-upload-accent-subtle);
519
+ --color-file-upload-dropzone-bg-hover: var(--color-file-upload-surface-hover);
520
+ --color-file-upload-dropzone-border: var(--color-file-upload-outline);
521
+ --color-file-upload-dropzone-border-disabled: var(--color-file-upload-disabled-outline);
522
+ --color-file-upload-dropzone-border-dragging: var(--color-file-upload-accent);
523
+ --color-file-upload-dropzone-border-invalid: var(--color-file-upload-danger);
524
+ --color-file-upload-focus: var(--color-ring-default);
525
+ --color-file-upload-focus-border: var(--color-file-upload-focus);
526
+ --color-file-upload-item-bg: var(--color-file-upload-item-surface);
527
+ --color-file-upload-item-bg-rejected: var(--color-file-upload-item-surface);
528
+ --color-file-upload-item-border: var(--color-file-upload-outline);
529
+ --color-file-upload-item-border-rejected: var(--color-file-upload-danger);
530
+ --color-file-upload-item-fg-disabled: var(--color-file-upload-disabled-content);
531
+ --color-file-upload-item-name-fg: var(--color-file-upload-content);
532
+ --color-file-upload-item-preview-fg: var(--color-file-upload-content);
533
+ --color-file-upload-item-size-fg: var(--color-file-upload-content);
534
+ --color-file-upload-item-surface: var(--color-base);
535
+ --color-file-upload-label-fg: var(--color-file-upload-content);
536
+ --color-file-upload-label-fg-disabled: var(--color-file-upload-disabled-content);
537
+ --color-file-upload-outline: var(--color-border-primary);
538
+ --color-file-upload-surface: var(--color-fill-surface);
539
+ --color-file-upload-surface-hover: var(--color-fill-hover);
365
540
  --color-fill-active: light-dark(var(--color-black-15), var(--color-white-15));
366
541
  --color-fill-base: light-dark(var(--color-black-5), var(--color-white-5));
367
542
  --color-fill-borderless-active: var(--color-fill-active);
@@ -415,6 +590,13 @@
415
590
  --color-header-nav-item-bg: var(--color-bg-transparent);
416
591
  --color-header-nav-item-bg-hover: var(--color-bg-transparent);
417
592
  --color-highlight: var(--color-fill-highlight);
593
+ --color-hotkeys-key-bg: var(--color-fill-surface);
594
+ --color-hotkeys-key-border: var(--color-border-primary);
595
+ --color-hotkeys-key-fg: var(--color-fg-secondary);
596
+ --color-hotkeys-outline: var(--color-border-primary);
597
+ --color-hotkeys-separator-fg: var(--color-fg-secondary);
598
+ --color-hotkeys-surface: var(--color-fill-surface);
599
+ --color-hotkeys-text: var(--color-fg-secondary);
418
600
  --color-icon-control-bg-active: var(--color-fill-active);
419
601
  --color-icon-control-bg-danger-active: var(--color-bg-light-danger-active);
420
602
  --color-icon-control-bg-danger-hover: var(--color-bg-light-danger-base);
@@ -729,6 +911,31 @@
729
911
  --color-shadow-1: oklch(0.145 0 0);
730
912
  --color-shadow-2: oklch(0.145 0 0);
731
913
  --color-shadow-3: oklch(0.145 0 0);
914
+ --color-sidebar-base: var(--color-base);
915
+ --color-sidebar-border: var(--color-border-primary);
916
+ --color-sidebar-focus: var(--color-primary);
917
+ --color-sidebar-foreground: var(--color-fg-primary);
918
+ --color-sidebar-group-label-fg: var(--color-sidebar-muted-foreground);
919
+ --color-sidebar-inset-bg: var(--color-sidebar-base);
920
+ --color-sidebar-inset-fg: var(--color-sidebar-foreground);
921
+ --color-sidebar-interactive: var(--color-fill-overlay);
922
+ --color-sidebar-muted-foreground: var(--color-fg-secondary);
923
+ --color-sidebar-pane-border: var(--color-sidebar-border);
924
+ --color-sidebar-panel-bg: var(--color-sidebar-surface);
925
+ --color-sidebar-panel-border: var(--color-sidebar-border);
926
+ --color-sidebar-panel-fg: var(--color-sidebar-foreground);
927
+ --color-sidebar-rail-bg-hover: var(--color-sidebar-interactive);
928
+ --color-sidebar-rail-fg: var(--color-sidebar-muted-foreground);
929
+ --color-sidebar-rail-indicator-bg: var(--color-sidebar-border);
930
+ --color-sidebar-ring: var(--color-sidebar-focus);
931
+ --color-sidebar-root-bg: var(--color-sidebar-base);
932
+ --color-sidebar-root-fg: var(--color-sidebar-foreground);
933
+ --color-sidebar-separator-bg: var(--color-sidebar-border);
934
+ --color-sidebar-surface: var(--color-fill-surface);
935
+ --color-sidebar-trigger-bg-active: var(--color-sidebar-interactive);
936
+ --color-sidebar-trigger-bg-base: var(--color-transparent);
937
+ --color-sidebar-trigger-bg-hover: var(--color-sidebar-interactive);
938
+ --color-sidebar-trigger-fg: var(--color-sidebar-foreground);
732
939
  --color-skeleton-bg-primary: var(--color-fill-overlay);
733
940
  --color-skeleton-bg-secondary: var(--color-fill-surface);
734
941
  --color-sky-300: oklch(0.828 0.101 230.318);
@@ -821,6 +1028,7 @@
821
1028
  --color-table-row-bg: var(--color-bg-transparent);
822
1029
  --color-table-row-bg-hover: var(--color-fill-hover);
823
1030
  --color-table-row-bg-selected: var(--color-fill-selected);
1031
+ --color-table-row-fg-selected: var(--color-white);
824
1032
  --color-table-row-striped-primary: var(--color-fill-base);
825
1033
  --color-table-row-striped-secondary: var(--color-bg-transparent);
826
1034
  --color-tabs-bg: var(--color-fill-surface);
@@ -898,6 +1106,18 @@
898
1106
  --color-tooltip-bg: var(--color-fill-overlay);
899
1107
  --color-tooltip-border-outline: var(--color-border-primary);
900
1108
  --color-tooltip-fg: var(--color-fg-primary);
1109
+ --color-tour-arrow: var(--color-tour-surface);
1110
+ --color-tour-backdrop: var(--color-tour-scrim);
1111
+ --color-tour-bg: var(--color-tour-surface);
1112
+ --color-tour-border: var(--color-tour-outline);
1113
+ --color-tour-description: var(--color-tour-text);
1114
+ --color-tour-fg: var(--color-tour-text);
1115
+ --color-tour-outline: var(--color-border-primary);
1116
+ --color-tour-progress: var(--color-tour-text);
1117
+ --color-tour-scrim: var(--color-bg-scrim);
1118
+ --color-tour-spotlight: var(--color-tour-text);
1119
+ --color-tour-surface: var(--color-fill-surface);
1120
+ --color-tour-text: var(--color-fg-primary);
901
1121
  --color-transparent: oklch(0 0 0 / 0);
902
1122
  --color-tree-view-bg: var(--color-fill-base);
903
1123
  --color-tree-view-fg-base: var(--color-fg-primary);
@@ -938,6 +1158,7 @@
938
1158
  --container-4xl: var(--dimension-container-4xl);
939
1159
  --container-5xl: var(--dimension-container-5xl);
940
1160
  --container-6xl: var(--dimension-container-6xl);
1161
+ --container-cascade-select-column: var(--container-3xs);
941
1162
  --container-dialog-center-max-h: var(--size-800);
942
1163
  --container-dialog-center-max-w: var(--container-2xl);
943
1164
  --container-dialog-lg: var(--container-lg);
@@ -945,13 +1166,20 @@
945
1166
  --container-dialog-sm: var(--container-sm);
946
1167
  --container-dialog-xl: var(--container-xl);
947
1168
  --container-dialog-xs: var(--container-xs);
1169
+ --container-drawer-lg: var(--container-lg);
1170
+ --container-drawer-md: var(--container-md);
1171
+ --container-drawer-sm: var(--container-sm);
1172
+ --container-drawer-xl: var(--container-xl);
1173
+ --container-drawer-xs: var(--container-xs);
948
1174
  --container-footer-max: var(--container-max-w);
949
1175
  --container-header-desktop: var(--dimension-768);
950
1176
  --container-lg: var(--dimension-container-lg);
951
1177
  --container-max-w: var(--dimension-container-max-w);
952
1178
  --container-md: var(--dimension-container-md);
953
1179
  --container-prose: 65ch;
1180
+ --container-sidebar-mobile: var(--container-2xs);
954
1181
  --container-sm: var(--dimension-container-sm);
1182
+ --container-tour: var(--container-sm);
955
1183
  --container-xl: var(--dimension-container-xl);
956
1184
  --container-xs: var(--dimension-container-xs);
957
1185
  --default-ring-color: light-dark(oklch(0 0 0), oklch(1 0 0));
@@ -1077,12 +1305,19 @@
1077
1305
  --font-weight-badge-sm: var(--font-weight-light);
1078
1306
  --font-weight-badge-xl: var(--font-weight-bold);
1079
1307
  --font-weight-bold: 700;
1308
+ --font-weight-command-group-label: var(--font-weight-medium);
1309
+ --font-weight-date-picker-view: var(--font-weight-medium);
1310
+ --font-weight-date-picker-weekday: var(--font-weight-medium);
1080
1311
  --font-weight-dialog-title: var(--font-weight-semibold);
1312
+ --font-weight-drawer-title: var(--font-weight-semibold);
1081
1313
  --font-weight-extra-light: 200;
1314
+ --font-weight-file-upload-item-name: var(--font-weight-medium);
1315
+ --font-weight-file-upload-label: var(--font-weight-medium);
1082
1316
  --font-weight-footer-link: var(--font-weight-normal);
1083
1317
  --font-weight-footer-title: var(--font-weight-semibold);
1084
1318
  --font-weight-header-nav: var(--font-weight-medium);
1085
1319
  --font-weight-header-nav-active: var(--font-weight-semibold);
1320
+ --font-weight-hotkeys: var(--font-weight-medium);
1086
1321
  --font-weight-label: var(--font-weight-bold);
1087
1322
  --font-weight-light: 300;
1088
1323
  --font-weight-link: var(--font-weight-medium);
@@ -1095,11 +1330,39 @@
1095
1330
  --font-weight-radio-card-addon: var(--font-weight-medium);
1096
1331
  --font-weight-radio-card-item: var(--font-weight-medium);
1097
1332
  --font-weight-semibold: 600;
1333
+ --font-weight-sidebar-group-label: var(--font-weight-semibold);
1098
1334
  --font-weight-table-caption: var(--font-weight-normal);
1099
1335
  --font-weight-table-footer: var(--font-weight-medium);
1100
1336
  --font-weight-table-header: var(--font-weight-semibold);
1101
1337
  --font-weight-toast-title: var(--font-weight-medium);
1338
+ --font-weight-tour-title: var(--font-weight-semibold);
1102
1339
  --font-weight-tree-view-label: var(--font-weight-medium);
1340
+ --gap-date-picker-calendar: var(--spacing-100);
1341
+ --gap-date-picker-control: var(--spacing-100);
1342
+ --gap-date-picker-footer: var(--spacing-100);
1343
+ --gap-date-picker-indicator: var(--spacing-50);
1344
+ --gap-date-picker-root: var(--spacing-form-field);
1345
+ --gap-date-picker-time: var(--spacing-100);
1346
+ --gap-file-upload-dropzone: var(--spacing-file-upload-comfortable);
1347
+ --gap-file-upload-item: var(--spacing-file-upload-content-gap);
1348
+ --gap-file-upload-item-group: var(--spacing-file-upload-content-gap);
1349
+ --gap-file-upload-root: var(--spacing-file-upload-comfortable);
1350
+ --height-date-picker-control-lg: var(--height-form-control-lg);
1351
+ --height-date-picker-control-md: var(--height-form-control-md);
1352
+ --height-date-picker-control-sm: var(--height-form-control-sm);
1353
+ --height-date-picker-day-lg: var(--size-date-picker-day-lg);
1354
+ --height-date-picker-day-md: var(--size-date-picker-day-md);
1355
+ --height-date-picker-day-sm: var(--size-date-picker-day-sm);
1356
+ --height-date-picker-day-timed: var(--size-date-picker-day-timed);
1357
+ --height-date-picker-time-field: var(--height-form-control-sm);
1358
+ --height-drawer-grabber-length: var(--dimension-40);
1359
+ --height-drawer-grabber-thickness: var(--dimension-4);
1360
+ --height-drawer-lg: var(--container-lg);
1361
+ --height-drawer-md: var(--container-md);
1362
+ --height-drawer-sm: var(--container-sm);
1363
+ --height-drawer-swipe-area: var(--dimension-16);
1364
+ --height-drawer-xl: var(--container-xl);
1365
+ --height-drawer-xs: var(--container-xs);
1103
1366
  --height-footer-divider: var(--border-md);
1104
1367
  --height-form-control-lg: var(--dimension-70);
1105
1368
  --height-form-control-md: var(--size-44);
@@ -1109,8 +1372,10 @@
1109
1372
  --height-numeric-input-md: var(--height-form-control-md);
1110
1373
  --height-numeric-input-sm: var(--height-form-control-sm);
1111
1374
  --height-pagination-lg: var(--dimension-48);
1112
- --height-pagination-md: var(--dimension-40);
1113
- --height-pagination-sm: var(--dimension-32);
1375
+ --height-pagination-md: var(--height-form-control-md);
1376
+ --height-pagination-sm: var(--height-form-control-sm);
1377
+ --height-sidebar-rail-indicator: var(--dimension-32);
1378
+ --height-sidebar-separator: var(--dimension-1);
1114
1379
  --height-skeleton-text-line: var(--size-16);
1115
1380
  --line-height-24: 1.5rem;
1116
1381
  --line-height-30: 1.88rem;
@@ -1124,11 +1389,19 @@
1124
1389
  --offset-shadow-1: 0px 1px 3px 0px;
1125
1390
  --offset-shadow-2: 0px 5px 6px 0px;
1126
1391
  --offset-shadow-3: 1px 1px 20px 0px;
1392
+ --opacity-date-picker-disabled: var(--opacity-disabled);
1393
+ --opacity-date-picker-outside: var(--opacity-disabled);
1127
1394
  --opacity-disabled: 60%;
1128
1395
  --opacity-disabled-placeholder: 30%;
1129
1396
  --opacity-placeholder: 60%;
1130
1397
  --opacity-text-secondary: 70%;
1131
1398
  --opacity-tree-view-indent: 100%;
1399
+ --outline-drawer-focus-offset: var(--default-ring-offset);
1400
+ --outline-drawer-focus-style: var(--default-ring-style);
1401
+ --outline-drawer-focus-width: var(--default-ring-width);
1402
+ --outline-sidebar-focus-offset: var(--default-ring-offset);
1403
+ --outline-sidebar-focus-style: var(--default-ring-style);
1404
+ --outline-sidebar-focus-width: var(--default-ring-width);
1132
1405
  --padding-accordion-content-x-lg: var(--dimension-30);
1133
1406
  --padding-accordion-content-x-md: var(--dimension-16);
1134
1407
  --padding-accordion-content-x-sm: var(--dimension-6);
@@ -1156,9 +1429,42 @@
1156
1429
  --padding-button-y-md: var(--dimension-6);
1157
1430
  --padding-button-y-sm: var(--dimension-4);
1158
1431
  --padding-carousel-control: var(--dimension-6);
1432
+ --padding-cascade-select-md: var(--spacing-150);
1433
+ --padding-cascade-select-sm: var(--spacing-100);
1434
+ --padding-command: var(--spacing-150);
1435
+ --padding-command-empty: var(--dimension-24);
1436
+ --padding-command-item-x: var(--padding-popup-item-x-md);
1437
+ --padding-command-item-y: var(--padding-popup-item-y-md);
1438
+ --padding-command-list: var(--padding-popup-viewport);
1439
+ --padding-data-table-detail: var(--spacing-300);
1440
+ --padding-data-table-empty: var(--spacing-700);
1441
+ --padding-data-table-filter-cell-x: var(--spacing-200);
1442
+ --padding-data-table-filter-cell-y: var(--spacing-100);
1443
+ --padding-data-table-pagination-x: var(--spacing-300);
1444
+ --padding-data-table-pagination-y: var(--spacing-200);
1445
+ --padding-data-table-toolbar-x: var(--spacing-300);
1446
+ --padding-data-table-toolbar-y: var(--spacing-200);
1447
+ --padding-date-picker-calendar-cell: var(--spacing-100);
1448
+ --padding-date-picker-content: var(--dimension-16);
1449
+ --padding-date-picker-content-timed: var(--dimension-10);
1450
+ --padding-date-picker-footer: var(--dimension-10);
1451
+ --padding-date-picker-range-separator: var(--spacing-100);
1452
+ --padding-date-picker-segment: var(--spacing-50);
1453
+ --padding-date-picker-segments-lg: var(--spacing-200);
1454
+ --padding-date-picker-segments-md: var(--spacing-150);
1455
+ --padding-date-picker-segments-sm: var(--spacing-100);
1456
+ --padding-date-picker-time: var(--dimension-10);
1457
+ --padding-date-picker-time-input: var(--spacing-50);
1159
1458
  --padding-dialog-actions-top: var(--dimension-10);
1160
1459
  --padding-dialog-close-trigger: var(--dimension-10);
1161
1460
  --padding-dialog-content: var(--dimension-40);
1461
+ --padding-drawer-body: var(--dimension-24);
1462
+ --padding-drawer-footer: var(--dimension-24);
1463
+ --padding-drawer-grabber: var(--dimension-8);
1464
+ --padding-drawer-header: var(--dimension-24);
1465
+ --padding-file-upload-dropzone-x: var(--spacing-file-upload-comfortable);
1466
+ --padding-file-upload-dropzone-y: var(--spacing-file-upload-content-gap);
1467
+ --padding-file-upload-item: var(--spacing-file-upload-content-gap);
1162
1468
  --padding-footer-bottom: var(--dimension-24);
1163
1469
  --padding-footer-bottom-lg: var(--dimension-36);
1164
1470
  --padding-footer-bottom-md: var(--dimension-24);
@@ -1173,6 +1479,8 @@
1173
1479
  --padding-header-item-lg: var(--dimension-16);
1174
1480
  --padding-header-item-md: var(--dimension-10);
1175
1481
  --padding-header-item-sm: var(--dimension-6);
1482
+ --padding-hotkeys-key-x: var(--spacing-100);
1483
+ --padding-hotkeys-key-y: var(--spacing-50);
1176
1484
  --padding-input-lg: var(--spacing-200);
1177
1485
  --padding-input-md: var(--spacing-150);
1178
1486
  --padding-input-sm: var(--spacing-100);
@@ -1215,6 +1523,11 @@
1215
1523
  --padding-select-trigger-x-sm: var(--dimension-6);
1216
1524
  --padding-select-trigger-y-md: var(--dimension-10);
1217
1525
  --padding-select-trigger-y-sm: var(--dimension-6);
1526
+ --padding-sidebar-content: var(--dimension-12);
1527
+ --padding-sidebar-content-compact: var(--dimension-8);
1528
+ --padding-sidebar-group-label: var(--dimension-8);
1529
+ --padding-sidebar-section: var(--dimension-16);
1530
+ --padding-sidebar-section-compact: var(--dimension-8);
1218
1531
  --padding-steps-trigger-x: var(--dimension-10);
1219
1532
  --padding-steps-trigger-y: var(--dimension-8);
1220
1533
  --padding-table-caption-lg: var(--dimension-16);
@@ -1248,6 +1561,8 @@
1248
1561
  --padding-tooltip-y-lg: var(--dimension-20);
1249
1562
  --padding-tooltip-y-md: var(--dimension-16);
1250
1563
  --padding-tooltip-y-sm: var(--dimension-10);
1564
+ --padding-tour: var(--dimension-20);
1565
+ --padding-tour-actions: var(--dimension-6);
1251
1566
  --radius-2xl: 2rem;
1252
1567
  --radius-accordion: var(--radius-sm);
1253
1568
  --radius-badge: var(--radius-sm);
@@ -1257,6 +1572,8 @@
1257
1572
  --radius-button-sm: var(--radius-sm);
1258
1573
  --radius-carousel: var(--radius-sm);
1259
1574
  --radius-carousel-indicator: var(--radius-full);
1575
+ --radius-cascade-select-md: var(--radius-form-control-md);
1576
+ --radius-cascade-select-sm: var(--radius-form-control-sm);
1260
1577
  --radius-checkbox: var(--radius-sm);
1261
1578
  --radius-checkbox-indeterminate: var(--radius-sm);
1262
1579
  --radius-color-select-full: var(--radius-full);
@@ -1267,10 +1584,24 @@
1267
1584
  --radius-combobox-lg: var(--radius-form-control-lg);
1268
1585
  --radius-combobox-md: var(--radius-form-control-md);
1269
1586
  --radius-combobox-sm: var(--radius-form-control-sm);
1587
+ --radius-command: var(--radius-popup);
1588
+ --radius-command-item: var(--radius-popup-item);
1589
+ --radius-data-table: var(--radius-table);
1590
+ --radius-date-picker-content: var(--radius-popover);
1591
+ --radius-date-picker-control-lg: var(--radius-form-control-lg);
1592
+ --radius-date-picker-control-md: var(--radius-form-control-md);
1593
+ --radius-date-picker-control-sm: var(--radius-form-control-sm);
1594
+ --radius-date-picker-day: var(--radius-button-sm);
1595
+ --radius-date-picker-time: var(--radius-form-control-sm);
1270
1596
  --radius-dialog-close-trigger: var(--radius-full);
1271
1597
  --radius-dialog-content-center: var(--radius-sm);
1272
1598
  --radius-dialog-content-edge: var(--radius-none);
1273
1599
  --radius-dialog-content-side: var(--radius-none);
1600
+ --radius-drawer-content: var(--radius-md);
1601
+ --radius-drawer-grabber: var(--radius-full);
1602
+ --radius-file-upload-dropzone: var(--radius-md);
1603
+ --radius-file-upload-item: var(--radius-md);
1604
+ --radius-file-upload-item-preview: var(--radius-sm);
1274
1605
  --radius-footer: var(--radius-none);
1275
1606
  --radius-form-control: var(--radius-md);
1276
1607
  --radius-form-control-lg: var(--radius-lg);
@@ -1278,6 +1609,7 @@
1278
1609
  --radius-form-control-sm: var(--radius-sm);
1279
1610
  --radius-full: 62.44rem;
1280
1611
  --radius-gallery-trigger: var(--radius-sm);
1612
+ --radius-hotkeys-key: var(--radius-sm);
1281
1613
  --radius-icon-control: var(--radius-sm);
1282
1614
  --radius-input: var(--radius-form-control);
1283
1615
  --radius-input-lg: var(--radius-form-control-lg);
@@ -1318,6 +1650,7 @@
1318
1650
  --radius-select-lg: var(--radius-form-control-lg);
1319
1651
  --radius-select-md: var(--radius-form-control-md);
1320
1652
  --radius-select-sm: var(--radius-form-control-sm);
1653
+ --radius-sidebar-rail: var(--radius-full);
1321
1654
  --radius-skeleton-text: var(--radius-sm);
1322
1655
  --radius-slider-thumb: var(--radius-full);
1323
1656
  --radius-slider-track: var(--radius-full);
@@ -1338,6 +1671,7 @@
1338
1671
  --radius-textarea-sm: var(--radius-form-control-sm);
1339
1672
  --radius-toast-root: var(--radius-sm);
1340
1673
  --radius-tooltip: var(--radius-md);
1674
+ --radius-tour: var(--radius-sm);
1341
1675
  --radius-tree-view: var(--radius-none);
1342
1676
  --radius-xs: 0.25rem;
1343
1677
  --ring-offset: 0.13rem;
@@ -1347,7 +1681,10 @@
1347
1681
  --shadow-accordion-root-md: var(--shadow-xl);
1348
1682
  --shadow-accordion-root-sm: var(--shadow-primary);
1349
1683
  --shadow-color-select: var(--shadow-sm);
1684
+ --shadow-data-table-outline: var(--shadow-table-outline);
1685
+ --shadow-date-picker-content: var(--shadow-popover);
1350
1686
  --shadow-dialog-content: var(--shadow-primary);
1687
+ --shadow-drawer-content: var(--shadow-xl);
1351
1688
  --shadow-gallery-trigger: var(--shadow-sm);
1352
1689
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
1353
1690
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -1360,6 +1697,7 @@
1360
1697
  --shadow-slider-thumb: var(--shadow-sm);
1361
1698
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
1362
1699
  --shadow-table-outline: var(--shadow-sm);
1700
+ --shadow-tour: var(--shadow-primary);
1363
1701
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
1364
1702
  --size-1: 0.06rem;
1365
1703
  --size-12: 0.75rem;
@@ -1393,6 +1731,13 @@
1393
1731
  --size-combobox-lg: var(--size-form-control-lg);
1394
1732
  --size-combobox-md: var(--size-form-control-md);
1395
1733
  --size-combobox-sm: var(--size-form-control-sm);
1734
+ --size-data-table-resize-handle: var(--spacing-100);
1735
+ --size-date-picker-day-lg: var(--dimension-36);
1736
+ --size-date-picker-day-md: var(--dimension-32);
1737
+ --size-date-picker-day-sm: var(--dimension-28);
1738
+ --size-date-picker-day-timed: var(--dimension-28);
1739
+ --size-date-picker-navigation: var(--size-icon-control-md);
1740
+ --size-date-picker-segment: var(--dimension-24);
1396
1741
  --size-dialog-content-max-width: var(--dimension-container-2xl);
1397
1742
  --size-dialog-x-lg: var(--dimension-container-lg);
1398
1743
  --size-dialog-x-md: var(--dimension-container-md);
@@ -1454,8 +1799,10 @@
1454
1799
  --spacing-150: 0.63rem;
1455
1800
  --spacing-200: 0.88rem;
1456
1801
  --spacing-250: 1.25rem;
1802
+ --spacing-300: 1.5rem;
1457
1803
  --spacing-400: 2.13rem;
1458
1804
  --spacing-50: 0.13rem;
1805
+ --spacing-700: 4rem;
1459
1806
  --spacing-breadcrumb-item: var(--dimension-10);
1460
1807
  --spacing-breadcrumb-lg: var(--dimension-16);
1461
1808
  --spacing-breadcrumb-link-lg: var(--spacing-200);
@@ -1474,6 +1821,8 @@
1474
1821
  --spacing-carousel-indicator: var(--dimension-6);
1475
1822
  --spacing-carousel-trigger-right: var(--dimension-6);
1476
1823
  --spacing-carousel-trigger-top: var(--dimension-6);
1824
+ --spacing-cascade-select: var(--spacing-form-field);
1825
+ --spacing-cascade-select-right: var(--dimension-40);
1477
1826
  --spacing-color-select-lg: var(--dimension-24);
1478
1827
  --spacing-color-select-md: var(--dimension-16);
1479
1828
  --spacing-color-select-sm: var(--dimension-6);
@@ -1485,9 +1834,28 @@
1485
1834
  --spacing-combobox-lg: var(--dimension-16);
1486
1835
  --spacing-combobox-md: var(--dimension-10);
1487
1836
  --spacing-combobox-sm: var(--dimension-6);
1837
+ --spacing-command-gap: var(--spacing-100);
1838
+ --spacing-command-item-gap: var(--spacing-popup-item-md);
1839
+ --spacing-command-list-max: var(--container-xs);
1840
+ --spacing-data-table-editor: var(--spacing-50);
1841
+ --spacing-data-table-filter-control: var(--spacing-100);
1842
+ --spacing-data-table-pagination: var(--size-16);
1843
+ --spacing-data-table-toolbar: var(--spacing-200);
1844
+ --spacing-date-picker-enter-offset: var(--spacing-50);
1488
1845
  --spacing-dialog-actions: var(--dimension-6);
1489
1846
  --spacing-dialog-close-trigger-offset: var(--dimension-20);
1490
1847
  --spacing-dialog-content: var(--dimension-20);
1848
+ --spacing-drawer-bleed: var(--dimension-48);
1849
+ --spacing-drawer-footer: var(--dimension-10);
1850
+ --spacing-drawer-header: var(--dimension-8);
1851
+ --spacing-drawer-indent-offset: var(--dimension-8);
1852
+ --spacing-file-upload-comfortable: var(--spacing-250);
1853
+ --spacing-file-upload-content-gap: var(--spacing-150);
1854
+ --spacing-file-upload-dropzone-base: var(--container-2xs);
1855
+ --spacing-file-upload-dropzone-min-height: var(--spacing-file-upload-dropzone-base);
1856
+ --spacing-file-upload-focus-offset: var(--default-ring-offset);
1857
+ --spacing-file-upload-item-preview: var(--spacing-file-upload-item-preview-base);
1858
+ --spacing-file-upload-item-preview-base: var(--dimension-40);
1491
1859
  --spacing-footer-container-lg: var(--dimension-44);
1492
1860
  --spacing-footer-container-md: var(--dimension-36);
1493
1861
  --spacing-footer-container-sm: var(--dimension-24);
@@ -1513,6 +1881,7 @@
1513
1881
  --spacing-header-nav-lg: var(--dimension-36);
1514
1882
  --spacing-header-nav-md: var(--dimension-24);
1515
1883
  --spacing-header-nav-sm: var(--dimension-16);
1884
+ --spacing-hotkeys-gap: var(--spacing-50);
1516
1885
  --spacing-label: var(--size-4);
1517
1886
  --spacing-menu-item: var(--spacing-popup-item-md);
1518
1887
  --spacing-menu-separator-margin: var(--spacing-popup-item-md);
@@ -1521,7 +1890,7 @@
1521
1890
  --spacing-numeric-input-lg: var(--dimension-0);
1522
1891
  --spacing-numeric-input-md: var(--dimension-0);
1523
1892
  --spacing-numeric-input-sm: var(--dimension-0);
1524
- --spacing-pagination-list: var(--dimension-16);
1893
+ --spacing-pagination-list: var(--size-4);
1525
1894
  --spacing-phone-input: var(--spacing-form-field);
1526
1895
  --spacing-phone-input-country-value: var(--dimension-8);
1527
1896
  --spacing-phone-input-item: var(--dimension-10);
@@ -1572,6 +1941,13 @@
1572
1941
  --spacing-select: var(--spacing-form-field);
1573
1942
  --spacing-select-content: var(--dimension-40);
1574
1943
  --spacing-select-right: var(--dimension-40);
1944
+ --spacing-sidebar-content: var(--dimension-16);
1945
+ --spacing-sidebar-group: var(--dimension-8);
1946
+ --spacing-sidebar-group-content: var(--dimension-4);
1947
+ --spacing-sidebar-menu: var(--dimension-4);
1948
+ --spacing-sidebar-offset: var(--dimension-0);
1949
+ --spacing-sidebar-rail: var(--dimension-0);
1950
+ --spacing-sidebar-section: var(--dimension-8);
1575
1951
  --spacing-skeleton-lg: var(--dimension-16);
1576
1952
  --spacing-skeleton-md: var(--dimension-10);
1577
1953
  --spacing-skeleton-sm: var(--dimension-6);
@@ -1611,6 +1987,12 @@
1611
1987
  --spacing-toast-content: var(--dimension-16);
1612
1988
  --spacing-toast-description: var(--dimension-6);
1613
1989
  --spacing-tooltip-arrow: var(--dimension-10);
1990
+ --spacing-tour-actions: var(--dimension-6);
1991
+ --spacing-tour-arrow: var(--dimension-10);
1992
+ --spacing-tour-close: var(--dimension-10);
1993
+ --spacing-tour-content: var(--dimension-10);
1994
+ --spacing-tour-title: var(--dimension-30);
1995
+ --spacing-tour-viewport: var(--dimension-16);
1614
1996
  --spacing-tree-view-icon: var(--dimension-10);
1615
1997
  --spacing-tree-view-indent-per-level: var(--dimension-6);
1616
1998
  --spacing-tree-view-indent-width: var(--size-1);
@@ -1652,6 +2034,18 @@
1652
2034
  --text-button-md: var(--text-md);
1653
2035
  --text-button-sm: var(--text-sm);
1654
2036
  --text-carousel-trigger: var(--text-md);
2037
+ --text-cascade-select-item-lg: var(--text-lg);
2038
+ --text-cascade-select-item-md: var(--text-md);
2039
+ --text-cascade-select-item-sm: var(--text-sm);
2040
+ --text-cascade-select-item-xs: var(--text-xs);
2041
+ --text-cascade-select-trigger-lg: var(--text-lg);
2042
+ --text-cascade-select-trigger-md: var(--text-md);
2043
+ --text-cascade-select-trigger-sm: var(--text-sm);
2044
+ --text-cascade-select-trigger-xs: var(--text-xs);
2045
+ --text-cascade-select-value-lg: var(--text-lg);
2046
+ --text-cascade-select-value-md: var(--text-md);
2047
+ --text-cascade-select-value-sm: var(--text-sm);
2048
+ --text-cascade-select-value-xs: var(--text-xs);
1655
2049
  --text-color-select-lg: var(--text-md);
1656
2050
  --text-color-select-md: var(--text-sm);
1657
2051
  --text-color-select-sm: var(--text-xs);
@@ -1662,8 +2056,23 @@
1662
2056
  --text-combobox-md: var(--text-md);
1663
2057
  --text-combobox-sm: var(--text-sm);
1664
2058
  --text-combobox-trigger: var(--text-lg);
2059
+ --text-command-md: var(--text-sm);
2060
+ --text-data-table-sm: var(--text-table-sm);
2061
+ --text-date-picker-content-lg: var(--text-sm);
2062
+ --text-date-picker-content-md: var(--text-sm);
2063
+ --text-date-picker-content-sm: var(--text-xs);
2064
+ --text-date-picker-lg: var(--text-lg);
2065
+ --text-date-picker-md: var(--text-md);
2066
+ --text-date-picker-sm: var(--text-sm);
2067
+ --text-date-picker-time-label: var(--text-xs);
2068
+ --text-date-picker-weekday: var(--text-xs);
1665
2069
  --text-dialog-description: var(--text-md);
1666
2070
  --text-dialog-title: var(--text-xl);
2071
+ --text-drawer-description: var(--text-sm);
2072
+ --text-drawer-title: var(--text-md);
2073
+ --text-file-upload-item: var(--text-md);
2074
+ --text-file-upload-item-size: var(--text-md);
2075
+ --text-file-upload-label: var(--text-sm);
1667
2076
  --text-footer-lg: var(--text-md);
1668
2077
  --text-footer-link-lg: var(--text-lg);
1669
2078
  --text-footer-link-md: var(--text-md);
@@ -1682,6 +2091,7 @@
1682
2091
  --text-header-lg: var(--text-lg);
1683
2092
  --text-header-md: var(--text-md);
1684
2093
  --text-header-sm: var(--text-sm);
2094
+ --text-hotkeys-sm: var(--text-xs);
1685
2095
  --text-icon-2xl: var(--text-2xl);
1686
2096
  --text-icon-control-lg: var(--text-icon-lg);
1687
2097
  --text-icon-control-md: var(--text-icon-md);
@@ -1714,6 +2124,9 @@
1714
2124
  --text-numeric-input-sm: var(--text-sm);
1715
2125
  --text-pagination-lg: var(--text-md);
1716
2126
  --text-pagination-md: var(--text-sm);
2127
+ --text-pagination-nav-lg: var(--text-lg);
2128
+ --text-pagination-nav-md: var(--text-md);
2129
+ --text-pagination-nav-sm: var(--text-sm);
1717
2130
  --text-pagination-sm: var(--text-xs);
1718
2131
  --text-phone-input-country-flag: var(--text-xs);
1719
2132
  --text-phone-input-lg: var(--text-lg);
@@ -1763,6 +2176,7 @@
1763
2176
  --text-select-value-md: var(--text-md);
1764
2177
  --text-select-value-sm: var(--text-sm);
1765
2178
  --text-select-value-xs: var(--text-xs);
2179
+ --text-sidebar-group-label: var(--text-xs);
1766
2180
  --text-slider-value: var(--text-sm);
1767
2181
  --text-slider-value-size: var(--text-sm);
1768
2182
  --text-sm: 0.88rem;
@@ -1807,6 +2221,9 @@
1807
2221
  --text-tooltip-lg: var(--text-md);
1808
2222
  --text-tooltip-md: var(--text-sm);
1809
2223
  --text-tooltip-sm: var(--text-xs);
2224
+ --text-tour-body: var(--text-base);
2225
+ --text-tour-progress: var(--text-base);
2226
+ --text-tour-title: var(--text-lg);
1810
2227
  --text-tree-view-icon-lg: var(--text-icon-lg);
1811
2228
  --text-tree-view-icon-md: var(--text-icon-md);
1812
2229
  --text-tree-view-icon-sm: var(--text-icon-sm);
@@ -1822,6 +2239,10 @@
1822
2239
  --text-xs: 0.75rem;
1823
2240
  --text-xs-max: var(--text-xs);
1824
2241
  --text-xs-min: 0.75rem;
2242
+ --width-date-picker-time-field: var(--dimension-40);
2243
+ --width-drawer-grabber-length: var(--dimension-40);
2244
+ --width-drawer-grabber-thickness: var(--dimension-4);
2245
+ --width-drawer-swipe-area: var(--dimension-16);
1825
2246
  --width-full: 100%;
1826
2247
  --width-header-max: var(--width-full);
1827
2248
  --width-numeric-input-lg: var(--size-44);
@@ -1829,4 +2250,8 @@
1829
2250
  --width-numeric-input-sm: var(--size-36);
1830
2251
  --width-product-card-image-max: var(--size-192);
1831
2252
  --width-product-card-image-min: var(--size-128);
2253
+ --width-sidebar-expanded: var(--container-3xs);
2254
+ --width-sidebar-icon: var(--dimension-56);
2255
+ --width-sidebar-rail: var(--dimension-12);
2256
+ --width-sidebar-rail-indicator: var(--dimension-2);
1832
2257
  }