@ark-ui/svelte 5.0.3 → 5.0.5

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(),
@@ -98,4 +103,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;

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

package/dist/components/date-picker/date-picker-table-body.svelte.d.ts

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

package/dist/components/date-picker/date-picker-table-cell-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 DatePickerTableCellTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface DatePickerTableCellTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
   export interface DatePickerTableCellTriggerProps
     extends Assign<HTMLProps<'button'>, DatePickerTableCellTriggerBaseProps> {}
 </script>
@@ -13,7 +13,7 @@
   import { useDatePickerTableCellPropsContext } from './use-date-picker-table-cell-props-context.js'
   import { useDatePickerViewPropsContext } from './use-date-picker-view-props-context.js'
 
-  const props: DatePickerTableCellTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: DatePickerTableCellTriggerProps = $props()
 
   const datePicker = useDatePickerContext()
   const cellProps = useDatePickerTableCellPropsContext()
@@ -35,4 +35,4 @@
   const mergedProps = $derived(mergeProps(triggerProps, props))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

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

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

package/dist/components/date-picker/date-picker-table-cell.svelte

@@ -1,10 +1,11 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
   import type { UseDatePickerTableCellPropsContext } from './use-date-picker-table-cell-props-context.js'
 
   export interface DatePickerTableCellBaseProps
     extends ReturnType<UseDatePickerTableCellPropsContext>,
-      PolymorphicProps<'td'> {}
+      PolymorphicProps<'td'>,
+      RefAttribute {}
   export interface DatePickerTableCellProps extends Assign<HTMLProps<'td'>, DatePickerTableCellBaseProps> {}
 </script>
 
@@ -16,7 +17,7 @@
   import { DatePickerTableCellPropsProvider } from './use-date-picker-table-cell-props-context.js'
   import { useDatePickerViewPropsContext } from './use-date-picker-view-props-context.js'
 
-  const props: DatePickerTableCellProps = $props()
+  let { ref = $bindable(null), ...props }: DatePickerTableCellProps = $props()
 
   const [cellProps, localProps] = $derived(
     createSplitProps<ReturnType<UseDatePickerTableCellPropsContext>>()(props, [
@@ -46,4 +47,4 @@
   DatePickerTableCellPropsProvider(() => cellProps)
 </script>
 
-<Ark as="td" {...mergedProps} />
+<Ark as="td" bind:ref {...mergedProps} />

package/dist/components/date-picker/date-picker-table-cell.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js';
 import type { UseDatePickerTableCellPropsContext } from './use-date-picker-table-cell-props-context.js';
-export interface DatePickerTableCellBaseProps extends ReturnType<UseDatePickerTableCellPropsContext>, PolymorphicProps<'td'> {
+export interface DatePickerTableCellBaseProps extends ReturnType<UseDatePickerTableCellPropsContext>, PolymorphicProps<'td'>, RefAttribute {
 }
 export interface DatePickerTableCellProps extends Assign<HTMLProps<'td'>, DatePickerTableCellBaseProps> {
 }
-declare const DatePickerTableCell: import("svelte").Component<DatePickerTableCellProps, {}, "">;
+declare const DatePickerTableCell: import("svelte").Component<DatePickerTableCellProps, {}, "ref">;
 type DatePickerTableCell = ReturnType<typeof DatePickerTableCell>;
 export default DatePickerTableCell;

package/dist/components/date-picker/date-picker-table-head.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 DatePickerTableHeadBaseProps extends PolymorphicProps<'thead'> {}
+  export interface DatePickerTableHeadBaseProps extends PolymorphicProps<'thead'>, RefAttribute {}
   export interface DatePickerTableHeadProps extends Assign<HTMLProps<'thead'>, DatePickerTableHeadBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { useDatePickerContext } from './use-date-picker-context.js'
   import { useDatePickerTablePropsContext } from './use-date-picker-table-props-context.js'
 
-  const props: DatePickerTableHeadProps = $props()
+  let { ref = $bindable(null), ...props }: DatePickerTableHeadProps = $props()
 
   const datePicker = useDatePickerContext()
   const tableProps = useDatePickerTablePropsContext()
@@ -19,4 +19,4 @@
   const mergedProps = $derived(mergeProps(datePicker().getTableHeadProps(tableProps()), props))
 </script>
 
-<Ark as="thead" {...mergedProps} />
+<Ark as="thead" bind:ref {...mergedProps} />

package/dist/components/date-picker/date-picker-table-head.svelte.d.ts

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

package/dist/components/date-picker/date-picker-table-header.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 DatePickerTableHeaderBaseProps extends PolymorphicProps<'th'> {}
+  export interface DatePickerTableHeaderBaseProps extends PolymorphicProps<'th'>, RefAttribute {}
   export interface DatePickerTableHeaderProps extends Assign<HTMLProps<'th'>, DatePickerTableHeaderBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { useDatePickerContext } from './use-date-picker-context.js'
   import { useDatePickerTablePropsContext } from './use-date-picker-table-props-context.js'
 
-  const props: DatePickerTableHeaderProps = $props()
+  let { ref = $bindable(null), ...props }: DatePickerTableHeaderProps = $props()
 
   const datePicker = useDatePickerContext()
   const tableProps = useDatePickerTablePropsContext()
@@ -19,4 +19,4 @@
   const mergedProps = $derived(mergeProps(datePicker().getTableHeaderProps(tableProps()), props))
 </script>
 
-<Ark as="th" {...mergedProps} />
+<Ark as="th" bind:ref {...mergedProps} />

package/dist/components/date-picker/date-picker-table-header.svelte.d.ts

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

package/dist/components/date-picker/date-picker-table-row.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 DatePickerTableRowBaseProps extends PolymorphicProps<'tr'> {}
+  export interface DatePickerTableRowBaseProps extends PolymorphicProps<'tr'>, RefAttribute {}
   export interface DatePickerTableRowProps extends Assign<HTMLProps<'tr'>, DatePickerTableRowBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { useDatePickerContext } from './use-date-picker-context.js'
   import { useDatePickerTablePropsContext } from './use-date-picker-table-props-context.js'
 
-  const props: DatePickerTableRowProps = $props()
+  let { ref = $bindable(null), ...props }: DatePickerTableRowProps = $props()
 
   const datePicker = useDatePickerContext()
   const tableProps = useDatePickerTablePropsContext()
@@ -19,4 +19,4 @@
   const mergedProps = $derived(mergeProps(datePicker().getTableRowProps(tableProps()), props))
 </script>
 
-<Ark as="tr" {...mergedProps} />
+<Ark as="tr" bind:ref {...mergedProps} />

package/dist/components/date-picker/date-picker-table-row.svelte.d.ts

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

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

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

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

package/dist/components/date-picker/date-picker-view-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 DatePickerViewControlBaseProps extends PolymorphicProps<'div'> {}
+  export interface DatePickerViewControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface DatePickerViewControlProps extends Assign<HTMLProps<'div'>, DatePickerViewControlBaseProps> {}
 </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: DatePickerViewControlProps = $props()
+  let { ref = $bindable(null), ...props }: DatePickerViewControlProps = $props()
 
   const datePicker = useDatePickerContext()
   const viewProps = useDatePickerViewPropsContext()
   const mergedProps = $derived(mergeProps(datePicker().getViewControlProps(viewProps()), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

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

package/dist/components/date-picker/date-picker-view-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 DatePickerViewTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface DatePickerViewTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
   export interface DatePickerViewTriggerProps extends Assign<HTMLProps<'button'>, DatePickerViewTriggerBaseProps> {}
 </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: DatePickerViewTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: DatePickerViewTriggerProps = $props()
 
   const datePicker = useDatePickerContext()
   const viewProps = useDatePickerViewPropsContext()
   const mergedProps = $derived(mergeProps(datePicker().getViewTriggerProps(viewProps()), props))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

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

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

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

@@ -1,8 +1,8 @@
 <script module lang="ts">
   import type { ViewProps } from '@zag-js/date-picker'
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
 
-  export interface DatePickerViewBaseProps extends ViewProps, PolymorphicProps<'div'> {}
+  export interface DatePickerViewBaseProps extends ViewProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface DatePickerViewProps extends Assign<HTMLProps<'div'>, DatePickerViewBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { useDatePickerContext } from './use-date-picker-context.js'
   import { DatePickerViewPropsProvider } from './use-date-picker-view-props-context.js'
 
-  const props: DatePickerViewProps = $props()
+  let { ref = $bindable(null), ...props }: DatePickerViewProps = $props()
 
   const [viewProps, localProps] = $derived(createSplitProps<ViewProps>()(props, ['view']))
   const datePicker = useDatePickerContext()
@@ -22,4 +22,4 @@
   DatePickerViewPropsProvider(() => viewProps)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

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

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

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

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

package/dist/components/dialog/dialog-backdrop.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 DialogBackdropBaseProps extends PolymorphicProps<'div'> {
+  export interface DialogBackdropBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     ref?: Element | null
   }
   export interface DialogBackdropProps extends Assign<HTMLProps<'div'>, DialogBackdropBaseProps> {}
@@ -24,10 +24,9 @@
 
   function setNode(node: Element | null) {
     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/dialog/dialog-backdrop.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface DialogBackdropBaseProps extends PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface DialogBackdropBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     ref?: Element | null;
 }
 export interface DialogBackdropProps extends Assign<HTMLProps<'div'>, DialogBackdropBaseProps> {

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

package/dist/components/dialog/dialog-close-trigger.svelte.d.ts

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