ui-ingredients 0.0.45 → 0.0.46

package/dist/select/item-indicator.svelte

@@ -12,7 +12,12 @@
     getSelectItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: SelectItemIndicatorProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SelectItemIndicatorProps = $props();
 
   let select = getSelectContext();
   let itemProps = getSelectItemPropsContext();
@@ -25,7 +30,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/select/item-text.svelte

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

package/dist/select/item.svelte

@@ -14,7 +14,7 @@
     setSelectItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: SelectItemProps = $props();
+  let {this: e, asChild, children, ...props}: SelectItemProps = $props();
 
   let select = getSelectContext();
 
@@ -33,7 +33,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}

package/dist/select/label.svelte

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

package/dist/select/list.svelte

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

package/dist/select/positioner.svelte

@@ -9,7 +9,7 @@
   import {getPresenceContext} from '../presence/context.svelte.js';
   import {getSelectContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SelectPositionerProps = $props();
+  let {this: e, asChild, children, ...props}: SelectPositionerProps = $props();
 
   let select = getSelectContext();
   let presence = getPresenceContext();
@@ -23,7 +23,7 @@
   {#if asChild}
     {@render asChild(mergedProps)}
   {:else}
-    <div {...mergedProps}>
+    <div bind:this={e} {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

package/dist/select/root.svelte

@@ -23,7 +23,7 @@
   import {setSelectContext} from './context.svelte.js';
   import {createSelect} from './create-select.svelte.js';
 
-  let {asChild, children, ...props}: SelectProps<T> = $props();
+  let {this: e, asChild, children, ...props}: SelectProps<T> = $props();
 
   let [selectProps, rest] = $derived(
     createSplitProps<CreateSelectProps<T>>([
@@ -79,7 +79,7 @@
 {#if asChild}
   {@render asChild(mergedProps, select)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(select)}
   </div>
 {/if}

package/dist/select/trigger.svelte

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

package/dist/select/value-text.svelte

@@ -8,8 +8,13 @@
   import {mergeProps} from '../merge-props.js';
   import {getSelectContext} from './context.svelte.js';
 
-  let {asChild, children, placeholder, ...props}: SelectValueTextProps =
-    $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    placeholder,
+    ...props
+  }: SelectValueTextProps = $props();
 
   let select = getSelectContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {#if children}
       {@render children?.()}
     {:else if select.value.length}

package/dist/signature-pad/clear-trigger.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSignaturePadContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SignaturePadClearTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SignaturePadClearTriggerProps = $props();
 
   let signaturePad = getSignaturePadContext();
 
@@ -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/signature-pad/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateSignaturePadReturn } from './create-signature-pad.svelte.js';
-export declare const getSignaturePadContext: () => CreateSignaturePadReturn, setSignaturePadContext: (context: CreateSignaturePadReturn | (() => CreateSignaturePadReturn)) => void;
+export declare const getSignaturePadContext: () => CreateSignaturePadReturn, setSignaturePadContext: (context: CreateSignaturePadReturn | (() => CreateSignaturePadReturn)) => CreateSignaturePadReturn;

package/dist/signature-pad/control.svelte

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

package/dist/signature-pad/current-segment-path.svelte

@@ -9,8 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSignaturePadContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SignaturePadCurrentSegmentPathProps =
-    $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SignaturePadCurrentSegmentPathProps = $props();
 
   let signaturePad = getSignaturePadContext();
 
@@ -28,7 +32,7 @@
   {#if asChild}
     {@render asChild(mergedProps)}
   {:else}
-    <path {...mergedProps}>
+    <path bind:this={e} {...mergedProps}>
       {@render children?.()}
     </path>
   {/if}

package/dist/signature-pad/guide.svelte

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

package/dist/signature-pad/hidden-input.svelte

@@ -10,7 +10,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSignaturePadContext} from './context.svelte.js';
 
-  let {value, asChild, ...props}: SignaturePadHiddenInputProps = $props();
+  let {
+    this: e,
+    value,
+    asChild,
+    ...props
+  }: SignaturePadHiddenInputProps = $props();
 
   let signaturePad = getSignaturePadContext();
 
@@ -22,5 +27,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input bind:this={e} {...mergedProps} />
 {/if}

package/dist/signature-pad/label.svelte

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

package/dist/signature-pad/root.svelte

@@ -19,7 +19,7 @@
   import {setSignaturePadContext} from './context.svelte.js';
   import {createSignaturePad} from './create-signature-pad.svelte.js';
 
-  let {asChild, children, ...props}: SignaturePadProps = $props();
+  let {this: e, asChild, children, ...props}: SignaturePadProps = $props();
 
   let [signaturePadProps, localProps] = $derived(
     createSplitProps<CreateSignaturePadProps>([
@@ -48,7 +48,7 @@
 {#if asChild}
   {@render asChild(mergedProps, signaturePad)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(signaturePad)}
   </div>
 {/if}

package/dist/signature-pad/segment-path.svelte

@@ -10,8 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {getSignaturePadContext} from './context.svelte.js';
 
-  let {path, asChild, children, ...props}: SignaturePadSegmentPathProps =
-    $props();
+  let {
+    this: e,
+    path,
+    asChild,
+    children,
+    ...props
+  }: SignaturePadSegmentPathProps = $props();
 
   let signaturePad = getSignaturePadContext();
 
@@ -23,7 +28,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <path {...mergedProps}>
+  <path bind:this={e} {...mergedProps}>
     {@render children?.()}
   </path>
 {/if}

package/dist/signature-pad/segment.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSignaturePadContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SignaturePadSegmentProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SignaturePadSegmentProps = $props();
 
   let signaturePad = getSignaturePadContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <svg {...mergedProps}>
+  <svg bind:this={e} {...mergedProps}>
     {@render children?.()}
   </svg>
 {/if}

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

@@ -1,4 +1,4 @@
 import type { ThumbProps } from '@zag-js/slider';
 import type { CreateSliderReturn } from './create-slider.svelte.js';
-export declare const getSliderContext: () => CreateSliderReturn, setSliderContext: (context: CreateSliderReturn | (() => CreateSliderReturn)) => void;
-export declare const getSliderThumbPropsContext: () => ThumbProps, setSliderThumbPropsContext: (context: ThumbProps | (() => ThumbProps)) => void;
+export declare const getSliderContext: () => CreateSliderReturn, setSliderContext: (context: CreateSliderReturn | (() => CreateSliderReturn)) => CreateSliderReturn;
+export declare const getSliderThumbPropsContext: () => ThumbProps, setSliderThumbPropsContext: (context: ThumbProps | (() => ThumbProps)) => ThumbProps;

package/dist/slider/control.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getSliderContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SliderControlProps = $props();
+  let {this: e, asChild, children, ...props}: SliderControlProps = $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/hidden-input.svelte

@@ -12,7 +12,7 @@
     getSliderThumbPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, ...props}: SliderHiddenInputProps = $props();
+  let {this: e, asChild, ...props}: SliderHiddenInputProps = $props();
 
   let slider = getSliderContext();
   let thumbProps = getSliderThumbPropsContext();
@@ -25,5 +25,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input bind:this={e} {...mergedProps} />
 {/if}

package/dist/slider/label.svelte

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

package/dist/slider/marker-group.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getSliderContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SliderMarkerGroupProps = $props();
+  let {this: e, asChild, children, ...props}: SliderMarkerGroupProps = $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/marker.svelte

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

package/dist/slider/range.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getSliderContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SliderRangeProps = $props();
+  let {this: e, asChild, children, ...props}: SliderRangeProps = $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/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/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/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/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/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/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/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}