ui-ingredients 0.0.62 → 0.0.63

package/dist/slider/slider-value-text.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSliderContext} from './slider-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SliderValueTextProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SliderValueTextProps = $props();
 
   let slider = getSliderContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span bind:this={e} {...mergedProps}>
+  <span bind:this={ref} {...mergedProps}>
     {#if children}
       {@render children()}
     {:else}

package/dist/slider/slider-value-text.svelte.d.ts

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

package/dist/splitter/splitter-panel.svelte

@@ -11,7 +11,12 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getSplitterContext} from './splitter-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SplitterPanelProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SplitterPanelProps = $props();
 
   let splitter = getSplitterContext();
 
@@ -27,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/splitter/splitter-panel.svelte.d.ts

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

package/dist/splitter/splitter-resize-trigger.svelte

@@ -24,7 +24,7 @@
   import {getSplitterContext} from './splitter-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -46,7 +46,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/splitter/splitter-resize-trigger.svelte.d.ts

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

package/dist/splitter/splitter-root.svelte

@@ -19,7 +19,12 @@
   import {createSplitter} from './create-splitter.svelte.js';
   import {setSplitterContext} from './splitter-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SplitterProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SplitterProps = $props();
 
   let [createSplitterProps, localProps] = $derived(
     createSplitProps<CreateSplitterProps>([
@@ -42,7 +47,7 @@
 {#if asChild}
   {@render asChild(mergedProps, splitter)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(splitter)}
   </div>
 {/if}

package/dist/splitter/splitter-root.svelte.d.ts

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

package/dist/steps/steps-completed-content.svelte

@@ -10,7 +10,7 @@
   import {getStepsContext} from './steps-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -31,7 +31,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/steps/steps-completed-content.svelte.d.ts

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

package/dist/steps/steps-content.svelte

@@ -11,7 +11,7 @@
   import {getStepsContext} from './steps-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     index,
     asChild,
     children,
@@ -26,7 +26,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/steps/steps-content.svelte.d.ts

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

package/dist/steps/steps-indicator.svelte

@@ -12,7 +12,12 @@
     getStepsItemPropsContext,
   } from './steps-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: StepsIndicatorProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: StepsIndicatorProps = $props();
 
   let steps = getStepsContext();
 
@@ -26,7 +31,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span bind:this={e} {...mergedProps}>
+  <span bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/steps/steps-indicator.svelte.d.ts

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

package/dist/steps/steps-item.svelte

@@ -17,7 +17,12 @@
     setStepsItemPropsContext,
   } from './steps-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: StepsItemProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: StepsItemProps = $props();
 
   let steps = getStepsContext();
 
@@ -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/steps/steps-item.svelte.d.ts

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

package/dist/steps/steps-list.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getStepsContext} from './steps-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: StepsListProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: StepsListProps = $props();
 
   let steps = getStepsContext();
 
@@ -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/steps/steps-list.svelte.d.ts

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

package/dist/steps/steps-next-trigger.svelte

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

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

package/dist/steps/steps-prev-trigger.svelte

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

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

package/dist/steps/steps-progress.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getStepsContext} from './steps-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: StepsProgressProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: StepsProgressProps = $props();
 
   let steps = getStepsContext();
 
@@ -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/steps/steps-progress.svelte.d.ts

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

package/dist/steps/steps-root.svelte

@@ -19,7 +19,12 @@
   import {createSteps} from './create-steps.svelte.js';
   import {setStepsContext} from './steps-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: StepsProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: StepsProps = $props();
 
   let [createStepsProps, localProps] = $derived(
     createSplitProps<CreateStepsProps>([
@@ -44,7 +49,7 @@
 {#if asChild}
   {@render asChild(mergedProps, steps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(steps)}
   </div>
 {/if}

package/dist/steps/steps-root.svelte.d.ts

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

package/dist/steps/steps-separator.svelte

@@ -12,7 +12,12 @@
     getStepsItemPropsContext,
   } from './steps-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: StepsSeparatorProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: StepsSeparatorProps = $props();
 
   let steps = getStepsContext();
   let itemProps = getStepsItemPropsContext();
@@ -25,7 +30,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span bind:this={e} {...mergedProps}>
+  <span bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/steps/steps-separator.svelte.d.ts

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

package/dist/steps/steps-trigger.svelte

@@ -12,7 +12,12 @@
     getStepsItemPropsContext,
   } from './steps-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: StepsTriggerProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: StepsTriggerProps = $props();
 
   let steps = getStepsContext();
   let itemProps = getStepsItemPropsContext();
@@ -25,7 +30,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/steps/steps-trigger.svelte.d.ts

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

package/dist/switch/switch-control.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSwitchContext} from './switch-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SwitchControlProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SwitchControlProps = $props();
 
   let switch_ = getSwitchContext();
 
@@ -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/switch/switch-control.svelte.d.ts

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

package/dist/switch/switch-hidden-input.svelte

@@ -9,7 +9,11 @@
   import {mergeProps} from '../merge-props.js';
   import {getSwitchContext} from './switch-context.svelte.js';
 
-  let {this: e, asChild, ...props}: SwitchHiddenInputProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    ...props
+  }: SwitchHiddenInputProps = $props();
 
   let switch_ = getSwitchContext();
 
@@ -19,5 +23,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input bind:this={e} {...mergedProps} />
+  <input bind:this={ref} {...mergedProps} />
 {/if}

package/dist/switch/switch-hidden-input.svelte.d.ts

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

package/dist/switch/switch-label.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSwitchContext} from './switch-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SwitchLabelProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SwitchLabelProps = $props();
 
   let switch_ = getSwitchContext();
 
@@ -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/switch/switch-label.svelte.d.ts

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

package/dist/switch/switch-root.svelte

@@ -19,7 +19,12 @@
   import {createSwitch} from './create-switch.svelte.js';
   import {setSwitchContext} from './switch-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SwitchProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SwitchProps = $props();
 
   let [createSwitchProps, localProps] = $derived(
     createSplitProps<CreateSwitchProps>([
@@ -48,7 +53,7 @@
 {#if asChild}
   {@render asChild(mergedProps, switch_)}
 {:else}
-  <label bind:this={e} {...mergedProps}>
+  <label bind:this={ref} {...mergedProps}>
     {@render children?.(switch_)}
   </label>
 {/if}

package/dist/switch/switch-root.svelte.d.ts

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

package/dist/switch/switch-thumb.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSwitchContext} from './switch-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SwitchThumbProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SwitchThumbProps = $props();
 
   let switch_ = getSwitchContext();
 
@@ -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/switch/switch-thumb.svelte.d.ts

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

package/dist/tabs/tabs-content.svelte

@@ -11,7 +11,12 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getTabsContext} from './tabs-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: TabsContentProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: TabsContentProps = $props();
 
   let tabs = getTabsContext();
 
@@ -27,7 +32,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}