@eslamdevui/ui 4.1.1-rc.1 → 4.3.0

package/dist/runtime/components/Slideover.vue

@@ -18,9 +18,10 @@ const props = defineProps({
   overlay: { type: Boolean, required: false, default: true },
   transition: { type: Boolean, required: false, default: true },
   side: { type: null, required: false, default: "right" },
+  inset: { type: Boolean, required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   close: { type: [Boolean, Object], required: false, default: true },
-  closeIcon: { type: [String, Object], required: false },
+  closeIcon: { type: null, required: false },
   dismissible: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
   ui: { type: null, required: false },
@@ -50,7 +51,8 @@ const contentEvents = computed(() => {
 });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover || {} })({
   transition: props.transition,
-  side: props.side
+  side: props.side,
+  inset: props.inset
 }));
 </script>
 
@@ -61,10 +63,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
     </DialogTrigger>
 
     <DialogPortal v-bind="portalProps">
-      <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
+      <DialogOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
       <DialogContent
         :data-side="side"
+        data-slot="content"
         :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
         v-bind="contentProps"
         @after-enter="emits('after:enter')"
@@ -86,16 +89,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
         </VisuallyHidden>
 
         <slot name="content" :close="close">
-          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
+          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
             <slot name="header" :close="close">
-              <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-                <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+              <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+                <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
                   <slot name="title">
                     {{ title }}
                   </slot>
                 </DialogTitle>
 
-                <DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+                <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
                   <slot name="description">
                     {{ description }}
                   </slot>
@@ -113,6 +116,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
                     variant="ghost"
                     :aria-label="t('slideover.close')"
                     v-bind="typeof props.close === 'object' ? props.close : {}"
+                    data-slot="close"
                     :class="ui.close({ class: props.ui?.close })"
                   />
                 </slot>
@@ -120,11 +124,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
             </slot>
           </div>
 
-          <div :class="ui.body({ class: props.ui?.body })">
+          <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
             <slot name="body" :close="close" />
           </div>
 
-          <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+          <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
             <slot name="footer" :close="close" />
           </div>
         </slot>

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

@@ -1,7 +1,7 @@
 import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/slideover';
-import type { ButtonProps, IconProps } from '../types';
+import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
 import type { EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Slideover = ComponentConfig<typeof theme, AppConfig, 'slideover'>;
@@ -25,6 +25,11 @@ export interface SlideoverProps extends DialogRootProps {
      * @defaultValue 'right'
      */
     side?: Slideover['variants']['side'];
+    /**
+     * Whether to inset the slideover from the edges.
+     * @defaultValue false
+     */
+    inset?: boolean;
     /**
      * Render the slideover in a portal.
      * @defaultValue true
@@ -35,7 +40,7 @@ export interface SlideoverProps extends DialogRootProps {
      * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
      * @defaultValue true
      */
-    close?: boolean | Partial<ButtonProps>;
+    close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed in the close button.
      * @defaultValue appConfig.ui.icons.close
@@ -78,6 +83,8 @@ export interface SlideoverSlots {
         close: () => void;
     }): any;
 }
+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;
     "after:leave": () => any;
@@ -89,7 +96,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Slideo
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
 }>, {
-    close: boolean | Partial<ButtonProps>;
+    close: boolean | Omit<ButtonProps, LinkPropsKeys>;
     modal: boolean;
     portal: boolean | string | HTMLElement;
     overlay: boolean;
@@ -97,8 +104,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Slideo
     transition: boolean;
     dismissible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SlideoverSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -37,10 +37,14 @@ export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' |
 export interface SliderEmits {
     change: [event: Event];
 }
-declare const __VLS_export: <T extends number | number[]>(__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<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends number | number[]>(__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: __VLS_PrettifyLocal<(SliderProps & {
         modelValue?: T;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T | undefined) => void)>>> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
@@ -48,8 +52,8 @@ declare const __VLS_export: <T extends number | number[]>(__VLS_props: NonNullab
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+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/Slider.vue

@@ -70,13 +70,14 @@ function onChange(value) {
     v-model="sliderValue"
     :name="name"
     :disabled="disabled"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :default-value="defaultSliderValue"
     @update:model-value="emitFormInput()"
     @value-commit="onChange"
   >
-    <SliderTrack :class="ui.track({ class: props.ui?.track })">
-      <SliderRange :class="ui.range({ class: props.ui?.range })" />
+    <SliderTrack data-slot="track" :class="ui.track({ class: props.ui?.track })">
+      <SliderRange data-slot="range" :class="ui.range({ class: props.ui?.range })" />
     </SliderTrack>
 
     <template v-for="thumb in thumbs" :key="thumb">
@@ -86,9 +87,9 @@ function onChange(value) {
         disable-closing-trigger
         v-bind="typeof tooltip === 'object' ? tooltip : {}"
       >
-        <SliderThumb :class="ui.thumb({ class: props.ui?.thumb })" />
+        <SliderThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
       </UTooltip>
-      <SliderThumb v-else :class="ui.thumb({ class: props.ui?.thumb })" />
+      <SliderThumb v-else data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
     </template>
   </SliderRoot>
 </template>

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

@@ -37,10 +37,14 @@ export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' |
 export interface SliderEmits {
     change: [event: Event];
 }
-declare const __VLS_export: <T extends number | number[]>(__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<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends number | number[]>(__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: __VLS_PrettifyLocal<(SliderProps & {
         modelValue?: T;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T | undefined) => void)>>> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
@@ -48,8 +52,8 @@ declare const __VLS_export: <T extends number | number[]>(__VLS_props: NonNullab
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+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

@@ -64,10 +64,14 @@ export type StepperSlots<T extends StepperItem = StepperItem> = {
     description: SlotProps<T>;
     content: SlotProps<T>;
 } & DynamicSlots<T>;
-declare const __VLS_export: <T extends StepperItem>(__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<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends StepperItem>(__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: __VLS_PrettifyLocal<(StepperProps<T> & {
         modelValue?: string | number;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "next", value: T) => void) & ((evt: "prev", value: T) => void) & ((evt: "update:modelValue", value: string | number | undefined) => void)>>> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "next", value: T) => void) & ((evt: "prev", value: T) => void) & ((evt: "update:modelValue", value: string | number | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         next(): void;
         prev(): void;
@@ -80,8 +84,8 @@ declare const __VLS_export: <T extends StepperItem>(__VLS_props: NonNullable<Awa
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+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.vue

@@ -62,20 +62,21 @@ defineExpose({
 </script>
 
 <template>
-  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.header({ class: props.ui?.header })">
+  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <StepperItem
         v-for="(item, count) in items"
         :key="item.value ?? count"
         :step="count"
         :disabled="item.disabled || props.disabled"
+        data-slot="item"
         :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
       >
-        <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
-          <StepperTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })">
-            <StepperIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })">
+        <div data-slot="container" :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
+          <StepperTrigger data-slot="trigger" :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })">
+            <StepperIndicator data-slot="indicator" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })">
               <slot name="indicator" :item="item" :ui="ui">
-                <UIcon v-if="item.icon" :name="item.icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" />
+                <UIcon v-if="item.icon" :name="item.icon" data-slot="icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" />
                 <template v-else>
                   {{ count + 1 }}
                 </template>
@@ -85,17 +86,18 @@ defineExpose({
 
           <StepperSeparator
             v-if="count < items.length - 1"
+            data-slot="separator"
             :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
           />
         </div>
 
-        <div :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
-          <StepperTitle as="div" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
+        <div data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+          <StepperTitle as="div" data-slot="title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
             <slot name="title" :item="item">
               {{ item.title }}
             </slot>
           </StepperTitle>
-          <StepperDescription as="div" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
+          <StepperDescription as="div" data-slot="description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
             <slot name="description" :item="item">
               {{ item.description }}
             </slot>
@@ -104,7 +106,7 @@ defineExpose({
       </StepperItem>
     </div>
 
-    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot" :class="ui.content({ class: props.ui?.content })">
+    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot" data-slot="content" :class="ui.content({ class: props.ui?.content })">
       <slot
         :name="currentStep?.slot || 'content'"
         :item="currentStep"

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

@@ -64,10 +64,14 @@ export type StepperSlots<T extends StepperItem = StepperItem> = {
     description: SlotProps<T>;
     content: SlotProps<T>;
 } & DynamicSlots<T>;
-declare const __VLS_export: <T extends StepperItem>(__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<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends StepperItem>(__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: __VLS_PrettifyLocal<(StepperProps<T> & {
         modelValue?: string | number;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "next", value: T) => void) & ((evt: "prev", value: T) => void) & ((evt: "update:modelValue", value: string | number | undefined) => void)>>> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "next", value: T) => void) & ((evt: "prev", value: T) => void) & ((evt: "update:modelValue", value: string | number | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         next(): void;
         prev(): void;
@@ -80,8 +84,8 @@ declare const __VLS_export: <T extends StepperItem>(__VLS_props: NonNullable<Awa
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+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/Switch.d.vue.ts

@@ -2,9 +2,10 @@ import type { SwitchRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/switch';
 import type { IconProps } from '../types';
+import type { ButtonHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type Switch = ComponentConfig<typeof theme, AppConfig, 'switch'>;
-export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
+export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -52,6 +53,8 @@ export interface SwitchSlots {
         description?: string;
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SwitchProps & {
     modelValue?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -63,8 +66,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Switch
     onChange?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SwitchSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Switch.vue

@@ -16,9 +16,9 @@ const props = defineProps({
   color: { type: null, required: false },
   size: { type: null, required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: [String, Object], required: false },
-  checkedIcon: { type: [String, Object], required: false },
-  uncheckedIcon: { type: [String, Object], required: false },
+  loadingIcon: { type: null, required: false },
+  checkedIcon: { type: null, required: false },
+  uncheckedIcon: { type: null, required: false },
   label: { type: String, required: false },
   description: { type: String, required: false },
   class: { type: null, required: false },
@@ -53,33 +53,34 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.container({ class: props.ui?.container })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
       <SwitchRoot
         :id="id"
         v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
         v-model="modelValue"
         :name="name"
         :disabled="disabled || loading"
+        data-slot="base"
         :class="ui.base({ class: props.ui?.base })"
         @update:model-value="onUpdate"
       >
-        <SwitchThumb :class="ui.thumb({ class: props.ui?.thumb })">
-          <UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" />
+        <SwitchThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })">
+          <UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" data-slot="icon" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" />
           <template v-else>
-            <UIcon v-if="checkedIcon" :name="checkedIcon" :class="ui.icon({ class: props.ui?.icon, checked: true })" />
-            <UIcon v-if="uncheckedIcon" :name="uncheckedIcon" :class="ui.icon({ class: props.ui?.icon, unchecked: true })" />
+            <UIcon v-if="checkedIcon" :name="checkedIcon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon, checked: true })" />
+            <UIcon v-if="uncheckedIcon" :name="uncheckedIcon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon, unchecked: true })" />
           </template>
         </SwitchThumb>
       </SwitchRoot>
     </div>
-    <div v-if="label || !!slots.label || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <Label v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
+    <div v-if="label || !!slots.label || (description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <Label v-if="label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
         <slot name="label" :label="label">
           {{ label }}
         </slot>
       </Label>
-      <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+      <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description" :description="description">
           {{ description }}
         </slot>

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

@@ -2,9 +2,10 @@ import type { SwitchRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/switch';
 import type { IconProps } from '../types';
+import type { ButtonHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type Switch = ComponentConfig<typeof theme, AppConfig, 'switch'>;
-export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
+export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -52,6 +53,8 @@ export interface SwitchSlots {
         description?: string;
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SwitchProps & {
     modelValue?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -63,8 +66,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Switch
     onChange?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SwitchSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,9 +1,10 @@
-import type { Ref, WatchOptions } from 'vue';
+import type { WatchOptions } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { Cell, Header, RowData, TableMeta } from '@tanstack/table-core';
 import type { CellContext, ColumnDef, ColumnFiltersOptions, ColumnFiltersState, ColumnOrderState, ColumnPinningOptions, ColumnPinningState, ColumnSizingInfoState, ColumnSizingOptions, ColumnSizingState, CoreOptions, ExpandedOptions, ExpandedState, FacetedOptions, GlobalFilterOptions, GroupingOptions, GroupingState, HeaderContext, PaginationOptions, PaginationState, Row, RowPinningOptions, RowPinningState, RowSelectionOptions, RowSelectionState, SortingOptions, SortingState, VisibilityOptions, VisibilityState } from '@tanstack/vue-table';
 import type { VirtualizerOptions } from '@tanstack/vue-virtual';
 import theme from '#build/ui/table';
+import type { TableHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 declare module '@tanstack/table-core' {
     interface ColumnMeta<TData extends RowData, TValue> {
@@ -40,7 +41,7 @@ export interface TableOptions<T extends TableData = TableData> extends Omit<Core
     onStateChange?: CoreOptions<T>['onStateChange'];
     renderFallbackValue?: CoreOptions<T>['renderFallbackValue'];
 }
-export interface TableProps<T extends TableData = TableData> extends TableOptions<T> {
+export interface TableProps<T extends TableData = TableData> extends TableOptions<T>, /** @vue-ignore */ TableHTMLAttributes {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -53,6 +54,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     /**
      * Enable virtualization for large datasets.
      * Note: when enabled, the divider between rows and sticky properties are not supported.
+     * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
      * @defaultValue false
      */
     virtualize?: boolean | (Partial<Omit<VirtualizerOptions<Element, Element>, 'getScrollElement' | 'count' | 'estimateSize' | 'overscan'>> & {
@@ -62,10 +64,10 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
          */
         overscan?: number;
         /**
-         * Estimated size (in px) of each item
+         * Estimated size (in px) of each item, or a function that returns the size for a given index
          * @defaultValue 65
          */
-        estimateSize?: number;
+        estimateSize?: number | ((index: number) => number);
     });
     /**
      * The text to display when the table is empty.
@@ -174,7 +176,9 @@ export type TableSlots<T extends TableData = TableData> = {
     'body-top': (props?: {}) => any;
     'body-bottom': (props?: {}) => any;
 } & DynamicHeaderSlots<T> & DynamicFooterSlots<T> & DynamicCellSlots<T>;
-declare const __VLS_export: <T extends TableData>(__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<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends TableData>(__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: __VLS_PrettifyLocal<(TableProps<T> & {
         globalFilter?: string;
         columnFilters?: ColumnFiltersState;
@@ -189,20 +193,22 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
         grouping?: GroupingState;
         expanded?: ExpandedState;
         pagination?: PaginationState;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:globalFilter", value: string) => void) & ((evt: "update:columnFilters", value: ColumnFiltersState) => void) & ((evt: "update:columnOrder", value: ColumnOrderState) => void) & ((evt: "update:columnVisibility", value: VisibilityState) => void) & ((evt: "update:columnPinning", value: ColumnPinningState) => void) & ((evt: "update:columnSizing", value: ColumnSizingState) => void) & ((evt: "update:columnSizingInfo", value: ColumnSizingInfoState) => void) & ((evt: "update:rowSelection", value: RowSelectionState) => void) & ((evt: "update:rowPinning", value: RowPinningState) => void) & ((evt: "update:sorting", value: SortingState) => void) & ((evt: "update:grouping", value: GroupingState) => void) & ((evt: "update:expanded", value: ExpandedState) => void) & ((evt: "update:pagination", value: PaginationState) => void)>>> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:globalFilter", value: string | undefined) => void) & ((evt: "update:columnFilters", value: ColumnFiltersState | undefined) => void) & ((evt: "update:columnOrder", value: ColumnOrderState | undefined) => void) & ((evt: "update:columnVisibility", value: VisibilityState | undefined) => void) & ((evt: "update:columnPinning", value: ColumnPinningState | undefined) => void) & ((evt: "update:columnSizing", value: ColumnSizingState | undefined) => void) & ((evt: "update:columnSizingInfo", value: ColumnSizingInfoState | undefined) => void) & ((evt: "update:rowSelection", value: RowSelectionState | undefined) => void) & ((evt: "update:rowPinning", value: RowPinningState | undefined) => void) & ((evt: "update:sorting", value: SortingState | undefined) => void) & ((evt: "update:grouping", value: GroupingState | undefined) => void) & ((evt: "update:expanded", value: ExpandedState | undefined) => void) & ((evt: "update:pagination", value: PaginationState | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        readonly $el: any;
-        tableRef: Ref<HTMLTableElement | null, HTMLTableElement | null>;
+        readonly $el: HTMLElement;
+        tableRef: Readonly<import("vue").ShallowRef<HTMLTableElement | null>>;
         tableApi: import("@tanstack/table-core").Table<T>;
     }>) => void;
     attrs: any;
     slots: TableSlots<T>;
-    emit: ((evt: "update:globalFilter", value: string) => void) & ((evt: "update:columnFilters", value: ColumnFiltersState) => void) & ((evt: "update:columnOrder", value: ColumnOrderState) => void) & ((evt: "update:columnVisibility", value: VisibilityState) => void) & ((evt: "update:columnPinning", value: ColumnPinningState) => void) & ((evt: "update:columnSizing", value: ColumnSizingState) => void) & ((evt: "update:columnSizingInfo", value: ColumnSizingInfoState) => void) & ((evt: "update:rowSelection", value: RowSelectionState) => void) & ((evt: "update:rowPinning", value: RowPinningState) => void) & ((evt: "update:sorting", value: SortingState) => void) & ((evt: "update:grouping", value: GroupingState) => void) & ((evt: "update:expanded", value: ExpandedState) => void) & ((evt: "update:pagination", value: PaginationState) => void);
+    emit: ((evt: "update:globalFilter", value: string | undefined) => void) & ((evt: "update:columnFilters", value: ColumnFiltersState | undefined) => void) & ((evt: "update:columnOrder", value: ColumnOrderState | undefined) => void) & ((evt: "update:columnVisibility", value: VisibilityState | undefined) => void) & ((evt: "update:columnPinning", value: ColumnPinningState | undefined) => void) & ((evt: "update:columnSizing", value: ColumnSizingState | undefined) => void) & ((evt: "update:columnSizingInfo", value: ColumnSizingInfoState | undefined) => void) & ((evt: "update:rowSelection", value: RowSelectionState | undefined) => void) & ((evt: "update:rowPinning", value: RowPinningState | undefined) => void) & ((evt: "update:sorting", value: SortingState | undefined) => void) & ((evt: "update:grouping", value: GroupingState | undefined) => void) & ((evt: "update:expanded", value: ExpandedState | undefined) => void) & ((evt: "update:pagination", value: PaginationState | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};