@ark-ui/svelte 5.0.4 → 5.0.5

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

package/dist/components/tooltip/tooltip-arrow-tip.svelte.d.ts

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

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

package/dist/components/tooltip/tooltip-arrow.svelte.d.ts

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

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

@@ -1,9 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface TooltipContentBaseProps extends PolymorphicProps<'div'> {
-    ref?: Element | null
-  }
+  export interface TooltipContentBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface TooltipContentProps extends Assign<HTMLProps<'div'>, TooltipContentBaseProps> {}
 </script>
 
@@ -13,18 +11,17 @@
   import { usePresenceContext } from '../presence'
   import { useTooltipContext } from './use-tooltip-context'
 
-  let { ref = $bindable<Element | null>(), ...props }: TooltipContentProps = $props()
+  let { ref = $bindable(null), ...props }: TooltipContentProps = $props()
 
   const tooltip = useTooltipContext()
   const presence = usePresenceContext()
   const mergedProps = $derived(mergeProps(tooltip().getContentProps(), presence().getPresenceProps(), props))
 
   function setNode(node: Element | null) {
-    ref = node
     presence().setNode(node)
   }
 </script>
 
 {#if !presence().unmounted}
-  <Ark as="div" {...mergedProps} {@attach setNode} />
+  <Ark as="div" bind:ref {...mergedProps} {@attach setNode} />
 {/if}

package/dist/components/tooltip/tooltip-content.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface TooltipContentBaseProps extends PolymorphicProps<'div'> {
-    ref?: Element | null;
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface TooltipContentBaseProps extends PolymorphicProps<'div'>, RefAttribute {
 }
 export interface TooltipContentProps extends Assign<HTMLProps<'div'>, TooltipContentBaseProps> {
 }

package/dist/components/tooltip/tooltip-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 TooltipPositionerBaseProps extends PolymorphicProps<'div'> {}
+  export interface TooltipPositionerBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface TooltipPositionerProps extends Assign<HTMLProps<'div'>, TooltipPositionerBaseProps> {}
 </script>
 
@@ -11,12 +11,12 @@
   import { usePresenceContext } from '../presence'
   import { useTooltipContext } from './use-tooltip-context'
 
-  const props: TooltipPositionerProps = $props()
+  let { ref = $bindable(null), ...props }: TooltipPositionerProps = $props()
   const tooltip = useTooltipContext()
   const presence = usePresenceContext()
   const mergedProps = $derived(mergeProps(tooltip().getPositionerProps(), props))
 </script>
 
 {#if !presence().unmounted}
-  <Ark as="div" {...mergedProps} />
+  <Ark as="div" bind:ref {...mergedProps} />
 {/if}

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

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

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

@@ -26,7 +26,7 @@
     id: providedId,
     onOpenChange(details) {
       useTooltipProps.onOpenChange?.(details)
-      open = details.open
+      if (open !== undefined) open = details.open
     },
   })
 

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

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

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

package/dist/components/tour/tour-action-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 { StepActionTriggerProps } from '@zag-js/tour'
 
-  export interface TourActionTriggerBaseProps extends StepActionTriggerProps, PolymorphicProps<'button'> {}
+  export interface TourActionTriggerBaseProps
+    extends StepActionTriggerProps,
+      PolymorphicProps<'button'>,
+      RefAttribute {}
   export interface TourActionTriggerProps extends HTMLProps<'button'>, TourActionTriggerBaseProps {}
 </script>
 
@@ -12,15 +15,15 @@
   import { Ark } from '../factory'
   import { useTourContext } from './use-tour-context'
 
-  const props: TourActionTriggerProps = $props()
-  const [actionTriggerProps, localProps] = createSplitProps<StepActionTriggerProps>()(props, ['action'])
+  let { ref = $bindable(null), ...props }: TourActionTriggerProps = $props()
+  const [actionTriggerProps, localProps] = $derived(createSplitProps<StepActionTriggerProps>()(props, ['action']))
 
   const tour = useTourContext()
 
   const mergedProps = $derived(mergeProps(tour().getActionTriggerProps(actionTriggerProps), localProps))
 </script>
 
-<Ark as="button" {...mergedProps}>
+<Ark as="button" bind:ref {...mergedProps}>
   {#if localProps.children}
     {@render localProps.children()}
   {:else}

package/dist/components/tour/tour-action-trigger.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { HTMLProps, PolymorphicProps } from '../../types';
+import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { StepActionTriggerProps } from '@zag-js/tour';
-export interface TourActionTriggerBaseProps extends StepActionTriggerProps, PolymorphicProps<'button'> {
+export interface TourActionTriggerBaseProps extends StepActionTriggerProps, PolymorphicProps<'button'>, RefAttribute {
 }
 export interface TourActionTriggerProps extends HTMLProps<'button'>, TourActionTriggerBaseProps {
 }
-declare const TourActionTrigger: import("svelte").Component<TourActionTriggerProps, {}, "">;
+declare const TourActionTrigger: import("svelte").Component<TourActionTriggerProps, {}, "ref">;
 type TourActionTrigger = ReturnType<typeof TourActionTrigger>;
 export default TourActionTrigger;

package/dist/components/tour/tour-arrow-tip.svelte

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

package/dist/components/tour/tour-arrow-tip.svelte.d.ts

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

package/dist/components/tour/tour-arrow.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface TourArrowBaseProps extends PolymorphicProps<'div'> {}
+  export interface TourArrowBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface TourArrowProps extends HTMLProps<'div'>, TourArrowBaseProps {}
 </script>
 
@@ -10,7 +10,7 @@
   import { Ark } from '../factory'
   import { useTourContext } from './use-tour-context'
 
-  const props: TourArrowProps = $props()
+  let { ref = $bindable(null), ...props }: TourArrowProps = $props()
 
   const tour = useTourContext()
 
@@ -18,5 +18,5 @@
 </script>
 
 {#if tour().step?.arrow}
-  <Ark as="div" {...mergedProps} />
+  <Ark bind:ref as="div" {...mergedProps} />
 {/if}

package/dist/components/tour/tour-arrow.svelte.d.ts

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

package/dist/components/tour/tour-backdrop.svelte

@@ -12,7 +12,7 @@
   import { useTourContext } from './use-tour-context'
   import { useRenderStrategyPropsContext } from '../../utils/render-strategy'
 
-  let { ref = $bindable(), ...props }: TourBackdropProps = $props()
+  let { ref = $bindable(null), ...props }: TourBackdropProps = $props()
   const renderStrategyProps = useRenderStrategyPropsContext()
 
   const tour = useTourContext()
@@ -25,10 +25,9 @@
 
   function setNode(node: Element | null) {
     presence().setNode(node)
-    ref = node
   }
 </script>
 
 {#if !presence().unmounted}
-  <Ark as="div" {...mergedProps} {@attach setNode} hidden={!tour().step?.backdrop} />
+  <Ark as="div" bind:ref {...mergedProps} {@attach setNode} hidden={!tour().step?.backdrop} />
 {/if}

package/dist/components/tour/tour-close-trigger.svelte

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

package/dist/components/tour/tour-close-trigger.svelte.d.ts

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

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

@@ -11,7 +11,7 @@
   import { usePresenceContext } from '../presence'
   import { useTourContext } from './use-tour-context'
 
-  let { ref = $bindable(), ...props }: TourContentProps = $props()
+  let { ref = $bindable(null), ...props }: TourContentProps = $props()
 
   const tour = useTourContext()
   const presence = usePresenceContext()
@@ -20,10 +20,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/tour/tour-context.svelte

@@ -6,7 +6,7 @@
     render: Snippet<[UseTourContext]>
   }
 
-  let { render }: TourContextProps = $props()
+  const { render }: TourContextProps = $props()
 
   const tour = useTourContext()
 </script>

package/dist/components/tour/tour-control.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface TourControlBaseProps extends PolymorphicProps<'div'> {}
+  export interface TourControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface TourControlProps extends HTMLProps<'div'>, TourControlBaseProps {}
 </script>
 
@@ -9,7 +9,7 @@
   import { Ark } from '../factory'
   import { tourAnatomy } from './tour.anatomy'
 
-  const props: TourControlProps = $props()
+  let { ref = $bindable(null), ...props }: TourControlProps = $props()
 </script>
 
-<Ark as="div" {...tourAnatomy.build().control.attrs} {...props} />
+<Ark as="div" bind:ref {...tourAnatomy.build().control.attrs} {...props} />

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

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

package/dist/components/tour/tour-description.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface TourDescriptionBaseProps extends PolymorphicProps<'div'> {}
+  export interface TourDescriptionBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface TourDescriptionProps extends HTMLProps<'div'>, TourDescriptionBaseProps {}
 </script>
 
@@ -10,13 +10,13 @@
   import { Ark } from '../factory'
   import { useTourContext } from './use-tour-context'
 
-  const props: TourDescriptionProps = $props()
+  let { ref = $bindable(null), ...props }: TourDescriptionProps = $props()
 
   const tour = useTourContext()
   const mergedProps = $derived(mergeProps(tour().getDescriptionProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps}>
+<Ark as="div" bind:ref {...mergedProps}>
   {#if props.children}
     {@render props.children()}
   {:else}

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

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

package/dist/components/tour/tour-positioner.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface TourPositionerBaseProps extends PolymorphicProps<'div'> {}
+  export interface TourPositionerBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface TourPositionerProps extends HTMLProps<'div'>, TourPositionerBaseProps {}
 </script>
 
@@ -11,7 +11,7 @@
   import { usePresenceContext } from '../presence'
   import { useTourContext } from './use-tour-context'
 
-  const props: TourPositionerProps = $props()
+  let { ref = $bindable(null), ...props }: TourPositionerProps = $props()
 
   const tour = useTourContext()
   const presence = usePresenceContext()
@@ -20,5 +20,5 @@
 </script>
 
 {#if !presence().unmounted}
-  <Ark as="div" {...mergedProps} />
+  <Ark as="div" bind:ref {...mergedProps} />
 {/if}

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

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

package/dist/components/tour/tour-progress-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 TourProgressTextBaseProps extends PolymorphicProps<'div'> {}
+  export interface TourProgressTextBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface TourProgressTextProps extends HTMLProps<'div'>, TourProgressTextBaseProps {}
 </script>
 
@@ -10,14 +10,14 @@
   import { Ark } from '../factory'
   import { useTourContext } from './use-tour-context'
 
-  const props: TourProgressTextProps = $props()
+  let { ref = $bindable(null), ...props }: TourProgressTextProps = $props()
 
   const tour = useTourContext()
 
   const mergedProps = $derived(mergeProps(tour().getProgressTextProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps}>
+<Ark as="div" bind:ref {...mergedProps}>
   {#if props.children}
     {@render props.children()}
   {:else}

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

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

package/dist/components/tour/tour-spotlight.svelte

@@ -12,7 +12,7 @@
   import { usePresence } from '../presence'
   import { useTourContext } from './use-tour-context'
 
-  let { ref = $bindable(), ...props }: TourSpotlightProps = $props()
+  let { ref = $bindable(null), ...props }: TourSpotlightProps = $props()
 
   const tour = useTourContext()
   const renderStrategyProps = useRenderStrategyPropsContext()
@@ -27,10 +27,9 @@
 
   function setNode(node: Element | null) {
     presence().setNode(node)
-    ref = node
   }
 </script>
 
 {#if !presence().unmounted}
-  <Ark as="div" {...mergedProps} {@attach setNode} {hidden} />
+  <Ark as="div" bind:ref {...mergedProps} {@attach setNode} {hidden} />
 {/if}

package/dist/components/tour/tour-title.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface TourTitleBaseProps extends PolymorphicProps<'h2'> {}
+  export interface TourTitleBaseProps extends PolymorphicProps<'h2'>, RefAttribute {}
   export interface TourTitleProps extends HTMLProps<'h2'>, TourTitleBaseProps {}
 </script>
 
@@ -10,14 +10,14 @@
   import { Ark } from '../factory'
   import { useTourContext } from './use-tour-context'
 
-  const props: TourTitleProps = $props()
+  let { ref = $bindable(null), ...props }: TourTitleProps = $props()
 
   const tour = useTourContext()
 
   const mergedProps = $derived(mergeProps(tour().getTitleProps(), props))
 </script>
 
-<Ark as="h2" {...mergedProps}>
+<Ark as="h2" bind:ref {...mergedProps}>
   {#if props.children}
     {@render props.children()}
   {:else}

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

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