@urbicon-ui/blocks 6.21.0 → 6.21.1

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 (95) hide show
  1. package/dist/components/Calendar/calendar.variants.d.ts +132 -419
  2. package/dist/components/CommandPalette/commandPalette.variants.d.ts +24 -51
  3. package/dist/components/CompositionBar/CompositionBar.svelte +6 -1
  4. package/dist/components/CompositionBar/composition-bar.variants.d.ts +23 -83
  5. package/dist/components/CompositionBar/composition-bar.variants.js +9 -3
  6. package/dist/components/EmptyState/emptyState.variants.d.ts +11 -27
  7. package/dist/components/FileUpload/fileUpload.variants.d.ts +24 -93
  8. package/dist/components/Guide/GuidePanel.svelte +38 -0
  9. package/dist/components/Guide/guide.variants.d.ts +69 -124
  10. package/dist/components/Guide/guide.variants.js +6 -1
  11. package/dist/components/Planner/planner.variants.d.ts +23 -94
  12. package/dist/components/Sankey/sankey.variants.d.ts +15 -48
  13. package/dist/components/SidebarLayout/sidebar-layout.variants.d.ts +10 -38
  14. package/dist/components/SidebarLayout/sidebar-layout.variants.js +12 -2
  15. package/dist/components/ThemeSwitcher/themeSwitcher.variants.d.ts +9 -36
  16. package/dist/i18n/index.d.ts +2 -372
  17. package/dist/internal/charts/variants.d.ts +18 -31
  18. package/dist/primitives/Accordion/Accordion.svelte +11 -0
  19. package/dist/primitives/Accordion/AccordionItem.svelte +9 -3
  20. package/dist/primitives/Accordion/accordion.variants.d.ts +12 -43
  21. package/dist/primitives/Accordion/accordion.variants.js +6 -2
  22. package/dist/primitives/Accordion/index.d.ts +12 -0
  23. package/dist/primitives/Alert/alert.variants.d.ts +21 -62
  24. package/dist/primitives/Avatar/avatar.variants.d.ts +18 -138
  25. package/dist/primitives/Badge/badge.variants.d.ts +19 -92
  26. package/dist/primitives/Badge/badge.variants.js +11 -4
  27. package/dist/primitives/Breadcrumb/breadcrumb.variants.d.ts +13 -40
  28. package/dist/primitives/Button/button.variants.d.ts +19 -98
  29. package/dist/primitives/Button/button.variants.js +13 -9
  30. package/dist/primitives/ButtonGroup/buttongroup.variants.d.ts +9 -29
  31. package/dist/primitives/ButtonGroup/buttongroup.variants.js +3 -1
  32. package/dist/primitives/Card/card.variants.d.ts +14 -81
  33. package/dist/primitives/Checkbox/checkbox.variants.d.ts +18 -77
  34. package/dist/primitives/Collapsible/Collapsible.svelte +10 -0
  35. package/dist/primitives/Collapsible/collapsible.variants.d.ts +11 -40
  36. package/dist/primitives/Collapsible/collapsible.variants.js +7 -2
  37. package/dist/primitives/Collapsible/index.d.ts +16 -0
  38. package/dist/primitives/Combobox/combobox.variants.d.ts +24 -78
  39. package/dist/primitives/Dialog/Dialog.svelte +21 -10
  40. package/dist/primitives/Dialog/dialog.variants.d.ts +15 -54
  41. package/dist/primitives/Drawer/Drawer.svelte +21 -10
  42. package/dist/primitives/Drawer/drawer.variants.d.ts +14 -49
  43. package/dist/primitives/Input/input.variants.d.ts +32 -139
  44. package/dist/primitives/Input/input.variants.js +12 -10
  45. package/dist/primitives/JourneyTimeline/journey-timeline.variants.d.ts +55 -197
  46. package/dist/primitives/JourneyTimeline/journey-timeline.variants.js +4 -1
  47. package/dist/primitives/Menu/menu.variants.d.ts +29 -93
  48. package/dist/primitives/Pagination/pagination.variants.d.ts +16 -54
  49. package/dist/primitives/Pagination/pagination.variants.js +16 -14
  50. package/dist/primitives/Popover/Popover.svelte +1 -1
  51. package/dist/primitives/Popover/popover.variants.d.ts +4 -2
  52. package/dist/primitives/Progress/progress.variants.d.ts +19 -83
  53. package/dist/primitives/Progress/progress.variants.js +2 -1
  54. package/dist/primitives/RadioGroup/radioGroup.variants.d.ts +28 -109
  55. package/dist/primitives/SegmentGroup/SegmentGroup.svelte +14 -6
  56. package/dist/primitives/SegmentGroup/segmentgroup.variants.d.ts +12 -53
  57. package/dist/primitives/SegmentGroup/segmentgroup.variants.js +10 -10
  58. package/dist/primitives/Select/select.variants.d.ts +45 -134
  59. package/dist/primitives/Select/select.variants.js +6 -4
  60. package/dist/primitives/Separator/separator.variants.d.ts +4 -2
  61. package/dist/primitives/Sidebar/Sidebar.svelte +10 -15
  62. package/dist/primitives/Sidebar/sidebar.variants.d.ts +11 -29
  63. package/dist/primitives/Skeleton/skeleton.variants.d.ts +9 -36
  64. package/dist/primitives/Slider/slider.variants.d.ts +37 -136
  65. package/dist/primitives/Slider/slider.variants.js +8 -5
  66. package/dist/primitives/Spinner/spinner.variants.d.ts +38 -135
  67. package/dist/primitives/Stepper/stepper.variants.d.ts +32 -130
  68. package/dist/primitives/Tab/Tab.svelte +14 -6
  69. package/dist/primitives/Tab/tab.variants.d.ts +17 -78
  70. package/dist/primitives/Textarea/textarea.variants.d.ts +27 -112
  71. package/dist/primitives/Textarea/textarea.variants.js +12 -10
  72. package/dist/primitives/Toast/Toaster.svelte +16 -3
  73. package/dist/primitives/Toast/index.d.ts +9 -0
  74. package/dist/primitives/Toast/toast.variants.d.ts +22 -78
  75. package/dist/primitives/Toggle/toggle.variants.d.ts +17 -71
  76. package/dist/primitives/Toolbar/toolbar.variants.d.ts +9 -60
  77. package/dist/primitives/Tooltip/Tooltip.svelte +11 -0
  78. package/dist/primitives/Tooltip/index.d.ts +14 -0
  79. package/dist/primitives/Tooltip/tooltip.variants.d.ts +11 -50
  80. package/dist/primitives/Tooltip/tooltip.variants.js +7 -1
  81. package/dist/style/foundation.css +4 -1
  82. package/dist/style/interaction.css +39 -11
  83. package/dist/style/semantic.css +2 -2
  84. package/dist/style/themes/index.css +1 -1
  85. package/dist/utils/index.d.ts +2 -1
  86. package/dist/utils/index.js +5 -0
  87. package/dist/utils/overlay.d.ts +33 -4
  88. package/dist/utils/overlay.js +61 -18
  89. package/dist/utils/roving.d.ts +15 -0
  90. package/dist/utils/roving.js +44 -0
  91. package/dist/utils/use-floating-panel.svelte.d.ts +4 -1
  92. package/dist/utils/use-floating-panel.svelte.js +23 -1
  93. package/dist/utils/variants.d.ts +60 -16
  94. package/dist/utils/variants.js +424 -123
  95. package/package.json +9 -6
@@ -1,77 +1,12 @@
1
1
  import { type SlotNames, type VariantProps } from '../../utils/variants.js';
2
- export declare const cardVariants: (props?: import("../../utils/variants.js").TVProps<{
3
- variant: {
4
- quiet: {
5
- base: string[];
6
- };
7
- outlined: {
8
- base: string[];
9
- };
10
- elevated: {
11
- base: string[];
12
- };
13
- floating: {
14
- base: string[];
15
- };
16
- };
17
- padding: {
18
- none: {
19
- base: string;
20
- header: string;
21
- content: string;
22
- footer: string;
23
- };
24
- sm: {
25
- base: string;
26
- header: string;
27
- content: string;
28
- footer: string;
29
- };
30
- md: {
31
- base: string;
32
- header: string;
33
- content: string;
34
- footer: string;
35
- };
36
- lg: {
37
- base: string;
38
- header: string;
39
- content: string;
40
- footer: string;
41
- };
42
- xl: {
43
- base: string;
44
- header: string;
45
- content: string;
46
- footer: string;
47
- };
48
- };
49
- dividers: {
50
- true: {
51
- header: string;
52
- footer: string;
53
- };
54
- };
55
- interactive: {
56
- true: {
57
- base: string;
58
- };
59
- };
60
- elementType: {
61
- button: {
62
- base: string;
63
- };
64
- a: {
65
- base: string;
66
- };
67
- div: {};
68
- };
69
- disabled: {
70
- true: {
71
- base: string;
72
- };
73
- };
74
- }> | undefined) => {
2
+ export declare const cardVariants: ((props?: {
3
+ variant?: "elevated" | "outlined" | "quiet" | "floating" | undefined;
4
+ padding?: "none" | "sm" | "md" | "lg" | "xl" | undefined;
5
+ dividers?: boolean | undefined;
6
+ interactive?: boolean | undefined;
7
+ elementType?: "button" | "div" | "a" | undefined;
8
+ disabled?: boolean | undefined;
9
+ } | undefined) => {
75
10
  base: (props?: ({
76
11
  variant?: "elevated" | "outlined" | "quiet" | "floating" | undefined;
77
12
  padding?: "none" | "sm" | "md" | "lg" | "xl" | undefined;
@@ -80,8 +15,7 @@ export declare const cardVariants: (props?: import("../../utils/variants.js").TV
80
15
  elementType?: "button" | "div" | "a" | undefined;
81
16
  disabled?: boolean | undefined;
82
17
  } & {
83
- class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
84
- className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
18
+ 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;
85
19
  }) | undefined) => string;
86
20
  header: (props?: ({
87
21
  variant?: "elevated" | "outlined" | "quiet" | "floating" | undefined;
@@ -91,8 +25,7 @@ export declare const cardVariants: (props?: import("../../utils/variants.js").TV
91
25
  elementType?: "button" | "div" | "a" | undefined;
92
26
  disabled?: boolean | undefined;
93
27
  } & {
94
- class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
95
- className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
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;
96
29
  }) | undefined) => string;
97
30
  content: (props?: ({
98
31
  variant?: "elevated" | "outlined" | "quiet" | "floating" | undefined;
@@ -102,8 +35,7 @@ export declare const cardVariants: (props?: import("../../utils/variants.js").TV
102
35
  elementType?: "button" | "div" | "a" | undefined;
103
36
  disabled?: boolean | undefined;
104
37
  } & {
105
- class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
106
- className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
38
+ 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;
107
39
  }) | undefined) => string;
108
40
  footer: (props?: ({
109
41
  variant?: "elevated" | "outlined" | "quiet" | "floating" | undefined;
@@ -113,9 +45,10 @@ export declare const cardVariants: (props?: import("../../utils/variants.js").TV
113
45
  elementType?: "button" | "div" | "a" | undefined;
114
46
  disabled?: boolean | undefined;
115
47
  } & {
116
- class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
117
- className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
48
+ 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;
118
49
  }) | undefined) => string;
50
+ }) & {
51
+ readonly config: import("../../utils/variants.js").TVConfig;
119
52
  };
120
53
  export type CardVariants = VariantProps<typeof cardVariants>;
121
54
  /** Slot names derived from the tv() config — single source of truth for slotClasses. */
@@ -1,69 +1,14 @@
1
1
  import { type SlotNames, type VariantProps } from '../../utils/variants.js';
2
- export declare const checkboxVariants: (props?: import("../../utils/variants.js").TVProps<{
3
- tier: {
4
- commit: {
5
- box: string;
6
- };
7
- modify: {
8
- box: string;
9
- };
10
- };
11
- size: {
12
- xs: {
13
- box: string;
14
- icon: string;
15
- label: string;
16
- };
17
- sm: {
18
- box: string;
19
- icon: string;
20
- label: string;
21
- };
22
- md: {
23
- box: string;
24
- icon: string;
25
- label: string;
26
- };
27
- lg: {
28
- box: string;
29
- icon: string;
30
- label: string;
31
- };
32
- };
33
- intent: {
34
- primary: {};
35
- secondary: {};
36
- success: {};
37
- warning: {};
38
- danger: {};
39
- neutral: {};
40
- };
41
- variant: {
42
- outlined: {};
43
- filled: {};
44
- ghost: {};
45
- };
46
- checked: {
47
- true: {
48
- icon: string;
49
- };
50
- };
51
- indeterminate: {
52
- true: {
53
- icon: string;
54
- };
55
- };
56
- disabled: {
57
- true: {
58
- control: string;
59
- };
60
- };
61
- error: {
62
- true: {
63
- message: string;
64
- };
65
- };
66
- }> | undefined) => {
2
+ export declare const checkboxVariants: ((props?: {
3
+ tier?: "commit" | "modify" | undefined;
4
+ size?: "sm" | "md" | "lg" | "xs" | undefined;
5
+ intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
6
+ variant?: "ghost" | "filled" | "outlined" | undefined;
7
+ checked?: boolean | undefined;
8
+ indeterminate?: boolean | undefined;
9
+ disabled?: boolean | undefined;
10
+ error?: boolean | undefined;
11
+ } | undefined) => {
67
12
  wrapper: (props?: ({
68
13
  tier?: "commit" | "modify" | undefined;
69
14
  size?: "sm" | "md" | "lg" | "xs" | undefined;
@@ -74,8 +19,7 @@ export declare const checkboxVariants: (props?: import("../../utils/variants.js"
74
19
  disabled?: boolean | undefined;
75
20
  error?: boolean | undefined;
76
21
  } & {
77
- class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
78
- className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
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;
79
23
  }) | undefined) => string;
80
24
  control: (props?: ({
81
25
  tier?: "commit" | "modify" | undefined;
@@ -87,8 +31,7 @@ export declare const checkboxVariants: (props?: import("../../utils/variants.js"
87
31
  disabled?: boolean | undefined;
88
32
  error?: boolean | undefined;
89
33
  } & {
90
- class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
91
- className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
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;
92
35
  }) | undefined) => string;
93
36
  box: (props?: ({
94
37
  tier?: "commit" | "modify" | undefined;
@@ -100,8 +43,7 @@ export declare const checkboxVariants: (props?: import("../../utils/variants.js"
100
43
  disabled?: boolean | undefined;
101
44
  error?: boolean | undefined;
102
45
  } & {
103
- class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
104
- className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
46
+ 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;
105
47
  }) | undefined) => string;
106
48
  icon: (props?: ({
107
49
  tier?: "commit" | "modify" | undefined;
@@ -113,8 +55,7 @@ export declare const checkboxVariants: (props?: import("../../utils/variants.js"
113
55
  disabled?: boolean | undefined;
114
56
  error?: boolean | undefined;
115
57
  } & {
116
- class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
117
- className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
58
+ 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;
118
59
  }) | undefined) => string;
119
60
  label: (props?: ({
120
61
  tier?: "commit" | "modify" | undefined;
@@ -126,8 +67,7 @@ export declare const checkboxVariants: (props?: import("../../utils/variants.js"
126
67
  disabled?: boolean | undefined;
127
68
  error?: boolean | undefined;
128
69
  } & {
129
- class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
130
- className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
70
+ 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;
131
71
  }) | undefined) => string;
132
72
  message: (props?: ({
133
73
  tier?: "commit" | "modify" | undefined;
@@ -139,9 +79,10 @@ export declare const checkboxVariants: (props?: import("../../utils/variants.js"
139
79
  disabled?: boolean | undefined;
140
80
  error?: boolean | undefined;
141
81
  } & {
142
- class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
143
- className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
82
+ 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;
144
83
  }) | undefined) => string;
84
+ }) & {
85
+ readonly config: import("../../utils/variants.js").TVConfig;
145
86
  };
146
87
  export type CheckboxVariants = VariantProps<typeof checkboxVariants>;
147
88
  /** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */
@@ -16,6 +16,8 @@
16
16
  trigger,
17
17
  variant = 'default',
18
18
  size = 'md',
19
+ transitionDuration,
20
+ transitionEasing,
19
21
  name,
20
22
  children,
21
23
  class: className = '',
@@ -28,6 +30,12 @@
28
30
  const blocksConfig = getBlocksConfig();
29
31
  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
30
32
 
33
+ // ACC-3: per-instance collapse motion. Set the shared collapse CSS variables inline only when
34
+ // a prop is provided, so the unset default keeps inheriting the reduced-motion-aware token.
35
+ const collapseDuration = $derived(
36
+ transitionDuration != null ? `${transitionDuration}ms` : undefined
37
+ );
38
+
31
39
  // Uncontrolled seed: capture only the initial `defaultOpen`; later changes
32
40
  // must not clobber user interaction.
33
41
  // svelte-ignore state_referenced_locally
@@ -63,6 +71,8 @@
63
71
  class={unstyled
64
72
  ? [slotClasses?.base, className].filter(Boolean).join(' ')
65
73
  : styles.base({ class: [slotClasses?.base, className] })}
74
+ style:--blocks-collapse-duration={collapseDuration}
75
+ style:--blocks-collapse-easing={transitionEasing}
66
76
  data-state={isOpen ? 'open' : 'closed'}
67
77
  {...restProps}
68
78
  >
@@ -1,69 +1,40 @@
1
1
  import { type SlotNames, type VariantProps } from '../../utils/variants.js';
2
- export declare const collapsibleVariants: (props?: import("../../utils/variants.js").TVProps<{
3
- variant: {
4
- default: {};
5
- card: {
6
- base: string;
7
- trigger: string;
8
- contentInner: string;
9
- };
10
- ghost: {
11
- trigger: string;
12
- };
13
- };
14
- size: {
15
- sm: {
16
- trigger: string;
17
- contentInner: string;
18
- chevron: string;
19
- };
20
- md: {
21
- trigger: string;
22
- contentInner: string;
23
- chevron: string;
24
- };
25
- lg: {
26
- trigger: string;
27
- contentInner: string;
28
- chevron: string;
29
- };
30
- };
31
- }> | undefined) => {
2
+ export declare const collapsibleVariants: ((props?: {
3
+ variant?: "default" | "ghost" | "card" | undefined;
4
+ size?: "sm" | "md" | "lg" | undefined;
5
+ } | undefined) => {
32
6
  base: (props?: ({
33
7
  variant?: "default" | "ghost" | "card" | undefined;
34
8
  size?: "sm" | "md" | "lg" | undefined;
35
9
  } & {
36
- class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
37
- className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
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;
38
11
  }) | undefined) => string;
39
12
  trigger: (props?: ({
40
13
  variant?: "default" | "ghost" | "card" | undefined;
41
14
  size?: "sm" | "md" | "lg" | undefined;
42
15
  } & {
43
- class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
44
- className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
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;
45
17
  }) | undefined) => string;
46
18
  chevron: (props?: ({
47
19
  variant?: "default" | "ghost" | "card" | undefined;
48
20
  size?: "sm" | "md" | "lg" | undefined;
49
21
  } & {
50
- class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
51
- className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
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;
52
23
  }) | undefined) => string;
53
24
  content: (props?: ({
54
25
  variant?: "default" | "ghost" | "card" | undefined;
55
26
  size?: "sm" | "md" | "lg" | undefined;
56
27
  } & {
57
- class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
58
- className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
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;
59
29
  }) | undefined) => string;
60
30
  contentInner: (props?: ({
61
31
  variant?: "default" | "ghost" | "card" | undefined;
62
32
  size?: "sm" | "md" | "lg" | undefined;
63
33
  } & {
64
- class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
65
- className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
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;
66
35
  }) | undefined) => string;
36
+ }) & {
37
+ readonly config: import("../../utils/variants.js").TVConfig;
67
38
  };
68
39
  export type CollapsibleVariants = VariantProps<typeof collapsibleVariants>;
69
40
  /** Slot names derived from the tv() config — single source of truth for slotClasses. */
@@ -12,11 +12,16 @@ export const collapsibleVariants = tv({
12
12
  ],
13
13
  chevron: [
14
14
  'shrink-0 text-text-tertiary',
15
- 'transition-transform duration-[var(--blocks-duration-normal)] ease-[var(--blocks-ease-smooth)]'
15
+ // Collapse tokens (ACC-3) so `transitionDuration`/`transitionEasing` can retune the spin
16
+ // in sync with the content. `motion-reduce` guards the inline-override path (an inline
17
+ // duration bypasses the token that reduced-motion collapses to 1ms).
18
+ 'transition-transform duration-[var(--blocks-collapse-duration)] ease-[var(--blocks-collapse-easing)]',
19
+ 'motion-reduce:duration-[1ms]'
16
20
  ],
17
21
  content: [
18
22
  'overflow-hidden',
19
- 'transition-[grid-template-rows] duration-[var(--blocks-duration-normal)] ease-[var(--blocks-ease-smooth)]'
23
+ 'transition-[grid-template-rows] duration-[var(--blocks-collapse-duration)] ease-[var(--blocks-collapse-easing)]',
24
+ 'motion-reduce:duration-[1ms]'
20
25
  ],
21
26
  contentInner: 'text-text-secondary'
22
27
  },
@@ -56,6 +56,22 @@ export interface CollapsibleProps extends CollapsibleVariants, Omit<HTMLAttribut
56
56
  children: Snippet;
57
57
  /** Base name for generating ARIA IDs. Defaults to auto-generated. */
58
58
  name?: string;
59
+ /**
60
+ * Override the expand/collapse animation duration in milliseconds. Defaults to the
61
+ * `--blocks-collapse-duration` token (the `normal` 250ms). Set globally via that CSS
62
+ * custom property or per-instance here. Respects `prefers-reduced-motion` (near-instant).
63
+ */
64
+ transitionDuration?: number;
65
+ /**
66
+ * Override the expand/collapse easing as a CSS `<easing-function>` — e.g. `'ease-in-out'`,
67
+ * `'cubic-bezier(0.4,0,0.2,1)'`, or a token such as `'var(--blocks-ease-springy)'`. Defaults
68
+ * to the `--blocks-collapse-easing` token.
69
+ *
70
+ * Note: unlike the overlay components (Dialog/Drawer), whose Svelte transitions take an easing
71
+ * **function** `(t: number) => number`, Collapsible animates via CSS — so its easing is a CSS
72
+ * string. Same intent, representation follows the transition mechanism.
73
+ */
74
+ transitionEasing?: string;
59
75
  /** Custom CSS class */
60
76
  class?: string;
61
77
  /** Remove default styles */