@ark-ui/svelte 5.0.4 → 5.0.5

package/dist/components/password-input/password-input-root.svelte.d.ts

@@ -1,11 +1,11 @@
 import type { Snippet } from 'svelte';
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UsePasswordInputProps } from './use-password-input.svelte';
-export interface PasswordInputRootBaseProps extends UsePasswordInputProps, PolymorphicProps<'div'> {
+export interface PasswordInputRootBaseProps extends UsePasswordInputProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface PasswordInputRootProps extends Assign<HTMLProps<'div'>, PasswordInputRootBaseProps> {
     children?: Snippet;
 }
-declare const PasswordInputRoot: import("svelte").Component<PasswordInputRootProps, {}, "visible">;
+declare const PasswordInputRoot: import("svelte").Component<PasswordInputRootProps, {}, "ref" | "visible">;
 type PasswordInputRoot = ReturnType<typeof PasswordInputRoot>;
 export default PasswordInputRoot;

package/dist/components/password-input/password-input-visibility-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 PasswordInputVisibilityTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface PasswordInputVisibilityTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
   export interface PasswordInputVisibilityTriggerProps
     extends Assign<HTMLProps<'button'>, PasswordInputVisibilityTriggerBaseProps> {}
 </script>
@@ -11,9 +11,9 @@
   import { Ark } from '../factory'
   import { usePasswordInputContext } from './use-password-input-context'
 
-  const props: PasswordInputVisibilityTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: PasswordInputVisibilityTriggerProps = $props()
   const passwordInput = usePasswordInputContext()
   const mergedProps = $derived(mergeProps(passwordInput().getVisibilityTriggerProps(), props))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/password-input/password-input-visibility-trigger.svelte.d.ts

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

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

package/dist/components/pin-input/pin-input-control.svelte.d.ts

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

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

package/dist/components/pin-input/pin-input-hidden-input.svelte.d.ts

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

package/dist/components/pin-input/pin-input-input.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
   import type { InputProps } from '@zag-js/pin-input'
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface PinInputInputBaseProps extends InputProps, PolymorphicProps<'input'> {}
+  export interface PinInputInputBaseProps extends InputProps, PolymorphicProps<'input'>, RefAttribute {}
   export interface PinInputInputProps extends Assign<HTMLProps<'input'>, PinInputInputBaseProps> {}
 </script>
 
@@ -12,7 +12,7 @@
   import { Ark } from '../factory'
   import { usePinInputContext } from './use-pin-input-context'
 
-  const props: PinInputInputProps = $props()
+  let { ref = $bindable(null), ...props }: PinInputInputProps = $props()
   const pinInput = usePinInputContext()
 
   const [inputProps, localProps] = $derived(createSplitProps<InputProps>()(props, ['index']))
@@ -20,4 +20,4 @@
   const mergedProps = $derived(mergeProps(pinInput().getInputProps(inputProps), localProps))
 </script>
 
-<Ark as="input" {...mergedProps} />
+<Ark as="input" bind:ref {...mergedProps} />

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

@@ -1,9 +1,9 @@
 import type { InputProps } from '@zag-js/pin-input';
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface PinInputInputBaseProps extends InputProps, PolymorphicProps<'input'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface PinInputInputBaseProps extends InputProps, PolymorphicProps<'input'>, RefAttribute {
 }
 export interface PinInputInputProps extends Assign<HTMLProps<'input'>, PinInputInputBaseProps> {
 }
-declare const PinInputInput: import("svelte").Component<PinInputInputProps, {}, "">;
+declare const PinInputInput: import("svelte").Component<PinInputInputProps, {}, "ref">;
 type PinInputInput = ReturnType<typeof PinInputInput>;
 export default PinInputInput;

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

package/dist/components/pin-input/pin-input-label.svelte.d.ts

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

package/dist/components/pin-input/pin-input-root-provider.svelte

@@ -1,13 +1,13 @@
 <script module lang="ts">
   import type { Snippet } from 'svelte'
-  import type { PolymorphicProps } from '../../types'
+  import type { PolymorphicProps, RefAttribute } from '../../types'
   import type { UsePinInputReturn } from './use-pin-input.svelte'
 
   interface RootProviderProps {
     value: UsePinInputReturn
   }
 
-  export interface PinInputRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {}
+  export interface PinInputRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface PinInputRootProviderProps extends PinInputRootProviderBaseProps {
     children?: Snippet
   }
@@ -18,10 +18,10 @@
   import { PinInputProvider } from './use-pin-input-context'
   import { Ark } from '../factory'
 
-  const { value, ...props }: PinInputRootProviderProps = $props()
+  let { ref = $bindable(null), value, ...props }: PinInputRootProviderProps = $props()
 
   PinInputProvider(value)
   const mergedProps = $derived(mergeProps(value().getRootProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/pin-input/pin-input-root-provider.svelte.d.ts

@@ -1,14 +1,14 @@
 import type { Snippet } from 'svelte';
-import type { PolymorphicProps } from '../../types';
+import type { PolymorphicProps, RefAttribute } from '../../types';
 import type { UsePinInputReturn } from './use-pin-input.svelte';
 interface RootProviderProps {
     value: UsePinInputReturn;
 }
-export interface PinInputRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {
+export interface PinInputRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface PinInputRootProviderProps extends PinInputRootProviderBaseProps {
     children?: Snippet;
 }
-declare const PinInputRootProvider: import("svelte").Component<PinInputRootProviderProps, {}, "">;
+declare const PinInputRootProvider: import("svelte").Component<PinInputRootProviderProps, {}, "ref">;
 type PinInputRootProvider = ReturnType<typeof PinInputRootProvider>;
 export default PinInputRootProvider;

package/dist/components/pin-input/pin-input-root.svelte

@@ -1,9 +1,9 @@
 <script module lang="ts">
   import type { Snippet } from 'svelte'
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { UsePinInputProps } from './use-pin-input.svelte'
 
-  export interface PinInputRootBaseProps extends UsePinInputProps, PolymorphicProps<'div'> {}
+  export interface PinInputRootBaseProps extends UsePinInputProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface PinInputRootProps extends Assign<HTMLProps<'div'>, PinInputRootBaseProps> {
     children?: Snippet
   }
@@ -16,7 +16,7 @@
   import { PinInputProvider } from './use-pin-input-context'
   import { usePinInput } from './use-pin-input.svelte'
 
-  let { value = $bindable(), ...props }: PinInputRootProps = $props()
+  let { ref = $bindable(null), value = $bindable(), ...props }: PinInputRootProps = $props()
   const providedId = $props.id()
 
   const [usePinInputProps, localProps] = $derived(
@@ -53,7 +53,7 @@
     value,
     onValueChange(details) {
       usePinInputProps.onValueChange?.(details)
-      value = details.value
+      if (value !== undefined) value = details.value
     },
   })
 
@@ -63,4 +63,4 @@
   PinInputProvider(pinInput)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/pin-input/pin-input-root.svelte.d.ts

@@ -1,11 +1,11 @@
 import type { Snippet } from 'svelte';
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UsePinInputProps } from './use-pin-input.svelte';
-export interface PinInputRootBaseProps extends UsePinInputProps, PolymorphicProps<'div'> {
+export interface PinInputRootBaseProps extends UsePinInputProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface PinInputRootProps extends Assign<HTMLProps<'div'>, PinInputRootBaseProps> {
     children?: Snippet;
 }
-declare const PinInputRoot: import("svelte").Component<PinInputRootProps, {}, "value">;
+declare const PinInputRoot: import("svelte").Component<PinInputRootProps, {}, "ref" | "value">;
 type PinInputRoot = ReturnType<typeof PinInputRoot>;
 export default PinInputRoot;

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/popover/popover-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 PopoverContentBaseProps extends PolymorphicProps<'div'> {
-    ref?: Element | null
-  }
+  export interface PopoverContentBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface PopoverContentProps extends Assign<HTMLProps<'div'>, PopoverContentBaseProps> {}
 </script>
 
@@ -13,7 +11,7 @@
   import { usePresenceContext } from '../presence'
   import { usePopoverContext } from './use-popover-context'
 
-  let { ref = $bindable<Element | null>(), ...props }: PopoverContentProps = $props()
+  let { ref = $bindable(null), ...props }: PopoverContentProps = $props()
 
   const popover = usePopoverContext()
   const presence = usePresenceContext()
@@ -21,10 +19,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/popover/popover-content.svelte.d.ts

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

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

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

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

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

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

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

package/dist/components/popover/popover-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 PopoverPositionerBaseProps extends PolymorphicProps<'div'> {}
+  export interface PopoverPositionerBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface PopoverPositionerProps extends Assign<HTMLProps<'div'>, PopoverPositionerBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { usePresenceContext } from '../presence'
   import { usePopoverContext } from './use-popover-context'
 
-  const props: PopoverPositionerProps = $props()
+  let { ref = $bindable(null), ...props }: PopoverPositionerProps = $props()
 
   const popover = usePopoverContext()
   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/popover/popover-positioner.svelte.d.ts

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