@ark-ui/svelte 5.0.4 → 5.1.0

package/dist/components/dialog/dialog-title.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 DialogTitleBaseProps extends PolymorphicProps<'h2'> {}
+  export interface DialogTitleBaseProps extends PolymorphicProps<'h2'>, RefAttribute {}
   export interface DialogTitleProps extends Assign<HTMLProps<'h2'>, DialogTitleBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory'
   import { useDialogContext } from './use-dialog-context'
 
-  const props: DialogTitleProps = $props()
+  let { ref = $bindable(null), ...props }: DialogTitleProps = $props()
 
   const dialog = useDialogContext()
   const mergedProps = $derived(mergeProps(dialog().getTitleProps(), props))
 </script>
 
-<Ark as="h2" {...mergedProps} />
+<Ark as="h2" bind:ref {...mergedProps} />

package/dist/components/dialog/dialog-title.svelte.d.ts

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

package/dist/components/dialog/dialog-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 DialogTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface DialogTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
   export interface DialogTriggerProps extends Assign<HTMLProps<'button'>, DialogTriggerBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { usePresenceContext } from '../presence'
   import { useDialogContext } from './use-dialog-context'
 
-  const props: DialogTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: DialogTriggerProps = $props()
 
   const dialog = useDialogContext()
   const presence = usePresenceContext()
@@ -26,4 +26,4 @@
   )
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

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

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

package/dist/components/download-trigger/download-trigger.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import { getWindow } from '@zag-js/dom-query'
   import { type FileMimeType, downloadFile } from '@zag-js/file-utils'
   import { isFunction } from '@zag-js/utils'
@@ -8,7 +8,7 @@
   export type DownloadableData = string | Blob | File
   export type MaybePromise<T> = T | Promise<T>
 
-  export interface DownloadTriggerBaseProps extends PolymorphicProps<'button'> {
+  export interface DownloadTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {
     fileName: string
     data: DownloadableData | (() => MaybePromise<DownloadableData>)
     mimeType: FileMimeType
@@ -16,7 +16,7 @@
 
   export interface DownloadTriggerProps extends Assign<HTMLProps<'button'>, DownloadTriggerBaseProps> {}
 
-  const { fileName, data, mimeType, onclick, ...restProps }: DownloadTriggerProps = $props()
+  let { ref = $bindable(null), fileName, data, mimeType, onclick, ...restProps }: DownloadTriggerProps = $props()
 
   const download = (fileData: DownloadableData, win: Window & typeof globalThis) => {
     downloadFile({ file: fileData, name: fileName, type: mimeType, win })
@@ -40,4 +40,4 @@
   }
 </script>
 
-<Ark as="button" {...restProps} type="button" onclick={handleClick} />
+<Ark as="button" bind:ref {...restProps} type="button" onclick={handleClick} />

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

@@ -1,14 +1,14 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import { type FileMimeType } from '@zag-js/file-utils';
 export type DownloadableData = string | Blob | File;
 export type MaybePromise<T> = T | Promise<T>;
-export interface DownloadTriggerBaseProps extends PolymorphicProps<'button'> {
+export interface DownloadTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {
     fileName: string;
     data: DownloadableData | (() => MaybePromise<DownloadableData>);
     mimeType: FileMimeType;
 }
 export interface DownloadTriggerProps extends Assign<HTMLProps<'button'>, DownloadTriggerBaseProps> {
 }
-declare const DownloadTrigger: import("svelte").Component<DownloadTriggerProps, {}, "">;
+declare const DownloadTrigger: import("svelte").Component<DownloadTriggerProps, {}, "ref">;
 type DownloadTrigger = ReturnType<typeof DownloadTrigger>;
 export default DownloadTrigger;

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

package/dist/components/editable/editable-area.svelte.d.ts

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

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

package/dist/components/editable/editable-cancel-trigger.svelte.d.ts

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

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

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

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

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

package/dist/components/editable/editable-edit-trigger.svelte.d.ts

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

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

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

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

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

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

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

package/dist/components/editable/editable-preview.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 EditablePreviewBaseProps extends PolymorphicProps<'span'> {}
+  export interface EditablePreviewBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
   export interface EditablePreviewProps extends Assign<HTMLProps<'span'>, EditablePreviewBaseProps> {}
 </script>
 
@@ -10,13 +10,13 @@
   import { Ark } from '../factory'
   import { useEditableContext } from './use-editable-context'
 
-  const props: EditablePreviewProps = $props()
+  let { ref = $bindable(null), ...props }: EditablePreviewProps = $props()
 
   const editable = useEditableContext()
   const mergedProps = $derived(mergeProps(editable().getPreviewProps(), props))
 </script>
 
-<Ark as="span" {...mergedProps}>
+<Ark as="span" bind:ref {...mergedProps}>
   {#if props.children}
     {@render props.children()}
   {:else}

package/dist/components/editable/editable-preview.svelte.d.ts

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

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

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

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

@@ -1,8 +1,8 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps } from '../../types'
+  import type { Assign, HTMLProps, RefAttribute } from '../../types'
   import type { UseEditableProps } from './use-editable.svelte'
 
-  export interface EditableRootBaseProps extends UseEditableProps {}
+  export interface EditableRootBaseProps extends UseEditableProps, RefAttribute {}
   export interface EditableRootProps extends Assign<HTMLProps<'div'>, EditableRootBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { EditableProvider } from './use-editable-context'
   import { useEditable } from './use-editable.svelte'
 
-  let { value = $bindable(), ...props }: EditableRootProps = $props()
+  let { ref = $bindable(null), value = $bindable(), ...props }: EditableRootProps = $props()
 
   const providedId = $props.id()
 
@@ -26,7 +26,7 @@
       value,
       onValueChange(details) {
         useEditableProps.onValueChange?.(details)
-        value = details.value
+        if (value !== undefined) value = details.value
       },
     }
   })
@@ -37,4 +37,4 @@
   EditableProvider(editable)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps } from '../../types';
+import type { Assign, HTMLProps, RefAttribute } from '../../types';
 import type { UseEditableProps } from './use-editable.svelte';
-export interface EditableRootBaseProps extends UseEditableProps {
+export interface EditableRootBaseProps extends UseEditableProps, RefAttribute {
 }
 export interface EditableRootProps extends Assign<HTMLProps<'div'>, EditableRootBaseProps> {
 }
-declare const EditableRoot: import("svelte").Component<EditableRootProps, {}, "value">;
+declare const EditableRoot: import("svelte").Component<EditableRootProps, {}, "ref" | "value">;
 type EditableRoot = ReturnType<typeof EditableRoot>;
 export default EditableRoot;

package/dist/components/editable/editable-split-props.d.ts

@@ -1,2 +1,2 @@
 import type { UseEditableProps } from './use-editable.svelte';
-export declare function splitEditableProps<T extends UseEditableProps>(props: T): [UseEditableProps, Omit<T, "form" | "name" | "defaultValue" | "value" | "ids" | "disabled" | "id" | "placeholder" | "onValueChange" | "translations" | "readOnly" | "invalid" | "required" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "finalFocusEl" | "autoResize" | "activationMode" | "submitMode" | "selectOnFocus" | "edit" | "defaultEdit" | "onEditChange" | "maxLength" | "onValueRevert" | "onValueCommit">];
+export declare function splitEditableProps<T extends UseEditableProps>(props: T): [UseEditableProps, Omit<T, "form" | "name" | "defaultValue" | "value" | "ids" | "disabled" | "id" | "placeholder" | "onValueChange" | "readOnly" | "invalid" | "required" | "translations" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "finalFocusEl" | "autoResize" | "activationMode" | "submitMode" | "selectOnFocus" | "edit" | "defaultEdit" | "onEditChange" | "maxLength" | "onValueRevert" | "onValueCommit">];

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

package/dist/components/editable/editable-submit-trigger.svelte.d.ts

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

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;