@ark-ui/svelte 5.0.4 → 5.1.0

package/dist/components/number-input/number-input-scrubber.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 NumberInputScrubberBaseProps extends PolymorphicProps<'span'> {}
+  export interface NumberInputScrubberBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
   export interface NumberInputScrubberProps extends Assign<HTMLProps<'span'>, NumberInputScrubberBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory'
   import { useNumberInputContext } from './use-number-input-context'
 
-  const props: NumberInputScrubberProps = $props()
+  let { ref = $bindable(null), ...props }: NumberInputScrubberProps = $props()
 
   const numberInput = useNumberInputContext()
   const mergedProps = $derived(mergeProps(numberInput().getScrubberProps(), props))
 </script>
 
-<Ark as="span" {...mergedProps} />
+<Ark as="span" bind:ref {...mergedProps} />

package/dist/components/number-input/number-input-scrubber.svelte.d.ts

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

package/dist/components/number-input/number-input-value-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 NumberInputValueTextBaseProps extends PolymorphicProps<'span'> {}
+  export interface NumberInputValueTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
   export interface NumberInputValueTextProps extends Assign<HTMLProps<'span'>, NumberInputValueTextBaseProps> {}
 </script>
 
@@ -10,13 +10,13 @@
   import { Ark } from '../factory'
   import { useNumberInputContext } from './use-number-input-context'
 
-  let { children, ...props }: NumberInputValueTextProps = $props()
+  let { ref = $bindable(null), children, ...props }: NumberInputValueTextProps = $props()
 
   const numberInput = useNumberInputContext()
   const mergedProps = $derived(mergeProps(numberInput().getValueTextProps(), props))
 </script>
 
-<Ark as="span" {...mergedProps}>
+<Ark as="span" bind:ref {...mergedProps}>
   {#if children}
     {@render children()}
   {:else}

package/dist/components/number-input/number-input-value-text.svelte.d.ts

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

package/dist/components/number-input/split-number-input-props.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { UseNumberInputProps } from './use-number-input.svelte';
-export declare const splitNumberInputProps: <T extends UseNumberInputProps>(props: T) => [UseNumberInputProps, Omit<T, "form" | "pattern" | "name" | "defaultValue" | "value" | "locale" | "ids" | "disabled" | "id" | "step" | "onValueChange" | "onFocusChange" | "translations" | "readOnly" | "invalid" | "required" | "max" | "min" | "allowOverflow" | "allowMouseWheel" | "clampValueOnBlur" | "focusInputOnChange" | "formatOptions" | "inputMode" | "onValueInvalid" | "spinOnPress">];
+export declare const splitNumberInputProps: <T extends UseNumberInputProps>(props: T) => [UseNumberInputProps, Omit<T, "form" | "pattern" | "name" | "defaultValue" | "value" | "locale" | "ids" | "disabled" | "id" | "step" | "onValueChange" | "onFocusChange" | "readOnly" | "invalid" | "max" | "min" | "required" | "translations" | "allowOverflow" | "allowMouseWheel" | "clampValueOnBlur" | "focusInputOnChange" | "formatOptions" | "inputMode" | "onValueInvalid" | "spinOnPress">];

package/dist/components/pagination/pagination-ellipsis.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 { EllipsisProps } from '@zag-js/pagination'
 
-  export interface PaginationEllipsisBaseProps extends EllipsisProps, PolymorphicProps<'div'> {}
+  export interface PaginationEllipsisBaseProps extends EllipsisProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface PaginationEllipsisProps extends Assign<HTMLProps<'div'>, PaginationEllipsisBaseProps> {}
 </script>
 
@@ -11,9 +11,9 @@
   import { Ark } from '../factory'
   import { usePaginationContext } from './use-pagination-context'
 
-  const props: PaginationEllipsisProps = $props()
+  let { ref = $bindable(null), ...props }: PaginationEllipsisProps = $props()
   const pagination = usePaginationContext()
   const mergedProps = $derived(mergeProps(pagination().getEllipsisProps(props), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/pagination/pagination-ellipsis.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { EllipsisProps } from '@zag-js/pagination';
-export interface PaginationEllipsisBaseProps extends EllipsisProps, PolymorphicProps<'div'> {
+export interface PaginationEllipsisBaseProps extends EllipsisProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface PaginationEllipsisProps extends Assign<HTMLProps<'div'>, PaginationEllipsisBaseProps> {
 }
-declare const PaginationEllipsis: import("svelte").Component<PaginationEllipsisProps, {}, "">;
+declare const PaginationEllipsis: import("svelte").Component<PaginationEllipsisProps, {}, "ref">;
 type PaginationEllipsis = ReturnType<typeof PaginationEllipsis>;
 export default PaginationEllipsis;

package/dist/components/pagination/pagination-item.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 { ItemProps } from '@zag-js/pagination'
 
-  export interface PaginationItemBaseProps extends ItemProps, PolymorphicProps<'button'> {}
+  export interface PaginationItemBaseProps extends ItemProps, PolymorphicProps<'button'>, RefAttribute {}
   export interface PaginationItemProps extends Assign<HTMLProps<'button'>, PaginationItemBaseProps> {}
 </script>
 
@@ -11,9 +11,9 @@
   import { Ark } from '../factory'
   import { usePaginationContext } from './use-pagination-context'
 
-  const props: PaginationItemProps = $props()
+  let { ref = $bindable(null), ...props }: PaginationItemProps = $props()
   const pagination = usePaginationContext()
   const mergedProps = $derived(mergeProps(pagination().getItemProps(props), props))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/pagination/pagination-item.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { ItemProps } from '@zag-js/pagination';
-export interface PaginationItemBaseProps extends ItemProps, PolymorphicProps<'button'> {
+export interface PaginationItemBaseProps extends ItemProps, PolymorphicProps<'button'>, RefAttribute {
 }
 export interface PaginationItemProps extends Assign<HTMLProps<'button'>, PaginationItemBaseProps> {
 }
-declare const PaginationItem: import("svelte").Component<PaginationItemProps, {}, "">;
+declare const PaginationItem: import("svelte").Component<PaginationItemProps, {}, "ref">;
 type PaginationItem = ReturnType<typeof PaginationItem>;
 export default PaginationItem;

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

package/dist/components/pagination/pagination-next-trigger.svelte.d.ts

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

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

package/dist/components/pagination/pagination-prev-trigger.svelte.d.ts

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

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

@@ -1,5 +1,5 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { Snippet } from 'svelte'
   import type { UsePaginationReturn } from './use-pagination.svelte'
 
@@ -8,7 +8,7 @@
     children?: Snippet
   }
 
-  export interface PaginationRootProviderBaseProps extends PolymorphicProps<'nav'>, RootProviderProps {}
+  export interface PaginationRootProviderBaseProps extends PolymorphicProps<'nav'>, RootProviderProps, RefAttribute {}
   export interface PaginationRootProviderProps extends Assign<HTMLProps<'nav'>, PaginationRootProviderBaseProps> {}
 </script>
 
@@ -17,11 +17,11 @@
   import { Ark } from '../factory'
   import { PaginationProvider } from './use-pagination-context'
 
-  let { value, ...props }: PaginationRootProviderProps = $props()
+  let { ref = $bindable(null), value, ...props }: PaginationRootProviderProps = $props()
 
   const mergedProps = $derived(mergeProps(value().getRootProps(), props))
 
   PaginationProvider(value)
 </script>
 
-<Ark as="nav" {...mergedProps} />
+<Ark as="nav" bind:ref {...mergedProps} />

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

@@ -1,14 +1,14 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { Snippet } from 'svelte';
 import type { UsePaginationReturn } from './use-pagination.svelte';
 export interface RootProviderProps {
     value: UsePaginationReturn;
     children?: Snippet;
 }
-export interface PaginationRootProviderBaseProps extends PolymorphicProps<'nav'>, RootProviderProps {
+export interface PaginationRootProviderBaseProps extends PolymorphicProps<'nav'>, RootProviderProps, RefAttribute {
 }
 export interface PaginationRootProviderProps extends Assign<HTMLProps<'nav'>, PaginationRootProviderBaseProps> {
 }
-declare const PaginationRootProvider: import("svelte").Component<PaginationRootProviderProps, {}, "">;
+declare const PaginationRootProvider: import("svelte").Component<PaginationRootProviderProps, {}, "ref">;
 type PaginationRootProvider = ReturnType<typeof PaginationRootProvider>;
 export default PaginationRootProvider;

package/dist/components/pagination/pagination-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 { UsePaginationProps } from './use-pagination.svelte'
 
-  export interface PaginationRootBaseProps extends UsePaginationProps, PolymorphicProps<'nav'> {}
+  export interface PaginationRootBaseProps extends UsePaginationProps, PolymorphicProps<'nav'>, RefAttribute {}
   export interface PaginationRootProps extends Assign<HTMLProps<'nav'>, PaginationRootBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { PaginationProvider } from './use-pagination-context'
   import { usePagination } from './use-pagination.svelte'
 
-  let { page = $bindable(), pageSize = $bindable(), ...props }: PaginationRootProps = $props()
+  let { ref = $bindable(null), page = $bindable(), pageSize = $bindable(), ...props }: PaginationRootProps = $props()
   const providedId = $props.id()
 
   const [paginationProps, localProps] = $derived(
@@ -54,4 +54,4 @@
   PaginationProvider(pagination)
 </script>
 
-<Ark as="nav" {...mergedProps} />
+<Ark as="nav" bind:ref {...mergedProps} />

package/dist/components/pagination/pagination-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 { UsePaginationProps } from './use-pagination.svelte';
-export interface PaginationRootBaseProps extends UsePaginationProps, PolymorphicProps<'nav'> {
+export interface PaginationRootBaseProps extends UsePaginationProps, PolymorphicProps<'nav'>, RefAttribute {
 }
 export interface PaginationRootProps extends Assign<HTMLProps<'nav'>, PaginationRootBaseProps> {
 }
-declare const PaginationRoot: import("svelte").Component<PaginationRootProps, {}, "page" | "pageSize">;
+declare const PaginationRoot: import("svelte").Component<PaginationRootProps, {}, "ref" | "page" | "pageSize">;
 type PaginationRoot = ReturnType<typeof PaginationRoot>;
 export default PaginationRoot;

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

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

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

package/dist/components/password-input/password-input-indicator.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
   import type { Snippet } from 'svelte'
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface PasswordInputIndicatorBaseProps extends PolymorphicProps<'span'> {
+  export interface PasswordInputIndicatorBaseProps extends PolymorphicProps<'span'>, RefAttribute {
     /**
      * The fallback content to display when the password is not visible.
      */
@@ -18,12 +18,12 @@
   import { Ark } from '../factory'
   import { usePasswordInputContext } from './use-password-input-context'
 
-  const { fallback, children, ...props }: PasswordInputIndicatorProps = $props()
+  let { ref = $bindable(null), fallback, children, ...props }: PasswordInputIndicatorProps = $props()
   const passwordInput = usePasswordInputContext()
   const mergedProps = $derived(mergeProps(passwordInput().getIndicatorProps(), props))
 </script>
 
-<Ark as="span" {...mergedProps}>
+<Ark as="span" bind:ref {...mergedProps}>
   {#if passwordInput().visible}
     {@render children?.()}
   {:else}

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface PasswordInputIndicatorBaseProps extends PolymorphicProps<'span'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface PasswordInputIndicatorBaseProps extends PolymorphicProps<'span'>, RefAttribute {
     /**
      * The fallback content to display when the password is not visible.
      */
@@ -9,6 +9,6 @@ export interface PasswordInputIndicatorBaseProps extends PolymorphicProps<'span'
 export interface PasswordInputIndicatorProps extends Assign<HTMLProps<'span'>, PasswordInputIndicatorBaseProps> {
     children?: Snippet;
 }
-declare const PasswordInputIndicator: import("svelte").Component<PasswordInputIndicatorProps, {}, "">;
+declare const PasswordInputIndicator: import("svelte").Component<PasswordInputIndicatorProps, {}, "ref">;
 type PasswordInputIndicator = ReturnType<typeof PasswordInputIndicator>;
 export default PasswordInputIndicator;

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

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

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

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

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

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

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

@@ -1,23 +1,30 @@
 <script module lang="ts">
   import type { Snippet } from 'svelte'
+  import type { RefAttribute } from '../../types'
   import type { UsePasswordInputReturn } from './use-password-input.svelte'
 
   interface RootProviderProps {
     value: UsePasswordInputReturn
   }
 
-  export interface PasswordInputRootProviderBaseProps extends RootProviderProps {}
+  export interface PasswordInputRootProviderBaseProps extends RootProviderProps, RefAttribute {}
   export interface PasswordInputRootProviderProps extends PasswordInputRootProviderBaseProps {
     children?: Snippet
   }
 </script>
 
 <script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
   import { PasswordInputProvider } from './use-password-input-context'
 
-  const props: PasswordInputRootProviderProps = $props()
+  let { ref = $bindable(null), ...props }: PasswordInputRootProviderProps = $props()
+
+  const mergedProps = $derived(mergeProps(props.value().getRootProps(), props))
 
   PasswordInputProvider(() => props.value())
 </script>
 
-{@render props.children?.()}
+<Ark as="div" bind:ref {...mergedProps}>
+  {@render props.children?.()}
+</Ark>

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

@@ -1,13 +1,14 @@
 import type { Snippet } from 'svelte';
+import type { RefAttribute } from '../../types';
 import type { UsePasswordInputReturn } from './use-password-input.svelte';
 interface RootProviderProps {
     value: UsePasswordInputReturn;
 }
-export interface PasswordInputRootProviderBaseProps extends RootProviderProps {
+export interface PasswordInputRootProviderBaseProps extends RootProviderProps, RefAttribute {
 }
 export interface PasswordInputRootProviderProps extends PasswordInputRootProviderBaseProps {
     children?: Snippet;
 }
-declare const PasswordInputRootProvider: import("svelte").Component<PasswordInputRootProviderProps, {}, "">;
+declare const PasswordInputRootProvider: import("svelte").Component<PasswordInputRootProviderProps, {}, "ref">;
 type PasswordInputRootProvider = ReturnType<typeof PasswordInputRootProvider>;
 export default PasswordInputRootProvider;

package/dist/components/password-input/password-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 { 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
   }
@@ -16,7 +16,7 @@
   import { PasswordInputProvider } from './use-password-input-context'
   import { usePasswordInput } from './use-password-input.svelte'
 
-  let { visible = $bindable(), ...props }: PasswordInputRootProps = $props()
+  let { ref = $bindable(null), visible = $bindable(), ...props }: PasswordInputRootProps = $props()
   const providedId = $props.id()
 
   const [usePasswordInputProps, localProps] = $derived(
@@ -43,7 +43,7 @@
     visible,
     onVisibilityChange(details) {
       usePasswordInputProps.onVisibilityChange?.(details)
-      visible = details.visible
+      if (visible !== undefined) visible = details.visible
     },
   })
 
@@ -53,6 +53,6 @@
   PasswordInputProvider(passwordInput)
 </script>
 
-<Ark as="div" {...mergedProps}>
+<Ark as="div" bind:ref {...mergedProps}>
   {@render props.children?.()}
 </Ark>

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;