@adia-ai/web-components 0.7.3 → 0.7.5

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 (137) hide show
  1. package/CHANGELOG.md +31 -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 +123 -101
  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/api/text.css +9 -2
  132. package/styles/foundation/space.css +19 -18
  133. package/styles/host.css +48 -0
  134. package/styles/prose.css +187 -173
  135. package/styles/type/scale.css +6 -0
  136. package/styles/typography.css +10 -5
  137. package/styles/verse.css +122 -0
package/components/calendar-grid/calendar-grid.css CHANGED
@@ -19,77 +19,78 @@
19
19
  Width derives from the day-cell size so the grid scales with the
20
20
  universal [size] system (sm/md/lg) exactly like select/input/button:
21
21
  7 columns at --a-size + 6 inter-cell gaps' worth of breathing room. */
22
- --calendar-grid-gap-default: var(--a-space-1);
23
- --calendar-grid-width-default: calc(7 * var(--a-size) + 6 * var(--a-space-1));
22
+ --calendar-grid-gap: var(--a-space-1);
23
+ --calendar-grid-width: calc(7 * var(--a-size) + 6 * var(--a-space-1));
24
24
 
25
25
  /* Header */
26
- --calendar-grid-header-gap-default: var(--a-space-1);
27
- --calendar-grid-header-mb-default: var(--a-space-2);
28
- --calendar-grid-title-fg-default: var(--a-fg);
29
- --calendar-grid-title-size-default: var(--a-ui-size);
30
- --calendar-grid-title-weight-default: var(--a-weight-medium);
26
+ --calendar-grid-header-gap: var(--a-space-1);
27
+ --calendar-grid-header-mb: var(--a-space-2);
28
+ --calendar-grid-title-fg: var(--a-fg);
29
+ --calendar-grid-title-size: var(--a-ui-size);
30
+ --calendar-grid-title-weight: var(--a-weight-medium);
31
31
 
32
32
  /* Nav buttons (prev/next) — secondary chrome at one notch below the
33
33
  control height (mirrors select's `calc(height - gap)` idiom); icon
34
34
  is a directional caret sized from the universal --a-caret-size. */
35
- --calendar-grid-nav-size-default: calc(var(--a-size) - var(--a-space-2));
36
- --calendar-grid-nav-radius-default: var(--a-radius-sm);
37
- --calendar-grid-nav-bg-default: transparent;
38
- --calendar-grid-nav-bg-hover-default: var(--a-bg-muted);
39
- --calendar-grid-nav-fg-default: var(--a-fg-muted);
40
- --calendar-grid-nav-fg-hover-default: var(--a-fg);
41
- --calendar-grid-nav-icon-size-default: var(--a-caret-size);
35
+ --calendar-grid-nav-size: calc(var(--a-size) - var(--a-space-2));
36
+ --calendar-grid-nav-radius: var(--a-radius-sm);
37
+ --calendar-grid-nav-bg: transparent;
38
+ --calendar-grid-nav-bg-hover: var(--a-bg-muted);
39
+ --calendar-grid-nav-fg: var(--a-fg-muted);
40
+ --calendar-grid-nav-fg-hover: var(--a-fg);
41
+ --calendar-grid-nav-icon-size: var(--a-caret-size);
42
42
 
43
43
  /* Weekday header — row height tracks the control height (one notch
44
44
  below, like nav); label font scales with the tier via --a-ui-size
45
45
  (de-emphasis comes from color + weight, not a frozen small size). */
46
- --calendar-grid-weekday-fg-default: var(--a-fg-muted);
47
- --calendar-grid-weekday-size-default: var(--a-ui-size);
48
- --calendar-grid-weekday-weight-default: var(--a-weight-medium);
49
- --calendar-grid-weekday-height-default: calc(var(--a-size) - var(--a-space-2));
50
- --calendar-grid-weekday-mb-default: var(--a-space-1);
46
+ --calendar-grid-weekday-fg: var(--a-fg-muted);
47
+ --calendar-grid-weekday-size: var(--a-ui-size);
48
+ --calendar-grid-weekday-weight: var(--a-weight-medium);
49
+ --calendar-grid-weekday-height: calc(var(--a-size) - var(--a-space-2));
50
+ --calendar-grid-weekday-mb: var(--a-space-1);
51
51
 
52
52
  /* Day cells — the interactive targets size from --a-size (control
53
53
  height) and scale their digits with --a-ui-size, exactly like a
54
54
  button/select row. */
55
- --calendar-grid-day-size-default: var(--a-size);
56
- --calendar-grid-day-radius-default: var(--a-radius);
57
- --calendar-grid-day-font-size-default: var(--a-ui-size);
58
- --calendar-grid-day-bg-default: transparent;
59
- --calendar-grid-day-fg-default: var(--a-fg-subtle);
60
- --calendar-grid-day-bg-hover-default: var(--a-bg-hover);
61
- --calendar-grid-day-fg-hover-default: var(--a-fg);
62
- --calendar-grid-day-bg-selected-default: var(--a-accent);
63
- --calendar-grid-day-fg-selected-default: var(--a-accent-fg);
55
+ --calendar-grid-day-size: var(--a-size);
56
+ --calendar-grid-day-radius: var(--a-radius);
57
+ --calendar-grid-day-font-size: var(--a-ui-size);
58
+ --calendar-grid-day-font-family: var(--a-font-family-ui);
59
+ --calendar-grid-day-bg: transparent;
60
+ --calendar-grid-day-fg: var(--a-fg-subtle);
61
+ --calendar-grid-day-bg-hover: var(--a-bg-hover);
62
+ --calendar-grid-day-fg-hover: var(--a-fg);
63
+ --calendar-grid-day-bg-selected: var(--a-accent);
64
+ --calendar-grid-day-fg-selected: var(--a-accent-fg);
64
65
  /* In-range cells (strictly between rangeStart and rangeEnd) — muted
65
66
  accent strip so the endpoints (full --a-accent fill) read as the
66
67
  primary selection while the in-range band reads as secondary
67
68
  context. Stylable independently of `selected`. */
68
- --calendar-grid-day-bg-in-range-default: var(--a-accent-muted);
69
- --calendar-grid-day-fg-in-range-default: var(--a-fg);
70
- --calendar-grid-day-fg-outside-default: var(--a-fg-muted);
71
- --calendar-grid-day-fg-disabled-default: var(--a-ui-text-disabled);
72
- --calendar-grid-day-today-color-default: var(--a-accent);
73
- --calendar-grid-day-today-dot-size-default: var(--a-space-0-5);
74
- --calendar-grid-day-today-dot-offset-default: var(--a-space-1);
75
- --calendar-grid-day-grid-gap-default: var(--a-space-px);
76
- --calendar-grid-day-focus-ring-default: var(--a-focus-ring);
69
+ --calendar-grid-day-bg-in-range: var(--a-accent-muted);
70
+ --calendar-grid-day-fg-in-range: var(--a-fg);
71
+ --calendar-grid-day-fg-outside: var(--a-fg-muted);
72
+ --calendar-grid-day-fg-disabled: var(--a-ui-text-disabled);
73
+ --calendar-grid-day-today-color: var(--a-accent);
74
+ --calendar-grid-day-today-dot-size: var(--a-space-0-5);
75
+ --calendar-grid-day-today-dot-offset: var(--a-space-1);
76
+ --calendar-grid-day-grid-gap: var(--a-space-px);
77
+ --calendar-grid-day-focus-ring: var(--a-focus-ring);
77
78
 
78
79
  /* Transitions */
79
- --calendar-grid-duration-default: var(--a-duration-fast);
80
- --calendar-grid-easing-default: var(--a-easing);
80
+ --calendar-grid-duration: var(--a-duration-fast);
81
+ --calendar-grid-easing: var(--a-easing);
81
82
 
82
83
  /* Typography */
83
- --calendar-grid-selected-weight-default: var(--a-weight-medium);
84
- --calendar-grid-today-weight-default: var(--a-weight-medium);
84
+ --calendar-grid-selected-weight: var(--a-weight-medium);
85
+ --calendar-grid-today-weight: var(--a-weight-medium);
85
86
  }
86
87
 
87
88
  /* ── Block 2 — BASE ── */
88
89
  :scope {
89
90
  box-sizing: border-box;
90
91
  display: block;
91
- width: var(--calendar-grid-width, var(--calendar-grid-width-default));
92
- font-size: var(--calendar-grid-day-font-size, var(--calendar-grid-day-font-size-default));
92
+ width: var(--calendar-grid-width);
93
+ font-size: var(--calendar-grid-day-font-size);
93
94
  }
94
95
 
95
96
  :scope[disabled] {
@@ -102,16 +103,16 @@
102
103
  display: flex;
103
104
  align-items: center;
104
105
  justify-content: space-between;
105
- gap: var(--calendar-grid-header-gap, var(--calendar-grid-header-gap-default));
106
- margin-block-end: var(--calendar-grid-header-mb, var(--calendar-grid-header-mb-default));
106
+ gap: var(--calendar-grid-header-gap);
107
+ margin-block-end: var(--calendar-grid-header-mb);
107
108
  }
108
109
 
109
110
  [data-cal-title] {
110
111
  flex: 1;
111
112
  text-align: center;
112
- font-size: var(--calendar-grid-title-size, var(--calendar-grid-title-size-default));
113
- font-weight: var(--calendar-grid-title-weight, var(--calendar-grid-title-weight-default));
114
- color: var(--calendar-grid-title-fg, var(--calendar-grid-title-fg-default));
113
+ font-size: var(--calendar-grid-title-size);
114
+ font-weight: var(--calendar-grid-title-weight);
115
+ color: var(--calendar-grid-title-fg);
115
116
  }
116
117
 
117
118
  [data-cal-prev],
@@ -119,23 +120,23 @@
119
120
  display: inline-flex;
120
121
  align-items: center;
121
122
  justify-content: center;
122
- width: var(--calendar-grid-nav-size, var(--calendar-grid-nav-size-default));
123
- height: var(--calendar-grid-nav-size, var(--calendar-grid-nav-size-default));
123
+ width: var(--calendar-grid-nav-size);
124
+ height: var(--calendar-grid-nav-size);
124
125
  padding: 0;
125
126
  border: none;
126
- border-radius: var(--calendar-grid-nav-radius, var(--calendar-grid-nav-radius-default));
127
- background: var(--calendar-grid-nav-bg, var(--calendar-grid-nav-bg-default));
128
- color: var(--calendar-grid-nav-fg, var(--calendar-grid-nav-fg-default));
127
+ border-radius: var(--calendar-grid-nav-radius);
128
+ background: var(--calendar-grid-nav-bg);
129
+ color: var(--calendar-grid-nav-fg);
129
130
  cursor: pointer;
130
131
  transition:
131
- background var(--calendar-grid-duration, var(--calendar-grid-duration-default)) var(--calendar-grid-easing, var(--calendar-grid-easing-default)),
132
- color var(--calendar-grid-duration, var(--calendar-grid-duration-default)) var(--calendar-grid-easing, var(--calendar-grid-easing-default));
133
- --a-icon-size: var(--calendar-grid-nav-icon-size, var(--calendar-grid-nav-icon-size-default));
132
+ background var(--calendar-grid-duration) var(--calendar-grid-easing),
133
+ color var(--calendar-grid-duration) var(--calendar-grid-easing);
134
+ --a-icon-size: var(--calendar-grid-nav-icon-size);
134
135
  }
135
136
  [data-cal-prev]:hover,
136
137
  [data-cal-next]:hover {
137
- background: var(--calendar-grid-nav-bg-hover, var(--calendar-grid-nav-bg-hover-default));
138
- color: var(--calendar-grid-nav-fg-hover, var(--calendar-grid-nav-fg-hover-default));
138
+ background: var(--calendar-grid-nav-bg-hover);
139
+ color: var(--calendar-grid-nav-fg-hover);
139
140
  }
140
141
 
141
142
  /* Day-of-week header */
@@ -143,69 +144,71 @@
143
144
  display: grid;
144
145
  grid-template-columns: repeat(7, 1fr);
145
146
  text-align: center;
146
- font-size: var(--calendar-grid-weekday-size, var(--calendar-grid-weekday-size-default));
147
- font-weight: var(--calendar-grid-weekday-weight, var(--calendar-grid-weekday-weight-default));
148
- color: var(--calendar-grid-weekday-fg, var(--calendar-grid-weekday-fg-default));
149
- margin-block-end: var(--calendar-grid-weekday-mb, var(--calendar-grid-weekday-mb-default));
147
+ font-size: var(--calendar-grid-weekday-size);
148
+ font-weight: var(--calendar-grid-weekday-weight);
149
+ color: var(--calendar-grid-weekday-fg);
150
+ margin-block-end: var(--calendar-grid-weekday-mb);
150
151
  }
151
152
 
152
153
  [data-cal-weekdays] span {
153
154
  display: flex;
154
155
  align-items: center;
155
156
  justify-content: center;
156
- height: var(--calendar-grid-weekday-height, var(--calendar-grid-weekday-height-default));
157
+ height: var(--calendar-grid-weekday-height);
157
158
  }
158
159
 
159
160
  /* Day grid */
160
161
  [data-cal-grid] {
161
162
  display: grid;
162
163
  grid-template-columns: repeat(7, 1fr);
163
- gap: var(--calendar-grid-day-grid-gap, var(--calendar-grid-day-grid-gap-default));
164
+ gap: var(--calendar-grid-day-grid-gap);
164
165
  }
165
166
 
166
167
  [data-cal-day] {
167
168
  display: flex;
168
169
  align-items: center;
169
170
  justify-content: center;
170
- width: var(--calendar-grid-day-size, var(--calendar-grid-day-size-default));
171
- height: var(--calendar-grid-day-size, var(--calendar-grid-day-size-default));
171
+ width: var(--calendar-grid-day-size);
172
+ height: var(--calendar-grid-day-size);
172
173
  margin: 0 auto;
173
174
  padding: 0;
174
175
  border: 1px solid transparent;
175
- border-radius: var(--calendar-grid-day-radius, var(--calendar-grid-day-radius-default));
176
- background: var(--calendar-grid-day-bg, var(--calendar-grid-day-bg-default));
177
- color: var(--calendar-grid-day-fg, var(--calendar-grid-day-fg-default));
176
+ border-radius: var(--calendar-grid-day-radius);
177
+ background: var(--calendar-grid-day-bg);
178
+ color: var(--calendar-grid-day-fg);
178
179
  font: inherit;
179
- font-size: var(--calendar-grid-day-font-size, var(--calendar-grid-day-font-size-default));
180
+ /* font-family floor — see segment.css rationale. */
181
+ font-family: var(--calendar-grid-day-font-family);
182
+ font-size: var(--calendar-grid-day-font-size);
180
183
  cursor: pointer;
181
184
  transition:
182
- background var(--calendar-grid-duration, var(--calendar-grid-duration-default)) var(--calendar-grid-easing, var(--calendar-grid-easing-default)),
183
- color var(--calendar-grid-duration, var(--calendar-grid-duration-default)) var(--calendar-grid-easing, var(--calendar-grid-easing-default)),
184
- border-color var(--calendar-grid-duration, var(--calendar-grid-duration-default)) var(--calendar-grid-easing, var(--calendar-grid-easing-default));
185
+ background var(--calendar-grid-duration) var(--calendar-grid-easing),
186
+ color var(--calendar-grid-duration) var(--calendar-grid-easing),
187
+ border-color var(--calendar-grid-duration) var(--calendar-grid-easing);
185
188
  }
186
189
 
187
190
  /* ── State: hover ── */
188
191
  [data-cal-day]:not([disabled]):not([data-outside]):hover {
189
- background: var(--calendar-grid-day-bg-hover, var(--calendar-grid-day-bg-hover-default));
190
- color: var(--calendar-grid-day-fg-hover, var(--calendar-grid-day-fg-hover-default));
192
+ background: var(--calendar-grid-day-bg-hover);
193
+ color: var(--calendar-grid-day-fg-hover);
191
194
  }
192
195
 
193
196
  /* ── State: focus ── */
194
197
  [data-cal-day]:not([disabled]):not([data-outside]):focus-visible,
195
198
  [data-cal-day][data-focused] {
196
199
  outline: none;
197
- box-shadow: var(--calendar-grid-day-focus-ring, var(--calendar-grid-day-focus-ring-default));
200
+ box-shadow: var(--calendar-grid-day-focus-ring);
198
201
  }
199
202
 
200
203
  /* ── State: selected ── */
201
204
  [data-cal-day][data-selected] {
202
- background: var(--calendar-grid-day-bg-selected, var(--calendar-grid-day-bg-selected-default));
203
- color: var(--calendar-grid-day-fg-selected, var(--calendar-grid-day-fg-selected-default));
204
- font-weight: var(--calendar-grid-selected-weight, var(--calendar-grid-selected-weight-default));
205
+ background: var(--calendar-grid-day-bg-selected);
206
+ color: var(--calendar-grid-day-fg-selected);
207
+ font-weight: var(--calendar-grid-selected-weight);
205
208
  }
206
209
  [data-cal-day][data-selected]:not([disabled]):hover {
207
- background: var(--calendar-grid-day-bg-selected, var(--calendar-grid-day-bg-selected-default));
208
- color: var(--calendar-grid-day-fg-selected, var(--calendar-grid-day-fg-selected-default));
210
+ background: var(--calendar-grid-day-bg-selected);
211
+ color: var(--calendar-grid-day-fg-selected);
209
212
  }
210
213
 
211
214
  /* ── State: in-range ──
@@ -215,41 +218,41 @@
215
218
  guard prevents the muted fill from overriding the endpoint cells in
216
219
  consumer code that sets both `value` AND `range-start`/`range-end`. */
217
220
  [data-cal-day][data-in-range]:not([data-selected]) {
218
- background: var(--calendar-grid-day-bg-in-range, var(--calendar-grid-day-bg-in-range-default));
219
- color: var(--calendar-grid-day-fg-in-range, var(--calendar-grid-day-fg-in-range-default));
221
+ background: var(--calendar-grid-day-bg-in-range);
222
+ color: var(--calendar-grid-day-fg-in-range);
220
223
  }
221
224
  [data-cal-day][data-in-range]:not([data-selected]):not([disabled]):hover {
222
- background: var(--calendar-grid-day-bg-in-range, var(--calendar-grid-day-bg-in-range-default));
225
+ background: var(--calendar-grid-day-bg-in-range);
223
226
  }
224
227
 
225
228
  /* ── State: today (unselected) ── */
226
229
  [data-cal-day][data-today]:not([data-selected]) {
227
230
  position: relative;
228
- color: var(--calendar-grid-day-today-color, var(--calendar-grid-day-today-color-default));
229
- font-weight: var(--calendar-grid-today-weight, var(--calendar-grid-today-weight-default));
231
+ color: var(--calendar-grid-day-today-color);
232
+ font-weight: var(--calendar-grid-today-weight);
230
233
  }
231
234
  [data-cal-day][data-today]:not([data-selected])::after {
232
235
  content: "";
233
236
  position: absolute;
234
237
  left: 50%;
235
- bottom: var(--calendar-grid-day-today-dot-offset, var(--calendar-grid-day-today-dot-offset-default));
236
- width: var(--calendar-grid-day-today-dot-size, var(--calendar-grid-day-today-dot-size-default));
237
- height: var(--calendar-grid-day-today-dot-size, var(--calendar-grid-day-today-dot-size-default));
238
+ bottom: var(--calendar-grid-day-today-dot-offset);
239
+ width: var(--calendar-grid-day-today-dot-size);
240
+ height: var(--calendar-grid-day-today-dot-size);
238
241
  border-radius: 50%;
239
- background: var(--calendar-grid-day-today-color, var(--calendar-grid-day-today-color-default));
242
+ background: var(--calendar-grid-day-today-color);
240
243
  transform: translateX(-50%);
241
244
  pointer-events: none;
242
245
  }
243
246
 
244
247
  /* ── State: outside month ── */
245
248
  [data-cal-day][data-outside] {
246
- color: var(--calendar-grid-day-fg-outside, var(--calendar-grid-day-fg-outside-default));
249
+ color: var(--calendar-grid-day-fg-outside);
247
250
  cursor: default;
248
251
  }
249
252
 
250
253
  /* ── State: disabled (excluding outside) ── */
251
254
  [data-cal-day]:disabled:not([data-outside]) {
252
- color: var(--calendar-grid-day-fg-disabled, var(--calendar-grid-day-fg-disabled-default));
255
+ color: var(--calendar-grid-day-fg-disabled);
253
256
  cursor: not-allowed;
254
257
  }
255
258
  }