@urbicon-ui/blocks 6.22.0 → 6.24.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 (30) hide show
  1. package/dist/components/Calendar/CalendarWeekdayHeader.svelte +4 -1
  2. package/dist/components/Calendar/calendar.variants.d.ts +63 -63
  3. package/dist/components/Sparkline/Sparkline.svelte +10 -4
  4. package/dist/components/Sparkline/index.d.ts +9 -1
  5. package/dist/i18n/index.d.ts +2 -378
  6. package/dist/primitives/Alert/alert.variants.d.ts +8 -8
  7. package/dist/primitives/Badge/Badge.svelte +8 -2
  8. package/dist/primitives/Badge/index.d.ts +67 -32
  9. package/dist/primitives/ButtonGroup/ButtonGroup.svelte +120 -3
  10. package/dist/primitives/Card/card.variants.js +2 -2
  11. package/dist/primitives/Checkbox/Checkbox.svelte +11 -2
  12. package/dist/primitives/Combobox/Combobox.svelte +35 -3
  13. package/dist/primitives/ConfirmDialog/index.d.ts +2 -1
  14. package/dist/primitives/Dialog/index.d.ts +4 -4
  15. package/dist/primitives/JourneyTimeline/journey-timeline.variants.d.ts +22 -22
  16. package/dist/primitives/Pagination/Pagination.svelte +28 -15
  17. package/dist/primitives/RadioGroup/RadioGroup.svelte +16 -3
  18. package/dist/primitives/RadioGroup/RadioItem.svelte +1 -1
  19. package/dist/primitives/Select/Select.svelte +20 -5
  20. package/dist/primitives/Spinner/spinner.variants.d.ts +16 -16
  21. package/dist/primitives/Stepper/stepper.variants.d.ts +11 -11
  22. package/dist/primitives/Textarea/Textarea.svelte +10 -1
  23. package/dist/primitives/Toast/Toaster.svelte +122 -4
  24. package/dist/primitives/Toast/toast.store.svelte.d.ts +32 -1
  25. package/dist/primitives/Toast/toast.store.svelte.js +84 -19
  26. package/dist/primitives/Toast/toast.variants.d.ts +12 -12
  27. package/dist/primitives/Toggle/Toggle.svelte +16 -3
  28. package/dist/primitives/Tooltip/tooltip.variants.d.ts +3 -3
  29. package/dist/style/semantic.css +1 -1
  30. package/package.json +3 -3
@@ -7,6 +7,7 @@
7
7
  data,
8
8
  width = 96,
9
9
  height = 24,
10
+ fluid = false,
10
11
  area = false,
11
12
  showEndPoint = false,
12
13
  color = 'var(--color-chart-1)',
@@ -40,15 +41,19 @@
40
41
 
41
42
  <span
42
43
  {...rest}
43
- class={[!unstyled && 'inline-block align-middle', slot('root'), className]}
44
+ class={[
45
+ !unstyled && (fluid ? 'block w-full' : 'inline-block align-middle'),
46
+ slot('root'),
47
+ className
48
+ ]}
44
49
  role={ariaLabel ? 'img' : undefined}
45
50
  aria-label={ariaLabel}
46
51
  aria-hidden={ariaLabel ? undefined : 'true'}
47
52
  >
48
53
  <svg
49
- class={slot('svg')}
50
- {width}
51
- {height}
54
+ class={[fluid && 'w-full h-auto', slot('svg')]}
55
+ width={fluid ? undefined : width}
56
+ height={fluid ? undefined : height}
52
57
  viewBox="0 0 {width} {height}"
53
58
  preserveAspectRatio="none"
54
59
  >
@@ -70,6 +75,7 @@
70
75
  stroke-width={strokeWidth}
71
76
  stroke-linejoin="round"
72
77
  stroke-linecap="round"
78
+ vector-effect={fluid ? 'non-scaling-stroke' : undefined}
73
79
  />
74
80
  {/if}
75
81
  {#if showEndPoint && geometry.last}
@@ -4,7 +4,8 @@ export type SparklineSlotClasses = Partial<Record<'root' | 'svg' | 'line' | 'are
4
4
  /**
5
5
  * @description Tiny inline trend line — no axes, no labels — sized to flow in
6
6
  * table cells, cards, or running text. Zero-dependency SVG, optional area fill
7
- * and end-point dot. Aria-hidden by default with an optional `ariaLabel`.
7
+ * and end-point dot. Fixed `width`/`height` by default, or set `fluid` to fill
8
+ * the container width. Aria-hidden by default with an optional `ariaLabel`.
8
9
  *
9
10
  * @tag display
10
11
  * @tag data
@@ -23,6 +24,13 @@ export interface SparklineProps extends Omit<HTMLAttributes<HTMLElement>, 'child
23
24
  width?: number;
24
25
  /** Height in px. @default 24 */
25
26
  height?: number;
27
+ /**
28
+ * Fill the container width instead of a fixed pixel size. Drops the svg's
29
+ * `width`/`height` attributes (they still set the `viewBox` aspect ratio) so
30
+ * it scales to its container; strokes stay crisp via
31
+ * `vector-effect="non-scaling-stroke"`. @default false
32
+ */
33
+ fluid?: boolean;
26
34
  /** Fill the area under the line. @default false */
27
35
  area?: boolean;
28
36
  /** Mark the last point with a dot. @default false */
@@ -379,195 +379,7 @@ declare const blocksTranslations: {
379
379
  };
380
380
  };
381
381
  };
382
- export declare const blocksI18n: import("@urbicon-ui/i18n").PackageI18n<{
383
- readonly accessibility: {
384
- readonly avatar: "Avatar";
385
- readonly breadcrumb: "Breadcrumb";
386
- readonly breadcrumbExpand: "Show all breadcrumb items";
387
- readonly clearInput: "Clear input";
388
- readonly clearSearch: "Clear search";
389
- readonly clearSelection: "Clear selection";
390
- readonly closeDialog: "Close dialog";
391
- readonly closeDrawer: "Close drawer";
392
- readonly dismiss: "Dismiss";
393
- readonly fileUpload: "File upload";
394
- readonly loading: "Loading";
395
- readonly maximum: "Maximum";
396
- readonly minimum: "Minimum";
397
- readonly pagination: "Page navigation";
398
- readonly progress: "Progress";
399
- readonly slider: "Slider";
400
- readonly toggle: "Toggle";
401
- readonly toggleOptions: "Toggle options";
402
- readonly removableBadge: "Removable badge";
403
- readonly removeBadge: "Remove badge";
404
- readonly removeFile: "Remove {{name}}";
405
- readonly removeTag: "Remove {{label}}";
406
- };
407
- readonly button: {
408
- readonly close: "Close";
409
- readonly apply: "Apply";
410
- readonly cancel: "Cancel";
411
- readonly confirm: "Confirm";
412
- };
413
- readonly menu: {
414
- readonly placeholder: "Select an option...";
415
- };
416
- readonly common: {
417
- readonly loading: "Loading...";
418
- };
419
- readonly languages: {
420
- readonly de: "Deutsch";
421
- readonly en: "English";
422
- readonly es: "Español";
423
- readonly fr: "Français";
424
- readonly it: "Italiano";
425
- readonly nl: "Nederlands";
426
- };
427
- readonly localeSwitcher: {
428
- readonly ariaLabel: "Language selection";
429
- readonly placeholder: "Select language...";
430
- };
431
- readonly pagination: {
432
- readonly next: "Next";
433
- readonly first: "First";
434
- readonly last: "Last";
435
- readonly page: "Page";
436
- readonly previous: "Previous";
437
- readonly pageInfo: "{{label}} {{current}} of {{total}}";
438
- readonly rangeInfo: "{{start}}–{{end}} of {{total}}";
439
- };
440
- readonly calendar: {
441
- readonly recurring: "Recurring event";
442
- readonly previousMonth: "Previous month";
443
- readonly nextMonth: "Next month";
444
- readonly previousWeek: "Previous week";
445
- readonly nextWeek: "Next week";
446
- readonly previousDay: "Previous day";
447
- readonly nextDay: "Next day";
448
- readonly previousYear: "Previous year";
449
- readonly nextYear: "Next year";
450
- readonly today: "Today";
451
- readonly calendarGrid: "Calendar";
452
- readonly weekdays: "Weekdays";
453
- readonly weekNumber: "Week number";
454
- readonly events: "Events";
455
- readonly noEvents: "No events";
456
- readonly showMore: "{{count}} more";
457
- readonly legend: "Legend";
458
- readonly yearView: "Year overview";
459
- readonly weekView: "Week view";
460
- readonly viewMonth: "Month";
461
- readonly viewYear: "Year";
462
- readonly viewWeek: "Week";
463
- readonly viewDay: "Day";
464
- readonly multiDayLabel: "Day {{current}} of {{total}}";
465
- readonly agendaView: "Agenda view";
466
- readonly viewAgenda: "Agenda";
467
- readonly viewSwitcher: "View mode";
468
- };
469
- readonly planner: {
470
- readonly previousWeek: "Previous week";
471
- readonly nextWeek: "Next week";
472
- readonly previousMonth: "Previous month";
473
- readonly nextMonth: "Next month";
474
- readonly previousRange: "Previous range";
475
- readonly nextRange: "Next range";
476
- readonly today: "Today";
477
- readonly grid: "Planner";
478
- readonly itemCount: "{{count}} items";
479
- };
480
- readonly commandPalette: {
481
- readonly noResults: "No results found.";
482
- readonly search: "Search...";
483
- readonly hints: {
484
- readonly navigate: "Navigate";
485
- readonly select: "Select";
486
- readonly close: "Close";
487
- };
488
- };
489
- readonly compositionBar: {
490
- readonly total: "Total";
491
- readonly summary: "Composition: {{total}} ({{count}} shares) — {{parts}}";
492
- readonly share: "Share";
493
- readonly value: "Value";
494
- readonly percent: "Percent";
495
- readonly remaining: "remaining";
496
- };
497
- readonly guide: {
498
- readonly next: "Next";
499
- readonly previous: "Back";
500
- readonly skip: "Skip tour";
501
- readonly done: "Done";
502
- readonly step: "Step {{current}} of {{total}}";
503
- readonly tour: "Guided tour";
504
- readonly close: "Close";
505
- readonly openHelp: "Help";
506
- readonly backToList: "All topics";
507
- readonly info: "More information";
508
- readonly infoAbout: "More information about {{label}}";
509
- readonly dismiss: "Dismiss hint";
510
- readonly startTour: "Start the guided tour";
511
- readonly actionRequired: "Complete the highlighted action to continue";
512
- readonly filterPlaceholder: "Filter topics…";
513
- readonly noResults: "No matching topics";
514
- };
515
- readonly journeyTimeline: {
516
- readonly label: "Journey";
517
- readonly status: {
518
- readonly complete: "Completed";
519
- readonly active: "In progress";
520
- readonly pending: "Pending";
521
- readonly attention: "Needs attention";
522
- readonly blocked: "Blocked";
523
- readonly skipped: "Skipped";
524
- };
525
- };
526
- readonly datepicker: {
527
- readonly placeholder: "Select a date...";
528
- readonly rangePlaceholder: "Select a date range...";
529
- readonly openCalendar: "Open calendar";
530
- readonly invalidDate: "Invalid date";
531
- readonly outOfRange: "Date is outside the allowed range";
532
- readonly invalidRange: "Invalid date range";
533
- };
534
- readonly fileUpload: {
535
- readonly exists: "File already added";
536
- readonly invalidType: "File type {{type}} is not allowed";
537
- readonly tooLarge: "File exceeds {{size}} limit";
538
- readonly tooMany: "Maximum {{count}} files allowed";
539
- readonly tooSmall: "File must be at least {{size}}";
540
- };
541
- readonly sankey: {
542
- readonly summary: "Sankey diagram: {{nodes}} nodes, {{links}} links — {{flows}}";
543
- readonly source: "Source";
544
- readonly target: "Target";
545
- readonly value: "Value";
546
- };
547
- readonly slider: {
548
- readonly rangeStatus: {
549
- readonly insideRecommended: "In recommended range";
550
- readonly insideValid: "In valid range";
551
- readonly insideValidOnly: "Outside recommended range, but valid";
552
- readonly outsideValid: "Outside valid range";
553
- };
554
- };
555
- readonly themeSwitcher: {
556
- readonly lightMode: "Light mode";
557
- readonly darkMode: "Dark mode";
558
- readonly systemTheme: "System theme";
559
- };
560
- readonly chart: {
561
- readonly category: "Category";
562
- readonly series: "Series {{index}}";
563
- readonly segment: "Segment";
564
- readonly value: "Value";
565
- readonly share: "Share";
566
- };
567
- readonly stepper: {
568
- readonly optional: "Optional";
569
- };
570
- }>;
382
+ export declare const blocksI18n: import("@urbicon-ui/i18n").PackageI18n<import("@urbicon-ui/i18n").Translations>;
571
383
  /**
572
384
  * Context-scoped translation hook for the blocks package. Call during component
573
385
  * initialisation, then use the returned `t` (conventionally aliased `bt`):
@@ -580,195 +392,7 @@ export declare const blocksI18n: import("@urbicon-ui/i18n").PackageI18n<{
580
392
  * Resolves against the nearest `<I18nProvider>`'s locale (or the base locale
581
393
  * when none is mounted) and re-renders reactively on locale change.
582
394
  */
583
- export declare const useBlocksI18n: () => import("@urbicon-ui/i18n").TypedTranslationFunction<{
584
- readonly accessibility: {
585
- readonly avatar: "Avatar";
586
- readonly breadcrumb: "Breadcrumb";
587
- readonly breadcrumbExpand: "Show all breadcrumb items";
588
- readonly clearInput: "Clear input";
589
- readonly clearSearch: "Clear search";
590
- readonly clearSelection: "Clear selection";
591
- readonly closeDialog: "Close dialog";
592
- readonly closeDrawer: "Close drawer";
593
- readonly dismiss: "Dismiss";
594
- readonly fileUpload: "File upload";
595
- readonly loading: "Loading";
596
- readonly maximum: "Maximum";
597
- readonly minimum: "Minimum";
598
- readonly pagination: "Page navigation";
599
- readonly progress: "Progress";
600
- readonly slider: "Slider";
601
- readonly toggle: "Toggle";
602
- readonly toggleOptions: "Toggle options";
603
- readonly removableBadge: "Removable badge";
604
- readonly removeBadge: "Remove badge";
605
- readonly removeFile: "Remove {{name}}";
606
- readonly removeTag: "Remove {{label}}";
607
- };
608
- readonly button: {
609
- readonly close: "Close";
610
- readonly apply: "Apply";
611
- readonly cancel: "Cancel";
612
- readonly confirm: "Confirm";
613
- };
614
- readonly menu: {
615
- readonly placeholder: "Select an option...";
616
- };
617
- readonly common: {
618
- readonly loading: "Loading...";
619
- };
620
- readonly languages: {
621
- readonly de: "Deutsch";
622
- readonly en: "English";
623
- readonly es: "Español";
624
- readonly fr: "Français";
625
- readonly it: "Italiano";
626
- readonly nl: "Nederlands";
627
- };
628
- readonly localeSwitcher: {
629
- readonly ariaLabel: "Language selection";
630
- readonly placeholder: "Select language...";
631
- };
632
- readonly pagination: {
633
- readonly next: "Next";
634
- readonly first: "First";
635
- readonly last: "Last";
636
- readonly page: "Page";
637
- readonly previous: "Previous";
638
- readonly pageInfo: "{{label}} {{current}} of {{total}}";
639
- readonly rangeInfo: "{{start}}–{{end}} of {{total}}";
640
- };
641
- readonly calendar: {
642
- readonly recurring: "Recurring event";
643
- readonly previousMonth: "Previous month";
644
- readonly nextMonth: "Next month";
645
- readonly previousWeek: "Previous week";
646
- readonly nextWeek: "Next week";
647
- readonly previousDay: "Previous day";
648
- readonly nextDay: "Next day";
649
- readonly previousYear: "Previous year";
650
- readonly nextYear: "Next year";
651
- readonly today: "Today";
652
- readonly calendarGrid: "Calendar";
653
- readonly weekdays: "Weekdays";
654
- readonly weekNumber: "Week number";
655
- readonly events: "Events";
656
- readonly noEvents: "No events";
657
- readonly showMore: "{{count}} more";
658
- readonly legend: "Legend";
659
- readonly yearView: "Year overview";
660
- readonly weekView: "Week view";
661
- readonly viewMonth: "Month";
662
- readonly viewYear: "Year";
663
- readonly viewWeek: "Week";
664
- readonly viewDay: "Day";
665
- readonly multiDayLabel: "Day {{current}} of {{total}}";
666
- readonly agendaView: "Agenda view";
667
- readonly viewAgenda: "Agenda";
668
- readonly viewSwitcher: "View mode";
669
- };
670
- readonly planner: {
671
- readonly previousWeek: "Previous week";
672
- readonly nextWeek: "Next week";
673
- readonly previousMonth: "Previous month";
674
- readonly nextMonth: "Next month";
675
- readonly previousRange: "Previous range";
676
- readonly nextRange: "Next range";
677
- readonly today: "Today";
678
- readonly grid: "Planner";
679
- readonly itemCount: "{{count}} items";
680
- };
681
- readonly commandPalette: {
682
- readonly noResults: "No results found.";
683
- readonly search: "Search...";
684
- readonly hints: {
685
- readonly navigate: "Navigate";
686
- readonly select: "Select";
687
- readonly close: "Close";
688
- };
689
- };
690
- readonly compositionBar: {
691
- readonly total: "Total";
692
- readonly summary: "Composition: {{total}} ({{count}} shares) — {{parts}}";
693
- readonly share: "Share";
694
- readonly value: "Value";
695
- readonly percent: "Percent";
696
- readonly remaining: "remaining";
697
- };
698
- readonly guide: {
699
- readonly next: "Next";
700
- readonly previous: "Back";
701
- readonly skip: "Skip tour";
702
- readonly done: "Done";
703
- readonly step: "Step {{current}} of {{total}}";
704
- readonly tour: "Guided tour";
705
- readonly close: "Close";
706
- readonly openHelp: "Help";
707
- readonly backToList: "All topics";
708
- readonly info: "More information";
709
- readonly infoAbout: "More information about {{label}}";
710
- readonly dismiss: "Dismiss hint";
711
- readonly startTour: "Start the guided tour";
712
- readonly actionRequired: "Complete the highlighted action to continue";
713
- readonly filterPlaceholder: "Filter topics…";
714
- readonly noResults: "No matching topics";
715
- };
716
- readonly journeyTimeline: {
717
- readonly label: "Journey";
718
- readonly status: {
719
- readonly complete: "Completed";
720
- readonly active: "In progress";
721
- readonly pending: "Pending";
722
- readonly attention: "Needs attention";
723
- readonly blocked: "Blocked";
724
- readonly skipped: "Skipped";
725
- };
726
- };
727
- readonly datepicker: {
728
- readonly placeholder: "Select a date...";
729
- readonly rangePlaceholder: "Select a date range...";
730
- readonly openCalendar: "Open calendar";
731
- readonly invalidDate: "Invalid date";
732
- readonly outOfRange: "Date is outside the allowed range";
733
- readonly invalidRange: "Invalid date range";
734
- };
735
- readonly fileUpload: {
736
- readonly exists: "File already added";
737
- readonly invalidType: "File type {{type}} is not allowed";
738
- readonly tooLarge: "File exceeds {{size}} limit";
739
- readonly tooMany: "Maximum {{count}} files allowed";
740
- readonly tooSmall: "File must be at least {{size}}";
741
- };
742
- readonly sankey: {
743
- readonly summary: "Sankey diagram: {{nodes}} nodes, {{links}} links — {{flows}}";
744
- readonly source: "Source";
745
- readonly target: "Target";
746
- readonly value: "Value";
747
- };
748
- readonly slider: {
749
- readonly rangeStatus: {
750
- readonly insideRecommended: "In recommended range";
751
- readonly insideValid: "In valid range";
752
- readonly insideValidOnly: "Outside recommended range, but valid";
753
- readonly outsideValid: "Outside valid range";
754
- };
755
- };
756
- readonly themeSwitcher: {
757
- readonly lightMode: "Light mode";
758
- readonly darkMode: "Dark mode";
759
- readonly systemTheme: "System theme";
760
- };
761
- readonly chart: {
762
- readonly category: "Category";
763
- readonly series: "Series {{index}}";
764
- readonly segment: "Segment";
765
- readonly value: "Value";
766
- readonly share: "Share";
767
- };
768
- readonly stepper: {
769
- readonly optional: "Optional";
770
- };
771
- }>;
395
+ export declare const useBlocksI18n: any;
772
396
  export declare const hasBlocksTranslation: (key: string) => boolean, getBlocksLocales: () => import("@urbicon-ui/i18n").Locale[];
773
397
  export type BlocksTranslationKey = keyof typeof enTranslations;
774
398
  export { blocksTranslations };
@@ -1,53 +1,53 @@
1
1
  import { type SlotNames, type VariantProps } from '../../utils/variants.js';
2
2
  export declare const alertVariants: ((props?: {
3
- intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
3
+ intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
4
4
  variant?: "inline" | "filled" | "soft" | undefined;
5
5
  size?: "sm" | "md" | "lg" | undefined;
6
6
  } | undefined) => {
7
7
  base: (props?: ({
8
- intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
8
+ intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
9
9
  variant?: "inline" | "filled" | "soft" | undefined;
10
10
  size?: "sm" | "md" | "lg" | 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
  icon: (props?: ({
15
- intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
15
+ intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
16
16
  variant?: "inline" | "filled" | "soft" | undefined;
17
17
  size?: "sm" | "md" | "lg" | 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;
20
20
  }) | undefined) => string;
21
21
  content: (props?: ({
22
- intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
22
+ intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
23
23
  variant?: "inline" | "filled" | "soft" | undefined;
24
24
  size?: "sm" | "md" | "lg" | undefined;
25
25
  } & {
26
26
  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;
27
27
  }) | undefined) => string;
28
28
  title: (props?: ({
29
- intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
29
+ intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
30
30
  variant?: "inline" | "filled" | "soft" | undefined;
31
31
  size?: "sm" | "md" | "lg" | undefined;
32
32
  } & {
33
33
  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;
34
34
  }) | undefined) => string;
35
35
  description: (props?: ({
36
- intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
36
+ intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
37
37
  variant?: "inline" | "filled" | "soft" | undefined;
38
38
  size?: "sm" | "md" | "lg" | undefined;
39
39
  } & {
40
40
  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;
41
41
  }) | undefined) => string;
42
42
  actions: (props?: ({
43
- intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
43
+ intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
44
44
  variant?: "inline" | "filled" | "soft" | undefined;
45
45
  size?: "sm" | "md" | "lg" | undefined;
46
46
  } & {
47
47
  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;
48
48
  }) | undefined) => string;
49
49
  dismissButton: (props?: ({
50
- intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
50
+ intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
51
51
  variant?: "inline" | "filled" | "soft" | undefined;
52
52
  size?: "sm" | "md" | "lg" | undefined;
53
53
  } & {
@@ -34,7 +34,7 @@
34
34
  onRemove,
35
35
  onclick,
36
36
  onHover,
37
- role = 'status',
37
+ role,
38
38
  ...restProps
39
39
  }: BadgeProps = $props();
40
40
 
@@ -56,6 +56,12 @@
56
56
  const isInteractive = $derived(purpose === 'chip' || interactive || !!onclick);
57
57
  const isRemovable = $derived(removable && !isDot);
58
58
 
59
+ // An interactive badge (clickable chip / onclick) carries button semantics:
60
+ // it is focusable and Enter/Space-activatable, so screen readers must hear a
61
+ // button, not a `status` region. An explicit `role` always wins; a disabled
62
+ // badge is inert (pointer-events-none, guarded handlers) so it stays `status`.
63
+ const effRole = $derived(role ?? (isInteractive && !disabled ? 'button' : 'status'));
64
+
59
65
  const variantProps: BadgeVariants = $derived({
60
66
  tier: effectiveTier,
61
67
  intent,
@@ -124,7 +130,7 @@
124
130
  ? [slotClasses?.base, className].filter(Boolean).join(' ')
125
131
  : styles.base({ class: [slotClasses?.base, className] })
126
132
  ]}
127
- {role}
133
+ role={effRole}
128
134
  data-purpose={purpose}
129
135
  tabindex={isInteractive && !disabled ? 0 : undefined}
130
136
  onmouseenter={handleMouseEnter}