ui-ingredients 0.0.65 → 0.0.67

package/README.md

@@ -2,8 +2,6 @@
 
 Headless component library for [Svelte](https://svelte.dev/) powered by [zag](https://zagjs.com/)
 
-> ⚠️ This project is currently in the early stages of development. You're welcome to use it and we encourage contributions. Please use with caution as it is still evolving!
-
 ## Installation
 
 ```bash

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

@@ -37,18 +37,18 @@
 
   let mergedProps = $derived(
     mergeProps(
-      props,
       accordion.getItemContentProps(itemProps),
       presence.getPresenceProps(),
+      props,
     ),
   );
 </script>
 
 {#if presence.mounted}
   {#if asChild}
-    {@render asChild(presence.ref, mergedProps)}
+    {@render asChild(presence.setReference, mergedProps)}
   {:else}
-    <div bind:this={ref} use:presence.ref {...mergedProps}>
+    <div bind:this={ref} use:presence.setReference {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

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/avatar-context.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/accordion';
 import type { CreateAccordionReturn } from './create-accordion.svelte.js';
-export declare const getAccordionContext: () => CreateAccordionReturn, setAccordionContext: (context: CreateAccordionReturn | (() => CreateAccordionReturn)) => CreateAccordionReturn;
-export declare const getAccordionItemPropsContext: () => ItemProps, setAccordionItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;
+export declare const getAccordionContext: () => CreateAccordionReturn, setAccordionContext: (context: CreateAccordionReturn | (() => CreateAccordionReturn)) => void;
+export declare const getAccordionItemPropsContext: () => ItemProps, setAccordionItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;

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-context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateAvatarReturn } from './create-avatar.svelte.js';
-export declare const getAvatarContext: () => CreateAvatarReturn, setAvatarContext: (context: CreateAvatarReturn | (() => CreateAvatarReturn)) => CreateAvatarReturn;
+export declare const getAvatarContext: () => CreateAvatarReturn, setAvatarContext: (context: CreateAvatarReturn | (() => CreateAvatarReturn)) => void;

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-context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateCarouselReturn } from './create-carousel.svelte.js';
-export declare const getCarouselContext: () => CreateCarouselReturn, setCarouselContext: (context: CreateCarouselReturn | (() => CreateCarouselReturn)) => CreateCarouselReturn;
+export declare const getCarouselContext: () => CreateCarouselReturn, setCarouselContext: (context: CreateCarouselReturn | (() => CreateCarouselReturn)) => void;

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-context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateCheckboxReturn } from './create-checkbox.svelte.js';
-export declare const getCheckboxContext: () => CreateCheckboxReturn, setCheckboxContext: (context: CreateCheckboxReturn | (() => CreateCheckboxReturn)) => CreateCheckboxReturn;
+export declare const getCheckboxContext: () => CreateCheckboxReturn, setCheckboxContext: (context: CreateCheckboxReturn | (() => CreateCheckboxReturn)) => void;

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-context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateClipboardReturn } from './create-clipboard.svelte.js';
-export declare const getClipboardContext: () => CreateClipboardReturn, setClipboardContext: (context: CreateClipboardReturn | (() => CreateClipboardReturn)) => CreateClipboardReturn;
+export declare const getClipboardContext: () => CreateClipboardReturn, setClipboardContext: (context: CreateClipboardReturn | (() => CreateClipboardReturn)) => void;

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

@@ -1,12 +1,14 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
 
   export interface CollapsibleContentProps
-    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {getPresenceContext} from '../presence/presence-context.svelte.js';
   import {getCollapsibleContext} from './collapsible-context.svelte.js';
 
   let {
@@ -17,14 +19,23 @@
   }: CollapsibleContentProps = $props();
 
   let collapsible = getCollapsibleContext();
+  let presence = getPresenceContext();
 
-  let mergedProps = $derived(mergeProps(props, collapsible.getContentProps()));
+  let mergedProps = $derived(
+    mergeProps(
+      collapsible.getContentProps(),
+      presence.getPresenceProps(),
+      props,
+    ),
+  );
 </script>
 
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.setReference, mergedProps)}
+  {:else}
+    <div bind:this={ref} use:presence.setReference {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

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

@@ -1,5 +1,6 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface CollapsibleContentProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+import type { Action } from 'svelte/action';
+export interface CollapsibleContentProps extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

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

@@ -1,2 +1,2 @@
 import type { CreateCollapsibleReturn } from './create-collapsible.svelte.js';
-export declare const getCollapsibleContext: () => CreateCollapsibleReturn, setCollapsibleContext: (context: CreateCollapsibleReturn | (() => CreateCollapsibleReturn)) => CreateCollapsibleReturn;
+export declare const getCollapsibleContext: () => CreateCollapsibleReturn, setCollapsibleContext: (context: CreateCollapsibleReturn | (() => CreateCollapsibleReturn)) => void;

package/dist/collapsible/collapsible-root.svelte

@@ -1,4 +1,8 @@
 <script lang="ts" module>
+  import {
+    createPresence,
+    type PresenceStrategyProps,
+  } from '../presence/create-presence.svelte.js';
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateCollapsibleProps,
@@ -7,13 +11,15 @@
 
   export interface CollapsibleProps
     extends Assign<
-      HtmlIngredientProps<'div', HTMLDivElement, CreateCollapsibleReturn>,
-      CreateCollapsibleProps
-    > {}
+        HtmlIngredientProps<'div', HTMLDivElement, CreateCollapsibleReturn>,
+        CreateCollapsibleProps
+      >,
+      PresenceStrategyProps {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {setPresenceContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {setCollapsibleContext} from './collapsible-context.svelte.js';
@@ -26,6 +32,12 @@
     ...props
   }: CollapsibleProps = $props();
 
+  let [presenceStrategyProps, rest] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      props,
+    ),
+  );
+
   let [createCollapsibleProps, localProps] = $derived(
     createSplitProps<CreateCollapsibleProps>([
       'id',
@@ -35,16 +47,23 @@
       'disabled',
       'onOpenChange',
       'onExitComplete',
-    ])(props),
+    ])(rest),
   );
 
   let collapsible = createCollapsible(reflect(() => createCollapsibleProps));
+  let presence = createPresence(
+    reflect(() => ({
+      present: collapsible.open,
+      ...presenceStrategyProps,
+    })),
+  );
 
   let mergedProps = $derived(
-    mergeProps(localProps, collapsible.getRootProps()),
+    mergeProps(collapsible.getRootProps(), localProps),
   );
 
   setCollapsibleContext(collapsible);
+  setPresenceContext(presence);
 </script>
 
 {#if asChild}

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

@@ -1,6 +1,7 @@
+import { type PresenceStrategyProps } from '../presence/create-presence.svelte.js';
 import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { CreateCollapsibleProps, CreateCollapsibleReturn } from './create-collapsible.svelte.js';
-export interface CollapsibleProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateCollapsibleReturn>, CreateCollapsibleProps> {
+export interface CollapsibleProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateCollapsibleReturn>, CreateCollapsibleProps>, PresenceStrategyProps {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/collapsible/collapsible-trigger.svelte

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

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>
 
@@ -36,7 +36,10 @@
     {#if children}
       {@render children()}
     {:else}
-      {colorPicker.getChannelValueText(channelProps.channel, locale.locale)}
+      {colorPicker.getChannelValueText(
+        channelProps.channel,
+        locale?.locale ?? 'en-US',
+      )}
     {/if}
   </div>
 {/if}

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);