@juspay/svelte-ui-components 2.91.1 → 2.92.0

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/properties.d.ts

@@ -202,6 +202,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.92.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",