ui-ingredients 0.0.8 → 0.0.9

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

@@ -1,8 +1,7 @@
-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 { CreateCarouselContextProps, CreateCarouselContextReturn } from './context.svelte.js';
-export interface CarouselProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateCarouselContextProps>> {
+export interface CarouselProps extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, Omit<CreateCarouselContextProps, 'id'>> {
     children?: Snippet<[context: CreateCarouselContextReturn]>;
 }
 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> {

package/dist/carousel/viewport.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 CarouselViewportProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface CarouselViewportProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/carousel/viewport.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface CarouselViewportProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface CarouselViewportProps 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/checkbox/control.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 CheckboxControlProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface CheckboxControlProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/checkbox/control.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface CheckboxControlProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface CheckboxControlProps 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/checkbox/hidden-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 CheckboxHiddenInputProps extends Assign<SvelteHTMLElements['input'], {}> {}
+  export interface CheckboxHiddenInputProps extends SvelteHtmlProps<'input'> {}
 </script>
 
 <script lang="ts">

package/dist/checkbox/hidden-input.svelte.d.ts

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

@@ -1,5 +1,5 @@
 export { default as Control, type CheckboxControlProps } from './control.svelte';
-export { default as HiddenInput, type CheckboxHiddenInputProps } from './hidden-input.svelte';
-export { default as Indicator, type CheckboxIndicatorProps } from './indicator.svelte';
+export { default as HiddenInput, type CheckboxHiddenInputProps, } from './hidden-input.svelte';
+export { default as Indicator, type CheckboxIndicatorProps, } from './indicator.svelte';
 export { default as Label, type CheckboxLabelProps } from './label.svelte';
 export { default as Root, type CheckboxProps } from './root.svelte';

package/dist/checkbox/index.js

@@ -1,5 +1,5 @@
 export { default as Control } from './control.svelte';
-export { default as HiddenInput } from './hidden-input.svelte';
-export { default as Indicator } from './indicator.svelte';
+export { default as HiddenInput, } from './hidden-input.svelte';
+export { default as Indicator, } from './indicator.svelte';
 export { default as Label } from './label.svelte';
 export { default as Root } from './root.svelte';

package/dist/checkbox/indicator.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 CheckboxIndicatorProps extends Assign<SvelteHTMLElements['span'], {}> {}
+  export interface CheckboxIndicatorProps extends SvelteHtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/checkbox/indicator.svelte.d.ts

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

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface CheckboxLabelProps extends Assign<SvelteHTMLElements['span'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface CheckboxLabelProps 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/checkbox/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 {CreateCheckboxContextProps, CreateCheckboxContextReturn} from './context.svelte.js';
+  import type {
+    CreateCheckboxContextProps,
+    CreateCheckboxContextReturn,
+  } from './context.svelte.js';
 
   export interface CheckboxProps
     extends Assign<
-      WithoutChildren<SvelteHTMLElements['label']>,
-      OptionalId<CreateCheckboxContextProps>
+      Omit<SvelteHtmlProps<'label'>, 'children'>,
+      Omit<CreateCheckboxContextProps, 'id'>
     > {
-    children?: Snippet<[CreateCheckboxContextReturn]>;
+    children?: Snippet<[context: CreateCheckboxContextReturn]>;
   }
 </script>
 
@@ -19,7 +21,7 @@
   import {createCheckboxContext, setCheckboxContext} from './context.svelte.js';
 
   let {
-    id = uuid(),
+    id,
     ids,
     dir,
     form,
@@ -37,7 +39,7 @@
   }: CheckboxProps = $props();
 
   let context = createCheckboxContext({
-    id,
+    id: id ?? uuid(),
     ids,
     dir,
     form,

package/dist/checkbox/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 { CreateCheckboxContextProps, CreateCheckboxContextReturn } from './context.svelte.js';
-export interface CheckboxProps extends Assign<WithoutChildren<SvelteHTMLElements['label']>, OptionalId<CreateCheckboxContextProps>> {
-    children?: Snippet<[CreateCheckboxContextReturn]>;
+export interface CheckboxProps extends Assign<Omit<SvelteHtmlProps<'label'>, 'children'>, Omit<CreateCheckboxContextProps, 'id'>> {
+    children?: Snippet<[context: CreateCheckboxContextReturn]>;
 }
 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/clipboard/control.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 ClipboardControlProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface ClipboardControlProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/clipboard/control.svelte.d.ts

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

@@ -1,5 +1,5 @@
 export { default as Control, type ClipboardControlProps } from './control.svelte';
-export { default as Indicator, type ClipboardIndicatorProps } from './indicator.svelte';
+export { default as Indicator, type ClipboardIndicatorProps, } from './indicator.svelte';
 export { default as Input, type ClipboardInputProps } from './input.svelte';
 export { default as Label, type ClipboardLabelProps } from './label.svelte';
 export { default as Root, type ClipboardProps } from './root.svelte';

package/dist/clipboard/index.js

@@ -1,5 +1,5 @@
 export { default as Control } from './control.svelte';
-export { default as Indicator } from './indicator.svelte';
+export { default as Indicator, } from './indicator.svelte';
 export { default as Input } from './input.svelte';
 export { default as Label } from './label.svelte';
 export { default as Root } from './root.svelte';

package/dist/clipboard/indicator.svelte

@@ -1,10 +1,9 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
   import type {IndicatorProps} from '@zag-js/clipboard';
-  import type {SvelteHTMLElements} from 'svelte/elements';
 
   export interface ClipboardIndicatorProps
-    extends Assign<SvelteHTMLElements['span'], Partial<IndicatorProps>> {}
+    extends Assign<SvelteHtmlProps<'span'>, Partial<IndicatorProps>> {}
 </script>
 
 <script lang="ts">

package/dist/clipboard/indicator.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { Assign } from '../types.js';
+import type { Assign, SvelteHtmlProps } from '../types.js';
 import type { IndicatorProps } from '@zag-js/clipboard';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface ClipboardIndicatorProps extends Assign<SvelteHTMLElements['span'], Partial<IndicatorProps>> {
+export interface ClipboardIndicatorProps extends Assign<SvelteHtmlProps<'span'>, Partial<IndicatorProps>> {
 }
 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/clipboard/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 ClipboardInputProps extends Assign<SvelteHTMLElements['input'], {}> {}
+  export interface ClipboardInputProps extends SvelteHtmlProps<'input'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface ClipboardInputProps extends Assign<SvelteHTMLElements['input'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface ClipboardInputProps 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/clipboard/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 ClipboardLabelProps extends Assign<SvelteHTMLElements['label'], {}> {}
+  export interface ClipboardLabelProps extends SvelteHtmlProps<'label'> {}
 </script>
 
 <script lang="ts">

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

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

@@ -1,7 +1,6 @@
 <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 {
     CreateClipboardContextProps,
     CreateClipboardContextReturn,
@@ -9,20 +8,23 @@
 
   export interface ClipboardProps
     extends Assign<
-      WithoutChildren<SvelteHTMLElements['div']>,
-      OptionalId<CreateClipboardContextProps>
+      Omit<SvelteHtmlProps<'div'>, 'children'>,
+      Omit<CreateClipboardContextProps, 'id'>
     > {
-    children?: Snippet<[CreateClipboardContextReturn]>;
+    children?: Snippet<[context: CreateClipboardContextReturn]>;
   }
 </script>
 
 <script lang="ts">
   import {uuid} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
-  import {createClipboardContext, setClipboardContext} from './context.svelte.js';
+  import {
+    createClipboardContext,
+    setClipboardContext,
+  } from './context.svelte.js';
 
   let {
-    id = uuid(),
+    id,
     ids,
     value,
     timeout,
@@ -33,7 +35,7 @@
   }: ClipboardProps = $props();
 
   let context = createClipboardContext({
-    id,
+    id: id ?? uuid(),
     ids,
     value: $state.snapshot(value),
     timeout,

package/dist/clipboard/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 { CreateClipboardContextProps, CreateClipboardContextReturn } from './context.svelte.js';
-export interface ClipboardProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateClipboardContextProps>> {
-    children?: Snippet<[CreateClipboardContextReturn]>;
+export interface ClipboardProps extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, Omit<CreateClipboardContextProps, 'id'>> {
+    children?: Snippet<[context: CreateClipboardContextReturn]>;
 }
 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/clipboard/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 ClipboardTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+  export interface ClipboardTriggerProps extends SvelteHtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface ClipboardTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface ClipboardTriggerProps 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/collapsible/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 CollapsibleContentProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface CollapsibleContentProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

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

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

@@ -1,3 +1,3 @@
-export { default as Content, type CollapsibleContentProps } from './content.svelte';
+export { default as Content, type CollapsibleContentProps, } from './content.svelte';
 export { default as Root, type CollapsibleProps } from './root.svelte';
-export { default as Trigger, type CollapsibleTriggerProps } from './trigger.svelte';
+export { default as Trigger, type CollapsibleTriggerProps, } from './trigger.svelte';

package/dist/collapsible/index.js

@@ -1,3 +1,3 @@
-export { default as Content } from './content.svelte';
+export { default as Content, } from './content.svelte';
 export { default as Root } from './root.svelte';
-export { default as Trigger } from './trigger.svelte';
+export { default as Trigger, } from './trigger.svelte';

package/dist/collapsible/root.svelte

@@ -1,7 +1,6 @@
 <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 {
     CreateCollapsibleContextProps,
     CreateCollapsibleContextReturn,
@@ -9,20 +8,23 @@
 
   export interface CollapsibleProps
     extends Assign<
-      WithoutChildren<SvelteHTMLElements['div']>,
-      OptionalId<CreateCollapsibleContextProps>
+      Omit<SvelteHtmlProps<'div'>, 'children'>,
+      Omit<CreateCollapsibleContextProps, 'id'>
     > {
-    children?: Snippet<[CreateCollapsibleContextReturn]>;
+    children?: Snippet<[context: CreateCollapsibleContextReturn]>;
   }
 </script>
 
 <script lang="ts">
   import {uuid} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
-  import {createCollapsibleContext, setCollapsibleContext} from './context.svelte.js';
+  import {
+    createCollapsibleContext,
+    setCollapsibleContext,
+  } from './context.svelte.js';
 
   let {
-    id = uuid(),
+    id,
     ids,
     dir,
     open,
@@ -36,7 +38,7 @@
   }: CollapsibleProps = $props();
 
   let context = createCollapsibleContext({
-    id,
+    id: id ?? uuid(),
     ids,
     dir,
     open,

package/dist/collapsible/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 { CreateCollapsibleContextProps, CreateCollapsibleContextReturn } from './context.svelte.js';
-export interface CollapsibleProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateCollapsibleContextProps>> {
-    children?: Snippet<[CreateCollapsibleContextReturn]>;
+export interface CollapsibleProps extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, Omit<CreateCollapsibleContextProps, 'id'>> {
+    children?: Snippet<[context: CreateCollapsibleContextReturn]>;
 }
 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/collapsible/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 CollapsibleTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+  export interface CollapsibleTriggerProps extends SvelteHtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

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

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

@@ -1,8 +1,8 @@
 <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 ComboboxClearTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+  export interface ComboboxClearTriggerProps
+    extends SvelteHtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface ComboboxClearTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface ComboboxClearTriggerProps 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/combobox/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 ComboboxContentProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface ComboboxContentProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

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

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

@@ -4,9 +4,9 @@ import { getContext, setContext } from 'svelte';
 export function createComboboxContext(props) {
     const collection = $derived(combobox.collection({
         items: props.items,
-        itemToValue: (item) => (props.itemToValue ? props.itemToValue(item) : String(item)),
-        itemToString: (item) => (props.itemToString ? props.itemToString(item) : String(item)),
-        isItemDisabled: (item) => (props.isItemDisabled ? props.isItemDisabled(item) : false),
+        itemToValue: (item) => props.itemToValue ? props.itemToValue(item) : String(item),
+        itemToString: (item) => props.itemToString ? props.itemToString(item) : String(item),
+        isItemDisabled: (item) => props.isItemDisabled ? props.isItemDisabled(item) : false,
     }));
     const [state, send] = useMachine(combobox.machine({
         ...props,

package/dist/combobox/control.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 ComboboxControlProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface ComboboxControlProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

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

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