@sveltia/ui 0.65.3 → 0.65.5

package/dist/components/dialog/dialog.svelte

@@ -74,12 +74,22 @@
           return;
         }
 
-        if (focusInput) {
-          /** @type {HTMLInputElement | HTMLButtonElement} */ (
-            content?.querySelector('input, button.primary')
-          )?.focus();
-          /** @type {HTMLInputElement} */ (content?.querySelector('input'))?.select();
-        } else {
+        const target = focusInput
+          ? /** @type {HTMLInputElement | HTMLButtonElement | null} */ (
+              content?.querySelector('input, button.primary')
+            )
+          : null;
+
+        if (target) {
+          target.focus();
+
+          if (target instanceof HTMLInputElement) {
+            target.select();
+          }
+        } else if (!focusInput || !content?.contains(document.activeElement)) {
+          // Fall back to the `<dialog>` element itself, so the focus is never left outside the
+          // modal, e.g. when the dialog has no input field or primary button. Content that has
+          // already taken the focus is left alone.
           modal?.focus();
         }
       })();

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

@@ -11,8 +11,8 @@
 -->
 <script>
   import { _ } from '@sveltia/i18n';
-  import { onMount } from 'svelte';
-  import { loadEmojiList, searchEmojis } from './emoji.js';
+  import { onMount, untrack } from 'svelte';
+  import { searchEmojis } from './emoji.js';
 
   /**
    * @import { EmojiAnchorRect, EmojiEntry, EmojiTrigger } from '../../typedefs';
@@ -84,12 +84,6 @@
    * @type {HTMLElement | undefined}
    */
   let listElement = $state();
-  /**
-   * Monotonically increasing counter used to discard the result of a search that has been
-   * superseded while the emoji list was being loaded.
-   * @type {number}
-   */
-  let searchGeneration = 0;
   /**
    * Identifier of the shortcode the user has dismissed with the Escape key, so the suggestions
    * don’t come back while they keep typing it.
@@ -162,19 +156,26 @@
    * closed until they move on to another shortcode.
    */
   export const close = (dismissed = false) => {
-    dismissedShortcodeId = dismissed && trigger ? trigger.id : undefined;
-    trigger = undefined;
-    candidates = [];
-    selectedIndex = 0;
-    anchorRect = undefined;
-    searchGeneration += 1;
+    // The state is reset within `untrack()`, because a host closes the list when its field loses
+    // the focus, and the browser fires that `blur` synchronously while it removes the field from
+    // the DOM — which is to say, in the middle of Svelte rendering the block the field lives in,
+    // where a plain assignment would be reported as an unsafe mutation. The same goes for a host
+    // closing the list from an effect teardown. Not tracking the reads is what’s wanted anyway:
+    // whatever happens to be rendering has no business depending on this state.
+    untrack(() => {
+      dismissedShortcodeId = dismissed && trigger ? trigger.id : undefined;
+      trigger = undefined;
+      candidates = [];
+      selectedIndex = 0;
+      anchorRect = undefined;
+    });
   };
 
   /**
    * Feed the shortcode being typed into the list, or nothing to close it.
    * @param {EmojiTrigger} [newTrigger] Shortcode state.
    */
-  export const update = async (newTrigger) => {
+  export const update = (newTrigger) => {
     if (!newTrigger) {
       if (trigger || dismissedShortcodeId) {
         close();
@@ -202,17 +203,6 @@
     }
 
     trigger = newTrigger;
-    searchGeneration += 1;
-
-    const generation = searchGeneration;
-
-    await loadEmojiList();
-
-    // Bail out if the user has kept typing in the meantime
-    if (generation !== searchGeneration) {
-      return;
-    }
-
     candidates = searchEmojis(query);
     selectedIndex = 0;
   };
@@ -359,11 +349,6 @@
   });
 
   onMount(() => {
-    // Warm the data up front, so the first shortcode the user types shows suggestions straight away
-    // rather than waiting on the network. The loader memoizes, so this costs one request per page
-    // however many fields are on it, and nothing at all once it’s cached.
-    loadEmojiList();
-
     /**
      * Follow the caret when the page or an ancestor is scrolled or the window is resized.
      */

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

@@ -5,7 +5,7 @@ type EmojiSuggestions = {
 } & {
     isOpen: () => boolean;
     close: (dismissed?: boolean | undefined) => void;
-    update: (newTrigger?: EmojiTrigger | undefined) => Promise<void>;
+    update: (newTrigger?: EmojiTrigger | undefined) => void;
     moveSelection: (delta: number) => void;
     selectHighlighted: () => void;
     handleKeyDown: (event: KeyboardEvent) => boolean;
@@ -39,7 +39,7 @@ declare const EmojiSuggestions: import("svelte").Component<{
 }, {
     isOpen: () => boolean;
     close: (dismissed?: boolean | undefined) => void;
-    update: (newTrigger?: EmojiTrigger | undefined) => Promise<void>;
+    update: (newTrigger?: EmojiTrigger | undefined) => void;
     moveSelection: (delta: number) => void;
     selectHighlighted: () => void;
     handleKeyDown: (event: KeyboardEvent) => boolean;

package/dist/components/emoji/emoji.d.ts

@@ -16,7 +16,6 @@ export const EMOJI_TRIGGER_REGEX: RegExp;
  */
 export const MAX_EMOJI_SUGGESTIONS: 50;
 export function parseEmojiData(data: string): EmojiEntry[];
-export function loadEmojiList(): Promise<EmojiEntry[]>;
 /**
  * Rank given when there is no match at all. Higher than any real rank, so an unmatched emoji sorts
  * last and the ranks can still be compared arithmetically.

package/dist/components/emoji/emoji.js

@@ -1,3 +1,5 @@
+import { EMOJI_DATA } from './generated.js';
+
 /**
  * @import { EmojiEntry } from '../../typedefs';
  */
@@ -24,15 +26,11 @@ export const MAX_EMOJI_SUGGESTIONS = 50;
  */
 const WORD_SEPARATOR_REGEX = /[-_]/;
 /**
- * Cached emoji list. This is `undefined` until {@link loadEmojiList} resolves for the first time.
+ * Emoji list, parsed out of the data the first time it’s searched. This is `undefined` until then,
+ * so a page that never sees a shortcode never pays for it.
  * @type {EmojiEntry[] | undefined}
  */
 let emojiList;
-/**
- * In-flight or completed loader for {@link emojiList}, so the data is only parsed once.
- * @type {Promise<EmojiEntry[]> | undefined}
- */
-let loader;
 
 /**
  * Convert the generated emoji data into a searchable list.
@@ -54,34 +52,6 @@ export const parseEmojiData = (data) =>
     };
   });
 
-/**
- * Load the emoji list.
- *
- * The data is imported on demand rather than up front, so a bundler that can split it out keeps it
- * out of the initial payload — most sessions never type a shortcode. A failure here is not worth
- * surfacing: no suggestions are ever shown, and the shortcode the user typed stays as plain text.
- * @returns {Promise<EmojiEntry[]>} Emoji list, or an empty list if the data can’t be obtained.
- */
-export const loadEmojiList = async () => {
-  loader ??= (async () => {
-    try {
-      const { EMOJI_DATA } = await import('./generated.js');
-
-      emojiList = parseEmojiData(EMOJI_DATA);
-    } catch (ex) {
-      // Allow a later attempt to retry, so a transient chunk load failure isn’t permanent
-      loader = undefined;
-      emojiList = [];
-      // eslint-disable-next-line no-console
-      console.error(ex);
-    }
-
-    return /** @type {EmojiEntry[]} */ (emojiList);
-  })();
-
-  return loader;
-};
-
 /**
  * Rank given when there is no match at all. Higher than any real rank, so an unmatched emoji sorts
  * last and the ranks can still be compared arithmetically.
@@ -194,8 +164,7 @@ const getMatchCentrality = ({ name, aliases }, query) => {
 };
 
 /**
- * Search the loaded emoji list for the given query. This returns an empty list unless
- * {@link loadEmojiList} has been resolved beforehand.
+ * Search the emoji list for the given query.
  * @param {string} query Search query without the leading colon, e.g. `smi`.
  * @returns {EmojiEntry[]} Matching emojis, best match first, capped at
  * {@link MAX_EMOJI_SUGGESTIONS}.
@@ -203,10 +172,12 @@ const getMatchCentrality = ({ name, aliases }, query) => {
 export const searchEmojis = (query) => {
   const normalizedQuery = query.toLowerCase();
 
-  if (!emojiList || !normalizedQuery) {
+  if (!normalizedQuery) {
     return [];
   }
 
+  emojiList ??= parseEmojiData(EMOJI_DATA);
+
   return (
     emojiList
       .map((entry) => {

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

@@ -7,7 +7,7 @@ export const SHIKI_VERSION: "4.4.3";
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION: "0.65.3";
+export const UI_VERSION: "0.65.5";
 /**
  * Available syntax highlighting languages, sorted by display name.
  * @type {{ id: string, name: string, aliases?: string[] }[]}

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

@@ -10,7 +10,7 @@ export const SHIKI_VERSION = "4.4.3";
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION = "0.65.3";
+export const UI_VERSION = "0.65.5";
 
 /**
  * Available syntax highlighting languages, sorted by display name.

package/dist/components/util/modal.svelte

@@ -53,7 +53,8 @@
   } = $props();
 
   /**
-   * Focus the `<dialog>` element.
+   * Focus the `<dialog>` element. It has `tabindex="-1"`, so it can receive focus programmatically,
+   * allowing assistive technology to announce the modal’s label and description.
    */
   export const focus = () => {
     dialog?.focus();
@@ -144,6 +145,35 @@
    */
   let generation = 0;
 
+  /**
+   * The element that had the focus just before the modal was opened. The focus is moved back to it
+   * once the modal is closed.
+   * @type {HTMLElement | undefined}
+   */
+  let lastActiveElement;
+
+  /**
+   * Move the focus back to the element that had it before the modal was opened. This is done
+   * manually rather than relying on the browser’s own focus restoration, because the modal is
+   * closed while `<body>` is `inert`, which prevents the focus from being restored.
+   */
+  const restoreFocus = () => {
+    const { activeElement } = document;
+    const element = lastActiveElement;
+
+    lastActiveElement = undefined;
+
+    if (!element?.isConnected) {
+      return;
+    }
+
+    // Only take the focus back if it’s still inside the modal, or nowhere because the modal took it
+    // down with itself. If it has already moved on, pulling it back would undo what happened.
+    if (!activeElement || activeElement === document.body || dialog?.contains(activeElement)) {
+      element.focus();
+    }
+  };
+
   /**
    * Get the longest time from a computed CSS time list, such as `transition-duration`.
    * @param {string} value Comma-separated CSS time values in seconds, e.g. `0.4s, 0.15s`.
@@ -203,6 +233,9 @@
     generation += 1;
 
     const gen = generation;
+    const { activeElement } = document;
+
+    lastActiveElement = activeElement instanceof HTMLElement ? activeElement : undefined;
 
     onOpening?.(new CustomEvent('Opening'));
     visible = true;
@@ -217,6 +250,18 @@
     // because the element may have just been added to the DOM tree.
     dialog.getBoundingClientRect();
     setOpenClass = true;
+    // Wait for the `inert` attribute to be removed, then move the focus into the modal. The
+    // browser’s own dialog focusing steps don’t do this, because the element is still `inert` when
+    // `showModal()` is called above, leaving the focus on `<body>`. A component using this modal,
+    // such as `<Dialog>`, may then move the focus to a specific control, like an input field.
+    await tick();
+
+    if (gen !== generation || !dialog) return;
+
+    if (!dialog.contains(document.activeElement)) {
+      focus();
+    }
+
     await waitForTransition();
     if (gen !== generation) return;
     setActiveClass = true;
@@ -246,6 +291,7 @@
       document.body.inert = false;
     }
 
+    restoreFocus();
     setActiveClass = false;
     setOpenClass = false;
 
@@ -328,6 +374,7 @@
   {#if mounted}
     <dialog
       bind:this={dialog}
+      tabindex="-1"
       {...restProps}
       inert={!setOpenClass}
       {role}

package/dist/typedefs.d.ts

@@ -253,7 +253,8 @@ export type DialogProps = {
     cancelDisabled?: boolean | undefined;
     /**
      * Whether to automatically focus the first input field or primary
-     * action button. Default: `true`. If `false`, the `<dialog>` gets focused.
+     * action button. Default: `true`. If `false`, or if the dialog has neither, the `<dialog>` element
+     * gets focused instead, so the focus is always moved into the modal.
      */
     focusInput?: boolean | undefined;
     /**

package/dist/typedefs.js

@@ -89,7 +89,8 @@
  * `Control` or `Meta` depending on the user’s operating system.
  * @property {boolean} [cancelDisabled] Whether to disable the Cancel button.
  * @property {boolean} [focusInput] Whether to automatically focus the first input field or primary
- * action button. Default: `true`. If `false`, the `<dialog>` gets focused.
+ * action button. Default: `true`. If `false`, or if the dialog has neither, the `<dialog>` element
+ * gets focused instead, so the focus is always moved into the modal.
  * @property {boolean} [lightDismiss] Whether to close the modal when the backdrop (outside of the
  * modal) is clicked.
  * @property {string} [value] Value entered on the textbox.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.65.3",
+  "version": "0.65.5",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -62,7 +62,7 @@
     "eslint-config-airbnb-extended": "^3.2.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^64.1.0",
+    "eslint-plugin-jsdoc": "^64.2.0",
     "eslint-plugin-package-json": "^1.7.1",
     "eslint-plugin-svelte": "^3.23.0",
     "globals": "^17.11.0",