feat(tree-view): add TreeView

docs/src/App.svelte

@@ -84,6 +84,8 @@
   @import "carbon-components/scss/globals/scss/_css--body";
   @import "carbon-components/scss/globals/grid/grid";
 
+  @import "carbon-components/src/components/treeview/treeview";
+
   // Import all component styles
   @import "carbon-components/scss/globals/scss/styles";
 </style>

docs/src/COMPONENT_API.json

@@ -11834,6 +11834,121 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "button" }
     },
+    {
+      "moduleName": "TreeView",
+      "filePath": "src/TreeView/TreeView.svelte",
+      "props": [
+        {
+          "name": "children",
+          "kind": "let",
+          "description": "Provide an array of children nodes to render",
+          "type": "TreeNode & { children?: TreeNode[] }",
+          "value": "[]",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "activeId",
+          "kind": "let",
+          "description": "Set the current active node id\nOnly one node can be active",
+          "type": "TreeNodeId",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "multiselect",
+          "kind": "let",
+          "description": "Set to `true` to allow multiple selected nodes",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "selectedIds",
+          "kind": "let",
+          "description": "Set the node ids to be selected",
+          "type": "TreeNodeIds",
+          "value": "[]",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "size",
+          "kind": "let",
+          "description": "Specify the TreeView size",
+          "type": "\"default\" | \"compact\"",
+          "value": "\"default\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "labelText",
+          "kind": "let",
+          "description": "Specify the label text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "hideLabel",
+          "kind": "let",
+          "description": "Set to `true` to visually hide the label text",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [
+        {
+          "name": "labelText",
+          "default": false,
+          "fallback": "{labelText}",
+          "slot_props": "{}"
+        }
+      ],
+      "events": [
+        {
+          "type": "dispatched",
+          "name": "select",
+          "detail": "TreeNode & { expanded: boolean; leaf: boolean; }"
+        },
+        {
+          "type": "dispatched",
+          "name": "toggle",
+          "detail": "TreeNode & { expanded: boolean; leaf: boolean; }"
+        },
+        {
+          "type": "dispatched",
+          "name": "focus",
+          "detail": "TreeNode & { expanded: boolean; leaf: boolean; }"
+        },
+        { "type": "forwarded", "name": "keydown", "element": "ul" }
+      ],
+      "typedefs": [
+        {
+          "type": "string | number",
+          "name": "TreeNodeId",
+          "ts": "type TreeNodeId = string | number"
+        },
+        {
+          "type": "{ id: TreeNodeId; text: string; disabled?: boolean; }",
+          "name": "TreeNode",
+          "ts": "interface TreeNode { id: TreeNodeId; text: string; disabled?: boolean; }"
+        }
+      ],
+      "rest_props": { "type": "Element", "name": "ul" }
+    },
     {
       "moduleName": "Truncate",
       "filePath": "src/Truncate/Truncate.svelte",

docs/src/pages/_layout.svelte

@@ -20,7 +20,7 @@
   import Footer from "../components/Footer.svelte";
 
   const deprecated = ["ToggleSmall", "Icon"];
-  const new_components = ["ProgressBar", "RecursiveList"];
+  const new_components = ["ProgressBar", "RecursiveList", "TreeView"]];
 
   let isOpen = false;
   let isSideNavOpen = true;

docs/src/pages/components/TreeView.svx

@@ -0,0 +1,18 @@
+<script>
+  import { TreeView } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+Note: every node MUST have an id.
+
+### Default
+
+<FileSource src="/framed/TreeView/TreeView" />
+
+### Compact size
+
+<FileSource src="/framed/TreeView/TreeViewCompact" />
+
+### With icons
+
+<FileSource src="/framed/TreeView/TreeViewIcons" />