@juspay/svelte-ui-components 2.92.0 → 2.94.0

package/dist/Input/Input.svelte

@@ -37,6 +37,7 @@
     onKeyDown = () => {},
     classes,
     role,
+    ariaLabel,
     ariaExpanded,
     ariaAutocomplete,
     ariaControls,
@@ -256,6 +257,7 @@
       <textarea
         {value}
         {placeholder}
+        aria-label={ariaLabel}
         autocomplete={autoComplete}
         inputmode={inputMode}
         {name}
@@ -287,6 +289,7 @@
         type={dataType}
         {value}
         {placeholder}
+        aria-label={ariaLabel}
         autocomplete={autoComplete}
         inputmode={inputMode}
         {name}

package/dist/Input/properties.d.ts

@@ -52,6 +52,8 @@ export type OptionalInputProperties = {
     testId?: string;
     classes?: string;
     role?: string;
+    /** Accessible name applied to the native input/textarea (aria-label). */
+    ariaLabel?: string | null;
     ariaExpanded?: boolean;
     ariaAutocomplete?: 'none' | 'inline' | 'list' | 'both';
     ariaControls?: string | null;

package/dist/Table/BuiltinCell.svelte

@@ -274,6 +274,9 @@
 {:else if column.type === 'input'}
   {@const inputData = asInputCellData(value)}
   {#if inputData}
+    {#snippet inputLeadingIcon()}
+      <img class="builtin-input-icon" src={inputData.iconUrl} alt="" />
+    {/snippet}
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <span
       class="builtin-interactive"
@@ -283,6 +286,7 @@
       <Input
         value={inputData.value ?? ''}
         placeholder={inputData.placeholder ?? ''}
+        ariaLabel={inputData.ariaLabel ?? null}
         disable={inputData.disabled ?? false}
         testId={inputData.testId ?? ''}
         dataType={asInputDataType(inputData.dataType ?? null)}
@@ -292,6 +296,7 @@
         onErrorMessage={inputData.onErrorMessage ?? null}
         actionInput={false}
         onInput={(newValue) => column.onInput?.(rowIndex, newValue, originalIndex)}
+        {...inputData.iconUrl ? { leftIcon: inputLeadingIcon } : {}}
       />
     </span>
   {:else}
@@ -300,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)}
@@ -328,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
@@ -589,6 +633,18 @@
     width: var(--table-interactive-width, auto);
   }
 
+  .builtin-input-icon {
+    display: block;
+    width: var(--table-cell-input-icon-size, 16px);
+    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/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') {
@@ -157,6 +183,13 @@ export const asInputCellData = (value) => {
     if (typeof record.testId === 'string') {
         inputData.testId = record.testId;
     }
+    if (typeof record.ariaLabel === 'string') {
+        inputData.ariaLabel = record.ariaLabel;
+    }
+    const inputIconUrl = asSafeIconUrl(record.iconUrl ?? null);
+    if (inputIconUrl !== null) {
+        inputData.iconUrl = inputIconUrl;
+    }
     if (typeof record.dataType === 'string') {
         inputData.dataType = record.dataType;
     }
@@ -186,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;
     }
-    return buttonData;
+    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;
+    }
+    // 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

@@ -107,6 +107,19 @@ export type TableInputCellData = {
     placeholder?: string;
     disabled?: boolean;
     testId?: string;
+    /**
+     * Accessible name forwarded to the rendered Input's native element
+     * (aria-label). Recommended whenever the cell has no visible label —
+     * required in practice for icon-bearing inputs.
+     */
+    ariaLabel?: string;
+    /**
+     * 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' | …). */
     dataType?: string;
     /**
@@ -117,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/package.json

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