@posiwise/core-styles 1.0.17 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@posiwise/core-styles",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "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'] {
@@ -548,6 +566,46 @@
         }
     }
 
+    // Touch fallback (AI52) — devices with no hover capability never fire
+    // tr:hover, so the collapsed/floating action strip above stays invisible
+    // and Edit/Delete become unreachable. On no-hover pointers, un-collapse
+    // the Action column and render the icon strip INLINE (static, always
+    // visible) so the actions are tappable. The strip is no longer a floating
+    // overlay here, so it doesn't cover row content. The table already scrolls
+    // 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.actions-collapsed {
+            th[class*='actions-list-'],
+            td[data-head='Action'],
+            td[data-head='Action'][data-head],
+            th[class*='actions-list-'][class*='actions-list-'] {
+                width: auto !important;
+                min-width: auto !important;
+                max-width: none !important;
+                padding: 6px 10px !important;
+                border-width: 1px !important;
+            }
+
+            td[data-head='Action'] ul {
+                position: static;
+                opacity: 1;
+                transform: none;
+                background: transparent;
+                box-shadow: none;
+                border-radius: 0;
+                padding: 0 !important;
+                // keep icons on one line; the table scroller handles overflow
+                flex-wrap: nowrap;
+                white-space: nowrap;
+                // the ul stretches full-width in the stacked cell, so right-pack
+                // its icons to line up with the value column (the data-head
+                // label sits left).
+                justify-content: flex-end;
+            }
+        }
+    }
+
     // Active-sort column background: PrimeNG's preset uses its own
     // hardcoded primary; bind it to --first so the sorted column tracks
     // the tenant accent (consistent with .p-datatable-thead default bg).
@@ -630,6 +688,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,
@@ -750,6 +822,14 @@
 
             > div {
                 flex: 1 1 auto;
+                // Zero the intrinsic Bootstrap .col gutter padding (~5px) that
+                // surfaces only in the stacked mobile layout. The dropdowns sit
+                // in `.col-*` (padded) while the search box sits in a bare
+                // `.text-end` (no padding), so without this they render at
+                // different widths and misalign. Edge-align all three at full
+                // width instead.
+                padding-left: 0;
+                padding-right: 0;
             }
         }
     }

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-tables.scss

@@ -34,10 +34,6 @@
     .primeng-datatable-container {
         padding: 0 !important;
 
-        .fa-search {
-            display: none;
-        }
-
         .col-4,
         .col-8 {
             display: block;

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