@juspay/svelte-ui-components 2.91.1 → 2.93.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}
@@ -589,6 +594,12 @@
     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-action-group {
     gap: var(--table-cell-inline-gap, 8px);
   }

package/dist/Table/Table.svelte

@@ -669,6 +669,7 @@
                 <th
                   class="table-header"
                   class:table-header-sticky={isStickyHeader}
+                  class:table-col-highlighted={headerColumn?.highlighted === true}
                   data-pw={headerColumn?.testId ?? null}
                   style:text-align={headerColumn?.align ?? null}
                   style:max-width={headerColumn?.maxWidth ?? null}
@@ -848,6 +849,7 @@
                       typeof cellValue === 'boolean'}
                     <td
                       class="table-content"
+                      class:table-col-highlighted={keyedColumn?.highlighted === true}
                       data-pw={typeof getCellTestId === 'function'
                         ? getCellTestId(row, cellValue, rowIndex)
                         : null}
@@ -1180,6 +1182,20 @@
     color: var(--table-content-color, var(--table-content-font-color, #111827));
   }
 
+  /* Column highlight (TableColumn.highlighted). Row hover keeps higher
+     specificity and row selection is declared later at equal specificity, so
+     both row states paint over the column wash. */
+  .table-header.table-col-highlighted {
+    background-color: var(
+      --table-col-highlight-header-background,
+      var(--table-col-highlight-background, #f3f9ff)
+    );
+  }
+
+  .table-content.table-col-highlighted {
+    background-color: var(--table-col-highlight-background, #f3f9ff);
+  }
+
   .table-row {
     border-bottom: var(--table-row-border, 1px solid #f3f4f6);
     background-color: var(--table-row-background);

package/dist/Table/cellData.js

@@ -157,6 +157,12 @@ export const asInputCellData = (value) => {
     if (typeof record.testId === 'string') {
         inputData.testId = record.testId;
     }
+    if (typeof record.ariaLabel === 'string') {
+        inputData.ariaLabel = record.ariaLabel;
+    }
+    if (typeof record.iconUrl === 'string') {
+        inputData.iconUrl = record.iconUrl;
+    }
     if (typeof record.dataType === 'string') {
         inputData.dataType = record.dataType;
     }

package/dist/Table/properties.d.ts

@@ -107,6 +107,17 @@ 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).
+     */
+    iconUrl?: string;
     /** Input dataType forwarded to the rendered Input ('text' | 'tel' | 'number' | …). */
     dataType?: string;
     /**
@@ -202,6 +213,14 @@ export type TableColumn = {
      * ellipsizes with the full value available on the native title tooltip.
      */
     maxWidth?: string;
+    /**
+     * Paints this column's header and body cells with the highlight wash —
+     * `--table-col-highlight-background` (body) and
+     * `--table-col-highlight-header-background` (header; falls back to the body
+     * wash). Use to emphasize a selected/pivot column. Row hover and row
+     * selection still paint over the wash.
+     */
+    highlighted?: boolean;
     /** Opt-in header filter dropdown (see TableColumnFilterConfig). */
     filter?: TableColumnFilterConfig;
     /**

package/package.json

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