@adia-ai/web-components 0.6.33 → 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 (157) hide show
  1. package/CHANGELOG.md +22 -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 +28 -28
  63. package/components/fields/fields.css +5 -5
  64. package/components/grid/grid.css +5 -5
  65. package/components/heatmap/heatmap.css +63 -63
  66. package/components/icon/icon.css +12 -12
  67. package/components/image/image.css +14 -14
  68. package/components/index.js +8 -0
  69. package/components/input/input.css +66 -66
  70. package/components/inspector/inspector.css +6 -6
  71. package/components/integration-card/class.js +410 -0
  72. package/components/integration-card/integration-card.a2ui.json +268 -0
  73. package/components/integration-card/integration-card.css +169 -0
  74. package/components/integration-card/integration-card.d.ts +63 -0
  75. package/components/integration-card/integration-card.examples.md +41 -0
  76. package/components/integration-card/integration-card.js +17 -0
  77. package/components/integration-card/integration-card.test.js +306 -0
  78. package/components/integration-card/integration-card.yaml +280 -0
  79. package/components/kbd/kbd.css +32 -32
  80. package/components/link/link.css +12 -12
  81. package/components/list/list.css +8 -8
  82. package/components/list-window/class.js +688 -0
  83. package/components/list-window/list-window.a2ui.json +277 -0
  84. package/components/list-window/list-window.css +124 -0
  85. package/components/list-window/list-window.d.ts +84 -0
  86. package/components/list-window/list-window.examples.md +73 -0
  87. package/components/list-window/list-window.js +17 -0
  88. package/components/list-window/list-window.test.js +303 -0
  89. package/components/list-window/list-window.yaml +270 -0
  90. package/components/menu/menu.css +8 -8
  91. package/components/modal/modal.css +43 -43
  92. package/components/nav/nav.css +40 -40
  93. package/components/nav-group/nav-group.css +52 -52
  94. package/components/nav-item/nav-item.css +44 -44
  95. package/components/noodles/noodles.css +31 -31
  96. package/components/option-card/option-card.css +69 -69
  97. package/components/otp-input/otp-input.css +30 -30
  98. package/components/page/page.css +18 -18
  99. package/components/pagination/pagination.css +61 -61
  100. package/components/pane/pane.css +57 -57
  101. package/components/pipeline-status/pipeline-status.css +65 -65
  102. package/components/popover/popover.css +17 -17
  103. package/components/progress/progress.css +23 -23
  104. package/components/progress-row/progress-row.css +17 -17
  105. package/components/radio/radio.css +39 -39
  106. package/components/range/range.css +55 -55
  107. package/components/rating/rating.css +28 -28
  108. package/components/richtext/richtext.css +133 -133
  109. package/components/row/row.css +19 -19
  110. package/components/search/search.css +5 -5
  111. package/components/segment/segment.css +24 -24
  112. package/components/segmented/segmented.css +25 -25
  113. package/components/select/select.css +84 -84
  114. package/components/skeleton/skeleton.css +14 -14
  115. package/components/slider/slider.css +46 -46
  116. package/components/spinner/class.js +69 -0
  117. package/components/spinner/spinner.a2ui.json +197 -0
  118. package/components/spinner/spinner.css +165 -0
  119. package/components/spinner/spinner.d.ts +26 -0
  120. package/components/spinner/spinner.examples.md +26 -0
  121. package/components/spinner/spinner.js +17 -0
  122. package/components/spinner/spinner.test.js +234 -0
  123. package/components/spinner/spinner.yaml +230 -0
  124. package/components/stack/stack.css +11 -11
  125. package/components/stat/stat.css +25 -25
  126. package/components/step-progress/step-progress.css +20 -20
  127. package/components/stepper/stepper.css +29 -29
  128. package/components/stream/stream.css +12 -12
  129. package/components/swatch/swatch.css +68 -68
  130. package/components/swiper/swiper.css +57 -57
  131. package/components/switch/switch.css +52 -52
  132. package/components/table/table.css +162 -162
  133. package/components/table-toolbar/table-toolbar.css +32 -32
  134. package/components/tabs/tabs.css +51 -51
  135. package/components/tag/tag.css +48 -48
  136. package/components/text/text.css +44 -44
  137. package/components/textarea/textarea.css +46 -46
  138. package/components/time-picker/class.js +693 -0
  139. package/components/time-picker/time-picker.a2ui.json +267 -0
  140. package/components/time-picker/time-picker.css +122 -0
  141. package/components/time-picker/time-picker.d.ts +75 -0
  142. package/components/time-picker/time-picker.examples.md +35 -0
  143. package/components/time-picker/time-picker.js +17 -0
  144. package/components/time-picker/time-picker.test.js +287 -0
  145. package/components/time-picker/time-picker.yaml +256 -0
  146. package/components/timeline/timeline.css +50 -50
  147. package/components/toast/toast.css +58 -58
  148. package/components/toggle-group/toggle-group.css +6 -6
  149. package/components/toggle-scheme/toggle-scheme.css +2 -2
  150. package/components/toolbar/toolbar.css +17 -17
  151. package/components/tooltip/tooltip.css +2 -2
  152. package/components/tree/tree.css +37 -37
  153. package/components/upload/upload.css +49 -49
  154. package/dist/web-components.min.css +1 -1
  155. package/dist/web-components.min.js +121 -83
  156. package/package.json +1 -1
  157. package/styles/components.css +8 -0
package/components/datetime-picker/datetime-picker.yaml ADDED
@@ -0,0 +1,332 @@
1
+ $schema: ../../../../scripts/schemas/component.yaml.schema.json
2
+ name: UIDatetimePicker
3
+ tag: datetime-picker-ui
4
+ status: experimental
5
+ component: DatetimePicker
6
+ category: input
7
+ version: 1
8
+ description: >-
9
+ Single-control date + time selection. Trigger button opens a popover
10
+ with a `<calendar-picker-ui>` on the left + a `<time-picker-ui>` on
11
+ the right; commit emits a full ISO 8601 datetime string
12
+ ("YYYY-MM-DDTHH:mm" or with seconds). Composes the two underlying
13
+ primitives — never wraps a native `<input type="datetime-local">`
14
+ (per ADR-0025). Form-associated under one `name`. SPEC-038.
15
+ # Per ADR-0027 — primitives that programmatically create other primitives
16
+ # do NOT auto-import them. Consumer (or demo shell) must explicitly import
17
+ # the calendar-picker, time-picker, button, popover, divider modules.
18
+ composes:
19
+ - calendar-grid-ui # the date pane — substrate primitive
20
+ - time-picker-ui # the time pane (SPEC-043)
21
+ - button-ui # default trigger + optional footer actions
22
+ - popover-ui # the floating panel
23
+ - divider-ui # separator between panes
24
+ props:
25
+ name:
26
+ description: Form field name. The ISO 8601 datetime is submitted under this key when the picker is inside a `<form>`.
27
+ type: string
28
+ default: ''
29
+ reflect: true
30
+ value:
31
+ description: 'Current value as ISO 8601 datetime ("YYYY-MM-DDTHH:mm" or "YYYY-MM-DDTHH:mm:ss"). Empty when no value selected.'
32
+ type: string
33
+ default: ''
34
+ dynamic: true
35
+ min:
36
+ description: Earliest selectable ISO 8601 datetime (inclusive). Days before are disabled in the calendar pane; times before are rejected by the time pane on the same day.
37
+ type: string
38
+ default: ''
39
+ reflect: true
40
+ max:
41
+ description: Latest selectable ISO 8601 datetime (inclusive). Days after are disabled in the calendar pane; times after are rejected by the time pane on the same day.
42
+ type: string
43
+ default: ''
44
+ reflect: true
45
+ step:
46
+ description: Per-Arrow-keypress increment in seconds for the time pane. 60 = minute precision (default), 900 = 15-minute, 1 = second precision.
47
+ type: number
48
+ default: 60
49
+ reflect: true
50
+ precision:
51
+ description: Time-pane precision. `minute` (default) emits `HH:mm`; `second` exposes the seconds segment and emits `HH:mm:ss`.
52
+ type: string
53
+ default: minute
54
+ enum:
55
+ - minute
56
+ - second
57
+ reflect: true
58
+ hourcycle:
59
+ description: |
60
+ Hour cycle for the time pane. Empty (default) derives from the
61
+ document locale. `h12` forces a 12-hour cycle with an AM/PM
62
+ (meridiem) segment; `h23` forces 24-hour cycle.
63
+ type: string
64
+ default: ''
65
+ enum:
66
+ - ''
67
+ - h12
68
+ - h23
69
+ reflect: true
70
+ attribute: hour-cycle
71
+ disabled:
72
+ description: Block all interaction. Trigger remains rendered but does not open the popover.
73
+ type: boolean
74
+ default: false
75
+ reflect: true
76
+ readonly:
77
+ description: Block edits; allow keyboard navigation for screen-reader inspection.
78
+ type: boolean
79
+ default: false
80
+ reflect: true
81
+ required:
82
+ description: Required for validation when inside a `<form>`.
83
+ type: boolean
84
+ default: false
85
+ reflect: true
86
+ open:
87
+ description: Whether the popover is currently open.
88
+ type: boolean
89
+ default: false
90
+ reflect: true
91
+ placeholder:
92
+ description: Text shown in the trigger when the value is empty.
93
+ type: string
94
+ default: Select date and time
95
+ format:
96
+ description: 'Trigger button date format. `short`: `Jan 1, 2026 14:30`; `long`: `January 1, 2026 14:30`; `iso`: full ISO string.'
97
+ type: string
98
+ default: short
99
+ enum:
100
+ - short
101
+ - long
102
+ - iso
103
+ locale:
104
+ description: BCP-47 locale tag used to derive hour-cycle when `hour-cycle` is empty. Falls back to `<html lang>` then to browser default.
105
+ type: string
106
+ default: ''
107
+ events:
108
+ change:
109
+ description: Fired when the value commits (date picked + time edited, OR Apply clicked in explicit-commit mode).
110
+ detail:
111
+ value: string
112
+ source: string
113
+ input:
114
+ description: Fired during partial selection (date picked but time still pending, or vice versa).
115
+ detail:
116
+ value: string
117
+ open:
118
+ description: Popover opened (user clicked the trigger or pressed Enter / Space).
119
+ detail:
120
+ trigger: string
121
+ close:
122
+ description: Popover closed (without commit, or after commit).
123
+ detail:
124
+ reason: string
125
+ invalid:
126
+ description: A constraint failed (out of range, parse error).
127
+ detail:
128
+ value: string
129
+ reason: string
130
+ slots:
131
+ trigger:
132
+ description: Custom trigger replacement. When omitted, a default `<button-ui>` is stamped.
133
+ footer:
134
+ description: Optional Apply / Cancel buttons for explicit-commit flows. Spans both panes below the calendar + time area.
135
+ states:
136
+ - name: idle
137
+ description: Closed, no pending selection.
138
+ - name: open-pending-date
139
+ description: Popover open, no calendar pick yet.
140
+ attribute: open
141
+ - name: open-pending-time
142
+ description: Date picked; time pane is the next focus target.
143
+ attribute: open
144
+ - name: open-committed
145
+ description: Both panes set; awaiting Apply (explicit-commit mode only).
146
+ attribute: open
147
+ - name: disabled
148
+ description: Non-interactive; dimmed.
149
+ attribute: disabled
150
+ - name: readonly
151
+ description: Read-only; trigger keyboard-focusable but popover does not open.
152
+ attribute: readonly
153
+ traits: []
154
+ tokens:
155
+ --datetime-picker-bg:
156
+ description: Host background.
157
+ default: var(--a-bg)
158
+ --datetime-picker-fg:
159
+ description: Host text color.
160
+ default: var(--a-fg)
161
+ --datetime-picker-popover-bg:
162
+ description: Popover background.
163
+ default: var(--a-bg-subtle)
164
+ --datetime-picker-popover-border:
165
+ description: Popover border color.
166
+ default: var(--a-border-subtle)
167
+ --datetime-picker-popover-radius:
168
+ description: Popover border radius.
169
+ default: var(--a-radius-lg)
170
+ --datetime-picker-popover-shadow:
171
+ description: Popover box shadow.
172
+ default: var(--a-shadow-lg)
173
+ --datetime-picker-popover-padding:
174
+ description: Popover internal padding.
175
+ default: var(--a-space-3)
176
+ --datetime-picker-popover-gap:
177
+ description: Gap between calendar pane and time pane.
178
+ default: var(--a-space-3)
179
+ --datetime-picker-divider:
180
+ description: Pane divider color.
181
+ default: var(--a-border-subtle)
182
+ --datetime-picker-trigger-min-width:
183
+ description: Default trigger min-width — sized so the formatted date+time fits without truncation.
184
+ default: 16em
185
+ --datetime-picker-px:
186
+ description: Horizontal popover padding.
187
+ default: var(--a-space-3)
188
+ --datetime-picker-py:
189
+ description: Vertical popover padding.
190
+ default: var(--a-space-2)
191
+ --datetime-picker-duration:
192
+ description: Open/close transition duration.
193
+ default: var(--a-duration-fast)
194
+ --datetime-picker-easing:
195
+ description: Open/close transition easing.
196
+ default: var(--a-easing)
197
+ requiredIcons:
198
+ - calendar
199
+ - clock
200
+ - caret-down
201
+ a2ui:
202
+ rules:
203
+ - rule: '`DatetimePicker.value` MUST be ISO 8601 datetime (`YYYY-MM-DDTHH:mm` or `YYYY-MM-DDTHH:mm:ss`) OR empty string. Date-only or time-only strings fire `invalid`.'
204
+ reason: 'Datetime contract — both halves must be present (or both empty).'
205
+ - rule: '`precision: "second"` requires the value to include seconds when set; missing seconds are coerced to `:00` on commit.'
206
+ reason: 'Precision contract.'
207
+ - rule: '`min` and `max` MUST be parseable ISO 8601 datetimes if non-empty. If `value` falls outside, `invalid` fires and the value does not commit.'
208
+ reason: 'Constraint contract.'
209
+ - rule: '`hour-cycle` overrides the locale-derived cycle in the time pane. Set explicitly when the surface needs a specific cycle (cron editors, log queries, system surfaces).'
210
+ reason: 'Hour-cycle override contract.'
211
+ - rule: 'Use DatetimePicker for combined date+time. Do NOT compose `<calendar-picker-ui>` + a free-form `<input-ui>` manually as an alternative — that is the pattern this primitive replaces.'
212
+ reason: 'Adoption signal: prefer the canonical primitive over hand-rolled composition.'
213
+ - rule: 'Per ADR-0025 NEVER wrap a native `<input type="datetime-local">` — the calendar pane + time pane composition + ElementInternals together provide form participation.'
214
+ reason: 'No native form controls.'
215
+ anti_patterns:
216
+ - wrong: |
217
+ {"component": "DatetimePicker", "value": "2026-05-24"}
218
+ why: |
219
+ `value` is a date-only string — no time component. The contract requires
220
+ a full ISO 8601 datetime including the `T` and time segment.
221
+ fix: |
222
+ {"component": "DatetimePicker", "value": "2026-05-24T00:00"}
223
+ - wrong: |
224
+ {"component": "DatetimePicker", "value": "14:30"}
225
+ why: |
226
+ `value` is a time-only string — no date component. Use `<TimePicker>` for
227
+ time-only selection or supply the date portion.
228
+ fix: |
229
+ {"component": "DatetimePicker", "value": "2026-05-24T14:30"}
230
+ - wrong: |
231
+ {"component": "DatetimePicker", "children": [
232
+ {"component": "Input", "type": "datetime-local"}
233
+ ]}
234
+ why: |
235
+ Nesting a native datetime-local input violates ADR-0025 and bypasses
236
+ ElementInternals form participation.
237
+ fix: |
238
+ {"component": "DatetimePicker", "name": "field-name"}
239
+ - wrong: |
240
+ <calendar-picker-ui></calendar-picker-ui>
241
+ <input-ui type="text" placeholder="HH:mm"></input-ui>
242
+ why: |
243
+ Hand-rolled date + free-form time composition is the pattern this primitive
244
+ replaces. It misses the coordinated popover, the per-segment Spinbutton
245
+ a11y model, and unified form participation.
246
+ fix: |
247
+ <datetime-picker-ui name="appointment"></datetime-picker-ui>
248
+ examples:
249
+ - name: canonical
250
+ description: Form-field-wrapped picker with min/max bounds.
251
+ a2ui: |
252
+ [
253
+ {
254
+ "id": "field",
255
+ "component": "Field",
256
+ "label": "Appointment",
257
+ "children": ["dt"]
258
+ },
259
+ {
260
+ "id": "dt",
261
+ "component": "DatetimePicker",
262
+ "name": "appointment",
263
+ "min": "2026-01-01T00:00",
264
+ "max": "2026-12-31T23:59"
265
+ }
266
+ ]
267
+ - name: second-precision
268
+ description: Log-cursor picker with second precision.
269
+ a2ui: |
270
+ [
271
+ {
272
+ "id": "dt",
273
+ "component": "DatetimePicker",
274
+ "name": "log-cursor",
275
+ "precision": "second",
276
+ "step": 1,
277
+ "value": "2026-05-24T14:30:45"
278
+ }
279
+ ]
280
+ - name: forced-24h
281
+ description: Cron editor with forced 24-hour cycle.
282
+ a2ui: |
283
+ [
284
+ {
285
+ "id": "dt",
286
+ "component": "DatetimePicker",
287
+ "name": "cron",
288
+ "hourCycle": "h23"
289
+ }
290
+ ]
291
+ - name: readonly
292
+ description: Read-only datetime for inspection only.
293
+ a2ui: |
294
+ [
295
+ {
296
+ "id": "dt",
297
+ "component": "DatetimePicker",
298
+ "readonly": true,
299
+ "value": "2026-05-24T14:30"
300
+ }
301
+ ]
302
+ keywords:
303
+ - datetimepicker
304
+ - datetime-picker
305
+ - datetime
306
+ - date-time
307
+ - dateandtime
308
+ - appointment
309
+ - schedule
310
+ - timestamp
311
+ synonyms:
312
+ tags:
313
+ - DateTimePicker
314
+ - DateTimeInput
315
+ - DatetimeInput
316
+ - Timestamp
317
+ datetime:
318
+ - date-time
319
+ - timestamp
320
+ - appointment
321
+ - schedule
322
+ appointment:
323
+ - datetime
324
+ - meeting
325
+ - schedule
326
+ related:
327
+ - calendar-picker
328
+ - time-picker
329
+ - date-range-picker
330
+ - popover
331
+ - field
332
+ - button
package/components/demo-toggle/demo-toggle.css CHANGED
@@ -1,25 +1,25 @@
1
1
  @scope (demo-toggle-ui) {
2
2
  :where(:scope) {
3
3
  /* ── Layout ── */
4
- --demo-toggle-radius: var(--a-radius-lg);
5
- --demo-toggle-gap: var(--a-space-3);
6
- --demo-toggle-stage-padding: var(--a-space-4);
7
- --demo-toggle-bar-px: var(--a-space-3);
8
- --demo-toggle-bar-py: var(--a-space-2);
4
+ --demo-toggle-radius-default: var(--a-radius-lg);
5
+ --demo-toggle-gap-default: var(--a-space-3);
6
+ --demo-toggle-stage-padding-default: var(--a-space-4);
7
+ --demo-toggle-bar-px-default: var(--a-space-3);
8
+ --demo-toggle-bar-py-default: var(--a-space-2);
9
9
 
10
10
  /* ── Colors ── */
11
- --demo-toggle-bg: var(--a-canvas-1);
12
- --demo-toggle-border: var(--a-border);
13
- --demo-toggle-bar-bg: var(--a-bg-muted);
14
- --demo-toggle-bar-fg: var(--a-fg);
11
+ --demo-toggle-bg-default: var(--a-canvas-1);
12
+ --demo-toggle-border-default: var(--a-border);
13
+ --demo-toggle-bar-bg-default: var(--a-bg-muted);
14
+ --demo-toggle-bar-fg-default: var(--a-fg);
15
15
 
16
16
  /* ── Typography ── */
17
- --demo-toggle-label-size: var(--a-ui-size);
18
- --demo-toggle-label-weight: var(--a-weight-medium, 500);
17
+ --demo-toggle-label-size-default: var(--a-ui-size);
18
+ --demo-toggle-label-weight-default: var(--a-weight-medium, 500);
19
19
 
20
20
  /* ── Transition ── */
21
- --demo-toggle-duration: var(--a-duration-fast);
22
- --demo-toggle-easing: var(--a-easing);
21
+ --demo-toggle-duration-default: var(--a-duration-fast);
22
+ --demo-toggle-easing-default: var(--a-easing);
23
23
  }
24
24
 
25
25
  :scope {
@@ -30,9 +30,9 @@
30
30
  gap: 0;
31
31
  width: 100%;
32
32
 
33
- background: var(--demo-toggle-bg);
34
- border: 1px solid var(--demo-toggle-border);
35
- border-radius: var(--demo-toggle-radius);
33
+ background: var(--demo-toggle-bg, var(--demo-toggle-bg-default));
34
+ border: 1px solid var(--demo-toggle-border, var(--demo-toggle-border-default));
35
+ border-radius: var(--demo-toggle-radius, var(--demo-toggle-radius-default));
36
36
  overflow: hidden;
37
37
  isolation: isolate;
38
38
  }
@@ -40,18 +40,18 @@
40
40
  /* -- Header bar -- */
41
41
  [slot="bar"] {
42
42
  width: 100%;
43
- padding: var(--demo-toggle-bar-py) var(--demo-toggle-bar-px);
44
- background: var(--demo-toggle-bar-bg);
45
- color: var(--demo-toggle-bar-fg);
46
- border-bottom: 1px solid var(--demo-toggle-border);
43
+ padding: var(--demo-toggle-bar-py, var(--demo-toggle-bar-py-default)) var(--demo-toggle-bar-px, var(--demo-toggle-bar-px-default));
44
+ background: var(--demo-toggle-bar-bg, var(--demo-toggle-bar-bg-default));
45
+ color: var(--demo-toggle-bar-fg, var(--demo-toggle-bar-fg-default));
46
+ border-bottom: 1px solid var(--demo-toggle-border, var(--demo-toggle-border-default));
47
47
  justify-content: space-between;
48
48
  }
49
49
 
50
50
  [data-demo-toggle-label] {
51
- font-size: var(--demo-toggle-label-size);
52
- font-weight: var(--demo-toggle-label-weight);
53
- color: var(--demo-toggle-bar-fg);
54
- transition: color var(--demo-toggle-duration) var(--demo-toggle-easing);
51
+ font-size: var(--demo-toggle-label-size, var(--demo-toggle-label-size-default));
52
+ font-weight: var(--demo-toggle-label-weight, var(--demo-toggle-label-weight-default));
53
+ color: var(--demo-toggle-bar-fg, var(--demo-toggle-bar-fg-default));
54
+ transition: color var(--demo-toggle-duration, var(--demo-toggle-duration-default)) var(--demo-toggle-easing, var(--demo-toggle-easing-default));
55
55
  }
56
56
 
57
57
  /* -- Stage area (where the slotted content lives) -- */
@@ -61,7 +61,7 @@
61
61
  :scope > [slot="off"] {
62
62
  box-sizing: border-box;
63
63
  width: 100%;
64
- padding: var(--demo-toggle-stage-padding);
64
+ padding: var(--demo-toggle-stage-padding, var(--demo-toggle-stage-padding-default));
65
65
  }
66
66
 
67
67
  :scope[data-state="on"] > [slot="off"] { display: none; }
@@ -114,7 +114,7 @@
114
114
 
115
115
  /* State-themed bar — when on, lean accent; when off, leave neutral. */
116
116
  :scope[data-state="on"] {
117
- --demo-toggle-bar-bg: var(--a-accent-muted);
118
- --demo-toggle-bar-fg: var(--a-accent-strong);
117
+ --demo-toggle-bar-bg-default: var(--a-accent-muted);
118
+ --demo-toggle-bar-fg-default: var(--a-accent-strong);
119
119
  }
120
120
  }
package/components/description-list/description-list.css CHANGED
@@ -1,19 +1,19 @@
1
1
  @scope (description-list-ui) {
2
2
  :where(:scope) {
3
3
  /* ── Layout ── */
4
- --description-list-gap-row: var(--a-space-2);
5
- --description-list-gap-column: var(--a-space-3);
6
- --description-list-term-min-width: 8rem;
4
+ --description-list-gap-row-default: var(--a-space-2);
5
+ --description-list-gap-column-default: var(--a-space-3);
6
+ --description-list-term-min-width-default: 8rem;
7
7
 
8
8
  /* ── Typography ── */
9
- --description-list-term-font-size: var(--a-ui-sm);
10
- --description-list-term-weight: var(--a-weight-medium);
11
- --description-list-desc-font-size: var(--a-ui-sm);
12
- --description-list-desc-weight: var(--a-weight-normal);
9
+ --description-list-term-font-size-default: var(--a-ui-sm);
10
+ --description-list-term-weight-default: var(--a-weight-medium);
11
+ --description-list-desc-font-size-default: var(--a-ui-sm);
12
+ --description-list-desc-weight-default: var(--a-weight-normal);
13
13
 
14
14
  /* ── Colors ── */
15
- --description-list-term-fg: var(--a-fg-muted);
16
- --description-list-desc-fg: var(--a-fg);
15
+ --description-list-term-fg-default: var(--a-fg-muted);
16
+ --description-list-desc-fg-default: var(--a-fg);
17
17
  }
18
18
 
19
19
  :scope {
@@ -21,7 +21,7 @@
21
21
  box-sizing: border-box;
22
22
  display: grid;
23
23
  grid-template-columns: 1fr;
24
- gap: var(--description-list-gap-row) var(--description-list-gap-column);
24
+ gap: var(--description-list-gap-row, var(--description-list-gap-row-default)) var(--description-list-gap-column, var(--description-list-gap-column-default));
25
25
  margin: 0;
26
26
  padding: 0;
27
27
  }
@@ -29,18 +29,18 @@
29
29
  [data-dl-term],
30
30
  dt {
31
31
  margin: 0;
32
- font-size: var(--description-list-term-font-size);
33
- font-weight: var(--description-list-term-weight);
34
- color: var(--description-list-term-fg);
32
+ font-size: var(--description-list-term-font-size, var(--description-list-term-font-size-default));
33
+ font-weight: var(--description-list-term-weight, var(--description-list-term-weight-default));
34
+ color: var(--description-list-term-fg, var(--description-list-term-fg-default));
35
35
  line-height: 1.3;
36
36
  }
37
37
 
38
38
  [data-dl-desc],
39
39
  dd {
40
40
  margin: 0;
41
- font-size: var(--description-list-desc-font-size);
42
- font-weight: var(--description-list-desc-weight);
43
- color: var(--description-list-desc-fg);
41
+ font-size: var(--description-list-desc-font-size, var(--description-list-desc-font-size-default));
42
+ font-weight: var(--description-list-desc-weight, var(--description-list-desc-weight-default));
43
+ color: var(--description-list-desc-fg, var(--description-list-desc-fg-default));
44
44
  line-height: 1.4;
45
45
  }
46
46
 
@@ -51,12 +51,12 @@
51
51
  and the explicit `[layout="stacked"]` both get the same rhythm. */
52
52
  :scope:not([layout="inline"]) [data-dl-desc]:not(:last-child),
53
53
  :scope:not([layout="inline"]) dd:not(:last-child) {
54
- margin-bottom: var(--description-list-gap-row);
54
+ margin-bottom: var(--description-list-gap-row, var(--description-list-gap-row-default));
55
55
  }
56
56
 
57
57
  /* Inline: term and desc on one row */
58
58
  :scope[layout="inline"] {
59
- grid-template-columns: minmax(var(--description-list-term-min-width), max-content) 1fr;
59
+ grid-template-columns: minmax(var(--description-list-term-min-width, var(--description-list-term-min-width-default)), max-content) 1fr;
60
60
  align-items: baseline;
61
61
  }
62
62
 
package/components/divider/divider.css CHANGED
@@ -5,12 +5,12 @@
5
5
  @scope (divider-ui) {
6
6
  :where(:scope) {
7
7
  /* ── Tokens ── */
8
- --divider-color: var(--a-border-subtle);
9
- --divider-size: 1px;
10
- --divider-spacing: var(--a-space-3);
11
- --divider-label-font: var(--a-ui-sm);
12
- --divider-label-fg: var(--a-fg-muted);
13
- --divider-label-px: var(--a-space-2);
8
+ --divider-color-default: var(--a-border-subtle);
9
+ --divider-size-default: 1px;
10
+ --divider-spacing-default: var(--a-space-3);
11
+ --divider-label-font-default: var(--a-ui-sm);
12
+ --divider-label-fg-default: var(--a-fg-muted);
13
+ --divider-label-px-default: var(--a-space-2);
14
14
  }
15
15
 
16
16
  /* ── Horizontal (default) ── */
@@ -19,38 +19,38 @@
19
19
  display: flex;
20
20
  align-items: center;
21
21
  width: 100%;
22
- margin-block: var(--divider-spacing);
22
+ margin-block: var(--divider-spacing, var(--divider-spacing-default));
23
23
  }
24
24
 
25
25
  /* Horizontal line without label */
26
26
  :scope:not(:has([slot="label"]))::before {
27
27
  content: '';
28
28
  flex: 1;
29
- height: var(--divider-size);
30
- background: var(--divider-color);
29
+ height: var(--divider-size, var(--divider-size-default));
30
+ background: var(--divider-color, var(--divider-color-default));
31
31
  }
32
32
 
33
33
  /* Horizontal line with label — left line */
34
34
  :scope:has([slot="label"])::before {
35
35
  content: '';
36
36
  flex: 1;
37
- height: var(--divider-size);
38
- background: var(--divider-color);
37
+ height: var(--divider-size, var(--divider-size-default));
38
+ background: var(--divider-color, var(--divider-color-default));
39
39
  }
40
40
 
41
41
  /* Horizontal line with label — right line */
42
42
  :scope:has([slot="label"])::after {
43
43
  content: '';
44
44
  flex: 1;
45
- height: var(--divider-size);
46
- background: var(--divider-color);
45
+ height: var(--divider-size, var(--divider-size-default));
46
+ background: var(--divider-color, var(--divider-color-default));
47
47
  }
48
48
 
49
49
  /* ── Label ── */
50
50
  [slot="label"] {
51
- padding-inline: var(--divider-label-px);
52
- font-size: var(--divider-label-font);
53
- color: var(--divider-label-fg);
51
+ padding-inline: var(--divider-label-px, var(--divider-label-px-default));
52
+ font-size: var(--divider-label-font, var(--divider-label-font-default));
53
+ color: var(--divider-label-fg, var(--divider-label-fg-default));
54
54
  white-space: nowrap;
55
55
  line-height: 1;
56
56
  }
@@ -63,40 +63,40 @@
63
63
  height: auto;
64
64
  align-self: stretch;
65
65
  margin-block: 0;
66
- margin-inline: var(--divider-spacing);
66
+ margin-inline: var(--divider-spacing, var(--divider-spacing-default));
67
67
  }
68
68
 
69
69
  /* Vertical line without label */
70
70
  :scope[vertical]:not(:has([slot="label"]))::before {
71
71
  content: '';
72
72
  flex: 1;
73
- width: var(--divider-size);
73
+ width: var(--divider-size, var(--divider-size-default));
74
74
  height: auto;
75
- background: var(--divider-color);
75
+ background: var(--divider-color, var(--divider-color-default));
76
76
  }
77
77
 
78
78
  /* Vertical line with label — top line */
79
79
  :scope[vertical]:has([slot="label"])::before {
80
80
  content: '';
81
81
  flex: 1;
82
- width: var(--divider-size);
82
+ width: var(--divider-size, var(--divider-size-default));
83
83
  height: auto;
84
- background: var(--divider-color);
84
+ background: var(--divider-color, var(--divider-color-default));
85
85
  }
86
86
 
87
87
  /* Vertical line with label — bottom line */
88
88
  :scope[vertical]:has([slot="label"])::after {
89
89
  content: '';
90
90
  flex: 1;
91
- width: var(--divider-size);
91
+ width: var(--divider-size, var(--divider-size-default));
92
92
  height: auto;
93
- background: var(--divider-color);
93
+ background: var(--divider-color, var(--divider-color-default));
94
94
  }
95
95
 
96
96
  /* Vertical label */
97
97
  :scope[vertical] [slot="label"] {
98
98
  padding-inline: 0;
99
- padding-block: var(--divider-label-px);
99
+ padding-block: var(--divider-label-px, var(--divider-label-px-default));
100
100
  writing-mode: vertical-lr;
101
101
  }
102
102
  }
package/components/embed/embed.css CHANGED
@@ -1,18 +1,18 @@
1
1
  @scope (embed-ui) {
2
2
  :where(:scope) {
3
3
  /* ── Tokens ── */
4
- --embed-bg: var(--a-bg-muted);
5
- --embed-radius: var(--a-radius-md);
6
- --embed-border: var(--a-border-subtle);
4
+ --embed-bg-default: var(--a-bg-muted);
5
+ --embed-radius-default: var(--a-radius-md);
6
+ --embed-border-default: var(--a-border-subtle);
7
7
  }
8
8
 
9
9
  :scope {
10
10
  box-sizing: border-box;
11
11
  display: block;
12
12
  overflow: hidden;
13
- border-radius: var(--embed-radius);
14
- border: 1px solid var(--embed-border);
15
- background: var(--embed-bg);
13
+ border-radius: var(--embed-radius, var(--embed-radius-default));
14
+ border: 1px solid var(--embed-border, var(--embed-border-default));
15
+ background: var(--embed-bg, var(--embed-bg-default));
16
16
  position: relative;
17
17
  }
18
18