@urbicon-ui/blocks 6.30.1 → 6.31.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 (39) hide show
  1. package/dist/components/Calendar/Calendar.svelte +17 -21
  2. package/dist/components/Calendar/CalendarAgendaView.svelte +9 -3
  3. package/dist/components/Calendar/CalendarDayView.svelte +9 -3
  4. package/dist/components/Calendar/CalendarGrid.svelte +9 -3
  5. package/dist/components/Calendar/CalendarWeekGrid.svelte +9 -3
  6. package/dist/components/Calendar/CalendarYearGrid.svelte +12 -3
  7. package/dist/components/Calendar/calendar.variants.d.ts +63 -63
  8. package/dist/components/CommandPalette/commandPalette.variants.js +9 -4
  9. package/dist/i18n/index.d.ts +2 -378
  10. package/dist/primitives/Accordion/accordion.variants.d.ts +7 -7
  11. package/dist/primitives/Accordion/accordion.variants.js +4 -4
  12. package/dist/primitives/Accordion/index.d.ts +2 -2
  13. package/dist/primitives/Alert/alert.variants.d.ts +8 -8
  14. package/dist/primitives/Button/Button.svelte +23 -7
  15. package/dist/primitives/Combobox/Combobox.svelte +11 -3
  16. package/dist/primitives/Combobox/combobox.variants.d.ts +9 -0
  17. package/dist/primitives/Combobox/combobox.variants.js +22 -4
  18. package/dist/primitives/Combobox/index.d.ts +2 -2
  19. package/dist/primitives/JourneyTimeline/journey-timeline.variants.d.ts +22 -22
  20. package/dist/primitives/Menu/menu.variants.js +13 -5
  21. package/dist/primitives/SegmentGroup/SegmentGroup.svelte +4 -4
  22. package/dist/primitives/SegmentGroup/SegmentItem.svelte +1 -1
  23. package/dist/primitives/SegmentGroup/index.d.ts +1 -1
  24. package/dist/primitives/SegmentGroup/segmentgroup.variants.d.ts +4 -4
  25. package/dist/primitives/SegmentGroup/segmentgroup.variants.js +15 -15
  26. package/dist/primitives/Select/select.variants.js +21 -7
  27. package/dist/primitives/Slider/Slider.svelte +2 -2
  28. package/dist/primitives/Slider/slider.variants.d.ts +14 -14
  29. package/dist/primitives/Slider/slider.variants.js +13 -13
  30. package/dist/primitives/Spinner/spinner.variants.d.ts +16 -16
  31. package/dist/primitives/Stepper/stepper.variants.d.ts +11 -11
  32. package/dist/primitives/Toast/toast.variants.d.ts +12 -12
  33. package/dist/primitives/Toggle/Toggle.svelte +2 -2
  34. package/dist/primitives/Toggle/index.d.ts +1 -1
  35. package/dist/primitives/Toggle/toggle.variants.d.ts +7 -7
  36. package/dist/primitives/Toggle/toggle.variants.js +32 -32
  37. package/dist/primitives/Tooltip/tooltip.variants.d.ts +3 -3
  38. package/docs/MIGRATION-v5.md +7 -5
  39. package/package.json +3 -3
@@ -15,11 +15,16 @@ export const commandPaletteVariants = tv({
15
15
  ],
16
16
  inputIcon: 'h-4 w-4 shrink-0 text-text-tertiary',
17
17
  clearButton: 'text-text-quaternary hover:text-text-secondary',
18
- list: 'max-h-72 overflow-y-auto p-1.5',
19
- groupLabel: ['px-2 py-1.5 text-2xs font-semibold uppercase tracking-wide text-text-quaternary'],
20
- // tier: modify palette items are selectable actions.
18
+ // `p-1` + `space-y-0.5` = the shared listbox rhythm (XC-9): 4px edge
19
+ // inset, 2px item-to-item gap same as Select/Combobox/Menu panels.
20
+ list: 'max-h-72 overflow-y-auto p-1 space-y-0.5',
21
+ // `px-3` shares the item's horizontal inset; the micro-typo (2xs,
22
+ // quaternary) is the palette's own command-surface voice.
23
+ groupLabel: ['px-3 py-1.5 text-2xs font-semibold uppercase tracking-wide text-text-quaternary'],
24
+ // tier: modify — palette items are selectable actions. Rhythm = the md
25
+ // listbox baseline (px-3 py-2 text-sm min-h-2.5rem, gap-2 — XC-9).
21
26
  item: [
22
- 'flex w-full items-center gap-3 rounded-modify px-3 py-2 text-sm',
27
+ 'flex w-full items-center gap-2 rounded-modify px-3 py-2 text-sm min-h-[2.5rem]',
23
28
  'transition-colors cursor-pointer'
24
29
  ],
25
30
  itemHighlighted: 'bg-primary-subtle text-primary',
@@ -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,40 +1,40 @@
1
1
  import { type SlotNames, type VariantProps } from '../../utils/variants.js';
2
2
  export declare const accordionVariants: ((props?: {
3
- variant?: "default" | "ghost" | "separated" | undefined;
3
+ variant?: "default" | "ghost" | "card" | undefined;
4
4
  size?: "sm" | "md" | "lg" | undefined;
5
5
  } | undefined) => {
6
6
  base: (props?: ({
7
- variant?: "default" | "ghost" | "separated" | undefined;
7
+ variant?: "default" | "ghost" | "card" | undefined;
8
8
  size?: "sm" | "md" | "lg" | undefined;
9
9
  } & {
10
10
  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;
11
11
  }) | undefined) => string;
12
12
  item: (props?: ({
13
- variant?: "default" | "ghost" | "separated" | undefined;
13
+ variant?: "default" | "ghost" | "card" | undefined;
14
14
  size?: "sm" | "md" | "lg" | undefined;
15
15
  } & {
16
16
  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;
17
17
  }) | undefined) => string;
18
18
  trigger: (props?: ({
19
- variant?: "default" | "ghost" | "separated" | undefined;
19
+ variant?: "default" | "ghost" | "card" | undefined;
20
20
  size?: "sm" | "md" | "lg" | undefined;
21
21
  } & {
22
22
  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;
23
23
  }) | undefined) => string;
24
24
  chevron: (props?: ({
25
- variant?: "default" | "ghost" | "separated" | undefined;
25
+ variant?: "default" | "ghost" | "card" | undefined;
26
26
  size?: "sm" | "md" | "lg" | undefined;
27
27
  } & {
28
28
  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;
29
29
  }) | undefined) => string;
30
30
  content: (props?: ({
31
- variant?: "default" | "ghost" | "separated" | undefined;
31
+ variant?: "default" | "ghost" | "card" | undefined;
32
32
  size?: "sm" | "md" | "lg" | undefined;
33
33
  } & {
34
34
  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;
35
35
  }) | undefined) => string;
36
36
  contentInner: (props?: ({
37
- variant?: "default" | "ghost" | "separated" | undefined;
37
+ variant?: "default" | "ghost" | "card" | 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;
@@ -27,13 +27,13 @@ export const accordionVariants = tv({
27
27
  contentInner: 'pb-4 text-text-secondary'
28
28
  },
29
29
  // Variant contract (see docs/MIGRATION-v5.md §2):
30
- // default → hairlines between items (divide-y)
31
- // separated → items as standalone blocks with spacing, no borders
32
- // ghost → no separators, hover-tint per item
30
+ // default → hairlines between items (divide-y)
31
+ // card → items as standalone card blocks with spacing, no borders
32
+ // ghost → no separators, hover-tint per item
33
33
  variants: {
34
34
  variant: {
35
35
  default: {},
36
- separated: {
36
+ card: {
37
37
  base: 'divide-y-0 space-y-2',
38
38
  item: 'rounded-contain bg-surface-quiet px-4'
39
39
  },
@@ -33,7 +33,7 @@ export interface AccordionContext {
33
33
  *
34
34
  * @example
35
35
  * ```svelte
36
- * <Accordion type="multiple" variant="separated" bind:value={openItems}>
36
+ * <Accordion type="multiple" variant="card" bind:value={openItems}>
37
37
  * <AccordionItem value="section-1" title="Section 1">Content</AccordionItem>
38
38
  * <AccordionItem value="section-2" title="Section 2">Content</AccordionItem>
39
39
  * </Accordion>
@@ -43,7 +43,7 @@ export interface AccordionProps extends AccordionVariants, Omit<HTMLAttributes<H
43
43
  /** Allow single or multiple items open at once @default 'single' */
44
44
  type?: 'single' | 'multiple';
45
45
  /** Visual style @default 'default' */
46
- variant?: 'default' | 'separated' | 'ghost';
46
+ variant?: 'default' | 'card' | 'ghost';
47
47
  /** Size @default 'md' */
48
48
  size?: 'sm' | 'md' | 'lg';
49
49
  /** Controlled open item(s) – string for single, string[] for multiple */
@@ -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
  } & {
@@ -106,8 +106,23 @@
106
106
  }
107
107
  </script>
108
108
 
109
+ <!--
110
+ restProps spreads FIRST so component-owned state wins (COMPONENT-API-CONVENTIONS
111
+ §restProps ordering). The ARIA/selection attributes after the spread are
112
+ conditional merges, not plain overrides: an explicit `undefined` after a spread
113
+ REMOVES the attribute in Svelte, so a naive `role={ariaProps.role}` would strip
114
+ a standalone consumer's own `role="link"`. Each merge lets the ButtonGroup
115
+ selection wiring (role/aria-checked/data-value) and the modeled state
116
+ (pressed/disabled/loading) win when the component has something to say, and
117
+ falls back to the consumer's restProps value when it doesn't. Inside a
118
+ selection group aria-pressed is forced off even against restProps — a selection
119
+ role announces via aria-checked, and doubling up is an ARIA violation.
120
+ `type`/`disabled`/`class`/`onclick` are destructured (never in restProps);
121
+ a consumer onclick is composed inside handleClick.
122
+ -->
109
123
  <button
110
124
  bind:this={buttonElement}
125
+ {...restProps}
111
126
  {type}
112
127
  disabled={effectiveDisabled}
113
128
  class={[
@@ -118,13 +133,14 @@
118
133
  : styles.base({ class: [slotClasses?.base, className] })
119
134
  ]}
120
135
  onclick={handleClick}
121
- role={ariaProps.role}
122
- aria-checked={ariaProps['aria-checked']}
123
- data-value={ariaProps['data-value']}
124
- aria-pressed={ariaProps.role ? undefined : effectiveActive || effectivePressed || undefined}
125
- aria-disabled={effectiveDisabled}
126
- aria-busy={loading}
127
- {...restProps}
136
+ role={ariaProps.role ?? restProps.role}
137
+ aria-checked={ariaProps['aria-checked'] ?? restProps['aria-checked']}
138
+ data-value={ariaProps['data-value'] ?? restProps['data-value']}
139
+ aria-pressed={ariaProps.role
140
+ ? undefined
141
+ : effectiveActive || effectivePressed || restProps['aria-pressed']}
142
+ aria-disabled={effectiveDisabled || (restProps['aria-disabled'] ?? false)}
143
+ aria-busy={loading || (restProps['aria-busy'] ?? false)}
128
144
  >
129
145
  <span
130
146
  class={unstyled
@@ -895,9 +895,17 @@
895
895
  {@render customOption(opt, selected)}
896
896
  {:else}
897
897
  <span class="flex-1 truncate">{opt.label}</span>
898
- {#if selected}
899
- <CheckMarkIcon class="text-primary h-4 w-4 shrink-0" />
900
- {/if}
898
+ <!--
899
+ Always rendered (reserved space) and faded in via opacity — parity
900
+ with Select's optionCheck mechanic, so selecting never shifts layout.
901
+ -->
902
+ <CheckMarkIcon
903
+ class={unstyled
904
+ ? (slotClasses?.optionCheck ?? '')
905
+ : styles.optionCheck({
906
+ class: [slotClasses?.optionCheck, selected ? 'opacity-100' : undefined]
907
+ })}
908
+ />
901
909
  {/if}
902
910
  </button>
903
911
  {/snippet}