@juspay/svelte-ui-components 3.5.0 → 3.5.1

package/dist/Img/Img.svelte

@@ -1,20 +1,8 @@
 <script lang="ts">
   import type { ImgProperties } from './properties';
 
-  let {
-    src,
-    alt,
-    fallback,
-    onerror: onerrorLegacy,
-    onError,
-    classes,
-    inlineSvg,
-    transformSvg,
-    testId
-  }: ImgProperties = $props();
-
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onerror = $derived(onError ?? onerrorLegacy);
+  let { src, alt, fallback, onerror, classes, inlineSvg, transformSvg, testId }: ImgProperties =
+    $props();
 
   let currentSrc = $derived(src);
   // Per-source failure marker: when inlining a given URL fails we fall back to
@@ -92,10 +80,83 @@
     'focusable'
   ]);
 
+  /**
+   * The host attributes this component writes itself. A fetched root may
+   * legitimately overwrite one (an icon set's own role/aria-label), and the
+   * src-change cleanup then has to put the component's value back rather than
+   * just remove it: Svelte only re-applies its own attribute when `alt` or
+   * `testId` changes, so a bare removal would leave the host with no role
+   * until the next re-render.
+   */
+  /**
+   * `alt` is a required `string` in `properties.ts`, which settles it for a
+   * Svelte consumer and settles nothing for a web-component one: `<sui-img>`
+   * takes its props from JavaScript, so an omitted `alt` arrives as undefined
+   * and every `alt.length` below would throw where the compiler cannot see it.
+   */
+  const label = $derived(alt ?? '');
+
+  function restoreHostOwnedAttribute(host: SVGSVGElement, name: string): boolean {
+    const named = label.length > 0;
+    switch (name.toLowerCase()) {
+      case 'role':
+        return setOrRemove(host, name, named ? 'img' : null);
+      case 'aria-label':
+        return setOrRemove(host, name, named ? label : null);
+      case 'aria-hidden':
+        return setOrRemove(host, name, named ? null : 'true');
+      case 'data-pw':
+      case 'testid':
+        return setOrRemove(host, name, testId ?? null);
+      default:
+        return false;
+    }
+  }
+
+  function setOrRemove(host: SVGSVGElement, name: string, value: string | null): boolean {
+    if (value === null) {
+      host.removeAttribute(name);
+    } else {
+      host.setAttribute(name, value);
+    }
+    return true;
+  }
+
   function isSafeInlineRootAttribute(lowerCaseName: string): boolean {
     return SAFE_INLINE_ROOT_ATTRIBUTES.has(lowerCaseName) || lowerCaseName.startsWith('aria-');
   }
 
+  /**
+   * Descendants removed outright, because nothing static artwork needs is
+   * expressed with them.
+   *
+   * `script` and `foreignObject` are the obvious two. The SMIL animation
+   * elements are here because SMIL animates *any* attribute by name — `<set
+   * attributeName="onclick" to="…">` plants an event handler, and `<animate
+   * attributeName="xlink:href" values="javascript:…">` plants a URL — so a
+   * guard that strips `on*` and bad hrefs at adoption time but keeps SMIL
+   * only moves the same vector one element deeper, to be applied a frame
+   * later. `use` stays: it is how real icon sets reference their own `defs`,
+   * and where it points is handled by the URL rule below.
+   */
+  const REMOVED_ELEMENTS =
+    'script, foreignObject, animate, animateMotion, animateTransform, set, mpath, discard';
+
+  const URL_ATTRIBUTES: ReadonlySet<string> = new Set(['href', 'xlink:href', 'src']);
+
+  /**
+   * Whether a URL attribute points inside this same document (`#gradient`).
+   *
+   * Only a fragment survives. A `javascript:` URL is the classic vector, but
+   * an ordinary remote URL is not safe either: on `<image href>` or `<use
+   * href>` it fetches on adoption, which is a request the consumer's page
+   * never asked to make, from markup the consumer did not write. A same
+   * document reference can do neither.
+   */
+  function isSameDocumentReference(value: string): boolean {
+    return value.trim().startsWith('#');
+  }
+
   /**
    * Strips executable content from a fetched SVG's descendants.
    *
@@ -110,11 +171,11 @@
    * legitimately carry the entire SVG geometry and paint vocabulary (`d`,
    * `transform`, `gradientUnits`, …), so enumerating what is permitted would
    * break real artwork. What is dangerous is narrow and well understood:
-   * scripting elements, `on*` handlers, and URL attributes pointing at
-   * `javascript:`.
+   * scripting elements, SMIL animation, `on*` handlers, and URL attributes
+   * that leave this document.
    */
   function sanitizeInlinedSubtree(root: SVGSVGElement): void {
-    for (const element of Array.from(root.querySelectorAll('script, foreignObject'))) {
+    for (const element of Array.from(root.querySelectorAll(REMOVED_ELEMENTS))) {
       element.remove();
     }
     for (const element of Array.from(root.querySelectorAll('*'))) {
@@ -124,10 +185,7 @@
           element.removeAttribute(attribute.name);
           continue;
         }
-        // `href`, `xlink:href` and `src` accept a javascript: URL, which runs
-        // on activation of an <a> wrapper or on load of a nested resource.
-        const isUrlAttribute = name === 'href' || name === 'xlink:href' || name === 'src';
-        if (isUrlAttribute && /^\s*javascript:/i.test(attribute.value)) {
+        if (URL_ATTRIBUTES.has(name) && !isSameDocumentReference(attribute.value)) {
           element.removeAttribute(attribute.name);
         }
       }
@@ -150,17 +208,25 @@
     return new Set(Array.from(root.attributes, (attribute) => attribute.name.toLowerCase()));
   }
 
+  /**
+   * Resolves to the root attribute names this load copied onto the host, so
+   * the next load can remove them first. Without that, an attribute the
+   * previous file supplied (say `fill`) outlives a `src` change to a file that
+   * does not, and the two icons blend. Early exits hand back `previouslyCopied`
+   * untouched: nothing was painted, so nothing is owed.
+   */
   async function loadInlineSvg(
     host: SVGSVGElement,
     url: string,
     transform: ((svg: string) => string) | null,
-    signal: AbortSignal
-  ): Promise<void> {
+    signal: AbortSignal,
+    previouslyCopied: readonly string[]
+  ): Promise<readonly string[]> {
     try {
       const response = await fetch(url, { signal });
       if (!response.ok) {
         failedInlineSrc = url;
-        return;
+        return previouslyCopied;
       }
       const rawSvg = await response.text();
       const hasTransform = typeof transform === 'function';
@@ -168,22 +234,27 @@
       const parsed = new DOMParser().parseFromString(markup, 'image/svg+xml');
       if (parsed.querySelector('parsererror') !== null) {
         failedInlineSrc = url;
-        return;
+        return previouslyCopied;
       }
       const sourceSvg = parsed.querySelector('svg');
       if (sourceSvg === null) {
         failedInlineSrc = url;
-        return;
+        return previouslyCopied;
       }
       // The action may have been torn down (or re-run) while awaiting the
       // body — bail before mutating so a stale fetch never paints over the
       // latest one.
       if (signal.aborted) {
-        return;
+        return previouslyCopied;
       }
       while (host.firstChild !== null) {
         host.removeChild(host.firstChild);
       }
+      for (const name of previouslyCopied) {
+        if (!restoreHostOwnedAttribute(host, name)) {
+          host.removeAttribute(name);
+        }
+      }
       // With no transform the parsed root IS the fetched root, so every name
       // is network-supplied and only the allowlist applies. With a transform,
       // names absent from the raw payload were added by the caller's own hook
@@ -191,36 +262,45 @@
       // nothing can be attributed to the caller and the allowlist applies to
       // everything.
       const fetchedRootNames = hasTransform ? collectRootAttributeNames(rawSvg) : null;
-      for (const attribute of Array.from(sourceSvg.attributes)) {
+      const accepted = Array.from(sourceSvg.attributes).filter((attribute) => {
         const name = attribute.name.toLowerCase();
-        if (name === 'class') {
-          continue;
-        }
         const addedByTransform = fetchedRootNames !== null && !fetchedRootNames.has(name);
-        if (isSafeInlineRootAttribute(name) || addedByTransform) {
-          host.setAttribute(attribute.name, attribute.value);
-        }
+        return name !== 'class' && (isSafeInlineRootAttribute(name) || addedByTransform);
+      });
+      for (const attribute of accepted) {
+        host.setAttribute(attribute.name, attribute.value);
       }
+      const copied = accepted.map((attribute) => attribute.name);
       // Before adoption, not after: an event-handler attribute becomes a live
       // handler as soon as its element enters the document.
       sanitizeInlinedSubtree(sourceSvg);
       while (sourceSvg.firstChild !== null) {
         host.appendChild(sourceSvg.firstChild);
       }
+      return copied;
     } catch {
       if (!signal.aborted) {
         failedInlineSrc = url;
       }
+      return previouslyCopied;
     }
   }
 
   function inlineSvgInto(host: SVGSVGElement, params: InlineParams) {
     let controller = new AbortController();
+    let copied: readonly string[] = [];
 
     function load(current: InlineParams): void {
       controller.abort();
       controller = new AbortController();
-      void loadInlineSvg(host, current.url, current.transform, controller.signal);
+      const { signal } = controller;
+      void loadInlineSvg(host, current.url, current.transform, signal, copied).then((names) => {
+        // A superseded load resolves after the one that replaced it may
+        // already have recorded its own names; only the live load may write.
+        if (!signal.aborted) {
+          copied = names;
+        }
+      });
     }
 
     load(params);
@@ -240,9 +320,9 @@
   <svg
     use:inlineSvgInto={{ url: currentSrc, transform: transformSvg ?? null }}
     class={classes ?? ''}
-    role={alt.length > 0 ? 'img' : null}
-    aria-label={alt.length > 0 ? alt : null}
-    aria-hidden={alt.length === 0 ? 'true' : null}
+    role={label.length > 0 ? 'img' : null}
+    aria-label={label.length > 0 ? label : null}
+    aria-hidden={label.length === 0 ? 'true' : null}
     data-pw={testId}
     testID={testId}
   ></svg>
@@ -250,7 +330,7 @@
   <img
     class={classes ?? ''}
     src={currentSrc}
-    {alt}
+    alt={label}
     onerror={handleFallback}
     data-pw={testId}
     testID={testId}

package/dist/Img/properties.d.ts

@@ -26,5 +26,4 @@ export type OptionalImgProperties = {
 };
 export type ImgEventProperties = {
     onerror?: () => void;
-    onError?: () => void;
 };

package/dist/Input/Input.svelte

@@ -30,20 +30,14 @@
     testId = '',
     textTransformers = [],
     textViewPresentation = [],
-    onFocus: onFocusLegacy = () => {},
     onfocus,
-    onFocusout: onFocusoutLegacy = () => {},
     onfocusout,
-    onBlur: onBlurLegacy = () => {},
     onblur,
-    onInput: onInputLegacy = () => {},
     oninput,
-    onPaste: onPasteLegacy = () => {},
     onpaste,
-    onStateChange = () => {},
-    onClick: onClickLegacy = () => {},
+    // Called unguarded below, so it keeps the no-op default the resolver gave it.
+    onstatechange = () => {},
     onclick,
-    onKeyDown: onKeyDownLegacy = () => {},
     onkeydown,
     classes,
     role,
@@ -54,8 +48,8 @@
     ariaActivedescendant,
     leftIcon,
     rightIcon,
-    onLeftIconClick,
-    onRightIconClick,
+    onlefticonclick,
+    onrighticonclick,
     leftIconLabel = 'Leading action',
     rightIconLabel = 'Trailing action',
     mandatory = false,
@@ -68,15 +62,6 @@
     showCount = false
   }: InputProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onBlur = $derived(onblur ?? onBlurLegacy);
-  const onClick = $derived(onclick ?? onClickLegacy);
-  const onFocus = $derived(onfocus ?? onFocusLegacy);
-  const onFocusout = $derived(onfocusout ?? onFocusoutLegacy);
-  const onInput = $derived(oninput ?? onInputLegacy);
-  const onKeyDown = $derived(onkeydown ?? onKeyDownLegacy);
-  const onPaste = $derived(onpaste ?? onPasteLegacy);
-
   /* `for` on a <label> resolves against an element's id, never its name. The label
      was emitted with for={name} while the field itself carried only name={name},
      so the association never completed for any caller. Derive the id from name so
@@ -131,7 +116,7 @@
 
   // eslint-disable-next-line no-restricted-syntax
   $effect(() => {
-    onStateChange(validationState);
+    onstatechange(validationState);
   });
 
   const showErrorMessage = $derived(validationState === 'Invalid');
@@ -236,7 +221,7 @@
       inputElement.value = currentValue;
     }
     value = inputElement.value;
-    onInput(inputElement.value, event);
+    oninput?.(inputElement.value, event);
   }
 
   /**
@@ -250,11 +235,11 @@
     }
 
     // Everything below the tel branch is tel-specific digit normalisation, and
-    // onPaste was only ever invoked from inside it — so a non-tel field (notably
+    // onpaste was only ever invoked from inside it — so a non-tel field (notably
     // useTextArea) had no way to observe a paste at all. Hand the event over
     // before that branch and return, leaving tel's behaviour byte-identical.
     if (dataType !== 'tel') {
-      onPaste(event);
+      onpaste?.(event);
       return;
     }
 
@@ -288,11 +273,11 @@
           );
           // Adding reactivity
           value = finalValue;
-          onPaste(event);
+          onpaste?.(event);
           event.preventDefault(); // prevent bubble and let finalValue be entered
         }
         /**
-         * if numeric pasted text has length less than max length, bubble to onInput.
+         * if numeric pasted text has length less than max length, bubble to oninput.
          */
       }
     }
@@ -309,8 +294,8 @@
     if (validationState === 'InProgress' && value.length > 0) {
       validationState = 'Invalid';
     }
-    onFocusout(event);
-    onBlur(event);
+    onfocusout?.(event);
+    onblur?.(event);
   }
 </script>
 
@@ -340,12 +325,12 @@
         aria-invalid={showError && !actionInput ? 'true' : null}
         aria-describedby={describedBy || null}
         required={mandatory || null}
-        onfocus={onFocus}
+        {onfocus}
         onfocusout={_onFocusOut}
         oninput={handleOnInput}
         onpaste={handleOnPaste}
-        onclick={onClick}
-        onkeydown={onKeyDown}
+        {onclick}
+        {onkeydown}
         data-pw={testId}
         testID={testId}
         class:action-input={actionInput}
@@ -378,12 +363,12 @@
         aria-invalid={showError && !actionInput ? 'true' : null}
         aria-describedby={describedBy || null}
         required={mandatory || null}
-        onfocus={onFocus}
+        {onfocus}
         onfocusout={_onFocusOut}
         oninput={handleOnInput}
         onpaste={handleOnPaste}
-        onclick={onClick}
-        onkeydown={onKeyDown}
+        {onclick}
+        {onkeydown}
         data-pw={testId}
         testID={testId}
         class:action-input={actionInput}
@@ -406,12 +391,12 @@
       class:has-right-icon={hasRightIcon}
     >
       {#if hasLeftIcon}
-        {#if onLeftIconClick}
+        {#if onlefticonclick}
           <button
             type="button"
             class="input-icon input-icon-left input-icon-button"
             aria-label={leftIconLabel}
-            onclick={onLeftIconClick}
+            onclick={onlefticonclick}
           >
             {@render leftIcon?.()}
           </button>
@@ -421,12 +406,12 @@
       {/if}
       {@render fieldElement()}
       {#if hasRightIcon}
-        {#if onRightIconClick}
+        {#if onrighticonclick}
           <button
             type="button"
             class="input-icon input-icon-right input-icon-button"
             aria-label={rightIconLabel}
-            onclick={onRightIconClick}
+            onclick={onrighticonclick}
           >
             {@render rightIcon?.()}
           </button>

package/dist/Input/properties.d.ts

@@ -87,9 +87,9 @@ export type OptionalInputProperties = {
     /** Passive/clickable icon rendered inside the field on the trailing edge (e.g. a clear button). */
     rightIcon?: Snippet;
     /** When set, the leftIcon becomes a focusable button invoking this handler. */
-    onLeftIconClick?: () => void;
+    onlefticonclick?: () => void;
     /** When set, the rightIcon becomes a focusable button invoking this handler. */
-    onRightIconClick?: () => void;
+    onrighticonclick?: () => void;
     /** Accessible label for the clickable leftIcon button (defaults to a generic label). */
     leftIconLabel?: string;
     /** Accessible label for the clickable rightIcon button (defaults to a generic label). */
@@ -100,19 +100,12 @@ export type OptionalInputProperties = {
     forceError?: boolean;
 };
 export type InputEventProperties = {
-    onInput?: (value: string, event: Event) => void;
     oninput?: (value: string, event: Event) => void;
-    onFocus?: (event: FocusEvent) => void;
     onfocus?: (event: FocusEvent) => void;
-    onFocusout?: (event: FocusEvent) => void;
     onfocusout?: (event: FocusEvent) => void;
-    onBlur?: (event: FocusEvent) => void;
     onblur?: (event: FocusEvent) => void;
-    onPaste?: (event: ClipboardEvent) => void;
     onpaste?: (event: ClipboardEvent) => void;
-    onClick?: (event: MouseEvent) => void;
     onclick?: (event: MouseEvent) => void;
-    onStateChange?: (state: ValidationState) => void;
-    onKeyDown?: (event: KeyboardEvent) => void;
+    onstatechange?: (state: ValidationState) => void;
     onkeydown?: (event: KeyboardEvent) => void;
 };

package/dist/InputButton/InputButton.svelte

@@ -50,7 +50,7 @@
 
   function handleStateChange(state: ValidationState): void {
     validationState = state;
-    inputEventProperties?.onStateChange?.(state);
+    inputEventProperties?.onstatechange?.(state);
   }
 
   export function focus() {
@@ -89,7 +89,7 @@
           {...inputEventProperties}
           bind:value
           bind:this={inputRef}
-          onStateChange={handleStateChange}
+          onstatechange={handleStateChange}
           actionInput={true}
         />
       </div>

package/dist/LineChart/LineChart.svelte

@@ -59,19 +59,13 @@
     hideLegendBelow = 360,
     tooltipPortal = false,
     highlightedIndex = null,
-    onChartReady,
-    onpointclick: onpointclickLegacy,
-    onPointClick,
-    onpointhover: onpointhoverLegacy,
-    onPointHover,
+    onchartready,
+    onpointclick,
+    onpointhover,
     testId,
     classes
   }: LineChartProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onpointclick = $derived(onPointClick ?? onpointclickLegacy);
-  const onpointhover = $derived(onPointHover ?? onpointhoverLegacy);
-
   // ── State ──────────────────────────────────────────────────────
 
   let containerEl: HTMLDivElement | null = $state(null);
@@ -127,7 +121,7 @@
       }
     };
 
-    onChartReady?.(api);
+    onchartready?.(api);
   });
 
   // ── Layout ─────────────────────────────────────────────────────

package/dist/LineChart/properties.d.ts

@@ -142,25 +142,15 @@ export type LineChartEventProperties = {
         pointIndex: number;
         point: LineChartDataPoint;
     }) => void;
-    onPointClick?: (event: {
-        seriesIndex: number;
-        pointIndex: number;
-        point: LineChartDataPoint;
-    }) => void;
     onpointhover?: (event: {
         seriesIndex: number;
         pointIndex: number;
         point: LineChartDataPoint;
     } | null) => void;
-    onPointHover?: (event: {
-        seriesIndex: number;
-        pointIndex: number;
-        point: LineChartDataPoint;
-    } | null) => void;
     /**
      * Called once after the chart mounts, handing back a `ChartHighlightAPI`
      * so an external orchestrator (e.g. voice narration sync) can drive point
      * highlighting without knowledge of the chart's internal state.
      */
-    onChartReady?: (api: ChartHighlightAPI) => void;
+    onchartready?: (api: ChartHighlightAPI) => void;
 };

package/dist/ListItem/ListItem.svelte

@@ -25,16 +25,11 @@
     centerContent,
     rightContent,
     bottomContent,
-    onleftImageClick: onleftImageClickLegacy,
-    onLeftImageClick,
-    onrightImageClick: onrightImageClickLegacy,
-    onRightImageClick,
-    oncenterTextClick: oncenterTextClickLegacy,
-    onCenterTextClick,
-    onitemClick: onitemClickLegacy,
-    onItemClick,
-    ontopSectionClick: ontopSectionClickLegacy,
-    onTopSectionClick,
+    onleftimageclick,
+    onrightimageclick,
+    oncentertextclick,
+    onitemclick,
+    ontopsectionclick,
     onkeydown,
     classes,
     transformSvg,
@@ -43,31 +38,24 @@
     id
   }: ListItemProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const oncenterTextClick = $derived(onCenterTextClick ?? oncenterTextClickLegacy);
-  const onitemClick = $derived(onItemClick ?? onitemClickLegacy);
-  const onleftImageClick = $derived(onLeftImageClick ?? onleftImageClickLegacy);
-  const onrightImageClick = $derived(onRightImageClick ?? onrightImageClickLegacy);
-  const ontopSectionClick = $derived(onTopSectionClick ?? ontopSectionClickLegacy);
-
   function handleLeftImageClick(event: MouseEvent): void {
-    onleftImageClick?.(event);
+    onleftimageclick?.(event);
   }
 
   function handleRightImageClick(event: MouseEvent): void {
-    onrightImageClick?.(event);
+    onrightimageclick?.(event);
   }
 
   function handleCenterTextClick(event: MouseEvent): void {
-    oncenterTextClick?.(event);
+    oncentertextclick?.(event);
   }
 
   function handleItemClick(event: MouseEvent): void {
-    onitemClick?.(event);
+    onitemclick?.(event);
   }
 
   function handleTopSectionClick(event: MouseEvent): void {
-    ontopSectionClick?.(event);
+    ontopsectionclick?.(event);
   }
 </script>
 

package/dist/ListItem/properties.d.ts

@@ -32,15 +32,10 @@ export type ListItemProperties = ListItemEventProperties & {
     id?: string;
 };
 export type ListItemEventProperties = {
-    onleftImageClick?: (event: MouseEvent) => void;
-    onLeftImageClick?: (event: MouseEvent) => void;
-    onrightImageClick?: (event: MouseEvent) => void;
-    onRightImageClick?: (event: MouseEvent) => void;
-    oncenterTextClick?: (event: MouseEvent) => void;
-    onCenterTextClick?: (event: MouseEvent) => void;
-    onitemClick?: (event: MouseEvent) => void;
-    onItemClick?: (event: MouseEvent) => void;
-    ontopSectionClick?: (event: MouseEvent) => void;
-    onTopSectionClick?: (event: MouseEvent) => void;
+    onleftimageclick?: (event: MouseEvent) => void;
+    onrightimageclick?: (event: MouseEvent) => void;
+    oncentertextclick?: (event: MouseEvent) => void;
+    onitemclick?: (event: MouseEvent) => void;
+    ontopsectionclick?: (event: MouseEvent) => void;
     onkeydown?: (event: KeyboardEvent) => void;
 };

package/dist/LottiePlayer/LottiePlayer.svelte

@@ -18,16 +18,10 @@
     ariaHidden = true,
     testId,
     classes,
-    oncomplete: oncompleteLegacy,
-    onComplete,
-    onerror: onerrorLegacy,
-    onError
+    oncomplete,
+    onerror
   }: LottiePlayerProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const oncomplete = $derived(onComplete ?? oncompleteLegacy);
-  const onerror = $derived(onError ?? onerrorLegacy);
-
   let containerEl: HTMLDivElement | null = $state(null);
   let animationItem: LocalAnimationItem | null = $state(null);
 

package/dist/LottiePlayer/properties.d.ts

@@ -31,8 +31,6 @@ export type OptionalLottiePlayerProperties = {
 export type LottiePlayerEventProperties = {
     /** Fired when the animation completes (non-looping). */
     oncomplete?: () => void;
-    onComplete?: () => void;
     /** Fired when the animation fails to load. */
     onerror?: () => void;
-    onError?: () => void;
 };

package/dist/MediaPlayer/MediaPlayer.svelte

@@ -26,15 +26,11 @@
     captionsSrcLang,
     onplay,
     onpause,
-    onvolumechange: onvolumechangeLegacy,
-    onVolumeChange,
+    onvolumechange,
     testId,
     classes
   }: MediaPlayerProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onvolumechange = $derived(onVolumeChange ?? onvolumechangeLegacy);
-
   let videoPlayer: HTMLVideoElement | null = $state(null);
 
   function togglePlayback(): void {