@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/calendar-picker/calendar-picker.css CHANGED
@@ -3,97 +3,97 @@
3
3
  /* ── Tokens ── */
4
4
 
5
5
  /* Host / label */
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);
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);
11
11
 
12
12
  /* Trigger */
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);
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
19
  /* Committed value reads at full text strength (matches input-ui / select-ui
20
20
  value color); the placeholder state drops to -placeholder below via the
21
21
  :not([value]) override. Was -subtle, which muted the committed date. (bug-15/16) */
22
- --calendar-picker-trigger-fg-default: var(--a-ui-text);
23
- --calendar-picker-trigger-border-default: var(--a-ui-border);
24
- --calendar-picker-trigger-border-hover-default: var(--a-ui-border-hover);
25
- --calendar-picker-trigger-focus-ring-default: var(--a-focus-ring);
26
- --calendar-picker-trigger-focus-ring-invalid-default: var(--a-focus-ring-invalid);
27
- --calendar-picker-trigger-placeholder-fg-default: var(--a-ui-text-placeholder);
28
- --calendar-picker-trigger-fg-disabled-default: var(--a-ui-text-disabled);
22
+ --calendar-picker-trigger-fg: var(--a-ui-text);
23
+ --calendar-picker-trigger-border: var(--a-ui-border);
24
+ --calendar-picker-trigger-border-hover: var(--a-ui-border-hover);
25
+ --calendar-picker-trigger-focus-ring: var(--a-focus-ring);
26
+ --calendar-picker-trigger-focus-ring-invalid: var(--a-focus-ring-invalid);
27
+ --calendar-picker-trigger-placeholder-fg: var(--a-ui-text-placeholder);
28
+ --calendar-picker-trigger-fg-disabled: var(--a-ui-text-disabled);
29
29
 
30
30
  /* Popover */
31
- --calendar-picker-popover-bg-default: var(--a-bg-subtle);
32
- --calendar-picker-popover-border-default: var(--a-border-subtle);
33
- --calendar-picker-popover-radius-default: var(--a-radius-lg);
34
- --calendar-picker-popover-shadow-default: var(--a-shadow-lg);
35
- --calendar-picker-popover-padding-default: var(--a-space-2);
31
+ --calendar-picker-popover-bg: var(--a-bg-subtle);
32
+ --calendar-picker-popover-border: var(--a-border-subtle);
33
+ --calendar-picker-popover-radius: var(--a-radius-lg);
34
+ --calendar-picker-popover-shadow: var(--a-shadow-lg);
35
+ --calendar-picker-popover-padding: var(--a-space-2);
36
36
  /* Width derives from the day-grid so the popover scales with [size]:
37
37
  7 columns at --a-size + inter-cell breathing + popover padding both
38
38
  sides (border-box). Matches calendar-grid-ui's width formula. */
39
- --calendar-picker-popover-width-default: calc(7 * var(--a-size) + 6 * var(--a-space-1) + 2 * var(--a-space-2));
40
- --calendar-picker-popover-fg-default: var(--a-fg);
39
+ --calendar-picker-popover-width: calc(7 * var(--a-size) + 6 * var(--a-space-1) + 2 * var(--a-space-2));
40
+ --calendar-picker-popover-fg: var(--a-fg);
41
41
 
42
42
  /* Header */
43
- --calendar-picker-header-gap-default: var(--a-space-1);
44
- --calendar-picker-header-mb-default: var(--a-space-2);
45
- --calendar-picker-title-fg-default: var(--a-fg);
46
- --calendar-picker-title-size-default: var(--a-ui-size);
47
- --calendar-picker-title-weight-default: var(--a-weight-medium);
43
+ --calendar-picker-header-gap: var(--a-space-1);
44
+ --calendar-picker-header-mb: var(--a-space-2);
45
+ --calendar-picker-title-fg: var(--a-fg);
46
+ --calendar-picker-title-size: var(--a-ui-size);
47
+ --calendar-picker-title-weight: var(--a-weight-medium);
48
48
 
49
49
  /* Nav buttons (prev/next) — secondary chrome at one notch below the
50
50
  control height (mirrors select's `calc(height - gap)` idiom); icon
51
51
  is a directional caret sized from the universal --a-caret-size. */
52
- --calendar-picker-nav-size-default: calc(var(--a-size) - var(--a-space-2));
53
- --calendar-picker-nav-radius-default: var(--a-radius-sm);
54
- --calendar-picker-nav-bg-default: transparent;
55
- --calendar-picker-nav-bg-hover-default: var(--a-bg-muted);
56
- --calendar-picker-nav-fg-default: var(--a-fg-muted);
57
- --calendar-picker-nav-fg-hover-default: var(--a-fg);
58
- --calendar-picker-nav-icon-size-default: var(--a-caret-size);
52
+ --calendar-picker-nav-size: calc(var(--a-size) - var(--a-space-2));
53
+ --calendar-picker-nav-radius: var(--a-radius-sm);
54
+ --calendar-picker-nav-bg: transparent;
55
+ --calendar-picker-nav-bg-hover: var(--a-bg-muted);
56
+ --calendar-picker-nav-fg: var(--a-fg-muted);
57
+ --calendar-picker-nav-fg-hover: var(--a-fg);
58
+ --calendar-picker-nav-icon-size: var(--a-caret-size);
59
59
 
60
60
  /* Weekday header — row height tracks the control height (one notch
61
61
  below, like nav); label font scales with the tier via --a-ui-size
62
62
  (de-emphasis comes from color + weight, not a frozen small size). */
63
- --calendar-picker-weekday-fg-default: var(--a-fg-muted);
64
- --calendar-picker-weekday-size-default: var(--a-ui-size);
65
- --calendar-picker-weekday-weight-default: var(--a-weight-medium);
66
- --calendar-picker-weekday-height-default: calc(var(--a-size) - var(--a-space-2));
67
- --calendar-picker-weekday-mb-default: var(--a-space-1);
63
+ --calendar-picker-weekday-fg: var(--a-fg-muted);
64
+ --calendar-picker-weekday-size: var(--a-ui-size);
65
+ --calendar-picker-weekday-weight: var(--a-weight-medium);
66
+ --calendar-picker-weekday-height: calc(var(--a-size) - var(--a-space-2));
67
+ --calendar-picker-weekday-mb: var(--a-space-1);
68
68
 
69
69
  /* Day cells — the interactive targets size from --a-size (control
70
70
  height) and scale their digits with --a-ui-size, exactly like a
71
71
  button/select row. */
72
- --calendar-picker-day-size-default: var(--a-size);
73
- --calendar-picker-day-radius-default: var(--a-radius);
74
- --calendar-picker-day-font-size-default: var(--a-ui-size);
75
- --calendar-picker-day-bg-default: transparent;
76
- --calendar-picker-day-fg-default: var(--a-fg-subtle);
77
- --calendar-picker-day-bg-hover-default: var(--a-bg-hover);
78
- --calendar-picker-day-fg-hover-default: var(--a-fg);
79
- --calendar-picker-day-bg-selected-hover-default: var(--a-accent-bg-hover);
80
- --calendar-picker-day-bg-selected-default: var(--a-accent);
81
- --calendar-picker-day-fg-selected-default: var(--a-accent-fg);
82
- --calendar-picker-day-fg-outside-default: var(--a-fg-muted);
83
- --calendar-picker-day-fg-disabled-default: var(--a-ui-text-disabled);
84
- --calendar-picker-day-today-border-default: var(--a-accent);
85
- --calendar-picker-day-today-dot-size-default: var(--a-space-0-5);
86
- --calendar-picker-day-today-dot-offset-default: var(--a-space-1);
87
- --calendar-picker-day-grid-gap-default: var(--a-space-px); /* 1px hairline between cells */
88
- --calendar-picker-day-focus-ring-default: var(--a-focus-ring);
72
+ --calendar-picker-day-size: var(--a-size);
73
+ --calendar-picker-day-radius: var(--a-radius);
74
+ --calendar-picker-day-font-size: var(--a-ui-size);
75
+ --calendar-picker-day-bg: transparent;
76
+ --calendar-picker-day-fg: var(--a-fg-subtle);
77
+ --calendar-picker-day-bg-hover: var(--a-bg-hover);
78
+ --calendar-picker-day-fg-hover: var(--a-fg);
79
+ --calendar-picker-day-bg-selected-hover: var(--a-accent-bg-hover);
80
+ --calendar-picker-day-bg-selected: var(--a-accent);
81
+ --calendar-picker-day-fg-selected: var(--a-accent-fg);
82
+ --calendar-picker-day-fg-outside: var(--a-fg-muted);
83
+ --calendar-picker-day-fg-disabled: var(--a-ui-text-disabled);
84
+ --calendar-picker-day-today-border: var(--a-accent);
85
+ --calendar-picker-day-today-dot-size: var(--a-space-0-5);
86
+ --calendar-picker-day-today-dot-offset: var(--a-space-1);
87
+ --calendar-picker-day-grid-gap: var(--a-space-px); /* 1px hairline between cells */
88
+ --calendar-picker-day-focus-ring: var(--a-focus-ring);
89
89
 
90
90
  /* Transitions */
91
- --calendar-picker-duration-default: var(--a-duration-fast);
92
- --calendar-picker-easing-default: var(--a-easing);
91
+ --calendar-picker-duration: var(--a-duration-fast);
92
+ --calendar-picker-easing: var(--a-easing);
93
93
 
94
94
  /* Typography */
95
- --calendar-picker-selected-weight-default: var(--a-weight-medium);
96
- --calendar-picker-today-weight-default: var(--a-weight-medium);
95
+ --calendar-picker-selected-weight: var(--a-weight-medium);
96
+ --calendar-picker-today-weight: var(--a-weight-medium);
97
97
  }
98
98
 
99
99
  :scope {
@@ -101,29 +101,31 @@
101
101
  position: relative;
102
102
  display: flex;
103
103
  flex-direction: column;
104
- gap: var(--calendar-picker-gap, var(--calendar-picker-gap-default));
104
+ gap: var(--calendar-picker-gap);
105
105
  min-width: 0;
106
- font-size: var(--calendar-picker-font-size, var(--calendar-picker-font-size-default));
106
+ /* font-family floor on the host — internal fields/days inherit it. */
107
+ font-family: var(--calendar-picker-font-family, var(--a-font-family-ui));
108
+ font-size: var(--calendar-picker-font-size);
107
109
  }
108
110
 
109
111
  /* ── State: disabled ── */
110
112
  :scope[disabled] {
111
113
  pointer-events: none;
112
- color: var(--calendar-picker-trigger-fg-disabled, var(--calendar-picker-trigger-fg-disabled-default));
114
+ color: var(--calendar-picker-trigger-fg-disabled);
113
115
  }
114
116
 
115
117
  /* ── Label (via ::before) ── */
116
118
  :scope::before {
117
119
  content: attr(label);
118
- font-size: var(--calendar-picker-label-size, var(--calendar-picker-label-size-default));
119
- color: var(--calendar-picker-label-fg, var(--calendar-picker-label-fg-default));
120
+ font-size: var(--calendar-picker-label-size);
121
+ color: var(--calendar-picker-label-fg);
120
122
  }
121
123
  :scope:not([label])::before,
122
124
  :scope[label=""]::before {
123
125
  display: none;
124
126
  }
125
127
  :scope:focus-visible::before {
126
- color: var(--calendar-picker-label-fg-focus, var(--calendar-picker-label-fg-focus-default));
128
+ color: var(--calendar-picker-label-fg-focus);
127
129
  }
128
130
 
129
131
  /* ── Trigger ── */
@@ -131,33 +133,33 @@
131
133
  display: flex;
132
134
  align-items: center;
133
135
  justify-content: space-between;
134
- gap: var(--calendar-picker-trigger-gap, var(--calendar-picker-trigger-gap-default));
136
+ gap: var(--calendar-picker-trigger-gap);
135
137
  min-width: 0;
136
- min-height: var(--calendar-picker-trigger-height, var(--calendar-picker-trigger-height-default));
137
- padding: 0 var(--calendar-picker-trigger-px, var(--calendar-picker-trigger-px-default));
138
- border: 1px solid var(--calendar-picker-trigger-border, var(--calendar-picker-trigger-border-default));
139
- border-radius: var(--calendar-picker-trigger-radius, var(--calendar-picker-trigger-radius-default));
140
- background: var(--calendar-picker-trigger-bg, var(--calendar-picker-trigger-bg-default));
141
- color: var(--calendar-picker-trigger-fg, var(--calendar-picker-trigger-fg-default));
138
+ min-height: var(--calendar-picker-trigger-height);
139
+ padding: 0 var(--calendar-picker-trigger-px);
140
+ border: 1px solid var(--calendar-picker-trigger-border);
141
+ border-radius: var(--calendar-picker-trigger-radius);
142
+ background: var(--calendar-picker-trigger-bg);
143
+ color: var(--calendar-picker-trigger-fg);
142
144
  line-height: 1;
143
145
  cursor: pointer;
144
146
  transition:
145
- border-color var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default)),
146
- background var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default));
147
+ border-color var(--calendar-picker-duration) var(--calendar-picker-easing),
148
+ background var(--calendar-picker-duration) var(--calendar-picker-easing);
147
149
  }
148
150
  [slot="trigger"]:hover {
149
- border-color: var(--calendar-picker-trigger-border-hover, var(--calendar-picker-trigger-border-hover-default));
150
- background: var(--calendar-picker-trigger-bg-hover, var(--calendar-picker-trigger-bg-hover-default));
151
+ border-color: var(--calendar-picker-trigger-border-hover);
152
+ background: var(--calendar-picker-trigger-bg-hover);
151
153
  }
152
154
 
153
155
  :scope:focus-visible { outline: none; }
154
156
  :scope:focus-visible [slot="trigger"] {
155
157
  /* Canonical ring via L3 token (see semantics.css FOCUS block). */
156
- box-shadow: var(--calendar-picker-trigger-focus-ring, var(--calendar-picker-trigger-focus-ring-default));
158
+ box-shadow: var(--calendar-picker-trigger-focus-ring);
157
159
  }
158
160
  :scope[aria-invalid="true"]:focus-visible [slot="trigger"],
159
161
  :scope[error]:focus-visible [slot="trigger"] {
160
- box-shadow: var(--calendar-picker-trigger-focus-ring-invalid, var(--calendar-picker-trigger-focus-ring-invalid-default));
162
+ box-shadow: var(--calendar-picker-trigger-focus-ring-invalid);
161
163
  }
162
164
 
163
165
  [slot="display"] {
@@ -165,16 +167,16 @@
165
167
  overflow: hidden;
166
168
  text-overflow: ellipsis;
167
169
  white-space: nowrap;
168
- color: var(--calendar-picker-trigger-fg, var(--calendar-picker-trigger-fg-default));
170
+ color: var(--calendar-picker-trigger-fg);
169
171
  }
170
172
  :scope:not([value]) [slot="display"],
171
173
  :scope[value=""] [slot="display"] {
172
- color: var(--calendar-picker-trigger-placeholder-fg, var(--calendar-picker-trigger-placeholder-fg-default));
174
+ color: var(--calendar-picker-trigger-placeholder-fg);
173
175
  }
174
176
 
175
177
  [slot="caret"] {
176
178
  flex-shrink: 0;
177
- --a-icon-size: var(--calendar-picker-font-size, var(--calendar-picker-font-size-default));
179
+ --a-icon-size: var(--calendar-picker-font-size);
178
180
  }
179
181
  }
180
182
 
@@ -183,15 +185,15 @@
183
185
 
184
186
  calendar-picker-ui [slot="popover"] {
185
187
  margin: 0;
186
- padding: var(--calendar-picker-popover-padding, var(--calendar-picker-popover-padding-default));
187
- border: 1px solid var(--calendar-picker-popover-border, var(--calendar-picker-popover-border-default));
188
- border-radius: var(--calendar-picker-popover-radius, var(--calendar-picker-popover-radius-default));
189
- background: var(--calendar-picker-popover-bg, var(--calendar-picker-popover-bg-default));
190
- box-shadow: var(--calendar-picker-popover-shadow, var(--calendar-picker-popover-shadow-default));
191
- width: var(--calendar-picker-popover-width, var(--calendar-picker-popover-width-default));
188
+ padding: var(--calendar-picker-popover-padding);
189
+ border: 1px solid var(--calendar-picker-popover-border);
190
+ border-radius: var(--calendar-picker-popover-radius);
191
+ background: var(--calendar-picker-popover-bg);
192
+ box-shadow: var(--calendar-picker-popover-shadow);
193
+ width: var(--calendar-picker-popover-width);
192
194
  font-family: inherit;
193
- font-size: var(--calendar-picker-font-size, var(--calendar-picker-font-size-default));
194
- color: var(--calendar-picker-popover-fg, var(--calendar-picker-popover-fg-default));
195
+ font-size: var(--calendar-picker-font-size);
196
+ color: var(--calendar-picker-popover-fg);
195
197
  /* Fade + lift in on first paint via @starting-style. Same pattern
196
198
  as menu/select/popover surfaces — see journal 2026-04-29 §18. */
197
199
  opacity: 1;
@@ -216,16 +218,16 @@ calendar-picker-ui [data-cal-header] {
216
218
  display: flex;
217
219
  align-items: center;
218
220
  justify-content: space-between;
219
- gap: var(--calendar-picker-header-gap, var(--calendar-picker-header-gap-default));
220
- margin-block-end: var(--calendar-picker-header-mb, var(--calendar-picker-header-mb-default));
221
+ gap: var(--calendar-picker-header-gap);
222
+ margin-block-end: var(--calendar-picker-header-mb);
221
223
  }
222
224
 
223
225
  calendar-picker-ui [data-cal-title] {
224
226
  flex: 1;
225
227
  text-align: center;
226
- font-size: var(--calendar-picker-title-size, var(--calendar-picker-title-size-default));
227
- font-weight: var(--calendar-picker-title-weight, var(--calendar-picker-title-weight-default));
228
- color: var(--calendar-picker-title-fg, var(--calendar-picker-title-fg-default));
228
+ font-size: var(--calendar-picker-title-size);
229
+ font-weight: var(--calendar-picker-title-weight);
230
+ color: var(--calendar-picker-title-fg);
229
231
  }
230
232
 
231
233
  calendar-picker-ui [data-cal-prev],
@@ -233,23 +235,23 @@ calendar-picker-ui [data-cal-next] {
233
235
  display: inline-flex;
234
236
  align-items: center;
235
237
  justify-content: center;
236
- width: var(--calendar-picker-nav-size, var(--calendar-picker-nav-size-default));
237
- height: var(--calendar-picker-nav-size, var(--calendar-picker-nav-size-default));
238
+ width: var(--calendar-picker-nav-size);
239
+ height: var(--calendar-picker-nav-size);
238
240
  padding: 0;
239
241
  border: none;
240
- border-radius: var(--calendar-picker-nav-radius, var(--calendar-picker-nav-radius-default));
241
- background: var(--calendar-picker-nav-bg, var(--calendar-picker-nav-bg-default));
242
- color: var(--calendar-picker-nav-fg, var(--calendar-picker-nav-fg-default));
242
+ border-radius: var(--calendar-picker-nav-radius);
243
+ background: var(--calendar-picker-nav-bg);
244
+ color: var(--calendar-picker-nav-fg);
243
245
  cursor: pointer;
244
246
  transition:
245
- background var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default)),
246
- color var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default));
247
- --a-icon-size: var(--calendar-picker-nav-icon-size, var(--calendar-picker-nav-icon-size-default));
247
+ background var(--calendar-picker-duration) var(--calendar-picker-easing),
248
+ color var(--calendar-picker-duration) var(--calendar-picker-easing);
249
+ --a-icon-size: var(--calendar-picker-nav-icon-size);
248
250
  }
249
251
  calendar-picker-ui [data-cal-prev]:hover,
250
252
  calendar-picker-ui [data-cal-next]:hover {
251
- background: var(--calendar-picker-nav-bg-hover, var(--calendar-picker-nav-bg-hover-default));
252
- color: var(--calendar-picker-nav-fg-hover, var(--calendar-picker-nav-fg-hover-default));
253
+ background: var(--calendar-picker-nav-bg-hover);
254
+ color: var(--calendar-picker-nav-fg-hover);
253
255
  }
254
256
 
255
257
  /* Day-of-week header */
@@ -257,24 +259,24 @@ calendar-picker-ui [data-cal-weekdays] {
257
259
  display: grid;
258
260
  grid-template-columns: repeat(7, 1fr);
259
261
  text-align: center;
260
- font-size: var(--calendar-picker-weekday-size, var(--calendar-picker-weekday-size-default));
261
- font-weight: var(--calendar-picker-weekday-weight, var(--calendar-picker-weekday-weight-default));
262
- color: var(--calendar-picker-weekday-fg, var(--calendar-picker-weekday-fg-default));
263
- margin-block-end: var(--calendar-picker-weekday-mb, var(--calendar-picker-weekday-mb-default));
262
+ font-size: var(--calendar-picker-weekday-size);
263
+ font-weight: var(--calendar-picker-weekday-weight);
264
+ color: var(--calendar-picker-weekday-fg);
265
+ margin-block-end: var(--calendar-picker-weekday-mb);
264
266
  }
265
267
 
266
268
  calendar-picker-ui [data-cal-weekdays] span {
267
269
  display: flex;
268
270
  align-items: center;
269
271
  justify-content: center;
270
- height: var(--calendar-picker-weekday-height, var(--calendar-picker-weekday-height-default));
272
+ height: var(--calendar-picker-weekday-height);
271
273
  }
272
274
 
273
275
  /* Day grid */
274
276
  calendar-picker-ui [data-cal-grid] {
275
277
  display: grid;
276
278
  grid-template-columns: repeat(7, 1fr);
277
- gap: var(--calendar-picker-day-grid-gap, var(--calendar-picker-day-grid-gap-default));
279
+ gap: var(--calendar-picker-day-grid-gap);
278
280
  }
279
281
 
280
282
  /* Day buttons */
@@ -282,45 +284,45 @@ calendar-picker-ui [data-cal-day] {
282
284
  display: flex;
283
285
  align-items: center;
284
286
  justify-content: center;
285
- width: var(--calendar-picker-day-size, var(--calendar-picker-day-size-default));
286
- height: var(--calendar-picker-day-size, var(--calendar-picker-day-size-default));
287
+ width: var(--calendar-picker-day-size);
288
+ height: var(--calendar-picker-day-size);
287
289
  margin: 0 auto;
288
290
  padding: 0;
289
291
  border: 1px solid transparent;
290
- border-radius: var(--calendar-picker-day-radius, var(--calendar-picker-day-radius-default));
291
- background: var(--calendar-picker-day-bg, var(--calendar-picker-day-bg-default));
292
- color: var(--calendar-picker-day-fg, var(--calendar-picker-day-fg-default));
292
+ border-radius: var(--calendar-picker-day-radius);
293
+ background: var(--calendar-picker-day-bg);
294
+ color: var(--calendar-picker-day-fg);
293
295
  font: inherit;
294
- font-size: var(--calendar-picker-day-font-size, var(--calendar-picker-day-font-size-default));
296
+ font-size: var(--calendar-picker-day-font-size);
295
297
  cursor: pointer;
296
298
  transition:
297
- background var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default)),
298
- color var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default)),
299
- border-color var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default));
299
+ background var(--calendar-picker-duration) var(--calendar-picker-easing),
300
+ color var(--calendar-picker-duration) var(--calendar-picker-easing),
301
+ border-color var(--calendar-picker-duration) var(--calendar-picker-easing);
300
302
  }
301
303
 
302
304
  /* ── State: hover ── */
303
305
  calendar-picker-ui [data-cal-day]:not([disabled]):not([data-outside]):hover {
304
- background: var(--calendar-picker-day-bg-hover, var(--calendar-picker-day-bg-hover-default));
305
- color: var(--calendar-picker-day-fg-hover, var(--calendar-picker-day-fg-hover-default));
306
+ background: var(--calendar-picker-day-bg-hover);
307
+ color: var(--calendar-picker-day-fg-hover);
306
308
  }
307
309
 
308
310
  /* ── State: focus ── */
309
311
  calendar-picker-ui [data-cal-day]:not([disabled]):not([data-outside]):focus-visible,
310
312
  calendar-picker-ui [data-cal-day][data-focused] {
311
313
  outline: none;
312
- box-shadow: var(--calendar-picker-day-focus-ring, var(--calendar-picker-day-focus-ring-default));
314
+ box-shadow: var(--calendar-picker-day-focus-ring);
313
315
  }
314
316
 
315
317
  /* ── State: selected ── */
316
318
  calendar-picker-ui [data-cal-day][data-selected] {
317
- background: var(--calendar-picker-day-bg-selected, var(--calendar-picker-day-bg-selected-default));
318
- color: var(--calendar-picker-day-fg-selected, var(--calendar-picker-day-fg-selected-default));
319
- font-weight: var(--calendar-picker-selected-weight, var(--calendar-picker-selected-weight-default));
319
+ background: var(--calendar-picker-day-bg-selected);
320
+ color: var(--calendar-picker-day-fg-selected);
321
+ font-weight: var(--calendar-picker-selected-weight);
320
322
  }
321
323
  calendar-picker-ui [data-cal-day][data-selected]:not([disabled]):hover {
322
- background: var(--calendar-picker-day-bg-selected-hover, var(--calendar-picker-day-bg-selected-hover-default));
323
- color: var(--calendar-picker-day-fg-selected, var(--calendar-picker-day-fg-selected-default));
324
+ background: var(--calendar-picker-day-bg-selected-hover);
325
+ color: var(--calendar-picker-day-fg-selected);
324
326
  }
325
327
 
326
328
  /* ── State: today (unselected) ──
@@ -328,30 +330,30 @@ calendar-picker-ui [data-cal-day][data-selected]:not([disabled]):hover {
328
330
  focus-ring box-shadow (that looked like a double outline). */
329
331
  calendar-picker-ui [data-cal-day][data-today]:not([data-selected]) {
330
332
  position: relative;
331
- color: var(--calendar-picker-day-today-border, var(--calendar-picker-day-today-border-default));
332
- font-weight: var(--calendar-picker-today-weight, var(--calendar-picker-today-weight-default));
333
+ color: var(--calendar-picker-day-today-border);
334
+ font-weight: var(--calendar-picker-today-weight);
333
335
  }
334
336
  calendar-picker-ui [data-cal-day][data-today]:not([data-selected])::after {
335
337
  content: "";
336
338
  position: absolute;
337
339
  left: 50%;
338
- bottom: var(--calendar-picker-day-today-dot-offset, var(--calendar-picker-day-today-dot-offset-default));
339
- width: var(--calendar-picker-day-today-dot-size, var(--calendar-picker-day-today-dot-size-default));
340
- height: var(--calendar-picker-day-today-dot-size, var(--calendar-picker-day-today-dot-size-default));
340
+ bottom: var(--calendar-picker-day-today-dot-offset);
341
+ width: var(--calendar-picker-day-today-dot-size);
342
+ height: var(--calendar-picker-day-today-dot-size);
341
343
  border-radius: 50%;
342
- background: var(--calendar-picker-day-today-border, var(--calendar-picker-day-today-border-default));
344
+ background: var(--calendar-picker-day-today-border);
343
345
  transform: translateX(-50%);
344
346
  pointer-events: none;
345
347
  }
346
348
 
347
349
  /* ── State: outside month ── */
348
350
  calendar-picker-ui [data-cal-day][data-outside] {
349
- color: var(--calendar-picker-day-fg-outside, var(--calendar-picker-day-fg-outside-default));
351
+ color: var(--calendar-picker-day-fg-outside);
350
352
  cursor: default;
351
353
  }
352
354
 
353
355
  /* ── State: disabled ── */
354
356
  calendar-picker-ui [data-cal-day]:disabled:not([data-outside]) {
355
- color: var(--calendar-picker-day-fg-disabled, var(--calendar-picker-day-fg-disabled-default));
357
+ color: var(--calendar-picker-day-fg-disabled);
356
358
  cursor: not-allowed;
357
359
  }
package/components/canvas/canvas.css CHANGED
@@ -5,12 +5,12 @@
5
5
  ═══════════════════════════════════════════════════════ */
6
6
 
7
7
  :where(:scope) {
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;
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;
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, 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));
26
+ background: var(--canvas-bg);
27
+ color: var(--canvas-fg);
28
+ font-family: var(--canvas-font-family);
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, var(--canvas-inset-default));
41
+ padding: var(--canvas-inset);
42
42
  min-height: 0;
43
- background: var(--canvas-surface-bg, var(--canvas-surface-bg-default));
43
+ background: var(--canvas-surface-bg);
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, var(--canvas-surface-max-default));
50
+ max-width: var(--canvas-surface-max);
51
51
  }
52
52
  }