@ark-ui/svelte 5.0.3 → 5.0.5

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

package/dist/components/clipboard/clipboard-label.svelte.d.ts

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

package/dist/components/clipboard/clipboard-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 { UseClipboardReturn } from './use-clipboard.svelte'
 
-  export interface ClipboardRootProviderBaseProps extends PolymorphicProps<'div'> {
+  export interface ClipboardRootProviderBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     value: UseClipboardReturn
   }
   export interface ClipboardRootProviderProps extends Assign<HTMLProps<'div'>, ClipboardRootProviderBaseProps> {}
@@ -13,11 +13,11 @@
   import { Ark } from '../factory'
   import { ClipboardProvider } from './use-clipboard-context'
 
-  const { value, ...props }: ClipboardRootProviderProps = $props()
+  let { ref = $bindable(null), value, ...props }: ClipboardRootProviderProps = $props()
 
   const mergedProps = $derived(mergeProps(value().getRootProps(), props))
 
   ClipboardProvider(value)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,10 +1,10 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseClipboardReturn } from './use-clipboard.svelte';
-export interface ClipboardRootProviderBaseProps extends PolymorphicProps<'div'> {
+export interface ClipboardRootProviderBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     value: UseClipboardReturn;
 }
 export interface ClipboardRootProviderProps extends Assign<HTMLProps<'div'>, ClipboardRootProviderBaseProps> {
 }
-declare const ClipboardRootProvider: import("svelte").Component<ClipboardRootProviderProps, {}, "">;
+declare const ClipboardRootProvider: import("svelte").Component<ClipboardRootProviderProps, {}, "ref">;
 type ClipboardRootProvider = ReturnType<typeof ClipboardRootProvider>;
 export default ClipboardRootProvider;

package/dist/components/clipboard/clipboard-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 { UseClipboardProps } from './use-clipboard.svelte'
 
-  export interface ClipboardRootBaseProps extends UseClipboardProps, PolymorphicProps<'div'> {}
+  export interface ClipboardRootBaseProps extends UseClipboardProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface ClipboardRootProps extends Assign<HTMLProps<'div'>, ClipboardRootBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { ClipboardProvider } from './use-clipboard-context'
   import { useClipboard } from './use-clipboard.svelte'
 
-  let { value = $bindable(), ...props }: ClipboardRootProps = $props()
+  let { ref = $bindable(null), value = $bindable(), ...props }: ClipboardRootProps = $props()
   const providedId = $props.id()
 
   const [useClipboardProps, localProps] = $derived(splitClipboardProps(props))
@@ -24,7 +24,7 @@
     value,
     onValueChange(details) {
       useClipboardProps.onValueChange?.(details)
-      value = details.value
+      if (value !== undefined) value = details.value
     },
   })
 
@@ -34,4 +34,4 @@
   ClipboardProvider(clipboard)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark bind:ref as="div" {...mergedProps} />

package/dist/components/clipboard/clipboard-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 { UseClipboardProps } from './use-clipboard.svelte';
-export interface ClipboardRootBaseProps extends UseClipboardProps, PolymorphicProps<'div'> {
+export interface ClipboardRootBaseProps extends UseClipboardProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface ClipboardRootProps extends Assign<HTMLProps<'div'>, ClipboardRootBaseProps> {
 }
-declare const ClipboardRoot: import("svelte").Component<ClipboardRootProps, {}, "value">;
+declare const ClipboardRoot: import("svelte").Component<ClipboardRootProps, {}, "ref" | "value">;
 type ClipboardRoot = ReturnType<typeof ClipboardRoot>;
 export default ClipboardRoot;

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

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

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

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;