@juspay/svelte-ui-components 2.91.0 → 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/dist/Toast/Toast.svelte

@@ -178,6 +178,14 @@
     background-color: var(--toast-background-color, #87ceeb);
     opacity: var(--toast-opacity, 1);
     box-sizing: var(--toast-box-sizing);
+
+    /* A toast is a transient status overlay, not a click target: it floats
+       above page content (often over drawer/footer CTAs) and used to swallow
+       clicks meant for the controls beneath it for its whole duration.
+       Click-through by default; the close button re-enables its own hit
+       area below, and consumers with actionable bottomContent can opt the
+       whole toast back in via --toast-pointer-events: auto. */
+    pointer-events: var(--toast-pointer-events, none);
   }
 
   .no-page-overlap {
@@ -213,6 +221,7 @@
   }
 
   .close-button {
+    pointer-events: auto;
     width: var(--toast-close-button-width, 20px);
     height: var(--toast-close-button-height, 20px);
     cursor: var(--toast-close-button-cursor, pointer);

package/package.json

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