ui-ingredients 0.0.44 → 0.0.46

package/dist/checkbox/hidden-input.svelte

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

package/dist/checkbox/indicator.svelte

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

package/dist/checkbox/label.svelte

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

package/dist/checkbox/root.svelte

@@ -20,9 +20,9 @@
 
   import {reflect} from '@zag-js/svelte';
 
-  let {asChild, children, ...props}: CheckboxProps = $props();
+  let {this: e, asChild, children, ...props}: CheckboxProps = $props();
 
-  let [checkboxProps, otherProps] = $derived(
+  let [checkboxProps, localProps] = $derived(
     createSplitProps<CreateCheckboxProps>([
       'id',
       'ids',
@@ -40,7 +40,7 @@
 
   let checkbox = createCheckbox(reflect(() => checkboxProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, checkbox.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, checkbox.getRootProps()));
 
   setCheckboxContext(checkbox);
 </script>
@@ -48,7 +48,7 @@
 {#if asChild}
   {@render asChild(mergedProps, checkbox)}
 {:else}
-  <label {...mergedProps}>
+  <label bind:this={e} {...mergedProps}>
     {@render children?.(checkbox)}
   </label>
 {/if}

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

@@ -1,2 +1,2 @@
 import type { CreateClipboardReturn } from './create-clipboard.svelte.js';
-export declare const getClipboardContext: () => CreateClipboardReturn, setClipboardContext: (context: CreateClipboardReturn | (() => CreateClipboardReturn)) => void;
+export declare const getClipboardContext: () => CreateClipboardReturn, setClipboardContext: (context: CreateClipboardReturn | (() => CreateClipboardReturn)) => CreateClipboardReturn;

package/dist/clipboard/control.svelte

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

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

@@ -5,12 +5,11 @@ import { uid } from 'uid';
 export function createClipboard(props) {
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(clipboard.machine(context), { context });
-    const api = $derived(reflect(() => clipboard.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => clipboard.connect(state, send, normalizeProps));
 }

package/dist/clipboard/indicator.svelte

@@ -11,6 +11,7 @@
   import {getClipboardContext} from './context.svelte.js';
 
   let {
+    this: e,
     copied = false,
     asChild,
     children,
@@ -27,7 +28,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/clipboard/input.svelte

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

package/dist/clipboard/label.svelte

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

package/dist/clipboard/root.svelte

@@ -19,9 +19,9 @@
   import {setClipboardContext} from './context.svelte.js';
   import {createClipboard} from './create-clipboard.svelte.js';
 
-  let {asChild, children, ...props}: ClipboardProps = $props();
+  let {this: e, asChild, children, ...props}: ClipboardProps = $props();
 
-  let [clipboardProps, otherProps] = $derived(
+  let [clipboardProps, localProps] = $derived(
     createSplitProps<CreateClipboardProps>([
       'id',
       'ids',
@@ -33,7 +33,7 @@
 
   let clipboard = createClipboard(reflect(() => clipboardProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, clipboard.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, clipboard.getRootProps()));
 
   setClipboardContext(clipboard);
 </script>
@@ -41,7 +41,7 @@
 {#if asChild}
   {@render asChild(mergedProps, clipboard)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(clipboard)}
   </div>
 {/if}

package/dist/clipboard/trigger.svelte

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

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

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

@@ -1,2 +1,2 @@
 import type { CreateCollapsibleReturn } from './create-collapsible.svelte.js';
-export declare const getCollapsibleContext: () => CreateCollapsibleReturn, setCollapsibleContext: (context: CreateCollapsibleReturn | (() => CreateCollapsibleReturn)) => void;
+export declare const getCollapsibleContext: () => CreateCollapsibleReturn, setCollapsibleContext: (context: CreateCollapsibleReturn | (() => CreateCollapsibleReturn)) => CreateCollapsibleReturn;

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

@@ -7,15 +7,14 @@ export function createCollapsible(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         dir: locale?.dir,
         open: props.defaultOpen ?? props.open,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
-    })));
+    }));
     const [state, send] = useMachine(collapsible.machine(context), { context });
-    const api = $derived(reflect(() => collapsible.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => collapsible.connect(state, send, normalizeProps));
 }

package/dist/collapsible/root.svelte

@@ -19,9 +19,9 @@
   import {setCollapsibleContext} from './context.svelte.js';
   import {createCollapsible} from './create-collapsible.svelte.js';
 
-  let {asChild, children, ...props}: CollapsibleProps = $props();
+  let {this: e, asChild, children, ...props}: CollapsibleProps = $props();
 
-  let [collapsibleProps, otherProps] = $derived(
+  let [collapsibleProps, localProps] = $derived(
     createSplitProps<CreateCollapsibleProps>([
       'id',
       'ids',
@@ -36,7 +36,7 @@
   let collapsible = createCollapsible(reflect(() => collapsibleProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, collapsible.getRootProps()),
+    mergeProps(localProps, collapsible.getRootProps()),
   );
 
   setCollapsibleContext(collapsible);
@@ -45,7 +45,7 @@
 {#if asChild}
   {@render asChild(mergedProps, collapsible)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(collapsible)}
   </div>
 {/if}

package/dist/collapsible/trigger.svelte

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

@@ -1,7 +1,7 @@
 import type { AreaProps, ChannelProps, ChannelSliderProps, SwatchProps } from '@zag-js/color-picker';
 import type { CreateColorPickerReturn } from './create-color-picker.svelte.js';
-export declare const getColorPickerContext: () => CreateColorPickerReturn, setColorPickerContext: (context: CreateColorPickerReturn | (() => CreateColorPickerReturn)) => void;
-export declare const getColorPickerAreaPropsContext: () => AreaProps, setColorPickerAreaPropsContext: (context: AreaProps | (() => AreaProps)) => void;
-export declare const getColorPickerSwatchPropsContext: () => SwatchProps, setColorPickerSwatchPropsContext: (context: SwatchProps | (() => SwatchProps)) => void;
-export declare const getColorPickerChannelPropsContext: () => ChannelProps, setColorPickerChannelPropsContext: (context: ChannelProps | (() => ChannelProps)) => void;
-export declare const getColorPickerChannelSliderPropsContext: () => ChannelSliderProps, setColorPickerChannelSliderPropsContext: (context: ChannelSliderProps | (() => ChannelSliderProps)) => void;
+export declare const getColorPickerContext: () => CreateColorPickerReturn, setColorPickerContext: (context: CreateColorPickerReturn | (() => CreateColorPickerReturn)) => CreateColorPickerReturn;
+export declare const getColorPickerAreaPropsContext: () => AreaProps, setColorPickerAreaPropsContext: (context: AreaProps | (() => AreaProps)) => AreaProps;
+export declare const getColorPickerSwatchPropsContext: () => SwatchProps, setColorPickerSwatchPropsContext: (context: SwatchProps | (() => SwatchProps)) => SwatchProps;
+export declare const getColorPickerChannelPropsContext: () => ChannelProps, setColorPickerChannelPropsContext: (context: ChannelProps | (() => ChannelProps)) => ChannelProps;
+export declare const getColorPickerChannelSliderPropsContext: () => ChannelSliderProps, setColorPickerChannelSliderPropsContext: (context: ChannelSliderProps | (() => ChannelSliderProps)) => ChannelSliderProps;

package/dist/color-picker/create-color-picker.svelte.js

@@ -7,7 +7,7 @@ export function createColorPicker(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         dir: locale?.dir,
@@ -15,8 +15,7 @@ export function createColorPicker(props) {
         value: props.value ? colorPicker.parse(props.value) : undefined,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
-    })));
+    }));
     const [state, send] = useMachine(colorPicker.machine(context), { context });
-    const api = $derived(reflect(() => colorPicker.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => colorPicker.connect(state, send, normalizeProps));
 }

package/dist/color-picker/root.svelte

@@ -23,7 +23,7 @@
 
   let {children, ...props}: ColorPickerProps = $props();
 
-  let [colorPickerProps, otherProps] = $derived(
+  let [colorPickerProps, localProps] = $derived(
     createSplitProps<CreateColorPickerProps>([
       'id',
       'ids',
@@ -56,7 +56,7 @@
   });
 
   let mergedProps = $derived(
-    mergeProps(otherProps, colorPicker.getRootProps()),
+    mergeProps(localProps, colorPicker.getRootProps()),
   );
 
   setColorPickerContext(colorPicker);

package/dist/combobox/clear-trigger.svelte

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

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

@@ -1,5 +1,5 @@
 import type { ItemGroupProps, ItemProps } from '@zag-js/combobox';
 import type { CreateComboboxReturn } from './create-combobox.svelte.js';
-export declare const getComboboxContext: () => CreateComboboxReturn, setComboboxContext: (context: CreateComboboxReturn | (() => CreateComboboxReturn)) => void;
-export declare const getComboboxItemPropsContext: () => ItemProps, setComboboxItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
-export declare const getComboboxItemGroupPropsContext: () => ItemGroupProps, setComboboxItemGroupPropsContext: (context: ItemGroupProps | (() => ItemGroupProps)) => void;
+export declare const getComboboxContext: () => CreateComboboxReturn, setComboboxContext: (context: CreateComboboxReturn | (() => CreateComboboxReturn)) => CreateComboboxReturn;
+export declare const getComboboxItemPropsContext: () => ItemProps, setComboboxItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;
+export declare const getComboboxItemGroupPropsContext: () => ItemGroupProps, setComboboxItemGroupPropsContext: (context: ItemGroupProps | (() => ItemGroupProps)) => ItemGroupProps;

package/dist/combobox/control.svelte

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

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

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

package/dist/combobox/input.svelte

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

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

@@ -12,7 +12,12 @@
     getComboboxItemGroupPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: ComboboxItemGroupLabelProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: ComboboxItemGroupLabelProps = $props();
 
   let combobox = getComboboxContext();
   let itemGroupProps = getComboboxItemGroupPropsContext();
@@ -30,7 +35,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/combobox/item-group.svelte

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

package/dist/combobox/item-indicator.svelte

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

package/dist/combobox/item-text.svelte

@@ -11,7 +11,7 @@
     getComboboxItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: ComboboxItemTextProps = $props();
+  let {this: e, asChild, children, ...props}: ComboboxItemTextProps = $props();
 
   let combobox = getComboboxContext();
   let itemProps = getComboboxItemPropsContext();
@@ -24,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {#if children}
       {@render children?.()}
     {:else}

package/dist/combobox/item.svelte

@@ -14,17 +14,17 @@
     setComboboxItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: ComboboxItemProps = $props();
+  let {this: e, asChild, children, ...props}: ComboboxItemProps = $props();
 
   let combobox = getComboboxContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['item', 'persistFocus'])(props),
   );
 
   let itemState = $derived(combobox.getItemState(itemProps));
   let mergedProps = $derived(
-    mergeProps(otherProps, combobox.getItemProps(itemProps)),
+    mergeProps(localProps, combobox.getItemProps(itemProps)),
   );
 
   setComboboxItemPropsContext(() => itemProps);
@@ -33,7 +33,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}

package/dist/combobox/label.svelte

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

package/dist/combobox/list.svelte

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