@sewadah/selaras 0.6.0 → 0.7.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "selaras",
   "configKey": "selaras",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/runtime/components/NavigationMenu.d.vue.ts

@@ -1,18 +1,24 @@
 import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
 import type { ColorRole } from '../utils/color-registry.js';
-import type { NavigationMenuItem, NavigationMenuPopover } from '../utils/navigation-menu.js';
+import type { NavigationMenuItem, NavigationMenuPopover, NavigationMenuPositioning } from '../utils/navigation-menu.js';
 import type { UiProp } from '../utils/ui.js';
 import type { TooltipProps } from './Tooltip.vue.js';
 export interface NavigationMenuProps {
     items: NavigationMenuItem[];
     /** 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. */
     orientation?: 'horizontal' | 'vertical';
+    /** Dropdown layout for horizontal navigation. @default 'vertical' */
+    contentOrientation?: 'horizontal' | 'vertical';
+    /** Alignment to the active trigger when contentOrientation is vertical. @default { align: 'center' } */
+    positioning?: NavigationMenuPositioning;
     color?: ColorRole;
     variant?: 'pill' | 'link';
     /** Draws a bar/underline next to the active item, in addition to its own color styling. */
     highlight?: boolean;
     /** 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). */
     collapsed?: boolean;
+    /** Presentation of section headings in a collapsed vertical rail. @default 'separator' */
+    collapsedGroups?: 'separator' | 'spacing' | 'none';
     /** Labels for collapsed vertical leaf items. An object customizes Tooltip props. @default false */
     tooltip?: boolean | TooltipProps;
     /** Presentation of collapsed child flyouts; item settings override these defaults. */

package/dist/runtime/components/NavigationMenu.vue

@@ -17,7 +17,7 @@ import { vHotkey } from "../directives/hotkey";
 import NavigationMenuTooltip from "../internal/NavigationMenuTooltip.vue";
 import ShortcutHint from "../internal/ShortcutHint.vue";
 import { navigationMenuTheme } from "../theme/navigation-menu";
-import { isNavigationMenuItemActive, navigationMenuHotkey } from "../utils/navigation-menu";
+import { collapsedNavigationMenuEntries, isNavigationMenuItemActive, navigationMenuHotkey } from "../utils/navigation-menu";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme } from "../utils/ui";
 import Icon from "./Icon.vue";
@@ -26,10 +26,13 @@ import NavigationMenuFlyoutTrigger from "./NavigationMenuFlyoutTrigger.vue";
 const props = defineProps({
   items: { type: Array, required: true },
   orientation: { type: String, required: false, default: "horizontal" },
+  contentOrientation: { type: String, required: false, default: "vertical" },
+  positioning: { type: Object, required: false },
   color: { type: null, required: false },
   variant: { type: String, required: false, default: "pill" },
   highlight: { type: Boolean, required: false },
   collapsed: { type: Boolean, required: false },
+  collapsedGroups: { type: String, required: false, default: "separator" },
   tooltip: { type: [Boolean, Object], required: false },
   popover: { type: Object, required: false },
   ui: { type: Object, required: false }
@@ -38,6 +41,13 @@ const direction = useDirection();
 const route = useRoute();
 const icons = useIcons();
 const slots = useSlots();
+const collapsedVertical = computed(() => props.orientation === "vertical" && props.collapsed);
+const effectiveContentOrientation = computed(() => props.orientation === "horizontal" ? props.contentOrientation : "horizontal");
+const viewportAlign = computed(() => {
+  const align = props.positioning?.align ?? "center";
+  return direction.value === "rtl" && align !== "center" ? align === "start" ? "end" : "start" : align;
+});
+const entries = computed(() => collapsedVertical.value ? collapsedNavigationMenuEntries(props.items, props.collapsedGroups) : props.items.map((item) => ({ item, boundary: false })));
 function slotName(item, suffix) {
   const named = item.slot ? `${item.slot}${suffix}` : void 0;
   if (named && slots[named])
@@ -46,7 +56,7 @@ function slotName(item, suffix) {
 }
 const theme = useComponentTheme("navigationMenu", navigationMenuTheme);
 const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
-const ui = computed(() => theme.value({ orientation: props.orientation, color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: props.collapsed }));
+const ui = computed(() => theme.value({ orientation: props.orientation, contentOrientation: effectiveContentOrientation.value, color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: props.collapsed }));
 const rootProps = computed(() => resolveSlot(ui.value.root, props.ui?.root));
 const listProps = computed(() => resolveSlot(ui.value.list, props.ui?.list));
 function tooltipProps(item) {
@@ -65,10 +75,10 @@ function isActive(item) {
   return isNavigationMenuItemActive(item, route.path);
 }
 function linkProps(item) {
-  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);
+  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);
 }
 function childLinkProps(item) {
-  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);
+  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);
 }
 const openFlyoutLabel = ref(null);
 function onFlyoutOpenChange(item, value) {
@@ -93,9 +103,10 @@ function onSelect(item, event) {
   <NavigationMenuRoot :orientation="orientation" :data-selaras-color="effectiveColor" v-bind="rootProps">
     <slot name="list-leading" />
     <NavigationMenuList v-bind="listProps">
-      <template v-for="item in items" :key="item.label">
-        <li v-if="item.type === 'separator'" role="separator" v-bind="resolveSlot(ui.separator, props.ui?.separator)" />
-        <li v-else-if="item.type === 'label'" v-bind="resolveSlot(ui.groupLabel, props.ui?.groupLabel)">
+      <template v-for="({ item, boundary }, index) in entries" :key="boundary ? `boundary-${index}` : `item-${item.label}`">
+        <li v-if="boundary === 'spacing'" aria-hidden="true" v-bind="resolveSlot(ui.groupSpacer, props.ui?.groupSpacer)" />
+        <li v-else-if="item.type === 'separator'" role="separator" v-bind="resolveSlot(ui.separator, props.ui?.separator)" />
+        <li v-else-if="item.type === 'label'" v-bind="collapsedVertical ? resolveSlot(ui.collapsedGroupLabel, props.ui?.collapsedGroupLabel) : resolveSlot(ui.groupLabel, props.ui?.groupLabel)">
           <slot :name="slotName(item, '-label')" :item="item" :active="false">
             {{ item.label }}
           </slot>
@@ -188,6 +199,6 @@ function onSelect(item, event) {
     </NavigationMenuList>
     <slot name="list-trailing" />
 
-    <NavigationMenuViewport v-if="orientation === 'horizontal'" v-bind="resolveSlot(ui.viewport, props.ui?.viewport)" />
+    <NavigationMenuViewport v-if="orientation === 'horizontal'" :align="viewportAlign" v-bind="resolveSlot(ui.viewport, props.ui?.viewport)" />
   </NavigationMenuRoot>
 </template>

package/dist/runtime/components/NavigationMenu.vue.d.ts

@@ -1,18 +1,24 @@
 import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
 import type { ColorRole } from '../utils/color-registry.js';
-import type { NavigationMenuItem, NavigationMenuPopover } from '../utils/navigation-menu.js';
+import type { NavigationMenuItem, NavigationMenuPopover, NavigationMenuPositioning } from '../utils/navigation-menu.js';
 import type { UiProp } from '../utils/ui.js';
 import type { TooltipProps } from './Tooltip.vue.js';
 export interface NavigationMenuProps {
     items: NavigationMenuItem[];
     /** 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. */
     orientation?: 'horizontal' | 'vertical';
+    /** Dropdown layout for horizontal navigation. @default 'vertical' */
+    contentOrientation?: 'horizontal' | 'vertical';
+    /** Alignment to the active trigger when contentOrientation is vertical. @default { align: 'center' } */
+    positioning?: NavigationMenuPositioning;
     color?: ColorRole;
     variant?: 'pill' | 'link';
     /** Draws a bar/underline next to the active item, in addition to its own color styling. */
     highlight?: boolean;
     /** 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). */
     collapsed?: boolean;
+    /** Presentation of section headings in a collapsed vertical rail. @default 'separator' */
+    collapsedGroups?: 'separator' | 'spacing' | 'none';
     /** Labels for collapsed vertical leaf items. An object customizes Tooltip props. @default false */
     tooltip?: boolean | TooltipProps;
     /** Presentation of collapsed child flyouts; item settings override these defaults. */

package/dist/runtime/components/NavigationMenuAccordionItem.vue

@@ -29,7 +29,7 @@ function slotName(item, suffix) {
 }
 const theme = useComponentTheme("navigationMenu", navigationMenuTheme);
 const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
-const ui = computed(() => theme.value({ orientation: "vertical", color: effectiveColor.value, variant: props.variant, highlight: props.highlight }));
+const ui = computed(() => theme.value({ orientation: "vertical", contentOrientation: "horizontal", color: effectiveColor.value, variant: props.variant, highlight: props.highlight }));
 const accordionValue = useId();
 const accordionItems = computed(() => [{ value: accordionValue, label: props.item.label, disabled: props.item.disabled }]);
 const groupUi = computed(() => ({
@@ -43,7 +43,7 @@ function isActive(item) {
   return isNavigationMenuItemActive(item, route.path);
 }
 function linkProps(child) {
-  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);
+  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);
 }
 function onSelect(item, event) {
   if (item.disabled) {

package/dist/runtime/components/NavigationMenuFlyoutList.vue

@@ -26,9 +26,9 @@ function isActive(item) {
 const theme = useComponentTheme("navigationMenu", navigationMenuTheme);
 const themeBindings = useThemeBindings();
 const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
-const ui = computed(() => theme.value({ orientation: "vertical", color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: false, flyoutRoot: props.root }));
+const ui = computed(() => theme.value({ orientation: "vertical", contentOrientation: "horizontal", color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: false, flyoutRoot: props.root }));
 function linkProps(item) {
-  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);
+  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);
 }
 </script>
 

package/dist/runtime/components/NavigationMenuFlyoutTrigger.vue

@@ -37,7 +37,7 @@ function slotName(item, suffix) {
 const theme = useComponentTheme("navigationMenu", navigationMenuTheme);
 const themeBindings = useThemeBindings();
 const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
-const ui = computed(() => theme.value({ orientation: "vertical", color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: true, active: false, disabled: props.item.disabled }));
+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 }));
 let closeTimer;
 function cancelClose() {
   if (closeTimer !== void 0) {

package/dist/runtime/components/ProsePre.d.vue.ts

@@ -9,9 +9,9 @@ export interface ProsePreProps {
     highlights?: number[];
     meta?: string;
 }
-declare var __VLS_18: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_18) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
 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>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ProsePre.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { computed, ref } from "vue";
+import { computed, onBeforeUnmount, ref } from "vue";
 import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
 import { proseTheme } from "../theme/prose";
 import { resolveFileIcon } from "../utils/file-icons";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
-import Badge from "./Badge.vue";
 import Button from "./Button.vue";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -18,17 +18,21 @@ const props = defineProps({
   meta: { type: String, required: false }
 });
 const icons = useIcons();
+const messages = useMessages();
 const fileIcon = computed(() => props.icon ?? resolveFileIcon(props.language, props.filename));
 const theme = useComponentTheme("prose", proseTheme);
 const ui = computed(() => theme.value());
 const preProps = useRootProps(() => ui.value.pre, () => void 0);
 const copied = ref(false);
+let copyTimer;
+onBeforeUnmount(() => clearTimeout(copyTimer));
 async function copy() {
   if (!props.code)
     return;
   await navigator.clipboard.writeText(props.code);
+  clearTimeout(copyTimer);
   copied.value = true;
-  setTimeout(() => {
+  copyTimer = setTimeout(() => {
     copied.value = false;
   }, 1500);
 }
@@ -39,16 +43,19 @@ async function copy() {
     <div v-if="showHeader && (filename || language || code)" v-bind="resolveSlot(ui.preHeader, void 0)">
       <span v-bind="resolveSlot(ui.preLabel, void 0)">
         <Icon v-if="fileIcon" :name="fileIcon" v-bind="resolveSlot(ui.preIcon, void 0)" />
-        <span v-if="filename" v-bind="resolveSlot(ui.preFilename, void 0)">{{ filename }}</span>
-        <Badge v-else-if="language" :label="language" size="sm" variant="outline" />
+        <span v-if="filename" :title="filename" v-bind="resolveSlot(ui.preFilename, void 0)">{{ filename }}</span>
+        <span v-else-if="language" v-bind="resolveSlot(ui.preLanguage, void 0)">{{ language }}</span>
       </span>
       <Button
         v-if="code"
         v-bind="resolveSlot(ui.preCopyButton, void 0)"
         size="sm"
+        square
         variant="ghost"
-        color="neutral"
+        :color="copied ? 'success' : 'neutral'"
         :icon="copied ? icons.check : icons.copy"
+        :aria-label="copied ? messages.codeCopied : messages.copyCode"
+        :title="copied ? messages.codeCopied : messages.copyCode"
         @click="copy"
       />
     </div>

package/dist/runtime/components/ProsePre.vue.d.ts

@@ -9,9 +9,9 @@ export interface ProsePreProps {
     highlights?: number[];
     meta?: string;
 }
-declare var __VLS_18: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_18) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
 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>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/SplitterPanel.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { SplitterPanel as RekaSplitterPanel } from "reka-ui";
-import { computed, ref } from "vue";
+import { computed, mergeProps, nextTick, onBeforeUnmount, ref } from "vue";
 import { splitterPanelTheme } from "../theme/splitter-panel";
 import { useComponentTheme, useRootProps } from "../utils/ui";
 defineOptions({ inheritAttrs: false });
@@ -28,6 +28,32 @@ defineExpose({
 const theme = useComponentTheme("splitterPanel", splitterPanelTheme);
 const ui = computed(() => theme.value());
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const hasMeasuredLayout = ref(false);
+const initialLayoutSettled = ref(false);
+let layoutFrame;
+const panelProps = computed(() => mergeProps({
+  style: props.sizeUnit === "px" && props.defaultSize !== void 0 ? {
+    ...!hasMeasuredLayout.value && { flexBasis: `${props.defaultSize}px`, flexGrow: 0 },
+    ...!initialLayoutSettled.value && { transition: "none" }
+  } : void 0
+}, rootProps.value));
+function handleResize(size) {
+  if (!hasMeasuredLayout.value) {
+    hasMeasuredLayout.value = true;
+    nextTick(() => {
+      layoutFrame = requestAnimationFrame(() => {
+        layoutFrame = requestAnimationFrame(() => {
+          initialLayoutSettled.value = true;
+        });
+      });
+    });
+  }
+  emit("resize", size);
+}
+onBeforeUnmount(() => {
+  if (layoutFrame !== void 0)
+    cancelAnimationFrame(layoutFrame);
+});
 </script>
 
 <template>
@@ -40,10 +66,10 @@ const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
     :collapsible="collapsible"
     :size-unit="sizeUnit"
     :order="order"
-    v-bind="rootProps"
+    v-bind="panelProps"
     @collapse="emit('collapse')"
     @expand="emit('expand')"
-    @resize="(size) => emit('resize', size)"
+    @resize="handleResize"
   >
     <template #default="{ isCollapsed, isExpanded, collapse, expand }">
       <slot :is-collapsed="isCollapsed" :is-expanded="isExpanded" :collapse="collapse" :expand="expand" />

package/dist/runtime/components/Stepper.d.vue.ts

@@ -27,6 +27,11 @@ export interface StepperEmits {
     'update:modelValue': [value: number];
 }
 export interface StepperSlots {
+    /** Replaces the live-region text for this instance. Keep the content concise. */
+    progress?: (props: {
+        step: number | undefined;
+        total: number;
+    }) => any;
     indicator?: (props: {
         item: Step;
         index: number;

package/dist/runtime/components/Stepper.vue

@@ -2,6 +2,8 @@
 import { StepperDescription, StepperIndicator, StepperItem, StepperRoot, StepperSeparator, StepperTitle, StepperTrigger } from "reka-ui";
 import { computed } from "vue";
 import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import StepperRootElement from "../internal/stepper-root-element";
 import { stepperTheme } from "../theme/stepper";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
@@ -20,6 +22,7 @@ const props = defineProps({
 const emit = defineEmits(["update:modelValue"]);
 defineSlots();
 const icons = useIcons();
+const messages = useMessages();
 const theme = useComponentTheme("stepper", stepperTheme);
 const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
 const ui = computed(() => theme.value({
@@ -36,11 +39,15 @@ const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.icon));
 const labelsProps = computed(() => resolveSlot(ui.value.labels, props.ui?.labels));
 const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
 const descriptionProps = computed(() => resolveSlot(ui.value.description, props.ui?.description));
+const progressProps = computed(() => resolveSlot(ui.value.progress, props.ui?.progress));
 const separatorProps = computed(() => resolveSlot(ui.value.separator, props.ui?.separator));
 </script>
 
 <template>
   <StepperRoot
+    v-slot="{ modelValue: currentStep }"
+    :as="StepperRootElement"
+    :aria-label="messages.stepper"
     :model-value="modelValue"
     :default-value="defaultValue"
     :linear="linear"
@@ -100,5 +107,10 @@ const separatorProps = computed(() => resolveSlot(ui.value.separator, props.ui?.
         </StepperDescription>
       </div>
     </StepperItem>
+    <span role="status" aria-live="polite" aria-atomic="true" v-bind="progressProps">
+      <slot name="progress" :step="currentStep" :total="items.length">
+        {{ currentStep !== void 0 && items.length ? messages.stepperProgress(currentStep, items.length) : "" }}
+      </slot>
+    </span>
   </StepperRoot>
 </template>

package/dist/runtime/components/Stepper.vue.d.ts

@@ -27,6 +27,11 @@ export interface StepperEmits {
     'update:modelValue': [value: number];
 }
 export interface StepperSlots {
+    /** Replaces the live-region text for this instance. Keep the content concise. */
+    progress?: (props: {
+        step: number | undefined;
+        total: number;
+    }) => any;
     indicator?: (props: {
         item: Step;
         index: number;

package/dist/runtime/components/Table.vue

@@ -140,6 +140,10 @@ function onRowClick(rowOriginal, event, toggleSelection) {
 function onRowContextmenu(rowOriginal, event) {
   emit("rowContextmenu", rowOriginal, event);
 }
+function isLastHeader(header) {
+  const lastColumn = table.getVisibleLeafColumns().at(-1);
+  return header.column.getLeafColumns().some((column) => column.id === lastColumn?.id);
+}
 const thProps = computed(() => resolveSlot(ui.value.th, props.ui?.th));
 const thSortableClass = computed(() => resolveSlot(ui.value.thSortable, props.ui?.thSortable).class);
 const sortIconProps = computed(() => resolveSlot(ui.value.sortIcon, props.ui?.sortIcon));
@@ -261,6 +265,7 @@ defineExpose({
                 :ref="(el) => setHeaderRef(header.column.id, el)"
                 :colspan="header.colSpan"
                 :rowspan="header.rowSpan"
+                :data-last-column="isLastHeader(header) || void 0"
                 v-bind="thProps"
                 :class="header.column.getCanSort() ? thSortableClass : void 0"
                 :data-pinned="header.column.getIsPinned() || void 0"
@@ -384,7 +389,7 @@ defineExpose({
 
         <tfoot v-if="hasFooter" v-bind="tfootProps">
           <tr v-for="footerGroup in table.getFooterGroups()" :key="footerGroup.id" v-bind="trProps">
-            <th v-for="header in footerGroup.headers" :key="header.id" :colspan="header.colSpan" v-bind="thProps">
+            <th v-for="header in footerGroup.headers" :key="header.id" :colspan="header.colSpan" :data-last-column="isLastHeader(header) || void 0" v-bind="thProps">
               <FlexRender v-if="!header.isPlaceholder" :footer="header" />
             </th>
           </tr>

package/dist/runtime/internal/stepper-root-element.d.ts

@@ -0,0 +1,5 @@
+/** Keep the primitive's root behavior while replacing its fixed progress announcement. */
+declare const _default: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/internal/stepper-root-element.js

@@ -0,0 +1,8 @@
+import { defineComponent, h } from "vue";
+export default defineComponent({
+  name: "StepperRootElement",
+  inheritAttrs: false,
+  setup(_, { attrs, slots }) {
+    return () => h("div", attrs, slots.default?.().filter((node) => !(node.type === "div" && node.props?.role === "status" && node.props?.["aria-live"] === "polite")));
+  }
+});

package/dist/runtime/structural.css

@@ -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)}
+@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)}

package/dist/runtime/theme/navigation-menu.d.ts

@@ -1,5 +1,9 @@
 import type { VariantProps } from 'tailwind-variants';
 export declare const navigationMenuTheme: import("tailwind-variants").TVReturnType<{
+    contentOrientation: {
+        horizontal: {};
+        vertical: {};
+    };
     orientation: {
         horizontal: {
             root: string;
@@ -72,8 +76,14 @@ export declare const navigationMenuTheme: import("tailwind-variants").TVReturnTy
     childLink: string;
     childLinkLabel: string;
     groupLabel: string;
+    collapsedGroupLabel: string;
+    groupSpacer: string;
     separator: string;
 }, undefined, {
+    contentOrientation: {
+        horizontal: {};
+        vertical: {};
+    };
     orientation: {
         horizontal: {
             root: string;
@@ -146,8 +156,14 @@ export declare const navigationMenuTheme: import("tailwind-variants").TVReturnTy
     childLink: string;
     childLinkLabel: string;
     groupLabel: string;
+    collapsedGroupLabel: string;
+    groupSpacer: string;
     separator: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
+    contentOrientation: {
+        horizontal: {};
+        vertical: {};
+    };
     orientation: {
         horizontal: {
             root: string;
@@ -220,6 +236,8 @@ export declare const navigationMenuTheme: import("tailwind-variants").TVReturnTy
     childLink: string;
     childLinkLabel: string;
     groupLabel: string;
+    collapsedGroupLabel: string;
+    groupSpacer: string;
     separator: string;
 }>>;
 export type NavigationMenuThemeSlots = keyof (typeof navigationMenuTheme)['slots'];

package/dist/runtime/theme/navigation-menu.js

@@ -1,16 +1,8 @@
 import { tv } from "tailwind-variants";
 export const navigationMenuTheme = tv({
   slots: {
-    // w-full - without it, Root shrink-wraps to just its own trigger
-    // buttons' natural width inside whatever flex/grid container it sits
-    // in (confirmed: inside the docs site's own demo wrapper, a bare
-    // `flex` nav ended up narrower than its own dropdown content). Since
-    // `viewport` below is sized `w-full` *relative to Root*, a narrow
-    // Root clipped any dropdown content wider than the nav's own row -
-    // visible as text cut off mid-word in a custom-content example wider
-    // than the default trigger row. A real navbar spans its container's
-    // width anyway (the standard pattern), so this is correct regardless
-    // of the clipping bug it also happens to fix.
+    // Keep the full navigation width available for wide panels. Compact
+    // panels measure their content and follow the active trigger instead.
     root: "flex w-full",
     list: "flex list-none",
     item: "min-w-0",
@@ -62,28 +54,19 @@ export const navigationMenuTheme = tv({
     // link's, so a "Links"-style heading sits flush with the real items
     // below it.
     groupLabel: "px-2.5 pb-1 pt-3 text-xs font-semibold uppercase tracking-wide text-[var(--selaras-resolved-text-muted)] first:pt-0",
+    collapsedGroupLabel: "sr-only",
+    groupSpacer: "h-2",
     separator: "my-1 h-px bg-[var(--selaras-resolved-border-default)]"
   },
   variants: {
+    contentOrientation: {
+      horizontal: {},
+      vertical: {}
+    },
     orientation: {
-      // `content`: full width of the nav bar, not sized to its own
-      // content - confirmed directly against two comparable references
-      // (one's own real theme sizes this `w-full`; the other's own
-      // mega-menu-style wide panel component - not its own separate
-      // narrow cascading-submenu component - does the same). Each open
-      // item's own panel stacks absolutely inside the shared viewport
-      // (only one visible via Presence), rather than sizing the
-      // viewport to whichever is active.
-      // `childList`: adaptive column count (not a fixed grid-cols-2 like
-      // a comparable reference's own default) - a fixed count leaves an
-      // awkward empty cell for an odd number of children. `auto-fit`,
-      // not `auto-fill` - fill reserves empty phantom tracks for
-      // however many columns WOULD fit the container width, leaving
-      // that much dead space when there are fewer actual children than
-      // that - exactly what showed up as a wide empty gap next to a
-      // 4-item grid in a very wide panel. `auto-fit` collapses those
-      // phantom tracks to 0 instead, so existing children always
-      // stretch to fill the full width.
+      // Wide panels fill the navigation bar. Auto-fit collapses unused
+      // columns so the links fill the available space. The compact-content
+      // compound variant below replaces the width and column count.
       horizontal: {
         root: "relative items-center",
         list: "items-center gap-1",
@@ -190,6 +173,15 @@ export const navigationMenuTheme = tv({
     }
   },
   compoundVariants: [
+    {
+      orientation: "horizontal",
+      contentOrientation: "vertical",
+      class: {
+        content: "inset-x-auto left-0 w-[min(20rem,calc(100vw-1.25rem))]",
+        viewport: "inset-x-auto left-[var(--reka-navigation-menu-viewport-left)] w-[var(--reka-navigation-menu-viewport-width)]",
+        childList: "grid-cols-1"
+      }
+    },
     { variant: "pill", active: false, class: { link: "hover:bg-[var(--selaras-resolved-surface-elevated)]", childLink: "hover:bg-[var(--selaras-resolved-surface-elevated)]" } },
     // All registered non-neutral roles use the selected semantic recipe.
     // Neutral follows these entries so its functional-token classes win via
@@ -215,6 +207,7 @@ export const navigationMenuTheme = tv({
   ],
   defaultVariants: {
     orientation: "horizontal",
+    contentOrientation: "vertical",
     color: "primary",
     variant: "pill"
   }