@keenmate/pure-admin-core 2.7.0 → 2.8.0

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

@@ -0,0 +1,171 @@
+/* ========================================
+   KPI · Editorial minimal
+   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
+   go edge-to-edge.
+   ======================================== */
+@use '../variables' as *;
+
+.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 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(auto-fit, minmax(var(--pa-kpi-edit-cell-min, 14rem), 1fr));
+  gap: 1px;
+  background: var(--pa-border-color);
+}
+
+/* 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); }
+
+/* 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;
+  flex-direction: column;
+  gap: 1.2rem;
+  position: relative;
+  min-width: 0;
+
+  /* Hover host: faint wash so the cursor-anchored popover has a clear
+     "this tile" anchor. */
+  &:hover {
+    background: color-mix(in srgb, var(--pa-text-color-1) 4%, var(--pa-card-bg));
+  }
+}
+
+/* ----- Label (uppercase mono caption) ----------------------------------- */
+.pa-kpi-edit__label {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.2rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--pa-text-color-1) 50%, transparent);
+  line-height: 1.3;
+}
+
+/* ----- Value (the editorial signature) ---------------------------------
+   - NOT mono — mono fonts rarely have a true 200 weight; using the body
+     sans gives proper thin glyphs that read as "editorial" rather than
+     "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 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, 22cqi, 5.6rem);
+  font-weight: 200;
+  letter-spacing: -0.02em;
+  line-height: 1;
+  color: var(--pa-text-color-1);
+  display: flex;
+  align-items: baseline;
+  gap: 0.2rem;
+  flex-wrap: wrap;
+}
+.pa-kpi-edit__num {
+  font-weight: 200;
+  font-variant-numeric: tabular-nums;
+}
+.pa-kpi-edit__unit {
+  font-size: 0.4em;
+  font-weight: 300;
+  color: color-mix(in srgb, var(--pa-text-color-1) 50%, transparent);
+  letter-spacing: 0;
+}
+
+/* ----- Meta row (delta + tgt) ------------------------------------------ */
+.pa-kpi-edit__meta {
+  display: flex;
+  align-items: baseline;
+  gap: 1.4rem;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.3rem;
+  line-height: 1.3;
+  flex-wrap: wrap;
+}
+.pa-kpi-edit__delta {
+  font-weight: 700;
+  white-space: nowrap;
+  color: var(--pa-positive);
+
+  &--positive    { color: var(--pa-positive); }
+  &--negative    { color: var(--pa-negative); }
+  &--neutral     { color: var(--pa-neutral); }
+  &--up-strong   { color: var(--pa-very-positive); }
+  &--down-strong { color: var(--pa-very-negative); }
+}
+.pa-kpi-edit__target {
+  font-weight: 500;
+  color: color-mix(in srgb, var(--pa-text-color-1) 50%, transparent);
+  white-space: nowrap;
+
+  em {
+    font-style: normal;
+    color: color-mix(in srgb, var(--pa-text-color-1) 38%, transparent);
+    margin-right: 0.5rem;
+  }
+}

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

@@ -0,0 +1,224 @@
+/* ========================================
+   KPI · Hero + supporting
+   Marketing/exec dashboard pattern: one headline metric on the left (huge
+   container-query-relative value, inline meta row, big filled-area
+   sparkline), and a vertical rail of compact supporting tiles on the
+   right. Container query collapses to single column on narrow cards.
+   ======================================== */
+@use '../variables' as *;
+
+.pa-kpi-hero-list {
+  container-type: inline-size;
+}
+.pa-kpi-hero-list__body { padding: 1.6rem; }
+
+/* ----- 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;
+  }
+}
+.pa-kpi-hero-list__rail {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* ----- HERO panel (label · big value · meta row · sparkline) ------------ */
+.pa-kpi-hero-main {
+  position: relative;
+  padding: 1.8rem 2rem;
+  border: 1px solid var(--pa-border-color);
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+
+  /* Sentiment cascade — chart and delta inherit via currentColor. */
+  --pa-kpi-accent: var(--pa-positive);
+
+  &--positive  { --pa-kpi-accent: var(--pa-positive); }
+  &--negative  { --pa-kpi-accent: var(--pa-negative); }
+  &--neutral   { --pa-kpi-accent: var(--pa-neutral); }
+  &--up-strong { --pa-kpi-accent: var(--pa-very-positive); }
+}
+
+.pa-kpi-hero-main__label {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.4rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--pa-text-color-1) 60%, transparent);
+}
+
+.pa-kpi-hero-main__value {
+  display: inline-flex;
+  align-items: baseline;
+  font-family: var(--base-font-family-mono);
+  line-height: 1;
+  margin: 0.4rem 0 0.6rem;
+}
+.pa-kpi-hero-main__num {
+  /* Container-query-relative: scales with the hero panel's width.
+     Floor keeps it readable in narrow page-grid cards. */
+  font-size: clamp(4rem, 17cqi, 7rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--pa-text-color-1);
+}
+.pa-kpi-hero-main__unit {
+  font-size: clamp(1.8rem, 8cqi, 3rem);
+  font-weight: 500;
+  color: var(--pa-text-secondary);
+  margin: 0 0.1rem;
+}
+
+/* Meta row: inline delta + period text + target on one baseline. */
+.pa-kpi-hero-main__meta {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: baseline;
+  gap: 0.4rem 1.4rem;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.3rem;
+}
+.pa-kpi-hero-main__delta {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.4rem;
+  color: var(--pa-kpi-accent);
+  font-weight: 700;
+  font-size: 1.5rem;
+  line-height: 1.2;
+}
+.pa-kpi-hero-main__period {
+  color: color-mix(in srgb, var(--pa-text-color-1) 60%, transparent);
+  line-height: 1.3;
+}
+.pa-kpi-hero-main__target {
+  color: color-mix(in srgb, var(--pa-text-color-1) 50%, transparent);
+  text-align: end;
+}
+
+/* Hero sparkline — chart container fills extra vertical space (when the
+   rail forces a tall row); SVG inside stays at fixed pixel height so the
+   line shape is never distorted along Y. The SVG uses
+   preserveAspectRatio="none", so any element that should keep its shape
+   needs to live outside that scaling or have fixed pixel dimensions. */
+.pa-kpi-hero-main__chart {
+  flex: 1 1 10rem;
+  min-height: 10rem;
+  margin-top: 0.6rem;
+  color: var(--pa-kpi-accent);
+  display: flex;
+  align-items: flex-end;     /* SVG wrap pinned to bottom */
+
+  polyline {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: var(--pa-chart-trendline-stroke);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  polygon {
+    fill: currentColor;
+    fill-opacity: 0.18;
+    stroke: none;
+  }
+}
+.pa-kpi-hero-main__chart-svg {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: var(--pa-chart-trendline-height);
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+}
+
+/* ----- SIDE rail tile (2×2 grid, value spans both rows on right) -------- */
+.pa-kpi-hero-side {
+  position: relative;
+  padding: 1.2rem 1.4rem;
+  border: 1px solid var(--pa-border-color);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    "label  value"
+    "delta  value";
+  column-gap: 1.2rem;
+  row-gap: 0.4rem;
+  align-items: center;
+
+  --pa-kpi-accent: var(--pa-positive);
+
+  &--positive  { --pa-kpi-accent: var(--pa-positive); }
+  &--negative  { --pa-kpi-accent: var(--pa-negative); }
+  &--neutral   { --pa-kpi-accent: var(--pa-neutral); }
+  &--up-strong { --pa-kpi-accent: var(--pa-very-positive); }
+}
+
+.pa-kpi-hero-side__label {
+  grid-area: label;
+  align-self: end;     /* tucks against the vertically-centred value */
+  font-family: var(--base-font-family-mono);
+  font-size: 1.3rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--pa-text-color-1) 60%, transparent);
+  line-height: 1.25;
+}
+.pa-kpi-hero-side__value {
+  grid-area: value;
+  align-self: center;
+  font-family: var(--base-font-family-mono);
+  line-height: 1;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: baseline;
+}
+.pa-kpi-hero-side__num {
+  font-size: 2.4rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--pa-text-color-1);
+}
+.pa-kpi-hero-side__unit {
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: var(--pa-text-secondary);
+  margin: 0 0.35rem;
+}
+.pa-kpi-hero-side__delta {
+  grid-area: delta;
+  align-self: start;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: var(--pa-kpi-accent);
+}

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

@@ -0,0 +1,213 @@
+/* ========================================
+   KPI · Numeric strip (densest)
+   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 ----------------------------------------------------- */
+.pa-kpi-strip__row,
+.pa-kpi-strip__head-row {
+  display: grid;
+  grid-template-columns:
+    $strip-col-metric
+    $strip-col-now
+    $strip-col-prev
+    $strip-col-delta
+    $strip-col-target;
+  column-gap: 1.6rem;
+  align-items: center;
+  position: relative;
+  padding: 1.1rem 1.6rem;
+}
+
+/* Divider between data rows / between head and first row only. */
+.pa-kpi-strip__row + .pa-kpi-strip__row,
+.pa-kpi-strip__head-row + .pa-kpi-strip__row {
+  border-top: 1px solid var(--pa-border-color);
+}
+
+/* Hover host: subtle row highlight so the cursor-anchored popover has a
+   clear "this row" anchor. */
+.pa-kpi-strip__row:hover {
+  background: var(--pa-surface-hover);
+}
+
+/* ----- Header cells (uppercase mono captions) --------------------------- */
+.pa-kpi-strip__head {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.1rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--pa-text-tertiary);
+
+  &--num { text-align: end; }
+}
+
+/* ----- Metric label ----------------------------------------------------- */
+.pa-kpi-strip__metric {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.4rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--pa-text-color-1) 78%, transparent);
+  line-height: 1.2;
+}
+
+/* ----- NOW (focal value) ------------------------------------------------ */
+.pa-kpi-strip__now {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.8rem;
+  font-weight: 700;
+  text-align: end;
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  color: var(--pa-text-color-1);
+  white-space: nowrap;
+  line-height: 1;
+
+  .pa-kpi-strip__num { font-weight: 700; }
+  .pa-kpi-strip__unit {
+    font-size: 1.1rem;
+    font-weight: 500;
+    color: color-mix(in srgb, var(--pa-text-color-1) 50%, transparent);
+    margin: 0 0.2rem;
+  }
+}
+
+/* ----- PREV (reference data, low contrast) ------------------------------ */
+.pa-kpi-strip__prev {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: var(--pa-text-tertiary);
+  text-align: end;
+  white-space: nowrap;
+}
+
+/* ----- Δ% (sentiment-coloured) ------------------------------------------ */
+.pa-kpi-strip__delta {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.5rem;
+  font-weight: 700;
+  text-align: end;
+  white-space: nowrap;
+  color: var(--pa-positive);
+
+  &--positive    { color: var(--pa-positive); }
+  &--negative    { color: var(--pa-negative); }
+  &--neutral     { color: var(--pa-neutral); }
+  &--up-strong   { color: var(--pa-very-positive); }
+  &--down-strong { color: var(--pa-very-negative); }
+}
+
+/* ----- VS TARGET (bar + pct stacked, capped at 100% visual) -------------
+   Theme-neutral grey fill — the pct value itself signals overshoot /
+   undershoot ("97" vs "108" vs "54") so colour reinforcement isn't
+   needed. The bar visually caps at 100% via overflow: hidden so an
+   over-target metric reads as "fully filled" rather than overflowing. */
+.pa-kpi-strip__target {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+.pa-kpi-strip__bar {
+  position: relative;
+  height: 0.5rem;
+  background: var(--pa-surface-track);
+  overflow: hidden;
+  border-radius: 0.1rem;
+}
+.pa-kpi-strip__fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background: color-mix(in srgb, var(--pa-text-color-1) 40%, transparent);
+}
+.pa-kpi-strip__bar-pct {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: var(--pa-text-secondary);
+  align-self: flex-end;
+  line-height: 1;
+}
+
+/* ----- 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: $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;
+}