@eslamdevui/ui 4.1.1-rc.1 → 4.3.0

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

@@ -1,5 +1,5 @@
-import type { ButtonHTMLAttributes } from 'vue';
 import type { RouterLinkProps, RouteLocationRaw } from 'vue-router';
+import type { ButtonHTMLAttributes, AnchorHTMLAttributes } from '../types/html';
 interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
     /**
      * Route Location the link should navigate to when clicked on.
@@ -44,8 +44,13 @@ interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
      * Escape hatch to disable `prefetch` attribute.
      */
     noPrefetch?: boolean;
+    /**
+     * An option to either add or remove trailing slashes in the `href` for this specific link.
+     * Overrides the global `trailingSlash` option if provided.
+     */
+    trailingSlash?: 'append' | 'remove';
 }
-export interface LinkProps extends NuxtLinkProps {
+export interface LinkProps extends NuxtLinkProps, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled'>, /** @vue-ignore */ Omit<AnchorHTMLAttributes, 'href' | 'target' | 'rel' | 'type'> {
     /**
      * The element or component this component should render as when not a link.
      * @defaultValue 'button'
@@ -72,19 +77,24 @@ export interface LinkProps extends NuxtLinkProps {
     raw?: boolean;
     class?: any;
 }
+/**
+ * Link-related props that can be omitted from ButtonProps when link functionality is not needed.
+ * Use this with `Omit<ButtonProps, LinkPropsKeys>` in components where buttons should not act as links.
+ */
+export type LinkPropsKeys = 'to' | 'href' | 'target' | 'rel' | 'noRel' | 'external' | 'prefetch' | 'prefetchOn' | 'prefetchedClass' | 'noPrefetch' | 'trailingSlash' | 'replace' | 'ariaCurrentValue' | 'active' | 'activeClass' | 'exact' | 'exactQuery' | 'exactHash' | 'inactiveClass' | 'download' | 'ping' | 'referrerpolicy' | 'hreflang' | 'media';
 export interface LinkSlots {
     default(props: {
         active: boolean;
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{}>, {
     as: any;
     type: "reset" | "submit" | "button";
-    ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
     active: boolean;
+    ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -11,14 +11,14 @@ export interface LinkBaseProps {
     active?: boolean;
     isExternal?: boolean;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkBaseProps> & Readonly<{}>, {
     as: string;
     type: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -11,14 +11,14 @@ export interface LinkBaseProps {
     active?: boolean;
     isExternal?: boolean;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkBaseProps> & Readonly<{}>, {
     as: string;
     type: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -9,9 +9,9 @@ export interface MainProps {
 export interface MainSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MainProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MainProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MainSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MainProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MainProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MainSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -9,9 +9,9 @@ export interface MainProps {
 export interface MainSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MainProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MainProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MainSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MainProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MainProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MainSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -39,13 +39,13 @@ export interface MarqueeProps {
 export interface MarqueeSlots {
     default(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MarqueeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MarqueeProps> & Readonly<{}>, {
     repeat: number;
     orientation: Marquee["variants"]["orientation"];
     overlay: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MarqueeSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Marquee.vue

@@ -28,13 +28,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.marquee || {}
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-for="i in repeat" :key="i" :class="ui.content({ class: [props.ui?.content] })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-for="i in repeat" :key="i" data-slot="content" :class="ui.content({ class: [props.ui?.content] })">
       <slot />
     </div>
   </Primitive>
 </template>
-
-<style>
-@keyframes marquee{0%{transform:translateZ(0);will-change:transform}to{transform:translate3d(calc(-100% - var(--gap)),0,0);will-change:transform}}@keyframes marquee-rtl{0%{transform:translateZ(0);will-change:transform}to{transform:translate3d(calc(100% + var(--gap)),0,0);will-change:transform}}@keyframes marquee-vertical{0%{transform:translateZ(0);will-change:transform}to{transform:translate3d(0,calc(-100% - var(--gap)),0);will-change:transform}}@keyframes marquee-vertical-rtl{0%{transform:translate3d(0,calc(-100% - var(--gap)),0);will-change:transform}to{transform:translate3d(0,calc(-100%*var(--gap)),0);will-change:transform}}
-</style>

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

@@ -39,13 +39,13 @@ export interface MarqueeProps {
 export interface MarqueeSlots {
     default(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MarqueeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MarqueeProps> & Readonly<{}>, {
     repeat: number;
     orientation: Marquee["variants"]["orientation"];
     overlay: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MarqueeSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,7 +1,7 @@
 import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/modal';
-import type { ButtonProps, IconProps } from '../types';
+import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
 import type { EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Modal = ComponentConfig<typeof theme, AppConfig, 'modal'>;
@@ -15,6 +15,11 @@ export interface ModalProps extends DialogRootProps {
      * @defaultValue true
      */
     overlay?: boolean;
+    /**
+     * When `true`, enables scrollable overlay mode where content scrolls within the overlay.
+     * @defaultValue false
+     */
+    scrollable?: boolean;
     /**
      * Animate the modal when opening or closing.
      * @defaultValue true
@@ -35,7 +40,7 @@ export interface ModalProps extends DialogRootProps {
      * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
      * @defaultValue true
      */
-    close?: boolean | Partial<ButtonProps>;
+    close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed in the close button.
      * @defaultValue appConfig.ui.icons.close
@@ -78,6 +83,8 @@ export interface ModalSlots {
         close: () => void;
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "after:leave": () => any;
@@ -89,15 +96,13 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ModalP
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
 }>, {
-    close: boolean | Partial<ButtonProps>;
+    close: boolean | Omit<ButtonProps, LinkPropsKeys>;
     modal: boolean;
     portal: boolean | string | HTMLElement;
     overlay: boolean;
     transition: boolean;
     dismissible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ModalSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Modal.vue

@@ -5,7 +5,7 @@ import theme from "#build/ui/modal";
 <script setup>
 import { computed, toRef } from "vue";
 import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from "reka-ui";
-import { reactivePick } from "@vueuse/core";
+import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
@@ -16,11 +16,12 @@ const props = defineProps({
   description: { type: String, required: false },
   content: { type: Object, required: false },
   overlay: { type: Boolean, required: false, default: true },
+  scrollable: { type: Boolean, required: false },
   transition: { type: Boolean, required: false, default: true },
   fullscreen: { type: Boolean, required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   close: { type: [Boolean, Object], required: false, default: true },
-  closeIcon: { type: [String, Object], required: false },
+  closeIcon: { type: null, required: false },
   dismissible: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
   ui: { type: null, required: false },
@@ -46,24 +47,40 @@ const contentEvents = computed(() => {
       return acc;
     }, {});
   }
+  if (props.scrollable) {
+    return {
+      // FIXME: This is a workaround to prevent the modal from closing when clicking on the scrollbar https://reka-ui.com/docs/components/dialog#scrollable-overlay but it's not working on Mac OS.
+      pointerDownOutside: (e) => {
+        const originalEvent = e.detail.originalEvent;
+        const target = originalEvent.target;
+        if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+          e.preventDefault();
+        }
+      }
+    };
+  }
   return {};
 });
+const [DefineContentTemplate, ReuseContentTemplate] = createReusableTemplate();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.modal || {} })({
   transition: props.transition,
-  fullscreen: props.fullscreen
+  fullscreen: props.fullscreen,
+  overlay: props.overlay,
+  scrollable: props.scrollable
 }));
 </script>
 
 <template>
   <DialogRoot v-slot="{ open, close }" v-bind="rootProps">
-    <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
-      <slot :open="open" />
-    </DialogTrigger>
-
-    <DialogPortal v-bind="portalProps">
-      <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
-
-      <DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-enter="emits('after:enter')" @after-leave="emits('after:leave')" v-on="contentEvents">
+    <DefineContentTemplate>
+      <DialogContent
+        data-slot="content"
+        :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
+        v-bind="contentProps"
+        @after-enter="emits('after:enter')"
+        @after-leave="emits('after:leave')"
+        v-on="contentEvents"
+      >
         <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
           <DialogTitle v-if="title || !!slots.title">
             <slot name="title">
@@ -79,16 +96,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.modal || {} }
         </VisuallyHidden>
 
         <slot name="content" :close="close">
-          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
+          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
             <slot name="header" :close="close">
-              <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-                <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+              <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+                <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
                   <slot name="title">
                     {{ title }}
                   </slot>
                 </DialogTitle>
 
-                <DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+                <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
                   <slot name="description">
                     {{ description }}
                   </slot>
@@ -106,6 +123,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.modal || {} }
                     variant="ghost"
                     :aria-label="t('modal.close')"
                     v-bind="typeof props.close === 'object' ? props.close : {}"
+                    data-slot="close"
                     :class="ui.close({ class: props.ui?.close })"
                   />
                 </slot>
@@ -113,15 +131,33 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.modal || {} }
             </slot>
           </div>
 
-          <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
+          <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: props.ui?.body })">
             <slot name="body" :close="close" />
           </div>
 
-          <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+          <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
             <slot name="footer" :close="close" />
           </div>
         </slot>
       </DialogContent>
+    </DefineContentTemplate>
+
+    <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
+      <slot :open="open" />
+    </DialogTrigger>
+
+    <DialogPortal v-bind="portalProps">
+      <template v-if="scrollable">
+        <DialogOverlay data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })">
+          <ReuseContentTemplate />
+        </DialogOverlay>
+      </template>
+
+      <template v-else>
+        <DialogOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
+
+        <ReuseContentTemplate />
+      </template>
     </DialogPortal>
   </DialogRoot>
 </template>

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

@@ -1,7 +1,7 @@
 import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/modal';
-import type { ButtonProps, IconProps } from '../types';
+import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
 import type { EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Modal = ComponentConfig<typeof theme, AppConfig, 'modal'>;
@@ -15,6 +15,11 @@ export interface ModalProps extends DialogRootProps {
      * @defaultValue true
      */
     overlay?: boolean;
+    /**
+     * When `true`, enables scrollable overlay mode where content scrolls within the overlay.
+     * @defaultValue false
+     */
+    scrollable?: boolean;
     /**
      * Animate the modal when opening or closing.
      * @defaultValue true
@@ -35,7 +40,7 @@ export interface ModalProps extends DialogRootProps {
      * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
      * @defaultValue true
      */
-    close?: boolean | Partial<ButtonProps>;
+    close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed in the close button.
      * @defaultValue appConfig.ui.icons.close
@@ -78,6 +83,8 @@ export interface ModalSlots {
         close: () => void;
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "after:leave": () => any;
@@ -89,15 +96,13 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ModalP
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
 }>, {
-    close: boolean | Partial<ButtonProps>;
+    close: boolean | Omit<ButtonProps, LinkPropsKeys>;
     modal: boolean;
     portal: boolean | string | HTMLElement;
     overlay: boolean;
     transition: boolean;
     dismissible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ModalSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,4 +1,4 @@
-import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui';
+import type { NavigationMenuRootProps, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/navigation-menu';
 import type { AvatarProps, BadgeProps, IconProps, LinkProps, PopoverProps, TooltipProps } from '../types';
@@ -57,12 +57,40 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkTrailingBadgeSize' | 'linkTrailingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childLabel' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'childLinkDescription'>;
     [key: string]: any;
 }
-export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'>, Pick<AccordionRootProps, 'disabled' | 'type' | 'collapsible'> {
+type SingleOrMultipleType = 'single' | 'multiple';
+type Orientation = NavigationMenuRootProps['orientation'];
+type NavigationMenuModelValue<K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation> = O extends 'horizontal' ? string : K extends 'single' ? string : K extends 'multiple' ? string[] : string | string[];
+export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>, K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation> extends Pick<NavigationMenuRootProps, 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'>, Pick<AccordionRootProps, 'disabled' | 'collapsible'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
      */
     as?: any;
+    /**
+     * Determines whether a "single" or "multiple" items can be selected at a time.
+     *
+     * Only works when `orientation` is `vertical`.
+     * @defaultValue 'multiple'
+     */
+    type?: K;
+    /**
+     * The controlled value of the active item(s).
+     * - In horizontal orientation: always `string`
+     * - In vertical orientation with `type="single"`: `string`
+     * - In vertical orientation with `type="multiple"`: `string[]`
+     *
+     * Use this when you need to control the state of the items. Can be binded with `v-model`
+     */
+    modelValue?: NavigationMenuModelValue<K, O>;
+    /**
+     * The default active value of the item(s).
+     * - In horizontal orientation: always `string`
+     * - In vertical orientation with `type="single"`: `string`
+     * - In vertical orientation with `type="multiple"`: `string[]`
+     *
+     * Use when you do not need to control the state of the item(s).
+     */
+    defaultValue?: NavigationMenuModelValue<K, O>;
     /**
      * The icon displayed to open the menu.
      * @defaultValue appConfig.ui.icons.chevronDown
@@ -89,7 +117,7 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
      * The orientation of the menu.
      * @defaultValue 'horizontal'
      */
-    orientation?: NavigationMenuRootProps['orientation'];
+    orientation?: O;
     /**
      * Collapse the navigation menu to only show icons.
      * Only works when `orientation` is `vertical`.
@@ -135,8 +163,15 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
     class?: any;
     ui?: NavigationMenu['slots'];
 }
-export interface NavigationMenuEmits extends NavigationMenuRootEmits {
-}
+export type NavigationMenuEmits<K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation> = {
+    /**
+     * Event handler called when the value changes.
+     * - In horizontal orientation: emits `string`
+     * - In vertical orientation with `type="single"`: emits `string | undefined`
+     * - In vertical orientation with `type="multiple"`: emits `string[] | undefined`
+     */
+    'update:modelValue': [value: NavigationMenuModelValue<K, O> | undefined];
+};
 type SlotProps<T extends NavigationMenuItem> = (props: {
     item: T;
     index: number;
@@ -166,17 +201,21 @@ export type NavigationMenuSlots<A extends ArrayOrNested<NavigationMenuItem> = Ar
     active?: boolean;
     ui: NavigationMenu['ui'];
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<NavigationMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<NavigationMenuProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:modelValue", value: string) => void>>> & import("vue").PublicProps;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<NavigationMenuItem>, K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<NavigationMenuProps<T, K, O> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:modelValue", value: NavigationMenuModelValue<K, O> | undefined) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: NavigationMenuSlots<T, NestedItem<T>>;
-    emit: (evt: "update:modelValue", value: string) => void;
+    emit: (evt: "update:modelValue", value: NavigationMenuModelValue<K, O> | undefined) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};