@nuxt/ui 4.6.1 → 4.7.1

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>>;

package/dist/runtime/components/Select.vue

@@ -4,12 +4,13 @@ import theme from "#build/ui/select";
 
 <script setup>
 import { useTemplateRef, computed, onMounted, toRef } from "vue";
-import { SelectRoot, SelectArrow, SelectTrigger, SelectPortal, SelectContent, SelectLabel, SelectGroup, SelectItem as RSelectItem, SelectItemIndicator, SelectItemText, SelectSeparator, useForwardPropsEmits } from "reka-ui";
+import { SelectRoot, SelectArrow, SelectTrigger, SelectPortal, SelectContent, SelectViewport, SelectValue as RSelectValue, SelectLabel, SelectGroup, SelectItem as RSelectItem, SelectItemIndicator, SelectItemText, SelectSeparator, useForwardPropsEmits } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../composables/useComponentUI";
-import { useFieldGroup } from "../composables/useFieldGroup";
+import { useResolvedVariants } from "../composables/useResolvedVariants";
+import { useFieldGroup, FieldGroupReset } from "../composables/useFieldGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { usePortal } from "../composables/usePortal";
@@ -63,12 +64,16 @@ const appConfig = useAppConfig();
 const uiProp = useComponentUI("select", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "disabled", "autocomplete", "required", "multiple"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
-const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
+const { position } = useResolvedVariants("select", props, theme, ["position"], {
+  position: () => props.content?.position
+});
+const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: position.value }));
 const arrowProps = toRef(() => defu(props.arrow, { rounded: true }));
-const { emitFormChange, emitFormInput, emitFormBlur, emitFormFocus, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
+const { emitFormChange, emitFormInput, emitFormBlur, emitFormFocus, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })));
-const selectSize = computed(() => fieldGroupSize.value || formGroupSize.value);
+const selectSize = computed(() => fieldGroupSize.value || formFieldSize.value);
+const isItemAligned = computed(() => position.value === "item-aligned");
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.select || {} })({
   color: color.value,
   variant: props.variant,
@@ -77,7 +82,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.select || {}
   highlight: highlight.value,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
-  fieldGroup: orientation.value
+  fieldGroup: orientation.value,
+  position: position.value
 }));
 const groups = computed(
   () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
@@ -144,7 +150,10 @@ function isSelectItem(item) {
 const viewportRef = useTemplateRef("viewportRef");
 defineExpose({
   triggerRef: toRef(() => triggerRef.value?.$el),
-  viewportRef: toRef(() => viewportRef.value)
+  viewportRef: toRef(() => {
+    const instance = viewportRef.value;
+    return instance && typeof instance === "object" && "$el" in instance ? instance.$el : instance;
+  })
 });
 </script>
 
@@ -174,16 +183,16 @@ defineExpose({
         </slot>
       </span>
 
-      <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" data-slot="value" :class="ui.value({ class: uiProp?.value })">
-            {{ displayedModelValue }}
-          </span>
-          <span v-else data-slot="placeholder" :class="ui.placeholder({ class: uiProp?.placeholder })">
-            {{ placeholder ?? "\xA0" }}
-          </span>
-        </template>
-      </slot>
+      <template v-for="displayedModelValue in [displayValue(modelValue)]" :key="displayedModelValue">
+        <RSelectValue
+          :data-slot="displayedModelValue != null ? 'value' : 'placeholder'"
+          :class="displayedModelValue != null ? ui.value({ class: uiProp?.value }) : ui.placeholder({ class: uiProp?.placeholder })"
+        >
+          <slot :model-value="modelValue" :open="open" :ui="ui">
+            {{ displayedModelValue ?? (placeholder ?? "\xA0") }}
+          </slot>
+        </RSelectValue>
+      </template>
 
       <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
         <slot name="trailing" :model-value="modelValue" :open="open" :ui="ui">
@@ -193,72 +202,74 @@ defineExpose({
     </SelectTrigger>
 
     <SelectPortal v-bind="portalProps">
-      <SelectContent data-slot="content" :class="ui.content({ class: uiProp?.content })" v-bind="contentProps">
-        <slot name="content-top" />
+      <FieldGroupReset>
+        <SelectContent data-slot="content" :class="ui.content({ class: uiProp?.content })" v-bind="contentProps">
+          <slot name="content-top" />
 
-        <div ref="viewportRef" role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiProp?.viewport })">
-          <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiProp?.group })">
-            <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-              <SelectLabel v-if="isSelectItem(item) && item.type === 'label'" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label, item.class] })">
-                {{ get(item, props.labelKey) }}
-              </SelectLabel>
+          <component :is="isItemAligned ? SelectViewport : 'div'" ref="viewportRef" role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiProp?.viewport })">
+            <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiProp?.group })">
+              <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+                <SelectLabel v-if="isSelectItem(item) && item.type === 'label'" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label, item.class] })">
+                  {{ get(item, props.labelKey) }}
+                </SelectLabel>
 
-              <SelectSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" data-slot="separator" :class="ui.separator({ class: [uiProp?.separator, item.ui?.separator, item.class] })" />
+                <SelectSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" data-slot="separator" :class="ui.separator({ class: [uiProp?.separator, item.ui?.separator, item.class] })" />
 
-              <RSelectItem
-                v-else
-                data-slot="item"
-                :class="ui.item({ class: [uiProp?.item, isSelectItem(item) && item.ui?.item, isSelectItem(item) && item.class] })"
-                :disabled="isSelectItem(item) && item.disabled"
-                :value="isSelectItem(item) ? get(item, props.valueKey) : item"
-                @select="isSelectItem(item) && item.onSelect?.($event)"
-              >
-                <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" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiProp?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
-                    <UAvatar v-else-if="isSelectItem(item) && item.avatar" :size="item.ui?.itemLeadingAvatarSize || uiProp?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [uiProp?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
-                    <UChip
-                      v-else-if="isSelectItem(item) && item.chip"
-                      :size="item.ui?.itemLeadingChipSize || uiProp?.itemLeadingChipSize || ui.itemLeadingChipSize()"
-                      inset
-                      standalone
-                      v-bind="item.chip"
-                      data-slot="itemLeadingChip"
-                      :class="ui.itemLeadingChip({ class: [uiProp?.itemLeadingChip, item.ui?.itemLeadingChip] })"
-                    />
-                  </slot>
+                <RSelectItem
+                  v-else
+                  data-slot="item"
+                  :class="ui.item({ class: [uiProp?.item, isSelectItem(item) && item.ui?.item, isSelectItem(item) && item.class] })"
+                  :disabled="isSelectItem(item) && item.disabled"
+                  :value="isSelectItem(item) ? get(item, props.valueKey) : item"
+                  @select="isSelectItem(item) && item.onSelect?.($event)"
+                >
+                  <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" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiProp?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
+                      <UAvatar v-else-if="isSelectItem(item) && item.avatar" :size="item.ui?.itemLeadingAvatarSize || uiProp?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [uiProp?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
+                      <UChip
+                        v-else-if="isSelectItem(item) && item.chip"
+                        :size="item.ui?.itemLeadingChipSize || uiProp?.itemLeadingChipSize || ui.itemLeadingChipSize()"
+                        inset
+                        standalone
+                        v-bind="item.chip"
+                        data-slot="itemLeadingChip"
+                        :class="ui.itemLeadingChip({ class: [uiProp?.itemLeadingChip, item.ui?.itemLeadingChip] })"
+                      />
+                    </slot>
 
-                  <span data-slot="itemWrapper" :class="ui.itemWrapper({ class: [uiProp?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })">
-                    <SelectItemText data-slot="itemLabel" :class="ui.itemLabel({ class: [uiProp?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
-                      <slot name="item-label" :item="item" :index="index">
-                        {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
-                      </slot>
-                    </SelectItemText>
+                    <span data-slot="itemWrapper" :class="ui.itemWrapper({ class: [uiProp?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })">
+                      <SelectItemText data-slot="itemLabel" :class="ui.itemLabel({ class: [uiProp?.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'])" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiProp?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })">
-                      <slot name="item-description" :item="item" :index="index">
-                        {{ get(item, props.descriptionKey) }}
-                      </slot>
+                      <span v-if="isSelectItem(item) && (get(item, props.descriptionKey) || !!slots['item-description'])" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiProp?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })">
+                        <slot name="item-description" :item="item" :index="index">
+                          {{ get(item, props.descriptionKey) }}
+                        </slot>
+                      </span>
                     </span>
-                  </span>
 
-                  <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [uiProp?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
-                    <slot name="item-trailing" :item="item" :index="index" :ui="ui" />
+                    <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [uiProp?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
+                      <slot name="item-trailing" :item="item" :index="index" :ui="ui" />
 
-                    <SelectItemIndicator as-child>
-                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiProp?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
-                    </SelectItemIndicator>
-                  </span>
-                </slot>
-              </RSelectItem>
-            </template>
-          </SelectGroup>
-        </div>
+                      <SelectItemIndicator as-child>
+                        <UIcon :name="selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiProp?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
+                      </SelectItemIndicator>
+                    </span>
+                  </slot>
+                </RSelectItem>
+              </template>
+            </SelectGroup>
+          </component>
 
-        <slot name="content-bottom" />
+          <slot name="content-bottom" />
 
-        <SelectArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
-      </SelectContent>
+          <SelectArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
+        </SelectContent>
+      </FieldGroupReset>
     </SelectPortal>
   </SelectRoot>
 </template>

package/dist/runtime/components/Select.vue.d.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>>;

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

@@ -225,7 +225,6 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(SelectMenuProps<T, VK, M, Mod, C> & {
         searchTerm?: string;
     }) & {
-        onClear?: (() => any) | undefined;
         onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
         onFocus?: ((event: FocusEvent) => any) | undefined;
@@ -253,6 +252,7 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
                 nullable: true;
             } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>;
         } | undefined) => any) | undefined;
+        onClear?: (() => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
         onCreate?: ((item: string) => any) | undefined;
         "onUpdate:modelValue"?: ((value: (Mod extends {
@@ -286,7 +286,7 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
     }>) => void;
     attrs: any;
     slots: SelectMenuSlots<T, VK, M, Mod, C, NestedItem<T>>;
-    emit: (((evt: "clear") => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: (Mod extends {
             number: true;
@@ -309,7 +309,7 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
         } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
             nullable: true;
         } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>;
-    } | undefined) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "create", item: string) => void) & ((evt: "update:modelValue", value: (Mod extends {
+    } | undefined) => void) & ((evt: "clear") => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "create", item: string) => void) & ((evt: "update:modelValue", value: (Mod extends {
         number: true;
     } ? (Mod extends {
         optional: true;

package/dist/runtime/components/SelectMenu.vue

@@ -9,7 +9,7 @@ import { defu } from "defu";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../composables/useComponentUI";
-import { useFieldGroup } from "../composables/useFieldGroup";
+import { useFieldGroup, FieldGroupReset } from "../composables/useFieldGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { useFilter } from "../composables/useFilter";
@@ -92,10 +92,10 @@ const virtualizerProps = toRef(() => {
   });
 });
 const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t("selectMenu.search"), variant: "none" }));
-const { emitFormBlur, emitFormFocus, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
+const { emitFormBlur, emitFormFocus, emitFormInput, emitFormChange, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })));
-const selectSize = computed(() => fieldGroupSize.value || formGroupSize.value);
+const selectSize = computed(() => fieldGroupSize.value || formFieldSize.value);
 const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate();
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   props: {
@@ -377,67 +377,69 @@ defineExpose({
     </ComboboxAnchor>
 
     <ComboboxPortal v-bind="portalProps">
-      <ComboboxContent data-slot="content" :class="ui.content({ class: uiProp?.content })" v-bind="contentProps">
-        <FocusScope trapped data-slot="focusScope" :class="ui.focusScope({ class: uiProp?.focusScope })">
-          <slot name="content-top" />
+      <FieldGroupReset>
+        <ComboboxContent data-slot="content" :class="ui.content({ class: uiProp?.content })" v-bind="contentProps">
+          <FocusScope trapped data-slot="focusScope" :class="ui.focusScope({ class: uiProp?.focusScope })">
+            <slot name="content-top" />
 
-          <ComboboxInput v-if="!!searchInput" v-model="searchTerm" :display-value="() => searchTerm" as-child>
-            <UInput
-              autofocus
-              autocomplete="off"
-              :size="selectSize"
-              v-bind="searchInputProps"
-              :model-modifiers="{
+            <ComboboxInput v-if="!!searchInput" v-model="searchTerm" :display-value="() => searchTerm" as-child>
+              <UInput
+                autofocus
+                autocomplete="off"
+                :size="selectSize"
+                v-bind="searchInputProps"
+                :model-modifiers="{
   trim: modelModifiers?.trim
 }"
-              data-slot="input"
-              :class="ui.input({ class: uiProp?.input })"
-              @change.stop
-            />
-          </ComboboxInput>
+                data-slot="input"
+                :class="ui.input({ class: uiProp?.input })"
+                @change.stop
+              />
+            </ComboboxInput>
 
-          <ComboboxEmpty data-slot="empty" :class="ui.empty({ class: uiProp?.empty })">
-            <slot name="empty" :search-term="searchTerm">
-              {{ searchTerm ? t("selectMenu.noMatch", { searchTerm }) : t("selectMenu.noData") }}
-            </slot>
-          </ComboboxEmpty>
+            <ComboboxEmpty data-slot="empty" :class="ui.empty({ class: uiProp?.empty })">
+              <slot name="empty" :search-term="searchTerm">
+                {{ searchTerm ? t("selectMenu.noMatch", { searchTerm }) : t("selectMenu.noData") }}
+              </slot>
+            </ComboboxEmpty>
 
-          <div ref="viewportRef" role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiProp?.viewport })">
-            <template v-if="!!virtualize">
-              <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
+            <div ref="viewportRef" role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiProp?.viewport })">
+              <template v-if="!!virtualize">
+                <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
 
-              <ComboboxVirtualizer
-                v-slot="{ option: item, virtualItem }"
-                :options="filteredItems"
-                :text-content="(item2) => isSelectItem(item2) ? get(item2, props.labelKey) : String(item2)"
-                v-bind="virtualizerProps"
-              >
-                <ReuseItemTemplate :item="item" :index="virtualItem.index" />
-              </ComboboxVirtualizer>
+                <ComboboxVirtualizer
+                  v-slot="{ option: item, virtualItem }"
+                  :options="filteredItems"
+                  :text-content="(item2) => isSelectItem(item2) ? get(item2, props.labelKey) : String(item2)"
+                  v-bind="virtualizerProps"
+                >
+                  <ReuseItemTemplate :item="item" :index="virtualItem.index" />
+                </ComboboxVirtualizer>
 
-              <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
-            </template>
+                <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
+              </template>
 
-            <template v-else>
-              <ComboboxGroup v-if="createItem && createItemPosition === 'top'" data-slot="group" :class="ui.group({ class: uiProp?.group })">
-                <ReuseCreateItemTemplate />
-              </ComboboxGroup>
+              <template v-else>
+                <ComboboxGroup v-if="createItem && createItemPosition === 'top'" data-slot="group" :class="ui.group({ class: uiProp?.group })">
+                  <ReuseCreateItemTemplate />
+                </ComboboxGroup>
 
-              <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiProp?.group })">
-                <ReuseItemTemplate v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`" :item="item" :index="index" />
-              </ComboboxGroup>
+                <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiProp?.group })">
+                  <ReuseItemTemplate v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`" :item="item" :index="index" />
+                </ComboboxGroup>
 
-              <ComboboxGroup v-if="createItem && createItemPosition === 'bottom'" data-slot="group" :class="ui.group({ class: uiProp?.group })">
-                <ReuseCreateItemTemplate />
-              </ComboboxGroup>
-            </template>
-          </div>
+                <ComboboxGroup v-if="createItem && createItemPosition === 'bottom'" data-slot="group" :class="ui.group({ class: uiProp?.group })">
+                  <ReuseCreateItemTemplate />
+                </ComboboxGroup>
+              </template>
+            </div>
 
-          <slot name="content-bottom" />
-        </FocusScope>
+            <slot name="content-bottom" />
+          </FocusScope>
 
-        <ComboboxArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
-      </ComboboxContent>
+          <ComboboxArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
+        </ComboboxContent>
+      </FieldGroupReset>
     </ComboboxPortal>
   </ComboboxRoot>
 </template>