@nuxt/ui 4.0.1 → 4.1.0

package/.nuxt/ui/select-menu.ts

@@ -43,13 +43,13 @@ export default {
       "max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col",
       "origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)"
     ],
-    "viewport": "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
+    "viewport": "relative scroll-py-1 overflow-y-auto flex-1",
     "group": "p-1 isolate",
     "empty": "text-center text-muted",
     "label": "font-semibold text-highlighted",
     "separator": "-mx-1 my-1 h-px bg-border",
     "item": [
-      "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50",
+      "group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50",
       "transition-colors before:transition-colors"
     ],
     "itemLeadingIcon": [
@@ -62,7 +62,9 @@ export default {
     "itemLeadingChipSize": "",
     "itemTrailing": "ms-auto inline-flex gap-1.5 items-center",
     "itemTrailingIcon": "shrink-0",
+    "itemWrapper": "flex-1 flex flex-col min-w-0",
     "itemLabel": "truncate",
+    "itemDescription": "truncate text-muted",
     "input": "border-b border-default",
     "focusScope": "flex flex-col min-h-0"
   },
@@ -183,6 +185,14 @@ export default {
     },
     "type": {
       "file": "file:me-1.5 file:font-medium file:text-muted file:outline-none"
+    },
+    "virtualize": {
+      "true": {
+        "viewport": "p-1 isolate"
+      },
+      "false": {
+        "viewport": "divide-y divide-default"
+      }
     }
   },
   "compoundVariants": [

package/.nuxt/ui/select.ts

@@ -46,7 +46,7 @@ export default {
     "label": "font-semibold text-highlighted",
     "separator": "-mx-1 my-1 h-px bg-border",
     "item": [
-      "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50",
+      "group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50",
       "transition-colors before:transition-colors"
     ],
     "itemLeadingIcon": [
@@ -59,7 +59,9 @@ export default {
     "itemLeadingChipSize": "",
     "itemTrailing": "ms-auto inline-flex gap-1.5 items-center",
     "itemTrailingIcon": "shrink-0",
-    "itemLabel": "truncate"
+    "itemWrapper": "flex-1 flex flex-col min-w-0",
+    "itemLabel": "truncate",
+    "itemDescription": "truncate text-muted"
   },
   "variants": {
     "fieldGroup": {

package/.nuxt/ui/table.ts

@@ -18,10 +18,10 @@ const loadingColor = [
 export default {
   "slots": {
     "root": "relative overflow-auto",
-    "base": "min-w-full overflow-clip",
+    "base": "min-w-full",
     "caption": "sr-only",
     "thead": "relative",
-    "tbody": "divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary",
+    "tbody": "[&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary",
     "tfoot": "relative",
     "tr": "data-[selected=true]:bg-elevated/50",
     "th": "px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0",
@@ -31,6 +31,12 @@ export default {
     "loading": "py-6 text-center"
   },
   "variants": {
+    "virtualize": {
+      "false": {
+        "base": "overflow-clip",
+        "tbody": "divide-y divide-default"
+      }
+    },
     "pinned": {
       "true": {
         "th": "sticky bg-default/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0",

package/.nuxt/ui/tree.ts

@@ -19,16 +19,21 @@ const size = [
 export default {
   "slots": {
     "root": "relative isolate",
-    "item": "",
-    "listWithChildren": "ms-4.5 border-s border-default",
+    "item": "w-full",
+    "listWithChildren": "border-s border-default",
     "itemWithChildren": "ps-1.5 -ms-px",
-    "link": "relative group w-full flex items-center text-sm before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
-    "linkLeadingIcon": "shrink-0",
+    "link": "relative group w-full flex items-center text-sm select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    "linkLeadingIcon": "shrink-0 relative",
     "linkLabel": "truncate",
     "linkTrailing": "ms-auto inline-flex gap-1.5 items-center",
-    "linkTrailingIcon": "shrink-0 transform transition-transform duration-200 group-data-[expanded=true]:rotate-180"
+    "linkTrailingIcon": "shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180"
   },
   "variants": {
+    "virtualize": {
+      "true": {
+        "root": "overflow-y-auto"
+      }
+    },
     "color": {
       "primary": {
         "link": "focus-visible:before:ring-primary"
@@ -54,26 +59,31 @@ export default {
     },
     "size": {
       "xs": {
+        "listWithChildren": "ms-4",
         "link": "px-2 py-1 text-xs gap-1",
         "linkLeadingIcon": "size-4",
         "linkTrailingIcon": "size-4"
       },
       "sm": {
+        "listWithChildren": "ms-4.5",
         "link": "px-2.5 py-1.5 text-xs gap-1.5",
         "linkLeadingIcon": "size-4",
         "linkTrailingIcon": "size-4"
       },
       "md": {
+        "listWithChildren": "ms-5",
         "link": "px-2.5 py-1.5 text-sm gap-1.5",
         "linkLeadingIcon": "size-5",
         "linkTrailingIcon": "size-5"
       },
       "lg": {
+        "listWithChildren": "ms-5.5",
         "link": "px-3 py-2 text-sm gap-2",
         "linkLeadingIcon": "size-5",
         "linkTrailingIcon": "size-5"
       },
       "xl": {
+        "listWithChildren": "ms-6",
         "link": "px-3 py-2 text-base gap-2",
         "linkLeadingIcon": "size-6",
         "linkTrailingIcon": "size-6"
@@ -82,12 +92,6 @@ export default {
     "selected": {
       "true": {
         "link": "before:bg-elevated"
-      },
-      "false": {
-        "link": [
-          "hover:not-disabled:text-highlighted hover:not-disabled:before:bg-elevated/50",
-          "transition-colors before:transition-colors"
-        ]
       }
     },
     "disabled": {
@@ -145,6 +149,16 @@ export default {
       "class": {
         "link": "text-highlighted"
       }
+    },
+    {
+      "selected": false,
+      "disabled": false,
+      "class": {
+        "link": [
+          "hover:text-highlighted hover:before:bg-elevated/50",
+          "transition-colors before:transition-colors"
+        ]
+      }
     }
   ],
   "defaultVariants": {

package/cli/templates.mjs

@@ -141,22 +141,34 @@ const test = ({ name, prose, content }) => {
       ? undefined
       : `
 import { describe, it, expect } from 'vitest'
+import { axe } from 'vitest-axe'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
 import ${upperName} from '../../${content ? '../' : ''}src/runtime/components/${content ? 'content/' : ''}${upperName}.vue'
 import type { ${upperName}Props, ${upperName}Slots } from '../../${content ? '../' : ''}src/runtime/components/${content ? 'content/' : ''}${upperName}.vue'
 import ComponentRender from '../${content ? '../' : ''}component-render'
 
 describe('${upperName}', () => {
+  const props = {}
+
   it.each([
     // Props
     ['with as', { props: { as: 'section' } }],
     ['with class', { props: { class: '' } }],
     ['with ui', { props: { ui: {} } }],
     // Slots
-    ['with default slot', { slots: { default: () => 'Default slot' } }]
+    ['with default slot', { props, slots: { default: () => 'Default slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: ${upperName}Props, slots?: Partial<${upperName}Slots> }) => {
     const html = await ComponentRender(nameOrHtml, options, ${upperName})
     expect(html).toMatchSnapshot()
   })
+
+  it('passes accessibility tests', async () => {
+    const wrapper = await mountSuspended(${upperName}, {
+      props
+    })
+
+    expect(await axe(wrapper.element)).toHaveNoViolations()
+  })
 })
 `
   }
@@ -167,7 +179,7 @@ const docs = ({ name, primitive }) => {
   const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
 
   return {
-    filename: `docs/content/3.components/${kebabName}.md`,
+    filename: `docs/content/docs/2.components/${kebabName}.md`,
     contents: `---
 title: ${upperName}
 description: ''

package/dist/module.d.mts

@@ -63,6 +63,21 @@ interface ModuleOptions {
      * @defaultValue false
      */
     content?: boolean;
+    /**
+     * Experimental features
+     */
+    experimental?: {
+        /**
+         * Enable automatic component detection for tree-shaking
+         * Only generates theme files for components actually used in your app
+         * - `true`: Enable automatic detection
+         * - `string[]`: Enable detection and include additional components (useful for dynamic components)
+         * @defaultValue false
+         * @example true
+         * @example ['Modal', 'Dropdown']
+         */
+        componentDetection?: boolean | string[];
+    };
 }
 declare module '#app' {
     interface RuntimeNuxtHooks {

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {
@@ -8,6 +8,6 @@
   },
   "builder": {
     "@nuxt/module-builder": "1.0.2",
-    "unbuild": "3.6.0"
+    "unbuild": "3.6.1"
   }
 }

package/dist/module.mjs

@@ -1,14 +1,17 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.D-FDXAUi.mjs';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.Cmctwxv6.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
+import 'node:fs/promises';
+import 'pathe';
+import 'tinyglobby';
 import 'scule';
 import 'knitwork';
 import 'tailwindcss/colors';
 
 const name = "@nuxt/ui";
-const version = "4.0.1";
+const version = "4.1.0";
 
 const module = defineNuxtModule({
   meta: {

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

@@ -51,16 +51,22 @@ type SlotProps<T extends AccordionItem> = (props: {
     item: T;
     index: number;
     open: boolean;
+    ui: Accordion['ui'];
 }) => any;
 export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
     leading: SlotProps<T>;
-    default: SlotProps<T>;
+    default(props: {
+        item: T;
+        index: number;
+        open: boolean;
+    }): any;
     trailing: SlotProps<T>;
     content: SlotProps<T>;
     body: SlotProps<T>;
 } & DynamicSlots<T, 'body', {
     index: number;
     open: boolean;
+    ui: Accordion['ui'];
 }>;
 declare const __VLS_export: <T extends AccordionItem>(__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<AccordionProps<T> & {

package/dist/runtime/components/Accordion.vue

@@ -45,7 +45,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.accordion ||
     >
       <AccordionHeader as="div" :class="ui.header({ class: [props.ui?.header, item.ui?.header] })">
         <AccordionTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger], disabled: item.disabled })">
-          <slot name="leading" :item="item" :index="index" :open="open">
+          <slot name="leading" :item="item" :index="index" :open="open" :ui="ui">
             <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item?.ui?.leadingIcon] })" />
           </slot>
 
@@ -53,16 +53,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.accordion ||
             <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey) }}</slot>
           </span>
 
-          <slot name="trailing" :item="item" :index="index" :open="open">
+          <slot name="trailing" :item="item" :index="index" :open="open" :ui="ui">
             <UIcon :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: [props.ui?.trailingIcon, item.ui?.trailingIcon] })" />
           </slot>
         </AccordionTrigger>
       </AccordionHeader>
 
       <AccordionContent v-if="item.content || !!slots.content || item.slot && !!slots[item.slot] || !!slots.body || item.slot && !!slots[`${item.slot}-body`]" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
-        <slot :name="item.slot || 'content'" :item="item" :index="index" :open="open">
+        <slot :name="item.slot || 'content'" :item="item" :index="index" :open="open" :ui="ui">
           <div :class="ui.body({ class: [props.ui?.body, item.ui?.body] })">
-            <slot :name="item.slot ? `${item.slot}-body` : 'body'" :item="item" :index="index" :open="open">
+            <slot :name="item.slot ? `${item.slot}-body` : 'body'" :item="item" :index="index" :open="open" :ui="ui">
               {{ item.content }}
             </slot>
           </div>

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

@@ -51,16 +51,22 @@ type SlotProps<T extends AccordionItem> = (props: {
     item: T;
     index: number;
     open: boolean;
+    ui: Accordion['ui'];
 }) => any;
 export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
     leading: SlotProps<T>;
-    default: SlotProps<T>;
+    default(props: {
+        item: T;
+        index: number;
+        open: boolean;
+    }): any;
     trailing: SlotProps<T>;
     content: SlotProps<T>;
     body: SlotProps<T>;
 } & DynamicSlots<T, 'body', {
     index: number;
     open: boolean;
+    ui: Accordion['ui'];
 }>;
 declare const __VLS_export: <T extends AccordionItem>(__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<AccordionProps<T> & {

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

@@ -56,14 +56,14 @@ export interface AlertEmits {
     'update:open': [value: boolean];
 }
 export interface AlertSlots {
-    leading(props?: {}): any;
+    leading(props: {
+        ui: Alert['ui'];
+    }): any;
     title(props?: {}): any;
     description(props?: {}): any;
     actions(props?: {}): any;
     close(props: {
-        ui: {
-            [K in keyof Required<Alert['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: Alert['ui'];
     }): any;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/dist/runtime/components/Alert.vue

@@ -40,7 +40,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.alert || {} }
 
 <template>
   <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <slot name="leading">
+    <slot name="leading" :ui="ui">
       <UAvatar v-if="avatar" :size="props.ui?.avatarSize || ui.avatarSize()" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
       <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
     </slot>

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

@@ -56,14 +56,14 @@ export interface AlertEmits {
     'update:open': [value: boolean];
 }
 export interface AlertSlots {
-    leading(props?: {}): any;
+    leading(props: {
+        ui: Alert['ui'];
+    }): any;
     title(props?: {}): any;
     description(props?: {}): any;
     actions(props?: {}): any;
     close(props: {
-        ui: {
-            [K in keyof Required<Alert['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: Alert['ui'];
     }): any;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -79,7 +79,9 @@ type DynamicFieldSlots<T, F, SlotProps = {
 type DynamicFormFieldSlots<T> = Record<string, (props?: {}) => any> & Record<`${keyof T extends string ? keyof T : never}-${'label' | 'description' | 'hint' | 'help' | 'error'}`, (props?: {}) => any>;
 export type AuthFormSlots<T extends object = object, F extends AuthFormField = AuthFormField> = {
     header(props?: {}): any;
-    leading(props?: {}): any;
+    leading(props: {
+        ui: AuthForm['ui'];
+    }): any;
     title(props?: {}): any;
     description(props?: {}): any;
     providers(props?: {}): any;

package/dist/runtime/components/AuthForm.vue

@@ -79,7 +79,7 @@ function omitFieldProps(field) {
     <div v-if="icon || !!slots.icon || (title || !!slots.title) || (description || !!slots.description) || !!slots.header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header">
         <div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-          <slot name="leading">
+          <slot name="leading" :ui="ui">
             <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
           </slot>
         </div>

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

@@ -79,7 +79,9 @@ type DynamicFieldSlots<T, F, SlotProps = {
 type DynamicFormFieldSlots<T> = Record<string, (props?: {}) => any> & Record<`${keyof T extends string ? keyof T : never}-${'label' | 'description' | 'hint' | 'help' | 'error'}`, (props?: {}) => any>;
 export type AuthFormSlots<T extends object = object, F extends AuthFormField = AuthFormField> = {
     header(props?: {}): any;
-    leading(props?: {}): any;
+    leading(props: {
+        ui: AuthForm['ui'];
+    }): any;
     title(props?: {}): any;
     description(props?: {}): any;
     providers(props?: {}): any;

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

@@ -8,7 +8,10 @@ export interface AvatarProps {
      * The element or component this component should render as.
      * @defaultValue 'span'
      */
-    as?: any;
+    as?: any | {
+        root?: any;
+        img?: any;
+    };
     src?: string;
     alt?: string;
     /**
@@ -28,9 +31,7 @@ export interface AvatarProps {
 export interface AvatarSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
-    as: any;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Avatar.vue

@@ -5,6 +5,7 @@ import theme from "#build/ui/avatar";
 <script setup>
 import { ref, computed, watch } from "vue";
 import { Primitive, Slot } from "reka-ui";
+import { defu } from "defu";
 import { useAppConfig } from "#imports";
 import ImageComponent from "#build/ui-image-component";
 import { useAvatarGroup } from "../composables/useAvatarGroup";
@@ -13,7 +14,7 @@ import UIcon from "./Icon.vue";
 import UChip from "./Chip.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  as: { type: null, required: false, default: "span" },
+  as: { type: null, required: false },
   src: { type: String, required: false },
   alt: { type: String, required: false },
   icon: { type: [String, Object], required: false },
@@ -24,6 +25,12 @@ const props = defineProps({
   style: { type: null, required: false },
   ui: { type: null, required: false }
 });
+const as = computed(() => {
+  if (typeof props.as === "string" || typeof props.as?.render === "function") {
+    return { root: props.as };
+  }
+  return defu(props.as, { root: "span" });
+});
 const fallback = computed(() => props.text || (props.alt || "").split(" ").map((word) => word.charAt(0)).join("").substring(0, 2));
 const appConfig = useAppConfig();
 const { size } = useAvatarGroup(props);
@@ -55,13 +62,13 @@ function onError() {
 <template>
   <component
     :is="props.chip ? UChip : Primitive"
-    :as="as"
+    :as="as.root"
     v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="props.style"
   >
     <component
-      :is="ImageComponent"
+      :is="as.img || ImageComponent"
       v-if="src && !error"
       :src="src"
       :alt="alt"

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

@@ -8,7 +8,10 @@ export interface AvatarProps {
      * The element or component this component should render as.
      * @defaultValue 'span'
      */
-    as?: any;
+    as?: any | {
+        root?: any;
+        img?: any;
+    };
     src?: string;
     alt?: string;
     /**
@@ -28,9 +31,7 @@ export interface AvatarProps {
 export interface AvatarSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
-    as: any;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
 declare const _default: typeof __VLS_export;

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

@@ -28,9 +28,15 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
     ui?: Badge['slots'];
 }
 export interface BadgeSlots {
-    leading(props?: {}): any;
-    default(props?: {}): any;
-    trailing(props?: {}): any;
+    leading(props: {
+        ui: Badge['ui'];
+    }): any;
+    default(props: {
+        ui: Badge['ui'];
+    }): any;
+    trailing(props: {
+        ui: Badge['ui'];
+    }): any;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
     as: any;

package/dist/runtime/components/Badge.vue

@@ -42,18 +42,18 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.badge || {} }
 
 <template>
   <Primitive :as="as" :class="ui.base({ class: [props.ui?.base, props.class] })">
-    <slot name="leading">
+    <slot name="leading" :ui="ui">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
       <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
     </slot>
 
-    <slot>
+    <slot :ui="ui">
       <span v-if="label !== void 0 && label !== null" :class="ui.label({ class: props.ui?.label })">
         {{ label }}
       </span>
     </slot>
 
-    <slot name="trailing">
+    <slot name="trailing" :ui="ui">
       <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
     </slot>
   </Primitive>

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

@@ -28,9 +28,15 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
     ui?: Badge['slots'];
 }
 export interface BadgeSlots {
-    leading(props?: {}): any;
-    default(props?: {}): any;
-    trailing(props?: {}): any;
+    leading(props: {
+        ui: Badge['ui'];
+    }): any;
+    default(props: {
+        ui: Badge['ui'];
+    }): any;
+    trailing(props: {
+        ui: Badge['ui'];
+    }): any;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
     as: any;

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

@@ -49,11 +49,13 @@ export interface BannerProps {
     ui?: Banner['slots'];
 }
 export interface BannerSlots {
-    leading(props?: {}): any;
+    leading(props: {
+        ui: Banner['ui'];
+    }): any;
     title(props?: {}): any;
     actions(props?: {}): any;
     close(props: {
-        ui: any;
+        ui: Banner['ui'];
     }): any;
 }
 export interface BannerEmits {

package/dist/runtime/components/Banner.vue

@@ -76,7 +76,7 @@ function onClose() {
       <div :class="ui.left({ class: props.ui?.left })" />
 
       <div :class="ui.center({ class: props.ui?.center })">
-        <slot name="leading">
+        <slot name="leading" :ui="ui">
           <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
         </slot>
 

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

@@ -49,11 +49,13 @@ export interface BannerProps {
     ui?: Banner['slots'];
 }
 export interface BannerSlots {
-    leading(props?: {}): any;
+    leading(props: {
+        ui: Banner['ui'];
+    }): any;
     title(props?: {}): any;
     actions(props?: {}): any;
     close(props: {
-        ui: any;
+        ui: Banner['ui'];
     }): any;
 }
 export interface BannerEmits {