ui-ingredients 0.0.45 → 0.0.47

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/control.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ColorPickerControlProps extends HtmlIngredientProps<'div'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ColorPickerEyeDropperTriggerProps extends HtmlIngredientProps<'button'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ColorPickerFormatSelectProps extends HtmlIngredientProps<'select'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ColorPickerFormatTriggerProps extends HtmlIngredientProps<'button'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ColorPickerHiddenInputProps extends HtmlIngredientProps<'input'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ColorPickerLabelProps extends HtmlIngredientProps<'label'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ColorPickerPositionerProps extends HtmlIngredientProps<'div'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CreateColorPickerProps, CreateColorPickerReturn } from './create-color-picker.svelte.js';
+export interface ColorPickerProps extends Assign<HtmlIngredientProps<'div', CreateColorPickerReturn>, CreateColorPickerProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ColorPickerSwatchGroupProps extends HtmlIngredientProps<'div'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ColorPickerSwatchIndicatorProps extends HtmlIngredientProps<'div'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { SwatchTriggerProps } from '@zag-js/color-picker';
+export interface ColorPickerSwatchTriggerProps extends Assign<HtmlIngredientProps<'button'>, Pick<SwatchTriggerProps, 'disabled'>> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { SwatchProps } from '@zag-js/color-picker';
+export interface ColorPickerSwatchProps extends Assign<HtmlIngredientProps<'div'>, SwatchProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { TransparencyGridProps } from '@zag-js/color-picker';
+export interface ColorPickerTransparencyGridProps extends Assign<HtmlIngredientProps<'div'>, TransparencyGridProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ColorPickerTriggerProps extends HtmlIngredientProps<'button'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ColorPickerValueTextProps extends HtmlIngredientProps<'div'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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/clear-trigger.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ComboboxClearTriggerProps extends HtmlIngredientProps<'button'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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/content.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { HtmlIngredientProps } from '../types.js';
+import type { Action } from 'svelte/action';
+export interface ComboboxContentProps extends HtmlIngredientProps<'div', never, Action> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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/control.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ComboboxControlProps extends HtmlIngredientProps<'div'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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/input.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ComboboxInputProps extends HtmlIngredientProps<'input'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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-label.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ComboboxItemGroupLabelProps extends HtmlIngredientProps<'span'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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-group.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ComboboxItemGroupProps extends HtmlIngredientProps<'div'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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-indicator.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ComboboxItemIndicatorProps extends HtmlIngredientProps<'span'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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-text.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ComboboxItemTextProps extends HtmlIngredientProps<'span'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/combobox/item.svelte

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

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { ItemProps, ItemState } from '@zag-js/combobox';
+export interface ComboboxItemProps extends Assign<HtmlIngredientProps<'div', ItemState>, ItemProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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/label.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ComboboxLabelProps extends HtmlIngredientProps<'label'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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}

package/dist/combobox/list.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ComboboxListProps extends HtmlIngredientProps<'div'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/combobox/positioner.svelte

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

package/dist/combobox/positioner.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ComboboxPositionerProps extends HtmlIngredientProps<'div'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/combobox/root.svelte

@@ -23,7 +23,7 @@
   import {setComboboxContext} from './context.svelte.js';
   import {createCombobox} from './create-combobox.svelte.js';
 
-  let {asChild, children, ...props}: ComboboxProps<T> = $props();
+  let {this: e, asChild, children, ...props}: ComboboxProps<T> = $props();
 
   let [presenceStrategyProps, rest] = $derived(
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
@@ -94,7 +94,7 @@
 {#if asChild}
   {@render asChild(mergedProps, combobox)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(combobox)}
   </div>
 {/if}

package/dist/combobox/root.svelte.d.ts

@@ -1,5 +1,10 @@
+import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CreateComboboxProps, CreateComboboxReturn } from './create-combobox.svelte.js';
+export interface ComboboxProps<T> extends Assign<HtmlIngredientProps<'div', CreateComboboxReturn>, CreateComboboxProps<T>>, PresenceStrategyProps {
+}
 declare class __sveltets_Render<T> {
-    props(): ComboboxProps<T_1>;
+    props(): ComboboxProps<T>;
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/combobox/trigger.svelte

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ComboboxTriggerProps extends HtmlIngredientProps<'button'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/create-context.svelte.d.ts

@@ -1,5 +1,10 @@
 import type { GenericObject } from './types.js';
-type ContextGetter<T extends GenericObject> = () => T;
-type ContextSetter<T extends GenericObject> = (context: T | (() => T)) => void;
-export declare function createContext<T extends GenericObject>(key: string, strict?: boolean): [getContext: ContextGetter<T>, setContext: ContextSetter<T>];
+type GetContext<T extends GenericObject> = () => T;
+type SetContext<T extends GenericObject> = (context: T | (() => T)) => T;
+type HasContext = () => boolean;
+export declare function createContext<T extends GenericObject>(key: string, strict?: boolean): [
+    getContext: GetContext<T>,
+    setContext: SetContext<T>,
+    hasContext: HasContext
+];
 export {};

package/dist/create-context.svelte.js

@@ -1,17 +1,20 @@
 import { reflect } from '@zag-js/svelte';
 import { getContext, hasContext, setContext } from 'svelte';
 export function createContext(key, strict = true) {
-    function g() {
-        if (strict && !hasContext(key)) {
-            const e = new Error();
-            e.name = 'ContextError';
-            e.message = `No context found for '${key}'`;
-            throw e;
-        }
+    const has = () => hasContext(key);
+    const set = (context) => {
+        return setContext(key, typeof context === 'function' ? reflect(context) : context);
+    };
+    const get = () => {
+        if (strict && !has())
+            throw err(key);
         return getContext(key);
-    }
-    function s(context) {
-        setContext(key, typeof context === 'function' ? reflect(context) : context);
-    }
-    return [g, s];
+    };
+    return [get, set, has];
+}
+function err(k) {
+    const e = new Error();
+    e.name = 'ContextError';
+    e.message = "No context found for '%s'".replace('%s', k);
+    throw e;
 }