@ark-ui/svelte 5.0.4 → 5.0.5

package/dist/components/tabs/tabs-trigger.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 { TriggerProps } from '@zag-js/tabs'
 
-  export interface TabsTriggerBaseProps extends TriggerProps, PolymorphicProps<'button'> {}
+  export interface TabsTriggerBaseProps extends TriggerProps, PolymorphicProps<'button'>, RefAttribute {}
   export interface TabsTriggerProps extends Assign<HTMLProps<'button'>, TabsTriggerBaseProps> {}
 </script>
 
@@ -12,10 +12,10 @@
   import { Ark } from '../factory'
   import { useTabsContext } from './use-tabs-context'
 
-  const props: TabsTriggerProps = $props()
-  const [triggerProps, localProps] = createSplitProps<TriggerProps>()(props, ['value', 'disabled'])
+  let { ref = $bindable(null), ...props }: TabsTriggerProps = $props()
+  const [triggerProps, localProps] = $derived(createSplitProps<TriggerProps>()(props, ['value', 'disabled']))
   const tabs = useTabsContext()
   const mergedProps = $derived(mergeProps(tabs().getTriggerProps(triggerProps), localProps))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/tabs/tabs-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 { TriggerProps } from '@zag-js/tabs';
-export interface TabsTriggerBaseProps extends TriggerProps, PolymorphicProps<'button'> {
+export interface TabsTriggerBaseProps extends TriggerProps, PolymorphicProps<'button'>, RefAttribute {
 }
 export interface TabsTriggerProps extends Assign<HTMLProps<'button'>, TabsTriggerBaseProps> {
 }
-declare const TabsTrigger: import("svelte").Component<TabsTriggerProps, {}, "">;
+declare const TabsTrigger: import("svelte").Component<TabsTriggerProps, {}, "ref">;
 type TabsTrigger = ReturnType<typeof TabsTrigger>;
 export default TabsTrigger;

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

package/dist/components/tags-input/tags-input-clear-trigger.svelte.d.ts

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

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

package/dist/components/tags-input/tags-input-control.svelte.d.ts

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

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

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

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

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

package/dist/components/tags-input/tags-input-input.svelte.d.ts

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

package/dist/components/tags-input/tags-input-item-delete-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 TagsInputItemDeleteTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface TagsInputItemDeleteTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
   export interface TagsInputItemDeleteTriggerProps
     extends Assign<HTMLProps<'button'>, TagsInputItemDeleteTriggerBaseProps> {}
 </script>
@@ -12,10 +12,10 @@
   import { useTagsInputContext } from './use-tags-input-context'
   import { useTagsInputItemPropsContext } from './use-tags-input-item-props-context'
 
-  const props: TagsInputItemDeleteTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: TagsInputItemDeleteTriggerProps = $props()
   const tagsInput = useTagsInputContext()
   const itemProps = useTagsInputItemPropsContext()
   const mergedProps = $derived(mergeProps(tagsInput().getItemDeleteTriggerProps(itemProps()), props))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/tags-input/tags-input-item-delete-trigger.svelte.d.ts

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

package/dist/components/tags-input/tags-input-item-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 TagsInputItemInputBaseProps extends PolymorphicProps<'input'> {}
+  export interface TagsInputItemInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {}
   export interface TagsInputItemInputProps extends Assign<HTMLProps<'input'>, TagsInputItemInputBaseProps> {}
 </script>
 
@@ -11,10 +11,10 @@
   import { useTagsInputContext } from './use-tags-input-context'
   import { useTagsInputItemPropsContext } from './use-tags-input-item-props-context'
 
-  const props: TagsInputItemInputProps = $props()
+  let { ref = $bindable(null), ...props }: TagsInputItemInputProps = $props()
   const tagsInput = useTagsInputContext()
   const itemProps = useTagsInputItemPropsContext()
   const mergedProps = $derived(mergeProps(tagsInput().getItemInputProps(itemProps()), props))
 </script>
 
-<Ark as="input" {...mergedProps} />
+<Ark as="input" bind:ref {...mergedProps} />

package/dist/components/tags-input/tags-input-item-input.svelte.d.ts

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

package/dist/components/tags-input/tags-input-item-preview.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 TagsInputItemPreviewBaseProps extends PolymorphicProps<'div'> {}
+  export interface TagsInputItemPreviewBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface TagsInputItemPreviewProps extends Assign<HTMLProps<'div'>, TagsInputItemPreviewBaseProps> {}
 </script>
 
@@ -11,10 +11,10 @@
   import { useTagsInputContext } from './use-tags-input-context'
   import { useTagsInputItemPropsContext } from './use-tags-input-item-props-context'
 
-  const props: TagsInputItemPreviewProps = $props()
+  let { ref = $bindable(null), ...props }: TagsInputItemPreviewProps = $props()
   const tagsInput = useTagsInputContext()
   const itemProps = useTagsInputItemPropsContext()
   const mergedProps = $derived(mergeProps(tagsInput().getItemPreviewProps(itemProps()), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/tags-input/tags-input-item-preview.svelte.d.ts

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

package/dist/components/tags-input/tags-input-item-text.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface TagsInputItemTextBaseProps extends PolymorphicProps<'span'> {}
+  export interface TagsInputItemTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
   export interface TagsInputItemTextProps extends Assign<HTMLProps<'span'>, TagsInputItemTextBaseProps> {}
 </script>
 
@@ -11,10 +11,10 @@
   import { useTagsInputContext } from './use-tags-input-context'
   import { useTagsInputItemPropsContext } from './use-tags-input-item-props-context'
 
-  const props: TagsInputItemTextProps = $props()
+  let { ref = $bindable(null), ...props }: TagsInputItemTextProps = $props()
   const tagsInput = useTagsInputContext()
   const itemProps = useTagsInputItemPropsContext()
   const mergedProps = $derived(mergeProps(tagsInput().getItemTextProps(itemProps()), props))
 </script>
 
-<Ark as="span" {...mergedProps} />
+<Ark as="span" bind:ref {...mergedProps} />

package/dist/components/tags-input/tags-input-item-text.svelte.d.ts

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

package/dist/components/tags-input/tags-input-item.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 TagsInputItemBaseProps extends PolymorphicProps<'div'> {
+  export interface TagsInputItemBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     index: number
     value: string
     disabled?: boolean
@@ -16,7 +16,7 @@
   import { TagsInputItemProvider } from './use-tags-input-item-context'
   import { TagsInputItemPropsProvider } from './use-tags-input-item-props-context'
 
-  const props: TagsInputItemProps = $props()
+  let { ref = $bindable(null), ...props }: TagsInputItemProps = $props()
   const tagsInput = useTagsInputContext()
   const itemProps = $derived({ index: props.index, value: props.value, disabled: props.disabled })
   const mergedProps = $derived(mergeProps(tagsInput().getItemProps(itemProps), props))
@@ -25,4 +25,4 @@
   TagsInputItemPropsProvider(() => itemProps)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/tags-input/tags-input-item.svelte.d.ts

@@ -1,11 +1,11 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface TagsInputItemBaseProps extends PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface TagsInputItemBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     index: number;
     value: string;
     disabled?: boolean;
 }
 export interface TagsInputItemProps extends Assign<HTMLProps<'div'>, TagsInputItemBaseProps> {
 }
-declare const TagsInputItem: import("svelte").Component<TagsInputItemProps, {}, "">;
+declare const TagsInputItem: import("svelte").Component<TagsInputItemProps, {}, "ref">;
 type TagsInputItem = ReturnType<typeof TagsInputItem>;
 export default TagsInputItem;

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

package/dist/components/tags-input/tags-input-label.svelte.d.ts

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

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

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

package/dist/components/tags-input/tags-input-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 { UseTagsInputProps } from './use-tags-input.svelte'
 
-  export interface TagsInputRootBaseProps extends UseTagsInputProps, PolymorphicProps<'div'> {}
+  export interface TagsInputRootBaseProps extends UseTagsInputProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface TagsInputRootProps extends Assign<HTMLProps<'div'>, TagsInputRootBaseProps> {}
 </script>
 
@@ -13,7 +13,12 @@
   import { TagsInputProvider } from './use-tags-input-context'
   import { useTagsInput } from './use-tags-input.svelte'
 
-  let { value = $bindable<string[]>(), inputValue = $bindable<string>(), ...props }: TagsInputRootProps = $props()
+  let {
+    ref = $bindable(null),
+    value = $bindable<string[]>(),
+    inputValue = $bindable<string>(),
+    ...props
+  }: TagsInputRootProps = $props()
 
   const [useTagsInputProps, localProps] = $derived(
     createSplitProps<UseTagsInputProps>()(props, [
@@ -74,4 +79,4 @@
   TagsInputProvider(tagsInput)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/tags-input/tags-input-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 { UseTagsInputProps } from './use-tags-input.svelte';
-export interface TagsInputRootBaseProps extends UseTagsInputProps, PolymorphicProps<'div'> {
+export interface TagsInputRootBaseProps extends UseTagsInputProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface TagsInputRootProps extends Assign<HTMLProps<'div'>, TagsInputRootBaseProps> {
 }
-declare const TagsInputRoot: import("svelte").Component<TagsInputRootProps, {}, "value" | "inputValue">;
+declare const TagsInputRoot: import("svelte").Component<TagsInputRootProps, {}, "ref" | "value" | "inputValue">;
 type TagsInputRoot = ReturnType<typeof TagsInputRoot>;
 export default TagsInputRoot;

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

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

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

@@ -1,9 +1,9 @@
-import type { HTMLProps, PolymorphicProps } from '../../types';
+import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { ActionTriggerProps } from '@zag-js/timer';
-export interface TimerActionTriggerBaseProps extends ActionTriggerProps, PolymorphicProps<'button'> {
+export interface TimerActionTriggerBaseProps extends ActionTriggerProps, PolymorphicProps<'button'>, RefAttribute {
 }
 export interface TimerActionTriggerProps extends HTMLProps<'button'>, TimerActionTriggerBaseProps {
 }
-declare const TimerActionTrigger: import("svelte").Component<TimerActionTriggerProps, {}, "">;
+declare const TimerActionTrigger: import("svelte").Component<TimerActionTriggerProps, {}, "ref">;
 type TimerActionTrigger = ReturnType<typeof TimerActionTrigger>;
 export default TimerActionTrigger;

package/dist/components/timer/timer-area.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 TimerAreaBaseProps extends PolymorphicProps<'div'> {}
+  export interface TimerAreaBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface TimerAreaProps extends HTMLProps<'div'>, TimerAreaBaseProps {}
 
-  const props: TimerAreaProps = $props()
+  let { ref = $bindable(null), ...props }: TimerAreaProps = $props()
   const timer = useTimerContext()
   const mergedProps = $derived(mergeProps(timer().getAreaProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

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

package/dist/components/timer/timer-control.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 TimerControlBaseProps extends PolymorphicProps<'div'> {}
+  export interface TimerControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface TimerControlProps extends HTMLProps<'div'>, TimerControlBaseProps {}
 
-  const props: TimerControlProps = $props()
+  let { ref = $bindable(null), ...props }: TimerControlProps = $props()
   const timer = useTimerContext()
   const mergedProps = $derived(mergeProps(timer().getControlProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

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