@ark-ui/svelte 5.0.3 → 5.0.5

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

@@ -1,19 +1,19 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types'
   import type { UseSliderProps } from './use-slider.svelte'
 
-  export interface SliderRootBaseProps extends Optional<UseSliderProps, 'id'>, PolymorphicProps<'div'> {}
+  export interface SliderRootBaseProps extends Optional<UseSliderProps, 'id'>, PolymorphicProps<'div'>, RefAttribute {}
   export interface SliderRootProps extends Assign<HTMLProps<'div'>, SliderRootBaseProps> {}
 </script>
 
 <script lang="ts">
-  import { mergeProps, reflect } from '@zag-js/svelte'
+  import { mergeProps } from '@zag-js/svelte'
   import { createSplitProps } from '../../utils/create-split-props'
   import { Ark } from '../factory'
   import { SliderProvider } from './use-slider-context'
   import { useSlider } from './use-slider.svelte'
 
-  let { value = $bindable(), ...props }: SliderRootProps = $props()
+  let { ref = $bindable(null), value = $bindable(), ...props }: SliderRootProps = $props()
   const providedId = $props.id()
 
   const [useSliderProps, localProps] = $derived(
@@ -49,8 +49,8 @@
     id: useSliderProps.id ?? providedId,
     value,
     onValueChange(details) {
-      value = details.value
       useSliderProps.onValueChange?.(details)
+      if (value !== undefined) value = details.value
     },
   })
 
@@ -60,4 +60,4 @@
   SliderProvider(slider)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseSliderProps } from './use-slider.svelte';
-export interface SliderRootBaseProps extends Optional<UseSliderProps, 'id'>, PolymorphicProps<'div'> {
+export interface SliderRootBaseProps extends Optional<UseSliderProps, 'id'>, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface SliderRootProps extends Assign<HTMLProps<'div'>, SliderRootBaseProps> {
 }
-declare const SliderRoot: import("svelte").Component<SliderRootProps, {}, "value">;
+declare const SliderRoot: import("svelte").Component<SliderRootProps, {}, "ref" | "value">;
 type SliderRoot = ReturnType<typeof SliderRoot>;
 export default SliderRoot;

package/dist/components/slider/slider-thumb.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { ThumbProps } from '@zag-js/slider'
 
-  export interface SliderThumbBaseProps extends ThumbProps, PolymorphicProps<'div'> {}
+  export interface SliderThumbBaseProps extends ThumbProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface SliderThumbProps extends HTMLProps<'div'>, SliderThumbBaseProps {}
 </script>
 
@@ -13,12 +13,12 @@
   import { useSliderContext } from './use-slider-context'
   import SliderThumbPropsProvider from './slider-thumb-props-provider.svelte'
 
-  const props: SliderThumbProps = $props()
+  let { ref = $bindable(null), ...props }: SliderThumbProps = $props()
   const [thumbProps, localProps] = $derived(createSplitProps<ThumbProps>()(props, ['index', 'name']))
   const slider = useSliderContext()
   const mergedProps = $derived(mergeProps(slider().getThumbProps(thumbProps), localProps))
 </script>
 
 <SliderThumbPropsProvider value={thumbProps}>
-  <Ark as="div" {...mergedProps} />
+  <Ark as="div" bind:ref {...mergedProps} />
 </SliderThumbPropsProvider>

package/dist/components/slider/slider-thumb.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { HTMLProps, PolymorphicProps } from '../../types';
+import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { ThumbProps } from '@zag-js/slider';
-export interface SliderThumbBaseProps extends ThumbProps, PolymorphicProps<'div'> {
+export interface SliderThumbBaseProps extends ThumbProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface SliderThumbProps extends HTMLProps<'div'>, SliderThumbBaseProps {
 }
-declare const SliderThumb: import("svelte").Component<SliderThumbProps, {}, "">;
+declare const SliderThumb: import("svelte").Component<SliderThumbProps, {}, "ref">;
 type SliderThumb = ReturnType<typeof SliderThumb>;
 export default SliderThumb;

package/dist/components/slider/slider-track.svelte

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

package/dist/components/slider/slider-track.svelte.d.ts

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

package/dist/components/slider/slider-value-text.svelte

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

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

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

package/dist/components/splitter/splitter-panel.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 { PanelProps } from '@zag-js/splitter'
 
-  export interface SplitterPanelBaseProps extends PanelProps, PolymorphicProps<'div'> {}
+  export interface SplitterPanelBaseProps extends PanelProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface SplitterPanelProps extends Assign<HTMLProps<'div'>, SplitterPanelBaseProps> {}
 </script>
 
@@ -12,7 +12,7 @@
   import { Ark } from '../factory'
   import { useSplitterContext } from './use-splitter-context'
 
-  const props: SplitterPanelProps = $props()
+  let { ref = $bindable(null), ...props }: SplitterPanelProps = $props()
 
   const [splitterPanelProps, localProps] = $derived(createSplitProps<PanelProps>()(props, ['id']))
 
@@ -20,4 +20,4 @@
   const mergedProps = $derived(mergeProps(splitter().getPanelProps(splitterPanelProps), localProps))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/splitter/splitter-panel.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { PanelProps } from '@zag-js/splitter';
-export interface SplitterPanelBaseProps extends PanelProps, PolymorphicProps<'div'> {
+export interface SplitterPanelBaseProps extends PanelProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface SplitterPanelProps extends Assign<HTMLProps<'div'>, SplitterPanelBaseProps> {
 }
-declare const SplitterPanel: import("svelte").Component<SplitterPanelProps, {}, "">;
+declare const SplitterPanel: import("svelte").Component<SplitterPanelProps, {}, "ref">;
 type SplitterPanel = ReturnType<typeof SplitterPanel>;
 export default SplitterPanel;

package/dist/components/splitter/splitter-resize-trigger.svelte

@@ -1,8 +1,11 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { ResizeTriggerProps } from '@zag-js/splitter'
 
-  export interface SplitterResizeTriggerBaseProps extends ResizeTriggerProps, PolymorphicProps<'button'> {}
+  export interface SplitterResizeTriggerBaseProps
+    extends ResizeTriggerProps,
+      PolymorphicProps<'button'>,
+      RefAttribute {}
   export interface SplitterResizeTriggerProps extends Assign<HTMLProps<'button'>, SplitterResizeTriggerBaseProps> {}
 </script>
 
@@ -12,7 +15,7 @@
   import { Ark } from '../factory'
   import { useSplitterContext } from './use-splitter-context'
 
-  const props: SplitterResizeTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: SplitterResizeTriggerProps = $props()
 
   const [triggerProps, localProps] = $derived(createSplitProps<ResizeTriggerProps>()(props, ['disabled', 'id']))
 
@@ -20,4 +23,4 @@
   const mergedProps = $derived(mergeProps(splitter().getResizeTriggerProps(triggerProps), localProps))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/splitter/splitter-resize-trigger.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { ResizeTriggerProps } from '@zag-js/splitter';
-export interface SplitterResizeTriggerBaseProps extends ResizeTriggerProps, PolymorphicProps<'button'> {
+export interface SplitterResizeTriggerBaseProps extends ResizeTriggerProps, PolymorphicProps<'button'>, RefAttribute {
 }
 export interface SplitterResizeTriggerProps extends Assign<HTMLProps<'button'>, SplitterResizeTriggerBaseProps> {
 }
-declare const SplitterResizeTrigger: import("svelte").Component<SplitterResizeTriggerProps, {}, "">;
+declare const SplitterResizeTrigger: import("svelte").Component<SplitterResizeTriggerProps, {}, "ref">;
 type SplitterResizeTrigger = ReturnType<typeof SplitterResizeTrigger>;
 export default SplitterResizeTrigger;

package/dist/components/splitter/splitter-root-provider.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 { UseSplitterReturn } from './use-splitter.svelte'
 
-  export interface SplitterRootProviderBaseProps extends PolymorphicProps<'div'> {
+  export interface SplitterRootProviderBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     value: UseSplitterReturn
   }
   export interface SplitterRootProviderProps extends Assign<HTMLProps<'div'>, SplitterRootProviderBaseProps> {}
@@ -13,11 +13,11 @@
   import { Ark } from '../factory'
   import { SplitterProvider } from './use-splitter-context'
 
-  const { value, ...props }: SplitterRootProviderProps = $props()
+  let { ref = $bindable(null), value, ...props }: SplitterRootProviderProps = $props()
 
   const mergedProps = $derived(mergeProps(value().getRootProps(), props))
 
   SplitterProvider(value)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,10 +1,10 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseSplitterReturn } from './use-splitter.svelte';
-export interface SplitterRootProviderBaseProps extends PolymorphicProps<'div'> {
+export interface SplitterRootProviderBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     value: UseSplitterReturn;
 }
 export interface SplitterRootProviderProps extends Assign<HTMLProps<'div'>, SplitterRootProviderBaseProps> {
 }
-declare const SplitterRootProvider: import("svelte").Component<SplitterRootProviderProps, {}, "">;
+declare const SplitterRootProvider: import("svelte").Component<SplitterRootProviderProps, {}, "ref">;
 type SplitterRootProvider = ReturnType<typeof SplitterRootProvider>;
 export default SplitterRootProvider;

package/dist/components/splitter/splitter-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 { UseSplitterProps } from './use-splitter.svelte'
 
-  export interface SplitterRootBaseProps extends UseSplitterProps, PolymorphicProps<'div'> {}
+  export interface SplitterRootBaseProps extends UseSplitterProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface SplitterRootProps extends Assign<HTMLProps<'div'>, SplitterRootBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { SplitterProvider } from './use-splitter-context'
   import { useSplitter } from './use-splitter.svelte'
 
-  let { size = $bindable<number[]>(), ...props }: SplitterRootProps = $props()
+  let { ref = $bindable(null), size = $bindable<number[]>(), ...props }: SplitterRootProps = $props()
 
   const [useSplitterProps, localProps] = $derived(splitSplitterProps(props))
 
@@ -35,4 +35,4 @@
   SplitterProvider(splitter)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/splitter/splitter-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 { UseSplitterProps } from './use-splitter.svelte';
-export interface SplitterRootBaseProps extends UseSplitterProps, PolymorphicProps<'div'> {
+export interface SplitterRootBaseProps extends UseSplitterProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface SplitterRootProps extends Assign<HTMLProps<'div'>, SplitterRootBaseProps> {
 }
-declare const SplitterRoot: import("svelte").Component<SplitterRootProps, {}, "size">;
+declare const SplitterRoot: import("svelte").Component<SplitterRootProps, {}, "ref" | "size">;
 type SplitterRoot = ReturnType<typeof SplitterRoot>;
 export default SplitterRoot;

package/dist/components/steps/steps-completed-content.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 StepsCompletedContentBaseProps extends PolymorphicProps<'div'> {}
+  export interface StepsCompletedContentBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface StepsCompletedContentProps extends Assign<HTMLProps<'div'>, StepsCompletedContentBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory'
   import { useStepsContext } from './use-steps-context'
 
-  const props: StepsCompletedContentProps = $props()
+  let { ref = $bindable(null), ...props }: StepsCompletedContentProps = $props()
 
   const steps = useStepsContext()
   const mergedProps = $derived(mergeProps(steps().getContentProps({ index: steps().count }), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/steps/steps-completed-content.svelte.d.ts

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

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

@@ -1,8 +1,8 @@
 <script module lang="ts">
   import type { ItemProps } from '@zag-js/steps'
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface StepsContentBaseProps extends ItemProps, PolymorphicProps<'div'> {}
+  export interface StepsContentBaseProps extends ItemProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface StepsContentProps extends Assign<HTMLProps<'div'>, StepsContentBaseProps> {}
 </script>
 
@@ -12,11 +12,11 @@
   import { Ark } from '../factory'
   import { useStepsContext } from './use-steps-context'
 
-  const props: StepsContentProps = $props()
+  let { ref = $bindable(null), ...props }: StepsContentProps = $props()
   const [itemProps, localProps] = $derived(createSplitProps<ItemProps>()(props, ['index']))
 
   const steps = useStepsContext()
   const mergedProps = $derived(mergeProps(steps().getContentProps(itemProps), localProps))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,9 +1,9 @@
 import type { ItemProps } from '@zag-js/steps';
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface StepsContentBaseProps extends ItemProps, PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface StepsContentBaseProps extends ItemProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface StepsContentProps extends Assign<HTMLProps<'div'>, StepsContentBaseProps> {
 }
-declare const StepsContent: import("svelte").Component<StepsContentProps, {}, "">;
+declare const StepsContent: import("svelte").Component<StepsContentProps, {}, "ref">;
 type StepsContent = ReturnType<typeof StepsContent>;
 export default StepsContent;

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

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

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

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

@@ -1,8 +1,8 @@
 <script module lang="ts">
   import type { ItemProps } from '@zag-js/steps'
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface StepsItemBaseProps extends ItemProps, PolymorphicProps<'div'> {}
+  export interface StepsItemBaseProps extends ItemProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface StepsItemProps extends Assign<HTMLProps<'div'>, StepsItemBaseProps> {}
 </script>
 
@@ -14,7 +14,7 @@
   import { StepsItemProvider } from './use-steps-item-context'
   import { StepsItemPropsProvider } from './use-steps-item-props-context'
 
-  const props: StepsItemProps = $props()
+  let { ref = $bindable(null), ...props }: StepsItemProps = $props()
   const [itemProps, localProps] = $derived(createSplitProps<ItemProps>()(props, ['index']))
 
   const steps = useStepsContext()
@@ -25,4 +25,4 @@
   StepsItemProvider(() => itemState)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,9 +1,9 @@
 import type { ItemProps } from '@zag-js/steps';
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface StepsItemBaseProps extends ItemProps, PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface StepsItemBaseProps extends ItemProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface StepsItemProps extends Assign<HTMLProps<'div'>, StepsItemBaseProps> {
 }
-declare const StepsItem: import("svelte").Component<StepsItemProps, {}, "">;
+declare const StepsItem: import("svelte").Component<StepsItemProps, {}, "ref">;
 type StepsItem = ReturnType<typeof StepsItem>;
 export default StepsItem;

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

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

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

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

package/dist/components/steps/steps-next-trigger.svelte.d.ts

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

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

package/dist/components/steps/steps-prev-trigger.svelte.d.ts

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

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