@keenmate/pure-admin-core 2.7.1 → 2.9.0-rc01

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "2.7.1",
+  "version": "2.9.0-rc01",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {

package/snippets/profile.html

@@ -58,7 +58,7 @@ to save horizontal space in the navbar.
                 <!-- title= attrs give a tooltip when the text truncates with ellipsis -->
                 <h3 class="pa-profile-panel__name"  title="John Doe">John Doe</h3>
                 <p  class="pa-profile-panel__email" title="john.doe@company.com">john.doe@company.com</p>
-                <span class="pa-profile-panel__role">Administrator</span>
+                <span class="pa-badge">Administrator</span>
             </div>
             <button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">
                 ✕
@@ -124,7 +124,7 @@ to save horizontal space in the navbar.
             <div class="pa-profile-panel__info">
                 <h3 class="pa-profile-panel__name">John Doe</h3>
                 <p  class="pa-profile-panel__email">john.doe@company.com</p>
-                <span class="pa-profile-panel__role">Administrator</span>
+                <span class="pa-badge">Administrator</span>
             </div>
             <button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">✕</button>
         </div>
@@ -170,7 +170,7 @@ to save horizontal space in the navbar.
             <div class="pa-profile-panel__info">
                 <h3 class="pa-profile-panel__name">Jane Smith</h3>
                 <p  class="pa-profile-panel__email">jane.smith@corp.example</p>
-                <span class="pa-profile-panel__role">Analyst</span>
+                <span class="pa-badge">Analyst</span>
             </div>
             <button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">✕</button>
         </div>
@@ -207,7 +207,7 @@ to save horizontal space in the navbar.
             <div class="pa-profile-panel__info">
                 <h3 class="pa-profile-panel__name">John Doe</h3>
                 <p  class="pa-profile-panel__email">john.doe@company.com</p>
-                <span class="pa-profile-panel__role">Administrator</span>
+                <span class="pa-badge">Administrator</span>
             </div>
             <button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">✕</button>
         </div>
@@ -425,7 +425,10 @@ HEADER:
 - .pa-profile-panel__info               Text column (name + email + role).
 - .pa-profile-panel__name               User name (ellipsis on overflow).
 - .pa-profile-panel__email              Email (ellipsis on overflow).
-- .pa-profile-panel__role               Role badge (uppercase, tinted bg).
+- .pa-badge                             Role chip (standard badge component;
+                                        add `.pa-badge--primary` / `--info` /
+                                        `--success` / `--warning` / `--danger`
+                                        / `--light` for variant styling).
 - .pa-profile-panel__close              Close button (top-end corner).
 
 Theme-colour design choices (why they're like this):
@@ -433,11 +436,13 @@ Theme-colour design choices (why they're like this):
   colour the header uses for the user's name. This guarantees contrast
   against dark / coloured header backgrounds across all themes (body
   text colours would read wrong on a dark header).
-- __role paints its background with color-mix(in srgb,
-  var(--pa-header-profile-name-color) 15%, transparent) so the tint is
-  derived from the header colour and works on any theme. An older
-  --pa-accent-light fallback is declared first for browsers without
-  color-mix.
+- Role uses the standard `.pa-badge` component (var(--pa-btn-secondary-bg)
+  / -text by default), which themes already tune for both light and dark
+  modes. Previously this was a custom `.pa-profile-panel__role` element
+  coupled to --pa-header-profile-name-color — that token is sized for the
+  header (e.g. black on yellow in Express) and went invisible on dark
+  panel bodies. Migrated to `.pa-badge` in 2.9.0; older snippet markup
+  using `pa-profile-panel__role` needs the class swap.
 
 TABS (optional — sits between __header and __body):
 - .pa-profile-panel__tabs               Tabs container (border-bottom + header-bg).

package/src/scss/_base-css-variables.scss

@@ -14,6 +14,12 @@
 //   --ms-accent-color: var(--base-accent-color, #3b82f6);
 // ============================================================================
 
+// Make variables resolvable when this file is loaded as a @use module
+// (e.g. from main.scss). Legacy @import callers (themes) are unaffected —
+// Sass places @use'd members into the importing file's global scope, where
+// theme-set overrides already live.
+@use 'variables/index' as *;
+
 @mixin output-base-css-variables {
   // === Accent Colors ===
   --base-accent-color: #{$base-accent-color};
@@ -41,14 +47,6 @@
   --base-disabled-bg: #{$base-disabled-bg};
   --base-elevated-bg: #{$base-elevated-bg};
 
-  // === Background Colors (legacy aliases) ===
-  --base-surface-1: #{$base-surface-1};
-  --base-surface-2: #{$base-surface-2};
-  --base-surface-3: #{$base-surface-3};
-  --base-surface-inverse: #{$base-surface-inverse};
-  --base-primary-bg: #{$base-primary-bg};
-  --base-primary-bg-hover: #{$base-primary-bg-hover};
-
   // === Border Colors ===
   --base-border-color: #{$base-border-color};
   --base-border: #{$base-border};
@@ -259,6 +257,18 @@
 // ============================================================================
 
 @mixin output-pa-css-variables {
+  // =========================================================================
+  // COLOR SCHEME SIGNAL
+  // Tells the browser whether this scope is light or dark so native UA
+  // elements (scrollbars, form controls) and `light-dark()` resolve
+  // correctly. Drives web components (e.g. <web-multiselect>) that ship
+  // adaptive palettes via `light-dark()`. Override $theme-color-scheme
+  // before importing variables for always-dark themes; for dual-mode
+  // themes leave default `light` here and add `color-scheme: dark;` to
+  // the `.pa-mode-dark` block.
+  // =========================================================================
+  color-scheme: #{$theme-color-scheme};
+
   // =========================================================================
   // CORE COLORS
   // =========================================================================

package/src/scss/core-components/_cards.scss

@@ -23,8 +23,13 @@
   &__header {
     padding: $card-header-padding-v $card-header-padding-h;
     min-height: $card-header-min-height;
-    border-top-left-radius: $card-border-radius;
-    border-top-right-radius: $card-border-radius;
+    // No own border-top-radius — the card's `overflow: hidden` + outer
+    // border-radius clips the header's square top corners to match. Setting
+    // a radius here makes the header curve at 8px while the card's INNER
+    // corner is ~7px (outer 8px minus the 1px border), leaving a thin
+    // wedge of card background visible at each top corner — most obvious
+    // on coloured variants (--primary/--success/--warning/--danger/--color-*)
+    // where the wedge shows as a white sliver against the variant colour.
     border-bottom: $border-width-base solid var(--pa-border-color);
     background: var(--pa-card-header-bg);
     display: flex;
@@ -240,11 +245,15 @@
   }
 
   // Card variants
+  // Coloured variants override the header's border-bottom-color to match the
+  // variant — otherwise the default light-gray hairline shows as a visible
+  // strip against the coloured surroundings (header bg + card border above).
   &--primary {
     border-color: var(--pa-accent);
 
     .pa-card__header {
       background-color: var(--pa-accent);
+      border-bottom-color: var(--pa-accent);
       color: var(--pa-btn-primary-text);
 
       h1,
@@ -263,6 +272,7 @@
 
     .pa-card__header {
       background-color: var(--pa-success-bg);
+      border-bottom-color: var(--pa-success-bg);
       color: var(--pa-btn-success-text);
 
       h1,
@@ -281,6 +291,7 @@
 
     .pa-card__header {
       background-color: var(--pa-warning-bg);
+      border-bottom-color: var(--pa-warning-bg);
       color: var(--pa-btn-warning-text);
 
       h1,
@@ -299,6 +310,7 @@
 
     .pa-card__header {
       background-color: var(--pa-danger-bg);
+      border-bottom-color: var(--pa-danger-bg);
       color: var(--pa-btn-danger-text);
 
       h1,
@@ -366,6 +378,7 @@
 
       .pa-card__header {
         background-color: var(--pa-color-#{$i});
+        border-bottom-color: var(--pa-color-#{$i});
         color: var(--pa-color-#{$i}-text);
 
         h1,

package/src/scss/core-components/_kpi-bento.scss

@@ -1,22 +1,32 @@
 /* ========================================
    KPI · Bento layout
    Magazine-style asymmetric tile sizing with sparklines as soft background
-   fills behind the values. 6 tiles arranged on a 6-col × 3-row grid
+   fills behind the values. Default 6-tile layout on a 6-col × 3-row grid
    (hero left-half × 2 rows, two stacked right-half × 2 rows, three equal
-   tiles bottom row). Tile placement by source order via :nth-child.
+   tiles bottom row). Tile placement is by source order via :nth-child, so
+   markup stays identical across layout modifiers.
+
+   Layout modifiers (below) swap `grid-template-areas` to provide
+   alternative compositions:
+     · default (no modifier) — 6 tiles, hero on the left
+     · `--hero-right`         — 6 tiles, mirror of default (hero on right)
+     · `--5-tile`             — 5 tiles, hero + 4 supporting
+   Row height is a CSS variable (`--pa-kpi-bento-row-height`, default
+   `12rem`) so authors can dial tile height per instance.
    ======================================== */
 @use '../variables' as *;
 
 .pa-kpi-bento {
   container-type: inline-size;
+  --pa-kpi-bento-row-height: 12rem;
 }
 .pa-kpi-bento__body { padding: 1.6rem; }
 
-/* ----- Bento grid ------------------------------------------------------- */
+/* ----- Bento grid (default: 6 tiles, hero on left) ---------------------- */
 .pa-kpi-bento__grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
-  grid-template-rows: 12rem 12rem 12rem;
+  grid-template-rows: repeat(3, var(--pa-kpi-bento-row-height));
   grid-template-areas:
     "hero hero hero a    a    a"
     "hero hero hero b    b    b"
@@ -31,8 +41,33 @@
   > :nth-child(6) { grid-area: e; }
 }
 
-/* Narrow card → stack everything single column. Hero modifier still
-   bumps the value font-size so it reads as the headline. */
+/* Modifier: --hero-right — mirror of default. Hero on the right half,
+   two stacked tiles on the left of rows 1-2, three equal tiles below.
+   Same 6-tile contract as default; only the template flips. Source
+   order stays unchanged (1st = hero, 2nd = a, …). */
+.pa-kpi-bento__grid--hero-right {
+  grid-template-areas:
+    "a    a    a    hero hero hero"
+    "b    b    b    hero hero hero"
+    "c    c    d    d    e    e";
+}
+
+/* Modifier: --5-tile — hero + 4 supporting. Hero spans the left half ×
+   2 rows, two stacked tiles on the right (rows 1-2), two equal halves on
+   the bottom row. Requires exactly 5 tiles — a 6th tile (if present)
+   would be auto-placed in a new row and break the layout. */
+.pa-kpi-bento__grid--5-tile {
+  grid-template-areas:
+    "hero hero hero a    a    a"
+    "hero hero hero b    b    b"
+    "c    c    c    d    d    d";
+}
+
+/* Narrow card → stack everything single column. Resets `grid-area: auto`
+   on every tile so the same markup works regardless of which layout
+   modifier the grid carries (the @container override sets
+   `grid-template-areas: none` and the `grid-area: auto` on nth-child
+   together neutralise any modifier's template). */
 @container (max-width: 700px) {
   .pa-kpi-bento__grid {
     grid-template-columns: 1fr;

package/src/scss/core-components/_kpi-comparison-gauges.scss

@@ -3,55 +3,92 @@
    Goal-oriented progress bars. Each KPI shows label · value, a bar with a
    target tick, and a 0 · tgt scale below. Bar fill = value/target * 100%,
    capped visually so overshoots are signalled by colour, not overflow.
+
+   Layout is a cell-min-driven `auto-fit` grid — cells stay at least
+   `--pa-kpi-gauge-cell-min` wide, the grid fits as many columns as the
+   container allows, and the responsive cascade is intrinsic to the grid
+   template (no `@container` queries). `--max-N` cap modifiers cap the
+   column count at N while still collapsing below the cell-min × N
+   threshold. Same pattern as `_kpi-editorial-minimal.scss`.
    ======================================== */
 @use '../variables' as *;
 
-.pa-kpi-gauge-list {
-  container-type: inline-size;
-}
 .pa-kpi-gauge-list__body { padding: 0; }
 
-/* 2-column internal grid by default; collapses to 1-col when card narrows. */
+/* ----- Grid + hairline rules -------------------------------------------
+   Cell-min-driven responsive layout. Override `--pa-kpi-gauge-cell-min`
+   per instance to change density (smaller min → more columns at the same
+   container width).
+
+   `gap: 1px` over `background: var(--pa-border-color)` with each tile
+   painting `background: var(--pa-card-bg)` on top — only the gap shows
+   through, giving single-pixel hairlines on every interior boundary
+   regardless of column count. The card's outer border supplies the
+   perimeter. Replaces the previous per-tile `border-right` +
+   `border-bottom` + nth-child suppression machinery, which only worked
+   for the hardcoded 2-col layout. */
 .pa-kpi-gauge-list__grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(var(--pa-kpi-gauge-cell-min, 20rem), 1fr));
+  gap: 1px;
+  background: var(--pa-border-color);
 }
-@container (max-width: 600px) {
-  .pa-kpi-gauge-list__grid {
-    grid-template-columns: 1fr;
-  }
+
+/* Modifier: force exactly 2 columns regardless of cell-min or container
+   width. For placements wanting a deterministic 2×N layout. */
+.pa-kpi-gauge-list__grid--2col { grid-template-columns: repeat(2, 1fr); }
+
+/* Cap-at-N modifiers: combine auto-fit with a ceiling on the column
+   count. Cells stay at least --pa-kpi-gauge-cell-min wide, but the grid
+   never exceeds N columns even when the container is wide enough to fit
+   more. Below the cell-min × N threshold the grid still collapses
+   responsively — these modifiers cap the maximum, not the minimum.
+
+   How the calc reads: each track's effective min is
+     max(cell-min, (container − total-gap) / N)
+   On a wide container the calc wins (so tracks grow, you stay at N).
+   On a narrow container cell-min wins (so the grid collapses).
+
+   Pick the cap so your item count divides into clean rows. */
+.pa-kpi-gauge-list__grid--max-2 {
+  grid-template-columns:
+    repeat(auto-fit, minmax(max(var(--pa-kpi-gauge-cell-min, 20rem), calc((100% - 1px) / 2)), 1fr));
+}
+.pa-kpi-gauge-list__grid--max-3 {
+  grid-template-columns:
+    repeat(auto-fit, minmax(max(var(--pa-kpi-gauge-cell-min, 20rem), calc((100% - 1px * 2) / 3)), 1fr));
+}
+.pa-kpi-gauge-list__grid--max-4 {
+  grid-template-columns:
+    repeat(auto-fit, minmax(max(var(--pa-kpi-gauge-cell-min, 20rem), calc((100% - 1px * 3) / 4)), 1fr));
+}
+.pa-kpi-gauge-list__grid--max-5 {
+  grid-template-columns:
+    repeat(auto-fit, minmax(max(var(--pa-kpi-gauge-cell-min, 20rem), calc((100% - 1px * 4) / 5)), 1fr));
+}
+.pa-kpi-gauge-list__grid--max-6 {
+  grid-template-columns:
+    repeat(auto-fit, minmax(max(var(--pa-kpi-gauge-cell-min, 20rem), calc((100% - 1px * 5) / 6)), 1fr));
 }
 
 /* ----- Gauge tile (label/value head · bar · 0/tgt scale) ---------------- */
 .pa-kpi-gauge {
   position: relative;
+  background: var(--pa-card-bg);
   padding: 1.6rem 2rem;
-  border-bottom: 1px solid var(--pa-border-color);
-  border-right: 1px solid var(--pa-border-color);
+  min-width: 0;
 
   /* Per-tile bar colour cascade — modifiers below set the var, the fill
      reads it. Cleaner than per-modifier-per-element rules; host apps can
      override at the tile level via inline style="--pa-kpi-bar-color: …". */
   --pa-kpi-bar-color: var(--pa-positive);
 
-  &:nth-child(2n)            { border-right: 0; }
-  &:nth-last-child(-n+2)     { border-bottom: 0; }
-
   &--positive { --pa-kpi-bar-color: var(--pa-positive); }
   &--warning  { --pa-kpi-bar-color: var(--pa-warning); }
   &--negative { --pa-kpi-bar-color: var(--pa-negative); }
   &--neutral  { --pa-kpi-bar-color: color-mix(in srgb, var(--pa-text-color-1) 70%, transparent); }
 }
 
-@container (max-width: 600px) {
-  .pa-kpi-gauge {
-    border-right: 0;
-
-    &:nth-last-child(-n+2) { border-bottom: 1px solid var(--pa-border-color); }
-    &:last-child           { border-bottom: 0; }
-  }
-}
-
 /* ----- Head: label left, value right (baseline-aligned) ----------------- */
 .pa-kpi-gauge__head {
   display: flex;

package/src/scss/core-components/_kpi-editorial-minimal.scss

@@ -1,6 +1,6 @@
 /* ========================================
    KPI · Editorial minimal
-   Six KPIs in a 2×3 / 3×2 grid with hairline rules between cells,
+   KPI tiles in a responsive grid with hairline rules between cells,
    generous space, and an extra-light-weight number as the focal point per
    tile. No charts, no pills — the design's whole identity is the thin
    numeral. Renders as a table card (zero card-body padding) so hairlines
@@ -11,32 +11,73 @@
 .pa-kpi-edit__body { padding: 0; }
 
 /* ----- Grid + hairline rules -------------------------------------------
+   Cell-min-driven responsive layout: cells stay at least
+   --pa-kpi-edit-cell-min wide; the grid fits as many columns as the
+   container allows. No @container queries — `auto-fit + minmax` handles
+   the cascade intrinsically. Override the min per instance to change
+   density (smaller min → more columns at the same container width).
+
    `gap: 1px` over `background: var(--pa-border-color)` with each tile
-   painting `background: var(--pa-card-bg)` on top. Only the gap shows
-   through, giving perfect single-pixel hairlines on every interior
-   boundary (vertical and horizontal) for free, regardless of column
-   count. The card's outer border supplies the perimeter. */
+   painting `background: var(--pa-card-bg)` on top — only the gap shows
+   through, giving single-pixel hairlines on every interior boundary
+   regardless of column count. The card's outer border supplies the
+   perimeter. */
 .pa-kpi-edit__grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(var(--pa-kpi-edit-cell-min, 14rem), 1fr));
   gap: 1px;
   background: var(--pa-border-color);
-  container-type: inline-size;
-}
-@container (max-width: 640px) {
-  .pa-kpi-edit__grid { grid-template-columns: repeat(2, 1fr); }
-}
-@container (max-width: 360px) {
-  .pa-kpi-edit__grid { grid-template-columns: 1fr; }
 }
 
-/* Modifier: force 2-col regardless of card width. For placements wanting
-   a deterministic 2×N layout (e.g. 4 tiles as clean 2×2) instead of
-   relying on the container query to land in the right bucket. */
+/* Modifier: force exactly 2 columns regardless of cell-min or container
+   width. For placements wanting a deterministic 2×N layout (e.g. 4 tiles
+   as a clean 2×2 even when the container is wide enough for more). */
 .pa-kpi-edit__grid--2col { grid-template-columns: repeat(2, 1fr); }
 
-/* ----- Tile (editorial spacing leans on the 2.4rem padding) ------------- */
+/* Cap-at-N modifiers: combine auto-fit with a ceiling on the column
+   count. Cells stay at least --pa-kpi-edit-cell-min wide, but the grid
+   never exceeds N columns even when the container is wide enough to fit
+   more. Below the cell-min × N threshold the grid still collapses
+   responsively — these modifiers cap the maximum, not the minimum.
+
+   How the calc reads: each track's effective min is
+     max(cell-min, (container − total-gap) / N)
+   On a wide container the calc wins (so tracks grow, you stay at N).
+   On a narrow container cell-min wins (so the grid collapses).
+
+   Why this matters for the gray-void edge case: `auto-fit` keeps as many
+   tracks as fit the container, then only collapses tracks empty across
+   the *whole* grid. With 6 items at 4-col auto-fit, tracks 1–4 all have
+   row-1 items, so row 2's tracks 3–4 stay (and show the gap background).
+   Capping at 3 makes 6 items pack 3×2 cleanly. Pick the cap so your item
+   count divides into clean rows. */
+.pa-kpi-edit__grid--max-2 {
+  grid-template-columns:
+    repeat(auto-fit, minmax(max(var(--pa-kpi-edit-cell-min, 14rem), calc((100% - 1px) / 2)), 1fr));
+}
+.pa-kpi-edit__grid--max-3 {
+  grid-template-columns:
+    repeat(auto-fit, minmax(max(var(--pa-kpi-edit-cell-min, 14rem), calc((100% - 1px * 2) / 3)), 1fr));
+}
+.pa-kpi-edit__grid--max-4 {
+  grid-template-columns:
+    repeat(auto-fit, minmax(max(var(--pa-kpi-edit-cell-min, 14rem), calc((100% - 1px * 3) / 4)), 1fr));
+}
+.pa-kpi-edit__grid--max-5 {
+  grid-template-columns:
+    repeat(auto-fit, minmax(max(var(--pa-kpi-edit-cell-min, 14rem), calc((100% - 1px * 4) / 5)), 1fr));
+}
+.pa-kpi-edit__grid--max-6 {
+  grid-template-columns:
+    repeat(auto-fit, minmax(max(var(--pa-kpi-edit-cell-min, 14rem), calc((100% - 1px * 5) / 6)), 1fr));
+}
+
+/* ----- Tile (editorial spacing leans on the 2.4rem padding) -------------
+   Per-cell container: the value's `cqi`-based font-size scales with
+   *this* tile's width, not the whole grid's. Keeps typography legible as
+   the grid packs more cells into the same row. */
 .pa-kpi-edit__tile {
+  container-type: inline-size;
   background: var(--pa-card-bg);
   padding: 2.4rem 2rem;
   display: flex;
@@ -69,11 +110,13 @@
      "monospace at low contrast".
    - font-weight: 200 (extra-light). 300 was tested first but didn't read
      distinctly enough as "light" against the body's 400 default.
-   - clamp() lets the number shrink in narrow 25% page-grid cells without
-     manual breakpoints. */
+   - clamp() lets the number shrink in narrow cells without manual
+     breakpoints. `cqi` measures per-cell (tile is a container) so the
+     value tracks each cell's actual width as the grid packs more
+     columns into a wider container. */
 .pa-kpi-edit__value {
   font-family: var(--base-font-family);
-  font-size: clamp(3.2rem, 18cqi, 5.6rem);
+  font-size: clamp(3.2rem, 22cqi, 5.6rem);
   font-weight: 200;
   letter-spacing: -0.02em;
   line-height: 1;

package/src/scss/core-components/_kpi-hero-supporting.scss

@@ -12,12 +12,26 @@
 }
 .pa-kpi-hero-list__body { padding: 1.6rem; }
 
-/* ----- Layout: hero left, rail right ------------------------------------ */
+/* ----- Layout: hero left, rail right ------------------------------------
+   Default split is 1:1 (50% hero / 50% rail). Modifiers below shift the
+   weight to the hero, which is the more common "executive dashboard"
+   shape — one big headline, supporting tiles compressed into a narrower
+   rail. Pick a modifier per instance; the markup stays unchanged. */
 .pa-kpi-hero-list__layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.4rem;
 }
+/* Hero 2/3, rail 1/3. */
+.pa-kpi-hero-list__layout--hero-2-3 {
+  grid-template-columns: 2fr 1fr;
+}
+/* Hero 3/4, rail 1/4 — hero-dominant; rail is a thin sidebar. */
+.pa-kpi-hero-list__layout--hero-3-4 {
+  grid-template-columns: 3fr 1fr;
+}
+/* Narrow card → stack to single column. Overrides any --hero-N-M modifier
+   that lives on the same element. */
 @container (max-width: 700px) {
   .pa-kpi-hero-list__layout {
     grid-template-columns: 1fr;

package/src/scss/core-components/_kpi-numeric-strip.scss

@@ -1,13 +1,27 @@
 /* ========================================
    KPI · Numeric strip (densest)
-   Tabular "spreadsheet-style" table card with metric/now/prev/Δ%/vs target
-   columns — most data per pixel, no chart chrome. Each row is its own
-   grid sharing the same column template so cells align across rows
+   Tabular "spreadsheet-style" table card with metric / now / prev / Δ% /
+   target columns — most data per pixel, no chart chrome. Each row is its
+   own grid sharing the same column template so cells align across rows
    without needing subgrid. Wide-only by design — no responsive collapse;
    narrow placements should use Comparison gauges instead.
+
+   Column contract: `metric` + `now` are always present; `prev`, `delta`,
+   and `target` are independently optional via toggle modifiers on the
+   strip (`--no-prev`, `--no-delta`, `--no-target`). Modifiers compose, so
+   the visible column count ranges from 2 (all three optional columns
+   dropped) to 5 (none dropped). Each combination has its own template
+   selector below so the grid tracks always match the visible cell count.
    ======================================== */
 @use '../variables' as *;
 
+/* Per-column track widths — referenced from every template selector. */
+$strip-col-metric: minmax(0, 2fr);
+$strip-col-now:    minmax(0, 1.1fr);
+$strip-col-prev:   minmax(0, 1fr);
+$strip-col-delta:  minmax(0, 1fr);
+$strip-col-target: minmax(0, 1.6fr);
+
 .pa-kpi-strip__body { padding: 0; }
 
 /* ----- Table layout ----------------------------------------------------- */
@@ -15,11 +29,11 @@
 .pa-kpi-strip__head-row {
   display: grid;
   grid-template-columns:
-    minmax(0, 2fr)      /* metric */
-    minmax(0, 1.1fr)    /* now */
-    minmax(0, 1fr)      /* prev */
-    minmax(0, 1fr)      /* delta */
-    minmax(0, 1.6fr);   /* target (bar + pct stacked) */
+    $strip-col-metric
+    $strip-col-now
+    $strip-col-prev
+    $strip-col-delta
+    $strip-col-target;
   column-gap: 1.6rem;
   align-items: center;
   position: relative;
@@ -142,13 +156,58 @@
   line-height: 1;
 }
 
-/* ----- --no-prev: 4-col layout (metric / now / Δ% / target) -------------
-   Useful for narrow placements; markup omits the prev cells. */
+/* ----- Toggle modifiers ------------------------------------------------
+   `--no-prev`, `--no-delta`, `--no-target` are independently composable.
+   Each hides its column's cells (data + header) and the matching template
+   selector below adjusts `grid-template-columns` to the visible cell
+   count, so source order (metric, now, prev, delta, target) is preserved
+   and the remaining cells slot into the right tracks.
+
+   `metric` and `now` are mandatory — no toggle drops them. If a strip
+   doesn't need a focal value, it's a different design (use comparison
+   gauges or editorial-minimal). */
+.pa-kpi-strip--no-prev   .pa-kpi-strip__prev,
+.pa-kpi-strip--no-prev   .pa-kpi-strip__head--prev   { display: none; }
+.pa-kpi-strip--no-delta  .pa-kpi-strip__delta,
+.pa-kpi-strip--no-delta  .pa-kpi-strip__head--delta  { display: none; }
+.pa-kpi-strip--no-target .pa-kpi-strip__target,
+.pa-kpi-strip--no-target .pa-kpi-strip__head--target { display: none; }
+
+/* ----- Grid templates per visible-column combination -------------------
+   8 combos (1 default + 3 single-drops + 3 double-drops + 1 triple-drop).
+   Each lists the visible columns in source order with their declared
+   `$strip-col-*` width. */
+
+/* 4-col: one optional column dropped */
 .pa-kpi-strip--no-prev .pa-kpi-strip__row,
 .pa-kpi-strip--no-prev .pa-kpi-strip__head-row {
-  grid-template-columns:
-    minmax(0, 2fr)
-    minmax(0, 1.1fr)
-    minmax(0, 1fr)
-    minmax(0, 1.6fr);
+  grid-template-columns: $strip-col-metric $strip-col-now $strip-col-delta $strip-col-target;
+}
+.pa-kpi-strip--no-delta .pa-kpi-strip__row,
+.pa-kpi-strip--no-delta .pa-kpi-strip__head-row {
+  grid-template-columns: $strip-col-metric $strip-col-now $strip-col-prev $strip-col-target;
+}
+.pa-kpi-strip--no-target .pa-kpi-strip__row,
+.pa-kpi-strip--no-target .pa-kpi-strip__head-row {
+  grid-template-columns: $strip-col-metric $strip-col-now $strip-col-prev $strip-col-delta;
+}
+
+/* 3-col: two optional columns dropped */
+.pa-kpi-strip--no-prev.pa-kpi-strip--no-delta .pa-kpi-strip__row,
+.pa-kpi-strip--no-prev.pa-kpi-strip--no-delta .pa-kpi-strip__head-row {
+  grid-template-columns: $strip-col-metric $strip-col-now $strip-col-target;
+}
+.pa-kpi-strip--no-prev.pa-kpi-strip--no-target .pa-kpi-strip__row,
+.pa-kpi-strip--no-prev.pa-kpi-strip--no-target .pa-kpi-strip__head-row {
+  grid-template-columns: $strip-col-metric $strip-col-now $strip-col-delta;
+}
+.pa-kpi-strip--no-delta.pa-kpi-strip--no-target .pa-kpi-strip__row,
+.pa-kpi-strip--no-delta.pa-kpi-strip--no-target .pa-kpi-strip__head-row {
+  grid-template-columns: $strip-col-metric $strip-col-now $strip-col-prev;
+}
+
+/* 2-col: all three optional columns dropped (metric + now only) */
+.pa-kpi-strip--no-prev.pa-kpi-strip--no-delta.pa-kpi-strip--no-target .pa-kpi-strip__row,
+.pa-kpi-strip--no-prev.pa-kpi-strip--no-delta.pa-kpi-strip--no-target .pa-kpi-strip__head-row {
+  grid-template-columns: $strip-col-metric $strip-col-now;
 }