@ark-ui/svelte 5.0.4 → 5.0.5

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

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

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

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

package/dist/components/steps/steps-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 { UseStepsProps } from './use-steps.svelte'
 
-  export interface StepsRootBaseProps extends UseStepsProps, PolymorphicProps<'div'> {}
+  export interface StepsRootBaseProps extends UseStepsProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface StepsRootProps extends Assign<HTMLProps<'div'>, StepsRootBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { useSteps } from './use-steps.svelte'
   import { StepsProvider } from './use-steps-context'
 
-  let { step = $bindable(), ...props }: StepsRootProps = $props()
+  let { ref = $bindable(null), step = $bindable(), ...props }: StepsRootProps = $props()
   const providedId = $props.id()
 
   const [useStepsProps, localProps] = $derived(
@@ -46,4 +46,4 @@
   StepsProvider(stepsApi)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/steps/steps-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 { UseStepsProps } from './use-steps.svelte';
-export interface StepsRootBaseProps extends UseStepsProps, PolymorphicProps<'div'> {
+export interface StepsRootBaseProps extends UseStepsProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface StepsRootProps extends Assign<HTMLProps<'div'>, StepsRootBaseProps> {
 }
-declare const StepsRoot: import("svelte").Component<StepsRootProps, {}, "step">;
+declare const StepsRoot: import("svelte").Component<StepsRootProps, {}, "ref" | "step">;
 type StepsRoot = ReturnType<typeof StepsRoot>;
 export default StepsRoot;

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

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

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

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

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

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

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

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

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

package/dist/components/switch/switch-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 SwitchHiddenInputBaseProps extends PolymorphicProps<'input'> {}
+  export interface SwitchHiddenInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {}
   export interface SwitchHiddenInputProps extends Assign<HTMLProps<'input'>, SwitchHiddenInputBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory'
   import { useSwitchContext } from './use-switch-context'
 
-  const props: SwitchHiddenInputProps = $props()
+  let { ref = $bindable(null), ...props }: SwitchHiddenInputProps = $props()
 
   const switchMachine = useSwitchContext()
   const mergedProps = $derived(mergeProps(switchMachine().getHiddenInputProps(), props))
 </script>
 
-<Ark as="input" {...mergedProps} />
+<Ark as="input" bind:ref {...mergedProps} />

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

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

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

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

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

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

package/dist/components/switch/switch-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 { UseSwitchReturn } from './use-switch.svelte';
-export interface SwitchRootProviderBaseProps extends PolymorphicProps<'label'> {
+export interface SwitchRootProviderBaseProps extends PolymorphicProps<'label'>, RefAttribute {
     value: UseSwitchReturn;
 }
 export interface SwitchRootProviderProps extends Assign<HTMLProps<'label'>, SwitchRootProviderBaseProps> {
 }
-declare const SwitchRootProvider: import("svelte").Component<SwitchRootProviderProps, {}, "">;
+declare const SwitchRootProvider: import("svelte").Component<SwitchRootProviderProps, {}, "ref">;
 type SwitchRootProvider = ReturnType<typeof SwitchRootProvider>;
 export default SwitchRootProvider;

package/dist/components/switch/switch-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 { UseSwitchProps } from './use-switch.svelte'
 
-  export interface SwitchRootBaseProps extends UseSwitchProps, PolymorphicProps<'label'> {}
+  export interface SwitchRootBaseProps extends UseSwitchProps, PolymorphicProps<'label'>, RefAttribute {}
   export interface SwitchRootProps extends Assign<HTMLProps<'label'>, SwitchRootBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { useSwitch } from './use-switch.svelte'
   import { SwitchProvider } from './use-switch-context'
 
-  let { checked = $bindable(), ...props }: SwitchRootProps = $props()
+  let { ref = $bindable(null), checked = $bindable(), ...props }: SwitchRootProps = $props()
   const providedId = $props.id()
 
   const [useSwitchProps, localProps] = $derived(
@@ -50,4 +50,4 @@
   SwitchProvider(switchMachine)
 </script>
 
-<Ark as="label" {...mergedProps} />
+<Ark as="label" bind:ref {...mergedProps} />

package/dist/components/switch/switch-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 { UseSwitchProps } from './use-switch.svelte';
-export interface SwitchRootBaseProps extends UseSwitchProps, PolymorphicProps<'label'> {
+export interface SwitchRootBaseProps extends UseSwitchProps, PolymorphicProps<'label'>, RefAttribute {
 }
 export interface SwitchRootProps extends Assign<HTMLProps<'label'>, SwitchRootBaseProps> {
 }
-declare const SwitchRoot: import("svelte").Component<SwitchRootProps, {}, "checked">;
+declare const SwitchRoot: import("svelte").Component<SwitchRootProps, {}, "ref" | "checked">;
 type SwitchRoot = ReturnType<typeof SwitchRoot>;
 export default SwitchRoot;

package/dist/components/switch/switch-thumb.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 SwitchThumbBaseProps extends PolymorphicProps<'span'> {}
+  export interface SwitchThumbBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
   export interface SwitchThumbProps extends Assign<HTMLProps<'span'>, SwitchThumbBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory'
   import { useSwitchContext } from './use-switch-context'
 
-  const props: SwitchThumbProps = $props()
+  let { ref = $bindable(null), ...props }: SwitchThumbProps = $props()
 
   const switchMachine = useSwitchContext()
   const mergedProps = $derived(mergeProps(switchMachine().getThumbProps(), props))
 </script>
 
-<Ark as="span" {...mergedProps} />
+<Ark as="span" bind:ref {...mergedProps} />

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

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

package/dist/components/tabs/tabs-content.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 { ContentProps } from '@zag-js/tabs'
 
-  export interface TabsContentBaseProps extends ContentProps, PolymorphicProps<'div'> {}
+  export interface TabsContentBaseProps extends ContentProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface TabsContentProps extends Assign<HTMLProps<'div'>, TabsContentBaseProps> {}
 </script>
 
@@ -14,8 +14,8 @@
   import { PresenceProvider, usePresence, type UsePresenceProps } from '../presence'
   import { useTabsContext } from './use-tabs-context'
 
-  const props: TabsContentProps = $props()
-  const [contentProps, localProps] = createSplitProps<ContentProps>()(props, ['value'])
+  let { ref = $bindable(null), ...props }: TabsContentProps = $props()
+  const [contentProps, localProps] = $derived(createSplitProps<ContentProps>()(props, ['value']))
 
   const tabs = useTabsContext()
   const renderStrategyProps = useRenderStrategyPropsContext()
@@ -31,8 +31,12 @@
   const mergedProps = $derived(mergeProps(tabs().getContentProps(contentProps), localProps))
 
   PresenceProvider(presence)
+
+  function setNode(node: Element | null) {
+    presence().setNode(node)
+  }
 </script>
 
 {#if !presence().unmounted}
-  <Ark as="div" {...mergedProps} />
+  <Ark as="div" bind:ref {...mergedProps} {@attach setNode} />
 {/if}

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

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

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

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

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

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

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

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

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

@@ -1,12 +1,16 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { UseTabsReturn } from './use-tabs.svelte'
 
   interface RootProviderProps {
     value: UseTabsReturn
   }
 
-  export interface TabsRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RenderStrategyProps {}
+  export interface TabsRootProviderBaseProps
+    extends RootProviderProps,
+      PolymorphicProps<'div'>,
+      RenderStrategyProps,
+      RefAttribute {}
   export interface TabsRootProviderProps extends Assign<HTMLProps<'div'>, TabsRootProviderBaseProps> {}
 </script>
 
@@ -21,7 +25,7 @@
     type RenderStrategyProps,
   } from '../../utils/render-strategy'
 
-  const props: TabsRootProviderProps = $props()
+  let { ref = $bindable(null), ...props }: TabsRootProviderProps = $props()
 
   const [renderStrategyProps, tabsProps] = $derived(splitRenderStrategyProps(props))
   const [rootProviderProps, localProps] = $derived(createSplitProps<RootProviderProps>()(tabsProps, ['value']))
@@ -32,4 +36,4 @@
   RenderStrategyPropsProvider(() => renderStrategyProps)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,13 +1,13 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseTabsReturn } from './use-tabs.svelte';
 interface RootProviderProps {
     value: UseTabsReturn;
 }
-export interface TabsRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RenderStrategyProps {
+export interface TabsRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RenderStrategyProps, RefAttribute {
 }
 export interface TabsRootProviderProps extends Assign<HTMLProps<'div'>, TabsRootProviderBaseProps> {
 }
 import { type RenderStrategyProps } from '../../utils/render-strategy';
-declare const TabsRootProvider: import("svelte").Component<TabsRootProviderProps, {}, "">;
+declare const TabsRootProvider: import("svelte").Component<TabsRootProviderProps, {}, "ref">;
 type TabsRootProvider = ReturnType<typeof TabsRootProvider>;
 export default TabsRootProvider;

package/dist/components/tabs/tabs-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 { UseTabsProps } from './use-tabs.svelte'
 
-  export interface TabsRootBaseProps extends UseTabsProps, RenderStrategyProps, PolymorphicProps<'div'> {}
+  export interface TabsRootBaseProps extends UseTabsProps, RenderStrategyProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface TabsRootProps extends Assign<HTMLProps<'div'>, TabsRootBaseProps> {}
 </script>
 
@@ -18,7 +18,7 @@
   import { TabsProvider } from './use-tabs-context'
   import { useTabs } from './use-tabs.svelte'
 
-  let { value = $bindable(), ...props }: TabsRootProps = $props()
+  let { ref = $bindable(null), value = $bindable(), ...props }: TabsRootProps = $props()
 
   const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props)
 
@@ -49,7 +49,7 @@
     value,
     onValueChange(details) {
       useTabsProps.onValueChange?.(details)
-      value = details.value
+      if (value !== undefined) value = details.value
     },
   }))
 
@@ -60,4 +60,4 @@
   RenderStrategyPropsProvider(() => renderStrategyProps)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,10 +1,10 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseTabsProps } from './use-tabs.svelte';
-export interface TabsRootBaseProps extends UseTabsProps, RenderStrategyProps, PolymorphicProps<'div'> {
+export interface TabsRootBaseProps extends UseTabsProps, RenderStrategyProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface TabsRootProps extends Assign<HTMLProps<'div'>, TabsRootBaseProps> {
 }
 import { type RenderStrategyProps } from '../../utils/render-strategy';
-declare const TabsRoot: import("svelte").Component<TabsRootProps, {}, "value">;
+declare const TabsRoot: import("svelte").Component<TabsRootProps, {}, "ref" | "value">;
 type TabsRoot = ReturnType<typeof TabsRoot>;
 export default TabsRoot;