@ark-ui/svelte 5.0.4 → 5.0.5

package/dist/components/carousel/carousel-item-group.svelte.d.ts

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

package/dist/components/carousel/carousel-item.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 { ItemProps } from '@zag-js/carousel'
 
-  export interface CarouselItemBaseProps extends ItemProps, PolymorphicProps<'div'> {}
+  export interface CarouselItemBaseProps extends ItemProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface CarouselItemProps extends Assign<HTMLProps<'div'>, CarouselItemBaseProps> {}
 </script>
 
@@ -12,7 +12,7 @@
   import { Ark } from '../factory'
   import { useCarouselContext } from './use-carousel-context'
 
-  const props: CarouselItemProps = $props()
+  let { ref = $bindable(null), ...props }: CarouselItemProps = $props()
 
   const [itemProps, localProps] = $derived(createSplitProps<ItemProps>()(props, ['index', 'snapAlign']))
 
@@ -20,4 +20,4 @@
   const mergedProps = $derived(mergeProps(carousel().getItemProps(itemProps), localProps))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/carousel/carousel-item.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { ItemProps } from '@zag-js/carousel';
-export interface CarouselItemBaseProps extends ItemProps, PolymorphicProps<'div'> {
+export interface CarouselItemBaseProps extends ItemProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface CarouselItemProps extends Assign<HTMLProps<'div'>, CarouselItemBaseProps> {
 }
-declare const CarouselItem: import("svelte").Component<CarouselItemProps, {}, "">;
+declare const CarouselItem: import("svelte").Component<CarouselItemProps, {}, "ref">;
 type CarouselItem = ReturnType<typeof CarouselItem>;
 export default CarouselItem;

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

package/dist/components/carousel/carousel-next-trigger.svelte.d.ts

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

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

package/dist/components/carousel/carousel-prev-trigger.svelte.d.ts

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

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

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

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/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;