ui-ingredients 0.0.40 → 0.0.42

package/dist/accordion/item-content.svelte

@@ -1,12 +1,14 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
 
   export interface AccordionItemContentProps
-    extends HtmlIngredientProps<'div'> {}
+    extends HtmlIngredientProps<'div', never, Action> {}
 </script>
 
 <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,
@@ -18,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(
@@ -33,10 +43,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(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/content.svelte

@@ -1,7 +1,9 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
 
-  export interface ColorPickerContentProps extends HtmlIngredientProps<'div'> {}
+  export interface ColorPickerContentProps
+    extends HtmlIngredientProps<'div', never, Action> {}
 </script>
 
 <script lang="ts">

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

@@ -1,7 +1,9 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
 
-  export interface ComboboxContentProps extends HtmlIngredientProps<'div'> {}
+  export interface ComboboxContentProps
+    extends HtmlIngredientProps<'div', never, Action> {}
 </script>
 
 <script lang="ts">
@@ -19,10 +21,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(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

@@ -1,7 +1,9 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
 
-  export interface DatePickerContentProps extends HtmlIngredientProps<'div'> {}
+  export interface DatePickerContentProps
+    extends HtmlIngredientProps<'div', never, Action> {}
 </script>
 
 <script lang="ts">
@@ -23,10 +25,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(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

@@ -1,21 +1,32 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
 
-  export interface DialogBackdropProps extends HtmlIngredientProps<'div'> {}
+  export interface DialogBackdropProps
+    extends HtmlIngredientProps<'div', never, Action> {}
 </script>
 
 <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(
@@ -23,10 +34,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(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

@@ -1,7 +1,9 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
 
-  export interface DialogContentProps extends HtmlIngredientProps<'div'> {}
+  export interface DialogContentProps
+    extends HtmlIngredientProps<'div', never, Action> {}
 </script>
 
 <script lang="ts">
@@ -19,10 +21,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(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

@@ -1,7 +1,9 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
 
-  export interface HoverCardContentProps extends HtmlIngredientProps<'div'> {}
+  export interface HoverCardContentProps
+    extends HtmlIngredientProps<'div', never, Action> {}
 </script>
 
 <script lang="ts">
@@ -19,10 +21,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(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

@@ -1,7 +1,9 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
 
-  export interface MenuContentProps extends HtmlIngredientProps<'div'> {}
+  export interface MenuContentProps
+    extends HtmlIngredientProps<'div', never, Action> {}
 </script>
 
 <script lang="ts">
@@ -19,10 +21,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(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}