ui-ingredients 0.0.45 → 0.0.46

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/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/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/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/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/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/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/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/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/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/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/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/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/label.svelte

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

package/dist/switch/root.svelte

@@ -19,7 +19,7 @@
   import {setSwitchContext} from './context.svelte.js';
   import {createSwitch} from './create-switch.svelte.js';
 
-  let {asChild, children, ...props}: SwitchProps = $props();
+  let {this: e, asChild, children, ...props}: SwitchProps = $props();
 
   let [switchProps, localProps] = $derived(
     createSplitProps<CreateSwitchProps>([
@@ -38,17 +38,17 @@
     ])(props),
   );
 
-  let switch$ = createSwitch(reflect(() => switchProps));
+  let switch_ = createSwitch(reflect(() => switchProps));
 
-  let mergedProps = $derived(mergeProps(localProps, switch$.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, switch_.getRootProps()));
 
-  setSwitchContext(switch$);
+  setSwitchContext(switch_);
 </script>
 
 {#if asChild}
-  {@render asChild(mergedProps, switch$)}
+  {@render asChild(mergedProps, switch_)}
 {:else}
-  <label {...mergedProps}>
-    {@render children?.(switch$)}
+  <label bind:this={e} {...mergedProps}>
+    {@render children?.(switch_)}
   </label>
 {/if}

package/dist/switch/thumb.svelte

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

package/dist/tabs/content.svelte

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

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

@@ -1,2 +1,2 @@
 import type { CreateTabsReturn } from './create-tabs.svelte.js';
-export declare const getTabsContext: () => CreateTabsReturn, setTabsContext: (context: CreateTabsReturn | (() => CreateTabsReturn)) => void;
+export declare const getTabsContext: () => CreateTabsReturn, setTabsContext: (context: CreateTabsReturn | (() => CreateTabsReturn)) => CreateTabsReturn;

package/dist/tabs/list.svelte

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

package/dist/tabs/root.svelte

@@ -19,7 +19,7 @@
   import {setTabsContext} from './context.svelte.js';
   import {createTabs} from './create-tabs.svelte.js';
 
-  let {asChild, children, ...props}: TabsProps = $props();
+  let {this: e, asChild, children, ...props}: TabsProps = $props();
 
   let [tabsProps, localProps] = $derived(
     createSplitProps<CreateTabsProps>([
@@ -46,7 +46,7 @@
 {#if asChild}
   {@render asChild(mergedProps, tabs)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(tabs)}
   </div>
 {/if}

package/dist/tabs/trigger.svelte

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

package/dist/tags-input/clear-trigger.svelte

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

package/dist/tags-input/context.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/tags-input';
 import type { CreateTagsInputReturn } from './create-tags-input.svelte.js';
-export declare const getTagsInputContext: () => CreateTagsInputReturn, setTagsInputContext: (context: CreateTagsInputReturn | (() => CreateTagsInputReturn)) => void;
-export declare const getTagsInputItemPropsContext: () => ItemProps, setTagsInputItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
+export declare const getTagsInputContext: () => CreateTagsInputReturn, setTagsInputContext: (context: CreateTagsInputReturn | (() => CreateTagsInputReturn)) => CreateTagsInputReturn;
+export declare const getTagsInputItemPropsContext: () => ItemProps, setTagsInputItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;

package/dist/tags-input/control.svelte

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

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

@@ -9,7 +9,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getTagsInputContext} from './context.svelte.js';
 
-  let {asChild, ...props}: TagsInputHiddenInputProps = $props();
+  let {this: e, asChild, ...props}: TagsInputHiddenInputProps = $props();
 
   let tagsInput = getTagsInputContext();
 
@@ -21,5 +21,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input bind:this={e} {...mergedProps} />
 {/if}

package/dist/tags-input/input.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getTagsInputContext} from './context.svelte.js';
 
-  let {asChild, ...props}: TagsInputInputProps = $props();
+  let {this: e, asChild, ...props}: TagsInputInputProps = $props();
 
   let tagsInput = getTagsInputContext();
 
@@ -18,5 +18,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input bind:this={e} {...mergedProps} />
 {/if}

package/dist/tags-input/item-delete-trigger.svelte

@@ -12,7 +12,12 @@
     getTagsInputItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: TagsInputItemDeleteTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: TagsInputItemDeleteTriggerProps = $props();
 
   let tagsInput = getTagsInputContext();
   let itemProps = getTagsInputItemPropsContext();
@@ -25,7 +30,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/tags-input/item-input.svelte

@@ -12,7 +12,7 @@
     getTagsInputItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, ...props}: TagsInputItemInputProps = $props();
+  let {this: e, asChild, ...props}: TagsInputItemInputProps = $props();
 
   let tagsInput = getTagsInputContext();
   let itemProps = getTagsInputItemPropsContext();
@@ -25,5 +25,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input bind:this={e} {...mergedProps} />
 {/if}

package/dist/tags-input/item-preview.svelte

@@ -12,7 +12,12 @@
     getTagsInputItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: TagsInputItemPreviewProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: TagsInputItemPreviewProps = $props();
 
   let tagsInput = getTagsInputContext();
   let itemProps = getTagsInputItemPropsContext();
@@ -25,7 +30,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/tags-input/item-text.svelte

@@ -11,7 +11,7 @@
     getTagsInputItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: TagsInputItemTextProps = $props();
+  let {this: e, asChild, children, ...props}: TagsInputItemTextProps = $props();
 
   let tagsInput = getTagsInputContext();
   let itemProps = getTagsInputItemPropsContext();
@@ -24,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/tags-input/item.svelte

@@ -14,7 +14,7 @@
     setTagsInputItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: TagsInputItemProps = $props();
+  let {this: e, asChild, children, ...props}: TagsInputItemProps = $props();
 
   let tagsInput = getTagsInputContext();
 
@@ -34,7 +34,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}