@ark-ui/svelte 5.0.4 → 5.1.0

package/dist/components/rating-group/rating-group-root-provider.svelte

@@ -1,12 +1,12 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { UseRatingGroupReturn } from './use-rating-group.svelte'
 
   interface RootProviderProps {
     value: UseRatingGroupReturn
   }
 
-  export interface RatingGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {}
+  export interface RatingGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface RatingGroupRootProviderProps extends Assign<HTMLProps<'div'>, RatingGroupRootProviderBaseProps> {}
 </script>
 
@@ -15,11 +15,11 @@
   import { Ark } from '../factory'
   import { RatingGroupProvider } from './use-rating-group-context'
 
-  const props: RatingGroupRootProviderProps = $props()
+  let { ref = $bindable(null), ...props }: RatingGroupRootProviderProps = $props()
   const { value: ratingGroup, ...localProps } = props
   const mergedProps = $derived(mergeProps(ratingGroup().getRootProps(), localProps))
 
   RatingGroupProvider(ratingGroup)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/rating-group/rating-group-root-provider.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseRatingGroupReturn } from './use-rating-group.svelte';
 interface RootProviderProps {
     value: UseRatingGroupReturn;
 }
-export interface RatingGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {
+export interface RatingGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface RatingGroupRootProviderProps extends Assign<HTMLProps<'div'>, RatingGroupRootProviderBaseProps> {
 }
-declare const RatingGroupRootProvider: import("svelte").Component<RatingGroupRootProviderProps, {}, "">;
+declare const RatingGroupRootProvider: import("svelte").Component<RatingGroupRootProviderProps, {}, "ref">;
 type RatingGroupRootProvider = ReturnType<typeof RatingGroupRootProvider>;
 export default RatingGroupRootProvider;

package/dist/components/rating-group/rating-group-root.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { UseRatingGroupProps } from './use-rating-group.svelte'
 
-  export interface RatingGroupRootBaseProps extends UseRatingGroupProps, PolymorphicProps<'div'> {}
+  export interface RatingGroupRootBaseProps extends UseRatingGroupProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface RatingGroupRootProps extends Assign<HTMLProps<'div'>, RatingGroupRootBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { useRatingGroup } from './use-rating-group.svelte'
   import { RatingGroupProvider } from './use-rating-group-context'
 
-  let { value = $bindable(), ...props }: RatingGroupRootProps = $props()
+  let { ref = $bindable(null), value = $bindable(), ...props }: RatingGroupRootProps = $props()
   const providedId = $props.id()
 
   const [ratingGroupProps, localProps] = $derived(splitRatingGroupProps(props))
@@ -34,4 +34,4 @@
   RatingGroupProvider(ratingGroup)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/rating-group/rating-group-root.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseRatingGroupProps } from './use-rating-group.svelte';
-export interface RatingGroupRootBaseProps extends UseRatingGroupProps, PolymorphicProps<'div'> {
+export interface RatingGroupRootBaseProps extends UseRatingGroupProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface RatingGroupRootProps extends Assign<HTMLProps<'div'>, RatingGroupRootBaseProps> {
 }
-declare const RatingGroupRoot: import("svelte").Component<RatingGroupRootProps, {}, "value">;
+declare const RatingGroupRoot: import("svelte").Component<RatingGroupRootProps, {}, "ref" | "value">;
 type RatingGroupRoot = ReturnType<typeof RatingGroupRoot>;
 export default RatingGroupRoot;

package/dist/components/rating-group/split-rating-group-props.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { UseRatingGroupProps } from './use-rating-group.svelte';
-export declare const splitRatingGroupProps: <T extends UseRatingGroupProps>(props: T) => [UseRatingGroupProps, Omit<T, "form" | "name" | "defaultValue" | "value" | "ids" | "disabled" | "id" | "onValueChange" | "translations" | "readOnly" | "required" | "autoFocus" | "count" | "allowHalf" | "onHoverChange">];
+export declare const splitRatingGroupProps: <T extends UseRatingGroupProps>(props: T) => [UseRatingGroupProps, Omit<T, "form" | "name" | "defaultValue" | "value" | "ids" | "disabled" | "id" | "onValueChange" | "readOnly" | "required" | "translations" | "autoFocus" | "count" | "allowHalf" | "onHoverChange">];

package/dist/components/segment-group/segment-group-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 SegmentGroupIndicatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface SegmentGroupIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface SegmentGroupIndicatorProps extends Assign<HTMLProps<'div'>, SegmentGroupIndicatorBaseProps> {}
 </script>
 
@@ -11,10 +11,10 @@
   import { parts } from './segment-group.anatomy'
   import { useSegmentGroupContext } from './use-segment-group-context'
 
-  const props: SegmentGroupIndicatorProps = $props()
+  let { ref = $bindable(null), ...props }: SegmentGroupIndicatorProps = $props()
 
   const segmentGroup = useSegmentGroupContext()
   const mergedProps = $derived(mergeProps(segmentGroup().getIndicatorProps(), parts.indicator.attrs, props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/segment-group/segment-group-indicator.svelte.d.ts

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

package/dist/components/segment-group/segment-group-item-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 SegmentGroupItemControlBaseProps extends PolymorphicProps<'div'> {}
+  export interface SegmentGroupItemControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface SegmentGroupItemControlProps extends Assign<HTMLProps<'div'>, SegmentGroupItemControlBaseProps> {}
 </script>
 
@@ -12,7 +12,7 @@
   import { useSegmentGroupContext } from './use-segment-group-context'
   import { useSegmentGroupItemPropsContext } from './use-segment-group-item-props-context'
 
-  const props: SegmentGroupItemControlProps = $props()
+  let { ref = $bindable(null), ...props }: SegmentGroupItemControlProps = $props()
 
   const segmentGroup = useSegmentGroupContext()
   const itemProps = useSegmentGroupItemPropsContext()
@@ -22,4 +22,4 @@
   )
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/segment-group/segment-group-item-control.svelte.d.ts

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

package/dist/components/segment-group/segment-group-item-hidden-input.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface SegmentGroupItemHiddenInputBaseProps extends PolymorphicProps<'input'> {}
+  export interface SegmentGroupItemHiddenInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {}
   export interface SegmentGroupItemHiddenInputProps
     extends Assign<HTMLProps<'input'>, SegmentGroupItemHiddenInputBaseProps> {}
 </script>
@@ -12,11 +12,11 @@
   import { useSegmentGroupContext } from './use-segment-group-context'
   import { useSegmentGroupItemPropsContext } from './use-segment-group-item-props-context'
 
-  const props: SegmentGroupItemHiddenInputProps = $props()
+  let { ref = $bindable(null), ...props }: SegmentGroupItemHiddenInputProps = $props()
   const segmentGroup = useSegmentGroupContext()
   const itemProps = useSegmentGroupItemPropsContext()
 
   const mergedProps = $derived(mergeProps(segmentGroup().getItemHiddenInputProps(itemProps()), props))
 </script>
 
-<Ark as="input" {...mergedProps} />
+<Ark as="input" bind:ref {...mergedProps} />

package/dist/components/segment-group/segment-group-item-hidden-input.svelte.d.ts

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

package/dist/components/segment-group/segment-group-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 SegmentGroupItemTextBaseProps extends PolymorphicProps<'span'> {}
+  export interface SegmentGroupItemTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
   export interface SegmentGroupItemTextProps extends Assign<HTMLProps<'span'>, SegmentGroupItemTextBaseProps> {}
 </script>
 
@@ -12,11 +12,11 @@
   import { useSegmentGroupContext } from './use-segment-group-context'
   import { useSegmentGroupItemPropsContext } from './use-segment-group-item-props-context'
 
-  const props: SegmentGroupItemTextProps = $props()
+  let { ref = $bindable(null), ...props }: SegmentGroupItemTextProps = $props()
   const segmentGroup = useSegmentGroupContext()
   const itemProps = useSegmentGroupItemPropsContext()
 
   const mergedProps = $derived(mergeProps(segmentGroup().getItemTextProps(itemProps()), parts.itemText.attrs, props))
 </script>
 
-<Ark as="span" {...mergedProps} />
+<Ark as="span" bind:ref {...mergedProps} />

package/dist/components/segment-group/segment-group-item-text.svelte.d.ts

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

package/dist/components/segment-group/segment-group-item.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { ItemProps } from '@zag-js/radio-group'
 
-  export interface SegmentGroupItemBaseProps extends ItemProps, PolymorphicProps<'label'> {}
+  export interface SegmentGroupItemBaseProps extends ItemProps, PolymorphicProps<'label'>, RefAttribute {}
   export interface SegmentGroupItemProps extends Assign<HTMLProps<'label'>, SegmentGroupItemBaseProps> {}
 </script>
 
@@ -15,7 +15,7 @@
   import { SegmentGroupItemPropsProvider } from './use-segment-group-item-props-context'
   import { createSplitProps } from '../../utils/create-split-props'
 
-  const props: SegmentGroupItemProps = $props()
+  let { ref = $bindable(null), ...props }: SegmentGroupItemProps = $props()
 
   const [itemProps, localProps] = $derived(createSplitProps<ItemProps>()(props, ['value', 'disabled', 'invalid']))
 
@@ -28,4 +28,4 @@
   SegmentGroupItemPropsProvider(() => itemProps)
 </script>
 
-<Ark as="label" {...mergedProps} />
+<Ark as="label" bind:ref {...mergedProps} />

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

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { ItemProps } from '@zag-js/radio-group';
-export interface SegmentGroupItemBaseProps extends ItemProps, PolymorphicProps<'label'> {
+export interface SegmentGroupItemBaseProps extends ItemProps, PolymorphicProps<'label'>, RefAttribute {
 }
 export interface SegmentGroupItemProps extends Assign<HTMLProps<'label'>, SegmentGroupItemBaseProps> {
 }
-declare const SegmentGroupItem: import("svelte").Component<SegmentGroupItemProps, {}, "">;
+declare const SegmentGroupItem: import("svelte").Component<SegmentGroupItemProps, {}, "ref">;
 type SegmentGroupItem = ReturnType<typeof SegmentGroupItem>;
 export default SegmentGroupItem;

package/dist/components/segment-group/segment-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 SegmentGroupLabelBaseProps extends PolymorphicProps<'label'> {}
+  export interface SegmentGroupLabelBaseProps extends PolymorphicProps<'label'>, RefAttribute {}
   export interface SegmentGroupLabelProps extends Assign<HTMLProps<'label'>, SegmentGroupLabelBaseProps> {}
 </script>
 
@@ -11,10 +11,10 @@
   import { parts } from './segment-group.anatomy'
   import { useSegmentGroupContext } from './use-segment-group-context'
 
-  const props: SegmentGroupLabelProps = $props()
+  let { ref = $bindable(null), ...props }: SegmentGroupLabelProps = $props()
 
   const segmentGroup = useSegmentGroupContext()
   const mergedProps = $derived(mergeProps(segmentGroup().getLabelProps(), parts.label.attrs, props))
 </script>
 
-<Ark as="label" {...mergedProps} />
+<Ark as="label" bind:ref {...mergedProps} />

package/dist/components/segment-group/segment-group-label.svelte.d.ts

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

package/dist/components/segment-group/segment-group-root-provider.svelte

@@ -1,12 +1,12 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { UseSegmentGroupReturn } from './use-segment-group.svelte'
 
   interface RootProviderProps {
     value: UseSegmentGroupReturn
   }
 
-  export interface SegmentGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {}
+  export interface SegmentGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface SegmentGroupRootProviderProps extends Assign<HTMLProps<'div'>, SegmentGroupRootProviderBaseProps> {}
 </script>
 
@@ -16,11 +16,11 @@
   import { parts } from './segment-group.anatomy'
   import { SegmentGroupProvider } from './use-segment-group-context'
 
-  let { value, ...props }: SegmentGroupRootProviderProps = $props()
+  let { ref = $bindable(null), value, ...props }: SegmentGroupRootProviderProps = $props()
 
   const mergedProps = $derived(mergeProps(value().getRootProps(), parts.root.attrs, props))
 
   SegmentGroupProvider(value)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/segment-group/segment-group-root-provider.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseSegmentGroupReturn } from './use-segment-group.svelte';
 interface RootProviderProps {
     value: UseSegmentGroupReturn;
 }
-export interface SegmentGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {
+export interface SegmentGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface SegmentGroupRootProviderProps extends Assign<HTMLProps<'div'>, SegmentGroupRootProviderBaseProps> {
 }
-declare const SegmentGroupRootProvider: import("svelte").Component<SegmentGroupRootProviderProps, {}, "">;
+declare const SegmentGroupRootProvider: import("svelte").Component<SegmentGroupRootProviderProps, {}, "ref">;
 type SegmentGroupRootProvider = ReturnType<typeof SegmentGroupRootProvider>;
 export default SegmentGroupRootProvider;

package/dist/components/segment-group/segment-group-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 { ValueChangeDetails } from '@zag-js/radio-group'
   import type { UseSegmentGroupProps } from './use-segment-group.svelte'
 
@@ -7,7 +7,7 @@
     valueChange: ValueChangeDetails
   }
 
-  export interface SegmentGroupRootBaseProps extends UseSegmentGroupProps, PolymorphicProps<'div'> {}
+  export interface SegmentGroupRootBaseProps extends UseSegmentGroupProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface SegmentGroupRootProps extends Assign<HTMLProps<'div'>, SegmentGroupRootBaseProps> {}
 </script>
 
@@ -19,7 +19,7 @@
   import { useSegmentGroup } from './use-segment-group.svelte'
   import { SegmentGroupProvider } from './use-segment-group-context'
 
-  let { value = $bindable(), ...props }: SegmentGroupRootProps = $props()
+  let { ref = $bindable(null), value = $bindable(), ...props }: SegmentGroupRootProps = $props()
   const providedId = $props.id()
 
   const [segmentGroupProps, localProps] = $derived(splitSegmentGroupProps(props))
@@ -40,4 +40,4 @@
   SegmentGroupProvider(segmentGroup)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/segment-group/segment-group-root.svelte.d.ts

@@ -1,13 +1,13 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { ValueChangeDetails } from '@zag-js/radio-group';
 import type { UseSegmentGroupProps } from './use-segment-group.svelte';
 export interface SegmentGroupRootEmits {
     valueChange: ValueChangeDetails;
 }
-export interface SegmentGroupRootBaseProps extends UseSegmentGroupProps, PolymorphicProps<'div'> {
+export interface SegmentGroupRootBaseProps extends UseSegmentGroupProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface SegmentGroupRootProps extends Assign<HTMLProps<'div'>, SegmentGroupRootBaseProps> {
 }
-declare const SegmentGroupRoot: import("svelte").Component<SegmentGroupRootProps, {}, "value">;
+declare const SegmentGroupRoot: import("svelte").Component<SegmentGroupRootProps, {}, "ref" | "value">;
 type SegmentGroupRoot = ReturnType<typeof SegmentGroupRoot>;
 export default SegmentGroupRoot;

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

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

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

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

@@ -1,18 +1,26 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface SelectContentBaseProps extends PolymorphicProps<'div'> {}
+  export interface SelectContentBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface SelectContentProps extends Assign<HTMLProps<'div'>, SelectContentBaseProps> {}
 </script>
 
 <script lang="ts">
-  import { mergeProps } from '@zag-js/svelte'
   import { Ark } from '../factory'
+  import { mergeProps } from '@zag-js/svelte'
+  import { usePresenceContext } from '../presence'
   import { useSelectContext } from './use-select-context'
 
-  const props: SelectContentProps = $props()
+  let { ref = $bindable(null), ...props }: SelectContentProps = $props()
   const select = useSelectContext()
-  const mergedProps = $derived(mergeProps(select().getContentProps(), props))
+  const presence = usePresenceContext()
+  const mergedProps = $derived(mergeProps(select().getContentProps(), presence().getPresenceProps(), props))
+
+  function setNode(node: Element | null) {
+    presence().setNode(node)
+  }
 </script>
 
-<Ark as="div" {...mergedProps} />
+{#if !presence().unmounted}
+  <Ark as="div" bind:ref {...mergedProps} {@attach setNode} />
+{/if}

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

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

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

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

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

package/dist/components/select/select-hidden-select.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 SelectHiddenSelectBaseProps extends PolymorphicProps<'select'> {}
+  export interface SelectHiddenSelectBaseProps extends PolymorphicProps<'select'>, RefAttribute {}
   export interface SelectHiddenSelectProps extends Assign<HTMLProps<'select'>, SelectHiddenSelectBaseProps> {}
 </script>
 
@@ -10,12 +10,12 @@
   import { Ark } from '../factory'
   import { useSelectContext } from './use-select-context'
 
-  const props: SelectHiddenSelectProps = $props()
+  let { ref = $bindable(null), ...props }: SelectHiddenSelectProps = $props()
   const select = useSelectContext()
   const mergedProps = $derived(mergeProps(select().getHiddenSelectProps(), props))
 </script>
 
-<Ark as="select" {...mergedProps}>
+<Ark as="select" bind:ref {...mergedProps}>
   {#each select().collection.items as item}
     <option value={select().collection.stringifyItem(item)}>
       {select().collection.stringifyItem(item)}

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

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

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

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

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