@ark-ui/svelte 5.0.4 → 5.1.0

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

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

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

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

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

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

package/dist/components/presence/presence.svelte

@@ -1,10 +1,8 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import { type UsePresenceProps, usePresence } from './use-presence.svelte'
 
-  export interface PresenceBaseProps extends UsePresenceProps, PolymorphicProps<'div'> {
-    ref?: Element | null
-  }
+  export interface PresenceBaseProps extends UsePresenceProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface PresenceProps extends HTMLProps<'div'>, PresenceBaseProps {}
 </script>
 
@@ -13,7 +11,7 @@
   import { Ark } from '../factory'
   import { splitPresenceProps } from './split-presence-props.svelte'
 
-  let { ref = $bindable<Element | null>(null), ...props }: PresenceProps = $props()
+  let { ref = $bindable(null), ...props }: PresenceProps = $props()
 
   const [presenceProps, localProps] = $derived(splitPresenceProps(props))
   const presence = usePresence(() => presenceProps)
@@ -21,11 +19,10 @@
   const mergedProps = $derived(mergeProps(presence().getPresenceProps(), localProps))
 
   function setNode(node: Element | null) {
-    ref = node
     presence().setNode(node)
   }
 </script>
 
 {#if !presence().unmounted}
-  <Ark as="div" data-scope="presence" data-part="root" {@attach setNode} {...mergedProps} />
+  <Ark as="div" bind:ref data-scope="presence" data-part="root" {@attach setNode} {...mergedProps} />
 {/if}

package/dist/components/presence/presence.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { HTMLProps, PolymorphicProps } from '../../types';
+import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import { type UsePresenceProps } from './use-presence.svelte';
-export interface PresenceBaseProps extends UsePresenceProps, PolymorphicProps<'div'> {
-    ref?: Element | null;
+export interface PresenceBaseProps extends UsePresenceProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface PresenceProps extends HTMLProps<'div'>, PresenceBaseProps {
 }

package/dist/components/progress/progress-circle-range.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface ProgressCircleRangeBaseProps extends PolymorphicProps<'circle'> {}
+  export interface ProgressCircleRangeBaseProps extends PolymorphicProps<'circle'>, RefAttribute {}
   export interface ProgressCircleRangeProps extends HTMLProps<'circle'>, ProgressCircleRangeBaseProps {}
 </script>
 
@@ -10,9 +10,9 @@
   import { Ark } from '../factory'
   import { useProgressContext } from './use-progress-context'
 
-  const props: ProgressCircleRangeProps = $props()
+  let { ref = $bindable(null), ...props }: ProgressCircleRangeProps = $props()
   const progress = useProgressContext()
   const mergedProps = $derived(mergeProps(progress().getCircleRangeProps(), props))
 </script>
 
-<Ark as="circle" {...mergedProps} />
+<Ark as="circle" bind:ref {...mergedProps} />

package/dist/components/progress/progress-circle-range.svelte.d.ts

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

package/dist/components/progress/progress-circle-track.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface ProgressCircleTrackBaseProps extends PolymorphicProps<'circle'> {}
+  export interface ProgressCircleTrackBaseProps extends PolymorphicProps<'circle'>, RefAttribute {}
   export interface ProgressCircleTrackProps extends HTMLProps<'circle'>, ProgressCircleTrackBaseProps {}
 </script>
 
@@ -10,9 +10,9 @@
   import { Ark } from '../factory'
   import { useProgressContext } from './use-progress-context'
 
-  const props: ProgressCircleTrackProps = $props()
+  let { ref = $bindable(null), ...props }: ProgressCircleTrackProps = $props()
   const progress = useProgressContext()
   const mergedProps = $derived(mergeProps(progress().getCircleTrackProps(), props))
 </script>
 
-<Ark as="circle" {...mergedProps} />
+<Ark as="circle" bind:ref {...mergedProps} />

package/dist/components/progress/progress-circle-track.svelte.d.ts

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

package/dist/components/progress/progress-circle.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface ProgressCircleBaseProps extends PolymorphicProps<'svg'> {}
+  export interface ProgressCircleBaseProps extends PolymorphicProps<'svg'>, RefAttribute {}
   export interface ProgressCircleProps extends HTMLProps<'svg'>, ProgressCircleBaseProps {}
 </script>
 
@@ -10,9 +10,9 @@
   import { Ark } from '../factory'
   import { useProgressContext } from './use-progress-context'
 
-  const props: ProgressCircleProps = $props()
+  let { ref = $bindable(null), ...props }: ProgressCircleProps = $props()
   const progress = useProgressContext()
   const mergedProps = $derived(mergeProps(progress().getCircleProps(), props))
 </script>
 
-<Ark as="svg" {...mergedProps} />
+<Ark as="svg" bind:ref {...mergedProps} />

package/dist/components/progress/progress-circle.svelte.d.ts

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

package/dist/components/progress/progress-label.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface ProgressLabelBaseProps extends PolymorphicProps<'label'> {}
+  export interface ProgressLabelBaseProps extends PolymorphicProps<'label'>, RefAttribute {}
   export interface ProgressLabelProps extends HTMLProps<'label'>, ProgressLabelBaseProps {}
 </script>
 
@@ -10,9 +10,9 @@
   import { Ark } from '../factory'
   import { useProgressContext } from './use-progress-context'
 
-  const props: ProgressLabelProps = $props()
+  let { ref = $bindable(null), ...props }: ProgressLabelProps = $props()
   const progress = useProgressContext()
   const mergedProps = $derived(mergeProps(progress().getLabelProps(), props))
 </script>
 
-<Ark as="label" {...mergedProps} />
+<Ark as="label" bind:ref {...mergedProps} />

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

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

package/dist/components/progress/progress-range.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface ProgressRangeBaseProps extends PolymorphicProps<'div'> {}
+  export interface ProgressRangeBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface ProgressRangeProps extends HTMLProps<'div'>, ProgressRangeBaseProps {}
 </script>
 
@@ -10,9 +10,9 @@
   import { Ark } from '../factory'
   import { useProgressContext } from './use-progress-context'
 
-  const props: ProgressRangeProps = $props()
+  let { ref = $bindable(null), ...props }: ProgressRangeProps = $props()
   const progress = useProgressContext()
   const mergedProps = $derived(mergeProps(progress().getRangeProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/progress/progress-range.svelte.d.ts

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

package/dist/components/progress/progress-root-provider.svelte

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

package/dist/components/progress/progress-root-provider.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { Assign, HTMLProps } from '../../types';
+import type { Assign, HTMLProps, RefAttribute } from '../../types';
 import type { UseProgressReturn } from './use-progress.svelte';
 interface RootProviderProps {
     value: UseProgressReturn;
 }
-export interface ProgressRootProviderBaseProps extends RootProviderProps {
+export interface ProgressRootProviderBaseProps extends RootProviderProps, RefAttribute {
 }
 export interface ProgressRootProviderProps extends Assign<HTMLProps<'div'>, ProgressRootProviderBaseProps> {
 }
-declare const ProgressRootProvider: import("svelte").Component<ProgressRootProviderProps, {}, "">;
+declare const ProgressRootProvider: import("svelte").Component<ProgressRootProviderProps, {}, "ref">;
 type ProgressRootProvider = ReturnType<typeof ProgressRootProvider>;
 export default ProgressRootProvider;

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

@@ -1,8 +1,11 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types'
   import type { UseProgressProps } from './use-progress.svelte'
 
-  export interface ProgressRootBaseProps extends Optional<UseProgressProps, 'id'>, PolymorphicProps<'div'> {}
+  export interface ProgressRootBaseProps
+    extends Optional<UseProgressProps, 'id'>,
+      PolymorphicProps<'div'>,
+      RefAttribute {}
   export interface ProgressRootProps extends Assign<HTMLProps<'div'>, ProgressRootBaseProps> {}
 </script>
 
@@ -13,7 +16,7 @@
   import { ProgressProvider } from './use-progress-context'
   import { useProgress } from './use-progress.svelte'
 
-  let { value = $bindable(), ...props }: ProgressRootProps = $props()
+  let { ref = $bindable(null), value = $bindable(), ...props }: ProgressRootProps = $props()
   const providedId = $props.id()
 
   const [useProgressProps, localProps] = $derived(
@@ -36,8 +39,8 @@
     id: useProgressProps.id ?? providedId,
     value,
     onValueChange(details) {
-      value = details.value
       useProgressProps.onValueChange?.(details)
+      if (value !== undefined) value = details.value
     },
   })
 
@@ -47,4 +50,4 @@
   ProgressProvider(progress)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseProgressProps } from './use-progress.svelte';
-export interface ProgressRootBaseProps extends Optional<UseProgressProps, 'id'>, PolymorphicProps<'div'> {
+export interface ProgressRootBaseProps extends Optional<UseProgressProps, 'id'>, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface ProgressRootProps extends Assign<HTMLProps<'div'>, ProgressRootBaseProps> {
 }
-declare const ProgressRoot: import("svelte").Component<ProgressRootProps, {}, "value">;
+declare const ProgressRoot: import("svelte").Component<ProgressRootProps, {}, "ref" | "value">;
 type ProgressRoot = ReturnType<typeof ProgressRoot>;
 export default ProgressRoot;

package/dist/components/progress/progress-track.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface ProgressTrackBaseProps extends PolymorphicProps<'div'> {}
+  export interface ProgressTrackBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface ProgressTrackProps extends HTMLProps<'div'>, ProgressTrackBaseProps {}
 </script>
 
@@ -10,9 +10,9 @@
   import { Ark } from '../factory'
   import { useProgressContext } from './use-progress-context'
 
-  const props: ProgressTrackProps = $props()
+  let { ref = $bindable(null), ...props }: ProgressTrackProps = $props()
   const progress = useProgressContext()
   const mergedProps = $derived(mergeProps(progress().getTrackProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/progress/progress-track.svelte.d.ts

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

package/dist/components/progress/progress-value-text.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface ProgressValueTextBaseProps extends PolymorphicProps<'span'> {}
+  export interface ProgressValueTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
   export interface ProgressValueTextProps extends HTMLProps<'span'>, ProgressValueTextBaseProps {}
 </script>
 
@@ -10,12 +10,12 @@
   import { Ark } from '../factory'
   import { useProgressContext } from './use-progress-context'
 
-  const { children, ...rest }: ProgressValueTextProps = $props()
+  let { ref = $bindable(null), children, ...rest }: ProgressValueTextProps = $props()
   const progress = useProgressContext()
   const mergedProps = $derived(mergeProps(progress().getValueTextProps(), rest))
 </script>
 
-<Ark as="span" {...mergedProps}>
+<Ark as="span" bind:ref {...mergedProps}>
   {#if children}
     {@render children()}
   {:else}

package/dist/components/progress/progress-value-text.svelte.d.ts

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

package/dist/components/progress/progress-view.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { ViewProps } from '@zag-js/progress'
 
-  export interface ProgressViewBaseProps extends ViewProps, PolymorphicProps<'span'> {}
+  export interface ProgressViewBaseProps extends ViewProps, PolymorphicProps<'span'>, RefAttribute {}
   export interface ProgressViewProps extends HTMLProps<'span'>, ProgressViewBaseProps {}
 </script>
 
@@ -11,9 +11,9 @@
   import { Ark } from '../factory'
   import { useProgressContext } from './use-progress-context'
 
-  const props: ProgressViewProps = $props()
+  let { ref = $bindable(null), ...props }: ProgressViewProps = $props()
   const progress = useProgressContext()
   const mergedProps = $derived(mergeProps(progress().getViewProps(props), props))
 </script>
 
-<Ark as="span" {...mergedProps} />
+<Ark as="span" bind:ref {...mergedProps} />

package/dist/components/progress/progress-view.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { HTMLProps, PolymorphicProps } from '../../types';
+import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { ViewProps } from '@zag-js/progress';
-export interface ProgressViewBaseProps extends ViewProps, PolymorphicProps<'span'> {
+export interface ProgressViewBaseProps extends ViewProps, PolymorphicProps<'span'>, RefAttribute {
 }
 export interface ProgressViewProps extends HTMLProps<'span'>, ProgressViewBaseProps {
 }
-declare const ProgressView: import("svelte").Component<ProgressViewProps, {}, "">;
+declare const ProgressView: import("svelte").Component<ProgressViewProps, {}, "ref">;
 type ProgressView = ReturnType<typeof ProgressView>;
 export default ProgressView;

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

@@ -1,8 +1,11 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { DownloadTriggerProps } from '@zag-js/qr-code'
 
-  export interface QrCodeDownloadTriggerBaseProps extends DownloadTriggerProps, PolymorphicProps<'button'> {}
+  export interface QrCodeDownloadTriggerBaseProps
+    extends DownloadTriggerProps,
+      PolymorphicProps<'button'>,
+      RefAttribute {}
 
   export interface QrCodeDownloadTriggerProps extends HTMLProps<'button'>, QrCodeDownloadTriggerBaseProps {}
 </script>
@@ -13,7 +16,7 @@
   import { Ark } from '../factory'
   import { useQrCodeContext } from './use-qr-code-context'
 
-  const props: QrCodeDownloadTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: QrCodeDownloadTriggerProps = $props()
   const [downloadTriggerProps, localProps] = $derived(
     createSplitProps<DownloadTriggerProps>()(props, ['fileName', 'mimeType', 'quality']),
   )
@@ -21,4 +24,4 @@
   const mergedProps = $derived(mergeProps(qrCode().getDownloadTriggerProps(downloadTriggerProps), localProps))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

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

@@ -1,9 +1,9 @@
-import type { HTMLProps, PolymorphicProps } from '../../types';
+import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { DownloadTriggerProps } from '@zag-js/qr-code';
-export interface QrCodeDownloadTriggerBaseProps extends DownloadTriggerProps, PolymorphicProps<'button'> {
+export interface QrCodeDownloadTriggerBaseProps extends DownloadTriggerProps, PolymorphicProps<'button'>, RefAttribute {
 }
 export interface QrCodeDownloadTriggerProps extends HTMLProps<'button'>, QrCodeDownloadTriggerBaseProps {
 }
-declare const QrCodeDownloadTrigger: import("svelte").Component<QrCodeDownloadTriggerProps, {}, "">;
+declare const QrCodeDownloadTrigger: import("svelte").Component<QrCodeDownloadTriggerProps, {}, "ref">;
 type QrCodeDownloadTrigger = ReturnType<typeof QrCodeDownloadTrigger>;
 export default QrCodeDownloadTrigger;

package/dist/components/qr-code/qr-code-frame.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface QrCodeFrameBaseProps extends PolymorphicProps<'svg'> {}
+  export interface QrCodeFrameBaseProps extends PolymorphicProps<'svg'>, RefAttribute {}
   export interface QrCodeFrameProps extends HTMLProps<'svg'>, QrCodeFrameBaseProps {}
 </script>
 
@@ -10,9 +10,9 @@
   import { Ark } from '../factory'
   import { useQrCodeContext } from './use-qr-code-context'
 
-  const props: QrCodeFrameProps = $props()
+  let { ref = $bindable(null), ...props }: QrCodeFrameProps = $props()
   const qrCode = useQrCodeContext()
   const mergedProps = $derived(mergeProps(qrCode().getFrameProps(), props))
 </script>
 
-<Ark as="svg" {...mergedProps} />
+<Ark as="svg" bind:ref {...mergedProps} />

package/dist/components/qr-code/qr-code-frame.svelte.d.ts

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

package/dist/components/qr-code/qr-code-overlay.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface QrCodeOverlayBaseProps extends PolymorphicProps<'div'> {}
+  export interface QrCodeOverlayBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface QrCodeOverlayProps extends HTMLProps<'div'>, QrCodeOverlayBaseProps {}
 </script>
 
@@ -10,9 +10,9 @@
   import { Ark } from '../factory'
   import { useQrCodeContext } from './use-qr-code-context'
 
-  const props: QrCodeOverlayProps = $props()
+  let { ref = $bindable(null), ...props }: QrCodeOverlayProps = $props()
   const qrCode = useQrCodeContext()
   const mergedProps = $derived(mergeProps(qrCode().getOverlayProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/qr-code/qr-code-overlay.svelte.d.ts

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