ui-ingredients 0.0.44 → 0.0.46

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

@@ -12,7 +12,12 @@
     getMenuItemGroupPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: MenuItemGroupLabelProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: MenuItemGroupLabelProps = $props();
 
   let menu = getMenuContext();
 
@@ -31,7 +36,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/menu/item-group.svelte

@@ -12,7 +12,7 @@
     setMenuItemGroupPropsContext,
   } from './context.svelte.js';
 
-  let {id, asChild, children, ...props}: MenuItemGroupProps = $props();
+  let {id, this: e, asChild, children, ...props}: MenuItemGroupProps = $props();
 
   let menu = getMenuContext();
 
@@ -32,7 +32,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/menu/item.svelte

@@ -11,11 +11,11 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getMenuContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: MenuItemProps = $props();
+  let {this: e, asChild, children, ...props}: MenuItemProps = $props();
 
   let menu = getMenuContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>([
       'value',
       'valueText',
@@ -26,14 +26,14 @@
 
   let itemState = $derived(menu.getItemState(itemProps));
   let mergedProps = $derived(
-    mergeProps(otherProps, menu.getItemProps(itemProps)),
+    mergeProps(localProps, menu.getItemProps(itemProps)),
   );
 </script>
 
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}

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

@@ -12,7 +12,12 @@
     getMenuOptionItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: MenuOptionItemIndicatorProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: MenuOptionItemIndicatorProps = $props();
 
   let menu = getMenuContext();
 
@@ -26,7 +31,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

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

@@ -12,7 +12,12 @@
     getMenuOptionItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: MenuOptionItemTextProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: MenuOptionItemTextProps = $props();
 
   let menu = getMenuContext();
 
@@ -26,7 +31,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {#if children}
       {@render children()}
     {:else}

package/dist/menu/option-item.svelte

@@ -17,11 +17,11 @@
     setMenuOptionItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: MenuOptionItemProps = $props();
+  let {this: e, asChild, children, ...props}: MenuOptionItemProps = $props();
 
   let menu = getMenuContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<OptionItemProps>([
       'type',
       'value',
@@ -36,7 +36,7 @@
   let itemState = $derived(menu.getOptionItemState(itemProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, menu.getOptionItemProps(itemProps)),
+    mergeProps(localProps, menu.getOptionItemProps(itemProps)),
   );
 
   setMenuOptionItemPropsContext(() => itemProps);
@@ -45,7 +45,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}

package/dist/menu/positioner.svelte

@@ -9,7 +9,7 @@
   import {getPresenceContext} from '../presence/context.svelte.js';
   import {getMenuContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: MenuPositionerProps = $props();
+  let {this: e, asChild, children, ...props}: MenuPositionerProps = $props();
 
   let menu = getMenuContext();
   let presence = getPresenceContext();
@@ -23,7 +23,7 @@
   {#if asChild}
     {@render asChild(mergedProps)}
   {:else}
-    <div {...mergedProps}>
+    <div bind:this={e} {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

package/dist/menu/root.svelte

@@ -48,18 +48,12 @@
   );
 
   let menu = createMenu(reflect(() => menuProps));
-
-  let presence = createPresence({
-    get present() {
-      return menu.open;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: menu.open,
+    })),
+  );
 
   setMenuContext(menu);
   setPresenceContext(presence);

package/dist/menu/separator.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getMenuContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: MenuSeparatorProps = $props();
+  let {this: e, asChild, children, ...props}: MenuSeparatorProps = $props();
 
   let menu = getMenuContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/menu/trigger-item.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getMenuContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: MenuTriggerItemIndicatorProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: MenuTriggerItemIndicatorProps = $props();
 
   let menu = getMenuContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/menu/trigger.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getMenuContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: MenuTriggerProps = $props();
+  let {this: e, asChild, children, ...props}: MenuTriggerProps = $props();
 
   let menu = getMenuContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

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

@@ -1,2 +1,2 @@
 import type { CreateNumberInputReturn } from './create-number-input.svelte.js';
-export declare const getNumberInputContext: () => CreateNumberInputReturn, setNumberInputContext: (context: CreateNumberInputReturn | (() => CreateNumberInputReturn)) => void;
+export declare const getNumberInputContext: () => CreateNumberInputReturn, setNumberInputContext: (context: CreateNumberInputReturn | (() => CreateNumberInputReturn)) => CreateNumberInputReturn;

package/dist/number-input/control.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getNumberInputContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: NumberInputControlTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: NumberInputControlTriggerProps = $props();
 
   let numberInput = getNumberInputContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

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

@@ -9,7 +9,7 @@ export function createNumberInput(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ids: {
             label: field?.ids.label,
             input: field?.ids.control,
@@ -23,9 +23,9 @@ export function createNumberInput(props) {
         dir: locale?.dir,
         locale: props.locale ?? locale?.locale,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(numberInput.machine(context), { context });
-    const api = $derived(reflect(() => {
+    return reflect(() => {
         const o = numberInput.connect(state, send, normalizeProps);
         return {
             ...o,
@@ -36,6 +36,5 @@ export function createNumberInput(props) {
                 };
             },
         };
-    }));
-    return api;
+    });
 }

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

@@ -9,8 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getNumberInputContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: NumberInputDecrementTriggerProps =
-    $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: NumberInputDecrementTriggerProps = $props();
 
   let numberInput = getNumberInputContext();
 
@@ -22,7 +26,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

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

@@ -9,8 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getNumberInputContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: NumberInputIncrementTriggerProps =
-    $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: NumberInputIncrementTriggerProps = $props();
 
   let numberInput = getNumberInputContext();
 
@@ -22,7 +26,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/number-input/input.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getNumberInputContext} from './context.svelte.js';
 
-  let {asChild, ...props}: NumberInputInputProps = $props();
+  let {this: e, asChild, ...props}: NumberInputInputProps = $props();
 
   let numberInput = getNumberInputContext();
 
@@ -18,5 +18,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input bind:this={e} {...mergedProps} />
 {/if}

package/dist/number-input/label.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getNumberInputContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: NumberInputLabelProps = $props();
+  let {this: e, asChild, children, ...props}: NumberInputLabelProps = $props();
 
   let numberInput = getNumberInputContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <label {...mergedProps}>
+  <label bind:this={e} {...mergedProps}>
     {@render children?.()}
   </label>
 {/if}

package/dist/number-input/root.svelte

@@ -19,9 +19,9 @@
   import {setNumberInputContext} from './context.svelte.js';
   import {createNumberInput} from './create-number-input.svelte.js';
 
-  let {asChild, children, ...props}: NumberInputProps = $props();
+  let {this: e, asChild, children, ...props}: NumberInputProps = $props();
 
-  let [numberInputProps, otherProps] = $derived(
+  let [numberInputProps, localProps] = $derived(
     createSplitProps<CreateNumberInputProps>([
       'id',
       'ids',
@@ -54,7 +54,7 @@
   let numberInput = createNumberInput(reflect(() => numberInputProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, numberInput.getRootProps()),
+    mergeProps(localProps, numberInput.getRootProps()),
   );
 
   setNumberInputContext(numberInput);
@@ -63,7 +63,7 @@
 {#if asChild}
   {@render asChild(mergedProps, numberInput)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(numberInput)}
   </div>
 {/if}

package/dist/number-input/scrubber.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getNumberInputContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: NumberInputScrubberProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: NumberInputScrubberProps = $props();
 
   let numberInput = getNumberInputContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

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

@@ -1,2 +1,2 @@
 import type { CreatePaginationReturn } from './create-pagination.svelte.js';
-export declare const getPaginationContext: () => CreatePaginationReturn, setPaginationContext: (context: CreatePaginationReturn | (() => CreatePaginationReturn)) => void;
+export declare const getPaginationContext: () => CreatePaginationReturn, setPaginationContext: (context: CreatePaginationReturn | (() => CreatePaginationReturn)) => CreatePaginationReturn;

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

@@ -7,13 +7,12 @@ export function createPagination(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(pagination.machine(context), { context });
-    const api = $derived(reflect(() => pagination.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => pagination.connect(state, send, normalizeProps));
 }

package/dist/pagination/ellipsis.svelte

@@ -10,7 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {getPaginationContext} from './context.svelte.js';
 
-  let {index, asChild, children, ...props}: PaginationEllipsisProps = $props();
+  let {
+    this: e,
+    index,
+    asChild,
+    children,
+    ...props
+  }: PaginationEllipsisProps = $props();
 
   let pagination = getPaginationContext();
 
@@ -22,7 +28,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/pagination/item.svelte

@@ -10,7 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {getPaginationContext} from './context.svelte.js';
 
-  let {value, asChild, children, ...props}: PaginationItemProps = $props();
+  let {
+    this: e,
+    value,
+    asChild,
+    children,
+    ...props
+  }: PaginationItemProps = $props();
 
   let pagination = getPaginationContext();
 
@@ -28,7 +34,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/pagination/next-trigger.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getPaginationContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: PaginationNextTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: PaginationNextTriggerProps = $props();
 
   let pagination = getPaginationContext();
 
@@ -21,7 +26,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/pagination/prev-trigger.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getPaginationContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: PaginationPrevTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: PaginationPrevTriggerProps = $props();
 
   let pagination = getPaginationContext();
 
@@ -21,7 +26,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/pagination/root.svelte

@@ -19,9 +19,9 @@
   import {setPaginationContext} from './context.svelte.js';
   import {createPagination} from './create-pagination.svelte.js';
 
-  let {asChild, children, ...props}: PaginationProps = $props();
+  let {this: e, asChild, children, ...props}: PaginationProps = $props();
 
-  let [paginationProps, otherProps] = $derived(
+  let [paginationProps, localProps] = $derived(
     createSplitProps<CreatePaginationProps>([
       'id',
       'ids',
@@ -38,7 +38,7 @@
 
   let pagination = createPagination(reflect(() => paginationProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, pagination.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, pagination.getRootProps()));
 
   setPaginationContext(pagination);
 </script>
@@ -46,7 +46,7 @@
 {#if asChild}
   {@render asChild(mergedProps, pagination)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(pagination)}
   </div>
 {/if}

package/dist/pin-input/clear-trigger.svelte

@@ -10,7 +10,12 @@
   import {parts} from './anatomy.js';
   import {getPinInputContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: PinInputClearTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: PinInputClearTriggerProps = $props();
 
   let pinInput = getPinInputContext();
 
@@ -26,7 +31,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/pin-input/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreatePinInputReturn } from './create-pin-input.svelte.js';
-export declare const getPinInputContext: () => CreatePinInputReturn, setPinInputContext: (context: CreatePinInputReturn | (() => CreatePinInputReturn)) => void;
+export declare const getPinInputContext: () => CreatePinInputReturn, setPinInputContext: (context: CreatePinInputReturn | (() => CreatePinInputReturn)) => CreatePinInputReturn;

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

@@ -9,7 +9,7 @@ export function createPinInputContext(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ids: {
             label: field?.ids.label,
             hiddenInput: field?.ids.control,
@@ -22,9 +22,9 @@ export function createPinInputContext(props) {
         id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(pinInput.machine(context), { context });
-    const api = $derived(reflect(() => {
+    return reflect(() => {
         const o = pinInput.connect(state, send, normalizeProps);
         return {
             ...o,
@@ -42,6 +42,5 @@ export function createPinInputContext(props) {
                 };
             },
         };
-    }));
-    return api;
+    });
 }