@juspay/svelte-ui-components 4.51.0 → 4.52.0

package/dist/LineChart/LineChart.svelte

@@ -8,6 +8,7 @@
   import type { ChartHighlightAPI } from '../_chart/highlight';
   import { onMount } from 'svelte';
   import ChartContainer from '../_chart/ChartContainer.svelte';
+  import LabelPlate from '../_chart/LabelPlate.svelte';
   import Axis from '../_chart/Axis.svelte';
   import ChartTooltip from '../_chart/ChartTooltip.svelte';
   import Legend from '../_chart/Legend.svelte';
@@ -19,16 +20,11 @@
   import { measureText } from '../_chart/measure';
   import { resolvePointLabels } from '../_chart/labels';
   import { formatSeriesAggregate } from '../_chart/aggregate';
+  import { defaultChartName, resolveChartName } from '../_chart/a11y';
   import type { LegendItem, Point, TooltipAnchor } from '../_chart/types';
   import { pointerPositionIn, dismissOnOutsidePointerDown } from '../_chart/interactions';
   import { SvelteSet } from 'svelte/reactivity';
 
-  // Per-instance ID for SVG gradient <linearGradient id> references. Initialised
-  // inside onMount so the value is only ever generated on the client — avoids an
-  // SSR hydration mismatch that would occur if Math.random() ran on both server
-  // and client and produced different strings.
-  let uid = $state('');
-
   // ── Props ──────────────────────────────────────────────────────
 
   let {
@@ -67,10 +63,21 @@
     onchartready,
     onpointclick,
     onpointhover,
+    ariaLabel,
+    ariaDescription,
     testId,
     classes
   }: LineChartProperties = $props();
 
+  // Per-instance id for the SVG <linearGradient id> references and the live
+  // status region. `$props.id()` is unique per component instance and identical
+  // on server and client, so two charts on one page never resolve each other's
+  // `url(#gradient)` and hydration never sees a different id than the server
+  // wrote. It replaces a Math.random() prefix that was only filled in at
+  // mount: until then every chart's gradient id collapsed to the same
+  // `line-grad--0`, and afterwards it was collision-prone by construction.
+  const instanceId = $props.id();
+
   // ── State ──────────────────────────────────────────────────────
 
   let containerEl: HTMLDivElement | null = $state(null);
@@ -120,8 +127,6 @@
   );
 
   onMount(() => {
-    uid = Math.random().toString(36).slice(2, 9);
-
     const api: ChartHighlightAPI = {
       type: 'line-chart',
       highlight: (index) => {
@@ -264,6 +269,29 @@
     }))
   );
 
+  // ── Chart-level accessible name ────────────────────────────────
+
+  // The drawing's own name: the consumer's `ariaLabel`, else one derived from
+  // what the chart plots (see `defaultChartName`).
+  let chartName = $derived(
+    resolveChartName(
+      ariaLabel,
+      defaultChartName('line', { yAxisLabel, seriesNames: series.map((s) => s.name) })
+    )
+  );
+
+  // Every finite point of a visible series is a focusable role="button" mark
+  // (the `.focus-target` circles below), so the drawing is interactive and must
+  // not be exposed as an image. With nothing to operate -- every series hidden
+  // through the legend, or no finite point -- it is a plain named image.
+  let hasMarks = $derived(
+    lines.some(
+      (line) =>
+        !line.hidden &&
+        line.points.some((point) => Number.isFinite(point.x) && Number.isFinite(point.y))
+    )
+  );
+
   // ── Cross-series alignment ──────────────────────────────
 
   // The ONE alignment contract for tooltip/hit-testing (and, via
@@ -400,7 +428,6 @@
   // ── Keyboard access & live status (family-wide contract; see
   //    docs/PieChart.md#keyboard-access) ─────────────────────────
 
-  const instanceId = $props.id();
   const statusId = `line-status-${instanceId}`;
 
   // "Active" datum for announcement purposes, in the SAME precedence order
@@ -434,7 +461,9 @@
     return null;
   });
 
-  let statusText = $derived.by(() => {
+  // What the active datum reads as, whatever drove it. `statusText` below is
+  // what the live region actually carries.
+  let activeStatusText = $derived.by(() => {
     const active = activeDatum;
     if (active === null) {
       return '';
@@ -465,6 +494,22 @@
       : `${name}: ${value}`;
   });
 
+  // A keyboard-focused mark is already spoken as its own accessible name when it
+  // takes focus. Where the region would only repeat that name verbatim (a single
+  // series, or a tooltip that is not shared) it adds nothing but a second
+  // announcement of the same point, so it stays empty. It still speaks whenever
+  // it adds something -- the other series at a shared x -- and for every path
+  // that has no focus event to announce it: pointer hover, `highlightedIndex`
+  // and the `ChartHighlightAPI`.
+  let statusText = $derived.by(() => {
+    const text = activeStatusText;
+    if (text === '' || focused === null) {
+      return text;
+    }
+    const entry = joinedByX.get(focused.x)?.values[focused.si];
+    return entry && text === focusAriaLabel(focused.si, entry.index, entry.point.x) ? '' : text;
+  });
+
   // ── Point labels ───────────────────────────────────────────────
 
   let pointLabelPlacements = $derived.by(() => {
@@ -479,7 +524,11 @@
         : resolvePointLabels({
             points: line.points,
             labels: series[si].data.map((d) => measureText(formatNumber(d.y), font)),
-            plot
+            plot,
+            // Leave room for the 6px keyboard target, its native focus outline
+            // and the label's padded plate. Firefox paints the outline above
+            // SVG siblings, so paint order alone cannot protect nearby text.
+            gap: 16
           })
     );
   });
@@ -754,7 +803,8 @@
   {:else}
     <!-- Mirrors the tooltip's own text for every activation path (pointer,
          keyboard focus, declarative highlightedIndex, imperative
-         ChartHighlightAPI) -- see statusText. -->
+         ChartHighlightAPI) -- except that a focused mark whose own accessible
+         name already says it is not repeated. See statusText. -->
     <div class="sr-only" role="status" aria-live="polite" id={statusId} data-pw="line-status">
       {statusText}
     </div>
@@ -774,13 +824,16 @@
         {aspectRatio}
         {minHeight}
         {maxHeight}
+        ariaLabel={chartName}
+        {ariaDescription}
+        interactive={hasMarks}
       >
         {#if gradientFill || showArea}
           <defs>
             {#each lines as line, si (si)}
               {#if gradientFill}
                 <linearGradient
-                  id="line-grad-{uid}-{si}"
+                  id="line-grad-{instanceId}-{si}"
                   x1="0"
                   y1="0"
                   x2="0"
@@ -804,7 +857,7 @@
               {/if}
               {#if showArea}
                 <linearGradient
-                  id="line-area-{uid}-{si}"
+                  id="line-area-{instanceId}-{si}"
                   x1="0"
                   y1="0"
                   x2="0"
@@ -874,14 +927,14 @@
                   class="line-area-fill"
                   class:dimmed={isLineDimmed(si)}
                   d={line.areaD}
-                  fill="url(#line-area-{uid}-{si})"
+                  fill="url(#line-area-{instanceId}-{si})"
                 />
               {:else if gradientFill}
                 <path
                   class="line-area-fill"
                   class:dimmed={pointerOrFocused !== null && pointerOrFocused.si !== si}
                   d={line.areaD}
-                  fill="url(#line-grad-{uid}-{si})"
+                  fill="url(#line-grad-{instanceId}-{si})"
                 />
               {/if}
               <path
@@ -893,21 +946,6 @@
                 stroke-dasharray={line.dash}
                 fill="none"
               />
-              {#if showValues && pointLabelPlacements[si]}
-                {#each line.points as _point, pi (pi)}
-                  {@const pl = pointLabelPlacements[si][pi]}
-                  {#if pl?.visible && Number.isFinite(pl.x) && Number.isFinite(pl.y)}
-                    <text
-                      class="point-value"
-                      x={pl.x}
-                      y={pl.y}
-                      text-anchor="middle"
-                      dominant-baseline={pl.dominantBaseline}
-                      >{formatNumber(series[si].data[pi].y)}</text
-                    >
-                  {/if}
-                {/each}
-              {/if}
             {/if}
           {/each}
 
@@ -974,7 +1012,15 @@
                        `pointer-events: none` does not block this: it suppresses
                        hit-testing for real pointer input -- which is what keeps
                        mouse hover flowing to the overlay underneath -- while a
-                       dispatched click still fires a listener on the element. -->
+                       dispatched click still fires a listener on the element.
+
+                       No `aria-describedby` pointing at the status region. The
+                       region already announces what the name does not as it
+                       updates, so describing the point by it as well spoke the
+                       same text a second time; and because the region is
+                       shared, every UNFOCUSED point was "described" by whichever
+                       point was announced last. The point is spoken as its own
+                       name, and the region adds only what that name lacks. -->
                   <circle
                     class="focus-target"
                     cx={point.x}
@@ -983,7 +1029,6 @@
                     tabindex="0"
                     role="button"
                     aria-label={focusAriaLabel(si, pi, raw.x)}
-                    aria-describedby={statusId}
                     onfocus={() => handleMarkFocus(si, pi)}
                     onblur={handleBlur}
                     onkeydown={handleMarkKeydown}
@@ -1019,6 +1064,33 @@
             onpointerleave={handlePointerLeave}
             onclick={handleClick}
           />
+          <!-- Labels paint last so every glyph keeps its opaque backdrop across
+               line crossings, highlight markers and hover guides. -->
+          {#each lines as line, si (si)}
+            {#if !line.hidden}
+              {#if showValues && pointLabelPlacements[si]}
+                {#each line.points as _point, pi (pi)}
+                  {@const pl = pointLabelPlacements[si][pi]}
+                  {#if pl?.visible && Number.isFinite(pl.x) && Number.isFinite(pl.y)}
+                    <!-- Repeats the point's own accessible name, which is what
+                         assistive technology reads; exposing it again would announce
+                         every value twice. -->
+                    <LabelPlate>
+                      <text
+                        class="point-value"
+                        aria-hidden="true"
+                        x={pl.x}
+                        y={pl.y}
+                        text-anchor="middle"
+                        dominant-baseline={pl.dominantBaseline}
+                        >{formatNumber(series[si].data[pi].y)}</text
+                      >
+                    </LabelPlate>
+                  {/if}
+                {/each}
+              {/if}
+            {/if}
+          {/each}
         </g>
       </ChartContainer>
 

package/dist/LineChart/properties.d.ts

@@ -139,6 +139,18 @@ export type OptionalLineChartProperties = {
     hideLegendBelow?: number;
     /** Render the tooltip into document.body so scroll/overflow ancestors never clip it. */
     tooltipPortal?: boolean;
+    /**
+     * Accessible name of the chart (`aria-label` on its `<svg>`). Say what the chart
+     * shows, e.g. `"Monthly revenue, January to June"`. When omitted a name is
+     * derived from the chart's own data (`"{yAxisLabel} line chart"`, else the series names, else `"Line chart"`), so an unlabelled chart is still
+     * identifiable -- but a name written for the page is almost always better.
+     */
+    ariaLabel?: string;
+    /**
+     * Optional longer description (trend, range, the takeaway) announced after the
+     * name. Rendered as an SVG `<desc>` referenced by `aria-describedby`.
+     */
+    ariaDescription?: string;
     /** Value for the data-pw attribute on the chart container. */
     testId?: string;
     /** CSS class string applied to the top-level element. */

package/dist/MediaPlayer/MediaPlayer.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from 'svelte';
   import Button from '../Button/Button.svelte';
   import Img from '../Img/Img.svelte';
   import playSvg from '../assets/play.svg?raw';
@@ -7,6 +8,8 @@
   import muteSvg from '../assets/mute.svg?raw';
   import fullscreenSvg from '../assets/fullscreen.svg?raw';
   import exitFullscreenSvg from '../assets/exit-fullscreen.svg?raw';
+  import captionsSvg from '../assets/captions.svg?raw';
+  import captionsOnSvg from '../assets/captions-on.svg?raw';
   import Slider from '../Slider/Slider.svelte';
   import type { MediaPlayerProperties } from './properties';
 
@@ -27,6 +30,10 @@
     captionsSrc,
     captionsLabel,
     captionsSrcLang,
+    captionsButton = false,
+    captionsVisible = $bindable(false),
+    captionsIcon,
+    captionsOnIcon,
     seekBar = false,
     timeDisplay = false,
     fullscreenButton = false,
@@ -37,6 +44,7 @@
     onplay,
     onpause,
     onvolumechange,
+    oncaptionschange,
     onseek,
     ontimeupdate,
     onfullscreenchange,
@@ -118,6 +126,82 @@
     onvolumechange?.(muted);
   }
 
+  // The `<track>` is optional, so the element that owns the TextTrack is bound rather than
+  // looked up: it is null exactly when no captions were supplied.
+  let captionTrack: HTMLTrackElement | null = $state(null);
+  const hasCaptions = $derived(typeof captionsSrc === 'string' && captionsSrc.length > 0);
+
+  function toggleCaptions(): void {
+    captionsVisible = !captionsVisible;
+    oncaptionschange?.(captionsVisible);
+  }
+
+  /**
+   * The track -> `captionsVisible`. Under native `controls` the browser's own menu changes
+   * `mode` without going through this component, and a browser or OS preference for
+   * captions can turn a track on by itself; the list's `change` event is how either reaches
+   * the bound value (it fires for programmatic writes too, which land on the early return).
+   * `oncaptionschange` fires from here only for a change the component did not just make
+   * itself, so a host's own write is never echoed back as a viewer's choice.
+   *
+   * The one-time read at the top covers a track already `showing` before this listener is
+   * attached -- the event does not replay. It runs untracked: reading `captionsVisible`
+   * here would re-run this effect on every host write and flip a pending hide back to
+   * `true` before the effect below has applied it.
+   */
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    const textTrack = captionTrack?.track;
+    const trackList = videoPlayer?.textTracks;
+    if (!textTrack || !trackList) {
+      return;
+    }
+    // An arrow, not a declaration: only a `const` keeps the narrowing of `textTrack` above.
+    const mirrorTrackMode = (): void => {
+      const showing = textTrack.mode === 'showing';
+      if (showing === captionsVisible) {
+        return;
+      }
+      captionsVisible = showing;
+      oncaptionschange?.(showing);
+    };
+    untrack(() => {
+      if (textTrack.mode === 'showing') {
+        mirrorTrackMode();
+      }
+    });
+    trackList.addEventListener('change', mirrorTrackMode);
+    return () => trackList.removeEventListener('change', mirrorTrackMode);
+  });
+
+  /**
+   * `captionsVisible` -> the track. A `<track>` without `default` starts `disabled`, which
+   * is why the shipped example had captions that nothing could turn on. Writing `showing`
+   * is what makes the browser fetch the VTT and paint cues; `hidden` keeps the cues loaded
+   * but unpainted, so showing them again is instant.
+   *
+   * Declared AFTER the effect that mirrors the track into `captionsVisible`, deliberately:
+   * effects run in declaration order, and a track the browser already chose to show (an
+   * accessibility preference for captions) has to be adopted by that one first, or this one would
+   * read the default `false` and hide it.
+   *
+   * Skipped while the two already agree. That is what leaves a `disabled` track alone for
+   * a player nobody asked to show captions on, rather than rewriting it to `hidden` for no
+   * reader's benefit, and it stops this from fighting the `change` listener above.
+   */
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    const textTrack = captionTrack?.track;
+    if (!textTrack) {
+      return;
+    }
+    const wanted = captionsVisible;
+    if (wanted === (textTrack.mode === 'showing')) {
+      return;
+    }
+    textTrack.mode = wanted ? 'showing' : 'hidden';
+  });
+
   function handlePlay(event: Event): void {
     playing = true;
     onplay?.(event);
@@ -291,6 +375,16 @@
       <Img {src} {alt} {fallback} />
     </span>
   {:else}
+    <!--
+      The caption track is caller-supplied (`captionsSrc`) and rendered only when it is. The
+      compiler only counts a `<track>` that is a static, unconditional child of the
+      `<video>`, so this warning is a false positive for the conditional one below. The
+      alternative it pushes toward -- an always-present `<track>` with no `src` -- would put
+      an empty, non-functional entry in every player's native captions menu, which is
+      exactly what the optional contract exists to avoid. Scoped to this one element and
+      this one rule; nothing else in the file is silenced.
+    -->
+    <!-- svelte-ignore a11y_media_has_caption -->
     <video
       bind:this={videoPlayer}
       bind:muted
@@ -311,8 +405,9 @@
       tabindex={controls ? null : 0}
       aria-label={controls ? null : playing ? 'Pause video' : 'Play video'}
     >
-      {#if typeof captionsSrc === 'string' && captionsSrc.length > 0}
+      {#if hasCaptions}
         <track
+          bind:this={captionTrack}
           kind="captions"
           src={captionsSrc}
           label={typeof captionsLabel === 'string' ? captionsLabel : null}
@@ -379,6 +474,38 @@
               {/if}
             </Button>
           </div>
+          {#if captionsButton && hasCaptions}
+            <div
+              class="control bottom-control"
+              data-pw={typeof testId === 'string' ? `${testId}-captions` : null}
+            >
+              <!-- A native button rather than `Button`: the pressed state is the whole
+                   point of this control and `Button` has no `aria-pressed`. The name stays
+                   "Captions" and `aria-pressed` carries on/off, so a screen reader hears
+                   "Captions, toggle button, pressed" rather than a name that flips under it. -->
+              <button
+                type="button"
+                class="captions-toggle"
+                aria-label="Captions"
+                aria-pressed={captionsVisible}
+                onclick={toggleCaptions}
+              >
+                {#if captionsVisible}
+                  {#if typeof captionsOnIcon === 'function'}
+                    {@render captionsOnIcon()}
+                  {:else}
+                    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                    {@html captionsOnSvg}
+                  {/if}
+                {:else if typeof captionsIcon === 'function'}
+                  {@render captionsIcon()}
+                {:else}
+                  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                  {@html captionsSvg}
+                {/if}
+              </button>
+            </div>
+          {/if}
           {#if fullscreenButton}
             <div
               class="control bottom-control"
@@ -445,6 +572,8 @@
   }
 
   .overlay {
+    /* Decorative overlay space leaves the native video pointer route operative. */
+    pointer-events: none;
     position: absolute;
     inset: 0;
     display: flex;
@@ -471,13 +600,17 @@
   /* :focus-within alongside :hover so the overlay controls (play/pause, mute) are
      reachable for keyboard users too -- :hover alone left them visibility:hidden (and
      so out of the tab order) for anyone not using a mouse. */
-  .overlay:hover,
+  .media-player:hover .overlay,
   .overlay:focus-within {
     background-color: var(--media-player-overlay-hover-color, #0000004d);
     --center-controls-visibility: visible;
     --bottom-controls-visibility: visible;
   }
 
+  .control {
+    pointer-events: auto;
+  }
+
   .center-controls {
     display: flex;
     flex: 1;
@@ -491,6 +624,9 @@
     width: 100%;
     height: fit-content;
     justify-content: var(--media-player-bottom-controls-justify, flex-end);
+    /* Only visible once a second control joins mute (captions); a lone control has no
+       neighbour to be spaced from, so a player without one renders exactly as before. */
+    gap: var(--media-player-bottom-controls-gap, 12px);
     box-sizing: border-box;
     padding: var(--media-player-bottom-controls-padding, 12px);
     visibility: var(--bottom-controls-visibility);
@@ -561,6 +697,40 @@
     --button-height: var(--media-player-bottom-control-size, 24px);
   }
 
+  /* The captions toggle is a native button, so it reads the same --media-player-control-*
+     hooks `Button` is handed above and sits in the same wrapper as its neighbours. */
+  .captions-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--media-player-bottom-control-size, 24px);
+    height: var(--media-player-bottom-control-size, 24px);
+    margin: 0;
+    padding: var(--media-player-control-padding, 0px);
+    border: var(--media-player-control-border, none);
+    border-radius: var(--media-player-control-border-radius, 50%);
+    background-color: var(--media-player-control-background-color, transparent);
+    color: var(--media-player-control-color, #ffffff);
+    cursor: pointer;
+    /* Resolves exactly as the sibling `Button`s do (their `.button-el` sets the same
+       fallback), so the toggle is revealed and focusable together with them. */
+    visibility: var(--button-visibility, visible);
+  }
+
+  .captions-toggle:hover {
+    background-color: var(
+      --media-player-control-hover-background-color,
+      var(--media-player-control-background-color, transparent)
+    );
+    color: var(--media-player-control-hover-color, var(--media-player-control-color, #ffffff));
+  }
+
+  .captions-toggle:focus-visible {
+    outline: var(--media-player-control-focus-outline, 2px solid currentColor);
+    outline-offset: var(--media-player-control-focus-outline-offset, 2px);
+  }
+
   .control :global(svg),
   .control :global(img) {
     height: var(--media-player-control-icon-size, 100%);

package/dist/MediaPlayer/MediaPlayer.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { MediaPlayerProperties } from './properties';
-declare const MediaPlayer: import("svelte").Component<MediaPlayerProperties, {}, "muted" | "playing" | "duration" | "currentTime">;
+declare const MediaPlayer: import("svelte").Component<MediaPlayerProperties, {}, "muted" | "playing" | "duration" | "captionsVisible" | "currentTime">;
 type MediaPlayer = ReturnType<typeof MediaPlayer>;
 export default MediaPlayer;

package/dist/MediaPlayer/properties.d.ts

@@ -24,6 +24,31 @@ export type OptionalMediaPlayerProperties = {
     captionsLabel?: string;
     /** BCP 47 language tag for the captions track, e.g. "en". Only meaningful with captionsSrc. */
     captionsSrcLang?: string;
+    /**
+     * Render a captions toggle in the bottom controls: a real `<button>` named "Captions"
+     * whose `aria-pressed` carries the on/off state. Video only, and only when `captionsSrc`
+     * is supplied -- a toggle with no track behind it would be a dead control. Off by
+     * default, so a player that showed only play and mute keeps showing only play and mute.
+     *
+     * It exists because the custom overlay replaces the browser's own controls, and with
+     * them the browser's captions menu: without it, a track the page supplied had no
+     * viewer-operable way to be shown. With native `controls` the browser's menu does that
+     * job and this toggle is not drawn.
+     */
+    captionsButton?: boolean;
+    /**
+     * Whether the captions track is showing. Bindable, both directions: the toggle, and the
+     * browser's own captions menu under native `controls`, report outward, and a host
+     * writing it shows or hides the track -- which is how a host builds its own control.
+     * `false` hides the track while leaving it loaded; it does not remove the `<track>`.
+     * A browser or OS preference for captions can turn it on at load, in which case the
+     * bound value follows. Only meaningful with `captionsSrc`.
+     */
+    captionsVisible?: boolean;
+    /** Replaces the default icon on the captions toggle while captions are hidden. */
+    captionsIcon?: Snippet;
+    /** Replaces the default icon on the captions toggle while captions are showing. */
+    captionsOnIcon?: Snippet;
     /**
      * Render a seek bar in the bottom controls. Video only. The bar is a library
      * `Slider` bound to the media's position, so dragging it scrubs and playback
@@ -67,6 +92,12 @@ export type MediaPlayerEventProperties = {
     onplay?: (event: Event) => void;
     onpause?: (event: Event) => void;
     onvolumechange?: (muted: boolean) => void;
+    /**
+     * The viewer showed or hid the captions, through the toggle or the browser's own menu.
+     * Carries the state it is now in. Does not fire for a host's own `captionsVisible`
+     * write, the same split `onseek` keeps between a scrub and a restored position.
+     */
+    oncaptionschange?: (visible: boolean) => void;
     /**
      * The viewer moved the seek bar. Carries the position seeked to, in seconds.
      * Fires only for a deliberate scrub, not for playback advancing on its own —

package/dist/Menu/Menu.svelte

@@ -4,6 +4,7 @@
   import Img from '../Img/Img.svelte';
   import { computeMenuDropdownPosition } from './dropdownPosition';
   import { eventHitsInside, registerDismissible } from '../_interaction/dismissal';
+  import { findInteractive } from '../_interaction/focusable';
   import { tokenizedFly } from '../Animations/tokenizedFly';
   import type { MenuProperties, MenuItem, MenuPlacement } from './properties';
 
@@ -251,16 +252,17 @@
    * Returns focus to whatever is actually focusable for this trigger. Under
    * `interactiveTrigger` the wrapper carries no tabindex, so focusing it is a no-op and
    * focus falls to <body> — the control the snippet rendered is the real target.
+   * The search follows `<slot>` projection and open shadow roots: through `<sui-menu>`
+   * that control is the consumer's slotted element, which `querySelector` on the
+   * wrapper cannot see.
    */
   function focusTrigger() {
     if (triggerEl === null) {
       return;
     }
     if (interactiveTrigger) {
-      const control = triggerEl.querySelector(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      if (control instanceof HTMLElement) {
+      const control = findInteractive(triggerEl);
+      if (control !== null) {
         control.focus({ preventScroll: true });
         return;
       }