@nuxt/ui 3.2.0 → 3.3.1

package/dist/runtime/components/Carousel.vue

@@ -6,7 +6,7 @@ import theme from "#build/ui/carousel";
 import { computed, ref, watch, onMounted } from "vue";
 import useEmblaCarousel from "embla-carousel-vue";
 import { Primitive, useForwardProps } from "reka-ui";
-import { reactivePick, computedAsync } from "@vueuse/core";
+import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
@@ -62,34 +62,36 @@ const options = computed(() => ({
   axis: props.orientation === "horizontal" ? "x" : "y",
   direction: dir.value === "rtl" ? "rtl" : "ltr"
 }));
-const plugins = computedAsync(async () => {
-  const plugins2 = [];
+const plugins = ref([]);
+async function loadPlugins() {
+  const emblaPlugins = [];
   if (props.autoplay) {
     const AutoplayPlugin = await import("embla-carousel-autoplay").then((r) => r.default);
-    plugins2.push(AutoplayPlugin(typeof props.autoplay === "boolean" ? {} : props.autoplay));
+    emblaPlugins.push(AutoplayPlugin(typeof props.autoplay === "boolean" ? {} : props.autoplay));
   }
   if (props.autoScroll) {
     const AutoScrollPlugin = await import("embla-carousel-auto-scroll").then((r) => r.default);
-    plugins2.push(AutoScrollPlugin(typeof props.autoScroll === "boolean" ? {} : props.autoScroll));
+    emblaPlugins.push(AutoScrollPlugin(typeof props.autoScroll === "boolean" ? {} : props.autoScroll));
   }
   if (props.autoHeight) {
     const AutoHeightPlugin = await import("embla-carousel-auto-height").then((r) => r.default);
-    plugins2.push(AutoHeightPlugin(typeof props.autoHeight === "boolean" ? {} : props.autoHeight));
+    emblaPlugins.push(AutoHeightPlugin(typeof props.autoHeight === "boolean" ? {} : props.autoHeight));
   }
   if (props.classNames) {
     const ClassNamesPlugin = await import("embla-carousel-class-names").then((r) => r.default);
-    plugins2.push(ClassNamesPlugin(typeof props.classNames === "boolean" ? {} : props.classNames));
+    emblaPlugins.push(ClassNamesPlugin(typeof props.classNames === "boolean" ? {} : props.classNames));
   }
   if (props.fade) {
     const FadePlugin = await import("embla-carousel-fade").then((r) => r.default);
-    plugins2.push(FadePlugin(typeof props.fade === "boolean" ? {} : props.fade));
+    emblaPlugins.push(FadePlugin(typeof props.fade === "boolean" ? {} : props.fade));
   }
   if (props.wheelGestures) {
     const { WheelGesturesPlugin } = await import("embla-carousel-wheel-gestures");
-    plugins2.push(WheelGesturesPlugin(typeof props.wheelGestures === "boolean" ? {} : props.wheelGestures));
+    emblaPlugins.push(WheelGesturesPlugin(typeof props.wheelGestures === "boolean" ? {} : props.wheelGestures));
   }
-  return plugins2;
-});
+  plugins.value = emblaPlugins;
+}
+watch(() => [props.autoplay, props.autoScroll, props.autoHeight, props.classNames, props.fade, props.wheelGestures], loadPlugins, { immediate: true });
 const [emblaRef, emblaApi] = useEmblaCarousel(options.value, plugins.value);
 watch([options, plugins], () => {
   emblaApi.value?.reInit(options.value, plugins.value);
@@ -162,8 +164,7 @@ defineExpose({
         <div
           v-for="(item, index) in items"
           :key="index"
-          role="group"
-          aria-roledescription="slide"
+          v-bind="dots ? { role: 'tabpanel' } : { 'role': 'group', 'aria-roledescription': 'slide' }"
           :class="ui.item({ class: [props.ui?.item, isCarouselItem(item) && item.ui?.item, isCarouselItem(item) && item.class] })"
         >
           <slot :item="item" :index="index" />
@@ -195,10 +196,13 @@ defineExpose({
         />
       </div>
 
-      <div v-if="dots" :class="ui.dots({ class: props.ui?.dots })">
+      <div v-if="dots" role="tablist" :aria-label="t('carousel.dots')" :class="ui.dots({ class: props.ui?.dots })">
         <template v-for="(_, index) in scrollSnaps" :key="index">
           <button
+            type="button"
+            role="tab"
             :aria-label="t('carousel.goto', { slide: index + 1 })"
+            :aria-selected="selectedIndex === index"
             :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
             :data-state="selectedIndex === index ? 'active' : void 0"
             @click="scrollTo(index)"

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

@@ -123,5 +123,5 @@ declare const _default: <T extends CarouselItem>(__VLS_props: NonNullable<Awaite
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

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

@@ -56,7 +56,7 @@ export interface CheckboxSlots {
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CheckboxProps & {
     modelValue?: boolean | "indeterminate";
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (payload: Event) => any;
     "update:modelValue": (value: boolean | "indeterminate") => any;
 }, string, import("vue").PublicProps, Readonly<CheckboxProps & {

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

@@ -80,5 +80,5 @@ declare const _default: <T extends CheckboxGroupItem>(__VLS_props: NonNullable<A
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

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

@@ -31,7 +31,7 @@ export interface ChipProps {
     ui?: Chip['slots'];
 }
 export interface ChipEmits {
-    (e: 'update:show', payload: boolean): void;
+    'update:show': [payload: boolean];
 }
 export interface ChipSlots {
     default(props?: {}): any;
@@ -39,7 +39,7 @@ export interface ChipSlots {
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChipProps & {
     show?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:show": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<ChipProps & {
     show?: boolean;

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

@@ -20,7 +20,7 @@ export interface CollapsibleSlots {
     }): any;
     content(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CollapsibleProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<CollapsibleProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;

package/dist/runtime/components/ColorPicker.vue

@@ -14,7 +14,7 @@ function HSVtoHSL(hsv) {
   return {
     H: hsv.h,
     S: x === 0 || x === 200 ? 0 : Math.round(hsv.s * hsv.v / (x <= 100 ? x : 200 - x)),
-    L: Math.round(x / 2)
+    L: x / 2
   };
 }
 </script>
@@ -53,7 +53,6 @@ const pickedColor = computed({
   },
   set(value) {
     const color = new ColorTranslator(HSVtoHSL(value), {
-      decimals: 2,
       labUnit: "percent",
       cmykUnit: "percent",
       cmykFunction: "cmyk"

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

@@ -34,7 +34,7 @@ export type ColorPickerProps = {
 };
 declare const _default: import("vue").DefineComponent<ColorPickerProps & {
     modelValue?: string;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<ColorPickerProps & {
     modelValue?: string;

package/dist/runtime/components/CommandPalette.vue

@@ -271,5 +271,9 @@ function onSelect(e, item) {
         </slot>
       </div>
     </ListboxContent>
+
+    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+      <slot name="footer" :ui="ui" />
+    </div>
   </ListboxRoot>
 </template>

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

@@ -142,6 +142,11 @@ export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPalett
     'empty'(props: {
         searchTerm?: string;
     }): any;
+    'footer'(props: {
+        ui: {
+            [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string;
+        };
+    }): any;
     'back'(props: {
         ui: {
             [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string;
@@ -183,5 +188,5 @@ declare const _default: <G extends CommandPaletteGroup<T>, T extends CommandPale
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

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

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

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

@@ -105,5 +105,5 @@ declare const _default: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_props:
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/ContextMenuContent.vue

@@ -30,7 +30,9 @@ const props = defineProps({
   ui: { type: null, required: true },
   uiOverride: { type: null, required: false },
   loop: { type: Boolean, required: false },
+  sideFlip: { type: Boolean, required: false },
   alignOffset: { type: Number, required: false },
+  alignFlip: { type: Boolean, required: false },
   avoidCollisions: { type: Boolean, required: false },
   collisionBoundary: { type: null, required: false },
   collisionPadding: { type: [Number, Object], required: false },
@@ -61,7 +63,7 @@ const groups = computed(
       <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index">
         <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
         <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
-        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
+        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
       </slot>
 
       <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
@@ -76,7 +78,7 @@ const groups = computed(
         <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
           <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
           <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
-            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
           </span>
         </slot>
 
@@ -91,7 +93,7 @@ const groups = computed(
     <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" :class="props.class" v-bind="contentProps">
       <slot name="content-top" />
 
-      <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+      <div role="presentation" :class="ui.viewport({ class: uiOverride?.viewport })">
         <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
           <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
             <ContextMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">

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

@@ -45,5 +45,5 @@ declare const _default: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_props:
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/Drawer.vue

@@ -5,7 +5,7 @@ import theme from "#build/ui/drawer";
 <script setup>
 import { computed, toRef } from "vue";
 import { VisuallyHidden, useForwardPropsEmits } from "reka-ui";
-import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from "vaul-vue";
+import { DrawerRoot, DrawerRootNested, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from "vaul-vue";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { usePortal } from "../composables/usePortal";
@@ -19,6 +19,7 @@ const props = defineProps({
   overlay: { type: Boolean, required: false, default: true },
   handle: { type: Boolean, required: false, default: true },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
+  nested: { type: Boolean, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
   activeSnapPoint: { type: [Number, String, null], required: false },
@@ -31,7 +32,6 @@ const props = defineProps({
   modal: { type: Boolean, required: false, default: true },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
-  nested: { type: Boolean, required: false },
   direction: { type: String, required: false, default: "bottom" },
   noBodyStyles: { type: Boolean, required: false },
   handleOnly: { type: Boolean, required: false },
@@ -54,7 +54,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {}
 </script>
 
 <template>
-  <DrawerRoot v-bind="rootProps">
+  <component :is="nested ? DrawerRootNested : DrawerRoot" v-bind="rootProps">
     <DrawerTrigger v-if="!!slots.default" as-child :class="props.class">
       <slot />
     </DrawerTrigger>
@@ -108,5 +108,5 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {}
         </slot>
       </DrawerContent>
     </DrawerPortal>
-  </DrawerRoot>
+  </component>
 </template>

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

@@ -34,6 +34,11 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
      * @defaultValue true
      */
     portal?: boolean | string | HTMLElement;
+    /**
+     * Whether the drawer is nested in another drawer.
+     * @defaultValue false
+     */
+    nested?: boolean;
     class?: any;
     ui?: Drawer['slots'];
 }
@@ -48,7 +53,7 @@ export interface DrawerSlots {
     body(props?: {}): any;
     footer(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     close: () => any;
     drag: (percentageDragged: number) => any;
     "update:open": (open: boolean) => any;

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

@@ -115,5 +115,5 @@ declare const _default: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_props:
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/DropdownMenuContent.vue

@@ -32,8 +32,10 @@ const props = defineProps({
   loop: { type: Boolean, required: false },
   side: { type: null, required: false },
   sideOffset: { type: Number, required: false },
+  sideFlip: { type: Boolean, required: false },
   align: { type: null, required: false },
   alignOffset: { type: Number, required: false },
+  alignFlip: { type: Boolean, required: false },
   avoidCollisions: { type: Boolean, required: false },
   collisionBoundary: { type: null, required: false },
   collisionPadding: { type: [Number, Object], required: false },
@@ -66,7 +68,7 @@ const groups = computed(
       <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index">
         <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
         <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
-        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
+        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
       </slot>
 
       <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
@@ -81,7 +83,7 @@ const groups = computed(
         <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
           <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
           <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
-            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
           </span>
         </slot>
 
@@ -96,7 +98,7 @@ const groups = computed(
     <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.class" v-bind="contentProps">
       <slot name="content-top" />
 
-      <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+      <div role="presentation" :class="ui.viewport({ class: uiOverride?.viewport })">
         <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
           <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
             <DropdownMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">

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

@@ -2,7 +2,7 @@ import { DropdownMenu } from 'reka-ui/namespaced';
 import type { DropdownMenuContentProps as RekaDropdownMenuContentProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import type theme from '#build/ui/dropdown-menu';
-import type { DropdownMenuItem, DropdownMenuSlots } from '../types';
+import type { DropdownMenuItem, DropdownMenuSlots, DynamicSlots, MergeTypes } from '../types';
 import type { ArrayOrNested, NestedItem, ComponentConfig } from '../types/utils';
 type DropdownMenu = ComponentConfig<typeof theme, AppConfig, 'dropdownMenu'>;
 interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> extends Omit<RekaDropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
@@ -28,9 +28,12 @@ interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> ex
     };
     uiOverride?: DropdownMenu['slots'];
 }
-type DropdownMenuContentSlots<T extends ArrayOrNested<DropdownMenuItem>> = Omit<DropdownMenuSlots<T>, 'default'> & {
+type DropdownMenuContentSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>, T extends NestedItem<A> = NestedItem<A>> = Pick<DropdownMenuSlots<A>, 'item' | 'item-leading' | 'item-label' | 'item-trailing' | 'content-top' | 'content-bottom'> & {
     default(props?: {}): any;
-};
+} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing', {
+    active?: boolean;
+    index: number;
+}>;
 declare const _default: <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<Pick<Partial<{}> & Omit<{
         readonly onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
@@ -41,12 +44,12 @@ declare const _default: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_props:
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "onCloseAutoFocus"> & DropdownMenuContentProps<T> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: DropdownMenuContentSlots<T>;
+    slots: DropdownMenuContentSlots<T, NestedItem<T>>;
     emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};