ui-ingredients 0.0.41 → 0.0.42

package/dist/accordion/item-content.svelte

@@ -8,6 +8,7 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {getPresenceStrategyPropsContext} from '../presence/context.svelte.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {
     getAccordionContext,
@@ -19,10 +20,18 @@
   let accordion = getAccordionContext();
   let itemProps = getAccordionItemPropsContext();
   let itemsState = $derived(accordion.getItemState(itemProps));
+
+  let presenceStrategyProps = getPresenceStrategyPropsContext();
   let presence = createPresence({
     get present() {
       return itemsState.expanded;
     },
+    get lazyMount() {
+      return presenceStrategyProps.lazyMount;
+    },
+    get keepMounted() {
+      return presenceStrategyProps.keepMounted;
+    },
   });
 
   let mergedProps = $derived(
@@ -34,10 +43,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/accordion/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 {
     CreateAccordionProps,
@@ -7,13 +8,15 @@
 
   export interface AccordionProps
     extends Assign<
-      HtmlIngredientProps<'div', CreateAccordionReturn>,
-      CreateAccordionProps
-    > {}
+        HtmlIngredientProps<'div', CreateAccordionReturn>,
+        CreateAccordionProps
+      >,
+      PresenceStrategyProps {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {setPresenceStrategyPropsContext} from '../presence/context.svelte.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {setAccordionContext} from './context.svelte.js';
@@ -21,7 +24,13 @@
 
   let {asChild, children, ...props}: AccordionProps = $props();
 
-  let [accordionProps, otherProps] = $derived(
+  let [presenceStrategyProps, otherProps] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      props,
+    ),
+  );
+
+  let [accordionProps, elementProps] = $derived(
     createSplitProps<CreateAccordionProps>([
       'id',
       'ids',
@@ -32,14 +41,17 @@
       'collapsible',
       'onFocusChange',
       'onValueChange',
-    ])(props),
+    ])(otherProps),
   );
 
   let accordion = createAccordion(reflect(() => accordionProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, accordion.getRootProps()));
+  let mergedProps = $derived(
+    mergeProps(elementProps, accordion.getRootProps()),
+  );
 
   setAccordionContext(accordion);
+  setPresenceStrategyPropsContext(() => presenceStrategyProps);
 </script>
 
 {#if asChild}

package/dist/color-picker/root.svelte

@@ -51,7 +51,7 @@
   let colorPicker = createColorPicker(reflect(() => colorPickerProps));
   let presence = createPresence({
     get present() {
-      return colorPickerProps.open;
+      return colorPicker.open;
     },
   });
 

package/dist/combobox/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/combobox/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/combobox/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 {
     CreateComboboxProps,
@@ -7,9 +8,10 @@
 
   export interface ComboboxProps<T>
     extends Assign<
-      HtmlIngredientProps<'div', CreateComboboxReturn>,
-      CreateComboboxProps<T>
-    > {}
+        HtmlIngredientProps<'div', CreateComboboxReturn>,
+        CreateComboboxProps<T>
+      >,
+      PresenceStrategyProps {}
 </script>
 
 <script lang="ts" generics="T">
@@ -23,7 +25,13 @@
 
   let {asChild, children, ...props}: ComboboxProps<T> = $props();
 
-  let [comboboxProps, otherProps] = $derived(
+  let [presenceStrategyProps, otherProps] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      props,
+    ),
+  );
+
+  let [comboboxProps, elementProps] = $derived(
     createSplitProps<CreateComboboxProps<T>>([
       'id',
       'ids',
@@ -66,17 +74,24 @@
       'onPointerDownOutside',
       'getSelectionValue',
       'scrollToIndexFn',
-    ])(props),
+    ])(otherProps),
   );
 
   let combobox = createCombobox(reflect(() => comboboxProps));
+
   let presence = createPresence({
     get present() {
       return combobox.open;
     },
+    get lazyMount() {
+      return presenceStrategyProps.lazyMount;
+    },
+    get keepMounted() {
+      return presenceStrategyProps.keepMounted;
+    },
   });
 
-  let mergedProps = $derived(mergeProps(otherProps, combobox.getRootProps()));
+  let mergedProps = $derived(mergeProps(elementProps, combobox.getRootProps()));
 
   setComboboxContext(combobox);
   setPresenceContext(presence);

package/dist/date-picker/content.svelte

@@ -25,10 +25,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/date-picker/positioner.svelte

@@ -24,10 +24,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/date-picker/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 {
     CreateDatePickerProps,
@@ -7,9 +8,10 @@
 
   export interface DatePickerProps
     extends Assign<
-      HtmlIngredientProps<'div', CreateDatePickerReturn>,
-      CreateDatePickerProps
-    > {}
+        HtmlIngredientProps<'div', CreateDatePickerReturn>,
+        CreateDatePickerProps
+      >,
+      PresenceStrategyProps {}
 </script>
 
 <script lang="ts">
@@ -23,7 +25,11 @@
 
   let {asChild, children, ...props}: DatePickerProps = $props();
 
-  let [datePickerProps, otherProps] = $derived(
+  let [presenceStrategyProps, otherProps] = $derived(
+    createSplitProps<PresenceStrategyProps>([])(props),
+  );
+
+  let [datePickerProps, elementProps] = $derived(
     createSplitProps<CreateDatePickerProps>([
       'id',
       'ids',
@@ -53,17 +59,26 @@
       'onValueChange',
       'onFocusChange',
       'isDateUnavailable',
-    ])(props),
+    ])(otherProps),
   );
 
   let datePicker = createDatePicker(reflect(() => datePickerProps));
+
   let presence = createPresence({
     get present() {
       return datePicker.open;
     },
+    get lazyMount() {
+      return presenceStrategyProps.lazyMount;
+    },
+    get keepMounted() {
+      return presenceStrategyProps.keepMounted;
+    },
   });
 
-  let mergedProps = $derived(mergeProps(otherProps, datePicker.getRootProps()));
+  let mergedProps = $derived(
+    mergeProps(elementProps, datePicker.getRootProps()),
+  );
 
   setDatePickerContext(datePicker);
   setPresenceContext(presence);

package/dist/dialog/backdrop.svelte

@@ -8,16 +8,25 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {getPresenceStrategyPropsContext} from '../presence/context.svelte.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {getDialogContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: DialogBackdropProps = $props();
 
   let dialog = getDialogContext();
+
+  let presenceStrategyProps = getPresenceStrategyPropsContext();
   let presence = createPresence({
     get present() {
       return dialog.open;
     },
+    get lazyMount() {
+      return presenceStrategyProps.lazyMount;
+    },
+    get keepMounted() {
+      return presenceStrategyProps.keepMounted;
+    },
   });
 
   let mergedProps = $derived(
@@ -25,10 +34,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/dialog/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/dialog/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/dialog/root.svelte

@@ -1,32 +1,54 @@
 <script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
   import type {Snippet} from 'svelte';
   import type {
     CreateDialogProps,
     CreateDialogReturn,
   } from './create-dialog.svelte.js';
 
-  export interface DialogProps extends CreateDialogProps {
+  export interface DialogProps
+    extends CreateDialogProps,
+      PresenceStrategyProps {
     children?: Snippet<[CreateDialogReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {setPresenceContext} from '../presence/context.svelte.js';
+  import {
+    setPresenceContext,
+    setPresenceStrategyPropsContext,
+  } 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 {setDialogContext} from './context.svelte.js';
   import {createDialog} from './create-dialog.svelte.js';
 
   let {children, ...props}: DialogProps = $props();
 
-  let dialog = createDialog(props);
+  let [presenceStrategyProps, dialogProps] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      props,
+    ),
+  );
+
+  let dialog = createDialog(reflect(() => dialogProps));
+
   let presence = createPresence({
     get present() {
       return dialog.open;
     },
+    get lazyMount() {
+      return presenceStrategyProps.lazyMount;
+    },
+    get keepMounted() {
+      return presenceStrategyProps.keepMounted;
+    },
   });
 
   setDialogContext(dialog);
   setPresenceContext(presence);
+  setPresenceStrategyPropsContext(() => presenceStrategyProps);
 </script>
 
 {@render children?.(dialog)}

package/dist/hover-card/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/hover-card/positioner.svelte

@@ -24,10 +24,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/hover-card/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 {
     CreateHoverCardProps,
     CreateHoverCardReturn,
   } from './create-hover-card.svelte.js';
 
-  export interface HoverCardProps extends CreateHoverCardProps {
+  export interface HoverCardProps
+    extends CreateHoverCardProps,
+      PresenceStrategyProps {
     children?: Snippet<[CreateHoverCardReturn]>;
   }
 </script>
@@ -13,16 +16,38 @@
 <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 {setHoverCardContext} from './context.svelte.js';
   import {createHoverCard} from './create-hover-card.svelte.js';
 
   let {children, ...props}: HoverCardProps = $props();
 
-  let hoverCard = createHoverCard(props);
+  let [hoverCardProps, presenceStrategyProps] = $derived(
+    createSplitProps<CreateHoverCardProps>([
+      'id',
+      'ids',
+      'open',
+      'openDelay',
+      'closeDelay',
+      'defaultOpen',
+      'positioning',
+      'onOpenChange',
+    ])(props),
+  );
+
+  let hoverCard = createHoverCard(reflect(() => hoverCardProps));
+
   let presence = createPresence({
     get present() {
       return hoverCard.open;
     },
+    get lazyMount() {
+      return presenceStrategyProps.lazyMount;
+    },
+    get keepMounted() {
+      return presenceStrategyProps.keepMounted;
+    },
   });
 
   setHoverCardContext(hoverCard);

package/dist/menu/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/menu/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/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

@@ -5,6 +5,7 @@
     container?: HTMLElement;
     disabled?: boolean;
     children: Snippet;
+    [x: `data-${string}`]: string | number | boolean | null | undefined;
   }
 </script>
 
@@ -12,7 +13,7 @@
   import {getEnvironmentContext} from '../environment-provider/index.js';
   import {portal} from '@zag-js/svelte';
 
-  let {container, disabled, children}: PortalProps = $props();
+  let {container, disabled, children, ...props}: PortalProps = $props();
 
   let environment = getEnvironmentContext();
 </script>
@@ -23,6 +24,9 @@
     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/time-picker/content.svelte

@@ -1,24 +1,34 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TimePickerContentProps extends HtmlIngredientProps<'div'> {}
+  export interface TimePickerContentProps
+    extends HtmlIngredientProps<'div', never, Action> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {getPresenceContext} from '../presence/context.svelte.js';
+  import type {Action} from 'svelte/action';
   import {getTimePickerContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: TimePickerContentProps = $props();
 
   let timePicker = getTimePickerContext();
+  let presence = getPresenceContext();
 
-  let mergedProps = $derived(mergeProps(props, timePicker.getContentProps()));
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      timePicker.getContentProps(),
+      presence.getPresenceProps(),
+    ),
+  );
 </script>
 
 {#if asChild}
-  {@render asChild(mergedProps)}
+  {@render asChild(presence.ref, mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div use:presence.ref {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/time-picker/positioner.svelte

@@ -7,14 +7,20 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {getPresenceContext} from '../presence/context.svelte.js';
   import {getTimePickerContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: TimePickerPositionerProps = $props();
 
   let timePicker = getTimePickerContext();
+  let presence = getPresenceContext();
 
   let mergedProps = $derived(
-    mergeProps(props, timePicker.getPositionerProps()),
+    mergeProps(
+      props,
+      timePicker.getPositionerProps(),
+      presence.getPresenceProps(),
+    ),
   );
 </script>
 

package/dist/time-picker/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 {
     CreateTimePickerProps,
@@ -7,13 +8,16 @@
 
   export interface TimePickerProps
     extends Assign<
-      HtmlIngredientProps<'div', CreateTimePickerReturn>,
-      CreateTimePickerProps
-    > {}
+        HtmlIngredientProps<'div', CreateTimePickerReturn>,
+        CreateTimePickerProps
+      >,
+      PresenceStrategyProps {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  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 {setTimePickerContext} from './context.svelte.js';
@@ -47,9 +51,30 @@
 
   let timePicker = createTimePicker(reflect(() => timePickerProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, timePicker.getRootProps()));
+  let [presenceStrategyProps, elementProps] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      otherProps,
+    ),
+  );
+
+  let presence = createPresence({
+    get present() {
+      return timePicker.open;
+    },
+    get lazyMount() {
+      return presenceStrategyProps.lazyMount;
+    },
+    get keepMounted() {
+      return presenceStrategyProps.keepMounted;
+    },
+  });
+
+  let mergedProps = $derived(
+    mergeProps(elementProps, timePicker.getRootProps()),
+  );
 
   setTimePickerContext(timePicker);
+  setPresenceContext(presence);
 </script>
 
 {#if asChild}

package/dist/tooltip/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/tooltip/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/tooltip/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 {
     CreateTooltipProps,
     CreateTooltipReturn,
   } from './create-tooltip.svelte.js';
 
-  export interface TooltipProps extends CreateTooltipProps {
+  export interface TooltipProps
+    extends CreateTooltipProps,
+      PresenceStrategyProps {
     children?: Snippet<[CreateTooltipReturn]>;
   }
 </script>
@@ -13,16 +16,31 @@
 <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 {setTooltipContext} from './context.svelte.js';
   import {createTooltip} from './create-tooltip.svelte.js';
 
   let {children, ...props}: TooltipProps = $props();
 
-  let tooltip = createTooltip(props);
+  let [presenceStrategyProps, tooltipProps] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      props,
+    ),
+  );
+
+  let tooltip = createTooltip(reflect(() => tooltipProps));
+
   let presence = createPresence({
     get present() {
       return tooltip.open;
     },
+    get lazyMount() {
+      return presenceStrategyProps.lazyMount;
+    },
+    get keepMounted() {
+      return presenceStrategyProps.keepMounted;
+    },
   });
 
   setTooltipContext(tooltip);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.41",
+  "version": "0.0.42",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",