@ark-ui/svelte 5.0.3 → 5.0.5

package/dist/components/file-upload/file-upload-item-delete-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 FileUploadItemDeleteTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface FileUploadItemDeleteTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
   export interface FileUploadItemDeleteTriggerProps
     extends Assign<HTMLProps<'button'>, FileUploadItemDeleteTriggerBaseProps> {}
 </script>
@@ -12,10 +12,10 @@
   import { useFileUploadContext } from './use-file-upload-context'
   import { useFileUploadItemPropsContext } from './use-file-upload-item-props-context'
 
-  const props: FileUploadItemDeleteTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: FileUploadItemDeleteTriggerProps = $props()
   const fileUpload = useFileUploadContext()
   const itemProps = useFileUploadItemPropsContext()
   const mergedProps = $derived(mergeProps(fileUpload().getItemDeleteTriggerProps(itemProps()), props))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

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

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

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

package/dist/components/file-upload/file-upload-item-group.svelte.d.ts

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

package/dist/components/file-upload/file-upload-item-name.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 FileUploadItemNameBaseProps extends PolymorphicProps<'div'> {}
+  export interface FileUploadItemNameBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface FileUploadItemNameProps extends Assign<HTMLProps<'div'>, FileUploadItemNameBaseProps> {}
 </script>
 
@@ -11,13 +11,13 @@
   import { useFileUploadContext } from './use-file-upload-context'
   import { useFileUploadItemPropsContext } from './use-file-upload-item-props-context'
 
-  const props: FileUploadItemNameProps = $props()
+  let { ref = $bindable(null), ...props }: FileUploadItemNameProps = $props()
   const fileUpload = useFileUploadContext()
   const itemProps = useFileUploadItemPropsContext()
   const mergedProps = $derived(mergeProps(fileUpload().getItemNameProps(itemProps()), props))
 </script>
 
-<Ark as="div" {...mergedProps}>
+<Ark as="div" bind:ref {...mergedProps}>
   {#if props.children}
     {@render props.children?.()}
   {:else}

package/dist/components/file-upload/file-upload-item-name.svelte.d.ts

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

package/dist/components/file-upload/file-upload-item-preview-image.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 FileUploadItemPreviewImageBaseProps extends PolymorphicProps<'img'> {}
+  export interface FileUploadItemPreviewImageBaseProps extends PolymorphicProps<'img'>, RefAttribute {}
   export interface FileUploadItemPreviewImageProps
     extends Assign<HTMLProps<'img'>, FileUploadItemPreviewImageBaseProps> {}
 </script>
@@ -12,7 +12,7 @@
   import { useFileUploadContext } from './use-file-upload-context'
   import { useFileUploadItemPropsContext } from './use-file-upload-item-props-context'
 
-  const props: FileUploadItemPreviewImageProps = $props()
+  let { ref = $bindable(null), ...props }: FileUploadItemPreviewImageProps = $props()
 
   let url = $state('')
   const fileUpload = useFileUploadContext()
@@ -28,5 +28,5 @@
 </script>
 
 {#if url}
-  <Ark as="img" {...mergedProps} />
+  <Ark as="img" bind:ref {...mergedProps} />
 {/if}

package/dist/components/file-upload/file-upload-item-preview-image.svelte.d.ts

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

package/dist/components/file-upload/file-upload-item-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 FileUploadItemPreviewBaseProps extends PolymorphicProps<'div'> {
+  export interface FileUploadItemPreviewBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     /**
      * The file type to match against. Matches all file types by default.
      */
@@ -16,7 +16,7 @@
   import { useFileUploadContext } from './use-file-upload-context'
   import { useFileUploadItemPropsContext } from './use-file-upload-item-props-context'
 
-  const { type, ...props }: FileUploadItemPreviewProps = $props()
+  let { ref = $bindable(null), type, ...props }: FileUploadItemPreviewProps = $props()
   const fileUpload = useFileUploadContext()
   const itemProps = useFileUploadItemPropsContext()
   const mergedProps = $derived(mergeProps(fileUpload().getItemPreviewProps(itemProps()), props))
@@ -25,5 +25,5 @@
 </script>
 
 {#if shouldRender}
-  <Ark as="div" {...mergedProps} />
+  <Ark as="div" bind:ref {...mergedProps} />
 {/if}

package/dist/components/file-upload/file-upload-item-preview.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface FileUploadItemPreviewBaseProps extends PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface FileUploadItemPreviewBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     /**
      * The file type to match against. Matches all file types by default.
      */
@@ -7,6 +7,6 @@ export interface FileUploadItemPreviewBaseProps extends PolymorphicProps<'div'>
 }
 export interface FileUploadItemPreviewProps extends Assign<HTMLProps<'div'>, FileUploadItemPreviewBaseProps> {
 }
-declare const FileUploadItemPreview: import("svelte").Component<FileUploadItemPreviewProps, {}, "">;
+declare const FileUploadItemPreview: import("svelte").Component<FileUploadItemPreviewProps, {}, "ref">;
 type FileUploadItemPreview = ReturnType<typeof FileUploadItemPreview>;
 export default FileUploadItemPreview;

package/dist/components/file-upload/file-upload-item-size-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 FileUploadItemSizeTextBaseProps extends PolymorphicProps<'div'> {}
+  export interface FileUploadItemSizeTextBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface FileUploadItemSizeTextProps extends Assign<HTMLProps<'div'>, FileUploadItemSizeTextBaseProps> {}
 </script>
 
@@ -11,13 +11,13 @@
   import { useFileUploadContext } from './use-file-upload-context'
   import { useFileUploadItemPropsContext } from './use-file-upload-item-props-context'
 
-  const props: FileUploadItemSizeTextProps = $props()
+  let { ref = $bindable(null), ...props }: FileUploadItemSizeTextProps = $props()
   const fileUpload = useFileUploadContext()
   const itemProps = useFileUploadItemPropsContext()
   const mergedProps = $derived(mergeProps(fileUpload().getItemSizeTextProps(itemProps()), props))
 </script>
 
-<Ark as="div" {...mergedProps}>
+<Ark as="div" bind:ref {...mergedProps}>
   {#if props.children}
     {@render props.children?.()}
   {:else}

package/dist/components/file-upload/file-upload-item-size-text.svelte.d.ts

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

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

@@ -1,8 +1,8 @@
 <script module lang="ts">
   import type { ItemProps } from '@zag-js/file-upload'
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface FileUploadItemBaseProps extends ItemProps, PolymorphicProps<'li'> {}
+  export interface FileUploadItemBaseProps extends ItemProps, PolymorphicProps<'li'>, RefAttribute {}
   export interface FileUploadItemProps extends Assign<HTMLProps<'li'>, FileUploadItemBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { useFileUploadContext } from './use-file-upload-context'
   import { FileUploadItemPropsProvider } from './use-file-upload-item-props-context'
 
-  const props: FileUploadItemProps = $props()
+  let { ref = $bindable(null), ...props }: FileUploadItemProps = $props()
   const fileUpload = useFileUploadContext()
 
   const [itemProps, localProps] = $derived(createSplitProps<ItemProps>()(props, ['file']))
@@ -23,4 +23,4 @@
   FileUploadItemPropsProvider(() => itemProps)
 </script>
 
-<Ark as="li" {...mergedProps} />
+<Ark as="li" bind:ref {...mergedProps} />

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

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

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

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

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

package/dist/components/file-upload/file-upload-root-provider.svelte

@@ -1,12 +1,12 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { UseFileUploadReturn } from './use-file-upload.svelte'
 
   interface RootProviderProps {
     value: UseFileUploadReturn
   }
 
-  export interface FileUploadRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {}
+  export interface FileUploadRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface FileUploadRootProviderProps extends Assign<HTMLProps<'div'>, FileUploadRootProviderBaseProps> {}
 </script>
 
@@ -15,10 +15,10 @@
   import { Ark } from '../factory'
   import { FileUploadProvider } from './use-file-upload-context'
 
-  const { value, ...props }: FileUploadRootProviderProps = $props()
+  let { ref = $bindable(null), value, ...props }: FileUploadRootProviderProps = $props()
   const mergedProps = $derived(mergeProps(value().getRootProps(), props))
 
   FileUploadProvider(value)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/file-upload/file-upload-root-provider.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseFileUploadReturn } from './use-file-upload.svelte';
 interface RootProviderProps {
     value: UseFileUploadReturn;
 }
-export interface FileUploadRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {
+export interface FileUploadRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface FileUploadRootProviderProps extends Assign<HTMLProps<'div'>, FileUploadRootProviderBaseProps> {
 }
-declare const FileUploadRootProvider: import("svelte").Component<FileUploadRootProviderProps, {}, "">;
+declare const FileUploadRootProvider: import("svelte").Component<FileUploadRootProviderProps, {}, "ref">;
 type FileUploadRootProvider = ReturnType<typeof FileUploadRootProvider>;
 export default FileUploadRootProvider;

package/dist/components/file-upload/file-upload-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 { UseFileUploadProps } from './use-file-upload.svelte'
 
-  export interface FileUploadRootBaseProps extends UseFileUploadProps, PolymorphicProps<'div'> {}
+  export interface FileUploadRootBaseProps extends UseFileUploadProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface FileUploadRootProps extends Assign<HTMLProps<'div'>, FileUploadRootBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { FileUploadProvider } from './use-file-upload-context'
   import { useFileUpload } from './use-file-upload.svelte'
 
-  const props: FileUploadRootProps = $props()
+  let { ref = $bindable(null), ...props }: FileUploadRootProps = $props()
   const providedId = $props.id()
 
   const [useFileUploadProps, localProps] = $derived(
@@ -53,4 +53,4 @@
   FileUploadProvider(fileUpload)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/file-upload/file-upload-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 { UseFileUploadProps } from './use-file-upload.svelte';
-export interface FileUploadRootBaseProps extends UseFileUploadProps, PolymorphicProps<'div'> {
+export interface FileUploadRootBaseProps extends UseFileUploadProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface FileUploadRootProps extends Assign<HTMLProps<'div'>, FileUploadRootBaseProps> {
 }
-declare const FileUploadRoot: import("svelte").Component<FileUploadRootProps, {}, "">;
+declare const FileUploadRoot: import("svelte").Component<FileUploadRootProps, {}, "ref">;
 type FileUploadRoot = ReturnType<typeof FileUploadRoot>;
 export default FileUploadRoot;

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

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

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

package/dist/components/floating-panel/floating-panel-body.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
 
-  export interface FloatingPanelBodyBaseProps extends PolymorphicProps<'div'> {}
+  export interface FloatingPanelBodyBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface FloatingPanelBodyProps extends Assign<HTMLProps<'div'>, FloatingPanelBodyBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory/index.js'
   import { useFloatingPanelContext } from './use-floating-panel-context.js'
 
-  let props: FloatingPanelBodyProps = $props()
+  let { ref = $bindable(null), ...props }: FloatingPanelBodyProps = $props()
 
   const floatingPanel = useFloatingPanelContext()
   const mergedProps = $derived(mergeProps(floatingPanel().getBodyProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/floating-panel/floating-panel-body.svelte.d.ts

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

package/dist/components/floating-panel/floating-panel-close-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
 
-  export interface FloatingPanelCloseTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface FloatingPanelCloseTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
   export interface FloatingPanelCloseTriggerProps
     extends Assign<HTMLProps<'button'>, FloatingPanelCloseTriggerBaseProps> {}
 </script>
@@ -11,10 +11,10 @@
   import { Ark } from '../factory/index.js'
   import { useFloatingPanelContext } from './use-floating-panel-context.js'
 
-  let props: FloatingPanelCloseTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: FloatingPanelCloseTriggerProps = $props()
 
   const floatingPanel = useFloatingPanelContext()
   const mergedProps = $derived(mergeProps(floatingPanel().getCloseTriggerProps(), props))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/floating-panel/floating-panel-close-trigger.svelte.d.ts

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

package/dist/components/floating-panel/floating-panel-content.svelte

@@ -11,7 +11,7 @@
   import { usePresenceContext } from '../presence/index.js'
   import { useFloatingPanelContext } from './use-floating-panel-context.js'
 
-  let { ref = $bindable(), ...props }: FloatingPanelContentProps = $props()
+  let { ref = $bindable(null), ...props }: FloatingPanelContentProps = $props()
 
   const floatingPanel = useFloatingPanelContext()
   const presence = usePresenceContext()
@@ -20,10 +20,9 @@
 
   function setNode(node: HTMLElement) {
     presence().setNode(node)
-    ref = node
   }
 </script>
 
 {#if !presence().unmounted}
-  <Ark as="div" {@attach setNode} {...mergedProps} />
+  <Ark as="div" bind:ref {@attach setNode} {...mergedProps} />
 {/if}

package/dist/components/floating-panel/floating-panel-control.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
 
-  export interface FloatingPanelControlBaseProps extends PolymorphicProps<'div'> {}
+  export interface FloatingPanelControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface FloatingPanelControlProps extends Assign<HTMLProps<'div'>, FloatingPanelControlBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory/index.js'
   import { useFloatingPanelContext } from './use-floating-panel-context.js'
 
-  let props: FloatingPanelControlProps = $props()
+  let { ref = $bindable(null), ...props }: FloatingPanelControlProps = $props()
 
   const floatingPanel = useFloatingPanelContext()
   const mergedProps = $derived(mergeProps(floatingPanel().getControlProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/floating-panel/floating-panel-control.svelte.d.ts

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

package/dist/components/floating-panel/floating-panel-drag-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
 
-  export interface FloatingPanelDragTriggerBaseProps extends PolymorphicProps<'div'> {}
+  export interface FloatingPanelDragTriggerBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface FloatingPanelDragTriggerProps extends Assign<HTMLProps<'div'>, FloatingPanelDragTriggerBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory/index.js'
   import { useFloatingPanelContext } from './use-floating-panel-context.js'
 
-  let props: FloatingPanelDragTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: FloatingPanelDragTriggerProps = $props()
 
   const floatingPanel = useFloatingPanelContext()
   const mergedProps = $derived(mergeProps(floatingPanel().getDragTriggerProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/floating-panel/floating-panel-drag-trigger.svelte.d.ts

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