ui-ingredients 0.0.45 → 0.0.46

package/dist/qr-code/overlay.svelte

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

package/dist/qr-code/pattern.svelte

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

package/dist/qr-code/root.svelte

@@ -19,7 +19,7 @@
   import {setQrCodeContext} from './context.svelte.js';
   import {createQRCode} from './create-qr-code.svelte.js';
 
-  let {asChild, children, ...props}: QrCodeProps = $props();
+  let {this: e, asChild, children, ...props}: QrCodeProps = $props();
 
   let [qrCodeProps, localProps] = $derived(
     createSplitProps<CreateQrCodeProps>(['id', 'ids', 'value', 'encoding'])(
@@ -37,7 +37,7 @@
 {#if asChild}
   {@render asChild(mergedProps, qrCode)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(qrCode)}
   </div>
 {/if}

package/dist/radio-group/context.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/radio-group';
 import type { CreateRadioGroupReturn } from './create-radio-group.svelte.js';
-export declare const getRadioGroupContext: () => CreateRadioGroupReturn, setRadioGroupContext: (context: CreateRadioGroupReturn | (() => CreateRadioGroupReturn)) => void;
-export declare const getRadioGroupItemPropsContext: () => ItemProps, setRadioGroupItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
+export declare const getRadioGroupContext: () => CreateRadioGroupReturn, setRadioGroupContext: (context: CreateRadioGroupReturn | (() => CreateRadioGroupReturn)) => CreateRadioGroupReturn;
+export declare const getRadioGroupItemPropsContext: () => ItemProps, setRadioGroupItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;

package/dist/radio-group/indicator.svelte

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

package/dist/radio-group/item-control.svelte

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

package/dist/radio-group/item-hidden-input.svelte

@@ -12,7 +12,7 @@
     getRadioGroupItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, ...props}: RadioGroupItemHiddenInputProps = $props();
+  let {this: e, asChild, ...props}: RadioGroupItemHiddenInputProps = $props();
 
   let radioGroup = getRadioGroupContext();
   let itemProps = getRadioGroupItemPropsContext();
@@ -25,5 +25,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input bind:this={e} {...mergedProps} />
 {/if}

package/dist/radio-group/item-text.svelte

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

package/dist/radio-group/item.svelte

@@ -14,7 +14,7 @@
     setRadioGroupItemPropsContext,
   } from './context.svelte.js';
 
-  let {children, asChild, ...props}: RadioGroupItemProps = $props();
+  let {this: e, children, asChild, ...props}: RadioGroupItemProps = $props();
 
   let radioGroup = getRadioGroupContext();
 
@@ -34,7 +34,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <label {...mergedProps}>
+  <label bind:this={e} {...mergedProps}>
     {@render children?.(itemState)}
   </label>
 {/if}

package/dist/radio-group/label.svelte

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

package/dist/radio-group/root.svelte

@@ -19,7 +19,7 @@
   import {setRadioGroupContext} from './context.svelte.js';
   import {createRadioGroup} from './create-radio-group.svelte.js';
 
-  let {asChild, children, ...props}: RadioGroupProps = $props();
+  let {this: e, asChild, children, ...props}: RadioGroupProps = $props();
 
   let [radioGroupProps, localProps] = $derived(
     createSplitProps<CreateRadioGroupProps>([
@@ -45,7 +45,7 @@
 {#if asChild}
   {@render asChild(mergedProps, radioGroup)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(radioGroup)}
   </div>
 {/if}

package/dist/rating-group/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateRatingGroupReturn } from './create-rating-group.svelte.js';
-export declare const getRatingGroupContext: () => CreateRatingGroupReturn, setRatingGroupContext: (context: CreateRatingGroupReturn | (() => CreateRatingGroupReturn)) => void;
+export declare const getRatingGroupContext: () => CreateRatingGroupReturn, setRatingGroupContext: (context: CreateRatingGroupReturn | (() => CreateRatingGroupReturn)) => CreateRatingGroupReturn;

package/dist/rating-group/control.svelte

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

package/dist/rating-group/hidden-input.svelte

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

package/dist/rating-group/item.svelte

@@ -10,7 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {getRatingGroupContext} from './context.svelte.js';
 
-  let {index, asChild, children, ...props}: RatingGroupItemProps = $props();
+  let {
+    this: e,
+    index,
+    asChild,
+    children,
+    ...props
+  }: RatingGroupItemProps = $props();
 
   let ratingGroup = getRatingGroupContext();
 
@@ -23,7 +29,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}

package/dist/rating-group/label.svelte

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

package/dist/rating-group/root.svelte

@@ -19,7 +19,7 @@
   import {setRatingGroupContext} from './context.svelte.js';
   import {createRatingGroup} from './create-rating-group.svelte.js';
 
-  let {asChild, children, ...props}: RatingGroupProps = $props();
+  let {this: e, asChild, children, ...props}: RatingGroupProps = $props();
 
   let [ratingGroupProps, localProps] = $derived(
     createSplitProps<CreateRatingGroupProps>([
@@ -52,7 +52,7 @@
 {#if asChild}
   {@render asChild(mergedProps, ratingGroup)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(ratingGroup)}
   </div>
 {/if}

package/dist/segment-group/context.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/radio-group';
 import type { CreateSegmentGroupReturn } from './create-segment-group.svelte.js';
-export declare const getSegmentGroupContext: () => CreateSegmentGroupReturn, setSegmentGroupContext: (context: CreateSegmentGroupReturn | (() => CreateSegmentGroupReturn)) => void;
-export declare const getSegmentGroupItemPropsContext: () => ItemProps, setSegmentGroupItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
+export declare const getSegmentGroupContext: () => CreateSegmentGroupReturn, setSegmentGroupContext: (context: CreateSegmentGroupReturn | (() => CreateSegmentGroupReturn)) => CreateSegmentGroupReturn;
+export declare const getSegmentGroupItemPropsContext: () => ItemProps, setSegmentGroupItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;

package/dist/segment-group/indicator.svelte

@@ -10,7 +10,12 @@
   import {parts} from './anatomy.js';
   import {getSegmentGroupContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SegmentGroupIndicatorProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SegmentGroupIndicatorProps = $props();
 
   let segmentGroup = getSegmentGroupContext();
 
@@ -22,7 +27,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/segment-group/item-control.svelte

@@ -13,7 +13,12 @@
     getSegmentGroupItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: SegmentGroupItemControlProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SegmentGroupItemControlProps = $props();
 
   let segmentGroup = getSegmentGroupContext();
   let itemProps = getSegmentGroupItemPropsContext();
@@ -30,7 +35,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/segment-group/item-hidden-input.svelte

@@ -12,7 +12,7 @@
     getSegmentGroupItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, ...props}: SegmentGroupItemHiddenInputProps = $props();
+  let {this: e, asChild, ...props}: SegmentGroupItemHiddenInputProps = $props();
 
   let segmentGroup = getSegmentGroupContext();
   let itemProps = getSegmentGroupItemPropsContext();
@@ -25,5 +25,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input bind:this={e} {...mergedProps} />
 {/if}

package/dist/segment-group/item-text.svelte

@@ -13,7 +13,12 @@
     getSegmentGroupItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: SegmentGroupItemTextProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SegmentGroupItemTextProps = $props();
 
   let segmentGroup = getSegmentGroupContext();
   let itemProps = getSegmentGroupItemPropsContext();
@@ -30,7 +35,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/segment-group/item.svelte

@@ -15,7 +15,7 @@
     setSegmentGroupItemPropsContext,
   } from './context.svelte.js';
 
-  let {children, asChild, ...props}: SegmentGroupItemProps = $props();
+  let {this: e, children, asChild, ...props}: SegmentGroupItemProps = $props();
 
   let segmentGroup = getSegmentGroupContext();
 
@@ -38,7 +38,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <label {...mergedProps}>
+  <label bind:this={e} {...mergedProps}>
     {@render children?.(itemState)}
   </label>
 {/if}

package/dist/segment-group/label.svelte

@@ -9,7 +9,7 @@
   import {parts} from './anatomy.js';
   import {getSegmentGroupContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SegmentGroupLabelProps = $props();
+  let {this: e, asChild, children, ...props}: SegmentGroupLabelProps = $props();
 
   let segmentGroup = getSegmentGroupContext();
 
@@ -21,7 +21,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/segment-group/root.svelte

@@ -20,7 +20,7 @@
   import {setSegmentGroupContext} from './context.svelte.js';
   import {createSegmentGroup} from './create-segment-group.svelte.js';
 
-  let {asChild, children, ...props}: SegmentGroupProps = $props();
+  let {this: e, asChild, children, ...props}: SegmentGroupProps = $props();
 
   let [segmentGroupProps, localProps] = $derived(
     createSplitProps<CreateSegmentGroupProps>([
@@ -48,7 +48,7 @@
 {#if asChild}
   {@render asChild(mergedProps, segmentGroup)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(segmentGroup)}
   </div>
 {/if}

package/dist/select/clear-trigger.svelte

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

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

@@ -1,5 +1,5 @@
 import type { ItemGroupProps, ItemProps } from '@zag-js/select';
 import type { CreateSelectReturn } from './create-select.svelte.js';
-export declare const getSelectContext: () => CreateSelectReturn, setSelectContext: (context: CreateSelectReturn | (() => CreateSelectReturn)) => void;
-export declare const getSelectItemPropsContext: () => ItemProps<any>, setSelectItemPropsContext: (context: ItemProps<any> | (() => ItemProps<any>)) => void;
-export declare const getSelectItemGroupPropsContext: () => ItemGroupProps, setSelectItemGroupPropsContext: (context: ItemGroupProps | (() => ItemGroupProps)) => void;
+export declare const getSelectContext: () => CreateSelectReturn, setSelectContext: (context: CreateSelectReturn | (() => CreateSelectReturn)) => CreateSelectReturn;
+export declare const getSelectItemPropsContext: () => ItemProps<any>, setSelectItemPropsContext: (context: ItemProps<any> | (() => ItemProps<any>)) => ItemProps<any>;
+export declare const getSelectItemGroupPropsContext: () => ItemGroupProps, setSelectItemGroupPropsContext: (context: ItemGroupProps | (() => ItemGroupProps)) => ItemGroupProps;

package/dist/select/control.svelte

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

package/dist/select/create-select.svelte.js

@@ -17,7 +17,7 @@ export function createSelect(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived({
+    const context = reflect(() => ({
         ids: {
             label: field?.ids.label,
             hiddenSelect: field?.ids.control,
@@ -33,7 +33,7 @@ export function createSelect(props) {
         'open.controlled': props.open != null,
         getRootNode: environment?.getRootNode,
         collection,
-    });
+    }));
     const [state, send] = useMachine(select.machine(context));
     return reflect(() => {
         const o = select.connect(state, send, normalizeProps);

package/dist/select/hidden-select.svelte

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

package/dist/select/indicator.svelte

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

package/dist/select/item-group-label.svelte

@@ -12,7 +12,12 @@
     getSelectItemGroupPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: SelectItemGroupLabelProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SelectItemGroupLabelProps = $props();
 
   let select = getSelectContext();
 
@@ -29,7 +34,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/select/item-group.svelte

@@ -12,7 +12,13 @@
     setSelectItemGroupPropsContext,
   } from './context.svelte.js';
 
-  let {id, asChild, children, ...props}: SelectItemGroupProps = $props();
+  let {
+    id,
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SelectItemGroupProps = $props();
 
   let select = getSelectContext();
 
@@ -32,7 +38,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}