From 71728d3c3fa95255db03448c8b87fb75bc2d805c Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Mon, 24 Feb 2025 11:22:36 +0100
Subject: [PATCH] feat(Tree): new component (#3180)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: hywax <me@hywax.space>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: Sébastien Chopin <atinux@gmail.com>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>
---
 docs/app/components/content/ComponentCode.vue |   2 +-
 .../examples/tree/TreeCustomSlotExample.vue   |  38 ++
 .../examples/tree/TreeExpandedExample.vue     |  34 ++
 .../examples/tree/TreeModelValueExample.vue   |  33 ++
 .../examples/tree/TreeOnSelectExample.vue     |  34 ++
 .../examples/tree/TreeOnToggleExample.vue     |  34 ++
 docs/content/3.components/tree.md             | 436 +++++++++++++++
 docs/public/components/dark/tree.png          | Bin 0 -> 6504 bytes
 docs/public/components/light/tree.png         | Bin 0 -> 6753 bytes
 playground-vue/src/app.vue                    |   3 +-
 playground/app/app.vue                        |   3 +-
 playground/app/pages/components/tree.vue      |  86 +++
 src/devtools/meta.ts                          |   2 +-
 src/runtime/components/Tree.vue               | 231 ++++++++
 src/runtime/types/index.ts                    |   1 +
 src/runtime/types/utils.ts                    |   2 +
 src/theme/icons.ts                            |   2 +
 src/theme/index.ts                            |   1 +
 src/theme/tree.ts                             |  82 +++
 test/components/Tree.spec.ts                  |  69 +++
 .../__snapshots__/Tree-vue.spec.ts.snap       | 521 ++++++++++++++++++
 .../__snapshots__/Tree.spec.ts.snap           | 521 ++++++++++++++++++
 22 files changed, 2131 insertions(+), 4 deletions(-)
 create mode 100644 docs/app/components/content/examples/tree/TreeCustomSlotExample.vue
 create mode 100644 docs/app/components/content/examples/tree/TreeExpandedExample.vue
 create mode 100644 docs/app/components/content/examples/tree/TreeModelValueExample.vue
 create mode 100644 docs/app/components/content/examples/tree/TreeOnSelectExample.vue
 create mode 100644 docs/app/components/content/examples/tree/TreeOnToggleExample.vue
 create mode 100644 docs/content/3.components/tree.md
 create mode 100644 docs/public/components/dark/tree.png
 create mode 100644 docs/public/components/light/tree.png
 create mode 100644 playground/app/pages/components/tree.vue
 create mode 100644 src/runtime/components/Tree.vue
 create mode 100644 src/theme/tree.ts
 create mode 100644 test/components/Tree.spec.ts
 create mode 100644 test/components/__snapshots__/Tree-vue.spec.ts.snap
 create mode 100644 test/components/__snapshots__/Tree.spec.ts.snap

diff --git a/docs/app/components/content/ComponentCode.vue b/docs/app/components/content/ComponentCode.vue
index df932ef7..3458f9d4 100644
--- a/docs/app/components/content/ComponentCode.vue
+++ b/docs/app/components/content/ComponentCode.vue
@@ -316,7 +316,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
 <template>
   <div class="my-5">
     <div>
-      <div v-if="options.length" class="flex items-center gap-2.5 border border-(--ui-border-muted) border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
+      <div v-if="options.length" class="flex flex-wrap items-center gap-2.5 border border-(--ui-border-muted) border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
         <template v-for="option in options" :key="option.name">
           <UFormField
             :label="option.label"
diff --git a/docs/app/components/content/examples/tree/TreeCustomSlotExample.vue b/docs/app/components/content/examples/tree/TreeCustomSlotExample.vue
new file mode 100644
index 00000000..d54284f1
--- /dev/null
+++ b/docs/app/components/content/examples/tree/TreeCustomSlotExample.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { TreeItem } from '@nuxt/ui'
+
+const items: TreeItem[] = [
+  {
+    label: 'app/',
+    slot: 'app',
+    defaultExpanded: true,
+    children: [{
+      label: 'composables/',
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    },
+    {
+      label: 'components/',
+      defaultExpanded: true,
+      children: [
+        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+      ]
+    }]
+  },
+  { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
+  { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
+]
+</script>
+
+<template>
+  <UTree :items="items">
+    <template #app="{ item }">
+      <p class="italic font-bold">
+        {{ item.label }}
+      </p>
+    </template>
+  </UTree>
+</template>
diff --git a/docs/app/components/content/examples/tree/TreeExpandedExample.vue b/docs/app/components/content/examples/tree/TreeExpandedExample.vue
new file mode 100644
index 00000000..50605000
--- /dev/null
+++ b/docs/app/components/content/examples/tree/TreeExpandedExample.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TreeItem } from '@nuxt/ui'
+
+const items: TreeItem[] = [
+  {
+    label: 'app/',
+    value: 'app',
+    children: [{
+      label: 'composables/',
+      value: 'composables',
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    },
+    {
+      label: 'components/',
+      value: 'components',
+      children: [
+        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+      ]
+    }]
+  },
+  { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
+  { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
+]
+
+const expanded = ref(['app', 'composables'])
+</script>
+
+<template>
+  <UTree v-model:expanded="expanded" :items="items" />
+</template>
diff --git a/docs/app/components/content/examples/tree/TreeModelValueExample.vue b/docs/app/components/content/examples/tree/TreeModelValueExample.vue
new file mode 100644
index 00000000..1eb92fae
--- /dev/null
+++ b/docs/app/components/content/examples/tree/TreeModelValueExample.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { TreeItem } from '@nuxt/ui'
+
+const items: TreeItem[] = [
+  {
+    label: 'app/',
+    defaultExpanded: true,
+    children: [{
+      label: 'composables/',
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    },
+    {
+      label: 'components/',
+      defaultExpanded: true,
+      children: [
+        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+      ]
+    }]
+  },
+  { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
+  { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
+]
+
+const value = ref(items[items.length - 1])
+</script>
+
+<template>
+  <UTree v-model="value" :items="items" />
+</template>
diff --git a/docs/app/components/content/examples/tree/TreeOnSelectExample.vue b/docs/app/components/content/examples/tree/TreeOnSelectExample.vue
new file mode 100644
index 00000000..bfa33d07
--- /dev/null
+++ b/docs/app/components/content/examples/tree/TreeOnSelectExample.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TreeItem } from '@nuxt/ui'
+
+const items: TreeItem[] = [
+  {
+    label: 'app/',
+    defaultExpanded: true,
+    onSelect: (e: Event) => {
+      e.preventDefault()
+    },
+    children: [{
+      label: 'composables/',
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    },
+    {
+      label: 'components/',
+      defaultExpanded: true,
+      children: [
+        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+      ]
+    }]
+  },
+  { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
+  { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
+]
+</script>
+
+<template>
+  <UTree :items="items" />
+</template>
diff --git a/docs/app/components/content/examples/tree/TreeOnToggleExample.vue b/docs/app/components/content/examples/tree/TreeOnToggleExample.vue
new file mode 100644
index 00000000..067114fc
--- /dev/null
+++ b/docs/app/components/content/examples/tree/TreeOnToggleExample.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TreeItem } from '@nuxt/ui'
+
+const items: TreeItem[] = [
+  {
+    label: 'app/',
+    defaultExpanded: true,
+    onToggle: (e: Event) => {
+      e.preventDefault()
+    },
+    children: [{
+      label: 'composables/',
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    },
+    {
+      label: 'components/',
+      defaultExpanded: true,
+      children: [
+        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+      ]
+    }]
+  },
+  { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
+  { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
+]
+</script>
+
+<template>
+  <UTree :items="items" />
+</template>
diff --git a/docs/content/3.components/tree.md b/docs/content/3.components/tree.md
new file mode 100644
index 00000000..b7569798
--- /dev/null
+++ b/docs/content/3.components/tree.md
@@ -0,0 +1,436 @@
+---
+description: A tree view component to display and interact with hierarchical data structures.
+category: data
+links:
+  - label: Tree
+    icon: i-custom-reka-ui
+    to: https://www.reka-ui.com/components/tree.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Tree.vue
+navigation.badge: Soon
+---
+
+## Usage
+
+### Items
+
+Use the `items` prop as an array of objects with the following properties:
+
+- `icon?: string`{lang="ts-type"}
+- `label?: string`{lang="ts-type"}
+- `trailingIcon?: string`{lang="ts-type"}
+- `defaultExpanded?: boolean`{lang="ts-type"}
+- `disabled?: boolean`{lang="ts-type"}
+- `value?: string`{lang="ts-type"}
+- `slot?: string`{lang="ts-type"}
+- `children?: TreeItem[]`{lang="ts-type"}
+- `onToggle?(e: Event): void`{lang="ts-type"}
+- `onSelect?(e?: Event): void`{lang="ts-type"}
+
+::note
+A unique identifier is required for each item. The component will use the `value` prop as identifier, falling back to `label` if `value` is not provided. One of these must be provided for the component to work properly.
+::
+
+::component-code
+---
+collapse: true
+hide:
+  - class
+ignore:
+  - items
+external:
+  - items
+props:
+  items:
+    - label: 'app/'
+      defaultExpanded: true
+      children:
+        - label: 'composables/'
+          children:
+            - label: 'useAuth.ts'
+              icon: 'i-vscode-icons-file-type-typescript'
+            - label: 'useUser.ts'
+              icon: 'i-vscode-icons-file-type-typescript'
+        - label: 'components/'
+          defaultExpanded: true
+          children:
+            - label: 'Card.vue'
+              icon: 'i-vscode-icons-file-type-vue'
+            - label: 'Button.vue'
+              icon: 'i-vscode-icons-file-type-vue'
+    - label: 'app.vue'
+      icon: 'i-vscode-icons-file-type-vue'
+    - label: 'nuxt.config.ts'
+      icon: 'i-vscode-icons-file-type-nuxt'
+  class: 'w-60'
+---
+::
+
+### Multiple
+
+Use the `multiple` prop to allow multiple item selections.
+
+::component-code
+---
+collapse: true
+hide:
+  - class
+ignore:
+  - items
+external:
+  - items
+props:
+  multiple: true
+  items:
+    - label: 'app/'
+      defaultExpanded: true
+      children:
+        - label: 'composables/'
+          children:
+            - label: 'useAuth.ts'
+              icon: 'i-vscode-icons-file-type-typescript'
+            - label: 'useUser.ts'
+              icon: 'i-vscode-icons-file-type-typescript'
+        - label: 'components/'
+          defaultExpanded: true
+          children:
+            - label: 'Card.vue'
+              icon: 'i-vscode-icons-file-type-vue'
+            - label: 'Button.vue'
+              icon: 'i-vscode-icons-file-type-vue'
+    - label: 'app.vue'
+      icon: 'i-vscode-icons-file-type-vue'
+    - label: 'nuxt.config.ts'
+      icon: 'i-vscode-icons-file-type-nuxt'
+  class: 'w-60'
+---
+::
+
+### Color
+
+Use the `color` prop to change the color of the Tree.
+
+::component-code
+---
+collapse: true
+hide:
+  - class
+ignore:
+  - items
+external:
+  - items
+props:
+  color: neutral
+  items:
+    - label: 'app/'
+      defaultExpanded: true
+      children:
+        - label: 'composables/'
+          children:
+            - label: 'useAuth.ts'
+              icon: 'i-vscode-icons-file-type-typescript'
+            - label: 'useUser.ts'
+              icon: 'i-vscode-icons-file-type-typescript'
+        - label: 'components/'
+          defaultExpanded: true
+          children:
+            - label: 'Card.vue'
+              icon: 'i-vscode-icons-file-type-vue'
+            - label: 'Button.vue'
+              icon: 'i-vscode-icons-file-type-vue'
+    - label: 'app.vue'
+      icon: 'i-vscode-icons-file-type-vue'
+    - label: 'nuxt.config.ts'
+      icon: 'i-vscode-icons-file-type-nuxt'
+  class: 'w-60'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Tree.
+
+::component-code
+---
+collapse: true
+hide:
+  - class
+ignore:
+  - items
+external:
+  - items
+props:
+  size: xl
+  items:
+    - label: 'app/'
+      defaultExpanded: true
+      children:
+        - label: 'composables/'
+          children:
+            - label: 'useAuth.ts'
+              icon: 'i-vscode-icons-file-type-typescript'
+            - label: 'useUser.ts'
+              icon: 'i-vscode-icons-file-type-typescript'
+        - label: 'components/'
+          defaultExpanded: true
+          children:
+            - label: 'Card.vue'
+              icon: 'i-vscode-icons-file-type-vue'
+            - label: 'Button.vue'
+              icon: 'i-vscode-icons-file-type-vue'
+    - label: 'app.vue'
+      icon: 'i-vscode-icons-file-type-vue'
+    - label: 'nuxt.config.ts'
+      icon: 'i-vscode-icons-file-type-nuxt'
+  class: 'w-60'
+---
+::
+
+### Trailing Icon
+
+Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of a parent node. Defaults to `i-lucide-chevron-down`.
+
+::note
+If an icon is specified for an item, it will always take precedence over these props.
+::
+
+::component-code
+---
+collapse: true
+hide:
+  - class
+ignore:
+  - items
+external:
+  - items
+props:
+  trailingIcon: 'i-lucide-arrow-down'
+  items:
+    - label: 'app/'
+      defaultExpanded: true
+      children:
+        - label: 'composables/'
+          trailingIcon: 'i-lucide-chevron-down'
+          children:
+            - label: 'useAuth.ts'
+              icon: 'i-vscode-icons-file-type-typescript'
+            - label: 'useUser.ts'
+              icon: 'i-vscode-icons-file-type-typescript'
+        - label: 'components/'
+          defaultExpanded: true
+          children:
+            - label: 'Card.vue'
+              icon: 'i-vscode-icons-file-type-vue'
+            - label: 'Button.vue'
+              icon: 'i-vscode-icons-file-type-vue'
+    - label: 'app.vue'
+      icon: 'i-vscode-icons-file-type-vue'
+    - label: 'nuxt.config.ts'
+      icon: 'i-vscode-icons-file-type-nuxt'
+  class: 'w-60'
+---
+::
+
+::framework-only
+#nuxt
+:::tip{to="/getting-started/icons/nuxt#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
+:::
+
+#vue
+:::tip{to="/getting-started/icons/vue#theme"}
+You can customize this icon globally in your `vite.config.ts` under `ui.icons.chevronDown` key.
+:::
+::
+
+### Expanded Icon
+
+Use the `expanded-icon` and `collapsed-icon` props to customize the icons of a parent node when it is expanded or collapsed. Defaults to `i-lucide-folder-open` and `i-lucide-folder` respectively.
+
+::component-code
+---
+collapse: true
+hide:
+  - class
+ignore:
+  - items
+external:
+  - items
+props:
+  expandedIcon: 'i-lucide-book-open'
+  collapsedIcon: 'i-lucide-book'
+  items:
+    - label: 'app/'
+      defaultExpanded: true
+      children:
+        - label: 'composables/'
+          children:
+            - label: 'useAuth.ts'
+              icon: 'i-vscode-icons-file-type-typescript'
+            - label: 'useUser.ts'
+              icon: 'i-vscode-icons-file-type-typescript'
+        - label: 'components/'
+          defaultExpanded: true
+          children:
+            - label: 'Card.vue'
+              icon: 'i-vscode-icons-file-type-vue'
+            - label: 'Button.vue'
+              icon: 'i-vscode-icons-file-type-vue'
+    - label: 'app.vue'
+      icon: 'i-vscode-icons-file-type-vue'
+    - label: 'nuxt.config.ts'
+      icon: 'i-vscode-icons-file-type-nuxt'
+  class: 'w-60'
+---
+::
+
+::framework-only
+#nuxt
+:::tip{to="/getting-started/icons/nuxt#theme"}
+You can customize these icons globally in your `app.config.ts` under `ui.icons.folder` and `ui.icons.folderOpen` keys.
+:::
+
+#vue
+:::tip{to="/getting-started/icons/vue#theme"}
+You can customize these icons globally in your `vite.config.ts` under `ui.icons.folder` and `ui.icons.folderOpen` keys.
+:::
+::
+
+### Disabled
+
+Use the `disabled` prop to prevent any user interaction with the Tree.
+
+::note
+You can also disable individual items using `item.disabled`.
+::
+
+::component-code
+---
+collapse: true
+hide:
+  - class
+ignore:
+  - items
+external:
+  - items
+props:
+  disabled: true
+  items:
+    - label: 'app'
+      icon: 'i-lucide-folder'
+      defaultExpanded: true
+      children:
+        - label: 'composables'
+          icon: 'i-lucide-folder'
+          children:
+            - label: 'useAuth.ts'
+              icon: 'i-vscode-icons-file-type-typescript'
+            - label: 'useUser.ts'
+              icon: 'i-vscode-icons-file-type-typescript'
+        - label: 'components'
+          icon: 'i-lucide-folder'
+          children:
+            - label: 'Home'
+              icon: 'i-lucide-folder'
+              children:
+                - label: 'Card.vue'
+                  icon: 'i-vscode-icons-file-type-vue'
+                - label: 'Button.vue'
+                  icon: 'i-vscode-icons-file-type-vue'
+    - label: 'app.vue'
+      icon: 'i-vscode-icons-file-type-vue'
+    - label: 'nuxt.config.ts'
+      icon: 'i-vscode-icons-file-type-nuxt'
+  class: 'w-60'
+---
+::
+
+## Examples
+
+### Control selected item(s)
+
+You can control the selected item(s) by using the `default-value` prop or the `v-model` directive.
+
+::component-example
+---
+name: 'tree-model-value-example'
+collapse: true
+props:
+  class: 'w-60'
+---
+::
+
+If you want to prevent an item from being selected, you can use the `item.onSelect()`{lang="ts-type"} property:
+
+::component-example
+---
+name: 'tree-on-select-example'
+collapse: true
+props:
+  class: 'w-60'
+---
+::
+
+::note
+This lets you expand or collapse a parent item without selecting it.
+::
+
+### Control expanded items
+
+You can control the expanded items by using the `default-expanded` prop or the `v-model` directive.
+
+::component-example
+---
+name: 'tree-expanded-example'
+collapse: true
+props:
+  class: 'w-60'
+---
+::
+
+If you want to prevent an item from being expanded, you can use the `item.onToggle()`{lang="ts-type"} property:
+
+::component-example
+---
+name: 'tree-on-toggle-example'
+collapse: true
+props:
+  class: 'w-60'
+---
+::
+
+::note
+This lets you select a parent item without expanding or collapsing its children.
+::
+
+### With custom slot
+
+Use the `item.slot` property to customize a specific item.
+
+::component-example
+---
+name: 'tree-custom-slot-example'
+collapse: true
+props:
+  class: 'w-60'
+---
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme
diff --git a/docs/public/components/dark/tree.png b/docs/public/components/dark/tree.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e601a3f87e79580a8790d7982711697a18b0145
GIT binary patch
literal 6504
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
JV5{%hzXEO9id+By

literal 0
HcmV?d00001

diff --git a/docs/public/components/light/tree.png b/docs/public/components/light/tree.png
new file mode 100644
index 0000000000000000000000000000000000000000..0effd19698b6d775548da4d3172c68db3ac200a8
GIT binary patch
literal 6753
zcmeHLdpy+X{(rvXnoCMW?n+`ql52^XN`zciyM(X^xf6@VWu~<y>sCux#I&d_hR~49
zpi^jLsF88MY-$i1avNsM_k5@JoNYVjyk2`czt_HA=l42)%=3Nb^*r-@p6@g7=lyxV
zKZ&;1W}-sULI40!^W!FV0PrAP=&m3?@{oUyq9TtCA;%rV0FY4TejszZU31(iVRmLm
zKv}2k6!L}F=djgb04mai+3tJ*NG+S29R4B-njP-4%ySrJ&Uc*^PdCrMoO2<^UQ+I?
z?@5bGM?!bR>?qpnaxIs!JhG%PsW9i_v*1#VYp!a4;&rm_iKw06r6a+|cQ|J2NF;w}
z9QtFcf=%a;&D*VvAGOERY8yJI`NaLop~5qV7-5}Xmpy5vExRHcahwzeKv4#TbocK>
z8bzi5b^qZUCQzywWHPyLXdtn7(6EABHMkaxuPU;;{iv4Hct4~O&A)fMALiK?dezk_
zdkKnEJnR*w9T5pHbyYT%ivu4ktZ=m9`DZKi*cpqj3EOxvT7p3JvJMk2U!u@7DV97F
zh1mI+JoJR*?hw7%hTHfo3NebbT1VPBr;v3FY`us}wB6)OM~iaGztDU%b`6Thjh(Pm
z%bp_7JSi3?u2k1BLNN>}cMKE|6j)QeUi1UJ*e*^`rxuxFgDn}MQ=Hv|6<)BlnKq4E
zw>#0K3O%`ror;<6>Kz<}7V`lfb({rv%RB0?qrAc!o646s)nrfMO<OO#8}Ue4zfc(_
z2DZi{_`oL%BJJbLpVoa`3o7R)=c}?=OQDBi7Un&?h)cB<)1>VR#FoY9Cdnc$qJS{8
zN5*+D8d`k*)=ztlwdZr0I$4z)wG~p@=#JL3m5GfFZ<fy}-E7La{JQu8FtAQio35y;
zmwXuC1F-E9imJ6b%%+9m;iCeuc^$oTC9-hUPaELRi38hnzI1qMp{2Uqrnhq_S9EN~
z0#421_~eedQ+FL6kQaP;6krmIA&j9m%qs5PzNxuC!+wr43d3ErC!_A0=OQldBeIQL
z&f<Oq27|mH<5bQ%!@kaOyFoP7=#Xb2iI&0<IMzJ)0OzD}UoTwuj^r?lr#3`rQ$`<q
z;f>EC)%-9VxdzK(hui7iL%2C-_42Yd+VrgIo%v^1nQs@w#w~gj6W+3xbIW1f`#9~A
z0?r9|ed1)}vKVIt#u0`}k?qNOnZw6qSP9)@IQp$x=6H+W4FULP_FwF#{jJ=zGhCeb
zj>oSxIc?a-6yOC<Nd>s`cFYTKL2<b*(H^srvj;^bjE*U60=6E#sdGt2qS71Fy?eTH
z?tQu8Tm>3Mr99w=@c=Jgf4)$DSQ-b<f%_qxnPJoLOndb)1NH%wcs#Dzs@c{fMIU-f
z(IS{*ch0$A640z!h6|LZyuW%(85E3KeCe3%RxZUpO6Tr4_B5;*WTW@v$tm4gkxjds
zn3E@nsG@S+>%6=NEH+=+%_qWvAfTM({dTaw3#Rqu_CJ`q{m=(a4=<uG5>0>c>FI8U
z$^P-g@*XV$cv)6iK_W|HY&6RC3X#i2y3rmgPE9}T^M)c{C#Onb-+Is_fP&frL%ob5
zB33-2?n+~VHvm<9`bK;W^}yI?ymXvf%t|so{OA~^>-96{y^(?aydmPq?MOh-Za@TJ
zavKC%ev$w8VUADMP$!E3Ma}<&LeK35sguvfeY94l$D^3^@s=k}(_x;y{#wRPNmI8I
zw@cMY11^6M{3$7v>{WNYxCZn}Fw8)JO>0BTv$c`4_E;-P{K-`snN$-1q3XWpha(&7
zSy}P$I#oBau}OyFkPCsuOaSV>_vUnq;OeO)?G<kxFsb2;$ERu#OG&y5O>S7LaZ@AX
zGThT;e^)*IaZdcG$N8^~s$GN4K2J$YeUw#z+wO3u`T%4bU=Q%A#r<$laqh*zYy7Y_
zn$n`6X)kQVw4qC8I=T6;<v@hT2plU`H&%0IR_?|F=4zJ8MFl48xaQRD#|O6l0KmcJ
z@Ea@;6@B8YA+>bPF}->Zgt@u_5bo~HLr2$qcD;C;FnGHQiR5DVmw0lksehoG;i0Gl
zojKv!``#}Qv0!Rcr^|_BLHkx)%zXT|DaI0~b}0hY{SXK*4gD4zx8V(PIA|BPW?wj0
z_1bp~9w9xT^}gP23%=_N<Gw=}JJ?3=V4MU7OF5n}m_Ws^(H^NlKvql*U>v9?;#63x
zZDqY4*gNa}I52hwIbgLOOP={zeYYC#C9(7}^Im(+0eK!kw(sv77!fAi%5=zmHtLW#
z@N_C4TXlDFzo}W-qtB58Zs{QRXT!1c!`di>7WC02X5-yh|MpE+YFe%>_4N-Y{qn#M
zkYCAzvB%U#P7@rs2jE{+@gdy%CuiyZ0yqlX@{9@J)yQT)yl+Pe6ea|e0w8Bu1rJ;3
z3)iTLa(v=)lF+WD((HoD)r-Zn72|agpel(#BA_vzh-MkhD1tc7tHcX9v0_H7Q!GR{
z&4ubM;bDR1LC+(DSG{jc5$`Pt;m>Ub7<U%~hF-C26^h5!7zHN#NJ@wL`~&XMmPrre
zv*JfA^m%w}_i_g)GE0**CTmup`K6?SBj4nWMY4?w1ic$PH7*EU$rl_d3+H{cNWA1Y
zc`}oq!*G!ah-Jv}2-zCnr2P{pg2hjOqBZJ&Q2bMw(J}cqW;_Ok)ctcPX8O$)bZDxR
zI6+ekL2%0)!D}w#tLd&dF+)K-H)YpxQ+AWH(=fnyb1BcrWzrao$Zr`))v<Jq@b%vU
z@^(XDEA8UKt0t@49cr>*YdXT95wn6~%hEDLQta&9*elg~E;Di`hR@Jbu;Kpf^<|!~
z-X^74kcF-wp%G>@utKo<8yroz33tl-=U)?UQ?4flG6>A)0paS`$8ph>&*rND)!+2s
zkZ}h8<C@*Z8^Bo9DTtdz-Wv9Ip(Dr=-6v<eI6Oe*C;%?EU8OGvH?7v`mf*6(t?H_=
z&mttjB<a2LFd{V!By$=qo?o(Fd7gW*I7{o`IptJ8UoQ>sH<VU3BZ-l}`HHnr-KwLJ
zbOFuT`4YZCqpY;8^Np*Bm_5&=#tHytnafM?dhki)APO`v09@G&Avs%WGt&H_u9S>i
ztvJBA@*+PtV}djo)BpSK%hRAgYLV&KvA$*?-?$o8QAt}H>RWP3PNR8X{dSsOD&q&X
zLDy1<vt)qvJ5Q2YkG=Mjs7q@4)1kiP9~8XD+gM=&u94A|o4ehtOqQq^Abab>6yYVj
zDdV&>dvx{9n;Y@)E|;(gR{gUWk`%xkKvYky&H}u+>M_`R%O4R)NF?hw5MJEb$<g1R
zj%!-XX-&b#oQ4Ury$u0Dt?L3!EpK0A1IQyAt$Uf1$75Dk6GDsqSQ0>>3I&uiz2W+6
zK@vd@((Ep_jwG((lrEETmCLAIitFlNOc4bvK4w&?sNk^EMF<~{_?-_KwcxW$_xOat
z#+?AKR39=jYjVt8nIHd<JImiJ>TYk}S>mjJf`AQul`nknu!sl{*o-Jv{ov<?&f|<4
z1(5C*b7mU>P`eZn75RQJMTr-K-5F9(eU{!`Bkf%fy-SomTCdl)CS}0C75^~1GG5$r
zf;pNW5YAS|FXmj`SR+<^VS<=wg9560YFu-$yD5F0%~e`PJ)9Xd2&qQ4Q;T>ECL+k4
ztJV_CdyD)_Bm<QoeC3^hfItS{)06Eblu1U3N#Nuen{G!Z$D|*ktF&O&i+Ug4qV#Wq
z;_TB}Z!OU>ci_|S-mjE5tdG_@bV`&^!*yc5d;n991lZ_||MN}v1nO~XVOy8So8Gqh
zIZ9j7H4<&2711>@_mB&`MQeY!E@GHUK7Pk@dEe4oy*t?ZWY8l8hI4g;=_%P9znyoo
z_)%j9zq_2yc*0BS7~B~dDJI8OnaVL79ZjK^Pyl#h4lq9#{{Y|Wk{oO_b}<YK)<Ytl
z69XB2)F)2P?|hd|(DU)}HG#k;I%1;VpqUz(4!xe!OA#S;t!8E~+Pl!nYF`f40E6sp
z2wHSlqr~tk<X``r9lG-Xm&T>mIQ}Ug=shwP<O0_F8SVnm+=8Z!2wPZjU4*(v1jw2o
z=HvrnWu4F}(l`Y|HX(Yi|KdWB${ry#Eg)-(%=(?;+~1{12t%w6Fu44iQEFNT+3Xie
zC4lb=5}C`a+(CcY9e}#!!r-;k{Jh4VeXJp+Uo~e}Gh$_ATQlS`P91E6m(LWA`#?p#
z$>H~7RYea4Tg4!>RN)BWzqiz0y*@LcQ16OJ|79N-!dD$b4)9A&(ML6-F~d1M=o59j
zU7X2hWj26}FTFhdqc!pQPOgEbI5%a#qbkukoye(n4CSV*j!KRiDJfpx8op44)iEa4
zREt1)-+ss=%76f@)d0XE0Ydvw2oe5qBK`Ea2P83i@<wqIVNJ%V3Bks$rKKceeI$*H
z7m~8`b1q-KQ38Ps=Z{}3YkZfEzMdyNp`SU=8M@FroFDLL(P7KyWSvc*&G$p&*N@^=
z&U)v5q9@1D=DkC!oFE;yKrRs?Y_*rdM#nbxEiX+CAQu;jlpYNTk239P139asn&g|I
zh4Ko$=(8+c&D`8j_(5<*L!G>Hc}@JdmhnMxw>Xab>DvRDe9iNB{{=guy%&TniHyKC
zd7kD_uI2s+i8i)tBR6}t0fUXmW@e_2tUz<i*-s;i9Q~~A2b}mo8&V-Oi}<BsFwr_^
zn*>Nr;^HmhTY>156xu*zMAY1we79zpt2y5<{}Dfq@fI@z4{i_ysqw$V;!j*GTE=!z
z-`i>ik(=fB-kc#kq8{MXsL05ng%!!(MGt3>`r@(vFA!nz9YqLaoX+`~aRv<|x$A@t
z3C$7%c^b&J%dozRjqCJjS}Dh!syj9C`q-cqAe4Sw!a3OAjg$~*9`uob4!Du|MhcoL
zBIFkI6wdpSNnV0uyVO5S?hxP$ae}~8H5B;np@ib6*PH%7l&JtAZ-@sdSKq6o(K_I`
zDcuyACFXt3;lc9r{X@wtvACpHJxhI9vYc$%Z*`<<b&#6yF9;IW%5^*C7aQEYvi&_Y
zey2S>#&F+ISM-Qw;612pB<sZRHErKkD^cviDyg(R@8D`sDLgT39ZoI13qlaPl<_+w
zq_V(9aUANTeqH|8TGHPsQbiSsZH@sUvfLWl-@TB@J1_Lw^KV`#81X{Qp;}%7%9)+>
zO-B8bOh+)Kt0WhsV8Qd;c}oE=;1(W`MDwvN4?wiSxqr0fK`7w$<;S-C=lq*h_bMfj
z>W3$1r6saU@VE-!FuPPf#b%nQaTKVyf5;}>GE%n?z`G&=WUB%6X@U_0eX-{nP^}uC
za}_wY1EJl{B?k|mNKMyZ20x~MW@e^kBzNV0*!m?oTV9Ux5hxEGS+?X8HvTopptL(U
z6VaM^46*m++~$j%$?1|uC6r!9+~=r_2kmtGX|e{nP4u*ZB!<D=?mf+A^c@}|x?8io
zCo7kz9EPuYz0?^rO;)$^Yluzb`R)c%P7BO{_$n6Yl60J|zGvi$8?4@~NikmOfP9{I
z!VPIizSdzfYG4H+q&^A-1_dHT%j<n{TX>_RIf*DA%bbSe`s{pk@94mb$wdWKiFYcz
nLSEq0)50H?@c-Q*R)ZT~u;upU+eIMe1DGGPHYq#u)i-|yvbDBr

literal 0
HcmV?d00001

diff --git a/playground-vue/src/app.vue b/playground-vue/src/app.vue
index 25baeede..2018ebb5 100644
--- a/playground-vue/src/app.vue
+++ b/playground-vue/src/app.vue
@@ -65,7 +65,8 @@ const components = [
   'table',
   'textarea',
   'toast',
-  'tooltip'
+  'tooltip',
+  'tree'
 ]
 
 const items = components.map(component => ({ label: upperName(component), to: `/components/${component}` }))
diff --git a/playground/app/app.vue b/playground/app/app.vue
index c382c904..8d9e75a4 100644
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -61,7 +61,8 @@ const components = [
   'table',
   'textarea',
   'toast',
-  'tooltip'
+  'tooltip',
+  'tree'
 ]
 
 const items = components.map(component => ({ label: upperName(component), to: `/components/${component}` }))
diff --git a/playground/app/pages/components/tree.vue b/playground/app/pages/components/tree.vue
new file mode 100644
index 00000000..6790386a
--- /dev/null
+++ b/playground/app/pages/components/tree.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { TreeItem } from '@nuxt/ui'
+import theme from '#build/ui/tree'
+
+const colors = Object.keys(theme.variants.color) as Array<keyof typeof theme.variants.color>
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
+
+const color = ref(theme.defaultVariants.color)
+const size = ref(theme.defaultVariants.size)
+
+const items: TreeItem[] = [
+  {
+    label: 'app',
+    defaultExpanded: true,
+    slot: 'app',
+    children: [{
+      label: 'composables',
+      defaultExpanded: true,
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    }, {
+      label: 'components',
+      children: [{
+        label: 'Home',
+        children: [
+          { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+          { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+        ]
+      }]
+    }]
+  },
+  { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
+  { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
+]
+
+const itemsWithMappedId = [
+  { id: 'id', title: 'hello' },
+  { id: 'id2', title: 'there' },
+  { id: 'id3', title: 'obiwan kenobi' }
+]
+
+const modelValue = ref<TreeItem>()
+const modelValues = ref<TreeItem[]>([])
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex items-center gap-2">
+      <USelect v-model="color" :items="colors" placeholder="Color" />
+      <USelect v-model="size" :items="sizes" placeholder="Size" />
+    </div>
+
+    <UTree
+      v-model="modelValues"
+      :items="items"
+      :color="color"
+      :size="size"
+      expanded-icon="i-lucide-chevron-up"
+      collapsed-icon="i-lucide-chevron-down"
+      multiple
+    />
+
+    <!-- Typescript tests -->
+    <template v-if="false">
+      <!-- @vue-expect-error - multiple props should type modelValue to array.  -->
+      <UTree :model-value="modelValue" :items="items" multiple />
+      <!-- @vue-expect-error - multiple props should type defaultValue to array.  -->
+      <UTree :default-value="modelValue" :items="items" multiple />
+      <!-- @vue-expect-error - multiple props should type @update:modelValue to array.  -->
+      <UTree :items="items" multiple @update:model-value="(payload: TreeItem) => payload" />
+      <!-- @vue-expect-error - default should type modelValue to single item.  -->
+      <UTree :model-value="modelValues" :items="items" />
+      <!-- @vue-expect-error - default should type defaultValue to single item.  -->
+      <UTree :default-value="modelValues" :items="items" />
+      <!-- @vue-expect-error - default should type @update:modelValue to single item.  -->
+      <UTree :items="items" @update:model-value="(payload: TreeItem[]) => payload" />
+
+      <!-- @vue-expect-error - value key should type v-model.  -->
+      <UTree v-model="modelValue" :items="itemsWithMappedId" value-key="id" />
+      <!-- @vue-expect-error - label key should type v-model.  -->
+      <UTree v-model="modelValue" :items="itemsWithMappedId" label-key="title" />
+    </template>
+  </div>
+</template>
diff --git a/src/devtools/meta.ts b/src/devtools/meta.ts
index fa48a29e..abe21e28 100644
--- a/src/devtools/meta.ts
+++ b/src/devtools/meta.ts
@@ -97,7 +97,7 @@ export function devtoolsMetaPlugin({ resolve, options, templates }: { resolve: R
                     && !tag.text?.includes('appConfig'))?.text
                     ?? template?.defaultVariants?.[prop.name]
 
-                if (typeof defaultValue === 'string') defaultValue = defaultValue?.replaceAll(/["'`]/g, '')
+                if (typeof defaultValue === 'string') defaultValue = defaultValue?.replace(/\s+as\s+\w+$/g, '').replaceAll(/["'`]/g, '')
                 if (defaultValue === 'true') defaultValue = true
                 if (defaultValue === 'false') defaultValue = false
                 if (!Number.isNaN(Number.parseInt(defaultValue))) defaultValue = Number.parseInt(defaultValue)
diff --git a/src/runtime/components/Tree.vue b/src/runtime/components/Tree.vue
new file mode 100644
index 00000000..a374e1d8
--- /dev/null
+++ b/src/runtime/components/Tree.vue
@@ -0,0 +1,231 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { TreeRootProps, TreeRootEmits } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/tree'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
+import type { PartialString, DynamicSlots, MaybeMultipleModelValue, SelectItemKey } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { tree: Partial<typeof theme> } }
+
+const tree = tv({ extend: tv(theme), ...(appConfig.ui?.tree || {}) })
+
+type TreeVariants = VariantProps<typeof tree>
+
+export type TreeItem = {
+  icon?: string
+  label?: string
+  trailingIcon?: string
+  defaultExpanded?: boolean
+  disabled?: boolean
+  value?: string
+  slot?: string
+  children?: TreeItem[]
+  onToggle?(e: Event): void
+  onSelect?(e?: Event): void
+}
+
+export interface TreeProps<T extends TreeItem, M extends boolean = false, K extends SelectItemKey<T> | undefined = undefined> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'ul'
+   */
+  as?: any
+  color?: TreeVariants['color']
+  size?: TreeVariants['size']
+  /**
+   * The key used to get the value from the item.
+   * @defaultValue 'value'
+   */
+  valueKey?: K
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: K
+  /**
+   * The icon displayed on the right side of a parent node.
+   * @defaultValue appConfig.ui.icons.chevronDown
+   */
+  trailingIcon?: string
+  /**
+   * The icon displayed when a parent node is expanded.
+   * @defaultValue appConfig.ui.icons.folderOpen
+   */
+  expandedIcon?: string
+  /**
+   * The icon displayed when a parent node is collapsed.
+   * @defaultValue appConfig.ui.icons.folder
+   */
+  collapsedIcon?: string
+  items?: T[]
+  /** The controlled value of the Tree. Can be bind as `v-model`. */
+  modelValue?: MaybeMultipleModelValue<T, M>
+  /** The value of the Tree when initially rendered. Use when you do not need to control the state of the Tree. */
+  defaultValue?: MaybeMultipleModelValue<T, M>
+  /** Whether multiple options can be selected or not. */
+  multiple?: M & boolean
+  class?: any
+  ui?: PartialString<typeof tree.slots>
+}
+
+export type TreeEmits<T, M extends boolean = false> = Omit<TreeRootEmits, 'update:modelValue'> & {
+  'update:modelValue': [payload: MaybeMultipleModelValue<T, M>]
+}
+
+type SlotProps<T> = (props: { item: T, index: number, level: number, expanded: boolean, selected: boolean }) => any
+
+export type TreeSlots<T extends { slot?: string }> = {
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
+
+extendDevtoolsMeta({ defaultProps: {
+  items: [
+    {
+      label: 'app',
+      icon: 'i-lucide-folder',
+      defaultExpanded: true,
+      children: [{
+        label: 'composables',
+        icon: 'i-lucide-folder',
+        defaultExpanded: true,
+        children: [
+          { label: 'useAuth.ts', icon: 'vscode-icons:file-type-typescript' },
+          { label: 'useUser.ts', icon: 'vscode-icons:file-type-typescript' }
+        ]
+      },
+      {
+        label: 'components',
+        icon: 'i-lucide-folder',
+        children: [
+          {
+            label: 'Home',
+            icon: 'i-lucide-folder',
+            children: [
+              { label: 'Card.vue', icon: 'vscode-icons:file-type-vue' },
+              { label: 'Button.vue', icon: 'vscode-icons:file-type-vue' }
+            ]
+          }
+        ]
+      }]
+    },
+    { label: 'app.vue', icon: 'vscode-icons:file-type-vue' },
+    { label: 'nuxt.config.ts', icon: 'vscode-icons:file-type-nuxt' }
+  ]
+} })
+</script>
+
+<script setup lang="ts" generic="T extends TreeItem, M extends boolean = false, K extends SelectItemKey<T> | undefined = undefined">
+import { computed } from 'vue'
+import { TreeRoot, TreeItem, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick, createReusableTemplate } from '@vueuse/core'
+import { get } from '../utils'
+import UIcon from './Icon.vue'
+
+const props = withDefaults(defineProps<TreeProps<T, M, K>>(), {
+  labelKey: 'label' as never,
+  valueKey: 'value' as never
+})
+const emits = defineEmits<TreeEmits<T, M>>()
+const slots = defineSlots<TreeSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'items', 'multiple', 'expanded', 'disabled', 'propagateSelect'), emits)
+
+const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate<{ items?: T[], level: number }>({
+  props: {
+    items: Array as PropType<T[]>,
+    level: Number
+  }
+})
+
+const ui = computed(() => tree({
+  color: props.color,
+  size: props.size
+}))
+
+function getItemLabel(item: T) {
+  return get(item, props.labelKey as string)
+}
+
+function getItemValue(item?: T) {
+  return get(item, props.valueKey as string) ?? get(item, props.labelKey as string)
+}
+
+function getDefaultOpenedItems(item: T): string[] {
+  const currentItem = item.defaultExpanded ? getItemValue(item) : null
+  const childItems = item.children?.flatMap(child => getDefaultOpenedItems(child as T)) ?? []
+
+  return [currentItem, ...childItems].filter(Boolean) as string[]
+}
+
+const defaultExpanded = computed(() => props.defaultExpanded ?? props.items?.flatMap(getDefaultOpenedItems))
+</script>
+
+<!-- eslint-disable vue/no-template-shadow -->
+<template>
+  <DefineTreeTemplate v-slot="{ items, level }">
+    <li
+      v-for="(item, index) in items"
+      :key="`${level}-${index}`"
+      :class="level > 0 ? ui.itemWithChildren({ class: props.ui?.itemWithChildren }) : ui.item({ class: props.ui?.item })"
+    >
+      <TreeItem
+        v-slot="{ isExpanded, isSelected }"
+        as-child
+        :level="level"
+        :value="item"
+        @toggle="item.onToggle"
+        @select="item.onSelect"
+      >
+        <button :disabled="item.disabled || disabled" :class="ui.link({ class: props.ui?.link, selected: isSelected, disabled: item.disabled || disabled })">
+          <slot :name="item.slot || 'item'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }">
+            <slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }">
+              <UIcon
+                v-if="item.icon"
+                :name="item.icon"
+                :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
+              />
+              <UIcon
+                v-else-if="item.children?.length"
+                :name="isExpanded ? (expandedIcon ?? appConfig.ui.icons.folderOpen) : (collapsedIcon ?? appConfig.ui.icons.folder)"
+                :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
+              />
+            </slot>
+
+            <span v-if="getItemLabel(item) || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
+              <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }">
+                {{ getItemLabel(item) }}
+              </slot>
+            </span>
+
+            <span v-if="item.trailingIcon || item.children?.length || !!slots[item.slot ? `${item.slot}-trailing`: 'item-trailing']" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
+              <slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }">
+                <UIcon v-if="item.trailingIcon" :name="item.trailingIcon" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon })" />
+                <UIcon v-else-if="item.children?.length" :name="trailingIcon ?? appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon })" />
+              </slot>
+            </span>
+          </slot>
+        </button>
+
+        <ul v-if="item.children?.length && isExpanded" :class="ui.listWithChildren({ class: props.ui?.listWithChildren })">
+          <ReuseTreeTemplate :items="(item.children as T[])" :level="level + 1" />
+        </ul>
+      </TreeItem>
+    </li>
+  </DefineTreeTemplate>
+
+  <TreeRoot
+    v-bind="rootProps"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :get-key="getItemValue"
+    :default-expanded="defaultExpanded"
+    :selection-behavior="selectionBehavior"
+  >
+    <ReuseTreeTemplate :items="items" :level="0" />
+  </TreeRoot>
+</template>
diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts
index 046c33e4..51bc2ab7 100644
--- a/src/runtime/types/index.ts
+++ b/src/runtime/types/index.ts
@@ -46,6 +46,7 @@ export * from '../components/Textarea.vue'
 export * from '../components/Toast.vue'
 export * from '../components/Toaster.vue'
 export * from '../components/Tooltip.vue'
+export * from '../components/Tree.vue'
 export * from './form'
 export * from './locale'
 export * from './utils'
diff --git a/src/runtime/types/utils.ts b/src/runtime/types/utils.ts
index e24ac397..e28fa209 100644
--- a/src/runtime/types/utils.ts
+++ b/src/runtime/types/utils.ts
@@ -36,6 +36,8 @@ export type SelectModelValueEmits<T, V, M extends boolean = false, DV = T> = {
   'update:modelValue': [payload: SelectModelValue<T, V, M, DV>]
 }
 
+export type MaybeMultipleModelValue<T, M extends boolean = false> = (T extends infer U ? M extends true ? U[] : U : never)
+
 export type StringOrVNode =
   | string
   | VNode
diff --git a/src/theme/icons.ts b/src/theme/icons.ts
index eab1d33e..d9477de5 100644
--- a/src/theme/icons.ts
+++ b/src/theme/icons.ts
@@ -11,6 +11,8 @@ export default {
   close: 'i-lucide-x',
   ellipsis: 'i-lucide-ellipsis',
   external: 'i-lucide-arrow-up-right',
+  folder: 'i-lucide-folder',
+  folderOpen: 'i-lucide-folder-open',
   loading: 'i-lucide-refresh-cw',
   minus: 'i-lucide-minus',
   plus: 'i-lucide-plus',
diff --git a/src/theme/index.ts b/src/theme/index.ts
index f4c7f753..4104fc62 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -46,3 +46,4 @@ export { default as textarea } from './textarea'
 export { default as toast } from './toast'
 export { default as toaster } from './toaster'
 export { default as tooltip } from './tooltip'
+export { default as tree } from './tree'
diff --git a/src/theme/tree.ts b/src/theme/tree.ts
new file mode 100644
index 00000000..3b59e354
--- /dev/null
+++ b/src/theme/tree.ts
@@ -0,0 +1,82 @@
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
+  slots: {
+    root: 'relative isolate',
+    item: '',
+    listWithChildren: 'ms-4.5 border-s border-(--ui-border)',
+    itemWithChildren: 'ps-1.5 -ms-px',
+    link: 'relative group w-full flex items-center text-sm before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
+    linkLeadingIcon: 'shrink-0',
+    linkLabel: 'truncate',
+    linkTrailing: 'ms-auto inline-flex gap-1.5 items-center',
+    linkTrailingIcon: 'shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180'
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
+        link: `focus-visible:before:ring-(--ui-${color})`
+      }])),
+      neutral: {
+        link: 'focus-visible:before:ring-(--ui-border-inverted)'
+      }
+    },
+    size: {
+      xs: {
+        link: 'px-2 py-1 text-xs gap-1',
+        linkLeadingIcon: 'size-4',
+        linkTrailingIcon: 'size-4'
+      },
+      sm: {
+        link: 'px-2.5 py-1.5 text-xs gap-1.5',
+        linkLeadingIcon: 'size-4',
+        linkTrailingIcon: 'size-4'
+      },
+      md: {
+        link: 'px-2.5 py-1.5 text-sm gap-1.5',
+        linkLeadingIcon: 'size-5',
+        linkTrailingIcon: 'size-5'
+      },
+      lg: {
+        link: 'px-3 py-2 text-sm gap-2',
+        linkLeadingIcon: 'size-5',
+        linkTrailingIcon: 'size-5'
+      },
+      xl: {
+        link: 'px-3 py-2 text-base gap-2',
+        linkLeadingIcon: 'size-6',
+        linkTrailingIcon: 'size-6'
+      }
+    },
+    selected: {
+      true: {
+        link: 'before:bg-(--ui-bg-elevated)'
+      },
+      false: {
+        link: ['hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50', options.theme.transitions && 'transition-colors before:transition-colors']
+      }
+    },
+    disabled: {
+      true: {
+        link: 'cursor-not-allowed opacity-75'
+      }
+    }
+  },
+  compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
+    color,
+    selected: true,
+    class: {
+      link: `text-(--ui-${color})`
+    }
+  })), {
+    color: 'neutral',
+    selected: true,
+    class: {
+      link: 'text-(--ui-text-highlighted)'
+    }
+  }],
+  defaultVariants: {
+    color: 'primary',
+    size: 'md'
+  }
+})
diff --git a/test/components/Tree.spec.ts b/test/components/Tree.spec.ts
new file mode 100644
index 00000000..358be821
--- /dev/null
+++ b/test/components/Tree.spec.ts
@@ -0,0 +1,69 @@
+import { describe, it, expect } from 'vitest'
+import Tree, { type TreeProps, type TreeSlots, type TreeItem } from '../../src/runtime/components/Tree.vue'
+import ComponentRender from '../component-render'
+import theme from '#build/ui/tree'
+
+describe('Tree', () => {
+  const sizes = Object.keys(theme.variants.size) as any
+
+  const items: TreeItem[] = [
+    {
+      value: 'root',
+      label: 'app',
+      slot: 'app',
+      children: [{
+        label: 'composables',
+        icon: 'i-lucide-house',
+        children: [
+          { label: 'useAuth.ts', icon: 'vscode-icons:file-type-typescript' },
+          { label: 'useUser.ts', icon: 'vscode-icons:file-type-typescript' }
+        ]
+      }]
+    },
+    { value: 'app-vue', label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
+    { value: 'nuxt-config-ts', label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
+  ]
+
+  const props = { items }
+
+  it.each([
+    // Props
+    ['with items', { props }],
+    ['with modelValue', { props: { ...props, modelValue: items[0] } }],
+    ['with defaultValue', { props: { ...props, defaultValue: items[0] } }],
+    // Expanded
+    ['with expanded', { props: { ...props, expanded: [items[0]] } }],
+    ['with defaultExpanded', { props: { ...props, defaultExpanded: [items[0]] } }],
+    // Key mapping
+    ['with valueKey', { props: { ...props, valueKey: 'label' } }],
+    ['with labelKey', { props: { ...props, labelKey: 'value' } }],
+    // Multiple
+    ['with multiple', { props: { ...props, multiple: true } }],
+    ['with multiple and modelValue', { props: { ...props, multiple: true, modelValue: [items[0], items[1]] } }],
+    ['with multiple and defaultValue', { props: { ...props, multiple: true, defaultValue: [items[0], items[1]] } }],
+    // Disabled
+    ['with disabled', { props: { ...props, disabled: true } }],
+    // Item properties
+    ['with defautExpanded item', { props: { items: [{ label: 'Default Expanded', defaultExpanded: true, children: items }] } }],
+    ['with disabled item', { props: { items: [{ label: 'Disabled item', disabled: true, children: items }] } }],
+    // Icons
+    ['with trailingIcon', { props: { ...props, trailingIcon: 'i-lucide-arrow-down' } }],
+    ['with expandedIcon', { props: { items: [{ label: 'Default Expanded', defaultExpanded: true, children: items }], expandedIcon: 'i-lucide-chevron-up' } }],
+    ['with collapsedIcon', { props: { items: [{ label: 'Default Collapsed', defaultExpanded: false, children: items }], collapsedIcon: 'i-lucide-chevron-down' } }],
+    // Style variants
+    ...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
+    ['with neutral color', { props: { ...props, color: 'neutral' } }],
+    ['with as', { props: { ...props, as: 'div' } }],
+    ['with class', { props: { ...props, class: 'absolute' } }],
+    ['with ui', { props: { ...props, ui: { link: 'font-bold' } } }],
+    // Slots
+    ['with default slot', { props, slots: { default: () => 'default slot' } }],
+    ['with item slot', { props, slots: { item: () => 'item slot' } }],
+    ['with item-leading slot', { props, slots: { 'item-leading': () => 'leading slot' } }],
+    ['with item-trailing slot', { props, slots: { 'item-trailing': () => 'trailing slot' } }],
+    ['with dynamic slot', { props, slots: { app: () => 'dynamic slot' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: Partial<TreeProps<any>>, slots?: Partial<TreeSlots<any>> }) => {
+    const html = await ComponentRender(nameOrHtml, options, Tree)
+    expect(html).toMatchSnapshot()
+  })
+})
diff --git a/test/components/__snapshots__/Tree-vue.spec.ts.snap b/test/components/__snapshots__/Tree-vue.spec.ts.snap
new file mode 100644
index 00000000..9a4ae94b
--- /dev/null
+++ b/test/components/__snapshots__/Tree-vue.spec.ts.snap
@@ -0,0 +1,521 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Tree > renders with as correctly 1`] = `
+"<div role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</div>"
+`;
+
+exports[`Tree > renders with class correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="isolate absolute">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with collapsedIcon correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Default Collapsed</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with default slot correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with defaultExpanded correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with defaultValue correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with defautExpanded item correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="true" aria-level="0" data-indent="0" data-expanded="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Default Expanded</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <ul class="ms-4.5 border-s border-(--ui-border)">
+      <li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+        <!--v-if-->
+      </li>
+      <li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+          <!--v-if-->
+        </button>
+        <!--v-if-->
+      </li>
+      <li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+          <!--v-if-->
+        </button>
+        <!--v-if-->
+      </li>
+    </ul>
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with disabled correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button disabled="" class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors cursor-not-allowed opacity-75" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button disabled="" class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors cursor-not-allowed opacity-75" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button disabled="" class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors cursor-not-allowed opacity-75" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with disabled item correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button disabled="" class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors cursor-not-allowed opacity-75" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Disabled item</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with dynamic slot correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="">dynamic slot</button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with expanded correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with expandedIcon correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="true" aria-level="0" data-indent="0" data-expanded="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Default Expanded</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <ul class="ms-4.5 border-s border-(--ui-border)">
+      <li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+        <!--v-if-->
+      </li>
+      <li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+          <!--v-if-->
+        </button>
+        <!--v-if-->
+      </li>
+      <li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+          <!--v-if-->
+        </button>
+        <!--v-if-->
+      </li>
+    </ul>
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with item slot correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="">item slot</button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="">item slot</button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with item-leading slot correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="">leading slot<span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="">leading slot<span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with item-trailing slot correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span><span class="ms-auto inline-flex gap-1.5 items-center">trailing slot</span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span><span class="ms-auto inline-flex gap-1.5 items-center">trailing slot</span></button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with items correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with labelKey correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">root</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app-vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt-config-ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with modelValue correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with multiple and defaultValue correctly 1`] = `
+"<ul role="tree" aria-multiselectable="true" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with multiple and modelValue correctly 1`] = `
+"<ul role="tree" aria-multiselectable="true" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with multiple correctly 1`] = `
+"<ul role="tree" aria-multiselectable="true" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with neutral color correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with size lg correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-sm gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-sm gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-sm gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with size md correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with size sm correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-xs gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-xs gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-xs gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with size xl correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-base gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-base gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-base gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with size xs correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2 py-1 text-xs gap-1 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2 py-1 text-xs gap-1 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2 py-1 text-xs gap-1 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with trailingIcon correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with ui correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors font-bold" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors font-bold" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors font-bold" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with valueKey correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
diff --git a/test/components/__snapshots__/Tree.spec.ts.snap b/test/components/__snapshots__/Tree.spec.ts.snap
new file mode 100644
index 00000000..1299d55a
--- /dev/null
+++ b/test/components/__snapshots__/Tree.spec.ts.snap
@@ -0,0 +1,521 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Tree > renders with as correctly 1`] = `
+"<div role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</div>"
+`;
+
+exports[`Tree > renders with class correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="isolate absolute">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with collapsedIcon correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:chevron-down shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Default Collapsed</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with default slot correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with defaultExpanded correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with defaultValue correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with defautExpanded item correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="true" aria-level="0" data-indent="0" data-expanded="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder-open shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Default Expanded</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <ul class="ms-4.5 border-s border-(--ui-border)">
+      <li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+        <!--v-if-->
+      </li>
+      <li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+          <!--v-if-->
+        </button>
+        <!--v-if-->
+      </li>
+      <li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+          <!--v-if-->
+        </button>
+        <!--v-if-->
+      </li>
+    </ul>
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with disabled correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button disabled="" class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors cursor-not-allowed opacity-75" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button disabled="" class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors cursor-not-allowed opacity-75" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button disabled="" class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors cursor-not-allowed opacity-75" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with disabled item correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button disabled="" class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors cursor-not-allowed opacity-75" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Disabled item</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with dynamic slot correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="">dynamic slot</button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with expanded correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with expandedIcon correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="true" aria-level="0" data-indent="0" data-expanded="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:chevron-up shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Default Expanded</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <ul class="ms-4.5 border-s border-(--ui-border)">
+      <li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+        <!--v-if-->
+      </li>
+      <li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+          <!--v-if-->
+        </button>
+        <!--v-if-->
+      </li>
+      <li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+          <!--v-if-->
+        </button>
+        <!--v-if-->
+      </li>
+    </ul>
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with item slot correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="">item slot</button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="">item slot</button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with item-leading slot correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="">leading slot<span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="">leading slot<span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with item-trailing slot correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span><span class="ms-auto inline-flex gap-1.5 items-center">trailing slot</span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span><span class="ms-auto inline-flex gap-1.5 items-center">trailing slot</span></button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with items correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with labelKey correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">root</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app-vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt-config-ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with modelValue correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with multiple and defaultValue correctly 1`] = `
+"<ul role="tree" aria-multiselectable="true" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with multiple and modelValue correctly 1`] = `
+"<ul role="tree" aria-multiselectable="true" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with multiple correctly 1`] = `
+"<ul role="tree" aria-multiselectable="true" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with neutral color correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with size lg correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-sm gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-sm gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-sm gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with size md correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with size sm correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-xs gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-4" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-4" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-xs gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-4" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-xs gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-4" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with size xl correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-base gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-6" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-6" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-base gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-6" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-base gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-6" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with size xs correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2 py-1 text-xs gap-1 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-4" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-4" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2 py-1 text-xs gap-1 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-4" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2 py-1 text-xs gap-1 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-4" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with trailingIcon correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:arrow-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with ui correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors font-bold" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors font-bold" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors font-bold" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
+
+exports[`Tree > renders with valueKey correctly 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+  <li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </li>
+</ul>"
+`;