@ark-ui/svelte 5.0.4 → 5.0.5

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}

package/dist/components/color-picker/color-picker-control.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 ColorPickerControlBaseProps extends PolymorphicProps<'div'> {}
+  export interface ColorPickerControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface ColorPickerControlProps extends Assign<HTMLProps<'div'>, ColorPickerControlBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory'
   import { useColorPickerContext } from './use-color-picker-context'
 
-  const props: ColorPickerControlProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerControlProps = $props()
 
   const colorPicker = useColorPickerContext()
   const mergedProps = $derived(mergeProps(colorPicker().getControlProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

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

package/dist/components/color-picker/color-picker-eye-dropper-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 ColorPickerEyeDropperTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface ColorPickerEyeDropperTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
   export interface ColorPickerEyeDropperTriggerProps
     extends Assign<HTMLProps<'button'>, ColorPickerEyeDropperTriggerBaseProps> {}
 </script>
@@ -11,10 +11,10 @@
   import { Ark } from '../factory'
   import { useColorPickerContext } from './use-color-picker-context'
 
-  const props: ColorPickerEyeDropperTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerEyeDropperTriggerProps = $props()
 
   const colorPicker = useColorPickerContext()
   const mergedProps = $derived(mergeProps(colorPicker().getEyeDropperTriggerProps(), props))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-eye-dropper-trigger.svelte.d.ts

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

package/dist/components/color-picker/color-picker-format-select.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 ColorPickerFormatSelectBaseProps extends PolymorphicProps<'select'> {}
+  export interface ColorPickerFormatSelectBaseProps extends PolymorphicProps<'select'>, RefAttribute {}
   export interface ColorPickerFormatSelectProps extends Assign<HTMLProps<'select'>, ColorPickerFormatSelectBaseProps> {}
 </script>
 
@@ -10,13 +10,13 @@
   import { Ark } from '../factory'
   import { useColorPickerContext } from './use-color-picker-context'
 
-  const props: ColorPickerFormatSelectProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerFormatSelectProps = $props()
 
   const colorPicker = useColorPickerContext()
   const mergedProps = $derived(mergeProps(colorPicker().getFormatSelectProps(), props))
 </script>
 
-<Ark as="select" {...mergedProps} value={colorPicker().format}>
+<Ark as="select" bind:ref {...mergedProps} value={colorPicker().format}>
   {#each ['rgba', 'hsla', 'hsba'] as format}
     <option value={format}>{format}</option>
   {/each}

package/dist/components/color-picker/color-picker-format-select.svelte.d.ts

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

package/dist/components/color-picker/color-picker-format-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 ColorPickerFormatTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface ColorPickerFormatTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
   export interface ColorPickerFormatTriggerProps
     extends Assign<HTMLProps<'button'>, ColorPickerFormatTriggerBaseProps> {}
 </script>
@@ -11,10 +11,10 @@
   import { Ark } from '../factory'
   import { useColorPickerContext } from './use-color-picker-context'
 
-  const props: ColorPickerFormatTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerFormatTriggerProps = $props()
 
   const colorPicker = useColorPickerContext()
   const mergedProps = $derived(mergeProps(colorPicker().getFormatTriggerProps(), props))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-format-trigger.svelte.d.ts

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

package/dist/components/color-picker/color-picker-hidden-input.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 ColorPickerHiddenInputBaseProps extends PolymorphicProps<'input'> {}
+  export interface ColorPickerHiddenInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {}
   export interface ColorPickerHiddenInputProps extends Assign<HTMLProps<'input'>, ColorPickerHiddenInputBaseProps> {}
 </script>
 
@@ -11,11 +11,11 @@
   import { useColorPickerContext } from './use-color-picker-context'
   import { useFieldContext } from '../field'
 
-  const props: ColorPickerHiddenInputProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerHiddenInputProps = $props()
 
   const colorPicker = useColorPickerContext()
   const mergedProps = $derived(mergeProps(colorPicker().getHiddenInputProps(), props))
   const field = useFieldContext()
 </script>
 
-<Ark as="input" aria-describedby={field?.()?.ariaDescribedby} {...mergedProps} />
+<Ark as="input" bind:ref aria-describedby={field?.()?.ariaDescribedby} {...mergedProps} />

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

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

package/dist/components/color-picker/color-picker-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 ColorPickerLabelBaseProps extends PolymorphicProps<'label'> {}
+  export interface ColorPickerLabelBaseProps extends PolymorphicProps<'label'>, RefAttribute {}
   export interface ColorPickerLabelProps extends Assign<HTMLProps<'label'>, ColorPickerLabelBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory'
   import { useColorPickerContext } from './use-color-picker-context'
 
-  const props: ColorPickerLabelProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerLabelProps = $props()
 
   const colorPicker = useColorPickerContext()
   const mergedProps = $derived(mergeProps(colorPicker().getLabelProps(), props))
 </script>
 
-<Ark as="label" {...mergedProps} />
+<Ark as="label" bind:ref {...mergedProps} />

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

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

package/dist/components/color-picker/color-picker-positioner.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 ColorPickerPositionerBaseProps extends PolymorphicProps<'div'> {}
+  export interface ColorPickerPositionerBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface ColorPickerPositionerProps extends Assign<HTMLProps<'div'>, ColorPickerPositionerBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { useColorPickerContext } from './use-color-picker-context'
   import { usePresenceContext } from '../presence'
 
-  const props: ColorPickerPositionerProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerPositionerProps = $props()
 
   const colorPicker = useColorPickerContext()
   const mergedProps = $derived(mergeProps(colorPicker().getPositionerProps(), props))
@@ -20,5 +20,5 @@
 </script>
 
 {#if !presence().unmounted}
-  <Ark as="div" {...mergedProps} />
+  <Ark as="div" bind:ref {...mergedProps} />
 {/if}

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

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

package/dist/components/color-picker/color-picker-root-provider.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 { UseColorPickerReturn } from './use-color-picker.svelte'
 
-  export interface ColorPickerRootProviderBaseProps extends PolymorphicProps<'div'>, UsePresenceProps {
+  export interface ColorPickerRootProviderBaseProps extends PolymorphicProps<'div'>, UsePresenceProps, RefAttribute {
     value: UseColorPickerReturn
   }
   export interface ColorPickerRootProviderProps extends Assign<HTMLProps<'div'>, ColorPickerRootProviderBaseProps> {}
@@ -14,7 +14,7 @@
   import { PresenceProvider, splitPresenceProps, usePresence, type UsePresenceProps } from '../presence'
   import { ColorPickerProvider } from './use-color-picker-context'
 
-  let { value, ...props }: ColorPickerRootProviderProps = $props()
+  let { ref = $bindable(null), value, ...props }: ColorPickerRootProviderProps = $props()
 
   const [presenceProps, localProps] = $derived(splitPresenceProps(props))
 
@@ -25,4 +25,4 @@
   PresenceProvider(presence)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-root-provider.svelte.d.ts

@@ -1,11 +1,11 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseColorPickerReturn } from './use-color-picker.svelte';
-export interface ColorPickerRootProviderBaseProps extends PolymorphicProps<'div'>, UsePresenceProps {
+export interface ColorPickerRootProviderBaseProps extends PolymorphicProps<'div'>, UsePresenceProps, RefAttribute {
     value: UseColorPickerReturn;
 }
 export interface ColorPickerRootProviderProps extends Assign<HTMLProps<'div'>, ColorPickerRootProviderBaseProps> {
 }
 import { type UsePresenceProps } from '../presence';
-declare const ColorPickerRootProvider: import("svelte").Component<ColorPickerRootProviderProps, {}, "">;
+declare const ColorPickerRootProvider: import("svelte").Component<ColorPickerRootProviderProps, {}, "ref">;
 type ColorPickerRootProvider = ReturnType<typeof ColorPickerRootProvider>;
 export default ColorPickerRootProvider;

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

@@ -1,9 +1,13 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { UsePresenceProps } from '../presence'
   import type { UseColorPickerProps } from './use-color-picker.svelte'
 
-  export interface ColorPickerRootBaseProps extends UseColorPickerProps, UsePresenceProps, PolymorphicProps<'div'> {}
+  export interface ColorPickerRootBaseProps
+    extends UseColorPickerProps,
+      UsePresenceProps,
+      PolymorphicProps<'div'>,
+      RefAttribute {}
   export interface ColorPickerRootProps extends Assign<HTMLProps<'div'>, ColorPickerRootBaseProps> {}
 </script>
 
@@ -16,7 +20,12 @@
   import { ColorPickerProvider } from './use-color-picker-context'
   import { useColorPicker } from './use-color-picker.svelte'
 
-  let { value = $bindable<Color>(), open = $bindable<boolean>(), ...props }: ColorPickerRootProps = $props()
+  let {
+    ref = $bindable(null),
+    value = $bindable<Color>(),
+    open = $bindable<boolean>(),
+    ...props
+  }: ColorPickerRootProps = $props()
   const providedId = $props.id()
 
   const [presenceProps, colorPickerProps] = $derived(splitPresenceProps(props))
@@ -29,11 +38,11 @@
     open,
     onValueChange(details) {
       useColorPickerProps.onValueChange?.(details)
-      value = details.value
+      if (value !== undefined) value = details.value
     },
     onOpenChange(details) {
       useColorPickerProps.onOpenChange?.(details)
-      open = details.open
+      if (open !== undefined) open = details.open
     },
   })
 
@@ -46,4 +55,4 @@
   PresenceProvider(presence)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,10 +1,10 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UsePresenceProps } from '../presence';
 import type { UseColorPickerProps } from './use-color-picker.svelte';
-export interface ColorPickerRootBaseProps extends UseColorPickerProps, UsePresenceProps, PolymorphicProps<'div'> {
+export interface ColorPickerRootBaseProps extends UseColorPickerProps, UsePresenceProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface ColorPickerRootProps extends Assign<HTMLProps<'div'>, ColorPickerRootBaseProps> {
 }
-declare const ColorPickerRoot: import("svelte").Component<ColorPickerRootProps, {}, "value" | "open">;
+declare const ColorPickerRoot: import("svelte").Component<ColorPickerRootProps, {}, "ref" | "value" | "open">;
 type ColorPickerRoot = ReturnType<typeof ColorPickerRoot>;
 export default ColorPickerRoot;

package/dist/components/color-picker/color-picker-swatch-group.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 ColorPickerSwatchGroupBaseProps extends PolymorphicProps<'div'> {}
+  export interface ColorPickerSwatchGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface ColorPickerSwatchGroupProps extends Assign<HTMLProps<'div'>, ColorPickerSwatchGroupBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory'
   import { useColorPickerContext } from './use-color-picker-context'
 
-  const props: ColorPickerSwatchGroupProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerSwatchGroupProps = $props()
 
   const colorPicker = useColorPickerContext()
   const mergedProps = $derived(mergeProps(colorPicker().getSwatchGroupProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-swatch-group.svelte.d.ts

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

package/dist/components/color-picker/color-picker-swatch-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 ColorPickerSwatchIndicatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface ColorPickerSwatchIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface ColorPickerSwatchIndicatorProps
     extends Assign<HTMLProps<'div'>, ColorPickerSwatchIndicatorBaseProps> {}
 </script>
@@ -12,11 +12,11 @@
   import { useColorPickerContext } from './use-color-picker-context'
   import { useColorPickerSwatchPropsContext } from './use-color-picker-swatch-props-context'
 
-  const props: ColorPickerSwatchIndicatorProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerSwatchIndicatorProps = $props()
 
   const colorPicker = useColorPickerContext()
   const swatchProps = useColorPickerSwatchPropsContext()
   const mergedProps = $derived(mergeProps(colorPicker().getSwatchIndicatorProps(swatchProps()), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-swatch-indicator.svelte.d.ts

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