@nuxt/ui 4.6.1 → 4.7.1

package/dist/runtime/components/Listbox.vue

@@ -0,0 +1,242 @@
+<script>
+import { computed, toRaw, toRef } from "vue";
+import theme from "#build/ui/listbox";
+</script>
+
+<script setup>
+import { ListboxRoot, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem as RekaListboxItem, ListboxItemIndicator, ListboxFilter, useForwardPropsEmits } from "reka-ui";
+import { createReusableTemplate, reactivePick } from "@vueuse/core";
+import { defu } from "defu";
+import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
+import { useFilter } from "../composables/useFilter";
+import { useFormField } from "../composables/useFormField";
+import { useLocale } from "../composables/useLocale";
+import { get, isArrayOfArray, looseToNumber } from "../utils";
+import { getEstimateSize } from "../utils/virtualizer";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+import UAvatar from "./Avatar.vue";
+import UChip from "./Chip.vue";
+import UInput from "./Input.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  id: { type: String, required: false },
+  as: { type: null, required: false },
+  size: { type: null, required: false },
+  items: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  modelModifiers: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  multiple: { type: Boolean, required: false },
+  valueKey: { type: null, required: false },
+  labelKey: { type: null, required: false, default: "label" },
+  descriptionKey: { type: null, required: false, default: "description" },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: null, required: false },
+  filter: { type: [Boolean, Object], required: false, default: false },
+  filterFields: { type: Array, required: false },
+  ignoreFilter: { type: Boolean, required: false },
+  selectedIcon: { type: null, required: false },
+  virtualize: { type: [Boolean, Object], required: false, default: false },
+  highlight: { type: Boolean, required: false },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false, default: 0 },
+  class: { type: null, required: false },
+  ui: { type: Object, required: false },
+  by: { type: [String, Function], required: false },
+  disabled: { type: Boolean, required: false },
+  highlightOnHover: { type: Boolean, required: false, default: true },
+  name: { type: String, required: false },
+  orientation: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  selectionBehavior: { type: String, required: false }
+});
+const emits = defineEmits(["entryFocus", "highlight", "leave", "change", "update:modelValue"]);
+const slots = defineSlots();
+const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("listbox", props);
+const { filterGroups } = useFilter();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "multiple", "selectionBehavior", "highlightOnHover", "by", "orientation", "required"), emits);
+const virtualizerProps = toRef(() => {
+  if (!props.virtualize) return false;
+  return defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
+    estimateSize: getEstimateSize(filteredItems.value, size.value || "md", props.descriptionKey, !!slots["item-description"])
+  });
+});
+const inputProps = toRef(() => defu(typeof props.filter === "object" ? props.filter : {}, { placeholder: t("listbox.search"), variant: "none" }));
+const { emitFormChange, emitFormInput, name, size, color, id, highlight, disabled, ariaAttrs } = useFormField(props, { bind: false });
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: false
+    }
+  }
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.listbox || {} })({
+  color: color.value,
+  size: size.value,
+  highlight: highlight.value,
+  disabled: disabled.value,
+  virtualize: !!props.virtualize
+}));
+function onUpdate(value) {
+  if (toRaw(props.modelValue) === value) {
+    return;
+  }
+  if (props.modelModifiers?.trim && (typeof value === "string" || value === null || value === void 0)) {
+    value = value?.trim() ?? null;
+  }
+  if (props.modelModifiers?.number) {
+    value = looseToNumber(value);
+  }
+  if (props.modelModifiers?.nullable) {
+    value ??= null;
+  }
+  if (props.modelModifiers?.optional && !props.modelModifiers?.nullable && value !== null) {
+    value ??= void 0;
+  }
+  const event = new Event("change", { target: { value } });
+  emits("change", event);
+  emitFormChange();
+  emitFormInput();
+}
+function onSelect(e, item) {
+  if (item.disabled) {
+    e.preventDefault();
+    return;
+  }
+  item.onSelect?.(e);
+}
+const groups = computed(
+  () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
+);
+function isStructuralItem(item) {
+  return !!item.type && ["label", "separator"].includes(item.type);
+}
+const filteredGroups = computed(() => {
+  if (props.ignoreFilter || !searchTerm.value) {
+    return groups.value;
+  }
+  const fields = Array.isArray(props.filterFields) ? props.filterFields : [props.labelKey];
+  return filterGroups(groups.value, searchTerm.value, {
+    fields,
+    isStructural: isStructuralItem
+  });
+});
+const filteredItems = computed(() => filteredGroups.value.flatMap((group) => group));
+</script>
+
+<template>
+  <DefineItemTemplate v-slot="{ item, index }">
+    <ListboxGroupLabel v-if="item.type === 'label'" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label, item.class] })">
+      {{ get(item, props.labelKey) }}
+    </ListboxGroupLabel>
+
+    <div v-else-if="item.type === 'separator'" role="separator" data-slot="separator" :class="ui.separator({ class: [uiProp?.separator, item.ui?.separator, item.class] })" />
+
+    <RekaListboxItem
+      v-else
+      :value="props.valueKey ? get(item, props.valueKey) : item"
+      :disabled="item.disabled"
+      data-slot="item"
+      :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class] })"
+      @select="onSelect($event, item)"
+    >
+      <slot name="item" :item="item" :index="index" :ui="ui">
+        <slot name="item-leading" :item="item" :index="index" :ui="ui">
+          <UIcon v-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiProp?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
+          <UAvatar v-else-if="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="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 v-if="get(item, props.labelKey) || get(item, props.descriptionKey) || !!slots['item-label'] || !!slots['item-description']" data-slot="itemWrapper" :class="ui.itemWrapper({ class: [uiProp?.itemWrapper, item.ui?.itemWrapper] })">
+          <span v-if="get(item, props.labelKey) || !!slots['item-label']" data-slot="itemLabel" :class="ui.itemLabel({ class: [uiProp?.itemLabel, item.ui?.itemLabel] })">
+            <slot name="item-label" :item="item" :index="index">
+              {{ get(item, props.labelKey) }}
+            </slot>
+          </span>
+
+          <span v-if="get(item, props.descriptionKey) || !!slots['item-description']" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiProp?.itemDescription, item.ui?.itemDescription] })">
+            <slot name="item-description" :item="item" :index="index">
+              {{ get(item, props.descriptionKey) }}
+            </slot>
+          </span>
+        </span>
+
+        <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [uiProp?.itemTrailing, item.ui?.itemTrailing] })">
+          <slot name="item-trailing" :item="item" :index="index" :ui="ui" />
+
+          <ListboxItemIndicator as-child>
+            <UIcon :name="selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiProp?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
+          </ListboxItemIndicator>
+        </span>
+      </slot>
+    </RekaListboxItem>
+  </DefineItemTemplate>
+
+  <ListboxRoot
+    :id="id"
+    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+    :disabled="disabled"
+    :name="name"
+    data-slot="root"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    @update:model-value="onUpdate"
+  >
+    <ListboxFilter v-if="filter" v-model="searchTerm" as-child>
+      <UInput
+        :autofocus="autofocus"
+        :autofocus-delay="autofocusDelay"
+        :size="size"
+        v-bind="inputProps"
+        data-slot="input"
+        :class="ui.input({ class: uiProp?.input })"
+      />
+    </ListboxFilter>
+
+    <ListboxContent data-slot="content" :class="ui.content({ class: uiProp?.content })">
+      <div v-if="loading" data-slot="loading" :class="ui.loading({ class: uiProp?.loading })">
+        <slot name="loading">
+          <UIcon :name="loadingIcon || appConfig.ui.icons.loading" data-slot="loadingIcon" :class="ui.loadingIcon({ class: uiProp?.loadingIcon })" />
+        </slot>
+      </div>
+      <div v-else-if="!filteredItems.length" data-slot="empty" :class="ui.empty({ class: uiProp?.empty })">
+        <slot name="empty" :search-term="searchTerm">
+          {{ searchTerm ? t("listbox.noMatch", { searchTerm }) : t("listbox.noData") }}
+        </slot>
+      </div>
+
+      <ListboxVirtualizer
+        v-else-if="!!virtualize"
+        v-slot="{ option: item, virtualItem }"
+        :options="filteredItems"
+        :text-content="(item2) => get(item2, props.labelKey)"
+        v-bind="virtualizerProps"
+      >
+        <ReuseItemTemplate :item="item" :index="virtualItem.index" />
+      </ListboxVirtualizer>
+
+      <template v-else>
+        <ListboxGroup 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" />
+        </ListboxGroup>
+      </template>
+    </ListboxContent>
+  </ListboxRoot>
+</template>

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>