@juspay/svelte-ui-components 4.52.1 → 4.53.1

package/dist/MediaPlayer/MediaPlayer.svelte

@@ -17,6 +17,7 @@
     src,
     type,
     alt = '',
+    ariaLabel = 'Video player',
     autoplay = true,
     loop = false,
     controls = false,
@@ -212,13 +213,6 @@
     onpause?.(event);
   }
 
-  function handleVideoKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      togglePlayback();
-    }
-  }
-
   function handleTimeUpdate(): void {
     if (videoPlayer === null) {
       return;
@@ -390,6 +384,7 @@
       bind:muted
       {src}
       class="media"
+      aria-label={ariaLabel}
       {controls}
       {autoplay}
       {loop}
@@ -399,11 +394,6 @@
       onpause={handlePause}
       ontimeupdate={handleTimeUpdate}
       onloadedmetadata={handleLoadedMetadata}
-      onclick={controls ? null : togglePlayback}
-      onkeydown={controls ? null : handleVideoKeydown}
-      role={controls ? null : 'button'}
-      tabindex={controls ? null : 0}
-      aria-label={controls ? null : playing ? 'Pause video' : 'Play video'}
     >
       {#if hasCaptions}
         <track
@@ -417,6 +407,14 @@
     </video>
 
     {#if !controls}
+      <!-- A video cannot carry role="button". The full-surface native button
+           preserves pointer/keyboard playback without nesting the other controls. -->
+      <button
+        type="button"
+        class="media-surface-action"
+        aria-label={playing ? 'Pause video' : 'Play video'}
+        onclick={togglePlayback}
+      ></button>
       <div class="overlay">
         <div class="center-controls">
           <div class="control center-control">
@@ -571,6 +569,23 @@
     --image-margin: 0px;
   }
 
+  .media-surface-action {
+    position: absolute;
+    inset: 0;
+    padding: 0;
+    border: 0;
+    border-radius: inherit;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .media-surface-action:focus-visible {
+    /* Keep both colors inside the clipping container and visible over imagery. */
+    outline: var(--media-player-focus-outline, 2px solid #ffffff);
+    outline-offset: var(--media-player-focus-outline-offset, -2px);
+    box-shadow: var(--media-player-focus-box-shadow, inset 0 0 0 4px #000000);
+  }
+
   .overlay {
     /* Decorative overlay space leaves the native video pointer route operative. */
     pointer-events: none;
@@ -601,7 +616,7 @@
      reachable for keyboard users too -- :hover alone left them visibility:hidden (and
      so out of the tab order) for anyone not using a mouse. */
   .media-player:hover .overlay,
-  .overlay:focus-within {
+  .media-player:focus-within .overlay {
     background-color: var(--media-player-overlay-hover-color, #0000004d);
     --center-controls-visibility: visible;
     --bottom-controls-visibility: visible;

package/dist/MediaPlayer/properties.d.ts

@@ -7,6 +7,8 @@ export type MandatoryMediaPlayerProperties = {
 };
 export type OptionalMediaPlayerProperties = {
     alt?: string;
+    /** Accessible name for the video. Image naming uses alt. Defaults to "Video player". */
+    ariaLabel?: string;
     fallback?: string;
     autoplay?: boolean;
     loop?: boolean;

package/dist/Modal/Modal.svelte

@@ -10,6 +10,7 @@
   import Img from '../Img/Img.svelte';
 
   let overlayDiv: HTMLDivElement | null = $state(null);
+  let overlayButton: HTMLButtonElement | null = $state(null);
   let modalContent: HTMLDivElement | null = $state(null);
   let backPressed = $state(false);
   // Captured in onMount right before focus moves in, restored in onDestroy.
@@ -54,12 +55,8 @@
     overlayAriaLabel
   }: ModalProperties = $props();
 
-  // The overlay only takes role="button" and becomes keyboard-reachable when a
-  // click on it would actually do something. Without either handler, clicking
-  // or activating it is already a no-op (see handleOverlayClick's guard) --
-  // announcing it as a focusable "button" in that case is worse for assistive
-  // tech than leaving it unannounced, same reasoning already applied to the
-  // header images below.
+  // A dismissible backdrop has its own native button, beside the content panel.
+  // It must never make the whole panel an interactive descendant of a button.
   const overlayDismissible = $derived(
     typeof onoverlayclick === 'function' || typeof ondismiss === 'function'
   );
@@ -142,7 +139,7 @@
   };
 
   const handleOverlayClick = (event: MouseEvent): void => {
-    if (event.target === overlayDiv) {
+    if (event.target === overlayDiv || event.target === overlayButton) {
       debounce(() => {
         onoverlayclick?.();
         ondismiss?.();
@@ -185,37 +182,6 @@
     });
   };
 
-  // The overlay's own Enter/Space activation, additional to the shared
-  // 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
-  // on any focusable descendant (the back button, a footer button, an input
-  // field) bubbles up and reaches it too -- the target check below is what
-  // actually stops that bubbled Enter/Space from being read as an activation
-  // of the overlay itself, mirroring the guard handleOverlayClick already has
-  // for the click case.
-  const handleOverlayKeyDown = (event: KeyboardEvent): void => {
-    if (
-      (event.key === 'Enter' || event.key === ' ') &&
-      overlayDismissible &&
-      event.target === overlayDiv
-    ) {
-      event.preventDefault();
-      debounce(() => {
-        onoverlayclick?.();
-        ondismiss?.();
-      });
-    }
-  };
-
   // Fix [major]: role=button image divs need Enter/Space handlers for WCAG 2.1 SC 2.1.1.
   // Keyboard activation (Enter/Space) invokes the same prop callbacks as click.
   const handleLeftImageKeyDown = (event: KeyboardEvent): void => {
@@ -307,7 +273,8 @@
 
 {#if typeof content === 'function'}
   <OverlayAnimation fadeIn={overlayFadeIn}>
-    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <!-- Native backdrop activation bubbles here; only the backdrop target dismisses. -->
+    <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
     <div
       bind:this={overlayDiv}
       use:portalAction={{ usePortal }}
@@ -316,13 +283,18 @@
         ? `--modal-overlay-backdrop-filter: ${overlayBackdropFilter};`
         : null}
       onclick={handleOverlayClick}
-      onkeydown={handleOverlayKeyDown}
-      role={overlayDismissible ? 'button' : null}
-      tabindex={overlayDismissible ? 0 : null}
-      aria-label={overlayAriaLabel ?? null}
       data-pw={testId}
       testID={testId}
     >
+      {#if overlayDismissible}
+        <button
+          bind:this={overlayButton}
+          type="button"
+          class="modal-overlay-action"
+          aria-label={overlayAriaLabel ?? 'Dismiss modal'}
+          tabindex={role === 'dialog' || role === 'alertdialog' ? -1 : 0}
+        ></button>
+      {/if}
       <ModalAnimation enable={enableTransition} {align} {transitionType} {entryAnimation}>
         <div
           bind:this={modalContent}
@@ -437,6 +409,21 @@
     margin: var(--modal-margin);
   }
 
+  .modal-overlay-action {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .modal-overlay-action:focus-visible {
+    outline: var(--modal-overlay-focus-outline, 2px solid #2563eb);
+    outline-offset: var(--modal-overlay-focus-outline-offset, -2px);
+  }
+
   .overlay-active {
     /* Prefer the modal-specific token; fall back to the legacy generic
        --background-color (kept for backward compatibility), then the default.

package/dist/Modal/properties.d.ts

@@ -58,12 +58,13 @@ export type OptionalModalProperties = {
     /** Accessible name for the left header image's role="button" wrapper (e.g. a back control). Rendered as aria-label. */
     leftImageAriaLabel?: string;
     /**
-     * Accessible name for the overlay's `role="button"` wrapper, rendered as
+     * Accessible name for the independent native backdrop button, rendered as
      * `aria-label` -- same pattern as `leftImageAriaLabel` and
      * `header.buttonAriaLabel`. Only meaningful when the overlay is dismissible
      * (an `onoverlayclick` or `ondismiss` handler is supplied), which is the
-     * only state where the overlay is announced as a focusable "button" at all.
-     * Default: unset (no accessible name).
+     * only state where a backdrop action exists. Named dialogs keep that action
+     * outside their Tab cycle; generic panels retain Enter/Space activation.
+     * Default: "Dismiss modal".
      */
     overlayAriaLabel?: string;
     testId?: string;
@@ -107,7 +108,7 @@ export type OptionalModalProperties = {
      * ARIA role for the modal content panel. Default: unset -- the panel
      * renders no `role` and no `aria-modal` at all, byte-for-byte matching
      * behavior prior to this prop's introduction, so an existing consumer who
-     * never touches `role` sees no DOM/ARIA change. Set it explicitly (e.g.
+     * never touches `role` sees no panel role/aria-modal change. Set it explicitly (e.g.
      * `'dialog'` or `'alertdialog'`) to opt in: the panel then also carries
      * `aria-modal="true"`, since a role without aria-modal is not a complete
      * dialog announcement.

package/dist/Pagination/Pagination.svelte

@@ -9,6 +9,7 @@
     testId,
     onchange,
     classes,
+    ariaLabel = 'Pagination',
     hasMore = false,
     prevButtonTestId,
     nextButtonTestId,
@@ -69,6 +70,7 @@
 <nav
   class="pagination {classes ?? ''}"
   class:disabled
+  aria-label={ariaLabel}
   data-pw={typeof testId === 'string' && testId.length > 0 ? testId : null}
   testID={typeof testId === 'string' && testId.length > 0 ? testId : null}
 >

package/dist/Pagination/properties.d.ts

@@ -8,6 +8,8 @@ export type OptionalPaginationProperties = {
     disabled?: boolean;
     testId?: string;
     classes?: string;
+    /** Name of the page-navigation landmark. Default: `Pagination`. */
+    ariaLabel?: string;
     /**
      * Cursor-pagination hint. When `true`, the next button stays enabled even
      * when `currentPage >= totalPages` — use this when the total page count is

package/dist/Pill/Pill.svelte

@@ -53,15 +53,25 @@
   let interactive = $derived(typeof onclick === 'function');
 
   // A <button> may not contain another button, and a dismissible pill is inherently two
-  // controls. Rather than emit invalid markup, that combination degrades to the div root —
-  // the same graceful-degradation rule Card applies to `as="a"` with no `href`.
+  // controls. A neutral div holds independent primary and dismiss buttons when
+  // both actions are present, preserving native activation for each action.
   const isButtonRoot = $derived(as === 'button' && !dismissible);
   const rootTag = $derived(isButtonRoot ? 'button' : 'div');
+  const hasSeparateAction = $derived(interactive && dismissible);
+  const rootAttrs = $derived(
+    hasSeparateAction
+      ? Object.fromEntries(
+          Object.entries(attrs ?? {}).filter(
+            ([key]) => !['aria-label', 'aria-labelledby', 'aria-describedby'].includes(key)
+          )
+        )
+      : attrs
+  );
 
   // The synthetic shim exists only because a <div> has no button semantics. A real button
   // already has them, and adding role/tabindex/keydown on top would duplicate the platform's
   // own activation — Enter would fire the handler twice.
-  const needsInteractiveShim = $derived(interactive && !isButtonRoot);
+  const needsInteractiveShim = $derived(interactive && !isButtonRoot && !hasSeparateAction);
 
   // aria-expanded / aria-pressed / aria-disabled describe a control's state, so they are
   // meaningless on a plain label and are emitted only once the pill actually is one.
@@ -102,9 +112,10 @@
 
 <svelte:element
   this={rootTag}
-  {...attrs ?? {}}
+  {...rootAttrs ?? {}}
   class="pill {pillToneClass(tone)} {classes ?? ''}"
   class:disabled
+  class:separate-action={hasSeparateAction}
   type={isButtonRoot ? 'button' : null}
   onclick={interactive ? handleClick : null}
   onkeydown={needsInteractiveShim ? handleKeydown : null}
@@ -117,6 +128,22 @@
   title={title ?? null}
   testID={typeof testId === 'string' ? testId : null}
 >
+  {#if hasSeparateAction}
+    <button
+      type="button"
+      class="pill-action"
+      {disabled}
+      aria-label={typeof attrs?.['aria-label'] === 'string' ? attrs['aria-label'] : text}
+      aria-labelledby={typeof attrs?.['aria-labelledby'] === 'string'
+        ? attrs['aria-labelledby']
+        : null}
+      aria-describedby={typeof attrs?.['aria-describedby'] === 'string'
+        ? attrs['aria-describedby']
+        : null}
+      aria-expanded={typeof ariaExpanded === 'boolean' ? ariaExpanded : null}
+      aria-pressed={typeof ariaPressed === 'boolean' ? ariaPressed : null}
+    ></button>
+  {/if}
   {#if typeof leadingIcon === 'function'}
     <span class="pill-leading-icon">{@render leadingIcon()}</span>
   {/if}
@@ -143,6 +170,35 @@
 </svelte:element>
 
 <style>
+  .separate-action {
+    position: relative;
+  }
+
+  .pill-action {
+    position: absolute;
+    inset: 0;
+    border: 0;
+    padding: 0;
+    border-radius: inherit;
+    background: transparent;
+    cursor: inherit;
+    outline: none;
+  }
+
+  .separate-action:has(> .pill-action:focus-visible) {
+    outline: var(--pill-focus-outline, 2px solid currentColor);
+    outline-offset: var(--pill-focus-outline-offset, 2px);
+  }
+
+  .separate-action > .pill-text,
+  .separate-action > .pill-leading-icon {
+    pointer-events: none;
+  }
+
+  .separate-action > .pill-dismiss {
+    position: relative;
+  }
+
   .pill {
     display: inline-flex;
     align-items: center;
@@ -176,6 +232,7 @@
     flex-shrink: var(--pill-flex-shrink);
   }
 
+  .pill.separate-action,
   .pill[role='button'],
   button.pill {
     cursor: var(--pill-cursor, pointer);

package/dist/Pill/properties.d.ts

@@ -66,11 +66,10 @@ export type MandatoryPillProperties = {
  */
 export type PillTone = 'accent' | 'ok' | 'warn' | 'danger' | 'muted';
 /**
- * Root element for the pill. `'div'` is the default and renders exactly as before —
- * non-interactive, or carrying the synthetic `role="button"`/`tabindex`/keydown shim when
- * an `onclick` is supplied. `'button'` renders a real `<button type="button">` instead, so
- * a chip-shaped control gets native focus, activation and announcement rather than an
- * imitation of them.
+ * Root element for a label or single-action pill. The default div is a label,
+ * or a keyboard-operable button role when onclick is supplied. A button root
+ * uses native activation. Interactive dismissible pills use a neutral container
+ * with independent native primary and dismiss buttons.
  */
 export type PillRootTag = 'div' | 'button';
 export type OptionalPillProperties = {
@@ -83,17 +82,10 @@ export type OptionalPillProperties = {
      */
     tone?: PillTone;
     /**
-     * Root element. Defaults to `'div'`, which renders exactly as before this prop existed.
-     *
-     * `'button'` gives a chip real control semantics — native keyboard activation, focus and
-     * announcement — instead of the `role="button"`/`tabindex`/keydown shim a `<div>` needs.
-     * Reach for it when the chip is a disclosure or a toggle (see `ariaExpanded` /
-     * `ariaPressed`), which a shimmed div cannot express correctly.
-     *
-     * One combination cannot be honoured: a `<button>` may not contain another button, and a
-     * `dismissible` pill is inherently two controls. `as="button"` together with
-     * `dismissible` therefore falls back to the `div` root and its shim rather than emitting
-     * invalid markup — the same rule `Card` applies to `as="a"` with no `href`.
+     * Root element for a label or single action. Defaults to 'div'; 'button' uses
+     * native keyboard activation and focus. Dismissible pills use a neutral div
+     * container. When onclick is supplied, that container holds independent native
+     * primary and dismiss buttons, including when as='button'.
      */
     as?: PillRootTag;
     /**

package/dist/Radio/Radio.svelte

@@ -102,6 +102,7 @@
 
 <style>
   .radio-container {
+    position: relative;
     display: var(--radio-container-display, inline-flex);
     align-items: var(--radio-container-align-items, center);
     gap: var(--radio-container-gap, 8px);
@@ -116,8 +117,11 @@
   .radio-input {
     position: absolute;
     opacity: 0;
-    width: 0;
-    height: 0;
+    width: var(--radio-size, 20px);
+    height: var(--radio-size, 20px);
+    inset-inline-start: 0;
+    top: 50%;
+    transform: translateY(-50%);
     margin: 0;
     pointer-events: none;
   }

package/dist/RatingGroup/RatingGroup.svelte

@@ -130,13 +130,23 @@
 
   let root: HTMLDivElement | null = $state(null);
 
-  // The hidden native input is tabindex="-1", so the browser's own "focus the invalid
-  // field" step would land on an element the user cannot see or reach. Focus the
-  // role="slider" element that carries the group's single tab stop instead -- the same
-  // pattern Checkbox.svelte uses for its own hidden control.
-  function handleInvalid(e: Event): void {
-    e.preventDefault();
-    root?.focus();
+  // The browser decides whether validation is interactive and which invalid
+  // field is first. Forward the carrier's actual focus to the visible slider;
+  // an invalid event alone must not move focus during checkValidity().
+  function handleNativeFocus(event: FocusEvent & { currentTarget: HTMLInputElement }): void {
+    const carrier = event.currentTarget;
+    // Let interactive validation finish before moving focus, so Firefox's
+    // native validation UI cannot swallow the user's next star click.
+    queueMicrotask(() => {
+      const carrierRoot = carrier.getRootNode();
+      if (
+        root?.isConnected &&
+        'activeElement' in carrierRoot &&
+        carrierRoot.activeElement === carrier
+      ) {
+        root.focus();
+      }
+    });
   }
 
   // A native number input can't distinguish "explicitly rated 0" from "never touched",
@@ -191,25 +201,27 @@
       {/if}
     </span>
   {/each}
-  <input
-    type="number"
-    class="native-input"
-    tabindex={-1}
-    aria-hidden="true"
-    min={0}
-    max={hasValidMax ? max : null}
-    step={allowHalf ? 0.5 : 1}
-    value={submittedValue === null ? '' : submittedValue}
-    {disabled}
-    {required}
-    name={typeof name === 'string' && submittedValue !== null ? name : null}
-    form={typeof form === 'string' ? form : null}
-    oninvalid={handleInvalid}
-    data-pw={typeof testId === 'string' ? `${testId}-native-input` : null}
-    testID={typeof testId === 'string' ? `${testId}-native-input` : null}
-  />
 </div>
 
+<!-- Native form participation remains outside the interactive accessibility owner. -->
+<input
+  type="number"
+  class="native-input"
+  tabindex={-1}
+  aria-hidden="true"
+  min={0}
+  max={hasValidMax ? max : null}
+  step={allowHalf ? 0.5 : 1}
+  value={submittedValue === null ? '' : submittedValue}
+  {disabled}
+  {required}
+  name={typeof name === 'string' && submittedValue !== null ? name : null}
+  form={typeof form === 'string' ? form : null}
+  onfocus={handleNativeFocus}
+  data-pw={typeof testId === 'string' ? `${testId}-native-input` : null}
+  testID={typeof testId === 'string' ? `${testId}-native-input` : null}
+/>
+
 <style>
   .rating-group {
     display: var(--rating-group-display, inline-flex);
@@ -285,8 +297,8 @@
   .native-input {
     position: absolute;
     opacity: 0;
-    width: 0;
-    height: 0;
+    width: 1px;
+    height: 1px;
     pointer-events: none;
   }
 </style>

package/dist/Select/Select.svelte

@@ -635,6 +635,14 @@
         }
         /* Outside the in-menu variant, Tab always means focus is leaving. */
         if (!searchInMenu) {
+          // Closing is rendered after this keydown. Firefox otherwise includes
+          // the still-present scrollable dropdown in native Tab navigation,
+          // then loses focus to body when that temporary target is removed.
+          // Exclude the closing panel immediately so native forward and backward
+          // navigation keep their real next stop, including across a shadow root.
+          if (dropdownEl !== null) {
+            dropdownEl.inert = true;
+          }
           close();
           break;
         }

package/dist/StatCard/StatCard.svelte

@@ -31,6 +31,12 @@
   }: StatCardProperties = $props();
 
   const isInteractive = $derived(typeof onclick === 'function');
+  let actionButton: HTMLButtonElement | null = $state(null);
+  const actionName = $derived(
+    [title, value, subtitle]
+      .filter((text) => typeof text === 'string' && text.length > 0)
+      .join(' ') || 'Open metric details'
+  );
 
   /**
    * Which ONE value on this card rolls.
@@ -154,21 +160,26 @@
     hasTitle || Boolean(checkbox) || typeof headerRight === 'function'
   );
 
-  const handleKeydown = (event: KeyboardEvent): void => {
-    if (event.key === 'Enter' || event.key === ' ') {
-      if (event.key === ' ') {
-        event.preventDefault();
-      }
-      if (event.currentTarget instanceof HTMLElement) {
-        event.currentTarget.click();
-      }
-    }
-  };
-
   const handleCheckboxChange = (checked: boolean): void => {
     oncheckboxchange?.(checked);
   };
 
+  const handleCardClick = (event: MouseEvent): void => {
+    const target = event.composedPath()[0];
+    const control =
+      target instanceof Element
+        ? target.closest(
+            'button, a[href], input, select, textarea, [role="button"], [role="checkbox"], [role="link"], [contenteditable="true"]'
+          )
+        : null;
+    // Snippet and slotted controls own their actions. Only this card's action
+    // button, or a click on its noninteractive body, delegates to onclick.
+    if (control !== null && control !== actionButton) {
+      return;
+    }
+    onclick?.(event);
+  };
+
   /**
    * Keep header checkbox interaction from bubbling to the card's click/keydown
    * handler — otherwise toggling the checkbox on an interactive card would also
@@ -179,18 +190,21 @@
   };
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- Card pointer activation delegates to the same native action button's handler.
+     Child controls remain siblings of that button and keep their own semantics. -->
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
 <div
   {@attach measurePrimary(valueSignature)}
   class="statcard {classes ?? ''}"
   class:statcard-interactive={isInteractive}
   data-pw={typeof testId === 'string' ? testId : null}
   testID={typeof testId === 'string' ? testId : null}
-  role={isInteractive ? 'button' : null}
-  tabindex={isInteractive ? 0 : null}
-  onclick={isInteractive ? onclick : null}
-  onkeydown={isInteractive ? handleKeydown : null}
+  onclick={isInteractive ? handleCardClick : null}
 >
+  {#if isInteractive}
+    <button bind:this={actionButton} type="button" class="statcard-action" aria-label={actionName}
+    ></button>
+  {/if}
   {#if hasHeaderContent}
     <div
       class="statcard-header"
@@ -465,14 +479,51 @@
   }
 
   .statcard-interactive {
+    position: relative;
     cursor: var(--statcard-cursor, pointer);
   }
 
-  .statcard-interactive:focus-visible {
+  .statcard-interactive:has(> .statcard-action:focus-visible) {
     outline: var(--statcard-focus-outline, 2px solid currentColor);
     outline-offset: var(--statcard-focus-outline-offset, 2px);
   }
 
+  .statcard-action {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    padding: 0;
+    border: 0;
+    border-radius: inherit;
+    background: transparent;
+    cursor: inherit;
+    outline: none;
+  }
+
+  .statcard-interactive > :not(.statcard-action) {
+    position: relative;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  /* Text clicks reach the card action; controls and tooltip triggers stay usable. */
+  .statcard-interactive
+    :global(
+      :is(
+        button,
+        input,
+        select,
+        textarea,
+        a,
+        slot,
+        [role='checkbox'],
+        [tabindex],
+        .tooltip-container
+      )
+    ) {
+    pointer-events: auto;
+  }
+
   .statcard-header {
     order: var(--statcard-header-order, 0);
     display: flex;