ui-ingredients 0.0.26 → 0.0.28

package/dist/hover-card/content.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface HoverCardContentProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/hover-card/create-hover-card.svelte.js

@@ -10,7 +10,7 @@ export function createHoverCard(props) {
         ...props,
         id: props.id ?? createUniqueId(),
         dir: locale?.dir,
-        open: props.defaultOpen,
+        open: props.defaultOpen ?? props.open,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
     }));

package/dist/hover-card/positioner.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface HoverCardPositionerProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/hover-card/trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface HoverCardTriggerProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface HoverCardTriggerProps extends HtmlProps<'a'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -21,7 +20,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <a {...attrs}>
     {@render children?.()}
-  </div>
+  </a>
 {/if}

package/dist/menu/arrow-tip.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface MenuArrowTipProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface MenuArrowTipProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -21,7 +20,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {@render children?.()}
-  </div>
+  </span>
 {/if}

package/dist/menu/arrow.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface MenuArrowProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface MenuArrowProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -21,7 +20,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {@render children?.()}
-  </div>
+  </span>
 {/if}

package/dist/menu/content.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface MenuContentProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/menu/context-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface MenuContextTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

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

@@ -10,7 +10,7 @@ export function createMenu(props) {
         ...props,
         id: props.id ?? createUniqueId(),
         dir: locale?.dir,
-        open: props.defaultOpen,
+        open: props.defaultOpen ?? props.open,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
     }));

package/dist/menu/indicator.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface MenuIndicatorProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface MenuIndicatorProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -21,7 +20,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {@render children?.()}
-  </div>
+  </span>
 {/if}

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

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface MenuItemGroupLabelProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface MenuItemGroupLabelProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -29,7 +28,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {@render children?.()}
-  </div>
+  </span>
 {/if}

package/dist/menu/item-group.svelte

@@ -1,11 +1,9 @@
 <script lang="ts" module>
-  import type {Snippet} from 'svelte';
-
-  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {ItemGroupProps} from '@zag-js/menu';
 
   export interface MenuItemGroupProps extends Assign<HtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/menu/item.svelte

@@ -1,9 +1,10 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/menu';
   import type {Snippet} from 'svelte';
 
   export interface MenuItemProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
+    asChild?: AsChild<GenericHtmlProps, ItemState>;
     children?: Snippet<[state: ItemState]>;
   }
 </script>
@@ -12,7 +13,8 @@
   import {mergeProps} from '../utils.svelte.js';
   import {menuContext} from './context.svelte.js';
 
-  let {value, valueText, disabled, closeOnSelect, children, ...props}: MenuItemProps = $props();
+  let {value, valueText, disabled, closeOnSelect, asChild, children, ...props}: MenuItemProps =
+    $props();
 
   let menu = menuContext.get();
   let itemProps = $derived({
@@ -26,6 +28,10 @@
   let attrs = $derived(mergeProps(props, menu.getItemProps(itemProps)));
 </script>
 
-<div {...attrs}>
-  {@render children?.(state)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, state)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(state)}
+  </div>
+{/if}

package/dist/menu/option-item-indicator.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface MenuOptionItemIndicatorProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface MenuOptionItemIndicatorProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -22,7 +21,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {@render children?.()}
-  </div>
+  </span>
 {/if}

package/dist/menu/option-item-text.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface MenuOptionItemTextProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface MenuOptionItemTextProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -22,11 +21,11 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {#if children}
       {@render children()}
     {:else}
       {optionItemProps.valueText}
     {/if}
-  </div>
+  </span>
 {/if}

package/dist/menu/option-item.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" module>
-  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {OptionItemProps, OptionItemState} from '@zag-js/menu';
   import type {Snippet} from 'svelte';
 
   export interface MenuOptionItemProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, OptionItemProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, state: OptionItemState]>;
+    asChild?: AsChild<GenericHtmlProps, OptionItemState>;
     children?: Snippet<[state: OptionItemState]>;
   }
 </script>

package/dist/menu/positioner.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface MenuPositionerProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/menu/separator.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface MenuSeparatorProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/menu/trigger-item.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface MenuTriggerItemIndicatorProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/menu/trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface MenuTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/number-input/control.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface NumberInputControlTriggerProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/number-input/decrement-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface NumberInputDecrementTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/number-input/increment-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface NumberInputIncrementTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/number-input/input.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface NumberInputInputProps extends HtmlProps<'input'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'input'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'input'>>;
   }
 </script>
 

package/dist/number-input/label.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface NumberInputLabelProps extends HtmlProps<'label'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'label'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'label'>>;
   }
 </script>
 

package/dist/number-input/root.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {
     CreateNumberInputProps,
@@ -8,9 +8,7 @@
 
   export interface NumberInputProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateNumberInputProps> {
-    asChild?: Snippet<
-      [attrs: Omit<GenericHtmlProps, 'children'>, numberInput: CreateNumberInputReturn]
-    >;
+    asChild?: AsChild<GenericHtmlProps, CreateNumberInputReturn>;
     children?: Snippet<[numberInput: CreateNumberInputReturn]>;
   }
 </script>

package/dist/number-input/scrubber.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface NumberInputScrubberProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/pagination/ellipsis.svelte

@@ -1,10 +1,9 @@
 <script lang="ts" module>
-  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {EllipsisProps} from '@zag-js/pagination';
-  import type {Snippet} from 'svelte';
 
-  export interface PaginationEllipsisProps extends Assign<HtmlProps<'div'>, EllipsisProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface PaginationEllipsisProps extends Assign<HtmlProps<'span'>, EllipsisProps> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -22,7 +21,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {@render children?.()}
-  </div>
+  </span>
 {/if}

package/dist/pagination/item.svelte

@@ -1,11 +1,10 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {ItemProps} from '@zag-js/pagination';
-  import type {Snippet} from 'svelte';
 
   export interface PaginationItemProps
     extends Assign<HtmlProps<'button'>, Omit<ItemProps, 'type'>> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/pagination/next-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface PaginationNextTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/pagination/prev-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface PaginationPrevTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/pagination/root.svelte

@@ -1,13 +1,11 @@
 <script lang="ts" module>
-  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreatePaginationProps, CreatePaginationReturn} from './create-pagination.svelte.js';
 
   export interface PaginationProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreatePaginationProps> {
-    asChild?: Snippet<
-      [attrs: Omit<GenericHtmlProps, 'children'>, pagination: CreatePaginationReturn]
-    >;
+    asChild?: AsChild<GenericHtmlProps, CreatePaginationReturn>;
     children?: Snippet<[pagination: CreatePaginationReturn]>;
   }
 </script>

package/dist/pin-input/clear-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface PinInputClearTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/pin-input/input.svelte

@@ -1,10 +1,9 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {InputProps} from '@zag-js/pin-input';
-  import type {Snippet} from 'svelte';
 
   export interface PinInputInputProps extends Assign<HtmlProps<'input'>, InputProps> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'input'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'input'>>;
   }
 </script>
 

package/dist/pin-input/label.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface PinInputLabelProps extends HtmlProps<'label'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'label'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'label'>>;
   }
 </script>
 

package/dist/pin-input/root.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" module>
-  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreatePinInputProps, CreatePinInputReturn} from './create-pin-input.svelte.js';
 
   export interface PinInputProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreatePinInputProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, pinInput: CreatePinInputReturn]>;
+    asChild?: AsChild<GenericHtmlProps, CreatePinInputReturn>;
     children?: Snippet<[pinInput: CreatePinInputReturn]>;
   }
 </script>

package/dist/popover/arrow-tip.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface PopoverArrowTipProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface PopoverArrowTipProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -21,7 +20,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {@render children?.()}
-  </div>
+  </span>
 {/if}

package/dist/popover/arrow.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface PopoverArrowProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface PopoverArrowProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -21,7 +20,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {@render children?.()}
-  </div>
+  </span>
 {/if}