ui-ingredients 0.0.45 → 0.0.47

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

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { ItemProps, ItemState } from '@zag-js/select';
+export interface SelectItemProps 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/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/label.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SelectLabelProps extends HtmlIngredientProps<'label'> {
+}
 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/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/list.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SelectListProps 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/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/positioner.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SelectPositionerProps 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/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/root.svelte.d.ts

@@ -1,5 +1,10 @@
+import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CreateSelectProps, CreateSelectReturn } from './create-select.svelte.js';
+export interface SelectProps<T> extends Assign<HtmlIngredientProps<'div', CreateSelectReturn>, CreateSelectProps<T>>, PresenceStrategyProps {
+}
 declare class __sveltets_Render<T> {
-    props(): SelectProps<T_1>;
+    props(): SelectProps<T>;
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };

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/trigger.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SelectTriggerProps 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/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/select/value-text.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SelectValueTextProps 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/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/clear-trigger.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SignaturePadClearTriggerProps 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/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/control.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SignaturePadControlProps 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/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/current-segment-path.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SignaturePadCurrentSegmentPathProps extends HtmlIngredientProps<'path'> {
+}
 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/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/guide.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SignaturePadGuideProps 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/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/hidden-input.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { HiddenInputProps } from '@zag-js/signature-pad';
+export interface SignaturePadHiddenInputProps extends Assign<HtmlIngredientProps<'input'>, HiddenInputProps> {
+}
 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/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/label.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SignaturePadLabelProps extends HtmlIngredientProps<'label'> {
+}
 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/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/root.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CreateSignaturePadProps, CreateSignaturePadReturn } from './create-signature-pad.svelte.js';
+export interface SignaturePadProps extends Assign<HtmlIngredientProps<'div', CreateSignaturePadReturn>, CreateSignaturePadProps> {
+}
 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/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-path.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { SegmentPathProps } from '@zag-js/signature-pad';
+export interface SignaturePadSegmentPathProps extends Assign<HtmlIngredientProps<'path'>, SegmentPathProps> {
+}
 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/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/signature-pad/segment.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SignaturePadSegmentProps extends HtmlIngredientProps<'svg'> {
+}
 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/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/control.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SliderControlProps 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/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/hidden-input.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SliderHiddenInputProps 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;

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SliderLabelProps extends HtmlIngredientProps<'label'> {
+}
 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/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-group.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SliderMarkerGroupProps 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/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/marker.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { MarkerProps } from '@zag-js/slider';
+export interface SliderMarkerProps extends Assign<HtmlIngredientProps<'div'>, MarkerProps> {
+}
 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/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/range.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SliderRangeProps 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;