ui-ingredients 0.0.24 → 0.0.26

package/dist/color-picker/positioner.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface ColorPickerPositionerProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerContext} from './context.svelte.js';
+
+  let {children, ...props}: ColorPickerPositionerProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+
+  let attrs = $derived(mergeProps(props, colorPicker.getPositionerProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,18 @@
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Positioner: $$__sveltets_2_IsomorphicComponent<ColorPickerPositionerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Positioner = InstanceType<typeof Positioner>;
+export default Positioner;

package/dist/color-picker/root.svelte

@@ -0,0 +1,75 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateColorPickerProps,
+    CreateColorPickerReturn,
+  } from './create-color-picker.svelte.js';
+
+  export interface ColorPickerProps
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateColorPickerProps> {
+    children?: Snippet<[colorPicker: CreateColorPickerReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerContext} from './context.svelte.js';
+  import {createColorPicker} from './create-color-picker.svelte.js';
+
+  let {
+    id,
+    ids,
+    open,
+    name,
+    value,
+    format,
+    disabled,
+    required,
+    readOnly,
+    defaultOpen,
+    positioning,
+    onOpenChange,
+    closeOnSelect,
+    initialFocusEl,
+    onValueChange,
+    onValueChangeEnd,
+    onFocusOutside,
+    onFormatChange,
+    onInteractOutside,
+    onPointerDownOutside,
+    children,
+    ...props
+  }: ColorPickerProps = $props();
+
+  let colorPicker = createColorPicker({
+    id,
+    ids,
+    open,
+    name,
+    value,
+    format,
+    disabled,
+    required,
+    readOnly,
+    defaultOpen,
+    positioning,
+    onOpenChange,
+    closeOnSelect,
+    initialFocusEl,
+    onValueChange,
+    onValueChangeEnd,
+    onFocusOutside,
+    onFormatChange,
+    onInteractOutside,
+    onPointerDownOutside,
+  });
+
+  let attrs = $derived(mergeProps(props, colorPicker.getRootProps()));
+
+  colorPickerContext.set(colorPicker);
+</script>
+
+<div {...attrs}>
+  {@render children?.(colorPicker)}
+</div>

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

@@ -0,0 +1,18 @@
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Root: $$__sveltets_2_IsomorphicComponent<ColorPickerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Root = InstanceType<typeof Root>;
+export default Root;

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

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface ColorPickerSwatchGroupProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerContext} from './context.svelte.js';
+
+  let {children, ...props}: ColorPickerSwatchGroupProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+
+  let attrs = $derived(mergeProps(props, colorPicker.getSwatchGroupProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,18 @@
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SwatchGroup: $$__sveltets_2_IsomorphicComponent<ColorPickerSwatchGroupProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type SwatchGroup = InstanceType<typeof SwatchGroup>;
+export default SwatchGroup;

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

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface ColorPickerSwatchIndicatorProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerContext, colorPickerSwatchPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: ColorPickerSwatchIndicatorProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+  let swatchProps = colorPickerSwatchPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, colorPicker.getSwatchIndicatorProps(swatchProps)));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,18 @@
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SwatchIndicator: $$__sveltets_2_IsomorphicComponent<ColorPickerSwatchIndicatorProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type SwatchIndicator = InstanceType<typeof SwatchIndicator>;
+export default SwatchIndicator;

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

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {SwatchTriggerProps} from '@zag-js/color-picker';
+
+  export interface ColorPickerSwatchTriggerProps
+    extends Assign<HtmlProps<'button'>, Pick<SwatchTriggerProps, 'disabled'>> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerContext, colorPickerSwatchPropsContext} from './context.svelte.js';
+
+  let {disabled, children, ...props}: ColorPickerSwatchTriggerProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+  let swatchProps = colorPickerSwatchPropsContext.get();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      colorPicker.getSwatchTriggerProps({
+        value: swatchProps.value,
+        disabled,
+      }),
+    ),
+  );
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

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

@@ -0,0 +1,18 @@
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SwatchTrigger: $$__sveltets_2_IsomorphicComponent<ColorPickerSwatchTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type SwatchTrigger = InstanceType<typeof SwatchTrigger>;
+export default SwatchTrigger;

package/dist/color-picker/swatch.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {SwatchProps} from '@zag-js/color-picker';
+
+  export interface ColorPickerSwatchProps extends Assign<HtmlProps<'div'>, SwatchProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerContext, colorPickerSwatchPropsContext} from './context.svelte.js';
+
+  let {value, respectAlpha, children, ...props}: ColorPickerSwatchProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+  let swatchProps: SwatchProps = $derived({
+    value,
+    respectAlpha,
+  });
+
+  let attrs = $derived(mergeProps(props, colorPicker.getSwatchProps(swatchProps)));
+
+  colorPickerSwatchPropsContext.set(() => swatchProps);
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,18 @@
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Swatch: $$__sveltets_2_IsomorphicComponent<ColorPickerSwatchProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Swatch = InstanceType<typeof Swatch>;
+export default Swatch;

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

@@ -0,0 +1,29 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {TransparencyGridProps} from '@zag-js/color-picker';
+
+  export interface ColorPickerTransparencyGridProps
+    extends Assign<HtmlProps<'div'>, TransparencyGridProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerContext} from './context.svelte.js';
+
+  let {size, children, ...props}: ColorPickerTransparencyGridProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      colorPicker.getTransparencyGridProps({
+        size,
+      }),
+    ),
+  );
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,18 @@
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TransparencyGrid: $$__sveltets_2_IsomorphicComponent<ColorPickerTransparencyGridProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type TransparencyGrid = InstanceType<typeof TransparencyGrid>;
+export default TransparencyGrid;

package/dist/color-picker/trigger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface ColorPickerTriggerProps extends HtmlProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerContext} from './context.svelte.js';
+
+  let {children, ...props}: ColorPickerTriggerProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+
+  let attrs = $derived(mergeProps(props, colorPicker.getTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

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

@@ -0,0 +1,18 @@
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Trigger: $$__sveltets_2_IsomorphicComponent<ColorPickerTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Trigger = InstanceType<typeof Trigger>;
+export default Trigger;

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

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface ColorPickerValueTextProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerContext} from './context.svelte.js';
+
+  let {children, ...props}: ColorPickerValueTextProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+
+  let attrs = $derived(mergeProps(props, colorPicker.getValueTextProps()));
+</script>
+
+<div {...attrs}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {colorPicker.valueAsString}
+  {/if}
+</div>

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

@@ -0,0 +1,18 @@
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ValueText: $$__sveltets_2_IsomorphicComponent<ColorPickerValueTextProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ValueText = InstanceType<typeof ValueText>;
+export default ValueText;

package/dist/combobox/clear-trigger.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ComboboxClearTriggerProps extends HtmlProps<'button'> {}
+  export interface ComboboxClearTriggerProps extends HtmlProps<'button'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext} from './context.svelte.js';
 
-  let {children, ...props}: ComboboxClearTriggerProps = $props();
+  let {asChild, children, ...props}: ComboboxClearTriggerProps = $props();
 
   let combobox = comboboxContext.get();
 
   let attrs = $derived(mergeProps(props, combobox.getClearTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/combobox/content.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ComboboxContentProps extends HtmlProps<'div'> {}
+  export interface ComboboxContentProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext} from './context.svelte.js';
 
-  let {children, ...props}: ComboboxContentProps = $props();
+  let {asChild, children, ...props}: ComboboxContentProps = $props();
 
   let combobox = comboboxContext.get();
 
   let attrs = $derived(mergeProps(props, combobox.getContentProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/combobox/control.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ComboboxControlProps extends HtmlProps<'div'> {}
+  export interface ComboboxControlProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext} from './context.svelte.js';
 
-  let {children, ...props}: ComboboxControlProps = $props();
+  let {asChild, children, ...props}: ComboboxControlProps = $props();
 
   let combobox = comboboxContext.get();
 
   let attrs = $derived(mergeProps(props, combobox.getControlProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/combobox/input.svelte

@@ -1,18 +1,25 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ComboboxInputProps extends HtmlProps<'input'> {}
+  export interface ComboboxInputProps extends HtmlProps<'input'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'input'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext} from './context.svelte.js';
 
-  let {...props}: ComboboxInputProps = $props();
+  let {asChild, ...props}: ComboboxInputProps = $props();
 
   let combobox = comboboxContext.get();
 
   let attrs = $derived(mergeProps(props, combobox.getInputProps()));
 </script>
 
-<input {...attrs} />
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <input {...attrs} />
+{/if}

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

@@ -1,14 +1,17 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ComboboxItemGroupLabelProps extends HtmlProps<'span'> {}
+  export interface ComboboxItemGroupLabelProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext, comboboxItemGroupPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: ComboboxItemGroupLabelProps = $props();
+  let {asChild, children, ...props}: ComboboxItemGroupLabelProps = $props();
 
   let combobox = comboboxContext.get();
   let itemGroupProps = comboboxItemGroupPropsContext.get();
@@ -23,6 +26,10 @@
   );
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/combobox/item-group.svelte

@@ -1,17 +1,19 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {ItemGroupProps} from '@zag-js/combobox';
+  import type {Snippet} from 'svelte';
 
   export interface ComboboxItemGroupProps
-    extends Assign<HtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {}
+    extends Assign<HtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {createUniqueId} from '../utils.svelte.js';
-  import {mergeProps} from '@zag-js/svelte';
+  import {createUniqueId, mergeProps} from '../utils.svelte.js';
   import {comboboxContext, comboboxItemGroupPropsContext} from './context.svelte.js';
 
-  let {id, children, ...props}: ComboboxItemGroupProps = $props();
+  let {id, asChild, children, ...props}: ComboboxItemGroupProps = $props();
 
   let combobox = comboboxContext.get();
 
@@ -26,6 +28,10 @@
   comboboxItemGroupPropsContext.set(() => comboboxItemGroupProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}