ui-ingredients 0.0.45 → 0.0.47

package/dist/date-picker/table.svelte

@@ -14,8 +14,14 @@
     setDatePickerTablePropsContext,
   } from './context.svelte.js';
 
-  let {id, columns, asChild, children, ...props}: DatePickerTableProps =
-    $props();
+  let {
+    id,
+    columns,
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: DatePickerTableProps = $props();
 
   let datePicker = getDatePickerContext();
   let viewProps = getDatePickerViewPropsContext();
@@ -31,7 +37,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <table {...mergedProps}>
+  <table bind:this={e} {...mergedProps}>
     {@render children?.()}
   </table>
 {/if}

package/dist/date-picker/table.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { TableProps } from '@zag-js/date-picker';
+export interface DatePickerTableProps extends Assign<HtmlIngredientProps<'table'>, Omit<TableProps, 'view'>> {
+}
 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/date-picker/trigger.svelte

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

package/dist/date-picker/trigger.svelte.d.ts

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

@@ -12,7 +12,12 @@
     getDatePickerViewPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: DatePickerViewControlProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: DatePickerViewControlProps = $props();
 
   let datePicker = getDatePickerContext();
   let viewProps = getDatePickerViewPropsContext();
@@ -25,7 +30,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/date-picker/view-control.svelte.d.ts

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

@@ -12,7 +12,12 @@
     getDatePickerViewPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: DatePickerViewTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: DatePickerViewTriggerProps = $props();
 
   let datePicker = getDatePickerContext();
   let viewProps = getDatePickerViewPropsContext();
@@ -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/date-picker/view-trigger.svelte.d.ts

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

@@ -15,6 +15,7 @@
 
   let {
     view = 'day',
+    this: e,
     asChild,
     children,
     ...props
@@ -34,7 +35,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/date-picker/view.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { ViewProps } from '@zag-js/date-picker';
+export interface DatePickerViewProps extends Assign<HtmlIngredientProps<'div'>, ViewProps> {
+}
 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/date-picker/year-select.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getDatePickerContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: DatePickerYearSelectProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: DatePickerYearSelectProps = $props();
 
   let datePicker = getDatePickerContext();
 
@@ -36,7 +41,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <select {...mergedProps}>
+  <select bind:this={e} {...mergedProps}>
     {#if children}
       {@render children()}
     {:else}

package/dist/date-picker/year-select.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface DatePickerYearSelectProps 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/date-picker/year-table-cell-trigger.svelte

@@ -12,8 +12,12 @@
     getDatePickerTableCellPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: DatePickerYearTableCellTriggerProps =
-    $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: DatePickerYearTableCellTriggerProps = $props();
 
   let datePicker = getDatePickerContext();
   let tableCellProps = getDatePickerTableCellPropsContext();
@@ -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/date-picker/year-table-cell-trigger.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface DatePickerYearTableCellTriggerProps 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/date-picker/year-table-cell.svelte

@@ -14,7 +14,12 @@
     setDatePickerTableCellPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: DatePickerYearTableCellProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: DatePickerYearTableCellProps = $props();
 
   let datePicker = getDatePickerContext();
 
@@ -36,7 +41,7 @@
 {#if asChild}
   {@render asChild(mergedProps, tableCellState)}
 {:else}
-  <td {...mergedProps}>
+  <td bind:this={e} {...mergedProps}>
     {@render children?.(tableCellState)}
   </td>
 {/if}

package/dist/date-picker/year-table-cell.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { TableCellProps, TableCellState } from '@zag-js/date-picker';
+export interface DatePickerYearTableCellProps extends Assign<HtmlIngredientProps<'td', TableCellState>, TableCellProps> {
+}
 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/dialog/backdrop.svelte

@@ -13,7 +13,7 @@
   import {reflect} from '@zag-js/svelte';
   import {getDialogContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: DialogBackdropProps = $props();
+  let {this: e, asChild, children, ...props}: DialogBackdropProps = $props();
 
   let dialog = getDialogContext();
   let presenceStrategyProps = getPresenceStrategyPropsContext();
@@ -33,7 +33,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/dialog/backdrop.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { HtmlIngredientProps } from '../types.js';
+import type { Action } from 'svelte/action';
+export interface DialogBackdropProps extends HtmlIngredientProps<'div', never, 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/dialog/close-trigger.svelte

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

package/dist/dialog/close-trigger.svelte.d.ts

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

@@ -11,7 +11,7 @@
   import {getPresenceContext} from '../presence/context.svelte.js';
   import {getDialogContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: DialogContentProps = $props();
+  let {this: e, asChild, children, ...props}: DialogContentProps = $props();
 
   let dialog = getDialogContext();
   let presence = getPresenceContext();
@@ -25,7 +25,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/dialog/content.svelte.d.ts

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

@@ -1,2 +1,2 @@
 import type { CreateDialogReturn } from './create-dialog.svelte.js';
-export declare const getDialogContext: () => CreateDialogReturn, setDialogContext: (context: CreateDialogReturn | (() => CreateDialogReturn)) => void;
+export declare const getDialogContext: () => CreateDialogReturn, setDialogContext: (context: CreateDialogReturn | (() => CreateDialogReturn)) => CreateDialogReturn;

package/dist/dialog/description.svelte

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

package/dist/dialog/description.svelte.d.ts

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

@@ -9,7 +9,7 @@
   import {getPresenceContext} from '../presence/context.svelte.js';
   import {getDialogContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: DialogPositionerProps = $props();
+  let {this: e, asChild, children, ...props}: DialogPositionerProps = $props();
 
   let dialog = getDialogContext();
   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/dialog/positioner.svelte.d.ts

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

@@ -1,3 +1,9 @@
+import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
+import type { Snippet } from 'svelte';
+import type { CreateDialogProps, CreateDialogReturn } from './create-dialog.svelte.js';
+export interface DialogProps extends CreateDialogProps, PresenceStrategyProps {
+    children?: Snippet<[CreateDialogReturn]>;
+}
 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/dialog/title.svelte

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

package/dist/dialog/title.svelte.d.ts

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

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

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

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

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

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

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

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

@@ -1,2 +1,2 @@
 import type { CreateEditableReturn } from './create-editable.svelte.js';
-export declare const getEditableContext: () => CreateEditableReturn, setEditableContext: (context: CreateEditableReturn | (() => CreateEditableReturn)) => void;
+export declare const getEditableContext: () => CreateEditableReturn, setEditableContext: (context: CreateEditableReturn | (() => CreateEditableReturn)) => CreateEditableReturn;

package/dist/editable/control.svelte

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

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

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

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

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

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

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

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

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

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

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