ui-ingredients 0.0.45 → 0.0.47

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

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

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CreateSwitchProps, CreateSwitchReturn } from './create-switch.svelte.js';
+export interface SwitchProps extends Assign<HtmlIngredientProps<'label', CreateSwitchReturn>, CreateSwitchProps> {
+}
 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/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/switch/thumb.svelte.d.ts

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

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

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

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CreateTabsProps, CreateTabsReturn } from './create-tabs.svelte.js';
+export interface TabsProps extends Assign<HtmlIngredientProps<'div', CreateTabsReturn>, CreateTabsProps> {
+}
 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/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/tabs/trigger.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { TriggerProps } from '@zag-js/tabs';
+export interface TabsTriggerProps extends Assign<HtmlIngredientProps<'button'>, TriggerProps> {
+}
 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/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/clear-trigger.svelte.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -19,7 +19,7 @@
   import {setTagsInputContext} from './context.svelte.js';
   import {createTagsInput} from './create-tags-input.svelte.js';
 
-  let {asChild, children, ...props}: TagsInputProps = $props();
+  let {this: e, asChild, children, ...props}: TagsInputProps = $props();
 
   let [tagsInputProps, localProps] = $derived(
     createSplitProps<CreateTagsInputProps>([
@@ -63,7 +63,7 @@
 {#if asChild}
   {@render asChild(mergedProps, tagsInput)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(tagsInput)}
   </div>
 {/if}

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

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CreateTagsInputProps, CreateTagsInputReturn } from './create-tags-input.svelte.js';
+export interface TagsInputProps extends Assign<HtmlIngredientProps<'div', CreateTagsInputReturn>, CreateTagsInputProps> {
+}
 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/time-picker/clear-trigger.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimePickerContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: TimePickerClearTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: TimePickerClearTriggerProps = $props();
 
   let timePicker = getTimePickerContext();
 
@@ -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/time-picker/clear-trigger.svelte.d.ts

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

@@ -10,7 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimePickerContext} from './context.svelte.js';
 
-  let {unit, asChild, children, ...props}: TimePickerColumnProps = $props();
+  let {
+    this: e,
+    unit,
+    asChild,
+    children,
+    ...props
+  }: TimePickerColumnProps = $props();
 
   let timePicker = getTimePickerContext();
 
@@ -22,7 +28,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/time-picker/column.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { ColumnProps } from '@zag-js/time-picker';
+export interface TimePickerColumnProps extends Assign<HtmlIngredientProps<'div'>, ColumnProps> {
+}
 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/time-picker/content.svelte

@@ -11,7 +11,7 @@
   import type {Action} from 'svelte/action';
   import {getTimePickerContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: TimePickerContentProps = $props();
+  let {this: e, asChild, children, ...props}: TimePickerContentProps = $props();
 
   let timePicker = getTimePickerContext();
   let presence = getPresenceContext();
@@ -28,7 +28,7 @@
 {#if asChild}
   {@render asChild(presence.ref, mergedProps)}
 {:else}
-  <div use:presence.ref {...mergedProps}>
+  <div bind:this={e} use:presence.ref {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/time-picker/content.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface TimePickerContentProps extends HtmlIngredientProps<'div', never, Action> {
+}
+import type { Action } from 'svelte/action';
 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/time-picker/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateTimePickerReturn } from './create-time-picker.svelte.js';
-export declare const getTimePickerContext: () => CreateTimePickerReturn, setTimePickerContext: (context: CreateTimePickerReturn | (() => CreateTimePickerReturn)) => void;
+export declare const getTimePickerContext: () => CreateTimePickerReturn, setTimePickerContext: (context: CreateTimePickerReturn | (() => CreateTimePickerReturn)) => CreateTimePickerReturn;