@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/calendar-picker/calendar-picker.css CHANGED
@@ -3,85 +3,85 @@
3
3
  /* ── Tokens ── */
4
4
 
5
5
  /* Host / label */
6
- --calendar-picker-gap: var(--a-space-2);
7
- --calendar-picker-font-size: var(--a-ui-size);
8
- --calendar-picker-label-size: var(--a-label-size);
9
- --calendar-picker-label-fg: var(--a-label-color);
10
- --calendar-picker-label-fg-focus: var(--a-fg-subtle);
6
+ --calendar-picker-gap-default: var(--a-space-2);
7
+ --calendar-picker-font-size-default: var(--a-ui-size);
8
+ --calendar-picker-label-size-default: var(--a-label-size);
9
+ --calendar-picker-label-fg-default: var(--a-label-color);
10
+ --calendar-picker-label-fg-focus-default: var(--a-fg-subtle);
11
11
 
12
12
  /* Trigger */
13
- --calendar-picker-trigger-height: var(--a-size);
14
- --calendar-picker-trigger-px: var(--a-ui-px);
15
- --calendar-picker-trigger-gap: var(--a-space-1);
16
- --calendar-picker-trigger-radius: var(--a-radius);
17
- --calendar-picker-trigger-bg: var(--a-ui-bg);
18
- --calendar-picker-trigger-bg-hover: var(--a-ui-bg-hover);
19
- --calendar-picker-trigger-fg: var(--a-ui-text-subtle);
20
- --calendar-picker-trigger-border: var(--a-ui-border);
21
- --calendar-picker-trigger-border-hover: var(--a-ui-border-hover);
22
- --calendar-picker-trigger-focus-ring: var(--a-focus-ring);
23
- --calendar-picker-trigger-focus-ring-invalid: var(--a-focus-ring-invalid);
24
- --calendar-picker-trigger-placeholder-fg: var(--a-ui-text-placeholder);
25
- --calendar-picker-trigger-fg-disabled: var(--a-ui-text-disabled);
13
+ --calendar-picker-trigger-height-default: var(--a-size);
14
+ --calendar-picker-trigger-px-default: var(--a-ui-px);
15
+ --calendar-picker-trigger-gap-default: var(--a-space-1);
16
+ --calendar-picker-trigger-radius-default: var(--a-radius);
17
+ --calendar-picker-trigger-bg-default: var(--a-ui-bg);
18
+ --calendar-picker-trigger-bg-hover-default: var(--a-ui-bg-hover);
19
+ --calendar-picker-trigger-fg-default: var(--a-ui-text-subtle);
20
+ --calendar-picker-trigger-border-default: var(--a-ui-border);
21
+ --calendar-picker-trigger-border-hover-default: var(--a-ui-border-hover);
22
+ --calendar-picker-trigger-focus-ring-default: var(--a-focus-ring);
23
+ --calendar-picker-trigger-focus-ring-invalid-default: var(--a-focus-ring-invalid);
24
+ --calendar-picker-trigger-placeholder-fg-default: var(--a-ui-text-placeholder);
25
+ --calendar-picker-trigger-fg-disabled-default: var(--a-ui-text-disabled);
26
26
 
27
27
  /* Popover */
28
- --calendar-picker-popover-bg: var(--a-bg-subtle);
29
- --calendar-picker-popover-border: var(--a-border-subtle);
30
- --calendar-picker-popover-radius: var(--a-radius-lg);
31
- --calendar-picker-popover-shadow: var(--a-shadow-lg);
32
- --calendar-picker-popover-padding: var(--a-space-2);
33
- --calendar-picker-popover-width: 16rem;
34
- --calendar-picker-popover-fg: var(--a-fg);
28
+ --calendar-picker-popover-bg-default: var(--a-bg-subtle);
29
+ --calendar-picker-popover-border-default: var(--a-border-subtle);
30
+ --calendar-picker-popover-radius-default: var(--a-radius-lg);
31
+ --calendar-picker-popover-shadow-default: var(--a-shadow-lg);
32
+ --calendar-picker-popover-padding-default: var(--a-space-2);
33
+ --calendar-picker-popover-width-default: 16rem;
34
+ --calendar-picker-popover-fg-default: var(--a-fg);
35
35
 
36
36
  /* Header */
37
- --calendar-picker-header-gap: var(--a-space-1);
38
- --calendar-picker-header-mb: var(--a-space-2);
39
- --calendar-picker-title-fg: var(--a-fg);
40
- --calendar-picker-title-size: var(--a-ui-size);
41
- --calendar-picker-title-weight: var(--a-weight-medium);
37
+ --calendar-picker-header-gap-default: var(--a-space-1);
38
+ --calendar-picker-header-mb-default: var(--a-space-2);
39
+ --calendar-picker-title-fg-default: var(--a-fg);
40
+ --calendar-picker-title-size-default: var(--a-ui-size);
41
+ --calendar-picker-title-weight-default: var(--a-weight-medium);
42
42
 
43
43
  /* Nav buttons (prev/next) */
44
- --calendar-picker-nav-size: 1.5rem;
45
- --calendar-picker-nav-radius: var(--a-radius-sm);
46
- --calendar-picker-nav-bg: transparent;
47
- --calendar-picker-nav-bg-hover: var(--a-bg-muted);
48
- --calendar-picker-nav-fg: var(--a-fg-muted);
49
- --calendar-picker-nav-fg-hover: var(--a-fg);
50
- --calendar-picker-nav-icon-size: 0.75rem;
44
+ --calendar-picker-nav-size-default: 1.5rem;
45
+ --calendar-picker-nav-radius-default: var(--a-radius-sm);
46
+ --calendar-picker-nav-bg-default: transparent;
47
+ --calendar-picker-nav-bg-hover-default: var(--a-bg-muted);
48
+ --calendar-picker-nav-fg-default: var(--a-fg-muted);
49
+ --calendar-picker-nav-fg-hover-default: var(--a-fg);
50
+ --calendar-picker-nav-icon-size-default: 0.75rem;
51
51
 
52
52
  /* Weekday header */
53
- --calendar-picker-weekday-fg: var(--a-fg-muted);
54
- --calendar-picker-weekday-size: var(--a-ui-sm);
55
- --calendar-picker-weekday-weight: var(--a-weight-medium);
56
- --calendar-picker-weekday-height: 1.5rem;
57
- --calendar-picker-weekday-mb: var(--a-space-1);
53
+ --calendar-picker-weekday-fg-default: var(--a-fg-muted);
54
+ --calendar-picker-weekday-size-default: var(--a-ui-sm);
55
+ --calendar-picker-weekday-weight-default: var(--a-weight-medium);
56
+ --calendar-picker-weekday-height-default: 1.5rem;
57
+ --calendar-picker-weekday-mb-default: var(--a-space-1);
58
58
 
59
59
  /* Day cells */
60
- --calendar-picker-day-size: 2rem;
61
- --calendar-picker-day-radius: var(--a-radius);
62
- --calendar-picker-day-font-size: var(--a-ui-sm);
63
- --calendar-picker-day-bg: transparent;
64
- --calendar-picker-day-fg: var(--a-fg-subtle);
65
- --calendar-picker-day-bg-hover: var(--a-bg-hover);
66
- --calendar-picker-day-fg-hover: var(--a-fg);
67
- --calendar-picker-day-bg-selected-hover: var(--a-accent-bg-hover);
68
- --calendar-picker-day-bg-selected: var(--a-accent);
69
- --calendar-picker-day-fg-selected: var(--a-accent-fg);
70
- --calendar-picker-day-fg-outside: var(--a-fg-muted);
71
- --calendar-picker-day-fg-disabled: var(--a-ui-text-disabled);
72
- --calendar-picker-day-today-border: var(--a-accent);
73
- --calendar-picker-day-today-dot-size: var(--a-space-0-5);
74
- --calendar-picker-day-today-dot-offset: var(--a-space-1);
75
- --calendar-picker-day-grid-gap: var(--a-space-px); /* 1px hairline between cells */
76
- --calendar-picker-day-focus-ring: var(--a-focus-ring);
60
+ --calendar-picker-day-size-default: 2rem;
61
+ --calendar-picker-day-radius-default: var(--a-radius);
62
+ --calendar-picker-day-font-size-default: var(--a-ui-sm);
63
+ --calendar-picker-day-bg-default: transparent;
64
+ --calendar-picker-day-fg-default: var(--a-fg-subtle);
65
+ --calendar-picker-day-bg-hover-default: var(--a-bg-hover);
66
+ --calendar-picker-day-fg-hover-default: var(--a-fg);
67
+ --calendar-picker-day-bg-selected-hover-default: var(--a-accent-bg-hover);
68
+ --calendar-picker-day-bg-selected-default: var(--a-accent);
69
+ --calendar-picker-day-fg-selected-default: var(--a-accent-fg);
70
+ --calendar-picker-day-fg-outside-default: var(--a-fg-muted);
71
+ --calendar-picker-day-fg-disabled-default: var(--a-ui-text-disabled);
72
+ --calendar-picker-day-today-border-default: var(--a-accent);
73
+ --calendar-picker-day-today-dot-size-default: var(--a-space-0-5);
74
+ --calendar-picker-day-today-dot-offset-default: var(--a-space-1);
75
+ --calendar-picker-day-grid-gap-default: var(--a-space-px); /* 1px hairline between cells */
76
+ --calendar-picker-day-focus-ring-default: var(--a-focus-ring);
77
77
 
78
78
  /* Transitions */
79
- --calendar-picker-duration: var(--a-duration-fast);
80
- --calendar-picker-easing: var(--a-easing);
79
+ --calendar-picker-duration-default: var(--a-duration-fast);
80
+ --calendar-picker-easing-default: var(--a-easing);
81
81
 
82
82
  /* Typography */
83
- --calendar-picker-selected-weight: var(--a-weight-medium);
84
- --calendar-picker-today-weight: var(--a-weight-medium);
83
+ --calendar-picker-selected-weight-default: var(--a-weight-medium);
84
+ --calendar-picker-today-weight-default: var(--a-weight-medium);
85
85
  }
86
86
 
87
87
  :scope {
@@ -89,29 +89,29 @@
89
89
  position: relative;
90
90
  display: flex;
91
91
  flex-direction: column;
92
- gap: var(--calendar-picker-gap);
92
+ gap: var(--calendar-picker-gap, var(--calendar-picker-gap-default));
93
93
  min-width: 0;
94
- font-size: var(--calendar-picker-font-size);
94
+ font-size: var(--calendar-picker-font-size, var(--calendar-picker-font-size-default));
95
95
  }
96
96
 
97
97
  /* ── State: disabled ── */
98
98
  :scope[disabled] {
99
99
  pointer-events: none;
100
- color: var(--calendar-picker-trigger-fg-disabled);
100
+ color: var(--calendar-picker-trigger-fg-disabled, var(--calendar-picker-trigger-fg-disabled-default));
101
101
  }
102
102
 
103
103
  /* ── Label (via ::before) ── */
104
104
  :scope::before {
105
105
  content: attr(label);
106
- font-size: var(--calendar-picker-label-size);
107
- color: var(--calendar-picker-label-fg);
106
+ font-size: var(--calendar-picker-label-size, var(--calendar-picker-label-size-default));
107
+ color: var(--calendar-picker-label-fg, var(--calendar-picker-label-fg-default));
108
108
  }
109
109
  :scope:not([label])::before,
110
110
  :scope[label=""]::before {
111
111
  display: none;
112
112
  }
113
113
  :scope:focus-visible::before {
114
- color: var(--calendar-picker-label-fg-focus);
114
+ color: var(--calendar-picker-label-fg-focus, var(--calendar-picker-label-fg-focus-default));
115
115
  }
116
116
 
117
117
  /* ── Trigger ── */
@@ -119,33 +119,33 @@
119
119
  display: flex;
120
120
  align-items: center;
121
121
  justify-content: space-between;
122
- gap: var(--calendar-picker-trigger-gap);
122
+ gap: var(--calendar-picker-trigger-gap, var(--calendar-picker-trigger-gap-default));
123
123
  min-width: 0;
124
- min-height: var(--calendar-picker-trigger-height);
125
- padding: 0 var(--calendar-picker-trigger-px);
126
- border: 1px solid var(--calendar-picker-trigger-border);
127
- border-radius: var(--calendar-picker-trigger-radius);
128
- background: var(--calendar-picker-trigger-bg);
129
- color: var(--calendar-picker-trigger-fg);
124
+ min-height: var(--calendar-picker-trigger-height, var(--calendar-picker-trigger-height-default));
125
+ padding: 0 var(--calendar-picker-trigger-px, var(--calendar-picker-trigger-px-default));
126
+ border: 1px solid var(--calendar-picker-trigger-border, var(--calendar-picker-trigger-border-default));
127
+ border-radius: var(--calendar-picker-trigger-radius, var(--calendar-picker-trigger-radius-default));
128
+ background: var(--calendar-picker-trigger-bg, var(--calendar-picker-trigger-bg-default));
129
+ color: var(--calendar-picker-trigger-fg, var(--calendar-picker-trigger-fg-default));
130
130
  line-height: 1;
131
131
  cursor: pointer;
132
132
  transition:
133
- border-color var(--calendar-picker-duration) var(--calendar-picker-easing),
134
- background var(--calendar-picker-duration) var(--calendar-picker-easing);
133
+ border-color var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default)),
134
+ background var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default));
135
135
  }
136
136
  [slot="trigger"]:hover {
137
- border-color: var(--calendar-picker-trigger-border-hover);
138
- background: var(--calendar-picker-trigger-bg-hover);
137
+ border-color: var(--calendar-picker-trigger-border-hover, var(--calendar-picker-trigger-border-hover-default));
138
+ background: var(--calendar-picker-trigger-bg-hover, var(--calendar-picker-trigger-bg-hover-default));
139
139
  }
140
140
 
141
141
  :scope:focus-visible { outline: none; }
142
142
  :scope:focus-visible [slot="trigger"] {
143
143
  /* Canonical ring via L3 token (see semantics.css FOCUS block). */
144
- box-shadow: var(--calendar-picker-trigger-focus-ring);
144
+ box-shadow: var(--calendar-picker-trigger-focus-ring, var(--calendar-picker-trigger-focus-ring-default));
145
145
  }
146
146
  :scope[aria-invalid="true"]:focus-visible [slot="trigger"],
147
147
  :scope[error]:focus-visible [slot="trigger"] {
148
- box-shadow: var(--calendar-picker-trigger-focus-ring-invalid);
148
+ box-shadow: var(--calendar-picker-trigger-focus-ring-invalid, var(--calendar-picker-trigger-focus-ring-invalid-default));
149
149
  }
150
150
 
151
151
  [slot="display"] {
@@ -153,16 +153,16 @@
153
153
  overflow: hidden;
154
154
  text-overflow: ellipsis;
155
155
  white-space: nowrap;
156
- color: var(--calendar-picker-trigger-fg);
156
+ color: var(--calendar-picker-trigger-fg, var(--calendar-picker-trigger-fg-default));
157
157
  }
158
158
  :scope:not([value]) [slot="display"],
159
159
  :scope[value=""] [slot="display"] {
160
- color: var(--calendar-picker-trigger-placeholder-fg);
160
+ color: var(--calendar-picker-trigger-placeholder-fg, var(--calendar-picker-trigger-placeholder-fg-default));
161
161
  }
162
162
 
163
163
  [slot="caret"] {
164
164
  flex-shrink: 0;
165
- --a-icon-size: var(--calendar-picker-font-size);
165
+ --a-icon-size: var(--calendar-picker-font-size, var(--calendar-picker-font-size-default));
166
166
  }
167
167
  }
168
168
 
@@ -171,15 +171,15 @@
171
171
 
172
172
  calendar-picker-ui [slot="popover"] {
173
173
  margin: 0;
174
- padding: var(--calendar-picker-popover-padding);
175
- border: 1px solid var(--calendar-picker-popover-border);
176
- border-radius: var(--calendar-picker-popover-radius);
177
- background: var(--calendar-picker-popover-bg);
178
- box-shadow: var(--calendar-picker-popover-shadow);
179
- width: var(--calendar-picker-popover-width);
174
+ padding: var(--calendar-picker-popover-padding, var(--calendar-picker-popover-padding-default));
175
+ border: 1px solid var(--calendar-picker-popover-border, var(--calendar-picker-popover-border-default));
176
+ border-radius: var(--calendar-picker-popover-radius, var(--calendar-picker-popover-radius-default));
177
+ background: var(--calendar-picker-popover-bg, var(--calendar-picker-popover-bg-default));
178
+ box-shadow: var(--calendar-picker-popover-shadow, var(--calendar-picker-popover-shadow-default));
179
+ width: var(--calendar-picker-popover-width, var(--calendar-picker-popover-width-default));
180
180
  font-family: inherit;
181
- font-size: var(--calendar-picker-font-size);
182
- color: var(--calendar-picker-popover-fg);
181
+ font-size: var(--calendar-picker-font-size, var(--calendar-picker-font-size-default));
182
+ color: var(--calendar-picker-popover-fg, var(--calendar-picker-popover-fg-default));
183
183
  /* Fade + lift in on first paint via @starting-style. Same pattern
184
184
  as menu/select/popover surfaces — see journal 2026-04-29 §18. */
185
185
  opacity: 1;
@@ -204,16 +204,16 @@ calendar-picker-ui [data-cal-header] {
204
204
  display: flex;
205
205
  align-items: center;
206
206
  justify-content: space-between;
207
- gap: var(--calendar-picker-header-gap);
208
- margin-block-end: var(--calendar-picker-header-mb);
207
+ gap: var(--calendar-picker-header-gap, var(--calendar-picker-header-gap-default));
208
+ margin-block-end: var(--calendar-picker-header-mb, var(--calendar-picker-header-mb-default));
209
209
  }
210
210
 
211
211
  calendar-picker-ui [data-cal-title] {
212
212
  flex: 1;
213
213
  text-align: center;
214
- font-size: var(--calendar-picker-title-size);
215
- font-weight: var(--calendar-picker-title-weight);
216
- color: var(--calendar-picker-title-fg);
214
+ font-size: var(--calendar-picker-title-size, var(--calendar-picker-title-size-default));
215
+ font-weight: var(--calendar-picker-title-weight, var(--calendar-picker-title-weight-default));
216
+ color: var(--calendar-picker-title-fg, var(--calendar-picker-title-fg-default));
217
217
  }
218
218
 
219
219
  calendar-picker-ui [data-cal-prev],
@@ -221,23 +221,23 @@ calendar-picker-ui [data-cal-next] {
221
221
  display: inline-flex;
222
222
  align-items: center;
223
223
  justify-content: center;
224
- width: var(--calendar-picker-nav-size);
225
- height: var(--calendar-picker-nav-size);
224
+ width: var(--calendar-picker-nav-size, var(--calendar-picker-nav-size-default));
225
+ height: var(--calendar-picker-nav-size, var(--calendar-picker-nav-size-default));
226
226
  padding: 0;
227
227
  border: none;
228
- border-radius: var(--calendar-picker-nav-radius);
229
- background: var(--calendar-picker-nav-bg);
230
- color: var(--calendar-picker-nav-fg);
228
+ border-radius: var(--calendar-picker-nav-radius, var(--calendar-picker-nav-radius-default));
229
+ background: var(--calendar-picker-nav-bg, var(--calendar-picker-nav-bg-default));
230
+ color: var(--calendar-picker-nav-fg, var(--calendar-picker-nav-fg-default));
231
231
  cursor: pointer;
232
232
  transition:
233
- background var(--calendar-picker-duration) var(--calendar-picker-easing),
234
- color var(--calendar-picker-duration) var(--calendar-picker-easing);
235
- --a-icon-size: var(--calendar-picker-nav-icon-size);
233
+ background var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default)),
234
+ color var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default));
235
+ --a-icon-size: var(--calendar-picker-nav-icon-size, var(--calendar-picker-nav-icon-size-default));
236
236
  }
237
237
  calendar-picker-ui [data-cal-prev]:hover,
238
238
  calendar-picker-ui [data-cal-next]:hover {
239
- background: var(--calendar-picker-nav-bg-hover);
240
- color: var(--calendar-picker-nav-fg-hover);
239
+ background: var(--calendar-picker-nav-bg-hover, var(--calendar-picker-nav-bg-hover-default));
240
+ color: var(--calendar-picker-nav-fg-hover, var(--calendar-picker-nav-fg-hover-default));
241
241
  }
242
242
 
243
243
  /* Day-of-week header */
@@ -245,24 +245,24 @@ calendar-picker-ui [data-cal-weekdays] {
245
245
  display: grid;
246
246
  grid-template-columns: repeat(7, 1fr);
247
247
  text-align: center;
248
- font-size: var(--calendar-picker-weekday-size);
249
- font-weight: var(--calendar-picker-weekday-weight);
250
- color: var(--calendar-picker-weekday-fg);
251
- margin-block-end: var(--calendar-picker-weekday-mb);
248
+ font-size: var(--calendar-picker-weekday-size, var(--calendar-picker-weekday-size-default));
249
+ font-weight: var(--calendar-picker-weekday-weight, var(--calendar-picker-weekday-weight-default));
250
+ color: var(--calendar-picker-weekday-fg, var(--calendar-picker-weekday-fg-default));
251
+ margin-block-end: var(--calendar-picker-weekday-mb, var(--calendar-picker-weekday-mb-default));
252
252
  }
253
253
 
254
254
  calendar-picker-ui [data-cal-weekdays] span {
255
255
  display: flex;
256
256
  align-items: center;
257
257
  justify-content: center;
258
- height: var(--calendar-picker-weekday-height);
258
+ height: var(--calendar-picker-weekday-height, var(--calendar-picker-weekday-height-default));
259
259
  }
260
260
 
261
261
  /* Day grid */
262
262
  calendar-picker-ui [data-cal-grid] {
263
263
  display: grid;
264
264
  grid-template-columns: repeat(7, 1fr);
265
- gap: var(--calendar-picker-day-grid-gap);
265
+ gap: var(--calendar-picker-day-grid-gap, var(--calendar-picker-day-grid-gap-default));
266
266
  }
267
267
 
268
268
  /* Day buttons */
@@ -270,45 +270,45 @@ calendar-picker-ui [data-cal-day] {
270
270
  display: flex;
271
271
  align-items: center;
272
272
  justify-content: center;
273
- width: var(--calendar-picker-day-size);
274
- height: var(--calendar-picker-day-size);
273
+ width: var(--calendar-picker-day-size, var(--calendar-picker-day-size-default));
274
+ height: var(--calendar-picker-day-size, var(--calendar-picker-day-size-default));
275
275
  margin: 0 auto;
276
276
  padding: 0;
277
277
  border: 1px solid transparent;
278
- border-radius: var(--calendar-picker-day-radius);
279
- background: var(--calendar-picker-day-bg);
280
- color: var(--calendar-picker-day-fg);
278
+ border-radius: var(--calendar-picker-day-radius, var(--calendar-picker-day-radius-default));
279
+ background: var(--calendar-picker-day-bg, var(--calendar-picker-day-bg-default));
280
+ color: var(--calendar-picker-day-fg, var(--calendar-picker-day-fg-default));
281
281
  font: inherit;
282
- font-size: var(--calendar-picker-day-font-size);
282
+ font-size: var(--calendar-picker-day-font-size, var(--calendar-picker-day-font-size-default));
283
283
  cursor: pointer;
284
284
  transition:
285
- background var(--calendar-picker-duration) var(--calendar-picker-easing),
286
- color var(--calendar-picker-duration) var(--calendar-picker-easing),
287
- border-color var(--calendar-picker-duration) var(--calendar-picker-easing);
285
+ background var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default)),
286
+ color var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default)),
287
+ border-color var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default));
288
288
  }
289
289
 
290
290
  /* ── State: hover ── */
291
291
  calendar-picker-ui [data-cal-day]:not([disabled]):not([data-outside]):hover {
292
- background: var(--calendar-picker-day-bg-hover);
293
- color: var(--calendar-picker-day-fg-hover);
292
+ background: var(--calendar-picker-day-bg-hover, var(--calendar-picker-day-bg-hover-default));
293
+ color: var(--calendar-picker-day-fg-hover, var(--calendar-picker-day-fg-hover-default));
294
294
  }
295
295
 
296
296
  /* ── State: focus ── */
297
297
  calendar-picker-ui [data-cal-day]:not([disabled]):not([data-outside]):focus-visible,
298
298
  calendar-picker-ui [data-cal-day][data-focused] {
299
299
  outline: none;
300
- box-shadow: var(--calendar-picker-day-focus-ring);
300
+ box-shadow: var(--calendar-picker-day-focus-ring, var(--calendar-picker-day-focus-ring-default));
301
301
  }
302
302
 
303
303
  /* ── State: selected ── */
304
304
  calendar-picker-ui [data-cal-day][data-selected] {
305
- background: var(--calendar-picker-day-bg-selected);
306
- color: var(--calendar-picker-day-fg-selected);
307
- font-weight: var(--calendar-picker-selected-weight);
305
+ background: var(--calendar-picker-day-bg-selected, var(--calendar-picker-day-bg-selected-default));
306
+ color: var(--calendar-picker-day-fg-selected, var(--calendar-picker-day-fg-selected-default));
307
+ font-weight: var(--calendar-picker-selected-weight, var(--calendar-picker-selected-weight-default));
308
308
  }
309
309
  calendar-picker-ui [data-cal-day][data-selected]:not([disabled]):hover {
310
- background: var(--calendar-picker-day-bg-selected-hover);
311
- color: var(--calendar-picker-day-fg-selected);
310
+ background: var(--calendar-picker-day-bg-selected-hover, var(--calendar-picker-day-bg-selected-hover-default));
311
+ color: var(--calendar-picker-day-fg-selected, var(--calendar-picker-day-fg-selected-default));
312
312
  }
313
313
 
314
314
  /* ── State: today (unselected) ──
@@ -316,30 +316,30 @@ calendar-picker-ui [data-cal-day][data-selected]:not([disabled]):hover {
316
316
  focus-ring box-shadow (that looked like a double outline). */
317
317
  calendar-picker-ui [data-cal-day][data-today]:not([data-selected]) {
318
318
  position: relative;
319
- color: var(--calendar-picker-day-today-border);
320
- font-weight: var(--calendar-picker-today-weight);
319
+ color: var(--calendar-picker-day-today-border, var(--calendar-picker-day-today-border-default));
320
+ font-weight: var(--calendar-picker-today-weight, var(--calendar-picker-today-weight-default));
321
321
  }
322
322
  calendar-picker-ui [data-cal-day][data-today]:not([data-selected])::after {
323
323
  content: "";
324
324
  position: absolute;
325
325
  left: 50%;
326
- bottom: var(--calendar-picker-day-today-dot-offset);
327
- width: var(--calendar-picker-day-today-dot-size);
328
- height: var(--calendar-picker-day-today-dot-size);
326
+ bottom: var(--calendar-picker-day-today-dot-offset, var(--calendar-picker-day-today-dot-offset-default));
327
+ width: var(--calendar-picker-day-today-dot-size, var(--calendar-picker-day-today-dot-size-default));
328
+ height: var(--calendar-picker-day-today-dot-size, var(--calendar-picker-day-today-dot-size-default));
329
329
  border-radius: 50%;
330
- background: var(--calendar-picker-day-today-border);
330
+ background: var(--calendar-picker-day-today-border, var(--calendar-picker-day-today-border-default));
331
331
  transform: translateX(-50%);
332
332
  pointer-events: none;
333
333
  }
334
334
 
335
335
  /* ── State: outside month ── */
336
336
  calendar-picker-ui [data-cal-day][data-outside] {
337
- color: var(--calendar-picker-day-fg-outside);
337
+ color: var(--calendar-picker-day-fg-outside, var(--calendar-picker-day-fg-outside-default));
338
338
  cursor: default;
339
339
  }
340
340
 
341
341
  /* ── State: disabled ── */
342
342
  calendar-picker-ui [data-cal-day]:disabled:not([data-outside]) {
343
- color: var(--calendar-picker-day-fg-disabled);
343
+ color: var(--calendar-picker-day-fg-disabled, var(--calendar-picker-day-fg-disabled-default));
344
344
  cursor: not-allowed;
345
345
  }
package/components/canvas/canvas.css CHANGED
@@ -5,12 +5,12 @@
5
5
  ═══════════════════════════════════════════════════════ */
6
6
 
7
7
  :where(:scope) {
8
- --canvas-bg: var(--a-canvas-0);
9
- --canvas-fg: var(--a-fg);
10
- --canvas-font-family: var(--a-font-family);
11
- --canvas-inset: var(--a-space-2);
12
- --canvas-surface-bg: var(--a-bg);
13
- --canvas-surface-max: 56rem;
8
+ --canvas-bg-default: var(--a-canvas-0);
9
+ --canvas-fg-default: var(--a-fg);
10
+ --canvas-font-family-default: var(--a-font-family);
11
+ --canvas-inset-default: var(--a-space-2);
12
+ --canvas-surface-bg-default: var(--a-bg);
13
+ --canvas-surface-max-default: 56rem;
14
14
  }
15
15
 
16
16
  /* ═══════════════════════════════════════════════════════
@@ -23,9 +23,9 @@
23
23
  flex-direction: column;
24
24
  min-height: 0;
25
25
  height: 100%;
26
- background: var(--canvas-bg);
27
- color: var(--canvas-fg);
28
- font-family: var(--canvas-font-family);
26
+ background: var(--canvas-bg, var(--canvas-bg-default));
27
+ color: var(--canvas-fg, var(--canvas-fg-default));
28
+ font-family: var(--canvas-font-family, var(--canvas-font-family-default));
29
29
  }
30
30
 
31
31
  /* ═══════════════════════════════════════════════════════
@@ -38,15 +38,15 @@
38
38
  align-items: center;
39
39
  justify-content: center;
40
40
  overflow: auto;
41
- padding: var(--canvas-inset);
41
+ padding: var(--canvas-inset, var(--canvas-inset-default));
42
42
  min-height: 0;
43
- background: var(--canvas-surface-bg);
43
+ background: var(--canvas-surface-bg, var(--canvas-surface-bg-default));
44
44
  }
45
45
 
46
46
  [data-canvas-surface] > a2ui-root,
47
47
  [data-canvas-surface] > theme-ui {
48
48
  display: block;
49
49
  width: 100%;
50
- max-width: var(--canvas-surface-max);
50
+ max-width: var(--canvas-surface-max, var(--canvas-surface-max-default));
51
51
  }
52
52
  }