@nuxt/ui 4.6.1 → 4.7.0

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>

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

@@ -94,10 +94,7 @@ const menuProps = toRef(() => defu(props.menu, {
   title: props.title,
   description: props.description,
   close: props.close,
-  closeIcon: props.closeIcon,
-  content: {
-    onOpenAutoFocus: (e) => e.preventDefault()
-  }
+  closeIcon: props.closeIcon
 }, props.mode === "modal" ? {} : props.mode === "slideover" ? { side: props.side, inset: props.variant === "inset" } : {}));
 </script>
 

package/dist/runtime/components/Slideover.vue

@@ -8,6 +8,7 @@ import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent,
 import { reactivePick } 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";
@@ -68,78 +69,80 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
     </DialogTrigger>
 
     <DialogPortal v-bind="portalProps">
-      <DialogOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: uiProp?.overlay })" />
+      <FieldGroupReset>
+        <DialogOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: uiProp?.overlay })" />
 
-      <DialogContent
-        :data-side="side"
-        data-slot="content"
-        :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
-        v-bind="contentProps"
-        @after-enter="emits('after:enter')"
-        @after-leave="emits('after:leave')"
-        v-on="contentEvents"
-      >
-        <VisuallyHidden v-if="!title && !slots.title || !description && !slots.description || !!slots.content">
-          <DialogTitle v-if="!title && !slots.title" />
-          <DialogTitle v-else-if="!!slots.content">
-            <slot name="title">
-              {{ title }}
-            </slot>
-          </DialogTitle>
+        <DialogContent
+          :data-side="side"
+          data-slot="content"
+          :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
+          v-bind="contentProps"
+          @after-enter="emits('after:enter')"
+          @after-leave="emits('after:leave')"
+          v-on="contentEvents"
+        >
+          <VisuallyHidden v-if="!title && !slots.title || !description && !slots.description || !!slots.content">
+            <DialogTitle v-if="!title && !slots.title" />
+            <DialogTitle v-else-if="!!slots.content">
+              <slot name="title">
+                {{ title }}
+              </slot>
+            </DialogTitle>
 
-          <DialogDescription v-if="!description && !slots.description" />
-          <DialogDescription v-else-if="!!slots.content">
-            <slot name="description">
-              {{ description }}
-            </slot>
-          </DialogDescription>
-        </VisuallyHidden>
+            <DialogDescription v-if="!description && !slots.description" />
+            <DialogDescription v-else-if="!!slots.content">
+              <slot name="description">
+                {{ description }}
+              </slot>
+            </DialogDescription>
+          </VisuallyHidden>
 
-        <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 })">
-                <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
-                  <slot name="title">
-                    {{ title }}
-                  </slot>
-                </DialogTitle>
+          <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 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 }}
+                    </slot>
+                  </DialogTitle>
 
-                <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
-                  <slot name="description">
-                    {{ description }}
-                  </slot>
-                </DialogDescription>
-              </div>
+                  <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+                    <slot name="description">
+                      {{ description }}
+                    </slot>
+                  </DialogDescription>
+                </div>
 
-              <slot name="actions" />
+                <slot name="actions" />
 
-              <DialogClose v-if="props.close || !!slots.close" as-child>
-                <slot name="close" :ui="ui">
-                  <UButton
-                    v-if="props.close"
-                    :icon="closeIcon || appConfig.ui.icons.close"
-                    color="neutral"
-                    variant="ghost"
-                    :aria-label="t('slideover.close')"
-                    v-bind="typeof props.close === 'object' ? props.close : {}"
-                    data-slot="close"
-                    :class="ui.close({ class: uiProp?.close })"
-                  />
-                </slot>
-              </DialogClose>
-            </slot>
-          </div>
+                <DialogClose v-if="props.close || !!slots.close" as-child>
+                  <slot name="close" :ui="ui">
+                    <UButton
+                      v-if="props.close"
+                      :icon="closeIcon || appConfig.ui.icons.close"
+                      color="neutral"
+                      variant="ghost"
+                      :aria-label="t('slideover.close')"
+                      v-bind="typeof props.close === 'object' ? props.close : {}"
+                      data-slot="close"
+                      :class="ui.close({ class: uiProp?.close })"
+                    />
+                  </slot>
+                </DialogClose>
+              </slot>
+            </div>
 
-          <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
-            <slot name="body" :close="close" />
-          </div>
+            <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+              <slot name="body" :close="close" />
+            </div>
 
-          <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
-            <slot name="footer" :close="close" />
-          </div>
-        </slot>
-      </DialogContent>
+            <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+              <slot name="footer" :close="close" />
+            </div>
+          </slot>
+        </DialogContent>
+      </FieldGroupReset>
     </DialogPortal>
   </DialogRoot>
 </template>