@urbicon-ui/blocks 6.19.3 → 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.
- package/dist/components/Calendar/Calendar.svelte +3 -0
- package/dist/components/Calendar/calendar.variants.d.ts +132 -419
- package/dist/components/CommandPalette/commandPalette.variants.d.ts +24 -51
- package/dist/components/CompositionBar/CompositionBar.svelte +6 -1
- package/dist/components/CompositionBar/composition-bar.variants.d.ts +23 -83
- package/dist/components/CompositionBar/composition-bar.variants.js +9 -3
- package/dist/components/EmptyState/emptyState.variants.d.ts +11 -27
- package/dist/components/FileUpload/fileUpload.variants.d.ts +24 -93
- package/dist/components/Guide/GuidePanel.svelte +38 -0
- package/dist/components/Guide/guide.variants.d.ts +69 -124
- package/dist/components/Guide/guide.variants.js +6 -1
- package/dist/components/Planner/planner.variants.d.ts +23 -94
- package/dist/components/Sankey/sankey.variants.d.ts +15 -48
- package/dist/components/SidebarLayout/sidebar-layout.variants.d.ts +10 -38
- package/dist/components/SidebarLayout/sidebar-layout.variants.js +12 -2
- package/dist/components/ThemeSwitcher/themeSwitcher.variants.d.ts +9 -36
- package/dist/i18n/index.d.ts +2 -372
- package/dist/icons/IconProvider.svelte +3 -0
- package/dist/internal/charts/variants.d.ts +18 -31
- package/dist/mint/styles.css +1 -1
- package/dist/primitives/Accordion/Accordion.svelte +14 -0
- package/dist/primitives/Accordion/AccordionItem.svelte +9 -3
- package/dist/primitives/Accordion/accordion.variants.d.ts +12 -43
- package/dist/primitives/Accordion/accordion.variants.js +6 -2
- package/dist/primitives/Accordion/index.d.ts +12 -0
- package/dist/primitives/Alert/alert.variants.d.ts +21 -62
- package/dist/primitives/Avatar/Avatar.svelte +74 -48
- package/dist/primitives/Avatar/avatar.variants.d.ts +34 -128
- package/dist/primitives/Avatar/avatar.variants.js +43 -18
- package/dist/primitives/Avatar/index.d.ts +6 -1
- package/dist/primitives/Badge/badge.variants.d.ts +19 -92
- package/dist/primitives/Badge/badge.variants.js +11 -4
- package/dist/primitives/Breadcrumb/breadcrumb.variants.d.ts +13 -40
- package/dist/primitives/Button/button.variants.d.ts +19 -98
- package/dist/primitives/Button/button.variants.js +13 -9
- package/dist/primitives/ButtonGroup/buttongroup.variants.d.ts +9 -29
- package/dist/primitives/ButtonGroup/buttongroup.variants.js +3 -1
- package/dist/primitives/Card/card.variants.d.ts +14 -81
- package/dist/primitives/Checkbox/checkbox.variants.d.ts +18 -77
- package/dist/primitives/Collapsible/Collapsible.svelte +13 -0
- package/dist/primitives/Collapsible/collapsible.variants.d.ts +11 -40
- package/dist/primitives/Collapsible/collapsible.variants.js +7 -2
- package/dist/primitives/Collapsible/index.d.ts +16 -0
- package/dist/primitives/Combobox/combobox.variants.d.ts +24 -78
- package/dist/primitives/ConfirmDialog/index.d.ts +12 -0
- package/dist/primitives/Dialog/Dialog.svelte +23 -10
- package/dist/primitives/Dialog/dialog.variants.d.ts +15 -54
- package/dist/primitives/Drawer/Drawer.svelte +24 -11
- package/dist/primitives/Drawer/drawer.variants.d.ts +14 -49
- package/dist/primitives/Input/input.variants.d.ts +32 -139
- package/dist/primitives/Input/input.variants.js +12 -10
- package/dist/primitives/JourneyTimeline/journey-timeline.variants.d.ts +55 -197
- package/dist/primitives/JourneyTimeline/journey-timeline.variants.js +4 -1
- package/dist/primitives/Menu/MenuSubmenu.svelte +1 -0
- package/dist/primitives/Menu/menu.variants.d.ts +29 -93
- package/dist/primitives/Pagination/pagination.variants.d.ts +16 -54
- package/dist/primitives/Pagination/pagination.variants.js +16 -14
- package/dist/primitives/Popover/Popover.svelte +1 -1
- package/dist/primitives/Popover/popover.variants.d.ts +4 -2
- package/dist/primitives/Progress/progress.variants.d.ts +19 -83
- package/dist/primitives/Progress/progress.variants.js +2 -1
- package/dist/primitives/RadioGroup/radioGroup.variants.d.ts +28 -109
- package/dist/primitives/SegmentGroup/SegmentGroup.svelte +14 -6
- package/dist/primitives/SegmentGroup/segmentgroup.variants.d.ts +12 -53
- package/dist/primitives/SegmentGroup/segmentgroup.variants.js +10 -10
- package/dist/primitives/Select/Select.svelte +1 -1
- package/dist/primitives/Select/select.variants.d.ts +45 -134
- package/dist/primitives/Select/select.variants.js +6 -4
- package/dist/primitives/Separator/separator.variants.d.ts +4 -2
- package/dist/primitives/Sidebar/Sidebar.svelte +10 -15
- package/dist/primitives/Sidebar/sidebar.variants.d.ts +11 -29
- package/dist/primitives/Skeleton/skeleton.variants.d.ts +9 -36
- package/dist/primitives/Slider/slider.variants.d.ts +37 -136
- package/dist/primitives/Slider/slider.variants.js +8 -5
- package/dist/primitives/Spinner/spinner.variants.d.ts +38 -135
- package/dist/primitives/Stepper/stepper.variants.d.ts +32 -130
- package/dist/primitives/Tab/Tab.svelte +17 -6
- package/dist/primitives/Tab/tab.variants.d.ts +17 -78
- package/dist/primitives/Textarea/textarea.variants.d.ts +27 -112
- package/dist/primitives/Textarea/textarea.variants.js +12 -10
- package/dist/primitives/Toast/Toaster.svelte +16 -3
- package/dist/primitives/Toast/index.d.ts +9 -0
- package/dist/primitives/Toast/toast.variants.d.ts +22 -78
- package/dist/primitives/Toggle/toggle.variants.d.ts +17 -71
- package/dist/primitives/Toolbar/toolbar.variants.d.ts +9 -60
- package/dist/primitives/Tooltip/Tooltip.svelte +11 -0
- package/dist/primitives/Tooltip/index.d.ts +14 -0
- package/dist/primitives/Tooltip/tooltip.variants.d.ts +11 -50
- package/dist/primitives/Tooltip/tooltip.variants.js +7 -1
- package/dist/style/foundation.css +4 -1
- package/dist/style/interaction.css +40 -12
- package/dist/style/semantic.css +2 -2
- package/dist/style/themes/index.css +1 -1
- package/dist/system/attachments/ContextIsolation.svelte +2 -0
- package/dist/utils/index.d.ts +2 -1
- package/dist/utils/index.js +5 -0
- package/dist/utils/overlay.d.ts +33 -4
- package/dist/utils/overlay.js +61 -18
- package/dist/utils/roving.d.ts +15 -0
- package/dist/utils/roving.js +44 -0
- package/dist/utils/use-floating-panel.svelte.d.ts +4 -1
- package/dist/utils/use-floating-panel.svelte.js +23 -1
- package/dist/utils/variants.d.ts +60 -16
- package/dist/utils/variants.js +424 -123
- package/package.json +9 -6
|
@@ -1,63 +1,13 @@
|
|
|
1
1
|
import { type SlotNames, type VariantProps } from '../../utils/variants.js';
|
|
2
|
-
export declare const toggleVariants: (props?:
|
|
3
|
-
tier
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
};
|
|
12
|
-
};
|
|
13
|
-
size: {
|
|
14
|
-
xs: {
|
|
15
|
-
track: string;
|
|
16
|
-
thumb: string;
|
|
17
|
-
label: string;
|
|
18
|
-
};
|
|
19
|
-
sm: {
|
|
20
|
-
track: string;
|
|
21
|
-
thumb: string;
|
|
22
|
-
label: string;
|
|
23
|
-
};
|
|
24
|
-
md: {
|
|
25
|
-
track: string;
|
|
26
|
-
thumb: string;
|
|
27
|
-
label: string;
|
|
28
|
-
};
|
|
29
|
-
lg: {
|
|
30
|
-
track: string;
|
|
31
|
-
thumb: string;
|
|
32
|
-
label: string;
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
intent: {
|
|
36
|
-
primary: {};
|
|
37
|
-
secondary: {};
|
|
38
|
-
success: {};
|
|
39
|
-
warning: {};
|
|
40
|
-
danger: {};
|
|
41
|
-
neutral: {};
|
|
42
|
-
};
|
|
43
|
-
appearance: {
|
|
44
|
-
default: {};
|
|
45
|
-
dot: {};
|
|
46
|
-
};
|
|
47
|
-
checked: {
|
|
48
|
-
true: {};
|
|
49
|
-
false: {};
|
|
50
|
-
};
|
|
51
|
-
disabled: {
|
|
52
|
-
true: {
|
|
53
|
-
control: string;
|
|
54
|
-
};
|
|
55
|
-
};
|
|
56
|
-
withBorder: {
|
|
57
|
-
true: {};
|
|
58
|
-
false: {};
|
|
59
|
-
};
|
|
60
|
-
}> | undefined) => {
|
|
2
|
+
export declare const toggleVariants: ((props?: {
|
|
3
|
+
tier?: "commit" | "modify" | undefined;
|
|
4
|
+
size?: "sm" | "md" | "lg" | "xs" | undefined;
|
|
5
|
+
intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
|
|
6
|
+
appearance?: "default" | "dot" | undefined;
|
|
7
|
+
checked?: boolean | undefined;
|
|
8
|
+
disabled?: boolean | undefined;
|
|
9
|
+
withBorder?: boolean | undefined;
|
|
10
|
+
} | undefined) => {
|
|
61
11
|
wrapper: (props?: ({
|
|
62
12
|
tier?: "commit" | "modify" | undefined;
|
|
63
13
|
size?: "sm" | "md" | "lg" | "xs" | undefined;
|
|
@@ -67,8 +17,7 @@ export declare const toggleVariants: (props?: import("../../utils/variants.js").
|
|
|
67
17
|
disabled?: boolean | undefined;
|
|
68
18
|
withBorder?: boolean | undefined;
|
|
69
19
|
} & {
|
|
70
|
-
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;
|
|
71
|
-
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;
|
|
20
|
+
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;
|
|
72
21
|
}) | undefined) => string;
|
|
73
22
|
control: (props?: ({
|
|
74
23
|
tier?: "commit" | "modify" | undefined;
|
|
@@ -79,8 +28,7 @@ export declare const toggleVariants: (props?: import("../../utils/variants.js").
|
|
|
79
28
|
disabled?: boolean | undefined;
|
|
80
29
|
withBorder?: boolean | undefined;
|
|
81
30
|
} & {
|
|
82
|
-
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;
|
|
83
|
-
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;
|
|
31
|
+
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;
|
|
84
32
|
}) | undefined) => string;
|
|
85
33
|
track: (props?: ({
|
|
86
34
|
tier?: "commit" | "modify" | undefined;
|
|
@@ -91,8 +39,7 @@ export declare const toggleVariants: (props?: import("../../utils/variants.js").
|
|
|
91
39
|
disabled?: boolean | undefined;
|
|
92
40
|
withBorder?: boolean | undefined;
|
|
93
41
|
} & {
|
|
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;
|
|
42
|
+
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
43
|
}) | undefined) => string;
|
|
97
44
|
thumb: (props?: ({
|
|
98
45
|
tier?: "commit" | "modify" | undefined;
|
|
@@ -103,8 +50,7 @@ export declare const toggleVariants: (props?: import("../../utils/variants.js").
|
|
|
103
50
|
disabled?: boolean | undefined;
|
|
104
51
|
withBorder?: boolean | undefined;
|
|
105
52
|
} & {
|
|
106
|
-
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;
|
|
107
|
-
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;
|
|
53
|
+
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;
|
|
108
54
|
}) | undefined) => string;
|
|
109
55
|
label: (props?: ({
|
|
110
56
|
tier?: "commit" | "modify" | undefined;
|
|
@@ -115,8 +61,7 @@ export declare const toggleVariants: (props?: import("../../utils/variants.js").
|
|
|
115
61
|
disabled?: boolean | undefined;
|
|
116
62
|
withBorder?: boolean | undefined;
|
|
117
63
|
} & {
|
|
118
|
-
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;
|
|
119
|
-
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;
|
|
64
|
+
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;
|
|
120
65
|
}) | undefined) => string;
|
|
121
66
|
message: (props?: ({
|
|
122
67
|
tier?: "commit" | "modify" | undefined;
|
|
@@ -127,9 +72,10 @@ export declare const toggleVariants: (props?: import("../../utils/variants.js").
|
|
|
127
72
|
disabled?: boolean | undefined;
|
|
128
73
|
withBorder?: boolean | undefined;
|
|
129
74
|
} & {
|
|
130
|
-
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;
|
|
131
|
-
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;
|
|
75
|
+
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;
|
|
132
76
|
}) | undefined) => string;
|
|
77
|
+
}) & {
|
|
78
|
+
readonly config: import("../../utils/variants.js").TVConfig;
|
|
133
79
|
};
|
|
134
80
|
export type ToggleVariants = VariantProps<typeof toggleVariants>;
|
|
135
81
|
/** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */
|
|
@@ -1,71 +1,20 @@
|
|
|
1
1
|
import { type SlotNames, type VariantProps } from '../../utils/variants.js';
|
|
2
|
-
export declare const toolbarVariants: (props?:
|
|
3
|
-
variant
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
base: string;
|
|
9
|
-
};
|
|
10
|
-
outlined: {
|
|
11
|
-
base: string;
|
|
12
|
-
};
|
|
13
|
-
ghost: {
|
|
14
|
-
base: string;
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
orientation: {
|
|
18
|
-
horizontal: {
|
|
19
|
-
base: string;
|
|
20
|
-
};
|
|
21
|
-
vertical: {
|
|
22
|
-
base: string;
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
|
-
gap: {
|
|
26
|
-
xs: {
|
|
27
|
-
base: string;
|
|
28
|
-
};
|
|
29
|
-
sm: {
|
|
30
|
-
base: string;
|
|
31
|
-
};
|
|
32
|
-
md: {
|
|
33
|
-
base: string;
|
|
34
|
-
};
|
|
35
|
-
lg: {
|
|
36
|
-
base: string;
|
|
37
|
-
};
|
|
38
|
-
xl: {
|
|
39
|
-
base: string;
|
|
40
|
-
};
|
|
41
|
-
};
|
|
42
|
-
padding: {
|
|
43
|
-
xs: {
|
|
44
|
-
base: string;
|
|
45
|
-
};
|
|
46
|
-
sm: {
|
|
47
|
-
base: string;
|
|
48
|
-
};
|
|
49
|
-
md: {
|
|
50
|
-
base: string;
|
|
51
|
-
};
|
|
52
|
-
lg: {
|
|
53
|
-
base: string;
|
|
54
|
-
};
|
|
55
|
-
xl: {
|
|
56
|
-
base: string;
|
|
57
|
-
};
|
|
58
|
-
};
|
|
59
|
-
}> | undefined) => {
|
|
2
|
+
export declare const toolbarVariants: ((props?: {
|
|
3
|
+
variant?: "ghost" | "elevated" | "outlined" | "quiet" | undefined;
|
|
4
|
+
orientation?: "horizontal" | "vertical" | undefined;
|
|
5
|
+
gap?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
|
|
6
|
+
padding?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
|
|
7
|
+
} | undefined) => {
|
|
60
8
|
base: (props?: ({
|
|
61
9
|
variant?: "ghost" | "elevated" | "outlined" | "quiet" | undefined;
|
|
62
10
|
orientation?: "horizontal" | "vertical" | undefined;
|
|
63
11
|
gap?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
|
|
64
12
|
padding?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
|
|
65
13
|
} & {
|
|
66
|
-
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;
|
|
67
|
-
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;
|
|
14
|
+
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;
|
|
68
15
|
}) | undefined) => string;
|
|
16
|
+
}) & {
|
|
17
|
+
readonly config: import("../../utils/variants.js").TVConfig;
|
|
69
18
|
};
|
|
70
19
|
export type ToolbarVariants = VariantProps<typeof toolbarVariants>;
|
|
71
20
|
/** Slot names derived from the tv() config — single source of truth for slotClasses. */
|
|
@@ -21,6 +21,8 @@
|
|
|
21
21
|
placement = 'top',
|
|
22
22
|
showDelay = 200,
|
|
23
23
|
hideDelay = 100,
|
|
24
|
+
transitionDuration,
|
|
25
|
+
transitionEasing,
|
|
24
26
|
disabled = false,
|
|
25
27
|
arrow = true,
|
|
26
28
|
onVisibleChange,
|
|
@@ -34,6 +36,13 @@
|
|
|
34
36
|
const blocksConfig = getBlocksConfig();
|
|
35
37
|
const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
|
|
36
38
|
|
|
39
|
+
// ACC-3 follow-up: per-instance fade motion. Set the shared tooltip CSS
|
|
40
|
+
// variables inline only when a prop is provided, so the unset default keeps
|
|
41
|
+
// inheriting the reduced-motion-aware token.
|
|
42
|
+
const tooltipDuration = $derived(
|
|
43
|
+
transitionDuration != null ? `${transitionDuration}ms` : undefined
|
|
44
|
+
);
|
|
45
|
+
|
|
37
46
|
let visible = $state(false);
|
|
38
47
|
let triggerElement = $state<HTMLElement>();
|
|
39
48
|
let tooltipElement = $state<HTMLElement>();
|
|
@@ -245,6 +254,8 @@
|
|
|
245
254
|
{...restProps}
|
|
246
255
|
popover={topLayer ? 'manual' : null}
|
|
247
256
|
style="position: fixed; margin: 0; inset: auto; overflow: visible;"
|
|
257
|
+
style:--blocks-tooltip-duration={tooltipDuration}
|
|
258
|
+
style:--blocks-tooltip-easing={transitionEasing}
|
|
248
259
|
role="tooltip"
|
|
249
260
|
id={tooltipId}
|
|
250
261
|
>
|
|
@@ -34,6 +34,20 @@ export interface TooltipProps extends TooltipVariants, Omit<HTMLAttributes<HTMLD
|
|
|
34
34
|
showDelay?: number;
|
|
35
35
|
/** Milliseconds before the tooltip disappears after leaving the trigger. @default 100 */
|
|
36
36
|
hideDelay?: number;
|
|
37
|
+
/**
|
|
38
|
+
* Override the fade duration in milliseconds. Distinct from `showDelay` /
|
|
39
|
+
* `hideDelay`, which time *when* the tooltip appears — this is how fast the
|
|
40
|
+
* opacity fade itself runs. Defaults to the tooltip token
|
|
41
|
+
* `--blocks-tooltip-duration` (fast, 150ms). Respects `prefers-reduced-motion`.
|
|
42
|
+
*/
|
|
43
|
+
transitionDuration?: number;
|
|
44
|
+
/**
|
|
45
|
+
* Override the fade easing as a CSS `<easing-function>` (e.g. `'linear'`,
|
|
46
|
+
* `'ease-out'`, `'cubic-bezier(0.4,0,0.2,1)'`). Defaults to the tooltip token
|
|
47
|
+
* `--blocks-tooltip-easing`. A CSS string, not a JS easing fn, because the
|
|
48
|
+
* tooltip fade is a pure CSS transition.
|
|
49
|
+
*/
|
|
50
|
+
transitionEasing?: string;
|
|
37
51
|
/** Whether to show a directional arrow pointing at the trigger. @default true */
|
|
38
52
|
arrow?: boolean;
|
|
39
53
|
/** Prevent the tooltip from appearing regardless of hover/focus. @default false */
|
|
@@ -1,64 +1,25 @@
|
|
|
1
1
|
import { type SlotNames, type VariantProps } from '../../utils/variants.js';
|
|
2
|
-
export declare const tooltipVariants: (props?:
|
|
3
|
-
visible
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
false: {
|
|
8
|
-
base: string;
|
|
9
|
-
};
|
|
10
|
-
};
|
|
11
|
-
intent: {
|
|
12
|
-
primary: {
|
|
13
|
-
base: string;
|
|
14
|
-
};
|
|
15
|
-
secondary: {
|
|
16
|
-
base: string;
|
|
17
|
-
};
|
|
18
|
-
info: {
|
|
19
|
-
base: string;
|
|
20
|
-
};
|
|
21
|
-
success: {
|
|
22
|
-
base: string;
|
|
23
|
-
};
|
|
24
|
-
warning: {
|
|
25
|
-
base: string;
|
|
26
|
-
};
|
|
27
|
-
danger: {
|
|
28
|
-
base: string;
|
|
29
|
-
};
|
|
30
|
-
neutral: {
|
|
31
|
-
base: string;
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
|
-
size: {
|
|
35
|
-
sm: {
|
|
36
|
-
base: string;
|
|
37
|
-
};
|
|
38
|
-
md: {
|
|
39
|
-
base: string;
|
|
40
|
-
};
|
|
41
|
-
lg: {
|
|
42
|
-
base: string;
|
|
43
|
-
};
|
|
44
|
-
};
|
|
45
|
-
}> | undefined) => {
|
|
2
|
+
export declare const tooltipVariants: ((props?: {
|
|
3
|
+
visible?: boolean | undefined;
|
|
4
|
+
intent?: "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
|
|
5
|
+
size?: "sm" | "md" | "lg" | undefined;
|
|
6
|
+
} | undefined) => {
|
|
46
7
|
base: (props?: ({
|
|
47
8
|
visible?: boolean | undefined;
|
|
48
|
-
intent?: "
|
|
9
|
+
intent?: "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
|
|
49
10
|
size?: "sm" | "md" | "lg" | undefined;
|
|
50
11
|
} & {
|
|
51
|
-
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;
|
|
52
|
-
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;
|
|
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;
|
|
53
13
|
}) | undefined) => string;
|
|
54
14
|
arrow: (props?: ({
|
|
55
15
|
visible?: boolean | undefined;
|
|
56
|
-
intent?: "
|
|
16
|
+
intent?: "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
|
|
57
17
|
size?: "sm" | "md" | "lg" | undefined;
|
|
58
18
|
} & {
|
|
59
|
-
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;
|
|
60
|
-
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;
|
|
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;
|
|
61
20
|
}) | undefined) => string;
|
|
21
|
+
}) & {
|
|
22
|
+
readonly config: import("../../utils/variants.js").TVConfig;
|
|
62
23
|
};
|
|
63
24
|
export type TooltipVariants = Omit<VariantProps<typeof tooltipVariants>, 'visible'>;
|
|
64
25
|
/** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */
|
|
@@ -21,7 +21,13 @@ export const tooltipVariants = tv({
|
|
|
21
21
|
'z-[var(--z-tooltip)] overflow-visible',
|
|
22
22
|
'font-medium text-center whitespace-normal max-w-xs',
|
|
23
23
|
'rounded-contain pointer-events-none',
|
|
24
|
-
|
|
24
|
+
// Tooltip fade tokens (ACC-3 follow-up) so `transitionDuration`/
|
|
25
|
+
// `transitionEasing` can retune the opacity fade per instance. `motion-reduce`
|
|
26
|
+
// guards the inline-override path (an inline duration bypasses the token that
|
|
27
|
+
// reduced-motion collapses to 1ms). The default easing token resolves to
|
|
28
|
+
// Tailwind's implicit transition curve, so the resting fade is unchanged.
|
|
29
|
+
'transition-opacity duration-[var(--blocks-tooltip-duration)] ease-[var(--blocks-tooltip-easing)]',
|
|
30
|
+
'motion-reduce:duration-[1ms]',
|
|
25
31
|
'bg-surface-inverted text-text-inverted'
|
|
26
32
|
],
|
|
27
33
|
arrow: ['absolute w-2 h-2', 'bg-inherit transform rotate-45']
|
|
@@ -163,8 +163,11 @@
|
|
|
163
163
|
--z-auto: auto;
|
|
164
164
|
--z-base: 0;
|
|
165
165
|
--z-docked: 10;
|
|
166
|
-
--z-dropdown: 9999;
|
|
167
166
|
--z-sticky: 1100;
|
|
167
|
+
/* Anchored dropdown panels (menus, listboxes) rendered in normal flow:
|
|
168
|
+
above sticky headers/toolbars (a table menu must clear its own sticky
|
|
169
|
+
header), below banner and every overlay/chrome layer that follows. */
|
|
170
|
+
--z-dropdown: 1150;
|
|
168
171
|
--z-banner: 1200;
|
|
169
172
|
--z-overlay: 1300;
|
|
170
173
|
--z-sidebar: 1350;
|
|
@@ -93,17 +93,19 @@
|
|
|
93
93
|
--blocks-stagger-cards: 150ms;
|
|
94
94
|
|
|
95
95
|
/* === OVERLAY ANIMATION TOKENS (XC-11) ===
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
96
|
+
Shared enter/exit motion for the panel overlays: Dialog, Drawer,
|
|
97
|
+
ConfirmDialog (via Dialog) and Toast. All four drive Svelte `fly`/`scale`
|
|
98
|
+
transitions, so they read these through the JS mirror in
|
|
99
|
+
`utils/overlay-tokens.ts` (`getOverlayMotion`) — Svelte transitions need
|
|
100
|
+
numeric input. Tooltip runs a deliberately faster CSS opacity fade off its
|
|
101
|
+
own `--blocks-tooltip-*` tokens below; Popover has no enter/exit motion yet
|
|
102
|
+
(ACC-3 follow-up).
|
|
103
|
+
|
|
104
|
+
Override globally with a `BlocksProvider` style block, or per instance via
|
|
105
|
+
the component's `transitionDuration` / `transitionEasing` props.
|
|
106
|
+
`prefers-reduced-motion` below collapses both enter and exit to 1ms and
|
|
107
|
+
removes scale/fly distance — kept in one place so motion reduction is
|
|
108
|
+
consistent across every overlay. */
|
|
107
109
|
--blocks-overlay-enter-duration: 200ms;
|
|
108
110
|
--blocks-overlay-exit-duration: 180ms;
|
|
109
111
|
--blocks-overlay-backdrop-enter-duration: 200ms;
|
|
@@ -112,6 +114,32 @@
|
|
|
112
114
|
--blocks-overlay-panel-scale-start: 0.96;
|
|
113
115
|
--blocks-overlay-panel-fly-distance: 320px;
|
|
114
116
|
--blocks-overlay-backdrop-blur: 4px;
|
|
117
|
+
|
|
118
|
+
/* === TOOLTIP FADE TOKENS (ACC-3 follow-up) ===
|
|
119
|
+
The CSS opacity fade shared by the hover/focus tooltip. Deliberately faster
|
|
120
|
+
than the panel overlays above — a hint should feel instant, not staged — so
|
|
121
|
+
it defaults to the `fast` duration (150ms) + the `confident` easing. That
|
|
122
|
+
easing token is `cubic-bezier(0.4,0,0.2,1)` — exactly Tailwind's implicit
|
|
123
|
+
transition curve, which the fade used before it carried an explicit `ease-*`
|
|
124
|
+
class — so the resting fade is unchanged. Defaulting the duration through
|
|
125
|
+
`--blocks-duration-fast` means `prefers-reduced-motion` below collapses it
|
|
126
|
+
to 1ms for free. Override globally here, or per instance via Tooltip's
|
|
127
|
+
`transitionDuration` / `transitionEasing` props (which set these inline +
|
|
128
|
+
carry a `motion-reduce` guard, since an inline duration can't see the media
|
|
129
|
+
query). */
|
|
130
|
+
--blocks-tooltip-duration: var(--blocks-duration-fast);
|
|
131
|
+
--blocks-tooltip-easing: var(--blocks-ease-confident);
|
|
132
|
+
|
|
133
|
+
/* === COLLAPSE ANIMATION TOKENS (ACC-3) ===
|
|
134
|
+
The CSS-driven grid-template-rows collapse shared by Accordion +
|
|
135
|
+
Collapsible (and their chevron spin). Default to the normal/smooth
|
|
136
|
+
tokens — so `prefers-reduced-motion` below collapses them to 1ms via
|
|
137
|
+
the inherited `--blocks-duration-normal`. Override globally here, or per
|
|
138
|
+
instance via the component's `transitionDuration` / `transitionEasing`
|
|
139
|
+
props (which set these variables inline + carry a `motion-reduce` guard,
|
|
140
|
+
since an inline duration can't see the media query). */
|
|
141
|
+
--blocks-collapse-duration: var(--blocks-duration-normal);
|
|
142
|
+
--blocks-collapse-easing: var(--blocks-ease-smooth);
|
|
115
143
|
}
|
|
116
144
|
|
|
117
145
|
/* ===== TOUCH DEVICE ADAPTATIONS ===== */
|
|
@@ -157,7 +185,7 @@
|
|
|
157
185
|
}
|
|
158
186
|
|
|
159
187
|
/* ===== HIGH CONTRAST MODE ===== */
|
|
160
|
-
@media (prefers-contrast:
|
|
188
|
+
@media (prefers-contrast: more) {
|
|
161
189
|
:root {
|
|
162
190
|
/* Increase contrast ratios — overrides the semantic tokens that
|
|
163
191
|
components actually consume. */
|
package/dist/style/semantic.css
CHANGED
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
|
|
85
85
|
`--neutral-chrome-hue` defaults to 240 (:root, below), so the library
|
|
86
86
|
default reads as a cool grey matching its cool chassis. Each theme
|
|
87
|
-
overrides it to its accent temperature;
|
|
87
|
+
overrides it to its accent temperature; rooms-docs.css re-pins the neutral
|
|
88
88
|
intent to the warm ramp directly. Uses the same relative-color syntax
|
|
89
89
|
already relied on by `--color-interactive-*` below. */
|
|
90
90
|
--color-neutral: light-dark(
|
|
@@ -232,7 +232,7 @@
|
|
|
232
232
|
The neutral intent (above) keeps the warm-neutral ramp's lightness but
|
|
233
233
|
takes its hue from here. Default 240 = cool grey, matching the default
|
|
234
234
|
cool chassis. Each theme overrides this to its accent temperature;
|
|
235
|
-
|
|
235
|
+
rooms-docs.css re-pins the neutral intent to the warm ramp instead. */
|
|
236
236
|
--neutral-chrome-hue: 240;
|
|
237
237
|
}
|
|
238
238
|
|
|
@@ -45,6 +45,6 @@
|
|
|
45
45
|
* overrides these ramps. Use the Theme Builder at /customization/theme-builder
|
|
46
46
|
* in the docs app to generate matched OKLCH palettes (accent + chassis)
|
|
47
47
|
* interactively. To art-direct further (re-tuned intents, custom surface
|
|
48
|
-
* stops, warm shadow tint), see apps/docs/src/lib/style/
|
|
48
|
+
* stops, warm shadow tint), see apps/docs/src/lib/style/rooms-docs.css for a
|
|
49
49
|
* fully worked example.
|
|
50
50
|
*/
|
package/dist/utils/index.d.ts
CHANGED
|
@@ -9,8 +9,9 @@ export { createOptionalContext } from './optional-context.js';
|
|
|
9
9
|
export { overlayStack } from './overlay-stack.svelte.js';
|
|
10
10
|
export { type EasingFn, getOverlayMotion, OVERLAY_MOTION_DEFAULTS, type OverlayMotion, type OverlayMotionOverride } from './overlay-tokens.js';
|
|
11
11
|
export * from './persistent-state.svelte.js';
|
|
12
|
+
export { edgeEnabledIndex, nextEnabledIndex } from './roving.js';
|
|
12
13
|
export { getTierContext, type InteractiveTier, setTierContext, type TierContext } from './tier-context.js';
|
|
13
14
|
export * from './types.js';
|
|
14
15
|
export { type FloatingPanelOptions, type FloatingPanelState, floatingPanelHidden, useFloatingPanel } from './use-floating-panel.svelte.js';
|
|
15
16
|
export { computeFormFieldAria, type UseFormFieldInputs, type UseFormFieldReturn, useFormField } from './use-form-field.svelte.js';
|
|
16
|
-
export { cx, type TVProps, tv, type VariantProps } from './variants.js';
|
|
17
|
+
export { cx, type SlotNames, type TVConfig, type TVProps, tv, type VariantProps } from './variants.js';
|
package/dist/utils/index.js
CHANGED
|
@@ -9,8 +9,13 @@ export { createOptionalContext } from './optional-context.js';
|
|
|
9
9
|
export { overlayStack } from './overlay-stack.svelte.js';
|
|
10
10
|
export { getOverlayMotion, OVERLAY_MOTION_DEFAULTS } from './overlay-tokens.js';
|
|
11
11
|
export * from './persistent-state.svelte.js';
|
|
12
|
+
export { edgeEnabledIndex, nextEnabledIndex } from './roving.js';
|
|
12
13
|
export { getTierContext, setTierContext } from './tier-context.js';
|
|
13
14
|
export * from './types.js';
|
|
14
15
|
export { floatingPanelHidden, useFloatingPanel } from './use-floating-panel.svelte.js';
|
|
15
16
|
export { computeFormFieldAria, useFormField } from './use-form-field.svelte.js';
|
|
17
|
+
// TVConfig/SlotNames must be reachable from the package root: without them a
|
|
18
|
+
// consuming package's `tv()` result is not *nameable* during its declaration
|
|
19
|
+
// emit (TS2883) and svelte-package silently drops that file's .d.ts — every
|
|
20
|
+
// `*Props extends …VariantProps` consumer then loses all variant props.
|
|
16
21
|
export { cx, tv } from './variants.js';
|
package/dist/utils/overlay.d.ts
CHANGED
|
@@ -1,11 +1,40 @@
|
|
|
1
1
|
export declare const FOCUSABLE_SELECTOR: string;
|
|
2
2
|
export declare function getFocusableElements(container: HTMLElement | undefined): HTMLElement[];
|
|
3
3
|
export declare function trapFocus(event: KeyboardEvent, container: HTMLElement | undefined): void;
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
/**
|
|
5
|
+
* Acquire a shared body-scroll lock; returns the matching release function.
|
|
6
|
+
*
|
|
7
|
+
* The count is module-global — the body stays `overflow: hidden` while at
|
|
8
|
+
* least one overlay (Dialog, Drawer, mobile Sidebar) holds a lock. Ownership
|
|
9
|
+
* is per-acquisition: only the returned release can decrement this holder's
|
|
10
|
+
* share, and it is idempotent, so calling it from multiple teardown paths
|
|
11
|
+
* (outro end + onDestroy safety net) releases exactly once and can never free
|
|
12
|
+
* a lock held by another overlay instance. There is deliberately no standalone
|
|
13
|
+
* `unlock` export — an unpaired decrement is exactly the bug this design
|
|
14
|
+
* removes.
|
|
15
|
+
*/
|
|
16
|
+
export declare function lockBodyScroll(): () => void;
|
|
6
17
|
export declare function focusFirstElement(container: HTMLElement | undefined): void;
|
|
7
|
-
|
|
8
|
-
|
|
18
|
+
/**
|
|
19
|
+
* Promote a `<dialog>` to the top layer and move focus into its panel.
|
|
20
|
+
*
|
|
21
|
+
* **Precondition: `dialogEl` must already be bound.** Call this only once the
|
|
22
|
+
* `bind:this` target exists — e.g. from `tick().then(...)` in the opener effect,
|
|
23
|
+
* after the `{#if isVisible}` block has rendered. An earlier version deferred the
|
|
24
|
+
* `showModal()` call with its own `tick()` in the hope of waiting for the bind,
|
|
25
|
+
* but the ref is captured by value: if the caller passes an as-yet-unbound
|
|
26
|
+
* `dialogEl`, the `tick()` still runs `undefined?.showModal()` — a silent no-op
|
|
27
|
+
* that left Dialog/Drawer never actually modal. Sequencing is the caller's job;
|
|
28
|
+
* the top-layer promotion here is synchronous (only the focus move inside
|
|
29
|
+
* `focusFirstElement` defers by a tick).
|
|
30
|
+
*
|
|
31
|
+
* Acquires a body-scroll lock and returns its release function — the caller
|
|
32
|
+
* owns the lock and must call the release on every teardown path (outro end
|
|
33
|
+
* and destroy; it is idempotent, so overlapping paths are safe). Pass it back
|
|
34
|
+
* through {@link closeDialogModal} on the regular close path.
|
|
35
|
+
*/
|
|
36
|
+
export declare function showDialogModal(dialogEl: HTMLDialogElement | undefined, panelEl: HTMLElement | undefined): () => void;
|
|
37
|
+
export declare function closeDialogModal(dialogEl: HTMLDialogElement | undefined, previouslyFocused: HTMLElement | null, releaseScrollLock?: () => void): void;
|
|
9
38
|
/**
|
|
10
39
|
* True when `el` is a descendant of an OPEN *modal* `<dialog>` — one opened via
|
|
11
40
|
* `showModal()`, which matches `:modal` and occupies the browser top layer.
|