ui-ingredients 0.0.45 → 0.0.47

package/dist/editable/preview.svelte

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

package/dist/editable/preview.svelte.d.ts

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

@@ -19,7 +19,7 @@
   import {setEditableContext} from './context.svelte.js';
   import {createEditable} from './create-editable.svelte.js';
 
-  let {asChild, children, ...props}: EditableProps = $props();
+  let {this: e, asChild, children, ...props}: EditableProps = $props();
 
   let [editableProps, localProps] = $derived(
     createSplitProps<CreateEditableProps>([
@@ -62,7 +62,7 @@
 {#if asChild}
   {@render asChild(mergedProps, editable)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(editable)}
   </div>
 {/if}

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

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CreateEditableProps, CreateEditableReturn } from './create-editable.svelte.js';
+export interface EditableProps extends Assign<HtmlIngredientProps<'div', CreateEditableReturn>, CreateEditableProps> {
+}
 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/editable/submit-trigger.svelte

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

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

@@ -3,4 +3,4 @@ export interface Environment {
     getDocument: () => Document;
     getWindow: () => Window & typeof globalThis;
 }
-export declare const getEnvironmentContext: () => Environment, setEnvironmentContext: (context: Environment | (() => Environment)) => void;
+export declare const getEnvironmentContext: () => Environment, setEnvironmentContext: (context: Environment | (() => Environment)) => Environment;

package/dist/environment-provider/root.svelte.d.ts

@@ -1,3 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface EnvironmentProviderProps {
+    rootNode?: ShadowRoot | Document | Node | (() => ShadowRoot | Document | Node);
+    children: Snippet;
+}
 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/field/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateFieldReturn } from './create-field.svelte.js';
-export declare const getFieldContext: () => CreateFieldReturn, setFieldContext: (context: CreateFieldReturn | (() => CreateFieldReturn)) => void;
+export declare const getFieldContext: () => CreateFieldReturn, setFieldContext: (context: CreateFieldReturn | (() => CreateFieldReturn)) => CreateFieldReturn;

package/dist/field/error-text.svelte

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

package/dist/field/error-text.svelte.d.ts

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

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

package/dist/field/helper-text.svelte.d.ts

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

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

package/dist/field/input.svelte.d.ts

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

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

package/dist/field/label.svelte.d.ts

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

@@ -19,7 +19,7 @@
   import {setFieldContext} from './context.svelte.js';
   import {createField} from './create-field.svelte.js';
 
-  let {asChild, children, ...props}: FieldProps = $props();
+  let {this: e, asChild, children, ...props}: FieldProps = $props();
 
   let [fieldProps, localProps] = $derived(
     createSplitProps<CreateFieldProps>([
@@ -42,7 +42,7 @@
 {#if asChild}
   {@render asChild(mergedProps, field)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(field)}
   </div>
 {/if}

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

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CreateFieldProps, CreateFieldReturn } from './create-field.svelte.js';
+export interface FieldProps extends Assign<HtmlIngredientProps<'div', CreateFieldReturn>, CreateFieldProps> {
+}
 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/field/select.svelte

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

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

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

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

package/dist/field/textarea.svelte.d.ts

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

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/file-upload';
 import type { CreateFileUploadReturn } from './create-file-upload.svelte.js';
-export declare const getFileUploadContext: () => CreateFileUploadReturn, setFileUploadContext: (context: CreateFileUploadReturn | (() => CreateFileUploadReturn)) => void;
-export declare const getFileUploadItemPropsContext: () => ItemProps, setFileUploadItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
+export declare const getFileUploadContext: () => CreateFileUploadReturn, setFileUploadContext: (context: CreateFileUploadReturn | (() => CreateFileUploadReturn)) => CreateFileUploadReturn;
+export declare const getFileUploadItemPropsContext: () => ItemProps, setFileUploadItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;

package/dist/file-upload/dropzone.svelte

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

package/dist/file-upload/dropzone.svelte.d.ts

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

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

package/dist/file-upload/hidden-input.svelte.d.ts

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

@@ -12,8 +12,12 @@
     getFileUploadItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: FileUploadItemDeleteTriggerProps =
-    $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: FileUploadItemDeleteTriggerProps = $props();
 
   let fileUpload = getFileUploadContext();
   let itemProps = getFileUploadItemPropsContext();
@@ -26,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/file-upload/item-delete-trigger.svelte.d.ts

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

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

package/dist/file-upload/item-group.svelte.d.ts

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

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

package/dist/file-upload/item-name.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface FileUploadItemNameProps 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/file-upload/item-preview-image.svelte

@@ -12,7 +12,7 @@
     getFileUploadItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, ...props}: FileUploadItemPreviewImageProps = $props();
+  let {this: e, asChild, ...props}: FileUploadItemPreviewImageProps = $props();
 
   let url = $state('');
 
@@ -33,5 +33,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <img {...mergedProps} />
+  <img bind:this={e} {...mergedProps} />
 {/if}

package/dist/file-upload/item-preview-image.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface FileUploadItemPreviewImageProps extends HtmlIngredientProps<'img'> {
+}
 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/file-upload/item-preview.svelte

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

package/dist/file-upload/item-preview.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface FileUploadItemPreviewProps 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/file-upload/item-size-text.svelte

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

package/dist/file-upload/item-size-text.svelte.d.ts

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

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

package/dist/file-upload/item.svelte.d.ts

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

package/dist/file-upload/label.svelte

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

package/dist/file-upload/label.svelte.d.ts

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

@@ -19,7 +19,7 @@
   import {setFileUploadContext} from './context.svelte.js';
   import {createFileUpload} from './create-file-upload.svelte.js';
 
-  let {asChild, children, ...props}: FileUploadProps = $props();
+  let {this: e, asChild, children, ...props}: FileUploadProps = $props();
 
   let [fileUploadProps, localProps] = $derived(
     createSplitProps<CreateFileUploadProps>([
@@ -55,7 +55,7 @@
 {#if asChild}
   {@render asChild(mergedProps, fileUpload)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(fileUpload)}
   </div>
 {/if}

package/dist/file-upload/root.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CreateFileUploadProps, CreateFileUploadReturn } from './create-file-upload.svelte.js';
+export interface FileUploadProps extends Assign<HtmlIngredientProps<'div', CreateFileUploadReturn>, CreateFileUploadProps> {
+}
 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;