@nuxt/ui 4.8.2 → 4.10.0

package/dist/runtime/components/Separator.vue

@@ -12,6 +12,7 @@ import { useForwardProps } from "../composables/useForwardProps";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
+defineOptions({ inheritAttrs: false });
 const _props = defineProps({
   as: { type: null, required: false },
   label: { type: String, required: false },
@@ -32,7 +33,7 @@ const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "decorative", "orientation"));
 const [DefineContainer, ReuseContainer] = createReusableTemplate();
 const hasContent = computed(() => !!(props.label || props.icon || props.avatar || slots.default));
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.separator || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.separator || {} })({
   color: props.color,
   orientation: props.orientation,
   size: props.size,
@@ -52,7 +53,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.separator ||
     </div>
   </DefineContainer>
 
-  <Separator v-bind="rootProps" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Separator data-slot="root" v-bind="{ ...rootProps, ...$attrs }" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ReuseContainer v-if="hasContent && props.position === 'start'" />
 
     <div data-slot="border" :class="ui.border({ class: props.ui?.border })" />

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

@@ -3,7 +3,8 @@ import type { SeparatorProps as _SeparatorProps } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/separator';
-import type { AvatarProps, IconProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { IconProps } from './Icon.vue';
 import type { ComponentConfig } from '../types/tv';
 type Separator = ComponentConfig<typeof theme, AppConfig, 'separator'>;
 export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
@@ -54,8 +55,8 @@ export interface SeparatorSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
-    position: Separator["variants"]["position"];
     orientation: Separator["variants"]["orientation"];
+    position: Separator["variants"]["position"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SeparatorSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -1,7 +1,12 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/sidebar';
-import type { ButtonProps, DrawerProps, IconProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { DrawerProps } from './Drawer.vue';
+import type { IconProps } from './Icon.vue';
+import type { ModalProps } from './Modal.vue';
+import type { SlideoverProps } from './Slideover.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type Sidebar = ComponentConfig<typeof theme, AppConfig, 'sidebar'>;
 type SidebarState = 'expanded' | 'collapsed';
@@ -58,6 +63,11 @@ export interface SidebarProps<T extends SidebarMode = SidebarMode> {
      * @defaultValue false
      */
     rail?: boolean;
+    /**
+     * Animate the sidebar when collapsing or expanding.
+     * @defaultValue true
+     */
+    transition?: boolean;
     /**
      * The mode of the sidebar menu on mobile.
      * @defaultValue 'slideover'
@@ -122,7 +132,7 @@ declare const __VLS_export: <T extends SidebarMode>(__VLS_props: NonNullable<Awa
     slots: SidebarSlots;
     emit: (event: "update:open", value: boolean) => 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/Sidebar.vue

@@ -26,6 +26,7 @@ const _props = defineProps({
   close: { type: [Boolean, Object], required: false, default: false },
   closeIcon: { type: null, required: false },
   rail: { type: Boolean, required: false, default: false },
+  transition: { type: Boolean, required: false, default: true },
   mode: { type: null, required: false, default: "slideover" },
   menu: { type: null, required: false },
   class: { type: null, required: false },
@@ -80,10 +81,11 @@ function closeSidebar() {
   open.value = false;
 }
 const hasHeader = computed(() => !!slots.header || props.title || !!slots.title || props.description || !!slots.description || !!slots.actions || canClose.value || !!slots.close);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.sidebar || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.sidebar || {} })({
   side: props.side,
   variant: props.variant,
-  collapsible: props.collapsible
+  collapsible: props.collapsible,
+  transition: props.transition
 }));
 const Menu = computed(() => ({
   slideover: USlideover,
@@ -155,8 +157,8 @@ const menuProps = toRef(() => defu(props.menu, {
   <Primitive
     v-if="props.collapsible === 'none'"
     :as="props.as"
-    v-bind="$attrs"
     data-slot="root"
+    v-bind="$attrs"
     :data-variant="props.variant"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
@@ -167,8 +169,8 @@ const menuProps = toRef(() => defu(props.menu, {
   <template v-else>
     <Primitive
       :as="props.as"
-      v-bind="$attrs"
       data-slot="root"
+      v-bind="$attrs"
       :data-state="state"
       :data-collapsible="state === 'collapsed' ? props.collapsible : void 0"
       :data-variant="props.variant"

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

@@ -1,7 +1,12 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/sidebar';
-import type { ButtonProps, DrawerProps, IconProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { DrawerProps } from './Drawer.vue';
+import type { IconProps } from './Icon.vue';
+import type { ModalProps } from './Modal.vue';
+import type { SlideoverProps } from './Slideover.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type Sidebar = ComponentConfig<typeof theme, AppConfig, 'sidebar'>;
 type SidebarState = 'expanded' | 'collapsed';
@@ -58,6 +63,11 @@ export interface SidebarProps<T extends SidebarMode = SidebarMode> {
      * @defaultValue false
      */
     rail?: boolean;
+    /**
+     * Animate the sidebar when collapsing or expanding.
+     * @defaultValue true
+     */
+    transition?: boolean;
     /**
      * The mode of the sidebar menu on mobile.
      * @defaultValue 'slideover'
@@ -122,7 +132,7 @@ declare const __VLS_export: <T extends SidebarMode>(__VLS_props: NonNullable<Awa
     slots: SidebarSlots;
     emit: (event: "update:open", value: boolean) => 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/Skeleton.vue

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

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

@@ -2,7 +2,9 @@ import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogConten
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/slideover';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Slideover = ComponentConfig<typeof theme, AppConfig, 'slideover'>;
@@ -57,7 +59,9 @@ export interface SlideoverProps extends DialogRootProps {
     ui?: Slideover['slots'];
 }
 export interface SlideoverEmits extends DialogRootEmits {
+    'leave': [];
     'after:leave': [];
+    'enter': [];
     'after:enter': [];
     'close:prevent': [];
 }
@@ -87,23 +91,27 @@ export interface SlideoverSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SlideoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:open": (value: boolean) => any;
+    enter: () => any;
+    leave: () => any;
     "after:leave": () => any;
     "after:enter": () => any;
     "close:prevent": () => any;
+    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<SlideoverProps> & Readonly<{
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onEnter?: (() => any) | undefined;
+    onLeave?: (() => any) | undefined;
     "onAfter:leave"?: (() => any) | undefined;
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     close: boolean | Omit<ButtonProps, LinkPropsKeys>;
     modal: boolean;
     transition: boolean;
-    portal: boolean | string | HTMLElement;
     overlay: boolean;
-    side: Slideover["variants"]["side"];
+    portal: boolean | string | HTMLElement;
     dismissible: boolean;
+    side: Slideover["variants"]["side"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SlideoverSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Slideover.vue

@@ -31,14 +31,15 @@ const _props = defineProps({
   ui: { type: Object, required: false },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
-  modal: { type: Boolean, required: false, default: true }
+  modal: { type: Boolean, required: false, default: true },
+  unmountOnHide: { type: Boolean, required: false }
 });
-const emits = defineEmits(["after:leave", "after:enter", "close:prevent", "update:open"]);
+const emits = defineEmits(["leave", "after:leave", "enter", "after:enter", "close:prevent", "update:open"]);
 const slots = defineSlots();
 const props = useComponentProps("slideover", _props);
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const rootProps = useForwardProps(reactivePick(props, "open", "defaultOpen", "modal"), emits);
+const rootProps = useForwardProps(reactivePick(props, "open", "defaultOpen", "modal", "unmountOnHide"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => props.content);
 const contentEvents = computed(() => {
@@ -56,7 +57,7 @@ const contentEvents = computed(() => {
     pointerDownOutside
   };
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.slideover || {} })({
   transition: props.transition,
   side: props.side,
   inset: props.inset
@@ -69,7 +70,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
       <slot :open="open" />
     </DialogTrigger>
 
-    <DialogPortal v-bind="portalProps">
+    <DialogPortal v-bind="portalProps" :force-mount="portalProps.disabled && props.unmountOnHide === false || void 0">
       <FieldGroupReset>
         <DialogOverlay v-if="props.overlay" data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
@@ -78,7 +79,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
           data-slot="content"
           :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
           v-bind="contentProps"
+          @enter="emits('enter')"
           @after-enter="emits('after:enter')"
+          @leave="emits('leave')"
           @after-leave="emits('after:leave')"
           v-on="contentEvents"
         >

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

@@ -2,7 +2,9 @@ import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogConten
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/slideover';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Slideover = ComponentConfig<typeof theme, AppConfig, 'slideover'>;
@@ -57,7 +59,9 @@ export interface SlideoverProps extends DialogRootProps {
     ui?: Slideover['slots'];
 }
 export interface SlideoverEmits extends DialogRootEmits {
+    'leave': [];
     'after:leave': [];
+    'enter': [];
     'after:enter': [];
     'close:prevent': [];
 }
@@ -87,23 +91,27 @@ export interface SlideoverSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SlideoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:open": (value: boolean) => any;
+    enter: () => any;
+    leave: () => any;
     "after:leave": () => any;
     "after:enter": () => any;
     "close:prevent": () => any;
+    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<SlideoverProps> & Readonly<{
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onEnter?: (() => any) | undefined;
+    onLeave?: (() => any) | undefined;
     "onAfter:leave"?: (() => any) | undefined;
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     close: boolean | Omit<ButtonProps, LinkPropsKeys>;
     modal: boolean;
     transition: boolean;
-    portal: boolean | string | HTMLElement;
     overlay: boolean;
-    side: Slideover["variants"]["side"];
+    portal: boolean | string | HTMLElement;
     dismissible: boolean;
+    side: Slideover["variants"]["side"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SlideoverSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -1,7 +1,7 @@
 import type { SliderRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/slider';
-import type { TooltipProps } from '../types';
+import type { TooltipProps } from './Tooltip.vue';
 import type { ComponentConfig } from '../types/tv';
 type Slider = ComponentConfig<typeof theme, AppConfig, 'slider'>;
 export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' | 'inverted' | 'min' | 'max' | 'step' | 'minStepsBetweenThumbs'> {
@@ -53,7 +53,7 @@ declare const __VLS_export: <T extends number | number[]>(__VLS_props: NonNullab
     slots: {};
     emit: ((evt: "change", event: Event) => void) & ((event: "update:modelValue", value: T | 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/Slider.vue

@@ -53,7 +53,7 @@ const sliderValue = computed({
   }
 });
 const thumbs = computed(() => sliderValue.value?.length ?? 1);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slider || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.slider || {} })({
   disabled: disabled.value,
   size: size.value ?? props.size,
   color: color.value ?? props.color,

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

@@ -1,7 +1,7 @@
 import type { SliderRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/slider';
-import type { TooltipProps } from '../types';
+import type { TooltipProps } from './Tooltip.vue';
 import type { ComponentConfig } from '../types/tv';
 type Slider = ComponentConfig<typeof theme, AppConfig, 'slider'>;
 export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' | 'inverted' | 'min' | 'max' | 'step' | 'minStepsBetweenThumbs'> {
@@ -53,7 +53,7 @@ declare const __VLS_export: <T extends number | number[]>(__VLS_props: NonNullab
     slots: {};
     emit: ((evt: "change", event: Event) => void) & ((event: "update:modelValue", value: T | 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.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

@@ -48,7 +48,7 @@ const forwardedAttrs = computed(() => {
   const { "data-state": _, ...rest } = attrs;
   return rest;
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.switch || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.switch || {} })({
   size: size.value ?? props.size,
   color: color.value ?? props.color,
   highlight: highlight.value ?? props.highlight,
@@ -65,7 +65,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];