fix tree single select behavior

docs/components/tree.md

@@ -73,11 +73,11 @@ const App = () => (
 
 ### Selection Modes
 
-Use the `selection` attribute to change the selection behavior of the tree.
+The `selection` attribute lets you change the selection behavior of the tree.
 
-- Set `single` to allow the selection of a single item (default).
-- Set `multiple` to allow the selection of multiple items.
-- Set `leaf` to allow the selection of a single leaf node. Clicking on a parent node will expand/collapse the node.
+- Use `single` to allow the selection of a single item (default).
+- Use `multiple` to allow the selection of multiple items.
+- Use `leaf` to only allow leaf nodes to be selected.
 
 ```html preview
 <sl-select id="selection-mode" value="single" label="Selection">

docs/resources/changelog.md

@@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
+- Improved single selection in `<sl-tree>` so the node expands/collapses when clicked
 - Improved RTL support for `<sl-image-comparer>`
 - Refactored components to extend from `ShoelaceElement` to make `dir` and `lang` reactive properties in all components
 

src/components/tree/tree.test.ts

@@ -273,7 +273,7 @@ describe('<sl-tree>', () => {
           // Assert
           expect(el.selectedItems.length).to.eq(1);
           expect(el.children[2]).to.have.attribute('selected');
-          expect(el.children[2]).not.to.have.attribute('expanded');
+          expect(el.children[2]).to.have.attribute('expanded');
         });
       });
 

src/components/tree/tree.ts

@@ -182,6 +182,7 @@ export default class SlTree extends ShoelaceElement {
       }
       this.syncTreeItems(selectedItem);
     } else if (this.selection === 'single' || selectedItem.isLeaf) {
+      selectedItem.expanded = !selectedItem.expanded;
       selectedItem.selected = true;
 
       this.syncTreeItems(selectedItem);