@juspay/svelte-ui-components 2.134.0 → 2.135.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 {
@@ -106,7 +106,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 +156,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/ChipInput/ChipInput.svelte

@@ -5,6 +5,7 @@
 
   let {
     values = $bindable([]),
+    ariaLabel,
     placeholder = 'Add value…',
     disabled = false,
     testId,
@@ -66,6 +67,7 @@
       {placeholder}
       dataType="text"
       name=""
+      {ariaLabel}
       autoComplete="off"
       actionInput={false}
       disable={disabled}

package/dist/ChipInput/properties.d.ts

@@ -9,6 +9,12 @@ export type MandatoryChipInputProperties = {
     values: string[];
 };
 export type OptionalChipInputProperties = {
+    /**
+     * Names the draft field for assistive technology. ChipInput renders no visible label of its
+     * own, so without this the control reaches the accessibility tree unnamed however the caption
+     * beside it reads on screen. Pass the same words as that caption.
+     */
+    ariaLabel?: string;
     placeholder?: string;
     disabled?: boolean;
     testId?: string;

package/dist/Input/Input.svelte

@@ -122,6 +122,26 @@
   // forceError lets consumers drive the error border from server/runtime validation,
   // independent of validationPattern.
   const showError = $derived(showErrorMessage || forceError);
+  // The error text has to be reachable FROM the field it describes and announced when it
+  // appears. Without both, a screen-reader user submits, hears nothing, and is left on a form
+  // that did not move -- the message is on screen and absent from the accessibility tree.
+  const errorMessageId = $derived(`${effectiveId}-error`);
+  // `onErrorMessage` is `string | null`, so null has to be excluded explicitly: `null !== ''`
+  // is true, which would describe the field by an alert element carrying no message.
+  const isShowingError = $derived(
+    onErrorMessage != null && onErrorMessage !== '' && showError && !actionInput
+  );
+  const infoMessageId = $derived(`${effectiveId}-info`);
+  const isShowingInfo = $derived(infoMessage !== '' && !actionInput);
+  // Helper text is part of the field's description, not decoration: a consumer's `infoMessage`
+  // ("Enter a percentage between 1 and 100") is exactly the guidance a screen-reader user needs
+  // BEFORE they trip an error. Reference both, in reading order, so the field is described by
+  // everything visibly attached to it rather than only by its failure.
+  const describedBy = $derived(
+    [isShowingError ? errorMessageId : null, isShowingInfo ? infoMessageId : null]
+      .filter(Boolean)
+      .join(' ')
+  );
   const hasLeftIcon = $derived(typeof leftIcon === 'function');
   const hasRightIcon = $derived(typeof rightIcon === 'function');
 
@@ -301,6 +321,8 @@
         aria-controls={ariaControls}
         aria-activedescendant={ariaActivedescendant}
         aria-required={mandatory || null}
+        aria-invalid={showError ? 'true' : null}
+        aria-describedby={describedBy || null}
         required={mandatory || null}
         onfocus={onFocus}
         onfocusout={_onFocusOut}
@@ -337,6 +359,8 @@
         aria-controls={ariaControls}
         aria-activedescendant={ariaActivedescendant}
         aria-required={mandatory || null}
+        aria-invalid={showError ? 'true' : null}
+        aria-describedby={describedBy || null}
         required={mandatory || null}
         onfocus={onFocus}
         onfocusout={_onFocusOut}
@@ -399,8 +423,10 @@
     {@render fieldElement()}
   {/if}
 
-  {#if onErrorMessage !== '' && showError && !actionInput}
+  {#if isShowingError}
     <div
+      id={errorMessageId}
+      role="alert"
       class="error-message"
       data-pw={typeof testId === 'string' && testId.length > 0 ? `${testId}-error-message` : null}
       testID={typeof testId === 'string' && testId.length > 0 ? `${testId}-error-message` : null}
@@ -408,8 +434,8 @@
       {onErrorMessage}
     </div>
   {/if}
-  {#if infoMessage !== '' && !actionInput}
-    <div class="info-message">
+  {#if isShowingInfo}
+    <div id={infoMessageId} class="info-message">
       {infoMessage}
     </div>
   {/if}

package/dist/ThinkingIndicator/ThinkingIndicator.svelte

@@ -40,16 +40,20 @@
 
   // A detail string or a trace is what makes the indicator expandable. Without either
   // there is nothing to reveal, so it renders as a plain live status line instead of a
-  // disclosure control. `bare` overrides that entirely.
+  // disclosure control. `bare` and `chip` both override that entirely — neither has
+  // room (or a documented reason) to expand.
   const isExpandable = $derived(
-    variant !== 'bare' && (hasTraceMode || (typeof detail === 'string' && detail.length > 0))
+    variant === 'default' && (hasTraceMode || (typeof detail === 'string' && detail.length > 0))
   );
 
   // Backward-compatible shimmer rule: without an explicit `busy`, the expandable
   // summary holds still (settled) and every other shape shimmers (live) — exactly
-  // today's released behaviour. Passing `busy` takes direct control of the shimmer
-  // in every shape, including `bare`.
-  const labelIsBusy = $derived(busy ?? !isExpandable);
+  // today's released behaviour. `chip` is the one exception, defaulting to static:
+  // it exists to be a drop-in for ChatToolStatus, which never shimmered, so a
+  // caller porting that usage 1:1 shouldn't have to also learn `busy={false}` just
+  // to avoid an unexpected shimmer. Passing `busy` takes direct control of the
+  // shimmer in every shape, including `bare` and `chip`.
+  const labelIsBusy = $derived(busy ?? (variant === 'chip' ? false : !isExpandable));
 
   // Set once a person clicks the disclosure open/closed — from then on the automatic
   // busy-driven machine below leaves `expanded` alone for the rest of this mount.
@@ -406,6 +410,21 @@
         >{label}</span
       >{:else}{label}{/if}</span
   >
+{:else if variant === 'chip'}
+  <div
+    class="thinking-indicator-chip {classes ?? ''}"
+    aria-live="polite"
+    aria-atomic="true"
+    data-pw={typeof testId === 'string' ? testId : null}
+    testID={typeof testId === 'string' ? testId : null}
+  >
+    <span class="chip-icon">
+      {#if avatar}{@render avatar()}{:else}<Loader />{/if}
+    </span>
+    <span class="chip-label" class:static-label={!labelIsBusy} data-pw={labelTestId ?? null}
+      >{label}</span
+    >
+  </div>
 {:else}
   <div
     class="thinking-indicator status-host {classes ?? ''}"
@@ -558,6 +577,69 @@
     -webkit-text-fill-color: var(--thinking-indicator-label-color, #858585);
   }
 
+  /* ---- chip variant: a self-contained floating pill (no ancestor supplies
+     background/layout, unlike bare) — deliberately not `width: 100%`/box-sizing
+     from `.thinking-indicator`, since a pill hugs its content. */
+  .thinking-indicator-chip {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--thinking-indicator-chip-gap, 8px);
+    width: fit-content;
+    padding: var(--thinking-indicator-chip-padding, 8px 14px);
+    background: var(--thinking-indicator-chip-background, #ffffff);
+    border: var(--thinking-indicator-chip-border, 1px solid #e4e4e7);
+    border-radius: var(--thinking-indicator-chip-border-radius, 999px);
+    box-shadow: var(--thinking-indicator-chip-box-shadow, 0 6px 20px rgba(0, 0, 0, 0.08));
+    max-width: var(--thinking-indicator-chip-max-width, 100%);
+  }
+
+  .chip-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--thinking-indicator-chip-icon-color, currentColor);
+    --loader-foreground: var(--thinking-indicator-chip-spinner-color, currentColor);
+    --loader-foreground-end: var(--thinking-indicator-chip-spinner-color-end, transparent);
+    --loader-width: var(--thinking-indicator-chip-spinner-size, 14px);
+    --loader-height: var(--thinking-indicator-chip-spinner-size, 14px);
+    --loader-before-width: 7px;
+    --loader-before-height: 7px;
+    --loader-after-width: 11px;
+    --loader-after-height: 11px;
+    --loader-background: var(--thinking-indicator-chip-background, #ffffff);
+  }
+
+  .chip-label {
+    flex: 0 1 auto;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--thinking-indicator-chip-font-size, 0.85rem);
+    font-weight: var(--thinking-indicator-chip-font-weight, 500);
+    color: var(--thinking-indicator-chip-color, #52525b);
+    background: var(
+      --thinking-indicator-chip-shimmer-gradient,
+      linear-gradient(90deg, #52525b 0%, #a0a0a0 50%, #52525b 100%)
+    );
+    background-size: 200% 100%;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: thinking-indicator-shimmer var(--thinking-indicator-chip-shimmer-duration, 2s) linear
+      infinite;
+  }
+
+  /* Chip defaults to a static label (unlike the default/bare variants) since it
+     mirrors ChatToolStatus, which never shimmered — pass `busy` explicitly to
+     opt in. Higher specificity than the generic `.static-label` rule above, so
+     it correctly overrides with the chip's own color token, not the default
+     variant's. */
+  .chip-label.static-label {
+    animation: none;
+    -webkit-text-fill-color: var(--thinking-indicator-chip-color, #52525b);
+  }
+
   .arrow {
     display: inline-flex;
     align-items: center;
@@ -784,6 +866,7 @@
 
   @media (prefers-reduced-motion: reduce) {
     .status-label,
+    .chip-label,
     .trace-row,
     .trace-more {
       animation-duration: 0.001s;
@@ -799,5 +882,10 @@
       animation: none;
       -webkit-text-fill-color: var(--thinking-indicator-label-color, #858585);
     }
+
+    .chip-label {
+      animation: none;
+      -webkit-text-fill-color: var(--thinking-indicator-chip-color, #52525b);
+    }
   }
 </style>

package/dist/ThinkingIndicator/properties.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-export type ThinkingIndicatorVariant = 'default' | 'bare';
+export type ThinkingIndicatorVariant = 'default' | 'bare' | 'chip';
 export type ThinkingIndicatorKind = 'steps' | 'reasoning' | 'search' | 'coding';
 export type ThinkingIndicatorTraceRow = {
     /** The step, sentence, source title, or file action. */
@@ -29,14 +29,18 @@ export type OptionalThinkingIndicatorProperties = {
     expanded?: boolean;
     /**
      * `bare` renders only the shimmering label — for chat bubbles where the surrounding
-     * UI already supplies the avatar and layout. It never becomes expandable.
+     * UI already supplies the avatar and layout. `chip` renders a self-contained pill
+     * (bordered, shadowed, its own background) for a live status floating above other
+     * content, e.g. a tool-call indicator above a composer — pass `busy={false}` for a
+     * static (non-shimmering) label, matching a plain status badge. Neither `bare` nor
+     * `chip` ever becomes expandable.
      */
     variant?: ThinkingIndicatorVariant;
     /**
      * Renders an elapsed `Ns` counter while the label is live. Starts at 0 when a busy
      * phase begins, ticks every second, and freezes at its final value once the label
      * settles (driven by `busy` when set, otherwise by the legacy status-line/detail
-     * shape). No effect on the `bare` variant.
+     * shape). No effect on the `bare` or `chip` variants.
      */
     showElapsed?: boolean;
     onToggle?: () => void;