@nuxt/ui 4.0.1 → 4.2.0

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

@@ -1,4 +1,4 @@
-import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui';
+import type { NavigationMenuRootProps, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/navigation-menu';
 import type { AvatarProps, BadgeProps, IconProps, LinkProps, PopoverProps, TooltipProps } from '../types';
@@ -52,17 +52,45 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     children?: NavigationMenuChildItem[];
     defaultOpen?: boolean;
     open?: boolean;
-    onSelect?(e: Event): void;
+    onSelect?: (e: Event) => void;
     class?: any;
     ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkTrailingBadgeSize' | 'linkTrailingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childLabel' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'childLinkDescription'>;
     [key: string]: any;
 }
-export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'>, Pick<AccordionRootProps, 'disabled' | 'type' | 'collapsible'> {
+type SingleOrMultipleType = 'single' | 'multiple';
+type Orientation = NavigationMenuRootProps['orientation'];
+type NavigationMenuModelValue<K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation> = O extends 'horizontal' ? string : K extends 'single' ? string : K extends 'multiple' ? string[] : string | string[];
+export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>, K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation> extends Pick<NavigationMenuRootProps, 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'>, Pick<AccordionRootProps, 'disabled' | 'collapsible'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
      */
     as?: any;
+    /**
+     * Determines whether a "single" or "multiple" items can be selected at a time.
+     *
+     * Only works when `orientation` is `vertical`.
+     * @defaultValue 'multiple'
+     */
+    type?: K;
+    /**
+     * The controlled value of the active item(s).
+     * - In horizontal orientation: always `string`
+     * - In vertical orientation with `type="single"`: `string`
+     * - In vertical orientation with `type="multiple"`: `string[]`
+     *
+     * Use this when you need to control the state of the items. Can be binded with `v-model`
+     */
+    modelValue?: NavigationMenuModelValue<K, O>;
+    /**
+     * The default active value of the item(s).
+     * - In horizontal orientation: always `string`
+     * - In vertical orientation with `type="single"`: `string`
+     * - In vertical orientation with `type="multiple"`: `string[]`
+     *
+     * Use when you do not need to control the state of the item(s).
+     */
+    defaultValue?: NavigationMenuModelValue<K, O>;
     /**
      * The icon displayed to open the menu.
      * @defaultValue appConfig.ui.icons.chevronDown
@@ -89,7 +117,7 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
      * The orientation of the menu.
      * @defaultValue 'horizontal'
      */
-    orientation?: NavigationMenuRootProps['orientation'];
+    orientation?: O;
     /**
      * Collapse the navigation menu to only show icons.
      * Only works when `orientation` is `vertical`.
@@ -135,33 +163,52 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
     class?: any;
     ui?: NavigationMenu['slots'];
 }
-export interface NavigationMenuEmits extends NavigationMenuRootEmits {
-}
+export type NavigationMenuEmits<K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation> = {
+    /**
+     * Event handler called when the value changes.
+     * - In horizontal orientation: emits `string`
+     * - In vertical orientation with `type="single"`: emits `string | undefined`
+     * - In vertical orientation with `type="multiple"`: emits `string[] | undefined`
+     */
+    'update:modelValue': [value: NavigationMenuModelValue<K, O> | undefined];
+};
 type SlotProps<T extends NavigationMenuItem> = (props: {
     item: T;
     index: number;
     active?: boolean;
+    ui: NavigationMenu['ui'];
 }) => any;
 export type NavigationMenuSlots<A extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>, T extends NestedItem<A> = NestedItem<A>> = {
     'item': SlotProps<T>;
     'item-leading': SlotProps<T>;
-    'item-label': SlotProps<T>;
+    'item-label': (props: {
+        item: T;
+        index: number;
+        active?: boolean;
+    }) => any;
     'item-trailing': SlotProps<T>;
-    'item-content': SlotProps<T>;
+    'item-content': SlotProps<T> & {
+        close?: () => void;
+    };
     'list-leading': (props?: {}) => any;
     'list-trailing': (props?: {}) => any;
-} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing' | 'content', {
+} & DynamicSlots<MergeTypes<T>, 'label', {
+    index: number;
+    active?: boolean;
+    ui: NavigationMenu['ui'];
+}> & DynamicSlots<MergeTypes<T>, 'leading' | 'trailing' | 'content', {
     index: number;
     active?: boolean;
+    ui: NavigationMenu['ui'];
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<NavigationMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<NavigationMenuProps<T> & {
-        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+declare const __VLS_export: <T extends ArrayOrNested<NavigationMenuItem>, K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<NavigationMenuProps<T, K, O> & {
+        "onUpdate:modelValue"?: ((value: NavigationMenuModelValue<K, O> | undefined) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: {}) => void;
     attrs: any;
     slots: NavigationMenuSlots<T, NestedItem<T>>;
-    emit: (evt: "update:modelValue", value: string) => void;
+    emit: (evt: "update:modelValue", value: NavigationMenuModelValue<K, O> | undefined) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Page.vue

@@ -21,16 +21,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.page || {} })
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <Slot v-if="!!slots.left" :class="ui.left({ class: props.ui?.left })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <Slot v-if="!!slots.left" data-slot="left" :class="ui.left({ class: props.ui?.left })">
       <slot name="left" />
     </Slot>
 
-    <div :class="ui.center({ class: props.ui?.center })">
+    <div data-slot="center" :class="ui.center({ class: props.ui?.center })">
       <slot />
     </div>
 
-    <Slot v-if="!!slots.right" :class="ui.right({ class: props.ui?.right })">
+    <Slot v-if="!!slots.right" data-slot="right" :class="ui.right({ class: props.ui?.right })">
       <slot name="right" />
     </Slot>
   </Primitive>

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

@@ -25,12 +25,19 @@ export interface PageAnchorsProps<T extends PageAnchor = PageAnchor> {
 type SlotProps<T> = (props: {
     link: T;
     active: boolean;
+    ui: PageAnchors['ui'];
 }) => any;
 export interface PageAnchorsSlots<T extends PageAnchor = PageAnchor> {
     'link': SlotProps<T>;
     'link-leading': SlotProps<T>;
-    'link-label': SlotProps<T>;
-    'link-trailing': SlotProps<T>;
+    'link-label'(props: {
+        link: T;
+        active: boolean;
+    }): any;
+    'link-trailing'(props: {
+        link: T;
+        active: boolean;
+    }): any;
 }
 declare const __VLS_export: <T extends PageAnchor>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<PageAnchorsProps<T>> & import("vue").PublicProps;

package/dist/runtime/components/PageAnchors.vue

@@ -23,24 +23,24 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageAnchors |
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <ul :class="ui.list({ class: props.ui?.list })">
-      <li v-for="(link, index) in links" :key="index" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ul data-slot="list" :class="ui.list({ class: props.ui?.list })">
+      <li v-for="(link, index) in links" :key="index" data-slot="item" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
         <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(link)" custom>
-          <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
-            <slot name="link" :link="link" :active="active">
-              <div v-if="link.icon || !!slots['link-leading']" :class="ui.linkLeading({ class: [props.ui?.linkLeading, link.ui?.linkLeading], active })">
-                <slot name="link-leading" :link="link" :active="active">
-                  <UIcon v-if="link.icon" :name="link.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
+          <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
+            <slot name="link" :link="link" :active="active" :ui="ui">
+              <div v-if="link.icon || !!slots['link-leading']" data-slot="linkLeading" :class="ui.linkLeading({ class: [props.ui?.linkLeading, link.ui?.linkLeading], active })">
+                <slot name="link-leading" :link="link" :active="active" :ui="ui">
+                  <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
                 </slot>
               </div>
 
-              <span v-if="link.label || !!slots['link-label']" :class="ui.linkLabel({ class: [props.ui?.linkLabel, link.ui?.linkLabel], active })">
+              <span v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="ui.linkLabel({ class: [props.ui?.linkLabel, link.ui?.linkLabel], active })">
                 <slot name="link-label" :link="link" :active="active">
                   {{ link.label }}
                 </slot>
 
-                <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
+                <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkLabelExternalIcon" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
               </span>
 
               <slot name="link-trailing" :link="link" :active="active" />

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

@@ -25,12 +25,19 @@ export interface PageAnchorsProps<T extends PageAnchor = PageAnchor> {
 type SlotProps<T> = (props: {
     link: T;
     active: boolean;
+    ui: PageAnchors['ui'];
 }) => any;
 export interface PageAnchorsSlots<T extends PageAnchor = PageAnchor> {
     'link': SlotProps<T>;
     'link-leading': SlotProps<T>;
-    'link-label': SlotProps<T>;
-    'link-trailing': SlotProps<T>;
+    'link-label'(props: {
+        link: T;
+        active: boolean;
+    }): any;
+    'link-trailing'(props: {
+        link: T;
+        active: boolean;
+    }): any;
 }
 declare const __VLS_export: <T extends PageAnchor>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<PageAnchorsProps<T>> & import("vue").PublicProps;

package/dist/runtime/components/PageAside.vue

@@ -18,14 +18,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageAside ||
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.container({ class: props.ui?.container })">
-      <div v-if="!!slots.top" :class="ui.top({ class: props.ui?.top })">
-        <div :class="ui.topHeader({ class: props.ui?.topHeader })" />
-        <div :class="ui.topBody({ class: props.ui?.topBody })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.top" data-slot="top" :class="ui.top({ class: props.ui?.top })">
+        <div data-slot="topHeader" :class="ui.topHeader({ class: props.ui?.topHeader })" />
+        <div data-slot="topBody" :class="ui.topBody({ class: props.ui?.topBody })">
           <slot name="top" />
         </div>
-        <div :class="ui.topFooter({ class: props.ui?.topFooter })" />
+        <div data-slot="topFooter" :class="ui.topFooter({ class: props.ui?.topFooter })" />
       </div>
 
       <slot />

package/dist/runtime/components/PageCTA.vue

@@ -31,20 +31,20 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageCTA || {}
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="top" />
 
-    <UContainer :class="ui.container({ class: props.ui?.container })">
-      <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || !!slots.body || !!slots.footer || (links?.length || !!slots.links)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-        <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" :class="ui.header({ class: props.ui?.header })">
+    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || !!slots.body || !!slots.footer || (links?.length || !!slots.links)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
           <slot name="header">
-            <h2 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+            <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
               <slot name="title">
                 {{ title }}
               </slot>
             </h2>
 
-            <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+            <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
               <slot name="description">
                 {{ description }}
               </slot>
@@ -52,13 +52,13 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageCTA || {}
           </slot>
         </div>
 
-        <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
+        <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: props.ui?.body })">
           <slot name="body" />
         </div>
 
-        <div v-if="!!slots.footer || (links?.length || !!slots.links)" :class="ui.footer({ class: props.ui?.footer })">
+        <div v-if="!!slots.footer || (links?.length || !!slots.links)" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
           <slot name="footer">
-            <div v-if="links?.length || !!slots.links" :class="ui.links({ class: props.ui?.links })">
+            <div v-if="links?.length || !!slots.links" data-slot="links" :class="ui.links({ class: props.ui?.links })">
               <slot name="links">
                 <UButton v-for="(link, index) in links" :key="index" size="lg" v-bind="link" />
               </slot>

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

@@ -55,7 +55,9 @@ export interface PageCardProps {
 export interface PageCardSlots {
     header(props?: {}): any;
     body(props?: {}): any;
-    leading(props?: {}): any;
+    leading(props: {
+        ui: PageCard['ui'];
+    }): any;
     title(props?: {}): any;
     description(props?: {}): any;
     footer(props?: {}): any;

package/dist/runtime/components/PageCard.vue

@@ -67,33 +67,34 @@ const ariaLabel = computed(() => {
     ref="cardRef"
     :as="as"
     :data-orientation="orientation"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="spotlight && { '--spotlight-x': `${elementX}px`, '--spotlight-y': `${elementY}px` }"
     @click="onClick"
   >
-    <div v-if="props.spotlight" :class="ui.spotlight({ class: props.ui?.spotlight })" />
+    <div v-if="props.spotlight" data-slot="spotlight" :class="ui.spotlight({ class: props.ui?.spotlight })" />
 
-    <div :class="ui.container({ class: props.ui?.container })">
-      <div v-if="!!slots.header || (icon || !!slots.leading) || !!slots.body || (title || !!slots.title) || (description || !!slots.description) || !!slots.footer" :class="ui.wrapper({ class: props.ui?.wrapper })">
-        <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.header || (icon || !!slots.leading) || !!slots.body || (title || !!slots.title) || (description || !!slots.description) || !!slots.footer" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
           <slot name="header" />
         </div>
 
-        <div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-          <slot name="leading">
-            <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <div v-if="icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
+          <slot name="leading" :ui="ui">
+            <UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
           </slot>
         </div>
 
-        <div v-if="!!slots.body || (title || !!slots.title) || (description || !!slots.description)" :class="ui.body({ class: props.ui?.body })">
+        <div v-if="!!slots.body || (title || !!slots.title) || (description || !!slots.description)" data-slot="body" :class="ui.body({ class: props.ui?.body })">
           <slot name="body">
-            <div v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+            <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
               <slot name="title">
                 {{ title }}
               </slot>
             </div>
 
-            <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+            <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
               <slot name="description">
                 {{ description }}
               </slot>
@@ -101,7 +102,7 @@ const ariaLabel = computed(() => {
           </slot>
         </div>
 
-        <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+        <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
           <slot name="footer" />
         </div>
       </div>

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

@@ -55,7 +55,9 @@ export interface PageCardProps {
 export interface PageCardSlots {
     header(props?: {}): any;
     body(props?: {}): any;
-    leading(props?: {}): any;
+    leading(props: {
+        ui: PageCard['ui'];
+    }): any;
     title(props?: {}): any;
     description(props?: {}): any;
     footer(props?: {}): any;

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

@@ -28,7 +28,9 @@ export interface PageFeatureProps {
     ui?: PageFeature['slots'];
 }
 export interface PageFeatureSlots {
-    leading(props?: {}): any;
+    leading(props: {
+        ui: PageFeature['ui'];
+    }): any;
     title(props?: {}): any;
     description(props?: {}): any;
     default(props?: {}): any;

package/dist/runtime/components/PageFeature.vue

@@ -36,14 +36,14 @@ const ariaLabel = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
-    <div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-      <slot name="leading">
-        <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
+    <div v-if="icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
+      <slot name="leading" :ui="ui">
+        <UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
       </slot>
     </div>
 
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
       <ULink
         v-if="to"
         :aria-label="ariaLabel"
@@ -56,13 +56,13 @@ const ariaLabel = computed(() => {
       </ULink>
 
       <slot>
-        <div v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+        <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
             {{ title }}
           </slot>
         </div>
 
-        <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
             {{ description }}
           </slot>

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

@@ -28,7 +28,9 @@ export interface PageFeatureProps {
     ui?: PageFeature['slots'];
 }
 export interface PageFeatureSlots {
-    leading(props?: {}): any;
+    leading(props: {
+        ui: PageFeature['ui'];
+    }): any;
     title(props?: {}): any;
     description(props?: {}): any;
     default(props?: {}): any;

package/dist/runtime/components/PageHeader.vue

@@ -25,29 +25,29 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageHeader ||
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="headline || !!slots.headline" :class="ui.headline({ class: props.ui?.headline })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="headline || !!slots.headline" data-slot="headline" :class="ui.headline({ class: props.ui?.headline })">
       <slot name="headline">
         {{ headline }}
       </slot>
     </div>
 
-    <div :class="ui.container({ class: props.ui?.container })">
-      <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-        <h1 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <h1 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
             {{ title }}
           </slot>
         </h1>
 
-        <div v-if="links?.length || !!slots.links" :class="ui.links({ class: props.ui?.links })">
+        <div v-if="links?.length || !!slots.links" data-slot="links" :class="ui.links({ class: props.ui?.links })">
           <slot name="links">
             <UButton v-for="(link, index) in links" :key="index" color="neutral" variant="outline" v-bind="link" />
           </slot>
         </div>
       </div>
 
-      <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+      <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description">
           {{ description }}
         </slot>

package/dist/runtime/components/PageHero.vue

@@ -30,26 +30,26 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageHero || {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="top" />
 
-    <UContainer :class="ui.container({ class: props.ui?.container })">
-      <div v-if="!!slots.header || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description) || !!slots.body || !!slots.footer || (links?.length || !!slots.links)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-        <div v-if="!!slots.header || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description)" :class="ui.header({ class: props.ui?.header })">
+    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.header || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description) || !!slots.body || !!slots.footer || (links?.length || !!slots.links)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <div v-if="!!slots.header || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
           <slot name="header">
-            <div v-if="headline || !!slots.headline" :class="ui.headline({ class: props.ui?.headline, headline: !slots.headline })">
+            <div v-if="headline || !!slots.headline" data-slot="headline" :class="ui.headline({ class: props.ui?.headline, headline: !slots.headline })">
               <slot name="headline">
                 {{ headline }}
               </slot>
             </div>
 
-            <h1 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+            <h1 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
               <slot name="title">
                 {{ title }}
               </slot>
             </h1>
 
-            <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+            <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
               <slot name="description">
                 {{ description }}
               </slot>
@@ -57,13 +57,13 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageHero || {
           </slot>
         </div>
 
-        <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
+        <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: props.ui?.body })">
           <slot name="body" />
         </div>
 
-        <div v-if="!!slots.footer || (links?.length || !!slots.links)" :class="ui.footer({ class: props.ui?.footer })">
+        <div v-if="!!slots.footer || (links?.length || !!slots.links)" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
           <slot name="footer">
-            <div v-if="links?.length || !!slots.links" :class="ui.links({ class: props.ui?.links })">
+            <div v-if="links?.length || !!slots.links" data-slot="links" :class="ui.links({ class: props.ui?.links })">
               <slot name="links">
                 <UButton v-for="(link, index) in links" :key="index" size="xl" v-bind="link" />
               </slot>

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

@@ -26,13 +26,20 @@ export interface PageLinksProps<T extends PageLink = PageLink> {
 type SlotProps<T> = (props: {
     link: T;
     active: boolean;
+    ui: PageLinks['ui'];
 }) => any;
 export interface PageLinksSlots<T extends PageLink = PageLink> {
     'title'(props?: {}): any;
     'link': SlotProps<T>;
     'link-leading': SlotProps<T>;
-    'link-label': SlotProps<T>;
-    'link-trailing': SlotProps<T>;
+    'link-label'(props: {
+        link: T;
+        active: boolean;
+    }): any;
+    'link-trailing'(props: {
+        link: T;
+        active: boolean;
+    }): any;
 }
 declare const __VLS_export: <T extends PageLink>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<PageLinksProps<T>> & import("vue").PublicProps;

package/dist/runtime/components/PageLinks.vue

@@ -24,28 +24,28 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageLinks ||
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <p v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <p v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
       <slot name="title">
         {{ title }}
       </slot>
     </p>
 
-    <ul :class="ui.list({ class: props.ui?.list })">
-      <li v-for="(link, index) in links" :key="index" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
+    <ul data-slot="list" :class="ui.list({ class: props.ui?.list })">
+      <li v-for="(link, index) in links" :key="index" data-slot="item" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
         <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(link)" custom>
-          <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
-            <slot name="link" :link="link" :active="active">
-              <slot name="link-leading" :link="link" :active="active">
-                <UIcon v-if="link.icon" :name="link.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
+          <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
+            <slot name="link" :link="link" :active="active" :ui="ui">
+              <slot name="link-leading" :link="link" :active="active" :ui="ui">
+                <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
               </slot>
 
-              <span v-if="link.label || !!slots['link-label']" :class="ui.linkLabel({ class: [props.ui?.linkLabel, link.ui?.linkLabel], active })">
+              <span v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="ui.linkLabel({ class: [props.ui?.linkLabel, link.ui?.linkLabel], active })">
                 <slot name="link-label" :link="link" :active="active">
                   {{ link.label }}
                 </slot>
 
-                <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
+                <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkLabelExternalIcon" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
               </span>
 
               <slot name="link-trailing" :link="link" :active="active" />

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

@@ -26,13 +26,20 @@ export interface PageLinksProps<T extends PageLink = PageLink> {
 type SlotProps<T> = (props: {
     link: T;
     active: boolean;
+    ui: PageLinks['ui'];
 }) => any;
 export interface PageLinksSlots<T extends PageLink = PageLink> {
     'title'(props?: {}): any;
     'link': SlotProps<T>;
     'link-leading': SlotProps<T>;
-    'link-label': SlotProps<T>;
-    'link-trailing': SlotProps<T>;
+    'link-label'(props: {
+        link: T;
+        active: boolean;
+    }): any;
+    'link-trailing'(props: {
+        link: T;
+        active: boolean;
+    }): any;
 }
 declare const __VLS_export: <T extends PageLink>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<PageLinksProps<T>> & import("vue").PublicProps;