@sveltia/ui 0.65.4 → 0.66.0

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,7 +11,7 @@
 -->
 <script>
   import { _ } from '@sveltia/i18n';
-  import { onMount } from 'svelte';
+  import { onMount, untrack } from 'svelte';
   import { searchEmojis } from './emoji.js';
 
   /**
@@ -156,11 +156,19 @@
    * 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;
+    // 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;
+    });
   };
 
   /**

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.4";
+export const UI_VERSION: "0.66.0";
 /**
  * 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.4";
+export const UI_VERSION = "0.66.0";
 
 /**
  * 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/locales/da.yaml

@@ -0,0 +1,116 @@
+# Dialog action button labels
+ok: OK
+cancel: Annuller
+close: Luk
+
+# Button to clear content, e.g. search input or calendar date
+clear: Ryd
+
+# Text editor dialog buttons for link/image insertion
+insert: Indsæt
+update: Opdater
+remove: Fjern
+
+# Combobox dropdown toggle button aria-labels
+collapse: Fold sammen
+expand: Fold ud
+
+# Infobar/toast dismiss button label
+dismiss: Afvis
+
+# Emoji suggestion listbox aria-label, shared by the text fields and the text editor
+emoji_suggestions: Emojiforslag
+
+# Calendar component
+calendar:
+  # View switcher group aria-labels and navigation button aria-labels
+  year: År
+  previous_decade: Forrige årti
+  next_decade: Næste årti
+  month: Måned
+  previous_month: Forrige måned
+  next_month: Næste måned
+  # “Today” button label in footer
+  today: I dag
+
+# Split button component
+split_button:
+  # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
+  x_options: 'Muligheder for {$name}'
+  # Dropdown toggle aria-label
+  more_options: Flere muligheder
+
+# Combobox component
+combobox:
+  # Placeholder when no option is selected
+  select_an_option: Vælg en mulighed…
+  # Filter input aria-label
+  filter_options: Filtrér muligheder
+  # Empty state message when filter has no matches
+  no_matching_options: Ingen matchende muligheder fundet
+
+# Number input component
+number_input:
+  # Spin button aria-labels for incrementing/decrementing the number value
+  increase: Forøg
+  decrease: Formindsk
+
+# Password input component
+password_input:
+  # Visibility toggle button aria-labels
+  show_password: Vis adgangskode
+  hide_password: Skjul adgangskode
+
+# Secret input component (API keys, tokens, etc.)
+secret_input:
+  # Visibility toggle button aria-labels
+  show_secret: Vis hemmelighed
+  hide_secret: Skjul hemmelighed
+
+# Select tags component (multi-select)
+select_tags:
+  # Listbox aria-label
+  selected_options: Valgte muligheder
+  # Remove button aria-label, e.g. “Remove Option 1”
+  remove_x: 'Fjern {$name}'
+
+# Text editor component
+text_editor:
+  # Toolbar aria-labels
+  text_editor: Teksteditor
+  code_editor: Kodeeditor
+  # Block style menu button and menu aria-labels
+  text_style_options: Muligheder for tekststil
+  show_text_style_options: Vis muligheder for tekststil
+  # Block style menu items
+  paragraph: Afsnit
+  heading_1: Overskrift 1
+  heading_2: Overskrift 2
+  heading_3: Overskrift 3
+  heading_4: Overskrift 4
+  heading_5: Overskrift 5
+  heading_6: Overskrift 6
+  bulleted_list: Punktopstilling
+  numbered_list: Nummereret liste
+  blockquote: Citat
+  code_block: Kodeblok
+  # Inline style button aria-labels
+  bold: Fed
+  italic: Kursiv
+  strikethrough: Gennemstreget
+  code: Kode
+  link: Link
+  # Link dialog title
+  insert_link: Indsæt link
+  update_link: Opdater link
+  # Link dialog input field labels
+  text: Tekst
+  url: URL
+  # Markdown mode toggle button aria-label
+  edit_in_markdown: Rediger i Markdown
+  # Error message when rich text conversion fails
+  converter_error: Formateret tekst kunne ikke slås til. Brug editoren til ren tekst i stedet.
+  # Language selector aria-label
+  language: Sprog
+  # Plain text mode option in language selector
+  plain_text: Ren tekst

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.4",
+  "version": "0.66.0",
   "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",