feat: add new tree-view component

feat: add indeterminate state

fix: rename item role

fix: aria attributes

fix: restore hover effect

fix: indeterminate state

chore: fix lint issue

fix: address (partially) review comment

fix: minor fix

feat: add keyboard navigation

fix: dependency name

fix: keyboard selection does not update all items

chore: minor changes

chore: remove leftover

chore: update documentation

feat: add lazy loading + several fixes

fix: add aria-busy attribute

fix: improve keyboard navigation and lazy loading

chore: fix linting issue

chore: minor fixes

fix: update component styling and slot

chore: remove exportparts attribute

fix: remove button margin for safari

fix: set correct part name

feat: implement selection modes and fix accessibility issues

chore: fix linting issues

chore: update docs

fix: minor fix

fix: treeitem height style

chore: update documentation

chore: refactor implementation

chore: implement unit tests

chore: update Enter key behavior

chore: update doc

chore: update doc

docs/_sidebar.md

@@ -64,6 +64,8 @@
   - [Tag](/components/tag)
   - [Textarea](/components/textarea)
   - [Tooltip](/components/tooltip)
+  - [Tree](/components/tree)
+  - [Tree Item](/components/tree-item)
   <!--plop:component-->
 
 - Utilities

docs/components/tree-item.md

@@ -0,0 +1,82 @@
+# Tree Item
+
+[component-header:sl-tree-item]
+
+A tree item is a hierarchical node of a tree.
+
+```html preview
+<sl-tree-item> Tree node </sl-tree-item>
+```
+
+## Examples
+
+### Nested tree items
+
+A tree item can contain other items, this allow the user to expand or collapse nested nodes accordingly.
+
+```html preview
+<sl-tree-item>
+  Parent Node
+  <sl-tree-item> Child 1 </sl-tree-item>
+  <sl-tree-item> Child 2 </sl-tree-item>
+  <sl-tree-item> Child 3 </sl-tree-item>
+</sl-tree-item>
+```
+
+### Expanded
+
+Use the `expanded` attribute to display the nested items.
+
+```html preview
+<sl-tree-item expanded>
+  Parent Node
+  <sl-tree-item> Child 1 </sl-tree-item>
+  <sl-tree-item> Child 2 </sl-tree-item>
+  <sl-tree-item> Child 3 </sl-tree-item>
+</sl-tree-item>
+```
+
+### Selected
+
+Use the `selected` attribute to the mark the item as selected.
+
+```html preview
+<sl-tree-item expanded>
+  Parent Node
+  <sl-tree-item> Child 1 </sl-tree-item>
+  <sl-tree-item selected> Child 2 </sl-tree-item>
+  <sl-tree-item> Child 3 </sl-tree-item>
+</sl-tree-item>
+```
+
+### Selectable
+
+Use the `selectable` attribute to display the checkbox.
+
+```html preview
+<sl-tree-item class="selectable" selectable>
+  Parent Node
+  <sl-tree-item selectable> Child 1 </sl-tree-item>
+  <sl-tree-item selectable> Child 2 </sl-tree-item>
+  <sl-tree-item selectable> Child 3 </sl-tree-item>
+</sl-tree-item>
+
+<script>
+  document.querySelector('sl-tree-item.selectable').addEventListener('click', ({ target }) => {
+    if (target.hasAttribute('selectable')) {
+      target.selected = !target.selected;
+    }
+  });
+</script>
+```
+
+### Lazy
+
+Use the `lazy` to specify that the content is not yet loaded. When the user tries to expand the node,
+a `sl-lazy-load` event is emitted.
+
+```html preview
+<sl-tree-item lazy> Parent Node </sl-tree-item>
+```
+
+[component-metadata:sl-tree-item]