@nuxt/ui 4.0.1 → 4.2.0

package/dist/runtime/components/DashboardSidebar.vue

@@ -80,21 +80,23 @@ function toggleOpen() {
 
 <template>
   <DefineToggleTemplate>
-    <slot name="toggle" :open="open" :toggle="toggleOpen">
+    <slot name="toggle" :open="open" :toggle="toggleOpen" :ui="ui">
       <UDashboardSidebarToggle
         v-if="toggle"
         v-bind="typeof toggle === 'object' ? toggle : {}"
         :side="toggleSide"
+        data-slot="toggle"
         :class="ui.toggle({ class: props.ui?.toggle, toggleSide })"
       />
     </slot>
   </DefineToggleTemplate>
 
   <DefineResizeHandleTemplate>
-    <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart" :on-double-click="onDoubleClick">
+    <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart" :on-double-click="onDoubleClick" :ui="ui">
       <UDashboardResizeHandle
         v-if="resizable"
         :aria-controls="id"
+        data-slot="handle"
         :class="ui.handle({ class: props.ui?.handle })"
         @mousedown="onMouseDown"
         @touchstart="onTouchStart"
@@ -111,18 +113,19 @@ function toggleOpen() {
     v-bind="$attrs"
     :data-collapsed="isCollapsed"
     :data-dragging="isDragging"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="{ '--width': `${size || 0}${dashboardContext.unit}` }"
   >
-    <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
+    <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" :collapsed="isCollapsed" :collapse="collapse" />
     </div>
 
-    <div :class="ui.body({ class: props.ui?.body })">
+    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <slot :collapsed="isCollapsed" :collapse="collapse" />
     </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" :collapsed="isCollapsed" :collapse="collapse" />
     </div>
   </div>
@@ -139,9 +142,9 @@ function toggleOpen() {
   content: ui.content({ class: props.ui?.content })
 }"
   >
-    <template #content>
-      <slot name="content">
-        <div v-if="!!slots.header || mode !== 'drawer'" :class="ui.header({ class: props.ui?.header, menu: true })">
+    <template #content="contentData">
+      <slot name="content" v-bind="contentData">
+        <div v-if="!!slots.header || mode !== 'drawer'" data-slot="header" :class="ui.header({ class: props.ui?.header, menu: true })">
           <ReuseToggleTemplate v-if="mode !== 'drawer' && toggleSide === 'left'" />
 
           <slot name="header" />
@@ -149,11 +152,11 @@ function toggleOpen() {
           <ReuseToggleTemplate v-if="mode !== 'drawer' && toggleSide === 'right'" />
         </div>
 
-        <div :class="ui.body({ class: props.ui?.body, menu: true })">
+        <div data-slot="body" :class="ui.body({ class: props.ui?.body, menu: true })">
           <slot />
         </div>
 
-        <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer, menu: true })">
+        <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer, menu: true })">
           <slot name="footer" />
         </div>
       </slot>

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

@@ -46,12 +46,16 @@ export interface DashboardSidebarSlots {
     'toggle'(props: {
         open: boolean;
         toggle: () => void;
+        ui: DashboardSidebar['ui'];
+    }): any;
+    'content'(props: {
+        close?: () => void;
     }): any;
-    'content'(props?: {}): any;
     'resize-handle'(props: {
         onMouseDown: (e: MouseEvent) => void;
         onTouchStart: (e: TouchEvent) => void;
         onDoubleClick: (e: MouseEvent) => void;
+        ui: DashboardSidebar['ui'];
     }): any;
 }
 declare const __VLS_export: <T extends DashboardSidebarMode>(__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<{

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

@@ -1,6 +1,5 @@
 import type { ButtonProps } from '../types';
-export interface DashboardSidebarCollapseProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
-    side?: 'left' | 'right';
+export interface DashboardSidebarCollapseProps extends Omit<ButtonProps, 'color' | 'variant'> {
     /**
      * @defaultValue 'neutral'
      */
@@ -9,10 +8,14 @@ export interface DashboardSidebarCollapseProps extends /** @vue-ignore */ Pick<B
      * @defaultValue 'ghost'
      */
     variant?: ButtonProps['variant'];
-    class?: any;
+    /**
+     * The side of the sidebar to collapse.
+     * @defaultValue 'left'
+     */
+    side?: 'left' | 'right';
 }
 declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarCollapseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarCollapseProps> & Readonly<{}>, {
-    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     side: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/DashboardSidebarCollapse.vue

@@ -5,19 +5,60 @@ import theme from "#build/ui/dashboard-sidebar-collapse";
 <script setup>
 import { ref, computed } from "vue";
 import { useForwardProps } from "reka-ui";
-import { reactivePick } from "@vueuse/core";
+import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
 import { useDashboard } from "../utils/dashboard";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
 const props = defineProps({
-  side: { type: String, required: false, default: "left" },
   color: { type: null, required: false, default: "neutral" },
   variant: { type: null, required: false, default: "ghost" },
-  class: { type: null, required: false }
+  side: { type: String, required: false, default: "left" },
+  label: { type: String, required: false },
+  activeColor: { type: null, required: false },
+  activeVariant: { type: null, required: false },
+  size: { type: null, required: false },
+  square: { type: Boolean, required: false },
+  block: { type: Boolean, required: false },
+  loadingAuto: { type: Boolean, required: false },
+  onClick: { type: [Function, Array], required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  icon: { type: [String, Object], required: false },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: [String, Object], required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: [String, Object], required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: [String, Object], required: false },
+  as: { type: null, required: false },
+  type: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  active: { type: Boolean, required: false },
+  exact: { type: Boolean, required: false },
+  exactQuery: { type: [Boolean, String], required: false },
+  exactHash: { type: Boolean, required: false },
+  inactiveClass: { type: String, required: false },
+  to: { type: null, required: false },
+  href: { type: null, required: false },
+  external: { type: Boolean, required: false },
+  target: { type: [String, Object, null], required: false },
+  rel: { type: [String, Object, null], required: false },
+  noRel: { type: Boolean, required: false },
+  prefetchedClass: { type: String, required: false },
+  prefetch: { type: Boolean, required: false },
+  prefetchOn: { type: [String, Object], required: false },
+  noPrefetch: { type: Boolean, required: false },
+  trailingSlash: { type: String, required: false },
+  activeClass: { type: String, required: false },
+  exactActiveClass: { type: String, required: false },
+  ariaCurrentValue: { type: String, required: false },
+  viewTransition: { type: Boolean, required: false },
+  replace: { type: Boolean, required: false }
 });
-const rootProps = useForwardProps(reactivePick(props, "color", "variant", "size"));
+const buttonProps = useForwardProps(reactiveOmit(props, "icon", "side", "class"));
 const { t } = useLocale();
 const appConfig = useAppConfig();
 const { sidebarCollapsed, collapseSidebar } = useDashboard({ sidebarCollapsed: ref(false), collapseSidebar: () => {
@@ -27,9 +68,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSide
 
 <template>
   <UButton
-    v-bind="rootProps"
-    :aria-label="sidebarCollapsed ? t('dashboardSidebarCollapse.expand') : t('dashboardSidebarCollapse.collapse')"
-    :icon="sidebarCollapsed ? appConfig.ui.icons.panelOpen : appConfig.ui.icons.panelClose"
+    v-bind="{
+  ...buttonProps,
+  'icon': props.icon || (sidebarCollapsed ? appConfig.ui.icons.panelOpen : appConfig.ui.icons.panelClose),
+  'aria-label': sidebarCollapsed ? t('dashboardSidebarCollapse.expand') : t('dashboardSidebarCollapse.collapse'),
+  ...$attrs
+}"
     :class="ui({ class: props.class, side: props.side })"
     @click="collapseSidebar?.(!sidebarCollapsed)"
   />

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

@@ -1,6 +1,5 @@
 import type { ButtonProps } from '../types';
-export interface DashboardSidebarCollapseProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
-    side?: 'left' | 'right';
+export interface DashboardSidebarCollapseProps extends Omit<ButtonProps, 'color' | 'variant'> {
     /**
      * @defaultValue 'neutral'
      */
@@ -9,10 +8,14 @@ export interface DashboardSidebarCollapseProps extends /** @vue-ignore */ Pick<B
      * @defaultValue 'ghost'
      */
     variant?: ButtonProps['variant'];
-    class?: any;
+    /**
+     * The side of the sidebar to collapse.
+     * @defaultValue 'left'
+     */
+    side?: 'left' | 'right';
 }
 declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarCollapseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarCollapseProps> & Readonly<{}>, {
-    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     side: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,6 +1,5 @@
 import type { ButtonProps } from '../types';
-export interface DashboardSidebarToggleProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
-    side?: 'left' | 'right';
+export interface DashboardSidebarToggleProps extends Omit<ButtonProps, 'color' | 'variant'> {
     /**
      * @defaultValue 'neutral'
      */
@@ -9,10 +8,14 @@ export interface DashboardSidebarToggleProps extends /** @vue-ignore */ Pick<But
      * @defaultValue 'ghost'
      */
     variant?: ButtonProps['variant'];
-    class?: any;
+    /**
+     * The side of the sidebar to toggle.
+     * @defaultValue 'left'
+     */
+    side?: 'left' | 'right';
 }
 declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {
-    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     side: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/DashboardSidebarToggle.vue

@@ -5,19 +5,61 @@ import theme from "#build/ui/dashboard-sidebar-toggle";
 <script setup>
 import { ref, computed } from "vue";
 import { useForwardProps } from "reka-ui";
-import { reactivePick } from "@vueuse/core";
+import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
 import { useDashboard } from "../utils/dashboard";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  side: { type: String, required: false, default: "left" },
   color: { type: null, required: false, default: "neutral" },
   variant: { type: null, required: false, default: "ghost" },
-  class: { type: null, required: false }
+  side: { type: String, required: false, default: "left" },
+  label: { type: String, required: false },
+  activeColor: { type: null, required: false },
+  activeVariant: { type: null, required: false },
+  size: { type: null, required: false },
+  square: { type: Boolean, required: false },
+  block: { type: Boolean, required: false },
+  loadingAuto: { type: Boolean, required: false },
+  onClick: { type: [Function, Array], required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  icon: { type: [String, Object], required: false },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: [String, Object], required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: [String, Object], required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: [String, Object], required: false },
+  as: { type: null, required: false },
+  type: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  active: { type: Boolean, required: false },
+  exact: { type: Boolean, required: false },
+  exactQuery: { type: [Boolean, String], required: false },
+  exactHash: { type: Boolean, required: false },
+  inactiveClass: { type: String, required: false },
+  to: { type: null, required: false },
+  href: { type: null, required: false },
+  external: { type: Boolean, required: false },
+  target: { type: [String, Object, null], required: false },
+  rel: { type: [String, Object, null], required: false },
+  noRel: { type: Boolean, required: false },
+  prefetchedClass: { type: String, required: false },
+  prefetch: { type: Boolean, required: false },
+  prefetchOn: { type: [String, Object], required: false },
+  noPrefetch: { type: Boolean, required: false },
+  trailingSlash: { type: String, required: false },
+  activeClass: { type: String, required: false },
+  exactActiveClass: { type: String, required: false },
+  ariaCurrentValue: { type: String, required: false },
+  viewTransition: { type: Boolean, required: false },
+  replace: { type: Boolean, required: false }
 });
-const rootProps = useForwardProps(reactivePick(props, "color", "variant", "size"));
+const buttonProps = useForwardProps(reactiveOmit(props, "icon", "side", "class"));
 const { t } = useLocale();
 const appConfig = useAppConfig();
 const { sidebarOpen, toggleSidebar } = useDashboard({ sidebarOpen: ref(false), toggleSidebar: () => {
@@ -27,9 +69,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSide
 
 <template>
   <UButton
-    v-bind="rootProps"
-    :aria-label="sidebarOpen ? t('dashboardSidebarToggle.close') : t('dashboardSidebarToggle.open')"
-    :icon="sidebarOpen ? appConfig.ui.icons.close : appConfig.ui.icons.menu"
+    v-bind="{
+  ...buttonProps,
+  'icon': props.icon || (sidebarOpen ? appConfig.ui.icons.close : appConfig.ui.icons.menu),
+  'aria-label': sidebarOpen ? t('dashboardSidebarToggle.close') : t('dashboardSidebarToggle.open'),
+  ...$attrs
+}"
     :class="ui({ class: props.class, side: props.side })"
     @click="toggleSidebar"
   />

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

@@ -1,6 +1,5 @@
 import type { ButtonProps } from '../types';
-export interface DashboardSidebarToggleProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
-    side?: 'left' | 'right';
+export interface DashboardSidebarToggleProps extends Omit<ButtonProps, 'color' | 'variant'> {
     /**
      * @defaultValue 'neutral'
      */
@@ -9,10 +8,14 @@ export interface DashboardSidebarToggleProps extends /** @vue-ignore */ Pick<But
      * @defaultValue 'ghost'
      */
     variant?: ButtonProps['variant'];
-    class?: any;
+    /**
+     * The side of the sidebar to toggle.
+     * @defaultValue 'left'
+     */
+    side?: 'left' | 'right';
 }
 declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {
-    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     side: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/DashboardToolbar.vue

@@ -18,13 +18,13 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardTool
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot>
-      <div :class="ui.left({ class: [props.ui?.left] })">
+      <div data-slot="left" :class="ui.left({ class: [props.ui?.left] })">
         <slot name="left" />
       </div>
 
-      <div :class="ui.right({ class: [props.ui?.right] })">
+      <div data-slot="right" :class="ui.right({ class: [props.ui?.right] })">
         <slot name="right" />
       </div>
     </slot>

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

@@ -72,9 +72,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Drawer
     "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
     onAnimationEnd?: ((open: boolean) => any) | undefined;
 }>, {
+    overlay: boolean;
     modal: boolean;
     portal: boolean | string | HTMLElement;
-    overlay: boolean;
     direction: import("vaul-vue").DrawerDirection;
     handle: boolean;
     dismissible: boolean;

package/dist/runtime/components/Drawer.vue

@@ -45,9 +45,6 @@ const rootProps = useForwardPropsEmits(reactivePick(props, "activeSnapPoint", "c
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => props.content);
 const contentEvents = computed(() => {
-  const defaultEvents = {
-    closeAutoFocus: (e) => e.preventDefault()
-  };
   if (!props.dismissible) {
     const events = ["pointerDownOutside", "interactOutside", "escapeKeyDown"];
     return events.reduce((acc, curr) => {
@@ -56,9 +53,9 @@ const contentEvents = computed(() => {
         emits("close:prevent");
       };
       return acc;
-    }, defaultEvents);
+    }, {});
   }
-  return defaultEvents;
+  return {};
 });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {} })({
   direction: props.direction,
@@ -74,10 +71,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {}
     </DrawerTrigger>
 
     <DrawerPortal v-bind="portalProps">
-      <DrawerOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
+      <DrawerOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
-      <DrawerContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
-        <DrawerHandle v-if="handle" :class="ui.handle({ class: props.ui?.handle })" />
+      <DrawerContent data-slot="content" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
+        <DrawerHandle v-if="handle" data-slot="handle" :class="ui.handle({ class: props.ui?.handle })" />
 
         <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
           <DrawerTitle v-if="title || !!slots.title">
@@ -94,16 +91,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {}
         </VisuallyHidden>
 
         <slot name="content">
-          <div :class="ui.container({ class: props.ui?.container })">
-            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" :class="ui.header({ class: props.ui?.header })">
+          <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
               <slot name="header">
-                <DrawerTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+                <DrawerTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
                   <slot name="title">
                     {{ title }}
                   </slot>
                 </DrawerTitle>
 
-                <DrawerDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+                <DrawerDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
                   <slot name="description">
                     {{ description }}
                   </slot>
@@ -111,11 +108,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {}
               </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" />
             </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" />
             </div>
           </div>

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

@@ -72,9 +72,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Drawer
     "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
     onAnimationEnd?: ((open: boolean) => any) | undefined;
 }>, {
+    overlay: boolean;
     modal: boolean;
     portal: boolean | string | HTMLElement;
-    overlay: boolean;
     direction: import("vaul-vue").DrawerDirection;
     handle: boolean;
     dismissible: boolean;

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

@@ -7,13 +7,16 @@ import type { ComponentConfig } from '../types/tv';
 type DropdownMenu = ComponentConfig<typeof theme, AppConfig, 'dropdownMenu'>;
 export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
     label?: string;
+    description?: string;
     /**
      * @IconifyIcon
      */
     icon?: IconProps['name'];
     color?: DropdownMenu['variants']['color'];
     avatar?: AvatarProps;
-    content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>;
+    content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & {
+        class?: any;
+    } & Partial<EmitsToProps<DropdownMenuContentEmits>>;
     kbds?: KbdProps['value'][] | KbdProps[];
     /**
      * The item type.
@@ -27,10 +30,10 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
     open?: boolean;
     defaultOpen?: boolean;
     children?: ArrayOrNested<DropdownMenuItem>;
-    onSelect?(e: Event): void;
-    onUpdateChecked?(checked: boolean): void;
+    onSelect?: (e: Event) => void;
+    onUpdateChecked?: (checked: boolean) => void;
     class?: any;
-    ui?: Pick<DropdownMenu['slots'], 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLabel' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
+    ui?: Pick<DropdownMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
     [key: string]: any;
 }
 export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>> extends Omit<DropdownMenuRootProps, 'dir'> {
@@ -78,6 +81,11 @@ export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = A
      * @defaultValue 'label'
      */
     labelKey?: GetItemKeys<T>;
+    /**
+     * The key used to get the description from the item.
+     * @defaultValue 'description'
+     */
+    descriptionKey?: GetItemKeys<T>;
     disabled?: boolean;
     class?: any;
     ui?: DropdownMenu['slots'];
@@ -88,6 +96,7 @@ type SlotProps<T extends DropdownMenuItem> = (props: {
     item: T;
     active?: boolean;
     index: number;
+    ui: DropdownMenu['ui'];
 }) => any;
 export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>, T extends NestedItem<A> = NestedItem<A>> = {
     'default'(props: {
@@ -95,13 +104,26 @@ export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
     }): any;
     'item': SlotProps<T>;
     'item-leading': SlotProps<T>;
-    'item-label': SlotProps<T>;
+    'item-label': (props: {
+        item: T;
+        active?: boolean;
+        index: number;
+    }) => any;
+    'item-description': (props: {
+        item: T;
+        active?: boolean;
+        index: number;
+    }) => any;
     'item-trailing': SlotProps<T>;
     'content-top': (props?: {}) => any;
     'content-bottom': (props?: {}) => any;
-} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing', {
+} & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
+    active?: boolean;
+    index: number;
+}> & DynamicSlots<MergeTypes<T>, 'leading' | 'trailing', {
     active?: boolean;
     index: number;
+    ui: DropdownMenu['ui'];
 }>;
 declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__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<DropdownMenuProps<T> & {

package/dist/runtime/components/DropdownMenu.vue

@@ -21,6 +21,7 @@ const props = defineProps({
   arrow: { type: [Boolean, Object], required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   labelKey: { type: null, required: false, default: "label" },
+  descriptionKey: { type: null, required: false, default: "description" },
   disabled: { type: Boolean, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
@@ -54,6 +55,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dropdownMenu
       :items="items"
       :portal="portal"
       :label-key="labelKey"
+      :description-key="descriptionKey"
       :checked-icon="checkedIcon"
       :loading-icon="loadingIcon"
       :external-icon="externalIcon"
@@ -62,7 +64,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dropdownMenu
         <slot :name="name" v-bind="slotData" />
       </template>
 
-      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
     </UDropdownMenuContent>
   </DropdownMenuRoot>
 </template>