@juspay/svelte-ui-components 2.93.0 → 2.95.0

package/dist/Table/BuiltinCell.svelte

@@ -305,19 +305,41 @@
 {:else if column.type === 'button'}
   {@const buttonData = asButtonCellData(value)}
   {#if buttonData}
+    <!-- The icon <img> is always decorative (alt=""): an icon-only button is
+         named by the required ariaLabel on the Button, and a text-bearing
+         button is named by its visible text — the image never carries the
+         accessible name itself. -->
+    {#snippet buttonCellIcon()}
+      <img class="builtin-button-icon" src={buttonData.iconUrl} alt="" />
+    {/snippet}
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <span
       class="builtin-interactive"
+      class:builtin-icon-button={buttonData.iconUrl && !buttonData.text}
       onclick={stopClickPropagation}
       onkeydown={stopKeydownPropagation}
     >
-      <Button
-        text={buttonData.text}
-        disabled={buttonData.disabled ?? false}
-        classes={buttonData.classes ?? ''}
-        testId={buttonData.testId}
-        onclick={() => column.onButtonClick?.(rowIndex, originalIndex)}
-      />
+      {#if buttonData.iconUrl}
+        <Button
+          text={buttonData.text}
+          icon={buttonCellIcon}
+          iconOnly={!buttonData.text}
+          ariaLabel={buttonData.ariaLabel}
+          disabled={buttonData.disabled ?? false}
+          classes={buttonData.classes ?? ''}
+          testId={buttonData.testId}
+          onclick={() => column.onButtonClick?.(rowIndex, originalIndex)}
+        />
+      {:else}
+        <Button
+          text={buttonData.text}
+          ariaLabel={buttonData.ariaLabel}
+          disabled={buttonData.disabled ?? false}
+          classes={buttonData.classes ?? ''}
+          testId={buttonData.testId}
+          onclick={() => column.onButtonClick?.(rowIndex, originalIndex)}
+        />
+      {/if}
     </span>
   {:else}
     {cellValueToText(value)}
@@ -333,13 +355,30 @@
     >
       {#if actionData.primaryButton}
         {@const primary = actionData.primaryButton}
-        <Button
-          text={primary.text}
-          disabled={primary.disabled ?? false}
-          classes={primary.classes ?? ''}
-          testId={primary.testId}
-          onclick={() => column.onPrimaryAction?.(rowIndex, originalIndex)}
-        />
+        {#snippet primaryButtonIcon()}
+          <img class="builtin-button-icon" src={primary.iconUrl} alt="" />
+        {/snippet}
+        {#if primary.iconUrl}
+          <Button
+            text={primary.text}
+            icon={primaryButtonIcon}
+            iconOnly={!primary.text}
+            ariaLabel={primary.ariaLabel}
+            disabled={primary.disabled ?? false}
+            classes={primary.classes ?? ''}
+            testId={primary.testId}
+            onclick={() => column.onPrimaryAction?.(rowIndex, originalIndex)}
+          />
+        {:else}
+          <Button
+            text={primary.text}
+            ariaLabel={primary.ariaLabel}
+            disabled={primary.disabled ?? false}
+            classes={primary.classes ?? ''}
+            testId={primary.testId}
+            onclick={() => column.onPrimaryAction?.(rowIndex, originalIndex)}
+          />
+        {/if}
       {/if}
       {#if actionData.menuItems && actionData.menuItems.length > 0}
         <Menu
@@ -600,6 +639,12 @@
     height: var(--table-cell-input-icon-size, 16px);
   }
 
+  .builtin-button-icon {
+    display: block;
+    width: var(--table-cell-icon-size, 16px);
+    height: var(--table-cell-icon-size, 16px);
+  }
+
   .builtin-action-group {
     gap: var(--table-cell-inline-gap, 8px);
   }

package/dist/Table/Table.svelte

@@ -10,8 +10,8 @@
   import Pagination from '../Pagination/Pagination.svelte';
   import Select from '../Select/Select.svelte';
   import chevronDownSmSvg from '../assets/chevron-down-sm.svg?raw';
-  import chevronUpSvg from '../assets/chevron-up.svg?raw';
-  import chevronDownSvg from '../assets/chevron-down.svg?raw';
+  import sortAscendingSvg from '../assets/sort-ascending.svg?raw';
+  import sortDescendingSvg from '../assets/sort-descending.svg?raw';
   import sortDefaultSvg from '../assets/sort-default.svg?raw';
   import searchSvg from '../assets/search.svg?raw';
   import closeSvg from '../assets/close.svg?raw';
@@ -745,7 +745,7 @@
                             {:else}
                               <span class="sort-icon">
                                 <!-- eslint-disable svelte/no-at-html-tags -->
-                                {@html chevronUpSvg}
+                                {@html sortAscendingSvg}
                               </span>
                             {/if}
                           {:else if sortColumn === colIndex && sortDirection === 'desc'}
@@ -754,7 +754,7 @@
                             {:else}
                               <span class="sort-icon">
                                 <!-- eslint-disable svelte/no-at-html-tags -->
-                                {@html chevronDownSvg}
+                                {@html sortDescendingSvg}
                               </span>
                             {/if}
                           {:else if typeof sortDefaultIcon === 'function'}
@@ -1324,18 +1324,32 @@
     align-items: center;
   }
 
+  /* The sorted-direction half paints via currentColor; without an explicit
+     color it inherits the Button's text color (white on the default button
+     theme), which disappears on light headers. Default to the design
+     system's active blue. */
+  .sort-button :global(.sort-icon:not(.sort-icon-idle)) {
+    color: var(--table-sort-active-color, #1b85ff);
+  }
+
   .sort-button :global(.sort-icon svg) {
     width: var(--table-sort-icon-size, 14px);
     height: var(--table-sort-icon-size, 14px);
     display: block;
   }
 
+  /* The design system draws every sort state fully opaque — faintness comes
+     from the glyph fills (inactive halves #C7C7C7, active direction
+     currentColor), never from transparency. The opacity vars remain for
+     consumers that prefer a fade but now default to solid; hover steps the
+     inactive halves to the design system's hover gray. */
   .sort-button :global(.sort-icon-idle) {
-    opacity: var(--table-sort-idle-opacity, 0.5);
+    opacity: var(--table-sort-idle-opacity, 1);
   }
 
   .sort-button:hover :global(.sort-icon-idle) {
-    opacity: var(--table-sort-idle-hover-opacity, 0.85);
+    opacity: var(--table-sort-idle-hover-opacity, 1);
+    --table-sort-inactive-color: var(--table-sort-hover-color, #797979);
   }
 
   /* ── Empty ──────────────────────────────────────────────────────────────── */

package/dist/Table/cellData.d.ts

@@ -12,6 +12,13 @@ import type { TableActionGroupCellData, TableAvatarStackCellData, TableButtonCel
 export declare const asJsonObject: (value: TableCellValue) => {
     [key: string]: JSONValue;
 } | null;
+/**
+ * Accepts an icon URL only when its scheme is safe to place in an `<img src>`
+ * — http(s), a `data:image/*` payload, or a scheme-less (relative) path. Cell
+ * data is consumer-supplied JSON, so `javascript:`/`vbscript:`/non-image
+ * `data:` URIs must never reach the DOM.
+ */
+export declare const asSafeIconUrl: (value: TableCellValue) => string | null;
 export declare const asTagCellData: (value: TableCellValue) => TableTagCellData | null;
 export declare const asTagArrayItems: (value: TableCellValue) => TableTagArrayCellItem[] | null;
 export declare const asAvatarStackData: (value: TableCellValue) => TableAvatarStackCellData | null;

package/dist/Table/cellData.js

@@ -11,6 +11,32 @@ export const asJsonObject = (value) => {
     }
     return null;
 };
+/**
+ * Accepts an icon URL only when its scheme is safe to place in an `<img src>`
+ * — http(s), a `data:image/*` payload, or a scheme-less (relative) path. Cell
+ * data is consumer-supplied JSON, so `javascript:`/`vbscript:`/non-image
+ * `data:` URIs must never reach the DOM.
+ */
+export const asSafeIconUrl = (value) => {
+    if (typeof value !== 'string' || value.trim().length === 0) {
+        return null;
+    }
+    const candidate = value.trim();
+    const schemeMatch = /^([a-zA-Z][a-zA-Z0-9+.-]*):/.exec(candidate);
+    if (schemeMatch === null) {
+        return candidate;
+    }
+    const scheme = schemeMatch[1].toLowerCase();
+    if (scheme === 'http' || scheme === 'https') {
+        return candidate;
+    }
+    // Image data URIs only, from an explicit subtype allowlist — a data: URI
+    // continues with ';' (parameters like base64) or ',' (payload).
+    if (scheme === 'data' && /^data:image\/(svg\+xml|png|jpeg|jpg|gif|webp)[;,]/i.test(candidate)) {
+        return candidate;
+    }
+    return null;
+};
 export const asTagCellData = (value) => {
     const record = asJsonObject(value);
     if (record === null || typeof record.text !== 'string') {
@@ -160,8 +186,9 @@ export const asInputCellData = (value) => {
     if (typeof record.ariaLabel === 'string') {
         inputData.ariaLabel = record.ariaLabel;
     }
-    if (typeof record.iconUrl === 'string') {
-        inputData.iconUrl = record.iconUrl;
+    const inputIconUrl = asSafeIconUrl(record.iconUrl ?? null);
+    if (inputIconUrl !== null) {
+        inputData.iconUrl = inputIconUrl;
     }
     if (typeof record.dataType === 'string') {
         inputData.dataType = record.dataType;
@@ -192,20 +219,38 @@ export const asInputDataType = (value) => {
 };
 export const asButtonCellData = (value) => {
     const record = asJsonObject(value);
-    if (record === null || typeof record.text !== 'string') {
+    if (record === null) {
         return null;
     }
-    const buttonData = { text: record.text };
+    const buttonIconUrl = asSafeIconUrl(record.iconUrl ?? null);
+    const buttonAriaLabel = typeof record.ariaLabel === 'string' ? record.ariaLabel : null;
+    const common = {};
     if (typeof record.disabled === 'boolean') {
-        buttonData.disabled = record.disabled;
+        common.disabled = record.disabled;
     }
     if (typeof record.classes === 'string') {
-        buttonData.classes = record.classes;
+        common.classes = record.classes;
     }
     if (typeof record.testId === 'string') {
-        buttonData.testId = record.testId;
+        common.testId = record.testId;
+    }
+    if (typeof record.text === 'string') {
+        const textButton = { text: record.text, ...common };
+        if (buttonIconUrl !== null) {
+            textButton.iconUrl = buttonIconUrl;
+        }
+        if (buttonAriaLabel !== null) {
+            textButton.ariaLabel = buttonAriaLabel;
+        }
+        return textButton;
     }
-    return buttonData;
+    // Icon-only buttons require BOTH a safe icon and an accessible name — a
+    // button with no visible text and no aria-label is a WCAG 4.1.2 failure,
+    // so such data fails narrowing and the cell falls back to plain text.
+    if (buttonIconUrl !== null && buttonAriaLabel !== null) {
+        return { iconUrl: buttonIconUrl, ariaLabel: buttonAriaLabel, ...common };
+    }
+    return null;
 };
 const asMenuItemsData = (rawItems) => {
     if (!Array.isArray(rawItems)) {

package/dist/Table/properties.d.ts

@@ -116,6 +116,8 @@ export type TableInputCellData = {
     /**
      * URL of a passive leading icon rendered inside the input field (e.g. a
      * currency glyph). Sized via `--table-cell-input-icon-size` (default 16px).
+     * Scheme-validated at narrowing time: only http(s), `data:image/*`, and
+     * relative URLs are accepted; anything else is dropped.
      */
     iconUrl?: string;
     /** Input dataType forwarded to the rendered Input ('text' | 'tel' | 'number' | …). */
@@ -128,14 +130,52 @@ export type TableInputCellData = {
     /** Inline error message shown when the validation pattern rejects the value. */
     onErrorMessage?: string;
 };
-/** Cell shape for `type: 'button'` — the handler lives on the column. */
-export type TableButtonCellData = {
-    text: string;
+/** Options shared by both button cell variants. */
+export type TableButtonCellCommonData = {
     disabled?: boolean;
     /** CSS classes forwarded to the Button (the consumer owns variant mapping). */
     classes?: string;
     testId?: string;
 };
+/**
+ * Text-bearing button cell — `text` stays required exactly as before this
+ * type became a union, so existing consumers are unaffected. An optional
+ * `iconUrl` renders a leading icon; `ariaLabel` may override the accessible
+ * name (the visible text already names the button).
+ */
+export type TableTextButtonCellData = TableButtonCellCommonData & {
+    text: string;
+    /**
+     * URL of a leading icon rendered next to the text. Sized via
+     * `--table-cell-icon-size` (default 16px). Scheme-validated at narrowing
+     * time: only http(s), `data:image/*`, and relative URLs are accepted;
+     * anything else is dropped.
+     */
+    iconUrl?: string;
+    ariaLabel?: string;
+};
+/**
+ * Icon-only button cell — renders as a bare ghost control. `ariaLabel` is
+ * required (the button has no visible text, so it MUST carry an accessible
+ * name); the decoder enforces the same rule at runtime for untyped data.
+ */
+export type TableIconOnlyButtonCellData = TableButtonCellCommonData & {
+    text?: never;
+    /**
+     * URL of the button's icon. Sized via `--table-cell-icon-size` (default
+     * 16px). Scheme-validated at narrowing time: only http(s), `data:image/*`,
+     * and relative URLs are accepted; anything else is dropped (the cell then
+     * fails narrowing and falls back to plain text of the raw value).
+     */
+    iconUrl: string;
+    ariaLabel: string;
+};
+/**
+ * Cell shape for `type: 'button'` — the handler lives on the column. A
+ * discriminated union: text-bearing buttons keep `text` required (unchanged
+ * public contract), icon-only buttons require `iconUrl` + `ariaLabel`.
+ */
+export type TableButtonCellData = TableTextButtonCellData | TableIconOnlyButtonCellData;
 /** One overflow-menu entry for action-group / popup-menu cells (JSON-safe). */
 export type TableMenuItemData = {
     id: string;

package/dist/assets/sort-ascending.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.64645 1.64645C5.84171 1.45118 6.15829 1.45118 6.35355 1.64645L8.85355 4.14645C9.04882 4.34171 9.04882 4.65829 8.85355 4.85355C8.65829 5.04882 8.34171 5.04882 8.14645 4.85355L6 2.70711L3.85355 4.85355C3.65829 5.04882 3.34171 5.04882 3.14645 4.85355C2.95118 4.65829 2.95118 4.34171 3.14645 4.14645L5.64645 1.64645Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.14645 7.14645C3.34171 6.95118 3.65829 6.95118 3.85355 7.14645L6 9.29289L8.14645 7.14645C8.34171 6.95118 8.65829 6.95118 8.85355 7.14645C9.04882 7.34171 9.04882 7.65829 8.85355 7.85355L6.35355 10.3536C6.15829 10.5488 5.84171 10.5488 5.64645 10.3536L3.14645 7.85355C2.95118 7.65829 2.95118 7.34171 3.14645 7.14645Z" fill="var(--table-sort-inactive-color, #C7C7C7)"/>
+</svg>

package/dist/assets/sort-default.svg

@@ -1,4 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <polyline points="18 15 12 9 6 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
-  <polyline points="6 17 12 23 18 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.64645 1.64645C5.84171 1.45118 6.15829 1.45118 6.35355 1.64645L8.85355 4.14645C9.04882 4.34171 9.04882 4.65829 8.85355 4.85355C8.65829 5.04882 8.34171 5.04882 8.14645 4.85355L6 2.70711L3.85355 4.85355C3.65829 5.04882 3.34171 5.04882 3.14645 4.85355C2.95118 4.65829 2.95118 4.34171 3.14645 4.14645L5.64645 1.64645Z" fill="var(--table-sort-inactive-color, #C7C7C7)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.14645 7.14645C3.34171 6.95118 3.65829 6.95118 3.85355 7.14645L6 9.29289L8.14645 7.14645C8.34171 6.95118 8.65829 6.95118 8.85355 7.14645C9.04882 7.34171 9.04882 7.65829 8.85355 7.85355L6.35355 10.3536C6.15829 10.5488 5.84171 10.5488 5.64645 10.3536L3.14645 7.85355C2.95118 7.65829 2.95118 7.34171 3.14645 7.14645Z" fill="var(--table-sort-inactive-color, #C7C7C7)"/>
 </svg>

package/dist/assets/sort-descending.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.64645 1.64645C5.84171 1.45118 6.15829 1.45118 6.35355 1.64645L8.85355 4.14645C9.04882 4.34171 9.04882 4.65829 8.85355 4.85355C8.65829 5.04882 8.34171 5.04882 8.14645 4.85355L6 2.70711L3.85355 4.85355C3.65829 5.04882 3.34171 5.04882 3.14645 4.85355C2.95118 4.65829 2.95118 4.34171 3.14645 4.14645L5.64645 1.64645Z" fill="var(--table-sort-inactive-color, #C7C7C7)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.14645 7.14645C3.34171 6.95118 3.65829 6.95118 3.85355 7.14645L6 9.29289L8.14645 7.14645C8.34171 6.95118 8.65829 6.95118 8.85355 7.14645C9.04882 7.34171 9.04882 7.65829 8.85355 7.85355L6.35355 10.3536C6.15829 10.5488 5.84171 10.5488 5.64645 10.3536L3.14645 7.85355C2.95118 7.65829 2.95118 7.34171 3.14645 7.14645Z" fill="currentColor"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.93.0",
+  "version": "2.95.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",