@ark-ui/svelte 5.0.4 → 5.1.0

package/dist/components/carousel/carousel-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 { UseCarouselProps } from './use-carousel.svelte'
 
-  export interface CarouselRootBaseProps extends UseCarouselProps, PolymorphicProps<'div'> {}
+  export interface CarouselRootBaseProps extends UseCarouselProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface CarouselRootProps extends Assign<HTMLProps<'div'>, CarouselRootBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { CarouselProvider } from './use-carousel-context'
   import { createSplitProps } from '../../utils/create-split-props'
 
-  let { page = $bindable(), ...props }: CarouselRootProps = $props()
+  let { ref = $bindable(null), page = $bindable(), ...props }: CarouselRootProps = $props()
   const providedId = $props.id()
 
   const [useCarouselProps, localProps] = $derived(
@@ -56,4 +56,4 @@
   CarouselProvider(carousel)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/carousel/carousel-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 { UseCarouselProps } from './use-carousel.svelte';
-export interface CarouselRootBaseProps extends UseCarouselProps, PolymorphicProps<'div'> {
+export interface CarouselRootBaseProps extends UseCarouselProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface CarouselRootProps extends Assign<HTMLProps<'div'>, CarouselRootBaseProps> {
 }
-declare const CarouselRoot: import("svelte").Component<CarouselRootProps, {}, "page">;
+declare const CarouselRoot: import("svelte").Component<CarouselRootProps, {}, "ref" | "page">;
 type CarouselRoot = ReturnType<typeof CarouselRoot>;
 export default CarouselRoot;

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

package/dist/components/checkbox/checkbox-control.svelte.d.ts

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

package/dist/components/checkbox/checkbox-group.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 { UseCheckboxGroupProps } from './use-checkbox-group.svelte'
 
-  export interface CheckboxGroupBaseProps extends UseCheckboxGroupProps, PolymorphicProps<'div'> {}
+  export interface CheckboxGroupBaseProps extends UseCheckboxGroupProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface CheckboxGroupProps extends Assign<HTMLProps<'div'>, CheckboxGroupBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { splitCheckboxGroupProps } from './split-checkbox-group-props.svelte'
   import { useCheckboxGroup } from './use-checkbox-group.svelte'
 
-  let { value = $bindable(), ...props }: CheckboxGroupProps = $props()
+  let { ref = $bindable(null), value = $bindable(), ...props }: CheckboxGroupProps = $props()
 
   const [checkboxGroupProps, localProps] = $derived(splitCheckboxGroupProps(props))
 
@@ -31,4 +31,4 @@
   CheckboxGroupProvider(checkboxGroup)
 </script>
 
-<Ark as="div" role="group" {...checkboxAnatomy.build().group.attrs} {...localProps} />
+<Ark as="div" bind:ref role="group" {...checkboxAnatomy.build().group.attrs} {...localProps} />

package/dist/components/checkbox/checkbox-group.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseCheckboxGroupProps } from './use-checkbox-group.svelte';
-export interface CheckboxGroupBaseProps extends UseCheckboxGroupProps, PolymorphicProps<'div'> {
+export interface CheckboxGroupBaseProps extends UseCheckboxGroupProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface CheckboxGroupProps extends Assign<HTMLProps<'div'>, CheckboxGroupBaseProps> {
 }
-declare const CheckboxGroup: import("svelte").Component<CheckboxGroupProps, {}, "value">;
+declare const CheckboxGroup: import("svelte").Component<CheckboxGroupProps, {}, "ref" | "value">;
 type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
 export default CheckboxGroup;

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

package/dist/components/checkbox/checkbox-hidden-input.svelte.d.ts

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

package/dist/components/checkbox/checkbox-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 CheckboxIndicatorBaseProps extends PolymorphicProps<'div'> {
+  export interface CheckboxIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     indeterminate?: boolean
   }
   export interface CheckboxIndicatorProps extends Assign<HTMLProps<'div'>, CheckboxIndicatorBaseProps> {}
@@ -12,11 +12,11 @@
   import { Ark } from '../factory'
   import { useCheckboxContext } from './use-checkbox-context'
 
-  const { indeterminate, ...rest }: CheckboxIndicatorProps = $props()
+  let { ref = $bindable(null), indeterminate, ...rest }: CheckboxIndicatorProps = $props()
 
   const checkbox = useCheckboxContext()
   const mergedProps = $derived(mergeProps(checkbox().getIndicatorProps(), rest))
   const isVisible = $derived(indeterminate ? checkbox().indeterminate : checkbox().checked)
 </script>
 
-<Ark as="div" {...mergedProps} hidden={!isVisible} />
+<Ark as="div" bind:ref {...mergedProps} hidden={!isVisible} />

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

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface CheckboxIndicatorBaseProps extends PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface CheckboxIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     indeterminate?: boolean;
 }
 export interface CheckboxIndicatorProps extends Assign<HTMLProps<'div'>, CheckboxIndicatorBaseProps> {
 }
-declare const CheckboxIndicator: import("svelte").Component<CheckboxIndicatorProps, {}, "">;
+declare const CheckboxIndicator: import("svelte").Component<CheckboxIndicatorProps, {}, "ref">;
 type CheckboxIndicator = ReturnType<typeof CheckboxIndicator>;
 export default CheckboxIndicator;

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

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

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

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

package/dist/components/checkbox/checkbox-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 { UseCheckboxReturn } from './use-checkbox.svelte';
-export interface CheckboxRootProviderBaseProps extends PolymorphicProps<'label'> {
+export interface CheckboxRootProviderBaseProps extends PolymorphicProps<'label'>, RefAttribute {
     value: UseCheckboxReturn;
 }
 export interface CheckboxRootProviderProps extends Assign<HTMLProps<'label'>, CheckboxRootProviderBaseProps> {
 }
-declare const CheckboxRootProvider: import("svelte").Component<CheckboxRootProviderProps, {}, "">;
+declare const CheckboxRootProvider: import("svelte").Component<CheckboxRootProviderProps, {}, "ref">;
 type CheckboxRootProvider = ReturnType<typeof CheckboxRootProvider>;
 export default CheckboxRootProvider;

package/dist/components/checkbox/checkbox-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 { UseCheckboxProps } from './use-checkbox.svelte'
 
-  export interface CheckboxRootBaseProps extends UseCheckboxProps, PolymorphicProps<'label'> {}
+  export interface CheckboxRootBaseProps extends UseCheckboxProps, PolymorphicProps<'label'>, RefAttribute {}
   export interface CheckboxRootProps extends Assign<HTMLProps<'label'>, CheckboxRootBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { splitCheckboxProps } from './split-checkbox-props.svelte'
   import { useCheckbox } from './use-checkbox.svelte'
 
-  let { checked = $bindable(), ...props }: CheckboxRootProps = $props()
+  let { ref = $bindable(null), checked = $bindable(), ...props }: CheckboxRootProps = $props()
   const providedId = $props.id()
 
   const [useCheckboxProps, localProps] = $derived(splitCheckboxProps(props))
@@ -24,7 +24,7 @@
     checked,
     onCheckedChange(details) {
       useCheckboxProps.onCheckedChange?.(details)
-      checked = details.checked
+      if (checked !== undefined) checked = details.checked
     },
   })
 
@@ -34,4 +34,4 @@
   CheckboxProvider(checkbox)
 </script>
 
-<Ark as="label" {...mergedProps} />
+<Ark as="label" bind:ref {...mergedProps} />

package/dist/components/checkbox/checkbox-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 { UseCheckboxProps } from './use-checkbox.svelte';
-export interface CheckboxRootBaseProps extends UseCheckboxProps, PolymorphicProps<'label'> {
+export interface CheckboxRootBaseProps extends UseCheckboxProps, PolymorphicProps<'label'>, RefAttribute {
 }
 export interface CheckboxRootProps extends Assign<HTMLProps<'label'>, CheckboxRootBaseProps> {
 }
-declare const CheckboxRoot: import("svelte").Component<CheckboxRootProps, {}, "checked">;
+declare const CheckboxRoot: import("svelte").Component<CheckboxRootProps, {}, "ref" | "checked">;
 type CheckboxRoot = ReturnType<typeof CheckboxRoot>;
 export default CheckboxRoot;

package/dist/components/checkbox/split-checkbox-props.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { UseCheckboxProps } from './use-checkbox.svelte';
-export declare const splitCheckboxProps: <T extends UseCheckboxProps>(props: T) => [UseCheckboxProps, Omit<T, "form" | "name" | "value" | "ids" | "disabled" | "id" | "readOnly" | "invalid" | "required" | "checked" | "defaultChecked" | "onCheckedChange">];
+export declare const splitCheckboxProps: <T extends UseCheckboxProps>(props: T) => [UseCheckboxProps, Omit<T, "form" | "name" | "value" | "ids" | "disabled" | "id" | "readOnly" | "invalid" | "checked" | "required" | "defaultChecked" | "onCheckedChange">];

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

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

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

package/dist/components/clipboard/clipboard-indicator.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 { Snippet } from 'svelte'
 
-  export interface ClipboardIndicatorBaseProps extends PolymorphicProps<'div'> {
+  export interface ClipboardIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     copied?: Snippet
   }
   export interface ClipboardIndicatorProps extends Assign<HTMLProps<'div'>, ClipboardIndicatorBaseProps> {}
@@ -13,13 +13,13 @@
   import { Ark } from '../factory'
   import { useClipboardContext } from './use-clipboard-context'
 
-  const { children, copied, ...localProps }: ClipboardIndicatorProps = $props()
+  let { ref = $bindable(null), children, copied, ...localProps }: ClipboardIndicatorProps = $props()
 
   const clipboard = useClipboardContext()
   const mergedProps = $derived(mergeProps(clipboard().getIndicatorProps({ copied: clipboard().copied }), localProps))
 </script>
 
-<Ark as="div" {...mergedProps}>
+<Ark as="div" bind:ref {...mergedProps}>
   {#if clipboard().copied && copied}
     {@render copied()}
   {:else if children}

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

@@ -1,10 +1,10 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { Snippet } from 'svelte';
-export interface ClipboardIndicatorBaseProps extends PolymorphicProps<'div'> {
+export interface ClipboardIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     copied?: Snippet;
 }
 export interface ClipboardIndicatorProps extends Assign<HTMLProps<'div'>, ClipboardIndicatorBaseProps> {
 }
-declare const ClipboardIndicator: import("svelte").Component<ClipboardIndicatorProps, {}, "">;
+declare const ClipboardIndicator: import("svelte").Component<ClipboardIndicatorProps, {}, "ref">;
 type ClipboardIndicator = ReturnType<typeof ClipboardIndicator>;
 export default ClipboardIndicator;

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

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

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

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;