ui-ingredients 0.0.7 → 0.0.9

package/dist/select/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/select';
-  import type {SvelteHTMLElements} from 'svelte/elements';
 
   export interface SelectItemGroupProps
-    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 {setSelectItemGroupContext, useSelectContext} from './context.svelte.js';
+  import {
+    setSelectItemGroupContext,
+    useSelectContext,
+  } from './context.svelte.js';
 
-  let {id = uuid(), children, ...props}: SelectItemGroupProps = $props();
+  let {id, children, ...props}: SelectItemGroupProps = $props();
 
   let context = useSelectContext();
 
-  let attrs = $derived(mergeProps(props, context.getItemGroupProps({id})));
+  let uid = uuid();
 
-  setSelectItemGroupContext({id});
+  let attrs = $derived(
+    mergeProps(props, context.getItemGroupProps({id: id ?? uid})),
+  );
+
+  setSelectItemGroupContext({id: id ?? uid});
 </script>
 
 <div {...attrs}>

package/dist/select/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/select';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface SelectItemGroupProps extends Assign<SvelteHTMLElements['div'], OptionalId<ItemGroupProps>> {
+export interface SelectItemGroupProps 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/select/item-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 SelectItemIndicatorProps extends Assign<SvelteHTMLElements['span'], {}> {}
+  export interface SelectItemIndicatorProps extends SvelteHtmlProps<'span'> {}
 </script>
 
 <script lang="ts">
@@ -14,7 +13,9 @@
   let context = useSelectContext();
   let itemContext = useSelectItemContext();
 
-  let attrs = $derived(mergeProps(props, context.getItemIndicatorProps(itemContext)));
+  let attrs = $derived(
+    mergeProps(props, context.getItemIndicatorProps(itemContext)),
+  );
 </script>
 
 <span {...attrs}>

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface SelectItemIndicatorProps extends Assign<SvelteHTMLElements['span'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface SelectItemIndicatorProps 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/select/item-text.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 SelectItemTextProps extends Assign<SvelteHTMLElements['span'], {}> {}
+  export interface SelectItemTextProps extends SvelteHtmlProps<'span'> {}
 </script>
 
 <script lang="ts">
@@ -14,7 +13,9 @@
   let context = useSelectContext();
   let itemContext = useSelectItemContext();
 
-  let attrs = $derived(mergeProps(props, context.getItemTextProps(itemContext)));
+  let attrs = $derived(
+    mergeProps(props, context.getItemTextProps(itemContext)),
+  );
 </script>
 
 <span {...attrs}>

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

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

@@ -1,9 +1,12 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {ItemProps} from '@zag-js/select';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/select';
+  import type {Snippet} from 'svelte';
 
-  export interface SelectItemProps extends Assign<SvelteHTMLElements['div'], ItemProps> {}
+  export interface SelectItemProps
+    extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, ItemProps> {
+    children?: Snippet<[state: ItemState]>;
+  }
 </script>
 
 <script lang="ts">
@@ -14,6 +17,13 @@
 
   let context = useSelectContext();
 
+  let state = $derived(
+    context.getItemState({
+      item,
+      persistFocus,
+    }),
+  );
+
   let attrs = $derived(
     mergeProps(
       props,
@@ -31,5 +41,5 @@
 </script>
 
 <div {...attrs}>
-  {@render children?.()}
+  {@render children?.(state)}
 </div>

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

@@ -1,7 +1,8 @@
-import type { Assign } from '../types.js';
-import type { ItemProps } from '@zag-js/select';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface SelectItemProps extends Assign<SvelteHTMLElements['div'], ItemProps> {
+import type { Assign, SvelteHtmlProps } from '../types.js';
+import type { ItemProps, ItemState } from '@zag-js/select';
+import type { Snippet } from 'svelte';
+export interface SelectItemProps 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/select/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 SelectLabelProps extends Assign<SvelteHTMLElements['label'], {}> {}
+  export interface SelectLabelProps extends SvelteHtmlProps<'label'> {}
 </script>
 
 <script lang="ts">

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

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

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

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

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface SelectPositionerProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface SelectPositionerProps 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/select/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 {CreateSelectContextProps, CreateSelectContextReturn} from './context.svelte.js';
+  import type {
+    CreateSelectContextProps,
+    CreateSelectContextReturn,
+  } from './context.svelte.js';
 
   export interface SelectProps<T>
     extends Assign<
-      WithoutChildren<SvelteHTMLElements['div']>,
-      OptionalId<CreateSelectContextProps<T>>
+      Omit<SvelteHtmlProps<'div'>, 'children'>,
+      Omit<CreateSelectContextProps<T>, 'id'>
     > {
-    children?: Snippet<[CreateSelectContextReturn]>;
+    children?: Snippet<[context: CreateSelectContextReturn]>;
   }
 </script>
 
@@ -19,7 +21,7 @@
   import {createSelectContext, setSelectContext} from './context.svelte.js';
 
   let {
-    id = uuid(),
+    id,
     ids,
     dir,
     form,
@@ -54,7 +56,7 @@
   }: SelectProps<T> = $props();
 
   let context = createSelectContext({
-    id,
+    id: id ?? uuid(),
     ids,
     dir,
     form,

package/dist/select/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 { CreateSelectContextProps, CreateSelectContextReturn } from './context.svelte.js';
-export interface SelectProps<T> extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateSelectContextProps<T>>> {
-    children?: Snippet<[CreateSelectContextReturn]>;
+export interface SelectProps<T> extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, Omit<CreateSelectContextProps<T>, 'id'>> {
+    children?: Snippet<[context: CreateSelectContextReturn]>;
 }
 declare class __sveltets_Render<T> {
     props(): SelectProps<T>;

package/dist/select/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 SelectTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+  export interface SelectTriggerProps extends SvelteHtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

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

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

package/dist/select/value-text.svelte.d.ts

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

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface SliderControlProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface SliderControlProps 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/slider/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 SliderHiddenInputProps extends Assign<SvelteHTMLElements['input'], {}> {}
+  export interface SliderHiddenInputProps extends SvelteHtmlProps<'input'> {}
 </script>
 
 <script lang="ts">
@@ -14,7 +13,9 @@
   let context = useSliderContext();
   let thumbContext = useSliderThumbContext();
 
-  let attrs = $derived(mergeProps(props, context.getHiddenInputProps(thumbContext)));
+  let attrs = $derived(
+    mergeProps(props, context.getHiddenInputProps(thumbContext)),
+  );
 </script>
 
 <input {...attrs} />

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

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

@@ -1,10 +1,10 @@
 export { default as Control, type SliderControlProps } from './control.svelte';
-export { default as HiddenInput, type SliderHiddenInputProps } from './hidden-input.svelte';
+export { default as HiddenInput, type SliderHiddenInputProps, } from './hidden-input.svelte';
 export { default as Label, type SliderLabelProps } from './label.svelte';
-export { default as MarkerGroup, type SliderMarkerGroupProps } from './marker-group.svelte';
+export { default as MarkerGroup, type SliderMarkerGroupProps, } from './marker-group.svelte';
 export { default as Marker, type SliderMarkerProps } from './marker.svelte';
 export { default as Range, type SliderRangeProps } from './range.svelte';
 export { default as Root, type SliderProps } from './root.svelte';
 export { default as Thumb, type SliderThumbProps } from './thumb.svelte';
 export { default as Track, type SliderTrackProps } from './track.svelte';
-export { default as ValueText, type SliderValueTextProps } from './value-text.svelte';
+export { default as ValueText, type SliderValueTextProps, } from './value-text.svelte';

package/dist/slider/index.js

@@ -1,10 +1,10 @@
 export { default as Control } from './control.svelte';
-export { default as HiddenInput } from './hidden-input.svelte';
+export { default as HiddenInput, } from './hidden-input.svelte';
 export { default as Label } from './label.svelte';
-export { default as MarkerGroup } from './marker-group.svelte';
+export { default as MarkerGroup, } from './marker-group.svelte';
 export { default as Marker } from './marker.svelte';
 export { default as Range } from './range.svelte';
 export { default as Root } from './root.svelte';
 export { default as Thumb } from './thumb.svelte';
 export { default as Track } from './track.svelte';
-export { default as ValueText } from './value-text.svelte';
+export { default as ValueText, } from './value-text.svelte';

package/dist/slider/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 SliderLabelProps extends Assign<SvelteHTMLElements['label'], {}> {}
+  export interface SliderLabelProps extends SvelteHtmlProps<'label'> {}
 </script>
 
 <script lang="ts">

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

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

package/dist/slider/marker-group.svelte.d.ts

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

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

package/dist/slider/marker.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { Assign } from '../types.js';
+import type { Assign, SvelteHtmlProps } from '../types.js';
 import type { MarkerProps } from '@zag-js/slider';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface SliderMarkerProps extends Assign<SvelteHTMLElements['span'], MarkerProps> {
+export interface SliderMarkerProps extends Assign<SvelteHtmlProps<'span'>, MarkerProps> {
 }
 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/slider/range.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 SliderRangeProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface SliderRangeProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/slider/range.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface SliderRangeProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface SliderRangeProps 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/slider/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 {CreateSliderContextProps, CreateSliderContextReturn} from './context.svelte.js';
+  import type {
+    CreateSliderContextProps,
+    CreateSliderContextReturn,
+  } from './context.svelte.js';
 
   export interface SliderProps
     extends Assign<
-      WithoutChildren<SvelteHTMLElements['div']>,
-      OptionalId<CreateSliderContextProps>
+      Omit<SvelteHtmlProps<'div'>, 'children'>,
+      Omit<CreateSliderContextProps, 'id'>
     > {
-    children?: Snippet<[CreateSliderContextReturn]>;
+    children?: Snippet<[context: CreateSliderContextReturn]>;
   }
 </script>
 
@@ -19,7 +21,7 @@
   import {createSliderContext, setSliderContext} from './context.svelte.js';
 
   let {
-    id = uuid(),
+    id,
     ids,
     dir,
     max,
@@ -48,7 +50,7 @@
   }: SliderProps = $props();
 
   let context = createSliderContext({
-    id,
+    id: id ?? uuid(),
     ids,
     dir,
     max,

package/dist/slider/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 { CreateSliderContextProps, CreateSliderContextReturn } from './context.svelte.js';
-export interface SliderProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateSliderContextProps>> {
-    children?: Snippet<[CreateSliderContextReturn]>;
+export interface SliderProps extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, Omit<CreateSliderContextProps, 'id'>> {
+    children?: Snippet<[context: CreateSliderContextReturn]>;
 }
 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/slider/thumb.svelte

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

package/dist/slider/thumb.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { Assign } from '../types.js';
+import type { Assign, SvelteHtmlProps } from '../types.js';
 import type { ThumbProps } from '@zag-js/slider';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface SliderThumbProps extends Assign<SvelteHTMLElements['div'], ThumbProps> {
+export interface SliderThumbProps extends Assign<SvelteHtmlProps<'div'>, ThumbProps> {
 }
 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/slider/track.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 SliderTrackProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface SliderTrackProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">