@ark-ui/svelte 5.0.4 → 5.0.5

package/dist/components/color-picker/color-picker-swatch-trigger.svelte

@@ -1,8 +1,11 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { SwatchTriggerProps } from '@zag-js/color-picker'
 
-  export interface ColorPickerSwatchTriggerBaseProps extends SwatchTriggerProps, PolymorphicProps<'button'> {}
+  export interface ColorPickerSwatchTriggerBaseProps
+    extends SwatchTriggerProps,
+      PolymorphicProps<'button'>,
+      RefAttribute {}
   export interface ColorPickerSwatchTriggerProps
     extends Assign<HTMLProps<'button'>, ColorPickerSwatchTriggerBaseProps> {}
 </script>
@@ -13,7 +16,7 @@
   import { Ark } from '../factory'
   import { useColorPickerContext } from './use-color-picker-context'
 
-  const props: ColorPickerSwatchTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerSwatchTriggerProps = $props()
 
   const [swatchTriggerProps, localProps] = $derived(
     createSplitProps<SwatchTriggerProps>()(props, ['value', 'disabled']),
@@ -23,4 +26,4 @@
   const mergedProps = $derived(mergeProps(colorPicker().getSwatchTriggerProps(swatchTriggerProps), localProps))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

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

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { SwatchTriggerProps } from '@zag-js/color-picker';
-export interface ColorPickerSwatchTriggerBaseProps extends SwatchTriggerProps, PolymorphicProps<'button'> {
+export interface ColorPickerSwatchTriggerBaseProps extends SwatchTriggerProps, PolymorphicProps<'button'>, RefAttribute {
 }
 export interface ColorPickerSwatchTriggerProps extends Assign<HTMLProps<'button'>, ColorPickerSwatchTriggerBaseProps> {
 }
-declare const ColorPickerSwatchTrigger: import("svelte").Component<ColorPickerSwatchTriggerProps, {}, "">;
+declare const ColorPickerSwatchTrigger: import("svelte").Component<ColorPickerSwatchTriggerProps, {}, "ref">;
 type ColorPickerSwatchTrigger = ReturnType<typeof ColorPickerSwatchTrigger>;
 export default ColorPickerSwatchTrigger;

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

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

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { SwatchProps } from '@zag-js/color-picker';
-export interface ColorPickerSwatchBaseProps extends SwatchProps, PolymorphicProps<'div'> {
+export interface ColorPickerSwatchBaseProps extends SwatchProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface ColorPickerSwatchProps extends Assign<HTMLProps<'div'>, ColorPickerSwatchBaseProps> {
 }
-declare const ColorPickerSwatch: import("svelte").Component<ColorPickerSwatchProps, {}, "">;
+declare const ColorPickerSwatch: import("svelte").Component<ColorPickerSwatchProps, {}, "ref">;
 type ColorPickerSwatch = ReturnType<typeof ColorPickerSwatch>;
 export default ColorPickerSwatch;

package/dist/components/color-picker/color-picker-transparency-grid.svelte

@@ -1,7 +1,10 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface ColorPickerTransparencyGridBaseProps extends TransparencyGridProps, PolymorphicProps<'div'> {}
+  export interface ColorPickerTransparencyGridBaseProps
+    extends TransparencyGridProps,
+      PolymorphicProps<'div'>,
+      RefAttribute {}
   export interface ColorPickerTransparencyGridProps
     extends Assign<HTMLProps<'div'>, ColorPickerTransparencyGridBaseProps> {}
 </script>
@@ -13,7 +16,7 @@
   import type { TransparencyGridProps } from '@zag-js/color-picker'
   import { createSplitProps } from '../../utils/create-split-props'
 
-  const props: ColorPickerTransparencyGridProps = $props()
+  let { ref = $bindable(null), ...props }: ColorPickerTransparencyGridProps = $props()
 
   const [gridProps, localProps] = $derived(createSplitProps<TransparencyGridProps>()(props, ['size']))
 
@@ -21,4 +24,4 @@
   const mergedProps = $derived(mergeProps(colorPicker().getTransparencyGridProps(gridProps), localProps))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-transparency-grid.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface ColorPickerTransparencyGridBaseProps extends TransparencyGridProps, PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface ColorPickerTransparencyGridBaseProps extends TransparencyGridProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface ColorPickerTransparencyGridProps extends Assign<HTMLProps<'div'>, ColorPickerTransparencyGridBaseProps> {
 }
 import type { TransparencyGridProps } from '@zag-js/color-picker';
-declare const ColorPickerTransparencyGrid: import("svelte").Component<ColorPickerTransparencyGridProps, {}, "">;
+declare const ColorPickerTransparencyGrid: import("svelte").Component<ColorPickerTransparencyGridProps, {}, "ref">;
 type ColorPickerTransparencyGrid = ReturnType<typeof ColorPickerTransparencyGrid>;
 export default ColorPickerTransparencyGrid;

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

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

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

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/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;