@juspay/svelte-ui-components 2.92.0 → 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/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;
     /**

package/package.json

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