@reliability-design/web 1.4.8 → 1.4.10

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 (54) hide show
  1. package/CHANGELOG.md +214 -0
  2. package/custom-elements.json +18600 -0
  3. package/dist/components/rel-accordion/README.md +9 -2
  4. package/dist/components/rel-alert/README.md +5 -8
  5. package/dist/components/rel-autocomplete/README.md +209 -208
  6. package/dist/components/rel-avatar/README.md +228 -118
  7. package/dist/components/rel-breadcrumb/README.md +1 -0
  8. package/dist/components/rel-button/README.md +9 -9
  9. package/dist/components/rel-calendar/README.md +111 -109
  10. package/dist/components/rel-cardmedia/README.md +1 -1
  11. package/dist/components/rel-carousel/README.md +187 -186
  12. package/dist/components/rel-checkbox/README.md +159 -146
  13. package/dist/components/rel-chip/README.md +141 -138
  14. package/dist/components/rel-container/README.md +1 -1
  15. package/dist/components/rel-date-picker/README.md +221 -200
  16. package/dist/components/rel-drawer/README.md +4 -4
  17. package/dist/components/rel-kbd/README.md +188 -141
  18. package/dist/components/rel-layout/README.md +34 -34
  19. package/dist/components/rel-menu/README.md +17 -10
  20. package/dist/components/rel-menubar/README.md +218 -218
  21. package/dist/components/rel-otp/README.md +4 -8
  22. package/dist/components/rel-pagination/README.md +141 -100
  23. package/dist/components/rel-popover/README.md +220 -203
  24. package/dist/components/rel-radio/README.md +142 -131
  25. package/dist/components/rel-range-picker/README.md +194 -165
  26. package/dist/components/rel-resizable/README.md +220 -199
  27. package/dist/components/rel-segmented-button/README.md +158 -156
  28. package/dist/components/rel-select/README.md +22 -16
  29. package/dist/components/rel-sheet/README.md +3 -2
  30. package/dist/components/rel-signature-pad/README.md +161 -0
  31. package/dist/components/rel-slider/README.md +140 -131
  32. package/dist/components/rel-snackbar/README.md +170 -168
  33. package/dist/components/rel-split-button/README.md +129 -0
  34. package/dist/components/rel-stepper/README.md +171 -162
  35. package/dist/components/rel-switch/README.md +122 -117
  36. package/dist/components/rel-tab/README.md +184 -173
  37. package/dist/components/rel-textfield/README.md +23 -30
  38. package/dist/components/rel-time-picker/README.md +188 -164
  39. package/dist/components/rel-toast/README.md +20 -11
  40. package/dist/components/rel-tooltip/README.md +5 -4
  41. package/dist/components/rel-tree/README.md +157 -0
  42. package/dist/components/rel-upload/README.md +8 -5
  43. package/dist/index.d.mts +1698 -607
  44. package/dist/index.d.ts +1698 -607
  45. package/dist/index.js +12276 -6347
  46. package/dist/index.js.map +1 -1
  47. package/dist/index.mjs +12218 -6296
  48. package/dist/index.mjs.map +1 -1
  49. package/dist/styles/motion.css +31 -0
  50. package/dist/styles/motion.tokens.json +38 -0
  51. package/dist/styles/vars.css +88 -64
  52. package/dist/{vars-DXX6QOAG.css → vars-E22LYFMV.css} +88 -64
  53. package/package.json +60 -37
  54. package/dist/styles/focus-ring.ts +0 -84
package/dist/styles/motion.css ADDED
@@ -0,0 +1,31 @@
1
+ /* AUTO-GENERATED from motion.tokens.json by packages/web/scripts/build-motion.mjs — do not edit. */
2
+ /* Motion v1 (new in 1.5.0): opt-in tokens; no component timing reads them yet. */
3
+ :root {
4
+ --rel-motion-duration-instant: 0ms;
5
+ --rel-motion-duration-fast: 100ms;
6
+ --rel-motion-duration-standard: 150ms;
7
+ --rel-motion-duration-moderate: 200ms;
8
+ --rel-motion-duration-slow: 250ms;
9
+ --rel-motion-duration-extended: 300ms;
10
+ --rel-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
11
+ --rel-motion-easing-enter: cubic-bezier(0, 0, 0, 1);
12
+ --rel-motion-easing-exit: cubic-bezier(0.3, 0, 1, 1);
13
+ --rel-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
14
+ --rel-motion-feedback-duration: var(--rel-motion-duration-standard);
15
+ --rel-motion-feedback-easing: var(--rel-motion-easing-standard);
16
+ --rel-motion-disclosure-duration: var(--rel-motion-duration-slow);
17
+ --rel-motion-disclosure-easing: var(--rel-motion-easing-standard);
18
+ --rel-motion-overlay-enter-duration: var(--rel-motion-duration-moderate);
19
+ --rel-motion-overlay-enter-easing: var(--rel-motion-easing-enter);
20
+ --rel-motion-overlay-exit-duration: var(--rel-motion-duration-standard);
21
+ --rel-motion-overlay-exit-easing: var(--rel-motion-easing-exit);
22
+ --rel-motion-loading-cycle: 1500ms;
23
+ }
24
+ @media (prefers-reduced-motion: reduce) {
25
+ :root {
26
+ --rel-motion-feedback-duration: 0ms;
27
+ --rel-motion-disclosure-duration: 0ms;
28
+ --rel-motion-overlay-enter-duration: 0ms;
29
+ --rel-motion-overlay-exit-duration: 0ms;
30
+ }
31
+ }
package/dist/styles/motion.tokens.json ADDED
@@ -0,0 +1,38 @@
1
+ {
2
+ "$description": "Motion v1: code-owned, additive foundation. Existing component timings are unchanged. Finite semantic durations reduce to zero under prefers-reduced-motion; loading still needs an explicit static alternative.",
3
+ "motion": {
4
+ "duration": {
5
+ "instant": { "$type": "duration", "$value": { "value": 0, "unit": "ms" } },
6
+ "fast": { "$type": "duration", "$value": { "value": 100, "unit": "ms" } },
7
+ "standard": { "$type": "duration", "$value": { "value": 150, "unit": "ms" } },
8
+ "moderate": { "$type": "duration", "$value": { "value": 200, "unit": "ms" } },
9
+ "slow": { "$type": "duration", "$value": { "value": 250, "unit": "ms" } },
10
+ "extended": { "$type": "duration", "$value": { "value": 300, "unit": "ms" } }
11
+ },
12
+ "easing": {
13
+ "standard": { "$type": "cubicBezier", "$value": [0.2, 0, 0, 1] },
14
+ "enter": { "$type": "cubicBezier", "$value": [0, 0, 0, 1] },
15
+ "exit": { "$type": "cubicBezier", "$value": [0.3, 0, 1, 1] },
16
+ "linear": { "$type": "cubicBezier", "$value": [0, 0, 1, 1] }
17
+ },
18
+ "feedback": {
19
+ "duration": { "$type": "duration", "$value": "{motion.duration.standard}" },
20
+ "easing": { "$type": "cubicBezier", "$value": "{motion.easing.standard}" }
21
+ },
22
+ "disclosure": {
23
+ "duration": { "$type": "duration", "$value": "{motion.duration.slow}" },
24
+ "easing": { "$type": "cubicBezier", "$value": "{motion.easing.standard}" }
25
+ },
26
+ "overlay-enter": {
27
+ "duration": { "$type": "duration", "$value": "{motion.duration.moderate}" },
28
+ "easing": { "$type": "cubicBezier", "$value": "{motion.easing.enter}" }
29
+ },
30
+ "overlay-exit": {
31
+ "duration": { "$type": "duration", "$value": "{motion.duration.standard}" },
32
+ "easing": { "$type": "cubicBezier", "$value": "{motion.easing.exit}" }
33
+ },
34
+ "loading": {
35
+ "cycle": { "$type": "duration", "$value": { "value": 1500, "unit": "ms" }, "$description": "Repeating indicator period, not a finite transition. Never zero this value to implement reduced motion; disable animation and retain a readable loading status." }
36
+ }
37
+ }
38
+ }
package/dist/styles/vars.css CHANGED
@@ -8,9 +8,9 @@
8
8
  --rel-colors-gray-50: #F7F7F7;
9
9
  --rel-colors-gray-100: #E5E5E5;
10
10
  --rel-colors-gray-200: #C2C2C2;
11
- --rel-colors-gray-300: #A3A3A3;
12
- --rel-colors-gray-400: #7D7D7D;
13
- --rel-colors-gray-500: #525252;
11
+ --rel-colors-gray-300: #989898;
12
+ --rel-colors-gray-400: #707070;
13
+ --rel-colors-gray-500: #575757;
14
14
  --rel-colors-gray-600: #404040;
15
15
  --rel-colors-gray-700: #2B2B2B;
16
16
  --rel-colors-gray-800: #1B1B1B;
@@ -22,7 +22,7 @@
22
22
  --rel-colors-green-50: #EDF8F4;
23
23
  --rel-colors-green-100: #D5F1E7;
24
24
  --rel-colors-green-200: #91D9BF;
25
- --rel-colors-green-300: #30B887;
25
+ --rel-colors-green-300: #60C9A3;
26
26
  --rel-colors-green-400: #30B887;
27
27
  --rel-colors-green-500: #00A86B;
28
28
  --rel-colors-green-600: #008655;
@@ -378,8 +378,6 @@
378
378
  --rel-shadows-lg: 0 8px 16px rgba(11,11,11,0.10);
379
379
  --rel-shadows-xl: 0 0 1px rgba(11,11,11,0.30), 0 16px 24px rgba(11,11,11,0.10);
380
380
  --rel-shadows-2xl: 0 0 1px rgba(11,11,11,0.30), 0 24px 40px rgba(11,11,11,0.10);
381
- /* --- shadow colour (ADDED: no Figma variable; drop-shadow() needs a bare color) --- */
382
- --rel-shadow-color: rgba(11,11,11,0.10);
383
381
  /* --- overlay (DEPRECATED alias — bind --rel-bg-overlay-scrim) --- */
384
382
  --rel-overlay-scrim: var(--rel-bg-overlay-scrim);
385
383
 
@@ -401,16 +399,16 @@
401
399
  --rel-bg-neutral-inverse-2: var(--rel-colors-gray-950);
402
400
  --rel-bg-brand: var(--rel-colors-brand-500);
403
401
  --rel-bg-danger-light: var(--rel-colors-red-50);
404
- --rel-bg-danger: var(--rel-colors-red-500);
402
+ --rel-bg-danger: var(--rel-colors-red-600);
405
403
  --rel-bg-danger-strong: var(--rel-colors-red-800);
406
404
  --rel-bg-warning-light: var(--rel-colors-yellow-100);
407
405
  --rel-bg-warning: var(--rel-colors-yellow-400);
408
406
  --rel-bg-warning-strong: var(--rel-colors-yellow-800);
409
407
  --rel-bg-info-light: var(--rel-colors-blue-50);
410
- --rel-bg-info: var(--rel-colors-blue-500);
408
+ --rel-bg-info: var(--rel-colors-blue-700);
411
409
  --rel-bg-info-strong: var(--rel-colors-blue-800);
412
410
  --rel-bg-success-light: var(--rel-colors-green-50);
413
- --rel-bg-success: var(--rel-colors-green-500);
411
+ --rel-bg-success: var(--rel-colors-green-600);
414
412
  --rel-bg-success-strong: var(--rel-colors-green-800);
415
413
  --rel-bg-overlay-scrim: var(--rel-colors-dark-alpha-8);
416
414
 
@@ -421,18 +419,18 @@
421
419
  --rel-text-label: var(--rel-colors-gray-700);
422
420
  --rel-text-body: var(--rel-colors-gray-600);
423
421
  --rel-text-caption: var(--rel-colors-gray-500);
424
- --rel-text-placeholder: var(--rel-colors-gray-300);
422
+ --rel-text-placeholder: var(--rel-colors-gray-400);
425
423
  --rel-text-disabled: var(--rel-colors-gray-200);
426
424
  --rel-text-inverse: var(--rel-colors-gray-0);
427
- --rel-text-danger: var(--rel-colors-red-600);
425
+ --rel-text-danger: var(--rel-colors-red-700);
428
426
  --rel-text-warning: var(--rel-colors-yellow-800);
429
- --rel-text-info: var(--rel-colors-blue-500);
430
- --rel-text-success: var(--rel-colors-green-600);
427
+ --rel-text-info: var(--rel-colors-blue-700);
428
+ --rel-text-success: var(--rel-colors-green-700);
431
429
 
432
430
  /* --- border --- */
433
- --rel-border-default: var(--rel-colors-gray-100);
434
- --rel-border-subtle: var(--rel-colors-gray-50);
435
- --rel-border-accent: var(--rel-colors-gray-200);
431
+ --rel-border-default: var(--rel-colors-gray-400);
432
+ --rel-border-subtle: var(--rel-colors-gray-100);
433
+ --rel-border-accent: var(--rel-colors-gray-500);
436
434
  --rel-border-strong: var(--rel-colors-gray-950);
437
435
  --rel-border-inverse: var(--rel-colors-gray-0);
438
436
  --rel-border-brand: var(--rel-colors-brand-500);
@@ -440,7 +438,7 @@
440
438
  --rel-border-success: var(--rel-colors-green-500);
441
439
  --rel-border-success-strong: var(--rel-colors-green-800);
442
440
  --rel-border-danger-subtle: var(--rel-colors-red-100);
443
- --rel-border-danger: var(--rel-colors-red-500);
441
+ --rel-border-danger: var(--rel-colors-red-600);
444
442
  --rel-border-danger-strong: var(--rel-colors-red-800);
445
443
  --rel-border-warning-subtle: var(--rel-colors-yellow-100);
446
444
  --rel-border-warning: var(--rel-colors-yellow-500);
@@ -449,6 +447,7 @@
449
447
  --rel-border-focus-static: var(--rel-colors-gray-100);
450
448
  --rel-border-focus-subtle: var(--rel-colors-gray-100);
451
449
  --rel-border-focus-inner: var(--rel-colors-gray-0);
450
+ --rel-border-info: var(--rel-colors-blue-500);
452
451
 
453
452
  /* --- action --- */
454
453
  --rel-action-overlay-hover: var(--rel-colors-dark-alpha-1);
@@ -458,8 +457,8 @@
458
457
  --rel-action-overlay-hover-inverse: var(--rel-colors-light-alpha-4);
459
458
  --rel-action-neutral-static-hover: var(--rel-colors-light-alpha-1);
460
459
  --rel-action-neutral-fill: var(--rel-colors-gray-950);
461
- --rel-action-neutral-fill-hover: var(--rel-colors-gray-700);
462
- --rel-action-neutral-fill-dragged: var(--rel-colors-gray-600);
460
+ --rel-action-neutral-fill-hover: var(--rel-colors-gray-600);
461
+ --rel-action-neutral-fill-dragged: var(--rel-colors-gray-700);
463
462
  --rel-action-neutral-subtle: var(--rel-colors-gray-50);
464
463
  --rel-action-neutral-subtle-hover: var(--rel-colors-gray-50);
465
464
  --rel-action-neutral-subtle-dragged: var(--rel-colors-gray-100);
@@ -472,35 +471,35 @@
472
471
  --rel-action-neutral-label-icons-link-hover: var(--rel-colors-gray-600);
473
472
  --rel-action-neutral-border-subtle-hover: var(--rel-colors-gray-100);
474
473
  --rel-action-neutral-border-subtle-dragged: var(--rel-colors-gray-200);
475
- --rel-action-neutral-border-outline: var(--rel-colors-gray-300);
474
+ --rel-action-neutral-border-outline: var(--rel-colors-gray-400);
476
475
  --rel-action-neutral-border-outline-hover: var(--rel-colors-gray-950);
477
476
  --rel-action-brand-fill: var(--rel-colors-brand-500);
478
477
  --rel-action-brand-fill-hover: var(--rel-colors-brand-600);
479
478
  --rel-action-brand-fill-disabled: var(--rel-colors-gray-200);
480
479
  --rel-action-brand-label-icons-primary: var(--rel-colors-gray-950);
481
- --rel-action-danger-fill: var(--rel-colors-red-500);
482
- --rel-action-danger-fill-hover: var(--rel-colors-red-600);
483
- --rel-action-danger-fill-dragged: var(--rel-colors-red-400);
480
+ --rel-action-danger-fill: var(--rel-colors-red-600);
481
+ --rel-action-danger-fill-hover: var(--rel-colors-red-700);
482
+ --rel-action-danger-fill-dragged: var(--rel-colors-red-800);
484
483
  --rel-action-danger-subtle: var(--rel-colors-red-50);
485
484
  --rel-action-danger-subtle-hover: var(--rel-colors-red-50);
486
485
  --rel-action-danger-subtle-dragged: var(--rel-colors-red-100);
487
486
  --rel-action-danger-outline-hover: var(--rel-colors-red-50);
488
487
  --rel-action-danger-ghost-hover: var(--rel-colors-red-50);
489
488
  --rel-action-danger-label-icons-fill: var(--rel-colors-gray-0);
490
- --rel-action-danger-label-icons-subtle: var(--rel-colors-red-600);
491
- --rel-action-danger-label-icons-subtle-hover: var(--rel-colors-red-600);
492
- --rel-action-danger-label-icons-subtle-dragged: var(--rel-colors-red-700);
493
- --rel-action-danger-label-icons-outline: var(--rel-colors-red-600);
494
- --rel-action-danger-label-icons-ghost: var(--rel-colors-red-600);
495
- --rel-action-danger-label-icons-link: var(--rel-colors-red-600);
496
- --rel-action-danger-label-icons-link-hover: var(--rel-colors-red-600);
489
+ --rel-action-danger-label-icons-subtle: var(--rel-colors-red-700);
490
+ --rel-action-danger-label-icons-subtle-hover: var(--rel-colors-red-700);
491
+ --rel-action-danger-label-icons-subtle-dragged: var(--rel-colors-red-800);
492
+ --rel-action-danger-label-icons-outline: var(--rel-colors-red-700);
493
+ --rel-action-danger-label-icons-ghost: var(--rel-colors-red-700);
494
+ --rel-action-danger-label-icons-link: var(--rel-colors-red-700);
495
+ --rel-action-danger-label-icons-link-hover: var(--rel-colors-red-800);
497
496
  --rel-action-danger-border-subtle-hover: var(--rel-colors-red-100);
498
497
  --rel-action-danger-border-subtle-dragged: var(--rel-colors-red-200);
499
498
  --rel-action-danger-border-outline: var(--rel-colors-red-100);
500
499
  --rel-action-danger-border-outline-hover: var(--rel-colors-red-600);
501
500
  --rel-action-warning-fill: var(--rel-colors-yellow-400);
502
- --rel-action-warning-fill-hover: var(--rel-colors-yellow-500);
503
- --rel-action-warning-fill-dragged: var(--rel-colors-yellow-300);
501
+ --rel-action-warning-fill-hover: var(--rel-colors-yellow-300);
502
+ --rel-action-warning-fill-dragged: var(--rel-colors-yellow-500);
504
503
  --rel-action-warning-subtle: var(--rel-colors-yellow-100);
505
504
  --rel-action-warning-subtle-hover: var(--rel-colors-yellow-100);
506
505
  --rel-action-warning-subtle-dragged: var(--rel-colors-yellow-200);
@@ -510,23 +509,23 @@
510
509
  --rel-action-warning-label-icons-subtle-dragged: var(--rel-colors-yellow-900);
511
510
  --rel-action-warning-border-subtle-hover: var(--rel-colors-yellow-300);
512
511
  --rel-action-warning-border-subtle-dragged: var(--rel-colors-yellow-300);
513
- --rel-action-success-fill: var(--rel-colors-green-500);
514
- --rel-action-success-fill-hover: var(--rel-colors-green-600);
515
- --rel-action-success-fill-dragged: var(--rel-colors-green-400);
512
+ --rel-action-success-fill: var(--rel-colors-green-600);
513
+ --rel-action-success-fill-hover: var(--rel-colors-green-700);
514
+ --rel-action-success-fill-dragged: var(--rel-colors-green-800);
516
515
  --rel-action-success-subtle: var(--rel-colors-green-50);
517
516
  --rel-action-success-subtle-hover: var(--rel-colors-green-50);
518
517
  --rel-action-success-subtle-dragged: var(--rel-colors-green-100);
519
518
  --rel-action-success-outline-hover: var(--rel-colors-green-300);
520
519
  --rel-action-success-ghost-hover: var(--rel-colors-green-50);
521
520
  --rel-action-success-label-icons-fill: var(--rel-colors-gray-0);
522
- --rel-action-success-label-icons-subtle: var(--rel-colors-green-600);
523
- --rel-action-success-label-icons-subtle-hover: var(--rel-colors-green-600);
524
- --rel-action-success-label-icons-subtle-dragged: var(--rel-colors-green-700);
521
+ --rel-action-success-label-icons-subtle: var(--rel-colors-green-700);
522
+ --rel-action-success-label-icons-subtle-hover: var(--rel-colors-green-700);
523
+ --rel-action-success-label-icons-subtle-dragged: var(--rel-colors-green-800);
525
524
  --rel-action-success-border-subtle-hover: var(--rel-colors-green-200);
526
525
  --rel-action-success-border-subtle-dragged: var(--rel-colors-green-200);
527
- --rel-action-info-fill: var(--rel-colors-blue-500);
528
- --rel-action-info-fill-hover: var(--rel-colors-blue-600);
529
- --rel-action-info-fill-dragged: var(--rel-colors-blue-400);
526
+ --rel-action-info-fill: var(--rel-colors-blue-700);
527
+ --rel-action-info-fill-hover: var(--rel-colors-blue-800);
528
+ --rel-action-info-fill-dragged: var(--rel-colors-blue-900);
530
529
  --rel-action-info-subtle: var(--rel-colors-blue-50);
531
530
  --rel-action-info-subtle-hover: var(--rel-colors-blue-50);
532
531
  --rel-action-info-subtle-dragged: var(--rel-colors-blue-100);
@@ -537,8 +536,8 @@
537
536
  --rel-action-info-border-subtle-hover: var(--rel-colors-blue-200);
538
537
  --rel-action-info-border-subtle-dragged: var(--rel-colors-blue-300);
539
538
 
540
- /* --- additions --- */
541
- --rel-border-info: var(--rel-colors-blue-500); /* ADDED: no V2 borders/info — aligned to info fill */
539
+ /* --- shadow --- */
540
+ --rel-shadow-color: var(--rel-colors-dark-alpha-3);
542
541
  }
543
542
 
544
543
  :root[data-theme="dark"], .dark {
@@ -555,12 +554,12 @@
555
554
  --rel-bg-page: var(--rel-colors-gray-900);
556
555
  --rel-bg-page-inverse: var(--rel-colors-gray-0);
557
556
  --rel-bg-surface: var(--rel-colors-gray-800);
558
- --rel-bg-surface-elevated: var(--rel-colors-gray-900);
557
+ --rel-bg-surface-elevated: var(--rel-colors-gray-700);
559
558
  --rel-bg-surface-inverse: var(--rel-colors-gray-0);
560
559
  --rel-bg-neutral: var(--rel-colors-gray-800);
561
560
  --rel-bg-neutral-elevated-1: var(--rel-colors-gray-700);
562
561
  --rel-bg-neutral-elevated-2: var(--rel-colors-gray-600);
563
- --rel-bg-neutral-elevated-3: var(--rel-colors-gray-400);
562
+ --rel-bg-neutral-elevated-3: var(--rel-colors-gray-500);
564
563
  --rel-bg-neutral-inverse-1: var(--rel-colors-gray-100);
565
564
  --rel-bg-neutral-inverse-2: var(--rel-colors-gray-0);
566
565
  --rel-bg-danger-light: var(--rel-colors-red-900);
@@ -568,25 +567,23 @@
568
567
  --rel-bg-warning-light: var(--rel-colors-yellow-900);
569
568
  --rel-bg-warning-strong: var(--rel-colors-yellow-100);
570
569
  --rel-bg-info-light: var(--rel-colors-blue-900);
571
- --rel-bg-info: var(--rel-colors-blue-400);
572
570
  --rel-bg-info-strong: var(--rel-colors-blue-100);
573
571
  --rel-bg-success-light: var(--rel-colors-green-900);
574
572
  --rel-bg-success-strong: var(--rel-colors-green-100);
575
573
  --rel-bg-overlay-scrim: var(--rel-colors-dark-alpha-10);
576
574
  --rel-text-default: var(--rel-colors-gray-0);
577
- --rel-text-label: var(--rel-colors-gray-200);
578
- --rel-text-body: var(--rel-colors-gray-200);
579
- --rel-text-caption: var(--rel-colors-gray-300);
580
- --rel-text-placeholder: var(--rel-colors-gray-400);
575
+ --rel-text-label: var(--rel-colors-gray-50);
576
+ --rel-text-body: var(--rel-colors-gray-100);
577
+ --rel-text-caption: var(--rel-colors-gray-200);
578
+ --rel-text-placeholder: var(--rel-colors-gray-300);
581
579
  --rel-text-disabled: var(--rel-colors-gray-500);
582
580
  --rel-text-inverse: var(--rel-colors-gray-950);
583
581
  --rel-text-danger: var(--rel-colors-red-300);
584
582
  --rel-text-warning: var(--rel-colors-yellow-400);
585
583
  --rel-text-info: var(--rel-colors-blue-400);
586
584
  --rel-text-success: var(--rel-colors-green-300);
587
- --rel-border-default: var(--rel-colors-gray-700);
588
- --rel-border-subtle: var(--rel-colors-gray-800);
589
- --rel-border-accent: var(--rel-colors-gray-500);
585
+ --rel-border-subtle: var(--rel-colors-gray-700);
586
+ --rel-border-accent: var(--rel-colors-gray-300);
590
587
  --rel-border-strong: var(--rel-colors-gray-0);
591
588
  --rel-border-inverse: var(--rel-colors-gray-950);
592
589
  --rel-border-success-subtle: var(--rel-colors-green-800);
@@ -601,6 +598,7 @@
601
598
  --rel-border-focus: var(--rel-colors-gray-0);
602
599
  --rel-border-focus-subtle: var(--rel-colors-gray-700);
603
600
  --rel-border-focus-inner: var(--rel-colors-gray-900);
601
+ --rel-border-info: var(--rel-colors-blue-400);
604
602
  --rel-action-overlay-hover: var(--rel-colors-light-alpha-1);
605
603
  --rel-action-overlay-hover-strong: var(--rel-colors-light-alpha-2);
606
604
  --rel-action-overlay-pressed: var(--rel-colors-light-alpha-3);
@@ -618,10 +616,9 @@
618
616
  --rel-action-neutral-label-icons-outline: var(--rel-colors-gray-0);
619
617
  --rel-action-neutral-label-icons-ghost: var(--rel-colors-gray-0);
620
618
  --rel-action-neutral-label-icons-link: var(--rel-colors-gray-0);
621
- --rel-action-neutral-label-icons-link-hover: var(--rel-colors-gray-0);
619
+ --rel-action-neutral-label-icons-link-hover: var(--rel-colors-gray-200);
622
620
  --rel-action-neutral-border-subtle-hover: var(--rel-colors-gray-600);
623
621
  --rel-action-neutral-border-subtle-dragged: var(--rel-colors-gray-500);
624
- --rel-action-neutral-border-outline: var(--rel-colors-gray-400);
625
622
  --rel-action-neutral-border-outline-hover: var(--rel-colors-gray-0);
626
623
  --rel-action-brand-fill-disabled: var(--rel-colors-gray-600);
627
624
  --rel-action-danger-subtle: var(--rel-colors-red-900);
@@ -641,7 +638,8 @@
641
638
  --rel-action-danger-border-outline: var(--rel-colors-red-700);
642
639
  --rel-action-danger-border-outline-hover: var(--rel-colors-red-400);
643
640
  --rel-action-warning-fill: var(--rel-colors-yellow-500);
644
- --rel-action-warning-fill-dragged: var(--rel-colors-yellow-400);
641
+ --rel-action-warning-fill-hover: var(--rel-colors-yellow-400);
642
+ --rel-action-warning-fill-dragged: var(--rel-colors-yellow-600);
645
643
  --rel-action-warning-subtle: var(--rel-colors-yellow-900);
646
644
  --rel-action-warning-subtle-hover: var(--rel-colors-yellow-900);
647
645
  --rel-action-warning-subtle-dragged: var(--rel-colors-yellow-800);
@@ -650,9 +648,6 @@
650
648
  --rel-action-warning-label-icons-subtle-dragged: var(--rel-colors-yellow-50);
651
649
  --rel-action-warning-border-subtle-hover: var(--rel-colors-yellow-800);
652
650
  --rel-action-warning-border-subtle-dragged: var(--rel-colors-yellow-700);
653
- --rel-action-success-fill: var(--rel-colors-green-600);
654
- --rel-action-success-fill-hover: var(--rel-colors-green-700);
655
- --rel-action-success-fill-dragged: var(--rel-colors-green-500);
656
651
  --rel-action-success-subtle: var(--rel-colors-green-900);
657
652
  --rel-action-success-subtle-hover: var(--rel-colors-green-900);
658
653
  --rel-action-success-subtle-dragged: var(--rel-colors-green-800);
@@ -663,9 +658,6 @@
663
658
  --rel-action-success-label-icons-subtle-dragged: var(--rel-colors-green-50);
664
659
  --rel-action-success-border-subtle-hover: var(--rel-colors-green-800);
665
660
  --rel-action-success-border-subtle-dragged: var(--rel-colors-green-700);
666
- --rel-action-info-fill: var(--rel-colors-blue-600);
667
- --rel-action-info-fill-hover: var(--rel-colors-blue-700);
668
- --rel-action-info-fill-dragged: var(--rel-colors-blue-500);
669
661
  --rel-action-info-subtle: var(--rel-colors-blue-900);
670
662
  --rel-action-info-subtle-hover: var(--rel-colors-blue-900);
671
663
  --rel-action-info-subtle-dragged: var(--rel-colors-blue-800);
@@ -674,8 +666,6 @@
674
666
  --rel-action-info-label-icons-subtle-dragged: var(--rel-colors-blue-50);
675
667
  --rel-action-info-border-subtle-hover: var(--rel-colors-blue-800);
676
668
  --rel-action-info-border-subtle-dragged: var(--rel-colors-blue-700);
677
-
678
- --rel-border-info: var(--rel-colors-blue-400); /* ADDED */
679
669
  }
680
670
 
681
671
  /* ==================== V1 COMPAT — DEPRECATED ALIAS BLOCK ====================
@@ -890,3 +880,37 @@
890
880
  --rel-color-text-link: #66B3FF;
891
881
  --rel-color-text-link-hover: #99CCFF;
892
882
  }
883
+
884
+ /* MOTION FOUNDATION START */
885
+ /* AUTO-GENERATED from motion.tokens.json by packages/web/scripts/build-motion.mjs — do not edit. */
886
+ /* Motion v1 (new in 1.5.0): opt-in tokens; no component timing reads them yet. */
887
+ :root {
888
+ --rel-motion-duration-instant: 0ms;
889
+ --rel-motion-duration-fast: 100ms;
890
+ --rel-motion-duration-standard: 150ms;
891
+ --rel-motion-duration-moderate: 200ms;
892
+ --rel-motion-duration-slow: 250ms;
893
+ --rel-motion-duration-extended: 300ms;
894
+ --rel-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
895
+ --rel-motion-easing-enter: cubic-bezier(0, 0, 0, 1);
896
+ --rel-motion-easing-exit: cubic-bezier(0.3, 0, 1, 1);
897
+ --rel-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
898
+ --rel-motion-feedback-duration: var(--rel-motion-duration-standard);
899
+ --rel-motion-feedback-easing: var(--rel-motion-easing-standard);
900
+ --rel-motion-disclosure-duration: var(--rel-motion-duration-slow);
901
+ --rel-motion-disclosure-easing: var(--rel-motion-easing-standard);
902
+ --rel-motion-overlay-enter-duration: var(--rel-motion-duration-moderate);
903
+ --rel-motion-overlay-enter-easing: var(--rel-motion-easing-enter);
904
+ --rel-motion-overlay-exit-duration: var(--rel-motion-duration-standard);
905
+ --rel-motion-overlay-exit-easing: var(--rel-motion-easing-exit);
906
+ --rel-motion-loading-cycle: 1500ms;
907
+ }
908
+ @media (prefers-reduced-motion: reduce) {
909
+ :root {
910
+ --rel-motion-feedback-duration: 0ms;
911
+ --rel-motion-disclosure-duration: 0ms;
912
+ --rel-motion-overlay-enter-duration: 0ms;
913
+ --rel-motion-overlay-exit-duration: 0ms;
914
+ }
915
+ }
916
+ /* MOTION FOUNDATION END */