@juspay/svelte-ui-components 4.27.5 → 4.28.0

package/dist/Draggable/Draggable.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { closestInEventPath } from '../_interaction/dismissal';
   import type { DraggableProperties, DragPosition } from './properties';
 
   let {
@@ -26,18 +27,22 @@
     baseY: number;
   } | null = $state(null);
 
-  function isInteractive(target: EventTarget | null): boolean {
+  // Searched over the event's composed path rather than from `event.target`: a
+  // `<sui-button>` nested inside a Draggable retargets to its host, so a plain
+  // `closest('button')` misses the real control and the press starts a drag
+  // instead of activating it.
+  function isInteractive(event: Event): boolean {
     return (
-      target instanceof Element &&
-      target.closest('input, textarea, select, button, a, [contenteditable="true"]') !== null
+      closestInEventPath(event, 'input, textarea, select, button, a, [contenteditable="true"]') !==
+      null
     );
   }
 
-  function withinHandle(target: EventTarget | null): boolean {
+  function withinHandle(event: Event): boolean {
     if (typeof handle !== 'string' || handle.length === 0) {
-      return !isInteractive(target);
+      return !isInteractive(event);
     }
-    return target instanceof Element && target.closest(handle) !== null;
+    return closestInEventPath(event, handle) !== null;
   }
 
   function clamp(node: HTMLElement, nextX: number, nextY: number): DragPosition {
@@ -61,7 +66,7 @@
   }
 
   function startDrag(event: PointerEvent & { currentTarget: HTMLElement }): void {
-    if (disabled || !withinHandle(event.target)) {
+    if (disabled || !withinHandle(event)) {
       return;
     }
     event.preventDefault();

package/dist/DualAxisBarChart/DualAxisBarChart.svelte

@@ -94,7 +94,11 @@
     if (axisSeries.length === 0) {
       return [0, 1];
     }
-    const allValues = axisSeries.flatMap((s) => s.data);
+    // Non-finite values (NaN/Infinity) mark gap points; exclude them so one
+    // bad point cannot poison the axis extent (Infinity in particular passes
+    // right through a Math.max comparison). Matches the LineChart/AreaChart
+    // call-site filter.
+    const allValues = axisSeries.flatMap((s) => s.data).filter((v) => Number.isFinite(v));
     if (allValues.length === 0) {
       return [0, 1];
     }
@@ -651,7 +655,8 @@
   }
 
   .bar-shape {
-    transition: opacity var(--chart-transition-duration, 0.2s) ease;
+    transition: opacity var(--chart-transition-duration, var(--motion-duration, 0.2s))
+      var(--chart-transition-easing, var(--motion-easing, ease));
     cursor: pointer;
   }
 
@@ -672,8 +677,10 @@
 
   .line-dot {
     transition:
-      r var(--chart-transition-duration, 0.2s) ease,
-      opacity var(--chart-transition-duration, 0.2s) ease;
+      r var(--chart-transition-duration, var(--motion-duration, 0.2s))
+        var(--chart-transition-easing, var(--motion-easing, ease)),
+      opacity var(--chart-transition-duration, var(--motion-duration, 0.2s))
+        var(--chart-transition-easing, var(--motion-easing, ease));
     cursor: pointer;
   }
 

package/dist/EmptyState/EmptyState.svelte

@@ -111,7 +111,7 @@
   .empty-state-description {
     font-size: var(--empty-state-description-font-size, 14px);
     color: var(--empty-state-description-color, inherit);
-    opacity: var(--empty-state-description-opacity, 0.6);
+    opacity: var(--empty-state-description-opacity, 0.8);
     max-width: var(--empty-state-description-max-width, 360px);
     margin-top: 4px;
   }

package/dist/FileDropzoneTrigger/FileDropzoneTrigger.svelte

@@ -81,7 +81,7 @@
 
   .file-dropzone-trigger-caption {
     margin: var(--file-dropzone-trigger-caption-margin, 0);
-    color: var(--file-dropzone-trigger-caption-color, #64748b);
+    color: var(--file-dropzone-trigger-caption-color, #f1f5f9);
     font-size: var(--file-dropzone-trigger-caption-font-size, 0.85em);
   }
 </style>

package/dist/FileInput/FileInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { describeField } from '../_field/description';
   import type { FileInputProperties } from './properties';
 
   let {
@@ -10,9 +11,23 @@
     testId,
     classes,
     onfiles,
-    onerror
+    onerror,
+    errorMessage,
+    infoMessage,
+    invalid
   }: FileInputProperties = $props();
 
+  /* The drop zone is a `role="button"` with no linked text, so a rejected
+     file (wrong type, too large) had nowhere to be announced. It takes
+     `aria-describedby` but deliberately not `aria-invalid`: ARIA does not
+     support that attribute on `button`, and an unsupported attribute is not a
+     harmless extra -- it is one a reader is entitled to ignore. The error text
+     itself is the announcement, through `role="alert"`. */
+  const fieldUid = $props.id();
+  const field = $derived(
+    describeField(fieldUid, { error: errorMessage, info: infoMessage, invalid })
+  );
+
   let dragOver = $state(false);
   let inputEl: HTMLInputElement | null = $state(null);
   let pickerBusy = false;
@@ -143,6 +158,7 @@
   role="button"
   tabindex={disabled ? -1 : 0}
   aria-disabled={disabled}
+  aria-describedby={field.describedBy}
   ondragover={handleDragOver}
   ondragleave={handleDragLeave}
   ondrop={handleDrop}
@@ -166,7 +182,40 @@
   {@render trigger({ openFilePicker, dragOver, disabled })}
 </div>
 
+{#if field.showsError}
+  <div
+    id={field.errorId}
+    role="alert"
+    class="field-error"
+    data-pw={typeof testId === 'string' ? `${testId}-error-message` : null}
+    testID={typeof testId === 'string' ? `${testId}-error-message` : null}
+  >
+    {errorMessage}
+  </div>
+{/if}
+{#if field.showsInfo}
+  <div
+    id={field.infoId}
+    class="field-info"
+    data-pw={typeof testId === 'string' ? `${testId}-info-message` : null}
+    testID={typeof testId === 'string' ? `${testId}-info-message` : null}
+  >
+    {infoMessage}
+  </div>
+{/if}
+
 <style>
+  .field-error {
+    color: var(--file-input-error-color, #b3261e);
+    font-size: var(--file-input-error-font-size, 12px);
+    margin-top: var(--file-input-error-margin-top, 4px);
+  }
+  .field-info {
+    color: var(--file-input-info-color, #5f6368);
+    font-size: var(--file-input-info-font-size, 12px);
+    margin-top: var(--file-input-info-margin-top, 4px);
+  }
+
   .file-input {
     display: var(--file-input-display, inline-flex);
     flex-direction: var(--file-input-flex-direction, column);

package/dist/FileInput/properties.d.ts

@@ -13,6 +13,13 @@ export type FileInputProperties = {
     disabled?: boolean;
     testId?: string;
     classes?: string;
+    /** Text shown, and announced, when the control is in error. Linked through
+     *  `aria-describedby`, and sets `aria-invalid` while present. */
+    errorMessage?: string | null;
+    /** Persistent helper text describing the control, linked the same way. */
+    infoMessage?: string | null;
+    /** Marks the control invalid without supplying a message. */
+    invalid?: boolean;
     onfiles?: (files: File[]) => void;
     onerror?: (message: string) => void;
 };

package/dist/FunnelChart/FunnelChart.svelte

@@ -56,6 +56,17 @@
   const MARGIN_BOTTOM = 8;
   const MARGIN_LEFT = 8;
 
+  /**
+   * Funnel bars are fixed structural columns (one per stage, always drawn),
+   * not sparse samples that can be omitted like a LineChart/AreaChart gap
+   * point — so a non-finite stage value is treated as a 0 contribution
+   * (this file's own computeStackedValues precedent in geometry.ts for
+   * value-accumulating charts), not excluded from the dataset.
+   */
+  function safeValue(value: number): number {
+    return Number.isFinite(value) ? value : 0;
+  }
+
   let innerWidth = $derived(Math.max(0, chartWidth - MARGIN_LEFT - MARGIN_RIGHT));
   let innerHeight = $derived(Math.max(0, chartHeight - MARGIN_TOP - MARGIN_BOTTOM));
 
@@ -65,8 +76,14 @@
     }
     let max = 0;
     for (const stage of data) {
-      if (stage.value > max) {
-        max = stage.value;
+      // A non-finite value contributes nothing to the max (the same "0
+      // contribution" treatment computeStackedValues gives a non-finite or
+      // negative point) rather than a gap: `Infinity > max` is true, so an
+      // unguarded comparison lets one bad stage collapse every bar to the
+      // 2px floor.
+      const value = safeValue(stage.value);
+      if (value > max) {
+        max = value;
       }
     }
     return max === 0 ? 1 : max;
@@ -123,7 +140,10 @@
    * Clamped to at least 2px so zero-value stages remain visible.
    */
   function barHeight(stageValue: number, expandPixels: number = 0): number {
-    return Math.max(2, (stageValue / maxValue) * barAreaHeight + expandPixels);
+    // Sanitize before the division: an unguarded NaN/Infinity here reaches
+    // barY and connectorPoints (both call this), producing "NaN" SVG
+    // coordinates instead of the 2px-floor bar a 0 contribution renders as.
+    return Math.max(2, (safeValue(stageValue) / maxValue) * barAreaHeight + expandPixels);
   }
 
   /**
@@ -166,11 +186,15 @@
    * otherwise renders `"<value> | <pct>%"`.
    */
   function formatLabel(stage: FunnelStage): string {
+    // Feeds the in-bar label, tooltip, and aria-label alike: sanitizing once
+    // here keeps all three reading "0" for a non-finite stage instead of
+    // only some of them being patched and the rest still leaking "NaN".
+    const value = safeValue(stage.value);
     if (typeof valueFormat === 'function') {
-      return valueFormat(stage.value, maxValue);
+      return valueFormat(value, maxValue);
     }
-    const pct = formatPercent(stage.value, maxValue);
-    return `${formatNumber(stage.value)}  |  ${pct}`;
+    const pct = formatPercent(value, maxValue);
+    return `${formatNumber(value)}  |  ${pct}`;
   }
 
   // ── Label fitting ──────────────────────────────────────────────
@@ -189,7 +213,7 @@
     if (bh >= fullSize.height + 4 && stageColumnWidth >= fullSize.width + 8) {
       return full;
     }
-    const compact = formatPercent(stage.value, maxValue);
+    const compact = formatPercent(safeValue(stage.value), maxValue);
     const compactSize = measureText(compact, valueFont);
     if (bh >= compactSize.height + 4 && stageColumnWidth >= compactSize.width + 8) {
       return compact;
@@ -407,9 +431,12 @@
 
   .funnel-bar {
     transition:
-      opacity var(--chart-transition-duration, 0.2s) ease,
-      y var(--chart-transition-duration, 0.2s) ease,
-      height var(--chart-transition-duration, 0.2s) ease;
+      opacity var(--chart-transition-duration, var(--motion-duration, 0.2s))
+        var(--chart-transition-easing, var(--motion-easing, ease)),
+      y var(--chart-transition-duration, var(--motion-duration, 0.2s))
+        var(--chart-transition-easing, var(--motion-easing, ease)),
+      height var(--chart-transition-duration, var(--motion-duration, 0.2s))
+        var(--chart-transition-easing, var(--motion-easing, ease));
     cursor: pointer;
   }
 
@@ -436,12 +463,13 @@
   }
 
   .funnel-connector {
-    transition: d var(--chart-transition-duration, 0.2s) ease;
+    transition: d var(--chart-transition-duration, var(--motion-duration, 0.2s))
+      var(--chart-transition-easing, var(--motion-easing, ease));
   }
 
   .chart-empty {
     padding: var(--chart-empty-padding, 32px 24px);
-    color: var(--chart-empty-color, light-dark(#9ca3af, #6b7280));
+    color: var(--chart-empty-color, light-dark(#6b7280, #9ca3af));
     text-align: center;
   }
 </style>

package/dist/FunnelChart/properties.d.ts

@@ -63,7 +63,13 @@ export type OptionalFunnelChartProperties = {
     maxHeight?: number;
     /** Lower bound (px) on the rendered chart height (defaults to `0`). */
     minHeight?: number;
-    /** Render the tooltip into document.body (position:fixed) so scroll/overflow ancestors never clip it. */
+    /**
+     * Render the tooltip into the chart's own root (its shadow root when hosted as a
+     * custom element, `document.body` otherwise) with `position: fixed`, clamped to
+     * the viewport, instead of positioned inside the chart. Use it when the chart
+     * sits inside a container with `overflow: hidden`/`scroll` that would otherwise
+     * clip the tooltip.
+     */
     tooltipPortal?: boolean;
     /** Value for the `data-pw` attribute on the chart root element. */
     testId?: string;

package/dist/Gallery/Gallery.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { getActiveElement } from '../_interaction/focus';
+  import { lockBodyScroll, unlockBodyScroll } from '../utils';
   import { tick } from 'svelte';
   import type { Snippet } from 'svelte';
   import { fade } from 'svelte/transition';
@@ -35,7 +37,8 @@
     onclose,
     onchange,
     onkeydown,
-    classes
+    classes,
+    lightboxTransitionDuration
   }: GalleryProperties = $props();
 
   let lightboxDiv: HTMLDivElement | null = $state(null);
@@ -54,16 +57,20 @@
   let showItemActions = $derived(showEditButton || showDeleteButton);
 
   function lightboxAction(node: HTMLElement) {
-    if (openerElement === null && document.activeElement instanceof HTMLElement) {
-      openerElement = document.activeElement;
+    const opener = getActiveElement(node);
+    if (openerElement === null && opener instanceof HTMLElement) {
+      openerElement = opener;
     }
-    document.body.style.overflow = 'hidden';
+    // Reference-counted: a lightbox opened from inside another scroll-locking
+    // surface (Modal, Sheet, CommandMenu) must not restore scroll out from
+    // under it on close. See lockBodyScroll's own doc comment in utils.ts.
+    lockBodyScroll();
     tick().then(() => {
       node.focus();
     });
     return {
       destroy() {
-        document.body.style.overflow = '';
+        unlockBodyScroll();
         if (openerElement !== null) {
           openerElement.focus();
           openerElement = null;
@@ -93,7 +100,7 @@
     activeIndex = index;
     onchange?.(activeIndex);
     await tick();
-    if (lightboxDiv !== null && !lightboxDiv.contains(document.activeElement)) {
+    if (lightboxDiv !== null && !lightboxDiv.contains(getActiveElement(lightboxDiv))) {
       lightboxDiv.focus();
     }
   }
@@ -138,11 +145,11 @@
     }
     if (
       event.shiftKey &&
-      (document.activeElement === first || document.activeElement === lightboxDiv)
+      (getActiveElement(lightboxDiv) === first || getActiveElement(lightboxDiv) === lightboxDiv)
     ) {
       event.preventDefault();
       last.focus();
-    } else if (!event.shiftKey && document.activeElement === last) {
+    } else if (!event.shiftKey && getActiveElement(lightboxDiv) === last) {
       event.preventDefault();
       first.focus();
     }
@@ -266,7 +273,7 @@
     use:lightboxAction
     onclick={handleBackdropClick}
     onkeydown={handleLightboxKeydown}
-    transition:fade={{ duration: 200 }}
+    transition:fade={{ duration: lightboxTransitionDuration ?? 200 }}
   >
     <div class="lightbox-close" bind:this={closeButtonWrap}>
       <Button ariaLabel="Close gallery" onclick={closeLightbox}>
@@ -450,13 +457,13 @@
     color: var(--gallery-list-title-color, inherit);
     font-size: var(--gallery-list-title-font-size, 14px);
     font-weight: var(--gallery-list-title-font-weight, 500);
-    font-family: var(--gallery-list-title-font-family);
+    font-family: var(--gallery-list-title-font-family, inherit);
   }
 
   .list-caption {
     color: var(--gallery-list-caption-color, inherit);
     font-size: var(--gallery-list-caption-font-size, 12px);
-    font-family: var(--gallery-list-caption-font-family);
+    font-family: var(--gallery-list-caption-font-family, inherit);
   }
 
   .gallery-item-actions {
@@ -542,7 +549,7 @@
   .lightbox-caption {
     color: var(--gallery-lightbox-caption-color, #ffffff);
     font-size: var(--gallery-lightbox-caption-font-size, 14px);
-    font-family: var(--gallery-lightbox-caption-font-family);
+    font-family: var(--gallery-lightbox-caption-font-family, inherit);
     text-align: center;
     max-width: var(--gallery-lightbox-image-width, 85vw);
   }
@@ -554,7 +561,7 @@
     transform: translateX(-50%);
     color: var(--gallery-lightbox-counter-color, #ffffff);
     font-size: var(--gallery-lightbox-counter-font-size, 13px);
-    font-family: var(--gallery-lightbox-counter-font-family);
+    font-family: var(--gallery-lightbox-counter-font-family, inherit);
   }
 
   .lightbox-close,

package/dist/Gallery/properties.d.ts

@@ -27,6 +27,14 @@ export type OptionalGalleryProperties = {
     itemFooter?: Snippet<[GalleryImage, number]>;
     testId?: string;
     classes?: string;
+    /**
+     * Duration (ms) of the lightbox's `fade` transition. A CSS custom property
+     * cannot reach a Svelte transition directive's parameters, so this prop is
+     * the token-contract equivalent for Gallery's motion — same shape as
+     * Toast's `inAnimationDuration`/`outAnimationDuration`. Defaults to the
+     * library's existing 200ms so omitting it renders identically to before.
+     */
+    lightboxTransitionDuration?: number | null;
 };
 export type GalleryEventProperties = {
     onimageclick?: (index: number, event: MouseEvent) => void;

package/dist/GridItem/GridItem.svelte

@@ -16,12 +16,27 @@
     showLoader = !showLoader;
     onclick?.(event);
   }
+
+  // The tile carries role="button" and sits in the tab order, so Enter and Space have
+  // to do what a click does. Clicking the element itself rather than calling the
+  // handler keeps one activation path, and gives `onclick` the MouseEvent its type
+  // promises instead of a synthesized stand-in.
+  function handleKeydown(event: KeyboardEvent): void {
+    onkeydown?.(event);
+    if (event.key !== 'Enter' && event.key !== ' ') {
+      return;
+    }
+    event.preventDefault();
+    if (event.currentTarget instanceof HTMLElement) {
+      event.currentTarget.click();
+    }
+  }
 </script>
 
 <div
   class="container {classes ?? ''}"
   onclick={handleClick}
-  {onkeydown}
+  onkeydown={handleKeydown}
   role="button"
   tabindex="0"
   data-pw={typeof testId === 'string' ? testId : null}
@@ -132,4 +147,19 @@
       clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
     }
   }
+  /* 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) {
+    .grid-body-loader::before {
+      /* clip-path is what the animation drives; clearing it reveals the whole
+         border ring, which is the frame the animation ends on anyway. */
+      animation: none;
+      clip-path: none;
+    }
+  }
 </style>

package/dist/HITL/HITL.svelte

@@ -450,7 +450,8 @@
     width: 100%;
     max-width: var(--hitl-max-width, 100%);
     margin: var(--hitl-margin, 0);
-    animation: hitl-slide-in 0.3s ease-out forwards;
+    animation: hitl-slide-in var(--hitl-slide-in-animation-duration, var(--motion-duration, 0.3s))
+      var(--hitl-slide-in-animation-easing, var(--motion-easing, ease-out)) forwards;
     contain: layout style;
   }
 
@@ -465,7 +466,7 @@
     font-size: var(--hitl-badge-font-size, 0.6875rem);
     font-weight: var(--hitl-badge-font-weight, 600);
     letter-spacing: var(--hitl-badge-letter-spacing, 0.06em);
-    color: var(--hitl-badge-color, #858585);
+    color: var(--hitl-badge-color, #595959);
     text-transform: uppercase;
   }
 
@@ -485,7 +486,7 @@
     padding: var(--hitl-description-padding, 0.25rem 0);
     font-size: var(--hitl-description-font-size, 0.8125rem);
     line-height: var(--hitl-description-line-height, inherit);
-    color: var(--hitl-description-color, #858585);
+    color: var(--hitl-description-color, #5c5c5c);
   }
 
   .confirmation-body {
@@ -505,7 +506,7 @@
     font-size: var(--hitl-param-label-font-size, 0.6875rem);
     font-weight: var(--hitl-param-label-font-weight, 600);
     letter-spacing: var(--hitl-param-label-letter-spacing, 0.04em);
-    color: var(--hitl-param-label-color, #858585);
+    color: var(--hitl-param-label-color, #595959);
     word-spacing: var(--hitl-param-label-word-spacing, normal);
     text-transform: uppercase;
   }
@@ -552,7 +553,12 @@
     overflow: hidden;
     --progress-track-background: transparent;
     --progress-bar-background: transparent;
-    --progress-bar-transition: width 0.1s linear;
+    /* Named so a consumer can reach it. HITL sets the Progress child's token
+       directly, which beats anything declared at :root, so a `<sui-hitl>`
+       consumer had no way to slow or stop the countdown sweep -- custom
+       properties are the only thing that crosses a shadow boundary, and this
+       one was spoken for. */
+    --progress-bar-transition: var(--hitl-countdown-transition, width 0.1s linear);
     --progress-track-height: 100%;
     --progress-container-padding: 0;
   }
@@ -573,17 +579,24 @@
     background: var(--hitl-completion-background, #f4f4f5);
     border-radius: var(--hitl-border-radius, 0.5rem);
     padding: var(--hitl-completion-padding, 1rem);
-    animation: hitl-fade-in 0.3s ease-in-out;
+    animation: hitl-fade-in var(--hitl-completion-animation-duration, var(--motion-duration, 0.3s))
+      var(--hitl-completion-animation-easing, var(--motion-easing, ease-in-out));
   }
 
   .completion-icon {
     display: inline-flex;
     width: var(--hitl-completion-icon-size, 1.25rem);
     height: var(--hitl-completion-icon-size, 1.25rem);
-    color: var(--hitl-approved-color, #16a34a);
+    color: var(--hitl-approved-color, #166534);
   }
 
-  .completion-icon svg {
+  /* :global() rather than the plain scoped selector: sui-hitl's wrapper mirrors
+     this file's default SVG into a <slot> fallback so the icon survives when a
+     consumer slots nothing, and that markup is written in a different .svelte
+     file -- Svelte's scoped-style hash is only ever added to elements written in
+     THIS file's own template, so an unscoped selector is the only one that also
+     matches the mirrored copy. Same idiom as Checkbox.wc.svelte's `.icon :global(svg)`. */
+  .completion-icon :global(svg) {
     width: 100%;
     height: 100%;
   }
@@ -595,7 +608,7 @@
   .completion-text {
     font-size: var(--hitl-completion-font-size, 0.875rem);
     font-weight: var(--hitl-completion-font-weight, 600);
-    color: var(--hitl-approved-color, #16a34a);
+    color: var(--hitl-approved-color, light-dark(#15803d, #4ade80));
   }
 
   .completion-text.halted {
@@ -623,4 +636,17 @@
       opacity: 1;
     }
   }
+
+  /* Two entrance animations: a slide-in and a fade-in. `animation: none` is safe
+     for both -- an entrance animates FROM an offset TO the resting state, so
+     removing it shows the resting state immediately, which is the frame the
+     animation was travelling towards anyway. That is the opposite of the timed
+     loaders in Button and ListItem, where the base rule is the FINISHED state and
+     stopping the animation would claim completion that has not happened. */
+  @media (prefers-reduced-motion: reduce) {
+    .hitl-container,
+    .hitl-completion {
+      animation: none;
+    }
+  }
 </style>

package/dist/Icon/Icon.svelte

@@ -3,14 +3,30 @@
   import type { IconProperties } from './properties';
 
   let { icon, svg, text, onclick, onkeydown, classes, testId }: IconProperties = $props();
+
+  // A decorative icon is not a control. Without a click handler it keeps no button
+  // role and stays out of the tab order, rather than being a focusable no-op that
+  // assistive technology announces as a button.
+  const interactive = $derived(typeof onclick === 'function');
+
+  function handleKeydown(event: KeyboardEvent): void {
+    onkeydown?.(event);
+    if (!interactive || (event.key !== 'Enter' && event.key !== ' ')) {
+      return;
+    }
+    event.preventDefault();
+    if (event.currentTarget instanceof HTMLElement) {
+      event.currentTarget.click();
+    }
+  }
 </script>
 
 <div
   class="icon-container {classes ?? ''}"
   {onclick}
-  {onkeydown}
-  role="button"
-  tabindex="0"
+  onkeydown={handleKeydown}
+  role={interactive ? 'button' : null}
+  tabindex={interactive ? 0 : null}
   data-pw={typeof testId === 'string' ? testId : null}
   testID={typeof testId === 'string' ? testId : null}
 >