ui-ingredients 0.0.41 → 0.0.43

package/dist/menu/root.svelte

@@ -1,11 +1,14 @@
 <script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
   import type {Snippet} from 'svelte';
   import {
     type CreateMenuProps,
     type CreateMenuReturn,
   } from './create-menu.svelte.js';
 
-  export interface MenuRootProps extends CreateMenuProps {
+  export interface MenuRootProps
+    extends CreateMenuProps,
+      PresenceStrategyProps {
     children?: Snippet<[CreateMenuReturn]>;
   }
 </script>
@@ -13,16 +16,49 @@
 <script lang="ts">
   import {setPresenceContext} from '../presence/context.svelte.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
   import {setMenuContext} from './context.svelte.js';
   import {createMenu} from './create-menu.svelte.js';
 
   let {children, ...props}: MenuRootProps = $props();
 
-  let menu = createMenu(props);
+  let [menuProps, presenceStrategyProps] = $derived(
+    createSplitProps<CreateMenuProps>([
+      'anchorPoint',
+      'aria-label',
+      'closeOnSelect',
+      'composite',
+      'defaultOpen',
+      'highlightedValue',
+      'id',
+      'ids',
+      'loopFocus',
+      'onEscapeKeyDown',
+      'onFocusOutside',
+      'onHighlightChange',
+      'onInteractOutside',
+      'onOpenChange',
+      'onPointerDownOutside',
+      'onSelect',
+      'open',
+      'positioning',
+      'typeahead',
+    ])(props),
+  );
+
+  let menu = createMenu(reflect(() => menuProps));
+
   let presence = createPresence({
     get present() {
       return menu.open;
     },
+    get lazyMount() {
+      return presenceStrategyProps.lazyMount;
+    },
+    get keepMounted() {
+      return presenceStrategyProps.keepMounted;
+    },
   });
 
   setMenuContext(menu);

package/dist/popover/content.svelte

@@ -21,10 +21,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(presence.ref, mergedProps)}
-{:else}
-  <div use:presence.ref {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.ref, mergedProps)}
+  {:else}
+    <div use:presence.ref {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/popover/positioner.svelte

@@ -23,10 +23,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(mergedProps)}
+  {:else}
+    <div {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/popover/root.svelte

@@ -1,11 +1,14 @@
 <script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
   import type {Snippet} from 'svelte';
   import type {
     CreatePopoverProps,
     CreatePopoverReturn,
   } from './create-popover.svelte.js';
 
-  export interface PopoverProps extends CreatePopoverProps {
+  export interface PopoverProps
+    extends CreatePopoverProps,
+      PresenceStrategyProps {
     children?: Snippet<[CreatePopoverReturn]>;
   }
 </script>
@@ -13,16 +16,46 @@
 <script lang="ts">
   import {setPresenceContext} from '../presence/context.svelte.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
   import {setPopoverContext} from './context.svelte.js';
   import {createPopover} from './create-popover.svelte.js';
 
   let {children, ...props}: PopoverProps = $props();
 
-  let popover = createPopover(props);
+  let [popoverProps, presenceStrategyProps] = $derived(
+    createSplitProps<CreatePopoverProps>([
+      'autoFocus',
+      'closeOnEscape',
+      'closeOnInteractOutside',
+      'defaultOpen',
+      'id',
+      'ids',
+      'initialFocusEl',
+      'modal',
+      'onEscapeKeyDown',
+      'onFocusOutside',
+      'onInteractOutside',
+      'onOpenChange',
+      'onPointerDownOutside',
+      'open',
+      'persistentElements',
+      'portalled',
+      'positioning',
+    ])(props),
+  );
+
+  let popover = createPopover(reflect(() => popoverProps));
   let presence = createPresence({
     get present() {
       return popover.open;
     },
+    get lazyMount() {
+      return presenceStrategyProps.lazyMount;
+    },
+    get keepMounted() {
+      return presenceStrategyProps.keepMounted;
+    },
   });
 
   setPopoverContext(popover);

package/dist/portal/root.svelte

@@ -1,28 +1,32 @@
-<script module lang="ts">
-  import {type Snippet} from 'svelte';
-
-  export interface PortalProps {
-    container?: HTMLElement;
-    disabled?: boolean;
-    children: Snippet;
-  }
-</script>
-
-<script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {portal} from '@zag-js/svelte';
-
-  let {container, disabled, children}: PortalProps = $props();
-
-  let environment = getEnvironmentContext();
-</script>
-
-<div
-  use:portal={{
-    disabled,
-    container,
-    getRootNode: environment?.getRootNode,
-  }}
->
-  {@render children?.()}
-</div>
+<script module lang="ts">
+  import {type Snippet} from 'svelte';
+
+  export interface PortalProps {
+    container?: HTMLElement;
+    disabled?: boolean;
+    children: Snippet;
+    [x: `data-${string}`]: string | number | boolean | null | undefined;
+  }
+</script>
+
+<script lang="ts">
+  import {getEnvironmentContext} from '../environment-provider/index.js';
+  import {portal} from '@zag-js/svelte';
+
+  let {container, disabled, children, ...props}: PortalProps = $props();
+
+  let environment = getEnvironmentContext();
+</script>
+
+<div
+  use:portal={{
+    disabled,
+    container,
+    getRootNode: environment?.getRootNode,
+  }}
+  data-scope="portal"
+  data-part="root"
+  {...props}
+>
+  {@render children?.()}
+</div>

package/dist/presence/context.svelte.d.ts

@@ -1,2 +1,3 @@
-import type { CreatePresenceReturn } from './create-presence.svelte.js';
+import type { CreatePresenceReturn, PresenceStrategyProps } from './create-presence.svelte.js';
 export declare const getPresenceContext: () => CreatePresenceReturn, setPresenceContext: (context: CreatePresenceReturn | (() => CreatePresenceReturn)) => void;
+export declare const getPresenceStrategyPropsContext: () => PresenceStrategyProps, setPresenceStrategyPropsContext: (context: PresenceStrategyProps | (() => PresenceStrategyProps)) => void;

package/dist/presence/context.svelte.js

@@ -1,2 +1,3 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getPresenceContext, setPresenceContext] = createContext('Presence');
+export const [getPresenceStrategyPropsContext, setPresenceStrategyPropsContext,] = createContext('PresenceStrategyProps');

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

@@ -1,10 +1,17 @@
 import type { HTMLAttributes } from 'svelte/elements';
-export interface CreatePresenceProps {
-    present?: boolean;
+export interface PresenceStrategyProps {
+    /** @default false */
+    lazyMount?: boolean;
+    /** @default true */
+    keepMounted?: boolean;
+}
+export interface CreatePresenceProps extends PresenceStrategyProps {
+    present: boolean;
 }
 export interface CreatePresenceReturn extends ReturnType<typeof createPresence> {
 }
 export declare function createPresence(props: CreatePresenceProps): {
     ref: (node: HTMLElement) => void;
     getPresenceProps: () => HTMLAttributes<HTMLElement>;
+    readonly mounted: boolean;
 };

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

@@ -1,10 +1,12 @@
 import * as presence from '@zag-js/presence';
 import { normalizeProps, useMachine } from '@zag-js/svelte';
-import { tick } from 'svelte';
 export function createPresence(props) {
+    const present = $derived(props.present);
+    const lazyMount = $derived(props.lazyMount ?? false);
+    const keepMounted = $derived(props.keepMounted ?? true);
     const context = $derived({
         get present() {
-            return props.present;
+            return present;
         },
     });
     const [state, send] = useMachine(presence.machine(context), { context });
@@ -15,13 +17,31 @@ export function createPresence(props) {
             'data-state': context.present ? 'open' : 'closed',
         };
     }
+    let wasPresent = $state(false);
+    $effect(() => {
+        if (!api.present)
+            return;
+        if (wasPresent)
+            return;
+        wasPresent = true;
+    });
+    const unmounted = $derived.by(() => {
+        if (api.present)
+            return false;
+        if (!wasPresent && lazyMount)
+            return true;
+        if (wasPresent && !keepMounted)
+            return true;
+        return false;
+    });
     function ref(node) {
-        tick().then(() => {
-            api.setNode(node);
-        });
+        api.setNode(node);
     }
     return {
         ref,
         getPresenceProps,
+        get mounted() {
+            return !unmounted;
+        },
     };
 }

package/dist/presence/root.svelte

@@ -1,18 +1,22 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {CreatePresenceProps} from './create-presence.svelte.js';
 
   export interface PresenceProps
-    extends Assign<HtmlProps<'div'>, CreatePresenceProps> {}
+    extends Assign<
+      HtmlIngredientProps<'div', never, Action>,
+      CreatePresenceProps
+    > {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
+  import type {Action} from 'svelte/action';
   import {createPresence} from './create-presence.svelte.js';
 
-  let {children, ...props}: PresenceProps = $props();
+  let {asChild, children, ...props}: PresenceProps = $props();
 
   let [presenceProps, otherProps] = $derived(
     createSplitProps<CreatePresenceProps>(['present'])(props),
@@ -25,6 +29,12 @@
   );
 </script>
 
-<div use:presence.ref {...mergedProps}>
-  {@render children?.()}
-</div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.ref, mergedProps)}
+  {:else}
+    <div use:presence.ref {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
+{/if}

package/dist/select/content.svelte

@@ -21,10 +21,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(presence.ref, mergedProps)}
-{:else}
-  <div use:presence.ref {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.ref, mergedProps)}
+  {:else}
+    <div use:presence.ref {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/select/positioner.svelte

@@ -19,10 +19,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(mergedProps)}
+  {:else}
+    <div {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/select/root.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateSelectProps,
@@ -7,9 +8,10 @@
 
   export interface SelectProps<T>
     extends Assign<
-      HtmlIngredientProps<'div', CreateSelectReturn>,
-      CreateSelectProps<T>
-    > {}
+        HtmlIngredientProps<'div', CreateSelectReturn>,
+        CreateSelectProps<T>
+      >,
+      PresenceStrategyProps {}
 </script>
 
 <script lang="ts" generics="T">
@@ -57,13 +59,26 @@
   );
 
   let select = createSelect(reflect(() => selectProps));
+
+  let [presenceStrategyProps, elementProps] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      otherProps,
+    ),
+  );
+
   let presence = createPresence({
     get present() {
       return select.open;
     },
+    get lazyMount() {
+      return presenceStrategyProps.lazyMount;
+    },
+    get keepMounted() {
+      return presenceStrategyProps.keepMounted;
+    },
   });
 
-  let mergedProps = $derived(mergeProps(otherProps, select.getRootProps()));
+  let mergedProps = $derived(mergeProps(elementProps, select.getRootProps()));
 
   setSelectContext(select);
   setPresenceContext(presence);

package/dist/switch/control.svelte

@@ -1,24 +1,24 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface SwitchControlProps extends HtmlIngredientProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getSwitchContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: SwitchControlProps = $props();
-
-  let switch$ = getSwitchContext();
-
-  let mergedProps = $derived(mergeProps(props, switch$.getControlProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SwitchControlProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getSwitchContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: SwitchControlProps = $props();
+
+  let switch$ = getSwitchContext();
+
+  let mergedProps = $derived(mergeProps(props, switch$.getControlProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/switch/hidden-input.svelte

@@ -1,23 +1,23 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface SwitchHiddenInputProps
-    extends HtmlIngredientProps<'input'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getSwitchContext} from './context.svelte.js';
-
-  let {asChild, ...props}: SwitchHiddenInputProps = $props();
-
-  let switch$ = getSwitchContext();
-
-  let mergedProps = $derived(mergeProps(props, switch$.getHiddenInputProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <input {...mergedProps} />
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SwitchHiddenInputProps
+    extends HtmlIngredientProps<'input'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getSwitchContext} from './context.svelte.js';
+
+  let {asChild, ...props}: SwitchHiddenInputProps = $props();
+
+  let switch$ = getSwitchContext();
+
+  let mergedProps = $derived(mergeProps(props, switch$.getHiddenInputProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <input {...mergedProps} />
+{/if}

package/dist/switch/label.svelte

@@ -1,24 +1,24 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface SwitchLabelProps extends HtmlIngredientProps<'span'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getSwitchContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: SwitchLabelProps = $props();
-
-  let switch$ = getSwitchContext();
-
-  let mergedProps = $derived(mergeProps(props, switch$.getLabelProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <span {...mergedProps}>
-    {@render children?.()}
-  </span>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SwitchLabelProps extends HtmlIngredientProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getSwitchContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: SwitchLabelProps = $props();
+
+  let switch$ = getSwitchContext();
+
+  let mergedProps = $derived(mergeProps(props, switch$.getLabelProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}