@ark-ui/svelte 5.0.3 → 5.0.5

package/dist/components/factory/factory.svelte

@@ -17,7 +17,7 @@
       ref?: Element | null
     }
 
-  let { asChild, children, as, ref = $bindable<Element | null>(null), ...rest }: Props = $props()
+  let { asChild, children, as, ref = $bindable(null), ...rest }: Props = $props()
 
   const propsFn: PropsFn<T> = (props) => mergeProps(rest, props ?? {})
 </script>

package/dist/components/field/field-error-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 FieldErrorTextBaseProps extends PolymorphicProps<'span'> {}
+  export interface FieldErrorTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
   export interface FieldErrorTextProps extends Assign<HTMLProps<'span'>, FieldErrorTextBaseProps> {}
 </script>
 
@@ -10,11 +10,11 @@
   import { Ark } from '../factory'
   import { useFieldContext } from './use-field-context'
 
-  const props: FieldErrorTextProps = $props()
+  let { ref = $bindable(null), ...props }: FieldErrorTextProps = $props()
   const field = useFieldContext()
   const mergedProps = $derived(mergeProps(field?.().getErrorTextProps() ?? {}, props))
 </script>
 
 {#if field?.().invalid}
-  <Ark as="span" {...mergedProps} />
+  <Ark as="span" bind:ref {...mergedProps} />
 {/if}

package/dist/components/field/field-error-text.svelte.d.ts

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

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

package/dist/components/field/field-helper-text.svelte.d.ts

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

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

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

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

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

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

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

package/dist/components/field/field-required-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 FieldRequiredIndicatorBaseProps extends PolymorphicProps<'span'> {
+  export interface FieldRequiredIndicatorBaseProps extends PolymorphicProps<'span'>, RefAttribute {
     fallback?: Snippet
   }
   export interface FieldRequiredIndicatorProps extends Assign<HTMLProps<'span'>, FieldRequiredIndicatorBaseProps> {}
@@ -13,13 +13,13 @@
   import { Ark } from '../factory'
   import { useFieldContext } from './use-field-context'
 
-  const props: FieldRequiredIndicatorProps = $props()
+  let { ref = $bindable(null), ...props }: FieldRequiredIndicatorProps = $props()
   const field = useFieldContext()
   const mergedProps = $derived(mergeProps(field?.().getRequiredIndicatorProps() ?? {}, props))
 </script>
 
 {#if field?.().required}
-  <Ark as="span" {...mergedProps}>
+  <Ark as="span" bind:ref {...mergedProps}>
     {#if props.children}
       {@render props.children?.()}
     {:else}

package/dist/components/field/field-required-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 FieldRequiredIndicatorBaseProps extends PolymorphicProps<'span'> {
+export interface FieldRequiredIndicatorBaseProps extends PolymorphicProps<'span'>, RefAttribute {
     fallback?: Snippet;
 }
 export interface FieldRequiredIndicatorProps extends Assign<HTMLProps<'span'>, FieldRequiredIndicatorBaseProps> {
 }
-declare const FieldRequiredIndicator: import("svelte").Component<FieldRequiredIndicatorProps, {}, "">;
+declare const FieldRequiredIndicator: import("svelte").Component<FieldRequiredIndicatorProps, {}, "ref">;
 type FieldRequiredIndicator = ReturnType<typeof FieldRequiredIndicator>;
 export default FieldRequiredIndicator;

package/dist/components/field/field-root.svelte

@@ -1,10 +1,8 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { UseFieldProps } from './use-field.svelte'
 
-  export interface FieldRootBaseProps extends UseFieldProps, PolymorphicProps<'div'> {
-    ref?: Element | null
-  }
+  export interface FieldRootBaseProps extends UseFieldProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface FieldRootProps extends Assign<HTMLProps<'div'>, FieldRootBaseProps> {}
 </script>
 
@@ -37,8 +35,7 @@
 
   function setNode(node: Element | null) {
     field().setRootRef(node)
-    ref = node
   }
 </script>
 
-<Ark as="div" {...mergedProps} {@attach setNode} />
+<Ark as="div" bind:ref {...mergedProps} {@attach setNode} />

package/dist/components/field/field-root.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseFieldProps } from './use-field.svelte';
-export interface FieldRootBaseProps extends UseFieldProps, PolymorphicProps<'div'> {
-    ref?: Element | null;
+export interface FieldRootBaseProps extends UseFieldProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface FieldRootProps extends Assign<HTMLProps<'div'>, FieldRootBaseProps> {
 }

package/dist/components/field/field-select.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface FieldSelectBaseProps extends PolymorphicProps<'select'> {}
+  export interface FieldSelectBaseProps extends PolymorphicProps<'select'>, RefAttribute {}
   export interface FieldSelectProps extends Assign<HTMLProps<'select'>, FieldSelectBaseProps> {}
 </script>
 
@@ -10,9 +10,9 @@
   import { Ark } from '../factory'
   import { useFieldContext } from './use-field-context'
 
-  const props: FieldSelectProps = $props()
+  let { ref = $bindable(null), ...props }: FieldSelectProps = $props()
   const field = useFieldContext()
   const mergedProps = $derived(mergeProps(field?.().getSelectProps() ?? {}, props))
 </script>
 
-<Ark as="select" {...mergedProps} />
+<Ark as="select" bind:ref {...mergedProps} />

package/dist/components/field/field-select.svelte.d.ts

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

package/dist/components/field/field-textarea.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 FieldTextareaBaseProps extends PolymorphicProps<'textarea'> {
+  export interface FieldTextareaBaseProps extends PolymorphicProps<'textarea'>, RefAttribute {
     /**
      * Whether the textarea should autoresize
      * @default false
@@ -17,9 +17,9 @@
   import { Ark } from '../factory'
   import { useFieldContext } from './use-field-context'
 
-  let textareaRef = $state<HTMLTextAreaElement | null>(null)
+  let { ref = $bindable(null), autoresize, ...props }: FieldTextareaProps = $props()
 
-  const { autoresize, ...props }: FieldTextareaProps = $props()
+  let textareaRef = $state<HTMLTextAreaElement | null>(null)
 
   const field = useFieldContext()
   const mergedProps = $derived(
@@ -30,6 +30,10 @@
     if (!autoresize) return
     return autoresizeTextarea(textareaRef)
   })
+
+  function setNode(node: HTMLTextAreaElement | null) {
+    textareaRef = node
+  }
 </script>
 
-<Ark as="textarea" {...mergedProps} bind:ref={textareaRef} />
+<Ark as="textarea" bind:ref {...mergedProps} {@attach setNode} />

package/dist/components/field/field-textarea.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface FieldTextareaBaseProps extends PolymorphicProps<'textarea'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface FieldTextareaBaseProps extends PolymorphicProps<'textarea'>, RefAttribute {
     /**
      * Whether the textarea should autoresize
      * @default false
@@ -8,6 +8,6 @@ export interface FieldTextareaBaseProps extends PolymorphicProps<'textarea'> {
 }
 export interface FieldTextareaProps extends Assign<HTMLProps<'textarea'>, FieldTextareaBaseProps> {
 }
-declare const FieldTextarea: import("svelte").Component<FieldTextareaProps, {}, "">;
+declare const FieldTextarea: import("svelte").Component<FieldTextareaProps, {}, "ref">;
 type FieldTextarea = ReturnType<typeof FieldTextarea>;
 export default FieldTextarea;

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

package/dist/components/fieldset/fieldset-error-text.svelte.d.ts

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

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

package/dist/components/fieldset/fieldset-helper-text.svelte.d.ts

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

package/dist/components/fieldset/fieldset-legend.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 FieldsetLegendBaseProps extends PolymorphicProps<'legend'> {}
+  export interface FieldsetLegendBaseProps extends PolymorphicProps<'legend'>, RefAttribute {}
   export interface FieldsetLegendProps extends Assign<HTMLProps<'legend'>, FieldsetLegendBaseProps> {}
 </script>
 
@@ -10,9 +10,9 @@
   import { Ark } from '../factory'
   import { useFieldsetContext } from './use-fieldset-context'
 
-  const props: FieldsetLegendProps = $props()
+  let { ref = $bindable(null), ...props }: FieldsetLegendProps = $props()
   const fieldset = useFieldsetContext()
   const mergedProps = $derived(mergeProps(fieldset?.().getLegendProps(), props))
 </script>
 
-<Ark as="legend" {...mergedProps} />
+<Ark as="legend" bind:ref {...mergedProps} />

package/dist/components/fieldset/fieldset-legend.svelte.d.ts

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

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

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

package/dist/components/fieldset/fieldset-root.svelte

@@ -1,10 +1,8 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { UseFieldsetProps } from './use-fieldset.svelte'
 
-  export interface FieldsetRootBaseProps extends UseFieldsetProps, PolymorphicProps<'fieldset'> {
-    ref?: Element | null
-  }
+  export interface FieldsetRootBaseProps extends UseFieldsetProps, PolymorphicProps<'fieldset'>, RefAttribute {}
   export interface FieldsetRootProps extends Assign<HTMLProps<'fieldset'>, FieldsetRootBaseProps> {}
 </script>
 
@@ -35,10 +33,9 @@
 
   FieldsetProvider(fieldset)
 
-  function setNode(node: Element | null) {
+  function setNode(node: HTMLFieldSetElement | null) {
     fieldset().setRootRef(node)
-    ref = node
   }
 </script>
 
-<Ark as="fieldset" {...mergedProps} {@attach setNode} />
+<Ark as="fieldset" bind:ref {...mergedProps} {@attach setNode} />

package/dist/components/fieldset/fieldset-root.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseFieldsetProps } from './use-fieldset.svelte';
-export interface FieldsetRootBaseProps extends UseFieldsetProps, PolymorphicProps<'fieldset'> {
-    ref?: Element | null;
+export interface FieldsetRootBaseProps extends UseFieldsetProps, PolymorphicProps<'fieldset'>, RefAttribute {
 }
 export interface FieldsetRootProps extends Assign<HTMLProps<'fieldset'>, FieldsetRootBaseProps> {
 }

package/dist/components/file-upload/file-upload-clear-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 FileUploadClearTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface FileUploadClearTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
   export interface FileUploadClearTriggerProps extends Assign<HTMLProps<'button'>, FileUploadClearTriggerBaseProps> {}
 </script>
 
@@ -10,9 +10,9 @@
   import { Ark } from '../factory'
   import { useFileUploadContext } from './use-file-upload-context'
 
-  const props: FileUploadClearTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: FileUploadClearTriggerProps = $props()
   const fileUpload = useFileUploadContext()
   const mergedProps = $derived(mergeProps(fileUpload().getClearTriggerProps(), props))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/file-upload/file-upload-clear-trigger.svelte.d.ts

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

package/dist/components/file-upload/file-upload-dropzone.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
   import type { DropzoneProps } from '@zag-js/file-upload'
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface FileUploadDropzoneBaseProps extends PolymorphicProps<'div'>, DropzoneProps {}
+  export interface FileUploadDropzoneBaseProps extends PolymorphicProps<'div'>, DropzoneProps, RefAttribute {}
   export interface FileUploadDropzoneProps extends Assign<HTMLProps<'div'>, FileUploadDropzoneBaseProps> {}
 </script>
 
@@ -12,7 +12,7 @@
   import { Ark } from '../factory'
   import { useFileUploadContext } from './use-file-upload-context'
 
-  const props: FileUploadDropzoneProps = $props()
+  let { ref = $bindable(null), ...props }: FileUploadDropzoneProps = $props()
   const fileUpload = useFileUploadContext()
 
   const [dropzoneProps, localProps] = $derived(createSplitProps<DropzoneProps>()(props, ['disableClick']))
@@ -20,4 +20,4 @@
   const mergedProps = $derived(mergeProps(fileUpload().getDropzoneProps(dropzoneProps), localProps))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/file-upload/file-upload-dropzone.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { DropzoneProps } from '@zag-js/file-upload';
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface FileUploadDropzoneBaseProps extends PolymorphicProps<'div'>, DropzoneProps {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface FileUploadDropzoneBaseProps extends PolymorphicProps<'div'>, DropzoneProps, RefAttribute {
 }
 export interface FileUploadDropzoneProps extends Assign<HTMLProps<'div'>, FileUploadDropzoneBaseProps> {
 }
-declare const FileUploadDropzone: import("svelte").Component<FileUploadDropzoneProps, {}, "">;
+declare const FileUploadDropzone: import("svelte").Component<FileUploadDropzoneProps, {}, "ref">;
 type FileUploadDropzone = ReturnType<typeof FileUploadDropzone>;
 export default FileUploadDropzone;

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

package/dist/components/file-upload/file-upload-hidden-input.svelte.d.ts

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