@sveltia/ui 0.78.3 → 0.79.0

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

@@ -21,7 +21,7 @@
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs';
+   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs.js';
    */
 
   /**
@@ -55,6 +55,8 @@
     increaseIcon,
     decreaseIcon,
     onChange,
+    onkeydown,
+    oninput,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
@@ -174,20 +176,22 @@
     {readonly}
     {required}
     {invalid}
-    aria-valuenow={Number(value || 0)}
+    aria-valuenow={Number.isFinite(value) ? value : undefined}
     aria-valuemin={min}
     aria-valuemax={max}
     inputmode={maximumFractionDigits > 0 ? 'decimal' : 'numeric'}
     onkeydown={(event) => {
       const { key, ctrlKey, metaKey, altKey, shiftKey } = event;
       const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
+      // A read-only field can’t be stepped, just like the spin buttons
+      const canStep = !disabled && !readonly && !hasModifier;
 
-      if (key === 'ArrowDown' && !hasModifier) {
+      if (key === 'ArrowDown' && canStep) {
         event.preventDefault();
         decrease();
       }
 
-      if (key === 'ArrowUp' && !hasModifier) {
+      if (key === 'ArrowUp' && canStep) {
         event.preventDefault();
         increase();
       }
@@ -195,11 +199,15 @@
       if (!edited) {
         edited = true;
       }
+
+      onkeydown?.(event);
     }}
-    oninput={() => {
+    oninput={(event) => {
       if (!edited) {
         edited = true;
       }
+
+      oninput?.(event);
     }}
     {onChange}
   />

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

@@ -8,7 +8,7 @@ type NumberInput = {
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
  * @see https://w3c.github.io/aria/#textbox
  */
-declare const NumberInput: import("svelte").Component<TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & InputEventHandlers & {
+declare const NumberInput: import("svelte").Component<TextInputProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & InputEventHandlers & {
     /**
      * Input value.
      */
@@ -62,6 +62,6 @@ type Props = {
      */
     decreaseIcon?: Snippet<[]> | undefined;
 };
-import type { TextInputProps } from '../../typedefs';
-import type { InputEventHandlers } from '../../typedefs';
+import type { TextInputProps } from '../../typedefs.js';
+import type { InputEventHandlers } from '../../typedefs.js';
 import type { Snippet } from 'svelte';

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

@@ -6,14 +6,11 @@
   @see https://w3c.github.io/aria/#textbox
 -->
 <script>
-  import { _ } from '@sveltia/i18n';
-  import Button from '../button/button.svelte';
-  import Icon from '../icon/icon.svelte';
-  import TextInput from './text-input.svelte';
+  import MaskedInput from './masked-input.svelte';
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs';
+   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs.js';
    */
 
   /**
@@ -28,119 +25,9 @@
   let {
     /* eslint-disable prefer-const */
     value = $bindable(),
-    flex = false,
-    monospace = true,
-    class: className,
-    hidden = false,
-    disabled = false,
-    readonly = false,
-    required = false,
-    invalid = false,
-    children,
-    visibilityIcon,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
-
-  const id = $props.id();
-
-  /**
-   * Reference to the `<input>` element.
-   * @type {HTMLInputElement | undefined}
-   */
-  let inputElement = $state();
-  let passwordVisible = $state(false);
-
-  $effect(() => {
-    inputElement?.setAttribute('type', passwordVisible ? 'text' : 'password');
-  });
 </script>
 
-<div
-  role="none"
-  class="sui password-input {className}"
-  class:flex
-  class:disabled
-  class:readonly
-  {hidden}
->
-  <TextInput
-    dir="ltr"
-    bind:element={inputElement}
-    {...restProps}
-    {id}
-    bind:value
-    type="password"
-    spellcheck="false"
-    {flex}
-    {monospace}
-    {hidden}
-    {disabled}
-    {readonly}
-    {required}
-    {invalid}
-  />
-  <Button
-    iconic
-    disabled={disabled || readonly}
-    pressed={passwordVisible}
-    aria-label={_(
-      passwordVisible ? '_sui.password_input.hide_password' : '_sui.password_input.show_password',
-    )}
-    aria-controls={id}
-    onclick={() => {
-      passwordVisible = !passwordVisible;
-    }}
-  >
-    {#snippet startIcon()}
-      {#if visibilityIcon}
-        {@render visibilityIcon()}
-      {:else}
-        <Icon name={passwordVisible ? 'visibility_off' : 'visibility'} />
-      {/if}
-    {/snippet}
-  </Button>
-</div>
-
-<style>.password-input {
-  display: inline-flex;
-  align-items: center;
-  margin: var(--sui-focus-ring-width);
-  min-width: var(--sui-textbox-singleline-min-width);
-}
-.password-input.flex:not([hidden]) {
-  display: inline-flex;
-  width: -moz-available;
-  width: -webkit-fill-available;
-  width: stretch;
-  min-width: 0;
-}
-.password-input :global(.text-input) {
-  flex: auto;
-  margin: 0 !important;
-  width: 0;
-  min-width: 0 !important;
-}
-.password-input :global(input) {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-}
-.password-input :global(button) {
-  flex: none;
-  margin-block: 0;
-  margin-inline-start: -1px;
-  margin-inline-end: 0;
-  border-width: 1px;
-  border-color: var(--sui-textbox-border-color);
-  width: var(--sui-textbox-height);
-  aspect-ratio: 1/1;
-}
-.password-input :global(button:last-child) {
-  border-start-start-radius: 0;
-  border-start-end-radius: 4px;
-  border-end-end-radius: 4px;
-  border-end-start-radius: 0;
-}
-.password-input :global(button) :global(.icon) {
-  font-size: var(--sui-font-size-xx-large);
-}</style>
+<MaskedInput bind:value {...restProps} mask="type" />

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

@@ -9,7 +9,7 @@ type PasswordInput = {
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
  * @see https://w3c.github.io/aria/#textbox
  */
-declare const PasswordInput: import("svelte").Component<TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & InputEventHandlers & {
+declare const PasswordInput: import("svelte").Component<TextInputProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & InputEventHandlers & {
     /**
      * Input value.
      */
@@ -29,6 +29,6 @@ type Props = {
      */
     visibilityIcon?: Snippet<[]> | undefined;
 };
-import type { TextInputProps } from '../../typedefs';
-import type { InputEventHandlers } from '../../typedefs';
+import type { TextInputProps } from '../../typedefs.js';
+import type { InputEventHandlers } from '../../typedefs.js';
 import type { Snippet } from 'svelte';

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

@@ -14,7 +14,7 @@
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs';
+   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs.js';
    */
 
   /**

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

@@ -11,7 +11,7 @@ type SearchBar = {
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search
  * @see https://w3c.github.io/aria/#search
  */
-declare const SearchBar: import("svelte").Component<TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & InputEventHandlers & {
+declare const SearchBar: import("svelte").Component<TextInputProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & InputEventHandlers & {
     /**
      * Input value.
      */
@@ -49,6 +49,6 @@ type Props = {
      */
     onClear?: (() => void) | undefined;
 };
-import type { TextInputProps } from '../../typedefs';
-import type { InputEventHandlers } from '../../typedefs';
+import type { TextInputProps } from '../../typedefs.js';
+import type { InputEventHandlers } from '../../typedefs.js';
 import type { Snippet } from 'svelte';

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

@@ -6,14 +6,11 @@
   @see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-text-security
 -->
 <script>
-  import { _ } from '@sveltia/i18n';
-  import Button from '../button/button.svelte';
-  import Icon from '../icon/icon.svelte';
-  import TextInput from './text-input.svelte';
+  import MaskedInput from './masked-input.svelte';
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs';
+   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs.js';
    */
 
   /**
@@ -28,122 +25,9 @@
   let {
     /* eslint-disable prefer-const */
     value = $bindable(),
-    flex = false,
-    monospace = true,
-    class: className,
-    hidden = false,
-    disabled = false,
-    readonly = false,
-    required = false,
-    invalid = false,
-    children,
-    visibilityIcon,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
-
-  const id = $props.id();
-
-  /**
-   * Reference to the `<input>` element.
-   * @type {HTMLInputElement | undefined}
-   */
-  let inputElement = $state();
-  let show = $state(false);
 </script>
 
-<div
-  role="none"
-  class="sui secret-input {className}"
-  class:flex
-  class:disabled
-  class:readonly
-  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}
-    bind:value
-    spellcheck="false"
-    {flex}
-    {monospace}
-    {hidden}
-    {disabled}
-    {readonly}
-    {required}
-    {invalid}
-  />
-  <Button
-    iconic
-    disabled={disabled || readonly}
-    pressed={show}
-    aria-label={_(show ? '_sui.secret_input.hide_secret' : '_sui.secret_input.show_secret')}
-    aria-controls={id}
-    onclick={() => {
-      show = !show;
-    }}
-  >
-    {#snippet startIcon()}
-      {#if visibilityIcon}
-        {@render visibilityIcon()}
-      {:else}
-        <Icon name={show ? 'visibility_off' : 'visibility'} />
-      {/if}
-    {/snippet}
-  </Button>
-</div>
-
-<style>.secret-input {
-  display: inline-flex;
-  align-items: center;
-  margin: var(--sui-focus-ring-width);
-  min-width: var(--sui-textbox-singleline-min-width);
-}
-.secret-input.flex:not([hidden]) {
-  display: inline-flex;
-  width: -moz-available;
-  width: -webkit-fill-available;
-  width: stretch;
-  min-width: 0;
-}
-.secret-input.show :global(input) {
-  -webkit-text-security: none;
-}
-.secret-input :global(.text-input) {
-  flex: auto;
-  margin: 0 !important;
-  width: 0;
-  min-width: 0 !important;
-}
-.secret-input :global(input) {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-  -webkit-text-security: disc;
-}
-.secret-input :global(button) {
-  flex: none;
-  margin-block: 0;
-  margin-inline-start: -1px;
-  margin-inline-end: 0;
-  border-width: 1px;
-  border-color: var(--sui-textbox-border-color);
-  width: var(--sui-textbox-height);
-  aspect-ratio: 1/1;
-}
-.secret-input :global(button:last-child) {
-  border-start-start-radius: 0;
-  border-start-end-radius: 4px;
-  border-end-end-radius: 4px;
-  border-end-start-radius: 0;
-}
-.secret-input :global(button) :global(.icon) {
-  font-size: var(--sui-font-size-xx-large);
-}</style>
+<MaskedInput bind:value {...restProps} mask="css" />

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

@@ -9,7 +9,7 @@ type SecretInput = {
  * the password.
  * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-text-security
  */
-declare const SecretInput: import("svelte").Component<TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & InputEventHandlers & {
+declare const SecretInput: import("svelte").Component<TextInputProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & InputEventHandlers & {
     /**
      * Input value.
      */
@@ -29,6 +29,6 @@ type Props = {
      */
     visibilityIcon?: Snippet<[]> | undefined;
 };
-import type { TextInputProps } from '../../typedefs';
-import type { InputEventHandlers } from '../../typedefs';
+import type { TextInputProps } from '../../typedefs.js';
+import type { InputEventHandlers } from '../../typedefs.js';
 import type { Snippet } from 'svelte';

package/dist/components/text-field/text-area.svelte

@@ -10,7 +10,7 @@
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { CommonEventHandlers, HighlightedToken, InputEventHandlers } from '../../typedefs';
+   * @import { CommonEventHandlers, HighlightedToken, InputEventHandlers } from '../../typedefs.js';
    */
 
   /**

package/dist/components/text-field/text-area.svelte.d.ts

@@ -9,7 +9,7 @@ type TextArea = {
  * @see https://w3c.github.io/aria/#textbox
  * @see https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
  */
-declare const TextArea: import("svelte").Component<import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & InputEventHandlers & {
+declare const TextArea: import("svelte").Component<import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & InputEventHandlers & {
     /**
      * Input value.
      */
@@ -153,6 +153,6 @@ type Props = {
      */
     children?: Snippet<[]> | undefined;
 };
-import type { InputEventHandlers } from '../../typedefs';
-import type { HighlightedToken } from '../../typedefs';
+import type { InputEventHandlers } from '../../typedefs.js';
+import type { HighlightedToken } from '../../typedefs.js';
 import type { Snippet } from 'svelte';

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

@@ -10,7 +10,7 @@
   import EmojiAutocomplete from './emoji-autocomplete.svelte';
 
   /**
-   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs';
+   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs.js';
    */
 
   /**

package/dist/components/text-field/text-input.svelte.d.ts

@@ -8,7 +8,7 @@ type TextInput = {
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
  * @see https://w3c.github.io/aria/#textbox
  */
-declare const TextInput: import("svelte").Component<TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & InputEventHandlers & {
+declare const TextInput: import("svelte").Component<TextInputProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & InputEventHandlers & {
     /**
      * Input value.
      */
@@ -30,5 +30,5 @@ type Props = {
      */
     useEmojiAutocomplete?: boolean | undefined;
 };
-import type { TextInputProps } from '../../typedefs';
-import type { InputEventHandlers } from '../../typedefs';
+import type { TextInputProps } from '../../typedefs.js';
+import type { InputEventHandlers } from '../../typedefs.js';

package/dist/components/toast/toast.svelte

@@ -179,11 +179,11 @@
 </script>
 
 <script>
-  import { onMount, untrack } from 'svelte';
+  import { onMount } from 'svelte';
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { ToastPosition } from '../../typedefs';
+   * @import { ToastPosition } from '../../typedefs.js';
    */
 
   /**
@@ -220,10 +220,6 @@
    * @type {HTMLElement | undefined}
    */
   let toast = $state();
-  /**
-   * @type {number}
-   */
-  let timerId = $state(0);
   /**
    * Whether the pointer is over the toast or the focus is inside it. The auto-hide countdown is
    * held while it is, so a toast with a control in it can’t vanish from under the user (WCAG
@@ -323,23 +319,18 @@
     void duration;
     void held;
 
-    untrack(() => {
-      globalThis.clearTimeout(timerId);
-    });
-
-    if (show && duration && !held) {
-      timerId = /** @type {number} */ (
-        /** @type {unknown} */ (
-          globalThis.setTimeout(() => {
-            show = false;
-          }, duration)
-        )
-      );
+    if (!show || !duration || held) {
+      return undefined;
     }
 
-    // Stop the countdown when the toast is destroyed, or it would still hide the toast later
+    const timer = globalThis.setTimeout(() => {
+      show = false;
+    }, duration);
+
+    // Stop the countdown when any of the above changes, so the previous timer can’t fire, or when
+    // the toast is destroyed, or it would still hide the toast later
     return () => {
-      globalThis.clearTimeout(timerId);
+      globalThis.clearTimeout(timer);
     };
   });
 </script>

package/dist/components/toast/toast.svelte.d.ts

@@ -59,5 +59,5 @@ type Props = {
      */
     children?: Snippet<[]> | undefined;
 };
-import type { ToastPosition } from '../../typedefs';
+import type { ToastPosition } from '../../typedefs.js';
 import type { Snippet } from 'svelte';

package/dist/components/tree/tree-item.svelte

@@ -14,7 +14,7 @@
   /**
    * @import { Snippet } from 'svelte';
    * @import { Attachment } from 'svelte/attachments';
-   * @import { CommonEventHandlers } from '../../typedefs';
+   * @import { CommonEventHandlers } from '../../typedefs.js';
    */
 
   /**

package/dist/components/tree/tree-item.svelte.d.ts

@@ -9,7 +9,7 @@ type TreeItem = {
  * @see https://w3c.github.io/aria/#treeitem
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
  */
-declare const TreeItem: import("svelte").Component<import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+declare const TreeItem: import("svelte").Component<import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & {
     /**
      * The `class` attribute on the wrapper element.
      */

package/dist/components/tree/tree.svelte

@@ -10,7 +10,7 @@
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { CommonEventHandlers } from '../../typedefs';
+   * @import { CommonEventHandlers } from '../../typedefs.js';
    */
 
   /**

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

@@ -9,7 +9,7 @@ type Tree = {
  * @see https://w3c.github.io/aria/#tree
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
  */
-declare const Tree: import("svelte").Component<import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+declare const Tree: import("svelte").Component<import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & {
     /**
      * A reference to the wrapper element.
      */

package/dist/components/util/font-links.svelte

@@ -60,4 +60,5 @@
     -moz-font-feature-settings: 'liga';
     font-feature-settings: 'liga';
   }
+
 </style>

package/dist/components/util/modal.svelte

@@ -25,7 +25,7 @@
   import Placeholder from './placeholder.svelte';
 
   /**
-   * @import { ModalProps } from '../../typedefs';
+   * @import { ModalProps } from '../../typedefs.js';
    */
 
   /**
@@ -154,6 +154,14 @@
    */
   let lastActiveElement;
 
+  /**
+   * The element the last `pointerdown` event in the modal was fired on. A click that lands on the
+   * backdrop only dismisses the modal if the pointer was also pressed there, so selecting text in
+   * the content by dragging and releasing the pointer over the backdrop doesn’t close it.
+   * @type {EventTarget | null | undefined}
+   */
+  let pointerDownTarget;
+
   /**
    * Timer used to defer the focus restoration in {@link moveFocusBack}.
    * @type {number | undefined}
@@ -404,7 +412,19 @@
       class:backdrop={showBackdrop}
       class:open={setOpenClass}
       class:active={setActiveClass}
+      onpointerdown={({ target }) => {
+        pointerDownTarget = target;
+      }}
       onclick={({ target }) => {
+        const downTarget = pointerDownTarget;
+
+        pointerDownTarget = undefined;
+
+        // A click with no `pointerdown` before it, like one dispatched by a script, is taken as is
+        if (downTarget && downTarget !== dialog) {
+          return;
+        }
+
         if (
           dialog &&
           lightDismiss &&
@@ -423,6 +443,22 @@
           open = false;
         }
       }}
+      onclose={() => {
+        // Closed by `closeDialog()` or on unmount, or already shown again by `openDialog()`
+        if (!requestedOpen || !dialog?.isConnected || dialog.open) {
+          return;
+        }
+
+        // The browser has closed the dialog on its own. The `cancel` event can’t always be
+        // prevented: Chrome makes it non-cancelable when Escape is pressed again without any user
+        // activation in between. Show the dialog again if it shouldn’t be dismissed with Escape,
+        // otherwise bring the state in line, so the usual closing steps run.
+        if (!escapeDismiss) {
+          dialog.showModal();
+        } else {
+          open = false;
+        }
+      }}
     >
       {@render extraContent?.()}
       {@render children?.()}

package/dist/components/util/modal.svelte.d.ts

@@ -11,4 +11,4 @@ declare const Modal: import("svelte").Component<ModalProps & Record<string, any>
     focus: () => void;
     close: (returnValue: string) => void;
 }, "dialog" | "open">;
-import type { ModalProps } from '../../typedefs';
+import type { ModalProps } from '../../typedefs.js';