ui-ingredients 0.0.62 → 0.0.64

package/dist/accordion/accordion-item-content.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
   import type {Action} from 'svelte/action';
 
@@ -17,7 +17,7 @@
   } from './avatar-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -48,7 +48,7 @@
   {#if asChild}
     {@render asChild(presence.ref, mergedProps)}
   {:else}
-    <div bind:this={e} use:presence.ref {...mergedProps}>
+    <div bind:this={ref} use:presence.ref {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

package/dist/accordion/accordion-item-content.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const AccordionItemContent: $$__sveltets_2_IsomorphicComponent<AccordionItemContentProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type AccordionItemContent = InstanceType<typeof AccordionItemContent>;
 export default AccordionItemContent;

package/dist/accordion/accordion-item-indicator.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface AccordionIndicatorProps
@@ -13,7 +13,7 @@
   } from './avatar-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -30,7 +30,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span bind:this={e} {...mergedProps}>
+  <span bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/accordion/accordion-item-indicator.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const AccordionItemIndicator: $$__sveltets_2_IsomorphicComponent<AccordionIndicatorProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type AccordionItemIndicator = InstanceType<typeof AccordionItemIndicator>;
 export default AccordionItemIndicator;

package/dist/accordion/accordion-item-trigger.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface AccordionItemTriggerProps
@@ -13,7 +13,7 @@
   } from './avatar-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -30,7 +30,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button bind:this={e} type="button" {...mergedProps}>
+  <button bind:this={ref} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/accordion/accordion-item-trigger.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const AccordionItemTrigger: $$__sveltets_2_IsomorphicComponent<AccordionItemTriggerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type AccordionItemTrigger = InstanceType<typeof AccordionItemTrigger>;
 export default AccordionItemTrigger;

package/dist/accordion/accordion-item.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/accordion';
 
@@ -17,7 +17,12 @@
     setAccordionItemPropsContext,
   } from './avatar-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: AccordionItemProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AccordionItemProps = $props();
 
   let accordion = getAccordionContext();
 
@@ -36,7 +41,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}

package/dist/accordion/accordion-item.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const AccordionItem: $$__sveltets_2_IsomorphicComponent<AccordionItemProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type AccordionItem = InstanceType<typeof AccordionItem>;
 export default AccordionItem;

package/dist/accordion/accordion-root.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
@@ -22,7 +22,12 @@
   import {setAccordionContext} from './avatar-context.svelte.js';
   import {createAccordion} from './create-accordion.svelte.js';
 
-  let {this: e, asChild, children, ...props}: AccordionProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AccordionProps = $props();
 
   let [presenceStrategyProps, rest] = $derived(
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
@@ -55,7 +60,7 @@
 {#if asChild}
   {@render asChild(mergedProps, accordion)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(accordion)}
   </div>
 {/if}

package/dist/accordion/accordion-root.svelte.d.ts

@@ -18,6 +18,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const AccordionRoot: $$__sveltets_2_IsomorphicComponent<AccordionProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type AccordionRoot = InstanceType<typeof AccordionRoot>;
 export default AccordionRoot;

package/dist/avatar/avatar-fallback.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface AvatarFallbackProps
@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getAvatarContext} from './avatar-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: AvatarFallbackProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AvatarFallbackProps = $props();
 
   let avatar = getAvatarContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span bind:this={e} {...mergedProps}>
+  <span bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/avatar/avatar-fallback.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const AvatarFallback: $$__sveltets_2_IsomorphicComponent<AvatarFallbackProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type AvatarFallback = InstanceType<typeof AvatarFallback>;
 export default AvatarFallback;

package/dist/avatar/avatar-image.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface AvatarImageProps
@@ -9,7 +9,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getAvatarContext} from './avatar-context.svelte.js';
 
-  let {this: e, asChild, ...props}: AvatarImageProps = $props();
+  let {ref = $bindable(null), asChild, ...props}: AvatarImageProps = $props();
 
   let avatar = getAvatarContext();
 
@@ -19,5 +19,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <img bind:this={e} {...mergedProps} />
+  <img bind:this={ref} {...mergedProps} />
 {/if}

package/dist/avatar/avatar-image.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const AvatarImage: $$__sveltets_2_IsomorphicComponent<AvatarImageProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type AvatarImage = InstanceType<typeof AvatarImage>;
 export default AvatarImage;

package/dist/avatar/avatar-root.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import {
     type CreateAvatarProps,
@@ -19,7 +19,12 @@
   import {setAvatarContext} from './avatar-context.svelte.js';
   import {createAvatar} from './create-avatar.svelte.js';
 
-  let {this: e, asChild, children, ...props}: AvatarProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AvatarProps = $props();
 
   let [createAvatarProps, localProps] = $derived(
     createSplitProps<CreateAvatarProps>(['id', 'ids', 'onStatusChange'])(props),
@@ -35,7 +40,7 @@
 {#if asChild}
   {@render asChild(mergedProps, avatar)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(avatar)}
   </div>
 {/if}

package/dist/avatar/avatar-root.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const AvatarRoot: $$__sveltets_2_IsomorphicComponent<AvatarProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type AvatarRoot = InstanceType<typeof AvatarRoot>;
 export default AvatarRoot;

package/dist/carousel/carousel-indicator-group.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface CarouselIndicatorGroupProps
@@ -10,7 +10,7 @@
   import {getCarouselContext} from './carousel-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -26,7 +26,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/carousel/carousel-indicator-group.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const CarouselIndicatorGroup: $$__sveltets_2_IsomorphicComponent<CarouselIndicatorGroupProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type CarouselIndicatorGroup = InstanceType<typeof CarouselIndicatorGroup>;
 export default CarouselIndicatorGroup;

package/dist/carousel/carousel-indicator.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {IndicatorProps} from '@zag-js/carousel';
 
@@ -14,7 +14,12 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getCarouselContext} from './carousel-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: CarouselIndicatorProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: CarouselIndicatorProps = $props();
 
   let carousel = getCarouselContext();
 
@@ -30,7 +35,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button bind:this={e} type="button" {...mergedProps}>
+  <button bind:this={ref} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/carousel/carousel-indicator.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const CarouselIndicator: $$__sveltets_2_IsomorphicComponent<CarouselIndicatorProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type CarouselIndicator = InstanceType<typeof CarouselIndicator>;
 export default CarouselIndicator;

package/dist/carousel/carousel-item-group.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface CarouselItemGroupProps
@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getCarouselContext} from './carousel-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: CarouselItemGroupProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: CarouselItemGroupProps = $props();
 
   let carousel = getCarouselContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/carousel/carousel-item-group.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const CarouselItemGroup: $$__sveltets_2_IsomorphicComponent<CarouselItemGroupProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type CarouselItemGroup = InstanceType<typeof CarouselItemGroup>;
 export default CarouselItemGroup;

package/dist/carousel/carousel-item.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/carousel';
 
@@ -14,7 +14,12 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getCarouselContext} from './carousel-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: CarouselItemProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: CarouselItemProps = $props();
 
   let carousel = getCarouselContext();
 
@@ -31,7 +36,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}

package/dist/carousel/carousel-item.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const CarouselItem: $$__sveltets_2_IsomorphicComponent<CarouselItemProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type CarouselItem = InstanceType<typeof CarouselItem>;
 export default CarouselItem;

package/dist/carousel/carousel-next-trigger.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface CarouselNextTriggerProps
@@ -10,7 +10,7 @@
   import {getCarouselContext} from './carousel-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -24,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button bind:this={e} type="button" {...mergedProps}>
+  <button bind:this={ref} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/carousel/carousel-next-trigger.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const CarouselNextTrigger: $$__sveltets_2_IsomorphicComponent<CarouselNextTriggerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type CarouselNextTrigger = InstanceType<typeof CarouselNextTrigger>;
 export default CarouselNextTrigger;

package/dist/carousel/carousel-prev-trigger.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface CarouselPrevTriggerProps
@@ -10,7 +10,7 @@
   import {getCarouselContext} from './carousel-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -24,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button bind:this={e} type="button" {...mergedProps}>
+  <button bind:this={ref} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/carousel/carousel-prev-trigger.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const CarouselPrevTrigger: $$__sveltets_2_IsomorphicComponent<CarouselPrevTriggerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type CarouselPrevTrigger = InstanceType<typeof CarouselPrevTrigger>;
 export default CarouselPrevTrigger;

package/dist/carousel/carousel-root.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateCarouselProps,
@@ -19,7 +19,12 @@
   import {setCarouselContext} from './carousel-context.svelte.js';
   import {createCarousel} from './create-carousel.svelte.js';
 
-  let {this: e, asChild, children, ...props}: CarouselProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: CarouselProps = $props();
 
   let [createCarouselProps, localProps] = $derived(
     createSplitProps<CreateCarouselProps>([
@@ -45,7 +50,7 @@
 {#if asChild}
   {@render asChild(mergedProps, carousel)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(carousel)}
   </div>
 {/if}

package/dist/carousel/carousel-root.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const CarouselRoot: $$__sveltets_2_IsomorphicComponent<CarouselProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type CarouselRoot = InstanceType<typeof CarouselRoot>;
 export default CarouselRoot;

package/dist/carousel/carousel-viewport.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface CarouselViewportProps
@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getCarouselContext} from './carousel-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: CarouselViewportProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: CarouselViewportProps = $props();
 
   let carousel = getCarouselContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/carousel/carousel-viewport.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const CarouselViewport: $$__sveltets_2_IsomorphicComponent<CarouselViewportProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type CarouselViewport = InstanceType<typeof CarouselViewport>;
 export default CarouselViewport;

package/dist/checkbox/checkbox-control.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface CheckboxControlProps
@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getCheckboxContext} from './checkbox-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: CheckboxControlProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: CheckboxControlProps = $props();
 
   let checkbox = getCheckboxContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/checkbox/checkbox-control.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const CheckboxControl: $$__sveltets_2_IsomorphicComponent<CheckboxControlProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type CheckboxControl = InstanceType<typeof CheckboxControl>;
 export default CheckboxControl;

package/dist/checkbox/checkbox-hidden-input.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface CheckboxHiddenInputProps
@@ -9,7 +9,11 @@
   import {mergeProps} from '../merge-props.js';
   import {getCheckboxContext} from './checkbox-context.svelte.js';
 
-  let {this: e, asChild, ...props}: CheckboxHiddenInputProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    ...props
+  }: CheckboxHiddenInputProps = $props();
 
   let checkbox = getCheckboxContext();
 
@@ -19,5 +23,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input bind:this={e} {...mergedProps} />
+  <input bind:this={ref} {...mergedProps} />
 {/if}

package/dist/checkbox/checkbox-hidden-input.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const CheckboxHiddenInput: $$__sveltets_2_IsomorphicComponent<CheckboxHiddenInputProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type CheckboxHiddenInput = InstanceType<typeof CheckboxHiddenInput>;
 export default CheckboxHiddenInput;