@urbicon-ui/blocks 6.21.2 → 6.22.0

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 (37) hide show
  1. package/dist/components/Calendar/Calendar.svelte +9 -0
  2. package/dist/components/Calendar/CalendarMiniMonth.svelte +10 -8
  3. package/dist/components/Calendar/calendar.context.d.ts +3 -0
  4. package/dist/components/Calendar/calendar.drag.js +19 -7
  5. package/dist/components/Calendar/calendar.variants.d.ts +63 -63
  6. package/dist/components/CompositionBar/CompositionBar.svelte +6 -2
  7. package/dist/components/Sankey/Sankey.svelte +18 -2
  8. package/dist/i18n/index.d.ts +378 -2
  9. package/dist/primitives/Alert/alert.variants.d.ts +8 -8
  10. package/dist/primitives/Avatar/avatar.variants.d.ts +6 -6
  11. package/dist/primitives/Badge/Badge.svelte +6 -4
  12. package/dist/primitives/Button/button.variants.d.ts +4 -4
  13. package/dist/primitives/ButtonGroup/index.d.ts +1 -1
  14. package/dist/primitives/Card/card.variants.d.ts +5 -5
  15. package/dist/primitives/Checkbox/Checkbox.svelte +18 -9
  16. package/dist/primitives/Checkbox/checkbox.variants.js +58 -16
  17. package/dist/primitives/Combobox/combobox.variants.d.ts +24 -24
  18. package/dist/primitives/Dialog/dialog.variants.d.ts +9 -9
  19. package/dist/primitives/Input/Input.svelte +10 -1
  20. package/dist/primitives/Input/input.variants.d.ts +9 -9
  21. package/dist/primitives/JourneyTimeline/journey-timeline.variants.d.ts +22 -22
  22. package/dist/primitives/Popover/Popover.svelte +24 -3
  23. package/dist/primitives/Select/Select.svelte +10 -1
  24. package/dist/primitives/Select/select.variants.d.ts +17 -17
  25. package/dist/primitives/Skeleton/skeleton.variants.d.ts +3 -3
  26. package/dist/primitives/Slider/Slider.svelte +8 -5
  27. package/dist/primitives/Spinner/spinner.variants.d.ts +32 -32
  28. package/dist/primitives/Stepper/stepper.variants.d.ts +11 -11
  29. package/dist/primitives/Textarea/Textarea.svelte +10 -1
  30. package/dist/primitives/Textarea/textarea.variants.d.ts +7 -7
  31. package/dist/primitives/Toast/toast.variants.d.ts +12 -12
  32. package/dist/primitives/Toolbar/toolbar.variants.d.ts +6 -6
  33. package/dist/primitives/Tooltip/tooltip.variants.d.ts +3 -3
  34. package/dist/style/semantic.css +55 -29
  35. package/dist/utils/figma-token-export.d.ts +13 -0
  36. package/dist/utils/figma-token-export.js +99 -26
  37. package/package.json +3 -3
package/dist/primitives/Input/input.variants.d.ts CHANGED
@@ -2,7 +2,7 @@ import { type SlotNames, type VariantProps } from '../../utils/variants.js';
2
2
  export declare const inputVariants: ((props?: {
3
3
  tier?: "commit" | "modify" | undefined;
4
4
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
5
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
5
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
6
6
  intent?: "default" | "success" | "warning" | "danger" | undefined;
7
7
  disabled?: boolean | undefined;
8
8
  readonly?: boolean | undefined;
@@ -16,7 +16,7 @@ export declare const inputVariants: ((props?: {
16
16
  wrapper: (props?: ({
17
17
  tier?: "commit" | "modify" | undefined;
18
18
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
19
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
19
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
20
20
  intent?: "default" | "success" | "warning" | "danger" | undefined;
21
21
  disabled?: boolean | undefined;
22
22
  readonly?: boolean | undefined;
@@ -32,7 +32,7 @@ export declare const inputVariants: ((props?: {
32
32
  container: (props?: ({
33
33
  tier?: "commit" | "modify" | undefined;
34
34
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
35
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
35
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
36
36
  intent?: "default" | "success" | "warning" | "danger" | undefined;
37
37
  disabled?: boolean | undefined;
38
38
  readonly?: boolean | undefined;
@@ -48,7 +48,7 @@ export declare const inputVariants: ((props?: {
48
48
  base: (props?: ({
49
49
  tier?: "commit" | "modify" | undefined;
50
50
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
51
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
51
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
52
52
  intent?: "default" | "success" | "warning" | "danger" | undefined;
53
53
  disabled?: boolean | undefined;
54
54
  readonly?: boolean | undefined;
@@ -64,7 +64,7 @@ export declare const inputVariants: ((props?: {
64
64
  label: (props?: ({
65
65
  tier?: "commit" | "modify" | undefined;
66
66
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
67
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
67
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
68
68
  intent?: "default" | "success" | "warning" | "danger" | undefined;
69
69
  disabled?: boolean | undefined;
70
70
  readonly?: boolean | undefined;
@@ -80,7 +80,7 @@ export declare const inputVariants: ((props?: {
80
80
  message: (props?: ({
81
81
  tier?: "commit" | "modify" | undefined;
82
82
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
83
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
83
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
84
84
  intent?: "default" | "success" | "warning" | "danger" | undefined;
85
85
  disabled?: boolean | undefined;
86
86
  readonly?: boolean | undefined;
@@ -96,7 +96,7 @@ export declare const inputVariants: ((props?: {
96
96
  iconContainer: (props?: ({
97
97
  tier?: "commit" | "modify" | undefined;
98
98
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
99
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
99
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
100
100
  intent?: "default" | "success" | "warning" | "danger" | undefined;
101
101
  disabled?: boolean | undefined;
102
102
  readonly?: boolean | undefined;
@@ -112,7 +112,7 @@ export declare const inputVariants: ((props?: {
112
112
  iconButton: (props?: ({
113
113
  tier?: "commit" | "modify" | undefined;
114
114
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
115
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
115
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
116
116
  intent?: "default" | "success" | "warning" | "danger" | undefined;
117
117
  disabled?: boolean | undefined;
118
118
  readonly?: boolean | undefined;
@@ -128,7 +128,7 @@ export declare const inputVariants: ((props?: {
128
128
  iconDecoration: (props?: ({
129
129
  tier?: "commit" | "modify" | undefined;
130
130
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
131
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
131
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
132
132
  intent?: "default" | "success" | "warning" | "danger" | undefined;
133
133
  disabled?: boolean | undefined;
134
134
  readonly?: boolean | undefined;
package/dist/primitives/JourneyTimeline/journey-timeline.variants.d.ts CHANGED
@@ -2,7 +2,7 @@ import { type SlotNames, type VariantProps } from '../../utils/variants.js';
2
2
  export declare const journeyTimelineVariants: ((props?: {
3
3
  orientation?: "horizontal" | "vertical" | undefined;
4
4
  size?: "sm" | "md" | "lg" | undefined;
5
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
5
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
6
6
  focused?: boolean | undefined;
7
7
  interactive?: boolean | undefined;
8
8
  travelled?: boolean | undefined;
@@ -13,7 +13,7 @@ export declare const journeyTimelineVariants: ((props?: {
13
13
  base: (props?: ({
14
14
  orientation?: "horizontal" | "vertical" | undefined;
15
15
  size?: "sm" | "md" | "lg" | undefined;
16
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
16
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
17
17
  focused?: boolean | undefined;
18
18
  interactive?: boolean | undefined;
19
19
  travelled?: boolean | undefined;
@@ -26,7 +26,7 @@ export declare const journeyTimelineVariants: ((props?: {
26
26
  rail: (props?: ({
27
27
  orientation?: "horizontal" | "vertical" | undefined;
28
28
  size?: "sm" | "md" | "lg" | undefined;
29
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
29
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
30
30
  focused?: boolean | undefined;
31
31
  interactive?: boolean | undefined;
32
32
  travelled?: boolean | undefined;
@@ -39,7 +39,7 @@ export declare const journeyTimelineVariants: ((props?: {
39
39
  node: (props?: ({
40
40
  orientation?: "horizontal" | "vertical" | undefined;
41
41
  size?: "sm" | "md" | "lg" | undefined;
42
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
42
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
43
43
  focused?: boolean | undefined;
44
44
  interactive?: boolean | undefined;
45
45
  travelled?: boolean | undefined;
@@ -52,7 +52,7 @@ export declare const journeyTimelineVariants: ((props?: {
52
52
  metaColumn: (props?: ({
53
53
  orientation?: "horizontal" | "vertical" | undefined;
54
54
  size?: "sm" | "md" | "lg" | undefined;
55
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
55
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
56
56
  focused?: boolean | undefined;
57
57
  interactive?: boolean | undefined;
58
58
  travelled?: boolean | undefined;
@@ -65,7 +65,7 @@ export declare const journeyTimelineVariants: ((props?: {
65
65
  meta: (props?: ({
66
66
  orientation?: "horizontal" | "vertical" | undefined;
67
67
  size?: "sm" | "md" | "lg" | undefined;
68
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
68
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
69
69
  focused?: boolean | undefined;
70
70
  interactive?: boolean | undefined;
71
71
  travelled?: boolean | undefined;
@@ -78,7 +78,7 @@ export declare const journeyTimelineVariants: ((props?: {
78
78
  markerColumn: (props?: ({
79
79
  orientation?: "horizontal" | "vertical" | undefined;
80
80
  size?: "sm" | "md" | "lg" | undefined;
81
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
81
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
82
82
  focused?: boolean | undefined;
83
83
  interactive?: boolean | undefined;
84
84
  travelled?: boolean | undefined;
@@ -91,7 +91,7 @@ export declare const journeyTimelineVariants: ((props?: {
91
91
  marker: (props?: ({
92
92
  orientation?: "horizontal" | "vertical" | undefined;
93
93
  size?: "sm" | "md" | "lg" | undefined;
94
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
94
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
95
95
  focused?: boolean | undefined;
96
96
  interactive?: boolean | undefined;
97
97
  travelled?: boolean | undefined;
@@ -104,7 +104,7 @@ export declare const journeyTimelineVariants: ((props?: {
104
104
  connector: (props?: ({
105
105
  orientation?: "horizontal" | "vertical" | undefined;
106
106
  size?: "sm" | "md" | "lg" | undefined;
107
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
107
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
108
108
  focused?: boolean | undefined;
109
109
  interactive?: boolean | undefined;
110
110
  travelled?: boolean | undefined;
@@ -117,7 +117,7 @@ export declare const journeyTimelineVariants: ((props?: {
117
117
  content: (props?: ({
118
118
  orientation?: "horizontal" | "vertical" | undefined;
119
119
  size?: "sm" | "md" | "lg" | undefined;
120
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
120
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
121
121
  focused?: boolean | undefined;
122
122
  interactive?: boolean | undefined;
123
123
  travelled?: boolean | undefined;
@@ -130,7 +130,7 @@ export declare const journeyTimelineVariants: ((props?: {
130
130
  card: (props?: ({
131
131
  orientation?: "horizontal" | "vertical" | undefined;
132
132
  size?: "sm" | "md" | "lg" | undefined;
133
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
133
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
134
134
  focused?: boolean | undefined;
135
135
  interactive?: boolean | undefined;
136
136
  travelled?: boolean | undefined;
@@ -143,7 +143,7 @@ export declare const journeyTimelineVariants: ((props?: {
143
143
  header: (props?: ({
144
144
  orientation?: "horizontal" | "vertical" | undefined;
145
145
  size?: "sm" | "md" | "lg" | undefined;
146
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
146
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
147
147
  focused?: boolean | undefined;
148
148
  interactive?: boolean | undefined;
149
149
  travelled?: boolean | undefined;
@@ -156,7 +156,7 @@ export declare const journeyTimelineVariants: ((props?: {
156
156
  trigger: (props?: ({
157
157
  orientation?: "horizontal" | "vertical" | undefined;
158
158
  size?: "sm" | "md" | "lg" | undefined;
159
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
159
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
160
160
  focused?: boolean | undefined;
161
161
  interactive?: boolean | undefined;
162
162
  travelled?: boolean | undefined;
@@ -169,7 +169,7 @@ export declare const journeyTimelineVariants: ((props?: {
169
169
  trailing: (props?: ({
170
170
  orientation?: "horizontal" | "vertical" | undefined;
171
171
  size?: "sm" | "md" | "lg" | undefined;
172
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
172
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
173
173
  focused?: boolean | undefined;
174
174
  interactive?: boolean | undefined;
175
175
  travelled?: boolean | undefined;
@@ -182,7 +182,7 @@ export declare const journeyTimelineVariants: ((props?: {
182
182
  labelGroup: (props?: ({
183
183
  orientation?: "horizontal" | "vertical" | undefined;
184
184
  size?: "sm" | "md" | "lg" | undefined;
185
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
185
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
186
186
  focused?: boolean | undefined;
187
187
  interactive?: boolean | undefined;
188
188
  travelled?: boolean | undefined;
@@ -195,7 +195,7 @@ export declare const journeyTimelineVariants: ((props?: {
195
195
  title: (props?: ({
196
196
  orientation?: "horizontal" | "vertical" | undefined;
197
197
  size?: "sm" | "md" | "lg" | undefined;
198
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
198
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
199
199
  focused?: boolean | undefined;
200
200
  interactive?: boolean | undefined;
201
201
  travelled?: boolean | undefined;
@@ -208,7 +208,7 @@ export declare const journeyTimelineVariants: ((props?: {
208
208
  subtitle: (props?: ({
209
209
  orientation?: "horizontal" | "vertical" | undefined;
210
210
  size?: "sm" | "md" | "lg" | undefined;
211
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
211
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
212
212
  focused?: boolean | undefined;
213
213
  interactive?: boolean | undefined;
214
214
  travelled?: boolean | undefined;
@@ -221,7 +221,7 @@ export declare const journeyTimelineVariants: ((props?: {
221
221
  segment: (props?: ({
222
222
  orientation?: "horizontal" | "vertical" | undefined;
223
223
  size?: "sm" | "md" | "lg" | undefined;
224
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
224
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
225
225
  focused?: boolean | undefined;
226
226
  interactive?: boolean | undefined;
227
227
  travelled?: boolean | undefined;
@@ -234,7 +234,7 @@ export declare const journeyTimelineVariants: ((props?: {
234
234
  detail: (props?: ({
235
235
  orientation?: "horizontal" | "vertical" | undefined;
236
236
  size?: "sm" | "md" | "lg" | undefined;
237
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
237
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
238
238
  focused?: boolean | undefined;
239
239
  interactive?: boolean | undefined;
240
240
  travelled?: boolean | undefined;
@@ -247,7 +247,7 @@ export declare const journeyTimelineVariants: ((props?: {
247
247
  detailInner: (props?: ({
248
248
  orientation?: "horizontal" | "vertical" | undefined;
249
249
  size?: "sm" | "md" | "lg" | undefined;
250
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
250
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
251
251
  focused?: boolean | undefined;
252
252
  interactive?: boolean | undefined;
253
253
  travelled?: boolean | undefined;
@@ -260,7 +260,7 @@ export declare const journeyTimelineVariants: ((props?: {
260
260
  detailContent: (props?: ({
261
261
  orientation?: "horizontal" | "vertical" | undefined;
262
262
  size?: "sm" | "md" | "lg" | undefined;
263
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
263
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
264
264
  focused?: boolean | undefined;
265
265
  interactive?: boolean | undefined;
266
266
  travelled?: boolean | undefined;
@@ -273,7 +273,7 @@ export declare const journeyTimelineVariants: ((props?: {
273
273
  panel: (props?: ({
274
274
  orientation?: "horizontal" | "vertical" | undefined;
275
275
  size?: "sm" | "md" | "lg" | undefined;
276
- status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
276
+ status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
277
277
  focused?: boolean | undefined;
278
278
  interactive?: boolean | undefined;
279
279
  travelled?: boolean | undefined;
package/dist/primitives/Popover/Popover.svelte CHANGED
@@ -184,7 +184,7 @@
184
184
  }
185
185
 
186
186
  if (!wasTrigger) {
187
- effectiveTriggerElement?.focus();
187
+ focusTrigger();
188
188
  }
189
189
  }
190
190
  }
@@ -219,7 +219,7 @@
219
219
  open = false;
220
220
  onOpenChange?.(false);
221
221
  onEscapeProp?.();
222
- effectiveTriggerElement?.focus();
222
+ focusTrigger();
223
223
  }
224
224
  document.addEventListener('keydown', handleEscape);
225
225
  return () => document.removeEventListener('keydown', handleEscape);
@@ -276,8 +276,29 @@
276
276
 
277
277
  // ── Trigger handlers ───────────────────────────────────────
278
278
 
279
+ // Restore focus to the trigger after a dismiss. The snippet trigger is
280
+ // wrapped in a plain (non-focusable) div — `focus()` on it is a spec no-op —
281
+ // so target the interactive descendant instead (same query as the
282
+ // aria-expanded effect). An external `triggerElement` is the consumer's
283
+ // real control: focus it directly.
284
+ function focusTrigger() {
285
+ const target =
286
+ triggerElement ??
287
+ internalTriggerElement?.querySelector<HTMLElement>(
288
+ 'button, a[href], [role="button"], [tabindex]'
289
+ ) ??
290
+ internalTriggerElement;
291
+ target?.focus();
292
+ }
293
+
279
294
  function handleTriggerPointerDown() {
280
- if (open) dismissedByTrigger = true;
295
+ // Arm the "this pointerdown already dismissed it" guard only in auto
296
+ // mode, where the browser's light dismiss really closes the popover
297
+ // between pointerdown and click (the guard stops that click from
298
+ // re-opening it). In manual mode nothing light-dismisses — the click
299
+ // itself must toggle-close, so arming the guard there left the trigger
300
+ // unable to close its own popover.
301
+ if (open && popoverMode === 'auto') dismissedByTrigger = true;
281
302
  }
282
303
 
283
304
  function handleTriggerClick(event: MouseEvent) {
package/dist/primitives/Select/Select.svelte CHANGED
@@ -53,6 +53,7 @@
53
53
  slotClasses: slotClassesProp = {},
54
54
  preset,
55
55
  id: idProp,
56
+ 'aria-describedby': ariaDescribedby,
56
57
  ...restProps
57
58
  }: SelectProps<T> = $props();
58
59
 
@@ -108,6 +109,14 @@
108
109
  disabled
109
110
  }));
110
111
 
112
+ // Consumer-supplied `aria-describedby` (e.g. an external hint rendered
113
+ // outside the component) merges with the internal error/helper chain —
114
+ // restProps land on the wrapper div, so without this the description
115
+ // would never reach the focusable trigger.
116
+ const describedBy = $derived(
117
+ [ff.describedBy, ariaDescribedby].filter(Boolean).join(' ') || undefined
118
+ );
119
+
111
120
  let activeIndex = $state(-1);
112
121
  // Tracks whether the most recent open was keyboard-driven, so the initial
113
122
  // active-option highlight only defaults to the first row for keyboard users.
@@ -456,7 +465,7 @@
456
465
  aria-haspopup="listbox"
457
466
  aria-controls={listboxId}
458
467
  aria-labelledby={labelId}
459
- aria-describedby={ff.describedBy}
468
+ aria-describedby={describedBy}
460
469
  aria-invalid={ff.invalid ? 'true' : undefined}
461
470
  aria-activedescendant={activeIndex >= 0 ? getOptionId(activeIndex) : undefined}
462
471
  onclick={toggle}
package/dist/primitives/Select/select.variants.d.ts CHANGED
@@ -2,7 +2,7 @@ import { type SlotNames, type VariantProps } from '../../utils/variants.js';
2
2
  export declare const selectVariants: ((props?: {
3
3
  tier?: "commit" | "modify" | undefined;
4
4
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
5
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
5
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
6
6
  open?: boolean | undefined;
7
7
  disabled?: boolean | undefined;
8
8
  messageType?: "error" | "helper" | undefined;
@@ -13,7 +13,7 @@ export declare const selectVariants: ((props?: {
13
13
  wrapper: (props?: ({
14
14
  tier?: "commit" | "modify" | undefined;
15
15
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
16
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
16
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
17
17
  open?: boolean | undefined;
18
18
  disabled?: boolean | undefined;
19
19
  messageType?: "error" | "helper" | undefined;
@@ -26,7 +26,7 @@ export declare const selectVariants: ((props?: {
26
26
  base: (props?: ({
27
27
  tier?: "commit" | "modify" | undefined;
28
28
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
29
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
29
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
30
30
  open?: boolean | undefined;
31
31
  disabled?: boolean | undefined;
32
32
  messageType?: "error" | "helper" | undefined;
@@ -39,7 +39,7 @@ export declare const selectVariants: ((props?: {
39
39
  trigger: (props?: ({
40
40
  tier?: "commit" | "modify" | undefined;
41
41
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
42
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
42
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
43
43
  open?: boolean | undefined;
44
44
  disabled?: boolean | undefined;
45
45
  messageType?: "error" | "helper" | undefined;
@@ -52,7 +52,7 @@ export declare const selectVariants: ((props?: {
52
52
  triggerText: (props?: ({
53
53
  tier?: "commit" | "modify" | undefined;
54
54
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
55
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
55
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
56
56
  open?: boolean | undefined;
57
57
  disabled?: boolean | undefined;
58
58
  messageType?: "error" | "helper" | undefined;
@@ -65,7 +65,7 @@ export declare const selectVariants: ((props?: {
65
65
  placeholder: (props?: ({
66
66
  tier?: "commit" | "modify" | undefined;
67
67
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
68
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
68
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
69
69
  open?: boolean | undefined;
70
70
  disabled?: boolean | undefined;
71
71
  messageType?: "error" | "helper" | undefined;
@@ -78,7 +78,7 @@ export declare const selectVariants: ((props?: {
78
78
  chevron: (props?: ({
79
79
  tier?: "commit" | "modify" | undefined;
80
80
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
81
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
81
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
82
82
  open?: boolean | undefined;
83
83
  disabled?: boolean | undefined;
84
84
  messageType?: "error" | "helper" | undefined;
@@ -91,7 +91,7 @@ export declare const selectVariants: ((props?: {
91
91
  clear: (props?: ({
92
92
  tier?: "commit" | "modify" | undefined;
93
93
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
94
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
94
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
95
95
  open?: boolean | undefined;
96
96
  disabled?: boolean | undefined;
97
97
  messageType?: "error" | "helper" | undefined;
@@ -104,7 +104,7 @@ export declare const selectVariants: ((props?: {
104
104
  listbox: (props?: ({
105
105
  tier?: "commit" | "modify" | undefined;
106
106
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
107
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
107
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
108
108
  open?: boolean | undefined;
109
109
  disabled?: boolean | undefined;
110
110
  messageType?: "error" | "helper" | undefined;
@@ -117,7 +117,7 @@ export declare const selectVariants: ((props?: {
117
117
  option: (props?: ({
118
118
  tier?: "commit" | "modify" | undefined;
119
119
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
120
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
120
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
121
121
  open?: boolean | undefined;
122
122
  disabled?: boolean | undefined;
123
123
  messageType?: "error" | "helper" | undefined;
@@ -130,7 +130,7 @@ export declare const selectVariants: ((props?: {
130
130
  optionLabel: (props?: ({
131
131
  tier?: "commit" | "modify" | undefined;
132
132
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
133
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
133
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
134
134
  open?: boolean | undefined;
135
135
  disabled?: boolean | undefined;
136
136
  messageType?: "error" | "helper" | undefined;
@@ -143,7 +143,7 @@ export declare const selectVariants: ((props?: {
143
143
  optionCheck: (props?: ({
144
144
  tier?: "commit" | "modify" | undefined;
145
145
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
146
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
146
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
147
147
  open?: boolean | undefined;
148
148
  disabled?: boolean | undefined;
149
149
  messageType?: "error" | "helper" | undefined;
@@ -156,7 +156,7 @@ export declare const selectVariants: ((props?: {
156
156
  optionCheckbox: (props?: ({
157
157
  tier?: "commit" | "modify" | undefined;
158
158
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
159
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
159
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
160
160
  open?: boolean | undefined;
161
161
  disabled?: boolean | undefined;
162
162
  messageType?: "error" | "helper" | undefined;
@@ -169,7 +169,7 @@ export declare const selectVariants: ((props?: {
169
169
  group: (props?: ({
170
170
  tier?: "commit" | "modify" | undefined;
171
171
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
172
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
172
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
173
173
  open?: boolean | undefined;
174
174
  disabled?: boolean | undefined;
175
175
  messageType?: "error" | "helper" | undefined;
@@ -182,7 +182,7 @@ export declare const selectVariants: ((props?: {
182
182
  groupLabel: (props?: ({
183
183
  tier?: "commit" | "modify" | undefined;
184
184
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
185
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
185
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
186
186
  open?: boolean | undefined;
187
187
  disabled?: boolean | undefined;
188
188
  messageType?: "error" | "helper" | undefined;
@@ -195,7 +195,7 @@ export declare const selectVariants: ((props?: {
195
195
  label: (props?: ({
196
196
  tier?: "commit" | "modify" | undefined;
197
197
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
198
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
198
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
199
199
  open?: boolean | undefined;
200
200
  disabled?: boolean | undefined;
201
201
  messageType?: "error" | "helper" | undefined;
@@ -208,7 +208,7 @@ export declare const selectVariants: ((props?: {
208
208
  message: (props?: ({
209
209
  tier?: "commit" | "modify" | undefined;
210
210
  variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
211
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
211
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
212
212
  open?: boolean | undefined;
213
213
  disabled?: boolean | undefined;
214
214
  messageType?: "error" | "helper" | undefined;
package/dist/primitives/Skeleton/skeleton.variants.d.ts CHANGED
@@ -1,19 +1,19 @@
1
1
  import { type SlotNames, type VariantProps } from '../../utils/variants.js';
2
2
  export declare const skeletonVariants: ((props?: {
3
3
  variant?: "rounded" | "text" | "circular" | "rectangular" | undefined;
4
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
4
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
5
5
  animation?: "none" | "pulse" | "wave" | undefined;
6
6
  } | undefined) => {
7
7
  base: (props?: ({
8
8
  variant?: "rounded" | "text" | "circular" | "rectangular" | undefined;
9
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
9
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
10
10
  animation?: "none" | "pulse" | "wave" | undefined;
11
11
  } & {
12
12
  class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
13
13
  }) | undefined) => string;
14
14
  wrapper: (props?: ({
15
15
  variant?: "rounded" | "text" | "circular" | "rectangular" | undefined;
16
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
16
+ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
17
17
  animation?: "none" | "pulse" | "wave" | undefined;
18
18
  } & {
19
19
  class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
package/dist/primitives/Slider/Slider.svelte CHANGED
@@ -34,6 +34,7 @@
34
34
  unstyled: unstyledProp = false,
35
35
  slotClasses: slotClassesProp = {},
36
36
  preset,
37
+ 'aria-describedby': ariaDescribedby,
37
38
  ...restProps
38
39
  }: SliderProps = $props();
39
40
 
@@ -240,12 +241,14 @@
240
241
  resolveSlotClasses(blocksConfig, 'Slider', preset, variantProps, slotClassesProp)
241
242
  );
242
243
 
243
- // aria-describedby chain: error > helper, plus rangeStatus when active.
244
- // `ff.describedBy` already handles error/hint in the canonical order;
245
- // we append the optional statusId.
244
+ // aria-describedby chain: error > helper, plus rangeStatus when active,
245
+ // plus a consumer-supplied `aria-describedby` (e.g. an external hint) —
246
+ // restProps land on the wrapper div, so without the merge the consumer's
247
+ // description would never reach the focusable thumbs.
246
248
  const describedBy = $derived(
247
- [ff.describedBy, hasRangeConstraints ? statusId : undefined].filter(Boolean).join(' ') ||
248
- undefined
249
+ [ff.describedBy, hasRangeConstraints ? statusId : undefined, ariaDescribedby]
250
+ .filter(Boolean)
251
+ .join(' ') || undefined
249
252
  );
250
253
 
251
254
  $effect(() => {