ui-ingredients 0.0.17 → 0.0.18

package/dist/editable/input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface EditableInputProps extends HtmlIngredientProps<'input'> {}
+  export interface EditableInputProps extends HtmlProps<'input'> {}
 </script>
 
 <script lang="ts">

package/dist/editable/label.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface EditableLabelProps extends HtmlIngredientProps<'label'> {}
+  export interface EditableLabelProps extends HtmlProps<'label'> {}
 </script>
 
 <script lang="ts">

package/dist/editable/preview.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface EditablePreviewProps extends HtmlIngredientProps<'div'> {}
+  export interface EditablePreviewProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/editable/root.svelte

@@ -2,32 +2,18 @@
   import type {Snippet} from 'svelte';
   import type {CreateEditableProps, CreateEditableReturn} from './create-editable.svelte.js';
 
-  export interface EditableProps extends Omit<CreateEditableProps, 'id'> {
-    id?: string | null;
+  export interface EditableProps extends CreateEditableProps {
     children?: Snippet<[api: CreateEditableReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {editableContext} from './context.svelte.js';
   import {createEditable} from './create-editable.svelte.js';
 
-  let {id, dir, getRootNode, children, ...props}: EditableProps = $props();
+  let {children, ...props}: EditableProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
-  let context = createEditable({
-    id: id ?? uid,
-    dir: dir ?? localeContext?.dir,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
-    ...props,
-  });
+  let context = createEditable(props);
 
   editableContext.set(context);
 </script>

package/dist/editable/submit-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface EditableSubmitTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface EditableSubmitTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/environment-provider/root.svelte

@@ -2,23 +2,39 @@
   import type {Snippet} from 'svelte';
   import {type Environment} from './context.svelte.js';
 
-  export interface EnvironmentProviderProps extends Partial<Environment> {
+  export interface EnvironmentProviderProps {
+    rootNode?: ShadowRoot | Document | Node | (() => ShadowRoot | Document | Node);
     children: Snippet;
   }
 </script>
 
 <script lang="ts">
+  import {getDocument, getWindow} from '@zag-js/dom-query';
   import {environmentContext} from './context.svelte.js';
 
-  let {children, ...props}: EnvironmentProviderProps = $props();
+  let {rootNode, children}: EnvironmentProviderProps = $props();
+
+  let elem: HTMLSpanElement | null = $state(null);
+
+  let getRootNode = $derived.by(() => {
+    if (rootNode) {
+      return typeof rootNode === 'function' ? rootNode : () => rootNode;
+    } else {
+      return () => elem?.ownerDocument ?? document;
+    }
+  });
 
   let context: Environment = $derived({
-    getRootNode: props.getRootNode ?? (() => document),
-    getDocument: props.getDocument ?? (() => document),
-    getWindow: props.getWindow ?? (() => window),
+    getRootNode,
+    getDocument: () => getDocument(getRootNode()),
+    getWindow: () => getWindow(getRootNode()),
   });
 
   environmentContext.set(() => context);
 </script>
 
 {@render children()}
+
+{#if !rootNode}
+  <span bind:this={elem} hidden></span>
+{/if}

package/dist/hover-card/arrow-tip.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface HoverCardArrowTipProps extends HtmlIngredientProps<'div'> {}
+  export interface HoverCardArrowTipProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/hover-card/arrow.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface HoverCardArrowProps extends HtmlIngredientProps<'div'> {}
+  export interface HoverCardArrowProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/hover-card/content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface HoverCardContentProps extends HtmlIngredientProps<'div'> {}
+  export interface HoverCardContentProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/hover-card/create-hover-card.svelte.d.ts

@@ -1,5 +1,6 @@
 import * as hoverCard from '@zag-js/hover-card';
-export interface CreateHoverCardProps extends hoverCard.Context {
+export interface CreateHoverCardProps extends Omit<hoverCard.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
+    id?: string | null;
 }
 export interface CreateHoverCardReturn extends hoverCard.Api {
 }

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

@@ -1,7 +1,18 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import * as hoverCard from '@zag-js/hover-card';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createHoverCard(props) {
-    const [state, send] = useMachine(hoverCard.machine(props));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(hoverCard.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+        'open.controlled': props.open != null,
+    }));
     const api = $derived(reflect(() => hoverCard.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/hover-card/positioner.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface HoverCardPositionerProps extends HtmlIngredientProps<'div'> {}
+  export interface HoverCardPositionerProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/hover-card/root.svelte

@@ -2,32 +2,18 @@
   import type {Snippet} from 'svelte';
   import type {CreateHoverCardProps, CreateHoverCardReturn} from './create-hover-card.svelte.js';
 
-  export interface HoverCardProps extends Omit<CreateHoverCardProps, 'id'> {
-    id?: string | null;
+  export interface HoverCardProps extends CreateHoverCardProps {
     children?: Snippet<[api: CreateHoverCardReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {hoverCardContext} from './context.svelte.js';
   import {createHoverCard} from './create-hover-card.svelte.js';
 
-  let {id, dir, getRootNode, children, ...props}: HoverCardProps = $props();
+  let {id, children, ...props}: HoverCardProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
-  let context = createHoverCard({
-    id: id ?? uid,
-    dir: dir ?? localeContext?.dir,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
-    ...props,
-  });
+  let context = createHoverCard({id, ...props});
 
   hoverCardContext.set(context);
 </script>

package/dist/hover-card/trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface HoverCardTriggerProps extends HtmlIngredientProps<'a'> {}
+  export interface HoverCardTriggerProps extends HtmlProps<'a'> {}
 </script>
 
 <script lang="ts">

package/dist/menu/arrow-tip.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface MenuArrowTipProps extends HtmlIngredientProps<'div'> {}
+  export interface MenuArrowTipProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/menu/arrow.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface MenuArrowProps extends HtmlIngredientProps<'div'> {}
+  export interface MenuArrowProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/menu/content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface MenuContentProps extends HtmlIngredientProps<'div'> {}
+  export interface MenuContentProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/menu/context-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface MenuContextTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface MenuContextTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/menu/create-menu.svelte.d.ts

@@ -1,5 +1,6 @@
 import * as menu from '@zag-js/menu';
-export interface CreateMenuProps extends menu.Context {
+export interface CreateMenuProps extends Omit<menu.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
+    id?: string | null;
 }
 export interface CreateMenuReturn extends menu.Api {
 }

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

@@ -1,7 +1,18 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import * as menu from '@zag-js/menu';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createMenu(props) {
-    const [state, send] = useMachine(menu.machine(props));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(menu.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+        'open.controlled': props.open != null,
+    }));
     const api = $derived(reflect(() => menu.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/menu/indicator.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface MenuIndicatorProps extends HtmlIngredientProps<'span'> {}
+  export interface MenuIndicatorProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface MenuItemGroupLabelProps extends HtmlIngredientProps<'span'> {}
+  export interface MenuItemGroupLabelProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/menu/item-group.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ItemGroupProps} from '@zag-js/menu';
 
   export interface MenuItemGroupProps
-    extends Assign<HtmlIngredientProps<'div'>, Omit<ItemGroupProps, 'id'>> {}
+    extends Assign<HtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {}
 </script>
 
 <script lang="ts">

package/dist/menu/item.svelte

@@ -1,10 +1,9 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/menu';
   import type {Snippet} from 'svelte';
 
-  export interface MenuItemProps
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, ItemProps> {
+  export interface MenuItemProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
     children?: Snippet<[state: ItemState]>;
   }
 </script>

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface MenuOptionItemIndicatorProps extends HtmlIngredientProps<'span'> {}
+  export interface MenuOptionItemIndicatorProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface MenuOptionItemTextProps extends HtmlIngredientProps<'span'> {}
+  export interface MenuOptionItemTextProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/menu/option-item.svelte

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

package/dist/menu/positioner.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface MenuPositionerProps extends HtmlIngredientProps<'div'> {}
+  export interface MenuPositionerProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/menu/root.svelte

@@ -2,72 +2,18 @@
   import type {Snippet} from 'svelte';
   import {type CreateMenuProps, type CreateMenuReturn} from './create-menu.svelte.js';
 
-  export interface MenuRootProps extends Omit<CreateMenuProps, 'id'> {
-    id?: string | null;
+  export interface MenuRootProps extends CreateMenuProps {
     children?: Snippet<[api: CreateMenuReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {menuContext} from './context.svelte.js';
   import {createMenu} from './create-menu.svelte.js';
 
-  let {
-    id,
-    ids,
-    dir,
-    open,
-    'open.controlled': openControlled,
-    loopFocus,
-    typeahead,
-    composite,
-    positioning,
-    anchorPoint,
-    closeOnSelect,
-    'aria-label': ariaLabel,
-    highlightedValue,
-    onSelect,
-    onOpenChange,
-    onFocusOutside,
-    onEscapeKeyDown,
-    onHighlightChange,
-    onInteractOutside,
-    onPointerDownOutside,
-    getRootNode,
-    children,
-  }: MenuRootProps = $props();
+  let {children, ...props}: MenuRootProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmnetContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
-  let context = createMenu({
-    id: id ?? uid,
-    ids,
-    dir: dir ?? localeContext?.dir,
-    open,
-    'open.controlled': openControlled,
-    loopFocus,
-    typeahead,
-    composite,
-    positioning,
-    anchorPoint,
-    closeOnSelect,
-    'aria-label': ariaLabel,
-    highlightedValue,
-    onSelect,
-    onOpenChange,
-    onFocusOutside,
-    onEscapeKeyDown,
-    onHighlightChange,
-    onInteractOutside,
-    onPointerDownOutside,
-    getRootNode: getRootNode ?? environmnetContext?.getRootNode,
-  });
+  let context = createMenu(props);
 
   menuContext.set(context);
 </script>

package/dist/menu/separator.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface MenuSeparatorProps extends HtmlIngredientProps<'div'> {}
+  export interface MenuSeparatorProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/menu/trigger-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface MenuTriggerItemIndicatorProps extends HtmlIngredientProps<'button'> {}
+  export interface MenuTriggerItemIndicatorProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/menu/trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface MenuTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface MenuTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/number-input/control.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface NumberInputControlTriggerProps extends HtmlIngredientProps<'div'> {}
+  export interface NumberInputControlTriggerProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/number-input/create-number-input.svelte.d.ts

@@ -1,5 +1,6 @@
 import * as numberInput from '@zag-js/number-input';
-export interface CreateNumberInputProps extends numberInput.Context {
+export interface CreateNumberInputProps extends Omit<numberInput.Context, 'id' | 'dir' | 'locale' | 'getRootNode'> {
+    id?: string | null;
 }
 export interface CreateNumberInputReturn extends numberInput.Api {
 }

package/dist/number-input/create-number-input.svelte.js

@@ -1,7 +1,18 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import * as numberInput from '@zag-js/number-input';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createNumberInput(props) {
-    const [state, send] = useMachine(numberInput.machine(props));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(numberInput.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        locale: localeContext?.locale,
+        getRootNode: environmentContext?.getRootNode,
+    }));
     const api = $derived(reflect(() => numberInput.connect(state, send, normalizeProps)));
     return api;
 }

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface NumberInputDecrementTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface NumberInputDecrementTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface NumberInputIncrementTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface NumberInputIncrementTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/number-input/input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface NumberInputInputProps extends HtmlIngredientProps<'input'> {}
+  export interface NumberInputInputProps extends HtmlProps<'input'> {}
 </script>
 
 <script lang="ts">

package/dist/number-input/label.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface NumberInputLabelProps extends HtmlIngredientProps<'label'> {}
+  export interface NumberInputLabelProps extends HtmlProps<'label'> {}
 </script>
 
 <script lang="ts">