@nuxt/ui 4.9.0 → 4.11.0

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

@@ -0,0 +1,266 @@
+import type { SplitterGroupProps, SplitterGroupEmits, SplitterPanelProps, SplitterResizeHandleProps } from 'reka-ui';
+import type { VNode, ComponentPublicInstance } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/splitter';
+import type { DynamicSlots } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
+type Splitter = ComponentConfig<typeof theme, AppConfig, 'splitter'>;
+export interface SplitterItem extends Omit<SplitterPanelProps, 'as' | 'asChild'> {
+    /**
+     * A unique id for the panel. Also used as the Vue `key`. Defaults to an auto-generated id.
+     */
+    id?: string;
+    slot?: string;
+    class?: any;
+    ui?: Pick<Splitter['slots'], 'panel'>;
+    [key: string]: any;
+}
+export interface SplitterProps<T extends SplitterItem = SplitterItem> extends Pick<SplitterGroupProps, 'autoSaveId' | 'keyboardResizeBy' | 'storage'>, Pick<SplitterResizeHandleProps, 'hitAreaMargins'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * A unique id for the group, also used to derive the ids of its panels and handles.
+     * Set it when rendering on the server, auto-generated ids can differ between the server and the client and break resizing on hydration.
+     */
+    id?: string;
+    /**
+     * The orientation of the splitter.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: Splitter['variants']['orientation'];
+    items?: T[];
+    /**
+     * Whether the resize handles are disabled, locking the current layout.
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    class?: any;
+    ui?: Splitter['slots'];
+}
+export interface SplitterEmits {
+    layout: SplitterGroupEmits['layout'];
+    collapse: [index: number];
+    expand: [index: number];
+    resize: [index: number, size: number, prevSize?: number];
+    dragging: [index: number, dragging: boolean];
+}
+type PanelSlotProps = {
+    index: number;
+    collapsed: boolean;
+    collapse: () => void;
+    expand: () => void;
+    resize: (size: number) => void;
+    ui: Splitter['ui'];
+};
+type SlotProps<T extends SplitterItem> = (props: {
+    item: T;
+} & PanelSlotProps) => VNode[];
+export type SplitterSlots<T extends SplitterItem = SplitterItem> = {
+    'resize-handle'?: (props: {
+        index: number;
+        ui: Splitter['ui'];
+    }) => VNode[];
+} & DynamicSlots<T, undefined, PanelSlotProps> & {
+    [key: `panel-${number}`]: SlotProps<T> | undefined;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends SplitterItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<SplitterProps<T> & {
+        onResize?: ((index: number, size: number, prevSize?: number | undefined) => any) | undefined;
+        onCollapse?: ((index: number) => any) | undefined;
+        onExpand?: ((index: number) => any) | undefined;
+        onLayout?: ((val: number[]) => any) | undefined;
+        onDragging?: ((index: number, dragging: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        panelsRef: import("vue").Ref<({
+            $: import("vue").ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly collapsedSize?: number | undefined;
+                readonly collapsible?: boolean | undefined;
+                readonly defaultSize?: number | undefined;
+                readonly id?: string | undefined;
+                readonly maxSize?: number | undefined;
+                readonly minSize?: number | undefined;
+                readonly order?: number | undefined;
+                readonly sizeUnit?: "%" | "px" | undefined;
+                readonly asChild?: boolean | undefined;
+                readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
+                readonly onResize?: ((size: number, prevSize: number | undefined) => any) | undefined | undefined;
+                readonly onCollapse?: (() => any) | undefined | undefined;
+                readonly onExpand?: (() => any) | undefined | undefined;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+            $attrs: import("vue").Attrs;
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import("vue").Slot<any> | undefined;
+            }>;
+            $root: ComponentPublicInstance | null;
+            $parent: ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: ((event: "resize", size: number, prevSize: number | undefined) => void) & ((event: "collapse") => void) & ((event: "expand") => void);
+            $el: any;
+            $options: import("vue").ComponentOptionsBase<Readonly<SplitterPanelProps> & Readonly<{
+                onResize?: ((size: number, prevSize: number | undefined) => any) | undefined;
+                onCollapse?: (() => any) | undefined;
+                onExpand?: (() => any) | undefined;
+            }>, {
+                collapse: () => void;
+                expand: () => void;
+                getSize(): number;
+                resize: (size: number) => void;
+                isCollapsed: import("vue").ComputedRef<boolean>;
+                isExpanded: import("vue").ComputedRef<boolean>;
+            }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+                resize: (size: number, prevSize: number | undefined) => any;
+                collapse: () => any;
+                expand: () => any;
+            }, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import("vue").nextTick;
+            $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+        } & Readonly<{}> & Omit<Readonly<SplitterPanelProps> & Readonly<{
+            onResize?: ((size: number, prevSize: number | undefined) => any) | undefined;
+            onCollapse?: (() => any) | undefined;
+            onExpand?: (() => any) | undefined;
+        }>, "resize" | "collapse" | "expand" | "isCollapsed" | "getSize" | "isExpanded"> & {
+            collapse: () => void;
+            expand: () => void;
+            getSize: () => number;
+            resize: (size: number) => void;
+            isCollapsed: boolean;
+            isExpanded: boolean;
+        } & {} & import("vue").ComponentCustomProperties & {} & {
+            $slots: {
+                default?: (props: {
+                    isCollapsed: boolean;
+                    isExpanded: boolean;
+                    collapse: () => void;
+                    expand: () => void;
+                    resize: (size: number) => void;
+                }) => any;
+            };
+        })[], ({
+            $: import("vue").ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly collapsedSize?: number | undefined;
+                readonly collapsible?: boolean | undefined;
+                readonly defaultSize?: number | undefined;
+                readonly id?: string | undefined;
+                readonly maxSize?: number | undefined;
+                readonly minSize?: number | undefined;
+                readonly order?: number | undefined;
+                readonly sizeUnit?: "%" | "px" | undefined;
+                readonly asChild?: boolean | undefined;
+                readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
+                readonly onResize?: ((size: number, prevSize: number | undefined) => any) | undefined | undefined;
+                readonly onCollapse?: (() => any) | undefined | undefined;
+                readonly onExpand?: (() => any) | undefined | undefined;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+            $attrs: import("vue").Attrs;
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import("vue").Slot<any> | undefined;
+            }>;
+            $root: ComponentPublicInstance | null;
+            $parent: ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: ((event: "resize", size: number, prevSize: number | undefined) => void) & ((event: "collapse") => void) & ((event: "expand") => void);
+            $el: any;
+            $options: import("vue").ComponentOptionsBase<Readonly<SplitterPanelProps> & Readonly<{
+                onResize?: ((size: number, prevSize: number | undefined) => any) | undefined;
+                onCollapse?: (() => any) | undefined;
+                onExpand?: (() => any) | undefined;
+            }>, {
+                collapse: () => void;
+                expand: () => void;
+                getSize(): number;
+                resize: (size: number) => void;
+                isCollapsed: import("vue").ComputedRef<boolean>;
+                isExpanded: import("vue").ComputedRef<boolean>;
+            }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+                resize: (size: number, prevSize: number | undefined) => any;
+                collapse: () => any;
+                expand: () => any;
+            }, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import("vue").nextTick;
+            $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+        } & Readonly<{}> & Omit<Readonly<SplitterPanelProps> & Readonly<{
+            onResize?: ((size: number, prevSize: number | undefined) => any) | undefined;
+            onCollapse?: (() => any) | undefined;
+            onExpand?: (() => any) | undefined;
+        }>, "resize" | "collapse" | "expand" | "isCollapsed" | "getSize" | "isExpanded"> & {
+            collapse: () => void;
+            expand: () => void;
+            getSize: () => number;
+            resize: (size: number) => void;
+            isCollapsed: boolean;
+            isExpanded: boolean;
+        } & {} & import("vue").ComponentCustomProperties & {} & {
+            $slots: {
+                default?: (props: {
+                    isCollapsed: boolean;
+                    isExpanded: boolean;
+                    collapse: () => void;
+                    expand: () => void;
+                    resize: (size: number) => void;
+                }) => any;
+            };
+        })[]>;
+    }>) => void;
+    attrs: any;
+    slots: SplitterSlots<T>;
+    emit: ((evt: "resize", index: number, size: number, prevSize?: number | undefined) => void) & ((evt: "collapse", index: number) => void) & ((evt: "expand", index: number) => void) & ((evt: "layout", val: number[]) => void) & ((evt: "dragging", index: number, dragging: boolean) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -2,7 +2,7 @@ import type { StepperRootProps, StepperRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/stepper';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { DynamicSlots, GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Stepper = ComponentConfig<typeof theme, AppConfig, 'stepper'>;
@@ -95,7 +95,7 @@ declare const __VLS_export: <T extends StepperItem>(__VLS_props: NonNullable<Awa
     slots: StepperSlots<T>;
     emit: (((evt: "next", value: T) => void) & ((evt: "prev", value: T) => void)) & ((event: "update:modelValue", value: string | number | 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/Stepper.vue

@@ -31,7 +31,7 @@ const props = useComponentProps("stepper", _props);
 const modelValue = defineModel({ type: [String, Number] });
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "linear"));
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.stepper || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.stepper || {} })({
   orientation: props.orientation,
   size: props.size,
   color: props.color

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

@@ -2,7 +2,7 @@ import type { StepperRootProps, StepperRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/stepper';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { DynamicSlots, GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Stepper = ComponentConfig<typeof theme, AppConfig, 'stepper'>;
@@ -95,7 +95,7 @@ declare const __VLS_export: <T extends StepperItem>(__VLS_props: NonNullable<Awa
     slots: StepperSlots<T>;
     emit: (((evt: "next", value: T) => void) & ((evt: "prev", value: T) => void)) & ((event: "update:modelValue", value: string | number | 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/Switch.d.vue.ts

@@ -2,7 +2,7 @@ import type { SwitchRootProps, SwitchRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/switch';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { ButtonHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type Switch = ComponentConfig<typeof theme, AppConfig, 'switch'>;
@@ -70,7 +70,7 @@ declare const __VLS_export: <T = boolean>(__VLS_props: NonNullable<Awaited<typeo
     slots: SwitchSlots;
     emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: T) => 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/Switch.vue

@@ -41,17 +41,21 @@ const emits = defineEmits(["change", "update:modelValue"]);
 const props = useComponentProps("switch", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue", "modelValue", "trueValue", "falseValue"), emits);
-const { id: _id, emitFormChange, emitFormInput, size, color, highlight, name, disabled, ariaAttrs } = useFormField(_props);
+const { id: _id, emitFormChange, emitFormInput, size: formFieldSize, color: formFieldColor, highlight: formFieldHighlight, name, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
 const id = _id.value ?? useId();
+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 attrs = useAttrs();
 const forwardedAttrs = computed(() => {
   const { "data-state": _, ...rest } = attrs;
   return rest;
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.switch || {} })({
-  size: size.value ?? props.size,
-  color: color.value ?? props.color,
-  highlight: highlight.value ?? props.highlight,
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.switch || {} })({
+  size: size.value,
+  color: color.value,
+  highlight: highlight.value,
   required: props.required,
   loading: props.loading,
   disabled: disabled.value || props.loading
@@ -65,7 +69,7 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="props.as" :data-slot="$attrs['data-slot'] ?? 'root'" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
       <SwitchRoot
         :id="id"

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

@@ -2,7 +2,7 @@ import type { SwitchRootProps, SwitchRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/switch';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { ButtonHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type Switch = ComponentConfig<typeof theme, AppConfig, 'switch'>;
@@ -70,7 +70,7 @@ declare const __VLS_export: <T = boolean>(__VLS_props: NonNullable<Awaited<typeo
     slots: SwitchSlots;
     emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: T) => 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/Table.d.vue.ts

@@ -56,7 +56,13 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
      * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
      * @defaultValue false
      */
-    virtualize?: boolean | (Partial<Omit<VirtualizerOptions<Element, Element>, 'getScrollElement' | 'count' | 'estimateSize' | 'overscan'>> & {
+    virtualize?: boolean | (Partial<Omit<VirtualizerOptions<Element, Element>, 'count' | 'estimateSize' | 'overscan'>> & {
+        /**
+         * Virtualize against an external scroll element instead of the table's own root.
+         * Pair with `scrollMargin` set to the table's offset from the scroll element's start.
+         * @defaultValue undefined
+         */
+        getScrollElement?: () => Element | null;
         /**
          * Number of items rendered outside the visible area
          * @defaultValue 12
@@ -216,7 +222,7 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
     slots: TableSlots<T>;
     emit: ((event: "update:globalFilter", value: string | undefined) => void) & ((event: "update:columnFilters", value: ColumnFiltersState | undefined) => void) & ((event: "update:columnOrder", value: ColumnOrderState | undefined) => void) & ((event: "update:columnVisibility", value: VisibilityState | undefined) => void) & ((event: "update:columnPinning", value: ColumnPinningState | undefined) => void) & ((event: "update:columnSizing", value: ColumnSizingState | undefined) => void) & ((event: "update:columnSizingInfo", value: ColumnSizingInfoState | undefined) => void) & ((event: "update:rowSelection", value: RowSelectionState | undefined) => void) & ((event: "update:rowPinning", value: RowPinningState | undefined) => void) & ((event: "update:sorting", value: SortingState | undefined) => void) & ((event: "update:grouping", value: GroupingState | undefined) => void) & ((event: "update:expanded", value: ExpandedState | undefined) => void) & ((event: "update:pagination", value: PaginationState | 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/Table.vue

@@ -90,11 +90,13 @@ function processColumns(columns2) {
     return col;
   });
 }
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.table || {} })({
+const isExternalScroll = computed(() => typeof props.virtualize === "object" && !!props.virtualize.getScrollElement);
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.table || {} })({
   sticky: props.sticky,
   loading: props.loading,
   loadingColor: props.loadingColor,
-  loadingAnimation: props.loadingAnimation
+  loadingAnimation: props.loadingAnimation,
+  externalScroll: isExternalScroll.value
 }));
 const [DefineTableTemplate, ReuseTableTemplate] = createReusableTemplate();
 const [DefineRowTemplate, ReuseRowTemplate] = createReusableTemplate({
@@ -227,22 +229,27 @@ const virtualizerProps = toRef(() => defu(typeof props.virtualize === "boolean"
   estimateSize: 65,
   overscan: 12
 }));
+const getScrollElement = () => (isExternalScroll.value ? virtualizerProps.value.getScrollElement?.() : rootRef.value?.$el) ?? null;
+const scrollMargin = computed(() => virtualizerProps.value.scrollMargin ?? 0);
 const virtualizer = !!props.virtualize && useVirtualizer({
   ...virtualizerProps.value,
   get count() {
     return centerRows.value.length;
   },
-  getScrollElement: () => rootRef.value?.$el,
+  get scrollMargin() {
+    return scrollMargin.value;
+  },
+  getScrollElement,
   estimateSize: (index) => {
     const estimate = virtualizerProps.value.estimateSize;
     return typeof estimate === "function" ? estimate(index) : estimate;
   }
 });
 const virtualItems = computed(() => virtualizer ? virtualizer.value.getVirtualItems() : []);
-const virtualPaddingTop = computed(() => virtualItems.value[0]?.start ?? 0);
+const virtualPaddingTop = computed(() => (virtualItems.value[0]?.start ?? 0) - scrollMargin.value);
 const virtualPaddingBottom = computed(() => {
   if (!virtualizer || !virtualItems.value.length) return 0;
-  return virtualizer.value.getTotalSize() - (virtualItems.value[virtualItems.value.length - 1]?.end ?? 0);
+  return virtualizer.value.getTotalSize() - (virtualItems.value[virtualItems.value.length - 1]?.end ?? 0) + scrollMargin.value;
 });
 function valueUpdater(updaterOrValue, ref) {
   ref.value = typeof updaterOrValue === "function" ? updaterOrValue(ref.value) : updaterOrValue;
@@ -479,7 +486,7 @@ defineExpose({
     </table>
   </DefineTableTemplate>
 
-  <Primitive ref="rootRef" :as="props.as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive ref="rootRef" :as="props.as" data-slot="root" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ReuseTableTemplate />
   </Primitive>
 </template>

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

@@ -56,7 +56,13 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
      * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
      * @defaultValue false
      */
-    virtualize?: boolean | (Partial<Omit<VirtualizerOptions<Element, Element>, 'getScrollElement' | 'count' | 'estimateSize' | 'overscan'>> & {
+    virtualize?: boolean | (Partial<Omit<VirtualizerOptions<Element, Element>, 'count' | 'estimateSize' | 'overscan'>> & {
+        /**
+         * Virtualize against an external scroll element instead of the table's own root.
+         * Pair with `scrollMargin` set to the table's offset from the scroll element's start.
+         * @defaultValue undefined
+         */
+        getScrollElement?: () => Element | null;
         /**
          * Number of items rendered outside the visible area
          * @defaultValue 12
@@ -216,7 +222,7 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
     slots: TableSlots<T>;
     emit: ((event: "update:globalFilter", value: string | undefined) => void) & ((event: "update:columnFilters", value: ColumnFiltersState | undefined) => void) & ((event: "update:columnOrder", value: ColumnOrderState | undefined) => void) & ((event: "update:columnVisibility", value: VisibilityState | undefined) => void) & ((event: "update:columnPinning", value: ColumnPinningState | undefined) => void) & ((event: "update:columnSizing", value: ColumnSizingState | undefined) => void) & ((event: "update:columnSizingInfo", value: ColumnSizingInfoState | undefined) => void) & ((event: "update:rowSelection", value: RowSelectionState | undefined) => void) & ((event: "update:rowPinning", value: RowPinningState | undefined) => void) & ((event: "update:sorting", value: SortingState | undefined) => void) & ((event: "update:grouping", value: GroupingState | undefined) => void) & ((event: "update:expanded", value: ExpandedState | undefined) => void) & ((event: "update:pagination", value: PaginationState | 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/Tabs.d.vue.ts

@@ -2,7 +2,9 @@ import type { ComponentPublicInstance, VNode } from 'vue';
 import type { TabsRootProps, TabsRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tabs';
-import type { AvatarProps, BadgeProps, IconProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { BadgeProps } from './Badge.vue';
+import type { IconProps } from './Icon.vue';
 import type { DynamicSlots, GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Tabs = ComponentConfig<typeof theme, AppConfig, 'tabs'>;
@@ -109,7 +111,7 @@ declare const __VLS_export: <T extends TabsItem>(__VLS_props: NonNullable<Awaite
     slots: TabsSlots<T>;
     emit: (evt: "update:modelValue", payload: string | number) => 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/Tabs.vue

@@ -36,7 +36,7 @@ const slots = defineSlots();
 const props = useComponentProps("tabs", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "unmountOnHide"), emits);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tabs || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.tabs || {} })({
   color: props.color,
   variant: props.variant,
   size: props.size,

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

@@ -2,7 +2,9 @@ import type { ComponentPublicInstance, VNode } from 'vue';
 import type { TabsRootProps, TabsRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tabs';
-import type { AvatarProps, BadgeProps, IconProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { BadgeProps } from './Badge.vue';
+import type { IconProps } from './Icon.vue';
 import type { DynamicSlots, GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Tabs = ComponentConfig<typeof theme, AppConfig, 'tabs'>;
@@ -109,7 +111,7 @@ declare const __VLS_export: <T extends TabsItem>(__VLS_props: NonNullable<Awaite
     slots: TabsSlots<T>;
     emit: (evt: "update:modelValue", payload: string | number) => 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/Textarea.d.vue.ts

@@ -121,7 +121,7 @@ declare const __VLS_export: <T extends TextareaValue, Mod extends ModelModifiers
         nullable: true;
     } ? T | null : T) => 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/Textarea.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/textarea";
 </script>
 
 <script setup>
-import { useTemplateRef, computed, onMounted, nextTick, watch } from "vue";
+import { useTemplateRef, computed, onMounted, onScopeDispose, nextTick, watch } from "vue";
 import { Primitive } from "reka-ui";
 import { useVModel } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -52,14 +52,18 @@ const slots = defineSlots();
 const props = useComponentProps("textarea", _props);
 const modelValue = useVModel(props, "modelValue", emits, { defaultValue: props.defaultValue });
 const appConfig = useAppConfig();
-const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField(_props, { deferInputValidation: true });
+const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size: formFieldSize, color: formFieldColor, id, name, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props, { deferInputValidation: true });
+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 { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.textarea || {} })({
-  color: color.value ?? props.color,
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.textarea || {} })({
+  color: color.value,
   variant: props.variant,
-  size: size?.value ?? props.size,
+  size: size.value,
   loading: props.loading,
-  highlight: highlight.value ?? props.highlight,
+  highlight: highlight.value,
   fixed: props.fixed,
   autoresize: props.autoresize,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
@@ -129,15 +133,21 @@ function autoResize() {
 watch(modelValue, () => {
   nextTick(autoResize);
 });
+let autofocusTimeoutId;
+let autoresizeTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
-  setTimeout(async () => {
+  autoresizeTimeoutId = setTimeout(async () => {
     await nextTick();
     autoResize();
   }, props.autoresizeDelay);
 });
+onScopeDispose(() => {
+  clearTimeout(autofocusTimeoutId);
+  clearTimeout(autoresizeTimeoutId);
+});
 defineExpose({
   textareaRef,
   autoResize
@@ -145,7 +155,7 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="props.as" :data-slot="$attrs['data-slot'] ?? 'root'" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <textarea
       :id="id"
       ref="textareaRef"
@@ -153,11 +163,11 @@ defineExpose({
       :name="name"
       :rows="props.rows"
       :placeholder="props.placeholder"
-      data-slot="base"
       :class="ui.base({ class: props.ui?.base })"
       :disabled="disabled"
       :required="props.required"
       v-bind="{ ...$attrs, ...ariaAttrs }"
+      data-slot="base"
       @input="onInput"
       @blur="onBlur"
       @change="onChange"