@keenmate/pure-admin-core 2.7.1 → 2.8.0

package/package.json

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

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};

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;
 }

package/src/scss/core-components/_kpi-sparkline-list.scss

@@ -4,9 +4,23 @@
    scanning rather than per-tile depth — no view-mode toggle, no status
    pills. Container queries collapse 4-col → 2-row → 3-row as the card
    narrows.
+
+   Row template uses local SCSS variables for the four column widths
+   (`$spark-col-label`, `$spark-col-chart`, `$spark-col-value`,
+   `$spark-col-delta`) so all responsive overrides reference the same
+   widths — change one and every breakpoint follows. The `--no-delta`
+   modifier drops the rightmost column; the other three are load-bearing
+   (a sparkline list without label, chart, or value is a different
+   design).
    ======================================== */
 @use '../variables' as *;
 
+/* Per-column track widths — referenced from every template selector. */
+$spark-col-label: minmax(14rem, 28%);
+$spark-col-chart: minmax(10rem, 1fr);
+$spark-col-value: minmax(8rem, 18%);
+$spark-col-delta: minmax(7rem, 12%);
+
 /* Card is a query container so rows react to *card* width, not viewport. */
 .pa-kpi-spark-list {
   container-type: inline-size;
@@ -17,10 +31,10 @@
 .pa-kpi-spark-row {
   display: grid;
   grid-template-columns:
-    minmax(14rem, 28%)
-    minmax(10rem, 1fr)
-    minmax(8rem, 18%)
-    minmax(7rem, 12%);
+    $spark-col-label
+    $spark-col-chart
+    $spark-col-value
+    $spark-col-delta;
   align-items: center;
   gap: 1.6rem;
   padding: 1.4rem 2rem;
@@ -29,6 +43,18 @@
   &:last-child { border-bottom: 0; }
 }
 
+/* Modifier: --no-delta — drops the rightmost column. label · chart ·
+   value only. Useful when the chart's slope already conveys direction
+   and the delta would be redundant. Hides the delta element and shrinks
+   the row template to 3 columns. */
+.pa-kpi-spark-list--no-delta .pa-kpi-spark-row {
+  grid-template-columns:
+    $spark-col-label
+    $spark-col-chart
+    $spark-col-value;
+}
+.pa-kpi-spark-list--no-delta .pa-kpi-spark-row__delta { display: none; }
+
 /* Mid-narrow card (1×3 page-grid + 45% column): stack to 2 rows.
    Label/value/delta on top, full-width chart below. Default order is
    value-above-chart; use .pa-kpi-spark-list--chart-first to flip. */
@@ -66,6 +92,23 @@
   .pa-kpi-spark-list--chart-first .pa-kpi-spark-row__label { align-self: start; }
   .pa-kpi-spark-list--chart-first .pa-kpi-spark-row__value { text-align: start; align-self: baseline; }
   .pa-kpi-spark-list--chart-first .pa-kpi-spark-row__delta { align-self: baseline; }
+
+  /* --no-delta at mid-narrow: 2-row layout, top row is label+value only. */
+  .pa-kpi-spark-list--no-delta .pa-kpi-spark-row {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "label value"
+      "chart chart";
+  }
+
+  /* --no-delta + --chart-first: 3-row single-column stack. */
+  .pa-kpi-spark-list--no-delta.pa-kpi-spark-list--chart-first .pa-kpi-spark-row {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "label"
+      "chart"
+      "value";
+  }
 }
 
 /* Very narrow card (~280–360px, 25% page-grid stress test): force the
@@ -86,6 +129,15 @@
   .pa-kpi-spark-row__chart  { grid-area: chart; }
   .pa-kpi-spark-row__value  { grid-area: value; text-align: start; align-self: baseline; }
   .pa-kpi-spark-row__delta  { grid-area: delta; align-self: baseline; }
+
+  /* --no-delta at very-narrow: 3-row single-column stack (no delta cell). */
+  .pa-kpi-spark-list--no-delta .pa-kpi-spark-row {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "label"
+      "chart"
+      "value";
+  }
 }
 
 /* ----- Cell typography -------------------------------------------------- */

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

@@ -1,25 +1,31 @@
 /* ========================================
    KPI · Terminal grid
    Bloomberg-style dense panel: mono numbers, status pills, inline SVG
-   sparklines, ▲▼ deltas, segmented view-mode toggle (VALUE/Δ%/TREND).
+   sparklines, ▲▼ deltas, optional segmented tab strip for swapping
+   the body content (different tile sets / grids per tab).
    Shared chrome (header, live, footer, detail popover, spark-dot) is in
    _kpi-base.scss.
    ======================================== */
 @use '../variables' as *;
 
-/* ----- View-mode toggle (segmented button group) ------------------------ */
+/* ----- Tab strip (segmented button group) ------------------------------
+   Generalised tabs — each `.pa-kpi-terminal__tab` carries a `data-tab`
+   slug that matches a `.pa-kpi-terminal__pane[data-tab="…"]` in the body.
+   JS toggles `.is-active` on the clicked tab + matching pane; tabs and
+   panes are otherwise independent so each pane can hold a completely
+   different grid (different tile count, different grid modifier). */
 .pa-kpi-terminal__controls {
   display: inline-flex;
   align-items: center;
   gap: 1.6rem;
 }
-.pa-kpi-terminal__viewtoggle {
+.pa-kpi-terminal__tabs {
   display: inline-flex;
   border: 1px solid var(--pa-border-color);
   border-radius: 0.4rem;
   overflow: hidden;
 }
-.pa-kpi-terminal__viewbtn {
+.pa-kpi-terminal__tab {
   background: transparent;
   border: 0;
   color: var(--pa-text-color-2);
@@ -41,6 +47,13 @@
   }
 }
 
+/* ----- Pane visibility ------------------------------------------------- */
+.pa-kpi-terminal__pane {
+  display: none;
+
+  &.is-active { display: block; }
+}
+
 /* ----- Grid + tile borders ----------------------------------------------
    Hairline 1px borders between tiles, no gap. Last-row/last-column
    borders suppressed via :nth-last-child / :nth-child selectors. */
@@ -132,16 +145,15 @@
   margin-bottom: 0.8rem;
 }
 
-/* ----- Big value with 3-mode swap --------------------------------------
-   Author renders three .pa-kpi-tile__value siblings (data-mode="value" /
-   "delta" / "trend"); the active mode is selected via the
-   .pa-kpi-terminal[data-view="X"] attribute. JS toggles that attribute
-   when the segmented control is clicked. */
+/* ----- Big value -------------------------------------------------------
+   One value per tile — sentiment colour set via `--very-positive` /
+   `--positive` / `--neutral` / `--negative` / `--very-negative` modifier
+   on the value element. */
 .pa-kpi-tile__values {
   margin-bottom: 0.4rem;
 }
 .pa-kpi-tile__value {
-  display: none;
+  display: inline-flex;
   align-items: baseline;
   gap: 0.3rem;
   font-family: var(--base-font-family-mono);
@@ -153,11 +165,6 @@
   &--negative      .pa-kpi-tile__num { color: var(--pa-negative); }
   &--very-negative .pa-kpi-tile__num { color: var(--pa-very-negative); }
 }
-.pa-kpi-terminal[data-view="value"] .pa-kpi-tile__value[data-mode="value"],
-.pa-kpi-terminal[data-view="delta"] .pa-kpi-tile__value[data-mode="delta"],
-.pa-kpi-terminal[data-view="trend"] .pa-kpi-tile__value[data-mode="trend"] {
-  display: inline-flex;
-}
 
 .pa-kpi-tile__num {
   font-size: 3.8rem;

package/src/scss/main.scss

@@ -5,3 +5,14 @@
 
 // Core framework (includes variables and all core-components)
 @use 'core' as *;
+
+// CSS variable defaults at :root. Themes don't go through main.scss — they
+// @import core + base-css-variables and emit their own values — so this only
+// affects the unthemed bundle (dist/css/main.css) and the FOUC window before
+// a theme stylesheet resolves.
+@use 'base-css-variables' as bcv;
+:root {
+  @include bcv.output-base-css-variables;
+  @include bcv.output-pa-css-variables;
+  @include bcv.output-pa-alert-variables-light;
+}