@juspay/svelte-ui-components 4.27.6 → 4.28.0

package/dist/ListItem/ListItem.svelte

@@ -38,6 +38,28 @@
     id
   }: ListItemProperties = $props();
 
+  // DESIGN_PRINCIPLES.md principle 4: a region only takes role="button" + a tab stop when
+  // it was actually given its own click handler -- otherwise a single list item nests up to
+  // four buttons inside a button and puts five tab stops where the consumer wired one
+  // handler. Each of the four sub-regions is checked against its own handler prop here. The
+  // root is intentionally NOT re-gated the same way: its role/tabindex stay governed by the
+  // pre-existing `itemRole`/`suppressRoleAndTabindex` contract (see below), unconditional on
+  // onitemclick, matching the library's documented default ("ListItem renders synthetic
+  // button roles and tab stops by default").
+  let topSectionInteractive = $derived(
+    !suppressRoleAndTabindex && typeof ontopsectionclick === 'function'
+  );
+  let leftImageInteractive = $derived(
+    !suppressRoleAndTabindex && typeof onleftimageclick === 'function'
+  );
+  let centerTextInteractive = $derived(
+    !suppressRoleAndTabindex && typeof oncentertextclick === 'function'
+  );
+  let rightImageInteractive = $derived(
+    !suppressRoleAndTabindex && typeof onrightimageclick === 'function'
+  );
+  let itemInteractive = $derived(!suppressRoleAndTabindex && itemRole !== 'option');
+
   function handleLeftImageClick(event: MouseEvent): void {
     onleftimageclick?.(event);
   }
@@ -57,6 +79,49 @@
   function handleTopSectionClick(event: MouseEvent): void {
     ontopsectionclick?.(event);
   }
+
+  // A region with role="button" needs Enter/Space to do what a click does (divs get no
+  // free keyboard activation the way a native <button> would). Re-dispatching a real click
+  // on the element itself -- rather than calling its handler directly -- keeps one
+  // activation path and lets that click bubble through nested zones exactly like a pointer
+  // click already does. The `event.target === event.currentTarget` guard matters only
+  // because zones can nest (a consumer-supplied root handler alongside a sub-region
+  // handler): without it, the same keydown bubbling from a focused, activated sub-region up
+  // through an also-interactive ancestor would synthesize a second click at every ancestor
+  // it passes through.
+  function activateOnEnterOrSpace(interactive: boolean, event: KeyboardEvent): void {
+    onkeydown?.(event);
+    if (!interactive || event.target !== event.currentTarget) {
+      return;
+    }
+    if (event.key !== 'Enter' && event.key !== ' ') {
+      return;
+    }
+    event.preventDefault();
+    if (event.currentTarget instanceof HTMLElement) {
+      event.currentTarget.click();
+    }
+  }
+
+  function handleItemKeydown(event: KeyboardEvent): void {
+    activateOnEnterOrSpace(itemInteractive, event);
+  }
+
+  function handleTopSectionKeydown(event: KeyboardEvent): void {
+    activateOnEnterOrSpace(topSectionInteractive, event);
+  }
+
+  function handleLeftImageKeydown(event: KeyboardEvent): void {
+    activateOnEnterOrSpace(leftImageInteractive, event);
+  }
+
+  function handleCenterTextKeydown(event: KeyboardEvent): void {
+    activateOnEnterOrSpace(centerTextInteractive, event);
+  }
+
+  function handleRightImageKeydown(event: KeyboardEvent): void {
+    activateOnEnterOrSpace(rightImageInteractive, event);
+  }
 </script>
 
 {#if (typeof leftImageUrl === 'string' && leftImageUrl.length > 0) || (typeof rightImageUrl === 'string' && rightImageUrl.length > 0) || (typeof label === 'string' && label.length > 0) || typeof leftContent === 'function' || typeof centerContent === 'function' || typeof rightContent === 'function' || typeof bottomContent === 'function'}
@@ -69,7 +134,7 @@
       class="item"
       class:prevent-focus={preventFocus}
       onclick={handleItemClick}
-      {onkeydown}
+      onkeydown={handleItemKeydown}
       role={suppressRoleAndTabindex ? null : (itemRole ?? 'button')}
       tabindex={suppressRoleAndTabindex ? null : itemRole === 'option' ? -1 : 0}
       aria-selected={suppressRoleAndTabindex ? null : ariaSelected}
@@ -81,9 +146,9 @@
         class="top-section"
         class:prevent-focus={preventFocus}
         onclick={handleTopSectionClick}
-        {onkeydown}
-        role={suppressRoleAndTabindex ? null : 'button'}
-        tabindex={suppressRoleAndTabindex ? null : 0}
+        onkeydown={handleTopSectionKeydown}
+        role={topSectionInteractive ? 'button' : null}
+        tabindex={topSectionInteractive ? 0 : null}
         data-pw={topSectionTestId}
         testID={topSectionTestId}
       >
@@ -92,9 +157,9 @@
             <div
               class:prevent-focus={preventFocus}
               onclick={handleLeftImageClick}
-              {onkeydown}
-              role={suppressRoleAndTabindex ? null : 'button'}
-              tabindex={suppressRoleAndTabindex ? null : 0}
+              onkeydown={handleLeftImageKeydown}
+              role={leftImageInteractive ? 'button' : null}
+              tabindex={leftImageInteractive ? 0 : null}
               data-pw={leftImageTestId}
               testID={leftImageTestId}
             >
@@ -111,9 +176,9 @@
               class="center-text"
               class:prevent-focus={preventFocus}
               onclick={handleCenterTextClick}
-              {onkeydown}
-              role={suppressRoleAndTabindex ? null : 'button'}
-              tabindex={suppressRoleAndTabindex ? null : 0}
+              onkeydown={handleCenterTextKeydown}
+              role={centerTextInteractive ? 'button' : null}
+              tabindex={centerTextInteractive ? 0 : null}
               data-pw={centerTextTestId}
               testID={centerTextTestId}
             >
@@ -133,9 +198,9 @@
             <div
               class:prevent-focus={preventFocus}
               onclick={handleRightImageClick}
-              {onkeydown}
-              role={suppressRoleAndTabindex ? null : 'button'}
-              tabindex={suppressRoleAndTabindex ? null : 0}
+              onkeydown={handleRightImageKeydown}
+              role={rightImageInteractive ? 'button' : null}
+              tabindex={rightImageInteractive ? 0 : null}
               data-pw={rightImageTestId}
               testID={rightImageTestId}
             >
@@ -192,6 +257,29 @@
     }
   }
 
+  /* Same hazard as Button's progress-bar loader (see its comment for the full
+     reasoning): this bar's width is a real elapsed-time signal over
+     `--list-item-loader-duration`, not decoration, so a bare `animation: none`
+     would freeze it at the base rule's `width: 100%` and read as "finished"
+     for the entire duration instead of "still loading". Discrete steps keep
+     the width an honest (if coarser) lower bound on elapsed time -- it can
+     only under-report, never claim to be further along than it is -- while
+     dropping the continuous slide prefers-reduced-motion targets. Lives in
+     the component's own <style> because that is the only stylesheet that
+     reaches inside the shadow root a custom-element consumer gets. */
+  @media (prefers-reduced-motion: reduce) {
+    .item-loader {
+      /* A LITERAL step count, deliberately not a token. `steps()` is invalid
+         below 1, and an invalid value does not degrade to a safer stepped
+         default: the whole declaration is dropped and the property falls back to
+         the base rule's easing, restoring the continuous slide this block exists
+         to remove. A consumer passing 0 to "just freeze it" would silently
+         switch the guard off for every user who asked for reduced motion, and a
+         guard that fails OPEN without saying so is worse than no guard. */
+      animation-timing-function: steps(5, jump-end);
+    }
+  }
+
   .item {
     display: flex;
     flex-direction: column;
@@ -256,7 +344,7 @@
     margin: var(--list-item-center-text-margin);
     border: var(--list-item-center-text-border);
     cursor: var(--list-item-center-text-cursor, pointer);
-    font-family: var(--list-item-center-text-font-family);
+    font-family: var(--list-item-center-text-font-family, inherit);
   }
 
   .center-content {
@@ -309,11 +397,29 @@
     margin: var(--list-item-right-content-text-margin, 0px);
     border: var(--list-item-right-content-text-border);
     cursor: var(--list-item-right-content-text-cursor, pointer);
-    font-family: var(--list-item-right-content-text-font-family);
+    font-family: var(--list-item-right-content-text-font-family, inherit);
     justify-content: var(--list-item-right-content-text-justify-content);
   }
 
   .prevent-focus:focus {
     outline: none;
   }
+  /* The loader is not the only motion in this file, and this block sits at the
+     END on purpose: `.item` is declared after the guard above, so an override
+     placed there would lose the same-specificity tie on source order -- the
+     cascade trap BrandLoader's own guard had to account for.
+     `--image-transition` is not a transition on this element at all; it is a
+     custom property handed DOWN to the Img child, and a custom property is the
+     only thing that crosses that boundary. Setting `transition: none` here would
+     never reach the image, so the property itself is neutralised. */
+  @media (prefers-reduced-motion: reduce) {
+    .item {
+      transition: none;
+    }
+
+    .left-content,
+    .right-img-wrapper {
+      --image-transition: none;
+    }
+  }
 </style>

package/dist/Loader/Loader.svelte

@@ -44,8 +44,13 @@
       var(--loader-foreground-end) 42%
     );
     position: relative;
-    -webkit-animation: load3 1.4s infinite linear;
-    animation: load3 1.4s infinite linear;
+    /* --loader-spin-* rather than --loader-animation-* — GridItem already reads an
+       unrelated --loader-animation-duration for its own clipper animation (a
+       pre-existing, differently-scoped name this file must not collide with). */
+    -webkit-animation: load3 var(--loader-spin-duration, var(--motion-duration, 1.4s))
+      var(--loader-spin-easing, var(--motion-easing, linear)) infinite;
+    animation: load3 var(--loader-spin-duration, var(--motion-duration, 1.4s))
+      var(--loader-spin-easing, var(--motion-easing, linear)) infinite;
     -webkit-transform: translateZ(0);
     -ms-transform: translateZ(0);
     transform: translateZ(0);
@@ -91,4 +96,19 @@
       transform: rotate(360deg);
     }
   }
+  /* An indefinite animation is the case this preference exists for: it never
+     ends, so a user who asked the OS to minimise motion gets a permanent loop.
+     The animation stops, but the element must still read as "busy" -- a guard
+     that leaves nothing on screen, or leaves a frame that means something else,
+     is worse than the motion it removed. This block lives in the component's own
+     <style> because that is the only stylesheet that reaches inside the shadow
+     root a custom-element consumer gets. */
+  @media (prefers-reduced-motion: reduce) {
+    .loader,
+    .loader:before,
+    .loader:after {
+      -webkit-animation: none;
+      animation: none;
+    }
+  }
 </style>

package/dist/LoadingDots/LoadingDots.svelte

@@ -70,4 +70,25 @@
       transform: scale(1);
     }
   }
+  /* An indefinite animation is the case this preference exists for: it never
+     ends, so a user who asked the OS to minimise motion gets a permanent loop.
+     The animation stops, but the element must still read as "busy" -- a guard
+     that leaves nothing on screen, or leaves a frame that means something else,
+     is worse than the motion it removed. This block lives in the component's own
+     <style> because that is the only stylesheet that reaches inside the shadow
+     root a custom-element consumer gets. */
+  @media (prefers-reduced-motion: reduce) {
+    /* `.dot.pulse` further down sets `animation-name`, and it is both more
+       specific and later, so a lone `.dot` rule here loses to it and the pulse
+       variant keeps animating. Matching its specificity is what makes the guard
+       apply to both variants. */
+    .dot,
+    .dot.pulse {
+      /* The rest frame of both keyframe sets is already the visible one --
+         translateY(0) at full opacity -- so stopping leaves the three dots
+         legible rather than collapsed or invisible. */
+      animation: none;
+      transform: none;
+    }
+  }
 </style>

package/dist/MediaUpload/MediaUpload.svelte

@@ -322,7 +322,7 @@
   .counter {
     font-size: var(--media-upload-counter-font-size, 12px);
     font-weight: var(--media-upload-counter-font-weight, 500);
-    color: var(--media-upload-counter-color, #8a8f98);
+    color: var(--media-upload-counter-color, #5a5a5a);
     font-variant-numeric: tabular-nums;
   }
 
@@ -475,7 +475,7 @@
     text-align: center;
     background-color: var(--media-upload-add-background-color, #fafafa);
     border: var(--media-upload-add-border, 1.5px dashed #c8ccd2);
-    color: var(--media-upload-add-color, #6b7280);
+    color: var(--media-upload-add-color, #4b5563);
     cursor: pointer;
     transition: var(
       --media-upload-add-transition,
@@ -517,7 +517,7 @@
 
   .drop-hint {
     font-size: var(--media-upload-add-hint-font-size, 10px);
-    color: var(--media-upload-add-hint-color, #9aa0a8);
+    color: var(--media-upload-add-hint-color, #4b5563);
   }
 
   .error {
@@ -525,4 +525,14 @@
     color: var(--media-upload-error-color, #e0334b);
     margin: var(--media-upload-error-margin, 8px 0 0 0);
   }
+
+  /* `--media-upload-item-transition` defaults to a box-shadow AND transform lift
+     on hover. The shadow alone would be fine; the transform is movement, and a
+     consumer overriding the token is most likely adding more of it. Dropping the
+     whole declaration is right here because every end state is a resting state. */
+  @media (prefers-reduced-motion: reduce) {
+    .media-item {
+      transition: none;
+    }
+  }
 </style>

package/dist/Menu/Menu.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { tick, onMount } from 'svelte';
+  import { tick, onDestroy } from 'svelte';
   import { SvelteMap } from 'svelte/reactivity';
   import Img from '../Img/Img.svelte';
   import { computeMenuDropdownPosition } from './dropdownPosition';
+  import { eventHitsInside, registerDismissible } from '../_interaction/dismissal';
   import type { MenuProperties, MenuItem, MenuPlacement } from './properties';
 
   let {
@@ -110,15 +111,30 @@
   });
 
   /**
-   * Svelte action: relocates the dropdown to document.body when usePortal is set,
+   * Where a portalled node is allowed to land. Svelte scopes a custom element's
+   * CSS to its shadow root, so `document.body` is the one place the panel must
+   * never go from inside `<sui-menu>`: it keeps its `svelte-*` scoping class and
+   * loses every rule behind it, plus the host's custom properties. Measured in
+   * Chromium -- position fell back to `static`, background to transparent,
+   * border and shadow to none, so the items rendered as bare text over the page.
+   * Its own root holds that stylesheet and still sits above every overflow/
+   * scroll ancestor between the two.
+   */
+  const portalTarget = (node: Node): Node => {
+    const root = node.getRootNode();
+    return root instanceof ShadowRoot ? root : document.body;
+  };
+
+  /**
+   * Svelte action: relocates the dropdown out to its root when usePortal is set,
    * so a position:fixed panel is never clipped by an overflow/scroll ancestor
    * (e.g. a table cell). No-op otherwise; `use:` actions never run during SSR.
    */
-  const portalToBody = (node: HTMLElement) => {
+  const portalToRoot = (node: HTMLElement) => {
     if (!usePortal) {
       return;
     }
-    document.body.appendChild(node);
+    portalTarget(node).appendChild(node);
     return { destroy: () => node.remove() };
   };
 
@@ -315,11 +331,6 @@
         }
         break;
       }
-      case 'Escape': {
-        event.preventDefault();
-        close();
-        break;
-      }
       case 'Tab': {
         close();
         break;
@@ -352,29 +363,45 @@
     }
   }
 
-  function handleClickOutside(event: Event) {
-    // A portaled panel lives outside menuContainerEl, so a click on a separator
+  function handleOutsidePress(event: Event) {
+    // A portaled panel lives outside menuContainerEl, so a press on a separator
     // or padding inside it is not contained — treat the panel node as "inside"
-    // too, matching the in-flow behaviour of not closing on such clicks.
-    if (
-      open &&
-      event.target instanceof Node &&
-      menuContainerEl !== null &&
-      !menuContainerEl.contains(event.target) &&
-      !(menuListEl !== null && menuListEl.contains(event.target))
-    ) {
-      close();
+    // too, matching the in-flow behaviour of not closing on such presses. The
+    // module has already established the press is outside menuContainerEl
+    // (that's `element` below) before calling this at all, so only the portal
+    // case needs a second check here.
+    if (eventHitsInside(menuListEl, event)) {
+      return;
     }
+    close();
   }
 
-  onMount(() => {
-    document.addEventListener('click', handleClickOutside);
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-      if (typeaheadTimer !== null) {
-        clearTimeout(typeaheadTimer);
-      }
+  /**
+   * Registers this dropdown as the topmost dismissible layer for exactly the
+   * span it exists (the `{#if open}` block below) and releases it again on
+   * teardown — including when the component unmounts while still open, so a
+   * stale layer never survives to swallow a later Escape meant for whatever
+   * opens next. Escape and outside-press used to be answered here directly
+   * (a document click listener added in onMount, and an Escape case in
+   * handleMenuKeydown); routed through the shared module instead so only the
+   * topmost open surface — this menu, or a Modal/Sheet/another Menu opened on
+   * top of it — answers either.
+   */
+  function dismissalAction(_node: HTMLDivElement) {
+    const release = registerDismissible({
+      element: () => menuContainerEl,
+      onEscape: close,
+      onOutside: handleOutsidePress
+    });
+    return {
+      destroy: release
     };
+  }
+
+  onDestroy(() => {
+    if (typeaheadTimer !== null) {
+      clearTimeout(typeaheadTimer);
+    }
   });
 </script>
 
@@ -438,7 +465,8 @@
       tabindex="-1"
       style={portalStyle}
       onkeydown={handleMenuKeydown}
-      use:portalToBody
+      use:portalToRoot
+      use:dismissalAction
     >
       {#each items as item (item.value)}
         {#if item.separator === true}

package/dist/Modal/Modal.svelte

@@ -4,7 +4,8 @@
   import ModalAnimation from '../Animations/ModalAnimation.svelte';
   import OverlayAnimation from '../Animations/OverlayAnimation.svelte';
   import { createDebouncer, lockBodyScroll, unlockBodyScroll } from '../utils';
-  import { focusEntryPoint, focusTrapTabTarget } from './focus-trap';
+  import { focusEntryPoint, focusTrapTabTarget, getActiveElement } from '../_interaction/focus';
+  import { registerDismissible } from '../_interaction/dismissal';
   import Button from '../Button/Button.svelte';
   import Img from '../Img/Img.svelte';
 
@@ -68,17 +69,35 @@
   // resetting the timer and breaking debounce correctness.
   const debounce = createDebouncer(debounceTime);
 
+  /**
+   * Where a portalled node is allowed to land. Svelte scopes a custom element's
+   * CSS to its shadow root, so `document.body` is the one place the overlay must
+   * never go from inside `<sui-modal>`: it keeps its `svelte-*` scoping class and
+   * loses every rule behind it, plus the host's custom properties. Measured in
+   * Chromium -- position fell back to `static`, background to transparent, so the
+   * dialog stopped being a dialog and became a block of text in the page flow.
+   * Its own root holds that stylesheet and still escapes every clipping and
+   * stacking ancestor between the two.
+   */
+  const portalTarget = (node: Node): Node => {
+    const root = node.getRootNode();
+    return root instanceof ShadowRoot ? root : document.body;
+  };
+
   // Fix [minor]: portalAction with null guard + update hook so usePortal toggles work post-mount.
   const portalAction = (node: HTMLElement, params: { usePortal: boolean }) => {
     if (!params.usePortal || typeof document === 'undefined' || !document.body) {
       return;
     }
-    const target = document.body;
+    // Resolved once, while the node is still in the tree it was rendered into --
+    // after the move its own root is the destination, so re-reading it would only
+    // ever answer with wherever it already is.
+    const target = portalTarget(node);
     target.appendChild(node);
     return {
       update(updatedParams: { usePortal: boolean }) {
-        if (updatedParams.usePortal && !node.parentElement?.isSameNode(document.body)) {
-          document.body.appendChild(node);
+        if (updatedParams.usePortal && node.parentNode !== target) {
+          target.appendChild(node);
         }
       },
       destroy() {
@@ -87,23 +106,6 @@
     };
   };
 
-  // Resolves the real focused element regardless of whether modalContent sits
-  // in the light DOM or inside Modal.wc.svelte's open shadow root.
-  // document.activeElement stops at a shadow boundary and returns the shadow
-  // host itself, never the element actually focused inside it -- getRootNode()
-  // returns that shadow root directly when modalContent is shadow-hosted, and
-  // the owner Document otherwise.
-  const getActiveElement = (): Element | null => {
-    if (modalContent === null) {
-      return null;
-    }
-    const root = modalContent.getRootNode();
-    if (root instanceof Document || root instanceof ShadowRoot) {
-      return root.activeElement;
-    }
-    return null;
-  };
-
   const handlePopstate = (): void => {
     backPressed = true;
     onclose?.();
@@ -135,18 +137,17 @@
     }
   };
 
+  // Escape itself is no longer decided here -- see handleEscape and the
+  // registerDismissible call in onMount below. This still runs on every
+  // keydown (Escape included) purely to forward the onkeydown prop and to
+  // run the Tab trap; it must never re-decide who Escape belongs to.
   const handleKeyDown = (event: KeyboardEvent): void => {
     onkeydown?.(event);
     const key = event?.key;
-    if (key === 'Escape') {
-      onoverlayclick?.();
-      ondismiss?.();
-      return;
-    }
     if (key === 'Tab') {
       const target = focusTrapTabTarget({
         container: modalContent,
-        activeElement: getActiveElement(),
+        activeElement: getActiveElement(modalContent),
         shiftKey: event.shiftKey
       });
       if (target !== null) {
@@ -156,14 +157,24 @@
     }
   };
 
+  // What the shared dismissal module calls when this modal is the topmost
+  // dismissible layer and Escape is pressed -- same callbacks the old
+  // Escape branch in handleKeyDown used to invoke directly, just gated on
+  // ownership now instead of firing for every open modal unconditionally.
+  const handleEscape = (): void => {
+    onoverlayclick?.();
+    ondismiss?.();
+  };
+
   // The overlay's own Enter/Space activation, additional to the shared
-  // handleKeyDown (Escape/Tab/onkeydown-prop) that svelte:window already
-  // delivers here via bubbling -- this handler must not also call
-  // handleKeyDown itself, or every keydown on/under the overlay would run it
-  // twice (once from this direct call, once from the window listener seeing
-  // the same event bubble past it), double-firing onkeydown and, on Escape,
-  // the dismiss callbacks. Enter/Space activation is scoped to this handler,
-  // not folded into handleKeyDown itself, because handleKeyDown also runs
+  // handleKeyDown (Tab/onkeydown-prop -- Escape is the dismissal module's,
+  // via handleEscape) that svelte:window already delivers here via
+  // bubbling -- this handler must not also call handleKeyDown itself, or
+  // every keydown on/under the overlay would run it twice (once from this
+  // direct call, once from the window listener seeing the same event bubble
+  // past it), double-firing onkeydown and re-running the Tab trap. Enter/Space
+  // activation is scoped to this handler, not folded into handleKeyDown itself,
+  // because handleKeyDown also runs
   // from the window listener for a keypress anywhere in the modal (e.g. an
   // input field) -- it must not treat every Enter/Space in the modal as an
   // overlay dismissal. This handler is bound to the overlay div, so a keydown
@@ -202,9 +213,30 @@
     }
   };
 
+  // What THIS instance acquired, rather than what the prop says at teardown. The
+  // lock is reference counted and shared with Sheet and CommandMenu, so reading
+  // `lockScroll` again in onDestroy releases the wrong number of holds whenever the
+  // prop changed while the modal was open: turned off, the count never comes back
+  // down and the page stays frozen; turned on, this modal releases a hold another
+  // component is still relying on. Release exactly what was taken.
+  let heldScrollLock = false;
+
+  // Set once in onMount, cleared once in onDestroy -- registerDismissible's
+  // own release function already tolerates a repeat call, but this still
+  // guards against calling it twice from here (see the "release exactly
+  // once" comment on unlockBodyScroll's own bookkeeping above for why that
+  // matters generally: a stale layer left registered after unmount would
+  // swallow every later Escape in the app, and would never come back).
+  let releaseDismissible: (() => void) | null = null;
+
   onMount(() => {
+    releaseDismissible = registerDismissible({
+      element: () => modalContent,
+      onEscape: handleEscape
+    });
     if (lockScroll) {
       lockBodyScroll();
+      heldScrollLock = true;
     }
     if (typeof autoDismissAfter === 'number') {
       dismissTimer = setTimeout(() => onclose?.(), autoDismissAfter);
@@ -221,19 +253,22 @@
       // moving focus in, so onDestroy can put it back. Shadow-aware for the
       // same reason the Tab trap is: inside Modal.wc.svelte's open shadow
       // root, document.activeElement would return the shadow host instead.
-      const active = getActiveElement();
+      const active = getActiveElement(modalContent);
       previouslyFocusedElement = active instanceof HTMLElement ? active : null;
       focusEntryPoint(modalContent);
     });
   });
 
   onDestroy(() => {
+    releaseDismissible?.();
+    releaseDismissible = null;
     if (dismissTimer !== null) {
       clearTimeout(dismissTimer);
     }
     if (typeof window !== 'undefined') {
-      if (lockScroll) {
+      if (heldScrollLock) {
         unlockBodyScroll();
+        heldScrollLock = false;
       }
       if (supportHardwareBackPress) {
         if (!backPressed) {
@@ -411,9 +446,9 @@
     overflow: var(--modal-content-overflow, auto);
     border-top: var(--modal-content-border-top);
     /* tabindex="-1" makes this the focus-trap's fallback target when the modal
-       has no focusable content of its own (see focus-trap.ts); it is never in
-       the Tab order itself, so it needs no visible focus ring the way a real
-       focusable element would. Matches Sheet's sheet-panel. */
+       has no focusable content of its own (see _interaction/focus.ts); it is
+       never in the Tab order itself, so it needs no visible focus ring the way
+       a real focusable element would. Matches Sheet's sheet-panel. */
     outline: none;
     /* Viewport containment for every size class: only .fit-content used to carry
        a max-height, so a size whose height var is overridden to fit-content (or
@@ -584,9 +619,9 @@
     align-items: center;
     flex: 1;
     font-size: var(--header-text-size, 16px);
-    font-weight: var(--modal-header-text-weight);
-    line-height: var(--modal-header-text-line-height);
-    letter-spacing: var(--modal-header-text-letter-spacing);
+    font-weight: var(--modal-header-text-weight, inherit);
+    line-height: var(--modal-header-text-line-height, inherit);
+    letter-spacing: var(--modal-header-text-letter-spacing, inherit);
   }
 
   /* The header images render through the Img component (inline svg or img), so