ui-ingredients 0.0.64 → 0.0.66

package/dist/accordion/accordion-item-content.svelte

@@ -37,9 +37,9 @@
 
   let mergedProps = $derived(
     mergeProps(
-      props,
       accordion.getItemContentProps(itemProps),
       presence.getPresenceProps(),
+      props,
     ),
   );
 </script>

package/dist/accordion/accordion-item-indicator.svelte

@@ -23,7 +23,7 @@
   let itemProps = getAccordionItemPropsContext();
 
   let mergedProps = $derived(
-    mergeProps(props, accordion.getItemIndicatorProps(itemProps)),
+    mergeProps(accordion.getItemIndicatorProps(itemProps), props),
   );
 </script>
 

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

@@ -23,7 +23,7 @@
   let itemProps = getAccordionItemPropsContext();
 
   let mergedProps = $derived(
-    mergeProps(props, accordion.getItemTriggerProps(itemProps)),
+    mergeProps(accordion.getItemTriggerProps(itemProps), props),
   );
 </script>
 

package/dist/accordion/accordion-item.svelte

@@ -32,7 +32,7 @@
 
   let itemState = $derived(accordion.getItemState(itemProps));
   let mergedProps = $derived(
-    mergeProps(localProps, accordion.getItemProps(itemProps)),
+    mergeProps(accordion.getItemProps(itemProps), localProps),
   );
 
   setAccordionItemPropsContext(() => itemProps);

package/dist/accordion/accordion-root.svelte

@@ -51,7 +51,7 @@
 
   let accordion = createAccordion(reflect(() => createAccordionProps));
 
-  let mergedProps = $derived(mergeProps(localProps, accordion.getRootProps()));
+  let mergedProps = $derived(mergeProps(accordion.getRootProps(), localProps));
 
   setAccordionContext(accordion);
   setPresenceStrategyPropsContext(() => presenceStrategyProps);

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

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

package/dist/avatar/avatar-fallback.svelte

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

package/dist/avatar/avatar-image.svelte

@@ -13,7 +13,7 @@
 
   let avatar = getAvatarContext();
 
-  let mergedProps = $derived(mergeProps(props, avatar.getImageProps()));
+  let mergedProps = $derived(mergeProps(avatar.getImageProps(), props));
 </script>
 
 {#if asChild}

package/dist/avatar/avatar-root.svelte

@@ -32,7 +32,7 @@
 
   let avatar = createAvatar(reflect(() => createAvatarProps));
 
-  let mergedProps = $derived(mergeProps(localProps, avatar.getRootProps()));
+  let mergedProps = $derived(mergeProps(avatar.getRootProps(), localProps));
 
   setAvatarContext(avatar);
 </script>

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

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

package/dist/carousel/carousel-indicator-group.svelte

@@ -19,7 +19,7 @@
   let carousel = getCarouselContext();
 
   let mergedProps = $derived(
-    mergeProps(props, carousel.getIndicatorGroupProps()),
+    mergeProps(carousel.getIndicatorGroupProps(), props),
   );
 </script>
 

package/dist/carousel/carousel-indicator.svelte

@@ -28,7 +28,7 @@
   );
 
   let mergedProps = $derived(
-    mergeProps(localProps, carousel.getIndicatorProps(indicatorProps)),
+    mergeProps(carousel.getIndicatorProps(indicatorProps), localProps),
   );
 </script>
 

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

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

package/dist/carousel/carousel-item.svelte

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

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

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

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

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

package/dist/carousel/carousel-root.svelte

@@ -42,7 +42,7 @@
 
   let carousel = createCarousel(reflect(() => createCarouselProps));
 
-  let mergedProps = $derived(mergeProps(localProps, carousel.getRootProps()));
+  let mergedProps = $derived(mergeProps(carousel.getRootProps(), localProps));
 
   setCarouselContext(carousel);
 </script>

package/dist/carousel/carousel-viewport.svelte

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

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

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

package/dist/checkbox/checkbox-control.svelte

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

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

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

package/dist/checkbox/checkbox-indicator.svelte

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

package/dist/checkbox/checkbox-label.svelte

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

package/dist/checkbox/checkbox-root.svelte

@@ -45,7 +45,7 @@
 
   let checkbox = createCheckbox(reflect(() => createCheckboxProps));
 
-  let mergedProps = $derived(mergeProps(localProps, checkbox.getRootProps()));
+  let mergedProps = $derived(mergeProps(checkbox.getRootProps(), localProps));
 
   setCheckboxContext(checkbox);
 </script>

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

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

package/dist/clipboard/clipboard-control.svelte

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

package/dist/clipboard/clipboard-indicator.svelte

@@ -24,7 +24,7 @@
   let clipboard = getClipboardContext();
 
   let mergedProps = $derived(
-    mergeProps(props, clipboard.getIndicatorProps({copied})),
+    mergeProps(clipboard.getIndicatorProps({copied}), props),
   );
 </script>
 

package/dist/clipboard/clipboard-input.svelte

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

package/dist/clipboard/clipboard-label.svelte

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

package/dist/clipboard/clipboard-root.svelte

@@ -38,7 +38,7 @@
 
   let clipboard = createClipboard(reflect(() => createClipboardProps));
 
-  let mergedProps = $derived(mergeProps(localProps, clipboard.getRootProps()));
+  let mergedProps = $derived(mergeProps(clipboard.getRootProps(), localProps));
 
   setClipboardContext(clipboard);
 </script>

package/dist/clipboard/clipboard-trigger.svelte

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

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

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

package/dist/collapsible/collapsible-content.svelte

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

package/dist/collapsible/collapsible-root.svelte

@@ -31,8 +31,8 @@
       'id',
       'ids',
       'open',
+      'openControlled',
       'disabled',
-      'defaultOpen',
       'onOpenChange',
       'onExitComplete',
     ])(props),
@@ -41,7 +41,7 @@
   let collapsible = createCollapsible(reflect(() => createCollapsibleProps));
 
   let mergedProps = $derived(
-    mergeProps(localProps, collapsible.getRootProps()),
+    mergeProps(collapsible.getRootProps(), localProps),
   );
 
   setCollapsibleContext(collapsible);

package/dist/collapsible/collapsible-trigger.svelte

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

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

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

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

@@ -8,12 +8,11 @@ export function createCollapsible(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(collapsible.machine(context), { context });
     return reflect(() => collapsible.connect(state, send, normalizeProps));

package/dist/color-picker/color-picker-area-background.svelte

@@ -23,7 +23,7 @@
   let areaProps = getColorPickerAreaPropsContext();
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getAreaBackgroundProps(areaProps)),
+    mergeProps(colorPicker.getAreaBackgroundProps(areaProps), props),
   );
 </script>
 

package/dist/color-picker/color-picker-area-thumb.svelte

@@ -23,7 +23,7 @@
   let areaProps = getColorPickerAreaPropsContext();
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getAreaThumbProps(areaProps)),
+    mergeProps(colorPicker.getAreaThumbProps(areaProps), props),
   );
 </script>
 

package/dist/color-picker/color-picker-area.svelte

@@ -29,7 +29,7 @@
   });
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getAreaProps(areaProps)),
+    mergeProps(colorPicker.getAreaProps(areaProps), props),
   );
 
   setColorPickerAreaPropsContext(() => areaProps);

package/dist/color-picker/color-picker-channel-input.svelte

@@ -25,11 +25,11 @@
 
   let mergedProps = $derived(
     mergeProps(
-      props,
       colorPicker.getChannelInputProps({
         channel,
         orientation,
       }),
+      props,
     ),
   );
 </script>

package/dist/color-picker/color-picker-channel-slider-label.svelte

@@ -26,7 +26,7 @@
   let channelProps = getColorPickerChannelPropsContext();
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getChannelSliderLabelProps(channelProps)),
+    mergeProps(colorPicker.getChannelSliderLabelProps(channelProps), props),
   );
 </script>
 

package/dist/color-picker/color-picker-channel-slider-thumb.svelte

@@ -30,8 +30,8 @@
 
   let mergedProps = $derived(
     mergeProps(
-      props,
       colorPicker.getChannelSliderThumbProps(channelSliderProps),
+      props,
     ),
   );
 </script>

package/dist/color-picker/color-picker-channel-slider-track.svelte

@@ -30,8 +30,8 @@
 
   let mergedProps = $derived(
     mergeProps(
-      props,
       colorPicker.getChannelSliderTrackProps(channelSliderProps),
+      props,
     ),
   );
 </script>

package/dist/color-picker/color-picker-channel-slider-value-text.svelte

@@ -25,7 +25,7 @@
   let channelProps = getColorPickerChannelPropsContext();
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getChannelSliderValueTextProps(channelProps)),
+    mergeProps(colorPicker.getChannelSliderValueTextProps(channelProps), props),
   );
 </script>
 

package/dist/color-picker/color-picker-channel-slider.svelte

@@ -36,7 +36,7 @@
   });
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getChannelSliderProps(channelSliderProps)),
+    mergeProps(colorPicker.getChannelSliderProps(channelSliderProps), props),
   );
 
   setColorPickerChannelPropsContext(() => channelProps);

package/dist/color-picker/color-picker-content.svelte

@@ -23,9 +23,9 @@
 
   let mergedProps = $derived(
     mergeProps(
-      props,
       colorPicker.getContentProps(),
       presence.getPresenceProps(),
+      props,
     ),
   );
 </script>

package/dist/color-picker/color-picker-control.svelte

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

package/dist/color-picker/color-picker-eye-dropper-trigger.svelte

@@ -19,7 +19,7 @@
   let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getEyeDropperTriggerProps()),
+    mergeProps(colorPicker.getEyeDropperTriggerProps(), props),
   );
 </script>
 

package/dist/color-picker/color-picker-format-select.svelte

@@ -19,7 +19,7 @@
   let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getFormatSelectProps()),
+    mergeProps(colorPicker.getFormatSelectProps(), props),
   );
 </script>
 

package/dist/color-picker/color-picker-format-trigger.svelte

@@ -19,7 +19,7 @@
   let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getFormatTriggerProps()),
+    mergeProps(colorPicker.getFormatTriggerProps(), props),
   );
 </script>
 

package/dist/color-picker/color-picker-hidden-input.svelte

@@ -18,7 +18,7 @@
   let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getHiddenInputProps()),
+    mergeProps(colorPicker.getHiddenInputProps(), props),
   );
 </script>
 

package/dist/color-picker/color-picker-label.svelte

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

package/dist/color-picker/color-picker-positioner.svelte

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

package/dist/color-picker/color-picker-root.svelte

@@ -41,13 +41,13 @@
       'id',
       'ids',
       'open',
+      'openControlled',
       'name',
       'value',
       'format',
       'disabled',
       'required',
       'readOnly',
-      'defaultOpen',
       'positioning',
       'onOpenChange',
       'closeOnSelect',
@@ -71,7 +71,7 @@
   );
 
   let mergedProps = $derived(
-    mergeProps(localProps, colorPicker.getRootProps()),
+    mergeProps(colorPicker.getRootProps(), localProps),
   );
 
   setColorPickerContext(colorPicker);

package/dist/color-picker/color-picker-swatch-group.svelte

@@ -19,7 +19,7 @@
   let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getSwatchGroupProps()),
+    mergeProps(colorPicker.getSwatchGroupProps(), props),
   );
 </script>
 

package/dist/color-picker/color-picker-swatch-indicator.svelte

@@ -23,7 +23,7 @@
   let swatchProps = getColorPickerSwatchPropsContext();
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getSwatchIndicatorProps(swatchProps)),
+    mergeProps(colorPicker.getSwatchIndicatorProps(swatchProps), props),
   );
 </script>
 

package/dist/color-picker/color-picker-swatch-trigger.svelte

@@ -26,11 +26,11 @@
 
   let mergedProps = $derived(
     mergeProps(
-      props,
       colorPicker.getSwatchTriggerProps({
         value,
         disabled,
       }),
+      props,
     ),
   );
 </script>

package/dist/color-picker/color-picker-swatch.svelte

@@ -29,7 +29,7 @@
   });
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getSwatchProps(swatchProps)),
+    mergeProps(colorPicker.getSwatchProps(swatchProps), props),
   );
 
   setColorPickerSwatchPropsContext(() => swatchProps);