@sveltia/ui 0.77.1 → 0.77.3

package/dist/components/text-editor/text-editor.svelte

@@ -23,7 +23,8 @@
    * @typedef {object} Props
    * @property {string} [value] Input value.
    * @property {boolean} [flex] Make the text input container flexible.
-   * @property {'ltr' | 'rtl' | 'auto'} [dir] The `dir` attribute on the `<textarea>` element.
+   * @property {'ltr' | 'rtl' | 'auto'} [dir] The `dir` attribute on the editable text box, both
+   * the rich text editor and the `<textarea>` element of the plain text mode.
    * @property {TextEditorMode[]} [modes] Enabled modes.
    * @property {TextEditorNodeType[]} [buttons] Enabled buttons.
    * @property {TextEditorComponent[]} [components] Editor components.
@@ -137,6 +138,7 @@
   <TextEditorToolbar {disabled} {readonly} />
   <LexicalRoot
     {...labelAttrs}
+    {dir}
     hidden={!editorStore.useRichText || hidden}
     {disabled}
     {readonly}

package/dist/components/text-editor/text-editor.svelte.d.ts

@@ -14,7 +14,8 @@ declare const TextEditor: import("svelte").Component<{
      */
     flex?: boolean | undefined;
     /**
-     * The `dir` attribute on the `<textarea>` element.
+     * The `dir` attribute on the editable text box, both
+     * the rich text editor and the `<textarea>` element of the plain text mode.
      */
     dir?: "ltr" | "rtl" | "auto" | undefined;
     /**
@@ -96,7 +97,8 @@ type Props = {
      */
     flex?: boolean | undefined;
     /**
-     * The `dir` attribute on the `<textarea>` element.
+     * The `dir` attribute on the editable text box, both
+     * the rich text editor and the `<textarea>` element of the plain text mode.
      */
     dir?: "ltr" | "rtl" | "auto" | undefined;
     /**

package/dist/components/text-editor/toolbar/code-language-switcher.svelte

@@ -36,6 +36,16 @@
 
   let selectedLanguage = $state('plain');
 
+  // A code block can carry an alias, e.g. `js`, while the options are keyed by the canonical ID,
+  // e.g. `javascript`, so resolve the alias for the selector to find its option. A language that
+  // isn’t listed, e.g. `txt`, is shown as plain text; otherwise the selector would keep the label
+  // of the previous block, as it only updates the label when an option matches
+  const selectedKey = $derived(
+    codeLanguages.find(
+      ({ key, aliases }) => key === selectedLanguage || aliases.includes(selectedLanguage),
+    )?.key ?? 'plain',
+  );
+
   $effect(() => {
     void editorStore.selection.blockNodeKey;
 
@@ -57,9 +67,9 @@
 <Select
   {disabled}
   ariaLabel={_('_sui.text_editor.language')}
-  value={selectedLanguage}
+  value={selectedKey}
   onChange={async ({ detail: { value: lang } }) => {
-    if (!editorStore.editor || selectedLanguage === lang) {
+    if (!editorStore.editor || selectedKey === lang) {
       return;
     }
 
@@ -87,12 +97,7 @@
   }}
 >
   <Option label={_('_sui.text_editor.plain_text')} value="plain" dir="ltr" />
-  {#each codeLanguages as { key, label, aliases } (key)}
-    <Option
-      {label}
-      value={key}
-      selected={key === selectedLanguage || aliases.includes(selectedLanguage)}
-      dir="ltr"
-    />
+  {#each codeLanguages as { key, label } (key)}
+    <Option {label} value={key} selected={key === selectedKey} dir="ltr" />
   {/each}
 </Select>

package/dist/components/text-editor/toolbar/insert-link-button.svelte

@@ -21,7 +21,7 @@
   import Icon from '../../icon/icon.svelte';
   import TextInput from '../../text-field/text-input.svelte';
   import { AVAILABLE_BUTTONS } from '../constants.js';
-  import { focusEditor } from '../core.js';
+  import { focusEditor, isSafeLinkURL } from '../core.js';
 
   /**
    * @import { TextEditorStore } from '../../../typedefs';
@@ -45,6 +45,10 @@
   let hasAnchor = $state(false);
   let anchorURL = $state('');
   let anchorText = $state('');
+  /**
+   * Whether the URL can be inserted: not empty, and safe to link to.
+   */
+  const isValidURL = $derived(!!anchorURL.trim() && isSafeLinkURL(anchorURL));
 
   /**
    * Create a new link by showing a dialog to accept a URL and optionally text.
@@ -117,7 +121,7 @@
    * @param {KeyboardEvent} event `keydown` event.
    */
   const onInputKeyDown = (event) => {
-    if (matchesShortcuts(event, 'Enter') && anchorURL) {
+    if (matchesShortcuts(event, 'Enter') && isValidURL) {
       openDialog = false;
     }
   };
@@ -167,8 +171,9 @@
 
   /**
    * Open the dialog with a keyboard shortcut: Accel+K.
+   * @returns {(() => void) | undefined} Function to unregister the command.
    */
-  const _registerCommand = () => {
+  const _registerCommand = () =>
     editorStore.editor?.registerCommand(
       KEY_DOWN_COMMAND,
       (event) => {
@@ -181,12 +186,15 @@
       },
       COMMAND_PRIORITY_NORMAL,
     );
-  };
 
   $effect(() => {
     if (editorStore.editor) {
-      _registerCommand();
+      // Unregister on unmount, e.g. when the toolbar swaps the button out while the caret is in a
+      // code block, so the shortcut isn’t handled by a stale instance
+      return _registerCommand();
     }
+
+    return undefined;
   });
 </script>
 
@@ -210,7 +218,7 @@
     ? _('_sui.text_editor.insert_link')
     : _('_sui.text_editor.update_link')}
   bind:open={openDialog}
-  okDisabled={!anchorURL}
+  okDisabled={!isValidURL}
   okLabel={dialogMode === 'create' ? _('_sui.insert') : _('_sui.update')}
   restoreFocus={false}
   onClose={(event) => {
@@ -224,6 +232,7 @@
       id="{id}-url"
       bind:value={anchorURL}
       flex
+      invalid={!!anchorURL.trim() && !isSafeLinkURL(anchorURL)}
       aria-label={_('_sui.text_editor.url')}
       onkeydown={(event) => {
         onInputKeyDown(event);

package/dist/components/text-field/number-input.js

@@ -54,8 +54,9 @@ export const isAtMax = (inputValue, max) => typeof max === 'number' && toNumber(
  * @param {1 | -1} options.direction `1` to increase, `-1` to decrease.
  * @param {number} [options.min] Minimum allowed value.
  * @param {number} [options.max] Maximum allowed value.
- * @returns {string | undefined} New text for the field, or `undefined` if the field holds no
- * number or is already at the limit in that direction, in which case it’s left as is.
+ * @returns {string | undefined} New text for the field, clamped to the range, or `undefined` if
+ * the field holds no number or is already at the limit in that direction, in which case it’s left
+ * as is.
  */
 export const stepNumber = (inputValue, { step, direction, min, max }) => {
   if (Number.isNaN(Number(inputValue))) {
@@ -66,7 +67,19 @@ export const stepNumber = (inputValue, { step, direction, min, max }) => {
     return undefined;
   }
 
-  return Number(toNumber(inputValue) + step * direction).toFixed(getMaximumFractionDigits(step));
+  const maximumFractionDigits = getMaximumFractionDigits(step);
+  const newValue = Number((toNumber(inputValue) + step * direction).toFixed(maximumFractionDigits));
+
+  // Stop at the limit rather than stepping past it, as the native `<input type="number">` does
+  if (typeof max === 'number' && newValue > max) {
+    return String(max);
+  }
+
+  if (typeof min === 'number' && newValue < min) {
+    return String(min);
+  }
+
+  return newValue.toFixed(maximumFractionDigits);
 };
 
 /**

package/dist/components/text-field/number-input.svelte

@@ -69,11 +69,13 @@
   const isMax = $derived(isAtMax(inputValue, max));
 
   $effect(() => {
-    const newInputValue = String(value ?? '');
+    const newValue = value;
 
+    // Only overwrite the field when it doesn’t already hold the value, so text that is still being
+    // typed, like `1.` or `-`, isn’t wiped out when it parses to the same number or no number
     untrack(() => {
-      if (inputValue !== newInputValue) {
-        inputValue = newInputValue;
+      if (parseNumber(inputValue) !== newValue) {
+        inputValue = String(newValue ?? '');
       }
     });
   });
@@ -126,7 +128,7 @@
   <div role="none" class="buttons">
     <Button
       iconic
-      disabled={disabled || readonly || Number.isNaN(Number(value)) || isMax}
+      disabled={disabled || readonly || Number.isNaN(Number(inputValue)) || isMax}
       aria-label={_('_sui.number_input.increase')}
       aria-controls={id}
       onclick={() => {
@@ -143,7 +145,7 @@
     </Button>
     <Button
       iconic
-      disabled={disabled || readonly || Number.isNaN(Number(value)) || isMin}
+      disabled={disabled || readonly || Number.isNaN(Number(inputValue)) || isMin}
       aria-label={_('_sui.number_input.decrease')}
       aria-controls={id}
       onclick={() => {

package/dist/components/text-field/secret-input.svelte

@@ -61,8 +61,13 @@
   class:show
   {hidden}
 >
+  <!-- The field is masked with CSS rather than `type="password"`, so opt out of the features that
+  would remember the secret, like autofill history and the keyboard’s learned words -->
   <TextInput
     dir="ltr"
+    autocomplete="off"
+    autocapitalize="off"
+    autocorrect="off"
     bind:element={inputElement}
     {...restProps}
     {id}

package/dist/components/toast/toast.svelte

@@ -336,6 +336,11 @@
         )
       );
     }
+
+    // Stop the countdown when the toast is destroyed, or it would still hide the toast later
+    return () => {
+      globalThis.clearTimeout(timerId);
+    };
   });
 </script>
 

package/dist/components/util/app-shell.js

@@ -2,6 +2,11 @@
  * Helpers behind `<AppShell>`, kept apart from the component so they can be tested on their own.
  */
 
+/**
+ * `<input>` types that hold editable text.
+ */
+const TEXT_INPUT_TYPES = ['text', 'search', 'url', 'tel', 'email', 'password', 'number'];
+
 /**
  * Whether the browser’s context menu should be allowed on the given element. The shell suppresses
  * it to feel more like a native app, except where it’s actually useful: on text fields and rich
@@ -19,10 +24,13 @@ export const shouldAllowContextMenu = (target) => {
     return false;
   }
 
-  // Allow context menu on text inputs and contentEditable elements. Checking `maxLength` rules
-  // out the input types that hold no text, such as a checkbox or a button.
+  // Allow context menu on text inputs and contentEditable elements. Only the input types that hold
+  // editable text qualify, not a checkbox or a button. (Every `<input>` has a `maxLength` property
+  // whatever its type, so that can’t tell them apart.)
   return (
-    (target.matches('input, textarea') && 'maxLength' in target) ||
+    target instanceof HTMLTextAreaElement ||
+    // The `type` property is normalized: lowercased, and `text` for a missing or unknown type
+    (target instanceof HTMLInputElement && TEXT_INPUT_TYPES.includes(target.type)) ||
     /** @type {HTMLElement | null} */ (target.closest('[role="textbox"]'))?.contentEditable ===
       'true'
   );

package/dist/components/util/popup.svelte

@@ -252,7 +252,7 @@
 .content.listbox {
   border-width: var(--sui-listbox-border-width, 1px);
   border-style: var(--sui-listbox-border-style, solid);
-  border-color: var(--sui-listbox-border-width, var(--sui-secondary-border-color));
+  border-color: var(--sui-listbox-border-color, var(--sui-secondary-border-color));
   border-radius: var(--sui-listbox-border-radius, 4px);
   padding: var(--sui-listbox-padding, 4px);
 }

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

@@ -143,6 +143,12 @@ export class Group {
      * @param {HTMLElement} newTarget Target element.
      */
     selectTarget(event: (MouseEvent | KeyboardEvent), newTarget: HTMLElement): void;
+    /**
+     * Scroll the given elements into view after a short delay, replacing any pending scroll, so a
+     * key held down doesn’t queue a scroll for every member it passes and jump back to an old one.
+     * @param {HTMLElement[]} elements Elements to scroll into view.
+     */
+    scrollIntoViewLater(elements: HTMLElement[]): void;
     /**
      * Handle the `click` event on the widget.
      * @param {MouseEvent} event `click` event.

package/dist/services/group.svelte.js

@@ -1,6 +1,7 @@
 import { isRTL } from '@sveltia/i18n';
 import { generateElementId } from '@sveltia/utils/element';
 import { sleep } from '@sveltia/utils/misc';
+import { untrack } from 'svelte';
 import { getSelectedItemDetail } from './select.svelte.js';
 import { findTypeAheadMatch, TypeAhead } from './type-ahead.js';
 
@@ -197,6 +198,18 @@ export class Group {
    */
   activated = false;
 
+  /**
+   * Whether {@link destroy} has run, so a pending {@link activate} must not attach the listeners.
+   * @type {boolean}
+   */
+  #destroyed = false;
+
+  /**
+   * Timer for the pending {@link scrollIntoViewLater} call, if any.
+   * @type {ReturnType<typeof setTimeout> | undefined}
+   */
+  #scrollTimer = undefined;
+
   /**
    * Memoized member lists, discarded whenever the widget’s subtree changes. See {@link #members}.
    * @type {{ all: HTMLElement[], active: HTMLElement[] } | undefined}
@@ -342,7 +355,12 @@ export class Group {
     // Wait a bit before the relevant components, including the `aria-controls` target are mounted
     (async () => {
       await sleep(100);
-      this.activate();
+
+      // The widget may have been unmounted in the meantime, and the listeners added by `activate()`
+      // would then never be removed
+      if (!this.#destroyed) {
+        this.activate();
+      }
     })();
   }
 
@@ -360,11 +378,10 @@ export class Group {
         element.getAttribute(this.childSelectedAttr) === 'true' ||
         (defaultSelected ? element === defaultSelected : this.selectFirst && index === 0);
 
-      const controlTarget = this.controlsPanel
-        ? /** @type {HTMLElement | null} */ (
-            document.querySelector(`#${element.getAttribute('aria-controls')}`)
-          )
-        : null;
+      const controlTargetId = this.controlsPanel ? element.getAttribute('aria-controls') : null;
+      // Looked up by ID rather than with a selector, which would throw on an ID that isn’t a valid
+      // CSS identifier, such as one starting with a digit
+      const controlTarget = controlTargetId ? document.getElementById(controlTargetId) : null;
 
       element.id ||= `${this.id}-item-${index + 1}`;
       element.setAttribute(this.childSelectedAttr, String(isSelected));
@@ -697,6 +714,11 @@ export class Group {
      * @type {boolean}
      */
     let targetAffected = false;
+    /**
+     * Elements to be scrolled into view: the target and the panel it controls, if any.
+     * @type {HTMLElement[]}
+     */
+    const scrollTargets = [];
 
     this.activeMembers.forEach((element) => {
       // Reading the role once and comparing it is markedly cheaper than putting every member
@@ -765,33 +787,20 @@ export class Group {
         controlTarget.setAttribute('aria-hidden', String(!isTarget));
 
         if (isTarget) {
-          globalThis.setTimeout(() => {
-            try {
-              controlTarget.scrollIntoView({
-                block: 'nearest',
-                inline: 'nearest',
-                behavior: 'auto',
-              });
-            } catch {
-              controlTarget.scrollIntoView(true);
-            }
-          }, 300);
+          scrollTargets.push(controlTarget);
         }
       }
 
       if (isTarget) {
         this.parent.setAttribute('aria-activedescendant', element.id);
-
-        globalThis.setTimeout(() => {
-          try {
-            element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'auto' });
-          } catch {
-            element.scrollIntoView(true);
-          }
-        }, 300);
+        scrollTargets.push(element);
       }
     });
 
+    if (scrollTargets.length) {
+      this.scrollIntoViewLater(scrollTargets);
+    }
+
     if (this.focusChild) {
       // Done right away rather than on the next frame: a key that repeats, or a second press
       // before the frame, has to start from the member that was just reached, which it reads
@@ -811,6 +820,27 @@ export class Group {
     );
   }
 
+  /**
+   * Scroll the given elements into view after a short delay, replacing any pending scroll, so a
+   * key held down doesn’t queue a scroll for every member it passes and jump back to an old one.
+   * @param {HTMLElement[]} elements Elements to scroll into view.
+   */
+  scrollIntoViewLater(elements) {
+    globalThis.clearTimeout(this.#scrollTimer);
+
+    this.#scrollTimer = globalThis.setTimeout(() => {
+      this.#scrollTimer = undefined;
+
+      elements.forEach((element) => {
+        try {
+          element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'auto' });
+        } catch {
+          element.scrollIntoView(true);
+        }
+      });
+    }, 300);
+  }
+
   /**
    * Handle the `click` event on the widget.
    * @param {MouseEvent} event `click` event.
@@ -1031,13 +1061,16 @@ export class Group {
         newTarget = allMembers[Math.min(index + colCount, lastIndex)];
       }
 
-      // In RTL, ArrowLeft moves right (next), ArrowRight moves left (previous)
-      if (key === 'ArrowLeft' && index > 0) {
-        newTarget = allMembers[index + (_isRTL ? 1 : -1)];
+      // In RTL, ArrowLeft moves to the next member, ArrowRight to the previous one
+      const prevKey = _isRTL ? 'ArrowRight' : 'ArrowLeft';
+      const nextKey = _isRTL ? 'ArrowLeft' : 'ArrowRight';
+
+      if (key === prevKey && index > 0) {
+        newTarget = allMembers[index - 1];
       }
 
-      if (key === 'ArrowRight' && index !== -1 && index < lastIndex) {
-        newTarget = allMembers[index + (_isRTL ? -1 : 1)];
+      if (key === nextKey && index !== -1 && index < lastIndex) {
+        newTarget = allMembers[index + 1];
       }
 
       if (newTarget?.matches('[aria-disabled="true"], [aria-hidden="true"]')) {
@@ -1089,6 +1122,8 @@ export class Group {
    * Clean up event listeners.
    */
   destroy() {
+    this.#destroyed = true;
+    globalThis.clearTimeout(this.#scrollTimer);
     this.#typeAhead.reset();
     this.observer.disconnect();
     this.parent.removeEventListener('click', this._onClick);
@@ -1134,7 +1169,10 @@ export class Group {
  */
 export const activateGroup = (paramsOrGetter) => (parent) => {
   const isGetter = typeof paramsOrGetter === 'function';
-  const initialParams = isGetter ? paramsOrGetter() : paramsOrGetter;
+  // Read the params without tracking them: attachments run in an effect, so a tracked read would
+  // destroy and recreate the whole group whenever they change, e.g. on every search keystroke.
+  // Changes are handled by `onUpdate()` below instead.
+  const initialParams = isGetter ? untrack(() => paramsOrGetter()) : paramsOrGetter;
   const group = new Group(/** @type {HTMLElement} */ (parent), initialParams);
 
   /* v8 ignore next 4 */

package/dist/services/popup.svelte.js

@@ -86,6 +86,13 @@ class Popup {
    */
   #removeEventListeners = undefined;
 
+  /**
+   * Functions that remove the event listeners added to the {@link anchorElement}, which may outlive
+   * this instance.
+   * @type {(() => void)[]}
+   */
+  #removeAnchorListeners = [];
+
   /**
    * Initialize a new `Popup` instance. Note that the `popupElement` is optional, because the
    * element is typically mounted only while the popup is open. Use {@link attachPopupElement} to
@@ -105,13 +112,13 @@ class Popup {
 
     this.anchorElement.setAttribute('aria-expanded', 'false');
 
-    on(anchorElement, 'click', () => {
+    const removeClickListener = on(anchorElement, 'click', () => {
       if (!this.isDisabled && !this.isReadOnly) {
         this.open = !this.open;
       }
     });
 
-    on(anchorElement, 'keydown', (event) => {
+    const removeKeyDownListener = on(anchorElement, 'keydown', (event) => {
       const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
       const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
 
@@ -145,12 +152,18 @@ class Popup {
       }
     });
 
-    on(anchorElement, 'transitionstart', () => {
+    const removeTransitionStartListener = on(anchorElement, 'transitionstart', () => {
       if (this.anchorElement.closest('.hiding, .hidden, [hidden]')) {
         this.hideImmediately();
       }
     });
 
+    this.#removeAnchorListeners = [
+      removeClickListener,
+      removeKeyDownListener,
+      removeTransitionStartListener,
+    ];
+
     this.intersectionObserver = new IntersectionObserver(([entry]) => {
       if (!entry.isIntersecting && this.open) {
         this.hideImmediately();
@@ -514,6 +527,8 @@ class Popup {
    */
   destroy() {
     this.detachPopupElement();
+    this.#removeAnchorListeners.forEach((removeListener) => removeListener());
+    this.#removeAnchorListeners = [];
     this.intersectionObserver?.disconnect();
     this.resizeObserver?.disconnect();
     this.viewportResizeObserver?.disconnect();

package/dist/services/select.svelte.js

@@ -29,11 +29,46 @@ export class OptionRegistry {
   expanded = $state(false);
 
   /**
-   * Registered options. This is a raw state so that the entries, which expose their properties as
-   * getters onto the `<Option>`’s props, are not wrapped in a reactive proxy.
+   * Registered options. This is a plain set rather than a state, so that registering an option
+   * doesn’t copy the whole list, which would make mounting many options quadratic. The entries,
+   * which expose their properties as getters onto the `<Option>`’s props, are not wrapped in a
+   * reactive proxy either. Changes are signalled through {@link #version}.
+   * @type {Set<OptionEntry>}
+   */
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity -- Signalled manually, see above
+  #entrySet = new Set();
+
+  /**
+   * Incremented whenever an option is registered or unregistered, to notify the readers.
+   * @type {number}
+   */
+  #version = $state(0);
+
+  /**
+   * Array snapshot of {@link #entrySet}, rebuilt lazily after a change.
    * @type {OptionEntry[]}
    */
-  #entries = $state.raw([]);
+  #snapshot = [];
+
+  /**
+   * Value of {@link #version} when {@link #snapshot} was last rebuilt.
+   * @type {number}
+   */
+  #snapshotVersion = -1;
+
+  /**
+   * Registered options, in registration order. The returned array must not be mutated.
+   * @returns {OptionEntry[]} Entries.
+   */
+  get #entries() {
+    // Reading `#version` also subscribes the caller to changes
+    if (this.#snapshotVersion !== this.#version) {
+      this.#snapshot = [...this.#entrySet];
+      this.#snapshotVersion = this.#version;
+    }
+
+    return this.#snapshot;
+  }
 
   /**
    * Number of registered options.
@@ -65,10 +100,12 @@ export class OptionRegistry {
    * @returns {() => void} Function to unregister the option.
    */
   register(entry) {
-    this.#entries = [...this.#entries, entry];
+    this.#entrySet.add(entry);
+    this.#version += 1;
 
     return () => {
-      this.#entries = this.#entries.filter((item) => item !== entry);
+      this.#entrySet.delete(entry);
+      this.#version += 1;
     };
   }
 

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

@@ -45,6 +45,11 @@ export class Tree {
      * @type {ReturnType<typeof globalThis.setTimeout> | undefined}
      */
     typeAheadTimer: ReturnType<typeof globalThis.setTimeout> | undefined;
+    /**
+     * Whether {@link destroy} has run, so a pending {@link activate} must not set anything up.
+     * @type {boolean}
+     */
+    destroyed: boolean;
     /** @type {(event: MouseEvent) => void} */
     _onClick: (event: MouseEvent) => void;
     /** @type {(event: KeyboardEvent) => void} */

package/dist/services/tree.svelte.js

@@ -67,6 +67,12 @@ export class Tree {
      */
     this.typeAheadTimer = undefined;
 
+    /**
+     * Whether {@link destroy} has run, so a pending {@link activate} must not set anything up.
+     * @type {boolean}
+     */
+    this.destroyed = false;
+
     // eslint-disable-next-line jsdoc/require-description
     /** @type {(event: MouseEvent) => void} */
     this._onClick = (event) => {
@@ -96,7 +102,12 @@ export class Tree {
     // Wait a bit before the child components are mounted
     (async () => {
       await sleep(100);
-      this.activate();
+
+      // The widget may have been unmounted in the meantime, and the listeners and the observer set
+      // up by `activate()` would then never be removed
+      if (!this.destroyed) {
+        this.activate();
+      }
     })();
   }
 
@@ -759,6 +770,7 @@ export class Tree {
    * Clean up event listeners.
    */
   destroy() {
+    this.destroyed = true;
     globalThis.clearTimeout(this.typeAheadTimer);
     this.observer.disconnect();
     this.parent.removeEventListener('click', this._onClick);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.77.1",
+  "version": "0.77.3",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -57,7 +57,7 @@
     "@shikijs/langs": "4.4.3",
     "@shikijs/themes": "4.4.3",
     "@sveltia/i18n": "^1.4.0",
-    "@sveltia/utils": "^0.12.1",
+    "@sveltia/utils": "^0.12.2",
     "lexical": "^0.51.0"
   },
   "devDependencies": {