@sveltia/ui 0.77.1 → 0.77.2

package/dist/components/calendar/calendar.d.ts

@@ -14,4 +14,4 @@ export function getFirstDayOfMonth(date: Date): Date;
 export function addMonths(firstDay: Date, delta: number): Date;
 export function getCalendarDays(firstDay: Date): Date[];
 export function toDateString(date: Date): string;
-export function isSameDay(a: Date, b: Date): boolean;
+export function getToday(now?: Date): Date;

package/dist/components/calendar/calendar.js

@@ -38,11 +38,12 @@ export const MONTH_NAMES = Array.from({ length: 12 }, (__, i) =>
 /**
  * Get the first day of the month the given date is in.
  * @param {Date} date Any date within the month.
- * @returns {Date} Local midnight on the first day of the month, using the UTC year and month of
- * the given date, so a date parsed from a `YYYY-MM-DD` string lands in the right month regardless
- * of the time zone.
+ * @returns {Date} UTC midnight on the first day of the month, using the UTC year and month of the
+ * given date, so a date parsed from a `YYYY-MM-DD` string lands in the right month regardless of
+ * the time zone. The whole grid is UTC-based, like the `value`.
  */
-export const getFirstDayOfMonth = (date) => new Date(date.getUTCFullYear(), date.getUTCMonth(), 1);
+export const getFirstDayOfMonth = (date) =>
+  new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1));
 
 /**
  * Get the first day of another month, relative to the given one.
@@ -68,7 +69,7 @@ export const getCalendarDays = (firstDay) => {
   const cursor = new Date(firstDay);
 
   // Start from Sunday
-  cursor.setDate(1 - cursor.getUTCDay());
+  cursor.setUTCDate(1 - cursor.getUTCDay());
 
   return Array.from({ length: DAY_GRID_SIZE }, () => {
     const day = new Date(cursor);
@@ -87,12 +88,10 @@ export const getCalendarDays = (firstDay) => {
 export const toDateString = (date) => date.toJSON().split('T')[0];
 
 /**
- * Whether two dates fall on the same local calendar day.
- * @param {Date} a A date.
- * @param {Date} b Another date.
- * @returns {boolean} Result.
+ * Get today’s local calendar day as a UTC-based date, so it can be compared with the days on the
+ * grid and turned into a `value` with {@link toDateString}.
+ * @param {Date} [now] Current date and time.
+ * @returns {Date} UTC midnight on today’s local date.
  */
-export const isSameDay = (a, b) =>
-  a.getFullYear() === b.getFullYear() &&
-  a.getMonth() === b.getMonth() &&
-  a.getDate() === b.getDate();
+export const getToday = (now = new Date()) =>
+  new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));

package/dist/components/calendar/calendar.svelte

@@ -15,7 +15,7 @@
     formatDate,
     getCalendarDays,
     getFirstDayOfMonth,
-    isSameDay,
+    getToday,
     MONTH_NAMES,
     toDateString,
   } from './calendar.js';
@@ -30,9 +30,11 @@
    */
   let { value = $bindable(undefined) } = $props();
 
-  const now = new Date();
+  /** Today’s local date, UTC-based like the days on the grid. */
+  const today = getToday();
+  const todayString = toDateString(today);
 
-  const date = $derived(value ? new Date(value) : now);
+  const date = $derived(value ? new Date(value) : today);
   /**
    * First day of the month being displayed. Follows the {@link value}, and is reassigned by the
    * month navigation below.
@@ -44,7 +46,9 @@
    * Month and year being displayed, in the current locale. It’s the caption of the day grid as
    * well as the label of the month switcher.
    */
-  const monthLabel = $derived(formatDate(firstDay, { year: 'numeric', month: 'short' }));
+  const monthLabel = $derived(
+    formatDate(firstDay, { year: 'numeric', month: 'short', timeZone: 'UTC' }),
+  );
   const id = $props.id();
   /** @type {HTMLElement | undefined} */
   let grid = $state();
@@ -172,7 +176,7 @@
   >
     {#each dayList.slice(0, 7) as { day } (day.getUTCDay())}
       <div role="none" class="weekday">
-        {formatDate(day, { weekday: 'narrow' })}
+        {formatDate(day, { weekday: 'narrow', timeZone: 'UTC' })}
       </div>
     {/each}
     {#each dayList as { day } (toDateString(day))}
@@ -180,7 +184,7 @@
       <div
         role="none"
         class:other-month={day.getUTCMonth() !== firstDay.getUTCMonth()}
-        class:today={isSameDay(day, now)}
+        class:today={dateString === todayString}
       >
         <Button
           role="option"
@@ -208,7 +212,7 @@
     <Spacer flex={true} />
     <Button
       onclick={() => {
-        value = toDateString(now);
+        value = todayString;
       }}
     >
       {_('_sui.calendar.today')}

package/dist/components/checkbox/checkbox.svelte

@@ -109,7 +109,7 @@
       {hidden}
       {disabled}
       {readonly}
-      {required}
+      aria-required={required}
       aria-invalid={invalid}
       aria-checked={checked}
       aria-label={ariaLabel || undefined}

package/dist/components/emoji/emoji-suggestions.svelte

@@ -412,7 +412,7 @@
   margin: 0;
   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);
   width: 280px;

package/dist/components/file/file-picker.svelte

@@ -37,8 +37,11 @@
   {multiple}
   bind:this={filePicker}
   onchange={({ target }) => {
-    const files = [.../** @type {FileList} */ (/** @type {HTMLInputElement} */ (target).files)];
+    const input = /** @type {HTMLInputElement} */ (target);
+    const files = [.../** @type {FileList} */ (input.files)];
 
+    // Clear the selection, so picking the same file again still fires the `change` event
+    input.value = '';
     onSelect?.({ files, file: files[0] });
   }}
   oncancel={(event) => {

package/dist/components/listbox/listbox.svelte

@@ -96,7 +96,7 @@
   margin: var(--sui-focus-ring-width);
   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);
   min-width: var(--sui-listbox-min-width, calc(var(--sui-option-height) * 5));

package/dist/components/progressbar/progressbar.svelte

@@ -28,6 +28,11 @@
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
+
+  /** Position of `now` within the range, as a percentage, clamped to the range. */
+  const percentage = $derived(
+    max > min ? Math.min(Math.max(((now - min) / (max - min)) * 100, 0), 100) : 0,
+  );
 </script>
 
 <div
@@ -40,7 +45,7 @@
   aria-valuetext={text}
   aria-label={ariaLabel}
 >
-  <div role="none" style:width={`${now}%`}></div>
+  <div role="none" style:width={`${percentage}%`}></div>
 </div>
 
 <style>.progressbar {

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

@@ -216,6 +216,13 @@
       onResizeEnd?.();
     }
   };
+
+  $effect(() => () => {
+    // Stop listening if the handle is removed in the middle of a drag
+    document.removeEventListener('pointermove', onPointerMove);
+    document.removeEventListener('pointerup', onPointerUp);
+    document.removeEventListener('pointercancel', onPointerUp);
+  });
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->

package/dist/components/scroll/infinite-scroll.svelte

@@ -47,10 +47,23 @@
     }
   });
 
+  // Observe the spinner anew once each chunk is rendered: the observer only reports changes, so a
+  // spinner that stays in view because the chunk didn’t fill the viewport would stall the loading.
+  // Observing an element always reports its current state first. Stop observing on unmount too.
   $effect(() => {
+    void loadedItemSize;
+
     if (spinner) {
-      observer.observe(spinner);
+      const target = spinner;
+
+      observer.observe(target);
+
+      return () => {
+        observer.unobserve(target);
+      };
     }
+
+    return undefined;
   });
 </script>
 

package/dist/components/slider/slider.js

@@ -3,6 +3,18 @@
  * calculations can be tested without a rendered track.
  */
 
+/**
+ * Count the fraction digits of a number, including one written in exponential notation, such as
+ * `1e-7`.
+ * @param {number} num Number.
+ * @returns {number} Number of fraction digits, `0` for an integer.
+ */
+const countFractionDigits = (num) => {
+  const [mantissa, exponent = '0'] = String(num).split('e');
+
+  return Math.min(Math.max((mantissa.split('.')[1] ?? '').length - Number(exponent), 0), 100);
+};
+
 /**
  * Get the values a thumb can take and where each of them sits along the track.
  * @param {object} options Options.
@@ -14,12 +26,18 @@
  * increments, and the matching pixel offsets from the logical start of the track.
  */
 export const getSliderSteps = ({ min, max, step, barWidth }) => {
-  const stepCount = (max - min) / step + 1;
-  const stepWidth = barWidth / (stepCount - 1);
+  const stepRatio = (max - min) / step;
+  // Tolerate floating point errors, e.g. `0.3 / 0.1` is `2.9999999999999996`, which would otherwise
+  // drop the maximum
+  const stepCount = Math.floor(stepRatio + 1e-9) + 1;
+  const stepWidth = barWidth / stepRatio;
   const emptyArray = Array.from({ length: stepCount });
+  // Round the values to the precision of the minimum and the step, e.g. `3 * 0.1` is
+  // `0.30000000000000004`, which would otherwise never match the `0.3` value
+  const decimals = Math.max(countFractionDigits(min), countFractionDigits(step));
 
   return {
-    valueList: emptyArray.map((_, index) => index * step + min),
+    valueList: emptyArray.map((_, index) => Number((index * step + min).toFixed(decimals))),
     positionList: emptyArray.map((_, index) => index * stepWidth),
   };
 };

package/dist/components/slider/slider.svelte

@@ -313,6 +313,10 @@
     return () => {
       observer.disconnect();
       query.removeEventListener('change', init);
+      // Stop listening if the slider is removed in the middle of a drag
+      document.removeEventListener('pointermove', onPointerMove);
+      document.removeEventListener('pointerup', onPointerUp);
+      document.removeEventListener('pointercancel', onPointerUp);
     };
   });
 

package/dist/components/text-editor/code-editor.js

@@ -22,7 +22,7 @@ export const toCodeBlock = (lang, code) =>
  */
 export const parseCodeBlock = (markdown) => {
   const { lang = 'plain', code = '' } =
-    markdown.match(/^```(?<lang>\w+?)?\n(?:(?<code>.*)\n)?```/s)?.groups ?? {};
+    markdown.match(/^```(?<lang>[^\s`]+)?\n(?:(?<code>.*)\n)?```/s)?.groups ?? {};
 
   return { lang, code };
 };

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

@@ -1,5 +1,6 @@
+export function isSafeLinkURL(url: string): boolean;
 export function getSelectionTypes(): TextEditorSelectionState;
-export function onEditorUpdate(editor: LexicalEditor, enabledTransformers: Transformer[]): void;
+export function onEditorUpdate(editor: LexicalEditor, enabledTransformers: Transformer[], cachedValue?: string): string;
 export function initEditor({ enabledButtons, components, useMarkdownShortcuts, isCodeEditor, defaultLanguage, }: TextEditorConfig): InitEditorResult;
 export function loadCodeHighlighter(lang: string): Promise<void>;
 export function convertMarkdownToLexical(editor: LexicalEditor, value: string, enabledTransformers: Transformer[]): Promise<void>;

package/dist/components/text-editor/core.js

@@ -99,6 +99,40 @@ import { TABLE } from './transformers/table.js';
  * @property {() => void} dispose Remove all registered Lexical listeners.
  */
 
+/**
+ * Maximum number of entries in the undo stack.
+ */
+const HISTORY_MAX_DEPTH = 200;
+/**
+ * URL schemes allowed in a link, the same as the ones Lexical renders as is.
+ */
+const SAFE_LINK_URL_SCHEMES = ['http', 'https', 'mailto', 'sms', 'tel'];
+
+/**
+ * Whether the given URL is safe to be used as a link, meaning it’s either relative or uses one of
+ * the {@link SAFE_LINK_URL_SCHEMES}. This keeps a URL like `javascript:alert(1)` out of the
+ * Markdown, where the site that renders it may not sanitize it.
+ * @param {string} url URL.
+ * @returns {boolean} Result.
+ */
+export const isSafeLinkURL = (url) => {
+  // Browsers ignore control characters and spaces around a URL as well as tabs and newlines within
+  // it, e.g. `java\tscript:`, so strip them all before looking for the scheme
+  // eslint-disable-next-line no-control-regex
+  const normalizedURL = url.replace(/[\u0000-\u0020]/g, '');
+
+  // Markdown decodes character references and backslash escapes in a link destination, so a scheme
+  // can be hidden with them, e.g. `javascript:`, `javascript:` or `javascript\:`. Reject
+  // any of them before the path, query or fragment.
+  if (/^[^/?#]*[&\\]/.test(normalizedURL)) {
+    return false;
+  }
+
+  const scheme = /^([a-z][a-z\d+.-]*):/i.exec(normalizedURL)?.[1];
+
+  return !scheme || SAFE_LINK_URL_SCHEMES.includes(scheme.toLowerCase());
+};
+
 /**
  * Get the current selection’s block node key as well as block and inline level types.
  * @internal
@@ -126,7 +160,9 @@ export const getSelectionTypes = () => {
 
     if (isLinkNode(parent)) {
       inlineTypes.push('link');
-      parent = getNearestNodeOfType(parent, ElementNode);
+      // `getNearestNodeOfType()` would return the link itself, so start from its parent to find the
+      // block the link is in
+      parent = parent.getParent();
     }
 
     if (isListItemNode(parent)) {
@@ -178,31 +214,40 @@ export const getSelectionTypes = () => {
  * @internal
  * @param {LexicalEditor} editor Editor instance.
  * @param {Transformer[]} enabledTransformers Enabled Markdown transformers.
+ * @param {string} [cachedValue] Markdown value from a previous call, to be reused instead of
+ * converting the whole document again when only the selection has changed.
+ * @returns {string} Markdown value.
  */
-export const onEditorUpdate = (editor, enabledTransformers) => {
+export const onEditorUpdate = (editor, enabledTransformers, cachedValue) => {
   const transformers = enabledTransformers.filter(
     (/** @type {any} */ { tag }) => !DISABLED_MARKDOWN_TAGS.includes(tag),
   );
 
+  const value =
+    cachedValue ??
+    trimBlankBlockquoteLines(
+      convertToMarkdownString(transformers)
+        // Remove unnecessary backslash for underscore and backslash characters
+        // @see https://github.com/sveltia/sveltia-cms/issues/430
+        // @see https://github.com/sveltia/sveltia-cms/issues/512
+        .replace(/\\([_\\])/g, '$1')
+        // Replace encoded spaces with regular spaces. The HTML entity can appear with a
+        // combination of bold and italic text
+        // @see https://github.com/sveltia/sveltia-cms/issues/511
+        // @see https://github.com/sveltia/sveltia-cms/issues/534
+        .replace(/ /g, ' '),
+    );
+
   editor.getRootElement()?.dispatchEvent(
     new CustomEvent('Update', {
       detail: {
-        value: trimBlankBlockquoteLines(
-          convertToMarkdownString(transformers)
-            // Remove unnecessary backslash for underscore and backslash characters
-            // @see https://github.com/sveltia/sveltia-cms/issues/430
-            // @see https://github.com/sveltia/sveltia-cms/issues/512
-            .replace(/\\([_\\])/g, '$1')
-            // Replace encoded spaces with regular spaces. The HTML entity can appear with a
-            // combination of bold and italic text
-            // @see https://github.com/sveltia/sveltia-cms/issues/511
-            // @see https://github.com/sveltia/sveltia-cms/issues/534
-            .replace(/ /g, ' '),
-        ),
+        value,
         selection: getSelectionTypes(),
       },
     }),
   );
+
+  return value;
 };
 
 /**
@@ -267,7 +312,17 @@ export const initEditor = ({
 
   addUnregister(registerRichText(editor));
   addUnregister(registerDragonSupport(editor));
-  addUnregister(registerHistory(editor, createEmptyHistoryState(), 1000));
+  // Cap the undo stack, as each entry holds a snapshot of the whole document
+  addUnregister(
+    registerHistory(
+      editor,
+      createEmptyHistoryState(),
+      1000,
+      undefined,
+      undefined,
+      HISTORY_MAX_DEPTH,
+    ),
+  );
 
   if (useMarkdownShortcuts) {
     addUnregister(registerMarkdownShortcuts(editor, enabledTransformers));
@@ -291,6 +346,11 @@ export const initEditor = ({
       editor.registerCommand(
         TOGGLE_LINK_COMMAND,
         (payload) => {
+          // Ignore an unsafe URL rather than linking to it
+          if (typeof payload === 'string' && !isSafeLinkURL(payload)) {
+            return true;
+          }
+
           toggleLink(typeof payload === 'string' ? payload : null);
 
           return true;
@@ -316,7 +376,8 @@ export const initEditor = ({
 
           const clipboardText = event.clipboardData.getData('text').trim();
 
-          if (!isURL(clipboardText)) {
+          // Paste an unsafe URL as plain text rather than as a link
+          if (!isURL(clipboardText) || !isSafeLinkURL(clipboardText)) {
             return false;
           }
 
@@ -380,15 +441,41 @@ export const initEditor = ({
     );
   }
 
+  /** Incremented on every update, so only the latest one in a burst triggers the Update event. */
+  let updateCount = 0;
+  /** Whether the content has changed since the Update event was last triggered. */
+  let contentChanged = true;
+  /** @type {string | undefined} */
+  let lastValue = undefined;
+  let disposed = false;
+
+  addUnregister(() => {
+    disposed = true;
+  });
+
   addUnregister(
-    editor.registerUpdateListener(() => {
+    editor.registerUpdateListener(({ dirtyElements, dirtyLeaves } = /** @type {any} */ ({})) => {
+      // An update that only moves the selection leaves no dirty nodes. Remember whether any update
+      // in the burst changed the content, so the document is only converted again when needed.
+      // This includes the updates made while composing, which are otherwise skipped.
+      contentChanged ||= !dirtyElements || dirtyElements.size > 0 || dirtyLeaves.size > 0;
+
       if (editor?.isComposing()) {
         return;
       }
 
+      updateCount += 1;
+
+      const currentCount = updateCount;
+
       (async () => {
         await sleep(100);
 
+        // Skip if a newer update has been made in the meantime, or the editor has been disposed
+        if (currentCount !== updateCount || disposed) {
+          return;
+        }
+
         editor.update(() => {
           // Prevent CodeNode from being removed
           /* v8 ignore next */
@@ -409,7 +496,12 @@ export const initEditor = ({
             }
           }
 
-          onEditorUpdate(editor, enabledTransformers);
+          lastValue = onEditorUpdate(
+            editor,
+            enabledTransformers,
+            contentChanged ? undefined : lastValue,
+          );
+          contentChanged = false;
         });
       })();
     }),

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

@@ -78,11 +78,12 @@
   };
 
   /**
-   * Listen to `click` events on the editor. Ignore a click on a link.
+   * Listen to `click` events on the editor. Ignore a click on a link, including one on the text
+   * within it, which Lexical renders as a child element of the `<a>`.
    * @param {MouseEvent} event `click` event.
    */
   const onClick = (event) => {
-    if (/** @type {HTMLElement} */ (event.target)?.matches('a')) {
+    if (/** @type {HTMLElement} */ (event.target)?.closest('a')) {
       event.preventDefault();
     }
   };

package/dist/components/text-editor/markdown.js

@@ -6,10 +6,12 @@
  */
 export const splitMultilineFormatting = (value) =>
   value
-    .replace(/(\s+)_([^_\n]+?)\n([^_\n]+?)_(\s+)/gm, '$1_$2_\n_$3_$4')
-    .replace(/(\s+)\*\*([^*\n]+?)\n([^*\n]+?)\*\*(\s+)/gm, '$1**$2**\n**$3**$4')
-    .replace(/(\s+)~~([^~\n]+?)\n([^~\n]+?)~~(\s+)/gm, '$1~~$2~~\n~~$3~~$4')
-    .replace(/(\s+)`([^`\n]+?)\n([^`\n]+?)`(\s+)/gm, '$1`$2`\n`$3`$4');
+    // The surrounding whitespace is checked with lookarounds rather than matched with `\s+`, which
+    // would take quadratic time on a long run of whitespace not followed by a formatting marker
+    .replace(/(?<=\s)_([^_\n]+?)\n([^_\n]+?)_(?=\s)/g, '_$1_\n_$2_')
+    .replace(/(?<=\s)\*\*([^*\n]+?)\n([^*\n]+?)\*\*(?=\s)/g, '**$1**\n**$2**')
+    .replace(/(?<=\s)~~([^~\n]+?)\n([^~\n]+?)~~(?=\s)/g, '~~$1~~\n~~$2~~')
+    .replace(/(?<=\s)`([^`\n]+?)\n([^`\n]+?)`(?=\s)/g, '`$1`\n`$2`');
 
 /**
  * Apply a function to each line of a Markdown string, leaving the lines inside fenced code blocks
@@ -19,22 +21,39 @@ export const splitMultilineFormatting = (value) =>
  * @returns {string} Processed Markdown string.
  */
 const mapLinesOutsideCodeBlocks = (value, callback) => {
-  let inCodeBlock = false;
+  /**
+   * Opening fence of the code block being processed, like ```` ``` ````, or an empty string when
+   * outside a code block.
+   */
+  let openingFence = '';
 
   return value
     .split('\n')
     .map((line) => {
       // Like Lexical's `CODE_START_REGEX`, allow an indented fence
-      if (/^[ \t]*(`{3,}|~{3,})/.test(line)) {
-        inCodeBlock = !inCodeBlock;
-        return line;
+      const fence = line.match(/^[ \t]*(`{3,}|~{3,})/)?.[1];
+
+      if (!openingFence) {
+        if (fence) {
+          openingFence = fence;
+          return line;
+        }
+
+        return callback(line);
       }
 
-      if (inCodeBlock) {
-        return line;
+      // Like Lexical's `CODE_END_REGEX`, a code block is only closed by a bare fence of the same
+      // character that is at least as long as the opening one, so a shorter fence within the block,
+      // like ```` ``` ```` within ```` ```` ````, is part of the code
+      if (
+        fence?.[0] === openingFence[0] &&
+        fence.length >= openingFence.length &&
+        !line.trim().slice(fence.length)
+      ) {
+        openingFence = '';
       }
 
-      return callback(line);
+      return line;
     })
     .join('\n');
 };

package/dist/components/text-editor/shiki/version.d.ts

@@ -1,4 +1,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION: "0.77.1";
+export const UI_VERSION: "0.77.2";

package/dist/components/text-editor/shiki/version.js

@@ -3,4 +3,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION = '0.77.1';
+export const UI_VERSION = '0.77.2';

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.2",
   "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": {