@ark-ui/svelte 5.0.4 → 5.1.0

package/dist/components/color-picker/color-picker-value-swatch.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 { SwatchProps } from '@zag-js/color-picker'
 
   interface ValueSwatchProps extends Omit<SwatchProps, 'value'> {}
 
-  export interface ColorPickerValueSwatchBaseProps extends ValueSwatchProps, PolymorphicProps<'div'> {}
+  export interface ColorPickerValueSwatchBaseProps extends ValueSwatchProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface ColorPickerValueSwatchProps extends Assign<HTMLProps<'div'>, ColorPickerValueSwatchBaseProps> {}
 </script>
 
@@ -15,7 +15,7 @@
   import { useColorPickerContext } from './use-color-picker-context'
   import { ColorPickerSwatchPropsProvider } from './use-color-picker-swatch-props-context'
 
-  const props: ColorPickerValueSwatchProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerValueSwatchProps = $props()
 
   const [valueSwatchProps, localProps] = $derived(createSplitProps<ValueSwatchProps>()(props, ['respectAlpha']))
 
@@ -31,4 +31,4 @@
   ColorPickerSwatchPropsProvider(() => swatchProps)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-value-swatch.svelte.d.ts

@@ -1,11 +1,11 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { SwatchProps } from '@zag-js/color-picker';
 interface ValueSwatchProps extends Omit<SwatchProps, 'value'> {
 }
-export interface ColorPickerValueSwatchBaseProps extends ValueSwatchProps, PolymorphicProps<'div'> {
+export interface ColorPickerValueSwatchBaseProps extends ValueSwatchProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface ColorPickerValueSwatchProps extends Assign<HTMLProps<'div'>, ColorPickerValueSwatchBaseProps> {
 }
-declare const ColorPickerValueSwatch: import("svelte").Component<ColorPickerValueSwatchProps, {}, "">;
+declare const ColorPickerValueSwatch: import("svelte").Component<ColorPickerValueSwatchProps, {}, "ref">;
 type ColorPickerValueSwatch = ReturnType<typeof ColorPickerValueSwatch>;
 export default ColorPickerValueSwatch;

package/dist/components/color-picker/color-picker-value-text.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 { ColorStringFormat } from '@zag-js/color-utils'
 
-  export interface ColorPickerValueTextBaseProps extends PolymorphicProps<'span'> {
+  export interface ColorPickerValueTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {
     format?: ColorStringFormat
   }
   export interface ColorPickerValueTextProps extends Assign<HTMLProps<'span'>, ColorPickerValueTextBaseProps> {}
@@ -13,14 +13,14 @@
   import { Ark } from '../factory'
   import { useColorPickerContext } from './use-color-picker-context'
 
-  let { children, format, ...props }: ColorPickerValueTextProps = $props()
+  let { ref = $bindable(null), children, format, ...props }: ColorPickerValueTextProps = $props()
 
   const colorPicker = useColorPickerContext()
   const mergedProps = $derived(mergeProps(colorPicker().getValueTextProps(), props))
   const valueAsString = $derived(format ? colorPicker().value.toString(format) : colorPicker().valueAsString)
 </script>
 
-<Ark as="span" {...mergedProps}>
+<Ark as="span" bind:ref {...mergedProps}>
   {#if children}
     {@render children()}
   {:else}

package/dist/components/color-picker/color-picker-value-text.svelte.d.ts

@@ -1,10 +1,10 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { ColorStringFormat } from '@zag-js/color-utils';
-export interface ColorPickerValueTextBaseProps extends PolymorphicProps<'span'> {
+export interface ColorPickerValueTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {
     format?: ColorStringFormat;
 }
 export interface ColorPickerValueTextProps extends Assign<HTMLProps<'span'>, ColorPickerValueTextBaseProps> {
 }
-declare const ColorPickerValueText: import("svelte").Component<ColorPickerValueTextProps, {}, "">;
+declare const ColorPickerValueText: import("svelte").Component<ColorPickerValueTextProps, {}, "ref">;
 type ColorPickerValueText = ReturnType<typeof ColorPickerValueText>;
 export default ColorPickerValueText;

package/dist/components/color-picker/color-picker-view.svelte

@@ -1,12 +1,12 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { ColorFormat } from '@zag-js/color-picker'
 
   interface FormatOptions {
     format: ColorFormat
   }
 
-  export interface ColorPickerViewBaseProps extends FormatOptions, PolymorphicProps<'div'> {}
+  export interface ColorPickerViewBaseProps extends FormatOptions, PolymorphicProps<'div'>, RefAttribute {}
   export interface ColorPickerViewProps extends Assign<HTMLProps<'div'>, ColorPickerViewBaseProps> {}
 </script>
 
@@ -17,7 +17,7 @@
   import { createSplitProps } from '../../utils/create-split-props'
   import { ColorPickerFormatPropsProvider } from './use-color-picker-format-context'
 
-  const props: ColorPickerViewProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerViewProps = $props()
   const [formatProps, localProps] = $derived(createSplitProps<FormatOptions>()(props, ['format']))
 
   const colorPicker = useColorPickerContext()
@@ -26,5 +26,5 @@
 </script>
 
 {#if colorPicker().format === formatProps.format}
-  <Ark as="div" data-format={formatProps.format} {...colorPickerAnatomy.build().view.attrs} {...localProps} />
+  <Ark as="div" bind:ref data-format={formatProps.format} {...colorPickerAnatomy.build().view.attrs} {...localProps} />
 {/if}

package/dist/components/color-picker/color-picker-view.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { ColorFormat } from '@zag-js/color-picker';
 interface FormatOptions {
     format: ColorFormat;
 }
-export interface ColorPickerViewBaseProps extends FormatOptions, PolymorphicProps<'div'> {
+export interface ColorPickerViewBaseProps extends FormatOptions, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface ColorPickerViewProps extends Assign<HTMLProps<'div'>, ColorPickerViewBaseProps> {
 }
-declare const ColorPickerView: import("svelte").Component<ColorPickerViewProps, {}, "">;
+declare const ColorPickerView: import("svelte").Component<ColorPickerViewProps, {}, "ref">;
 type ColorPickerView = ReturnType<typeof ColorPickerView>;
 export default ColorPickerView;

package/dist/components/color-picker/split-color-picker-props.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { UseColorPickerProps } from './use-color-picker.svelte';
-export declare const splitColorPickerProps: <T extends UseColorPickerProps>(props: T) => [UseColorPickerProps, Omit<T, "name" | "defaultValue" | "value" | "open" | "ids" | "defaultOpen" | "onOpenChange" | "disabled" | "id" | "onValueChange" | "readOnly" | "invalid" | "required" | "onValueChangeEnd" | "positioning" | "initialFocusEl" | "format" | "defaultFormat" | "onFormatChange" | "closeOnSelect" | "openAutoFocus" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside">];
+export declare const splitColorPickerProps: <T extends UseColorPickerProps>(props: T) => [UseColorPickerProps, Omit<T, "name" | "defaultValue" | "value" | "open" | "ids" | "defaultOpen" | "onOpenChange" | "disabled" | "id" | "inline" | "onValueChange" | "onValueChangeEnd" | "readOnly" | "invalid" | "required" | "positioning" | "initialFocusEl" | "format" | "defaultFormat" | "onFormatChange" | "closeOnSelect" | "openAutoFocus" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside">];

package/dist/components/color-picker/split-color-picker-props.svelte.js

@@ -25,4 +25,5 @@ export const splitColorPickerProps = (props) => splitFn(props, [
     'readOnly',
     'required',
     'value',
+    'inline',
 ]);

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

package/dist/components/combobox/combobox-clear-trigger.svelte.d.ts

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

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

@@ -19,10 +19,9 @@
 
   function setNode(node: HTMLDivElement) {
     presence().setNode(node)
-    ref = node
   }
 </script>
 
 {#if presence().present}
-  <Ark as="div" {...mergedProps} {@attach setNode} />
+  <Ark as="div" bind:ref {...mergedProps} {@attach setNode} />
 {/if}

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

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

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

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

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

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

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

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

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

package/dist/components/combobox/combobox-item-group.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 { ItemGroupProps } from '@zag-js/combobox'
 
-  export interface ComboboxItemGroupBaseProps extends Partial<ItemGroupProps>, PolymorphicProps<'div'> {}
+  export interface ComboboxItemGroupBaseProps extends Partial<ItemGroupProps>, PolymorphicProps<'div'>, RefAttribute {}
   export interface ComboboxItemGroupProps extends Assign<HTMLProps<'div'>, ComboboxItemGroupBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { useComboboxContext } from './use-combobox-context'
   import { ComboboxItemGroupPropsProvider } from './use-combobox-item-group-props-context'
 
-  const props: ComboboxItemGroupProps = $props()
+  let { ref = $bindable(null), ...props }: ComboboxItemGroupProps = $props()
   const providedId = $props.id()
 
   const [itemGroupProps, localProps] = $derived(createSplitProps<Partial<ItemGroupProps>>()(props, ['id']))
@@ -26,4 +26,4 @@
   ComboboxItemGroupPropsProvider(() => groupProps)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { ItemGroupProps } from '@zag-js/combobox';
-export interface ComboboxItemGroupBaseProps extends Partial<ItemGroupProps>, PolymorphicProps<'div'> {
+export interface ComboboxItemGroupBaseProps extends Partial<ItemGroupProps>, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface ComboboxItemGroupProps extends Assign<HTMLProps<'div'>, ComboboxItemGroupBaseProps> {
 }
-declare const ComboboxItemGroup: import("svelte").Component<ComboboxItemGroupProps, {}, "">;
+declare const ComboboxItemGroup: import("svelte").Component<ComboboxItemGroupProps, {}, "ref">;
 type ComboboxItemGroup = ReturnType<typeof ComboboxItemGroup>;
 export default ComboboxItemGroup;

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

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

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

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

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

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

package/dist/components/combobox/combobox-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 ComboboxItemBaseProps extends PolymorphicProps<'div'> {
+  export interface ComboboxItemBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     item: unknown
     persistFocus?: boolean
   }
@@ -16,7 +16,7 @@
   import { ComboboxItemProvider } from './use-combobox-item-context'
   import { ComboboxItemPropsProvider } from './use-combobox-item-props-context'
 
-  const props: ComboboxItemProps = $props()
+  let { ref = $bindable(null), ...props }: ComboboxItemProps = $props()
 
   const [itemProps, localProps] = $derived(
     createSplitProps<{ item: any; persistFocus?: boolean }>()(props, ['item', 'persistFocus']),
@@ -30,4 +30,4 @@
   ComboboxItemPropsProvider(() => itemProps)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,10 +1,10 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface ComboboxItemBaseProps extends PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface ComboboxItemBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     item: unknown;
     persistFocus?: boolean;
 }
 export interface ComboboxItemProps extends Assign<HTMLProps<'div'>, ComboboxItemBaseProps> {
 }
-declare const ComboboxItem: import("svelte").Component<ComboboxItemProps, {}, "">;
+declare const ComboboxItem: import("svelte").Component<ComboboxItemProps, {}, "ref">;
 type ComboboxItem = ReturnType<typeof ComboboxItem>;
 export default ComboboxItem;

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

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

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

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

package/dist/components/combobox/combobox-list.svelte.d.ts

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

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

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

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

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

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
   import type { Snippet } from 'svelte'
   import type { CollectionItem } from '../collection/index.js'
   import type { UsePresenceProps } from '../presence/use-presence.svelte.js'
@@ -12,7 +12,8 @@
   export interface ComboboxRootProviderBaseProps<T extends CollectionItem>
     extends RootProviderProps<T>,
       UsePresenceProps,
-      PolymorphicProps<'div'> {
+      PolymorphicProps<'div'>,
+      RefAttribute {
     children?: Snippet
   }
   export interface ComboboxRootProviderProps<T extends CollectionItem>
@@ -25,7 +26,7 @@
   import { PresenceProvider, splitPresenceProps, usePresence } from '../presence/index.js'
   import { ComboboxProvider } from './use-combobox-context.js'
 
-  let { value, children, ...props }: ComboboxRootProviderProps<T> = $props()
+  let { ref = $bindable(null), value, children, ...props }: ComboboxRootProviderProps<T> = $props()
 
   const [presenceProps, otherProps] = splitPresenceProps(props)
   const presence = usePresence(() => mergeProps({ present: value().open }, presenceProps))
@@ -35,6 +36,6 @@
   PresenceProvider(presence)
 </script>
 
-<Ark as="div" {...mergedProps}>
+<Ark as="div" bind:ref {...mergedProps}>
   {@render children?.()}
 </Ark>