@sewadah/selaras 0.5.0 → 0.7.0

package/dist/module.json

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

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

@@ -2,6 +2,8 @@ import type { DashboardSidebarThemeSlots } from '../theme/dashboard-sidebar.js';
 import type { UiProp } from '../utils/ui.js';
 type __VLS_Slots = DashboardSidebarSlots;
 export interface DashboardSidebarProps {
+    /** Controlled desktop collapse state. Omit to keep resizing and persistence uncontrolled. */
+    collapsed?: boolean;
     /** @default 260 */
     defaultSize?: number;
     /** @default 200 */
@@ -16,6 +18,9 @@ export interface DashboardSidebarProps {
     sizeUnit?: 'px' | '%';
     ui?: UiProp<DashboardSidebarThemeSlots>;
 }
+export interface DashboardSidebarEmits {
+    'update:collapsed': [value: boolean];
+}
 export interface DashboardSidebarSlots {
     /** `isCollapsed` lets a header (a logo mark, say) swap to a narrower version once the sidebar collapses to its icon rail - always `false` on mobile, where there's no in-between state, just the drawer open or closed. */
     header?: (props: {
@@ -29,7 +34,17 @@ export interface DashboardSidebarSlots {
         isCollapsed: boolean;
     }) => any;
 }
-declare const __VLS_base: import("vue").DefineComponent<DashboardSidebarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare function toggle(): void;
+declare const __VLS_base: import("vue").DefineComponent<DashboardSidebarProps, {
+    collapse: () => void;
+    expand: () => void;
+    toggle: typeof toggle;
+    isCollapsed: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:collapsed": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<DashboardSidebarProps> & Readonly<{
+    "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/DashboardSidebar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, inject, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, inject, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import { dashboardSidebarTheme } from "../theme/dashboard-sidebar";
 import { DASHBOARD_INJECTION_KEY } from "../utils/injection-keys";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
@@ -8,6 +8,7 @@ import ScrollArea from "./ScrollArea.vue";
 import SplitterPanel from "./SplitterPanel.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
+  collapsed: { type: Boolean, required: false, default: void 0 },
   defaultSize: { type: Number, required: false, default: 260 },
   minSize: { type: Number, required: false, default: 200 },
   maxSize: { type: Number, required: false, default: 400 },
@@ -16,22 +17,48 @@ const props = defineProps({
   sizeUnit: { type: String, required: false, default: "px" },
   ui: { type: Object, required: false }
 });
+const emit = defineEmits(["update:collapsed"]);
 defineSlots();
 const dashboard = inject(DASHBOARD_INJECTION_KEY, null);
 const isMobile = computed(() => dashboard?.isMobile.value ?? false);
 const panelRef = ref();
 const mobileOpen = ref(false);
+let panelReady = false;
+function setCollapsed(value) {
+  if (isMobile.value || !props.collapsible || !panelReady)
+    return;
+  if (value)
+    panelRef.value?.collapse();
+  else
+    panelRef.value?.expand();
+}
+watch(() => props.collapsed, (value) => {
+  if (value !== void 0)
+    setCollapsed(value);
+});
+defineExpose({
+  collapse: () => setCollapsed(true),
+  expand: () => setCollapsed(false),
+  toggle,
+  isCollapsed: computed(() => panelRef.value?.isCollapsed ?? false)
+});
 function toggle() {
   if (isMobile.value) {
     mobileOpen.value = !mobileOpen.value;
     return;
   }
-  if (panelRef.value?.isCollapsed)
-    panelRef.value.expand();
-  else
-    panelRef.value?.collapse();
+  setCollapsed(!panelRef.value?.isCollapsed);
 }
 function handleResize(size) {
+  if (!panelReady) {
+    nextTick(() => {
+      if (!panelRef.value || panelReady)
+        return;
+      panelReady = true;
+      if (props.collapsed !== void 0)
+        setCollapsed(props.collapsed);
+    });
+  }
   if (dashboard)
     dashboard.lastDesktopWidthPx.value = size;
 }
@@ -40,11 +67,22 @@ onMounted(() => {
   if (isMobile.value || targetWidthPx === void 0)
     return;
   setTimeout(() => {
-    panelRef.value?.resize(targetWidthPx);
+    if (props.collapsed === void 0)
+      panelRef.value?.resize(targetWidthPx);
   }, 50);
 });
 if (dashboard)
   dashboard.toggleSidebar.value = toggle;
+watch(() => panelRef.value?.isCollapsed, (value) => {
+  if (!panelReady || isMobile.value || value === void 0)
+    return;
+  if (value !== props.collapsed)
+    emit("update:collapsed", value);
+  nextTick(() => {
+    if (props.collapsed !== void 0 && panelRef.value?.isCollapsed !== props.collapsed)
+      setCollapsed(props.collapsed);
+  });
+}, { flush: "post" });
 const isSidebarCollapsed = computed(() => isMobile.value ? !mobileOpen.value : panelRef.value?.isCollapsed ?? false);
 if (dashboard) {
   watch(isSidebarCollapsed, (value) => {

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

@@ -2,6 +2,8 @@ import type { DashboardSidebarThemeSlots } from '../theme/dashboard-sidebar.js';
 import type { UiProp } from '../utils/ui.js';
 type __VLS_Slots = DashboardSidebarSlots;
 export interface DashboardSidebarProps {
+    /** Controlled desktop collapse state. Omit to keep resizing and persistence uncontrolled. */
+    collapsed?: boolean;
     /** @default 260 */
     defaultSize?: number;
     /** @default 200 */
@@ -16,6 +18,9 @@ export interface DashboardSidebarProps {
     sizeUnit?: 'px' | '%';
     ui?: UiProp<DashboardSidebarThemeSlots>;
 }
+export interface DashboardSidebarEmits {
+    'update:collapsed': [value: boolean];
+}
 export interface DashboardSidebarSlots {
     /** `isCollapsed` lets a header (a logo mark, say) swap to a narrower version once the sidebar collapses to its icon rail - always `false` on mobile, where there's no in-between state, just the drawer open or closed. */
     header?: (props: {
@@ -29,7 +34,17 @@ export interface DashboardSidebarSlots {
         isCollapsed: boolean;
     }) => any;
 }
-declare const __VLS_base: import("vue").DefineComponent<DashboardSidebarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare function toggle(): void;
+declare const __VLS_base: import("vue").DefineComponent<DashboardSidebarProps, {
+    collapse: () => void;
+    expand: () => void;
+    toggle: typeof toggle;
+    isCollapsed: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:collapsed": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<DashboardSidebarProps> & Readonly<{
+    "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/DatePicker.vue

@@ -446,7 +446,7 @@ const timeBodyProps = computed(() => ({
   close: () => {
     onUpdateOpen(false);
   },
-  timeSectionProps: timeSectionProps.value
+  timeSectionProps: resolveSlot(ui.value.timeSectionStandalone, props.ui?.timeSectionStandalone)
 }));
 const buttonTriggerUi = computed(() => ({
   base: [

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

@@ -1,17 +1,28 @@
 import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
 import type { ColorRole } from '../utils/color-registry.js';
-import type { NavigationMenuItem } 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. */
+    popover?: NavigationMenuPopover;
     ui?: UiProp<NavigationMenuThemeSlots>;
 }
 declare var __VLS_8: {}, __VLS_17: string, __VLS_18: {
@@ -45,19 +56,19 @@ declare var __VLS_8: {}, __VLS_17: string, __VLS_18: {
 }, __VLS_124: string, __VLS_125: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_147: string, __VLS_148: {
+}, __VLS_153: string, __VLS_154: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_151: string, __VLS_152: {
+}, __VLS_157: string, __VLS_158: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_160: string, __VLS_161: {
+}, __VLS_166: string, __VLS_167: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_164: string, __VLS_165: {
+}, __VLS_170: string, __VLS_171: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_172: {};
+}, __VLS_178: {};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_17>]?: (props: typeof __VLS_18) => any;
 } & {
@@ -83,17 +94,17 @@ type __VLS_Slots = {} & {
 } & {
     [K in NonNullable<typeof __VLS_124>]?: (props: typeof __VLS_125) => any;
 } & {
-    [K in NonNullable<typeof __VLS_147>]?: (props: typeof __VLS_148) => any;
+    [K in NonNullable<typeof __VLS_153>]?: (props: typeof __VLS_154) => any;
 } & {
-    [K in NonNullable<typeof __VLS_151>]?: (props: typeof __VLS_152) => any;
+    [K in NonNullable<typeof __VLS_157>]?: (props: typeof __VLS_158) => any;
 } & {
-    [K in NonNullable<typeof __VLS_160>]?: (props: typeof __VLS_161) => any;
+    [K in NonNullable<typeof __VLS_166>]?: (props: typeof __VLS_167) => any;
 } & {
-    [K in NonNullable<typeof __VLS_164>]?: (props: typeof __VLS_165) => any;
+    [K in NonNullable<typeof __VLS_170>]?: (props: typeof __VLS_171) => any;
 } & {
     'list-leading'?: (props: typeof __VLS_8) => any;
 } & {
-    'list-trailing'?: (props: typeof __VLS_172) => any;
+    'list-trailing'?: (props: typeof __VLS_178) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<NavigationMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavigationMenuProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/NavigationMenu.vue

@@ -6,16 +6,18 @@ import {
   NavigationMenuRoot,
   NavigationMenuTrigger,
   NavigationMenuViewport,
-  NavigationMenuItem as RekaNavigationMenuItem
+  NavigationMenuItem as RekaNavigationMenuItem,
+  useDirection
 } from "reka-ui";
 import { computed, ref, useSlots } from "vue";
 import { NuxtLink } from "#components";
 import { useRoute } from "#imports";
 import { useIcons } from "../composables/use-icons";
 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";
@@ -24,15 +26,28 @@ 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 }
 });
+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])
@@ -41,17 +56,29 @@ 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) {
+  const setting = item.tooltip ?? props.tooltip;
+  if (props.orientation !== "vertical" || !props.collapsed || item.disabled || !setting)
+    return void 0;
+  return {
+    text: item.ariaLabel ?? item.label,
+    side: direction.value === "rtl" ? "left" : "right",
+    delayDuration: 0,
+    ...typeof props.tooltip === "object" ? props.tooltip : {},
+    ...typeof item.tooltip === "object" ? item.tooltip : {}
+  };
+}
 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) {
@@ -76,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>
@@ -93,7 +121,7 @@ function onSelect(item, event) {
           </template>
           <template v-else-if="orientation === 'vertical' && item.children?.length && collapsed">
             <NavigationMenuFlyoutTrigger
-              :item="item" :color="color" :variant="variant" :highlight="highlight" :on-select="onSelect" :ui="props.ui"
+              :item="item" :color="color" :variant="variant" :highlight="highlight" :on-select="onSelect" :ui="props.ui" :popover="props.popover"
               :open="openFlyoutLabel === item.label" :another-flyout-open="anotherFlyoutOpen(item)"
               @update:open="onFlyoutOpenChange(item, $event)"
             >
@@ -144,31 +172,33 @@ function onSelect(item, event) {
               </slot>
             </NavigationMenuContent>
           </template>
-          <NavigationMenuLink v-else as-child :active="isActive(item)">
-            <component
-              :is="item.to ? NuxtLink : 'button'" v-hotkey="navigationMenuHotkey(item)" :to="item.to"
-              :type="item.to ? void 0 : 'button'" :disabled="item.to ? void 0 : item.disabled"
-              v-bind="linkProps(item)" :target="item.target" :rel="item.rel"
-              :aria-label="item.ariaLabel" :aria-disabled="item.to && item.disabled ? 'true' : void 0" @click="onSelect(item, $event)"
-            >
-              <slot :name="slotName(item, '')" :item="item" :active="isActive(item)">
-                <slot :name="slotName(item, '-leading')" :item="item" :active="isActive(item)">
-                  <Icon v-if="item.icon" :name="item.icon" v-bind="resolveSlot(ui.linkIcon, props.ui?.linkIcon)" />
-                  <span v-else-if="collapsed" v-bind="resolveSlot(ui.linkIconFallback, props.ui?.linkIconFallback)" aria-hidden="true">{{ item.label.charAt(0) }}</span>
+          <NavigationMenuTooltip v-else :tooltip="tooltipProps(item)">
+            <NavigationMenuLink as-child :active="isActive(item)">
+              <component
+                :is="item.to ? NuxtLink : 'button'" v-hotkey="navigationMenuHotkey(item)" :to="item.to"
+                :type="item.to ? void 0 : 'button'" :disabled="item.to ? void 0 : item.disabled"
+                v-bind="linkProps(item)" :target="item.target" :rel="item.rel"
+                :aria-label="item.ariaLabel" :aria-disabled="item.to && item.disabled ? 'true' : void 0" @click="onSelect(item, $event)"
+              >
+                <slot :name="slotName(item, '')" :item="item" :active="isActive(item)">
+                  <slot :name="slotName(item, '-leading')" :item="item" :active="isActive(item)">
+                    <Icon v-if="item.icon" :name="item.icon" v-bind="resolveSlot(ui.linkIcon, props.ui?.linkIcon)" />
+                    <span v-else-if="collapsed" v-bind="resolveSlot(ui.linkIconFallback, props.ui?.linkIconFallback)" aria-hidden="true">{{ item.label.charAt(0) }}</span>
+                  </slot>
+                  <slot :name="slotName(item, '-label')" :item="item" :active="isActive(item)">
+                    <span v-bind="resolveSlot(ui.linkLabel, props.ui?.linkLabel)">{{ item.label }}</span>
+                  </slot>
+                  <slot :name="slotName(item, '-trailing')" :item="item" :active="isActive(item)" />
+                  <ShortcutHint :shortcut="collapsed ? void 0 : item.shortcut" />
                 </slot>
-                <slot :name="slotName(item, '-label')" :item="item" :active="isActive(item)">
-                  <span v-bind="resolveSlot(ui.linkLabel, props.ui?.linkLabel)">{{ item.label }}</span>
-                </slot>
-                <slot :name="slotName(item, '-trailing')" :item="item" :active="isActive(item)" />
-                <ShortcutHint :shortcut="collapsed ? void 0 : item.shortcut" />
-              </slot>
-            </component>
-          </NavigationMenuLink>
+              </component>
+            </NavigationMenuLink>
+          </NavigationMenuTooltip>
         </RekaNavigationMenuItem>
       </template>
     </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,17 +1,28 @@
 import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
 import type { ColorRole } from '../utils/color-registry.js';
-import type { NavigationMenuItem } 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. */
+    popover?: NavigationMenuPopover;
     ui?: UiProp<NavigationMenuThemeSlots>;
 }
 declare var __VLS_8: {}, __VLS_17: string, __VLS_18: {
@@ -45,19 +56,19 @@ declare var __VLS_8: {}, __VLS_17: string, __VLS_18: {
 }, __VLS_124: string, __VLS_125: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_147: string, __VLS_148: {
+}, __VLS_153: string, __VLS_154: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_151: string, __VLS_152: {
+}, __VLS_157: string, __VLS_158: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_160: string, __VLS_161: {
+}, __VLS_166: string, __VLS_167: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_164: string, __VLS_165: {
+}, __VLS_170: string, __VLS_171: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_172: {};
+}, __VLS_178: {};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_17>]?: (props: typeof __VLS_18) => any;
 } & {
@@ -83,17 +94,17 @@ type __VLS_Slots = {} & {
 } & {
     [K in NonNullable<typeof __VLS_124>]?: (props: typeof __VLS_125) => any;
 } & {
-    [K in NonNullable<typeof __VLS_147>]?: (props: typeof __VLS_148) => any;
+    [K in NonNullable<typeof __VLS_153>]?: (props: typeof __VLS_154) => any;
 } & {
-    [K in NonNullable<typeof __VLS_151>]?: (props: typeof __VLS_152) => any;
+    [K in NonNullable<typeof __VLS_157>]?: (props: typeof __VLS_158) => any;
 } & {
-    [K in NonNullable<typeof __VLS_160>]?: (props: typeof __VLS_161) => any;
+    [K in NonNullable<typeof __VLS_166>]?: (props: typeof __VLS_167) => any;
 } & {
-    [K in NonNullable<typeof __VLS_164>]?: (props: typeof __VLS_165) => any;
+    [K in NonNullable<typeof __VLS_170>]?: (props: typeof __VLS_171) => any;
 } & {
     'list-leading'?: (props: typeof __VLS_8) => any;
 } & {
-    'list-trailing'?: (props: typeof __VLS_172) => any;
+    'list-trailing'?: (props: typeof __VLS_178) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<NavigationMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavigationMenuProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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.d.vue.ts

@@ -1,9 +1,10 @@
 import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
 import type { ColorRole } from '../utils/color-registry.js';
-import type { NavigationMenuItem } from '../utils/navigation-menu.js';
+import type { NavigationMenuItem, NavigationMenuPopover } from '../utils/navigation-menu.js';
 import type { UiProp } from '../utils/ui.js';
 export interface NavigationMenuFlyoutTriggerProps {
     item: NavigationMenuItem;
+    popover?: NavigationMenuPopover;
     color?: ColorRole;
     variant?: 'pill' | 'link';
     highlight?: boolean;

package/dist/runtime/components/NavigationMenuFlyoutTrigger.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useDirection } from "reka-ui";
 import { computed, ref, useSlots } from "vue";
 import { navigationMenuTheme } from "../theme/navigation-menu";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
@@ -8,6 +9,7 @@ import NavigationMenuFlyoutList from "./NavigationMenuFlyoutList.vue";
 import Popover from "./Popover.vue";
 const props = defineProps({
   item: { type: Object, required: true },
+  popover: { type: Object, required: false },
   color: { type: null, required: false },
   variant: { type: String, required: false },
   highlight: { type: Boolean, required: false },
@@ -18,6 +20,14 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:open"]);
 const slots = useSlots();
+const direction = useDirection();
+const popoverProps = computed(() => ({
+  side: direction.value === "rtl" ? "left" : "right",
+  align: "start",
+  ...props.popover,
+  ...props.item.popover,
+  ui: { content: "p-2", ...props.popover?.ui, ...props.item.popover?.ui }
+}));
 function slotName(item, suffix) {
   const named = item.slot ? `${item.slot}${suffix}` : void 0;
   if (named && slots[named])
@@ -27,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) {
@@ -88,7 +98,7 @@ function onContentKeydown(event) {
 
 <template>
   <Popover
-    :open="open" side="right" align="start" :return-focus-on-close="!anotherFlyoutOpen" :ui="{ content: 'p-2' }"
+    v-bind="popoverProps" :open="open" :return-focus-on-close="!anotherFlyoutOpen"
     @update:open="emit('update:open', $event)" @open-auto-focus="onOpenAutoFocus"
   >
     <button

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

@@ -1,9 +1,10 @@
 import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
 import type { ColorRole } from '../utils/color-registry.js';
-import type { NavigationMenuItem } from '../utils/navigation-menu.js';
+import type { NavigationMenuItem, NavigationMenuPopover } from '../utils/navigation-menu.js';
 import type { UiProp } from '../utils/ui.js';
 export interface NavigationMenuFlyoutTriggerProps {
     item: NavigationMenuItem;
+    popover?: NavigationMenuPopover;
     color?: ColorRole;
     variant?: 'pill' | 'link';
     highlight?: boolean;

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>;