docs(tree-view): add "Slottable node"

docs/src/pages/components/TreeView.svx

@@ -1,5 +1,5 @@
 <script>
-  import { InlineNotification } from "carbon-components-svelte";
+  import { InlineNotification, UnorderedList, ListItem } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -17,6 +17,23 @@ A parent node contains `children` while a leaf node does not.
 
 <FileSource src="/framed/TreeView/TreeView" />
 
+## Slottable node
+
+By default, each item renders the value of `node.text`. Use the data from `let:node` directive to override the default slot.
+
+The destructured `let:node` contains the following properties:
+
+<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
+  <ListItem><strong>id</strong>: the node id</ListItem>
+  <ListItem><strong>text</strong>: the node text</ListItem>
+  <ListItem><strong>expanded</strong>: true if the node is expanded</ListItem>
+  <ListItem><strong>leaf</strong>: true if the node does not have children</ListItem>
+  <ListItem><strong>disabled</strong>: true if the node is disabled</ListItem>
+  <ListItem><strong>selected</strong>: true if the node is selected</ListItem>
+</UnorderedList>
+
+<FileSource src="/framed/TreeView/TreeViewSlot" />
+
 ## Initial active node
 
 The active node can be set through `activeId`.

docs/src/pages/framed/TreeView/TreeViewSlot.svelte

@@ -0,0 +1,61 @@
+<script>
+  import { TreeView } from "carbon-components-svelte";
+
+  let activeId = 0;
+  let selectedIds = [0, 7, 9];
+  let children = [
+    { id: 0, text: "AI / Machine learning" },
+    {
+      id: 1,
+      text: "Analytics",
+      children: [
+        {
+          id: 2,
+          text: "IBM Analytics Engine",
+          children: [
+            { id: 3, text: "Apache Spark" },
+            { id: 4, text: "Hadoop" },
+          ],
+        },
+        { id: 5, text: "IBM Cloud SQL Query" },
+        { id: 6, text: "IBM Db2 Warehouse on Cloud" },
+      ],
+    },
+    {
+      id: 7,
+      text: "Blockchain",
+      children: [{ id: 8, text: "IBM Blockchain Platform" }],
+    },
+    {
+      id: 9,
+      text: "Databases",
+      children: [
+        { id: 10, text: "IBM Cloud Databases for Elasticsearch" },
+        { id: 11, text: "IBM Cloud Databases for Enterprise DB" },
+        { id: 12, text: "IBM Cloud Databases for MongoDB" },
+        { id: 13, text: "IBM Cloud Databases for PostgreSQL" },
+      ],
+    },
+    {
+      id: 14,
+      text: "Integration",
+      disabled: true,
+      children: [{ id: 15, text: "IBM API Connect", disabled: true }],
+    },
+  ];
+</script>
+
+<TreeView
+  labelText="Cloud Products"
+  activeId="{activeId}"
+  selectedIds="{selectedIds}"
+  children="{children}"
+  let:node
+>
+  <span
+    style:color="{node.selected ? "var(--cds-interactive-04)" : "inherit"}"
+    style:text-decoration="{node.disabled ? "inherit" : "underline"}"
+  >
+    {node.text} (id: {node.id})
+  </span>
+</TreeView>