ui-ingredients 0.0.62 → 0.0.63

package/dist/color-picker/color-picker-format-trigger.svelte

@@ -10,7 +10,7 @@
   import {getColorPickerContext} from './color-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} {...mergedProps}>
+  <button bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/color-picker/color-picker-format-trigger.svelte.d.ts

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

package/dist/color-picker/color-picker-hidden-input.svelte

@@ -9,7 +9,11 @@
   import {mergeProps} from '../merge-props.js';
   import {getColorPickerContext} from './color-picker-context.svelte.js';
 
-  let {this: e, asChild, ...props}: ColorPickerHiddenInputProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    ...props
+  }: ColorPickerHiddenInputProps = $props();
 
   let colorPicker = getColorPickerContext();
 
@@ -21,5 +25,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input bind:this={e} {...mergedProps} />
+  <input bind:this={ref} {...mergedProps} />
 {/if}

package/dist/color-picker/color-picker-hidden-input.svelte.d.ts

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

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

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

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

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

@@ -11,7 +11,7 @@
   import {getColorPickerContext} from './color-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/color-picker/color-picker-positioner.svelte.d.ts

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

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

@@ -23,7 +23,12 @@
   import {setColorPickerContext} from './color-picker-context.svelte.js';
   import {createColorPicker} from './create-color-picker.svelte.js';
 
-  let {this: e, asChild, children, ...props}: ColorPickerProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ColorPickerProps = $props();
 
   let [presenceProps, etc] = $derived(
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
@@ -76,7 +81,7 @@
 {#if asChild}
   {@render asChild(mergedProps, colorPicker)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(colorPicker)}
   </div>
 {/if}

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

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

package/dist/color-picker/color-picker-swatch-group.svelte

@@ -10,7 +10,7 @@
   import {getColorPickerContext} from './color-picker-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -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/color-picker/color-picker-swatch-group.svelte.d.ts

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

package/dist/color-picker/color-picker-swatch-indicator.svelte

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

package/dist/color-picker/color-picker-swatch-indicator.svelte.d.ts

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

package/dist/color-picker/color-picker-swatch-trigger.svelte

@@ -14,7 +14,7 @@
   import {getColorPickerContext} from './color-picker-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     value,
     disabled,
     asChild,
@@ -38,7 +38,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/color-picker/color-picker-swatch-trigger.svelte.d.ts

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

package/dist/color-picker/color-picker-swatch.svelte

@@ -14,7 +14,7 @@
   } from './color-picker-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     value,
     respectAlpha,
     asChild,
@@ -38,7 +38,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/color-picker/color-picker-swatch.svelte.d.ts

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

package/dist/color-picker/color-picker-transparency-grid.svelte

@@ -14,7 +14,7 @@
   import {getColorPickerContext} from './color-picker-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     size,
     asChild,
     children,
@@ -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/color-picker/color-picker-transparency-grid.svelte.d.ts

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

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

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

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

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

package/dist/color-picker/color-picker-value-swatch.svelte

@@ -13,7 +13,7 @@
   import {getColorPickerContext} from './color-picker-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     respectAlpha,
     asChild,
     children,

package/dist/color-picker/color-picker-value-swatch.svelte.d.ts

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

package/dist/color-picker/color-picker-value-text.svelte

@@ -10,7 +10,7 @@
   import {getColorPickerContext} from './color-picker-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props

package/dist/color-picker/color-picker-value-text.svelte.d.ts

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

package/dist/color-picker/color-picker-view.svelte

@@ -16,7 +16,7 @@
   } from './color-picker-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     format,
     asChild,
     children,

package/dist/color-picker/color-picker-view.svelte.d.ts

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

package/dist/combobox/combobox-clear-trigger.svelte

@@ -10,7 +10,7 @@
   import {getComboboxContext} from './combobox-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/combobox/combobox-clear-trigger.svelte.d.ts

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

package/dist/combobox/combobox-content.svelte

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

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

package/dist/combobox/combobox-control.svelte

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

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

package/dist/combobox/combobox-input.svelte

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

package/dist/combobox/combobox-input.svelte.d.ts

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

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

@@ -13,7 +13,7 @@
   } from './combobox-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -35,7 +35,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span bind:this={e} {...mergedProps}>
+  <span bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

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

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

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

@@ -15,7 +15,7 @@
 
   let {
     id,
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -39,7 +39,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/combobox/combobox-item-group.svelte.d.ts

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

package/dist/combobox/combobox-item-indicator.svelte

@@ -13,7 +13,7 @@
   } from './combobox-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -30,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/combobox/combobox-item-indicator.svelte.d.ts

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

package/dist/combobox/combobox-item-text.svelte

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

package/dist/combobox/combobox-item-text.svelte.d.ts

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

package/dist/combobox/combobox-item.svelte

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

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