@juspay/svelte-ui-components 2.136.0 → 2.136.7

package/dist/BrandLoader/BrandLoader.svelte

@@ -32,8 +32,15 @@
   }
 
   .loader {
-    height: var(--loader-height, 100vh);
-    width: var(--loader-width, 100vw);
+    /* --loader-height/--loader-width are also independently read by the
+       unrelated Loader component (with a 20px default there, vs 100vh/100vw
+       here), so a consumer setting either name in a scope containing both
+       components would size them identically. --brand-loader-* is the
+       namespaced, collision-free override point; the legacy --loader-*
+       names are kept as a fallback so existing consumer overrides keep
+       working unchanged. */
+    height: var(--brand-loader-height, var(--loader-height, 100vh));
+    width: var(--brand-loader-width, var(--loader-width, 100vw));
     border-radius: var(--loader-background-border-radius, 0px);
     display: flex;
     justify-content: var(--loader-justify-content, center);

package/dist/Button/Button.svelte

@@ -232,7 +232,8 @@
     opacity: var(--opacity, 1);
     border: var(--button-border, var(--_btn-border, none));
     box-sizing: border-box;
-    text-decoration: none;
+    text-decoration: var(--button-text-decoration, none);
+    line-height: var(--button-line-height, normal);
     display: flex;
     justify-content: var(--button-justify-content, center);
     align-items: center;
@@ -255,6 +256,7 @@
     color: var(--disabled-text-color, var(--button-text-color, var(--_btn-text-color, white)));
     font-size: var(--disabled-font-size);
     font-weight: var(--disabled-font-weight);
+    text-decoration: var(--button-disabled-text-decoration, var(--button-text-decoration, none));
     /* Preserve the variant border when disabled so secondary (bordered) stays distinct from ghost. */
     border: var(--disabled-border, var(--button-border, var(--_btn-border, none)));
     background: var(

package/dist/Carousel/Carousel.svelte

@@ -135,6 +135,12 @@
   });
 
   onDestroy(() => {
+    if (carouselDiv) {
+      carouselDiv.removeEventListener('touchstart', handleTouchStart);
+      carouselDiv.removeEventListener('touchend', handleTouchEnd);
+      carouselDiv.removeEventListener('mousedown', handleMouseDown);
+      carouselDiv.removeEventListener('mouseup', handeMouseUp);
+    }
     if (autoplay) {
       clearInterval(intervalId);
     }
@@ -151,11 +157,15 @@
       <div class="slidesDiv" bind:this={slidesDiv}>
         {#each views as view, index (index)}
           <div class="current-slide">
-            {#if typeof view.properties === 'object'}
-              <view.component properties={view.properties} />
-            {:else}
-              <view.component />
-            {/if}
+            <!-- Spread is the real fix: every component in this library takes named
+                 props, so passing the bag under a single `properties` key meant a
+                 normal slide rendered empty. `properties` is ALSO still passed so
+                 that a consumer who built a purpose-made wrapper around the old
+                 behaviour keeps working -- that wrapper was the only shape this
+                 component was usable with before, and breaking it would force a
+                 major bump for a fix that is otherwise additive. Deprecated: read
+                 the named props, not `properties`. -->
+            <view.component {...view.properties} properties={view.properties} />
           </div>
         {/each}
       </div>
@@ -172,7 +182,13 @@
         <div
           class={activeSlideIndex == index ? 'active-dot' : 'dot'}
           onclick={() => moveSlideToIndex(index)}
-          {onkeydown}
+          onkeydown={(event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+              event.preventDefault();
+              moveSlideToIndex(index);
+            }
+            onkeydown?.(event);
+          }}
           role="button"
           tabindex="0"
           aria-label={`Go to slide ${index + 1}`}
@@ -182,6 +198,13 @@
       {/each}
     </div>
   {/if}
+  <!-- Slide changes are silent to assistive tech otherwise: the dots announce
+       where they GO, but nothing announces where the carousel ARRIVED, whether
+       the move came from autoplay, a swipe or a dot. polite so it never
+       interrupts, and atomic so the whole position is read as one phrase. -->
+  <div class="carousel-live-region" aria-live="polite" aria-atomic="true">
+    {#if views.length > 0}Slide {activeSlideIndex + 1} of {views.length}{/if}
+  </div>
 </div>
 
 <style>
@@ -231,6 +254,12 @@
     background: var(--carousel-dot-active-color, #000000);
     transition: 0.3s ease;
   }
+
+  .dot:focus-visible,
+  .active-dot:focus-visible {
+    outline: var(--dot-focus-outline, 2px solid #000000);
+    outline-offset: var(--dot-focus-outline-offset, 2px);
+  }
   /*
   @media only screen and (max-width: 324px) {
 
@@ -258,4 +287,19 @@
     }
 
   } */
+
+  /* Visually hidden but readable by assistive tech -- the standard clip pattern
+     rather than display:none, which would remove it from the a11y tree. */
+  .carousel-live-region {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
 </style>

package/dist/Chat/types.d.ts

@@ -6,6 +6,11 @@ export type ChatMessageData = {
     role: ChatRole;
     content: string;
     html?: string;
+    /**
+     * Markdown source rendered through the library's sanitized pipeline (see
+     * MarkdownText). Wins over `html` and `content` in the bubble.
+     */
+    markdown?: string;
     streaming?: boolean;
     status?: ChatMessageStatus;
     timestamp?: number;

package/dist/ChatMessage/ChatMessage.svelte

@@ -6,6 +6,7 @@
   import retrySvg from '../assets/retry.svg?raw';
   import thumbUpSvg from '../assets/thumb-up.svg?raw';
   import thumbDownSvg from '../assets/thumb-down.svg?raw';
+  import { onDestroy, onMount } from 'svelte';
   import { partyOf } from '../Chat/roles';
   import type { ChatMessageProperties } from './properties';
 
@@ -13,6 +14,7 @@
     role,
     content = '',
     html,
+    markdown,
     body,
     streaming = false,
     status,
@@ -37,7 +39,34 @@
   let copied = $state(false);
   let copyResetTimer: ReturnType<typeof setTimeout> | null = null;
 
-  let hasHtml = $derived(typeof html === 'string' && html.length > 0);
+  onDestroy(() => {
+    if (copyResetTimer !== null) {
+      clearTimeout(copyResetTimer);
+    }
+  });
+
+  let hasMarkdown = $derived(typeof markdown === 'string' && markdown.length > 0);
+
+  /* The pipeline loads dynamically at mount (the LottiePlayer pattern) so
+     `marked` — a peer dependency — is only pulled in at runtime, never during
+     SSR, and rendering `markdown` degrades to the `html`/`content` fallback
+     until the module resolves or when the peer is absent. */
+  let renderMarkdownFn = $state<((source: string) => string) | null>(null);
+
+  onMount(() => {
+    void import('../MarkdownText/markdown')
+      .then((module) => {
+        renderMarkdownFn = module.renderMarkdown;
+      })
+      .catch(() => {
+        renderMarkdownFn = null;
+      });
+  });
+
+  let effectiveHtml = $derived(
+    hasMarkdown && renderMarkdownFn !== null ? renderMarkdownFn(markdown ?? '') : html
+  );
+  let hasHtml = $derived(typeof effectiveHtml === 'string' && effectiveHtml.length > 0);
   let hasBody = $derived(typeof body === 'function');
   let hasContent = $derived(hasBody || hasHtml || content.length > 0);
   let showTyping = $derived(streaming && !hasContent);
@@ -55,7 +84,14 @@
   }
 
   async function copy(): Promise<void> {
-    const text = content.length > 0 ? content : typeof html === 'string' ? htmlToText(html) : '';
+    const text =
+      content.length > 0
+        ? content
+        : hasMarkdown
+          ? (markdown ?? '')
+          : typeof html === 'string'
+            ? htmlToText(html)
+            : '';
     if (typeof navigator !== 'undefined' && typeof navigator.clipboard?.writeText === 'function') {
       try {
         await navigator.clipboard.writeText(text);
@@ -97,7 +133,7 @@
           <div class="body">{@render body?.()}</div>
         {:else if hasHtml}
           <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-          <div class="body">{@html html}</div>
+          <div class="body">{@html effectiveHtml}</div>
         {:else if content.length > 0}
           <div class="body text">{content}</div>
         {/if}
@@ -331,4 +367,79 @@
     background: transparent;
     padding: 0;
   }
+
+  .body :global(ul),
+  .body :global(ol) {
+    margin: var(--chat-message-list-margin, 0.4em 0);
+    padding-left: var(--chat-message-list-padding, 1.4em);
+  }
+
+  .body :global(li) {
+    margin: 0.2em 0;
+  }
+
+  .body :global(h1),
+  .body :global(h2),
+  .body :global(h3),
+  .body :global(h4),
+  .body :global(h5),
+  .body :global(h6) {
+    margin: var(--chat-message-heading-margin, 0.8em 0 0.4em 0);
+    line-height: 1.3;
+  }
+
+  .body :global(h1) {
+    font-size: 1.35em;
+  }
+
+  .body :global(h2) {
+    font-size: 1.2em;
+  }
+
+  .body :global(h3) {
+    font-size: 1.1em;
+  }
+
+  .body :global(h4),
+  .body :global(h5),
+  .body :global(h6) {
+    font-size: 1em;
+  }
+
+  .body :global(blockquote) {
+    margin: 0.5em 0;
+    padding: 2px 0 2px 12px;
+    border-left: 3px solid var(--chat-message-blockquote-border-color, rgba(0, 0, 0, 0.15));
+    opacity: var(--chat-message-blockquote-opacity, 0.85);
+  }
+
+  .body :global(table) {
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+    border-collapse: collapse;
+    margin: 0.5em 0;
+  }
+
+  .body :global(th),
+  .body :global(td) {
+    padding: 5px 10px;
+    border: 1px solid var(--chat-message-table-border-color, rgba(0, 0, 0, 0.12));
+    text-align: left;
+  }
+
+  .body :global(th) {
+    background: var(--chat-message-table-header-background, rgba(0, 0, 0, 0.04));
+  }
+
+  .body :global(img) {
+    max-width: 100%;
+    border-radius: var(--chat-message-image-border-radius, 8px);
+  }
+
+  .body :global(hr) {
+    border: none;
+    border-top: 1px solid var(--chat-message-hr-color, rgba(0, 0, 0, 0.12));
+    margin: 0.8em 0;
+  }
 </style>

package/dist/ChatMessage/properties.d.ts

@@ -8,6 +8,18 @@ export type MandatoryChatMessageProperties = {
 export type OptionalChatMessageProperties = {
     content?: string;
     html?: string;
+    /**
+     * Markdown source rendered through the library's sanitized-by-construction
+     * pipeline (raw HTML is escaped; unsafe link/image protocols are stripped) —
+     * unlike `html`, which must arrive pre-sanitized. Non-empty `markdown` takes
+     * precedence over `html` and `content`; a `body` snippet still wins. An
+     * empty string is treated as absent and falls through, exactly like `html`.
+     * Also serves as the copy text when `content` is empty. The pipeline loads
+     * on demand, so the `marked` peer is only needed when this prop is used;
+     * during SSR and while loading, `html`/`content` render as the fallback
+     * (for server-rendered markdown use `MarkdownText` or `renderMarkdown`).
+     */
+    markdown?: string;
     /**
      * Replaces the rendered bubble body with arbitrary markup while keeping the
      * message chrome (role styling, avatar, header, attachments, copy/retry/

package/dist/ChatMessageList/ChatMessageList.svelte

@@ -300,6 +300,7 @@
           role={msg.role}
           content={msg.content}
           html={msg.html}
+          markdown={msg.markdown}
           body={typeof messageBody === 'function' ? bodyFor : null}
           streaming={msg.streaming}
           status={msg.status}

package/dist/Choicebox/Choicebox.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
   import type { ChoiceboxProperties } from './properties';
+  import checkmarkSvg from '../assets/checkmark.svg?raw';
 
   let {
     children,
     selected = $bindable(false),
     mode = 'radio',
     disabled = false,
+    showIndicator = true,
     testId,
     onclick,
     classes
@@ -47,6 +49,14 @@
   {#if typeof children === 'function'}
     {@render children()}
   {/if}
+  {#if showIndicator}
+    <span class="indicator {mode}" class:selected aria-hidden="true">
+      {#if mode === 'checkbox' && selected}
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        <span class="indicator-icon">{@html checkmarkSvg}</span>
+      {/if}
+    </span>
+  {/if}
 </div>
 
 <style>
@@ -87,4 +97,49 @@
     opacity: var(--choicebox-disabled-opacity, 0.4);
     cursor: var(--choicebox-disabled-cursor, not-allowed);
   }
+
+  .indicator {
+    flex: 0 0 auto;
+    order: var(--choicebox-indicator-order, 1);
+    margin-inline-start: var(--choicebox-indicator-margin-inline-start, auto);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--choicebox-indicator-size, 20px);
+    height: var(--choicebox-indicator-size, 20px);
+    border: var(--choicebox-indicator-border, 2px solid #757575);
+    background: var(--choicebox-indicator-background, transparent);
+    transition: var(--choicebox-indicator-transition, background 0.2s, border-color 0.2s);
+  }
+
+  .indicator.radio {
+    border-radius: 50%;
+  }
+
+  .indicator.checkbox {
+    border-radius: var(--choicebox-indicator-border-radius, var(--radius, 4px));
+  }
+
+  .indicator.selected {
+    border: var(--choicebox-indicator-selected-border, 2px solid #2196f3);
+    background: var(--choicebox-indicator-selected-background, #2196f3);
+  }
+
+  .indicator.radio.selected {
+    box-shadow: inset 0 0 0 var(--choicebox-indicator-dot-inset, 4px)
+      var(--choicebox-background, #ffffff);
+  }
+
+  .indicator-icon {
+    display: flex;
+    width: var(--choicebox-indicator-icon-size, 14px);
+    height: var(--choicebox-indicator-icon-size, 14px);
+    color: var(--choicebox-indicator-icon-color, #ffffff);
+  }
+
+  .indicator-icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
 </style>

package/dist/Choicebox/properties.d.ts

@@ -6,6 +6,7 @@ export type OptionalChoiceboxProperties = {
     selected?: boolean;
     mode?: ChoiceboxMode;
     disabled?: boolean;
+    showIndicator?: boolean;
     testId?: string;
     classes?: string;
 };

package/dist/Input/Input.svelte

@@ -435,7 +435,12 @@
     </div>
   {/if}
   {#if isShowingInfo}
-    <div id={infoMessageId} class="info-message">
+    <div
+      id={infoMessageId}
+      class="info-message"
+      data-pw={typeof testId === 'string' && testId.length > 0 ? `${testId}-info-message` : null}
+      testID={typeof testId === 'string' && testId.length > 0 ? `${testId}-info-message` : null}
+    >
       {infoMessage}
     </div>
   {/if}
@@ -492,11 +497,11 @@
   .input-error {
     --input-focus-border: var(
       --input-error-border,
-      1px solid var(--input-error-msg-text-color, #fa1405)
+      1px solid var(--input-error-msg-text-color, #c5120a)
     ) !important;
     --input-border: var(
       --input-error-border,
-      1px solid var(--input-error-msg-text-color, #fa1405)
+      1px solid var(--input-error-msg-text-color, #c5120a)
     ) !important;
   }
 
@@ -523,7 +528,7 @@
   }
 
   .input-mandatory-asterisk {
-    color: var(--input-mandatory-color, var(--input-error-msg-text-color, #fa1405));
+    color: var(--input-mandatory-color, var(--input-error-msg-text-color, #c5120a));
     margin-left: var(--input-mandatory-gap, 2px);
   }
 
@@ -591,7 +596,9 @@
   .error-message {
     font-weight: var(--input-error-msg-text-weight, 400);
     font-size: var(--input-error-msg-text-size, 12px);
-    color: var(--input-error-msg-text-color, #fa1405);
+    /* #c5120a clears WCAG AA (6.06:1 on white) at this 12px size; the prior #fa1405
+       default was only 4.06:1, so the error message itself failed to be legible. */
+    color: var(--input-error-msg-text-color, #c5120a);
     margin: var(--input-error-msg-margin);
     padding: var(--input-error-msg-padding);
   }
@@ -599,7 +606,11 @@
   .info-message {
     font-weight: var(--input-info-msg-text-weight, 400);
     font-size: var(--input-info-msg-text-size, 12px);
-    color: var(--input-info-msg-text-color, #fa1405);
+    /* Neutral on purpose -- this used to default to the same red as .error-message,
+       so helper text with no error visually read as a failed field (color-alone
+       signalling, WCAG 1.4.1). #52525b is the muted-text tone already used for
+       ChatToolStatus/ThinkingIndicator elsewhere in this library, at 7.73:1. */
+    color: var(--input-info-msg-text-color, #52525b);
     margin: var(--input-info-msg-margin);
     padding: var(--input-info-msg-padding);
   }
@@ -613,7 +624,7 @@
   }
 
   .input-char-count.at-limit {
-    color: var(--input-char-count-limit-color, var(--input-error-msg-text-color, #fa1405));
+    color: var(--input-char-count-limit-color, var(--input-error-msg-text-color, #c5120a));
   }
 
   ::placeholder {

package/dist/InputButton/InputButton.svelte

@@ -193,14 +193,18 @@
   .error-message {
     font-weight: var(--input-error-msg-text-weight, 400);
     font-size: var(--input-error-msg-text-size, 12px);
-    color: var(--input-error-msg-text-color, #fa1405);
+    /* Shares --input-error-msg-text-color with Input.svelte -- kept in sync with its
+       #c5120a default (6.06:1 AA) so the same token means the same color everywhere. */
+    color: var(--input-error-msg-text-color, #c5120a);
     margin: var(--input-btn-error-msg-margin, 12px 0px 0px 0px);
   }
 
   .info-message {
     font-weight: var(--input-info-msg-text-weight, 400);
     font-size: var(--input-info-msg-text-size, 12px);
-    color: var(--input-info-msg-text-color, #fa1405);
+    /* Shares --input-info-msg-text-color with Input.svelte -- see its .info-message
+       for why this is a neutral #52525b rather than the error red. */
+    color: var(--input-info-msg-text-color, #52525b);
     margin: var(--input-btn-info-msg-margin, 12px 0px 0px 0px);
   }
 
@@ -224,7 +228,7 @@
   }
 
   .external-error-message {
-    color: var(--inputbutton-external-error-color, #fa1405);
+    color: var(--inputbutton-external-error-color, #c5120a);
     margin: var(--inputbutton-external-error-margin, 6px 0px 0px 0px);
   }
 

package/dist/MarkdownText/MarkdownText.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import { renderMarkdown } from './markdown';
+  import type { MarkdownTextProperties } from './properties';
+
+  let { markdown, breaks = false, testId, classes }: MarkdownTextProperties = $props();
+
+  let html = $derived(renderMarkdown(markdown, { breaks }));
+</script>
+
+<div
+  class="markdown-text {classes ?? ''}"
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+>
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+  {@html html}
+</div>
+
+<style>
+  .markdown-text {
+    font-size: var(--markdown-text-font-size, inherit);
+    line-height: var(--markdown-text-line-height, 1.5);
+    color: var(--markdown-text-color, inherit);
+    word-wrap: break-word;
+    overflow-wrap: anywhere;
+  }
+
+  .markdown-text :global(p) {
+    margin: var(--markdown-text-paragraph-margin, 0 0 0.5em 0);
+  }
+
+  .markdown-text :global(p:last-child) {
+    margin-bottom: 0;
+  }
+
+  .markdown-text :global(h1),
+  .markdown-text :global(h2),
+  .markdown-text :global(h3),
+  .markdown-text :global(h4),
+  .markdown-text :global(h5),
+  .markdown-text :global(h6) {
+    margin: var(--markdown-text-heading-margin, 0.8em 0 0.4em 0);
+    line-height: 1.3;
+  }
+
+  .markdown-text :global(h1) {
+    font-size: 1.35em;
+  }
+
+  .markdown-text :global(h2) {
+    font-size: 1.2em;
+  }
+
+  .markdown-text :global(h3) {
+    font-size: 1.1em;
+  }
+
+  .markdown-text :global(h4),
+  .markdown-text :global(h5),
+  .markdown-text :global(h6) {
+    font-size: 1em;
+  }
+
+  .markdown-text :global(a) {
+    color: var(--markdown-text-link-color, #6d28d9);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .markdown-text :global(code) {
+    font-family: var(--markdown-text-code-font-family, ui-monospace, monospace);
+    font-size: 0.88em;
+    background: var(--markdown-text-code-background, rgba(0, 0, 0, 0.05));
+    padding: 1px 5px;
+    border-radius: 4px;
+  }
+
+  .markdown-text :global(pre) {
+    background: var(--markdown-text-pre-background, rgba(0, 0, 0, 0.05));
+    padding: 10px 12px;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin: 0.5em 0;
+  }
+
+  .markdown-text :global(pre code) {
+    background: transparent;
+    padding: 0;
+  }
+
+  .markdown-text :global(ul),
+  .markdown-text :global(ol) {
+    margin: var(--markdown-text-list-margin, 0.4em 0);
+    padding-left: var(--markdown-text-list-padding, 1.4em);
+  }
+
+  .markdown-text :global(li) {
+    margin: 0.2em 0;
+  }
+
+  .markdown-text :global(blockquote) {
+    margin: 0.5em 0;
+    padding: 2px 0 2px 12px;
+    border-left: 3px solid var(--markdown-text-blockquote-border-color, rgba(0, 0, 0, 0.15));
+    color: var(--markdown-text-blockquote-color, inherit);
+    opacity: var(--markdown-text-blockquote-opacity, 0.85);
+  }
+
+  .markdown-text :global(table) {
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+    border-collapse: collapse;
+    margin: 0.5em 0;
+  }
+
+  .markdown-text :global(th),
+  .markdown-text :global(td) {
+    padding: 5px 10px;
+    border: 1px solid var(--markdown-text-table-border-color, rgba(0, 0, 0, 0.12));
+    text-align: left;
+  }
+
+  .markdown-text :global(th) {
+    background: var(--markdown-text-table-header-background, rgba(0, 0, 0, 0.04));
+  }
+
+  .markdown-text :global(img) {
+    max-width: 100%;
+    border-radius: var(--markdown-text-image-border-radius, 8px);
+  }
+
+  .markdown-text :global(hr) {
+    border: none;
+    border-top: 1px solid var(--markdown-text-hr-color, rgba(0, 0, 0, 0.12));
+    margin: 0.8em 0;
+  }
+</style>

package/dist/MarkdownText/MarkdownText.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MarkdownTextProperties } from './properties';
+declare const MarkdownText: import("svelte").Component<MarkdownTextProperties, {}, "">;
+type MarkdownText = ReturnType<typeof MarkdownText>;
+export default MarkdownText;

package/dist/MarkdownText/markdown.d.ts

@@ -0,0 +1,6 @@
+import type { RenderMarkdownOptions } from './properties';
+/**
+ * Markdown → HTML with the sanitizing pipeline above. Pure string transform —
+ * no DOM involved — so it renders identically on server and client.
+ */
+export declare function renderMarkdown(markdown: string, options?: RenderMarkdownOptions): string;