@ark-ui/svelte 5.0.4 → 5.1.0

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import { mergeProps } from '@zag-js/svelte'
   import { Ark } from '../factory'
   import { TimerProvider } from './use-timer-context'
@@ -9,14 +9,14 @@
     value: UseTimerReturn
   }
 
-  export interface TimerRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {}
+  export interface TimerRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface TimerRootProviderProps extends HTMLProps<'div'>, TimerRootProviderBaseProps {}
 
-  const props: TimerRootProviderProps = $props()
+  let { ref = $bindable(null), ...props }: TimerRootProviderProps = $props()
   const { value: timer, ...localProps } = props
   const mergedProps = $derived(mergeProps(timer().getRootProps(), localProps))
 
   TimerProvider(timer)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,12 +1,12 @@
-import type { HTMLProps, PolymorphicProps } from '../../types';
+import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseTimerReturn } from './use-timer.svelte';
 interface RootProviderProps {
     value: UseTimerReturn;
 }
-export interface TimerRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {
+export interface TimerRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface TimerRootProviderProps extends HTMLProps<'div'>, TimerRootProviderBaseProps {
 }
-declare const TimerRootProvider: import("svelte").Component<TimerRootProviderProps, {}, "">;
+declare const TimerRootProvider: import("svelte").Component<TimerRootProviderProps, {}, "ref">;
 type TimerRootProvider = ReturnType<typeof TimerRootProvider>;
 export default TimerRootProvider;

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types'
   import { createSplitProps } from '../../utils/create-split-props'
   import { mergeProps, reflect } from '@zag-js/svelte'
   import { Ark } from '../factory'
@@ -7,10 +7,10 @@
   import type { UseTimerProps } from './use-timer.svelte'
   import { useTimer } from './use-timer.svelte'
 
-  export interface TimerRootBaseProps extends Optional<UseTimerProps, 'id'>, PolymorphicProps<'div'> {}
+  export interface TimerRootBaseProps extends Optional<UseTimerProps, 'id'>, PolymorphicProps<'div'>, RefAttribute {}
   export interface TimerRootProps extends Assign<HTMLProps<'div'>, TimerRootBaseProps> {}
 
-  const props: TimerRootProps = $props()
+  let { ref = $bindable(null), ...props }: TimerRootProps = $props()
   const providedId = $props.id()
 
   const [useTimerProps, localProps] = $derived(
@@ -38,4 +38,4 @@
   TimerProvider(timer)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/timer/timer-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 { UseTimerProps } from './use-timer.svelte';
-export interface TimerRootBaseProps extends Optional<UseTimerProps, 'id'>, PolymorphicProps<'div'> {
+export interface TimerRootBaseProps extends Optional<UseTimerProps, 'id'>, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface TimerRootProps extends Assign<HTMLProps<'div'>, TimerRootBaseProps> {
 }
-declare const TimerRoot: import("svelte").Component<TimerRootProps, {}, "">;
+declare const TimerRoot: import("svelte").Component<TimerRootProps, {}, "ref">;
 type TimerRoot = ReturnType<typeof TimerRoot>;
 export default TimerRoot;

package/dist/components/timer/timer-separator.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import { mergeProps } from '@zag-js/svelte'
   import { Ark } from '../factory'
   import { useTimerContext } from './use-timer-context'
 
-  export interface TimerSeparatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface TimerSeparatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface TimerSeparatorProps extends HTMLProps<'div'>, TimerSeparatorBaseProps {}
 
-  const props: TimerSeparatorProps = $props()
+  let { ref = $bindable(null), ...props }: TimerSeparatorProps = $props()
   const timer = useTimerContext()
   const mergedProps = $derived(mergeProps(timer().getSeparatorProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

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

package/dist/components/toast/toast-action-trigger.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
   import { mergeProps } from '@zag-js/svelte'
   import { Ark } from '../factory/index.js'
   import { useToastContext } from './use-toast-context.js'
 
-  export interface ToastActionTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface ToastActionTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
 
   export interface ToastActionTriggerProps extends Assign<HTMLProps<'button'>, ToastActionTriggerBaseProps> {}
 
-  const props: ToastActionTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: ToastActionTriggerProps = $props()
 
   const toast = useToastContext()
   const mergedProps = $derived(mergeProps(toast().getActionTriggerProps(), props))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/toast/toast-action-trigger.svelte.d.ts

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

package/dist/components/toast/toast-close-trigger.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
   import { mergeProps } from '@zag-js/svelte'
   import { Ark } from '../factory/index.js'
   import { useToastContext } from './use-toast-context.js'
 
-  export interface ToastCloseTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface ToastCloseTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
 
   export interface ToastCloseTriggerProps extends Assign<HTMLProps<'button'>, ToastCloseTriggerBaseProps> {}
 
-  const props: ToastCloseTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: ToastCloseTriggerProps = $props()
 
   const toast = useToastContext()
   const mergedProps = $derived(mergeProps(toast().getCloseTriggerProps(), props))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/toast/toast-close-trigger.svelte.d.ts

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

package/dist/components/toast/toast-description.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
   import { mergeProps } from '@zag-js/svelte'
   import { Ark } from '../factory/index.js'
   import { useToastContext } from './use-toast-context.js'
 
-  export interface ToastDescriptionBaseProps extends PolymorphicProps<'div'> {}
+  export interface ToastDescriptionBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
 
   export interface ToastDescriptionProps extends Assign<HTMLProps<'div'>, ToastDescriptionBaseProps> {}
 
-  const props: ToastDescriptionProps = $props()
+  let { ref = $bindable(null), ...props }: ToastDescriptionProps = $props()
 
   const toast = useToastContext()
   const mergedProps = $derived(mergeProps(toast().getDescriptionProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/toast/toast-description.svelte.d.ts

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

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

@@ -1,19 +1,19 @@
 <script lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
   import { mergeProps } from '@zag-js/svelte'
   import { Ark } from '../factory/index.js'
   import { useToastContext } from './use-toast-context.js'
 
-  export interface ToastRootBaseProps extends PolymorphicProps<'div'> {}
+  export interface ToastRootBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface ToastRootProps extends Assign<HTMLProps<'div'>, ToastRootBaseProps> {}
 
-  const props: ToastRootProps = $props()
+  let { ref = $bindable(null), ...props }: ToastRootProps = $props()
 
   const toast = useToastContext()
   const mergedProps = $derived(mergeProps(toast().getRootProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps}>
+<Ark as="div" bind:ref {...mergedProps}>
   <div {...toast().getGhostBeforeProps()}></div>
   {@render props.children?.()}
   <div {...toast().getGhostAfterProps()}></div>

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

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

package/dist/components/toast/toast-title.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
   import { mergeProps } from '@zag-js/svelte'
   import { Ark } from '../factory/index.js'
   import { useToastContext } from './use-toast-context.js'
 
-  export interface ToastTitleBaseProps extends PolymorphicProps<'div'> {}
+  export interface ToastTitleBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
 
   export interface ToastTitleProps extends Assign<HTMLProps<'div'>, ToastTitleBaseProps> {}
 
-  const props: ToastTitleProps = $props()
+  let { ref = $bindable(null), ...props }: ToastTitleProps = $props()
 
   const toast = useToastContext()
   const mergedProps = $derived(mergeProps(toast().getTitleProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/toast/toast-title.svelte.d.ts

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

package/dist/components/toast/toaster.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Accessor, Assign, HTMLProps } from '../../types.js'
+  import type { Accessor, Assign, HTMLProps, RefAttribute } from '../../types.js'
   import { mergeProps, normalizeProps, useMachine } from '@zag-js/svelte'
   import * as toast from '@zag-js/toast'
   import type { Snippet } from 'svelte'
@@ -8,7 +8,7 @@
   import type { CreateToasterReturn } from './create-toaster.js'
   import ToasterItem from './toaster-item.svelte'
 
-  export interface ToasterBaseProps extends Omit<toast.GroupProps, 'store' | 'id'> {
+  export interface ToasterBaseProps extends Omit<toast.GroupProps, 'store' | 'id'>, RefAttribute {
     /**
      * The toaster instance.
      */
@@ -22,7 +22,7 @@
   export interface ToasterProps extends Assign<HTMLProps<'div'>, ToasterBaseProps> {}
 
   const id = $props.id()
-  let { toaster, children, ...otherProps }: ToasterProps = $props()
+  let { ref = $bindable(null), toaster, children, ...otherProps }: ToasterProps = $props()
 
   const locale = useLocaleContext()
   const env = useEnvironmentContext()
@@ -42,7 +42,7 @@
   const mergedProps = $derived(mergeProps(api.getGroupProps(), otherProps))
 </script>
 
-<Ark as="div" {...mergedProps}>
+<Ark as="div" bind:ref {...mergedProps}>
   {#each toasts as toast, index (toast.id)}
     {@const toastFn = () => toast}
     <ToasterItem value={toastFn} parent={service} {index}>

package/dist/components/toast/toaster.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Accessor, Assign, HTMLProps } from '../../types.js';
+import type { Accessor, Assign, HTMLProps, RefAttribute } from '../../types.js';
 import * as toast from '@zag-js/toast';
 import type { Snippet } from 'svelte';
 import type { CreateToasterReturn } from './create-toaster.js';
-export interface ToasterBaseProps extends Omit<toast.GroupProps, 'store' | 'id'> {
+export interface ToasterBaseProps extends Omit<toast.GroupProps, 'store' | 'id'>, RefAttribute {
     /**
      * The toaster instance.
      */
@@ -14,6 +14,6 @@ export interface ToasterBaseProps extends Omit<toast.GroupProps, 'store' | 'id'>
 }
 export interface ToasterProps extends Assign<HTMLProps<'div'>, ToasterBaseProps> {
 }
-declare const Toaster: import("svelte").Component<ToasterProps, {}, "">;
+declare const Toaster: import("svelte").Component<ToasterProps, {}, "ref">;
 type Toaster = ReturnType<typeof Toaster>;
 export default Toaster;

package/dist/components/toggle/toggle-indicator.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 { Snippet } from 'svelte'
 
-  export interface ToggleIndicatorBaseProps extends PolymorphicProps<'div'> {
+  export interface ToggleIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     /**
      * The fallback content to render when the toggle is not pressed.
      */
@@ -17,13 +17,13 @@
   import { Ark } from '../factory'
   import { useToggleContext } from './use-toggle-context'
 
-  let { children, fallback, ...props }: ToggleIndicatorProps = $props()
+  let { ref = $bindable(null), children, fallback, ...props }: ToggleIndicatorProps = $props()
 
   const toggle = useToggleContext()
   const mergedProps = $derived(mergeProps(toggle().getIndicatorProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps}>
+<Ark as="div" bind:ref {...mergedProps}>
   {#if toggle().pressed}
     {@render children?.()}
   {:else if fallback}

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

@@ -1,6 +1,6 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { Snippet } from 'svelte';
-export interface ToggleIndicatorBaseProps extends PolymorphicProps<'div'> {
+export interface ToggleIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     /**
      * The fallback content to render when the toggle is not pressed.
      */
@@ -8,6 +8,6 @@ export interface ToggleIndicatorBaseProps extends PolymorphicProps<'div'> {
 }
 export interface ToggleIndicatorProps extends Assign<HTMLProps<'div'>, ToggleIndicatorBaseProps> {
 }
-declare const ToggleIndicator: import("svelte").Component<ToggleIndicatorProps, {}, "">;
+declare const ToggleIndicator: import("svelte").Component<ToggleIndicatorProps, {}, "ref">;
 type ToggleIndicator = ReturnType<typeof ToggleIndicator>;
 export default ToggleIndicator;

package/dist/components/toggle/toggle-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 { UseToggleProps } from './use-toggle.svelte'
 
-  export interface ToggleRootBaseProps extends UseToggleProps, PolymorphicProps<'button'> {}
+  export interface ToggleRootBaseProps extends UseToggleProps, PolymorphicProps<'button'>, RefAttribute {}
   export interface ToggleRootProps extends Assign<HTMLProps<'button'>, ToggleRootBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { useToggle } from './use-toggle.svelte'
   import { ToggleProvider } from './use-toggle-context'
 
-  let { pressed = $bindable<boolean>(), ...props }: ToggleRootProps = $props()
+  let { ref = $bindable(null), pressed = $bindable<boolean>(), ...props }: ToggleRootProps = $props()
 
   const [useToggleProps, localProps] = $derived(
     createSplitProps<UseToggleProps>()(props, ['pressed', 'defaultPressed', 'disabled', 'onPressedChange']),
@@ -34,4 +34,4 @@
   ToggleProvider(toggle)
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/toggle/toggle-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 { UseToggleProps } from './use-toggle.svelte';
-export interface ToggleRootBaseProps extends UseToggleProps, PolymorphicProps<'button'> {
+export interface ToggleRootBaseProps extends UseToggleProps, PolymorphicProps<'button'>, RefAttribute {
 }
 export interface ToggleRootProps extends Assign<HTMLProps<'button'>, ToggleRootBaseProps> {
 }
-declare const ToggleRoot: import("svelte").Component<ToggleRootProps, {}, "pressed">;
+declare const ToggleRoot: import("svelte").Component<ToggleRootProps, {}, "ref" | "pressed">;
 type ToggleRoot = ReturnType<typeof ToggleRoot>;
 export default ToggleRoot;

package/dist/components/toggle-group/toggle-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/toggle-group'
 
-  export interface ToggleGroupItemBaseProps extends ItemProps, PolymorphicProps<'button'> {}
+  export interface ToggleGroupItemBaseProps extends ItemProps, PolymorphicProps<'button'>, RefAttribute {}
   export interface ToggleGroupItemProps extends Assign<HTMLProps<'button'>, ToggleGroupItemBaseProps> {}
 </script>
 
@@ -12,7 +12,7 @@
   import { Ark } from '../factory'
   import { useToggleGroupContext } from './use-toggle-group-context'
 
-  const props: ToggleGroupItemProps = $props()
+  let { ref = $bindable(null), ...props }: ToggleGroupItemProps = $props()
 
   const [itemProps, localProps] = $derived(createSplitProps<ItemProps>()(props, ['value', 'disabled']))
 
@@ -20,4 +20,4 @@
   const mergedProps = $derived(mergeProps(toggleGroup().getItemProps(itemProps), localProps))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/toggle-group/toggle-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/toggle-group';
-export interface ToggleGroupItemBaseProps extends ItemProps, PolymorphicProps<'button'> {
+export interface ToggleGroupItemBaseProps extends ItemProps, PolymorphicProps<'button'>, RefAttribute {
 }
 export interface ToggleGroupItemProps extends Assign<HTMLProps<'button'>, ToggleGroupItemBaseProps> {
 }
-declare const ToggleGroupItem: import("svelte").Component<ToggleGroupItemProps, {}, "">;
+declare const ToggleGroupItem: import("svelte").Component<ToggleGroupItemProps, {}, "ref">;
 type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;
 export default ToggleGroupItem;

package/dist/components/toggle-group/toggle-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 { UseToggleGroupReturn } from './use-toggle-group.svelte'
 
   interface RootProviderProps {
     value: UseToggleGroupReturn
   }
 
-  export interface ToggleGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {}
+  export interface ToggleGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface ToggleGroupRootProviderProps extends Assign<HTMLProps<'div'>, ToggleGroupRootProviderBaseProps> {}
 </script>
 
@@ -15,11 +15,11 @@
   import { Ark } from '../factory'
   import { ToggleGroupProvider } from './use-toggle-group-context'
 
-  let { value, ...props }: ToggleGroupRootProviderProps = $props()
+  let { ref = $bindable(null), value, ...props }: ToggleGroupRootProviderProps = $props()
 
   const mergedProps = $derived(mergeProps(value().getRootProps(), props))
 
   ToggleGroupProvider(value)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/toggle-group/toggle-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 { UseToggleGroupReturn } from './use-toggle-group.svelte';
 interface RootProviderProps {
     value: UseToggleGroupReturn;
 }
-export interface ToggleGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {
+export interface ToggleGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface ToggleGroupRootProviderProps extends Assign<HTMLProps<'div'>, ToggleGroupRootProviderBaseProps> {
 }
-declare const ToggleGroupRootProvider: import("svelte").Component<ToggleGroupRootProviderProps, {}, "">;
+declare const ToggleGroupRootProvider: import("svelte").Component<ToggleGroupRootProviderProps, {}, "ref">;
 type ToggleGroupRootProvider = ReturnType<typeof ToggleGroupRootProvider>;
 export default ToggleGroupRootProvider;

package/dist/components/toggle-group/toggle-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 { UseToggleGroupProps } from './use-toggle-group.svelte'
 
-  export interface ToggleGroupRootBaseProps extends UseToggleGroupProps, PolymorphicProps<'div'> {}
+  export interface ToggleGroupRootBaseProps extends UseToggleGroupProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface ToggleGroupRootProps extends Assign<HTMLProps<'div'>, ToggleGroupRootBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { ToggleGroupProvider } from './use-toggle-group-context'
   import { useToggleGroup } from './use-toggle-group.svelte'
 
-  let { value = $bindable<string[]>(), ...props }: ToggleGroupRootProps = $props()
+  let { ref = $bindable(null), value = $bindable<string[]>(), ...props }: ToggleGroupRootProps = $props()
 
   const [useToggleGroupProps, localProps] = $derived(
     createSplitProps<UseToggleGroupProps>()(props, [
@@ -39,7 +39,7 @@
     value,
     onValueChange(details) {
       useToggleGroupProps.onValueChange?.(details)
-      if (value != null) value = details.value
+      if (value !== undefined) value = details.value
     },
   }))
 
@@ -49,4 +49,4 @@
   ToggleGroupProvider(toggleGroup)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

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

package/dist/components/tooltip/tooltip-arrow-tip.svelte.d.ts

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