@posiwise/core-styles 1.0.18 → 1.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@posiwise/core-styles",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/scss/_dynamic-styles.scss

@@ -421,15 +421,20 @@
         }
     }
 
-    // Collapsed Action column (Linear/Notion pattern, codified 2026-05-21).
-    // The Action column reserves no horizontal space at rest — header text
-    // is hidden, th + td collapse to 0 width, and the <ul> floats over the
-    // row's right edge on row hover. Soft 80ms exit delay so quick row-to-row
-    // mouse movements don't flicker the strip in/out.
+    // Collapsed Action column (Linear/Notion pattern, codified 2026-05-21;
+    // made OPT-IN 2026-05-22). The platform DEFAULT is the classic, always-
+    // visible inline icon strip (pre-2026-05-21 behaviour) — it needs no rules
+    // here, it's just the natural table rendering plus the `.actions-list-*`
+    // min-widths below. A view OPTS IN to this collapsed/hover-float treatment
+    // by adding `.actions-collapsed` to its `.primeng-datatable-container`.
+    // When opted in, the Action column reserves no horizontal space at rest —
+    // header text is hidden, th + td collapse to 0 width, and the <ul> floats
+    // over the row's right edge on row hover. Soft 80ms exit delay so quick
+    // row-to-row mouse movements don't flicker the strip in/out.
     //
     // Covers all `actions-list-{two,three,four}` variants. Per-view local
     // SCSS should NOT redeclare this — pattern lives in `admin-list-view.md`.
-    .primeng-datatable-container {
+    .primeng-datatable-container.actions-collapsed {
         th[class*='actions-list-'],
         td[data-head='Action'] {
             width: 0 !important;
@@ -446,6 +451,19 @@
             // header bar. (Updated 2026-05-21 — prior transparent bg
             // produced a visible gap after DELETED in admin lists.)
             border-color: transparent !important;
+            // Clip the (now hidden) header label. The font-size:0 above is
+            // routinely defeated by a per-view `th { font-size: 11px !important }`
+            // override (admin density tables), so the transparent "Actions"
+            // text still lays out ~53px wide and spills out of this 0-width
+            // cell — producing a phantom horizontal scroll on
+            // .p-datatable-table-container even when every column already fits
+            // (the residual scroll then also induces a small vertical one).
+            // Clipping here guarantees the collapsed header contributes zero
+            // width regardless of any font-size override. The body
+            // td[data-head='Action'] deliberately keeps overflow:visible (its
+            // floating action <ul> must escape the cell) — only the header is
+            // clipped. (Added 2026-05-22.)
+            overflow: hidden !important;
         }
 
         td[data-head='Action'] {
@@ -474,6 +492,23 @@
             border-width: 0 !important; // collapse the residual 2px from transparent borders
         }
 
+        // Non-conformant tables: some Action headers use a bare <th> with no
+        // `actions-list-*` class, so the rules above leave the "ACTIONS" header
+        // visible while the icons still float (the hybrid state). The Action
+        // column is always last, so collapse the last header cell of any table
+        // that actually has an Action body cell. (Added 2026-05-22.)
+        table:has(td[data-head='Action']) thead tr th:last-child {
+            width: 0 !important;
+            min-width: 0 !important;
+            max-width: 0 !important;
+            padding: 0 !important;
+            font-size: 0 !important;
+            color: transparent !important;
+            border-color: transparent !important;
+            border-width: 0 !important;
+            overflow: hidden !important;
+        }
+
         td[data-head='Action'] {
             position: relative;
             overflow: visible !important;
@@ -557,7 +592,7 @@
     // horizontally below 1200px (admin-list-view.md T-7), so the reserved
     // column width simply joins that scroll. Codified 2026-05-21.
     @media (hover: none) {
-        .primeng-datatable-container {
+        .primeng-datatable-container.actions-collapsed {
             th[class*='actions-list-'],
             td[data-head='Action'],
             td[data-head='Action'][data-head],
@@ -670,6 +705,20 @@
         }
     }
 
+    // Warning categorical ramp — mirrors the blue-grey ramp above. The bare
+    // `.bg-warning` flat rule stays the semantic amber (Unsub, status chips);
+    // only the indexed `bg-warning-N` variants that appDynamicBadge emits for
+    // multi-value columns (e.g. product Category, app versions) get a distinct
+    // calm tint per value. Without this, the flat `[class*='bg-warning']` rule
+    // collapses every distinct value to one fill platform-wide — the regression
+    // the dense restyle introduced for warning-family categorical badges.
+    @for $i from 1 through 24 {
+        .primeng-datatable-container .badge.bg-warning-#{$i} {
+            background-color: hsl($i * 15, 18%, 92%) !important;
+            color: hsl($i * 15, 32%, 35%) !important;
+        }
+    }
+
     // Shape dot per B-2 — accessibility beyond colour alone.
     .primeng-datatable-container .badge[class*='bg-success']::before,
     .primeng-datatable-container .badge[class*='bg-danger']::before,

package/scss/custom-bootstrap/_buttons.scss

@@ -54,6 +54,17 @@ button:hover {
     }
 }
 
+// Date-picker / input-group trailing toggle: match the platform's 36px input
+// height so the calendar trigger stays flush with the adjacent .form-control.
+// (_dynamic-styles colours `.input-group-append .btn` brand-blue but never sizes
+// it, so the button rendered shorter than the input.)
+.input-group-append .btn {
+    min-height: 36px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
 .btn-group,
 .input-group {
     span {

package/scss/shared/_prime-ng.scss

@@ -5129,6 +5129,18 @@ body {
     margin: 15px 0;
     padding: 5px;
 
+    // Kill the trackpad rubber-band overscroll on the horizontal table
+    // scrollers. With the default `auto`, scrolling a wide table to its right
+    // edge lets you push a few px further and bounce back — reads as a "wiggle".
+    // `none` suppresses the overscroll affordance entirely (`contain` would only
+    // stop scroll-chaining, keeping the local bounce). Applies to the outer
+    // `.table-responsive` (narrow viewports) and PrimeNG's inner
+    // `.p-datatable-table-container` (the real scroller on wide views).
+    &,
+    .p-datatable-table-container {
+        overscroll-behavior-x: none;
+    }
+
     // Used across CRM/Admin tables for MRR + totals cells
     .expected-mrr,
     .mrr-header {
@@ -5196,11 +5208,12 @@ body {
 }
 
 // Apply the right-corner radius to whichever cell visually sits at the
-// right edge: if the last <th> is an actions-list-* (collapsed to 0px),
-// the visible right edge is the previous header cell. Targeting both
-// covers tables with and without the actions column.
+// right edge. In the default (classic) mode the action <th> is visible and
+// IS the last child, so `th:last-child` rounds it. Only when a view opts in
+// to `.actions-collapsed` (last <th> collapsed to 0px) does the visible right
+// edge become the previous header cell — round that one then.
 .primeng-datatable-container table thead tr:first-child th:last-child,
-.primeng-datatable-container
+.primeng-datatable-container.actions-collapsed
     table
     thead
     tr:first-child