snice 3.4.0 → 3.5.0

package/dist/components/tree/snice-tree.js

@@ -1,9 +1,10 @@
-import { __esDecorate, __runInitializers } from 'tslib';
-import { element, property, queryAll, ready, watch, dispatch, render, styles, html, css } from 'snice';
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, property, queryAll, ready, watch, on, dispatch } from 'snice';
 import './snice-tree-item.js';
 import '../checkbox/snice-checkbox.js';
+import '../spinner/snice-spinner.js';
 
-var cssContent = ":host{display:block}.tree{font-family:var(--font-family, system-ui, -apple-system, sans-serif);font-size:var(--font-size-base, 1rem);color:var(--color-text,#1f2937);background-color:var(--color-background,#fff);border:1px solid var(--color-neutral-200,#e5e7eb);border-radius:var(--border-radius-md,.375rem);overflow:auto;max-height:var(--tree-max-height,100%)}.tree__content{padding:var(--spacing-xs,.5rem)}.tree--no-border{border:none}.tree__empty{padding:var(--spacing-lg,1.5rem);text-align:center;color:var(--color-text-muted,#6b7280);font-style:italic}";
+var cssContent = ":host{display:block}.tree{font-family:var(--snice-font-family, system-ui, -apple-system, sans-serif);font-size:var(--snice-font-size-base, 1rem);color:var(--snice-color-text,rgb(23 23 23));background-color:var(--snice-color-background,rgb(255 255 255));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.375rem);overflow:auto;max-height:var(--tree-max-height,100%)}.tree__content{padding:var(--snice-spacing-xs,.5rem)}.tree--no-border{border:none}.tree__empty{padding:var(--snice-spacing-lg,1.5rem);text-align:center;color:var(--snice-color-text-muted,rgb(115 115 115));font-style:italic}";
 
 let SniceTree = (() => {
     let _classDecorators = [element('snice-tree')];
@@ -12,6 +13,9 @@ let SniceTree = (() => {
     let _classThis;
     let _classSuper = HTMLElement;
     let _instanceExtraInitializers = [];
+    let _selectable_decorators;
+    let _selectable_initializers = [];
+    let _selectable_extraInitializers = [];
     let _selectionMode_decorators;
     let _selectionMode_initializers = [];
     let _selectionMode_extraInitializers = [];
@@ -40,17 +44,38 @@ let SniceTree = (() => {
     let _handleNodesChange_decorators;
     let _handleSelectedNodesChange_decorators;
     let _handleCheckedNodesChange_decorators;
+    let _handleItemToggle_decorators;
+    let _handleItemSelect_decorators;
+    let _handleItemCheck_decorators;
+    let _handleLazyLoad_decorators;
     let _dispatchExpandEvent_decorators;
     let _dispatchCollapseEvent_decorators;
     let _dispatchSelectEvent_decorators;
     let _dispatchCheckEvent_decorators;
     let _dispatchLazyLoadEvent_decorators;
-    let _render_decorators;
-    let _styles_decorators;
+    let _handleKeyDown_decorators;
+    let _handleFocusIn_decorators;
+    let _handleFocusOut_decorators;
     (class extends _classSuper {
         static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.selectable = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _selectable_initializers, true));
+            this.selectionMode = (__runInitializers(this, _selectable_extraInitializers), __runInitializers(this, _selectionMode_initializers, 'single'));
+            this.showCheckboxes = (__runInitializers(this, _selectionMode_extraInitializers), __runInitializers(this, _showCheckboxes_initializers, false));
+            this.showIcons = (__runInitializers(this, _showCheckboxes_extraInitializers), __runInitializers(this, _showIcons_initializers, true));
+            this.expandOnClick = (__runInitializers(this, _showIcons_extraInitializers), __runInitializers(this, _expandOnClick_initializers, false));
+            this.nodes = (__runInitializers(this, _expandOnClick_extraInitializers), __runInitializers(this, _nodes_initializers, []));
+            this.selectedNodes = (__runInitializers(this, _nodes_extraInitializers), __runInitializers(this, _selectedNodes_initializers, []));
+            this.checkedNodes = (__runInitializers(this, _selectedNodes_extraInitializers), __runInitializers(this, _checkedNodes_initializers, []));
+            this.nodeMap = (__runInitializers(this, _checkedNodes_extraInitializers), new Map());
+            this.treeItems = __runInitializers(this, _treeItems_initializers, void 0);
+            this.lastFocusedItem = (__runInitializers(this, _treeItems_extraInitializers), null);
+            this.loadingNodeIds = new Set();
+        }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _selectable_decorators = [property({ type: Boolean })];
             _selectionMode_decorators = [property({})];
             _showCheckboxes_decorators = [property({ type: Boolean, attribute: 'show-checkboxes' })];
             _showIcons_decorators = [property({ type: Boolean, attribute: 'show-icons' })];
@@ -63,24 +88,35 @@ let SniceTree = (() => {
             _handleNodesChange_decorators = [watch('nodes')];
             _handleSelectedNodesChange_decorators = [watch('selectedNodes')];
             _handleCheckedNodesChange_decorators = [watch('checkedNodes')];
+            _handleItemToggle_decorators = [on('tree-item-toggle')];
+            _handleItemSelect_decorators = [on('tree-item-select')];
+            _handleItemCheck_decorators = [on('tree-item-check')];
+            _handleLazyLoad_decorators = [on('tree-item-lazy-load')];
             _dispatchExpandEvent_decorators = [dispatch('@snice/tree-node-expand', { bubbles: true, composed: true })];
             _dispatchCollapseEvent_decorators = [dispatch('@snice/tree-node-collapse', { bubbles: true, composed: true })];
             _dispatchSelectEvent_decorators = [dispatch('@snice/tree-node-select', { bubbles: true, composed: true })];
             _dispatchCheckEvent_decorators = [dispatch('@snice/tree-node-check', { bubbles: true, composed: true })];
             _dispatchLazyLoadEvent_decorators = [dispatch('@snice/tree-node-lazy-load', { bubbles: true, composed: true })];
-            _render_decorators = [render()];
-            _styles_decorators = [styles()];
+            _handleKeyDown_decorators = [on('keydown')];
+            _handleFocusIn_decorators = [on('focusin')];
+            _handleFocusOut_decorators = [on('focusout')];
             __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleNodesChange_decorators, { kind: "method", name: "handleNodesChange", static: false, private: false, access: { has: obj => "handleNodesChange" in obj, get: obj => obj.handleNodesChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleSelectedNodesChange_decorators, { kind: "method", name: "handleSelectedNodesChange", static: false, private: false, access: { has: obj => "handleSelectedNodesChange" in obj, get: obj => obj.handleSelectedNodesChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleCheckedNodesChange_decorators, { kind: "method", name: "handleCheckedNodesChange", static: false, private: false, access: { has: obj => "handleCheckedNodesChange" in obj, get: obj => obj.handleCheckedNodesChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleItemToggle_decorators, { kind: "method", name: "handleItemToggle", static: false, private: false, access: { has: obj => "handleItemToggle" in obj, get: obj => obj.handleItemToggle }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleItemSelect_decorators, { kind: "method", name: "handleItemSelect", static: false, private: false, access: { has: obj => "handleItemSelect" in obj, get: obj => obj.handleItemSelect }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleItemCheck_decorators, { kind: "method", name: "handleItemCheck", static: false, private: false, access: { has: obj => "handleItemCheck" in obj, get: obj => obj.handleItemCheck }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleLazyLoad_decorators, { kind: "method", name: "handleLazyLoad", static: false, private: false, access: { has: obj => "handleLazyLoad" in obj, get: obj => obj.handleLazyLoad }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _dispatchExpandEvent_decorators, { kind: "method", name: "dispatchExpandEvent", static: false, private: false, access: { has: obj => "dispatchExpandEvent" in obj, get: obj => obj.dispatchExpandEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _dispatchCollapseEvent_decorators, { kind: "method", name: "dispatchCollapseEvent", static: false, private: false, access: { has: obj => "dispatchCollapseEvent" in obj, get: obj => obj.dispatchCollapseEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _dispatchSelectEvent_decorators, { kind: "method", name: "dispatchSelectEvent", static: false, private: false, access: { has: obj => "dispatchSelectEvent" in obj, get: obj => obj.dispatchSelectEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _dispatchCheckEvent_decorators, { kind: "method", name: "dispatchCheckEvent", static: false, private: false, access: { has: obj => "dispatchCheckEvent" in obj, get: obj => obj.dispatchCheckEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _dispatchLazyLoadEvent_decorators, { kind: "method", name: "dispatchLazyLoadEvent", static: false, private: false, access: { has: obj => "dispatchLazyLoadEvent" in obj, get: obj => obj.dispatchLazyLoadEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleKeyDown_decorators, { kind: "method", name: "handleKeyDown", static: false, private: false, access: { has: obj => "handleKeyDown" in obj, get: obj => obj.handleKeyDown }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleFocusIn_decorators, { kind: "method", name: "handleFocusIn", static: false, private: false, access: { has: obj => "handleFocusIn" in obj, get: obj => obj.handleFocusIn }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleFocusOut_decorators, { kind: "method", name: "handleFocusOut", static: false, private: false, access: { has: obj => "handleFocusOut" in obj, get: obj => obj.handleFocusOut }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _selectable_decorators, { kind: "field", name: "selectable", static: false, private: false, access: { has: obj => "selectable" in obj, get: obj => obj.selectable, set: (obj, value) => { obj.selectable = value; } }, metadata: _metadata }, _selectable_initializers, _selectable_extraInitializers);
             __esDecorate(null, null, _selectionMode_decorators, { kind: "field", name: "selectionMode", static: false, private: false, access: { has: obj => "selectionMode" in obj, get: obj => obj.selectionMode, set: (obj, value) => { obj.selectionMode = value; } }, metadata: _metadata }, _selectionMode_initializers, _selectionMode_extraInitializers);
             __esDecorate(null, null, _showCheckboxes_decorators, { kind: "field", name: "showCheckboxes", static: false, private: false, access: { has: obj => "showCheckboxes" in obj, get: obj => obj.showCheckboxes, set: (obj, value) => { obj.showCheckboxes = value; } }, metadata: _metadata }, _showCheckboxes_initializers, _showCheckboxes_extraInitializers);
             __esDecorate(null, null, _showIcons_decorators, { kind: "field", name: "showIcons", static: false, private: false, access: { has: obj => "showIcons" in obj, get: obj => obj.showIcons, set: (obj, value) => { obj.showIcons = value; } }, metadata: _metadata }, _showIcons_initializers, _showIcons_extraInitializers);
@@ -94,20 +130,98 @@ let SniceTree = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
+        // NOTE: We don't use @render() here because it causes full re-renders
+        // which destroys the tree structure when properties change. Instead, we
+        // manually create the initial DOM and update it as needed.
         init() {
             this.buildNodeMap();
             this.syncNodeStates();
-            // Listen for tree item events
-            this.addEventListener('tree-item-toggle', this.handleItemToggle.bind(this));
-            this.addEventListener('tree-item-select', this.handleItemSelect.bind(this));
-            this.addEventListener('tree-item-check', this.handleItemCheck.bind(this));
-            this.addEventListener('tree-item-lazy-load', this.handleLazyLoad.bind(this));
+            // Create initial DOM structure
+            this.renderTemplate();
+            // Set ARIA attributes
+            this.setAttribute('role', 'tree');
+            this.setAttribute('tabindex', '0');
+            if (this.selectionMode === 'multiple') {
+                this.setAttribute('aria-multiselectable', 'true');
+            }
             // Set node data on tree items
             this.updateTreeItems();
         }
+        renderTemplate() {
+            if (!this.shadowRoot) {
+                this.attachShadow({ mode: 'open' });
+            }
+            this.shadowRoot.innerHTML = `
+      <style>${cssContent}</style>
+      <div class="tree" part="container" role="tree">
+        <div class="tree__content" part="content"></div>
+      </div>
+    `;
+        }
         handleNodesChange() {
             this.buildNodeMap();
             this.syncNodeStates();
+            // Track which nodes are currently loading before clearing DOM
+            this.trackLoadingNodes();
+            this.updateTreeItemsDOM();
+            // Restore loading state and finish any completed loads
+            requestAnimationFrame(() => {
+                this.restoreLoadingState();
+                requestAnimationFrame(() => {
+                    this.finishLoadingNodes();
+                });
+            });
+        }
+        trackLoadingNodes() {
+            const checkItem = (item) => {
+                if (!item || !item.node)
+                    return;
+                if (item.loading) {
+                    this.loadingNodeIds.add(item.node.id);
+                }
+                if (item.shadowRoot) {
+                    const childItems = item.shadowRoot.querySelectorAll('.tree-item__children > snice-tree-item');
+                    childItems.forEach((child) => checkItem(child));
+                }
+            };
+            const rootItems = this.shadowRoot?.querySelectorAll('.tree__content > snice-tree-item');
+            rootItems?.forEach((item) => checkItem(item));
+        }
+        restoreLoadingState() {
+            const restoreItem = (item) => {
+                if (!item || !item.node)
+                    return;
+                // Restore loading state if this node was loading
+                if (this.loadingNodeIds.has(item.node.id)) {
+                    item.loading = true;
+                }
+                // Recursively restore children
+                if (item.shadowRoot) {
+                    const childItems = item.shadowRoot.querySelectorAll('.tree-item__children > snice-tree-item');
+                    childItems.forEach((child) => restoreItem(child));
+                }
+            };
+            const rootItems = this.shadowRoot?.querySelectorAll('.tree__content > snice-tree-item');
+            rootItems?.forEach((item) => restoreItem(item));
+        }
+        updateTreeItemsDOM() {
+            if (!this.shadowRoot)
+                return;
+            const content = this.shadowRoot.querySelector('.tree__content');
+            if (!content)
+                return;
+            // Clear existing items
+            content.innerHTML = '';
+            // Create tree items for root nodes
+            this.nodes.forEach(node => {
+                const item = document.createElement('snice-tree-item');
+                if (this.showCheckboxes)
+                    item.setAttribute('show-checkbox', '');
+                if (this.showIcons)
+                    item.setAttribute('show-icon', '');
+                content.appendChild(item);
+            });
+            // Update items with node data
             this.updateTreeItems();
         }
         updateTreeItems() {
@@ -135,9 +249,17 @@ let SniceTree = (() => {
         }
         handleSelectedNodesChange() {
             this.syncNodeStates();
+            // Update tree item selected states
+            requestAnimationFrame(() => {
+                this.updateSelectedStatesOnly();
+            });
         }
         handleCheckedNodesChange() {
             this.syncNodeStates();
+            // Update tree item checkbox states
+            requestAnimationFrame(() => {
+                this.updateCheckboxStatesOnly();
+            });
         }
         buildNodeMap() {
             this.nodeMap.clear();
@@ -178,41 +300,201 @@ let SniceTree = (() => {
             const node = this.nodeMap.get(nodeId);
             if (!node)
                 return;
-            if (this.selectionMode === 'none')
+            // Check if selection is disabled
+            if (!this.selectable || this.selectionMode === 'none')
                 return;
             if (this.selectionMode === 'single') {
-                // Deselect all other nodes
-                this.selectedNodes = selected ? [nodeId] : [];
+                // Deselect all nodes first
+                this.deselectAllNodes();
+                // Select only the clicked node if selecting
+                if (selected) {
+                    node.selected = true;
+                    this.selectedNodes = [nodeId];
+                }
+                else {
+                    node.selected = false;
+                    this.selectedNodes = [];
+                }
+                // Update DOM to reflect changes
+                this.updateSelectedStatesOnly();
             }
             else {
                 // Multiple selection
                 if (selected) {
+                    node.selected = true;
                     if (!this.selectedNodes.includes(nodeId)) {
                         this.selectedNodes = [...this.selectedNodes, nodeId];
                     }
                 }
                 else {
+                    node.selected = false;
                     this.selectedNodes = this.selectedNodes.filter(id => id !== nodeId);
                 }
+                // Update DOM
+                this.updateSelectedStatesOnly();
             }
             this.dispatchSelectEvent(nodeId, node);
         }
+        deselectAllNodes() {
+            // Recursively deselect all nodes
+            const deselect = (nodes) => {
+                for (const node of nodes) {
+                    node.selected = false;
+                    if (node.children) {
+                        deselect(node.children);
+                    }
+                }
+            };
+            deselect(this.nodes);
+        }
         handleItemCheck(e) {
             const event = e;
             const { nodeId, checked } = event.detail;
             const node = this.nodeMap.get(nodeId);
             if (!node)
                 return;
-            if (checked) {
-                if (!this.checkedNodes.includes(nodeId)) {
-                    this.checkedNodes = [...this.checkedNodes, nodeId];
-                }
-            }
-            else {
-                this.checkedNodes = this.checkedNodes.filter(id => id !== nodeId);
-            }
+            // Update checked state with cascading
+            this.syncCheckboxes(node, checked);
             this.dispatchCheckEvent(nodeId, node, checked);
         }
+        syncCheckboxes(changedNode, checked) {
+            // Update descendants
+            const updateDescendants = (node, isChecked) => {
+                node.checked = isChecked;
+                if (isChecked && !this.checkedNodes.includes(node.id)) {
+                    this.checkedNodes = [...this.checkedNodes, node.id];
+                }
+                else if (!isChecked) {
+                    this.checkedNodes = this.checkedNodes.filter(id => id !== node.id);
+                }
+                if (node.children) {
+                    for (const child of node.children) {
+                        if (!child.disabled) {
+                            updateDescendants(child, isChecked);
+                        }
+                    }
+                }
+            };
+            // Update ancestors with indeterminate state
+            const updateAncestors = (node) => {
+                const parent = this.findParentNode(node.id);
+                if (!parent)
+                    return;
+                const children = parent.children || [];
+                const checkedChildren = children.filter(c => c.checked && !c.disabled);
+                const uncheckedChildren = children.filter(c => !c.checked && !c.disabled && !c.indeterminate);
+                const allChecked = checkedChildren.length === children.filter(c => !c.disabled).length;
+                const allUnchecked = uncheckedChildren.length === children.filter(c => !c.disabled).length;
+                parent.checked = allChecked;
+                parent.indeterminate = !allChecked && !allUnchecked;
+                if (parent.checked && !this.checkedNodes.includes(parent.id)) {
+                    this.checkedNodes = [...this.checkedNodes, parent.id];
+                }
+                else if (!parent.checked && !parent.indeterminate) {
+                    this.checkedNodes = this.checkedNodes.filter(id => id !== parent.id);
+                }
+                updateAncestors(parent);
+            };
+            updateDescendants(changedNode, checked);
+            updateAncestors(changedNode);
+            // Update checkbox states without re-rendering
+            this.updateCheckboxStatesOnly();
+        }
+        updateCheckboxStatesOnly() {
+            // Recursively update all tree-item checkbox states without re-rendering
+            const updateItemCheckboxes = (item) => {
+                if (!item || !item.node)
+                    return;
+                const node = this.nodeMap.get(item.node.id);
+                if (!node)
+                    return;
+                // Update the item's properties directly
+                if (item.checked !== node.checked) {
+                    item.checked = node.checked;
+                }
+                if (item.indeterminate !== node.indeterminate) {
+                    item.indeterminate = node.indeterminate;
+                }
+                // Recursively update children
+                if (item.shadowRoot) {
+                    const childItems = item.shadowRoot.querySelectorAll('.tree-item__children > snice-tree-item');
+                    childItems.forEach((child) => updateItemCheckboxes(child));
+                }
+            };
+            // Start with root items
+            const rootItems = this.shadowRoot?.querySelectorAll('.tree__content > snice-tree-item');
+            rootItems?.forEach((item) => updateItemCheckboxes(item));
+        }
+        updateSelectedStatesOnly() {
+            // Recursively update all tree-item selected states without re-rendering
+            const updateItemSelection = (item) => {
+                if (!item || !item.node)
+                    return;
+                const node = this.nodeMap.get(item.node.id);
+                if (!node)
+                    return;
+                // Always update the item's selected property and DOM
+                item.selected = node.selected;
+                // Force update the DOM class
+                if (item.shadowRoot) {
+                    const content = item.shadowRoot.querySelector('.tree-item__content');
+                    if (content) {
+                        if (node.selected) {
+                            content.classList.add('tree-item__content--selected');
+                        }
+                        else {
+                            content.classList.remove('tree-item__content--selected');
+                        }
+                        content.setAttribute('aria-selected', (node.selected ?? false).toString());
+                    }
+                }
+                // Recursively update children
+                if (item.shadowRoot) {
+                    const childItems = item.shadowRoot.querySelectorAll('.tree-item__children > snice-tree-item');
+                    childItems.forEach((child) => updateItemSelection(child));
+                }
+            };
+            // Start with root items
+            const rootItems = this.shadowRoot?.querySelectorAll('.tree__content > snice-tree-item');
+            rootItems?.forEach((item) => updateItemSelection(item));
+        }
+        finishLoadingNodes() {
+            // Find any tree items with loading state and finish loading if they now have children
+            const finishItem = (item) => {
+                if (!item || !item.node)
+                    return;
+                // If this item is loading and now has children, finish loading
+                if (item.loading && item.node.children && item.node.children.length > 0) {
+                    item.finishLoading();
+                    // Remove from loading set
+                    this.loadingNodeIds.delete(item.node.id);
+                }
+                // Check children
+                if (item.shadowRoot) {
+                    const childItems = item.shadowRoot.querySelectorAll('.tree-item__children > snice-tree-item');
+                    childItems.forEach((child) => finishItem(child));
+                }
+            };
+            // Start with root items
+            const rootItems = this.shadowRoot?.querySelectorAll('.tree__content > snice-tree-item');
+            rootItems?.forEach((item) => finishItem(item));
+        }
+        findParentNode(nodeId) {
+            const findParent = (nodes, targetId) => {
+                for (const node of nodes) {
+                    if (node.children) {
+                        if (node.children.some(child => child.id === targetId)) {
+                            return node;
+                        }
+                        const found = findParent(node.children, targetId);
+                        if (found)
+                            return found;
+                    }
+                }
+                return null;
+            };
+            return findParent(this.nodes, nodeId);
+        }
         handleLazyLoad(e) {
             const event = e;
             const { nodeId, node } = event.detail;
@@ -233,25 +515,100 @@ let SniceTree = (() => {
         dispatchLazyLoadEvent(nodeId, node) {
             return { nodeId, node, tree: this };
         }
-        render() {
-            const treeClasses = [
-                'tree'
-            ].filter(Boolean).join(' ');
-            return html /*html*/ `
-      <div class="${treeClasses}" part="container" role="tree">
-        <div class="tree__content" part="content">
-          ${this.nodes.map(node => html `
-            <snice-tree-item
-              ?show-checkbox=${this.showCheckboxes}
-              ?show-icon=${this.showIcons}>
-            </snice-tree-item>
-          `)}
-        </div>
-      </div>
-    `;
+        // Keyboard navigation
+        handleKeyDown(event) {
+            if (!['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Home', 'End', 'Enter', ' '].includes(event.key)) {
+                return;
+            }
+            // Ignore when focus is in a text field
+            const target = event.target;
+            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+                return;
+            }
+            const items = this.getFocusableItems();
+            if (items.length === 0)
+                return;
+            event.preventDefault();
+            const activeIndex = items.findIndex(item => item.matches(':focus'));
+            const activeItem = items[activeIndex];
+            const focusItemAt = (index) => {
+                const clampedIndex = Math.max(0, Math.min(index, items.length - 1));
+                items[clampedIndex]?.focus();
+            };
+            if (event.key === 'ArrowDown') {
+                focusItemAt(activeIndex + 1);
+            }
+            else if (event.key === 'ArrowUp') {
+                focusItemAt(activeIndex - 1);
+            }
+            else if (event.key === 'ArrowRight') {
+                if (activeItem && activeItem.expand) {
+                    activeItem.expand();
+                }
+            }
+            else if (event.key === 'ArrowLeft') {
+                if (activeItem && activeItem.collapse) {
+                    activeItem.collapse();
+                }
+            }
+            else if (event.key === 'Home') {
+                focusItemAt(0);
+            }
+            else if (event.key === 'End') {
+                focusItemAt(items.length - 1);
+            }
+            else if (event.key === 'Enter' || event.key === ' ') {
+                if (activeItem && activeItem.select) {
+                    activeItem.select();
+                }
+            }
         }
-        styles() {
-            return css /*css*/ `${cssContent}`;
+        handleFocusIn(event) {
+            const target = event.target;
+            // If tree gets focus, move to last focused item or first item
+            if (target === this) {
+                const items = this.getFocusableItems();
+                const itemToFocus = this.lastFocusedItem || items[0];
+                itemToFocus?.focus();
+                return;
+            }
+            // Update roving tabindex
+            if (target.tagName === 'SNICE-TREE-ITEM') {
+                if (this.lastFocusedItem) {
+                    this.lastFocusedItem.setAttribute('tabindex', '-1');
+                }
+                this.lastFocusedItem = target;
+                this.setAttribute('tabindex', '-1');
+                target.setAttribute('tabindex', '0');
+            }
+        }
+        handleFocusOut(event) {
+            const relatedTarget = event.relatedTarget;
+            if (!relatedTarget || !this.contains(relatedTarget)) {
+                this.setAttribute('tabindex', '0');
+            }
+        }
+        getFocusableItems() {
+            const allItems = Array.from(this.shadowRoot?.querySelectorAll('snice-tree-item') || []);
+            const collapsedItems = new Set();
+            return allItems.filter(item => {
+                const disabled = item.node?.disabled;
+                if (disabled)
+                    return false;
+                // Check if parent is collapsed
+                let parent = item.parentElement;
+                while (parent && parent !== this) {
+                    if (parent.tagName === 'SNICE-TREE-ITEM') {
+                        const parentExpanded = parent.expanded;
+                        if (!parentExpanded) {
+                            collapsedItems.add(item);
+                            return false;
+                        }
+                    }
+                    parent = parent.parentElement;
+                }
+                return !collapsedItems.has(item);
+            });
         }
         // Public API
         expandNode(id) {
@@ -306,7 +663,7 @@ let SniceTree = (() => {
             this.nodes = [...this.nodes];
         }
         selectNode(id) {
-            if (this.selectionMode === 'none')
+            if (!this.selectable || this.selectionMode === 'none')
                 return;
             const node = this.nodeMap.get(id);
             if (!node)
@@ -369,18 +726,27 @@ let SniceTree = (() => {
         getCheckedNodes() {
             return this.checkedNodes.map(id => this.nodeMap.get(id)).filter(Boolean);
         }
-        constructor() {
-            super(...arguments);
-            this.selectionMode = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _selectionMode_initializers, 'single'));
-            this.showCheckboxes = (__runInitializers(this, _selectionMode_extraInitializers), __runInitializers(this, _showCheckboxes_initializers, false));
-            this.showIcons = (__runInitializers(this, _showCheckboxes_extraInitializers), __runInitializers(this, _showIcons_initializers, true));
-            this.expandOnClick = (__runInitializers(this, _showIcons_extraInitializers), __runInitializers(this, _expandOnClick_initializers, false));
-            this.nodes = (__runInitializers(this, _expandOnClick_extraInitializers), __runInitializers(this, _nodes_initializers, []));
-            this.selectedNodes = (__runInitializers(this, _nodes_extraInitializers), __runInitializers(this, _selectedNodes_initializers, []));
-            this.checkedNodes = (__runInitializers(this, _selectedNodes_extraInitializers), __runInitializers(this, _checkedNodes_initializers, []));
-            this.nodeMap = (__runInitializers(this, _checkedNodes_extraInitializers), new Map());
-            this.treeItems = __runInitializers(this, _treeItems_initializers, void 0);
-            __runInitializers(this, _treeItems_extraInitializers);
+        updateNode(id, updates) {
+            // Create a new nodes array with the updated node
+            const updateInTree = (nodes) => {
+                return nodes.map(node => {
+                    if (node.id === id) {
+                        // Found the node - create a new node with updates
+                        return { ...node, ...updates };
+                    }
+                    if (node.children) {
+                        // Recursively update children
+                        const newChildren = updateInTree(node.children);
+                        if (newChildren !== node.children) {
+                            // Children were updated, create new node
+                            return { ...node, children: newChildren };
+                        }
+                    }
+                    return node;
+                });
+            };
+            // Update and trigger re-render
+            this.nodes = updateInTree(this.nodes);
         }
     });
     return _classThis;