@ark-ui/svelte 5.0.4 → 5.1.0

package/dist/components/tree-view/tree-view-branch-content.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface TreeViewBranchContentBaseProps extends PolymorphicProps<'ul'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface TreeViewBranchContentBaseProps extends PolymorphicProps<'ul'>, RefAttribute {
     ref?: Element | null;
 }
 export interface TreeViewBranchContentProps extends Assign<HTMLProps<'ul'>, TreeViewBranchContentBaseProps> {
 }
-declare const TreeViewBranchContent: import("svelte").Component<TreeViewBranchContentProps, {}, "">;
+declare const TreeViewBranchContent: import("svelte").Component<TreeViewBranchContentProps, {}, "ref">;
 type TreeViewBranchContent = ReturnType<typeof TreeViewBranchContent>;
 export default TreeViewBranchContent;

package/dist/components/tree-view/tree-view-branch-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 TreeViewBranchControlBaseProps extends PolymorphicProps<'div'> {}
+  export interface TreeViewBranchControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface TreeViewBranchControlProps extends Assign<HTMLProps<'div'>, TreeViewBranchControlBaseProps> {}
 </script>
 
@@ -11,11 +11,11 @@
   import { useTreeViewContext } from './use-tree-view-context'
   import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context'
 
-  const props: TreeViewBranchControlProps = $props()
+  let { ref = $bindable(null), ...props }: TreeViewBranchControlProps = $props()
 
   const treeView = useTreeViewContext()
   const nodeProps = useTreeViewNodePropsContext()
   const mergedProps = $derived(mergeProps(treeView().getBranchControlProps(nodeProps()), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/tree-view/tree-view-branch-control.svelte.d.ts

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

package/dist/components/tree-view/tree-view-branch-indent-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 TreeViewBranchIndentGuideBaseProps extends PolymorphicProps<'div'> {}
+  export interface TreeViewBranchIndentGuideBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface TreeViewBranchIndentGuideProps
     extends Assign<HTMLProps<'div'>, TreeViewBranchIndentGuideBaseProps> {}
 </script>
@@ -12,7 +12,7 @@
   import { useTreeViewContext } from './use-tree-view-context'
   import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context'
 
-  const props: TreeViewBranchIndentGuideProps = $props()
+  let { ref = $bindable(null), ...props }: TreeViewBranchIndentGuideProps = $props()
 
   const treeView = useTreeViewContext()
   const nodeProps = useTreeViewNodePropsContext()
@@ -20,4 +20,4 @@
   const mergedProps = $derived(mergeProps(treeView().getBranchIndentGuideProps(nodeProps()), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/tree-view/tree-view-branch-indent-guide.svelte.d.ts

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

package/dist/components/tree-view/tree-view-branch-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 TreeViewBranchIndicatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface TreeViewBranchIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface TreeViewBranchIndicatorProps extends Assign<HTMLProps<'div'>, TreeViewBranchIndicatorBaseProps> {}
 </script>
 
@@ -11,11 +11,11 @@
   import { useTreeViewContext } from './use-tree-view-context'
   import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context'
 
-  const props: TreeViewBranchIndicatorProps = $props()
+  let { ref = $bindable(null), ...props }: TreeViewBranchIndicatorProps = $props()
 
   const treeView = useTreeViewContext()
   const nodeProps = useTreeViewNodePropsContext()
   const mergedProps = $derived(mergeProps(treeView().getBranchIndicatorProps(nodeProps()), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/tree-view/tree-view-branch-indicator.svelte.d.ts

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

package/dist/components/tree-view/tree-view-branch-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 TreeViewBranchTextBaseProps extends PolymorphicProps<'span'> {}
+  export interface TreeViewBranchTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
   export interface TreeViewBranchTextProps extends Assign<HTMLProps<'span'>, TreeViewBranchTextBaseProps> {}
 </script>
 
@@ -11,11 +11,11 @@
   import { useTreeViewContext } from './use-tree-view-context'
   import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context'
 
-  const props: TreeViewBranchTextProps = $props()
+  let { ref = $bindable(null), ...props }: TreeViewBranchTextProps = $props()
 
   const treeView = useTreeViewContext()
   const nodeProps = useTreeViewNodePropsContext()
   const mergedProps = $derived(mergeProps(treeView().getBranchTextProps(nodeProps()), props))
 </script>
 
-<Ark as="span" {...mergedProps} />
+<Ark as="span" bind:ref {...mergedProps} />

package/dist/components/tree-view/tree-view-branch-text.svelte.d.ts

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

package/dist/components/tree-view/tree-view-branch-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 TreeViewBranchTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface TreeViewBranchTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
   export interface TreeViewBranchTriggerProps extends Assign<HTMLProps<'button'>, TreeViewBranchTriggerBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { useTreeViewContext } from './use-tree-view-context'
   import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context'
 
-  const props: TreeViewBranchTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: TreeViewBranchTriggerProps = $props()
 
   const treeView = useTreeViewContext()
   const nodeProps = useTreeViewNodePropsContext()
@@ -19,4 +19,4 @@
   const mergedProps = $derived(mergeProps(treeView().getBranchTriggerProps(nodeProps()), props))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/tree-view/tree-view-branch-trigger.svelte.d.ts

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

package/dist/components/tree-view/tree-view-branch.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 TreeViewBranchBaseProps extends PolymorphicProps<'li'> {}
+  export interface TreeViewBranchBaseProps extends PolymorphicProps<'li'>, RefAttribute {}
   export interface TreeViewBranchProps extends Assign<HTMLProps<'li'>, TreeViewBranchBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { useTreeViewNodeContext } from './use-tree-view-node-context'
   import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context'
 
-  const props: TreeViewBranchProps = $props()
+  let { ref = $bindable(null), ...props }: TreeViewBranchProps = $props()
 
   const treeView = useTreeViewContext()
   const nodeProps = useTreeViewNodePropsContext()
@@ -25,6 +25,7 @@
 </script>
 
 <Collapsible.Root
+  bind:ref
   open={nodeState().expanded}
   ids={{ content: branchContentProps.id! }}
   {...renderStrategyProps}

package/dist/components/tree-view/tree-view-branch.svelte.d.ts

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

package/dist/components/tree-view/tree-view-item-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 TreeViewItemIndicatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface TreeViewItemIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface TreeViewItemIndicatorProps extends Assign<HTMLProps<'div'>, TreeViewItemIndicatorBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { useTreeViewContext } from './use-tree-view-context'
   import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context'
 
-  const props: TreeViewItemIndicatorProps = $props()
+  let { ref = $bindable(null), ...props }: TreeViewItemIndicatorProps = $props()
 
   const treeView = useTreeViewContext()
   const nodeProps = useTreeViewNodePropsContext()
@@ -19,4 +19,4 @@
   const mergedProps = $derived(mergeProps(treeView().getItemIndicatorProps(nodeProps()), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/tree-view/tree-view-item-indicator.svelte.d.ts

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

package/dist/components/tree-view/tree-view-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 TreeViewItemTextBaseProps extends PolymorphicProps<'span'> {}
+  export interface TreeViewItemTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
   export interface TreeViewItemTextProps extends Assign<HTMLProps<'span'>, TreeViewItemTextBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { useTreeViewContext } from './use-tree-view-context'
   import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context'
 
-  const props: TreeViewItemTextProps = $props()
+  let { ref = $bindable(null), ...props }: TreeViewItemTextProps = $props()
 
   const treeView = useTreeViewContext()
   const nodeProps = useTreeViewNodePropsContext()
@@ -19,4 +19,4 @@
   const mergedProps = $derived(mergeProps(treeView().getItemTextProps(nodeProps()), props))
 </script>
 
-<Ark as="span" {...mergedProps} />
+<Ark as="span" bind:ref {...mergedProps} />

package/dist/components/tree-view/tree-view-item-text.svelte.d.ts

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

package/dist/components/tree-view/tree-view-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 TreeViewItemBaseProps extends PolymorphicProps<'li'> {}
+  export interface TreeViewItemBaseProps extends PolymorphicProps<'li'>, RefAttribute {}
   export interface TreeViewItemProps extends Assign<HTMLProps<'li'>, TreeViewItemBaseProps> {}
 </script>
 
@@ -11,11 +11,11 @@
   import { useTreeViewContext } from './use-tree-view-context'
   import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context'
 
-  const props: TreeViewItemProps = $props()
+  let { ref = $bindable(null), ...props }: TreeViewItemProps = $props()
 
   const treeView = useTreeViewContext()
   const nodeProps = useTreeViewNodePropsContext()
   const mergedProps = $derived(mergeProps(treeView().getItemProps(nodeProps()), props))
 </script>
 
-<Ark as="li" {...mergedProps} />
+<Ark as="li" bind:ref {...mergedProps} />

package/dist/components/tree-view/tree-view-item.svelte.d.ts

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

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

package/dist/components/tree-view/tree-view-label.svelte.d.ts

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

package/dist/components/tree-view/tree-view-node-checkbox.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 TreeViewNodeCheckboxBaseProps extends PolymorphicProps<'span'> {}
+  export interface TreeViewNodeCheckboxBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
   export interface TreeViewNodeCheckboxProps extends Assign<HTMLProps<'span'>, TreeViewNodeCheckboxBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { useTreeViewContext } from './use-tree-view-context'
   import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context'
 
-  const props: TreeViewNodeCheckboxProps = $props()
+  let { ref = $bindable(null), ...props }: TreeViewNodeCheckboxProps = $props()
 
   const treeView = useTreeViewContext()
   const nodeProps = useTreeViewNodePropsContext()
@@ -19,4 +19,4 @@
   const mergedProps = $derived(mergeProps(treeView().getNodeCheckboxProps(nodeProps()), props))
 </script>
 
-<Ark as="span" {...mergedProps} />
+<Ark as="span" bind:ref {...mergedProps} />

package/dist/components/tree-view/tree-view-node-checkbox.svelte.d.ts

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

package/dist/components/tree-view/tree-view-root-provider.svelte

@@ -1,11 +1,12 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { TreeNode } from '../collection'
   import type { UseTreeViewReturn } from './use-tree-view.svelte'
 
   export interface TreeViewRootProviderBaseProps<T extends TreeNode>
     extends RenderStrategyProps,
-      PolymorphicProps<'div'> {
+      PolymorphicProps<'div'>,
+      RefAttribute {
     value: UseTreeViewReturn<T>
   }
   export interface TreeViewRootProviderProps<T extends TreeNode>
@@ -22,7 +23,7 @@
   import { Ark } from '../factory'
   import { TreeViewProvider } from './use-tree-view-context'
 
-  const { value, ...props }: TreeViewRootProviderProps<T> = $props()
+  let { ref = $bindable(null), value, ...props }: TreeViewRootProviderProps<T> = $props()
 
   const [renderStrategyProps, treeViewProps] = $derived(splitRenderStrategyProps(props))
   const mergedProps = $derived(mergeProps(value().getRootProps(), treeViewProps))
@@ -31,4 +32,4 @@
   RenderStrategyPropsProvider(() => renderStrategyProps)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/tree-view/tree-view-root-provider.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { TreeNode } from '../collection';
 import type { UseTreeViewReturn } from './use-tree-view.svelte';
-export interface TreeViewRootProviderBaseProps<T extends TreeNode> extends RenderStrategyProps, PolymorphicProps<'div'> {
+export interface TreeViewRootProviderBaseProps<T extends TreeNode> extends RenderStrategyProps, PolymorphicProps<'div'>, RefAttribute {
     value: UseTreeViewReturn<T>;
 }
 export interface TreeViewRootProviderProps<T extends TreeNode> extends Assign<HTMLProps<'div'>, TreeViewRootProviderBaseProps<T>> {
@@ -11,7 +11,7 @@ declare class __sveltets_Render<T extends TreeNode> {
     props(): TreeViewRootProviderProps<T>;
     events(): {};
     slots(): {};
-    bindings(): "";
+    bindings(): "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/components/tree-view/tree-view-root.svelte

@@ -1,12 +1,13 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { TreeNode } from '../collection'
   import type { UseTreeViewProps } from './use-tree-view.svelte'
 
   export interface TreeViewRootBaseProps<T extends TreeNode>
     extends UseTreeViewProps<T>,
       RenderStrategyProps,
-      PolymorphicProps<'div'> {}
+      PolymorphicProps<'div'>,
+      RefAttribute {}
 
   export interface TreeViewRootProps<T extends TreeNode> extends Assign<HTMLProps<'div'>, TreeViewRootBaseProps<T>> {}
 </script>
@@ -24,6 +25,7 @@
   import { useTreeView } from './use-tree-view.svelte'
 
   let {
+    ref = $bindable(null),
     expandedValue = $bindable<string[]>(),
     selectedValue = $bindable<string[]>(),
     focusedValue = $bindable<string>(),
@@ -68,4 +70,4 @@
   RenderStrategyPropsProvider(() => renderStrategyProps)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/tree-view/tree-view-root.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { TreeNode } from '../collection';
 import type { UseTreeViewProps } from './use-tree-view.svelte';
-export interface TreeViewRootBaseProps<T extends TreeNode> extends UseTreeViewProps<T>, RenderStrategyProps, PolymorphicProps<'div'> {
+export interface TreeViewRootBaseProps<T extends TreeNode> extends UseTreeViewProps<T>, RenderStrategyProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface TreeViewRootProps<T extends TreeNode> extends Assign<HTMLProps<'div'>, TreeViewRootBaseProps<T>> {
 }
@@ -10,7 +10,7 @@ declare class __sveltets_Render<T extends TreeNode> {
     props(): TreeViewRootProps<T>;
     events(): {};
     slots(): {};
-    bindings(): "focusedValue" | "expandedValue" | "selectedValue" | "checkedValue";
+    bindings(): "ref" | "focusedValue" | "expandedValue" | "selectedValue" | "checkedValue";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

package/dist/components/tree-view/tree-view-tree.svelte.d.ts

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