@juspay/svelte-ui-components 2.134.1 → 2.136.0

package/dist/Chat/Chat.svelte

@@ -3,7 +3,7 @@
   import ChatMessageList from '../ChatMessageList/ChatMessageList.svelte';
   import ChatComposer from '../ChatComposer/ChatComposer.svelte';
   import ChatSuggestions from '../ChatSuggestions/ChatSuggestions.svelte';
-  import ChatToolStatus from '../ChatToolStatus/ChatToolStatus.svelte';
+  import ThinkingIndicator from '../ThinkingIndicator/ThinkingIndicator.svelte';
   import type { ChatProperties } from './properties';
 
   let {
@@ -18,6 +18,11 @@
     streaming = false,
     recording = false,
     autoscroll = true,
+    scrollPolicy = 'near-bottom',
+    pinHold = false,
+    jump = true,
+    jumpLabel = 'Jump to latest',
+    jumpIcon,
     toolStatus = null,
     suggestions = [],
     attachments = $bindable([]),
@@ -46,6 +51,7 @@
     onattach,
     onretry,
     onfeedback,
+    onscrollstate,
     testId,
     classes
   }: ChatProperties = $props();
@@ -92,6 +98,11 @@
   <ChatMessageList
     {messages}
     {autoscroll}
+    {scrollPolicy}
+    {pinHold}
+    {jump}
+    {jumpLabel}
+    {jumpIcon}
     {message}
     {messageBody}
     {messageAttachments}
@@ -99,6 +110,7 @@
     {allowCopy}
     {onretry}
     {onfeedback}
+    {onscrollstate}
   />
 
   <div class="footer">
@@ -106,7 +118,7 @@
       <ChatSuggestions items={suggestions} {disabled} onselect={handleSuggestion} />
     {/if}
     {#if toolStatus !== null}
-      <div class="tool-status"><ChatToolStatus label={toolStatus.label} /></div>
+      <div class="tool-status"><ThinkingIndicator label={toolStatus.label} variant="chip" /></div>
     {/if}
     <ChatComposer
       bind:value
@@ -156,5 +168,29 @@
   .tool-status {
     display: flex;
     justify-content: var(--chat-tool-status-justify, center);
+    /* This row is ThinkingIndicator's chip variant internally now, not the standalone
+       ChatToolStatus component -- but its public theming contract stays
+       --chat-tool-status-*, unchanged, so an existing consumer's overrides keep working
+       exactly as before. Defaults below match ChatToolStatus's own byte for byte. */
+    --thinking-indicator-chip-gap: var(--chat-tool-status-gap, 8px);
+    --thinking-indicator-chip-padding: var(--chat-tool-status-padding, 8px 14px);
+    --thinking-indicator-chip-background: var(--chat-tool-status-background, #ffffff);
+    --thinking-indicator-chip-border: var(--chat-tool-status-border, 1px solid #e4e4e7);
+    --thinking-indicator-chip-border-radius: var(--chat-tool-status-border-radius, 999px);
+    --thinking-indicator-chip-box-shadow: var(
+      --chat-tool-status-box-shadow,
+      0 6px 20px rgba(0, 0, 0, 0.08)
+    );
+    --thinking-indicator-chip-max-width: var(--chat-tool-status-max-width, 100%);
+    --thinking-indicator-chip-color: var(--chat-tool-status-color, #52525b);
+    --thinking-indicator-chip-font-size: var(--chat-tool-status-font-size, 0.85rem);
+    --thinking-indicator-chip-font-weight: var(--chat-tool-status-font-weight, 500);
+    --thinking-indicator-chip-icon-color: var(--chat-tool-status-indicator-color, currentColor);
+    --thinking-indicator-chip-spinner-color: var(--chat-tool-status-spinner-color, currentColor);
+    --thinking-indicator-chip-spinner-color-end: var(
+      --chat-tool-status-spinner-color-end,
+      transparent
+    );
+    --thinking-indicator-chip-spinner-size: var(--chat-tool-status-spinner-size, 14px);
   }
 </style>

package/dist/Chat/properties.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { ChatMessageData, ChatToolStatus } from './types';
 import type { ChatMessageFeedback } from '../ChatMessage/properties';
+import type { ChatMessageListProperties } from '../ChatMessageList/properties';
 import type { ChatSuggestion } from '../ChatSuggestions/properties';
 export type ChatProperties = OptionalChatProperties & ChatEventProperties & MandatoryChatProperties;
 export type MandatoryChatProperties = {
@@ -17,6 +18,11 @@ export type OptionalChatProperties = {
     streaming?: boolean;
     recording?: boolean;
     autoscroll?: boolean;
+    scrollPolicy?: ChatMessageListProperties['scrollPolicy'];
+    pinHold?: ChatMessageListProperties['pinHold'];
+    jump?: ChatMessageListProperties['jump'];
+    jumpLabel?: ChatMessageListProperties['jumpLabel'];
+    jumpIcon?: ChatMessageListProperties['jumpIcon'];
     toolStatus?: ChatToolStatus | null;
     suggestions?: ChatSuggestion[];
     attachments?: File[];
@@ -50,4 +56,5 @@ export type ChatEventProperties = {
     onattach?: (files: File[]) => void;
     onretry?: () => void;
     onfeedback?: (value: ChatMessageFeedback, message: ChatMessageData) => void;
+    onscrollstate?: ChatMessageListProperties['onscrollstate'];
 };

package/dist/ChatMessageList/ChatMessageList.svelte

@@ -35,6 +35,11 @@
   let atBottom = $state(true);
   let scrollable = $state(false);
   let pinActive = false;
+  // Set when a turn without pinHold has asked for its reservation back, but the reply is not yet
+  // tall enough to hold the pinned position without it. Cleared by tryReleasePin.
+  let pinReleasePending = false;
+  // The scroll offset the pin put the sender message at, so a later release can restore it.
+  let pinnedScrollTop = 0;
 
   let scrollKey = $derived(`${messages.length}:${messages.at(-1)?.content.length ?? 0}`);
   let showJump = $derived(!atBottom && messages.length > 0);
@@ -133,7 +138,13 @@
     pinActive = true;
     const listRect = listEl.getBoundingClientRect();
     const paddingTop = Number.parseFloat(getComputedStyle(listEl).paddingTop) || 0;
-    listEl.scrollTop += targetRect.top - listRect.top - paddingTop;
+    // This is a layout correction, not a reader-initiated scroll, so it must land instantly.
+    // .chat-message-list sets scroll-behavior: smooth, under which `scrollTop = x` starts an
+    // ANIMATION: scrollTop still reads its old value on the next line, and anything that shrinks
+    // the scrollable range before the animation finishes clamps it partway. Releasing the
+    // reservation does exactly that, which is how the pin was being lost.
+    pinnedScrollTop = listEl.scrollTop + (targetRect.top - listRect.top - paddingTop);
+    listEl.scrollTo({ top: pinnedScrollTop, behavior: 'instant' });
     reportScrollState(listEl);
   }
 
@@ -142,11 +153,45 @@
       innerEl.style.minHeight = '';
     }
     pinActive = false;
+    pinReleasePending = false;
     if (listEl !== null) {
       reportScrollState(listEl);
     }
   }
 
+  /**
+   * Give the reserved headroom back only once the turn's own content can hold the pinned position.
+   *
+   * The reservation is what makes the sender message able to sit at the top at all. Clearing it
+   * while the reply is still shorter than the frame shrinks the scrollable range below the pinned
+   * offset, the browser clamps, and the question slides back down -- on short answers, which is
+   * where pinning matters most. So measure rather than assume: lift the reservation, check whether
+   * the natural content still reaches the pinned offset, and put it straight back if it does not.
+   * Reply growth re-runs this through the resize observer, so the reservation disappears by itself
+   * the moment it stops being load-bearing.
+   */
+  function tryReleasePin(): void {
+    if (!pinReleasePending || listEl === null || innerEl === null) {
+      return;
+    }
+    const reserved = innerEl.style.minHeight;
+    // Lifting the reservation to measure also shrinks the scrollable range, and the browser
+    // clamps scrollTop to the smaller maximum the moment it does. Putting the reservation back
+    // does NOT undo that clamp, so the probe would silently destroy the very position it is
+    // checking. Restore the offset explicitly on both paths.
+    innerEl.style.minHeight = '';
+    const naturalMaxScroll = listEl.scrollHeight - listEl.clientHeight;
+    if (naturalMaxScroll >= pinnedScrollTop) {
+      listEl.scrollTo({ top: pinnedScrollTop, behavior: 'instant' });
+      pinActive = false;
+      pinReleasePending = false;
+      reportScrollState(listEl);
+      return;
+    }
+    innerEl.style.minHeight = reserved;
+    listEl.scrollTo({ top: pinnedScrollTop, behavior: 'instant' });
+  }
+
   const pinToBottom: Action<HTMLElement, string> = (node) => {
     let previousCount = messages.length;
     let previousSenderId = lastSenderId();
@@ -162,6 +207,13 @@
         if (newMessage && senderId !== null && senderId !== previousSenderId) {
           queueMicrotask(() => {
             pinLatestSenderMessage();
+            // A host opts into reserved reply headroom with pinHold. Without it the reservation
+            // is still doing work until the reply itself can hold the pin, so mark it for release
+            // and let tryReleasePin decide when that is actually true.
+            if (!pinHold) {
+              pinReleasePending = true;
+              tryReleasePin();
+            }
           });
         }
         previousSenderId = senderId;
@@ -194,6 +246,7 @@
       if (scrollPolicy === 'near-bottom' && autoscroll && atBottom) {
         listEl.scrollTop = listEl.scrollHeight;
       }
+      tryReleasePin();
       reportScrollState(listEl);
     });
     observer.observe(node);

package/dist/CheckListItem/CheckListItem.svelte

@@ -45,7 +45,6 @@
   }
 
   .container.disabled {
-    opacity: var(--check-list-item-disabled-opacity, 0.4);
     cursor: not-allowed;
   }
 
@@ -53,6 +52,10 @@
     flex-shrink: 0;
   }
 
+  .container.disabled .checkbox-wrapper {
+    --checkbox-disabled-opacity: var(--check-list-item-disabled-opacity, 0.4);
+  }
+
   .text {
     font-size: var(--check-list-item-text-size, 14px);
     color: var(--check-list-item-text-color);

package/dist/ChipInput/ChipInput.svelte

@@ -8,15 +8,26 @@
     ariaLabel,
     placeholder = 'Add value…',
     disabled = false,
+    editable = false,
     testId,
     classes,
     onadd,
     ondismiss,
+    onedit,
     onchange
   }: ChipInputProperties = $props();
 
   let draft = $state('');
 
+  // The chip currently swapped for an inline edit field, held by VALUE rather than by slot
+  // index. `values` is dedup-only by construction, so the text is a stable identity, and it is
+  // already what the {#each} is keyed by. An index is only a position: if the parent reorders or
+  // removes entries while an edit is open, the same index points at a different chip and the
+  // commit lands on the wrong one. Only one chip can be mid-edit at a time.
+  let editingChip = $state<string | null>(null);
+  let editDraft = $state('');
+  let editInputRef = $state<{ focus: () => void } | null>(null);
+
   function addChip(): void {
     const trimmed = draft.trim();
     draft = '';
@@ -38,6 +49,11 @@
       return;
     }
     values = [...values.slice(0, chipIndex), ...values.slice(chipIndex + 1)];
+    // Identity survives a delete elsewhere in the list, so only the edited chip's own removal
+    // has to close the field. No index fix-up is needed.
+    if (editingChip === chip) {
+      cancelEdit();
+    }
     ondismiss?.(chip);
     onchange?.([...values]);
   }
@@ -48,18 +64,106 @@
       addChip();
     }
   }
+
+  function startEdit(chip: string): void {
+    if (disabled) {
+      return;
+    }
+    editingChip = chip;
+    editDraft = chip;
+    queueMicrotask(() => editInputRef?.focus());
+  }
+
+  function cancelEdit(): void {
+    editingChip = null;
+    editDraft = '';
+  }
+
+  // A commit is only ever valid while the component is enabled and the chip it started on is
+  // still present. `disabled` can flip mid-edit, and a pending blur can arrive after it does.
+  //
+  // Together with the `!disabled` guard on the edit field's {#if}, this is what makes disabling
+  // mid-edit safe without an $effect: the field stops rendering, and any Enter or blur already in
+  // flight is refused here rather than writing to `values` behind a disabled control.
+  function commitEdit(chip: string): void {
+    if (disabled) {
+      cancelEdit();
+      return;
+    }
+    const index = values.indexOf(chip);
+    if (index === -1) {
+      cancelEdit();
+      return;
+    }
+    const original = chip;
+    const trimmed = editDraft.trim();
+    const isUnchanged = trimmed === original;
+    // Mirrors addChip's dedup-only contract: a blank edit or one that collides with a
+    // DIFFERENT existing chip is silently discarded rather than surfaced as an error.
+    const isBlankOrDuplicate = trimmed.length === 0 || (!isUnchanged && values.includes(trimmed));
+    if (isUnchanged || isBlankOrDuplicate) {
+      cancelEdit();
+      return;
+    }
+    values = values.map((value, valueIndex) => (valueIndex === index ? trimmed : value));
+    onedit?.(trimmed, original);
+    onchange?.([...values]);
+    cancelEdit();
+  }
+
+  function handleEditKeyDown(event: KeyboardEvent, chip: string): void {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      commitEdit(chip);
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      cancelEdit();
+    }
+  }
+
+  function handleEditBlur(chip: string): void {
+    if (editingChip !== chip) {
+      // Already resolved (Escape, or the chip removed) before this trailing blur arrived --
+      // committing again would act on an edit that is no longer open.
+      return;
+    }
+    commitEdit(chip);
+  }
 </script>
 
 <div class="chip-input {classes ?? ''}" data-pw={testId} testID={testId}>
-  {#each values as chip (chip)}
-    <Pill
-      text={chip}
-      classes="chip-input-pill"
-      dismissible={!disabled}
-      {disabled}
-      ondismiss={() => removeChip(chip)}
-      {...typeof testId === 'string' ? { testId: `${testId}-chip` } : {}}
-    />
+  {#each values as chip, index (chip)}
+    {#if editable && editingChip === chip && !disabled}
+      <div class="chip-input-edit-wrap">
+        <Input
+          value={editDraft}
+          dataType="text"
+          name=""
+          autoComplete="off"
+          actionInput={false}
+          classes="chip-input-edit"
+          bind:this={editInputRef}
+          onInput={(nextValue) => {
+            editDraft = nextValue;
+          }}
+          onKeyDown={(event) => handleEditKeyDown(event, chip)}
+          onBlur={() => handleEditBlur(chip)}
+          {...typeof testId === 'string' ? { testId: `${testId}-item-${index}-edit` } : {}}
+        />
+      </div>
+    {:else}
+      <Pill
+        text={chip}
+        classes="chip-input-pill"
+        dismissible={!disabled}
+        {disabled}
+        ondismiss={() => removeChip(chip)}
+        {...editable && !disabled
+          ? { title: `Edit "${chip}"`, onclick: () => startEdit(chip) }
+          : {}}
+        {...typeof testId === 'string' ? { testId: `${testId}-item-${index}` } : {}}
+      />
+    {/if}
   {/each}
   <div class="chip-input-draft-wrap">
     <Input
@@ -77,7 +181,7 @@
       }}
       onKeyDown={handleKeyDown}
       onBlur={addChip}
-      {...typeof testId === 'string' ? { testId: `${testId}-input` } : {}}
+      {...typeof testId === 'string' ? { testId: `${testId}-add` } : {}}
     />
   </div>
 </div>
@@ -126,6 +230,10 @@
     flex: var(--chip-input-draft-flex, 0 1 auto);
   }
 
+  .chip-input-edit-wrap {
+    flex: var(--chip-input-edit-flex, 0 1 auto);
+  }
+
   .chip-input :global(.chip-input-pill) {
     --pill-gap: var(--chip-input-pill-gap, var(--chip-input-pill-gap-default));
     --pill-background: var(--chip-input-pill-background, var(--chip-input-pill-background-default));
@@ -170,4 +278,36 @@
     --input-margin: 0;
     --input-box-shadow: none;
   }
+
+  /* The in-place edit field replaces a Pill for the duration of one edit, so it reuses the same
+     captured --input-* cascade (--chip-input-draft-*-default, above) the draft field maps from --
+     an app that themes Input app-wide gets a matching edit field for free. Only sizing/padding
+     get their own --chip-input-edit-* tokens: the field holds an EXISTING (often longer) value
+     rather than a short in-progress draft, so it defaults wider. */
+  .chip-input-edit-wrap :global(.chip-input-edit) {
+    --input-width: var(--chip-input-edit-width, 110px);
+    --input-height: var(--chip-input-edit-height, 28px);
+    /* Fall through the DRAFT token before the captured default: the edit field is the same
+       control as the draft field, wearing the same clothes, so a consumer who themed the draft
+       with --chip-input-draft-* must get a matching edit field without naming it twice. */
+    --input-border: var(
+      --chip-input-edit-border,
+      var(--chip-input-draft-border, var(--chip-input-draft-border-default))
+    );
+    --input-radius: var(
+      --chip-input-edit-radius,
+      var(--chip-input-draft-radius, var(--chip-input-draft-radius-default))
+    );
+    --input-focus-border: var(
+      --chip-input-edit-focus-border,
+      var(--chip-input-draft-focus-border, var(--chip-input-draft-focus-border-default))
+    );
+    --input-font-size: var(
+      --chip-input-edit-font-size,
+      var(--chip-input-draft-font-size, var(--chip-input-draft-font-size-default))
+    );
+    --input-padding: var(--chip-input-edit-padding, 0 8px);
+    --input-margin: 0;
+    --input-box-shadow: none;
+  }
 </style>

package/dist/ChipInput/properties.d.ts

@@ -17,12 +17,29 @@ export type OptionalChipInputProperties = {
     ariaLabel?: string;
     placeholder?: string;
     disabled?: boolean;
+    /**
+     * Reach for this when a consumer's chips are prone to being ALMOST right -- a misspelled tag,
+     * a near-correct email -- and forcing a delete-and-retype round trip for every small correction
+     * would be annoying. When `true`, activating a committed chip (click, or Enter/Space once
+     * tabbed to it) swaps it for an inline text field pre-filled with its current value: Enter or
+     * blurring the field commits the edit back into `values`, Escape restores the original text and
+     * leaves `values` untouched. An edit that comes back blank or duplicates another chip is
+     * silently discarded, same as a blank/duplicate draft on add. Defaults to `false` -- chips stay
+     * display-only and the only way to change one is still to delete it and retype it, unchanged
+     * from before this prop existed.
+     */
+    editable?: boolean;
     testId?: string;
     classes?: string;
 };
 export type ChipInputEventProperties = {
     onadd?: (value: string) => void;
     ondismiss?: (value: string) => void;
-    /** Fires alongside `onadd`/`ondismiss`, after either has already updated `values`. */
+    /**
+     * Fires after an in-place edit (see `editable`) commits a value that actually changed. Not
+     * fired when the edit is cancelled (Escape) or committed with the text unchanged.
+     */
+    onedit?: (value: string, previousValue: string) => void;
+    /** Fires alongside `onadd`/`ondismiss`/`onedit`, after any of them has already updated `values`. */
     onchange?: (values: string[]) => void;
 };

package/dist/CommandMenu/CommandMenu.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { CommandMenuProperties, CommandItem } from './properties';
   import { tick, onMount, onDestroy } from 'svelte';
+  import { lockBodyScroll, unlockBodyScroll } from '../utils';
   import { SvelteMap } from 'svelte/reactivity';
   import Img from '../Img/Img.svelte';
   import searchSvg from '../assets/search.svg?raw';
@@ -161,8 +162,12 @@
     }
   }
 
+  // Lock and unlock strictly in this action so the pairing is 1:1. Svelte destroys
+  // the action when the node goes away, including on component teardown, so the
+  // onDestroy below must NOT unlock as well: with a shared reference count a second
+  // decrement would release a lock another open surface still needs.
   function scrollLockAction(_node: HTMLElement) {
-    document.body.style.overflow = 'hidden';
+    lockBodyScroll();
     tick().then(() => {
       if (inputElement !== null) {
         inputElement.focus();
@@ -170,7 +175,7 @@
     });
     return {
       destroy() {
-        document.body.style.overflow = '';
+        unlockBodyScroll();
       }
     };
   }
@@ -181,7 +186,6 @@
 
   onDestroy(() => {
     if (typeof window !== 'undefined') {
-      document.body.style.overflow = '';
       window.removeEventListener('keydown', handleGlobalKeyDown);
     }
   });

package/dist/EmptyState/EmptyState.svelte

@@ -23,7 +23,11 @@
       {@render icon()}
     </div>
   {/if}
-  <div class="empty-state-title">
+  <div
+    class="empty-state-title"
+    data-pw={typeof testId === 'string' ? `${testId}-title` : null}
+    testID={typeof testId === 'string' ? `${testId}-title` : null}
+  >
     {#if typeof titleSnippet === 'function'}
       {@render titleSnippet()}
     {:else}
@@ -31,11 +35,21 @@
     {/if}
   </div>
   {#if typeof descriptionSnippet === 'function'}
-    <div class="empty-state-description">
+    <div
+      class="empty-state-description"
+      data-pw={typeof testId === 'string' ? `${testId}-description` : null}
+      testID={typeof testId === 'string' ? `${testId}-description` : null}
+    >
       {@render descriptionSnippet()}
     </div>
   {:else if typeof description === 'string' && description.length > 0}
-    <div class="empty-state-description">{description}</div>
+    <div
+      class="empty-state-description"
+      data-pw={typeof testId === 'string' ? `${testId}-description` : null}
+      testID={typeof testId === 'string' ? `${testId}-description` : null}
+    >
+      {description}
+    </div>
   {/if}
   {#if typeof children === 'function'}
     <div class="empty-state-actions">

package/dist/Input/Input.svelte

@@ -571,6 +571,7 @@
 
   .input-icon-left {
     left: var(--input-icon-gap, 12px);
+    color: var(--input-left-icon-color, var(--input-icon-color, inherit));
   }
 
   .input-icon-right {

package/dist/ListItem/ListItem.svelte

@@ -20,6 +20,7 @@
     showRightContentLoader = false,
     expand = $bindable(false),
     preventFocus = false,
+    suppressRoleAndTabindex = false,
     leftContent,
     centerContent,
     rightContent,
@@ -31,6 +32,7 @@
     ontopSectionClick,
     onkeydown,
     classes,
+    transformSvg,
     role: itemRole,
     ariaSelected,
     id
@@ -68,8 +70,8 @@
       class:prevent-focus={preventFocus}
       onclick={handleItemClick}
       {onkeydown}
-      role={itemRole ?? 'button'}
-      tabindex={itemRole === 'option' ? -1 : 0}
+      role={suppressRoleAndTabindex ? null : (itemRole ?? 'button')}
+      tabindex={suppressRoleAndTabindex ? null : itemRole === 'option' ? -1 : 0}
       aria-selected={ariaSelected}
       {id}
       data-pw={testId}
@@ -80,8 +82,8 @@
         class:prevent-focus={preventFocus}
         onclick={handleTopSectionClick}
         {onkeydown}
-        role="button"
-        tabindex="0"
+        role={suppressRoleAndTabindex ? null : 'button'}
+        tabindex={suppressRoleAndTabindex ? null : 0}
         data-pw={topSectionTestId}
         testID={topSectionTestId}
       >
@@ -91,12 +93,12 @@
               class:prevent-focus={preventFocus}
               onclick={handleLeftImageClick}
               {onkeydown}
-              role="button"
-              tabindex="0"
+              role={suppressRoleAndTabindex ? null : 'button'}
+              tabindex={suppressRoleAndTabindex ? null : 0}
               data-pw={leftImageTestId}
               testID={leftImageTestId}
             >
-              <Img src={leftImageUrl} alt="" fallback={leftImageFallbackUrl} />
+              <Img src={leftImageUrl} alt="" fallback={leftImageFallbackUrl} {transformSvg} />
             </div>
           {/if}
           {#if typeof leftContent === 'function'}
@@ -110,8 +112,8 @@
               class:prevent-focus={preventFocus}
               onclick={handleCenterTextClick}
               {onkeydown}
-              role="button"
-              tabindex="0"
+              role={suppressRoleAndTabindex ? null : 'button'}
+              tabindex={suppressRoleAndTabindex ? null : 0}
               data-pw={centerTextTestId}
               testID={centerTextTestId}
             >
@@ -132,13 +134,13 @@
               class:prevent-focus={preventFocus}
               onclick={handleRightImageClick}
               {onkeydown}
-              role="button"
-              tabindex="0"
+              role={suppressRoleAndTabindex ? null : 'button'}
+              tabindex={suppressRoleAndTabindex ? null : 0}
               data-pw={rightImageTestId}
               testID={rightImageTestId}
             >
               <div class="right-img-wrapper">
-                <Img src={rightImageUrl} alt="" />
+                <Img src={rightImageUrl} alt="" {transformSvg} />
               </div>
             </div>
           {/if}

package/dist/ListItem/properties.d.ts

@@ -3,6 +3,8 @@ export type ListItemProperties = ListItemEventProperties & {
     leftImageUrl?: string | null;
     leftImageFallbackUrl?: string | null;
     rightImageUrl?: string | null;
+    /** Rewrites SVG markup before either image is inlined. Providing it enables SVG inlining. */
+    transformSvg?: (svg: string) => string;
     label?: string | null;
     useAccordion?: boolean;
     rightContentText?: string | null;
@@ -15,6 +17,11 @@ export type ListItemProperties = ListItemEventProperties & {
     showRightContentLoader?: boolean;
     expand?: boolean;
     preventFocus?: boolean;
+    /**
+     * Removes ListItem's synthetic roles and tab stops while retaining its mouse handlers.
+     * Opt in when an ancestor or consumer supplies the semantic interactive control.
+     */
+    suppressRoleAndTabindex?: boolean;
     leftContent?: Snippet;
     centerContent?: Snippet;
     rightContent?: Snippet;

package/dist/Menu/Menu.svelte

@@ -15,6 +15,7 @@
     onopen,
     onclose,
     classes,
+    transformSvg,
     selectedValue = null,
     role: menuRole = 'menu',
     ariaLabel: menuAriaLabel,
@@ -474,7 +475,7 @@
                 <!-- Inline the SVG so currentColor strokes/fills inherit the item's
                      text colour (danger items tint their icon red, dark theme works);
                      non-SVG URLs fall back to the plain <img> render automatically. -->
-                <Img inlineSvg src={item.icon} alt="" fallback="" />
+                <Img inlineSvg src={item.icon} alt="" fallback="" {transformSvg} />
               </span>
             {/if}
             <span class="menu-item-label">{item.label}</span>

package/dist/Menu/properties.d.ts

@@ -52,6 +52,8 @@ export type OptionalMenuProperties = {
      */
     interactiveTrigger?: boolean;
     classes?: string;
+    /** Rewrites each item icon's SVG markup before it is inlined. */
+    transformSvg?: (svg: string) => string;
     /** Value of the currently selected item. When set, opening the menu focuses the
      * selected option instead of the first item, the matching item gets the
      * `menu-item-selected` class (stylable via --menu-item-selected-*), and