@sveltia/ui 0.61.0 → 0.62.1

package/dist/components/button/button.svelte

@@ -49,6 +49,11 @@
   } = $props();
 </script>
 
+<!--
+  The key shortcut handler is attached only when there are shortcuts to bind. A falsy value counts
+  as no attachment at all, which saves an effect per button — and both `<Option>` and `<MenuItem>`
+  wrap one, so a long list would otherwise pay for an effect per item that has nothing to do.
+-->
 <button
   bind:this={element}
   {...restProps}
@@ -70,7 +75,7 @@
   data-name={name}
   data-label={label}
   data-value={value}
-  {@attach activateKeyShortcuts(keyShortcuts)}
+  {@attach keyShortcuts && activateKeyShortcuts(keyShortcuts)}
 >
   {@render startIcon?.()}
   {#if variant === 'link'}

package/dist/components/resizable-pane/resizable-handle.svelte

@@ -91,10 +91,19 @@
   let keyResizing = $state(false);
 
   /**
-   * Get the pane group container element's size in pixels for px→% conversion.
+   * The pane group container's size in pixels, used for px→% conversion. Measured once when a drag
+   * begins rather than on every pointer move: reading `clientWidth` forces the browser to lay the
+   * page out, which is the last thing wanted in the middle of a drag, and the container cannot
+   * change size while the pointer holding it is down.
+   * @type {number}
+   */
+  let containerSize = 0;
+
+  /**
+   * Measure the pane group container element's size in pixels.
    * @returns {number} Container size in pixels.
    */
-  const getContainerSize = () => {
+  const measureContainerSize = () => {
     const container = element?.closest('.resizable-pane-group');
 
     if (!container) return 0;
@@ -116,7 +125,6 @@
 
     const screenPos = isHorizontal ? screenX : screenY;
     const pixelDelta = screenPos - startScreenPos;
-    const containerSize = getContainerSize();
 
     if (!containerSize) return;
 
@@ -167,6 +175,7 @@
     dragging = true;
     startScreenPos = isHorizontal ? screenX : screenY;
     targetPointerId = pointerId;
+    containerSize = measureContainerSize();
     element?.setPointerCapture(pointerId);
 
     onResizeStart?.();

package/dist/components/select/select-tags.svelte

@@ -59,6 +59,13 @@
 
   /** @type {Map<any, { label: string, value: any, searchValue?: string }>} */
   const optionMap = $derived(new Map(options.map((o) => [o.value, o])));
+  /**
+   * The selected values as a set, so the option list below can test membership in constant time.
+   * Calling `values.includes()` once per option instead makes rendering the list quadratic in the
+   * number of options and selected tags.
+   * @type {Set<any>}
+   */
+  const selectedValues = $derived(new Set(values));
   const prevKey = $derived(isRTL() ? 'ArrowRight' : 'ArrowLeft');
   const nextKey = $derived(isRTL() ? 'ArrowLeft' : 'ArrowRight');
 
@@ -248,7 +255,7 @@
       }}
     >
       {#each options as { label, value, searchValue } (value)}
-        {#if !values.includes(value)}
+        {#if !selectedValues.has(value)}
           <Option {label} {value} {searchValue} />
         {/if}
       {/each}

package/dist/locales/cs.yaml

@@ -0,0 +1,113 @@
+# Dialog action button labels
+ok: OK
+cancel: Zrušit
+close: Zavřít
+
+# Button to clear content, e.g. search input or calendar date
+clear: Vymazat
+
+# Text editor dialog buttons for link/image insertion
+insert: Vložit
+update: Aktualizovat
+remove: Odebrat
+
+# Combobox dropdown toggle button aria-labels
+collapse: Sbalit
+expand: Rozbalit
+
+# Infobar/toast dismiss button label
+dismiss: Zavřít
+
+# Calendar component
+calendar:
+  # View switcher group aria-labels and navigation button aria-labels
+  year: Rok
+  previous_decade: Předchozí desetiletí
+  next_decade: Další desetiletí
+  month: Měsíc
+  previous_month: Předchozí měsíc
+  next_month: Další měsíc
+  # “Today” button label in footer
+  today: Dnes
+
+# Split button component
+split_button:
+  # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
+  x_options: 'Možnosti pro {$name}'
+  # Dropdown toggle aria-label
+  more_options: Další možnosti
+
+# Combobox component
+combobox:
+  # Placeholder when no option is selected
+  select_an_option: Vyberte možnost…
+  # Filter input aria-label
+  filter_options: Možnosti filtrování
+  # Empty state message when filter has no matches
+  no_matching_options: Nebyly nalezeny žádné odpovídající možnosti
+
+# Number input component
+number_input:
+  # Spin button aria-labels for incrementing/decrementing the number value
+  increase: Zvýšit
+  decrease: Snížit
+
+# Password input component
+password_input:
+  # Visibility toggle button aria-labels
+  show_password: Zobrazit heslo
+  hide_password: Skrýt heslo
+
+# Secret input component (API keys, tokens, etc.)
+secret_input:
+  # Visibility toggle button aria-labels
+  show_secret: Zobrazit tajný klíč
+  hide_secret: Skrýt tajný klíč
+
+# Select tags component (multi-select)
+select_tags:
+  # Listbox aria-label
+  selected_options: Vybrané možnosti
+  # Remove button aria-label, e.g. “Remove Option 1”
+  remove_x: 'Odebrat {$name}'
+
+# Text editor component
+text_editor:
+  # Toolbar aria-labels
+  text_editor: Textový editor
+  code_editor: Editor kódu
+  # Block style menu button and menu aria-labels
+  text_style_options: Možnosti formátování textu
+  show_text_style_options: Zobrazit možnosti formátování textu
+  # Block style menu items
+  paragraph: Odstavec
+  heading_1: Nadpis 1
+  heading_2: Nadpis 2
+  heading_3: Nadpis 3
+  heading_4: Nadpis 4
+  heading_5: Nadpis 5
+  heading_6: Nadpis 6
+  bulleted_list: Seznam s odrážkami
+  numbered_list: Číslovaný seznam
+  blockquote: Citace
+  code_block: Blok kódu
+  # Inline style button aria-labels
+  bold: Tučné
+  italic: Kurzíva
+  strikethrough: Přeškrtnuté
+  code: Kód
+  link: Odkaz
+  # Link dialog title
+  insert_link: Vložit odkaz
+  update_link: Aktualizovat odkaz
+  # Link dialog input field labels
+  text: Text
+  url: URL
+  # Markdown mode toggle button aria-label
+  edit_in_markdown: Upravit v Markdownu
+  # Error message when rich text conversion fails
+  converter_error: Nelze aktivovat režim formátovaného textu. Použijte prosím místo toho editor prostého textu.
+  # Language selector aria-label
+  language: Jazyk
+  # Plain text mode option in language selector
+  plain_text: Prostý text

package/dist/services/group.svelte.d.ts

@@ -8,7 +8,6 @@ export class Group {
      * @param {HTMLElement} parent Parent element.
      * @param {object} [options] Options.
      * @param {boolean} [options.clickToSelect] Whether to select an item by clicking on it.
-     * @todo Check for added elements probably with `MutationObserver`.
      */
     constructor(parent: HTMLElement, { clickToSelect }?: {
         clickToSelect?: boolean | undefined;
@@ -46,6 +45,7 @@ export class Group {
      * @type {'selected' | 'first'}
      */
     rovingTabStop: "selected" | "first";
+    observer: MutationObserver;
     /**
      * Activate the members.
      */
@@ -152,6 +152,7 @@ export class Group {
     onUpdate({ searchTerms }: {
         searchTerms: string;
     }): void;
+    #private;
 }
 export function activateGroup(paramsOrGetter?: object | (() => object) | undefined): Attachment;
 import type { Attachment } from 'svelte/attachments';

package/dist/services/group.svelte.js

@@ -105,19 +105,45 @@ const config = {
 const FOCUSABLE_SELECTOR = 'a[href], button, input, select, textarea, summary, [tabindex]';
 
 /**
- * List the document’s tab stops in document order. Positive `tabindex` values, which reorder the
- * sequence, are not accounted for; they’re discouraged and absent from this library.
+ * Move focus to the tab stop next to the given element in document order. Positive `tabindex`
+ * values, which reorder the sequence, are not accounted for; they’re discouraged and absent from
+ * this library.
+ *
+ * The candidates are narrowed by attribute alone before any of them is measured, and the measuring
+ * — `getClientRects()`, which forces the browser to lay the page out — then walks outward from the
+ * element and stops at the first candidate that is actually rendered. Measuring every focusable
+ * element in the document up front is what a menu sitting on a large page cannot afford.
  * @internal
- * @returns {HTMLElement[]} Elements that can be reached with Tab.
+ * @param {HTMLElement} element Element to start from.
+ * @param {boolean} backwards Whether to move to the previous tab stop rather than the next.
  */
-const getTabStops = () =>
-  /** @type {HTMLElement[]} */ ([...document.querySelectorAll(FOCUSABLE_SELECTOR)]).filter(
-    (element) =>
-      element.tabIndex >= 0 &&
-      !element.matches(':disabled, [aria-disabled="true"], [hidden], [inert], [inert] *') &&
-      !!element.getClientRects().length,
+const focusAdjacentTabStop = (element, backwards) => {
+  const candidates = /** @type {HTMLElement[]} */ ([
+    ...document.querySelectorAll(FOCUSABLE_SELECTOR),
+  ]).filter(
+    (candidate) =>
+      candidate === element ||
+      (candidate.tabIndex >= 0 &&
+        !candidate.matches(':disabled, [aria-disabled="true"], [hidden], [inert], [inert] *')),
   );
 
+  const index = candidates.indexOf(element);
+
+  if (index === -1) {
+    return;
+  }
+
+  const step = backwards ? -1 : 1;
+
+  for (let i = index + step; i >= 0 && i < candidates.length; i += step) {
+    if (candidates[i].getClientRects().length) {
+      candidates[i].focus();
+
+      return;
+    }
+  }
+};
+
 /**
  * Find the element that opens the menu the given element belongs to. A menu lives outside its
  * opener in the DOM tree, so the link runs the other way: the opener points at the menu’s container
@@ -151,12 +177,60 @@ const getMenuOpener = (element) => {
  * Implement keyboard and mouse interactions for a grouping composite widget.
  */
 export class Group {
+  /**
+   * Memoized member lists, discarded whenever the widget’s subtree changes. See {@link #members}.
+   * @type {{ all: HTMLElement[], active: HTMLElement[] } | undefined}
+   */
+  #memberCache = undefined;
+
+  /**
+   * Normalized search value of each member, kept alongside the raw value it was derived from so it
+   * can be reused until the member’s label actually changes. Filtering runs over every member on
+   * every keystroke, and `normalize()` is not free — it decomposes the string and strips the
+   * diacritics.
+   * @type {WeakMap<HTMLElement, { raw: string, normalized: string }>}
+   */
+  #searchValueCache = new WeakMap();
+
+  /**
+   * Hidden state each member was last told about, so the filter can skip the members whose state
+   * hasn’t moved. The DOM is deliberately not consulted for this: the listener updates a component,
+   * which renders asynchronously, so two keystrokes within a frame would read a stale attribute.
+   * @type {WeakMap<HTMLElement, boolean>}
+   */
+  #hiddenState = new WeakMap();
+
+  /**
+   * Get the normalized value a member is searched by, computing it only when the underlying raw
+   * value has changed since the last call.
+   * @param {HTMLElement} member Member element.
+   * @returns {string} Normalized search value.
+   */
+  #getNormalizedSearchValue(member) {
+    const raw =
+      member.dataset.searchValue ??
+      member.dataset.label ??
+      member.querySelector('.label')?.textContent ??
+      /** @type {string} */ (member.textContent);
+
+    const cached = this.#searchValueCache.get(member);
+
+    if (cached?.raw === raw) {
+      return cached.normalized;
+    }
+
+    const normalized = normalize(raw);
+
+    this.#searchValueCache.set(member, { raw, normalized });
+
+    return normalized;
+  }
+
   /**
    * Initialize a new `Group` instance.
    * @param {HTMLElement} parent Parent element.
    * @param {object} [options] Options.
    * @param {boolean} [options.clickToSelect] Whether to select an item by clicking on it.
-   * @todo Check for added elements probably with `MutationObserver`.
    */
   constructor(parent, { clickToSelect = true } = {}) {
     parent.dispatchEvent(new CustomEvent('Initializing'));
@@ -218,6 +292,20 @@ export class Group {
 
     this.parent.tabIndex = focusChild ? -1 : 0;
 
+    // The members can be added, removed, disabled or hidden at any time, which is what invalidates
+    // the cached lists. Only the attributes that decide membership are watched, so the group’s own
+    // writes — the selected state and the roving `tabindex` — don’t needlessly discard the cache.
+    this.observer = new globalThis.MutationObserver(() => {
+      this.#memberCache = undefined;
+    });
+
+    this.observer.observe(parent, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['aria-disabled', 'aria-hidden'],
+    });
+
     // Wait a bit before the relevant components, including the `aria-controls` target are mounted
     (async () => {
       await sleep(100);
@@ -292,8 +380,9 @@ export class Group {
 
     const tabStop =
       this.rovingTabStop === 'selected'
-        ? (activeMembers.find((element) => element.matches(`[${this.childSelectedAttr}="true"]`)) ??
-          activeMembers[0])
+        ? (activeMembers.find(
+            (element) => element.getAttribute(this.childSelectedAttr) === 'true',
+          ) ?? activeMembers[0])
         : activeMembers[0];
 
     allMembers.forEach((element) => {
@@ -309,12 +398,42 @@ export class Group {
     return this.childRoles.map((role) => `[role="${role}"]`).join(',');
   }
 
+  /**
+   * The member lists, recomputed only once the widget’s subtree has actually changed. A single
+   * arrow key reaches these several times over, and a composite widget can hold thousands of
+   * members, so the `querySelectorAll` and the `matches()` per member that back them are far too
+   * expensive to repeat on every read.
+   *
+   * The observer’s pending records are drained here rather than left to its callback, which runs a
+   * microtask later — too late for a read that happens synchronously after a mutation, as when a
+   * key is dispatched right after the members are swapped out.
+   * @type {{ all: HTMLElement[], active: HTMLElement[] }}
+   */
+  get #members() {
+    if (this.observer.takeRecords().length) {
+      this.#memberCache = undefined;
+    }
+
+    if (!this.#memberCache) {
+      const all = /** @type {HTMLElement[]} */ ([...this.parent.querySelectorAll(this.selector)]);
+
+      this.#memberCache = {
+        all,
+        active: all.filter(
+          (element) => !element.matches('[aria-disabled="true"], [aria-hidden="true"]'),
+        ),
+      };
+    }
+
+    return this.#memberCache;
+  }
+
   /**
    * List of all the members.
    * @type {HTMLElement[]}
    */
   get allMembers() {
-    return /** @type {HTMLElement[]} */ ([...this.parent.querySelectorAll(this.selector)]);
+    return this.#members.all;
   }
 
   /**
@@ -322,9 +441,7 @@ export class Group {
    * @type {HTMLElement[]}
    */
   get activeMembers() {
-    return this.allMembers.filter(
-      (element) => !element.matches('[aria-disabled="true"], [aria-hidden="true"]'),
-    );
+    return this.#members.active;
   }
 
   /**
@@ -392,13 +509,7 @@ export class Group {
     // Somewhere to stand while the menu is torn down, and the fallback if there’s nothing beyond
     opener.focus();
     await sleep(50);
-
-    const tabStops = getTabStops();
-    const index = tabStops.indexOf(opener);
-
-    if (index > -1) {
-      tabStops[index + (backwards ? -1 : 1)]?.focus();
-    }
+    focusAdjacentTabStop(opener, backwards);
   }
 
   /**
@@ -455,8 +566,8 @@ export class Group {
    * @type {HTMLElement | undefined}
    */
   get selected() {
-    return this.activeMembers.find((element) =>
-      element.matches(`[${this.childSelectedAttr}="true"]`),
+    return this.activeMembers.find(
+      (element) => element.getAttribute(this.childSelectedAttr) === 'true',
     );
   }
 
@@ -503,14 +614,28 @@ export class Group {
     const selectByKeydown =
       event.type === 'keydown' && /** @type {KeyboardEvent} */ (event).key === ' ';
 
+    /**
+     * Members that took part in this selection, and whose roving `tabindex` therefore has to be
+     * updated. The ones skipped below belong to another menu group and are left alone.
+     * @type {HTMLElement[]}
+     */
+    const affected = [];
+    /**
+     * Whether the target itself took part, meaning it’s the one to receive focus.
+     * @type {boolean}
+     */
+    let targetAffected = false;
+
     this.activeMembers.forEach((element) => {
-      const isMenuItemCheckbox = element.matches('[role="menuitemcheckbox"]');
-      const isMenuItemRadio = element.matches('[role="menuitemradio"]');
+      // Reading the role once and comparing it is markedly cheaper than putting every member
+      // through the selector engine three times over
+      const role = element.getAttribute('role');
+      const isMenuItemCheckbox = role === 'menuitemcheckbox';
+      const isMenuItemRadio = role === 'menuitemradio';
 
       if (
         (isMenuItemCheckbox || isMenuItemRadio) &&
-        (element.getAttribute('role') !== targetRole ||
-          element.closest(this.parentGroupSelector) !== targetParent)
+        (role !== targetRole || element.closest(this.parentGroupSelector) !== targetParent)
       ) {
         return;
       }
@@ -518,10 +643,13 @@ export class Group {
       const multiSelect = isMenuItemCheckbox || this.multi;
       const singleSelect = isMenuItemRadio || !multiSelect;
       const isTarget = element === newTarget;
-      const isSelected = element.matches(`[${this.childSelectedAttr}="true"]`);
+      const isSelected = element.getAttribute(this.childSelectedAttr) === 'true';
       const controlTargetId = this.controlsPanel ? element.getAttribute('aria-controls') : null;
       const controlTarget = controlTargetId ? document.getElementById(controlTargetId) : null;
 
+      affected.push(element);
+      targetAffected ||= isTarget;
+
       if (multiSelect && isTarget && (selectByClick || selectByKeydown)) {
         element.setAttribute(this.childSelectedAttr, String(!isSelected));
         element.dispatchEvent(
@@ -544,7 +672,7 @@ export class Group {
         );
 
         if (isTarget) {
-          if (event.type === 'keydown' && element.matches('[role="radio"]')) {
+          if (event.type === 'keydown' && role === 'radio') {
             element.click();
           }
 
@@ -552,17 +680,7 @@ export class Group {
         }
       }
 
-      if (this.focusChild) {
-        // Wait a bit before the element is rerendered
-        globalThis.requestAnimationFrame(() => {
-          element.tabIndex = isTarget ? 0 : -1;
-
-          if (isTarget) {
-            element.focus();
-            element.dispatchEvent(new CustomEvent('Focus'));
-          }
-        });
-      } else {
+      if (!this.focusChild) {
         element.classList.toggle('focused', isTarget);
 
         if (isTarget) {
@@ -602,6 +720,21 @@ export class Group {
       }
     });
 
+    if (this.focusChild) {
+      // Wait a bit before the elements are rerendered. A single frame serves the whole group;
+      // scheduling a callback per member would queue thousands of them on a large widget.
+      globalThis.requestAnimationFrame(() => {
+        affected.forEach((element) => {
+          element.tabIndex = element === newTarget ? 0 : -1;
+        });
+
+        if (targetAffected) {
+          newTarget.focus();
+          newTarget.dispatchEvent(new CustomEvent('Focus'));
+        }
+      });
+    }
+
     this.parent.dispatchEvent(
       new CustomEvent('Change', { detail: getSelectedItemDetail(newTarget) }),
     );
@@ -796,6 +929,7 @@ export class Group {
    * Clean up event listeners.
    */
   destroy() {
+    this.observer.disconnect();
     this.parent.removeEventListener('click', this._onClick);
     this.parent.removeEventListener('keydown', this._onKeyDown);
   }
@@ -811,16 +945,15 @@ export class Group {
 
     const matched = allMembers
       .map((member) => {
-        const searchValue = normalize(
-          member.dataset.searchValue ??
-            member.dataset.label ??
-            member.querySelector('.label')?.textContent ??
-            /** @type {string} */ (member.textContent),
-        );
-
+        const searchValue = this.#getNormalizedSearchValue(member);
         const hidden = !_terms.every((term) => searchValue.includes(term));
 
-        member.dispatchEvent(new CustomEvent('Toggle', { detail: { hidden } }));
+        // Only report an actual change. Every keystroke runs this over every member, and the
+        // listener on the other end drives a component update
+        if (this.#hiddenState.get(member) !== hidden) {
+          this.#hiddenState.set(member, hidden);
+          member.dispatchEvent(new CustomEvent('Toggle', { detail: { hidden } }));
+        }
 
         return hidden;
       })

package/dist/services/tree.svelte.d.ts

@@ -137,12 +137,6 @@ export class Tree {
      * @returns {boolean} Result.
      */
     isExpanded(item: HTMLElement): boolean;
-    /**
-     * Whether any of the ancestors of the given item is collapsed, meaning the item is not displayed.
-     * @param {HTMLElement} item Item.
-     * @returns {boolean} Result.
-     */
-    hasCollapsedAncestor(item: HTMLElement): boolean;
     /**
      * Get the text label of the given item, which is used for the type-ahead search.
      * @param {HTMLElement} item Item.
@@ -159,6 +153,14 @@ export class Tree {
      * @param {HTMLElement} element Element to be scrolled into view.
      */
     scrollIntoView(element: HTMLElement): void;
+    /**
+     * Put exactly one item in the tab order. Only the items actually in it are touched: writing a
+     * `tabindex` to every item costs a pass over the whole widget on each arrow key, and all but one
+     * of those writes set the value the item already had.
+     * @param {HTMLElement} [item] Item to become the tab stop. When omitted, no item is left in the
+     * tab order, which is the case for a tree with nothing to focus.
+     */
+    setTabStop(item?: HTMLElement | undefined): void;
     /**
      * Move focus to the given item.
      * @param {HTMLElement} item Item to be focused.

package/dist/services/tree.svelte.js

@@ -16,10 +16,6 @@ const TYPE_AHEAD_TIMEOUT = 500;
  * CSS selector to retrieve the tree items.
  */
 const ITEM_SELECTOR = '[role="treeitem"]';
-/**
- * CSS selector to retrieve the tree item containers, including the widget root.
- */
-const GROUP_SELECTOR = '[role="group"], [role="tree"]';
 
 /**
  * Implement keyboard and mouse interactions for the `tree` composite widget, following the ARIA
@@ -164,9 +160,48 @@ export class Tree {
    * @type {HTMLElement[]}
    */
   get visibleItems() {
-    return this.allItems.filter(
-      (item) => !item.matches('[hidden], [aria-hidden="true"]') && !this.hasCollapsedAncestor(item),
-    );
+    /** @type {HTMLElement[]} */
+    const items = [];
+
+    /**
+     * Collect the items below the given node in document order, descending only into the parents
+     * that are actually expanded. Pruning the collapsed subtrees outright is what keeps this
+     * proportional to the number of displayed items; testing each item in the tree for a collapsed
+     * ancestor instead costs a walk back up per item.
+     * @param {Element} node Node whose children to scan.
+     */
+    const collect = (node) => {
+      [...node.children].forEach((child) => {
+        if (child.getAttribute('role') !== 'treeitem') {
+          // Anything else is a wrapper to see through — including a group that no item owns, whose
+          // items sit at the level of the group itself
+          collect(child);
+
+          return;
+        }
+
+        const item = /** @type {HTMLElement} */ (child);
+
+        if (!item.matches('[hidden], [aria-hidden="true"]')) {
+          items.push(item);
+        }
+
+        // A collapsed parent hides everything below it, so there is nothing to descend into
+        if (this.isParent(item) && !this.isExpanded(item)) {
+          return;
+        }
+
+        const group = this.getGroup(item);
+
+        if (group) {
+          collect(group);
+        }
+      });
+    };
+
+    collect(this.parent);
+
+    return items;
   }
 
   /**
@@ -182,7 +217,9 @@ export class Tree {
    * @type {HTMLElement[]}
    */
   get selectedItems() {
-    return this.allItems.filter((item) => item.matches('[aria-selected="true"]'));
+    return /** @type {HTMLElement[]} */ ([
+      ...this.parent.querySelectorAll(`${ITEM_SELECTOR}[aria-selected="true"]`),
+    ]);
   }
 
   /**
@@ -221,9 +258,31 @@ export class Tree {
    * @returns {HTMLElement[]} Child items.
    */
   getItemsInGroup(group) {
-    return /** @type {HTMLElement[]} */ ([...group.querySelectorAll(ITEM_SELECTOR)]).filter(
-      (item) => item.parentElement?.closest(GROUP_SELECTOR) === group,
-    );
+    /** @type {HTMLElement[]} */
+    const items = [];
+
+    /**
+     * Scan the children of the given node, descending through plain wrapper elements but never into
+     * an item or a nested group — whatever lies below those belongs to the item that owns them.
+     * Querying the whole subtree and then discarding the deeper items with a `closest()` call each
+     * costs `update()`, which runs this once per group, quadratic time overall.
+     * @param {Element} node Node whose children to scan.
+     */
+    const walk = (node) => {
+      [...node.children].forEach((child) => {
+        const role = child.getAttribute('role');
+
+        if (role === 'treeitem') {
+          items.push(/** @type {HTMLElement} */ (child));
+        } else if (role !== 'group' && role !== 'tree') {
+          walk(child);
+        }
+      });
+    };
+
+    walk(group);
+
+    return items;
   }
 
   /**
@@ -255,25 +314,6 @@ export class Tree {
     return item.getAttribute('aria-expanded') === 'true';
   }
 
-  /**
-   * Whether any of the ancestors of the given item is collapsed, meaning the item is not displayed.
-   * @param {HTMLElement} item Item.
-   * @returns {boolean} Result.
-   */
-  hasCollapsedAncestor(item) {
-    let ancestor = this.getParentItem(item);
-
-    while (ancestor) {
-      if (!this.isExpanded(ancestor)) {
-        return true;
-      }
-
-      ancestor = this.getParentItem(ancestor);
-    }
-
-    return false;
-  }
-
   /**
    * Get the text label of the given item, which is used for the type-ahead search.
    * @param {HTMLElement} item Item.
@@ -316,12 +356,10 @@ export class Tree {
     const current =
       activeItems.find((item) => item === document.activeElement) ??
       activeItems.find((item) => item.tabIndex === 0) ??
-      activeItems.find((item) => item.matches('[aria-selected="true"]')) ??
+      activeItems.find((item) => item.getAttribute('aria-selected') === 'true') ??
       activeItems[0];
 
-    allItems.forEach((item) => {
-      item.tabIndex = item === current ? 0 : -1;
-    });
+    this.setTabStop(current);
   }
 
   /**
@@ -336,6 +374,27 @@ export class Tree {
     }
   }
 
+  /**
+   * Put exactly one item in the tab order. Only the items actually in it are touched: writing a
+   * `tabindex` to every item costs a pass over the whole widget on each arrow key, and all but one
+   * of those writes set the value the item already had.
+   * @param {HTMLElement} [item] Item to become the tab stop. When omitted, no item is left in the
+   * tab order, which is the case for a tree with nothing to focus.
+   */
+  setTabStop(item) {
+    this.parent
+      .querySelectorAll(`${ITEM_SELECTOR}[tabindex]:not([tabindex="-1"])`)
+      .forEach((element) => {
+        if (element !== item) {
+          /** @type {HTMLElement} */ (element).tabIndex = -1;
+        }
+      });
+
+    if (item) {
+      item.tabIndex = 0;
+    }
+  }
+
   /**
    * Move focus to the given item.
    * @param {HTMLElement} item Item to be focused.
@@ -344,10 +403,7 @@ export class Tree {
    * `selectionFollowsFocus` option.
    */
   focusItem(item, { select = this.selectionFollowsFocus } = {}) {
-    this.allItems.forEach((element) => {
-      element.tabIndex = element === item ? 0 : -1;
-    });
-
+    this.setTabStop(item);
     item.focus();
     item.dispatchEvent(new CustomEvent('Focus'));
     this.scrollIntoView(item);
@@ -363,7 +419,7 @@ export class Tree {
    * @param {boolean} selected Whether to select the item.
    */
   setSelected(item, selected) {
-    if (item.matches('[aria-selected="true"]') === selected) {
+    if ((item.getAttribute('aria-selected') === 'true') === selected) {
       return;
     }
 
@@ -402,13 +458,18 @@ export class Tree {
         );
       });
     } else if (multi && additive) {
-      this.setSelected(item, !item.matches('[aria-selected="true"]'));
+      this.setSelected(item, item.getAttribute('aria-selected') !== 'true');
       this.anchor = item;
     } else {
-      this.allItems.forEach((element) => {
-        this.setSelected(element, element === item);
+      // Only the items that are actually selected need clearing; running every item in the tree
+      // through `setSelected()` would leave all but one of them untouched anyway
+      this.selectedItems.forEach((element) => {
+        if (element !== item) {
+          this.setSelected(element, false);
+        }
       });
 
+      this.setSelected(item, true);
       this.anchor = item;
     }
 
@@ -517,9 +578,7 @@ export class Tree {
       return;
     }
 
-    this.allItems.forEach((element) => {
-      element.tabIndex = element === item ? 0 : -1;
-    });
+    this.setTabStop(item);
   }
 
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.61.0",
+  "version": "0.62.1",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -46,8 +46,8 @@
     "@lexical/selection": "^0.49.0",
     "@lexical/table": "^0.49.0",
     "@lexical/utils": "^0.49.0",
-    "@sveltia/i18n": "^1.1.3",
-    "@sveltia/utils": "^0.12.0",
+    "@sveltia/i18n": "^1.2.2",
+    "@sveltia/utils": "^0.12.1",
     "lexical": "^0.49.0",
     "prismjs": "^1.30.0"
   },
@@ -63,10 +63,10 @@
     "eslint-config-airbnb-extended": "^3.2.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^64.0.2",
-    "eslint-plugin-package-json": "^1.7.0",
+    "eslint-plugin-jsdoc": "^64.1.0",
+    "eslint-plugin-package-json": "^1.7.1",
     "eslint-plugin-svelte": "^3.22.0",
-    "globals": "^17.9.0",
+    "globals": "^17.10.0",
     "happy-dom": "^20.11.2",
     "oxlint": "^1.78.0",
     "postcss": "^8.5.26",