@ark-ui/svelte 5.0.3 → 5.0.5

package/dist/components/dialog/dialog-content.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
   export interface DialogContentBaseProps extends PolymorphicProps<'div'> {
     ref?: Element | null
@@ -21,10 +21,9 @@
 
   function setNode(node: Element | null) {
     presence().setNode(node)
-    ref = node
   }
 </script>
 
 {#if !presence().unmounted}
-  <Ark as="div" {...mergedProps} {@attach setNode} />
+  <Ark as="div" bind:ref {...mergedProps} {@attach setNode} />
 {/if}

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

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

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

package/dist/components/dialog/dialog-positioner.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 DialogPositionerBaseProps extends PolymorphicProps<'div'> {}
+  export interface DialogPositionerBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface DialogPositionerProps extends Assign<HTMLProps<'div'>, DialogPositionerBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { usePresenceContext } from '../presence'
   import { useDialogContext } from './use-dialog-context'
 
-  const props: DialogPositionerProps = $props()
+  let { ref = $bindable(null), ...props }: DialogPositionerProps = $props()
 
   const dialog = useDialogContext()
   const presence = usePresenceContext()
@@ -19,5 +19,5 @@
 </script>
 
 {#if !presence().unmounted}
-  <Ark as="div" {...mergedProps} />
+  <Ark as="div" bind:ref {...mergedProps} />
 {/if}

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

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

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

@@ -30,7 +30,7 @@
       open,
       onOpenChange(details) {
         localProps.onOpenChange?.(details)
-        open = details.open
+        if (open !== undefined) open = details.open
       },
     }
   })

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