ui-ingredients 0.0.26 → 0.0.27

package/dist/switch/root.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateSwitchProps, CreateSwitchReturn} from './create-switch.svelte.js';
 
   export interface SwitchProps
     extends Assign<Omit<HtmlProps<'label'>, 'children'>, CreateSwitchProps> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'label'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'label'>, CreateSwitchReturn>;
     children?: Snippet<[switch$: CreateSwitchReturn]>;
   }
 </script>
@@ -54,7 +54,7 @@
 </script>
 
 {#if asChild}
-  {@render asChild(attrs)}
+  {@render asChild(attrs, switch$)}
 {:else}
   <label {...attrs}>
     {@render children?.(switch$)}

package/dist/switch/thumb.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 SwitchThumbProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/tabs/content.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 {ContentProps} from '@zag-js/tabs';
-  import type {Snippet} from 'svelte';
 
   export interface TabsContentProps extends Assign<HtmlProps<'div'>, ContentProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/tabs/list.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 TabsListProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/tabs/root.svelte

@@ -1,10 +1,10 @@
 <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 {CreateTabsProps, CreateTabsReturn} from './create-tabs.svelte.js';
 
   export interface TabsProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTabsProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, tabs: CreateTabsReturn]>;
+    asChild?: AsChild<GenericHtmlProps, CreateTabsReturn>;
     children?: Snippet<[tabs: CreateTabsReturn]>;
   }
 </script>

package/dist/tabs/trigger.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 {TriggerProps} from '@zag-js/tabs';
-  import type {Snippet} from 'svelte';
 
   export interface TabsTriggerProps extends Assign<HtmlProps<'button'>, TriggerProps> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/tags-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 TagsInputClearTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/tags-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 TagsInputControlProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/tags-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 TagsInputInputProps extends HtmlProps<'input'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'input'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'input'>>;
   }
 </script>
 

package/dist/tags-input/item-delete-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 TagsInputItemDeleteTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/tags-input/item-input.svelte

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

package/dist/tags-input/item-preview.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 TagsInputItemPreviewProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/tags-input/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 TagsInputItemTextProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface TagsInputItemTextProps 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/tags-input/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 {ItemProps, ItemState} from '@zag-js/tags-input';
   import type {Snippet} from 'svelte';
 
   export interface TagsInputItemProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, state: ItemState]>;
+    asChild?: AsChild<GenericHtmlProps, ItemState>;
     children?: Snippet<[state: ItemState]>;
   }
 </script>

package/dist/tags-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 TagsInputLabelProps extends HtmlProps<'label'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'label'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'label'>>;
   }
 </script>
 

package/dist/tags-input/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 {CreateTagsInputProps, CreateTagsInputReturn} from './create-tags-input.svelte.js';
 
   export interface TagsInputProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTagsInputProps> {
-    asChild?: Snippet<
-      [attrs: Omit<GenericHtmlProps, 'children'>, tagsInput: CreateTagsInputReturn]
-    >;
+    asChild?: AsChild<GenericHtmlProps, CreateTagsInputReturn>;
     children?: Snippet<[tagsInput: CreateTagsInputReturn]>;
   }
 </script>

package/dist/time-picker/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 TimePickerClearTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/time-picker/column.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 {ColumnProps} from '@zag-js/time-picker';
-  import type {Snippet} from 'svelte';
 
   export interface TimePickerColumnProps extends Assign<HtmlProps<'div'>, ColumnProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/time-picker/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 TimePickerContentProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/time-picker/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 TimePickerControlProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/time-picker/hour-cell.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 {CellProps} from '@zag-js/time-picker';
-  import type {Snippet} from 'svelte';
 
   export interface TimePickerHourCellProps extends Assign<HtmlProps<'div'>, CellProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/time-picker/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 TimePickerInputProps extends HtmlProps<'input'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'input'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'input'>>;
   }
 </script>
 

package/dist/time-picker/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 TimePickerLabelProps extends HtmlProps<'label'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'label'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'label'>>;
   }
 </script>
 

package/dist/time-picker/minute-cell.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 {CellProps} from '@zag-js/time-picker';
-  import type {Snippet} from 'svelte';
 
   export interface TimePickerMinuteCellProps extends Assign<HtmlProps<'div'>, CellProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/time-picker/period-cell.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 {PeriodCellProps} from '@zag-js/time-picker';
 
   export interface TimePickerPeriodCellProps extends Assign<HtmlProps<'div'>, PeriodCellProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/time-picker/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 TimePickerPositionerProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/time-picker/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 {CreateTimePickerProps, CreateTimePickerReturn} from './create-time-picker.svelte.js';
 
   export interface TimePickerProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTimePickerProps> {
-    asChild?: Snippet<
-      [attrs: Omit<GenericHtmlProps, 'children'>, timePicker: CreateTimePickerReturn]
-    >;
+    asChild?: AsChild<GenericHtmlProps, CreateTimePickerReturn>;
     children?: Snippet<[timePicker: CreateTimePickerReturn]>;
   }
 </script>

package/dist/time-picker/second-cell.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 {CellProps} from '@zag-js/time-picker';
-  import type {Snippet} from 'svelte';
 
   export interface TimePickerSecondCellProps extends Assign<HtmlProps<'div'>, CellProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/time-picker/spacer.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 TimePickerSpacerProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface TimePickerSpacerProps 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/time-picker/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 TimePickerTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/timer/action-trigger.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 {ActionTriggerProps} from '@zag-js/timer';
-  import type {Snippet} from 'svelte';
 
   export interface TimerActionTriggerProps extends Assign<HtmlProps<'button'>, ActionTriggerProps> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/timer/item-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 TimerItemLabelProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface TimerItemLabelProps 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/timer/item-value.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 TimerItemValueProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/timer/item.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 {ItemProps} from '@zag-js/timer';
-  import type {Snippet} from 'svelte';
 
   export interface TimerItemProps extends Assign<HtmlProps<'div'>, ItemProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/timer/root.svelte

@@ -1,10 +1,10 @@
 <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 {CreateTimerProps, CreateTimerReturn} from './create-timer.svelte.js';
 
   export interface TimerProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTimerProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, timer: CreateTimerReturn]>;
+    asChild?: AsChild<GenericHtmlProps, CreateTimerReturn>;
     children?: Snippet<[timer: CreateTimerReturn]>;
   }
 </script>

package/dist/timer/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 TimerSeparatorProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface TimerSeparatorProps 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/toast/action-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 ToastActionTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/toast/close-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 ToastCloseTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/toast/description.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 ToastDescriptionProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface ToastDescriptionProps extends HtmlProps<'p'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -21,11 +20,11 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <p {...attrs}>
     {#if children}
       {@render children?.()}
     {:else}
       {context.description}
     {/if}
-  </div>
+  </p>
 {/if}

package/dist/toast/ghost-after.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface ToastGhostAfterProps extends Omit<HtmlProps<'span'>, 'children'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {toastContext} from './context.svelte.js';
+
+  let {...props}: ToastGhostAfterProps = $props();
+
+  let context = toastContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getGhostAfterProps()));
+</script>
+
+<span {...attrs}></span>