@ark-ui/svelte 5.0.4 → 5.1.0

package/dist/components/clipboard/clipboard-value-text.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface ClipboardValueTextBaseProps extends PolymorphicProps<'span'> {}
+  export interface ClipboardValueTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
   export interface ClipboardValueTextProps extends Assign<HTMLProps<'span'>, ClipboardValueTextBaseProps> {}
 </script>
 
@@ -9,12 +9,12 @@
   import { Ark } from '../factory'
   import { useClipboardContext } from './use-clipboard-context'
 
-  const { children, ...props }: ClipboardValueTextProps = $props()
+  let { ref = $bindable(null), children, ...props }: ClipboardValueTextProps = $props()
 
   const clipboard = useClipboardContext()
 </script>
 
-<Ark as="span" {...props}>
+<Ark as="span" bind:ref {...props}>
   {#if children}
     {@render children()}
   {:else}

package/dist/components/clipboard/clipboard-value-text.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface ClipboardValueTextBaseProps extends PolymorphicProps<'span'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface ClipboardValueTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {
 }
 export interface ClipboardValueTextProps extends Assign<HTMLProps<'span'>, ClipboardValueTextBaseProps> {
 }
-declare const ClipboardValueText: import("svelte").Component<ClipboardValueTextProps, {}, "">;
+declare const ClipboardValueText: import("svelte").Component<ClipboardValueTextProps, {}, "ref">;
 type ClipboardValueText = ReturnType<typeof ClipboardValueText>;
 export default ClipboardValueText;

package/dist/components/collapsible/collapsible-content.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface CollapsibleContentBaseProps extends PolymorphicProps<'div'> {}
+  export interface CollapsibleContentBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface CollapsibleContentProps extends Assign<HTMLProps<'div'>, CollapsibleContentBaseProps> {}
 </script>
 
@@ -10,12 +10,12 @@
   import { Ark } from '../factory'
   import { useCollapsibleContext } from './use-collapsible-context'
 
-  const props: CollapsibleContentProps = $props()
+  let { ref = $bindable(null), ...props }: CollapsibleContentProps = $props()
 
   const collapsible = useCollapsibleContext()
   const mergedProps = $derived(mergeProps(collapsible().getContentProps(), props))
 </script>
 
 {#if !collapsible().isUnmounted}
-  <Ark as="div" {...mergedProps} />
+  <Ark as="div" bind:ref {...mergedProps} />
 {/if}

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

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface CollapsibleContentBaseProps extends PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface CollapsibleContentBaseProps extends PolymorphicProps<'div'>, RefAttribute {
 }
 export interface CollapsibleContentProps extends Assign<HTMLProps<'div'>, CollapsibleContentBaseProps> {
 }
-declare const CollapsibleContent: import("svelte").Component<CollapsibleContentProps, {}, "">;
+declare const CollapsibleContent: import("svelte").Component<CollapsibleContentProps, {}, "ref">;
 type CollapsibleContent = ReturnType<typeof CollapsibleContent>;
 export default CollapsibleContent;

package/dist/components/collapsible/collapsible-indicator.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface CollapsibleIndicatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface CollapsibleIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface CollapsibleIndicatorProps extends Assign<HTMLProps<'div'>, CollapsibleIndicatorBaseProps> {}
 </script>
 
@@ -10,9 +10,9 @@
   import { Ark } from '../factory'
   import { useCollapsibleContext } from './use-collapsible-context'
 
-  const props: CollapsibleIndicatorProps = $props()
+  let { ref = $bindable(null), ...props }: CollapsibleIndicatorProps = $props()
   const collapsible = useCollapsibleContext()
   const mergedProps = $derived(mergeProps(collapsible().getIndicatorProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/collapsible/collapsible-indicator.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface CollapsibleIndicatorBaseProps extends PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface CollapsibleIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {
 }
 export interface CollapsibleIndicatorProps extends Assign<HTMLProps<'div'>, CollapsibleIndicatorBaseProps> {
 }
-declare const CollapsibleIndicator: import("svelte").Component<CollapsibleIndicatorProps, {}, "">;
+declare const CollapsibleIndicator: import("svelte").Component<CollapsibleIndicatorProps, {}, "ref">;
 type CollapsibleIndicator = ReturnType<typeof CollapsibleIndicator>;
 export default CollapsibleIndicator;

package/dist/components/collapsible/collapsible-root-provider.svelte

@@ -1,12 +1,12 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { UseCollapsibleReturn } from './use-collapsible.svelte'
 
   interface RootProviderProps {
     value: UseCollapsibleReturn
   }
 
-  export interface CollapsibleRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {}
+  export interface CollapsibleRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface CollapsibleRootProviderProps extends Assign<HTMLProps<'div'>, CollapsibleRootProviderBaseProps> {}
 </script>
 
@@ -15,10 +15,10 @@
   import { Ark } from '../factory'
   import { CollapsibleProvider } from './use-collapsible-context'
 
-  const { value, ...props }: CollapsibleRootProviderProps = $props()
+  let { ref = $bindable(null), value, ...props }: CollapsibleRootProviderProps = $props()
   const mergedProps = $derived(mergeProps(value().getRootProps(), props))
 
   CollapsibleProvider(value)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,12 +1,12 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseCollapsibleReturn } from './use-collapsible.svelte';
 interface RootProviderProps {
     value: UseCollapsibleReturn;
 }
-export interface CollapsibleRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {
+export interface CollapsibleRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface CollapsibleRootProviderProps extends Assign<HTMLProps<'div'>, CollapsibleRootProviderBaseProps> {
 }
-declare const CollapsibleRootProvider: import("svelte").Component<CollapsibleRootProviderProps, {}, "">;
+declare const CollapsibleRootProvider: import("svelte").Component<CollapsibleRootProviderProps, {}, "ref">;
 type CollapsibleRootProvider = ReturnType<typeof CollapsibleRootProvider>;
 export default CollapsibleRootProvider;

package/dist/components/collapsible/collapsible-root.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { UseCollapsibleProps } from './use-collapsible.svelte'
 
-  export interface CollapsibleRootBaseProps extends UseCollapsibleProps, PolymorphicProps<'div'> {}
+  export interface CollapsibleRootBaseProps extends UseCollapsibleProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface CollapsibleRootProps extends Assign<HTMLProps<'div'>, CollapsibleRootBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { splitCollapsibleProps } from './split-collapsible-props.svelte'
   import { useCollapsible } from './use-collapsible.svelte'
 
-  let { open = $bindable(), ...props }: CollapsibleRootProps = $props()
+  let { ref = $bindable(null), open = $bindable(), ...props }: CollapsibleRootProps = $props()
   const providedId = $props.id()
 
   const [useCollapsibleProps, localProps] = $derived(splitCollapsibleProps(props))
@@ -24,7 +24,7 @@
     open,
     onOpenChange(details) {
       useCollapsibleProps.onOpenChange?.(details)
-      open = details.open
+      if (open !== undefined) open = details.open
     },
   })
 
@@ -34,4 +34,4 @@
   CollapsibleProvider(collapsible)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseCollapsibleProps } from './use-collapsible.svelte';
-export interface CollapsibleRootBaseProps extends UseCollapsibleProps, PolymorphicProps<'div'> {
+export interface CollapsibleRootBaseProps extends UseCollapsibleProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface CollapsibleRootProps extends Assign<HTMLProps<'div'>, CollapsibleRootBaseProps> {
 }
-declare const CollapsibleRoot: import("svelte").Component<CollapsibleRootProps, {}, "open">;
+declare const CollapsibleRoot: import("svelte").Component<CollapsibleRootProps, {}, "ref" | "open">;
 type CollapsibleRoot = ReturnType<typeof CollapsibleRoot>;
 export default CollapsibleRoot;

package/dist/components/collapsible/collapsible-trigger.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface CollapsibleTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface CollapsibleTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
   export interface CollapsibleTriggerProps extends Assign<HTMLProps<'button'>, CollapsibleTriggerBaseProps> {}
 </script>
 
@@ -10,9 +10,9 @@
   import { Ark } from '../factory'
   import { useCollapsibleContext } from './use-collapsible-context'
 
-  const props: CollapsibleTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: CollapsibleTriggerProps = $props()
   const collapsible = useCollapsibleContext()
   const mergedProps = $derived(mergeProps(collapsible().getTriggerProps(), props))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/collapsible/collapsible-trigger.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface CollapsibleTriggerBaseProps extends PolymorphicProps<'button'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface CollapsibleTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {
 }
 export interface CollapsibleTriggerProps extends Assign<HTMLProps<'button'>, CollapsibleTriggerBaseProps> {
 }
-declare const CollapsibleTrigger: import("svelte").Component<CollapsibleTriggerProps, {}, "">;
+declare const CollapsibleTrigger: import("svelte").Component<CollapsibleTriggerProps, {}, "ref">;
 type CollapsibleTrigger = ReturnType<typeof CollapsibleTrigger>;
 export default CollapsibleTrigger;

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

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface ColorPickerAreaBackgroundBaseProps extends PolymorphicProps<'div'> {}
+  export interface ColorPickerAreaBackgroundBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface ColorPickerAreaBackgroundProps
     extends Assign<HTMLProps<'div'>, ColorPickerAreaBackgroundBaseProps> {}
 </script>
@@ -12,7 +12,7 @@
   import { useColorPickerContext } from './use-color-picker-context'
   import { useColorPickerAreaPropsContext } from './use-color-picker-area-props-context'
 
-  const props: ColorPickerAreaBackgroundProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerAreaBackgroundProps = $props()
 
   const colorPicker = useColorPickerContext()
   const areaProps = useColorPickerAreaPropsContext()
@@ -20,4 +20,4 @@
   const mergedProps = $derived(mergeProps(colorPicker().getAreaBackgroundProps(areaProps()), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-area-background.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface ColorPickerAreaBackgroundBaseProps extends PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface ColorPickerAreaBackgroundBaseProps extends PolymorphicProps<'div'>, RefAttribute {
 }
 export interface ColorPickerAreaBackgroundProps extends Assign<HTMLProps<'div'>, ColorPickerAreaBackgroundBaseProps> {
 }
-declare const ColorPickerAreaBackground: import("svelte").Component<ColorPickerAreaBackgroundProps, {}, "">;
+declare const ColorPickerAreaBackground: import("svelte").Component<ColorPickerAreaBackgroundProps, {}, "ref">;
 type ColorPickerAreaBackground = ReturnType<typeof ColorPickerAreaBackground>;
 export default ColorPickerAreaBackground;

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

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface ColorPickerAreaThumbBaseProps extends PolymorphicProps<'div'> {}
+  export interface ColorPickerAreaThumbBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface ColorPickerAreaThumbProps extends Assign<HTMLProps<'div'>, ColorPickerAreaThumbBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { useColorPickerContext } from './use-color-picker-context'
   import { useColorPickerAreaPropsContext } from './use-color-picker-area-props-context'
 
-  const props: ColorPickerAreaThumbProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerAreaThumbProps = $props()
 
   const colorPicker = useColorPickerContext()
   const areaProps = useColorPickerAreaPropsContext()
@@ -19,4 +19,4 @@
   const mergedProps = $derived(mergeProps(colorPicker().getAreaThumbProps(areaProps()), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-area-thumb.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface ColorPickerAreaThumbBaseProps extends PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface ColorPickerAreaThumbBaseProps extends PolymorphicProps<'div'>, RefAttribute {
 }
 export interface ColorPickerAreaThumbProps extends Assign<HTMLProps<'div'>, ColorPickerAreaThumbBaseProps> {
 }
-declare const ColorPickerAreaThumb: import("svelte").Component<ColorPickerAreaThumbProps, {}, "">;
+declare const ColorPickerAreaThumb: import("svelte").Component<ColorPickerAreaThumbProps, {}, "ref">;
 type ColorPickerAreaThumb = ReturnType<typeof ColorPickerAreaThumb>;
 export default ColorPickerAreaThumb;

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

@@ -1,8 +1,8 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { AreaProps } from '@zag-js/color-picker'
 
-  export interface ColorPickerAreaBaseProps extends AreaProps, PolymorphicProps<'div'> {}
+  export interface ColorPickerAreaBaseProps extends AreaProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface ColorPickerAreaProps extends Assign<HTMLProps<'div'>, ColorPickerAreaBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { useColorPickerContext } from './use-color-picker-context'
   import { ColorPickerAreaPropsProvider } from './use-color-picker-area-props-context'
 
-  const props: ColorPickerAreaProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerAreaProps = $props()
 
   const [areaProps, localProps] = $derived(createSplitProps<AreaProps>()(props, ['xChannel', 'yChannel']))
 
@@ -23,4 +23,4 @@
   ColorPickerAreaPropsProvider(() => areaProps)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-area.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { AreaProps } from '@zag-js/color-picker';
-export interface ColorPickerAreaBaseProps extends AreaProps, PolymorphicProps<'div'> {
+export interface ColorPickerAreaBaseProps extends AreaProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface ColorPickerAreaProps extends Assign<HTMLProps<'div'>, ColorPickerAreaBaseProps> {
 }
-declare const ColorPickerArea: import("svelte").Component<ColorPickerAreaProps, {}, "">;
+declare const ColorPickerArea: import("svelte").Component<ColorPickerAreaProps, {}, "ref">;
 type ColorPickerArea = ReturnType<typeof ColorPickerArea>;
 export default ColorPickerArea;

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

@@ -1,8 +1,11 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { ChannelInputProps } from '@zag-js/color-picker'
 
-  export interface ColorPickerChannelInputBaseProps extends ChannelInputProps, PolymorphicProps<'input'> {}
+  export interface ColorPickerChannelInputBaseProps
+    extends ChannelInputProps,
+      PolymorphicProps<'input'>,
+      RefAttribute {}
   export interface ColorPickerChannelInputProps extends Assign<HTMLProps<'input'>, ColorPickerChannelInputBaseProps> {}
 </script>
 
@@ -12,7 +15,7 @@
   import { Ark } from '../factory'
   import { useColorPickerContext } from './use-color-picker-context'
 
-  const props: ColorPickerChannelInputProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerChannelInputProps = $props()
 
   const [channelProps, localProps] = $derived(createSplitProps<ChannelInputProps>()(props, ['channel', 'orientation']))
 
@@ -20,4 +23,4 @@
   const mergedProps = $derived(mergeProps(colorPicker().getChannelInputProps(channelProps), localProps))
 </script>
 
-<Ark as="input" {...mergedProps} />
+<Ark as="input" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-channel-input.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { ChannelInputProps } from '@zag-js/color-picker';
-export interface ColorPickerChannelInputBaseProps extends ChannelInputProps, PolymorphicProps<'input'> {
+export interface ColorPickerChannelInputBaseProps extends ChannelInputProps, PolymorphicProps<'input'>, RefAttribute {
 }
 export interface ColorPickerChannelInputProps extends Assign<HTMLProps<'input'>, ColorPickerChannelInputBaseProps> {
 }
-declare const ColorPickerChannelInput: import("svelte").Component<ColorPickerChannelInputProps, {}, "">;
+declare const ColorPickerChannelInput: import("svelte").Component<ColorPickerChannelInputProps, {}, "ref">;
 type ColorPickerChannelInput = ReturnType<typeof ColorPickerChannelInput>;
 export default ColorPickerChannelInput;

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

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface ColorPickerChannelSliderLabelBaseProps extends PolymorphicProps<'label'> {}
+  export interface ColorPickerChannelSliderLabelBaseProps extends PolymorphicProps<'label'>, RefAttribute {}
   export interface ColorPickerChannelSliderLabelProps
     extends Assign<HTMLProps<'label'>, ColorPickerChannelSliderLabelBaseProps> {}
 </script>
@@ -12,11 +12,11 @@
   import { useColorPickerChannelPropsContext } from './use-color-picker-channel-props-context'
   import { useColorPickerContext } from './use-color-picker-context'
 
-  const props: ColorPickerChannelSliderLabelProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerChannelSliderLabelProps = $props()
 
   const colorPicker = useColorPickerContext()
   const channelProps = useColorPickerChannelPropsContext()
   const mergedProps = $derived(mergeProps(colorPicker().getChannelSliderLabelProps(channelProps()), props))
 </script>
 
-<Ark as="label" {...mergedProps} />
+<Ark as="label" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-channel-slider-label.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface ColorPickerChannelSliderLabelBaseProps extends PolymorphicProps<'label'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface ColorPickerChannelSliderLabelBaseProps extends PolymorphicProps<'label'>, RefAttribute {
 }
 export interface ColorPickerChannelSliderLabelProps extends Assign<HTMLProps<'label'>, ColorPickerChannelSliderLabelBaseProps> {
 }
-declare const ColorPickerChannelSliderLabel: import("svelte").Component<ColorPickerChannelSliderLabelProps, {}, "">;
+declare const ColorPickerChannelSliderLabel: import("svelte").Component<ColorPickerChannelSliderLabelProps, {}, "ref">;
 type ColorPickerChannelSliderLabel = ReturnType<typeof ColorPickerChannelSliderLabel>;
 export default ColorPickerChannelSliderLabel;

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

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface ColorPickerChannelSliderThumbBaseProps extends PolymorphicProps<'div'> {}
+  export interface ColorPickerChannelSliderThumbBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface ColorPickerChannelSliderThumbProps
     extends Assign<HTMLProps<'div'>, ColorPickerChannelSliderThumbBaseProps> {}
 </script>
@@ -13,7 +13,7 @@
   import { useColorPickerContext } from './use-color-picker-context'
   import { useColorPickerFormatPropsContext } from './use-color-picker-format-context'
 
-  const props: ColorPickerChannelSliderThumbProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerChannelSliderThumbProps = $props()
 
   const colorPicker = useColorPickerContext()
 
@@ -24,4 +24,4 @@
   const mergedProps = $derived(mergeProps(colorPicker().getChannelSliderThumbProps(channelSliderProps), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-channel-slider-thumb.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface ColorPickerChannelSliderThumbBaseProps extends PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface ColorPickerChannelSliderThumbBaseProps extends PolymorphicProps<'div'>, RefAttribute {
 }
 export interface ColorPickerChannelSliderThumbProps extends Assign<HTMLProps<'div'>, ColorPickerChannelSliderThumbBaseProps> {
 }
-declare const ColorPickerChannelSliderThumb: import("svelte").Component<ColorPickerChannelSliderThumbProps, {}, "">;
+declare const ColorPickerChannelSliderThumb: import("svelte").Component<ColorPickerChannelSliderThumbProps, {}, "ref">;
 type ColorPickerChannelSliderThumb = ReturnType<typeof ColorPickerChannelSliderThumb>;
 export default ColorPickerChannelSliderThumb;

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

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface ColorPickerChannelSliderTrackBaseProps extends PolymorphicProps<'div'> {}
+  export interface ColorPickerChannelSliderTrackBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface ColorPickerChannelSliderTrackProps
     extends Assign<HTMLProps<'div'>, ColorPickerChannelSliderTrackBaseProps> {}
 </script>
@@ -13,7 +13,7 @@
   import { useColorPickerContext } from './use-color-picker-context'
   import { useColorPickerFormatPropsContext } from './use-color-picker-format-context'
 
-  const props: ColorPickerChannelSliderTrackProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerChannelSliderTrackProps = $props()
 
   const colorPicker = useColorPickerContext()
 
@@ -24,4 +24,4 @@
   const mergedProps = $derived(mergeProps(colorPicker().getChannelSliderTrackProps(channelSliderProps), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-channel-slider-track.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface ColorPickerChannelSliderTrackBaseProps extends PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface ColorPickerChannelSliderTrackBaseProps extends PolymorphicProps<'div'>, RefAttribute {
 }
 export interface ColorPickerChannelSliderTrackProps extends Assign<HTMLProps<'div'>, ColorPickerChannelSliderTrackBaseProps> {
 }
-declare const ColorPickerChannelSliderTrack: import("svelte").Component<ColorPickerChannelSliderTrackProps, {}, "">;
+declare const ColorPickerChannelSliderTrack: import("svelte").Component<ColorPickerChannelSliderTrackProps, {}, "ref">;
 type ColorPickerChannelSliderTrack = ReturnType<typeof ColorPickerChannelSliderTrack>;
 export default ColorPickerChannelSliderTrack;

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

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface ColorPickerChannelSliderValueTextBaseProps extends PolymorphicProps<'span'> {}
+  export interface ColorPickerChannelSliderValueTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
   export interface ColorPickerChannelSliderValueTextProps
     extends Assign<HTMLProps<'span'>, ColorPickerChannelSliderValueTextBaseProps> {}
 </script>
@@ -13,7 +13,7 @@
   import { useColorPickerContext } from './use-color-picker-context'
   import { useLocaleContext } from '../../providers'
 
-  const props: ColorPickerChannelSliderValueTextProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerChannelSliderValueTextProps = $props()
 
   const locale = useLocaleContext()
 
@@ -22,7 +22,7 @@
   const mergedProps = $derived(mergeProps(colorPicker().getChannelSliderValueTextProps(channelProps()), props))
 </script>
 
-<Ark as="span" {...mergedProps}>
+<Ark as="span" bind:ref {...mergedProps}>
   {#if props.children}
     {@render props.children()}
   {:else}

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

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface ColorPickerChannelSliderValueTextBaseProps extends PolymorphicProps<'span'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface ColorPickerChannelSliderValueTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {
 }
 export interface ColorPickerChannelSliderValueTextProps extends Assign<HTMLProps<'span'>, ColorPickerChannelSliderValueTextBaseProps> {
 }
-declare const ColorPickerChannelSliderValueText: import("svelte").Component<ColorPickerChannelSliderValueTextProps, {}, "">;
+declare const ColorPickerChannelSliderValueText: import("svelte").Component<ColorPickerChannelSliderValueTextProps, {}, "ref">;
 type ColorPickerChannelSliderValueText = ReturnType<typeof ColorPickerChannelSliderValueText>;
 export default ColorPickerChannelSliderValueText;

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

@@ -1,8 +1,8 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { ChannelProps } from '@zag-js/color-picker'
 
-  export interface ColorPickerChannelSliderBaseProps extends ChannelProps, PolymorphicProps<'div'> {}
+  export interface ColorPickerChannelSliderBaseProps extends ChannelProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface ColorPickerChannelSliderProps extends Assign<HTMLProps<'div'>, ColorPickerChannelSliderBaseProps> {}
 </script>
 
@@ -14,7 +14,7 @@
   import { useColorPickerContext } from './use-color-picker-context'
   import { useColorPickerFormatPropsContext } from './use-color-picker-format-context'
 
-  const props: ColorPickerChannelSliderProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerChannelSliderProps = $props()
 
   const [channelProps, localProps] = $derived(createSplitProps<ChannelProps>()(props, ['channel', 'orientation']))
 
@@ -28,4 +28,4 @@
   ColorPickerChannelPropsProvider(() => channelProps)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-channel-slider.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { ChannelProps } from '@zag-js/color-picker';
-export interface ColorPickerChannelSliderBaseProps extends ChannelProps, PolymorphicProps<'div'> {
+export interface ColorPickerChannelSliderBaseProps extends ChannelProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface ColorPickerChannelSliderProps extends Assign<HTMLProps<'div'>, ColorPickerChannelSliderBaseProps> {
 }
-declare const ColorPickerChannelSlider: import("svelte").Component<ColorPickerChannelSliderProps, {}, "">;
+declare const ColorPickerChannelSlider: import("svelte").Component<ColorPickerChannelSliderProps, {}, "ref">;
 type ColorPickerChannelSlider = ReturnType<typeof ColorPickerChannelSlider>;
 export default ColorPickerChannelSlider;

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

@@ -19,10 +19,9 @@
 
   function setNode(node: Element | null) {
     presence().setNode(node)
-    ref = node
   }
 </script>
 
 {#if !presence().unmounted}
-  <Ark as="div" {...mergedProps} {@attach setNode} />
+  <Ark as="div" bind:ref {...mergedProps} {@attach setNode} />
 {/if}