@sewadah/selaras 0.6.0 → 0.7.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/agent/catalog.json +1 -1
- package/dist/module.json +1 -1
- package/dist/runtime/components/NavigationMenu.d.vue.ts +7 -1
- package/dist/runtime/components/NavigationMenu.vue +19 -8
- package/dist/runtime/components/NavigationMenu.vue.d.ts +7 -1
- package/dist/runtime/components/NavigationMenuAccordionItem.vue +2 -2
- package/dist/runtime/components/NavigationMenuFlyoutList.vue +2 -2
- package/dist/runtime/components/NavigationMenuFlyoutTrigger.vue +1 -1
- package/dist/runtime/components/ProsePre.d.vue.ts +2 -2
- package/dist/runtime/components/ProsePre.vue +13 -6
- package/dist/runtime/components/ProsePre.vue.d.ts +2 -2
- package/dist/runtime/components/SplitterPanel.vue +29 -3
- package/dist/runtime/components/Stepper.d.vue.ts +5 -0
- package/dist/runtime/components/Stepper.vue +12 -0
- package/dist/runtime/components/Stepper.vue.d.ts +5 -0
- package/dist/runtime/components/Table.vue +6 -1
- package/dist/runtime/internal/stepper-root-element.d.ts +5 -0
- package/dist/runtime/internal/stepper-root-element.js +8 -0
- package/dist/runtime/prose.css +1 -1
- package/dist/runtime/structural.css +1 -1
- package/dist/runtime/theme/navigation-menu.d.ts +18 -0
- package/dist/runtime/theme/navigation-menu.js +21 -28
- package/dist/runtime/theme/prose.d.ts +3 -0
- package/dist/runtime/theme/prose.js +7 -6
- package/dist/runtime/theme/stepper.d.ts +3 -0
- package/dist/runtime/theme/stepper.js +1 -0
- package/dist/runtime/theme/table.d.ts +6 -3
- package/dist/runtime/theme/table.js +5 -3
- package/dist/runtime/theme-config.d.ts +1 -1
- package/dist/runtime/types/index.d.ts +1 -1
- package/dist/runtime/utils/file-icons.js +1 -0
- package/dist/runtime/utils/messages.d.ts +4 -0
- package/dist/runtime/utils/messages.js +4 -0
- package/dist/runtime/utils/navigation-menu.d.ts +10 -0
- package/dist/runtime/utils/navigation-menu.js +25 -0
- package/package.json +3 -3
package/dist/module.json
CHANGED
|
@@ -1,18 +1,24 @@
|
|
|
1
1
|
import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
|
|
2
2
|
import type { ColorRole } from '../utils/color-registry.js';
|
|
3
|
-
import type { NavigationMenuItem, NavigationMenuPopover } from '../utils/navigation-menu.js';
|
|
3
|
+
import type { NavigationMenuItem, NavigationMenuPopover, NavigationMenuPositioning } from '../utils/navigation-menu.js';
|
|
4
4
|
import type { UiProp } from '../utils/ui.js';
|
|
5
5
|
import type { TooltipProps } from './Tooltip.vue.js';
|
|
6
6
|
export interface NavigationMenuProps {
|
|
7
7
|
items: NavigationMenuItem[];
|
|
8
8
|
/** Horizontal uses Reka's real shared-viewport flyout for a single level of dropdown children. Vertical falls back to a recursive accordion (see NavigationMenuAccordionItem.vue) for arbitrary depth - Reka's own NavigationMenuContent isn't built for deep nested trees. */
|
|
9
9
|
orientation?: 'horizontal' | 'vertical';
|
|
10
|
+
/** Dropdown layout for horizontal navigation. @default 'vertical' */
|
|
11
|
+
contentOrientation?: 'horizontal' | 'vertical';
|
|
12
|
+
/** Alignment to the active trigger when contentOrientation is vertical. @default { align: 'center' } */
|
|
13
|
+
positioning?: NavigationMenuPositioning;
|
|
10
14
|
color?: ColorRole;
|
|
11
15
|
variant?: 'pill' | 'link';
|
|
12
16
|
/** Draws a bar/underline next to the active item, in addition to its own color styling. */
|
|
13
17
|
highlight?: boolean;
|
|
14
18
|
/** Icon-only rail mode (vertical only) - labels stay in the DOM for assistive tech (`sr-only`, not removed) but visually collapse to just each item's own leading icon. A parent with children renders as a themed Popover trigger instead of an expandable accordion row - no room for a nested list in an icon rail, so its children surface in a flyout next to the icon instead (the common "collapsed sidebar" pattern - VSCode's activity bar, Linear, Notion). */
|
|
15
19
|
collapsed?: boolean;
|
|
20
|
+
/** Presentation of section headings in a collapsed vertical rail. @default 'separator' */
|
|
21
|
+
collapsedGroups?: 'separator' | 'spacing' | 'none';
|
|
16
22
|
/** Labels for collapsed vertical leaf items. An object customizes Tooltip props. @default false */
|
|
17
23
|
tooltip?: boolean | TooltipProps;
|
|
18
24
|
/** Presentation of collapsed child flyouts; item settings override these defaults. */
|
|
@@ -17,7 +17,7 @@ import { vHotkey } from "../directives/hotkey";
|
|
|
17
17
|
import NavigationMenuTooltip from "../internal/NavigationMenuTooltip.vue";
|
|
18
18
|
import ShortcutHint from "../internal/ShortcutHint.vue";
|
|
19
19
|
import { navigationMenuTheme } from "../theme/navigation-menu";
|
|
20
|
-
import { isNavigationMenuItemActive, navigationMenuHotkey } from "../utils/navigation-menu";
|
|
20
|
+
import { collapsedNavigationMenuEntries, isNavigationMenuItemActive, navigationMenuHotkey } from "../utils/navigation-menu";
|
|
21
21
|
import { resolveRegisteredColorRole } from "../utils/registered-colors";
|
|
22
22
|
import { resolveSlot, useComponentTheme } from "../utils/ui";
|
|
23
23
|
import Icon from "./Icon.vue";
|
|
@@ -26,10 +26,13 @@ import NavigationMenuFlyoutTrigger from "./NavigationMenuFlyoutTrigger.vue";
|
|
|
26
26
|
const props = defineProps({
|
|
27
27
|
items: { type: Array, required: true },
|
|
28
28
|
orientation: { type: String, required: false, default: "horizontal" },
|
|
29
|
+
contentOrientation: { type: String, required: false, default: "vertical" },
|
|
30
|
+
positioning: { type: Object, required: false },
|
|
29
31
|
color: { type: null, required: false },
|
|
30
32
|
variant: { type: String, required: false, default: "pill" },
|
|
31
33
|
highlight: { type: Boolean, required: false },
|
|
32
34
|
collapsed: { type: Boolean, required: false },
|
|
35
|
+
collapsedGroups: { type: String, required: false, default: "separator" },
|
|
33
36
|
tooltip: { type: [Boolean, Object], required: false },
|
|
34
37
|
popover: { type: Object, required: false },
|
|
35
38
|
ui: { type: Object, required: false }
|
|
@@ -38,6 +41,13 @@ const direction = useDirection();
|
|
|
38
41
|
const route = useRoute();
|
|
39
42
|
const icons = useIcons();
|
|
40
43
|
const slots = useSlots();
|
|
44
|
+
const collapsedVertical = computed(() => props.orientation === "vertical" && props.collapsed);
|
|
45
|
+
const effectiveContentOrientation = computed(() => props.orientation === "horizontal" ? props.contentOrientation : "horizontal");
|
|
46
|
+
const viewportAlign = computed(() => {
|
|
47
|
+
const align = props.positioning?.align ?? "center";
|
|
48
|
+
return direction.value === "rtl" && align !== "center" ? align === "start" ? "end" : "start" : align;
|
|
49
|
+
});
|
|
50
|
+
const entries = computed(() => collapsedVertical.value ? collapsedNavigationMenuEntries(props.items, props.collapsedGroups) : props.items.map((item) => ({ item, boundary: false })));
|
|
41
51
|
function slotName(item, suffix) {
|
|
42
52
|
const named = item.slot ? `${item.slot}${suffix}` : void 0;
|
|
43
53
|
if (named && slots[named])
|
|
@@ -46,7 +56,7 @@ function slotName(item, suffix) {
|
|
|
46
56
|
}
|
|
47
57
|
const theme = useComponentTheme("navigationMenu", navigationMenuTheme);
|
|
48
58
|
const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
|
|
49
|
-
const ui = computed(() => theme.value({ orientation: props.orientation, color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: props.collapsed }));
|
|
59
|
+
const ui = computed(() => theme.value({ orientation: props.orientation, contentOrientation: effectiveContentOrientation.value, color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: props.collapsed }));
|
|
50
60
|
const rootProps = computed(() => resolveSlot(ui.value.root, props.ui?.root));
|
|
51
61
|
const listProps = computed(() => resolveSlot(ui.value.list, props.ui?.list));
|
|
52
62
|
function tooltipProps(item) {
|
|
@@ -65,10 +75,10 @@ function isActive(item) {
|
|
|
65
75
|
return isNavigationMenuItemActive(item, route.path);
|
|
66
76
|
}
|
|
67
77
|
function linkProps(item) {
|
|
68
|
-
return resolveSlot(theme.value({ orientation: props.orientation, color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: props.collapsed, active: isActive(item), disabled: item.disabled }).link, props.ui?.link);
|
|
78
|
+
return resolveSlot(theme.value({ orientation: props.orientation, contentOrientation: effectiveContentOrientation.value, color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: props.collapsed, active: isActive(item), disabled: item.disabled }).link, props.ui?.link);
|
|
69
79
|
}
|
|
70
80
|
function childLinkProps(item) {
|
|
71
|
-
return resolveSlot(theme.value({ orientation: props.orientation, color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: props.collapsed, active: isActive(item), disabled: item.disabled }).childLink, props.ui?.childLink);
|
|
81
|
+
return resolveSlot(theme.value({ orientation: props.orientation, contentOrientation: effectiveContentOrientation.value, color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: props.collapsed, active: isActive(item), disabled: item.disabled }).childLink, props.ui?.childLink);
|
|
72
82
|
}
|
|
73
83
|
const openFlyoutLabel = ref(null);
|
|
74
84
|
function onFlyoutOpenChange(item, value) {
|
|
@@ -93,9 +103,10 @@ function onSelect(item, event) {
|
|
|
93
103
|
<NavigationMenuRoot :orientation="orientation" :data-selaras-color="effectiveColor" v-bind="rootProps">
|
|
94
104
|
<slot name="list-leading" />
|
|
95
105
|
<NavigationMenuList v-bind="listProps">
|
|
96
|
-
<template v-for="item in
|
|
97
|
-
<li v-if="
|
|
98
|
-
<li v-else-if="item.type === '
|
|
106
|
+
<template v-for="({ item, boundary }, index) in entries" :key="boundary ? `boundary-${index}` : `item-${item.label}`">
|
|
107
|
+
<li v-if="boundary === 'spacing'" aria-hidden="true" v-bind="resolveSlot(ui.groupSpacer, props.ui?.groupSpacer)" />
|
|
108
|
+
<li v-else-if="item.type === 'separator'" role="separator" v-bind="resolveSlot(ui.separator, props.ui?.separator)" />
|
|
109
|
+
<li v-else-if="item.type === 'label'" v-bind="collapsedVertical ? resolveSlot(ui.collapsedGroupLabel, props.ui?.collapsedGroupLabel) : resolveSlot(ui.groupLabel, props.ui?.groupLabel)">
|
|
99
110
|
<slot :name="slotName(item, '-label')" :item="item" :active="false">
|
|
100
111
|
{{ item.label }}
|
|
101
112
|
</slot>
|
|
@@ -188,6 +199,6 @@ function onSelect(item, event) {
|
|
|
188
199
|
</NavigationMenuList>
|
|
189
200
|
<slot name="list-trailing" />
|
|
190
201
|
|
|
191
|
-
<NavigationMenuViewport v-if="orientation === 'horizontal'" v-bind="resolveSlot(ui.viewport, props.ui?.viewport)" />
|
|
202
|
+
<NavigationMenuViewport v-if="orientation === 'horizontal'" :align="viewportAlign" v-bind="resolveSlot(ui.viewport, props.ui?.viewport)" />
|
|
192
203
|
</NavigationMenuRoot>
|
|
193
204
|
</template>
|
|
@@ -1,18 +1,24 @@
|
|
|
1
1
|
import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
|
|
2
2
|
import type { ColorRole } from '../utils/color-registry.js';
|
|
3
|
-
import type { NavigationMenuItem, NavigationMenuPopover } from '../utils/navigation-menu.js';
|
|
3
|
+
import type { NavigationMenuItem, NavigationMenuPopover, NavigationMenuPositioning } from '../utils/navigation-menu.js';
|
|
4
4
|
import type { UiProp } from '../utils/ui.js';
|
|
5
5
|
import type { TooltipProps } from './Tooltip.vue.js';
|
|
6
6
|
export interface NavigationMenuProps {
|
|
7
7
|
items: NavigationMenuItem[];
|
|
8
8
|
/** Horizontal uses Reka's real shared-viewport flyout for a single level of dropdown children. Vertical falls back to a recursive accordion (see NavigationMenuAccordionItem.vue) for arbitrary depth - Reka's own NavigationMenuContent isn't built for deep nested trees. */
|
|
9
9
|
orientation?: 'horizontal' | 'vertical';
|
|
10
|
+
/** Dropdown layout for horizontal navigation. @default 'vertical' */
|
|
11
|
+
contentOrientation?: 'horizontal' | 'vertical';
|
|
12
|
+
/** Alignment to the active trigger when contentOrientation is vertical. @default { align: 'center' } */
|
|
13
|
+
positioning?: NavigationMenuPositioning;
|
|
10
14
|
color?: ColorRole;
|
|
11
15
|
variant?: 'pill' | 'link';
|
|
12
16
|
/** Draws a bar/underline next to the active item, in addition to its own color styling. */
|
|
13
17
|
highlight?: boolean;
|
|
14
18
|
/** Icon-only rail mode (vertical only) - labels stay in the DOM for assistive tech (`sr-only`, not removed) but visually collapse to just each item's own leading icon. A parent with children renders as a themed Popover trigger instead of an expandable accordion row - no room for a nested list in an icon rail, so its children surface in a flyout next to the icon instead (the common "collapsed sidebar" pattern - VSCode's activity bar, Linear, Notion). */
|
|
15
19
|
collapsed?: boolean;
|
|
20
|
+
/** Presentation of section headings in a collapsed vertical rail. @default 'separator' */
|
|
21
|
+
collapsedGroups?: 'separator' | 'spacing' | 'none';
|
|
16
22
|
/** Labels for collapsed vertical leaf items. An object customizes Tooltip props. @default false */
|
|
17
23
|
tooltip?: boolean | TooltipProps;
|
|
18
24
|
/** Presentation of collapsed child flyouts; item settings override these defaults. */
|
|
@@ -29,7 +29,7 @@ function slotName(item, suffix) {
|
|
|
29
29
|
}
|
|
30
30
|
const theme = useComponentTheme("navigationMenu", navigationMenuTheme);
|
|
31
31
|
const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
|
|
32
|
-
const ui = computed(() => theme.value({ orientation: "vertical", color: effectiveColor.value, variant: props.variant, highlight: props.highlight }));
|
|
32
|
+
const ui = computed(() => theme.value({ orientation: "vertical", contentOrientation: "horizontal", color: effectiveColor.value, variant: props.variant, highlight: props.highlight }));
|
|
33
33
|
const accordionValue = useId();
|
|
34
34
|
const accordionItems = computed(() => [{ value: accordionValue, label: props.item.label, disabled: props.item.disabled }]);
|
|
35
35
|
const groupUi = computed(() => ({
|
|
@@ -43,7 +43,7 @@ function isActive(item) {
|
|
|
43
43
|
return isNavigationMenuItemActive(item, route.path);
|
|
44
44
|
}
|
|
45
45
|
function linkProps(child) {
|
|
46
|
-
return resolveSlot(theme.value({ orientation: "vertical", color: effectiveColor.value, variant: props.variant, highlight: props.highlight, active: isActive(child), disabled: child.disabled }).link, props.ui?.link);
|
|
46
|
+
return resolveSlot(theme.value({ orientation: "vertical", contentOrientation: "horizontal", color: effectiveColor.value, variant: props.variant, highlight: props.highlight, active: isActive(child), disabled: child.disabled }).link, props.ui?.link);
|
|
47
47
|
}
|
|
48
48
|
function onSelect(item, event) {
|
|
49
49
|
if (item.disabled) {
|
|
@@ -26,9 +26,9 @@ function isActive(item) {
|
|
|
26
26
|
const theme = useComponentTheme("navigationMenu", navigationMenuTheme);
|
|
27
27
|
const themeBindings = useThemeBindings();
|
|
28
28
|
const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
|
|
29
|
-
const ui = computed(() => theme.value({ orientation: "vertical", color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: false, flyoutRoot: props.root }));
|
|
29
|
+
const ui = computed(() => theme.value({ orientation: "vertical", contentOrientation: "horizontal", color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: false, flyoutRoot: props.root }));
|
|
30
30
|
function linkProps(item) {
|
|
31
|
-
return resolveSlot(theme.value({ orientation: "vertical", color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: false, active: isActive(item), disabled: item.disabled }).link, props.ui?.link);
|
|
31
|
+
return resolveSlot(theme.value({ orientation: "vertical", contentOrientation: "horizontal", color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: false, active: isActive(item), disabled: item.disabled }).link, props.ui?.link);
|
|
32
32
|
}
|
|
33
33
|
</script>
|
|
34
34
|
|
|
@@ -37,7 +37,7 @@ function slotName(item, suffix) {
|
|
|
37
37
|
const theme = useComponentTheme("navigationMenu", navigationMenuTheme);
|
|
38
38
|
const themeBindings = useThemeBindings();
|
|
39
39
|
const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
|
|
40
|
-
const ui = computed(() => theme.value({ orientation: "vertical", color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: true, active: false, disabled: props.item.disabled }));
|
|
40
|
+
const ui = computed(() => theme.value({ orientation: "vertical", contentOrientation: "horizontal", color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: true, active: false, disabled: props.item.disabled }));
|
|
41
41
|
let closeTimer;
|
|
42
42
|
function cancelClose() {
|
|
43
43
|
if (closeTimer !== void 0) {
|
|
@@ -9,9 +9,9 @@ export interface ProsePreProps {
|
|
|
9
9
|
highlights?: number[];
|
|
10
10
|
meta?: string;
|
|
11
11
|
}
|
|
12
|
-
declare var
|
|
12
|
+
declare var __VLS_13: {};
|
|
13
13
|
type __VLS_Slots = {} & {
|
|
14
|
-
default?: (props: typeof
|
|
14
|
+
default?: (props: typeof __VLS_13) => any;
|
|
15
15
|
};
|
|
16
16
|
declare const __VLS_base: import("vue").DefineComponent<ProsePreProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProsePreProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
17
17
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
-
import { computed, ref } from "vue";
|
|
2
|
+
import { computed, onBeforeUnmount, ref } from "vue";
|
|
3
3
|
import { useIcons } from "../composables/use-icons";
|
|
4
|
+
import { useMessages } from "../composables/use-messages";
|
|
4
5
|
import { proseTheme } from "../theme/prose";
|
|
5
6
|
import { resolveFileIcon } from "../utils/file-icons";
|
|
6
7
|
import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
|
|
7
|
-
import Badge from "./Badge.vue";
|
|
8
8
|
import Button from "./Button.vue";
|
|
9
9
|
import Icon from "./Icon.vue";
|
|
10
10
|
defineOptions({ inheritAttrs: false });
|
|
@@ -18,17 +18,21 @@ const props = defineProps({
|
|
|
18
18
|
meta: { type: String, required: false }
|
|
19
19
|
});
|
|
20
20
|
const icons = useIcons();
|
|
21
|
+
const messages = useMessages();
|
|
21
22
|
const fileIcon = computed(() => props.icon ?? resolveFileIcon(props.language, props.filename));
|
|
22
23
|
const theme = useComponentTheme("prose", proseTheme);
|
|
23
24
|
const ui = computed(() => theme.value());
|
|
24
25
|
const preProps = useRootProps(() => ui.value.pre, () => void 0);
|
|
25
26
|
const copied = ref(false);
|
|
27
|
+
let copyTimer;
|
|
28
|
+
onBeforeUnmount(() => clearTimeout(copyTimer));
|
|
26
29
|
async function copy() {
|
|
27
30
|
if (!props.code)
|
|
28
31
|
return;
|
|
29
32
|
await navigator.clipboard.writeText(props.code);
|
|
33
|
+
clearTimeout(copyTimer);
|
|
30
34
|
copied.value = true;
|
|
31
|
-
setTimeout(() => {
|
|
35
|
+
copyTimer = setTimeout(() => {
|
|
32
36
|
copied.value = false;
|
|
33
37
|
}, 1500);
|
|
34
38
|
}
|
|
@@ -39,16 +43,19 @@ async function copy() {
|
|
|
39
43
|
<div v-if="showHeader && (filename || language || code)" v-bind="resolveSlot(ui.preHeader, void 0)">
|
|
40
44
|
<span v-bind="resolveSlot(ui.preLabel, void 0)">
|
|
41
45
|
<Icon v-if="fileIcon" :name="fileIcon" v-bind="resolveSlot(ui.preIcon, void 0)" />
|
|
42
|
-
<span v-if="filename" v-bind="resolveSlot(ui.preFilename, void 0)">{{ filename }}</span>
|
|
43
|
-
<
|
|
46
|
+
<span v-if="filename" :title="filename" v-bind="resolveSlot(ui.preFilename, void 0)">{{ filename }}</span>
|
|
47
|
+
<span v-else-if="language" v-bind="resolveSlot(ui.preLanguage, void 0)">{{ language }}</span>
|
|
44
48
|
</span>
|
|
45
49
|
<Button
|
|
46
50
|
v-if="code"
|
|
47
51
|
v-bind="resolveSlot(ui.preCopyButton, void 0)"
|
|
48
52
|
size="sm"
|
|
53
|
+
square
|
|
49
54
|
variant="ghost"
|
|
50
|
-
color="neutral"
|
|
55
|
+
:color="copied ? 'success' : 'neutral'"
|
|
51
56
|
:icon="copied ? icons.check : icons.copy"
|
|
57
|
+
:aria-label="copied ? messages.codeCopied : messages.copyCode"
|
|
58
|
+
:title="copied ? messages.codeCopied : messages.copyCode"
|
|
52
59
|
@click="copy"
|
|
53
60
|
/>
|
|
54
61
|
</div>
|
|
@@ -9,9 +9,9 @@ export interface ProsePreProps {
|
|
|
9
9
|
highlights?: number[];
|
|
10
10
|
meta?: string;
|
|
11
11
|
}
|
|
12
|
-
declare var
|
|
12
|
+
declare var __VLS_13: {};
|
|
13
13
|
type __VLS_Slots = {} & {
|
|
14
|
-
default?: (props: typeof
|
|
14
|
+
default?: (props: typeof __VLS_13) => any;
|
|
15
15
|
};
|
|
16
16
|
declare const __VLS_base: import("vue").DefineComponent<ProsePreProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProsePreProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
17
17
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script setup>
|
|
2
2
|
import { SplitterPanel as RekaSplitterPanel } from "reka-ui";
|
|
3
|
-
import { computed, ref } from "vue";
|
|
3
|
+
import { computed, mergeProps, nextTick, onBeforeUnmount, ref } from "vue";
|
|
4
4
|
import { splitterPanelTheme } from "../theme/splitter-panel";
|
|
5
5
|
import { useComponentTheme, useRootProps } from "../utils/ui";
|
|
6
6
|
defineOptions({ inheritAttrs: false });
|
|
@@ -28,6 +28,32 @@ defineExpose({
|
|
|
28
28
|
const theme = useComponentTheme("splitterPanel", splitterPanelTheme);
|
|
29
29
|
const ui = computed(() => theme.value());
|
|
30
30
|
const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
|
|
31
|
+
const hasMeasuredLayout = ref(false);
|
|
32
|
+
const initialLayoutSettled = ref(false);
|
|
33
|
+
let layoutFrame;
|
|
34
|
+
const panelProps = computed(() => mergeProps({
|
|
35
|
+
style: props.sizeUnit === "px" && props.defaultSize !== void 0 ? {
|
|
36
|
+
...!hasMeasuredLayout.value && { flexBasis: `${props.defaultSize}px`, flexGrow: 0 },
|
|
37
|
+
...!initialLayoutSettled.value && { transition: "none" }
|
|
38
|
+
} : void 0
|
|
39
|
+
}, rootProps.value));
|
|
40
|
+
function handleResize(size) {
|
|
41
|
+
if (!hasMeasuredLayout.value) {
|
|
42
|
+
hasMeasuredLayout.value = true;
|
|
43
|
+
nextTick(() => {
|
|
44
|
+
layoutFrame = requestAnimationFrame(() => {
|
|
45
|
+
layoutFrame = requestAnimationFrame(() => {
|
|
46
|
+
initialLayoutSettled.value = true;
|
|
47
|
+
});
|
|
48
|
+
});
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
emit("resize", size);
|
|
52
|
+
}
|
|
53
|
+
onBeforeUnmount(() => {
|
|
54
|
+
if (layoutFrame !== void 0)
|
|
55
|
+
cancelAnimationFrame(layoutFrame);
|
|
56
|
+
});
|
|
31
57
|
</script>
|
|
32
58
|
|
|
33
59
|
<template>
|
|
@@ -40,10 +66,10 @@ const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
|
|
|
40
66
|
:collapsible="collapsible"
|
|
41
67
|
:size-unit="sizeUnit"
|
|
42
68
|
:order="order"
|
|
43
|
-
v-bind="
|
|
69
|
+
v-bind="panelProps"
|
|
44
70
|
@collapse="emit('collapse')"
|
|
45
71
|
@expand="emit('expand')"
|
|
46
|
-
@resize="
|
|
72
|
+
@resize="handleResize"
|
|
47
73
|
>
|
|
48
74
|
<template #default="{ isCollapsed, isExpanded, collapse, expand }">
|
|
49
75
|
<slot :is-collapsed="isCollapsed" :is-expanded="isExpanded" :collapse="collapse" :expand="expand" />
|
|
@@ -27,6 +27,11 @@ export interface StepperEmits {
|
|
|
27
27
|
'update:modelValue': [value: number];
|
|
28
28
|
}
|
|
29
29
|
export interface StepperSlots {
|
|
30
|
+
/** Replaces the live-region text for this instance. Keep the content concise. */
|
|
31
|
+
progress?: (props: {
|
|
32
|
+
step: number | undefined;
|
|
33
|
+
total: number;
|
|
34
|
+
}) => any;
|
|
30
35
|
indicator?: (props: {
|
|
31
36
|
item: Step;
|
|
32
37
|
index: number;
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
import { StepperDescription, StepperIndicator, StepperItem, StepperRoot, StepperSeparator, StepperTitle, StepperTrigger } from "reka-ui";
|
|
3
3
|
import { computed } from "vue";
|
|
4
4
|
import { useIcons } from "../composables/use-icons";
|
|
5
|
+
import { useMessages } from "../composables/use-messages";
|
|
6
|
+
import StepperRootElement from "../internal/stepper-root-element";
|
|
5
7
|
import { stepperTheme } from "../theme/stepper";
|
|
6
8
|
import { resolveRegisteredColorRole } from "../utils/registered-colors";
|
|
7
9
|
import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
|
|
@@ -20,6 +22,7 @@ const props = defineProps({
|
|
|
20
22
|
const emit = defineEmits(["update:modelValue"]);
|
|
21
23
|
defineSlots();
|
|
22
24
|
const icons = useIcons();
|
|
25
|
+
const messages = useMessages();
|
|
23
26
|
const theme = useComponentTheme("stepper", stepperTheme);
|
|
24
27
|
const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
|
|
25
28
|
const ui = computed(() => theme.value({
|
|
@@ -36,11 +39,15 @@ const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.icon));
|
|
|
36
39
|
const labelsProps = computed(() => resolveSlot(ui.value.labels, props.ui?.labels));
|
|
37
40
|
const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
|
|
38
41
|
const descriptionProps = computed(() => resolveSlot(ui.value.description, props.ui?.description));
|
|
42
|
+
const progressProps = computed(() => resolveSlot(ui.value.progress, props.ui?.progress));
|
|
39
43
|
const separatorProps = computed(() => resolveSlot(ui.value.separator, props.ui?.separator));
|
|
40
44
|
</script>
|
|
41
45
|
|
|
42
46
|
<template>
|
|
43
47
|
<StepperRoot
|
|
48
|
+
v-slot="{ modelValue: currentStep }"
|
|
49
|
+
:as="StepperRootElement"
|
|
50
|
+
:aria-label="messages.stepper"
|
|
44
51
|
:model-value="modelValue"
|
|
45
52
|
:default-value="defaultValue"
|
|
46
53
|
:linear="linear"
|
|
@@ -100,5 +107,10 @@ const separatorProps = computed(() => resolveSlot(ui.value.separator, props.ui?.
|
|
|
100
107
|
</StepperDescription>
|
|
101
108
|
</div>
|
|
102
109
|
</StepperItem>
|
|
110
|
+
<span role="status" aria-live="polite" aria-atomic="true" v-bind="progressProps">
|
|
111
|
+
<slot name="progress" :step="currentStep" :total="items.length">
|
|
112
|
+
{{ currentStep !== void 0 && items.length ? messages.stepperProgress(currentStep, items.length) : "" }}
|
|
113
|
+
</slot>
|
|
114
|
+
</span>
|
|
103
115
|
</StepperRoot>
|
|
104
116
|
</template>
|
|
@@ -27,6 +27,11 @@ export interface StepperEmits {
|
|
|
27
27
|
'update:modelValue': [value: number];
|
|
28
28
|
}
|
|
29
29
|
export interface StepperSlots {
|
|
30
|
+
/** Replaces the live-region text for this instance. Keep the content concise. */
|
|
31
|
+
progress?: (props: {
|
|
32
|
+
step: number | undefined;
|
|
33
|
+
total: number;
|
|
34
|
+
}) => any;
|
|
30
35
|
indicator?: (props: {
|
|
31
36
|
item: Step;
|
|
32
37
|
index: number;
|
|
@@ -140,6 +140,10 @@ function onRowClick(rowOriginal, event, toggleSelection) {
|
|
|
140
140
|
function onRowContextmenu(rowOriginal, event) {
|
|
141
141
|
emit("rowContextmenu", rowOriginal, event);
|
|
142
142
|
}
|
|
143
|
+
function isLastHeader(header) {
|
|
144
|
+
const lastColumn = table.getVisibleLeafColumns().at(-1);
|
|
145
|
+
return header.column.getLeafColumns().some((column) => column.id === lastColumn?.id);
|
|
146
|
+
}
|
|
143
147
|
const thProps = computed(() => resolveSlot(ui.value.th, props.ui?.th));
|
|
144
148
|
const thSortableClass = computed(() => resolveSlot(ui.value.thSortable, props.ui?.thSortable).class);
|
|
145
149
|
const sortIconProps = computed(() => resolveSlot(ui.value.sortIcon, props.ui?.sortIcon));
|
|
@@ -261,6 +265,7 @@ defineExpose({
|
|
|
261
265
|
:ref="(el) => setHeaderRef(header.column.id, el)"
|
|
262
266
|
:colspan="header.colSpan"
|
|
263
267
|
:rowspan="header.rowSpan"
|
|
268
|
+
:data-last-column="isLastHeader(header) || void 0"
|
|
264
269
|
v-bind="thProps"
|
|
265
270
|
:class="header.column.getCanSort() ? thSortableClass : void 0"
|
|
266
271
|
:data-pinned="header.column.getIsPinned() || void 0"
|
|
@@ -384,7 +389,7 @@ defineExpose({
|
|
|
384
389
|
|
|
385
390
|
<tfoot v-if="hasFooter" v-bind="tfootProps">
|
|
386
391
|
<tr v-for="footerGroup in table.getFooterGroups()" :key="footerGroup.id" v-bind="trProps">
|
|
387
|
-
<th v-for="header in footerGroup.headers" :key="header.id" :colspan="header.colSpan" v-bind="thProps">
|
|
392
|
+
<th v-for="header in footerGroup.headers" :key="header.id" :colspan="header.colSpan" :data-last-column="isLastHeader(header) || void 0" v-bind="thProps">
|
|
388
393
|
<FlexRender v-if="!header.isPlaceholder" :footer="header" />
|
|
389
394
|
</th>
|
|
390
395
|
</tr>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/** Keep the primitive's root behavior while replacing its fixed progress announcement. */
|
|
2
|
+
declare const _default: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
3
|
+
[key: string]: any;
|
|
4
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
5
|
+
export default _default;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { defineComponent, h } from "vue";
|
|
2
|
+
export default defineComponent({
|
|
3
|
+
name: "StepperRootElement",
|
|
4
|
+
inheritAttrs: false,
|
|
5
|
+
setup(_, { attrs, slots }) {
|
|
6
|
+
return () => h("div", attrs, slots.default?.().filter((node) => !(node.type === "div" && node.props?.role === "status" && node.props?.["aria-live"] === "polite")));
|
|
7
|
+
}
|
|
8
|
+
});
|
package/dist/runtime/prose.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base, selaras-prose, utilities;@layer selaras-prose{:root{--selaras-prose-font-body:inherit;--selaras-prose-font-heading:inherit;--selaras-prose-font-mono:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace)}.selaras-prose{color:var(--selaras-resolved-text-default);font-family:var(--selaras-prose-font-body);font-size:1rem;line-height:1.75;overflow-wrap:break-word}.selaras-prose :where(.not-prose){line-height:1.5}.selaras-prose>:where(*+*){margin-block-start:1.25em}.selaras-prose :where(h1,h2,h3,h4,h5,h6):not(:where(.not-prose,.not-prose *)){color:var(--selaras-resolved-text-default);font-family:var(--selaras-prose-font-heading);font-weight:600;letter-spacing:-.025em;margin-block-start:2em;scroll-margin-top:5rem}.selaras-prose :where(h1):not(:where(.not-prose,.not-prose *)){font-size:1.875rem;line-height:2.25rem}.selaras-prose :where(h2):not(:where(.not-prose,.not-prose *)){font-size:1.5rem;line-height:2rem}.selaras-prose :where(h3):not(:where(.not-prose,.not-prose *)){font-size:1.25rem;line-height:1.75rem}.selaras-prose :where(h4):not(:where(.not-prose,.not-prose *)){font-size:1.125rem;line-height:1.75rem}.selaras-prose :where(h5,h6):not(:where(.not-prose,.not-prose *)){font-size:1rem;line-height:1.5rem}.selaras-prose :where(a):not(:where(.not-prose,.not-prose *)){color:var(--selaras-resolved-color-primary-text);font-weight:500;text-decoration-line:underline;text-underline-offset:4px}.selaras-prose :where(a:hover):not(:where(.not-prose,.not-prose *)){color:var(--selaras-resolved-color-primary-text-hover)}.selaras-prose :where(h1,h2,h3,h4,h5,h6) :where(a):not(:where(.not-prose,.not-prose *)){color:inherit;font-weight:inherit}.selaras-prose :where(strong):not(:where(.not-prose,.not-prose *)){color:var(--selaras-resolved-text-default);font-weight:600}.selaras-prose :where(em):not(:where(.not-prose,.not-prose *)){font-style:italic}.selaras-prose :where(blockquote):not(:where(.not-prose,.not-prose *)){border-inline-start:2px solid var(--selaras-resolved-border-default);color:var(--selaras-resolved-text-muted);font-style:italic;padding-inline-start:1rem}.selaras-prose :where(hr):not(:where(.not-prose,.not-prose *)){border-color:var(--selaras-resolved-border-default)}.selaras-prose :where(img):not(:where(.not-prose,.not-prose *)){border-radius:var(--selaras-resolved-radius-md);max-width:100%}.selaras-prose :where(ul,ol):not(:where(.not-prose,.not-prose *)){color:var(--selaras-resolved-text-default);padding-inline-start:1.5rem}.selaras-prose :where(ul):not(:where(.not-prose,.not-prose *)){list-style-type:disc}.selaras-prose :where(ol):not(:where(.not-prose,.not-prose *)){list-style-type:decimal}.selaras-prose :where(li+li):not(:where(.not-prose,.not-prose *)){margin-block-start:.25em}.selaras-prose :where(code):not(:where(.not-prose,.not-prose *)){background-color:var(--selaras-resolved-surface-elevated);border-radius:var(--selaras-resolved-radius-sm);color:var(--selaras-resolved-text-default);font-family:var(--selaras-prose-font-mono);font-size:.875em;padding-block:.125rem;padding-inline:.375rem}.selaras-prose :where(pre):not(:where(.not-prose,.not-prose *)){background-color:var(--selaras-resolved-surface-elevated);border-radius:var(--selaras-resolved-radius-md);font-family:var(--selaras-prose-font-mono);font-size:.875rem;line-height:1.625;overflow-x:auto;padding:1rem}.selaras-prose :where(pre code):not(:where(.not-prose,.not-prose *)){background-color:transparent;border-radius:0;font-size:1em;padding:0}.selaras-prose :where(table):not(:where(.not-prose,.not-prose *)){border-collapse:collapse;display:block;font-size:.875rem;overflow-x:auto;width:100%}.selaras-prose :where(thead):not(:where(.not-prose,.not-prose *)){background-color:var(--selaras-resolved-surface-elevated)}.selaras-prose :where(th):not(:where(.not-prose,.not-prose *)){border-bottom:1px solid var(--selaras-resolved-border-default);color:var(--selaras-resolved-text-muted);font-weight:500;padding-block:.5rem;padding-inline:.75rem;text-align:start}.selaras-prose :where(td):not(:where(.not-prose,.not-prose *)){border-bottom:1px solid var(--selaras-resolved-border-muted);color:var(--selaras-resolved-text-default);padding-block:.5rem;padding-inline:.75rem}}
|
|
1
|
+
@layer base, selaras-prose, utilities;@layer selaras-prose{:root{--selaras-prose-font-body:inherit;--selaras-prose-font-heading:inherit;--selaras-prose-font-mono:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace)}.selaras-prose{color:var(--selaras-resolved-text-default);font-family:var(--selaras-prose-font-body);font-size:1rem;line-height:1.75;overflow-wrap:break-word}.selaras-prose :where(.not-prose){line-height:1.5}.selaras-prose>:where(*+*){margin-block-start:1.25em}.selaras-prose :where(h1,h2,h3,h4,h5,h6):not(:where(.not-prose,.not-prose *)){color:var(--selaras-resolved-text-default);font-family:var(--selaras-prose-font-heading);font-weight:600;letter-spacing:-.025em;margin-block-start:2em;scroll-margin-top:5rem}.selaras-prose :where(h1):not(:where(.not-prose,.not-prose *)){font-size:1.875rem;line-height:2.25rem}.selaras-prose :where(h2):not(:where(.not-prose,.not-prose *)){font-size:1.5rem;line-height:2rem}.selaras-prose :where(h3):not(:where(.not-prose,.not-prose *)){font-size:1.25rem;line-height:1.75rem}.selaras-prose :where(h4):not(:where(.not-prose,.not-prose *)){font-size:1.125rem;line-height:1.75rem}.selaras-prose :where(h5,h6):not(:where(.not-prose,.not-prose *)){font-size:1rem;line-height:1.5rem}.selaras-prose :where(a):not(:where(.not-prose,.not-prose *)){color:var(--selaras-resolved-color-primary-text);font-weight:500;text-decoration-line:underline;text-underline-offset:4px}.selaras-prose :where(a:hover):not(:where(.not-prose,.not-prose *)){color:var(--selaras-resolved-color-primary-text-hover)}.selaras-prose :where(h1,h2,h3,h4,h5,h6) :where(a):not(:where(.not-prose,.not-prose *)){color:inherit;font-weight:inherit}.selaras-prose :where(strong):not(:where(.not-prose,.not-prose *)){color:var(--selaras-resolved-text-default);font-weight:600}.selaras-prose :where(em):not(:where(.not-prose,.not-prose *)){font-style:italic}.selaras-prose :where(blockquote):not(:where(.not-prose,.not-prose *)){border-inline-start:2px solid var(--selaras-resolved-border-default);color:var(--selaras-resolved-text-muted);font-style:italic;padding-inline-start:1rem}.selaras-prose :where(hr):not(:where(.not-prose,.not-prose *)){border-color:var(--selaras-resolved-border-default)}.selaras-prose :where(img):not(:where(.not-prose,.not-prose *)){border-radius:var(--selaras-resolved-radius-md);max-width:100%}.selaras-prose :where(ul,ol):not(:where(.not-prose,.not-prose *)){color:var(--selaras-resolved-text-default);padding-inline-start:1.5rem}.selaras-prose :where(ul):not(:where(.not-prose,.not-prose *)){list-style-type:disc}.selaras-prose :where(ol):not(:where(.not-prose,.not-prose *)){list-style-type:decimal}.selaras-prose :where(li+li):not(:where(.not-prose,.not-prose *)){margin-block-start:.25em}.selaras-prose :where(code):not(:where(.not-prose,.not-prose *)){background-color:var(--selaras-resolved-surface-elevated);border-radius:var(--selaras-resolved-radius-sm);color:var(--selaras-resolved-text-default);font-family:var(--selaras-prose-font-mono);font-size:.875em;padding-block:.125rem;padding-inline:.375rem}.selaras-prose :where(pre):not(:where(.not-prose,.not-prose *)){background-color:var(--selaras-resolved-surface-elevated);border-radius:var(--selaras-resolved-radius-md);font-family:var(--selaras-prose-font-mono);font-size:.875rem;line-height:1.625;overflow-x:auto;padding:1rem}.selaras-prose :where(pre code):not(:where(.not-prose,.not-prose *)){background-color:transparent;border-radius:0;font-size:1em;padding:0}.selaras-prose :where(table):not(:where(.not-prose,.not-prose *)){border-collapse:collapse;display:block;font-size:.875rem;overflow-x:auto;width:100%}.selaras-prose :where(thead):not(:where(.not-prose,.not-prose *)){background-color:var(--selaras-resolved-surface-elevated)}.selaras-prose :where(th,td):not(:where(.not-prose,.not-prose *)){width:1%}.selaras-prose :where(th):not(:where(.not-prose,.not-prose *)){border-bottom:1px solid var(--selaras-resolved-border-default);color:var(--selaras-resolved-text-muted);font-weight:500;padding-block:.5rem;padding-inline:.75rem;text-align:start}.selaras-prose :where(td):not(:where(.not-prose,.not-prose *)){border-bottom:1px solid var(--selaras-resolved-border-muted);color:var(--selaras-resolved-text-default);padding-block:.5rem;padding-inline:.75rem}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import "tw-animate-css";@source "./components";@source "./internal";@source "./theme";@source "./utils";@custom-variant dark (&:where(.dark, .dark *));@layer base{a:focus-visible{outline-offset:0}}@keyframes selaras-ripple{to{opacity:0;transform:scale(1)}}@keyframes selaras-accordion-down{0%{height:0}to{height:var(--reka-accordion-content-height)}}@keyframes selaras-accordion-up{0%{height:var(--reka-accordion-content-height)}to{height:0}}@keyframes selaras-collapsible-down{0%{height:0}to{height:var(--reka-collapsible-content-height)}}@keyframes selaras-collapsible-up{0%{height:var(--reka-collapsible-content-height)}to{height:0}}@keyframes selaras-toast-in{0%{opacity:0;translate:0 calc(var(--_selaras-toast-lift, -1)*-100%)}}@keyframes selaras-toast-out{to{opacity:0;translate:0 calc(var(--_selaras-toast-lift, -1)*var(--_selaras-toast-exit, -100%))}}@keyframes selaras-skeleton-shimmer{0%{background-position:150% 0}to{background-position:-50% 0}}@keyframes selaras-progress-indeterminate{0%{transform:translateX(-100%)}to{transform:translateX(300%)}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}.selaras-nav-elbow{
|
|
1
|
+
@import "tw-animate-css";@source "./components";@source "./internal";@source "./theme";@source "./utils";@custom-variant dark (&:where(.dark, .dark *));@layer base{a:focus-visible{outline-offset:0}}@keyframes selaras-ripple{to{opacity:0;transform:scale(1)}}@keyframes selaras-accordion-down{0%{height:0}to{height:var(--reka-accordion-content-height)}}@keyframes selaras-accordion-up{0%{height:var(--reka-accordion-content-height)}to{height:0}}@keyframes selaras-collapsible-down{0%{height:0}to{height:var(--reka-collapsible-content-height)}}@keyframes selaras-collapsible-up{0%{height:var(--reka-collapsible-content-height)}to{height:0}}@keyframes selaras-toast-in{0%{opacity:0;translate:0 calc(var(--_selaras-toast-lift, -1)*-100%)}}@keyframes selaras-toast-out{to{opacity:0;translate:0 calc(var(--_selaras-toast-lift, -1)*var(--_selaras-toast-exit, -100%))}}@keyframes selaras-skeleton-shimmer{0%{background-position:150% 0}to{background-position:-50% 0}}@keyframes selaras-progress-indeterminate{0%{transform:translateX(-100%)}to{transform:translateX(300%)}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}.selaras-nav-elbow{--_selaras-nav-row-height:40px;--_selaras-nav-row-gap:2px;position:relative}.selaras-nav-elbow:after,.selaras-nav-elbow:before{background-color:color-mix(in srgb,var(--selaras-resolved-text-muted) 25%,transparent);content:"";pointer-events:none;position:absolute}.selaras-nav-elbow:before{height:16px;inset-inline-start:-16px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' d='M1 0a2 2 0 0 0 2 2h11'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' d='M1 0a2 2 0 0 0 2 2h11'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;top:calc(var(--_selaras-nav-row-height)/2 - 2px);width:16px}.selaras-nav-elbow:dir(rtl):before{transform:scaleX(-1)}.selaras-nav-elbow:after{bottom:calc(var(--_selaras-nav-row-gap)*-1);inset-inline-start:-15.5px;top:0;width:1px}.selaras-nav-elbow:last-child:after{bottom:auto;height:calc(var(--_selaras-nav-row-height)/2 - 2px)}.selaras-nav-elbow--navigation-menu{--_selaras-nav-row-height:32px;--_selaras-nav-row-gap:4px}.selaras-nav-elbow--file-tree{--_selaras-nav-row-height:28px}@layer theme{:root,[data-selaras-theme]{--selaras-resolved-surface-canvas:var(--selaras-surface-canvas,var(--_selaras-default-surface-canvas));--selaras-resolved-surface-default:var(--selaras-surface-default,var(--_selaras-default-surface-default));--selaras-resolved-surface-elevated:var(--selaras-surface-elevated,var(--_selaras-default-surface-elevated));--selaras-resolved-surface-inverted:var(--selaras-surface-inverted,var(--_selaras-default-surface-inverted));--selaras-resolved-text-default:var(--selaras-text-default,var(--_selaras-default-text-default));--selaras-resolved-text-muted:var(--selaras-text-muted,var(--_selaras-default-text-muted));--selaras-resolved-text-inverted:var(--selaras-text-inverted,var(--_selaras-default-text-inverted));--selaras-resolved-border-default:var(--selaras-border-default,var(--_selaras-default-border-default));--selaras-resolved-border-muted:var(--selaras-border-muted,var(--_selaras-default-border-muted));--selaras-resolved-border-hover:var(--selaras-border-hover,var(--_selaras-default-border-hover));--selaras-resolved-scrim:var(--selaras-scrim,rgba(0,0,0,.5));--selaras-resolved-radius-base:var(--selaras-radius-base,8px);--selaras-resolved-radius-sm:var(--selaras-radius-sm,calc(var(--selaras-resolved-radius-base)*0.75));--selaras-resolved-radius-md:var(--selaras-radius-md,var(--selaras-resolved-radius-base));--selaras-resolved-radius-lg:var(--selaras-radius-lg,calc(var(--selaras-resolved-radius-base)*2));--selaras-resolved-radius-full:var(--selaras-radius-full,9999px);--selaras-resolved-shadow-sm:var(--selaras-shadow-sm,0 1px 2px 0 rgba(0,0,0,.06));--selaras-resolved-shadow-md:var(--selaras-shadow-md,0 4px 16px -2px rgba(0,0,0,.12));--selaras-resolved-shadow-lg:var(--selaras-shadow-lg,0 12px 32px -4px rgba(0,0,0,.16));--selaras-resolved-z-modal-overlay:var(--selaras-z-modal-overlay,40);--selaras-resolved-z-modal:var(--selaras-z-modal,50);--selaras-resolved-z-dropdown:var(--selaras-z-dropdown,60);--selaras-resolved-z-tooltip:var(--selaras-z-tooltip,70);--selaras-resolved-z-toast:var(--selaras-z-toast,80)}:root.dark,:root.dark [data-selaras-theme]:where(:not([data-selaras-mode]),[data-selaras-mode=root]),[data-selaras-theme]:where([data-selaras-mode=dark]){--selaras-resolved-scrim:var(--selaras-scrim,hsla(0,0%,100%,.05));--selaras-resolved-surface-canvas:var(--selaras-surface-canvas,var(--_selaras-default-surface-canvas));--selaras-resolved-surface-default:var(--selaras-surface-default,var(--_selaras-default-surface-default));--selaras-resolved-surface-elevated:var(--selaras-surface-elevated,var(--_selaras-default-surface-elevated));--selaras-resolved-surface-inverted:var(--selaras-surface-inverted,var(--_selaras-default-surface-inverted));--selaras-resolved-text-default:var(--selaras-text-default,var(--_selaras-default-text-default));--selaras-resolved-text-muted:var(--selaras-text-muted,var(--_selaras-default-text-muted));--selaras-resolved-text-inverted:var(--selaras-text-inverted,var(--_selaras-default-text-inverted));--selaras-resolved-border-default:var(--selaras-border-default,var(--_selaras-default-border-default));--selaras-resolved-border-muted:var(--selaras-border-muted,var(--_selaras-default-border-muted));--selaras-resolved-border-hover:var(--selaras-border-hover,var(--_selaras-default-border-hover))}}.selaras-code-tree-code span{color:var(--shiki-light)}.selaras-code-tree-code:where([data-selaras-code-mode=dark]) span,:root.dark .selaras-code-tree-code:where([data-selaras-code-mode=root]) span{color:var(--shiki-dark)}
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import type { VariantProps } from 'tailwind-variants';
|
|
2
2
|
export declare const navigationMenuTheme: import("tailwind-variants").TVReturnType<{
|
|
3
|
+
contentOrientation: {
|
|
4
|
+
horizontal: {};
|
|
5
|
+
vertical: {};
|
|
6
|
+
};
|
|
3
7
|
orientation: {
|
|
4
8
|
horizontal: {
|
|
5
9
|
root: string;
|
|
@@ -72,8 +76,14 @@ export declare const navigationMenuTheme: import("tailwind-variants").TVReturnTy
|
|
|
72
76
|
childLink: string;
|
|
73
77
|
childLinkLabel: string;
|
|
74
78
|
groupLabel: string;
|
|
79
|
+
collapsedGroupLabel: string;
|
|
80
|
+
groupSpacer: string;
|
|
75
81
|
separator: string;
|
|
76
82
|
}, undefined, {
|
|
83
|
+
contentOrientation: {
|
|
84
|
+
horizontal: {};
|
|
85
|
+
vertical: {};
|
|
86
|
+
};
|
|
77
87
|
orientation: {
|
|
78
88
|
horizontal: {
|
|
79
89
|
root: string;
|
|
@@ -146,8 +156,14 @@ export declare const navigationMenuTheme: import("tailwind-variants").TVReturnTy
|
|
|
146
156
|
childLink: string;
|
|
147
157
|
childLinkLabel: string;
|
|
148
158
|
groupLabel: string;
|
|
159
|
+
collapsedGroupLabel: string;
|
|
160
|
+
groupSpacer: string;
|
|
149
161
|
separator: string;
|
|
150
162
|
}, import("tailwind-variants").TVReturnTypeLike<{
|
|
163
|
+
contentOrientation: {
|
|
164
|
+
horizontal: {};
|
|
165
|
+
vertical: {};
|
|
166
|
+
};
|
|
151
167
|
orientation: {
|
|
152
168
|
horizontal: {
|
|
153
169
|
root: string;
|
|
@@ -220,6 +236,8 @@ export declare const navigationMenuTheme: import("tailwind-variants").TVReturnTy
|
|
|
220
236
|
childLink: string;
|
|
221
237
|
childLinkLabel: string;
|
|
222
238
|
groupLabel: string;
|
|
239
|
+
collapsedGroupLabel: string;
|
|
240
|
+
groupSpacer: string;
|
|
223
241
|
separator: string;
|
|
224
242
|
}>>;
|
|
225
243
|
export type NavigationMenuThemeSlots = keyof (typeof navigationMenuTheme)['slots'];
|