@nuxt/ui 4.6.1 → 4.7.0

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

@@ -0,0 +1,228 @@
+import type { VNode } from 'vue';
+import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/listbox';
+import type { AvatarProps, ChipProps, IconProps, InputProps } from '../types';
+import type { ModelModifiers, ApplyModifiers } from '../types/input';
+import type { ArrayOrNested, GetItemKeys, GetModelValue, NestedItem } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
+type Listbox = ComponentConfig<typeof theme, AppConfig, 'listbox'>;
+export interface ListboxItem {
+    label?: string;
+    description?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    avatar?: AvatarProps;
+    chip?: ChipProps;
+    /**
+     * The item type.
+     * @defaultValue 'item'
+     */
+    type?: 'label' | 'separator' | 'item';
+    disabled?: boolean;
+    onSelect?: (e: Event) => void;
+    class?: any;
+    ui?: Pick<Listbox['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatar' | 'itemLeadingAvatarSize' | 'itemLeadingChip' | 'itemLeadingChipSize' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
+    [key: string]: any;
+}
+export interface ListboxProps<T extends ArrayOrNested<ListboxItem> = ArrayOrNested<ListboxItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>> extends Pick<ListboxRootProps, 'by' | 'disabled' | 'highlightOnHover' | 'name' | 'orientation' | 'required' | 'selectionBehavior'> {
+    id?: string;
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Listbox['variants']['size'];
+    /**
+     * The items to display in the list.
+     */
+    items?: T;
+    /**
+     * The controlled value of the Listbox. Can be bound with `v-model`.
+     */
+    modelValue?: ApplyModifiers<GetModelValue<T, VK, M>, Mod>;
+    modelModifiers?: Mod;
+    /**
+     * The default value when not controlled.
+     */
+    defaultValue?: ApplyModifiers<GetModelValue<T, VK, M>, Mod>;
+    /**
+     * Whether multiple items can be selected.
+     * @defaultValue false
+     */
+    multiple?: M & boolean;
+    /**
+     * When `items` is an array of objects, select the field to use as the value instead of the object itself.
+     * @defaultValue undefined
+     */
+    valueKey?: VK;
+    /**
+     * The key used to get the label from the item.
+     * @defaultValue 'label'
+     */
+    labelKey?: GetItemKeys<T>;
+    /**
+     * The key used to get the description from the item.
+     * @defaultValue 'description'
+     */
+    descriptionKey?: GetItemKeys<T>;
+    /**
+     * Whether the list is in a loading state.
+     */
+    loading?: boolean;
+    /**
+     * The icon displayed when loading.
+     * @defaultValue appConfig.ui.icons.loading
+     * @IconifyIcon
+     */
+    loadingIcon?: IconProps['name'];
+    /**
+     * Whether to display a filter input or not.
+     * Can be an object to pass additional props to the input.
+     * `{ placeholder: 'Search...', variant: 'none' }`{lang="ts-type"}
+     * @defaultValue false
+     */
+    filter?: boolean | Omit<InputProps, 'modelValue' | 'defaultValue'>;
+    /**
+     * The fields to filter by.
+     * @defaultValue [labelKey]
+     */
+    filterFields?: string[];
+    /**
+     * When `true`, disable the default filters, useful for custom filtering (useAsyncData, useFetch, etc.).
+     * @defaultValue false
+     */
+    ignoreFilter?: boolean;
+    /**
+     * The icon displayed when an item is selected.
+     * @defaultValue appConfig.ui.icons.check
+     * @IconifyIcon
+     */
+    selectedIcon?: IconProps['name'];
+    /**
+     * Enable virtualization for large lists.
+     * @defaultValue false
+     */
+    virtualize?: boolean | {
+        /**
+         * Number of items rendered outside the visible area
+         * @defaultValue 12
+         */
+        overscan?: number;
+        /**
+         * Estimated size (in px) of each item, or a function that returns the size for a given index
+         * @defaultValue 32
+         */
+        estimateSize?: number | ((index: number) => number);
+    };
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    class?: any;
+    ui?: Listbox['slots'];
+}
+export type ListboxEmits<T extends ArrayOrNested<ListboxItem> = ArrayOrNested<ListboxItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>> = Pick<ListboxRootEmits, 'entryFocus' | 'highlight' | 'leave'> & {
+    'change': [event: Event];
+    'update:modelValue': [value: ApplyModifiers<GetModelValue<T, VK, M>, Mod>];
+};
+type SlotProps<T> = (props: {
+    item: T;
+    index: number;
+    ui: Listbox['ui'];
+}) => VNode[];
+export type ListboxSlots<T extends ArrayOrNested<ListboxItem> = ArrayOrNested<ListboxItem>> = {
+    'loading'?(props?: {}): VNode[];
+    'empty'?(props: {
+        searchTerm: string;
+    }): VNode[];
+    'item'?: SlotProps<NestedItem<T>>;
+    'item-leading'?: SlotProps<NestedItem<T>>;
+    'item-label'?(props: {
+        item: NestedItem<T>;
+        index: number;
+    }): VNode[];
+    'item-description'?(props: {
+        item: NestedItem<T>;
+        index: number;
+    }): VNode[];
+    'item-trailing'?: SlotProps<NestedItem<T>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<ListboxItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, "lazy"> = Omit<ModelModifiers, "lazy">>(__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: import("vue").PublicProps & __VLS_PrettifyLocal<(ListboxProps<T, VK, M, Mod> & {
+        searchTerm?: string;
+    }) & {
+        onChange?: ((event: Event) => any) | undefined;
+        onHighlight?: ((payload: {
+            ref: HTMLElement;
+            value: import("reka-ui").AcceptableValue;
+        } | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: Mod extends {
+            number: true;
+        } ? (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) extends infer T_1 ? T_1 extends (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+        onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
+        onLeave?: ((event: Event) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: ListboxSlots<T>;
+    emit: (((evt: "change", event: Event) => void) & ((evt: "highlight", payload: {
+        ref: HTMLElement;
+        value: import("reka-ui").AcceptableValue;
+    } | undefined) => void) & ((evt: "update:modelValue", value: Mod extends {
+        number: true;
+    } ? (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) extends infer T_1 ? T_1 extends (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((event: "update:searchTerm", value: string) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/Modal.vue

@@ -8,6 +8,7 @@ import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent,
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../composables/useComponentUI";
+import { FieldGroupReset } from "../composables/useFieldGroup";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
 import { pointerDownOutside } from "../utils/overlay";
@@ -93,7 +94,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.modal || {} }
         <slot name="content" :close="close">
           <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
             <slot name="header" :close="close">
-              <div data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
+              <div v-if="title || !!slots.title || description || !!slots.description" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
                 <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
                   <slot name="title">
                     {{ title }}
@@ -142,17 +143,19 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.modal || {} }
     </DialogTrigger>
 
     <DialogPortal v-bind="portalProps">
-      <template v-if="scrollable">
-        <DialogOverlay data-slot="overlay" :class="ui.overlay({ class: uiProp?.overlay })">
-          <ReuseContentTemplate />
-        </DialogOverlay>
-      </template>
+      <FieldGroupReset>
+        <template v-if="scrollable">
+          <DialogOverlay data-slot="overlay" :class="ui.overlay({ class: uiProp?.overlay })">
+            <ReuseContentTemplate />
+          </DialogOverlay>
+        </template>
 
-      <template v-else>
-        <DialogOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: uiProp?.overlay })" />
+        <template v-else>
+          <DialogOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: uiProp?.overlay })" />
 
-        <ReuseContentTemplate />
-      </template>
+          <ReuseContentTemplate />
+        </template>
+      </FieldGroupReset>
     </DialogPortal>
   </DialogRoot>
 </template>

package/dist/runtime/components/Popover.vue

@@ -10,6 +10,7 @@ import { Popover, HoverCard } from "reka-ui/namespaced";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../composables/useComponentUI";
+import { FieldGroupReset } from "../composables/useFieldGroup";
 import { usePortal } from "../composables/usePortal";
 import { pointerDownOutside } from "../utils/overlay";
 import { tv } from "../utils/tv";
@@ -69,11 +70,13 @@ const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
     </Component.Anchor>
 
     <Component.Portal v-bind="portalProps">
-      <Component.Content v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })" v-on="contentEvents">
-        <slot name="content" v-bind="close ? { close } : {}" />
+      <FieldGroupReset>
+        <Component.Content v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })" v-on="contentEvents">
+          <slot name="content" v-bind="close ? { close } : {}" />
 
-        <Component.Arrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
-      </Component.Content>
+          <Component.Arrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
+        </Component.Content>
+      </FieldGroupReset>
     </Component.Portal>
   </Component.Root>
 </template>

package/dist/runtime/components/PricingTable.vue

@@ -46,80 +46,82 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate({
 
 <template>
   <DefineTierTemplate v-slot="{ tier }">
-    <slot :name="tier.id" :tier="tier">
-      <slot name="tier" :tier="tier">
-        <div data-slot="tierTitleWrapper" :class="ui.tierTitleWrapper({ class: uiProp?.tierTitleWrapper })">
-          <div data-slot="tierTitle" :class="ui.tierTitle({ class: uiProp?.tierTitle })">
-            <slot :name="`${tier.id}-title`" :tier="tier">
-              <slot name="tier-title" :tier="tier">
-                {{ tier.title }}
+    <div data-slot="tierWrapper" :class="ui.tierWrapper({ class: uiProp?.tierWrapper })">
+      <slot :name="tier.id" :tier="tier">
+        <slot name="tier" :tier="tier">
+          <div data-slot="tierTitleWrapper" :class="ui.tierTitleWrapper({ class: uiProp?.tierTitleWrapper })">
+            <div data-slot="tierTitle" :class="ui.tierTitle({ class: uiProp?.tierTitle })">
+              <slot :name="`${tier.id}-title`" :tier="tier">
+                <slot name="tier-title" :tier="tier">
+                  {{ tier.title }}
+                </slot>
               </slot>
-            </slot>
-          </div>
-
-          <slot :name="`${tier.id}-badge`" :tier="tier">
-            <slot name="tier-badge" :tier="tier">
-              <UBadge
-                v-if="tier.badge"
-                color="primary"
-                variant="subtle"
-                v-bind="typeof tier.badge === 'string' ? { label: tier.badge } : tier.badge"
-                data-slot="tierBadge"
-                :class="ui.tierBadge({ class: uiProp?.tierBadge })"
-              />
-            </slot>
-          </slot>
-        </div>
-
-        <div v-if="tier.description || !!slots['tier-description'] || !!slots[`${tier.id}-description`]" data-slot="tierDescription" :class="ui.tierDescription({ class: uiProp?.tierDescription })">
-          <slot :name="`${tier.id}-description`" :tier="tier">
-            <slot name="tier-description" :tier="tier">
-              {{ tier.description }}
-            </slot>
-          </slot>
-        </div>
+            </div>
 
-        <div v-if="tier.discount || tier.price || !!slots['tier-discount'] || !!slots[`${tier.id}-discount`] || !!slots['tier-price'] || !!slots[`${tier.id}-price`] || tier.billingCycle || tier.billingPeriod || !!slots['tier-billing'] || !!slots[`${tier.id}-billing`]" data-slot="tierPriceWrapper" :class="ui.tierPriceWrapper({ class: uiProp?.tierPriceWrapper })">
-          <div v-if="tier.discount && tier.price || !!slots[`${tier.id}-discount`] || !!slots['tier-discount']" data-slot="tierDiscount" :class="ui.tierDiscount({ class: uiProp?.tierDiscount })">
-            <slot :name="`${tier.id}-discount`" :tier="tier">
-              <slot name="tier-discount" :tier="tier">
-                {{ tier.price }}
+            <slot :name="`${tier.id}-badge`" :tier="tier">
+              <slot name="tier-badge" :tier="tier">
+                <UBadge
+                  v-if="tier.badge"
+                  color="primary"
+                  variant="subtle"
+                  v-bind="typeof tier.badge === 'string' ? { label: tier.badge } : tier.badge"
+                  data-slot="tierBadge"
+                  :class="ui.tierBadge({ class: uiProp?.tierBadge })"
+                />
               </slot>
             </slot>
           </div>
 
-          <div v-if="tier.discount || tier.price || !!slots[`${tier.id}-price`] || !!slots['tier-price']" data-slot="tierPrice" :class="ui.tierPrice({ class: uiProp?.tierPrice })">
-            <slot :name="`${tier.id}-price`" :tier="tier">
-              <slot name="tier-price" :tier="tier">
-                {{ tier.discount || tier.price }}
+          <div data-slot="tierDescription" :class="ui.tierDescription({ class: uiProp?.tierDescription })">
+            <slot :name="`${tier.id}-description`" :tier="tier">
+              <slot name="tier-description" :tier="tier">
+                {{ tier.description }}
               </slot>
             </slot>
           </div>
 
-          <div v-if="tier.billingCycle || tier.billingPeriod || !!slots[`${tier.id}-billing`] || !!slots['tier-billing']" data-slot="tierBilling" :class="ui.tierBilling({ class: uiProp?.tierBilling })">
-            <slot :name="`${tier.id}-billing`" :tier="tier">
-              <slot name="tier-billing" :tier="tier">
-                <span data-slot="tierBillingPeriod" :class="ui.tierBillingPeriod({ class: uiProp?.tierBillingPeriod })">
-                  {{ tier.billingPeriod || "\xA0" }}
-                </span>
+          <div data-slot="tierPriceWrapper" :class="ui.tierPriceWrapper({ class: uiProp?.tierPriceWrapper })">
+            <div v-if="tier.discount && tier.price || !!slots[`${tier.id}-discount`] || !!slots['tier-discount']" data-slot="tierDiscount" :class="ui.tierDiscount({ class: uiProp?.tierDiscount })">
+              <slot :name="`${tier.id}-discount`" :tier="tier">
+                <slot name="tier-discount" :tier="tier">
+                  {{ tier.price }}
+                </slot>
+              </slot>
+            </div>
+
+            <div v-if="tier.discount || tier.price || !!slots[`${tier.id}-price`] || !!slots['tier-price']" data-slot="tierPrice" :class="ui.tierPrice({ class: uiProp?.tierPrice })">
+              <slot :name="`${tier.id}-price`" :tier="tier">
+                <slot name="tier-price" :tier="tier">
+                  {{ tier.discount || tier.price }}
+                </slot>
+              </slot>
+            </div>
 
-                <span v-if="tier.billingCycle" data-slot="tierBillingCycle" :class="ui.tierBillingCycle({ class: uiProp?.tierBillingCycle })">
-                  {{ tier.billingCycle }}
-                </span>
+            <div v-if="tier.billingCycle || tier.billingPeriod || !!slots[`${tier.id}-billing`] || !!slots['tier-billing']" data-slot="tierBilling" :class="ui.tierBilling({ class: uiProp?.tierBilling })">
+              <slot :name="`${tier.id}-billing`" :tier="tier">
+                <slot name="tier-billing" :tier="tier">
+                  <span data-slot="tierBillingPeriod" :class="ui.tierBillingPeriod({ class: uiProp?.tierBillingPeriod })">
+                    {{ tier.billingPeriod || "\xA0" }}
+                  </span>
+
+                  <span v-if="tier.billingCycle" data-slot="tierBillingCycle" :class="ui.tierBillingCycle({ class: uiProp?.tierBillingCycle })">
+                    {{ tier.billingCycle }}
+                  </span>
+                </slot>
               </slot>
-            </slot>
+            </div>
           </div>
-        </div>
 
-        <div v-if="!!slots[`${tier.id}-button`] || !!slots['tier-button'] || tier.button" data-slot="tierButton" :class="ui.tierButton({ class: uiProp?.tierButton })">
-          <slot :name="`${tier.id}-button`" :tier="tier">
-            <slot name="tier-button" :tier="tier">
-              <UButton v-if="tier.button" block size="lg" v-bind="tier.button" />
+          <div v-if="!!slots[`${tier.id}-button`] || !!slots['tier-button'] || tier.button" data-slot="tierButton" :class="ui.tierButton({ class: uiProp?.tierButton })">
+            <slot :name="`${tier.id}-button`" :tier="tier">
+              <slot name="tier-button" :tier="tier">
+                <UButton v-if="tier.button" block size="lg" v-bind="tier.button" />
+              </slot>
             </slot>
-          </slot>
-        </div>
+          </div>
+        </slot>
       </slot>
-    </slot>
+    </div>
   </DefineTierTemplate>
 
   <DefineFeatureTemplate v-slot="{ feature, tier }">

package/dist/runtime/components/RadioGroup.vue

@@ -8,6 +8,7 @@ import { RadioGroupRoot, RadioGroupItem as RRadioGroupItem, RadioGroupIndicator,
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../composables/useComponentUI";
+import { useResolvedVariants } from "../composables/useResolvedVariants";
 import { useFormField } from "../composables/useFormField";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
@@ -39,13 +40,14 @@ const uiProp = useComponentUI("radioGroup", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "loop", "required"), emits);
 const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled, ariaAttrs } = useFormField(props, { bind: false });
 const id = _id.value ?? useId();
+const { variant } = useResolvedVariants("radioGroup", props, theme, ["variant"]);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.radioGroup || {} })({
   size: size.value,
   color: color.value,
   disabled: disabled.value,
   required: props.required,
   orientation: props.orientation,
-  variant: props.variant,
+  variant: variant.value,
   indicator: props.indicator
 }));
 function normalizeItem(item) {
@@ -108,7 +110,7 @@ function onUpdate(value) {
         </slot>
       </legend>
 
-      <component :is="!variant || variant === 'list' ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" data-slot="item" :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class], disabled: item.disabled || disabled })">
+      <component :is="variant === 'list' ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" data-slot="item" :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class], disabled: item.disabled || disabled })">
         <div data-slot="container" :class="ui.container({ class: [uiProp?.container, item.ui?.container] })">
           <RRadioGroupItem
             :id="item.id"
@@ -122,7 +124,7 @@ function onUpdate(value) {
         </div>
 
         <div v-if="item.label || !!slots.label || (item.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: [uiProp?.wrapper, item.ui?.wrapper] })">
-          <component :is="!variant || variant === 'list' ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label], disabled: item.disabled || disabled })">
+          <component :is="variant === 'list' ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label], disabled: item.disabled || disabled })">
             <slot name="label" :item="item" :model-value="modelValue">
               {{ item.label }}
             </slot>

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

@@ -183,7 +183,7 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectItem>, VK extends Get
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         triggerRef: Readonly<import("vue").Ref<HTMLButtonElement, HTMLButtonElement>>;
-        viewportRef: Readonly<import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>>;
+        viewportRef: Readonly<import("vue").Ref<HTMLElement | null, HTMLElement | null>>;
     }>) => void;
     attrs: any;
     slots: SelectSlots<T, VK, M, Mod, NestedItem<T>>;