ui-ingredients 0.0.62 → 0.0.64

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

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TagsInputItemText: $$__sveltets_2_IsomorphicComponent<TagsInputItemTextProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type TagsInputItemText = InstanceType<typeof TagsInputItemText>;
 export default TagsInputItemText;

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

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/tags-input';
 
@@ -17,7 +17,12 @@
     setTagsInputItemPropsContext,
   } from './tags-input-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: TagsInputItemProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: TagsInputItemProps = $props();
 
   let tagsInput = getTagsInputContext();
 
@@ -37,7 +42,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}

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

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TagsInputItem: $$__sveltets_2_IsomorphicComponent<TagsInputItemProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type TagsInputItem = InstanceType<typeof TagsInputItem>;
 export default TagsInputItem;

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

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface TagsInputLabelProps
@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getTagsInputContext} from './tags-input-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: TagsInputLabelProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: TagsInputLabelProps = $props();
 
   let tagsInput = getTagsInputContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <label bind:this={e} {...mergedProps}>
+  <label bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </label>
 {/if}

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

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TagsInputLabel: $$__sveltets_2_IsomorphicComponent<TagsInputLabelProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type TagsInputLabel = InstanceType<typeof TagsInputLabel>;
 export default TagsInputLabel;

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

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateTagsInputProps,
@@ -19,7 +19,12 @@
   import {createTagsInput} from './create-tags-input.svelte.js';
   import {setTagsInputContext} from './tags-input-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: TagsInputProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: TagsInputProps = $props();
 
   let [createTagsInputProps, localProps] = $derived(
     createSplitProps<CreateTagsInputProps>([
@@ -63,7 +68,7 @@
 {#if asChild}
   {@render asChild(mergedProps, tagsInput)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(tagsInput)}
   </div>
 {/if}

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

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TagsInputRoot: $$__sveltets_2_IsomorphicComponent<TagsInputProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type TagsInputRoot = InstanceType<typeof TagsInputRoot>;
 export default TagsInputRoot;

package/dist/time-picker/time-picker-clear-trigger.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface TimePickerClearTriggerProps
@@ -10,7 +10,7 @@
   import {getTimePickerContext} from './time-picker-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -26,7 +26,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button bind:this={e} type="button" {...mergedProps}>
+  <button bind:this={ref} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/time-picker/time-picker-clear-trigger.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TimePickerClearTrigger: $$__sveltets_2_IsomorphicComponent<TimePickerClearTriggerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type TimePickerClearTrigger = InstanceType<typeof TimePickerClearTrigger>;
 export default TimePickerClearTrigger;

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

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ColumnProps} from '@zag-js/time-picker';
 
@@ -11,7 +11,7 @@
   import {getTimePickerContext} from './time-picker-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     unit,
     asChild,
     children,
@@ -28,7 +28,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

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

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TimePickerColumn: $$__sveltets_2_IsomorphicComponent<TimePickerColumnProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type TimePickerColumn = InstanceType<typeof TimePickerColumn>;
 export default TimePickerColumn;

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

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface TimePickerContentProps
@@ -11,7 +11,12 @@
   import type {Action} from 'svelte/action';
   import {getTimePickerContext} from './time-picker-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: TimePickerContentProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: TimePickerContentProps = $props();
 
   let timePicker = getTimePickerContext();
   let presence = getPresenceContext();
@@ -28,7 +33,7 @@
 {#if asChild}
   {@render asChild(presence.ref, mergedProps)}
 {:else}
-  <div bind:this={e} use:presence.ref {...mergedProps}>
+  <div bind:this={ref} use:presence.ref {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

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

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TimePickerContent: $$__sveltets_2_IsomorphicComponent<TimePickerContentProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type TimePickerContent = InstanceType<typeof TimePickerContent>;
 export default TimePickerContent;

package/dist/time-picker/time-picker-control.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface TimePickerControlProps
@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimePickerContext} from './time-picker-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: TimePickerControlProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: TimePickerControlProps = $props();
 
   let timePicker = getTimePickerContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

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

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TimePickerControl: $$__sveltets_2_IsomorphicComponent<TimePickerControlProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type TimePickerControl = InstanceType<typeof TimePickerControl>;
 export default TimePickerControl;

package/dist/time-picker/time-picker-hour-cell.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {CellProps} from '@zag-js/time-picker';
 
@@ -11,7 +11,7 @@
   import {getTimePickerContext} from './time-picker-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     value,
     asChild,
     children,
@@ -28,7 +28,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/time-picker/time-picker-hour-cell.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TimePickerHourCell: $$__sveltets_2_IsomorphicComponent<TimePickerHourCellProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type TimePickerHourCell = InstanceType<typeof TimePickerHourCell>;
 export default TimePickerHourCell;

package/dist/time-picker/time-picker-input.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface TimePickerInputProps
@@ -9,7 +9,11 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimePickerContext} from './time-picker-context.svelte.js';
 
-  let {this: e, asChild, ...props}: TimePickerInputProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    ...props
+  }: TimePickerInputProps = $props();
 
   let timePicker = getTimePickerContext();
 
@@ -19,5 +23,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input bind:this={e} {...mergedProps} />
+  <input bind:this={ref} {...mergedProps} />
 {/if}

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

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TimePickerInput: $$__sveltets_2_IsomorphicComponent<TimePickerInputProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type TimePickerInput = InstanceType<typeof TimePickerInput>;
 export default TimePickerInput;

package/dist/time-picker/time-picker-label.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface TimePickerLabelProps
@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimePickerContext} from './time-picker-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: TimePickerLabelProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: TimePickerLabelProps = $props();
 
   let timePicker = getTimePickerContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <label bind:this={e} {...mergedProps}>
+  <label bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </label>
 {/if}

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

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TimePickerLabel: $$__sveltets_2_IsomorphicComponent<TimePickerLabelProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type TimePickerLabel = InstanceType<typeof TimePickerLabel>;
 export default TimePickerLabel;

package/dist/time-picker/time-picker-minute-cell.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {CellProps} from '@zag-js/time-picker';
 
@@ -11,7 +11,7 @@
   import {getTimePickerContext} from './time-picker-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     value,
     asChild,
     children,
@@ -28,7 +28,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/time-picker/time-picker-minute-cell.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TimePickerMinuteCell: $$__sveltets_2_IsomorphicComponent<TimePickerMinuteCellProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type TimePickerMinuteCell = InstanceType<typeof TimePickerMinuteCell>;
 export default TimePickerMinuteCell;

package/dist/time-picker/time-picker-period-cell.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {PeriodCellProps} from '@zag-js/time-picker';
 
@@ -14,7 +14,7 @@
   import {getTimePickerContext} from './time-picker-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     value,
     asChild,
     children,
@@ -36,7 +36,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/time-picker/time-picker-period-cell.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TimePickerPeriodCell: $$__sveltets_2_IsomorphicComponent<TimePickerPeriodCellProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type TimePickerPeriodCell = InstanceType<typeof TimePickerPeriodCell>;
 export default TimePickerPeriodCell;

package/dist/time-picker/time-picker-positioner.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface TimePickerPositionerProps
@@ -11,7 +11,7 @@
   import {getTimePickerContext} from './time-picker-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -32,7 +32,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

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

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TimePickerPositioner: $$__sveltets_2_IsomorphicComponent<TimePickerPositionerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type TimePickerPositioner = InstanceType<typeof TimePickerPositioner>;
 export default TimePickerPositioner;

package/dist/time-picker/time-picker-root.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
@@ -23,7 +23,12 @@
   import {createTimePicker} from './create-time-picker.svelte.js';
   import {setTimePickerContext} from './time-picker-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: TimePickerProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: TimePickerProps = $props();
 
   let [createTimePickerProps, rest] = $derived(
     createSplitProps<CreateTimePickerProps>([
@@ -70,7 +75,7 @@
 {#if asChild}
   {@render asChild(mergedProps, timePicker)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(timePicker)}
   </div>
 {/if}

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

@@ -18,6 +18,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TimePickerRoot: $$__sveltets_2_IsomorphicComponent<TimePickerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type TimePickerRoot = InstanceType<typeof TimePickerRoot>;
 export default TimePickerRoot;

package/dist/time-picker/time-picker-second-cell.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {CellProps} from '@zag-js/time-picker';
 
@@ -11,7 +11,7 @@
   import {getTimePickerContext} from './time-picker-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     value,
     asChild,
     children,
@@ -28,7 +28,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/time-picker/time-picker-second-cell.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TimePickerSecondCell: $$__sveltets_2_IsomorphicComponent<TimePickerSecondCellProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type TimePickerSecondCell = InstanceType<typeof TimePickerSecondCell>;
 export default TimePickerSecondCell;

package/dist/time-picker/time-picker-spacer.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface TimePickerSpacerProps
@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimePickerContext} from './time-picker-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: TimePickerSpacerProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: TimePickerSpacerProps = $props();
 
   let timePicker = getTimePickerContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span bind:this={e} {...mergedProps}>
+  <span bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

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

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TimePickerSpacer: $$__sveltets_2_IsomorphicComponent<TimePickerSpacerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type TimePickerSpacer = InstanceType<typeof TimePickerSpacer>;
 export default TimePickerSpacer;

package/dist/time-picker/time-picker-trigger.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface TimePickerTriggerProps
@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimePickerContext} from './time-picker-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: TimePickerTriggerProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: TimePickerTriggerProps = $props();
 
   let timePicker = getTimePickerContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button bind:this={e} type="button" {...mergedProps}>
+  <button bind:this={ref} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

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

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TimePickerTrigger: $$__sveltets_2_IsomorphicComponent<TimePickerTriggerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type TimePickerTrigger = InstanceType<typeof TimePickerTrigger>;
 export default TimePickerTrigger;

package/dist/timer/timer-action-trigger.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ActionTriggerProps} from '@zag-js/timer';
 
@@ -14,7 +14,7 @@
   import {getTimerContext} from './timer-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     action,
     asChild,
     children,
@@ -31,7 +31,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button bind:this={e} type="button" {...mergedProps}>
+  <button bind:this={ref} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/timer/timer-action-trigger.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TimerActionTrigger: $$__sveltets_2_IsomorphicComponent<TimerActionTriggerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type TimerActionTrigger = InstanceType<typeof TimerActionTrigger>;
 export default TimerActionTrigger;