@nuxt/ui 4.0.1 → 4.1.0

package/dist/runtime/components/PricingPlan.vue

@@ -60,7 +60,7 @@ const features = computed(() => props.features?.map((feature) => typeof feature
       </div>
 
       <div v-if="billingCycle || billingPeriod || !!slots.billing" :class="ui.billing({ class: props.ui?.billing })">
-        <slot name="billing">
+        <slot name="billing" :ui="ui">
           <span :class="ui.billingPeriod({ class: props.ui?.billingPeriod })">
             {{ billingPeriod || "\xA0" }}
           </span>
@@ -87,7 +87,7 @@ const features = computed(() => props.features?.map((feature) => typeof feature
             </slot>
           </div>
 
-          <slot name="badge">
+          <slot name="badge" :ui="ui">
             <UBadge v-if="badge" color="primary" variant="subtle" v-bind="typeof badge === 'string' ? { label: badge } : badge" :class="ui.badge({ class: props.ui?.badge })" />
           </slot>
         </div>
@@ -122,7 +122,7 @@ const features = computed(() => props.features?.map((feature) => typeof feature
 
         <ReusePriceTemplate v-if="orientation === 'horizontal'" />
 
-        <slot name="button">
+        <slot name="button" :ui="ui">
           <UButton v-if="button" v-bind="{ block: true, size: 'lg', ...button }" :class="ui.button({ class: props.ui?.button })" @click="button?.onClick" />
         </slot>
 

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

@@ -87,14 +87,20 @@ export interface PricingPlanProps {
     ui?: PricingPlan['slots'];
 }
 export interface PricingPlanSlots {
-    badge(props?: {}): any;
+    badge(props: {
+        ui: PricingPlan['ui'];
+    }): any;
     title(props?: {}): any;
     description(props?: {}): any;
     price(props?: {}): any;
     discount(props?: {}): any;
-    billing(props?: {}): any;
+    billing(props: {
+        ui: PricingPlan['ui'];
+    }): any;
     features(props?: {}): any;
-    button(props?: {}): any;
+    button(props: {
+        ui: PricingPlan['ui'];
+    }): any;
     header(props?: {}): any;
     body(props?: {}): any;
     footer(props?: {}): any;

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

@@ -1,6 +1,6 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/pricing-plans';
-import type { PricingPlanProps } from '../types';
+import type { PricingPlanProps, PricingPlanSlots } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type PricingPlans = ComponentConfig<typeof theme, AppConfig, 'pricingPlans'>;
 export interface PricingPlansProps {
@@ -28,18 +28,25 @@ export interface PricingPlansProps {
     scale?: boolean;
     class?: any;
 }
-export interface PricingPlansSlots {
+type ExtendSlotWithPlan<T extends PricingPlanProps, K extends keyof PricingPlanSlots> = PricingPlanSlots[K] extends (props: infer P) => any ? (props: P & {
+    plan: T;
+}) => any : PricingPlanSlots[K];
+export type PricingPlansSlots<T extends PricingPlanProps = PricingPlanProps> = {
+    [K in keyof PricingPlanSlots]: ExtendSlotWithPlan<T, K>;
+} & {
     default(props?: {}): any;
-}
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PricingPlansProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PricingPlansProps> & Readonly<{}>, {
-    orientation: PricingPlans["variants"]["orientation"];
-    scale: boolean;
-    compact: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PricingPlansSlots>;
+};
+declare const __VLS_export: <T extends PricingPlanProps>(__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<PricingPlansProps> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: PricingPlansSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/PricingPlans.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/pricing-plans";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import UPricingPlan from "./PricingPlan.vue";
 const props = defineProps({
@@ -17,6 +18,7 @@ const props = defineProps({
   class: { type: null, required: false }
 });
 const slots = defineSlots();
+const getProxySlots = () => omit(slots, ["default"]);
 const appConfig = useAppConfig();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pricingPlans || {} }));
 const count = computed(() => props.plans?.length || slots.default?.()?.flatMap(mapSlot).filter(Boolean)?.length || 3);
@@ -39,7 +41,11 @@ function mapSlot(slot) {
         :key="index"
         :orientation="orientation === 'vertical' ? 'horizontal' : 'vertical'"
         v-bind="plan"
-      />
+      >
+        <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
+          <slot :name="name" v-bind="slotData" :plan="plan" />
+        </template>
+      </UPricingPlan>
     </slot>
   </Primitive>
 </template>

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

@@ -1,6 +1,6 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/pricing-plans';
-import type { PricingPlanProps } from '../types';
+import type { PricingPlanProps, PricingPlanSlots } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type PricingPlans = ComponentConfig<typeof theme, AppConfig, 'pricingPlans'>;
 export interface PricingPlansProps {
@@ -28,18 +28,25 @@ export interface PricingPlansProps {
     scale?: boolean;
     class?: any;
 }
-export interface PricingPlansSlots {
+type ExtendSlotWithPlan<T extends PricingPlanProps, K extends keyof PricingPlanSlots> = PricingPlanSlots[K] extends (props: infer P) => any ? (props: P & {
+    plan: T;
+}) => any : PricingPlanSlots[K];
+export type PricingPlansSlots<T extends PricingPlanProps = PricingPlanProps> = {
+    [K in keyof PricingPlanSlots]: ExtendSlotWithPlan<T, K>;
+} & {
     default(props?: {}): any;
-}
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PricingPlansProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PricingPlansProps> & Readonly<{}>, {
-    orientation: PricingPlans["variants"]["orientation"];
-    scale: boolean;
-    compact: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PricingPlansSlots>;
+};
+declare const __VLS_export: <T extends PricingPlanProps>(__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<PricingPlansProps> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: PricingPlansSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

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

@@ -9,6 +9,7 @@ type Select = ComponentConfig<typeof theme, AppConfig, 'select'>;
 export type SelectValue = AcceptableValue;
 export type SelectItem = SelectValue | {
     label?: string;
+    description?: string;
     /**
      * @IconifyIcon
      */
@@ -22,9 +23,9 @@ export type SelectItem = SelectValue | {
     type?: 'label' | 'separator' | 'item';
     value?: SelectValue;
     disabled?: boolean;
-    onSelect?(e?: Event): void;
+    onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<Select['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemTrailing' | 'itemTrailingIcon'>;
+    ui?: Pick<Select['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
     [key: string]: any;
 };
 export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = 'value', M extends boolean = false> extends Omit<SelectRootProps<T>, 'dir' | 'multiple' | 'modelValue' | 'defaultValue' | 'by'>, UseComponentIconsProps {
@@ -80,6 +81,11 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
      * @defaultValue 'label'
      */
     labelKey?: GetItemKeys<T>;
+    /**
+     * When `items` is an array of objects, select the field to use as the description.
+     * @defaultValue 'description'
+     */
+    descriptionKey?: GetItemKeys<T>;
     items?: T;
     /** The value of the Select when initially rendered. Use when you do not need to control the state of the Select. */
     defaultValue?: GetModelValue<T, VK, M>;
@@ -102,29 +108,34 @@ export type SelectEmits<A extends ArrayOrNested<SelectItem>, VK extends GetItemK
 type SlotProps<T extends SelectItem> = (props: {
     item: T;
     index: number;
+    ui: Select['ui'];
 }) => any;
 export interface SelectSlots<A extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>, VK extends GetItemKeys<A> | undefined = undefined, M extends boolean = false, T extends NestedItem<A> = NestedItem<A>> {
     'leading'(props: {
         modelValue?: GetModelValue<A, VK, M>;
         open: boolean;
-        ui: {
-            [K in keyof Required<Select['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: Select['ui'];
     }): any;
     'default'(props: {
         modelValue?: GetModelValue<A, VK, M>;
         open: boolean;
+        ui: Select['ui'];
     }): any;
     'trailing'(props: {
         modelValue?: GetModelValue<A, VK, M>;
         open: boolean;
-        ui: {
-            [K in keyof Required<Select['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: Select['ui'];
     }): any;
     'item': SlotProps<T>;
     'item-leading': SlotProps<T>;
-    'item-label': SlotProps<T>;
+    'item-label'(props: {
+        item: T;
+        index: number;
+    }): any;
+    'item-description'(props: {
+        item: T;
+        index: number;
+    }): any;
     'item-trailing': SlotProps<T>;
     'content-top': (props?: {}) => any;
     'content-bottom': (props?: {}) => any;

package/dist/runtime/components/Select.vue

@@ -31,6 +31,7 @@ const props = defineProps({
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   valueKey: { type: null, required: false, default: "value" },
   labelKey: { type: null, required: false, default: "label" },
+  descriptionKey: { type: null, required: false, default: "description" },
   items: { type: null, required: false },
   defaultValue: { type: null, required: false },
   modelValue: { type: null, required: false },
@@ -155,7 +156,7 @@ defineExpose({
         </slot>
       </span>
 
-      <slot :model-value="modelValue" :open="open">
+      <slot :model-value="modelValue" :open="open" :ui="ui">
         <template v-for="displayedModelValue in [displayValue(modelValue)]" :key="displayedModelValue">
           <span v-if="displayedModelValue !== void 0 && displayedModelValue !== null" :class="ui.value({ class: props.ui?.value })">
             {{ displayedModelValue }}
@@ -193,8 +194,8 @@ defineExpose({
                 :value="isSelectItem(item) ? get(item, props.valueKey) : item"
                 @select="isSelectItem(item) && item.onSelect?.($event)"
               >
-                <slot name="item" :item="item" :index="index">
-                  <slot name="item-leading" :item="item" :index="index">
+                <slot name="item" :item="item" :index="index" :ui="ui">
+                  <slot name="item-leading" :item="item" :index="index" :ui="ui">
                     <UIcon v-if="isSelectItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
                     <UAvatar v-else-if="isSelectItem(item) && item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
                     <UChip
@@ -207,14 +208,22 @@ defineExpose({
                     />
                   </slot>
 
-                  <SelectItemText :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
-                    <slot name="item-label" :item="item" :index="index">
-                      {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
-                    </slot>
-                  </SelectItemText>
+                  <span :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })">
+                    <SelectItemText :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
+                      <slot name="item-label" :item="item" :index="index">
+                        {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
+                      </slot>
+                    </SelectItemText>
+
+                    <span v-if="isSelectItem(item) && (get(item, props.descriptionKey) || !!slots['item-description'])" :class="ui.itemDescription({ class: [props.ui?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })">
+                      <slot name="item-description" :item="item" :index="index">
+                        {{ get(item, props.descriptionKey) }}
+                      </slot>
+                    </span>
+                  </span>
 
                   <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
-                    <slot name="item-trailing" :item="item" :index="index" />
+                    <slot name="item-trailing" :item="item" :index="index" :ui="ui" />
 
                     <SelectItemIndicator as-child>
                       <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />

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

@@ -9,6 +9,7 @@ type Select = ComponentConfig<typeof theme, AppConfig, 'select'>;
 export type SelectValue = AcceptableValue;
 export type SelectItem = SelectValue | {
     label?: string;
+    description?: string;
     /**
      * @IconifyIcon
      */
@@ -22,9 +23,9 @@ export type SelectItem = SelectValue | {
     type?: 'label' | 'separator' | 'item';
     value?: SelectValue;
     disabled?: boolean;
-    onSelect?(e?: Event): void;
+    onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<Select['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemTrailing' | 'itemTrailingIcon'>;
+    ui?: Pick<Select['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
     [key: string]: any;
 };
 export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = 'value', M extends boolean = false> extends Omit<SelectRootProps<T>, 'dir' | 'multiple' | 'modelValue' | 'defaultValue' | 'by'>, UseComponentIconsProps {
@@ -80,6 +81,11 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
      * @defaultValue 'label'
      */
     labelKey?: GetItemKeys<T>;
+    /**
+     * When `items` is an array of objects, select the field to use as the description.
+     * @defaultValue 'description'
+     */
+    descriptionKey?: GetItemKeys<T>;
     items?: T;
     /** The value of the Select when initially rendered. Use when you do not need to control the state of the Select. */
     defaultValue?: GetModelValue<T, VK, M>;
@@ -102,29 +108,34 @@ export type SelectEmits<A extends ArrayOrNested<SelectItem>, VK extends GetItemK
 type SlotProps<T extends SelectItem> = (props: {
     item: T;
     index: number;
+    ui: Select['ui'];
 }) => any;
 export interface SelectSlots<A extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>, VK extends GetItemKeys<A> | undefined = undefined, M extends boolean = false, T extends NestedItem<A> = NestedItem<A>> {
     'leading'(props: {
         modelValue?: GetModelValue<A, VK, M>;
         open: boolean;
-        ui: {
-            [K in keyof Required<Select['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: Select['ui'];
     }): any;
     'default'(props: {
         modelValue?: GetModelValue<A, VK, M>;
         open: boolean;
+        ui: Select['ui'];
     }): any;
     'trailing'(props: {
         modelValue?: GetModelValue<A, VK, M>;
         open: boolean;
-        ui: {
-            [K in keyof Required<Select['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: Select['ui'];
     }): any;
     'item': SlotProps<T>;
     'item-leading': SlotProps<T>;
-    'item-label': SlotProps<T>;
+    'item-label'(props: {
+        item: T;
+        index: number;
+    }): any;
+    'item-description'(props: {
+        item: T;
+        index: number;
+    }): any;
     'item-trailing': SlotProps<T>;
     'content-top': (props?: {}) => any;
     'content-bottom': (props?: {}) => any;

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

@@ -9,6 +9,7 @@ type SelectMenu = ComponentConfig<typeof theme, AppConfig, 'selectMenu'>;
 export type SelectMenuValue = AcceptableValue;
 export type SelectMenuItem = SelectMenuValue | {
     label?: string;
+    description?: string;
     /**
      * @IconifyIcon
      */
@@ -21,9 +22,9 @@ export type SelectMenuItem = SelectMenuValue | {
      */
     type?: 'label' | 'separator' | 'item';
     disabled?: boolean;
-    onSelect?(e?: Event): void;
+    onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<SelectMenu['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemTrailing' | 'itemTrailingIcon'>;
+    ui?: Pick<SelectMenu['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
     [key: string]: any;
 };
 export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'highlightOnHover'>, UseComponentIconsProps {
@@ -78,6 +79,23 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
      * @defaultValue true
      */
     portal?: boolean | string | HTMLElement;
+    /**
+     * Enable virtualization for large lists.
+     * Note: when enabled, all groups are flattened into a single list due to a limitation of Reka UI (https://github.com/unovue/reka-ui/issues/1885).
+     * @defaultValue false
+     */
+    virtualize?: boolean | {
+        /**
+         * Number of items rendered outside the visible area
+         * @defaultValue 12
+         */
+        overscan?: number;
+        /**
+         * Estimated size (in px) of each item
+         * @defaultValue 32
+         */
+        estimateSize?: number;
+    };
     /**
      * When `items` is an array of objects, select the field to use as the value instead of the object itself.
      * @defaultValue undefined
@@ -88,6 +106,11 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
      * @defaultValue 'label'
      */
     labelKey?: GetItemKeys<T>;
+    /**
+     * When `items` is an array of objects, select the field to use as the description.
+     * @defaultValue 'description'
+     */
+    descriptionKey?: GetItemKeys<T>;
     items?: T;
     /** The value of the SelectMenu when initially rendered. Use when you do not need to control the state of the SelectMenu. */
     defaultValue?: GetModelValue<T, VK, M>;
@@ -136,32 +159,37 @@ export type SelectMenuEmits<A extends ArrayOrNested<SelectMenuItem>, VK extends
 type SlotProps<T extends SelectMenuItem> = (props: {
     item: T;
     index: number;
+    ui: SelectMenu['ui'];
 }) => any;
 export interface SelectMenuSlots<A extends ArrayOrNested<SelectMenuItem> = ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<A> | undefined = undefined, M extends boolean = false, T extends NestedItem<A> = NestedItem<A>> {
     'leading'(props: {
         modelValue?: GetModelValue<A, VK, M>;
         open: boolean;
-        ui: {
-            [K in keyof Required<SelectMenu['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: SelectMenu['ui'];
     }): any;
     'default'(props: {
         modelValue?: GetModelValue<A, VK, M>;
         open: boolean;
+        ui: SelectMenu['ui'];
     }): any;
     'trailing'(props: {
         modelValue?: GetModelValue<A, VK, M>;
         open: boolean;
-        ui: {
-            [K in keyof Required<SelectMenu['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: SelectMenu['ui'];
     }): any;
     'empty'(props: {
         searchTerm?: string;
     }): any;
     'item': SlotProps<T>;
     'item-leading': SlotProps<T>;
-    'item-label': SlotProps<T>;
+    'item-label'(props: {
+        item: T;
+        index: number;
+    }): any;
+    'item-description'(props: {
+        item: T;
+        index: number;
+    }): any;
     'item-trailing': SlotProps<T>;
     'content-top': (props?: {}) => any;
     'content-bottom': (props?: {}) => any;
@@ -229,7 +257,7 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
             };
             $forceUpdate: () => void;
             $nextTick: typeof import("vue").nextTick;
-            $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (... /** Event handler when highlighted element changes. */args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+            $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
         } & Readonly<{
             as: import("reka-ui").AsTag | import("vue").Component;
         }> & Omit<Readonly<import("reka-ui").ComboboxTriggerProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
@@ -279,7 +307,7 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
             };
             $forceUpdate: () => void;
             $nextTick: typeof import("vue").nextTick;
-            $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (... /** Event handler when highlighted element changes. */args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+            $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
         } & Readonly<{
             as: import("reka-ui").AsTag | import("vue").Component;
         }> & Omit<Readonly<import("reka-ui").ComboboxTriggerProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {