@ark-ui/svelte 5.0.4 → 5.1.0

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

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

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

package/dist/components/select/select-item-group.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 SelectItemGroupBaseProps extends PolymorphicProps<'div'> {
+  export interface SelectItemGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     id?: string
   }
   export interface SelectItemGroupProps extends Assign<HTMLProps<'div'>, SelectItemGroupBaseProps> {}
@@ -13,7 +13,7 @@
   import { useSelectContext } from './use-select-context'
   import { SelectItemGroupPropsProvider } from './use-select-item-group-props-context'
 
-  const props: SelectItemGroupProps = $props()
+  let { ref = $bindable(null), ...props }: SelectItemGroupProps = $props()
   const providedId = $props.id()
 
   const groupProps = $derived({ id: props.id ?? providedId })
@@ -23,4 +23,4 @@
   SelectItemGroupPropsProvider(() => groupProps)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface SelectItemGroupBaseProps extends PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface SelectItemGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     id?: string;
 }
 export interface SelectItemGroupProps extends Assign<HTMLProps<'div'>, SelectItemGroupBaseProps> {
 }
-declare const SelectItemGroup: import("svelte").Component<SelectItemGroupProps, {}, "">;
+declare const SelectItemGroup: import("svelte").Component<SelectItemGroupProps, {}, "ref">;
 type SelectItemGroup = ReturnType<typeof SelectItemGroup>;
 export default SelectItemGroup;

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

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

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

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

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

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

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

@@ -1,8 +1,10 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { CollectionItem } from '../collection'
 
-  export interface SelectItemBaseProps<T extends CollectionItem = CollectionItem> extends PolymorphicProps<'div'> {
+  export interface SelectItemBaseProps<T extends CollectionItem = CollectionItem>
+    extends PolymorphicProps<'div'>,
+      RefAttribute {
     item: T
     disabled?: boolean
   }
@@ -17,7 +19,7 @@
   import { SelectItemProvider } from './use-select-item-context'
   import { SelectItemPropsProvider } from './use-select-item-props-context'
 
-  const props: SelectItemProps<T> = $props()
+  let { ref = $bindable(null), ...props }: SelectItemProps<T> = $props()
 
   const select = useSelectContext()
   const itemProps = $derived({ item: props.item, disabled: props.disabled })
@@ -27,4 +29,4 @@
   SelectItemPropsProvider(() => itemProps)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,6 +1,6 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { CollectionItem } from '../collection';
-export interface SelectItemBaseProps<T extends CollectionItem = CollectionItem> extends PolymorphicProps<'div'> {
+export interface SelectItemBaseProps<T extends CollectionItem = CollectionItem> extends PolymorphicProps<'div'>, RefAttribute {
     item: T;
     disabled?: boolean;
 }
@@ -10,7 +10,7 @@ declare class __sveltets_Render<T extends CollectionItem = CollectionItem> {
     props(): SelectItemProps<T>;
     events(): {};
     slots(): {};
-    bindings(): "";
+    bindings(): "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

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

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

package/dist/components/select/select-list.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface SelectListBaseProps extends PolymorphicProps<'div'> {}
+  export interface SelectListBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface SelectListProps extends Assign<HTMLProps<'div'>, SelectListBaseProps> {}
 </script>
 
@@ -10,9 +10,9 @@
   import { Ark } from '../factory'
   import { useSelectContext } from './use-select-context'
 
-  const props: SelectListProps = $props()
+  let { ref = $bindable(null), ...props }: SelectListProps = $props()
   const select = useSelectContext()
   const mergedProps = $derived(mergeProps(select().getListProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

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

package/dist/components/select/select-positioner.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface SelectPositionerBaseProps extends PolymorphicProps<'div'> {}
+  export interface SelectPositionerBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface SelectPositionerProps extends Assign<HTMLProps<'div'>, SelectPositionerBaseProps> {}
 </script>
 
@@ -10,9 +10,9 @@
   import { Ark } from '../factory'
   import { useSelectContext } from './use-select-context'
 
-  const props: SelectPositionerProps = $props()
+  let { ref = $bindable(null), ...props }: SelectPositionerProps = $props()
   const select = useSelectContext()
   const mergedProps = $derived(mergeProps(select().getPositionerProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

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

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

@@ -1,10 +1,12 @@
 <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 { UseSelectReturn } from './use-select.svelte'
 
   export interface SelectRootProviderBaseProps<T extends CollectionItem = CollectionItem>
-    extends PolymorphicProps<'div'> {
+    extends PolymorphicProps<'div'>,
+      UsePresenceProps,
+      RefAttribute {
     value: UseSelectReturn<T>
   }
 
@@ -16,12 +18,18 @@
   import { mergeProps } from '@zag-js/svelte'
   import { Ark } from '../factory'
   import { SelectProvider } from './use-select-context'
+  import { PresenceProvider, splitPresenceProps, usePresence, type UsePresenceProps } from '../presence'
 
-  const props: SelectRootProviderProps<T> = $props()
+  let { ref = $bindable(null), ...props }: SelectRootProviderProps<T> = $props()
 
-  const mergedProps = $derived(mergeProps(props.value().getRootProps(), props))
+  const [presenceProps, localProps] = $derived(splitPresenceProps(props))
+
+  const presence = usePresence(() => ({ present: props.value().open, ...presenceProps }))
+
+  const mergedProps = $derived(mergeProps(props.value().getRootProps(), localProps))
 
   SelectProvider(() => props.value())
+  PresenceProvider(presence)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,16 +1,17 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { CollectionItem } from '../collection';
 import type { UseSelectReturn } from './use-select.svelte';
-export interface SelectRootProviderBaseProps<T extends CollectionItem = CollectionItem> extends PolymorphicProps<'div'> {
+export interface SelectRootProviderBaseProps<T extends CollectionItem = CollectionItem> extends PolymorphicProps<'div'>, UsePresenceProps, RefAttribute {
     value: UseSelectReturn<T>;
 }
 export interface SelectRootProviderProps<T extends CollectionItem = CollectionItem> extends Assign<HTMLProps<'div'>, SelectRootProviderBaseProps<T>> {
 }
+import { type UsePresenceProps } from '../presence';
 declare class __sveltets_Render<T extends CollectionItem = CollectionItem> {
     props(): SelectRootProviderProps<T>;
     events(): {};
     slots(): {};
-    bindings(): "";
+    bindings(): "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

@@ -1,39 +1,80 @@
 <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 { UseSelectProps } from './use-select.svelte'
 
   export interface SelectRootBaseProps<T extends CollectionItem = CollectionItem>
     extends UseSelectProps<T>,
-      PolymorphicProps<'div'> {}
+      UsePresenceProps,
+      PolymorphicProps<'div'>,
+      RefAttribute {}
 
   export interface SelectRootProps<T extends CollectionItem = CollectionItem>
     extends Assign<HTMLProps<'div'>, SelectRootBaseProps<T>> {}
 </script>
 
 <script lang="ts" generics="T extends CollectionItem = CollectionItem">
-  import { mergeProps } from '@zag-js/svelte'
   import { Ark } from '../factory'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
+  import { PresenceProvider, splitPresenceProps, usePresence, type UsePresenceProps } from '../presence'
   import { SelectProvider } from './use-select-context'
   import { useSelect } from './use-select.svelte'
 
-  let { value = $bindable<string[] | undefined>(), ...props }: SelectRootProps<T> = $props()
+  let { ref = $bindable(null), value = $bindable<string[] | undefined>(), ...props }: SelectRootProps<T> = $props()
+
+  const [presenceProps, selectProps] = $derived(splitPresenceProps(props))
+  const [useSelectProps, localProps] = $derived(
+    createSplitProps<UseSelectProps<T>>()(selectProps, [
+      'closeOnSelect',
+      'collection',
+      'composite',
+      'defaultHighlightedValue',
+      'defaultOpen',
+      'defaultValue',
+      'deselectable',
+      'disabled',
+      'form',
+      'highlightedValue',
+      'id',
+      'ids',
+      'invalid',
+      'loopFocus',
+      'multiple',
+      'name',
+      'onFocusOutside',
+      'onHighlightChange',
+      'onInteractOutside',
+      'onOpenChange',
+      'onPointerDownOutside',
+      'onSelect',
+      'onValueChange',
+      'open',
+      'positioning',
+      'readOnly',
+      'required',
+      'scrollToIndexFn',
+      'value',
+    ]),
+  )
 
   const providedId = $props.id()
   const machineProps = $derived.by<UseSelectProps<T>>(() => ({
-    ...props,
+    ...useSelectProps,
     id: props.id ?? providedId,
     value,
     onValueChange(details) {
-      value = details.value
-      props.onValueChange?.(details)
+      useSelectProps.onValueChange?.(details)
+      if (value !== undefined) value = details.value
     },
   }))
 
   const select = useSelect(() => machineProps)
-  const mergedProps = $derived(mergeProps(select().getRootProps(), props))
+  const presence = usePresence(() => ({ present: select().open, ...presenceProps }))
+  const mergedProps = $derived(mergeProps(select().getRootProps(), localProps))
 
   SelectProvider(select)
+  PresenceProvider(presence)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,15 +1,16 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { CollectionItem } from '../collection';
 import type { UseSelectProps } from './use-select.svelte';
-export interface SelectRootBaseProps<T extends CollectionItem = CollectionItem> extends UseSelectProps<T>, PolymorphicProps<'div'> {
+export interface SelectRootBaseProps<T extends CollectionItem = CollectionItem> extends UseSelectProps<T>, UsePresenceProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface SelectRootProps<T extends CollectionItem = CollectionItem> extends Assign<HTMLProps<'div'>, SelectRootBaseProps<T>> {
 }
+import { type UsePresenceProps } from '../presence';
 declare class __sveltets_Render<T extends CollectionItem = CollectionItem> {
     props(): SelectRootProps<T>;
     events(): {};
     slots(): {};
-    bindings(): "value";
+    bindings(): "ref" | "value";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

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

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

package/dist/components/select/select-value-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 SelectValueTextBaseProps extends PolymorphicProps<'span'> {
+  export interface SelectValueTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {
     placeholder?: string
   }
   export interface SelectValueTextProps extends Assign<HTMLProps<'span'>, SelectValueTextBaseProps> {}
@@ -12,12 +12,12 @@
   import { Ark } from '../factory'
   import { useSelectContext } from './use-select-context'
 
-  const props: SelectValueTextProps = $props()
+  let { ref = $bindable(null), ...props }: SelectValueTextProps = $props()
   const select = useSelectContext()
   const mergedProps = $derived(mergeProps(select().getValueTextProps(), props))
 </script>
 
-<Ark as="span" {...mergedProps}>
+<Ark as="span" bind:ref {...mergedProps}>
   {#if props.children}
     {@render props.children()}
   {:else}

package/dist/components/select/select-value-text.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface SelectValueTextBaseProps extends PolymorphicProps<'span'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface SelectValueTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {
     placeholder?: string;
 }
 export interface SelectValueTextProps extends Assign<HTMLProps<'span'>, SelectValueTextBaseProps> {
 }
-declare const SelectValueText: import("svelte").Component<SelectValueTextProps, {}, "">;
+declare const SelectValueText: import("svelte").Component<SelectValueTextProps, {}, "ref">;
 type SelectValueText = ReturnType<typeof SelectValueText>;
 export default SelectValueText;

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

package/dist/components/signature-pad/signature-pad-clear-trigger.svelte.d.ts

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

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

package/dist/components/signature-pad/signature-pad-control.svelte.d.ts

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