ui-ingredients 0.0.50 → 0.0.51

package/dist/color-picker/area-background.svelte

@@ -2,7 +2,7 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface ColorPickerAreaBackgroundProps
-    extends HtmlIngredientProps<'div'> {}
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
 </script>
 
 <script lang="ts">
@@ -12,7 +12,12 @@
     getColorPickerContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: ColorPickerAreaBackgroundProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerAreaBackgroundProps = $props();
 
   let colorPicker = getColorPickerContext();
   let areaProps = getColorPickerAreaPropsContext();
@@ -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/area-background.svelte.d.ts

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

@@ -2,7 +2,7 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface ColorPickerAreaThumbProps
-    extends HtmlIngredientProps<'div'> {}
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
 </script>
 
 <script lang="ts">
@@ -12,7 +12,12 @@
     getColorPickerContext,
   } from './context.svelte.js';
 
-  let {children, ...props}: ColorPickerAreaThumbProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerAreaThumbProps = $props();
 
   let colorPicker = getColorPickerContext();
   let areaProps = getColorPickerAreaPropsContext();
@@ -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/area-thumb.svelte.d.ts

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

@@ -3,7 +3,7 @@
   import type {AreaProps} from '@zag-js/color-picker';
 
   export interface ColorPickerAreaProps
-    extends Assign<HtmlIngredientProps<'div'>, AreaProps> {}
+    extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, AreaProps> {}
 </script>
 
 <script lang="ts">
@@ -13,7 +13,14 @@
     setColorPickerAreaPropsContext,
   } from './context.svelte.js';
 
-  let {xChannel, yChannel, children, ...props}: ColorPickerAreaProps = $props();
+  let {
+    this: e,
+    xChannel,
+    yChannel,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerAreaProps = $props();
 
   let colorPicker = getColorPickerContext();
   let areaProps: AreaProps = $derived({
@@ -28,6 +35,10 @@
   setColorPickerAreaPropsContext(() => areaProps);
 </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/area.svelte.d.ts

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

@@ -3,14 +3,23 @@
   import type {ChannelInputProps} from '@zag-js/color-picker';
 
   export interface ColorPickerChannelInputProps
-    extends Assign<HtmlIngredientProps<'input'>, ChannelInputProps> {}
+    extends Assign<
+      HtmlIngredientProps<'input', HTMLInputElement>,
+      ChannelInputProps
+    > {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {getColorPickerContext} from './context.svelte.js';
 
-  let {channel, orientation, ...props}: ColorPickerChannelInputProps = $props();
+  let {
+    this: e,
+    channel,
+    orientation,
+    asChild,
+    ...props
+  }: ColorPickerChannelInputProps = $props();
 
   let colorPicker = getColorPickerContext();
 
@@ -25,4 +34,8 @@
   );
 </script>
 
-<input {...mergedProps} />
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <input bind:this={e} {...mergedProps} />
+{/if}

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

@@ -1,6 +1,6 @@
 import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { ChannelInputProps } from '@zag-js/color-picker';
-export interface ColorPickerChannelInputProps extends Assign<HtmlIngredientProps<'input'>, ChannelInputProps> {
+export interface ColorPickerChannelInputProps extends Assign<HtmlIngredientProps<'input', HTMLInputElement>, ChannelInputProps> {
 }
 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/channel-slider-label.svelte

@@ -3,7 +3,7 @@
   import type {ChannelProps} from '@zag-js/color-picker';
 
   export interface ColorPickerChannelSliderLabelProps
-    extends Assign<HtmlIngredientProps<'div'>, ChannelProps> {}
+    extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, ChannelProps> {}
 </script>
 
 <script lang="ts">
@@ -14,8 +14,10 @@
   } from './context.svelte.js';
 
   let {
+    this: e,
     channel,
     orientation,
+    asChild,
     children,
     ...props
   }: ColorPickerChannelSliderLabelProps = $props();
@@ -31,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/channel-slider-label.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { ChannelProps } from '@zag-js/color-picker';
-export interface ColorPickerChannelSliderLabelProps extends Assign<HtmlIngredientProps<'div'>, ChannelProps> {
+export interface ColorPickerChannelSliderLabelProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, ChannelProps> {
 }
 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/channel-slider-thumb.svelte

@@ -2,7 +2,7 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface ColorPickerChannelSliderThumbProps
-    extends HtmlIngredientProps<'div'> {}
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
 </script>
 
 <script lang="ts">
@@ -12,7 +12,12 @@
     getColorPickerContext,
   } from './context.svelte.js';
 
-  let {children, ...props}: ColorPickerChannelSliderThumbProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerChannelSliderThumbProps = $props();
 
   let colorPicker = getColorPickerContext();
   let channelSliderProps = getColorPickerChannelSliderPropsContext();
@@ -25,6 +30,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/channel-slider-thumb.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface ColorPickerChannelSliderThumbProps extends HtmlIngredientProps<'div'> {
+export interface ColorPickerChannelSliderThumbProps 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/channel-slider-track.svelte

@@ -2,7 +2,7 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface ColorPickerChannelSliderTrackProps
-    extends HtmlIngredientProps<'div'> {}
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
 </script>
 
 <script lang="ts">
@@ -12,7 +12,12 @@
     getColorPickerContext,
   } from './context.svelte.js';
 
-  let {children, ...props}: ColorPickerChannelSliderTrackProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerChannelSliderTrackProps = $props();
 
   let colorPicker = getColorPickerContext();
   let channelSliderProps = getColorPickerChannelSliderPropsContext();
@@ -25,6 +30,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/channel-slider-track.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface ColorPickerChannelSliderTrackProps extends HtmlIngredientProps<'div'> {
+export interface ColorPickerChannelSliderTrackProps 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/channel-slider-value-text.svelte

@@ -2,7 +2,7 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface ColorPickerChannelSliderValueTextProps
-    extends HtmlIngredientProps<'div'> {}
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
 </script>
 
 <script lang="ts">
@@ -13,7 +13,12 @@
     getColorPickerContext,
   } from './context.svelte.js';
 
-  let {children, ...props}: ColorPickerChannelSliderValueTextProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerChannelSliderValueTextProps = $props();
 
   let locale = getLocaleContext();
   let colorPicker = getColorPickerContext();
@@ -27,10 +32,17 @@
   );
 </script>
 
-<div {...mergedProps}>
-  {#if children}
-    {@render children()}
-  {:else}
-    {colorPicker.getChannelValueText(channelSliderProps.channel, locale.locale)}
-  {/if}
-</div>
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {colorPicker.getChannelValueText(
+        channelSliderProps.channel,
+        locale.locale,
+      )}
+    {/if}
+  </div>
+{/if}

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

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

@@ -3,7 +3,10 @@
   import type {ChannelSliderProps} from '@zag-js/color-picker';
 
   export interface ColorPickerChannelSliderProps
-    extends Assign<HtmlIngredientProps<'div'>, ChannelSliderProps> {}
+    extends Assign<
+      HtmlIngredientProps<'div', HTMLDivElement>,
+      ChannelSliderProps
+    > {}
 </script>
 
 <script lang="ts">
@@ -14,9 +17,11 @@
   } from './context.svelte.js';
 
   let {
+    this: e,
     format,
     channel,
     orientation,
+    asChild,
     children,
     ...props
   }: ColorPickerChannelSliderProps = $props();
@@ -35,6 +40,10 @@
   setColorPickerChannelSliderPropsContext(() => channelSliderProps);
 </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/channel-slider.svelte.d.ts

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

@@ -3,7 +3,7 @@
   import type {Action} from 'svelte/action';
 
   export interface ColorPickerContentProps
-    extends HtmlIngredientProps<'div', never, Action> {}
+    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
 </script>
 
 <script lang="ts">
@@ -11,7 +11,12 @@
   import {getPresenceContext} from '../presence/context.svelte.js';
   import {getColorPickerContext} from './context.svelte.js';
 
-  let {children, ...props}: ColorPickerContentProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerContentProps = $props();
 
   let colorPicker = getColorPickerContext();
   let presence = getPresenceContext();
@@ -25,6 +30,10 @@
   );
 </script>
 
-<div use:presence.ref {...mergedProps}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(presence.ref, mergedProps)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

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

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

@@ -1,20 +1,30 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ColorPickerControlProps extends HtmlIngredientProps<'div'> {}
+  export interface ColorPickerControlProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {getColorPickerContext} from './context.svelte.js';
 
-  let {children, ...props}: ColorPickerControlProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerControlProps = $props();
 
   let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(mergeProps(props, colorPicker.getControlProps()));
 </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/control.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface ColorPickerControlProps extends HtmlIngredientProps<'div'> {
+export interface ColorPickerControlProps 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/eye-dropper-trigger.svelte

@@ -2,14 +2,19 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface ColorPickerEyeDropperTriggerProps
-    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}: ColorPickerEyeDropperTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerEyeDropperTriggerProps = $props();
 
   let colorPicker = getColorPickerContext();
 
@@ -18,6 +23,10 @@
   );
 </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/eye-dropper-trigger.svelte.d.ts

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

@@ -2,14 +2,19 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface ColorPickerFormatSelectProps
-    extends HtmlIngredientProps<'select'> {}
+    extends HtmlIngredientProps<'select', HTMLSelectElement> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {getColorPickerContext} from './context.svelte.js';
 
-  let {children, ...props}: ColorPickerFormatSelectProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerFormatSelectProps = $props();
 
   let colorPicker = getColorPickerContext();
 
@@ -20,12 +25,16 @@
   let formats = ['rgba', 'hsla', 'hsba'];
 </script>
 
-<select {...mergedProps}>
-  {#if children}
-    {@render children()}
-  {:else}
-    {#each formats as format}
-      <option value={format}>{format}</option>
-    {/each}
-  {/if}
-</select>
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <select bind:this={e} {...mergedProps}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {#each formats as format}
+        <option value={format}>{format}</option>
+      {/each}
+    {/if}
+  </select>
+{/if}

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

@@ -1,5 +1,5 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface ColorPickerFormatSelectProps extends HtmlIngredientProps<'select'> {
+export interface ColorPickerFormatSelectProps extends HtmlIngredientProps<'select', HTMLSelectElement> {
 }
 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/format-trigger.svelte

@@ -2,14 +2,19 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface ColorPickerFormatTriggerProps
-    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}: ColorPickerFormatTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerFormatTriggerProps = $props();
 
   let colorPicker = getColorPickerContext();
 
@@ -18,6 +23,10 @@
   );
 </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/format-trigger.svelte.d.ts

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