ui-ingredients 0.0.50 → 0.0.52

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

@@ -2,14 +2,14 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface ColorPickerHiddenInputProps
-    extends HtmlIngredientProps<'input'> {}
+    extends HtmlIngredientProps<'input', HTMLInputElement> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {getColorPickerContext} from './context.svelte.js';
 
-  let {...props}: ColorPickerHiddenInputProps = $props();
+  let {this: e, asChild, ...props}: ColorPickerHiddenInputProps = $props();
 
   let colorPicker = getColorPickerContext();
 
@@ -18,4 +18,8 @@
   );
 </script>
 
-<input {...mergedProps} />
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <input bind:this={e} {...mergedProps} />
+{/if}

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

@@ -1,5 +1,5 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface ColorPickerHiddenInputProps extends HtmlIngredientProps<'input'> {
+export interface ColorPickerHiddenInputProps extends HtmlIngredientProps<'input', HTMLInputElement> {
 }
 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> & {

package/dist/color-picker/label.svelte

@@ -1,20 +1,25 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ColorPickerLabelProps extends HtmlIngredientProps<'label'> {}
+  export interface ColorPickerLabelProps
+    extends HtmlIngredientProps<'label', HTMLLabelElement> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {getColorPickerContext} from './context.svelte.js';
 
-  let {children, ...props}: ColorPickerLabelProps = $props();
+  let {this: e, asChild, children, ...props}: ColorPickerLabelProps = $props();
 
   let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(mergeProps(props, colorPicker.getLabelProps()));
 </script>
 
-<label {...mergedProps}>
-  {@render children?.()}
-</label>
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <label bind:this={e} {...mergedProps}>
+    {@render children?.()}
+  </label>
+{/if}

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

@@ -1,5 +1,5 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface ColorPickerLabelProps extends HtmlIngredientProps<'label'> {
+export interface ColorPickerLabelProps extends HtmlIngredientProps<'label', HTMLLabelElement> {
 }
 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> & {

package/dist/color-picker/positioner.svelte

@@ -2,7 +2,7 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface ColorPickerPositionerProps
-    extends HtmlIngredientProps<'div'> {}
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
 </script>
 
 <script lang="ts">
@@ -10,7 +10,12 @@
   import {getPresenceContext} from '../presence/context.svelte.js';
   import {getColorPickerContext} from './context.svelte.js';
 
-  let {children, ...props}: ColorPickerPositionerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerPositionerProps = $props();
 
   let colorPicker = getColorPickerContext();
   let presence = getPresenceContext();
@@ -24,6 +29,10 @@
   );
 </script>
 
-<div {...mergedProps}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -1,5 +1,5 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface ColorPickerPositionerProps extends HtmlIngredientProps<'div'> {
+export interface ColorPickerPositionerProps extends HtmlIngredientProps<'div', HTMLDivElement> {
 }
 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> & {

package/dist/color-picker/root.svelte

@@ -7,7 +7,7 @@
 
   export interface ColorPickerProps
     extends Assign<
-      HtmlIngredientProps<'div', CreateColorPickerReturn>,
+      HtmlIngredientProps<'div', HTMLDivElement, CreateColorPickerReturn>,
       CreateColorPickerProps
     > {}
 </script>
@@ -21,7 +21,7 @@
   import {setColorPickerContext} from './context.svelte.js';
   import {createColorPicker} from './create-color-picker.svelte.js';
 
-  let {children, ...props}: ColorPickerProps = $props();
+  let {this: e, asChild, children, ...props}: ColorPickerProps = $props();
 
   let [colorPickerProps, localProps] = $derived(
     createSplitProps<CreateColorPickerProps>([
@@ -63,6 +63,10 @@
   setPresenceContext(presence);
 </script>
 
-<div {...mergedProps}>
-  {@render children?.(colorPicker)}
-</div>
+{#if asChild}
+  {@render asChild(mergedProps, colorPicker)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.(colorPicker)}
+  </div>
+{/if}

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

@@ -1,6 +1,6 @@
 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> {
+export interface ColorPickerProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, 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> & {

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

@@ -2,14 +2,19 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface ColorPickerSwatchGroupProps
-    extends HtmlIngredientProps<'div'> {}
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {getColorPickerContext} from './context.svelte.js';
 
-  let {children, ...props}: ColorPickerSwatchGroupProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerSwatchGroupProps = $props();
 
   let colorPicker = getColorPickerContext();
 
@@ -18,6 +23,10 @@
   );
 </script>
 
-<div {...mergedProps}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -1,5 +1,5 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface ColorPickerSwatchGroupProps extends HtmlIngredientProps<'div'> {
+export interface ColorPickerSwatchGroupProps extends HtmlIngredientProps<'div', HTMLDivElement> {
 }
 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> & {

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

@@ -2,7 +2,7 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface ColorPickerSwatchIndicatorProps
-    extends HtmlIngredientProps<'div'> {}
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
 </script>
 
 <script lang="ts">
@@ -12,7 +12,12 @@
     getColorPickerSwatchPropsContext,
   } from './context.svelte.js';
 
-  let {children, ...props}: ColorPickerSwatchIndicatorProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerSwatchIndicatorProps = $props();
 
   let colorPicker = getColorPickerContext();
   let swatchProps = getColorPickerSwatchPropsContext();
@@ -22,6 +27,10 @@
   );
 </script>
 
-<div {...mergedProps}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -1,5 +1,5 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface ColorPickerSwatchIndicatorProps extends HtmlIngredientProps<'div'> {
+export interface ColorPickerSwatchIndicatorProps extends HtmlIngredientProps<'div', HTMLDivElement> {
 }
 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> & {

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

@@ -4,7 +4,7 @@
 
   export interface ColorPickerSwatchTriggerProps
     extends Assign<
-      HtmlIngredientProps<'button'>,
+      HtmlIngredientProps<'button', HTMLButtonElement>,
       Pick<SwatchTriggerProps, 'disabled'>
     > {}
 </script>
@@ -16,7 +16,13 @@
     getColorPickerSwatchPropsContext,
   } from './context.svelte.js';
 
-  let {disabled, children, ...props}: ColorPickerSwatchTriggerProps = $props();
+  let {
+    this: e,
+    disabled,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerSwatchTriggerProps = $props();
 
   let colorPicker = getColorPickerContext();
   let swatchProps = getColorPickerSwatchPropsContext();
@@ -32,6 +38,10 @@
   );
 </script>
 
-<button type="button" {...mergedProps}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button bind:this={e} type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

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

@@ -1,6 +1,6 @@
 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'>> {
+export interface ColorPickerSwatchTriggerProps extends Assign<HtmlIngredientProps<'button', HTMLButtonElement>, 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> & {

package/dist/color-picker/swatch.svelte

@@ -3,7 +3,7 @@
   import type {SwatchProps} from '@zag-js/color-picker';
 
   export interface ColorPickerSwatchProps
-    extends Assign<HtmlIngredientProps<'div'>, SwatchProps> {}
+    extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, SwatchProps> {}
 </script>
 
 <script lang="ts">
@@ -13,8 +13,14 @@
     setColorPickerSwatchPropsContext,
   } from './context.svelte.js';
 
-  let {value, respectAlpha, children, ...props}: ColorPickerSwatchProps =
-    $props();
+  let {
+    this: e,
+    value,
+    respectAlpha,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerSwatchProps = $props();
 
   let colorPicker = getColorPickerContext();
   let swatchProps: SwatchProps = $derived({
@@ -29,6 +35,10 @@
   setColorPickerSwatchPropsContext(() => swatchProps);
 </script>
 
-<div {...mergedProps}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -1,6 +1,6 @@
 import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { SwatchProps } from '@zag-js/color-picker';
-export interface ColorPickerSwatchProps extends Assign<HtmlIngredientProps<'div'>, SwatchProps> {
+export interface ColorPickerSwatchProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, 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> & {

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

@@ -3,14 +3,23 @@
   import type {TransparencyGridProps} from '@zag-js/color-picker';
 
   export interface ColorPickerTransparencyGridProps
-    extends Assign<HtmlIngredientProps<'div'>, TransparencyGridProps> {}
+    extends Assign<
+      HtmlIngredientProps<'div', HTMLDivElement>,
+      TransparencyGridProps
+    > {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {getColorPickerContext} from './context.svelte.js';
 
-  let {size, children, ...props}: ColorPickerTransparencyGridProps = $props();
+  let {
+    this: e,
+    size,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerTransparencyGridProps = $props();
 
   let colorPicker = getColorPickerContext();
 
@@ -24,6 +33,10 @@
   );
 </script>
 
-<div {...mergedProps}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -1,6 +1,6 @@
 import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { TransparencyGridProps } from '@zag-js/color-picker';
-export interface ColorPickerTransparencyGridProps extends Assign<HtmlIngredientProps<'div'>, TransparencyGridProps> {
+export interface ColorPickerTransparencyGridProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, 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> & {

package/dist/color-picker/trigger.svelte

@@ -2,20 +2,29 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface ColorPickerTriggerProps
-    extends HtmlIngredientProps<'button'> {}
+    extends HtmlIngredientProps<'button', HTMLButtonElement> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {getColorPickerContext} from './context.svelte.js';
 
-  let {children, ...props}: ColorPickerTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerTriggerProps = $props();
 
   let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(mergeProps(props, colorPicker.getTriggerProps()));
 </script>
 
-<button type="button" {...mergedProps}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button bind:this={e} {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

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

@@ -1,5 +1,5 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface ColorPickerTriggerProps extends HtmlIngredientProps<'button'> {
+export interface ColorPickerTriggerProps extends HtmlIngredientProps<'button', HTMLButtonElement> {
 }
 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> & {

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

@@ -2,14 +2,19 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface ColorPickerValueTextProps
-    extends HtmlIngredientProps<'div'> {}
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {getColorPickerContext} from './context.svelte.js';
 
-  let {children, ...props}: ColorPickerValueTextProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerValueTextProps = $props();
 
   let colorPicker = getColorPickerContext();
 
@@ -18,10 +23,14 @@
   );
 </script>
 
-<div {...mergedProps}>
-  {#if children}
-    {@render children()}
-  {:else}
-    {colorPicker.valueAsString}
-  {/if}
-</div>
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {colorPicker.valueAsString}
+    {/if}
+  </div>
+{/if}

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

@@ -1,5 +1,5 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface ColorPickerValueTextProps extends HtmlIngredientProps<'div'> {
+export interface ColorPickerValueTextProps extends HtmlIngredientProps<'div', HTMLDivElement> {
 }
 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> & {

package/dist/combobox/clear-trigger.svelte

@@ -2,7 +2,7 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface ComboboxClearTriggerProps
-    extends HtmlIngredientProps<'button'> {}
+    extends HtmlIngredientProps<'button', HTMLButtonElement> {}
 </script>
 
 <script lang="ts">

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

@@ -1,5 +1,5 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface ComboboxClearTriggerProps extends HtmlIngredientProps<'button'> {
+export interface ComboboxClearTriggerProps extends HtmlIngredientProps<'button', HTMLButtonElement> {
 }
 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> & {

package/dist/combobox/content.svelte

@@ -3,7 +3,7 @@
   import type {Action} from 'svelte/action';
 
   export interface ComboboxContentProps
-    extends HtmlIngredientProps<'div', never, Action> {}
+    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,6 @@
 import type { HtmlIngredientProps } from '../types.js';
 import type { Action } from 'svelte/action';
-export interface ComboboxContentProps extends HtmlIngredientProps<'div', never, Action> {
+export interface ComboboxContentProps extends HtmlIngredientProps<'div', HTMLDivElement, 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> & {

package/dist/combobox/control.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ComboboxControlProps extends HtmlIngredientProps<'div'> {}
+  export interface ComboboxControlProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
 </script>
 
 <script lang="ts">

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

@@ -1,5 +1,5 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface ComboboxControlProps extends HtmlIngredientProps<'div'> {
+export interface ComboboxControlProps extends HtmlIngredientProps<'div', HTMLDivElement> {
 }
 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> & {

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

@@ -34,6 +34,7 @@ export function createCombobox(props) {
         getRootNode: environment?.getRootNode,
         collection,
     }));
+    /* FIXME: pass controlled context */
     const [state, send] = useMachine(combobox.machine(context));
     return reflect(() => {
         const o = combobox.connect(state, send, normalizeProps);

package/dist/combobox/input.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ComboboxInputProps extends HtmlIngredientProps<'input'> {}
+  export interface ComboboxInputProps
+    extends HtmlIngredientProps<'input', HTMLInputElement> {}
 </script>
 
 <script lang="ts">

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

@@ -1,5 +1,5 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface ComboboxInputProps extends HtmlIngredientProps<'input'> {
+export interface ComboboxInputProps extends HtmlIngredientProps<'input', HTMLInputElement> {
 }
 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> & {

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

@@ -2,7 +2,7 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface ComboboxItemGroupLabelProps
-    extends HtmlIngredientProps<'span'> {}
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
 </script>
 
 <script lang="ts">

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

@@ -1,5 +1,5 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface ComboboxItemGroupLabelProps extends HtmlIngredientProps<'span'> {
+export interface ComboboxItemGroupLabelProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
 }
 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> & {

package/dist/combobox/item-group.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ComboboxItemGroupProps extends HtmlIngredientProps<'div'> {}
+  export interface ComboboxItemGroupProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
 </script>
 
 <script lang="ts">

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

@@ -1,5 +1,5 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface ComboboxItemGroupProps extends HtmlIngredientProps<'div'> {
+export interface ComboboxItemGroupProps extends HtmlIngredientProps<'div', HTMLDivElement> {
 }
 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> & {

package/dist/combobox/item-indicator.svelte

@@ -2,7 +2,7 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface ComboboxItemIndicatorProps
-    extends HtmlIngredientProps<'span'> {}
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
 </script>
 
 <script lang="ts">

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

@@ -1,5 +1,5 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface ComboboxItemIndicatorProps extends HtmlIngredientProps<'span'> {
+export interface ComboboxItemIndicatorProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
 }
 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> & {