@adia-ai/web-components 0.7.3 → 0.7.4

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 (136) 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 +59 -57
  7. package/components/agent-reasoning/agent-reasoning.css +54 -54
  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 +53 -53
  11. package/components/avatar/avatar.css +27 -27
  12. package/components/badge/badge.css +56 -53
  13. package/components/block/block.css +16 -16
  14. package/components/blockquote/blockquote.css +16 -16
  15. package/components/breadcrumb/breadcrumb.css +23 -23
  16. package/components/button/button.css +99 -100
  17. package/components/calendar-grid/calendar-grid.css +95 -92
  18. package/components/calendar-picker/calendar-picker.css +141 -139
  19. package/components/canvas/canvas.css +12 -12
  20. package/components/card/card.css +83 -83
  21. package/components/chart/chart.css +218 -218
  22. package/components/chart-legend/chart-legend.css +26 -26
  23. package/components/check/check.css +40 -40
  24. package/components/code/code.css +125 -125
  25. package/components/col/col.css +15 -15
  26. package/components/color-picker/color-picker.css +55 -55
  27. package/components/combobox/combobox.css +64 -62
  28. package/components/command/command.css +91 -91
  29. package/components/context-menu/context-menu.css +1 -1
  30. package/components/date-range-picker/date-range-picker.css +59 -59
  31. package/components/datetime-picker/datetime-picker.css +25 -25
  32. package/components/demo-toggle/demo-toggle.css +27 -27
  33. package/components/description-list/description-list.css +18 -18
  34. package/components/divider/divider.css +24 -24
  35. package/components/embed/embed.css +6 -6
  36. package/components/empty-state/empty-state.css +29 -29
  37. package/components/feed/feed.css +12 -12
  38. package/components/field/field.css +28 -28
  39. package/components/field/field.test.js +2 -2
  40. package/components/fields/fields.css +5 -5
  41. package/components/grid/grid.a2ui.json +10 -0
  42. package/components/grid/grid.css +23 -5
  43. package/components/grid/grid.d.ts +4 -0
  44. package/components/grid/grid.yaml +13 -0
  45. package/components/heatmap/heatmap.css +61 -61
  46. package/components/icon/icon.css +12 -12
  47. package/components/image/image.css +14 -14
  48. package/components/inline-edit/inline-edit.css +16 -16
  49. package/components/inline-message/inline-message.css +16 -16
  50. package/components/input/input.css +69 -66
  51. package/components/inspector/inspector.css +6 -6
  52. package/components/integration-card/integration-card.css +41 -41
  53. package/components/integration-card/integration-card.test.js +4 -4
  54. package/components/kbd/kbd.css +47 -40
  55. package/components/link/link.css +12 -12
  56. package/components/list/list.css +8 -8
  57. package/components/list-window/list-window.css +10 -10
  58. package/components/loading-overlay/loading-overlay.css +17 -18
  59. package/components/loading-overlay/loading-overlay.test.js +8 -8
  60. package/components/mark/mark.css +16 -16
  61. package/components/menu/menu.css +9 -9
  62. package/components/modal/modal.class.js +5 -9
  63. package/components/modal/modal.css +43 -43
  64. package/components/nav/nav.css +40 -40
  65. package/components/nav-group/nav-group.css +54 -54
  66. package/components/nav-item/nav-item.css +44 -44
  67. package/components/noodles/noodles.css +31 -31
  68. package/components/number-format/number-format.css +4 -4
  69. package/components/option-card/option-card.css +70 -70
  70. package/components/otp-input/otp-input.css +29 -29
  71. package/components/page/page.a2ui.json +1 -1
  72. package/components/page/page.css +27 -27
  73. package/components/page/page.d.ts +1 -1
  74. package/components/page/page.yaml +1 -1
  75. package/components/pagination/pagination.css +6 -6
  76. package/components/pane/pane.css +57 -57
  77. package/components/password-strength/password-strength.css +32 -32
  78. package/components/pipeline-status/pipeline-status.css +67 -67
  79. package/components/popover/popover.css +11 -11
  80. package/components/preview/preview.css +21 -21
  81. package/components/progress/progress.css +23 -23
  82. package/components/progress-row/progress-row.css +17 -17
  83. package/components/qr-code/qr-code.css +4 -4
  84. package/components/radio/radio.css +39 -39
  85. package/components/range/range.css +58 -55
  86. package/components/rating/rating.css +28 -28
  87. package/components/relative-time/relative-time.css +6 -6
  88. package/components/richtext/richtext.css +133 -133
  89. package/components/row/row.css +19 -19
  90. package/components/search/search.css +5 -5
  91. package/components/segment/segment.css +29 -24
  92. package/components/segmented/segmented.css +30 -25
  93. package/components/select/select.css +95 -93
  94. package/components/skeleton/skeleton.css +14 -14
  95. package/components/skip-nav/skip-nav.css +4 -4
  96. package/components/slider/slider.css +61 -61
  97. package/components/spinner/spinner.css +40 -40
  98. package/components/spinner/spinner.test.js +10 -12
  99. package/components/stack/stack.css +11 -11
  100. package/components/stat/stat.css +27 -27
  101. package/components/step-progress/step-progress.css +20 -20
  102. package/components/stepper/stepper.css +29 -29
  103. package/components/stream/stream.css +12 -12
  104. package/components/swatch/swatch.css +68 -68
  105. package/components/swiper/swiper.class.js +5 -12
  106. package/components/swiper/swiper.css +57 -57
  107. package/components/switch/switch.css +53 -53
  108. package/components/table/table.css +166 -163
  109. package/components/table-toolbar/table-toolbar.css +33 -33
  110. package/components/tabs/tabs.css +54 -51
  111. package/components/tag/tag.css +74 -71
  112. package/components/tag/tag.test.js +14 -14
  113. package/components/tags-input/tags-input.css +51 -49
  114. package/components/text/text.css +44 -44
  115. package/components/textarea/textarea.css +49 -46
  116. package/components/time-picker/time-picker.css +47 -47
  117. package/components/timeline/timeline.css +54 -54
  118. package/components/toast/toast.css +58 -58
  119. package/components/toc/toc.css +28 -28
  120. package/components/toggle-group/toggle-group.css +9 -6
  121. package/components/toggle-scheme/toggle-scheme.css +2 -2
  122. package/components/toolbar/toolbar.css +18 -18
  123. package/components/tooltip/tooltip.css +2 -2
  124. package/components/tour/tour.css +4 -4
  125. package/components/tree/tree.css +37 -37
  126. package/components/upload/upload.css +49 -49
  127. package/dist/host.min.css +1 -0
  128. package/dist/web-components.min.css +1 -1
  129. package/dist/web-components.min.js +2 -2
  130. package/package.json +1 -1
  131. package/styles/foundation/space.css +19 -18
  132. package/styles/host.css +48 -0
  133. package/styles/prose.css +187 -173
  134. package/styles/type/scale.css +6 -0
  135. package/styles/typography.css +10 -5
  136. package/styles/verse.css +122 -0
package/components/col/col.css CHANGED
@@ -1,17 +1,17 @@
1
1
  @scope (col-ui) {
2
2
  :where(:scope) {
3
- --col-gap-default: var(--a-gap-self, var(--a-gap));
4
- --col-justify-default: flex-start;
5
- --col-align-default: stretch;
3
+ --col-gap: var(--a-gap-self, var(--a-gap));
4
+ --col-justify: flex-start;
5
+ --col-align: stretch;
6
6
  }
7
7
 
8
8
  :scope {
9
9
  box-sizing: border-box;
10
10
  display: flex;
11
11
  flex-direction: column;
12
- gap: var(--col-gap, var(--col-gap-default));
13
- justify-content: var(--col-justify, var(--col-justify-default));
14
- align-items: var(--col-align, var(--col-align-default));
12
+ gap: var(--col-gap);
13
+ justify-content: var(--col-justify);
14
+ align-items: var(--col-align);
15
15
  /* Universal [padding] / [margin] opt-in — see tokens.css for scale. */
16
16
  padding: var(--a-padding, 0);
17
17
  margin: var(--a-margin, 0);
@@ -21,17 +21,17 @@
21
21
  }
22
22
 
23
23
  /* Justify */
24
- :scope[justify="start"] { --col-justify-default: flex-start; }
25
- :scope[justify="center"] { --col-justify-default: center; }
26
- :scope[justify="end"] { --col-justify-default: flex-end; }
27
- :scope[justify="space-between"] { --col-justify-default: space-between; }
28
- :scope[justify="space-around"] { --col-justify-default: space-around; }
24
+ :scope[justify="start"] { --col-justify: flex-start; }
25
+ :scope[justify="center"] { --col-justify: center; }
26
+ :scope[justify="end"] { --col-justify: flex-end; }
27
+ :scope[justify="space-between"] { --col-justify: space-between; }
28
+ :scope[justify="space-around"] { --col-justify: space-around; }
29
29
 
30
30
  /* Align */
31
- :scope[align="start"] { --col-align-default: flex-start; text-align: start; }
32
- :scope[align="center"] { --col-align-default: center; text-align: center; }
33
- :scope[align="end"] { --col-align-default: flex-end; text-align: end; }
34
- :scope[align="stretch"] { --col-align-default: stretch; }
31
+ :scope[align="start"] { --col-align: flex-start; text-align: start; }
32
+ :scope[align="center"] { --col-align: center; text-align: center; }
33
+ :scope[align="end"] { --col-align: flex-end; text-align: end; }
34
+ :scope[align="stretch"] { --col-align: stretch; }
35
35
 
36
36
  /* Grow — fills remaining space in a flex parent. Used inside row-ui
37
37
  to push trailing content (amounts, badges) to the far edge. */
package/components/color-picker/color-picker.css CHANGED
@@ -1,41 +1,41 @@
1
1
  @scope (color-picker-ui) {
2
2
  :where(:scope) {
3
3
  /* ── Tokens ── */
4
- --color-picker-gap-default: var(--a-space-2);
5
- --color-picker-area-height-default: 10rem;
6
- --color-picker-area-radius-default: var(--a-radius-md);
7
- --color-picker-track-height-default: 0.75rem;
8
- --color-picker-track-radius-default: var(--a-radius-full);
9
- --color-picker-thumb-size-default: 1.125rem;
10
- --color-picker-thumb-border-default: 2px solid var(--a-chrome-border);
11
- --color-picker-thumb-shadow-default: 0 0 0 1px var(--a-chrome-ring-subtle), 0 2px 4px var(--a-chrome-shadow-soft);
12
- --color-picker-font-default: var(--a-font-family-code);
13
- --color-picker-font-size-default: var(--a-ui-sm);
14
- --color-picker-fg-default: var(--a-fg);
15
- --color-picker-label-fg-default: var(--a-fg-muted);
16
- --color-picker-border-default: var(--a-border-subtle);
17
- --color-picker-output-bg-default: var(--a-bg-muted);
18
- --color-picker-output-radius-default: var(--a-radius-sm);
19
- --color-picker-fg-disabled-default: var(--a-ui-text-disabled);
4
+ --color-picker-gap: var(--a-space-2);
5
+ --color-picker-area-height: 10rem;
6
+ --color-picker-area-radius: var(--a-radius-md);
7
+ --color-picker-track-height: 0.75rem;
8
+ --color-picker-track-radius: var(--a-radius-full);
9
+ --color-picker-thumb-size: 1.125rem;
10
+ --color-picker-thumb-border: 2px solid var(--a-chrome-border);
11
+ --color-picker-thumb-shadow: 0 0 0 1px var(--a-chrome-ring-subtle), 0 2px 4px var(--a-chrome-shadow-soft);
12
+ --color-picker-font: var(--a-font-family-code);
13
+ --color-picker-font-size: var(--a-ui-sm);
14
+ --color-picker-fg: var(--a-fg);
15
+ --color-picker-label-fg: var(--a-fg-muted);
16
+ --color-picker-border: var(--a-border-subtle);
17
+ --color-picker-output-bg: var(--a-bg-muted);
18
+ --color-picker-output-radius: var(--a-radius-sm);
19
+ --color-picker-fg-disabled: var(--a-ui-text-disabled);
20
20
 
21
21
  /* ── Spacing ── */
22
- --color-picker-gap-sm-default: var(--a-space-1);
23
- --color-picker-pad-sm-default: var(--a-space-2);
22
+ --color-picker-gap-sm: var(--a-space-1);
23
+ --color-picker-pad-sm: var(--a-space-2);
24
24
 
25
25
  /* ── Interactive ── */
26
- --color-picker-focus-color-default: var(--a-accent);
27
- --color-picker-disabled-border-default: var(--a-border-subtle);
26
+ --color-picker-focus-color: var(--a-accent);
27
+ --color-picker-disabled-border: var(--a-border-subtle);
28
28
 
29
29
  /* ── Transitions ── */
30
- --color-picker-duration-default: var(--a-duration-fast);
31
- --color-picker-easing-default: var(--a-easing);
30
+ --color-picker-duration: var(--a-duration-fast);
31
+ --color-picker-easing: var(--a-easing);
32
32
  }
33
33
 
34
34
  :scope {
35
35
  box-sizing: border-box;
36
36
  display: flex;
37
37
  flex-direction: column;
38
- gap: var(--color-picker-gap, var(--color-picker-gap-default));
38
+ gap: var(--color-picker-gap);
39
39
  width: 100%;
40
40
  }
41
41
 
@@ -44,16 +44,16 @@
44
44
  [data-area] {
45
45
  position: relative;
46
46
  width: 100%;
47
- height: var(--color-picker-area-height, var(--color-picker-area-height-default));
48
- border-radius: var(--color-picker-area-radius, var(--color-picker-area-radius-default));
49
- border: 1px solid var(--color-picker-border, var(--color-picker-border-default));
47
+ height: var(--color-picker-area-height);
48
+ border-radius: var(--color-picker-area-radius);
49
+ border: 1px solid var(--color-picker-border);
50
50
  overflow: hidden;
51
51
  cursor: crosshair;
52
52
  touch-action: none;
53
53
  }
54
54
 
55
55
  [data-area]:focus-visible {
56
- outline: 2px solid var(--color-picker-focus-color, var(--color-picker-focus-color-default));
56
+ outline: 2px solid var(--color-picker-focus-color);
57
57
  outline-offset: 2px;
58
58
  }
59
59
 
@@ -63,11 +63,11 @@
63
63
 
64
64
  [data-area-thumb] {
65
65
  position: absolute;
66
- width: var(--color-picker-thumb-size, var(--color-picker-thumb-size-default));
67
- height: var(--color-picker-thumb-size, var(--color-picker-thumb-size-default));
66
+ width: var(--color-picker-thumb-size);
67
+ height: var(--color-picker-thumb-size);
68
68
  border-radius: 50%;
69
- border: var(--color-picker-thumb-border, var(--color-picker-thumb-border-default));
70
- box-shadow: var(--color-picker-thumb-shadow, var(--color-picker-thumb-shadow-default));
69
+ border: var(--color-picker-thumb-border);
70
+ box-shadow: var(--color-picker-thumb-shadow);
71
71
  transform: translate(-50%, -50%);
72
72
  pointer-events: none;
73
73
  z-index: 1;
@@ -78,7 +78,7 @@
78
78
  [data-sliders] {
79
79
  display: flex;
80
80
  flex-direction: column;
81
- gap: var(--color-picker-gap-sm, var(--color-picker-gap-sm-default));
81
+ gap: var(--color-picker-gap-sm);
82
82
  }
83
83
 
84
84
  /* ═══════ Hue Track ═══════ */
@@ -86,25 +86,25 @@
86
86
  [data-hue-track] {
87
87
  position: relative;
88
88
  width: 100%;
89
- height: var(--color-picker-track-height, var(--color-picker-track-height-default));
90
- border-radius: var(--color-picker-track-radius, var(--color-picker-track-radius-default));
89
+ height: var(--color-picker-track-height);
90
+ border-radius: var(--color-picker-track-radius);
91
91
  cursor: pointer;
92
92
  touch-action: none;
93
93
  }
94
94
 
95
95
  [data-hue-track]:focus-visible {
96
- outline: 2px solid var(--color-picker-focus-color, var(--color-picker-focus-color-default));
96
+ outline: 2px solid var(--color-picker-focus-color);
97
97
  outline-offset: 2px;
98
98
  }
99
99
 
100
100
  [data-hue-thumb] {
101
101
  position: absolute;
102
102
  top: 50%;
103
- width: var(--color-picker-thumb-size, var(--color-picker-thumb-size-default));
104
- height: var(--color-picker-thumb-size, var(--color-picker-thumb-size-default));
103
+ width: var(--color-picker-thumb-size);
104
+ height: var(--color-picker-thumb-size);
105
105
  border-radius: 50%;
106
- border: var(--color-picker-thumb-border, var(--color-picker-thumb-border-default));
107
- box-shadow: var(--color-picker-thumb-shadow, var(--color-picker-thumb-shadow-default));
106
+ border: var(--color-picker-thumb-border);
107
+ box-shadow: var(--color-picker-thumb-shadow);
108
108
  transform: translate(-50%, -50%);
109
109
  pointer-events: none;
110
110
  }
@@ -114,22 +114,22 @@
114
114
  [data-output] {
115
115
  display: flex;
116
116
  flex-direction: column;
117
- gap: var(--color-picker-gap-sm, var(--color-picker-gap-sm-default));
117
+ gap: var(--color-picker-gap-sm);
118
118
  }
119
119
 
120
120
  [data-output-group] {
121
121
  display: flex;
122
122
  align-items: center;
123
- gap: var(--color-picker-gap-sm, var(--color-picker-gap-sm-default));
124
- padding: var(--color-picker-gap-sm, var(--color-picker-gap-sm-default)) var(--color-picker-pad-sm, var(--color-picker-pad-sm-default));
125
- background: var(--color-picker-output-bg, var(--color-picker-output-bg-default));
126
- border-radius: var(--color-picker-output-radius, var(--color-picker-output-radius-default));
123
+ gap: var(--color-picker-gap-sm);
124
+ padding: var(--color-picker-gap-sm) var(--color-picker-pad-sm);
125
+ background: var(--color-picker-output-bg);
126
+ border-radius: var(--color-picker-output-radius);
127
127
  }
128
128
 
129
129
  [data-output-value] {
130
- font-family: var(--color-picker-font, var(--color-picker-font-default));
131
- font-size: var(--color-picker-font-size, var(--color-picker-font-size-default));
132
- color: var(--color-picker-fg, var(--color-picker-fg-default));
130
+ font-family: var(--color-picker-font);
131
+ font-size: var(--color-picker-font-size);
132
+ color: var(--color-picker-fg);
133
133
  user-select: all;
134
134
  -webkit-user-select: all;
135
135
  flex: 1;
@@ -149,23 +149,23 @@
149
149
  border: none;
150
150
  padding: 0;
151
151
  cursor: pointer;
152
- color: var(--color-picker-label-fg, var(--color-picker-label-fg-default));
153
- transition: color var(--color-picker-duration, var(--color-picker-duration-default)) var(--color-picker-easing, var(--color-picker-easing-default));
152
+ color: var(--color-picker-label-fg);
153
+ transition: color var(--color-picker-duration) var(--color-picker-easing);
154
154
  }
155
155
 
156
156
  [data-copy]:hover {
157
- color: var(--color-picker-fg, var(--color-picker-fg-default));
157
+ color: var(--color-picker-fg);
158
158
  }
159
159
 
160
160
  [data-copy] icon-ui {
161
- --a-icon-size: var(--color-picker-font-size, var(--color-picker-font-size-default));
161
+ --a-icon-size: var(--color-picker-font-size);
162
162
  }
163
163
 
164
164
  /* ═══════ Disabled ═══════ */
165
165
 
166
166
  :scope[disabled] {
167
167
  pointer-events: none;
168
- color: var(--color-picker-fg-disabled, var(--color-picker-fg-disabled-default));
168
+ color: var(--color-picker-fg-disabled);
169
169
  }
170
170
  :scope[disabled] [data-area],
171
171
  :scope[disabled] [data-hue-track] {
@@ -173,10 +173,10 @@
173
173
  cursor: not-allowed;
174
174
  }
175
175
  :scope[disabled] slider-ui {
176
- --slider-fill-bg: var(--color-picker-disabled-border, var(--color-picker-disabled-border-default));
177
- --slider-thumb-bg: var(--color-picker-disabled-border, var(--color-picker-disabled-border-default));
176
+ --slider-fill-bg: var(--color-picker-disabled-border);
177
+ --slider-thumb-bg: var(--color-picker-disabled-border);
178
178
  }
179
179
  :scope[disabled] [data-output-value] {
180
- color: var(--color-picker-fg-disabled, var(--color-picker-fg-disabled-default));
180
+ color: var(--color-picker-fg-disabled);
181
181
  }
182
182
  }
package/components/combobox/combobox.css CHANGED
@@ -1,52 +1,52 @@
1
1
  @scope (combobox-ui) {
2
2
  :where(:scope) {
3
3
  /* ── Layout ── */
4
- --combobox-gap-default: var(--a-space-2);
5
- --combobox-field-gap-default: var(--a-space-1);
6
- --combobox-height-default: var(--a-size);
7
- --combobox-px-default: var(--a-ui-px);
8
- --combobox-radius-default: var(--a-radius);
4
+ --combobox-gap: var(--a-space-2);
5
+ --combobox-field-gap: var(--a-space-1);
6
+ --combobox-height: var(--a-size);
7
+ --combobox-px: var(--a-ui-px);
8
+ --combobox-radius: var(--a-radius);
9
9
 
10
10
  /* ── Typography ── */
11
- --combobox-font-size-default: var(--a-ui-size);
12
- --combobox-label-size-default: var(--a-label-size);
11
+ --combobox-font-size: var(--a-ui-size);
12
+ --combobox-label-size: var(--a-label-size);
13
13
 
14
14
  /* ── Colors — field ── */
15
- --combobox-bg-default: var(--a-ui-bg);
16
- --combobox-bg-hover-default: var(--a-ui-bg-hover);
17
- --combobox-border-default: var(--a-ui-border);
18
- --combobox-border-hover-default: var(--a-ui-border-hover);
19
- --combobox-focus-ring-default: var(--a-focus-ring);
20
- --combobox-focus-ring-invalid-default: var(--a-focus-ring-invalid);
21
- --combobox-fg-default: var(--a-ui-text);
22
- --combobox-fg-muted-default: var(--a-ui-text-muted);
23
- --combobox-fg-subtle-default: var(--a-ui-text-subtle);
24
- --combobox-fg-disabled-default: var(--a-ui-text-disabled);
25
- --combobox-label-fg-default: var(--a-ui-text-muted);
26
- --combobox-placeholder-fg-default: var(--a-ui-text-placeholder);
27
- --combobox-caret-fg-default: var(--a-ui-text-muted);
15
+ --combobox-bg: var(--a-ui-bg);
16
+ --combobox-bg-hover: var(--a-ui-bg-hover);
17
+ --combobox-border: var(--a-ui-border);
18
+ --combobox-border-hover: var(--a-ui-border-hover);
19
+ --combobox-focus-ring: var(--a-focus-ring);
20
+ --combobox-focus-ring-invalid: var(--a-focus-ring-invalid);
21
+ --combobox-fg: var(--a-ui-text);
22
+ --combobox-fg-muted: var(--a-ui-text-muted);
23
+ --combobox-fg-subtle: var(--a-ui-text-subtle);
24
+ --combobox-fg-disabled: var(--a-ui-text-disabled);
25
+ --combobox-label-fg: var(--a-ui-text-muted);
26
+ --combobox-placeholder-fg: var(--a-ui-text-placeholder);
27
+ --combobox-caret-fg: var(--a-ui-text-muted);
28
28
 
29
29
  /* ── Transition ── */
30
- --combobox-duration-default: var(--a-duration-fast);
31
- --combobox-easing-default: var(--a-easing);
30
+ --combobox-duration: var(--a-duration-fast);
31
+ --combobox-easing: var(--a-easing);
32
32
 
33
33
  /* ── Popover ── */
34
- --combobox-popover-bg-default: var(--a-canvas-bright);
35
- --combobox-popover-border-default: var(--a-ui-border);
36
- --combobox-popover-radius-default: var(--a-radius);
37
- --combobox-popover-shadow-default: var(--a-shadow-lg);
34
+ --combobox-popover-bg: var(--a-canvas-bright);
35
+ --combobox-popover-border: var(--a-ui-border);
36
+ --combobox-popover-radius: var(--a-radius);
37
+ --combobox-popover-shadow: var(--a-shadow-lg);
38
38
 
39
39
  /* ── Options ── */
40
- --combobox-option-px-default: var(--a-ui-px);
41
- --combobox-option-py-default: var(--a-space-1);
42
- --combobox-option-bg-active-default: var(--a-ui-bg-hover);
43
- --combobox-option-fg-active-default: var(--a-ui-text-hover);
44
- --combobox-option-bg-selected-default: var(--a-ui-bg-selected);
45
- --combobox-option-fg-selected-default: var(--a-ui-text-selected);
40
+ --combobox-option-px: var(--a-ui-px);
41
+ --combobox-option-py: var(--a-space-1);
42
+ --combobox-option-bg-active: var(--a-ui-bg-hover);
43
+ --combobox-option-fg-active: var(--a-ui-text-hover);
44
+ --combobox-option-bg-selected: var(--a-ui-bg-selected);
45
+ --combobox-option-fg-selected: var(--a-ui-text-selected);
46
46
 
47
47
  /* ── Match highlight ── */
48
- --combobox-match-bg-default: var(--a-accent-muted);
49
- --combobox-match-fg-default: var(--a-accent-strong);
48
+ --combobox-match-bg: var(--a-accent-muted);
49
+ --combobox-match-fg: var(--a-accent-strong);
50
50
 
51
51
  text-align: start; /* §text-align-reset — block ancestor centering */
52
52
  }
@@ -56,54 +56,56 @@
56
56
  box-sizing: border-box;
57
57
  display: flex;
58
58
  flex-direction: column;
59
- gap: var(--combobox-gap, var(--combobox-gap-default));
59
+ gap: var(--combobox-gap);
60
60
  position: relative;
61
61
  min-width: 0;
62
- font-size: var(--combobox-font-size, var(--combobox-font-size-default));
62
+ /* font-family floor on the host — internal input/options inherit it. */
63
+ font-family: var(--combobox-font-family, var(--a-font-family-ui));
64
+ font-size: var(--combobox-font-size);
63
65
  }
64
66
 
65
67
  :scope[disabled] {
66
68
  pointer-events: none;
67
- color: var(--combobox-fg-disabled, var(--combobox-fg-disabled-default));
69
+ color: var(--combobox-fg-disabled);
68
70
  opacity: 0.6;
69
71
  }
70
72
 
71
73
  /* ── Label ── */
72
74
  [data-label] {
73
75
  display: block;
74
- font-size: var(--combobox-label-size, var(--combobox-label-size-default));
75
- color: var(--combobox-label-fg, var(--combobox-label-fg-default));
76
+ font-size: var(--combobox-label-size);
77
+ color: var(--combobox-label-fg);
76
78
  }
77
79
 
78
80
  /* ── Field ── */
79
81
  [data-field] {
80
82
  display: flex;
81
83
  align-items: center;
82
- gap: var(--combobox-field-gap, var(--combobox-field-gap-default));
83
- min-height: var(--combobox-height, var(--combobox-height-default));
84
- padding: 0 var(--combobox-px, var(--combobox-px-default));
85
- border: 1px solid var(--combobox-border, var(--combobox-border-default));
86
- border-radius: var(--combobox-radius, var(--combobox-radius-default));
87
- background: var(--combobox-bg, var(--combobox-bg-default));
88
- color: var(--combobox-fg, var(--combobox-fg-default));
84
+ gap: var(--combobox-field-gap);
85
+ min-height: var(--combobox-height);
86
+ padding: 0 var(--combobox-px);
87
+ border: 1px solid var(--combobox-border);
88
+ border-radius: var(--combobox-radius);
89
+ background: var(--combobox-bg);
90
+ color: var(--combobox-fg);
89
91
  transition:
90
- background var(--combobox-duration, var(--combobox-duration-default)) var(--combobox-easing, var(--combobox-easing-default)),
91
- border-color var(--combobox-duration, var(--combobox-duration-default)) var(--combobox-easing, var(--combobox-easing-default)),
92
- color var(--combobox-duration, var(--combobox-duration-default)) var(--combobox-easing, var(--combobox-easing-default)),
93
- box-shadow var(--combobox-duration, var(--combobox-duration-default)) var(--combobox-easing, var(--combobox-easing-default));
92
+ background var(--combobox-duration) var(--combobox-easing),
93
+ border-color var(--combobox-duration) var(--combobox-easing),
94
+ color var(--combobox-duration) var(--combobox-easing),
95
+ box-shadow var(--combobox-duration) var(--combobox-easing);
94
96
  }
95
97
 
96
98
  :scope:not([disabled]) [data-field]:hover {
97
- background: var(--combobox-bg-hover, var(--combobox-bg-hover-default));
98
- border-color: var(--combobox-border-hover, var(--combobox-border-hover-default));
99
+ background: var(--combobox-bg-hover);
100
+ border-color: var(--combobox-border-hover);
99
101
  }
100
102
 
101
103
  :scope:focus-within [data-field] {
102
- box-shadow: var(--combobox-focus-ring, var(--combobox-focus-ring-default));
104
+ box-shadow: var(--combobox-focus-ring);
103
105
  }
104
106
  :scope[aria-invalid="true"]:focus-within [data-field],
105
107
  :scope[error]:focus-within [data-field] {
106
- box-shadow: var(--combobox-focus-ring-invalid, var(--combobox-focus-ring-invalid-default));
108
+ box-shadow: var(--combobox-focus-ring-invalid);
107
109
  }
108
110
 
109
111
  [data-prefix],
@@ -111,8 +113,8 @@
111
113
  display: inline-flex;
112
114
  align-items: center;
113
115
  flex-shrink: 0;
114
- color: var(--combobox-caret-fg, var(--combobox-caret-fg-default));
115
- --a-icon-size: var(--combobox-font-size, var(--combobox-font-size-default));
116
+ color: var(--combobox-caret-fg);
117
+ --a-icon-size: var(--combobox-font-size);
116
118
  }
117
119
  [data-prefix]:empty { display: none; }
118
120
  [data-suffix] {
@@ -124,9 +126,9 @@
124
126
  min-width: 0;
125
127
  outline: none;
126
128
  background: transparent;
127
- color: var(--combobox-fg, var(--combobox-fg-default));
129
+ color: var(--combobox-fg);
128
130
  font: inherit;
129
- font-size: var(--combobox-font-size, var(--combobox-font-size-default));
131
+ font-size: var(--combobox-font-size);
130
132
  line-height: 1.4;
131
133
  white-space: nowrap;
132
134
  overflow: hidden;
@@ -140,7 +142,7 @@
140
142
  input-ui + textarea-ui + tags-input-ui use. */
141
143
  [data-input][data-empty]::before {
142
144
  content: attr(data-placeholder);
143
- color: var(--combobox-placeholder-fg, var(--combobox-placeholder-fg-default));
145
+ color: var(--combobox-placeholder-fg);
144
146
  pointer-events: none;
145
147
  position: absolute;
146
148
  inset: 0;
@@ -157,12 +159,12 @@
157
159
  margin: 0;
158
160
  border: 0;
159
161
  background: transparent;
160
- color: var(--combobox-fg-muted, var(--combobox-fg-muted-default));
162
+ color: var(--combobox-fg-muted);
161
163
  cursor: pointer;
162
- --a-icon-size: var(--combobox-font-size, var(--combobox-font-size-default));
164
+ --a-icon-size: var(--combobox-font-size);
163
165
  }
164
166
  [data-clear]:hover {
165
- color: var(--combobox-fg, var(--combobox-fg-default));
167
+ color: var(--combobox-fg);
166
168
  }
167
169
  }
168
170