feat(TreeView): add selectNode method

Add imperative selectNode(id) method to programmatically select a node
without changing focus or expansion state. This fills a gap where
selection was previously only possible through user interaction or the
more invasive showNode method.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: metonym

docs/src/pages/components/TreeView.svx

@@ -90,6 +90,12 @@ Use `TreeView.collapseNodes` to collapse specific nodes based on a condition.
 
 <FileSource src="/framed/TreeView/TreeViewCollapseNodes" />
 
+## Select a specific node
+
+Use `TreeView.selectNode` to programmatically select a node without changing expansion state or focus.
+
+<FileSource src="/framed/TreeView/TreeViewSelectNode" />
+
 ## Show a specific node
 
 Use `TreeView.showNode` to expand, select, and focus a specific node.

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

@@ -0,0 +1,43 @@
+<script>
+  import { Button, ButtonSet, TreeView } from "carbon-components-svelte";
+
+  const nodeSpark = { id: 3, text: "Apache Spark" };
+  const nodeBlockchain = { id: 8, text: "IBM Blockchain Platform" };
+
+  let treeview = null;
+  let nodes = [
+    { id: 0, text: "AI / Machine learning" },
+    {
+      id: 1,
+      text: "Analytics",
+      nodes: [
+        {
+          id: 2,
+          text: "IBM Analytics Engine",
+          nodes: [nodeSpark, { id: 4, text: "Hadoop" }],
+        },
+        { id: 5, text: "IBM Cloud SQL Query" },
+        { id: 6, text: "IBM Db2 Warehouse on Cloud" },
+      ],
+    },
+    {
+      id: 7,
+      text: "Blockchain",
+      nodes: [{ id: 8, text: "IBM Blockchain Platform" }],
+    },
+  ];
+</script>
+
+<ButtonSet style="margin-bottom: var(--cds-spacing-05)">
+  {#each [nodeSpark, nodeBlockchain] as { id, text }}
+    <Button
+      on:click={() => {
+        treeview?.selectNode(id);
+      }}
+    >
+      Select "{text}"
+    </Button>
+  {/each}
+</ButtonSet>
+
+<TreeView bind:this={treeview} labelText="Cloud Products" {nodes} />

src/TreeView/TreeView.svelte

@@ -115,6 +115,14 @@
       .map((node) => node.id);
   }
 
+  /**
+   * Programmatically select a node by `id` without changing focus or expansion state
+   * @type {(id: TreeNodeId) => void}
+   */
+  export function selectNode(id) {
+    selectedIds = [id];
+  }
+
   /**
    * Programmatically show a node by `id`.
    * The matching node will be expanded, selected, and focused

tests/TreeView/TreeView.hierarchy.test.svelte

@@ -59,3 +59,4 @@
 >
   Expand some nodes
 </Button>
+<Button on:click={() => treeview.selectNode(3)}>Select Apache Spark</Button>

tests/TreeView/TreeView.test.svelte

@@ -78,3 +78,4 @@
 >
   Expand some nodes
 </Button>
+<Button on:click={() => treeview.selectNode(3)}>Select Apache Spark</Button>

tests/TreeView/TreeView.test.ts

@@ -79,4 +79,24 @@ describe.each(testCases)("$name", ({ component }) => {
       screen.getByText("IBM Analytics Engine").parentNode?.parentNode,
     ).toHaveAttribute("aria-expanded", "true");
   });
+
+  it("can programmatically select a node without affecting expansion or focus", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+
+    render(component);
+
+    noExpandedItems();
+
+    const selectButton = screen.getByText("Select Apache Spark");
+    await user.click(selectButton);
+
+    // Should not expand any nodes
+    noExpandedItems();
+
+    // Should update selectedIds
+    expect(consoleLog).toBeCalledWith("selectedIds", [3]);
+
+    // Should not trigger select event (no user interaction with tree)
+    expect(consoleLog).not.toBeCalledWith("select", expect.any(Object));
+  });
 });

types/TreeView/TreeView.svelte.d.ts

@@ -106,6 +106,11 @@ export default class TreeView extends SvelteComponentTyped<
    */
   collapseNodes: (filterId?: (node: TreeNode) => boolean) => void;
 
+  /**
+   * Programmatically select a node by `id` without changing focus or expansion state
+   */
+  selectNode: (id: TreeNodeId) => void;
+
   /**
    * Programmatically show a node by `id`.
    * The matching node will be expanded, selected, and focused