@ark-ui/svelte 5.0.4 → 5.1.0

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;

package/dist/components/color-picker/color-picker-swatch-trigger.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 { SwatchTriggerProps } from '@zag-js/color-picker'
 
-  export interface ColorPickerSwatchTriggerBaseProps extends SwatchTriggerProps, PolymorphicProps<'button'> {}
+  export interface ColorPickerSwatchTriggerBaseProps
+    extends SwatchTriggerProps,
+      PolymorphicProps<'button'>,
+      RefAttribute {}
   export interface ColorPickerSwatchTriggerProps
     extends Assign<HTMLProps<'button'>, ColorPickerSwatchTriggerBaseProps> {}
 </script>
@@ -13,7 +16,7 @@
   import { Ark } from '../factory'
   import { useColorPickerContext } from './use-color-picker-context'
 
-  const props: ColorPickerSwatchTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerSwatchTriggerProps = $props()
 
   const [swatchTriggerProps, localProps] = $derived(
     createSplitProps<SwatchTriggerProps>()(props, ['value', 'disabled']),
@@ -23,4 +26,4 @@
   const mergedProps = $derived(mergeProps(colorPicker().getSwatchTriggerProps(swatchTriggerProps), localProps))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

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

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

package/dist/components/color-picker/color-picker-swatch.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 { SwatchProps } from '@zag-js/color-picker'
 
-  export interface ColorPickerSwatchBaseProps extends SwatchProps, PolymorphicProps<'div'> {}
+  export interface ColorPickerSwatchBaseProps extends SwatchProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface ColorPickerSwatchProps extends Assign<HTMLProps<'div'>, ColorPickerSwatchBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { ColorPickerSwatchPropsProvider } from './use-color-picker-swatch-props-context'
   import { createSplitProps } from '../../utils/create-split-props'
 
-  const props: ColorPickerSwatchProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerSwatchProps = $props()
 
   const [swatchProps, localProps] = $derived(createSplitProps<SwatchProps>()(props, ['value', 'respectAlpha']))
 
@@ -23,4 +23,4 @@
   ColorPickerSwatchPropsProvider(() => swatchProps)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

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

package/dist/components/color-picker/color-picker-transparency-grid.svelte

@@ -1,7 +1,10 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface ColorPickerTransparencyGridBaseProps extends TransparencyGridProps, PolymorphicProps<'div'> {}
+  export interface ColorPickerTransparencyGridBaseProps
+    extends TransparencyGridProps,
+      PolymorphicProps<'div'>,
+      RefAttribute {}
   export interface ColorPickerTransparencyGridProps
     extends Assign<HTMLProps<'div'>, ColorPickerTransparencyGridBaseProps> {}
 </script>
@@ -13,7 +16,7 @@
   import type { TransparencyGridProps } from '@zag-js/color-picker'
   import { createSplitProps } from '../../utils/create-split-props'
 
-  const props: ColorPickerTransparencyGridProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerTransparencyGridProps = $props()
 
   const [gridProps, localProps] = $derived(createSplitProps<TransparencyGridProps>()(props, ['size']))
 
@@ -21,4 +24,4 @@
   const mergedProps = $derived(mergeProps(colorPicker().getTransparencyGridProps(gridProps), localProps))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-transparency-grid.svelte.d.ts

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

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

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

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