@ark-ui/svelte 5.0.3 → 5.0.5

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;

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

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

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

package/dist/components/signature-pad/signature-pad-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 SignaturePadHiddenInputBaseProps extends PolymorphicProps<'input'>, HiddenInputProps {}
+  export interface SignaturePadHiddenInputBaseProps extends PolymorphicProps<'input'>, HiddenInputProps, RefAttribute {}
   export interface SignaturePadHiddenInputProps extends Assign<HTMLProps<'input'>, SignaturePadHiddenInputBaseProps> {}
 </script>
 
@@ -12,11 +12,11 @@
   import { createSplitProps } from '../../utils/create-split-props'
   import type { HiddenInputProps } from '@zag-js/signature-pad'
 
-  const props: SignaturePadHiddenInputProps = $props()
-  const [hiddenInputProps, localProps] = createSplitProps<HiddenInputProps>()(props, ['value'])
+  let { ref = $bindable(null), ...props }: SignaturePadHiddenInputProps = $props()
+  const [hiddenInputProps, localProps] = $derived(createSplitProps<HiddenInputProps>()(props, ['value']))
 
   const signaturePad = useSignaturePadContext()
   const mergedProps = $derived(mergeProps(signaturePad().getHiddenInputProps(hiddenInputProps), localProps))
 </script>
 
-<Ark as="input" {...mergedProps} />
+<Ark as="input" bind:ref {...mergedProps} />

package/dist/components/signature-pad/signature-pad-hidden-input.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface SignaturePadHiddenInputBaseProps extends PolymorphicProps<'input'>, HiddenInputProps {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface SignaturePadHiddenInputBaseProps extends PolymorphicProps<'input'>, HiddenInputProps, RefAttribute {
 }
 export interface SignaturePadHiddenInputProps extends Assign<HTMLProps<'input'>, SignaturePadHiddenInputBaseProps> {
 }
 import type { HiddenInputProps } from '@zag-js/signature-pad';
-declare const SignaturePadHiddenInput: import("svelte").Component<SignaturePadHiddenInputProps, {}, "">;
+declare const SignaturePadHiddenInput: import("svelte").Component<SignaturePadHiddenInputProps, {}, "ref">;
 type SignaturePadHiddenInput = ReturnType<typeof SignaturePadHiddenInput>;
 export default SignaturePadHiddenInput;

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

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

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

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

package/dist/components/signature-pad/signature-pad-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 { UseSignaturePadReturn } from './use-signature-pad.svelte';
-export interface SignaturePadRootProviderBaseProps extends PolymorphicProps<'div'> {
+export interface SignaturePadRootProviderBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     value: UseSignaturePadReturn;
 }
 export interface SignaturePadRootProviderProps extends Assign<HTMLProps<'div'>, SignaturePadRootProviderBaseProps> {
 }
-declare const SignaturePadRootProvider: import("svelte").Component<SignaturePadRootProviderProps, {}, "">;
+declare const SignaturePadRootProvider: import("svelte").Component<SignaturePadRootProviderProps, {}, "ref">;
 type SignaturePadRootProvider = ReturnType<typeof SignaturePadRootProvider>;
 export default SignaturePadRootProvider;

package/dist/components/signature-pad/signature-pad-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 { UseSignaturePadProps } from './use-signature-pad.svelte'
 
-  export interface SignaturePadRootBaseProps extends UseSignaturePadProps, PolymorphicProps<'div'> {}
+  export interface SignaturePadRootBaseProps extends UseSignaturePadProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface SignaturePadRootProps extends Assign<HTMLProps<'div'>, SignaturePadRootBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { useSignaturePad } from './use-signature-pad.svelte'
   import { SignaturePadProvider } from './use-signature-pad-context'
 
-  const props: SignaturePadRootProps = $props()
+  let { ref = $bindable(null), ...props }: SignaturePadRootProps = $props()
   const providedId = $props.id()
 
   const [useSignaturePadProps, localProps] = $derived(
@@ -42,4 +42,4 @@
   SignaturePadProvider(signaturePad)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/signature-pad/signature-pad-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 { UseSignaturePadProps } from './use-signature-pad.svelte';
-export interface SignaturePadRootBaseProps extends UseSignaturePadProps, PolymorphicProps<'div'> {
+export interface SignaturePadRootBaseProps extends UseSignaturePadProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface SignaturePadRootProps extends Assign<HTMLProps<'div'>, SignaturePadRootBaseProps> {
 }
-declare const SignaturePadRoot: import("svelte").Component<SignaturePadRootProps, {}, "">;
+declare const SignaturePadRoot: import("svelte").Component<SignaturePadRootProps, {}, "ref">;
 type SignaturePadRoot = ReturnType<typeof SignaturePadRoot>;
 export default SignaturePadRoot;

package/dist/components/signature-pad/signature-pad-segment.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 SignaturePadSegmentBaseProps extends PolymorphicProps<'svg'> {}
+  export interface SignaturePadSegmentBaseProps extends PolymorphicProps<'svg'>, RefAttribute {}
   export interface SignaturePadSegmentProps extends Assign<HTMLProps<'svg'>, SignaturePadSegmentBaseProps> {}
 </script>
 
@@ -10,7 +10,7 @@
   import { Ark } from '../factory'
   import { useSignaturePadContext } from './use-signature-pad-context'
 
-  const props: SignaturePadSegmentProps = $props()
+  let { ref = $bindable(null), ...props }: SignaturePadSegmentProps = $props()
 
   const signaturePad = useSignaturePadContext()
   const mergedProps = $derived(mergeProps(signaturePad().getSegmentProps(), props))
@@ -18,7 +18,7 @@
   const currentPath = $derived(signaturePad().currentPath)
 </script>
 
-<Ark as="svg" {...mergedProps}>
+<Ark as="svg" bind:ref {...mergedProps}>
   <title>Signature</title>
   {#each signaturePad().paths as path, i}
     <path {...signaturePad().getSegmentPathProps({ path })} />

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

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

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

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

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

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

package/dist/components/slider/slider-dragging-indicator.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface SliderDraggingIndicatorBaseProps extends PolymorphicProps<'span'> {}
+  export interface SliderDraggingIndicatorBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
   export interface SliderDraggingIndicatorProps extends HTMLProps<'span'>, SliderDraggingIndicatorBaseProps {}
 </script>
 
@@ -11,13 +11,13 @@
   import { useSliderContext } from './use-slider-context'
   import { useSliderThumbPropsContext } from './use-slider-thumb-props-context'
 
-  const props: SliderDraggingIndicatorProps = $props()
+  let { ref = $bindable(null), ...props }: SliderDraggingIndicatorProps = $props()
   const slider = useSliderContext()
   const { index } = useSliderThumbPropsContext()
   const mergedProps = $derived(mergeProps(slider().getDraggingIndicatorProps({ index }), props))
 </script>
 
-<Ark as="span" {...mergedProps}>
+<Ark as="span" bind:ref {...mergedProps}>
   {#if props.children}
     {@render props.children()}
   {:else}

package/dist/components/slider/slider-dragging-indicator.svelte.d.ts

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

package/dist/components/slider/slider-hidden-input.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface SliderHiddenInputBaseProps extends PolymorphicProps<'input'> {}
+  export interface SliderHiddenInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {}
   export interface SliderHiddenInputProps extends HTMLProps<'input'>, SliderHiddenInputBaseProps {}
 </script>
 
@@ -11,10 +11,10 @@
   import { useSliderContext } from './use-slider-context'
   import { useSliderThumbPropsContext } from './use-slider-thumb-props-context'
 
-  const props: SliderHiddenInputProps = $props()
+  let { ref = $bindable(null), ...props }: SliderHiddenInputProps = $props()
   const slider = useSliderContext()
   const thumbProps = useSliderThumbPropsContext()
   const mergedProps = $derived(mergeProps(slider().getHiddenInputProps(thumbProps), props))
 </script>
 
-<Ark as="input" {...mergedProps} />
+<Ark as="input" bind:ref {...mergedProps} />

package/dist/components/slider/slider-hidden-input.svelte.d.ts

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

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

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

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

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

package/dist/components/slider/slider-marker-group.svelte

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

package/dist/components/slider/slider-marker-group.svelte.d.ts

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

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

@@ -1,8 +1,8 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { MarkerProps } from '@zag-js/slider'
 
-  export interface SliderMarkerBaseProps extends MarkerProps, PolymorphicProps<'span'> {}
+  export interface SliderMarkerBaseProps extends MarkerProps, PolymorphicProps<'span'>, RefAttribute {}
   export interface SliderMarkerProps extends HTMLProps<'span'>, SliderMarkerBaseProps {}
 </script>
 
@@ -12,10 +12,11 @@
   import { Ark } from '../factory'
   import { useSliderContext } from './use-slider-context'
 
-  const props: SliderMarkerProps = $props()
-  const [markerProps, localProps] = createSplitProps<MarkerProps>()(props, ['value'])
+  let { ref = $bindable(null), ...props }: SliderMarkerProps = $props()
+  const [markerProps, localProps] = $derived(createSplitProps<MarkerProps>()(props, ['value']))
+
   const slider = useSliderContext()
   const mergedProps = $derived(mergeProps(slider().getMarkerProps(markerProps), localProps))
 </script>
 
-<Ark as="span" {...mergedProps} />
+<Ark as="span" bind:ref {...mergedProps} />

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

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

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

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

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

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

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

@@ -1,12 +1,12 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps } from '../../types'
+  import type { Assign, HTMLProps, RefAttribute } from '../../types'
   import type { UseSliderReturn } from './use-slider.svelte'
 
   interface RootProviderProps {
     value: UseSliderReturn
   }
 
-  export interface SliderRootProviderBaseProps extends RootProviderProps {}
+  export interface SliderRootProviderBaseProps extends RootProviderProps, RefAttribute {}
   export interface SliderRootProviderProps extends Assign<HTMLProps<'div'>, SliderRootProviderBaseProps> {}
 </script>
 
@@ -15,10 +15,10 @@
   import { Ark } from '../factory'
   import { SliderProvider } from './use-slider-context'
 
-  const { value: slider, ...localProps }: SliderRootProviderProps = $props()
+  let { ref = $bindable(null), value: slider, ...localProps }: SliderRootProviderProps = $props()
   const mergedProps = $derived(mergeProps(slider().getRootProps(), localProps))
 
   SliderProvider(slider)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,12 +1,12 @@
-import type { Assign, HTMLProps } from '../../types';
+import type { Assign, HTMLProps, RefAttribute } from '../../types';
 import type { UseSliderReturn } from './use-slider.svelte';
 interface RootProviderProps {
     value: UseSliderReturn;
 }
-export interface SliderRootProviderBaseProps extends RootProviderProps {
+export interface SliderRootProviderBaseProps extends RootProviderProps, RefAttribute {
 }
 export interface SliderRootProviderProps extends Assign<HTMLProps<'div'>, SliderRootProviderBaseProps> {
 }
-declare const SliderRootProvider: import("svelte").Component<SliderRootProviderProps, {}, "">;
+declare const SliderRootProvider: import("svelte").Component<SliderRootProviderProps, {}, "ref">;
 type SliderRootProvider = ReturnType<typeof SliderRootProvider>;
 export default SliderRootProvider;