@sewadah/selaras 0.5.0 → 0.6.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "selaras",
   "configKey": "selaras",
-  "version": "0.5.0",
+  "version": "0.6.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,7 +1,8 @@
 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';
+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. */
@@ -12,6 +13,10 @@ export interface NavigationMenuProps {
     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;
+    /** 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 +50,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 +88,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,13 +6,15 @@ 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";
@@ -28,8 +30,11 @@ const props = defineProps({
   variant: { type: String, required: false, default: "pill" },
   highlight: { type: Boolean, required: false },
   collapsed: { type: Boolean, required: false },
+  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();
@@ -44,6 +49,18 @@ const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ??
 const ui = computed(() => theme.value({ orientation: props.orientation, 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);
 }
@@ -93,7 +110,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,26 +161,28 @@ 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>

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

@@ -1,7 +1,8 @@
 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';
+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. */
@@ -12,6 +13,10 @@ export interface NavigationMenuProps {
     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;
+    /** 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 +50,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 +88,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/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])
@@ -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/internal/NavigationMenuTooltip.d.vue.ts

@@ -0,0 +1,19 @@
+import type { TooltipProps } from '../components/Tooltip.vue.js';
+type __VLS_Props = {
+    tooltip?: TooltipProps;
+};
+declare var __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/internal/NavigationMenuTooltip.vue

@@ -0,0 +1,13 @@
+<script setup>
+import Tooltip from "../components/Tooltip.vue";
+defineProps({
+  tooltip: { type: Object, required: false }
+});
+</script>
+
+<template>
+  <Tooltip v-if="tooltip" v-bind="tooltip">
+    <slot />
+  </Tooltip>
+  <slot v-else />
+</template>

package/dist/runtime/internal/NavigationMenuTooltip.vue.d.ts

@@ -0,0 +1,19 @@
+import type { TooltipProps } from '../components/Tooltip.vue.js';
+type __VLS_Props = {
+    tooltip?: TooltipProps;
+};
+declare var __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/theme/date-picker.d.ts

@@ -35,6 +35,7 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
     headCell: string;
     cell: string;
     viewGrid: string;
+    timeSectionStandalone: string;
     timeSection: string;
     arrow: string;
 }, undefined, {
@@ -74,6 +75,7 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
     headCell: string;
     cell: string;
     viewGrid: string;
+    timeSectionStandalone: string;
     timeSection: string;
     arrow: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
@@ -113,6 +115,7 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
     headCell: string;
     cell: string;
     viewGrid: string;
+    timeSectionStandalone: string;
     timeSection: string;
     arrow: string;
 }>>;

package/dist/runtime/theme/date-picker.js

@@ -49,6 +49,7 @@ export const datePickerTheme = tv({
     viewGrid: "grid grid-cols-3 gap-1",
     // Hour/minute granularity only - sits below the day grid, separated by
     // a divider so it doesn't read as part of the grid itself.
+    timeSectionStandalone: "flex items-center justify-center gap-1.5",
     timeSection: "mt-3 flex items-center justify-center gap-1.5 border-t border-[var(--selaras-resolved-border-default)] pt-3",
     arrow: "fill-[var(--selaras-resolved-surface-default)] stroke-[var(--selaras-resolved-border-default)] stroke-1"
   },

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

@@ -1,4 +1,7 @@
+import type { PopoverProps } from '../components/Popover.vue.js';
+import type { TooltipProps } from '../components/Tooltip.vue.js';
 import type { HotkeyOptions } from '../directives/hotkey.js';
+export type NavigationMenuPopover = Pick<PopoverProps, 'side' | 'align' | 'positioning' | 'portal' | 'arrow' | 'ui'>;
 export interface NavigationMenuItem {
     label: string;
     icon?: string;
@@ -6,6 +9,10 @@ export interface NavigationMenuItem {
     target?: string;
     rel?: string;
     ariaLabel?: string;
+    /** Collapsed leaf tooltip override. `false` disables this item's tooltip. */
+    tooltip?: boolean | TooltipProps;
+    /** Presentation of this item's collapsed child flyout. */
+    popover?: NavigationMenuPopover;
     disabled?: boolean;
     /** Force active state - otherwise auto-detected against the current route when `to` is set. */
     active?: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sewadah/selaras",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A UI component library for Nuxt, built on Reka UI and Tailwind v4",
   "author": "Wicaksana Pratama <wicaksanapratama@gmail.com>",
   "license": "MIT",