@adia-ai/web-components 0.6.32 → 0.6.34

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 (164) hide show
  1. package/CHANGELOG.md +44 -0
  2. package/components/accordion/accordion.css +2 -2
  3. package/components/action-list/action-list.css +2 -2
  4. package/components/agent-artifact/agent-artifact.css +31 -31
  5. package/components/agent-feedback-bar/agent-feedback-bar.css +10 -10
  6. package/components/agent-questions/agent-questions.css +57 -57
  7. package/components/agent-reasoning/agent-reasoning.css +62 -62
  8. package/components/agent-suggestions/agent-suggestions.css +4 -4
  9. package/components/agent-trace/agent-trace.css +53 -53
  10. package/components/alert/alert.css +41 -41
  11. package/components/avatar/avatar.css +27 -27
  12. package/components/badge/badge.css +27 -27
  13. package/components/block/block.css +16 -16
  14. package/components/breadcrumb/breadcrumb.css +23 -23
  15. package/components/button/button.css +101 -91
  16. package/components/calendar-grid/calendar-grid.a2ui.json +136 -0
  17. package/components/calendar-grid/calendar-grid.css +226 -0
  18. package/components/calendar-grid/calendar-grid.d.ts +37 -0
  19. package/components/calendar-grid/calendar-grid.js +17 -0
  20. package/components/calendar-grid/calendar-grid.yaml +116 -0
  21. package/components/calendar-grid/class.js +300 -0
  22. package/components/calendar-picker/calendar-picker.css +139 -139
  23. package/components/canvas/canvas.css +12 -12
  24. package/components/card/card.css +83 -83
  25. package/components/chart/chart.css +224 -224
  26. package/components/chart-legend/chart-legend.css +26 -26
  27. package/components/check/check.css +40 -40
  28. package/components/code/code.css +125 -125
  29. package/components/col/col.css +15 -15
  30. package/components/color-picker/color-picker.css +55 -55
  31. package/components/combobox/class.js +861 -0
  32. package/components/combobox/combobox.a2ui.json +363 -0
  33. package/components/combobox/combobox.css +244 -0
  34. package/components/combobox/combobox.d.ts +113 -0
  35. package/components/combobox/combobox.examples.md +59 -0
  36. package/components/combobox/combobox.js +17 -0
  37. package/components/combobox/combobox.test.js +181 -0
  38. package/components/combobox/combobox.yaml +369 -0
  39. package/components/command/command.css +90 -90
  40. package/components/date-range-picker/class.js +775 -0
  41. package/components/date-range-picker/date-range-picker.a2ui.json +300 -0
  42. package/components/date-range-picker/date-range-picker.css +178 -0
  43. package/components/date-range-picker/date-range-picker.d.ts +82 -0
  44. package/components/date-range-picker/date-range-picker.examples.md +37 -0
  45. package/components/date-range-picker/date-range-picker.js +17 -0
  46. package/components/date-range-picker/date-range-picker.test.js +387 -0
  47. package/components/date-range-picker/date-range-picker.yaml +285 -0
  48. package/components/datetime-picker/class.js +706 -0
  49. package/components/datetime-picker/datetime-picker.a2ui.json +334 -0
  50. package/components/datetime-picker/datetime-picker.css +150 -0
  51. package/components/datetime-picker/datetime-picker.d.ts +86 -0
  52. package/components/datetime-picker/datetime-picker.examples.md +46 -0
  53. package/components/datetime-picker/datetime-picker.js +17 -0
  54. package/components/datetime-picker/datetime-picker.test.js +454 -0
  55. package/components/datetime-picker/datetime-picker.yaml +332 -0
  56. package/components/demo-toggle/demo-toggle.css +27 -27
  57. package/components/description-list/description-list.css +18 -18
  58. package/components/divider/divider.css +24 -24
  59. package/components/embed/embed.css +6 -6
  60. package/components/empty-state/empty-state.css +27 -27
  61. package/components/feed/feed.css +12 -12
  62. package/components/field/field.css +37 -28
  63. package/components/field/field.test.js +32 -0
  64. package/components/fields/fields.css +5 -5
  65. package/components/grid/grid.css +5 -5
  66. package/components/heatmap/heatmap.css +63 -63
  67. package/components/icon/icon.css +12 -12
  68. package/components/image/image.css +14 -14
  69. package/components/index.js +8 -0
  70. package/components/input/input.css +66 -66
  71. package/components/inspector/inspector.css +6 -6
  72. package/components/integration-card/class.js +410 -0
  73. package/components/integration-card/integration-card.a2ui.json +268 -0
  74. package/components/integration-card/integration-card.css +169 -0
  75. package/components/integration-card/integration-card.d.ts +63 -0
  76. package/components/integration-card/integration-card.examples.md +41 -0
  77. package/components/integration-card/integration-card.js +17 -0
  78. package/components/integration-card/integration-card.test.js +306 -0
  79. package/components/integration-card/integration-card.yaml +280 -0
  80. package/components/kbd/kbd.css +32 -32
  81. package/components/link/link.css +12 -12
  82. package/components/list/list.css +8 -8
  83. package/components/list-window/class.js +688 -0
  84. package/components/list-window/list-window.a2ui.json +277 -0
  85. package/components/list-window/list-window.css +124 -0
  86. package/components/list-window/list-window.d.ts +84 -0
  87. package/components/list-window/list-window.examples.md +73 -0
  88. package/components/list-window/list-window.js +17 -0
  89. package/components/list-window/list-window.test.js +303 -0
  90. package/components/list-window/list-window.yaml +270 -0
  91. package/components/menu/menu.css +8 -8
  92. package/components/modal/modal.css +43 -43
  93. package/components/nav/nav.css +40 -40
  94. package/components/nav-group/nav-group.css +52 -52
  95. package/components/nav-item/nav-item.css +44 -44
  96. package/components/noodles/noodles.css +31 -31
  97. package/components/option-card/option-card.css +69 -69
  98. package/components/otp-input/otp-input.css +30 -30
  99. package/components/page/page.css +18 -18
  100. package/components/pagination/pagination.css +61 -61
  101. package/components/pane/pane.css +57 -57
  102. package/components/pipeline-status/pipeline-status.css +65 -65
  103. package/components/popover/popover.css +17 -17
  104. package/components/progress/progress.css +23 -23
  105. package/components/progress-row/progress-row.css +17 -17
  106. package/components/radio/radio.css +39 -39
  107. package/components/range/range.css +55 -55
  108. package/components/rating/rating.css +28 -28
  109. package/components/richtext/richtext.css +133 -133
  110. package/components/row/row.css +19 -19
  111. package/components/search/search.css +5 -5
  112. package/components/segment/segment.css +24 -24
  113. package/components/segmented/segmented.css +25 -25
  114. package/components/select/select.css +84 -84
  115. package/components/skeleton/skeleton.css +14 -14
  116. package/components/slider/slider.css +46 -46
  117. package/components/spinner/class.js +69 -0
  118. package/components/spinner/spinner.a2ui.json +197 -0
  119. package/components/spinner/spinner.css +165 -0
  120. package/components/spinner/spinner.d.ts +26 -0
  121. package/components/spinner/spinner.examples.md +26 -0
  122. package/components/spinner/spinner.js +17 -0
  123. package/components/spinner/spinner.test.js +234 -0
  124. package/components/spinner/spinner.yaml +230 -0
  125. package/components/stack/stack.css +11 -11
  126. package/components/stat/stat.css +25 -25
  127. package/components/step-progress/step-progress.css +20 -20
  128. package/components/stepper/stepper.css +29 -29
  129. package/components/stream/stream.css +12 -12
  130. package/components/swatch/swatch.css +68 -68
  131. package/components/swiper/swiper.css +57 -57
  132. package/components/switch/switch.css +52 -52
  133. package/components/table/class.js +9 -0
  134. package/components/table/table.a2ui.json +1 -1
  135. package/components/table/table.css +162 -162
  136. package/components/table/table.d.ts +1 -1
  137. package/components/table/table.test.js +53 -0
  138. package/components/table/table.yaml +13 -1
  139. package/components/table-toolbar/table-toolbar.css +32 -32
  140. package/components/tabs/tabs.css +51 -51
  141. package/components/tag/tag.css +48 -48
  142. package/components/text/text.css +44 -44
  143. package/components/textarea/textarea.css +46 -46
  144. package/components/time-picker/class.js +693 -0
  145. package/components/time-picker/time-picker.a2ui.json +267 -0
  146. package/components/time-picker/time-picker.css +122 -0
  147. package/components/time-picker/time-picker.d.ts +75 -0
  148. package/components/time-picker/time-picker.examples.md +35 -0
  149. package/components/time-picker/time-picker.js +17 -0
  150. package/components/time-picker/time-picker.test.js +287 -0
  151. package/components/time-picker/time-picker.yaml +256 -0
  152. package/components/timeline/timeline.css +50 -50
  153. package/components/toast/toast.css +58 -58
  154. package/components/toggle-group/toggle-group.css +6 -6
  155. package/components/toggle-scheme/toggle-scheme.css +2 -2
  156. package/components/toolbar/toolbar.css +17 -17
  157. package/components/tooltip/tooltip.css +2 -2
  158. package/components/tree/tree.css +37 -37
  159. package/components/upload/upload.css +49 -49
  160. package/dist/icons-manifest.js +3 -3
  161. package/dist/web-components.min.css +1 -1
  162. package/dist/web-components.min.js +121 -83
  163. package/package.json +1 -1
  164. package/styles/components.css +8 -0
package/components/range/range.css CHANGED
@@ -2,44 +2,44 @@
2
2
  doesn't match the scope root. Plain selector outside works. See
3
3
  docs/BROWSER-COMPAT.md §3a. */
4
4
  range-ui:not([disabled]) [slot="field"]:hover [data-layer="fill"] {
5
- background: var(--range-fill-bg-hover);
5
+ background: var(--range-fill-bg-hover, var(--range-fill-bg-hover-default));
6
6
  }
7
7
 
8
8
  @scope (range-ui) {
9
9
  :where(:scope) {
10
10
  /* ── Tokens (wired to --a-ui-*) ── */
11
- --range-bg: var(--a-ui-bg);
12
- --range-fill-bg: var(--a-ui-bg);
13
- --range-fill-bg-hover: var(--a-ui-bg-hover);
14
- --range-fill-bg-active: var(--a-ui-bg-active);
15
- --range-fill-bg-disabled: var(--a-canvas-muted);
16
- --range-fill-fg: var(--a-fg);
17
- --range-fill-fg-disabled: var(--a-ui-text-disabled);
18
- --range-fill-label-fg: var(--a-ui-text-subtle);
19
- --range-border: var(--a-ui-border);
20
- --range-border-hover: var(--a-ui-border-hover);
21
- --range-border-dragging: var(--a-ui-border-active);
22
- --range-focus-ring: var(--a-focus-ring);
23
- --range-focus-ring-invalid: var(--a-focus-ring-invalid);
24
- --range-radius: var(--a-radius);
25
- --range-height: var(--a-size);
26
- --range-px: var(--a-ui-px);
27
- --range-font-size: var(--a-ui-size);
28
- --range-label-fg: var(--a-ui-text-placeholder);
29
- --range-value-fg: var(--a-ui-text);
30
- --range-value-weight: var(--a-weight-bold);
31
- --range-suffix-fg: var(--a-ui-text-placeholder);
32
- --range-fill-pct: 0%;
11
+ --range-bg-default: var(--a-ui-bg);
12
+ --range-fill-bg-default: var(--a-ui-bg);
13
+ --range-fill-bg-hover-default: var(--a-ui-bg-hover);
14
+ --range-fill-bg-active-default: var(--a-ui-bg-active);
15
+ --range-fill-bg-disabled-default: var(--a-canvas-muted);
16
+ --range-fill-fg-default: var(--a-fg);
17
+ --range-fill-fg-disabled-default: var(--a-ui-text-disabled);
18
+ --range-fill-label-fg-default: var(--a-ui-text-subtle);
19
+ --range-border-default: var(--a-ui-border);
20
+ --range-border-hover-default: var(--a-ui-border-hover);
21
+ --range-border-dragging-default: var(--a-ui-border-active);
22
+ --range-focus-ring-default: var(--a-focus-ring);
23
+ --range-focus-ring-invalid-default: var(--a-focus-ring-invalid);
24
+ --range-radius-default: var(--a-radius);
25
+ --range-height-default: var(--a-size);
26
+ --range-px-default: var(--a-ui-px);
27
+ --range-font-size-default: var(--a-ui-size);
28
+ --range-label-fg-default: var(--a-ui-text-placeholder);
29
+ --range-value-fg-default: var(--a-ui-text);
30
+ --range-value-weight-default: var(--a-weight-bold);
31
+ --range-suffix-fg-default: var(--a-ui-text-placeholder);
32
+ --range-fill-pct-default: 0%;
33
33
 
34
34
  /* ── Transitions ── */
35
- --range-duration: var(--a-duration-fast);
36
- --range-easing: var(--a-easing);
35
+ --range-duration-default: var(--a-duration-fast);
36
+ --range-easing-default: var(--a-easing);
37
37
 
38
38
  /* ── Layout ── */
39
- --range-layer-gap: var(--a-space-1);
39
+ --range-layer-gap-default: var(--a-space-1);
40
40
 
41
41
  /* ── Hover text ── */
42
- --range-label-fg-hover: var(--a-fg-subtle);
42
+ --range-label-fg-hover-default: var(--a-fg-subtle);
43
43
 
44
44
  text-align: start; /* §text-align-reset — blocks inheritance from centered ancestors */
45
45
  }
@@ -55,61 +55,61 @@ range-ui:not([disabled]) [slot="field"]:hover [data-layer="fill"] {
55
55
  [slot="field"] {
56
56
  position: relative;
57
57
  display: block;
58
- min-height: var(--range-height);
59
- border: 1px solid var(--range-border);
60
- border-radius: var(--range-radius);
58
+ min-height: var(--range-height, var(--range-height-default));
59
+ border: 1px solid var(--range-border, var(--range-border-default));
60
+ border-radius: var(--range-radius, var(--range-radius-default));
61
61
  overflow: hidden;
62
- background: var(--range-bg);
62
+ background: var(--range-bg, var(--range-bg-default));
63
63
  font: inherit;
64
- font-size: var(--range-font-size);
64
+ font-size: var(--range-font-size, var(--range-font-size-default));
65
65
  line-height: 1;
66
66
  transition:
67
- border-color var(--range-duration) var(--range-easing),
68
- background var(--range-duration) var(--range-easing);
67
+ border-color var(--range-duration, var(--range-duration-default)) var(--range-easing, var(--range-easing-default)),
68
+ background var(--range-duration, var(--range-duration-default)) var(--range-easing, var(--range-easing-default));
69
69
  user-select: none;
70
70
  touch-action: none;
71
71
  }
72
72
  [slot="field"]:hover {
73
- border-color: var(--range-border-hover);
73
+ border-color: var(--range-border-hover, var(--range-border-hover-default));
74
74
  }
75
75
  :scope:focus-visible { outline: none; }
76
76
  :scope:focus-visible [slot="field"] {
77
77
  /* Canonical ring via L3 token (see semantics.css FOCUS block). */
78
- box-shadow: var(--range-focus-ring);
78
+ box-shadow: var(--range-focus-ring, var(--range-focus-ring-default));
79
79
  }
80
80
  :scope[aria-invalid="true"]:focus-visible [slot="field"],
81
81
  :scope[error]:focus-visible [slot="field"] {
82
- box-shadow: var(--range-focus-ring-invalid);
82
+ box-shadow: var(--range-focus-ring-invalid, var(--range-focus-ring-invalid-default));
83
83
  }
84
84
 
85
85
  /* ── Dual-layer fill: identical layouts, overlay clipped to fill % ── */
86
86
  [slot="layer"] {
87
87
  display: flex;
88
88
  align-items: center;
89
- gap: var(--range-layer-gap);
90
- min-height: var(--range-height);
91
- padding: 0 var(--range-px);
89
+ gap: var(--range-layer-gap, var(--range-layer-gap-default));
90
+ min-height: var(--range-height, var(--range-height-default));
91
+ padding: 0 var(--range-px, var(--range-px-default));
92
92
  box-sizing: border-box;
93
93
  }
94
94
 
95
95
  [data-layer="fill"] {
96
96
  position: absolute;
97
97
  inset: 0;
98
- background: var(--range-fill-bg);
99
- clip-path: inset(0 calc(100% - var(--range-fill-pct)) 0 0);
98
+ background: var(--range-fill-bg, var(--range-fill-bg-default));
99
+ clip-path: inset(0 calc(100% - var(--range-fill-pct, var(--range-fill-pct-default))) 0 0);
100
100
  pointer-events: none;
101
- transition: clip-path var(--range-duration) var(--range-easing);
101
+ transition: clip-path var(--range-duration, var(--range-duration-default)) var(--range-easing, var(--range-easing-default));
102
102
  }
103
103
 
104
104
  /* Base layer text colors */
105
- [data-layer="base"] [slot="label"] { color: var(--range-label-fg); }
106
- [data-layer="base"] [slot="value"] { color: var(--range-value-fg); font-weight: var(--range-value-weight); }
107
- [data-layer="base"] [slot="suffix"] { color: var(--range-suffix-fg); }
105
+ [data-layer="base"] [slot="label"] { color: var(--range-label-fg, var(--range-label-fg-default)); }
106
+ [data-layer="base"] [slot="value"] { color: var(--range-value-fg, var(--range-value-fg-default)); font-weight: var(--range-value-weight, var(--range-value-weight-default)); }
107
+ [data-layer="base"] [slot="suffix"] { color: var(--range-suffix-fg, var(--range-suffix-fg-default)); }
108
108
 
109
109
  /* Fill layer text colors (what shows through the filled portion) */
110
- [data-layer="fill"] [slot="label"] { color: var(--range-fill-label-fg); }
111
- [data-layer="fill"] [slot="value"] { color: var(--range-fill-fg); font-weight: var(--range-value-weight); }
112
- [data-layer="fill"] [slot="suffix"] { color: var(--range-fill-fg); opacity: 0.75; }
110
+ [data-layer="fill"] [slot="label"] { color: var(--range-fill-label-fg, var(--range-fill-label-fg-default)); }
111
+ [data-layer="fill"] [slot="value"] { color: var(--range-fill-fg, var(--range-fill-fg-default)); font-weight: var(--range-value-weight, var(--range-value-weight-default)); }
112
+ [data-layer="fill"] [slot="suffix"] { color: var(--range-fill-fg, var(--range-fill-fg-default)); opacity: 0.75; }
113
113
 
114
114
  /* Shared layout rules */
115
115
  [slot="label"] {
@@ -128,32 +128,32 @@ range-ui:not([disabled]) [slot="field"]:hover [data-layer="fill"] {
128
128
  /* Hover / focus label brightening on base only */
129
129
  [slot="field"]:hover [data-layer="base"] [slot="label"],
130
130
  :scope:focus-visible [data-layer="base"] [slot="label"] {
131
- color: var(--range-label-fg-hover);
131
+ color: var(--range-label-fg-hover, var(--range-label-fg-hover-default));
132
132
  }
133
133
  [slot="field"]:hover [data-layer="base"] [slot="suffix"],
134
134
  :scope:focus-visible [data-layer="base"] [slot="suffix"] {
135
- color: var(--range-label-fg-hover);
135
+ color: var(--range-label-fg-hover, var(--range-label-fg-hover-default));
136
136
  }
137
137
 
138
138
  /* Hover-fill brighten moved outside @scope — see Safari 17.x bug note at top. */
139
139
 
140
140
  /* Dragging: deepest fill, sharper border, instant (no transition lag on the clip) */
141
141
  :scope[data-dragging] [slot="field"] {
142
- border-color: var(--range-border-dragging);
142
+ border-color: var(--range-border-dragging, var(--range-border-dragging-default));
143
143
  }
144
144
  :scope[data-dragging] [data-layer="fill"] {
145
- background: var(--range-fill-bg-active);
145
+ background: var(--range-fill-bg-active, var(--range-fill-bg-active-default));
146
146
  transition: none;
147
147
  }
148
148
 
149
149
  /* Disabled: muted fill + muted text */
150
150
  :scope[disabled] [data-layer="fill"] {
151
- background: var(--range-fill-bg-disabled);
151
+ background: var(--range-fill-bg-disabled, var(--range-fill-bg-disabled-default));
152
152
  }
153
153
  :scope[disabled] [data-layer="fill"] [slot="value"],
154
154
  :scope[disabled] [data-layer="fill"] [slot="suffix"],
155
155
  :scope[disabled] [data-layer="fill"] [slot="label"] {
156
- color: var(--range-fill-fg-disabled);
156
+ color: var(--range-fill-fg-disabled, var(--range-fill-fg-disabled-default));
157
157
  }
158
158
 
159
159
  /* Size handled by universal [size] attribute system. */
package/components/rating/rating.css CHANGED
@@ -2,26 +2,26 @@
2
2
  root. Plain selector outside the @scope works. See
3
3
  docs/BROWSER-COMPAT.md §3a. */
4
4
  rating-ui:hover [data-rating-symbol] {
5
- color: var(--rating-fg-hover);
5
+ color: var(--rating-fg-hover, var(--rating-fg-hover-default));
6
6
  }
7
7
 
8
8
  @scope (rating-ui) {
9
9
  :where(:scope) {
10
10
  /* ── Layout ── */
11
- --rating-gap: var(--a-space-1);
12
- --rating-symbol-size: var(--a-space-5);
11
+ --rating-gap-default: var(--a-space-1);
12
+ --rating-symbol-size-default: var(--a-space-5);
13
13
 
14
14
  /* ── Colors ── */
15
- --rating-fg-empty: var(--a-fg-muted);
16
- --rating-fg-filled: var(--a-fg-strong);
17
- --rating-fg-hover: var(--a-fg-strong);
15
+ --rating-fg-empty-default: var(--a-fg-muted);
16
+ --rating-fg-filled-default: var(--a-fg-strong);
17
+ --rating-fg-hover-default: var(--a-fg-strong);
18
18
 
19
19
  /* ── Interaction ── */
20
- --rating-duration: var(--a-duration-fast);
21
- --rating-easing: var(--a-easing);
22
- --rating-focus-ring: 0 0 0 2px var(--a-focus-ring);
23
- --rating-focus-offset: var(--a-space-1);
24
- --rating-focus-radius: var(--a-radius-sm);
20
+ --rating-duration-default: var(--a-duration-fast);
21
+ --rating-easing-default: var(--a-easing);
22
+ --rating-focus-ring-default: 0 0 0 2px var(--a-focus-ring);
23
+ --rating-focus-offset-default: var(--a-space-1);
24
+ --rating-focus-radius-default: var(--a-radius-sm);
25
25
  }
26
26
 
27
27
  :scope {
@@ -29,7 +29,7 @@ rating-ui:hover [data-rating-symbol] {
29
29
  box-sizing: border-box;
30
30
  display: inline-flex;
31
31
  align-items: center;
32
- gap: var(--rating-gap);
32
+ gap: var(--rating-gap, var(--rating-gap-default));
33
33
  cursor: pointer;
34
34
  user-select: none;
35
35
  line-height: 1;
@@ -46,30 +46,30 @@ rating-ui:hover [data-rating-symbol] {
46
46
 
47
47
  :scope:focus-visible {
48
48
  outline: none;
49
- border-radius: var(--rating-focus-radius);
50
- box-shadow: var(--rating-focus-ring);
51
- outline-offset: var(--rating-focus-offset);
49
+ border-radius: var(--rating-focus-radius, var(--rating-focus-radius-default));
50
+ box-shadow: var(--rating-focus-ring, var(--rating-focus-ring-default));
51
+ outline-offset: var(--rating-focus-offset, var(--rating-focus-offset-default));
52
52
  }
53
53
 
54
54
  [data-rating-symbol] {
55
55
  position: relative;
56
56
  display: inline-block;
57
- width: var(--rating-symbol-size);
58
- height: var(--rating-symbol-size);
59
- color: var(--rating-fg-empty);
60
- transition: color var(--rating-duration) var(--rating-easing);
57
+ width: var(--rating-symbol-size, var(--rating-symbol-size-default));
58
+ height: var(--rating-symbol-size, var(--rating-symbol-size-default));
59
+ color: var(--rating-fg-empty, var(--rating-fg-empty-default));
60
+ transition: color var(--rating-duration, var(--rating-duration-default)) var(--rating-easing, var(--rating-easing-default));
61
61
  }
62
62
 
63
63
  [data-rating-symbol] icon-ui {
64
- --a-icon-size: var(--rating-symbol-size);
64
+ --a-icon-size: var(--rating-symbol-size, var(--rating-symbol-size-default));
65
65
  position: absolute;
66
66
  inset: 0;
67
67
  }
68
68
 
69
69
  [data-rating-symbol-fg] {
70
- color: var(--rating-fg-filled);
70
+ color: var(--rating-fg-filled, var(--rating-fg-filled-default));
71
71
  clip-path: inset(0 100% 0 0);
72
- transition: clip-path var(--rating-duration) var(--rating-easing);
72
+ transition: clip-path var(--rating-duration, var(--rating-duration-default)) var(--rating-easing, var(--rating-easing-default));
73
73
  }
74
74
 
75
75
  [data-rating-symbol][data-fill="half"] [data-rating-symbol-fg] {
@@ -81,15 +81,15 @@ rating-ui:hover [data-rating-symbol] {
81
81
 
82
82
  /* ── Variants override TOKENS only ── */
83
83
  :scope[variant="accent"] {
84
- --rating-fg-filled: var(--a-accent-bg);
85
- --rating-fg-hover: var(--a-accent-bg);
84
+ --rating-fg-filled-default: var(--a-accent-bg);
85
+ --rating-fg-hover-default: var(--a-accent-bg);
86
86
  }
87
87
  :scope[variant="warning"] {
88
- --rating-fg-filled: var(--a-warning-bg);
89
- --rating-fg-hover: var(--a-warning-bg);
88
+ --rating-fg-filled-default: var(--a-warning-bg);
89
+ --rating-fg-hover-default: var(--a-warning-bg);
90
90
  }
91
91
 
92
92
  /* ── Size ── */
93
- :scope[size="sm"] { --rating-symbol-size: var(--a-space-4); }
94
- :scope[size="lg"] { --rating-symbol-size: var(--a-space-7); }
93
+ :scope[size="sm"] { --rating-symbol-size-default: var(--a-space-4); }
94
+ :scope[size="lg"] { --rating-symbol-size-default: var(--a-space-7); }
95
95
  }