@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.
Files changed (36) hide show
  1. package/dist/agent/catalog.json +1 -1
  2. package/dist/module.json +1 -1
  3. package/dist/runtime/components/NavigationMenu.d.vue.ts +7 -1
  4. package/dist/runtime/components/NavigationMenu.vue +19 -8
  5. package/dist/runtime/components/NavigationMenu.vue.d.ts +7 -1
  6. package/dist/runtime/components/NavigationMenuAccordionItem.vue +2 -2
  7. package/dist/runtime/components/NavigationMenuFlyoutList.vue +2 -2
  8. package/dist/runtime/components/NavigationMenuFlyoutTrigger.vue +1 -1
  9. package/dist/runtime/components/ProsePre.d.vue.ts +2 -2
  10. package/dist/runtime/components/ProsePre.vue +13 -6
  11. package/dist/runtime/components/ProsePre.vue.d.ts +2 -2
  12. package/dist/runtime/components/SplitterPanel.vue +29 -3
  13. package/dist/runtime/components/Stepper.d.vue.ts +5 -0
  14. package/dist/runtime/components/Stepper.vue +12 -0
  15. package/dist/runtime/components/Stepper.vue.d.ts +5 -0
  16. package/dist/runtime/components/Table.vue +6 -1
  17. package/dist/runtime/internal/stepper-root-element.d.ts +5 -0
  18. package/dist/runtime/internal/stepper-root-element.js +8 -0
  19. package/dist/runtime/prose.css +1 -1
  20. package/dist/runtime/structural.css +1 -1
  21. package/dist/runtime/theme/navigation-menu.d.ts +18 -0
  22. package/dist/runtime/theme/navigation-menu.js +21 -28
  23. package/dist/runtime/theme/prose.d.ts +3 -0
  24. package/dist/runtime/theme/prose.js +7 -6
  25. package/dist/runtime/theme/stepper.d.ts +3 -0
  26. package/dist/runtime/theme/stepper.js +1 -0
  27. package/dist/runtime/theme/table.d.ts +6 -3
  28. package/dist/runtime/theme/table.js +5 -3
  29. package/dist/runtime/theme-config.d.ts +1 -1
  30. package/dist/runtime/types/index.d.ts +1 -1
  31. package/dist/runtime/utils/file-icons.js +1 -0
  32. package/dist/runtime/utils/messages.d.ts +4 -0
  33. package/dist/runtime/utils/messages.js +4 -0
  34. package/dist/runtime/utils/navigation-menu.d.ts +10 -0
  35. package/dist/runtime/utils/navigation-menu.js +25 -0
  36. package/package.json +3 -3
package/dist/module.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "selaras",
3
3
  "configKey": "selaras",
4
- "version": "0.6.0",
4
+ "version": "0.7.1",
5
5
  "builder": {
6
6
  "@nuxt/module-builder": "1.0.3",
7
7
  "unbuild": "unknown"
@@ -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 items" :key="item.label">
97
- <li v-if="item.type === 'separator'" role="separator" v-bind="resolveSlot(ui.separator, props.ui?.separator)" />
98
- <li v-else-if="item.type === 'label'" v-bind="resolveSlot(ui.groupLabel, props.ui?.groupLabel)">
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 __VLS_18: {};
12
+ declare var __VLS_13: {};
13
13
  type __VLS_Slots = {} & {
14
- default?: (props: typeof __VLS_18) => any;
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
- <Badge v-else-if="language" :label="language" size="sm" variant="outline" />
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 __VLS_18: {};
12
+ declare var __VLS_13: {};
13
13
  type __VLS_Slots = {} & {
14
- default?: (props: typeof __VLS_18) => any;
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="rootProps"
69
+ v-bind="panelProps"
44
70
  @collapse="emit('collapse')"
45
71
  @expand="emit('expand')"
46
- @resize="(size) => emit('resize', size)"
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
+ });
@@ -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{position:relative}.selaras-nav-elbow:before{inset-inline-start:-16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:16px}.selaras-nav-elbow:after,.selaras-nav-elbow:before{background-color:var(--selaras-resolved-border-default);content:"";position:absolute;top:0}.selaras-nav-elbow:after{inset-inline-start:-15px;width:1.5px}.selaras-nav-elbow--content-navigation:before{height:40px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 40'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 14a6 6 0 0 0 6 6h7'/%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 40'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 14a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E")}.selaras-nav-elbow--content-navigation:after{bottom:-2px}.selaras-nav-elbow--content-navigation:last-child:after{bottom:auto;height:14px}.selaras-nav-elbow--navigation-menu:before{height:32px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 32'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 10a6 6 0 0 0 6 6h7'/%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 32'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 10a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E")}.selaras-nav-elbow--navigation-menu:after{bottom:-4px}.selaras-nav-elbow--navigation-menu:last-child:after{bottom:auto;height:10px}.selaras-nav-elbow--file-tree:before{height:28px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 8a6 6 0 0 0 6 6h7'/%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 28'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 8a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E")}.selaras-nav-elbow--file-tree:after{bottom:-2px}.selaras-nav-elbow--file-tree:last-child:after{bottom:auto;height:8px}@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
+ @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'];