tree-element 0.3.2 → 0.4.1

package/tree_element.debug.js

@@ -1,5 +1,5 @@
 /*
-Tree-element 0.3.2
+Tree-element 0.4.1
 
 Copyright 2026 Marco Braak
 
@@ -29,13 +29,13 @@ var TreeElement = (function () {
    */
   let createClassNames = ({
     classPrefix,
-    commonClassName,
-    treeClassName
+    commonClassName = `${classPrefix}-common`,
+    treeClassName = classPrefix
   }) => ({
     border: `${classPrefix}-border`,
     circle: `${classPrefix}-circle`,
     closed: `${classPrefix}-closed`,
-    common: commonClassName ?? `${classPrefix}-common`,
+    common: commonClassName,
     dnd: `${classPrefix}-dnd`,
     dragging: `${classPrefix}-dragging`,
     element: `${classPrefix}-element`,
@@ -54,7 +54,7 @@ var TreeElement = (function () {
     toggler: `${classPrefix}-toggler`,
     togglerLeft: `${classPrefix}-toggler-left`,
     togglerRight: `${classPrefix}-toggler-right`,
-    tree: treeClassName ?? classPrefix
+    tree: treeClassName
   });
 
   class DataLoader {
@@ -80,15 +80,18 @@ var TreeElement = (function () {
       element.classList.add(this._classNames.loading);
 
       // Tell screen readers that the children of the folder are loading
-      let titleSpan = node ? this._getTitleSpan(element) : null;
-      titleSpan?.setAttribute("aria-busy", "true");
+      if (node) {
+        element.setAttribute("aria-busy", "true");
+      }
       this._triggerEvent("tree.loading_data", {
         element,
         node
       });
       let stopLoading = () => {
         element.classList.remove(this._classNames.loading);
-        titleSpan?.removeAttribute("aria-busy");
+        if (node) {
+          element.removeAttribute("aria-busy");
+        }
         this._triggerEvent("tree.loaded_data", {
           element,
           node
@@ -108,9 +111,12 @@ var TreeElement = (function () {
       };
       let signal = this._abortController.signal;
       url._setSearchParam("_", Date.now().toString());
+
+      // Accept, not Content-Type: the request has no body. A cross-origin request
+      // with only an Accept header also needs no CORS preflight.
       return fetch(url._value(), {
         headers: {
-          "Content-Type": "application/json"
+          Accept: "application/json"
         },
         signal
       }).then(handleResponse).catch(error => {
@@ -124,9 +130,6 @@ var TreeElement = (function () {
         });
       });
     }
-    _getTitleSpan(element) {
-      return element.querySelector(`:scope > .${this._classNames.element} > .${this._classNames.title}`);
-    }
   }
 
   // Get the top position of the HTML element.
@@ -262,8 +265,9 @@ var TreeElement = (function () {
       lastTop = top;
     };
     let handleAfterOpenFolder = (node, nextNode) => {
-      if (node === currentNode || nextNode === currentNode) {
-        // Cannot move before or after current item
+      // Not called for the current node: handleOpenFolder stops iterating there
+      if (nextNode === currentNode) {
+        // Dropping the current node after this folder would leave it where it is
         addHitPosition(node, null, lastTop);
       } else {
         addHitPosition(node, "after", lastTop);
@@ -391,7 +395,6 @@ var TreeElement = (function () {
       _openFolderDelay: openFolderDelay,
       _openNode: openNode,
       _refreshElements: refreshElements,
-      _slide: slide,
       _treeElement: treeElement,
       _triggerEvent: triggerEvent
     }) {
@@ -409,7 +412,6 @@ var TreeElement = (function () {
       this._openFolderDelay = openFolderDelay;
       this._openNode = openNode;
       this._refreshElements = refreshElements;
-      this._slide = slide;
       this._treeElement = treeElement;
       this._triggerEvent = triggerEvent;
       this._hoveredArea = null;
@@ -442,9 +444,6 @@ var TreeElement = (function () {
       this._dragElement._move(positionInfo.pageX, positionInfo.pageY);
       let area = this._findHoveredArea(positionInfo.pageX, positionInfo.pageY);
       if (area && this._canMoveToArea(area, this._currentItem)) {
-        if (!area.node.isFolder()) {
-          this._stopOpenFolderTimer();
-        }
         if (this._hoveredArea !== area) {
           this._hoveredArea = area;
 
@@ -503,7 +502,6 @@ var TreeElement = (function () {
       if (!this._hoveredArea && currentItem && this._onDragStop) {
         this._onDragStop(currentItem._node, positionInfo.originalEvent);
       }
-      return false;
     }
     _refresh() {
       this._removeHitAreas();
@@ -594,8 +592,7 @@ var TreeElement = (function () {
       }
     }
     _mustCaptureElement(element) {
-      let nodeName = element.nodeName;
-      return nodeName !== "INPUT" && nodeName !== "SELECT" && nodeName !== "TEXTAREA";
+      return !["INPUT", "SELECT", "TEXTAREA"].includes(element.nodeName);
     }
     _mustOpenFolderTimer(area) {
       let node = area.node;
@@ -614,7 +611,7 @@ var TreeElement = (function () {
     }
     _startOpenFolderTimer(folder) {
       let openFolder = () => {
-        void this._openNode(folder, this._slide).then(() => {
+        void this._openNode(folder).then(() => {
           this._refresh();
           this._updateDropHint();
         });
@@ -649,6 +646,24 @@ var TreeElement = (function () {
   let isInt = n => Number.isInteger(n);
   let getBoolString = value => value ? "true" : "false";
 
+  /* The open state of a folder is shown on the toggler and on the <li>.
+   * These are used both when a folder is rendered and when it is opened or
+   * closed, so a rendered folder looks the same as a toggled one.
+   */
+
+  let setTogglerOpenState = (toggler, isOpen, classNames, icons) => {
+    toggler.classList.toggle(classNames.closed, !isOpen);
+    toggler.replaceChildren();
+    let iconElement = isOpen ? icons.opened : icons.closed;
+    if (iconElement) {
+      toggler.append(iconElement.cloneNode(true));
+    }
+  };
+  let setFolderLiOpenState = (li, isOpen, classNames) => {
+    li.classList.toggle(classNames.closed, !isOpen);
+    li.setAttribute("aria-expanded", getBoolString(isOpen));
+  };
+
   /* Renders the tree to html.
    *
    * The children of a closed folder are not rendered. They are rendered when
@@ -672,6 +687,7 @@ var TreeElement = (function () {
       _getTree: getTree,
       _htmlElement: htmlElement,
       _isNodeSelected: isNodeSelected,
+      _multiSelect: multiSelect,
       _onCreateLi: onCreateLi,
       _openedIcon: openedIcon = "+",
       _rtl: rtl,
@@ -688,18 +704,22 @@ var TreeElement = (function () {
       this._getTree = getTree;
       this._htmlElement = htmlElement;
       this._isNodeSelected = isNodeSelected;
+      this._multiSelect = multiSelect;
       this._onCreateLi = onCreateLi;
       this._rtl = rtl;
       this._setNodeElement = setNodeElement;
       this._showEmptyFolder = showEmptyFolder;
       this._tabIndex = tabIndex;
-      this._openedIconElement = this._createButtonElement(openedIcon);
-      this._closedIconElement = this._createButtonElement(closedIcon);
-      this._rootUlTemplate = this._createUlTemplate(true);
-      this._groupUlTemplate = this._createUlTemplate(false);
-      this._nodeTemplate = this._createNodeTemplate();
-      this._openedFolderTemplate = this._createFolderTemplate(true);
-      this._closedFolderTemplate = this._createFolderTemplate(false);
+      this._icons = {
+        closed: this._createButtonElement(closedIcon),
+        opened: this._createButtonElement(openedIcon)
+      };
+      let templates = this._createTemplates();
+      this._closedFolderTemplate = templates.closedFolderTemplate;
+      this._groupUlTemplate = templates.groupUlTemplate;
+      this._nodeTemplate = templates.nodeTemplate;
+      this._openedFolderTemplate = templates.openedFolderTemplate;
+      this._rootUlTemplate = templates.rootUlTemplate;
     }
     _render(fromNode) {
       if (fromNode?.parent) {
@@ -713,7 +733,7 @@ var TreeElement = (function () {
      * null when the folder is not rendered or has no children.
      */
     _renderChildren(node) {
-      return !node.element || !node.hasChildren() ? null : this._createDomElements(node.element, node.children, false, node.getLevel() + 1);
+      return node.element && node.hasChildren() ? this._createDomElements(node.element, node.children, false, node.getLevel() + 1) : null;
     }
     _renderFromNode(node) {
       if (!node.element) {
@@ -733,6 +753,43 @@ var TreeElement = (function () {
         this._createDomElements(this._htmlElement, tree.children, true, 1);
       }
     }
+
+    /* Change dragAndDrop after construction. The rendered lists and the
+     * templates for new lists get or lose the dnd class.
+     */
+    _setDragAndDrop(dragAndDrop) {
+      this._dragAndDrop = dragAndDrop;
+      this._updateTemplates();
+      for (let ul of this._htmlElement.querySelectorAll(`ul.${this._classNames.common}`)) {
+        ul.classList.toggle(this._classNames.dnd, dragAndDrop);
+      }
+    }
+
+    /* Change multiSelect after construction. Only the templates are updated;
+     * the tree must be rendered again.
+     */
+    _setMultiSelect(multiSelect) {
+      this._multiSelect = multiSelect;
+      this._updateTemplates();
+    }
+
+    /* Change tabIndex after construction. The rendered nodes and the
+     * templates for new nodes get the new tabindex. The tab stop is updated by
+     * TreeElement.updateTabStop.
+     */
+    _setTabIndex(tabIndex) {
+      this._tabIndex = tabIndex;
+      this._updateTemplates();
+      for (let li of this._htmlElement.querySelectorAll("li[role=treeitem]")) {
+        if (tabIndex === undefined) {
+          li.removeAttribute("tabindex");
+        } else if (!this._multiSelect && li.getAttribute("aria-selected") === "true") {
+          li.setAttribute("tabindex", String(tabIndex));
+        } else {
+          li.setAttribute("tabindex", "-1");
+        }
+      }
+    }
     _attachNodeData(node, li) {
       node.element = li;
       this._setNodeElement(li, node);
@@ -774,10 +831,10 @@ var TreeElement = (function () {
       // li > div > [toggler], title span, [toggler]
       let div = li.firstChild;
       let titleSpan = div.childNodes[this._buttonLeft ? 1 : 0];
-      this._fillTitleSpan(titleSpan, node.name, isSelected, level);
+      this._fillNode(li, titleSpan, node.name, isSelected, level);
       if (node.is_loading) {
         li.classList.add(this._classNames.loading);
-        titleSpan.setAttribute("aria-busy", "true");
+        li.setAttribute("aria-busy", "true");
       }
       return li;
     }
@@ -788,30 +845,22 @@ var TreeElement = (function () {
      * state, so there is a template for each.
      */
     _createFolderTemplate(isOpen) {
-      let liClasses = [this._classNames.common, this._classNames.folder];
-      if (!isOpen) {
-        liClasses.push(this._classNames.closed);
-      }
-      let li = this._createLiTemplate(liClasses.join(" "));
+      let li = this._createLiTemplate(`${this._classNames.common} ${this._classNames.folder}`);
+      setFolderLiOpenState(li, isOpen, this._classNames);
       let div = li.firstChild;
 
       // The toggler is hidden from screen readers: the icon is decoration, and
       // aria-expanded on the treeitem has the open state.
       let toggler = document.createElement("span");
-      toggler.className = this._getButtonClasses(isOpen);
+      toggler.className = this._getButtonClasses();
       toggler.setAttribute("aria-hidden", "true");
-      let iconElement = isOpen ? this._openedIconElement : this._closedIconElement;
-      if (iconElement) {
-        toggler.append(iconElement.cloneNode(true));
-      }
+      setTogglerOpenState(toggler, isOpen, this._classNames, this._icons);
       if (this._buttonLeft) {
         div.append(toggler);
       }
 
       // title span
-      let titleSpan = this._createTitleSpanTemplate(true);
-      titleSpan.setAttribute("aria-expanded", getBoolString(isOpen));
-      div.append(titleSpan);
+      div.append(this._createTitleSpanTemplate(true));
       if (!this._buttonLeft) {
         div.append(toggler);
       }
@@ -835,11 +884,22 @@ var TreeElement = (function () {
 
     /*
     Create the outer part of a <li> template: li > div
+    The li is the treeitem, so the ul of its children is inside the treeitem.
     */
     _createLiTemplate(liClasses) {
       let li = document.createElement("li");
       li.className = liClasses;
-      li.setAttribute("role", "none");
+      li.setAttribute("role", "treeitem");
+
+      // Only a multiselect tree marks the nodes that are not selected
+      if (this._multiSelect) {
+        li.setAttribute("aria-selected", "false");
+      }
+
+      // Every node is focusable, but only the tab stop is in the tab order
+      if (this._tabIndex !== undefined) {
+        li.setAttribute("tabindex", "-1");
+      }
       let div = document.createElement("div");
       div.className = `${this._classNames.element} ${this._classNames.common}`;
       div.setAttribute("role", "none");
@@ -855,7 +915,7 @@ var TreeElement = (function () {
       // li > div > title span
       let div = li.firstChild;
       let titleSpan = div.firstChild;
-      this._fillTitleSpan(titleSpan, node.name, isSelected, level);
+      this._fillNode(li, titleSpan, node.name, isSelected, level);
       return li;
     }
 
@@ -868,6 +928,15 @@ var TreeElement = (function () {
       div.append(this._createTitleSpanTemplate(false));
       return li;
     }
+    _createTemplates() {
+      return {
+        closedFolderTemplate: this._createFolderTemplate(false),
+        groupUlTemplate: this._createUlTemplate(false),
+        nodeTemplate: this._createNodeTemplate(),
+        openedFolderTemplate: this._createFolderTemplate(true),
+        rootUlTemplate: this._createUlTemplate(true)
+      };
+    }
     _createTitleSpanTemplate(isFolder) {
       let titleSpan = document.createElement("span");
       let classes = `${this._classNames.title} ${this._classNames.common}`;
@@ -876,13 +945,6 @@ var TreeElement = (function () {
       }
       classes += ` ${this._buttonLeft ? this._classNames.titleButtonLeft : this._classNames.titleButtonRight}`;
       titleSpan.className = classes;
-      titleSpan.setAttribute("role", "treeitem");
-      titleSpan.setAttribute("aria-selected", "false");
-
-      // Every node is focusable, but only the tab stop is in the tab order
-      if (this._tabIndex !== undefined) {
-        titleSpan.setAttribute("tabindex", "-1");
-      }
       return titleSpan;
     }
     _createUlTemplate(isRootNode) {
@@ -911,20 +973,25 @@ var TreeElement = (function () {
         if (this._ariaLabelledBy !== undefined) {
           ul.setAttribute("aria-labelledby", this._ariaLabelledBy);
         }
+        if (this._multiSelect) {
+          ul.setAttribute("aria-multiselectable", "true");
+        }
       }
       return ul;
     }
 
     /*
-    Set the parts of a cloned title span that differ per node
+    Set the parts of a cloned li and title span that differ per node
     */
-    _fillTitleSpan(titleSpan, nodeName, isSelected, level) {
-      titleSpan.setAttribute("aria-level", String(level));
+    _fillNode(li, titleSpan, nodeName, isSelected, level) {
+      li.setAttribute("aria-level", String(level));
       if (isSelected) {
-        titleSpan.setAttribute("aria-selected", "true");
+        li.setAttribute("aria-selected", "true");
         let tabIndex = this._tabIndex;
-        if (tabIndex !== undefined) {
-          titleSpan.setAttribute("tabindex", String(tabIndex));
+
+        // With multiSelect the tab stop is the active node, see updateTabStop
+        if (tabIndex !== undefined && !this._multiSelect) {
+          li.setAttribute("tabindex", String(tabIndex));
         }
       }
       if (this._autoEscape) {
@@ -933,12 +1000,13 @@ var TreeElement = (function () {
         // eslint-disable-next-line no-unsanitized/property -- the user opted out of escaping with autoEscape: false
         titleSpan.innerHTML = nodeName;
       }
+
+      // The treeitem is named by its title, without the html when autoEscape
+      // is false. Otherwise the name would contain everything in the row.
+      li.setAttribute("aria-label", titleSpan.textContent);
     }
-    _getButtonClasses(isOpen) {
+    _getButtonClasses() {
       let classes = [this._classNames.toggler, this._classNames.common];
-      if (!isOpen) {
-        classes.push(this._classNames.closed);
-      }
       if (this._buttonLeft) {
         classes.push(this._classNames.togglerLeft);
       } else {
@@ -953,26 +1021,47 @@ var TreeElement = (function () {
     _mustRenderChildren(node) {
       return node.hasChildren() && node.is_open === true;
     }
+    _updateTemplates() {
+      let templates = this._createTemplates();
+      this._closedFolderTemplate = templates.closedFolderTemplate;
+      this._groupUlTemplate = templates.groupUlTemplate;
+      this._nodeTemplate = templates.nodeTemplate;
+      this._openedFolderTemplate = templates.openedFolderTemplate;
+      this._rootUlTemplate = templates.rootUlTemplate;
+    }
   }
 
+  /* The keys move from the selected node and select the node they move to.
+   * With multiSelect they move from the focused node and only move the focus;
+   * Space adds the focused node to the selection or removes it.
+   */
+
   class KeyHandler {
     constructor({
       _closeNode: closeNode,
+      _focusNode: focusNode,
+      _getActiveNode: getActiveNode,
       _getFocusedNode: getFocusedNode,
       _getSelectedNode: getSelectedNode,
       _getTree: getTree,
       _keyboardSupport: keyboardSupport,
+      _multiSelect: multiSelect,
       _openNode: openNode,
       _selectNode: selectNode,
+      _toggleNodeInSelection: toggleNodeInSelection,
       _triggerEvent: triggerEvent
     }) {
       this._closeNode = closeNode;
+      this._focusNode = focusNode;
+      this._getActiveNode = getActiveNode;
       this._getFocusedNode = getFocusedNode;
       this._getSelectedNode = getSelectedNode;
       this._getTree = getTree;
       this._keyboardSupport = keyboardSupport;
+      this._multiSelect = multiSelect;
       this._openNode = openNode;
       this._originalSelectNode = selectNode;
+      this._toggleNodeInSelection = toggleNodeInSelection;
       this._triggerEvent = triggerEvent;
       if (keyboardSupport) {
         document.addEventListener("keydown", this._handleKeyDown);
@@ -984,10 +1073,28 @@ var TreeElement = (function () {
       }
     }
     _moveDown() {
-      return this._selectNode(this._getSelectedNode()?.getNextVisibleNode());
+      return this._goToNode(this._getCurrentNode()?.getNextVisibleNode());
     }
     _moveUp() {
-      return this._selectNode(this._getSelectedNode()?.getPreviousVisibleNode());
+      return this._goToNode(this._getCurrentNode()?.getPreviousVisibleNode());
+    }
+
+    // Change keyboardSupport after construction
+    _setKeyboardSupport(keyboardSupport) {
+      if (keyboardSupport === this._keyboardSupport) {
+        return;
+      }
+      this._keyboardSupport = keyboardSupport;
+      if (keyboardSupport) {
+        document.addEventListener("keydown", this._handleKeyDown);
+      } else {
+        document.removeEventListener("keydown", this._handleKeyDown);
+      }
+    }
+
+    // Change multiSelect after construction
+    _setMultiSelect(multiSelect) {
+      this._multiSelect = multiSelect;
     }
 
     // Activate the node, for example to open its edit page.
@@ -998,6 +1105,26 @@ var TreeElement = (function () {
       });
       return true;
     }
+
+    // No node is selected. These keys select the focused node, which is
+    // usually the first node, see TreeElement.updateTabStop.
+    _getCurrentNode() {
+      return this._multiSelect ? this._getActiveNode() : this._getSelectedNode();
+    }
+
+    // Move to the node: select it, or with multiSelect focus it.
+    // Result: there was a node to move to.
+    _goToNode(node) {
+      if (!node) {
+        return false;
+      }
+      if (this._multiSelect) {
+        this._focusNode(node);
+      } else {
+        this._originalSelectNode(node);
+      }
+      return true;
+    }
     _handleArrowKey(key) {
       switch (key) {
         case "ArrowDown":
@@ -1022,49 +1149,53 @@ var TreeElement = (function () {
           }
       }
     }
+    _handleKey(key, focusedNode) {
+      return this._getCurrentNode() ? this._handleArrowKey(key) : this._handleKeyWithoutSelection(key, focusedNode);
+    }
     _handleKeyDown = e => {
       let focusedNode = this._getFocusedNode();
       if (!focusedNode) {
         return;
       }
       let isKeyHandled;
-      let selectedNode = this._getSelectedNode();
       switch (e.key) {
+        case " ":
+          {
+            isKeyHandled = this._multiSelect ? this._toggle(focusedNode) : this._handleKey(e.key, focusedNode);
+            break;
+          }
         case "End":
           {
-            isKeyHandled = this._selectNode(this._getTree()?.getLastChild());
+            isKeyHandled = this._goToNode(this._getTree()?.getLastChild());
             break;
           }
         case "Enter":
           {
             // Without a selected node, activate the focused node
-            isKeyHandled = this._activate(selectedNode ?? focusedNode, e);
+            isKeyHandled = this._activate(this._multiSelect ? focusedNode : this._getSelectedNode() ?? focusedNode, e);
             break;
           }
         case "Home":
           {
-            isKeyHandled = this._selectNode(this._getTree()?.children[0]);
+            isKeyHandled = this._goToNode(this._getTree()?.children[0]);
             break;
           }
         default:
           {
-            isKeyHandled = selectedNode ? this._handleArrowKey(e.key) : this._handleKeyWithoutSelection(e.key, focusedNode);
+            isKeyHandled = this._handleKey(e.key, focusedNode);
           }
       }
       if (isKeyHandled) {
         e.preventDefault();
       }
     };
-
-    // No node is selected. These keys select the focused node, which is
-    // usually the first node, see TreeElement.updateTabStop.
     _handleKeyWithoutSelection(key, focusedNode) {
       switch (key) {
         case " ":
         case "ArrowDown":
         case "ArrowRight":
           {
-            return this._selectNode(focusedNode);
+            return this._goToNode(focusedNode);
           }
         default:
           {
@@ -1073,45 +1204,37 @@ var TreeElement = (function () {
       }
     }
     _moveLeft() {
-      let selectedNode = this._getSelectedNode();
+      let currentNode = this._getCurrentNode();
 
       /* istanbul ignore if */
-      if (!selectedNode) {
+      if (!currentNode) {
         return false;
       }
-      if (selectedNode.isFolder() && selectedNode.is_open) {
+      if (currentNode.isFolder() && currentNode.is_open) {
         // Left on an open node closes the node
-        void this._closeNode(selectedNode);
+        void this._closeNode(currentNode);
         return true;
       }
       // Left on a closed or end node moves focus to the node's parent
-      return this._selectNode(selectedNode.getParent());
+      return this._goToNode(currentNode.getParent());
     }
     _moveRight() {
-      let selectedNode = this._getSelectedNode();
-      if (selectedNode?.isFolder()) {
+      let currentNode = this._getCurrentNode();
+      if (currentNode?.isFolder()) {
         // folder node
-        if (selectedNode.is_open) {
+        if (currentNode.is_open) {
           // Right moves to the first child of an open node
-          return this._selectNode(selectedNode.getNextVisibleNode());
+          return this._goToNode(currentNode.getNextVisibleNode());
         }
         // Right expands a closed node
-        void this._openNode(selectedNode);
+        void this._openNode(currentNode);
         return true;
       }
       return false;
     }
-
-    /* Select the node.
-     * Don't do anything if the node is null.
-     * Result: a different node was selected.
-     */
-    _selectNode(node) {
-      if (node) {
-        this._originalSelectNode(node);
-        return true;
-      }
-      return false;
+    _toggle(node) {
+      this._toggleNodeInSelection(node);
+      return true;
     }
   }
 
@@ -1238,19 +1361,19 @@ var TreeElement = (function () {
         return;
       }
       let div = e.target.closest(`ul.${this._classNames.tree} .${this._classNames.element}`);
-      if (div) {
-        let node = this._getNode(div);
-        if (node) {
-          e.preventDefault();
-          e.stopPropagation();
-          this._triggerEvent("tree.contextmenu", {
-            node,
-            originalEvent: e
-          });
-          return false;
-        }
+      if (!div) {
+        return;
       }
-      return null;
+      let node = this._getNode(div);
+      if (!node) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      this._triggerEvent("tree.contextmenu", {
+        node,
+        originalEvent: e
+      });
     };
     _handleDblclick = e => {
       if (!e.target) {
@@ -1410,14 +1533,14 @@ var TreeElement = (function () {
    *
    * @groupDescription Searching
    * These work on any node, and search that node's subtree. Called on the root
-   * node, they search the whole tree — which is what the tree's own methods of
+   * node, they search the whole tree—which is what the tree's own methods of
    * the same name do.
    *
    * @groupDescription Changing the tree
    * ::: warning
    * These methods change the data without re-rendering. The tree's
-   * [methods](/reference/methods) — `appendNode`, `removeNode`, `moveNode` and
-   * friends — do the same and refresh the display, so prefer those. If you do
+   * [methods](/reference/methods)—`appendNode`, `removeNode`, `moveNode` and
+   * friends—do the same and refresh the display, so prefer those. If you do
    * use these, call `tree.refresh()` afterwards.
    * :::
    */
@@ -1466,7 +1589,7 @@ var TreeElement = (function () {
     */
     nodeClass;
     /**
-    The parent; `null` for the root node.
+    The parent, or `null` for the root node.
     */
     parent;
     /**
@@ -1558,7 +1681,9 @@ var TreeElement = (function () {
     }
 
     /**
-     * Inserts a new parent between this node and its current parent.
+     * Inserts a new parent between this node and its current parent. Its
+     * siblings move along: the new node takes all children of the current
+     * parent, and becomes its only child.
      *
      * @returns The new node, or `null` when the node has no parent.
      * @group Changing the tree
@@ -1628,7 +1753,7 @@ var TreeElement = (function () {
      * Returns the subtree as plain data, ready for `JSON.stringify`.
      * Internal properties (`parent`, `children`, `element`, `tree`,
      * `idMapping`, `nodeClass`, `load_on_demand`, `isEmptyFolder`) are left
-     * out; your own properties are kept.
+     * out. Your own properties are kept.
      *
      * ```js
      * tree.getTree().getData();
@@ -1720,7 +1845,7 @@ var TreeElement = (function () {
     }
 
     /**
-     * Like `getNextNode`, but skipping nodes inside closed folders — this is
+     * Like `getNextNode`, but skipping nodes inside closed folders. This is
      * what the arrow keys use.
      *
      * @group Moving around the tree
@@ -1804,7 +1929,7 @@ var TreeElement = (function () {
     }
 
     /**
-     * Returns the parent: `null` for a top-level node — the root node is not
+     * Returns the parent, or `null` for a top-level node: the root node is not
      * returned.
      *
      * @group Moving around the tree
@@ -1852,8 +1977,8 @@ var TreeElement = (function () {
     }
 
     /**
-     * Like `getPreviousNode`, but skipping nodes inside closed folders —
-     * this is what the arrow keys use.
+     * Like `getPreviousNode`, but skipping nodes inside closed folders.
+     * This is what the arrow keys use.
      *
      * @group Moving around the tree
      */
@@ -2217,12 +2342,14 @@ var TreeElement = (function () {
     constructor({
       _classNames: classNames,
       _getScrollLeft: getScrollLeft,
+      _multiSelect: multiSelect = false,
       _node: node,
       _tabIndex: tabIndex,
       _treeElement: treeElement
     }) {
       this._classNames = classNames;
       this._getScrollLeft = getScrollLeft;
+      this._multiSelect = multiSelect;
       this._node = node;
       this._tabIndex = tabIndex;
       this._treeElement = treeElement;
@@ -2238,35 +2365,36 @@ var TreeElement = (function () {
         return;
       }
       this._element.classList.remove(this._classNames.selected);
-      let titleSpan = this._getTitleSpan();
+
+      // Only a multiselect tree marks the nodes that are not selected
+      if (this._multiSelect) {
+        this._element.setAttribute("aria-selected", "false");
+        return;
+      }
+      this._element.removeAttribute("aria-selected");
 
       // Check for null or undefined
       if (this._tabIndex != null) {
-        titleSpan.setAttribute("tabindex", "-1");
+        this._element.setAttribute("tabindex", "-1");
       }
-      titleSpan.setAttribute("aria-selected", "false");
-      titleSpan.blur();
+      this._element.blur();
     }
     _select(mustSetFocus) {
       if (!this._isRendered()) {
         return;
       }
       this._element.classList.add(this._classNames.selected);
-      let titleSpan = this._getTitleSpan();
+      this._element.setAttribute("aria-selected", "true");
       let tabIndex = this._tabIndex;
 
       // Check for null or undefined
-      if (tabIndex != null) {
-        titleSpan.setAttribute("tabindex", tabIndex.toString());
+      if (tabIndex != null && !this._multiSelect) {
+        this._element.setAttribute("tabindex", tabIndex.toString());
       }
-      titleSpan.setAttribute("aria-selected", "true");
       if (mustSetFocus) {
-        titleSpan.focus();
+        this._element.focus();
       }
     }
-    _getTitleSpan() {
-      return this._element.querySelector(`:scope > .${this._classNames.element} > span.${this._classNames.title}`);
-    }
     _getUl() {
       return this._element.querySelector(":scope > ul");
     }
@@ -2326,10 +2454,10 @@ var TreeElement = (function () {
   class FolderElement extends NodeElement {
     constructor({
       _classNames: classNames,
-      _closedIconElement: closedIconElement,
       _getScrollLeft: getScrollLeft,
+      _icons: icons,
+      _multiSelect: multiSelect,
       _node: node,
-      _openedIconElement: openedIconElement,
       _renderChildren: renderChildren,
       _tabIndex: tabIndex,
       _treeElement: treeElement,
@@ -2338,12 +2466,12 @@ var TreeElement = (function () {
       super({
         _classNames: classNames,
         _getScrollLeft: getScrollLeft,
+        _multiSelect: multiSelect,
         _node: node,
         _tabIndex: tabIndex,
         _treeElement: treeElement
       });
-      this._closedIconElement = closedIconElement;
-      this._openedIconElement = openedIconElement;
+      this._icons = icons;
       this._renderChildren = renderChildren;
       this._triggerEvent = triggerEvent;
     }
@@ -2352,31 +2480,11 @@ var TreeElement = (function () {
         return;
       }
       this._node.is_open = false;
-      if (!this._isRendered()) {
-        this._triggerEvent("tree.close", {
-          node: this._node
-        });
-        return;
-      }
-      let button = this._getButton();
-      button.classList.add(this._classNames.closed);
-      button.replaceChildren();
-      let closedIconElement = this._closedIconElement;
-      if (closedIconElement) {
-        let icon = closedIconElement.cloneNode(true);
-        button.append(icon);
-      }
-      let ul = this._getUl();
-      if (ul) {
-        if (slide) {
-          await slideUp(ul, animationSpeed);
-        } else {
-          ul.style.display = "none";
-        }
+      if (this._isRendered()) {
+        this._setButtonState(false);
+        await this._setUlState(this._getUl(), false, slide, animationSpeed);
+        this._setElementState(false);
       }
-      this._element.classList.add(this._classNames.closed);
-      let titleSpan = this._getTitleSpan();
-      titleSpan.setAttribute("aria-expanded", "false");
       this._triggerEvent("tree.close", {
         node: this._node
       });
@@ -2386,34 +2494,17 @@ var TreeElement = (function () {
         return;
       }
       this._node.is_open = true;
-      if (!this._isRendered()) {
-        // The folder is rendered open when its parent is opened
-        this._triggerEvent("tree.open", {
-          node: this._node
-        });
-        return;
-      }
-      let button = this._getButton();
-      button.classList.remove(this._classNames.closed);
-      button.replaceChildren();
-      let openedIconElement = this._openedIconElement;
-      if (openedIconElement) {
-        let icon = openedIconElement.cloneNode(true);
-        button.append(icon);
-      }
 
-      // The children are rendered the first time the folder is opened
-      let ul = this._getUl() ?? this._renderChildren(this._node);
-      if (ul) {
-        if (slide) {
-          await slideDown(ul, animationSpeed);
-        } else {
-          ul.style.display = "block";
-        }
+      // A folder that is not rendered is rendered open when its parent is
+      // opened
+      if (this._isRendered()) {
+        this._setButtonState(true);
+
+        // The children are rendered the first time the folder is opened
+        let ul = this._getUl() ?? this._renderChildren(this._node);
+        await this._setUlState(ul, true, slide, animationSpeed);
+        this._setElementState(true);
       }
-      this._element.classList.remove(this._classNames.closed);
-      let titleSpan = this._getTitleSpan();
-      titleSpan.setAttribute("aria-expanded", "true");
       this._triggerEvent("tree.open", {
         node: this._node
       });
@@ -2424,8 +2515,34 @@ var TreeElement = (function () {
     _getButton() {
       return this._element.querySelector(`:scope > .${this._classNames.element} > .${this._classNames.toggler}`);
     }
+    _setButtonState(isOpen) {
+      setTogglerOpenState(this._getButton(), isOpen, this._classNames, this._icons);
+    }
+    _setElementState(isOpen) {
+      setFolderLiOpenState(this._element, isOpen, this._classNames);
+    }
+    async _setUlState(ul, isOpen, slide, animationSpeed) {
+      if (!ul) {
+        return;
+      }
+      if (slide) {
+        await (isOpen ? slideDown : slideUp)(ul, animationSpeed);
+      } else {
+        ul.style.display = isOpen ? "block" : "none";
+      }
+    }
   }
 
+  /* The options that setOption can change. The others are read once, in the
+   * constructor, so changing them later would have no effect or leave the tree
+   * in an inconsistent state.
+   */
+  let changeableOptions = ["animationSpeed", "dataUrl", "dragAndDrop", "keyboardSupport", "multiSelect", "onCanSelectNode", "selectable", "slide", "startDndDelay", "tabIndex"];
+
+  /**
+   * The options that `setOption` can change.
+   */
+
   // Url of a request. A relative url is resolved against the page, like a link
   // or `fetch` would, so it also works when the page is in a subdirectory.
 
@@ -2466,9 +2583,7 @@ var TreeElement = (function () {
       this._saveStateOption = saveState;
     }
     _getNodeIdToBeSelected() {
-      if (!this._saveStateOption) {
-        return null;
-      }
+      // Without the saveState option there is no state
       let state = this._getStateFromStorage();
       return state?.selected_node ? state.selected_node[0] ?? null : null;
     }
@@ -2597,17 +2712,19 @@ var TreeElement = (function () {
         this._removeFromSelection(node);
       }
     }
+
+    // result: is a node selected?
     _selectInitialNodes(nodeIds) {
-      let selectCount = 0;
+      let isNodeSelected = false;
       for (let nodeId of nodeIds) {
         let node = this._getNodeById(nodeId);
         if (!node) {
           continue;
         }
-        selectCount += 1;
         this._addToSelection(node);
+        isNodeSelected = true;
       }
-      return selectCount !== 0;
+      return isNodeSelected;
     }
   }
 
@@ -2921,9 +3038,9 @@ var TreeElement = (function () {
       } else {
         this._selectedNodes.delete(node.id);
         if (includeChildren) {
-          node.iterate(() => {
-            if (node.id != null) {
-              this._selectedNodes.delete(node.id);
+          node.iterate(child => {
+            if (child.id != null) {
+              this._selectedNodes.delete(child.id);
             }
             return true;
           });
@@ -2942,6 +3059,9 @@ var TreeElement = (function () {
      * mustToggle: support deselecting the selected node
      */
     _selectSingleNode(node, optionsParam) {
+      if (!this._canSelect(node)) {
+        return;
+      }
       let defaultOptions = {
         mustSetFocus: true,
         mustToggle: true
@@ -2950,35 +3070,39 @@ var TreeElement = (function () {
         ...defaultOptions,
         ...optionsParam
       };
-      let canSelect = () => {
-        if (!this._getSelectable()) {
-          return false;
-        }
-        let onCanSelectNode = this._getOnCanSelectNode();
-        return onCanSelectNode ? onCanSelectNode(node) : true;
-      };
-      if (!canSelect()) {
-        return;
-      }
-      let deselectCurrentNode = deselectedNode => {
-        this._removeFromSelection(deselectedNode);
-        this._getNodeElementForNode(deselectedNode)._deselect();
-      };
+      let otherSelectedNodes = this._getSelectedNodes().filter(selectedNode => selectedNode !== node);
       if (this._isNodeSelected(node)) {
-        if (selectOptions.mustToggle) {
-          deselectCurrentNode(node);
+        if (otherSelectedNodes.length) {
+          // Part of a multiple selection: keep only this node selected
+          for (let otherNode of otherSelectedNodes) {
+            this._deselectNode(otherNode);
+          }
+          for (let otherNode of otherSelectedNodes) {
+            this._triggerEvent("tree.deselect", {
+              node: otherNode
+            });
+          }
+        } else if (selectOptions.mustToggle) {
+          this._deselectNode(node);
           this._triggerEvent("tree.deselect", {
             node
           });
         }
       } else {
-        let deselectedNode = this._getSelectedNode();
-        if (deselectedNode) {
-          deselectCurrentNode(deselectedNode);
+        // tree.select reports the first deselected node; the others, from a
+        // multiple selection, get a tree.deselect.
+        let [deselectedNode = null, ...alsoDeselectedNodes] = otherSelectedNodes;
+        for (let otherNode of otherSelectedNodes) {
+          this._deselectNode(otherNode);
         }
         this._addToSelection(node);
         this._openParents(node);
         this._getNodeElementForNode(node)._select(selectOptions.mustSetFocus);
+        for (let otherNode of alsoDeselectedNodes) {
+          this._triggerEvent("tree.deselect", {
+            node: otherNode
+          });
+        }
         this._triggerEvent("tree.select", {
           deselectedNode,
           node
@@ -2987,6 +3111,43 @@ var TreeElement = (function () {
       this._updateTabStop();
       this._saveState();
     }
+
+    /* Add a node to the selection, or remove it when it is selected, without
+     * changing the other selected nodes.
+     * Checks if the node is selectable and saves the state.
+     */
+    _toggleNodeInSelection(node, mustSetFocus = true) {
+      if (!this._canSelect(node)) {
+        return;
+      }
+      if (this._isNodeSelected(node)) {
+        this._deselectNode(node);
+        this._triggerEvent("tree.deselect", {
+          node
+        });
+      } else {
+        this._addToSelection(node);
+        this._openParents(node);
+        this._getNodeElementForNode(node)._select(mustSetFocus);
+        this._triggerEvent("tree.select", {
+          deselectedNode: null,
+          node
+        });
+      }
+      this._updateTabStop();
+      this._saveState();
+    }
+    _canSelect(node) {
+      if (!this._getSelectable()) {
+        return false;
+      }
+      let onCanSelectNode = this._getOnCanSelectNode();
+      return onCanSelectNode ? onCanSelectNode(node) : true;
+    }
+    _deselectNode(node) {
+      this._removeFromSelection(node);
+      this._getNodeElementForNode(node)._deselect();
+    }
   }
 
   /* The default icons are svg instead of text: the triangle characters come
@@ -3013,6 +3174,7 @@ var TreeElement = (function () {
     // dataUrl: undefined,
     dragAndDrop: false,
     keyboardSupport: true,
+    multiSelect: false,
     nodeClass: Node,
     // onCanMove: undefined, // Can this node be moved?
     // onCanMoveTo: undefined, // Can this node be moved to this position? function(moved_node, target_node, position)
@@ -3078,7 +3240,7 @@ var TreeElement = (function () {
   };
 
   // Generated by config/generateVersion.mjs. Do not edit.
-  let version = "0.3.2";
+  let version = "0.4.1";
 
   // The types that appear in the public api. Consumers cannot import them from
   // the submodules directly, because those are not exposed in package.json.
@@ -3086,6 +3248,8 @@ var TreeElement = (function () {
   // as its global, instead of an object of named exports.
 
   class TreeElement {
+    // With multiSelect: the node that is the tab stop, see updateTabStop
+    _activeNode;
     _classNames;
     _dataLoader;
     _dndHandler;
@@ -3119,6 +3283,7 @@ var TreeElement = (function () {
       this._tree = new Node({}, true);
       this._nodeMap = new WeakMap();
       this._fallbackTabStop = null;
+      this._activeNode = null;
       let {
         ariaLabel,
         ariaLabelledBy,
@@ -3128,6 +3293,7 @@ var TreeElement = (function () {
         dataFilter,
         dragAndDrop,
         keyboardSupport,
+        multiSelect,
         onCanMove,
         onCanMoveTo,
         onCreateLi,
@@ -3141,7 +3307,6 @@ var TreeElement = (function () {
         rtl,
         saveState: saveStateOption,
         showEmptyFolder,
-        slide,
         tabIndex
       } = this._options;
       let classNames = this._classNames;
@@ -3179,6 +3344,17 @@ var TreeElement = (function () {
       let isNodeSelected = selectNodeHandler._isNodeSelected.bind(selectNodeHandler);
       let removeFromSelection = selectNodeHandler._removeFromSelection.bind(selectNodeHandler);
       let selectNode = selectNodeHandler._selectSingleNode.bind(selectNodeHandler);
+      let toggleNodeInSelection = selectNodeHandler._toggleNodeInSelection.bind(selectNodeHandler);
+
+      // With multiSelect, a click adds a node to the selection or removes it
+      let onClickTitle = node => {
+        if (this._options.multiSelect) {
+          toggleNodeInSelection(node, false);
+          this._focusNode(node);
+        } else {
+          selectNode(node);
+        }
+      };
       let getMouseDelay = () => this._options.startDndDelay ?? 0;
       let dataLoader = new DataLoader({
         _classNames: classNames,
@@ -3219,18 +3395,21 @@ var TreeElement = (function () {
         _openFolderDelay: openFolderDelay,
         _openNode: openNode,
         _refreshElements: refreshElements,
-        _slide: slide,
         _treeElement: treeElement,
         _triggerEvent: triggerEvent
       });
       let keyHandler = new KeyHandler({
         _closeNode: closeNode,
+        _focusNode: this._focusNode.bind(this),
+        _getActiveNode: this._getActiveNode.bind(this),
         _getFocusedNode: getFocusedNode,
         _getSelectedNode: getSelectedNode,
         _getTree: getTree,
         _keyboardSupport: keyboardSupport,
+        _multiSelect: multiSelect,
         _openNode: openNode,
         _selectNode: selectNode,
+        _toggleNodeInSelection: toggleNodeInSelection,
         _triggerEvent: triggerEvent
       });
       let renderer = new ElementsRenderer({
@@ -3244,6 +3423,7 @@ var TreeElement = (function () {
         _getTree: getTree,
         _htmlElement: treeElement,
         _isNodeSelected: isNodeSelected,
+        _multiSelect: multiSelect,
         _onCreateLi: onCreateLi,
         _openedIcon: openedIcon,
         _rtl: rtl,
@@ -3262,7 +3442,7 @@ var TreeElement = (function () {
         _getMouseDelay: getMouseDelay,
         _getNode: getNode,
         _onClickButton: this.toggle.bind(this),
-        _onClickTitle: selectNode,
+        _onClickTitle: onClickTitle,
         _onMouseCapture: onMouseCapture,
         _onMouseDrag: onMouseDrag,
         _onMouseStart: onMouseStart,
@@ -3278,6 +3458,9 @@ var TreeElement = (function () {
       this._saveStateHandler = saveStateHandler;
       this._scrollHandler = scrollHandler;
       this._selectNodeHandler = selectNodeHandler;
+      if (multiSelect) {
+        treeElement.addEventListener("focusin", this._handleFocusIn);
+      }
       this._initData();
     }
 
@@ -3310,8 +3493,9 @@ var TreeElement = (function () {
     }
 
     /**
-     * Inserts a new node between a node and its parent, taking the node as its
-     * child.
+     * Inserts a new node between a node and its parent. The siblings of the node
+     * move along: the new node takes all children of the parent, and becomes its
+     * only child.
      *
      * @returns The new node, or `null` when the node has no parent.
      * @group Changing the tree
@@ -3387,6 +3571,7 @@ var TreeElement = (function () {
       this._dataLoader._deinit();
       this._keyHandler._deinit();
       this._mouseHandler._deinit();
+      this._htmlElement.removeEventListener("focusin", this._handleFocusIn);
       this._tree = new Node({}, true);
     }
 
@@ -3480,7 +3665,7 @@ var TreeElement = (function () {
     }
 
     /**
-     * Returns the current state — `open_nodes` and `selected_node` — whether or
+     * Returns the current state—`open_nodes` and `selected_node`—whether or
      * not `saveState` is enabled.
      *
      * @group State
@@ -3499,7 +3684,7 @@ var TreeElement = (function () {
     }
 
     /**
-     * Returns the root node. It is not rendered; its `children` are the
+     * Returns the root node. It is not rendered, and its `children` are the
      * top-level nodes. Also available as the `tree` property.
      *
      * @group Finding nodes
@@ -3574,7 +3759,8 @@ var TreeElement = (function () {
     }
 
     /**
-     * Selects the next visible node, like the down arrow key.
+     * Selects the next visible node, like the down arrow key. With
+     * `multiSelect` it moves the focus instead.
      *
      * @group Selection
      */
@@ -3599,7 +3785,8 @@ var TreeElement = (function () {
     }
 
     /**
-     * Selects the previous visible node, like the up arrow key.
+     * Selects the previous visible node, like the up arrow key. With
+     * `multiSelect` it moves the focus instead.
      *
      * @group Selection
      */
@@ -3608,7 +3795,7 @@ var TreeElement = (function () {
     }
 
     /**
-     * Opens a folder, and the folders above it. A node marked `load_on_demand`
+     * Opens a folder, and the folders that contain it. A node marked `load_on_demand`
      * is fetched first, so await the promise when you need to know it is really
      * open.
      *
@@ -3624,7 +3811,7 @@ var TreeElement = (function () {
     async openNode(node, slide) {
       let mustSlide = slide ?? this._options.slide;
       let doOpenNode = async (openedNode, slideOption) => {
-        if (!node.children.length) {
+        if (!openedNode.children.length) {
           return;
         }
         let folderElement = this._createFolderElement(openedNode);
@@ -3729,8 +3916,8 @@ var TreeElement = (function () {
      */
     selectNode(node, options) {
       if (!node) {
-        // Called with empty node -> deselect current node
-        this._deselectCurrentNode();
+        // Called with empty node -> deselect all nodes
+        this._deselectAllNodes();
         this._saveStateHandler._saveState();
         return;
       }
@@ -3743,13 +3930,43 @@ var TreeElement = (function () {
     }
 
     /**
-     * Changes an option after construction. See
-     * [Options](/reference/options#changing-an-option-later) for the caveats.
+     * Changes an option after construction. Only some options can be changed:
+     * the others throw an error. See
+     * [Options](/reference/options#changing-an-option-later).
      *
      * @group Other
      */
     setOption(option, value) {
+      if (!changeableOptions.includes(option)) {
+        throw new Error(`The option ${option} can only be set in the constructor`);
+      }
       this._options[option] = value;
+      switch (option) {
+        case "dragAndDrop":
+          {
+            this._renderer._setDragAndDrop(Boolean(value));
+            break;
+          }
+        case "keyboardSupport":
+          {
+            this._keyHandler._setKeyboardSupport(Boolean(value));
+            break;
+          }
+        case "multiSelect":
+          {
+            this._setMultiSelect(Boolean(value));
+            break;
+          }
+        case "tabIndex":
+          {
+            this._options.tabIndex = value ?? undefined;
+            this._renderer._setTabIndex(this._options.tabIndex);
+            this._fallbackTabStop = null;
+            this._updateTabStop();
+            break;
+          }
+        // No default
+      }
     }
 
     /**
@@ -3782,8 +3999,8 @@ var TreeElement = (function () {
     }
 
     /**
-     * Returns the tree as a json string, including changes made through the
-     * api.
+     * Returns the tree as a JSON string, including changes made through the
+     * API.
      *
      * @group Other
      */
@@ -3796,7 +4013,7 @@ var TreeElement = (function () {
      * name.
      *
      * Changing the `id` re-indexes the node. `children` and `parent` are
-     * ignored — use `loadData` or `moveNode` for those.
+     * ignored—use `loadData` or `moveNode` for those.
      *
      * @example
      * ```js
@@ -3847,9 +4064,7 @@ var TreeElement = (function () {
     }
     _createFolderElement(node) {
       let classNames = this._classNames;
-      let closedIconElement = this._renderer._closedIconElement;
       let getScrollLeft = this._scrollHandler._getScrollLeft.bind(this._scrollHandler);
-      let openedIconElement = this._renderer._openedIconElement;
       let tabIndex = this._options.tabIndex;
       let treeElement = this._htmlElement;
       let triggerEvent = this._triggerEvent.bind(this);
@@ -3864,10 +4079,10 @@ var TreeElement = (function () {
       };
       return new FolderElement({
         _classNames: classNames,
-        _closedIconElement: closedIconElement,
         _getScrollLeft: getScrollLeft,
+        _icons: this._renderer._icons,
+        _multiSelect: this._options.multiSelect,
         _node: node,
-        _openedIconElement: openedIconElement,
         _renderChildren: renderChildren,
         _tabIndex: tabIndex,
         _treeElement: treeElement,
@@ -3882,6 +4097,7 @@ var TreeElement = (function () {
       return new NodeElement({
         _classNames: classNames,
         _getScrollLeft: getScrollLeft,
+        _multiSelect: this._options.multiSelect,
         _node: node,
         _tabIndex: tabIndex,
         _treeElement: treeElement
@@ -3911,9 +4127,8 @@ var TreeElement = (function () {
       }
       return requestUrl;
     }
-    _deselectCurrentNode() {
-      let node = this.getSelectedNode();
-      if (node) {
+    _deselectAllNodes() {
+      for (let node of this.getSelectedNodes()) {
         this.removeFromSelection(node);
       }
     }
@@ -3926,6 +4141,20 @@ var TreeElement = (function () {
       }
     }
 
+    // The treeitem of the first node, or null when the tree is empty
+    // Move the focus to a node, without selecting it
+    _focusNode(node) {
+      this._activeNode = node;
+      this._updateTabStop();
+      node.element?.focus();
+    }
+
+    // With multiSelect: the active node, if it is still rendered in the tree
+    _getActiveNode() {
+      let element = this._activeNode?.element;
+      return element && this._htmlElement.contains(element) ? this._activeNode : null;
+    }
+
     // Get the maximum level for auto open
     _getAutoOpenMaxLevel() {
       if (this._options.autoOpen === true) {
@@ -3941,25 +4170,16 @@ var TreeElement = (function () {
       /* istanbul ignore next @preserve */
       return 0;
     }
-
-    // The title span of the first node, or null when the tree is empty
-    _getFirstTitleSpan() {
-      let firstElement = this._tree.children[0]?.element;
-      return firstElement ? firstElement.querySelector(`:scope > .${this._classNames.element} > span.${this._classNames.title}`) : null;
+    _getFirstTreeItem() {
+      return this._tree.children[0]?.element ?? null;
     }
 
     // The node of the HTML element that has the focus, if it is in this tree
     _getFocusedNode() {
       let activeElement = document.activeElement;
 
-      /* istanbul ignore if */
-      if (!activeElement) {
-        return null;
-      }
-
-      // The keyboard must still work for input elements.
-      let tagName = activeElement.tagName;
-      if (tagName !== "A" && tagName !== "SPAN") {
+      // An active element must exist and the keyboard must still work for input elements.
+      if (!activeElement || !["A", "LI", "SPAN"].includes(activeElement.tagName)) {
         return null;
       }
       let node = this.getNode(activeElement);
@@ -3975,6 +4195,16 @@ var TreeElement = (function () {
     _getNodeIdToBeSelected() {
       return this._saveStateHandler._getNodeIdToBeSelected();
     }
+
+    // With multiSelect, the focused node becomes the tab stop
+    _handleFocusIn = () => {
+      let node = this._getFocusedNode();
+      if (!node || node === this._activeNode) {
+        return;
+      }
+      this._activeNode = node;
+      this._updateTabStop();
+    };
     _hasRenderedSelectedNode() {
       return this.getSelectedNodes().some(node => Boolean(node.element));
     }
@@ -3998,11 +4228,17 @@ var TreeElement = (function () {
         this._isInitialized = true;
         this._triggerEvent("tree.init");
       };
+
+      // Before the tree is replaced: then the focused node is no longer in it
+      let focusedNode = this._getFocusedNode();
       this._tree = new this._options.nodeClass(null, true, this._options.nodeClass);
       this._selectNodeHandler._clear();
       this._tree.loadFromData(data);
       let mustLoadOnDemand = this._setInitialState();
       this._refreshElements(null);
+      if (focusedNode) {
+        this._restoreFocus(focusedNode);
+      }
       if (mustLoadOnDemand) {
         // Load data on demand and then init the tree
         void this._setInitialStateOnDemand().then(doInit);
@@ -4010,15 +4246,6 @@ var TreeElement = (function () {
         doInit();
       }
     }
-
-    // Does an HTML element of the tree have the focus?
-    _isFocusOnTree() {
-      return this._getFocusedNode() !== null;
-    }
-    _isSelectedNodeInSubtree(subtree) {
-      let selectedNode = this.getSelectedNode();
-      return selectedNode ? subtree === selectedNode || subtree.isParentOf(selectedNode) : false;
-    }
     async _loadFolderOnDemand(node, slide) {
       node.is_loading = true;
       await this.loadDataFromUrl(undefined, node);
@@ -4051,7 +4278,6 @@ var TreeElement = (function () {
     }
     _mouseStart(positionInfo) {
       /* istanbul ignore if */
-      // eslint-disable-next-line unicorn/prefer-ternary
       if (!this._options.dragAndDrop) {
         return false;
       }
@@ -4060,10 +4286,10 @@ var TreeElement = (function () {
     _mouseStop(positionInfo) {
       /* istanbul ignore if */
       if (!this._options.dragAndDrop) {
-        return false;
+        return;
       }
       this._scrollHandler._stopScrolling();
-      return this._dndHandler._mouseStop(positionInfo);
+      this._dndHandler._mouseStop(positionInfo);
     }
     _openParents(node) {
       let parent = node.parent;
@@ -4077,25 +4303,32 @@ var TreeElement = (function () {
       from_node: redraw this subtree
     */
     _refreshElements(fromNode) {
-      let mustSetFocus = this._isFocusOnTree();
-      let mustSelect = fromNode ? this._isSelectedNodeInSubtree(fromNode) : false;
+      let focusedNode = this._getFocusedNode();
+
+      // The renderer marks the selected nodes, so only the focus needs restoring
       this._renderer._render(fromNode);
-      if (mustSelect) {
-        this._selectCurrentNode(mustSetFocus);
+      if (focusedNode) {
+        this._restoreFocus(focusedNode);
       }
       this._updateTabStop();
       this._triggerEvent("tree.refresh");
     }
-    _saveState() {
-      this._saveStateHandler._saveState();
-    }
-    _selectCurrentNode(mustSetFocus) {
-      let node = this.getSelectedNode();
-      if (!node) {
+
+    // Rendering replaces the elements of the nodes, so a focused element can be
+    // gone. Then move the focus to the new element of the same node. After
+    // loadData the nodes are new objects, so look the node up by its id.
+    _restoreFocus(focusedNode) {
+      if (this._htmlElement.contains(document.activeElement)) {
         return;
       }
-      let nodeElement = this._getNodeElementForNode(node);
-      nodeElement._select(mustSetFocus);
+      let node = (focusedNode.id == null ? null : this.getNodeById(focusedNode.id)) ?? focusedNode;
+      let element = node.element;
+      if (element && this._htmlElement.contains(element)) {
+        element.focus();
+      }
+    }
+    _saveState() {
+      this._saveStateHandler._saveState();
     }
 
     // Set initial state, either by restoring the state or auto-opening nodes
@@ -4150,6 +4383,25 @@ var TreeElement = (function () {
       }
     }
 
+    /* Change multiSelect after construction. The attributes of the nodes
+     * depend on it, so the tree is rendered again. The selection is kept: a
+     * tree without multiSelect can also have several selected nodes, see
+     * addToSelection.
+     */
+    _setMultiSelect(multiSelect) {
+      let focusedNode = this._getFocusedNode();
+      this._keyHandler._setMultiSelect(multiSelect);
+      this._renderer._setMultiSelect(multiSelect);
+      if (multiSelect) {
+        this._htmlElement.addEventListener("focusin", this._handleFocusIn);
+      } else {
+        this._htmlElement.removeEventListener("focusin", this._handleFocusIn);
+      }
+      this._activeNode = multiSelect ? focusedNode : null;
+      this._fallbackTabStop = null;
+      this._refreshElements(null);
+    }
+
     // Set this HTML element to this node in the node map.
     _setNodeElement(element, node) {
       this._nodeMap.set(element, node);
@@ -4161,12 +4413,22 @@ var TreeElement = (function () {
     /* Keyboard users reach the tree through the tab stop. The selected node is
      * the tab stop, see NodeElement.select. Without a selected node, the first
      * node is the tab stop, so the tree can always be reached.
+     * With multiSelect the tab stop is the active node: the node that was
+     * focused last. Without one, it is the first node.
      */
     _updateTabStop() {
       let tabIndex = this._options.tabIndex;
+      let multiSelect = this._options.multiSelect;
       let previousTabStop = this._fallbackTabStop;
-      let tabStop = tabIndex == null || this._hasRenderedSelectedNode() ? null : this._getFirstTitleSpan();
-      if (previousTabStop && previousTabStop !== tabStop && previousTabStop.getAttribute("aria-selected") !== "true") {
+      let tabStop;
+      if (tabIndex == null) {
+        tabStop = null;
+      } else if (multiSelect) {
+        tabStop = this._getActiveNode()?.element ?? this._getFirstTreeItem();
+      } else {
+        tabStop = this._hasRenderedSelectedNode() ? null : this._getFirstTreeItem();
+      }
+      if (previousTabStop && previousTabStop !== tabStop && (multiSelect || previousTabStop.getAttribute("aria-selected") !== "true")) {
         previousTabStop.setAttribute("tabindex", "-1");
       }
       if (tabStop && tabIndex != null) {