@ark-ui/svelte 5.0.3 → 5.0.5

package/dist/components/menu/menu-item-group.svelte.d.ts

@@ -1,10 +1,10 @@
-import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types';
 import type { ItemGroupProps } from '@zag-js/menu';
 type OptionalItemGroupProps = Optional<ItemGroupProps, 'id'>;
-export interface MenuItemGroupBaseProps extends OptionalItemGroupProps, PolymorphicProps<'div'> {
+export interface MenuItemGroupBaseProps extends OptionalItemGroupProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface MenuItemGroupProps extends Assign<HTMLProps<'div'>, MenuItemGroupBaseProps> {
 }
-declare const MenuItemGroup: import("svelte").Component<MenuItemGroupProps, {}, "">;
+declare const MenuItemGroup: import("svelte").Component<MenuItemGroupProps, {}, "ref">;
 type MenuItemGroup = ReturnType<typeof MenuItemGroup>;
 export default MenuItemGroup;

package/dist/components/menu/menu-item-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 MenuItemIndicatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface MenuItemIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface MenuItemIndicatorProps extends Assign<HTMLProps<'div'>, MenuItemIndicatorBaseProps> {}
 </script>
 
@@ -11,11 +11,11 @@
   import { useMenuContext } from './use-menu-context'
   import { useMenuItemPropsContext } from './use-menu-option-item-props-context'
 
-  const props: MenuItemIndicatorProps = $props()
+  let { ref = $bindable(null), ...props }: MenuItemIndicatorProps = $props()
 
   const menu = useMenuContext()
   const itemProps = useMenuItemPropsContext()
   const mergedProps = $derived(mergeProps(menu().getItemIndicatorProps(itemProps()), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/menu/menu-item-indicator.svelte.d.ts

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

package/dist/components/menu/menu-item-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 MenuItemTextBaseProps extends PolymorphicProps<'div'> {}
+  export interface MenuItemTextBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface MenuItemTextProps extends Assign<HTMLProps<'div'>, MenuItemTextBaseProps> {}
 </script>
 
@@ -11,11 +11,11 @@
   import { useMenuContext } from './use-menu-context'
   import { useMenuItemPropsContext } from './use-menu-option-item-props-context'
 
-  const props: MenuItemTextProps = $props()
+  let { ref = $bindable(null), ...props }: MenuItemTextProps = $props()
 
   const menu = useMenuContext()
   const itemProps = useMenuItemPropsContext()
   const mergedProps = $derived(mergeProps(menu().getItemTextProps(itemProps()), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/menu/menu-item-text.svelte.d.ts

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

package/dist/components/menu/menu-item.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
   interface ItemBaseProps extends ItemProps {
     /**
@@ -8,7 +8,7 @@
     onSelect?: VoidFunction
   }
 
-  export interface MenuItemBaseProps extends ItemBaseProps, PolymorphicProps<'div'> {}
+  export interface MenuItemBaseProps extends ItemBaseProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface MenuItemProps extends Assign<HTMLProps<'div'>, MenuItemBaseProps> {}
 </script>
 
@@ -21,7 +21,7 @@
   import { MenuItemPropsProvider } from './use-menu-option-item-props-context'
   import { createSplitProps } from '../../utils/create-split-props'
 
-  const props: MenuItemProps = $props()
+  let { ref = $bindable(null), ...props }: MenuItemProps = $props()
 
   const [itemProps, localProps] = $derived(
     createSplitProps<ItemBaseProps>()(props, ['closeOnSelect', 'disabled', 'value', 'valueText', 'onSelect']),
@@ -42,4 +42,4 @@
   MenuItemProvider(() => itemState)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,15 +1,15 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 interface ItemBaseProps extends ItemProps {
     /**
      * The function to call when the item is selected
      */
     onSelect?: VoidFunction;
 }
-export interface MenuItemBaseProps extends ItemBaseProps, PolymorphicProps<'div'> {
+export interface MenuItemBaseProps extends ItemBaseProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface MenuItemProps extends Assign<HTMLProps<'div'>, MenuItemBaseProps> {
 }
 import type { ItemProps } from '@zag-js/menu';
-declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "">;
+declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "ref">;
 type MenuItem = ReturnType<typeof MenuItem>;
 export default MenuItem;

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

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

package/dist/components/menu/menu-radio-item-group.svelte

@@ -1,10 +1,13 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types'
   import type { UseMenuItemGroupContext } from './use-menu-item-group-context'
 
   type OptionalUseMenuItemGroupContext = Optional<ReturnType<UseMenuItemGroupContext>, 'id'>
 
-  export interface MenuRadioItemGroupBaseProps extends OptionalUseMenuItemGroupContext, PolymorphicProps<'div'> {}
+  export interface MenuRadioItemGroupBaseProps
+    extends OptionalUseMenuItemGroupContext,
+      PolymorphicProps<'div'>,
+      RefAttribute {}
   export interface MenuRadioItemGroupProps extends Assign<HTMLProps<'div'>, MenuRadioItemGroupBaseProps> {}
 </script>
 
@@ -15,7 +18,7 @@
   import { useMenuContext } from './use-menu-context'
   import { MenuItemGroupProvider } from './use-menu-item-group-context'
 
-  const props: MenuRadioItemGroupProps = $props()
+  let { ref = $bindable(null), value = $bindable(), ...props }: MenuRadioItemGroupProps = $props()
   const id = $props.id()
 
   const [optionalItemGroupProps, localProps] = $derived(
@@ -23,10 +26,19 @@
   )
 
   const menu = useMenuContext()
-  const itemGroupProps = $derived({ id, ...optionalItemGroupProps })
+
+  const itemGroupProps = $derived<ReturnType<UseMenuItemGroupContext>>({
+    id: optionalItemGroupProps.id ?? id,
+    value,
+    onValueChange(e) {
+      value = e.value
+      optionalItemGroupProps?.onValueChange?.(e)
+    },
+  })
+
   const mergedProps = $derived(mergeProps(menu().getItemGroupProps({ id: itemGroupProps.id }), localProps))
 
   MenuItemGroupProvider(() => itemGroupProps)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/menu/menu-radio-item-group.svelte.d.ts

@@ -1,10 +1,10 @@
-import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseMenuItemGroupContext } from './use-menu-item-group-context';
 type OptionalUseMenuItemGroupContext = Optional<ReturnType<UseMenuItemGroupContext>, 'id'>;
-export interface MenuRadioItemGroupBaseProps extends OptionalUseMenuItemGroupContext, PolymorphicProps<'div'> {
+export interface MenuRadioItemGroupBaseProps extends OptionalUseMenuItemGroupContext, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface MenuRadioItemGroupProps extends Assign<HTMLProps<'div'>, MenuRadioItemGroupBaseProps> {
 }
-declare const MenuRadioItemGroup: import("svelte").Component<MenuRadioItemGroupProps, {}, "">;
+declare const MenuRadioItemGroup: import("svelte").Component<MenuRadioItemGroupProps, {}, "ref" | "value">;
 type MenuRadioItemGroup = ReturnType<typeof MenuRadioItemGroup>;
 export default MenuRadioItemGroup;

package/dist/components/menu/menu-radio-item.svelte

@@ -1,10 +1,10 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { OptionItemProps } from '@zag-js/menu'
 
   type PartialOptionItemProps = Omit<OptionItemProps, 'type' | 'checked' | 'onCheckedChange'>
 
-  export interface MenuRadioItemBaseProps extends PartialOptionItemProps, PolymorphicProps<'div'> {}
+  export interface MenuRadioItemBaseProps extends PartialOptionItemProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface MenuRadioItemProps extends Assign<HTMLProps<'div'>, MenuRadioItemBaseProps> {}
 </script>
 
@@ -17,7 +17,7 @@
   import { useMenuItemGroupContext } from './use-menu-item-group-context'
   import { MenuItemPropsProvider } from './use-menu-option-item-props-context'
 
-  const props: MenuRadioItemProps = $props()
+  let { ref = $bindable(null), ...props }: MenuRadioItemProps = $props()
 
   const [partialItemProps, localProps] = $derived(
     createSplitProps<PartialOptionItemProps>()(props, ['closeOnSelect', 'disabled', 'value', 'valueText']),
@@ -40,4 +40,4 @@
   MenuItemProvider(() => optionItemState)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/menu/menu-radio-item.svelte.d.ts

@@ -1,10 +1,10 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { OptionItemProps } from '@zag-js/menu';
 type PartialOptionItemProps = Omit<OptionItemProps, 'type' | 'checked' | 'onCheckedChange'>;
-export interface MenuRadioItemBaseProps extends PartialOptionItemProps, PolymorphicProps<'div'> {
+export interface MenuRadioItemBaseProps extends PartialOptionItemProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface MenuRadioItemProps extends Assign<HTMLProps<'div'>, MenuRadioItemBaseProps> {
 }
-declare const MenuRadioItem: import("svelte").Component<MenuRadioItemProps, {}, "">;
+declare const MenuRadioItem: import("svelte").Component<MenuRadioItemProps, {}, "ref">;
 type MenuRadioItem = ReturnType<typeof MenuRadioItem>;
 export default MenuRadioItem;

package/dist/components/menu/menu-separator.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 MenuSeparatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface MenuSeparatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface MenuSeparatorProps extends Assign<HTMLProps<'div'>, MenuSeparatorBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory'
   import { useMenuContext } from './use-menu-context'
 
-  const props: MenuSeparatorProps = $props()
+  let { ref = $bindable(null), ...props }: MenuSeparatorProps = $props()
 
   const menu = useMenuContext()
   const mergedProps = $derived(mergeProps(menu().getSeparatorProps(), props))
 </script>
 
-<Ark as="div" data-scope="menu" data-part="separator" {...mergedProps} />
+<Ark as="div" bind:ref data-scope="menu" data-part="separator" {...mergedProps} />

package/dist/components/menu/menu-separator.svelte.d.ts

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

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

package/dist/components/menu/menu-trigger-item.svelte.d.ts

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

package/dist/components/menu/menu-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 MenuTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface MenuTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
   export interface MenuTriggerProps extends Assign<HTMLProps<'button'>, MenuTriggerBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { useMenuContext } from './use-menu-context'
   import { useMenuTriggerItemContext } from './use-menu-trigger-item-context'
 
-  const props: MenuTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: MenuTriggerProps = $props()
 
   const menu = useMenuContext()
   const triggerItemProps = useMenuTriggerItemContext()
@@ -19,4 +19,4 @@
   const mergedProps = $derived(mergeProps(menu().getTriggerProps(), triggerItemProps?.() || {}, props))
 </script>
 
-<Ark as="button" data-scope="menu" data-part="trigger" {...mergedProps} />
+<Ark as="button" bind:ref data-scope="menu" data-part="trigger" {...mergedProps} />

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

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

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

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

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

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

package/dist/components/number-input/number-input-decrement-trigger.svelte.d.ts

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

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

package/dist/components/number-input/number-input-increment-trigger.svelte.d.ts

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

package/dist/components/number-input/number-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 NumberInputInputBaseProps extends PolymorphicProps<'input'> {}
+  export interface NumberInputInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {}
   export interface NumberInputInputProps extends Assign<HTMLProps<'input'>, NumberInputInputBaseProps> {}
 </script>
 
@@ -11,11 +11,11 @@
   import { useFieldContext } from '../field'
   import { useNumberInputContext } from './use-number-input-context'
 
-  const props: NumberInputInputProps = $props()
+  let { ref = $bindable(null), ...props }: NumberInputInputProps = $props()
 
   const numberInput = useNumberInputContext()
   const field = useFieldContext()
   const mergedProps = $derived(mergeProps(numberInput().getInputProps(), props))
 </script>
 
-<Ark as="input" aria-describedby={field?.()?.ariaDescribedby} {...mergedProps} />
+<Ark as="input" bind:ref aria-describedby={field?.()?.ariaDescribedby} {...mergedProps} />

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

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

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

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

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

package/dist/components/number-input/number-input-root-provider.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 { UseNumberInputReturn } from './use-number-input.svelte'
 
-  export interface NumberInputRootProviderBaseProps extends PolymorphicProps<'div'> {
+  export interface NumberInputRootProviderBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     value: UseNumberInputReturn
   }
   export interface NumberInputRootProviderProps extends Assign<HTMLProps<'div'>, NumberInputRootProviderBaseProps> {}
@@ -13,11 +13,11 @@
   import { Ark } from '../factory'
   import { NumberInputProvider } from './use-number-input-context'
 
-  let { value, ...props }: NumberInputRootProviderProps = $props()
+  let { ref = $bindable(null), value, ...props }: NumberInputRootProviderProps = $props()
 
   const mergedProps = $derived(mergeProps(value().getRootProps(), props))
 
   NumberInputProvider(value)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />