ui-ingredients 0.0.45 → 0.0.47

package/dist/slider/root.svelte

@@ -19,7 +19,7 @@
   import {setSliderContext} from './context.svelte.js';
   import {createSlider} from './create-slider.svelte.js';
 
-  let {asChild, children, ...props}: SliderProps = $props();
+  let {this: e, asChild, children, ...props}: SliderProps = $props();
 
   let [sliderProps, localProps] = $derived(
     createSplitProps<CreateSliderProps>([
@@ -58,7 +58,7 @@
 {#if asChild}
   {@render asChild(mergedProps, slider)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(slider)}
   </div>
 {/if}

package/dist/slider/root.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CreateSliderProps, CreateSliderReturn } from './create-slider.svelte.js';
+export interface SliderProps extends Assign<HtmlIngredientProps<'div', CreateSliderReturn>, CreateSliderProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/slider/thumb.svelte

@@ -14,7 +14,7 @@
     setSliderThumbPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: SliderThumbProps = $props();
+  let {this: e, asChild, children, ...props}: SliderThumbProps = $props();
 
   let slider = getSliderContext();
 
@@ -32,7 +32,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/slider/thumb.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { ThumbProps } from '@zag-js/slider';
+export interface SliderThumbProps extends Assign<HtmlIngredientProps<'div'>, ThumbProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/slider/track.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getSliderContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SliderTrackProps = $props();
+  let {this: e, asChild, children, ...props}: SliderTrackProps = $props();
 
   let slider = getSliderContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/slider/track.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SliderTrackProps extends HtmlIngredientProps<'div'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/slider/value-text.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getSliderContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SliderValueTextProps = $props();
+  let {this: e, asChild, children, ...props}: SliderValueTextProps = $props();
 
   let slider = getSliderContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {#if children}
       {@render children()}
     {:else}

package/dist/slider/value-text.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SliderValueTextProps extends HtmlIngredientProps<'span'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/splitter/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateSplitterReturn } from './create-splitter.svelte.js';
-export declare const getSplitterContext: () => CreateSplitterReturn, setSplitterContext: (context: CreateSplitterReturn | (() => CreateSplitterReturn)) => void;
+export declare const getSplitterContext: () => CreateSplitterReturn, setSplitterContext: (context: CreateSplitterReturn | (() => CreateSplitterReturn)) => CreateSplitterReturn;

package/dist/splitter/panel.svelte

@@ -11,7 +11,7 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getSplitterContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SplitterPanelProps = $props();
+  let {this: e, asChild, children, ...props}: SplitterPanelProps = $props();
 
   let splitter = getSplitterContext();
 
@@ -27,7 +27,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/splitter/panel.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { PanelProps } from '@zag-js/splitter';
+export interface SplitterPanelProps extends Assign<HtmlIngredientProps<'div'>, PanelProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/splitter/resize-trigger.svelte

@@ -23,7 +23,12 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getSplitterContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SplitterResizeTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SplitterResizeTriggerProps = $props();
 
   let splitter = getSplitterContext();
 
@@ -41,7 +46,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}

package/dist/splitter/resize-trigger.svelte.d.ts

@@ -1,3 +1,15 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { ResizeTriggerProps } from '@zag-js/splitter';
+interface ResizeTriggerState {
+    min: number | undefined;
+    max: number | undefined;
+    value: number;
+    focused: boolean;
+    disabled: boolean;
+    panelIds: string[];
+}
+export interface SplitterResizeTriggerProps extends Assign<HtmlIngredientProps<'div', ResizeTriggerState>, ResizeTriggerProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/splitter/root.svelte

@@ -19,7 +19,7 @@
   import {setSplitterContext} from './context.svelte.js';
   import {createSplitter} from './create-splitter.svelte.js';
 
-  let {asChild, children, ...props}: SplitterProps = $props();
+  let {this: e, asChild, children, ...props}: SplitterProps = $props();
 
   let [splitterProps, localProps] = $derived(
     createSplitProps<CreateSplitterProps>([
@@ -42,7 +42,7 @@
 {#if asChild}
   {@render asChild(mergedProps, splitter)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(splitter)}
   </div>
 {/if}

package/dist/splitter/root.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CreateSplitterProps, CreateSplitterReturn } from './create-splitter.svelte.js';
+export interface SplitterProps extends Assign<HtmlIngredientProps<'div', CreateSplitterReturn>, CreateSplitterProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/steps/completed-content.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getStepsContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: StepsCompletedContentProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: StepsCompletedContentProps = $props();
 
   let steps = getStepsContext();
 
@@ -26,7 +31,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/steps/completed-content.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface StepsCompletedContentProps extends HtmlIngredientProps<'div'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/steps/content.svelte

@@ -10,7 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {getStepsContext} from './context.svelte.js';
 
-  let {index, asChild, children, ...props}: StepsContentProps = $props();
+  let {
+    this: e,
+    index,
+    asChild,
+    children,
+    ...props
+  }: StepsContentProps = $props();
 
   let steps = getStepsContext();
 
@@ -20,7 +26,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/steps/content.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { ItemProps } from '@zag-js/steps';
+export interface StepsContentProps extends Assign<HtmlIngredientProps<'div'>, ItemProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/steps/context.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/steps';
 import type { CreateStepsReturn } from './create-steps.svelte.js';
-export declare const getStepsContext: () => CreateStepsReturn, setStepsContext: (context: CreateStepsReturn | (() => CreateStepsReturn)) => void;
-export declare const getStepsItemPropsContext: () => ItemProps, setStepsItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
+export declare const getStepsContext: () => CreateStepsReturn, setStepsContext: (context: CreateStepsReturn | (() => CreateStepsReturn)) => CreateStepsReturn;
+export declare const getStepsItemPropsContext: () => ItemProps, setStepsItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;

package/dist/steps/indicator.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getStepsContext, getStepsItemPropsContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: StepsIndicatorProps = $props();
+  let {this: e, asChild, children, ...props}: StepsIndicatorProps = $props();
 
   let steps = getStepsContext();
 
@@ -22,7 +22,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/steps/indicator.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface StepsIndicatorProps extends HtmlIngredientProps<'span'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/steps/item.svelte

@@ -11,7 +11,7 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getStepsContext, setStepsItemPropsContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: StepsItemProps = $props();
+  let {this: e, asChild, children, ...props}: StepsItemProps = $props();
 
   let steps = getStepsContext();
 
@@ -31,7 +31,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}

package/dist/steps/item.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { ItemProps, ItemState } from '@zag-js/steps';
+export interface StepsItemProps extends Assign<HtmlIngredientProps<'div', ItemState>, ItemProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/steps/list.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getStepsContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: StepsListProps = $props();
+  let {this: e, asChild, children, ...props}: StepsListProps = $props();
 
   let steps = getStepsContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/steps/list.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface StepsListProps extends HtmlIngredientProps<'div'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/steps/next-trigger.svelte

@@ -9,7 +9,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getStepsContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: StepsNextTriggerProps = $props();
+  let {this: e, asChild, children, ...props}: StepsNextTriggerProps = $props();
 
   let steps = getStepsContext();
 
@@ -19,7 +19,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface StepsNextTriggerProps extends HtmlIngredientProps<'button'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/steps/prev-trigger.svelte

@@ -9,7 +9,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getStepsContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: StepsPrevTriggerProps = $props();
+  let {this: e, asChild, children, ...props}: StepsPrevTriggerProps = $props();
 
   let steps = getStepsContext();
 
@@ -19,7 +19,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface StepsPrevTriggerProps extends HtmlIngredientProps<'button'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/steps/progress.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getStepsContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: StepsProgressProps = $props();
+  let {this: e, asChild, children, ...props}: StepsProgressProps = $props();
 
   let steps = getStepsContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/steps/progress.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface StepsProgressProps extends HtmlIngredientProps<'div'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/steps/root.svelte

@@ -19,7 +19,7 @@
   import {setStepsContext} from './context.svelte.js';
   import {createSteps} from './create-steps.svelte.js';
 
-  let {asChild, children, ...props}: StepsProps = $props();
+  let {this: e, asChild, children, ...props}: StepsProps = $props();
 
   let [stepsProps, localProps] = $derived(
     createSplitProps<CreateStepsProps>([
@@ -44,7 +44,7 @@
 {#if asChild}
   {@render asChild(mergedProps, steps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(steps)}
   </div>
 {/if}

package/dist/steps/root.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CreateStepsProps, CreateStepsReturn } from './create-steps.svelte.js';
+export interface StepsProps extends Assign<HtmlIngredientProps<'div', CreateStepsReturn>, CreateStepsProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/steps/separator.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getStepsContext, getStepsItemPropsContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: StepsSeparatorProps = $props();
+  let {this: e, asChild, children, ...props}: StepsSeparatorProps = $props();
 
   let steps = getStepsContext();
   let itemProps = getStepsItemPropsContext();
@@ -21,7 +21,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/steps/separator.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface StepsSeparatorProps extends HtmlIngredientProps<'span'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/steps/trigger.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getStepsContext, getStepsItemPropsContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: StepsTriggerProps = $props();
+  let {this: e, asChild, children, ...props}: StepsTriggerProps = $props();
 
   let steps = getStepsContext();
   let itemProps = getStepsItemPropsContext();
@@ -21,7 +21,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/steps/trigger.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface StepsTriggerProps extends HtmlIngredientProps<'button'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/switch/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateSwitchReturn } from './create-switch.svelte.js';
-export declare const getSwitchContext: () => CreateSwitchReturn, setSwitchContext: (context: CreateSwitchReturn | (() => CreateSwitchReturn)) => void;
+export declare const getSwitchContext: () => CreateSwitchReturn, setSwitchContext: (context: CreateSwitchReturn | (() => CreateSwitchReturn)) => CreateSwitchReturn;

package/dist/switch/control.svelte

@@ -8,17 +8,17 @@
   import {mergeProps} from '../merge-props.js';
   import {getSwitchContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SwitchControlProps = $props();
+  let {this: e, asChild, children, ...props}: SwitchControlProps = $props();
 
-  let switch$ = getSwitchContext();
+  let switch_ = getSwitchContext();
 
-  let mergedProps = $derived(mergeProps(props, switch$.getControlProps()));
+  let mergedProps = $derived(mergeProps(props, switch_.getControlProps()));
 </script>
 
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/switch/control.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SwitchControlProps extends HtmlIngredientProps<'div'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/switch/create-switch.svelte.d.ts

@@ -1,7 +1,7 @@
-import * as switch$ from '@zag-js/switch';
-export interface CreateSwitchProps extends Omit<switch$.Context, 'id' | 'dir' | 'getRootNode'> {
+import * as switch_ from '@zag-js/switch';
+export interface CreateSwitchProps extends Omit<switch_.Context, 'id' | 'dir' | 'getRootNode'> {
     id?: string | null;
 }
-export interface CreateSwitchReturn extends switch$.Api {
+export interface CreateSwitchReturn extends switch_.Api {
 }
 export declare function createSwitch(props: CreateSwitchProps): any;

package/dist/switch/create-switch.svelte.js

@@ -2,7 +2,7 @@ import { getEnvironmentContext } from '../environment-provider/context.svelte.js
 import { getFieldContext } from '../field/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import * as switch$ from '@zag-js/switch';
+import * as switch_ from '@zag-js/switch';
 import { uid } from 'uid';
 export function createSwitch(props) {
     const field = getFieldContext();
@@ -23,9 +23,9 @@ export function createSwitch(props) {
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
     }));
-    const [state, send] = useMachine(switch$.machine(context), { context });
+    const [state, send] = useMachine(switch_.machine(context), { context });
     return reflect(() => {
-        const o = switch$.connect(state, send, normalizeProps);
+        const o = switch_.connect(state, send, normalizeProps);
         return {
             ...o,
             getHiddenInputProps() {

package/dist/switch/hidden-input.svelte

@@ -9,15 +9,15 @@
   import {mergeProps} from '../merge-props.js';
   import {getSwitchContext} from './context.svelte.js';
 
-  let {asChild, ...props}: SwitchHiddenInputProps = $props();
+  let {this: e, asChild, ...props}: SwitchHiddenInputProps = $props();
 
-  let switch$ = getSwitchContext();
+  let switch_ = getSwitchContext();
 
-  let mergedProps = $derived(mergeProps(props, switch$.getHiddenInputProps()));
+  let mergedProps = $derived(mergeProps(props, switch_.getHiddenInputProps()));
 </script>
 
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input bind:this={e} {...mergedProps} />
 {/if}

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SwitchHiddenInputProps extends HtmlIngredientProps<'input'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;