@nuxt/ui 4.9.0 → 4.11.0

package/dist/runtime/components/Listbox.vue

@@ -1,9 +1,9 @@
 <script>
-import { computed, toRaw, toRef } from "vue";
 import theme from "#build/ui/listbox";
 </script>
 
 <script setup>
+import { computed, toRaw, toRef } from "vue";
 import { ListboxRoot, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem as RekaListboxItem, ListboxItemIndicator, ListboxFilter } from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { createReusableTemplate, reactivePick } from "@vueuse/core";
@@ -65,11 +65,15 @@ const rootProps = useForwardProps(reactivePick(props, "as", "modelValue", "defau
 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"])
+    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 { emitFormChange, emitFormInput, name, size: formFieldSize, color: formFieldColor, id, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props, { bind: false });
+const color = computed(() => formFieldColor.value ?? props.color);
+const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
+const size = computed(() => formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   props: {
     item: {
@@ -82,10 +86,10 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
     }
   }
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.listbox || {} })({
-  color: color.value ?? props.color,
-  size: size.value ?? props.size,
-  highlight: highlight.value ?? props.highlight,
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.listbox || {} })({
+  color: color.value,
+  size: size.value,
+  highlight: highlight.value,
   disabled: disabled.value,
   virtualize: !!props.virtualize
 }));
@@ -194,10 +198,10 @@ const filteredItems = computed(() => filteredGroups.value.flatMap((group) => gro
 
   <ListboxRoot
     :id="id"
+    data-slot="root"
     v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
     :disabled="disabled"
     :name="name"
-    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >

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

@@ -2,7 +2,10 @@ 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 { AvatarProps } from './Avatar.vue';
+import type { ChipProps } from './Chip.vue';
+import type { IconProps } from './Icon.vue';
+import type { InputProps } from './Input.vue';
 import type { ModelModifiers, ApplyModifiers } from '../types/input';
 import type { ArrayOrNested, GetItemKeys, GetModelValue, NestedItem } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
@@ -164,6 +167,11 @@ declare const __VLS_export: <T extends ArrayOrNested<ListboxItem>, VK extends Ge
         searchTerm?: string;
     }) & {
         onChange?: ((event: Event) => any) | undefined;
+        onLeave?: ((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 {
@@ -185,20 +193,18 @@ declare const __VLS_export: <T extends ArrayOrNested<ListboxItem>, VK extends Ge
         } ? 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;
-        onHighlight?: ((payload: {
-            ref: HTMLElement;
-            value: import("reka-ui").AcceptableValue;
-        } | undefined) => any) | undefined;
-        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
         onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
-        onLeave?: ((event: Event) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => 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: "update:modelValue", value: Mod extends {
+    emit: (((evt: "change", event: Event) => void) & ((evt: "leave", 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;
@@ -218,12 +224,9 @@ declare const __VLS_export: <T extends ArrayOrNested<ListboxItem>, VK extends Ge
         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: "highlight", payload: {
-        ref: HTMLElement;
-        value: import("reka-ui").AcceptableValue;
-    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((event: "update:searchTerm", value: string) => void);
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void)) & ((event: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Main.vue

@@ -16,7 +16,7 @@ const _props = defineProps({
 defineSlots();
 const props = useComponentProps("main", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.main || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.main || {} }));
 </script>
 
 <template>

package/dist/runtime/components/Marquee.vue

@@ -21,7 +21,7 @@ const _props = defineProps({
 defineSlots();
 const props = useComponentProps("marquee", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.marquee || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.marquee || {} })({
   pauseOnHover: props.pauseOnHover,
   orientation: props.orientation,
   reverse: props.reverse,

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

@@ -2,7 +2,9 @@ import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogConten
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/modal';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Modal = ComponentConfig<typeof theme, AppConfig, 'modal'>;
@@ -90,24 +92,24 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     enter: () => any;
-    "update:open": (value: boolean) => any;
-    "after:leave": () => any;
     leave: () => any;
+    "after:leave": () => any;
     "after:enter": () => any;
     "close:prevent": () => any;
+    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<ModalProps> & Readonly<{
     onEnter?: (() => any) | undefined;
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
-    "onAfter:leave"?: (() => any) | undefined;
     onLeave?: (() => any) | undefined;
+    "onAfter:leave"?: (() => any) | undefined;
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     close: boolean | Omit<ButtonProps, LinkPropsKeys>;
     modal: boolean;
     transition: boolean;
-    portal: boolean | string | HTMLElement;
     overlay: boolean;
+    portal: boolean | string | HTMLElement;
     dismissible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ModalSlots>;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/Modal.vue

@@ -31,14 +31,15 @@ const _props = defineProps({
   ui: { type: Object, required: false },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
-  modal: { type: Boolean, required: false, default: true }
+  modal: { type: Boolean, required: false, default: true },
+  unmountOnHide: { type: Boolean, required: false }
 });
 const emits = defineEmits(["leave", "after:leave", "enter", "after:enter", "close:prevent", "update:open"]);
 const slots = defineSlots();
 const props = useComponentProps("modal", _props);
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const rootProps = useForwardProps(reactivePick(props, "open", "defaultOpen", "modal"), emits);
+const rootProps = useForwardProps(reactivePick(props, "open", "defaultOpen", "modal", "unmountOnHide"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => props.content);
 const contentEvents = computed(() => {
@@ -57,7 +58,7 @@ const contentEvents = computed(() => {
   };
 });
 const [DefineContentTemplate, ReuseContentTemplate] = createReusableTemplate();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.modal || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.modal || {} })({
   transition: props.transition,
   fullscreen: props.fullscreen,
   overlay: props.overlay,
@@ -72,10 +73,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.modal || {} }
         data-slot="content"
         :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
         v-bind="contentProps"
-        @enter="emits('enter')"
-        @after-enter="emits('after:enter')"
-        @leave="emits('leave')"
-        @after-leave="emits('after:leave')"
+        @enter="!props.scrollable && emits('enter')"
+        @after-enter="!props.scrollable && emits('after:enter')"
+        @leave="!props.scrollable && emits('leave')"
+        @after-leave="!props.scrollable && emits('after:leave')"
         v-on="contentEvents"
       >
         <VisuallyHidden v-if="!props.title && !slots.title || !props.description && !slots.description || !!slots.content">
@@ -145,10 +146,17 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.modal || {} }
       <slot :open="open" />
     </DialogTrigger>
 
-    <DialogPortal v-bind="portalProps">
+    <DialogPortal v-bind="portalProps" :force-mount="portalProps.disabled && props.unmountOnHide === false || void 0">
       <FieldGroupReset>
         <template v-if="props.scrollable">
-          <DialogOverlay data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })">
+          <DialogOverlay
+            data-slot="overlay"
+            :class="ui.overlay({ class: props.ui?.overlay })"
+            @enter="emits('enter')"
+            @after-enter="emits('after:enter')"
+            @leave="emits('leave')"
+            @after-leave="emits('after:leave')"
+          >
             <ReuseContentTemplate />
           </DialogOverlay>
         </template>

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

@@ -2,7 +2,9 @@ import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogConten
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/modal';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Modal = ComponentConfig<typeof theme, AppConfig, 'modal'>;
@@ -90,24 +92,24 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     enter: () => any;
-    "update:open": (value: boolean) => any;
-    "after:leave": () => any;
     leave: () => any;
+    "after:leave": () => any;
     "after:enter": () => any;
     "close:prevent": () => any;
+    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<ModalProps> & Readonly<{
     onEnter?: (() => any) | undefined;
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
-    "onAfter:leave"?: (() => any) | undefined;
     onLeave?: (() => any) | undefined;
+    "onAfter:leave"?: (() => any) | undefined;
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     close: boolean | Omit<ButtonProps, LinkPropsKeys>;
     modal: boolean;
     transition: boolean;
-    portal: boolean | string | HTMLElement;
     overlay: boolean;
+    portal: boolean | string | HTMLElement;
     dismissible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ModalSlots>;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -2,7 +2,13 @@ import type { NavigationMenuRootProps, NavigationMenuContentProps, NavigationMen
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/navigation-menu';
-import type { AvatarProps, BadgeProps, ChipProps, IconProps, LinkProps, PopoverProps, TooltipProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { BadgeProps } from './Badge.vue';
+import type { ChipProps } from './Chip.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkProps } from './Link.vue';
+import type { PopoverProps } from './Popover.vue';
+import type { TooltipProps } from './Tooltip.vue';
 import type { ArrayOrNested, DynamicSlots, GetItemKeys, MergeTypes, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type NavigationMenu = ComponentConfig<typeof theme, AppConfig, 'navigationMenu'>;
@@ -231,7 +237,7 @@ declare const __VLS_export: <T extends ArrayOrNested<NavigationMenuItem>, K exte
     slots: NavigationMenuSlots<T, NestedItem<T>>;
     emit: (evt: "update:modelValue", value: NavigationMenuModelValue<K, O> | undefined) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/NavigationMenu.vue

@@ -81,7 +81,7 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
     listIndex: Number
   }
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.navigationMenu || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.navigationMenu || {} })({
   orientation: props.orientation,
   contentOrientation: props.orientation === "vertical" ? void 0 : props.contentOrientation,
   collapsed: props.collapsed,
@@ -293,6 +293,7 @@ function onLinkTrailingClick(e, item) {
   </DefineItemTemplate>
 
   <NavigationMenuRoot
+    data-slot="root"
     v-bind="{
   ...rootProps,
   ...props.orientation === 'horizontal' ? {
@@ -302,7 +303,6 @@ function onLinkTrailingClick(e, item) {
   ...$attrs
 }"
     :data-collapsed="props.collapsed"
-    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
     <slot name="list-leading" />

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

@@ -2,7 +2,13 @@ import type { NavigationMenuRootProps, NavigationMenuContentProps, NavigationMen
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/navigation-menu';
-import type { AvatarProps, BadgeProps, ChipProps, IconProps, LinkProps, PopoverProps, TooltipProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { BadgeProps } from './Badge.vue';
+import type { ChipProps } from './Chip.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkProps } from './Link.vue';
+import type { PopoverProps } from './Popover.vue';
+import type { TooltipProps } from './Tooltip.vue';
 import type { ArrayOrNested, DynamicSlots, GetItemKeys, MergeTypes, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type NavigationMenu = ComponentConfig<typeof theme, AppConfig, 'navigationMenu'>;
@@ -231,7 +237,7 @@ declare const __VLS_export: <T extends ArrayOrNested<NavigationMenuItem>, K exte
     slots: NavigationMenuSlots<T, NestedItem<T>>;
     emit: (evt: "update:modelValue", value: NavigationMenuModelValue<K, O> | undefined) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Page.vue

@@ -22,7 +22,7 @@ onBeforeUpdate(() => {
   hasLeft.value = !!slots.left;
   hasRight.value = !!slots.right;
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.page || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.page || {} })({
   left: hasLeft.value,
   right: hasRight.value
 }));

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

@@ -1,7 +1,8 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/page-anchors';
-import type { IconProps, LinkProps } from '../types';
+import type { IconProps } from './Icon.vue';
+import type { LinkProps } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type PageAnchors = ComponentConfig<typeof theme, AppConfig, 'pageAnchors'>;
 export interface PageAnchor extends Omit<LinkProps, 'custom'> {
@@ -51,7 +52,7 @@ declare const __VLS_export: <T extends PageAnchor>(__VLS_props: NonNullable<Awai
     slots: PageAnchorsSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/PageAnchors.vue

@@ -21,7 +21,7 @@ const _props = defineProps({
 const slots = defineSlots();
 const props = useComponentProps("pageAnchors", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageAnchors || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.pageAnchors || {} })());
 </script>
 
 <template>

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

@@ -1,7 +1,8 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/page-anchors';
-import type { IconProps, LinkProps } from '../types';
+import type { IconProps } from './Icon.vue';
+import type { LinkProps } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type PageAnchors = ComponentConfig<typeof theme, AppConfig, 'pageAnchors'>;
 export interface PageAnchor extends Omit<LinkProps, 'custom'> {
@@ -51,7 +52,7 @@ declare const __VLS_export: <T extends PageAnchor>(__VLS_props: NonNullable<Awai
     slots: PageAnchorsSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/PageAside.vue

@@ -16,7 +16,7 @@ const _props = defineProps({
 const slots = defineSlots();
 const props = useComponentProps("pageAside", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageAside || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.pageAside || {} })());
 </script>
 
 <template>

package/dist/runtime/components/PageBody.vue

@@ -16,7 +16,7 @@ const _props = defineProps({
 defineSlots();
 const props = useComponentProps("pageBody", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageBody || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.pageBody || {} }));
 </script>
 
 <template>

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

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/page-cta';
-import type { ButtonProps } from '../types';
+import type { ButtonProps } from './Button.vue';
 import type { ComponentConfig } from '../types/tv';
 type PageCTA = ComponentConfig<typeof theme, AppConfig, 'pageCTA'>;
 export interface PageCTAProps {

package/dist/runtime/components/PageCTA.vue

@@ -26,7 +26,7 @@ const slots = defineSlots();
 const props = useComponentProps("pageCTA", _props);
 const appConfig = useAppConfig();
 const prefix = usePrefix();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageCTA || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.pageCTA || {} })({
   variant: props.variant,
   orientation: props.orientation,
   reverse: props.reverse,

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

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/page-cta';
-import type { ButtonProps } from '../types';
+import type { ButtonProps } from './Button.vue';
 import type { ComponentConfig } from '../types/tv';
 type PageCTA = ComponentConfig<typeof theme, AppConfig, 'pageCTA'>;
 export interface PageCTAProps {

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

@@ -1,7 +1,8 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/page-card';
-import type { IconProps, LinkProps } from '../types';
+import type { IconProps } from './Icon.vue';
+import type { LinkProps } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type PageCard = ComponentConfig<typeof theme, AppConfig, 'pageCard'>;
 export interface PageCardProps {
@@ -49,7 +50,7 @@ export interface PageCardProps {
     variant?: PageCard['variants']['variant'];
     to?: LinkProps['to'];
     target?: LinkProps['target'];
-    onClick?: (event: MouseEvent) => void | Promise<void>;
+    onClick?: (event: MouseEvent) => void;
     class?: any;
     ui?: PageCard['slots'];
 }

package/dist/runtime/components/PageCard.vue

@@ -49,7 +49,7 @@ watch(() => props.spotlight, (value) => {
     motionControl.pause();
   }
 }, { immediate: true });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageCard || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.pageCard || {} })({
   orientation: props.orientation,
   reverse: props.reverse,
   variant: props.variant,
@@ -70,8 +70,9 @@ const ariaLabel = computed(() => {
   <Primitive
     ref="cardRef"
     :as="props.as"
+    v-bind="!props.to ? $attrs : {}"
     :data-orientation="props.orientation"
-    data-slot="root"
+    :data-slot="$attrs['data-slot'] ?? 'root'"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="spotlight && { '--spotlight-x': `${elementX}px`, '--spotlight-y': `${elementY}px` }"
     @click="props.onClick"
@@ -117,7 +118,7 @@ const ariaLabel = computed(() => {
     <ULink
       v-if="props.to"
       :aria-label="ariaLabel"
-      v-bind="{ to: props.to, target: props.target, ...$attrs }"
+      v-bind="{ 'to': props.to, 'target': props.target, ...$attrs, 'data-slot': void 0 }"
       :class="prefix('focus:outline-none peer')"
       raw
     >

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

@@ -1,7 +1,8 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/page-card';
-import type { IconProps, LinkProps } from '../types';
+import type { IconProps } from './Icon.vue';
+import type { LinkProps } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type PageCard = ComponentConfig<typeof theme, AppConfig, 'pageCard'>;
 export interface PageCardProps {
@@ -49,7 +50,7 @@ export interface PageCardProps {
     variant?: PageCard['variants']['variant'];
     to?: LinkProps['to'];
     target?: LinkProps['target'];
-    onClick?: (event: MouseEvent) => void | Promise<void>;
+    onClick?: (event: MouseEvent) => void;
     class?: any;
     ui?: PageCard['slots'];
 }

package/dist/runtime/components/PageColumns.vue

@@ -16,7 +16,7 @@ const _props = defineProps({
 defineSlots();
 const props = useComponentProps("pageColumns", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageColumns || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.pageColumns || {} }));
 </script>
 
 <template>

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

@@ -1,7 +1,8 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/page-feature';
-import type { IconProps, LinkProps } from '../types';
+import type { IconProps } from './Icon.vue';
+import type { LinkProps } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type PageFeature = ComponentConfig<typeof theme, AppConfig, 'pageFeature'>;
 export interface PageFeatureProps {
@@ -24,7 +25,7 @@ export interface PageFeatureProps {
     orientation?: PageFeature['variants']['orientation'];
     to?: LinkProps['to'];
     target?: LinkProps['target'];
-    onClick?: (event: MouseEvent) => void | Promise<void>;
+    onClick?: (event: MouseEvent) => void;
     class?: any;
     ui?: PageFeature['slots'];
 }

package/dist/runtime/components/PageFeature.vue

@@ -29,7 +29,7 @@ const slots = defineSlots();
 const props = useComponentProps("pageFeature", _props);
 const appConfig = useAppConfig();
 const prefix = usePrefix();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageFeature || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.pageFeature || {} })({
   orientation: props.orientation,
   title: !!props.title || !!slots.title,
   to: !!props.to || !!props.onClick
@@ -41,7 +41,14 @@ const ariaLabel = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="props.onClick">
+  <Primitive
+    :as="props.as"
+    v-bind="!props.to ? $attrs : {}"
+    :data-orientation="props.orientation"
+    :data-slot="$attrs['data-slot'] ?? 'root'"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    @click="props.onClick"
+  >
     <div v-if="props.icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading" :ui="ui">
         <UIcon v-if="props.icon" :name="props.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
@@ -52,7 +59,7 @@ const ariaLabel = computed(() => {
       <ULink
         v-if="props.to"
         :aria-label="ariaLabel"
-        v-bind="{ to: props.to, target: props.target, ...$attrs }"
+        v-bind="{ 'to': props.to, 'target': props.target, ...$attrs, 'data-slot': void 0 }"
         :class="prefix('focus:outline-none peer')"
         raw
       >

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

@@ -1,7 +1,8 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/page-feature';
-import type { IconProps, LinkProps } from '../types';
+import type { IconProps } from './Icon.vue';
+import type { LinkProps } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type PageFeature = ComponentConfig<typeof theme, AppConfig, 'pageFeature'>;
 export interface PageFeatureProps {
@@ -24,7 +25,7 @@ export interface PageFeatureProps {
     orientation?: PageFeature['variants']['orientation'];
     to?: LinkProps['to'];
     target?: LinkProps['target'];
-    onClick?: (event: MouseEvent) => void | Promise<void>;
+    onClick?: (event: MouseEvent) => void;
     class?: any;
     ui?: PageFeature['slots'];
 }

package/dist/runtime/components/PageGrid.vue

@@ -16,7 +16,7 @@ const _props = defineProps({
 defineSlots();
 const props = useComponentProps("pageGrid", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageGrid || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.pageGrid || {} }));
 </script>
 
 <template>