ui-ingredients 0.0.8 → 0.0.9

package/dist/combobox/index.d.ts

@@ -1,14 +1,14 @@
-export { default as ClearTrigger, type ComboboxClearTriggerProps } from './clear-trigger.svelte';
+export { default as ClearTrigger, type ComboboxClearTriggerProps, } from './clear-trigger.svelte';
 export { default as Content, type ComboboxContentProps } from './content.svelte';
 export { default as Control, type ComboboxControlProps } from './control.svelte';
 export { default as Input, type ComboboxInputProps } from './input.svelte';
 export { default as ItemGroupLabel, type ComboboxItemGroupLabelProps, } from './item-group-label.svelte';
-export { default as ItemGroup, type ComboboxItemGroupProps } from './item-group.svelte';
-export { default as ItemIndicator, type ComboboxItemIndicatorProps } from './item-indicator.svelte';
-export { default as ItemText, type ComboboxItemTextProps } from './item-text.svelte';
+export { default as ItemGroup, type ComboboxItemGroupProps, } from './item-group.svelte';
+export { default as ItemIndicator, type ComboboxItemIndicatorProps, } from './item-indicator.svelte';
+export { default as ItemText, type ComboboxItemTextProps, } from './item-text.svelte';
 export { default as Item, type ComboboxItemProps } from './item.svelte';
 export { default as Label, type ComboboxLabelProps } from './label.svelte';
 export { default as List, type ComboboxListProps } from './list.svelte';
-export { default as Positioner, type ComboboxPositionerProps } from './positioner.svelte';
+export { default as Positioner, type ComboboxPositionerProps, } from './positioner.svelte';
 export { default as Root, type ComboboxProps } from './root.svelte';
 export { default as Trigger, type ComboboxTriggerProps } from './trigger.svelte';

package/dist/combobox/index.js

@@ -1,14 +1,14 @@
-export { default as ClearTrigger } from './clear-trigger.svelte';
+export { default as ClearTrigger, } from './clear-trigger.svelte';
 export { default as Content } from './content.svelte';
 export { default as Control } from './control.svelte';
 export { default as Input } from './input.svelte';
 export { default as ItemGroupLabel, } from './item-group-label.svelte';
-export { default as ItemGroup } from './item-group.svelte';
-export { default as ItemIndicator } from './item-indicator.svelte';
-export { default as ItemText } from './item-text.svelte';
+export { default as ItemGroup, } from './item-group.svelte';
+export { default as ItemIndicator, } from './item-indicator.svelte';
+export { default as ItemText, } from './item-text.svelte';
 export { default as Item } from './item.svelte';
 export { default as Label } from './label.svelte';
 export { default as List } from './list.svelte';
-export { default as Positioner } from './positioner.svelte';
+export { default as Positioner, } from './positioner.svelte';
 export { default as Root } from './root.svelte';
 export { default as Trigger } from './trigger.svelte';

package/dist/combobox/input.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface ComboboxInputProps extends Assign<SvelteHTMLElements['input'], {}> {}
+  export interface ComboboxInputProps extends SvelteHtmlProps<'input'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface ComboboxInputProps extends Assign<SvelteHTMLElements['input'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface ComboboxInputProps extends SvelteHtmlProps<'input'> {
 }
 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

@@ -1,13 +1,16 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface ComboboxItemGroupLabelProps extends Assign<SvelteHTMLElements['span'], {}> {}
+  export interface ComboboxItemGroupLabelProps
+    extends SvelteHtmlProps<'span'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useComboboxContext, useComboboxItemGroupContext} from './context.svelte.js';
+  import {
+    useComboboxContext,
+    useComboboxItemGroupContext,
+  } from './context.svelte.js';
 
   let {children, ...props}: ComboboxItemGroupLabelProps = $props();
 

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface ComboboxItemGroupLabelProps extends Assign<SvelteHTMLElements['span'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface ComboboxItemGroupLabelProps extends SvelteHtmlProps<'span'> {
 }
 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,24 +1,30 @@
 <script lang="ts" context="module">
-  import type {Assign, OptionalId} from '../types.js';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
   import type {ItemGroupProps} from '@zag-js/combobox';
-  import type {SvelteHTMLElements} from 'svelte/elements';
 
   export interface ComboboxItemGroupProps
-    extends Assign<SvelteHTMLElements['div'], OptionalId<ItemGroupProps>> {}
+    extends Assign<SvelteHtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {}
 </script>
 
 <script lang="ts">
   import {uuid} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
-  import {setComboboxItemGroupContext, useComboboxContext} from './context.svelte.js';
+  import {
+    setComboboxItemGroupContext,
+    useComboboxContext,
+  } from './context.svelte.js';
 
-  let {id = uuid(), children, ...props}: ComboboxItemGroupProps = $props();
+  let {id, children, ...props}: ComboboxItemGroupProps = $props();
 
   let context = useComboboxContext();
 
-  let attrs = $derived(mergeProps(props, context.getItemGroupProps({id})));
+  let uid = uuid();
 
-  setComboboxItemGroupContext({id});
+  let attrs = $derived(
+    mergeProps(props, context.getItemGroupProps({id: id ?? uid})),
+  );
+
+  setComboboxItemGroupContext({id: id ?? uid});
 </script>
 
 <div {...attrs}>

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

@@ -1,7 +1,6 @@
-import type { Assign, OptionalId } from '../types.js';
+import type { Assign, SvelteHtmlProps } from '../types.js';
 import type { ItemGroupProps } from '@zag-js/combobox';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface ComboboxItemGroupProps extends Assign<SvelteHTMLElements['div'], OptionalId<ItemGroupProps>> {
+export interface ComboboxItemGroupProps extends Assign<SvelteHtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {
 }
 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

@@ -1,20 +1,24 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface ComboboxItemIndicatorProps extends Assign<SvelteHTMLElements['span'], {}> {}
+  export interface ComboboxItemIndicatorProps extends SvelteHtmlProps<'span'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useComboboxContext, useComboboxItemContext} from './context.svelte.js';
+  import {
+    useComboboxContext,
+    useComboboxItemContext,
+  } from './context.svelte.js';
 
   let {children, ...props}: ComboboxItemIndicatorProps = $props();
 
   let context = useComboboxContext();
   let itemContext = useComboboxItemContext();
 
-  let attrs = $derived(mergeProps(props, context.getItemIndicatorProps(itemContext)));
+  let attrs = $derived(
+    mergeProps(props, context.getItemIndicatorProps(itemContext)),
+  );
 </script>
 
 <span {...attrs}>

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface ComboboxItemIndicatorProps extends Assign<SvelteHTMLElements['span'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface ComboboxItemIndicatorProps extends SvelteHtmlProps<'span'> {
 }
 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-text.svelte

@@ -1,20 +1,24 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface ComboboxItemTextProps extends Assign<SvelteHTMLElements['span'], {}> {}
+  export interface ComboboxItemTextProps extends SvelteHtmlProps<'span'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useComboboxContext, useComboboxItemContext} from './context.svelte.js';
+  import {
+    useComboboxContext,
+    useComboboxItemContext,
+  } from './context.svelte.js';
 
   let {children, ...props}: ComboboxItemTextProps = $props();
 
   let context = useComboboxContext();
   let itemContext = useComboboxItemContext();
 
-  let attrs = $derived(mergeProps(props, context.getItemTextProps(itemContext)));
+  let attrs = $derived(
+    mergeProps(props, context.getItemTextProps(itemContext)),
+  );
 </script>
 
 <span {...attrs}>

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface ComboboxItemTextProps extends Assign<SvelteHTMLElements['span'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface ComboboxItemTextProps extends SvelteHtmlProps<'span'> {
 }
 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.svelte

@@ -1,19 +1,32 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {ItemProps} from '@zag-js/combobox';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/combobox';
+  import type {Snippet} from 'svelte';
 
-  export interface ComboboxItemProps extends Assign<SvelteHTMLElements['div'], ItemProps> {}
+  export interface ComboboxItemProps
+    extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, ItemProps> {
+    children?: Snippet<[state: ItemState]>;
+  }
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {setComboboxItemContext, useComboboxContext} from './context.svelte.js';
+  import {
+    setComboboxItemContext,
+    useComboboxContext,
+  } from './context.svelte.js';
 
   let {children, item, persistFocus, ...props}: ComboboxItemProps = $props();
 
   let context = useComboboxContext();
 
+  let state = $derived(
+    context.getItemState({
+      item,
+      persistFocus,
+    }),
+  );
+
   let attrs = $derived(
     mergeProps(
       props,
@@ -31,5 +44,5 @@
 </script>
 
 <div {...attrs}>
-  {@render children?.()}
+  {@render children?.(state)}
 </div>

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

@@ -1,7 +1,8 @@
-import type { Assign } from '../types.js';
-import type { ItemProps } from '@zag-js/combobox';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface ComboboxItemProps extends Assign<SvelteHTMLElements['div'], ItemProps> {
+import type { Assign, SvelteHtmlProps } from '../types.js';
+import type { ItemProps, ItemState } from '@zag-js/combobox';
+import type { Snippet } from 'svelte';
+export interface ComboboxItemProps extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, ItemProps> {
+    children?: Snippet<[state: ItemState]>;
 }
 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/label.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface ComboboxLabelProps extends Assign<SvelteHTMLElements['label'], {}> {}
+  export interface ComboboxLabelProps extends SvelteHtmlProps<'label'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface ComboboxLabelProps extends Assign<SvelteHTMLElements['label'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface ComboboxLabelProps extends SvelteHtmlProps<'label'> {
 }
 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/list.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface ComboboxListProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface ComboboxListProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface ComboboxListProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface ComboboxListProps extends SvelteHtmlProps<'div'> {
 }
 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/positioner.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface ComboboxPositionerProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface ComboboxPositionerProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface ComboboxPositionerProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface ComboboxPositionerProps extends SvelteHtmlProps<'div'> {
 }
 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/root.svelte

@@ -1,15 +1,17 @@
 <script lang="ts" context="module">
-  import type {Assign, OptionalId, WithoutChildren} from '../types.js';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-  import type {CreateComboboxContextProps, CreateComboboxContextReturn} from './context.svelte.js';
+  import type {
+    CreateComboboxContextProps,
+    CreateComboboxContextReturn,
+  } from './context.svelte.js';
 
   export interface ComboboxProps<T>
     extends Assign<
-      WithoutChildren<SvelteHTMLElements['div']>,
-      OptionalId<CreateComboboxContextProps<T>>
+      Omit<SvelteHtmlProps<'div'>, 'children'>,
+      Omit<CreateComboboxContextProps<T>, 'id'>
     > {
-    children?: Snippet<[CreateComboboxContextReturn]>;
+    children?: Snippet<[context: CreateComboboxContextReturn]>;
   }
 </script>
 
@@ -19,7 +21,7 @@
   import {createComboboxContext, setComboboxContext} from './context.svelte.js';
 
   let {
-    id = uuid(),
+    id,
     ids,
     dir,
     name,
@@ -67,7 +69,7 @@
   }: ComboboxProps<T> = $props();
 
   let context = createComboboxContext({
-    id,
+    id: id ?? uuid(),
     ids,
     dir,
     name,

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

@@ -1,9 +1,8 @@
-import type { Assign, OptionalId, WithoutChildren } from '../types.js';
+import type { Assign, SvelteHtmlProps } from '../types.js';
 import type { Snippet } from 'svelte';
-import type { SvelteHTMLElements } from 'svelte/elements';
 import type { CreateComboboxContextProps, CreateComboboxContextReturn } from './context.svelte.js';
-export interface ComboboxProps<T> extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateComboboxContextProps<T>>> {
-    children?: Snippet<[CreateComboboxContextReturn]>;
+export interface ComboboxProps<T> extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, Omit<CreateComboboxContextProps<T>, 'id'>> {
+    children?: Snippet<[context: CreateComboboxContextReturn]>;
 }
 declare class __sveltets_Render<T> {
     props(): ComboboxProps<T>;

package/dist/combobox/trigger.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface ComboboxTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+  export interface ComboboxTriggerProps extends SvelteHtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface ComboboxTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface ComboboxTriggerProps extends SvelteHtmlProps<'button'> {
 }
 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/dialog/backdrop.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface DialogBackdropProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface DialogBackdropProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/dialog/backdrop.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface DialogBackdropProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface DialogBackdropProps extends SvelteHtmlProps<'div'> {
 }
 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/dialog/close-trigger.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface DialogCloseTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+  export interface DialogCloseTriggerProps extends SvelteHtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/dialog/close-trigger.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface DialogCloseTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface DialogCloseTriggerProps extends SvelteHtmlProps<'button'> {
 }
 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/dialog/content.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface DialogContentProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface DialogContentProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface DialogContentProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface DialogContentProps extends SvelteHtmlProps<'div'> {
 }
 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/dialog/description.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface DialogDescriptionProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface DialogDescriptionProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/dialog/description.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface DialogDescriptionProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface DialogDescriptionProps extends SvelteHtmlProps<'div'> {
 }
 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/dialog/index.d.ts

@@ -1,8 +1,8 @@
 export { default as Backdrop, type DialogBackdropProps } from './backdrop.svelte';
-export { default as CloseTrigger, type DialogCloseTriggerProps } from './close-trigger.svelte';
+export { default as CloseTrigger, type DialogCloseTriggerProps, } from './close-trigger.svelte';
 export { default as Content, type DialogContentProps } from './content.svelte';
-export { default as Description, type DialogDescriptionProps } from './description.svelte';
-export { default as Positioner, type DialogPositionerProps } from './positioner.svelte';
+export { default as Description, type DialogDescriptionProps, } from './description.svelte';
+export { default as Positioner, type DialogPositionerProps, } from './positioner.svelte';
 export { default as Root, type DialogProps } from './root.svelte';
 export { default as Title, type DialogTitleProps } from './title.svelte';
 export { default as Trigger, type DialogTriggerProps } from './trigger.svelte';

package/dist/dialog/index.js

@@ -1,8 +1,8 @@
 export { default as Backdrop } from './backdrop.svelte';
-export { default as CloseTrigger } from './close-trigger.svelte';
+export { default as CloseTrigger, } from './close-trigger.svelte';
 export { default as Content } from './content.svelte';
-export { default as Description } from './description.svelte';
-export { default as Positioner } from './positioner.svelte';
+export { default as Description, } from './description.svelte';
+export { default as Positioner, } from './positioner.svelte';
 export { default as Root } from './root.svelte';
 export { default as Title } from './title.svelte';
 export { default as Trigger } from './trigger.svelte';

package/dist/dialog/positioner.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface DialogPositionerProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface DialogPositionerProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/dialog/positioner.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface DialogPositionerProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface DialogPositionerProps extends SvelteHtmlProps<'div'> {
 }
 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/dialog/root.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" context="module">
   import type {Snippet} from 'svelte';
-  import type {CreateDialogContextProps, CreateDialogContextReturn} from './context.svelte.js';
+  import type {
+    CreateDialogContextProps,
+    CreateDialogContextReturn,
+  } from './context.svelte.js';
 
-  export interface DialogProps extends OptionalId<CreateDialogContextProps> {
+  export interface DialogProps extends Omit<CreateDialogContextProps, 'id'> {
+    id?: string | null;
     children?: Snippet<[CreateDialogContextReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import type {OptionalId} from '../types.js';
   import {uuid} from '../utils.svelte.js';
   import {createDialogContext, setDialogContext} from './context.svelte.js';
 
-  let {id = uuid(), children, ...props}: DialogProps = $props();
+  let {id, children, ...props}: DialogProps = $props();
 
-  let context = createDialogContext({id, ...props});
+  let context = createDialogContext({
+    id: id ?? uuid(),
+    ...props,
+  });
 
   setDialogContext(context);
 </script>