@sveltia/ui 0.38.0 → 0.39.1

package/dist/components/dialog/prompt-dialog.svelte

@@ -55,6 +55,7 @@
       {@render input()}
     {:else}
       <TextInput
+        dir="auto"
         bind:value
         flex
         autofocus

package/dist/components/select/combobox.svelte

@@ -144,6 +144,7 @@
   {:else}
     <TextInput
       {...restProps}
+      dir="auto"
       bind:element={inputElement}
       role="combobox"
       {id}

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

@@ -27,6 +27,7 @@
    * @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 {TextEditorMode[]} [modes] Enabled modes.
    * @property {(TextEditorBlockType | TextEditorInlineType)[]} [buttons] Enabled buttons.
    * @property {TextEditorComponent[]} [components] Editor components.
@@ -50,6 +51,7 @@
     /* eslint-disable prefer-const */
     value = $bindable(''),
     flex = false,
+    dir = undefined,
     modes = ['rich-text', 'plain-text'],
     buttons = [...INLINE_BUTTON_TYPES, ...BLOCK_BUTTON_TYPES],
     components = [],
@@ -110,6 +112,7 @@
     autoResize={true}
     bind:value={editorStore.inputValue}
     {flex}
+    {dir}
     hidden={editorStore.useRichText || hidden}
     {disabled}
     {readonly}

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

@@ -13,6 +13,10 @@ declare const TextEditor: import("svelte").Component<{
      * Make the text input container flexible.
      */
     flex?: boolean | undefined;
+    /**
+     * The `dir` attribute on the `<textarea>` element.
+     */
+    dir?: "ltr" | "rtl" | "auto" | undefined;
     /**
      * Enabled modes.
      */
@@ -67,6 +71,10 @@ type Props = {
      * Make the text input container flexible.
      */
     flex?: boolean | undefined;
+    /**
+     * The `dir` attribute on the `<textarea>` element.
+     */
+    dir?: "ltr" | "rtl" | "auto" | undefined;
     /**
      * Enabled modes.
      */

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

@@ -216,6 +216,7 @@
   <div role="none">
     <label for="{id}-url">{_('_sui.text_editor.url')}</label>
     <TextInput
+      dir="ltr"
       id="{id}-url"
       bind:value={anchorURL}
       flex
@@ -229,6 +230,7 @@
     <div role="none">
       <label for="{id}-text">{_('_sui.text_editor.text')}</label>
       <TextInput
+        dir="auto"
         id="{id}-text"
         bind:value={anchorText}
         flex

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

@@ -156,6 +156,7 @@
     </Button>
   </div>
   <TextInput
+    dir="ltr"
     {...restProps}
     role="spinbutton"
     {id}

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

@@ -65,6 +65,7 @@
   {hidden}
 >
   <TextInput
+    dir="ltr"
     bind:element={inputElement}
     {...restProps}
     {id}

package/dist/components/text-field/search-bar.svelte

@@ -79,6 +79,7 @@
     {/if}
   </span>
   <TextInput
+    dir="auto"
     bind:element={inputElement}
     {...restProps}
     role="searchbox"

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

@@ -62,6 +62,7 @@
   {hidden}
 >
   <TextInput
+    dir="ltr"
     bind:element={inputElement}
     {...restProps}
     {id}

package/dist/components/util/modal.svelte

@@ -59,6 +59,14 @@
   let setOpenClass = $state(false);
   let setActiveClass = $state(false);
   let showContent = $state(false);
+  /**
+   * Monotonically increasing counter used to detect stale async operations. Incremented at the
+   * start of each `openDialog`/`closeDialog` call; any suspended continuation that finds its
+   * captured value no longer matches the current counter knows it has been superseded and exits
+   * without mutating state.
+   * @type {number}
+   */
+  let generation = 0;
 
   /**
    * Resolve once the transition is complete.
@@ -88,13 +96,19 @@
       return;
     }
 
+    generation += 1;
+
+    const gen = generation;
+
     onOpening?.(new CustomEvent('Opening'));
     showContent = true;
     dialog.showModal();
     onOpen?.(new CustomEvent('Open'));
     await sleep(0);
+    if (gen !== generation) return;
     setOpenClass = true;
     await waitForTransition();
+    if (gen !== generation) return;
     setActiveClass = true;
   };
 
@@ -106,6 +120,10 @@
       return;
     }
 
+    generation += 1;
+
+    const gen = generation;
+    const wasOpen = setOpenClass;
     const { returnValue } = dialog;
 
     onClosing?.(new CustomEvent('Closing'));
@@ -115,7 +133,16 @@
     document.body.inert = false;
     setActiveClass = false;
     setOpenClass = false;
-    await waitForTransition();
+
+    // Only wait for the closing transition if the dialog was visually open (i.e. the `.open` CSS
+    // class was set). If the dialog was closed before the opening transition even started, there is
+    // no CSS transition in progress and `transitionend` will never fire.
+    if (wasOpen) {
+      await waitForTransition();
+    }
+
+    if (gen !== generation) return;
+
     showContent = false;
 
     if (returnValue === 'ok') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.38.0",
+  "version": "0.39.1",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -45,18 +45,18 @@
     "@lexical/selection": "^0.44.0",
     "@lexical/table": "^0.44.0",
     "@lexical/utils": "^0.44.0",
-    "@sveltia/i18n": "^1.0.5",
+    "@sveltia/i18n": "^1.1.0",
     "@sveltia/utils": "^0.10.6",
     "lexical": "^0.44.0",
     "prismjs": "^1.30.0",
-    "yaml": "^2.8.4"
+    "yaml": "^2.9.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^7.0.1",
     "@sveltejs/kit": "^2.59.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.1.2",
-    "@vitest/coverage-v8": "^4.1.5",
+    "@vitest/coverage-v8": "^4.1.6",
     "cspell": "^10.0.0",
     "eslint": "^9.39.4",
     "eslint-config-airbnb-extended": "^3.1.0",
@@ -67,21 +67,21 @@
     "eslint-plugin-svelte": "^3.17.1",
     "globals": "^17.6.0",
     "happy-dom": "^20.9.0",
-    "oxlint": "^1.63.0",
+    "oxlint": "^1.64.0",
     "postcss": "^8.5.14",
     "postcss-html": "^1.8.1",
     "prettier": "^3.8.3",
-    "prettier-plugin-svelte": "^3.5.1",
+    "prettier-plugin-svelte": "^3.5.2",
     "sass": "^1.99.0",
     "stylelint": "^17.11.0",
     "stylelint-config-recommended-scss": "^17.0.1",
-    "stylelint-scss": "^7.0.0",
+    "stylelint-scss": "^7.1.1",
     "svelte": "^5.55.5",
     "svelte-check": "^4.4.8",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
-    "vite": "^8.0.11",
-    "vitest": "^4.1.5"
+    "vite": "^8.0.12",
+    "vitest": "^4.1.6"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"