@ark-ui/svelte 5.0.4 → 5.0.5

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

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

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

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

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

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

package/dist/components/listbox/listbox-item-group-label.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
 
-  export interface ListboxItemGroupLabelBaseProps extends PolymorphicProps<'div'> {}
+  export interface ListboxItemGroupLabelBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface ListboxItemGroupLabelProps extends Assign<HTMLProps<'div'>, ListboxItemGroupLabelBaseProps> {}
 </script>
 
@@ -11,11 +11,11 @@
   import { useListboxContext } from './use-listbox-context.js'
   import { useListboxItemGroupPropsContext } from './use-listbox-item-group-props.js'
 
-  const props: ListboxItemGroupLabelProps = $props()
+  let { ref = $bindable(null), ...props }: ListboxItemGroupLabelProps = $props()
 
   const listbox = useListboxContext()
   const groupProps = useListboxItemGroupPropsContext()
   const mergedProps = $derived(mergeProps(listbox().getItemGroupLabelProps({ htmlFor: groupProps().id }), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/listbox/listbox-item-group-label.svelte.d.ts

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

package/dist/components/listbox/listbox-item-group.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
 
-  export interface ListboxItemGroupBaseProps extends PolymorphicProps<'div'> {}
+  export interface ListboxItemGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface ListboxItemGroupProps extends Assign<HTMLProps<'div'>, ListboxItemGroupBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { useListboxContext } from './use-listbox-context.js'
   import { ListboxItemGroupPropsProvider } from './use-listbox-item-group-props.js'
 
-  const props: ListboxItemGroupProps = $props()
+  let { ref = $bindable(null), ...props }: ListboxItemGroupProps = $props()
   const providedId = $props.id()
 
   const listbox = useListboxContext()
@@ -22,4 +22,4 @@
   ListboxItemGroupPropsProvider(() => groupProps)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

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

package/dist/components/listbox/listbox-item-indicator.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
 
-  export interface ListboxItemIndicatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface ListboxItemIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface ListboxItemIndicatorProps extends Assign<HTMLProps<'div'>, ListboxItemIndicatorBaseProps> {}
 </script>
 
@@ -11,11 +11,11 @@
   import { useListboxContext } from './use-listbox-context.js'
   import { useListboxItemPropsContext } from './use-listbox-item-props-context.js'
 
-  const props: ListboxItemIndicatorProps = $props()
+  let { ref = $bindable(null), ...props }: ListboxItemIndicatorProps = $props()
 
   const listbox = useListboxContext()
   const itemProps = useListboxItemPropsContext()
   const mergedProps = $derived(mergeProps(listbox().getItemIndicatorProps(itemProps()), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

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

package/dist/components/listbox/listbox-item-text.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
 
-  export interface ListboxItemTextBaseProps extends PolymorphicProps<'span'> {}
+  export interface ListboxItemTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
   export interface ListboxItemTextProps extends Assign<HTMLProps<'span'>, ListboxItemTextBaseProps> {}
 </script>
 
@@ -11,11 +11,11 @@
   import { useListboxContext } from './use-listbox-context.js'
   import { useListboxItemPropsContext } from './use-listbox-item-props-context.js'
 
-  const props: ListboxItemTextProps = $props()
+  let { ref = $bindable(null), ...props }: ListboxItemTextProps = $props()
 
   const listbox = useListboxContext()
   const itemProps = useListboxItemPropsContext()
   const mergedProps = $derived(mergeProps(listbox().getItemTextProps(itemProps()), props))
 </script>
 
-<Ark as="span" {...mergedProps} />
+<Ark as="span" bind:ref {...mergedProps} />

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

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

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

@@ -1,8 +1,8 @@
 <script module lang="ts">
   import type { ItemProps } from '@zag-js/listbox'
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
 
-  export interface ListboxItemBaseProps extends ItemProps, PolymorphicProps<'div'> {}
+  export interface ListboxItemBaseProps extends ItemProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface ListboxItemProps extends Assign<HTMLProps<'div'>, ListboxItemBaseProps> {}
 </script>
 
@@ -14,7 +14,7 @@
   import { ListboxItemProvider } from './use-listbox-item-context.js'
   import { ListboxItemPropsProvider } from './use-listbox-item-props-context.js'
 
-  const props: ListboxItemProps = $props()
+  let { ref = $bindable(null), ...props }: ListboxItemProps = $props()
 
   const [itemProps, localProps] = $derived(createSplitProps<ItemProps>()(props, ['item', 'highlightOnHover']))
   const listbox = useListboxContext()
@@ -25,4 +25,4 @@
   ListboxItemProvider(() => itemState)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

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

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

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

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

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

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

@@ -14,27 +14,29 @@
   let { highlightedValue = $bindable(), value = $bindable(), ...props }: ListboxRootProps<T> = $props()
   const providedId = $props.id()
 
-  const [listboxProps, localProps] = createSplitProps<UseListboxProps<T>>()(props, [
-    'collection',
-    'defaultHighlightedValue',
-    'defaultValue',
-    'deselectable',
-    'disabled',
-    'disallowSelectAll',
-    'highlightedValue',
-    'id',
-    'ids',
-    'loopFocus',
-    'onHighlightChange',
-    'onSelect',
-    'onValueChange',
-    'orientation',
-    'scrollToIndexFn',
-    'selectionMode',
-    'selectOnHighlight',
-    'typeahead',
-    'value',
-  ])
+  const [listboxProps, localProps] = $derived(
+    createSplitProps<UseListboxProps<T>>()(props, [
+      'collection',
+      'defaultHighlightedValue',
+      'defaultValue',
+      'deselectable',
+      'disabled',
+      'disallowSelectAll',
+      'highlightedValue',
+      'id',
+      'ids',
+      'loopFocus',
+      'onHighlightChange',
+      'onSelect',
+      'onValueChange',
+      'orientation',
+      'scrollToIndexFn',
+      'selectionMode',
+      'selectOnHighlight',
+      'typeahead',
+      'value',
+    ]),
+  )
 
   const resolvedProps = $derived<UseListboxProps<T>>({
     ...listboxProps,

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

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

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

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

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

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

package/dist/components/menu/menu-checkbox-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'>
 
-  export interface MenuCheckboxItemBaseProps extends PartialOptionItemProps, PolymorphicProps<'div'> {}
+  export interface MenuCheckboxItemBaseProps extends PartialOptionItemProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface MenuCheckboxItemProps extends Assign<HTMLProps<'div'>, MenuCheckboxItemBaseProps> {}
 </script>
 
@@ -16,7 +16,7 @@
   import { MenuItemProvider } from './use-menu-item-context'
   import { MenuItemPropsProvider } from './use-menu-option-item-props-context'
 
-  let { checked = $bindable<boolean>(), ...props }: MenuCheckboxItemProps = $props()
+  let { ref = $bindable(null), checked = $bindable<boolean>(), ...props }: MenuCheckboxItemProps = $props()
 
   const [partialOptionItemProps, localProps] = $derived(
     // @ts-expect-error - TODO: fix this
@@ -48,4 +48,4 @@
   MenuItemProvider(() => optionItemState)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/menu/menu-checkbox-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'>;
-export interface MenuCheckboxItemBaseProps extends PartialOptionItemProps, PolymorphicProps<'div'> {
+export interface MenuCheckboxItemBaseProps extends PartialOptionItemProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface MenuCheckboxItemProps extends Assign<HTMLProps<'div'>, MenuCheckboxItemBaseProps> {
 }
-declare const MenuCheckboxItem: import("svelte").Component<MenuCheckboxItemProps, {}, "checked">;
+declare const MenuCheckboxItem: import("svelte").Component<MenuCheckboxItemProps, {}, "ref" | "checked">;
 type MenuCheckboxItem = ReturnType<typeof MenuCheckboxItem>;
 export default MenuCheckboxItem;

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

@@ -11,7 +11,7 @@
   import { usePresenceContext } from '../presence'
   import { useMenuContext } from './use-menu-context'
 
-  let { ref = $bindable<Element | null>(), ...props }: MenuContentProps = $props()
+  let { ref = $bindable(null), ...props }: MenuContentProps = $props()
 
   const menu = useMenuContext()
   const presence = usePresenceContext()
@@ -19,10 +19,9 @@
 
   function setNode(node: HTMLElement | null) {
     presence().setNode(node)
-    ref = node
   }
 </script>
 
 {#if !presence().unmounted}
-  <Ark as="div" {@attach setNode} {...mergedProps} />
+  <Ark as="div" bind:ref {@attach setNode} {...mergedProps} />
 {/if}

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

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

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

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

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

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

package/dist/components/menu/menu-item-group-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 MenuItemGroupLabelBaseProps extends PolymorphicProps<'div'> {}
+  export interface MenuItemGroupLabelBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface MenuItemGroupLabelProps extends Assign<HTMLProps<'div'>, MenuItemGroupLabelBaseProps> {}
 </script>
 
@@ -11,11 +11,11 @@
   import { useMenuContext } from './use-menu-context'
   import { useMenuItemGroupContext } from './use-menu-item-group-context'
 
-  const props: MenuItemGroupLabelProps = $props()
+  let { ref = $bindable(null), ...props }: MenuItemGroupLabelProps = $props()
 
   const menu = useMenuContext()
   const itemGroup = useMenuItemGroupContext()
   const mergedProps = $derived(mergeProps(menu().getItemGroupLabelProps({ htmlFor: itemGroup().id }), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

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

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

@@ -1,10 +1,10 @@
 <script module lang="ts">
-  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> {}
 </script>
 
@@ -14,7 +14,7 @@
   import { useMenuContext } from './use-menu-context'
   import { MenuItemGroupProvider } from './use-menu-item-group-context'
 
-  const props: MenuItemGroupProps = $props()
+  let { ref = $bindable(null), ...props }: MenuItemGroupProps = $props()
 
   const menu = useMenuContext()
   const id = $props.id()
@@ -24,4 +24,4 @@
   MenuItemGroupProvider(() => itemGroupProps)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />