ui-ingredients 0.0.64 → 0.0.66

package/dist/hover-card/hover-card-content.svelte

@@ -22,7 +22,7 @@
   let presence = getPresenceContext();
 
   let mergedProps = $derived(
-    mergeProps(props, hoverCard.getContentProps(), presence.getPresenceProps()),
+    mergeProps(hoverCard.getContentProps(), presence.getPresenceProps(), props),
   );
 </script>
 

package/dist/hover-card/hover-card-positioner.svelte

@@ -22,9 +22,9 @@
 
   let mergedProps = $derived(
     mergeProps(
-      props,
       hoverCard.getPositionerProps(),
       presence.getPresenceProps(),
+      props,
     ),
   );
 </script>

package/dist/hover-card/hover-card-root.svelte

@@ -28,9 +28,9 @@
       'id',
       'ids',
       'open',
+      'openControlled',
       'openDelay',
       'closeDelay',
-      'defaultOpen',
       'positioning',
       'onOpenChange',
     ])(props),

package/dist/hover-card/hover-card-trigger.svelte

@@ -18,7 +18,7 @@
 
   let hoverCard = getHoverCardContext();
 
-  let mergedProps = $derived(mergeProps(props, hoverCard.getTriggerProps()));
+  let mergedProps = $derived(mergeProps(hoverCard.getTriggerProps(), props));
 </script>
 
 {#if asChild}

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

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

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

@@ -8,12 +8,11 @@ export function createMenu(props) {
     const environment = getEnvironmentContext();
     const id = uid();
     const context = reflect(() => ({
-        ...props,
-        id: props.id ?? id,
+        id,
         dir: locale?.dir,
-        open: props.defaultOpen ?? props.open,
+        ...props,
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.open != null,
+        'open.controlled': props.openControlled,
     }));
     const [state, send, machine] = useMachine(menu.machine(context), { context });
     return reflect(() => ({

package/dist/menu/menu-arrow-tip.svelte

@@ -18,7 +18,7 @@
 
   let menu = getMenuContext();
 
-  let mergedProps = $derived(mergeProps(props, menu.getArrowTipProps()));
+  let mergedProps = $derived(mergeProps(menu.getArrowTipProps(), props));
 </script>
 
 {#if asChild}

package/dist/menu/menu-arrow.svelte

@@ -18,7 +18,7 @@
 
   let menu = getMenuContext();
 
-  let mergedProps = $derived(mergeProps(props, menu.getArrowProps()));
+  let mergedProps = $derived(mergeProps(menu.getArrowProps(), props));
 </script>
 
 {#if asChild}

package/dist/menu/menu-content.svelte

@@ -22,7 +22,7 @@
   let presence = getPresenceContext();
 
   let mergedProps = $derived(
-    mergeProps(props, menu.getContentProps(), presence.getPresenceProps()),
+    mergeProps(menu.getContentProps(), presence.getPresenceProps(), props),
   );
 </script>
 

package/dist/menu/menu-context-trigger.svelte

@@ -18,7 +18,7 @@
 
   let menu = getMenuContext();
 
-  let mergedProps = $derived(mergeProps(props, menu.getContextTriggerProps()));
+  let mergedProps = $derived(mergeProps(menu.getContextTriggerProps(), props));
 </script>
 
 {#if asChild}

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

@@ -1,7 +1,7 @@
 import type { ItemGroupProps, OptionItemProps } from '@zag-js/menu';
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { CreateMenuReturn } from './create-menu.svelte.js';
 export declare const getMenuContext: () => CreateMenuReturn, setMenuContext: (context: CreateMenuReturn | (() => CreateMenuReturn)) => CreateMenuReturn;
 export declare const getMenuItemGroupPropsContext: () => ItemGroupProps, setMenuItemGroupPropsContext: (context: ItemGroupProps | (() => ItemGroupProps)) => ItemGroupProps;
 export declare const getMenuOptionItemPropsContext: () => OptionItemProps, setMenuOptionItemPropsContext: (context: OptionItemProps | (() => OptionItemProps)) => OptionItemProps;
-export declare const getMenuTriggerItemContext: () => HTMLAttributes<HTMLElement>, setMenuTriggerItemContext: (context: HTMLAttributes<HTMLElement> | (() => HTMLAttributes<HTMLElement>)) => HTMLAttributes<HTMLElement>;
+export declare const getMenuTriggerItemContext: () => HTMLButtonAttributes, setMenuTriggerItemContext: (context: HTMLButtonAttributes | (() => HTMLButtonAttributes)) => HTMLButtonAttributes;

package/dist/menu/menu-indicator.svelte

@@ -18,7 +18,7 @@
 
   let menu = getMenuContext();
 
-  let mergedProps = $derived(mergeProps(props, menu.getIndicatorProps()));
+  let mergedProps = $derived(mergeProps(menu.getIndicatorProps(), props));
 </script>
 
 {#if asChild}

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

@@ -25,10 +25,10 @@
 
   let mergedProps = $derived(
     mergeProps(
-      props,
       menu.getItemGroupLabelProps({
         htmlFor: itemGroupProps.id,
       }),
+      props,
     ),
   );
 </script>

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

@@ -30,7 +30,7 @@
   });
 
   let mergedProps = $derived(
-    mergeProps(props, menu.getItemGroupProps(itemGroupProps)),
+    mergeProps(menu.getItemGroupProps(itemGroupProps), props),
   );
 
   setMenuItemGroupPropsContext(() => itemGroupProps);

package/dist/menu/menu-item.svelte

@@ -34,7 +34,7 @@
 
   let itemState = $derived(menu.getItemState(itemProps));
   let mergedProps = $derived(
-    mergeProps(localProps, menu.getItemProps(itemProps)),
+    mergeProps(menu.getItemProps(itemProps), localProps),
   );
 </script>
 

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

@@ -24,7 +24,7 @@
   let itemProps = getMenuOptionItemPropsContext();
 
   let mergedProps = $derived(
-    mergeProps(props, menu.getItemIndicatorProps(itemProps)),
+    mergeProps(menu.getItemIndicatorProps(itemProps), props),
   );
 </script>
 

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

@@ -24,7 +24,7 @@
   let itemProps = getMenuOptionItemPropsContext();
 
   let mergedProps = $derived(
-    mergeProps(props, menu.getItemTextProps(itemProps)),
+    mergeProps(menu.getItemTextProps(itemProps), props),
   );
 </script>
 

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

@@ -41,7 +41,7 @@
   let itemState = $derived(menu.getOptionItemState(itemProps));
 
   let mergedProps = $derived(
-    mergeProps(localProps, menu.getOptionItemProps(itemProps)),
+    mergeProps(menu.getOptionItemProps(itemProps), localProps),
   );
 
   setMenuOptionItemPropsContext(() => itemProps);

package/dist/menu/menu-positioner.svelte

@@ -21,7 +21,7 @@
   let presence = getPresenceContext();
 
   let mergedProps = $derived(
-    mergeProps(props, menu.getPositionerProps(), presence.getPresenceProps()),
+    mergeProps(menu.getPositionerProps(), presence.getPresenceProps(), props),
   );
 </script>
 

package/dist/menu/menu-root.svelte

@@ -29,25 +29,25 @@
 
   let [createMenuProps, presenceStrategyProps] = $derived(
     createSplitProps<CreateMenuProps>([
-      'anchorPoint',
-      'aria-label',
-      'closeOnSelect',
-      'composite',
-      'defaultOpen',
-      'highlightedValue',
       'id',
       'ids',
+      'open',
+      'openControlled',
       'loopFocus',
-      'onEscapeKeyDown',
+      'composite',
+      'typeahead',
+      'positioning',
+      'anchorPoint',
+      'closeOnSelect',
+      'highlightedValue',
+      'aria-label',
+      'onSelect',
+      'onOpenChange',
       'onFocusOutside',
+      'onEscapeKeyDown',
       'onHighlightChange',
       'onInteractOutside',
-      'onOpenChange',
       'onPointerDownOutside',
-      'onSelect',
-      'open',
-      'positioning',
-      'typeahead',
     ])(props),
   );
 

package/dist/menu/menu-separator.svelte

@@ -18,7 +18,7 @@
 
   let menu = getMenuContext();
 
-  let mergedProps = $derived(mergeProps(props, menu.getSeparatorProps()));
+  let mergedProps = $derived(mergeProps(menu.getSeparatorProps(), props));
 </script>
 
 {#if asChild}

package/dist/menu/menu-trigger-item.svelte

@@ -18,7 +18,7 @@
 
   let menuTriggerItemProps = getMenuTriggerItemContext();
 
-  let mergedProps = $derived(mergeProps(props, menuTriggerItemProps));
+  let mergedProps = $derived(mergeProps(menuTriggerItemProps, props));
 </script>
 
 {#if asChild}

package/dist/menu/menu-trigger.svelte

@@ -18,7 +18,7 @@
 
   let menu = getMenuContext();
 
-  let mergedProps = $derived(mergeProps(props, menu.getTriggerProps()));
+  let mergedProps = $derived(mergeProps(menu.getTriggerProps(), props));
 </script>
 
 {#if asChild}

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

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

package/dist/number-input/number-input-control.svelte

@@ -18,7 +18,7 @@
 
   let numberInput = getNumberInputContext();
 
-  let mergedProps = $derived(mergeProps(props, numberInput.getControlProps()));
+  let mergedProps = $derived(mergeProps(numberInput.getControlProps(), props));
 </script>
 
 {#if asChild}

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

@@ -19,7 +19,7 @@
   let numberInput = getNumberInputContext();
 
   let mergedProps = $derived(
-    mergeProps(props, numberInput.getDecrementTriggerProps()),
+    mergeProps(numberInput.getDecrementTriggerProps(), props),
   );
 </script>
 

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

@@ -19,7 +19,7 @@
   let numberInput = getNumberInputContext();
 
   let mergedProps = $derived(
-    mergeProps(props, numberInput.getIncrementTriggerProps()),
+    mergeProps(numberInput.getIncrementTriggerProps(), props),
   );
 </script>
 

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

@@ -17,7 +17,7 @@
 
   let numberInput = getNumberInputContext();
 
-  let mergedProps = $derived(mergeProps(props, numberInput.getInputProps()));
+  let mergedProps = $derived(mergeProps(numberInput.getInputProps(), props));
 </script>
 
 {#if asChild}

package/dist/number-input/number-input-label.svelte

@@ -18,7 +18,7 @@
 
   let numberInput = getNumberInputContext();
 
-  let mergedProps = $derived(mergeProps(props, numberInput.getLabelProps()));
+  let mergedProps = $derived(mergeProps(numberInput.getLabelProps(), props));
 </script>
 
 {#if asChild}

package/dist/number-input/number-input-root.svelte

@@ -59,7 +59,7 @@
   let numberInput = createNumberInput(reflect(() => createNumberInputProps));
 
   let mergedProps = $derived(
-    mergeProps(localProps, numberInput.getRootProps()),
+    mergeProps(numberInput.getRootProps(), localProps),
   );
 
   setNumberInputContext(numberInput);

package/dist/number-input/number-input-scrubber.svelte

@@ -18,7 +18,7 @@
 
   let numberInput = getNumberInputContext();
 
-  let mergedProps = $derived(mergeProps(props, numberInput.getScrubberProps()));
+  let mergedProps = $derived(mergeProps(numberInput.getScrubberProps(), props));
 </script>
 
 {#if asChild}

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

@@ -1,6 +1,6 @@
 import * as pagination from '@zag-js/pagination';
 export interface CreatePaginationProps extends Omit<pagination.Context, 'id' | 'dir' | 'getRootNode'> {
-    id?: string | null;
+    id?: string;
 }
 export interface CreatePaginationReturn extends pagination.Api {
 }

package/dist/pagination/pagination-ellipsis.svelte

@@ -24,7 +24,7 @@
   let pagination = getPaginationContext();
 
   let mergedProps = $derived(
-    mergeProps(props, pagination.getEllipsisProps({index})),
+    mergeProps(pagination.getEllipsisProps({index}), props),
   );
 </script>
 

package/dist/pagination/pagination-item.svelte

@@ -25,11 +25,11 @@
 
   let mergedProps = $derived(
     mergeProps(
-      props,
       pagination.getItemProps({
         type: 'page',
         value,
       }),
+      props,
     ),
   );
 </script>

package/dist/pagination/pagination-next-trigger.svelte

@@ -19,7 +19,7 @@
   let pagination = getPaginationContext();
 
   let mergedProps = $derived(
-    mergeProps(props, pagination.getNextTriggerProps()),
+    mergeProps(pagination.getNextTriggerProps(), props),
   );
 </script>
 

package/dist/pagination/pagination-prev-trigger.svelte

@@ -19,7 +19,7 @@
   let pagination = getPaginationContext();
 
   let mergedProps = $derived(
-    mergeProps(props, pagination.getPrevTriggerProps()),
+    mergeProps(pagination.getPrevTriggerProps(), props),
   );
 </script>
 

package/dist/pagination/pagination-root.svelte

@@ -43,7 +43,7 @@
 
   let pagination = createPagination(reflect(() => createPaginationProps));
 
-  let mergedProps = $derived(mergeProps(localProps, pagination.getRootProps()));
+  let mergedProps = $derived(mergeProps(pagination.getRootProps(), localProps));
 
   setPaginationContext(pagination);
 </script>

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

@@ -1,9 +1,9 @@
-import type { HtmlProps } from '../types.js';
 import * as pinInput from '@zag-js/pin-input';
+import type { HTMLButtonAttributes } from 'svelte/elements';
 export interface CreatePinInputProps extends Omit<pinInput.Context, 'id' | 'dir' | 'getRootNode'> {
-    id?: string | null;
+    id?: string;
 }
 export interface CreatePinInputReturn extends pinInput.Api {
-    getClearTriggerProps(): HtmlProps<'button'>;
+    getClearTriggerProps(): HTMLButtonAttributes;
 }
 export declare function createPinInputContext(props: CreatePinInputProps): CreatePinInputReturn;

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

@@ -21,9 +21,9 @@
 
   let mergedProps = $derived(
     mergeProps(
-      props,
-      parts.clearTrigger.attrs,
+      parts.clearTrigger.attrs as any,
       pinInput.getClearTriggerProps(),
+      props,
     ),
   );
 </script>

package/dist/pin-input/pin-input-hidden-input.svelte

@@ -17,7 +17,7 @@
 
   let pinInput = getPinInputContext();
 
-  let mergedProps = $derived(mergeProps(props, pinInput.getHiddenInputProps()));
+  let mergedProps = $derived(mergeProps(pinInput.getHiddenInputProps(), props));
 </script>
 
 {#if asChild}

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

@@ -23,7 +23,7 @@
   let pinInput = getPinInputContext();
 
   let mergedProps = $derived(
-    mergeProps(props, pinInput.getInputProps({index})),
+    mergeProps(pinInput.getInputProps({index}), props),
   );
 </script>
 

package/dist/pin-input/pin-input-label.svelte

@@ -18,7 +18,7 @@
 
   let pinInput = getPinInputContext();
 
-  let mergedProps = $derived(mergeProps(props, pinInput.getLabelProps()));
+  let mergedProps = $derived(mergeProps(pinInput.getLabelProps(), props));
 </script>
 
 {#if asChild}

package/dist/pin-input/pin-input-root.svelte

@@ -54,7 +54,7 @@
 
   let pinInput = createPinInputContext(reflect(() => createPinInputProps));
 
-  let mergedProps = $derived(mergeProps(localProps, pinInput.getRootProps()));
+  let mergedProps = $derived(mergeProps(pinInput.getRootProps(), localProps));
 
   setPinInputContext(pinInput);
 </script>

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

@@ -1,7 +1,7 @@
 import * as popover from '@zag-js/popover';
 export interface CreatePopoverProps extends Omit<popover.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
-    id?: string | null;
-    defaultOpen?: boolean;
+    id?: string;
+    openControlled?: boolean;
 }
 export interface CreatePopoverReturn extends popover.Api {
 }

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

@@ -8,12 +8,11 @@ export function createPopover(props) {
     const environment = getEnvironmentContext();
     const id = uid();
     const context = reflect(() => ({
-        ...props,
-        id: props.id ?? id,
+        id,
         dir: locale?.dir,
-        open: props.defaultOpen ?? props.open,
+        ...props,
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.open != null,
+        'open.controlled': props.openControlled,
     }));
     const [state, send] = useMachine(popover.machine(context), { context });
     return reflect(() => popover.connect(state, send, normalizeProps));

package/dist/popover/popover-arrow-tip.svelte

@@ -18,7 +18,7 @@
 
   let popover = getPopoverContext();
 
-  let mergedProps = $derived(mergeProps(props, popover.getArrowTipProps()));
+  let mergedProps = $derived(mergeProps(popover.getArrowTipProps(), props));
 </script>
 
 {#if asChild}

package/dist/popover/popover-arrow.svelte

@@ -18,7 +18,7 @@
 
   let popover = getPopoverContext();
 
-  let mergedProps = $derived(mergeProps(props, popover.getArrowProps()));
+  let mergedProps = $derived(mergeProps(popover.getArrowProps(), props));
 </script>
 
 {#if asChild}

package/dist/popover/popover-close-trigger.svelte

@@ -18,7 +18,7 @@
 
   let popover = getPopoverContext();
 
-  let mergedProps = $derived(mergeProps(props, popover.getCloseTriggerProps()));
+  let mergedProps = $derived(mergeProps(popover.getCloseTriggerProps(), props));
 </script>
 
 {#if asChild}

package/dist/popover/popover-content.svelte

@@ -22,7 +22,7 @@
   let presence = getPresenceContext();
 
   let mergedProps = $derived(
-    mergeProps(props, popover.getContentProps(), presence.getPresenceProps()),
+    mergeProps(popover.getContentProps(), presence.getPresenceProps(), props),
   );
 </script>
 

package/dist/popover/popover-description.svelte

@@ -18,7 +18,7 @@
 
   let popover = getPopoverContext();
 
-  let mergedProps = $derived(mergeProps(props, popover.getDescriptionProps()));
+  let mergedProps = $derived(mergeProps(popover.getDescriptionProps(), props));
 </script>
 
 {#if asChild}

package/dist/popover/popover-positioner.svelte

@@ -22,9 +22,9 @@
 
   let mergedProps = $derived(
     mergeProps(
-      props,
       popover.getPositionerProps(),
       presence.getPresenceProps(),
+      props,
     ),
   );
 </script>

package/dist/popover/popover-root.svelte

@@ -25,23 +25,23 @@
 
   let [createPopoverProps, presenceStrategyProps] = $derived(
     createSplitProps<CreatePopoverProps>([
-      'autoFocus',
-      'closeOnEscape',
-      'closeOnInteractOutside',
-      'defaultOpen',
       'id',
       'ids',
-      'initialFocusEl',
+      'open',
+      'openControlled',
       'modal',
-      'onEscapeKeyDown',
+      'autoFocus',
+      'portalled',
+      'positioning',
+      'closeOnEscape',
+      'initialFocusEl',
+      'persistentElements',
+      'closeOnInteractOutside',
+      'onOpenChange',
       'onFocusOutside',
+      'onEscapeKeyDown',
       'onInteractOutside',
-      'onOpenChange',
       'onPointerDownOutside',
-      'open',
-      'persistentElements',
-      'portalled',
-      'positioning',
     ])(props),
   );
 

package/dist/popover/popover-title.svelte

@@ -18,7 +18,7 @@
 
   let popover = getPopoverContext();
 
-  let mergedProps = $derived(mergeProps(props, popover.getTitleProps()));
+  let mergedProps = $derived(mergeProps(popover.getTitleProps(), props));
 </script>
 
 {#if asChild}

package/dist/popover/popover-trigger.svelte

@@ -18,7 +18,7 @@
 
   let popover = getPopoverContext();
 
-  let mergedProps = $derived(mergeProps(props, popover.getTriggerProps()));
+  let mergedProps = $derived(mergeProps(popover.getTriggerProps(), props));
 </script>
 
 {#if asChild}

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

@@ -11,7 +11,7 @@ export interface CreatePresenceProps extends PresenceStrategyProps {
 }
 export interface CreatePresenceReturn {
     ref: Action;
-    getPresenceProps: () => HTMLAttributes<HTMLElement>;
+    getPresenceProps(): HTMLAttributes<HTMLElement>;
     mounted: boolean;
 }
 export declare function createPresence(props: CreatePresenceProps): CreatePresenceReturn;