@sveltia/ui 0.71.1 → 0.72.1

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

@@ -82,6 +82,8 @@
   setContext('editorStore', editorStore);
 
   $effect(() => {
+    // The root initializes the editor before these effects first run, and stays initialized
+    /* v8 ignore next */
     if (!editorStore.initialized) {
       return;
     }
@@ -94,6 +96,8 @@
   });
 
   $effect(() => {
+    // The root initializes the editor before these effects first run, and stays initialized
+    /* v8 ignore next */
     if (!editorStore.initialized) {
       return;
     }

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

@@ -23,6 +23,6 @@
   } = $props();
 </script>
 
-<ToolbarWrapper disabled={disabled || readonly} aria-label={_('_sui.text_editor.code_editor')}>
+<ToolbarWrapper disabled={disabled || readonly} ariaLabel={_('_sui.text_editor.code_editor')}>
   <CodeLanguageSwitcher disabled={disabled || readonly} />
 </ToolbarWrapper>

package/dist/components/text-editor/toolbar/code-language-switcher.svelte

@@ -45,6 +45,9 @@
         : getNodeByKey(/** @type {string} */ (editorStore.selection.blockNodeKey));
 
       if (isCodeNode(node)) {
+        // The highlighter gives a block without a language the default one as it’s transformed,
+        // so the fallbacks here are only for the unexpected
+        /* v8 ignore next */
         selectedLanguage = node.getLanguage() ?? editorStore.config.defaultLanguage ?? 'plain';
       }
     });
@@ -53,7 +56,7 @@
 
 <Select
   {disabled}
-  aria-label={_('_sui.text_editor.language')}
+  ariaLabel={_('_sui.text_editor.language')}
   value={selectedLanguage}
   onChange={async ({ detail: { value: lang } }) => {
     if (!editorStore.editor || selectedLanguage === lang) {

package/dist/components/text-editor/toolbar/format-text-button.svelte

@@ -33,10 +33,12 @@
 <Button
   iconic
   aria-label={_(`_sui.text_editor.${AVAILABLE_BUTTONS[type].labelKey}`)}
-  aria-controls="{editorStore.editorId}-lexical-root"
+  aria-controls={`${editorStore.editorId}-lexical-root`}
   disabled={!editorStore.useRichText}
   pressed={selectionTypeMatches}
   onclick={async () => {
+    // The button is only enabled while the editor is there
+    /* v8 ignore else */
     if (editorStore.editor) {
       await focusEditor(editorStore.editor);
       editorStore.editor.dispatchCommand(FORMAT_TEXT_COMMAND, type);

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

@@ -34,7 +34,7 @@
   label={icon ? undefined : label}
   title={label}
   aria-label={label}
-  aria-controls="{editorStore.editorId}-lexical-root"
+  aria-controls={`${editorStore.editorId}-lexical-root`}
   disabled={!editorStore.useRichText}
   onclick={() => {
     editorStore.editor?.update(() => {

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

@@ -74,11 +74,16 @@
     editorStore.editor?.getEditorState().read(() => {
       const _selection = getSelection();
 
+      // This is only called while the selection is reported to be within a link, so the fallbacks
+      // below are for the unexpected
+      /* v8 ignore else */
       if (isRangeSelection(_selection)) {
         const anchor = _selection.anchor.getNode();
+        /* v8 ignore next */
         const parent = anchor instanceof LinkNode ? anchor : getNearestNodeOfType(anchor, LinkNode);
         const url = parent?.getURL();
 
+        /* v8 ignore else */
         if (url) {
           hasAnchor = true;
           anchorURL = url;
@@ -90,6 +95,7 @@
       }
 
       // Can’t update for some reason; remove it
+      /* v8 ignore next */
       removeLink();
     });
   };
@@ -123,6 +129,8 @@
    */
   const onDialogClose = async (event) => {
     if (event.detail.returnValue !== 'cancel' && dialogMode !== 'remove') {
+      // The dialog can only be opened from the button, which needs the editor
+      /* v8 ignore next */
       if (!editorStore.editor) {
         return;
       }
@@ -148,7 +156,7 @@
 
       await focusEditor(editorStore.editor);
       editorStore.editor.dispatchCommand(TOGGLE_LINK_COMMAND, anchorURL);
-    } else if (editorStore.editor) {
+    } else /* v8 ignore else */ if (editorStore.editor) {
       // The dialog leaves the focus alone (see `restoreFocus` below), so bring it back here
       await focusEditor(editorStore.editor);
     }
@@ -185,7 +193,7 @@
 <Button
   iconic
   aria-label={_(`_sui.text_editor.${AVAILABLE_BUTTONS[type].labelKey}`)}
-  aria-controls="{editorStore.editorId}-lexical-root"
+  aria-controls={`${editorStore.editorId}-lexical-root`}
   disabled={!editorStore.useRichText}
   pressed={selectionTypeMatches}
   onclick={() => {
@@ -202,7 +210,6 @@
     ? _('_sui.text_editor.insert_link')
     : _('_sui.text_editor.update_link')}
   bind:open={openDialog}
-  bind:value={anchorURL}
   okDisabled={!anchorURL}
   okLabel={dialogMode === 'create' ? _('_sui.insert') : _('_sui.update')}
   restoreFocus={false}

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

@@ -77,21 +77,20 @@
   );
 </script>
 
-<ToolbarWrapper disabled={disabled || readonly} aria-label={_('_sui.text_editor.text_editor')}>
+<ToolbarWrapper disabled={disabled || readonly} ariaLabel={_('_sui.text_editor.text_editor')}>
   {#if blockLevelButtons.length > 1}
     <MenuButton
       disabled={!editorStore.useRichText}
       aria-label={_('_sui.text_editor.show_text_style_options')}
-      aria-controls="{editorStore.editorId}-lexical-root"
+      aria-controls={`${editorStore.editorId}-lexical-root`}
     >
       {#snippet startIcon()}
         <Icon
-          name={AVAILABLE_BUTTONS[editorStore.selection.blockType ?? '']?.icon ??
-            'format_paragraph'}
+          name={AVAILABLE_BUTTONS[editorStore.selection.blockType]?.icon ?? 'format_paragraph'}
         />
       {/snippet}
       {#snippet popup()}
-        <Menu aria-label={_('_sui.text_editor.text_style_options')}>
+        <Menu ariaLabel={_('_sui.text_editor.text_style_options')}>
           {#each blockLevelButtons as type (type)}
             <ToggleBlockMenuItem {type} />
           {/each}

package/dist/components/text-editor/toolbar/toggle-block-menu-item.svelte

@@ -44,6 +44,8 @@
    * Change the current selection’s type to {@link type}.
    */
   const changeBlockType = async () => {
+    // The item is only clickable while the editor is there
+    /* v8 ignore next */
     if (!editorStore.editor) {
       return;
     }

package/dist/components/text-field/emoji-autocomplete.svelte

@@ -77,6 +77,8 @@
   const getAnchorRect = (trigger) => {
     const { start, end } = /** @type {FieldEmojiTrigger} */ (trigger);
 
+    // The trigger was found in the field, so the field is there
+    /* v8 ignore next */
     return element ? getFieldCaretRect(element, start, end) : undefined;
   };
 

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

@@ -0,0 +1,15 @@
+export function getMaximumFractionDigits(step: number): number;
+export function parseNumber(inputValue: string): number | undefined;
+export function isAtMin(inputValue: string, min: number | undefined): boolean;
+export function isAtMax(inputValue: string, max: number | undefined): boolean;
+export function stepNumber(inputValue: string, { step, direction, min, max }: {
+    step: number;
+    direction: 1 | -1;
+    min?: number | undefined;
+    max?: number | undefined;
+}): string | undefined;
+export function isInvalidNumber(inputValue: string, { required, min, max }?: {
+    required?: boolean | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+}): boolean;

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

@@ -0,0 +1,98 @@
+/**
+ * Logic behind `<NumberInput>`, kept apart from the component so the number handling can be tested
+ * without rendering anything.
+ */
+
+/**
+ * Get the number of fraction digits a value should be formatted with, so stepping by `0.1` yields
+ * `0.3` rather than `0.30000000000000004`.
+ * @param {number} step Step value.
+ * @returns {number} Number of fraction digits, `0` for an integer step.
+ */
+export const getMaximumFractionDigits = (step) => String(step).split('.')[1]?.length || 0;
+
+/**
+ * Parse the text entered in the field.
+ * @param {string} inputValue Text in the field.
+ * @returns {number | undefined} Number, or `undefined` if the field is empty or holds no number.
+ */
+export const parseNumber = (inputValue) => {
+  const value = inputValue.trim() ? Number(inputValue) : NaN;
+
+  return Number.isNaN(value) ? undefined : value;
+};
+
+/**
+ * Get the number the field currently represents for range checks: an empty field counts as zero,
+ * so the spin buttons and the arrow keys have something to step from.
+ * @param {string} inputValue Text in the field.
+ * @returns {number} Number, possibly `NaN`.
+ */
+const toNumber = (inputValue) => Number(inputValue || 0);
+
+/**
+ * Whether the field is at or below the minimum, if any.
+ * @param {string} inputValue Text in the field.
+ * @param {number | undefined} min Minimum allowed value.
+ * @returns {boolean} Result.
+ */
+export const isAtMin = (inputValue, min) => typeof min === 'number' && toNumber(inputValue) <= min;
+
+/**
+ * Whether the field is at or above the maximum, if any.
+ * @param {string} inputValue Text in the field.
+ * @param {number | undefined} max Maximum allowed value.
+ * @returns {boolean} Result.
+ */
+export const isAtMax = (inputValue, max) => typeof max === 'number' && toNumber(inputValue) >= max;
+
+/**
+ * Step the number in the field up or down.
+ * @param {string} inputValue Text in the field.
+ * @param {object} options Options.
+ * @param {number} options.step Amount to add or subtract.
+ * @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.
+ */
+export const stepNumber = (inputValue, { step, direction, min, max }) => {
+  if (Number.isNaN(Number(inputValue))) {
+    return undefined;
+  }
+
+  if (direction > 0 ? isAtMax(inputValue, max) : isAtMin(inputValue, min)) {
+    return undefined;
+  }
+
+  return Number(toNumber(inputValue) + step * direction).toFixed(getMaximumFractionDigits(step));
+};
+
+/**
+ * Check whether the field content is invalid.
+ * @param {string} inputValue Text in the field.
+ * @param {object} options Options.
+ * @param {boolean} [options.required] Whether a value is required.
+ * @param {number} [options.min] Minimum allowed value.
+ * @param {number} [options.max] Maximum allowed value.
+ * @returns {boolean} `true` if the field is empty while required, holds something other than a
+ * number, or holds a number outside the allowed range.
+ */
+export const isInvalidNumber = (inputValue, { required = false, min, max } = {}) => {
+  if (required && (parseNumber(inputValue) === undefined || inputValue === '')) {
+    return true;
+  }
+
+  if (inputValue === undefined || inputValue === '') {
+    return false;
+  }
+
+  const value = Number(inputValue);
+
+  return (
+    Number.isNaN(value) ||
+    (typeof min === 'number' && toNumber(inputValue) < min) ||
+    (typeof max === 'number' && toNumber(inputValue) > max)
+  );
+};

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

@@ -9,6 +9,14 @@
   import { untrack } from 'svelte';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
+  import {
+    getMaximumFractionDigits,
+    isAtMax,
+    isAtMin,
+    isInvalidNumber,
+    parseNumber,
+    stepNumber,
+  } from './number-input.js';
   import TextInput from './text-input.svelte';
 
   /**
@@ -56,9 +64,9 @@
   let edited = $state(false);
   let inputValue = $state('');
 
-  const maximumFractionDigits = $derived(String(step).split('.')[1]?.length || 0);
-  const isMin = $derived(typeof min === 'number' && Number(inputValue || 0) <= min);
-  const isMax = $derived(typeof max === 'number' && Number(inputValue || 0) >= max);
+  const maximumFractionDigits = $derived(getMaximumFractionDigits(step));
+  const isMin = $derived(isAtMin(inputValue, min));
+  const isMax = $derived(isAtMax(inputValue, max));
 
   $effect(() => {
     const newInputValue = String(value ?? '');
@@ -71,43 +79,39 @@
   });
 
   $effect(() => {
-    const newValue = inputValue.trim() ? Number(inputValue) : NaN;
-
-    value = !Number.isNaN(newValue) ? newValue : undefined;
+    value = parseNumber(inputValue);
   });
 
   $effect(() => {
     if (edited) {
-      invalid =
-        (required && (value === undefined || inputValue === '')) ||
-        (inputValue !== undefined &&
-          inputValue !== '' &&
-          (Number.isNaN(Number(inputValue)) ||
-            (typeof min === 'number' && Number(inputValue || 0) < min) ||
-            (typeof max === 'number' && Number(inputValue || 0) > max)));
+      invalid = isInvalidNumber(inputValue, { required, min, max });
     }
   });
 
   /**
-   * Decrease the number.
+   * Step the number up or down, unless the field holds no number or is already at the limit.
+   * @param {1 | -1} direction `1` to increase, `-1` to decrease.
    */
-  const decrease = () => {
-    if (isMin || Number.isNaN(Number(inputValue))) {
-      return;
+  const stepValue = (direction) => {
+    const newInputValue = stepNumber(inputValue, { step, direction, min, max });
+
+    if (newInputValue !== undefined) {
+      inputValue = newInputValue;
     }
+  };
 
-    inputValue = Number(Number(inputValue || 0) - step).toFixed(maximumFractionDigits);
+  /**
+   * Decrease the number.
+   */
+  const decrease = () => {
+    stepValue(-1);
   };
 
   /**
    * Increase the number.
    */
   const increase = () => {
-    if (isMax || Number.isNaN(Number(inputValue))) {
-      return;
-    }
-
-    inputValue = Number(Number(inputValue || 0) + step).toFixed(maximumFractionDigits);
+    stepValue(1);
   };
 </script>
 

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

@@ -52,6 +52,12 @@
 
   const id = $props.id();
   const timeout = $derived(typeof debounce === 'number' ? debounce : 300);
+  /**
+   * Accessible label, whether given as the `ariaLabel` prop or as a plain `aria-label` attribute,
+   * which the wrapper components such as `<SearchBar>` and `<NumberInput>` pass through as is.
+   * @type {string | undefined}
+   */
+  const label = $derived(ariaLabel ?? restProps['aria-label']);
 
   let debounceTimer = 0;
 
@@ -113,7 +119,7 @@
     disabled={disabled || undefined}
     readonly={readonly || undefined}
     {inputmode}
-    aria-label={ariaLabel}
+    aria-label={label}
     aria-hidden={hidden}
     aria-disabled={disabled}
     aria-readonly={readonly}
@@ -125,10 +131,10 @@
   {#if useEmojiAutocomplete && !disabled && !readonly}
     <EmojiAutocomplete {element} />
   {/if}
-  {#if ariaLabel && showInlineLabel}
+  {#if label && showInlineLabel}
     <span id="{id}-label" class="label" class:hidden={!!value} aria-hidden="true">
       <TruncatedText>
-        {ariaLabel}
+        {label}
       </TruncatedText>
     </span>
   {/if}

package/dist/components/toast/toast.svelte

@@ -64,11 +64,14 @@
     } else {
       popover = popoverBase;
 
+      // The base is bound by the time the component is mounted
+      /* v8 ignore else */
       if (popover) {
         popover.classList.add('enabled');
         (document.querySelector('.sui.app-shell') ?? document.body).appendChild(popover);
 
-        // Move the element to top layer
+        // Move the element to top layer, unless the browser doesn’t support the Popover API
+        /* v8 ignore else */
         if (popover.showPopover) {
           popover.popover = 'manual';
           popover.showPopover();
@@ -105,6 +108,8 @@
   });
 
   $effect(() => {
+    // Both are in place by the time the effect first runs; see `onMount()` above
+    /* v8 ignore else */
     if (popover && toast) {
       popover.appendChild(toast);
     }
@@ -133,7 +138,7 @@
 
 <div bind:this={popoverBase} role="none" class="sui toast-base"></div>
 
-<div {...restProps} bind:this={toast} class="sui toast {position}" aria-hidden={!show}>
+<div {...restProps} bind:this={toast} class={['sui', 'toast', position]} aria-hidden={!show}>
   {@render children?.()}
 </div>
 

package/dist/components/toolbar/toolbar.svelte

@@ -42,7 +42,7 @@
 <div
   {...restProps}
   role="toolbar"
-  class="sui toolbar {orientation} {variant} {className}"
+  class={['sui', 'toolbar', orientation, variant, className]}
   {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}

package/dist/components/typography/truncated-text.svelte

@@ -21,7 +21,8 @@
 <span
   role="none"
   class="sui truncated-text"
-  style="-webkit-line-clamp: {lines}; line-clamp: {lines};"
+  style:-webkit-line-clamp={lines}
+  style:line-clamp={lines}
 >
   {@render children?.()}
 </span>

package/dist/components/util/app-shell.d.ts

@@ -0,0 +1 @@
+export function shouldAllowContextMenu(target: EventTarget | null): boolean;

package/dist/components/util/app-shell.js

@@ -0,0 +1,29 @@
+/**
+ * Helpers behind `<AppShell>`, kept apart from the component so they can be tested on their own.
+ */
+
+/**
+ * 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
+ * text editors, where the menu carries the cut/copy/paste and spell-checking commands.
+ * @param {EventTarget | null} target The element that was right-clicked.
+ * @returns {boolean} `true` to leave the browser’s context menu alone.
+ */
+export const shouldAllowContextMenu = (target) => {
+  // Allow context menu in developer mode
+  if (document.documentElement.matches('[data-env="dev"]')) {
+    return true;
+  }
+
+  if (!(target instanceof Element)) {
+    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.
+  return (
+    (target.matches('input, textarea') && 'maxLength' in target) ||
+    /** @type {HTMLElement | null} */ (target.closest('[role="textbox"]'))?.contentEditable ===
+      'true'
+  );
+};

package/dist/components/util/app-shell.svelte

@@ -6,6 +6,7 @@
 -->
 <script>
   import { onMount } from 'svelte';
+  import { shouldAllowContextMenu } from './app-shell.js';
   import FontLinks from './font-links.svelte';
 
   /**
@@ -87,28 +88,13 @@
 <div
   {...restProps}
   role="none"
-  class="sui app-shell {orientation}"
+  class={['sui', 'app-shell', orientation]}
   ondragover={(event) => event.preventDefault()}
   ondrop={(event) => event.preventDefault()}
   oncontextmenu={(event) => {
-    // Allow context menu in developer mode
-    if (document.documentElement.matches('[data-env="dev"]')) {
-      return;
+    if (!shouldAllowContextMenu(event.target)) {
+      event.preventDefault();
     }
-
-    // eslint-disable-next-line prefer-destructuring
-    const target = /** @type {HTMLElement} */ (event.target);
-
-    // Allow context menu on text inputs and contentEditable elements
-    if (
-      document.documentElement.matches('[data-env="dev"]') ||
-      (target?.matches('input, textarea') && 'maxLength' in target) ||
-      /** @type {HTMLElement} */ (target?.closest('[role="textbox"]'))?.contentEditable === 'true'
-    ) {
-      return;
-    }
-
-    event.preventDefault();
   }}
 >
   {@render children?.()}

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

@@ -0,0 +1,5 @@
+export function getLongestTime(value: string): number;
+export function getTransitionTimeout({ transitionDuration, transitionDelay }: {
+    transitionDuration: string;
+    transitionDelay: string;
+}): number;

package/dist/components/util/modal.js

@@ -0,0 +1,22 @@
+/**
+ * Helpers behind `<Modal>`, kept apart from the component so they can be tested on their own.
+ */
+
+/**
+ * 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`.
+ * @returns {number} Time in milliseconds, `0` if the list is empty or holds no valid time.
+ */
+export const getLongestTime = (value) =>
+  Math.max(0, ...value.split(',').map((time) => Number.parseFloat(time) || 0)) * 1000;
+
+/**
+ * Get how long the closing or opening transition of a `<dialog>` can take, so a fallback timer can
+ * be set in case `transitionend` is never fired, for example when the transition is removed by the
+ * consumer’s CSS or the element is not rendered at all.
+ * @param {{ transitionDuration: string, transitionDelay: string }} style Computed style of the
+ * element.
+ * @returns {number} Time in milliseconds, with a small margin added.
+ */
+export const getTransitionTimeout = ({ transitionDuration, transitionDelay }) =>
+  getLongestTime(transitionDuration) + getLongestTime(transitionDelay) + 100;

package/dist/components/util/modal.svelte

@@ -21,6 +21,7 @@
     unmount,
     untrack,
   } from 'svelte';
+  import { getTransitionTimeout } from './modal.js';
   import Placeholder from './placeholder.svelte';
 
   /**
@@ -193,14 +194,6 @@
     });
   };
 
-  /**
-   * 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`.
-   * @returns {number} Time in milliseconds.
-   */
-  const getLongestTime = (value) =>
-    Math.max(0, ...value.split(',').map((time) => Number.parseFloat(time) || 0)) * 1000;
-
   /**
    * Resolve once the transition is complete.
    * @returns {Promise<void>} Nothing.
@@ -213,11 +206,10 @@
       return;
     }
 
-    const { transitionDuration, transitionDelay } = getComputedStyle(dialog);
     // Fall back to a timer, so the modal is never stuck half-open (and, more importantly, never
     // left mounted) in case `transitionend` is never fired, e.g. when the transition is removed by
     // the consumer’s CSS or the element is not rendered at all
-    const timeout = getLongestTime(transitionDuration) + getLongestTime(transitionDelay) + 100;
+    const timeout = getTransitionTimeout(getComputedStyle(dialog));
     const controller = new AbortController();
     const { signal } = controller;
 
@@ -244,6 +236,8 @@
    * Show the modal.
    */
   const openDialog = async () => {
+    // Only called when the `open` prop changes, so it can’t be requested twice in a row
+    /* v8 ignore next */
     if (requestedOpen) {
       return;
     }
@@ -278,8 +272,11 @@
     // such as `<Dialog>`, may then move the focus to a specific control, like an input field.
     await tick();
 
+    // The focus is on `<body>` at this point, because the element was still `inert` when shown
+    /* v8 ignore next */
     if (gen !== generation || !dialog) return;
 
+    /* v8 ignore else */
     if (!dialog.contains(document.activeElement)) {
       focus();
     }
@@ -302,6 +299,8 @@
 
     const gen = generation;
     const wasOpen = setOpenClass;
+    // The element is mounted by the time a close can be requested; see `openDialog()` above
+    /* v8 ignore next */
     const returnValue = dialog?.returnValue ?? '';
 
     onClosing?.(new CustomEvent('Closing'));

package/dist/components/util/popup.svelte

@@ -81,12 +81,23 @@
   let popupInstance = $state();
   let hoveredTimeout = 0;
 
+  // Keep the `open` prop and the instance in sync both ways. The instance opens the popup when
+  // the anchor is activated, and closes it when the backdrop or an item is clicked, or Escape is
+  // pressed; the prop is what a consumer such as `<Combobox>` or `<MenuItem>` toggles from its own
+  // controls. The instance has to follow the prop as well, because it’s the instance that handles
+  // the dismissal, and it ignores a popup it doesn’t know to be open.
   $effect(() => {
     if (popupInstance) {
       open = popupInstance.open;
     }
   });
 
+  $effect(() => {
+    if (popupInstance && popupInstance.open !== open) {
+      popupInstance.open = open;
+    }
+  });
+
   $effect(() => {
     if (parentDialogElement && !dialogElement && content) {
       dialogElement = parentDialogElement;