@nuxt/ui 4.0.1 → 4.2.0

package/dist/runtime/components/Textarea.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/textarea";
 </script>
 
 <script setup>
-import { ref, computed, onMounted, nextTick, watch } from "vue";
+import { useTemplateRef, computed, onMounted, nextTick, watch } from "vue";
 import { Primitive } from "reka-ui";
 import { useVModel } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -61,7 +61,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.textarea || {
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing
 }));
-const textareaRef = ref(null);
+const textareaRef = useTemplateRef("textareaRef");
 function updateInput(value) {
   if (props.modelModifiers?.trim) {
     value = value?.trim() ?? null;
@@ -139,7 +139,7 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <textarea
       :id="id"
       ref="textareaRef"
@@ -147,6 +147,7 @@ defineExpose({
       :name="name"
       :rows="rows"
       :placeholder="placeholder"
+      data-slot="base"
       :class="ui.base({ class: props.ui?.base })"
       :disabled="disabled"
       :required="required"
@@ -157,18 +158,18 @@ defineExpose({
       @focus="emitFormFocus"
     />
 
-    <slot />
+    <slot :ui="ui" />
 
-    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-      <slot name="leading">
-        <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 })" />
+    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
+      <slot name="leading" :ui="ui">
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
-    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
-      <slot name="trailing">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+      <slot name="trailing" :ui="ui">
+        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </Primitive>

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

@@ -1,11 +1,12 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/textarea';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { TextareaHTMLAttributes } from '../types/html';
 import type { ModelModifiers } from '../types/input';
 import type { ComponentConfig } from '../types/tv';
 type Textarea = ComponentConfig<typeof theme, AppConfig, 'textarea'>;
 type TextareaValue = string | number | null;
-export interface TextareaProps<T extends TextareaValue = TextareaValue> extends UseComponentIconsProps {
+export interface TextareaProps<T extends TextareaValue = TextareaValue> extends UseComponentIconsProps, /** @vue-ignore */ Omit<TextareaHTMLAttributes, 'name' | 'placeholder' | 'required' | 'autofocus' | 'disabled' | 'rows'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -39,7 +40,7 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
     highlight?: boolean;
     modelValue?: T;
     defaultValue?: T;
-    modelModifiers?: ModelModifiers;
+    modelModifiers?: ModelModifiers<T>;
     class?: any;
     ui?: Textarea['slots'];
 }
@@ -49,22 +50,28 @@ export interface TextareaEmits<T extends TextareaValue = TextareaValue> {
     'change': [event: Event];
 }
 export interface TextareaSlots {
-    leading(props?: {}): any;
-    default(props?: {}): any;
-    trailing(props?: {}): any;
+    leading(props: {
+        ui: Textarea['ui'];
+    }): any;
+    default(props: {
+        ui: Textarea['ui'];
+    }): any;
+    trailing(props: {
+        ui: Textarea['ui'];
+    }): any;
 }
 declare const __VLS_export: <T extends TextareaValue>(__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<TextareaProps<T> & {
-        onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: T) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        textareaRef: import("vue").Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null>;
+        textareaRef: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null>>;
     }>) => void;
     attrs: any;
     slots: TextareaSlots;
-    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "update:modelValue", value: T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Timeline.vue

@@ -51,37 +51,46 @@ function getItemState(index) {
 </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] })">
     <div
       v-for="(item, index) in items"
       :key="item.value ?? index"
+      data-slot="item"
       :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
       :data-state="getItemState(index)"
     >
-      <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
-        <UAvatar :size="size" :icon="item.icon" v-bind="typeof item.avatar === 'object' ? item.avatar : {}" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" :ui="{ icon: 'text-inherit', fallback: 'text-inherit' }">
+      <div data-slot="container" :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
+        <UAvatar
+          :size="size"
+          :icon="item.icon"
+          v-bind="typeof item.avatar === 'object' ? item.avatar : {}"
+          data-slot="indicator"
+          :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })"
+          :ui="{ icon: 'text-inherit', fallback: 'text-inherit' }"
+        >
           <slot :name="item.slot ? `${item.slot}-indicator` : 'indicator'" :item="item" />
         </UAvatar>
 
         <Separator
           v-if="index < items.length - 1"
+          data-slot="separator"
           :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
           :orientation="props.orientation"
         />
       </div>
 
-      <div :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
-        <div v-if="item.date" :class="ui.date({ class: [props.ui?.date, item.ui?.date] })">
+      <div data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+        <div v-if="item.date" data-slot="date" :class="ui.date({ class: [props.ui?.date, item.ui?.date] })">
           <slot :name="item.slot ? `${item.slot}-date` : 'date'" :item="item">
             {{ item.date }}
           </slot>
         </div>
-        <div v-if="item.title || !!slots.title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
+        <div v-if="item.title || !!slots.title" data-slot="title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
           <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
             {{ item.title }}
           </slot>
         </div>
-        <div v-if="item.description || !!slots.description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
+        <div v-if="item.description || !!slots.description" data-slot="description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
           <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
             {{ item.description }}
           </slot>

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

@@ -58,14 +58,14 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
 export interface ToastEmits extends ToastRootEmits {
 }
 export interface ToastSlots {
-    leading(props?: {}): any;
+    leading(props: {
+        ui: Toast['ui'];
+    }): any;
     title(props?: {}): any;
     description(props?: {}): any;
     actions(props?: {}): any;
     close(props: {
-        ui: {
-            [K in keyof Required<Toast['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: Toast['ui'];
     }): any;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToastProps, {

package/dist/runtime/components/Toast.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/toast";
 </script>
 
 <script setup>
-import { ref, computed, onMounted, nextTick } from "vue";
+import { ref, computed, onMounted, nextTick, useTemplateRef } from "vue";
 import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -42,14 +42,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.toast || {} }
   orientation: props.orientation,
   title: !!props.title || !!slots.title
 }));
-const el = ref();
+const rootRef = useTemplateRef("rootRef");
 const height = ref(0);
 onMounted(() => {
-  if (!el.value) {
+  if (!rootRef.value) {
     return;
   }
   nextTick(() => {
-    height.value = el.value?.$el?.getBoundingClientRect()?.height;
+    height.value = rootRef.value?.$el?.getBoundingClientRect()?.height;
   });
 });
 defineExpose({
@@ -59,20 +59,21 @@ defineExpose({
 
 <template>
   <ToastRoot
-    ref="el"
+    ref="rootRef"
     v-slot="{ remaining, duration, open }"
     v-bind="rootProps"
     :data-orientation="orientation"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="{ '--height': height }"
   >
-    <slot name="leading">
-      <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 name="leading" :ui="ui">
+      <UAvatar v-if="avatar" :size="props.ui?.avatarSize || ui.avatarSize()" v-bind="avatar" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+      <UIcon v-else-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
     </slot>
 
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <ToastTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <ToastTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
         <slot name="title">
           <component :is="title()" v-if="typeof title === 'function'" />
           <component :is="title" v-else-if="typeof title === 'object'" />
@@ -81,7 +82,7 @@ defineExpose({
           </template>
         </slot>
       </ToastTitle>
-      <ToastDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+      <ToastDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description">
           <component :is="description()" v-if="typeof description === 'function'" />
           <component :is="description" v-else-if="typeof description === 'object'" />
@@ -91,7 +92,7 @@ defineExpose({
         </slot>
       </ToastDescription>
 
-      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" :class="ui.actions({ class: props.ui?.actions })">
+      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
         <slot name="actions">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
             <UButton size="xs" :color="color" v-bind="action" />
@@ -100,7 +101,7 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
+    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close" data-slot="actions" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
       <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
         <slot name="actions">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
@@ -118,6 +119,7 @@ defineExpose({
             variant="link"
             :aria-label="t('toast.close')"
             v-bind="typeof close === 'object' ? close : {}"
+            data-slot="close"
             :class="ui.close({ class: props.ui?.close })"
             @click.stop
           />
@@ -131,6 +133,7 @@ defineExpose({
       :color="color"
       v-bind="typeof progress === 'object' ? progress : {}"
       size="sm"
+      data-slot="progress"
       :class="ui.progress({ class: props.ui?.progress })"
     />
   </ToastRoot>

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

@@ -58,14 +58,14 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
 export interface ToastEmits extends ToastRootEmits {
 }
 export interface ToastSlots {
-    leading(props?: {}): any;
+    leading(props: {
+        ui: Toast['ui'];
+    }): any;
     title(props?: {}): any;
     description(props?: {}): any;
     actions(props?: {}): any;
     close(props: {
-        ui: {
-            [K in keyof Required<Toast['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: Toast['ui'];
     }): any;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToastProps, {

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

@@ -24,6 +24,11 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
      * @defaultValue true
      */
     portal?: boolean | string | HTMLElement;
+    /**
+     * Maximum number of toasts to display at once.
+     * @defaultValue 5
+     */
+    max?: number;
     class?: any;
     ui?: Toaster['slots'];
 }
@@ -32,6 +37,7 @@ export interface ToasterSlots {
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToasterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToasterProps> & Readonly<{}>, {
     progress: boolean;
+    max: number;
     expand: boolean;
     duration: number;
     portal: boolean | string | HTMLElement;

package/dist/runtime/components/Toaster.vue

@@ -6,11 +6,11 @@ export default {
 </script>
 
 <script setup>
-import { ref, computed, toRef } from "vue";
+import { ref, computed, toRef, provide } from "vue";
 import { ToastProvider, ToastViewport, ToastPortal, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useToast } from "../composables/useToast";
+import { useToast, toastMaxInjectionKey } from "../composables/useToast";
 import { usePortal } from "../composables/usePortal";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
@@ -20,16 +20,19 @@ const props = defineProps({
   expand: { type: Boolean, required: false, default: true },
   progress: { type: Boolean, required: false, default: true },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
+  max: { type: Number, required: false, default: 5 },
   class: { type: null, required: false },
   ui: { type: null, required: false },
   label: { type: String, required: false },
   duration: { type: Number, required: false, default: 5e3 },
+  disableSwipe: { type: Boolean, required: false },
   swipeThreshold: { type: Number, required: false }
 });
 defineSlots();
 const { toasts, remove } = useToast();
 const appConfig = useAppConfig();
-const providerProps = useForwardProps(reactivePick(props, "duration", "label", "swipeThreshold"));
+provide(toastMaxInjectionKey, toRef(() => props.max));
+const providerProps = useForwardProps(reactivePick(props, "duration", "label", "swipeThreshold", "disableSwipe"));
 const portalProps = usePortal(toRef(() => props.portal));
 const swipeDirection = computed(() => {
   switch (props.position) {
@@ -87,6 +90,7 @@ function getOffset(index) {
   '--translate': expanded ? 'calc(var(--offset) * var(--translate-factor))' : 'calc(var(--before) * var(--gap))',
   '--transform': 'translateY(var(--translate)) scale(var(--scale))'
 }"
+      data-slot="base"
       :class="ui.base({ class: [props.ui?.base, toast.onClick ? 'cursor-pointer' : void 0] })"
       @update:open="onUpdateOpen($event, toast.id)"
       @click="toast.onClick && toast.onClick(toast)"
@@ -95,6 +99,7 @@ function getOffset(index) {
     <ToastPortal v-bind="portalProps">
       <ToastViewport
         :data-expanded="expanded"
+        data-slot="viewport"
         :class="ui.viewport({ class: [props.ui?.viewport, props.class] })"
         :style="{
   '--scale-factor': '0.05',

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

@@ -24,6 +24,11 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
      * @defaultValue true
      */
     portal?: boolean | string | HTMLElement;
+    /**
+     * Maximum number of toasts to display at once.
+     * @defaultValue 5
+     */
+    max?: number;
     class?: any;
     ui?: Toaster['slots'];
 }
@@ -32,6 +37,7 @@ export interface ToasterSlots {
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToasterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToasterProps> & Readonly<{}>, {
     progress: boolean;
+    max: number;
     expand: boolean;
     duration: number;
     portal: boolean | string | HTMLElement;

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

@@ -40,7 +40,9 @@ export interface TooltipSlots {
     default(props: {
         open: boolean;
     }): any;
-    content(props?: {}): any;
+    content(props: {
+        ui: Tooltip['ui'];
+    }): any;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;

package/dist/runtime/components/Tooltip.vue

@@ -47,16 +47,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tooltip || {}
     </TooltipTrigger>
 
     <TooltipPortal v-bind="portalProps">
-      <TooltipContent v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })">
-        <slot name="content">
-          <span v-if="text" :class="ui.text({ class: props.ui?.text })">{{ text }}</span>
+      <TooltipContent v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })">
+        <slot name="content" :ui="ui">
+          <span v-if="text" data-slot="text" :class="ui.text({ class: props.ui?.text })">{{ text }}</span>
 
-          <span v-if="kbds?.length" :class="ui.kbds({ class: props.ui?.kbds })">
+          <span v-if="kbds?.length" data-slot="kbds" :class="ui.kbds({ class: props.ui?.kbds })">
             <UKbd v-for="(kbd, index) in kbds" :key="index" :size="props.ui?.kbdsSize || ui.kbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
           </span>
         </slot>
 
-        <TooltipArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+        <TooltipArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
       </TooltipContent>
     </TooltipPortal>
   </TooltipRoot>

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

@@ -40,7 +40,9 @@ export interface TooltipSlots {
     default(props: {
         open: boolean;
     }): any;
-    content(props?: {}): any;
+    content(props: {
+        ui: Tooltip['ui'];
+    }): any;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;

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

@@ -1,4 +1,4 @@
-import type { TreeRootProps, TreeRootEmits } from 'reka-ui';
+import type { TreeRootProps, TreeRootEmits, TreeItemSelectEvent, TreeItemToggleEvent } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tree';
 import type { IconProps } from '../types';
@@ -19,8 +19,8 @@ export type TreeItem = {
     disabled?: boolean;
     slot?: string;
     children?: TreeItem[];
-    onToggle?(e: Event): void;
-    onSelect?(e?: Event): void;
+    onToggle?: (e: TreeItemToggleEvent<TreeItem>) => void;
+    onSelect?: (e: TreeItemSelectEvent<TreeItem>) => void;
     class?: any;
     ui?: Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>;
     [key: string]: any;
@@ -30,7 +30,10 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], M extends boolean
      * The element or component this component should render as.
      * @defaultValue 'ul'
      */
-    as?: any;
+    as?: any | {
+        root?: any;
+        link?: any;
+    };
     /**
      * @defaultValue 'primary'
      */
@@ -71,6 +74,31 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], M extends boolean
     defaultValue?: M extends true ? T[number][] : T[number];
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
+    /**
+     * Use nested DOM structure (children inside parents) vs flattened structure (all items at same level).
+     * When `virtualize` is enabled, this is automatically set to `false`.
+     * @defaultValue true
+     */
+    nested?: boolean;
+    /**
+     * Enable virtualization for large lists.
+     * Note: when enabled, the tree structure is flattened like if `nested` was set to `false`.
+     * @defaultValue false
+     */
+    virtualize?: boolean | {
+        /**
+         * Number of items rendered outside the visible area
+         * @defaultValue 12
+         */
+        overscan?: number;
+        /**
+         * Estimated size (in px) of each item
+         * @defaultValue 32
+         */
+        estimateSize?: number;
+    };
+    onSelect?: (e: TreeItemSelectEvent<T[number]>, item: T[number]) => void;
+    onToggle?: (e: TreeItemToggleEvent<T[number]>, item: T[number]) => void;
     class?: any;
     ui?: Tree['slots'];
 }
@@ -81,6 +109,10 @@ type SlotProps<T extends TreeItem> = (props: {
     level: number;
     expanded: boolean;
     selected: boolean;
+    indeterminate: boolean | undefined;
+    handleSelect: () => void;
+    handleToggle: () => void;
+    ui: Tree['ui'];
 }) => any;
 export type TreeSlots<T extends TreeItem[] = TreeItem[]> = {
     'item-wrapper': SlotProps<T[number]>;
@@ -92,14 +124,20 @@ export type TreeSlots<T extends TreeItem[] = TreeItem[]> = {
     index: number;
     level: number;
     expanded: boolean;
+    ui: Tree['ui'];
     selected: boolean;
+    indeterminate: boolean | undefined;
+    handleSelect: () => void;
+    handleToggle: () => void;
 }>;
 declare const __VLS_export: <T extends TreeItem[], M extends boolean = false>(__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<TreeProps<T, M> & {
         "onUpdate:modelValue"?: ((val: M extends true ? T[number][] : T[number]) => any) | undefined;
         "onUpdate:expanded"?: ((val: string[]) => any) | undefined;
     }> & import("vue").PublicProps;
-    expose: (exposed: {}) => void;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        readonly $el: HTMLElement;
+    }>) => void;
     attrs: any;
     slots: TreeSlots<T>;
     emit: ((evt: "update:modelValue", val: M extends true ? T[number][] : T[number]) => void) & ((evt: "update:expanded", val: string[]) => void);