@ark-ui/svelte 5.0.4 → 5.1.0

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

@@ -1,4 +1,4 @@
-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';
@@ -6,7 +6,7 @@ import type { UseComboboxReturn } from './use-combobox.svelte.js';
 interface RootProviderProps<T extends CollectionItem> {
     value: UseComboboxReturn<T>;
 }
-export interface ComboboxRootProviderBaseProps<T extends CollectionItem> extends RootProviderProps<T>, UsePresenceProps, PolymorphicProps<'div'> {
+export interface ComboboxRootProviderBaseProps<T extends CollectionItem> extends RootProviderProps<T>, UsePresenceProps, PolymorphicProps<'div'>, RefAttribute {
     children?: Snippet;
 }
 export interface ComboboxRootProviderProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ComboboxRootProviderBaseProps<T>> {
@@ -15,7 +15,7 @@ declare class __sveltets_Render<T extends CollectionItem> {
     props(): ComboboxRootProviderProps<T>;
     events(): {};
     slots(): {};
-    bindings(): "";
+    bindings(): "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

@@ -1,5 +1,5 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { CollectionItem } from '../collection'
   import type { UsePresenceProps } from '../presence'
   import type { UseComboboxProps } from './use-combobox.svelte'
@@ -7,7 +7,9 @@
   export interface ComboboxRootBaseProps<T extends CollectionItem>
     extends UseComboboxProps<T>,
       UsePresenceProps,
-      PolymorphicProps<'div'> {}
+      PolymorphicProps<'div'>,
+      RefAttribute {}
+
   export interface ComboboxRootProps<T extends CollectionItem>
     extends Assign<HTMLProps<'div'>, ComboboxRootBaseProps<T>> {}
 </script>
@@ -21,6 +23,7 @@
   import { useCombobox } from './use-combobox.svelte'
 
   let {
+    ref = $bindable(null),
     open = $bindable<boolean>(),
     value = $bindable<string[]>(),
     inputValue = $bindable<string>(),
@@ -85,15 +88,15 @@
     inputValue,
     onOpenChange(details) {
       useComboboxProps.onOpenChange?.(details)
-      if (open != null) open = details.open
+      if (open !== undefined) open = details.open
     },
     onValueChange(details) {
       useComboboxProps.onValueChange?.(details)
-      if (value != null) value = details.value
+      if (value !== undefined) value = details.value
     },
     onInputValueChange(details) {
       useComboboxProps.onInputValueChange?.(details)
-      if (inputValue != null) inputValue = details.inputValue
+      if (inputValue !== undefined) inputValue = details.inputValue
     },
   }))
 
@@ -105,4 +108,4 @@
   PresenceProvider(presence)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { CollectionItem } from '../collection';
 import type { UsePresenceProps } from '../presence';
 import type { UseComboboxProps } from './use-combobox.svelte';
-export interface ComboboxRootBaseProps<T extends CollectionItem> extends UseComboboxProps<T>, UsePresenceProps, PolymorphicProps<'div'> {
+export interface ComboboxRootBaseProps<T extends CollectionItem> extends UseComboboxProps<T>, UsePresenceProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface ComboboxRootProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ComboboxRootBaseProps<T>> {
 }
@@ -10,7 +10,7 @@ declare class __sveltets_Render<T extends CollectionItem> {
     props(): ComboboxRootProps<T>;
     events(): {};
     slots(): {};
-    bindings(): "value" | "open" | "inputValue";
+    bindings(): "ref" | "value" | "open" | "inputValue";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

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

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

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

package/dist/components/date-picker/date-picker-clear-trigger.svelte.d.ts

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

package/dist/components/date-picker/date-picker-content.svelte

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

package/dist/components/date-picker/date-picker-content.svelte.d.ts

@@ -3,6 +3,6 @@ export interface DatePickerContentBaseProps extends PolymorphicProps<'div'>, Ref
 }
 export interface DatePickerContentProps extends Assign<HTMLProps<'div'>, DatePickerContentBaseProps> {
 }
-declare const DatePickerContent: import("svelte").Component<DatePickerContentProps, {}, "">;
+declare const DatePickerContent: import("svelte").Component<DatePickerContentProps, {}, "ref">;
 type DatePickerContent = ReturnType<typeof DatePickerContent>;
 export default DatePickerContent;

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

package/dist/components/date-picker/date-picker-control.svelte.d.ts

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

package/dist/components/date-picker/date-picker-input.svelte

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

package/dist/components/date-picker/date-picker-input.svelte.d.ts

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

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

package/dist/components/date-picker/date-picker-label.svelte.d.ts

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

package/dist/components/date-picker/date-picker-month-select.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 DatePickerMonthSelectBaseProps extends PolymorphicProps<'select'> {}
+  export interface DatePickerMonthSelectBaseProps extends PolymorphicProps<'select'>, RefAttribute {}
   export interface DatePickerMonthSelectProps extends Assign<HTMLProps<'select'>, DatePickerMonthSelectBaseProps> {}
 </script>
 
@@ -10,13 +10,13 @@
   import { Ark } from '../factory/index.js'
   import { useDatePickerContext } from './use-date-picker-context.js'
 
-  const props: DatePickerMonthSelectProps = $props()
+  let { ref = $bindable(null), ...props }: DatePickerMonthSelectProps = $props()
 
   const datePicker = useDatePickerContext()
   const mergedProps = $derived(mergeProps(datePicker().getMonthSelectProps(), props))
 </script>
 
-<Ark as="select" {...mergedProps}>
+<Ark as="select" bind:ref {...mergedProps}>
   {#each datePicker().getMonths() as month, i}
     <option value={month.value}>
       {month.label}

package/dist/components/date-picker/date-picker-month-select.svelte.d.ts

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

package/dist/components/date-picker/date-picker-next-trigger.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 DatePickerNextTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface DatePickerNextTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
   export interface DatePickerNextTriggerProps extends Assign<HTMLProps<'button'>, DatePickerNextTriggerBaseProps> {}
 </script>
 
@@ -11,11 +11,11 @@
   import { useDatePickerContext } from './use-date-picker-context.js'
   import { useDatePickerViewPropsContext } from './use-date-picker-view-props-context.js'
 
-  const props: DatePickerNextTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: DatePickerNextTriggerProps = $props()
 
   const datePicker = useDatePickerContext()
   const viewProps = useDatePickerViewPropsContext()
   const mergedProps = $derived(mergeProps(datePicker().getNextTriggerProps(viewProps()), props))
 </script>
 
-<Ark as="button" {...mergedProps} /> 
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/date-picker/date-picker-next-trigger.svelte.d.ts

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

package/dist/components/date-picker/date-picker-positioner.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 DatePickerPositionerBaseProps extends PolymorphicProps<'div'> {}
+  export interface DatePickerPositionerBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface DatePickerPositionerProps extends Assign<HTMLProps<'div'>, DatePickerPositionerBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { useDatePickerContext } from './use-date-picker-context.js'
   import { usePresenceContext } from '../presence/index.js'
 
-  const props: DatePickerPositionerProps = $props()
+  let { ref = $bindable(null), ...props }: DatePickerPositionerProps = $props()
 
   const datePicker = useDatePickerContext()
   const presence = usePresenceContext()
@@ -19,5 +19,5 @@
 </script>
 
 {#if !presence().unmounted}
-  <Ark as="div" {...mergedProps} />
+  <Ark as="div" bind:ref {...mergedProps} />
 {/if}

package/dist/components/date-picker/date-picker-positioner.svelte.d.ts

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

package/dist/components/date-picker/date-picker-preset-trigger.svelte

@@ -1,8 +1,11 @@
 <script module lang="ts">
   import type { PresetTriggerProps } from '@zag-js/date-picker'
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
 
-  export interface DatePickerPresetTriggerBaseProps extends PresetTriggerProps, PolymorphicProps<'button'> {}
+  export interface DatePickerPresetTriggerBaseProps
+    extends PresetTriggerProps,
+      PolymorphicProps<'button'>,
+      RefAttribute {}
   export interface DatePickerPresetTriggerProps extends Assign<HTMLProps<'button'>, DatePickerPresetTriggerBaseProps> {}
 </script>
 
@@ -12,11 +15,11 @@
   import { Ark } from '../factory/index.js'
   import { useDatePickerContext } from './use-date-picker-context.js'
 
-  const props: DatePickerPresetTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: DatePickerPresetTriggerProps = $props()
 
   const [presetTriggerProps, localProps] = $derived(createSplitProps<PresetTriggerProps>()(props, ['value']))
   const datePicker = useDatePickerContext()
   const mergedProps = $derived(mergeProps(datePicker().getPresetTriggerProps(presetTriggerProps), localProps))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/date-picker/date-picker-preset-trigger.svelte.d.ts

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

package/dist/components/date-picker/date-picker-prev-trigger.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 DatePickerPrevTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface DatePickerPrevTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
   export interface DatePickerPrevTriggerProps extends Assign<HTMLProps<'button'>, DatePickerPrevTriggerBaseProps> {}
 </script>
 
@@ -11,11 +11,11 @@
   import { useDatePickerContext } from './use-date-picker-context.js'
   import { useDatePickerViewPropsContext } from './use-date-picker-view-props-context.js'
 
-  const props: DatePickerPrevTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: DatePickerPrevTriggerProps = $props()
 
   const datePicker = useDatePickerContext()
   const viewProps = useDatePickerViewPropsContext()
   const mergedProps = $derived(mergeProps(datePicker().getPrevTriggerProps(viewProps()), props))
 </script>
 
-<Ark as="button" {...mergedProps} /> 
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/date-picker/date-picker-prev-trigger.svelte.d.ts

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

package/dist/components/date-picker/date-picker-range-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 DatePickerRangeTextBaseProps extends PolymorphicProps<'div'> {}
+  export interface DatePickerRangeTextBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface DatePickerRangeTextProps extends Assign<HTMLProps<'div'>, DatePickerRangeTextBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { Ark } from '../factory/index.js'
   import { useDatePickerContext } from './use-date-picker-context.js'
 
-  const props: DatePickerRangeTextProps = $props()
+  let { ref = $bindable(null), ...props }: DatePickerRangeTextProps = $props()
 
   const datePicker = useDatePickerContext()
   const mergedProps = $derived(mergeProps(datePicker().getRangeTextProps(), props))
@@ -22,6 +22,6 @@
   })
 </script>
 
-<Ark as="div" {...mergedProps}>
+<Ark as="div" bind:ref {...mergedProps}>
   {visibleRangeText}
 </Ark>

package/dist/components/date-picker/date-picker-range-text.svelte.d.ts

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

package/dist/components/date-picker/date-picker-root.svelte

@@ -1,9 +1,13 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
   import type { UseDatePickerProps } from './use-date-picker.svelte.js'
   import type { UsePresenceProps } from '../presence/index.js'
 
-  export interface DatePickerRootBaseProps extends UseDatePickerProps, UsePresenceProps, PolymorphicProps<'div'> {}
+  export interface DatePickerRootBaseProps
+    extends UseDatePickerProps,
+      UsePresenceProps,
+      PolymorphicProps<'div'>,
+      RefAttribute {}
   export interface DatePickerRootProps extends Assign<HTMLProps<'div'>, DatePickerRootBaseProps> {}
 </script>
 
@@ -16,6 +20,7 @@
   import { DatePickerProvider } from './use-date-picker-context.js'
 
   let {
+    ref = $bindable(null),
     value = $bindable(),
     focusedValue = $bindable(),
     open = $bindable(),
@@ -62,6 +67,7 @@
       'translations',
       'value',
       'view',
+      'inline',
     ]),
   )
 
@@ -98,4 +104,4 @@
   PresenceProvider(presence)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/date-picker/date-picker-root.svelte.d.ts

@@ -1,10 +1,10 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js';
 import type { UseDatePickerProps } from './use-date-picker.svelte.js';
 import type { UsePresenceProps } from '../presence/index.js';
-export interface DatePickerRootBaseProps extends UseDatePickerProps, UsePresenceProps, PolymorphicProps<'div'> {
+export interface DatePickerRootBaseProps extends UseDatePickerProps, UsePresenceProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface DatePickerRootProps extends Assign<HTMLProps<'div'>, DatePickerRootBaseProps> {
 }
-declare const DatePickerRoot: import("svelte").Component<DatePickerRootProps, {}, "view" | "value" | "open" | "focusedValue">;
+declare const DatePickerRoot: import("svelte").Component<DatePickerRootProps, {}, "view" | "ref" | "value" | "open" | "focusedValue">;
 type DatePickerRoot = ReturnType<typeof DatePickerRoot>;
 export default DatePickerRoot;