ui-ingredients 0.0.45 → 0.0.46

package/dist/number-input/label.svelte

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

package/dist/number-input/root.svelte

@@ -19,7 +19,7 @@
   import {setNumberInputContext} from './context.svelte.js';
   import {createNumberInput} from './create-number-input.svelte.js';
 
-  let {asChild, children, ...props}: NumberInputProps = $props();
+  let {this: e, asChild, children, ...props}: NumberInputProps = $props();
 
   let [numberInputProps, localProps] = $derived(
     createSplitProps<CreateNumberInputProps>([
@@ -63,7 +63,7 @@
 {#if asChild}
   {@render asChild(mergedProps, numberInput)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(numberInput)}
   </div>
 {/if}

package/dist/number-input/scrubber.svelte

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

package/dist/pagination/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreatePaginationReturn } from './create-pagination.svelte.js';
-export declare const getPaginationContext: () => CreatePaginationReturn, setPaginationContext: (context: CreatePaginationReturn | (() => CreatePaginationReturn)) => void;
+export declare const getPaginationContext: () => CreatePaginationReturn, setPaginationContext: (context: CreatePaginationReturn | (() => CreatePaginationReturn)) => CreatePaginationReturn;

package/dist/pagination/ellipsis.svelte

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

package/dist/pagination/item.svelte

@@ -10,7 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {getPaginationContext} from './context.svelte.js';
 
-  let {value, asChild, children, ...props}: PaginationItemProps = $props();
+  let {
+    this: e,
+    value,
+    asChild,
+    children,
+    ...props
+  }: PaginationItemProps = $props();
 
   let pagination = getPaginationContext();
 
@@ -28,7 +34,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/pagination/next-trigger.svelte

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

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getPaginationContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: PaginationPrevTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: PaginationPrevTriggerProps = $props();
 
   let pagination = getPaginationContext();
 
@@ -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/pagination/root.svelte

@@ -19,7 +19,7 @@
   import {setPaginationContext} from './context.svelte.js';
   import {createPagination} from './create-pagination.svelte.js';
 
-  let {asChild, children, ...props}: PaginationProps = $props();
+  let {this: e, asChild, children, ...props}: PaginationProps = $props();
 
   let [paginationProps, localProps] = $derived(
     createSplitProps<CreatePaginationProps>([
@@ -46,7 +46,7 @@
 {#if asChild}
   {@render asChild(mergedProps, pagination)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(pagination)}
   </div>
 {/if}

package/dist/pin-input/clear-trigger.svelte

@@ -10,7 +10,12 @@
   import {parts} from './anatomy.js';
   import {getPinInputContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: PinInputClearTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: PinInputClearTriggerProps = $props();
 
   let pinInput = getPinInputContext();
 
@@ -26,7 +31,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/pin-input/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreatePinInputReturn } from './create-pin-input.svelte.js';
-export declare const getPinInputContext: () => CreatePinInputReturn, setPinInputContext: (context: CreatePinInputReturn | (() => CreatePinInputReturn)) => void;
+export declare const getPinInputContext: () => CreatePinInputReturn, setPinInputContext: (context: CreatePinInputReturn | (() => CreatePinInputReturn)) => CreatePinInputReturn;

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

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

package/dist/pin-input/input.svelte

@@ -10,7 +10,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getPinInputContext} from './context.svelte.js';
 
-  let {index, asChild, ...props}: PinInputInputProps = $props();
+  let {this: e, index, asChild, ...props}: PinInputInputProps = $props();
 
   let pinInput = getPinInputContext();
 
@@ -22,5 +22,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input bind:this={e} {...mergedProps} />
 {/if}

package/dist/pin-input/label.svelte

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

package/dist/pin-input/root.svelte

@@ -19,7 +19,7 @@
   import {setPinInputContext} from './context.svelte.js';
   import {createPinInputContext} from './create-pin-input.svelte.js';
 
-  let {asChild, children, ...props}: PinInputProps = $props();
+  let {this: e, asChild, children, ...props}: PinInputProps = $props();
 
   let [pinInputProps, localProps] = $derived(
     createSplitProps<CreatePinInputProps>([
@@ -57,7 +57,7 @@
 {#if asChild}
   {@render asChild(mergedProps, pinInput)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(pinInput)}
   </div>
 {/if}

package/dist/popover/arrow-tip.svelte

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

package/dist/popover/arrow.svelte

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

package/dist/popover/close-trigger.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getPopoverContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: PopoverCloseTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: PopoverCloseTriggerProps = $props();
 
   let popover = getPopoverContext();
 
@@ -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/popover/content.svelte

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

@@ -1,2 +1,2 @@
 import type { CreatePopoverReturn } from './create-popover.svelte.js';
-export declare const getPopoverContext: () => CreatePopoverReturn, setPopoverContext: (context: CreatePopoverReturn | (() => CreatePopoverReturn)) => void;
+export declare const getPopoverContext: () => CreatePopoverReturn, setPopoverContext: (context: CreatePopoverReturn | (() => CreatePopoverReturn)) => CreatePopoverReturn;

package/dist/popover/description.svelte

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

package/dist/popover/positioner.svelte

@@ -9,7 +9,7 @@
   import {getPresenceContext} from '../presence/context.svelte.js';
   import {getPopoverContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: PopoverPositionerProps = $props();
+  let {this: e, asChild, children, ...props}: PopoverPositionerProps = $props();
 
   let popover = getPopoverContext();
   let presence = getPresenceContext();
@@ -27,7 +27,7 @@
   {#if asChild}
     {@render asChild(mergedProps)}
   {:else}
-    <div {...mergedProps}>
+    <div bind:this={e} {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

package/dist/popover/title.svelte

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

package/dist/popover/trigger.svelte

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

@@ -1,3 +1,3 @@
 import type { CreatePresenceReturn, PresenceStrategyProps } from './create-presence.svelte.js';
-export declare const getPresenceContext: () => CreatePresenceReturn, setPresenceContext: (context: CreatePresenceReturn | (() => CreatePresenceReturn)) => void;
-export declare const getPresenceStrategyPropsContext: () => PresenceStrategyProps, setPresenceStrategyPropsContext: (context: PresenceStrategyProps | (() => PresenceStrategyProps)) => void;
+export declare const getPresenceContext: () => CreatePresenceReturn, setPresenceContext: (context: CreatePresenceReturn | (() => CreatePresenceReturn)) => CreatePresenceReturn;
+export declare const getPresenceStrategyPropsContext: () => PresenceStrategyProps, setPresenceStrategyPropsContext: (context: PresenceStrategyProps | (() => PresenceStrategyProps)) => PresenceStrategyProps;

package/dist/progress/circle-range.svelte

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

package/dist/progress/circle-track.svelte

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

package/dist/progress/circle.svelte

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

package/dist/progress/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateProgressReturn } from './create-progress.svelte.js';
-export declare const getProgressContext: () => CreateProgressReturn, setProgressContext: (context: CreateProgressReturn | (() => CreateProgressReturn)) => void;
+export declare const getProgressContext: () => CreateProgressReturn, setProgressContext: (context: CreateProgressReturn | (() => CreateProgressReturn)) => CreateProgressReturn;

package/dist/progress/label.svelte

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

package/dist/progress/range.svelte

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

package/dist/progress/root.svelte

@@ -19,7 +19,7 @@
   import {setProgressContext} from './context.svelte.js';
   import {createProgress} from './create-progress.svelte.js';
 
-  let {asChild, children, ...props}: ProgressProps = $props();
+  let {this: e, asChild, children, ...props}: ProgressProps = $props();
 
   let [progressProps, localProps] = $derived(
     createSplitProps<CreateProgressProps>([
@@ -43,7 +43,7 @@
 {#if asChild}
   {@render asChild(mergedProps, progress)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(progress)}
   </div>
 {/if}

package/dist/progress/track.svelte

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

package/dist/progress/value-text.svelte

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

package/dist/progress/view.svelte

@@ -10,7 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {getProgressContext} from './context.svelte.js';
 
-  let {state, asChild, children, ...props}: ProgressViewProps = $props();
+  let {
+    this: e,
+    state,
+    asChild,
+    children,
+    ...props
+  }: ProgressViewProps = $props();
 
   let progress = getProgressContext();
 
@@ -20,7 +26,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/qr-code/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateQrCodeReturn } from './create-qr-code.svelte.js';
-export declare const getQrCodeContext: () => CreateQrCodeReturn, setQrCodeContext: (context: CreateQrCodeReturn | (() => CreateQrCodeReturn)) => void;
+export declare const getQrCodeContext: () => CreateQrCodeReturn, setQrCodeContext: (context: CreateQrCodeReturn | (() => CreateQrCodeReturn)) => CreateQrCodeReturn;

package/dist/qr-code/frame.svelte

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