@keenmate/pure-admin-core 2.6.0 → 2.7.1

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

@@ -0,0 +1,132 @@
+/* ========================================
+   KPI · Comparison gauges
+   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.
+   ======================================== */
+@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. */
+.pa-kpi-gauge-list__grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+@container (max-width: 600px) {
+  .pa-kpi-gauge-list__grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ----- Gauge tile (label/value head · bar · 0/tgt scale) ---------------- */
+.pa-kpi-gauge {
+  position: relative;
+  padding: 1.6rem 2rem;
+  border-bottom: 1px solid var(--pa-border-color);
+  border-right: 1px solid var(--pa-border-color);
+
+  /* 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;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 1.2rem;
+  margin-bottom: 0.8rem;
+}
+.pa-kpi-gauge__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-gauge__value {
+  font-family: var(--base-font-family-mono);
+  line-height: 1;
+}
+.pa-kpi-gauge__num {
+  font-size: 2.6rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--pa-text-color-1);
+}
+.pa-kpi-gauge__unit {
+  font-size: 1.3rem;
+  font-weight: 500;
+  color: var(--pa-text-secondary);
+  margin-left: 0.2rem;
+}
+
+/* ----- Bar (track + sentiment-coloured fill + target tick) -------------- */
+.pa-kpi-gauge__bar {
+  /* Author-controlled tick position (default 100% — the target sits at the
+     right edge of the bar's "0 → target" scale). Override per-tile via
+     style="--pa-kpi-gauge-tick-pos: 80%" if the bar represents a wider
+     scale where the target sits inside the bar. */
+  --pa-kpi-gauge-tick-pos: 100%;
+  --pa-kpi-gauge-tick-color: var(--pa-text-color-1);
+
+  position: relative;
+  height: 0.7rem;
+  background: var(--pa-surface-track);
+  margin-bottom: 0.5rem;
+  overflow: visible;     /* tick can sit just outside the track */
+
+  /* Target tick — small bar slightly taller than the track. Centred on
+     --pa-kpi-gauge-tick-pos via the negative margin-left (matches half
+     the tick width). Full opacity so it stays readable on dark themes
+     against bright orange/green fills. */
+  &::after {
+    content: '';
+    position: absolute;
+    left: var(--pa-kpi-gauge-tick-pos);
+    margin-left: -0.15rem;
+    top: -0.2rem;
+    bottom: -0.2rem;
+    width: 0.3rem;
+    background: var(--pa-kpi-gauge-tick-color);
+  }
+}
+.pa-kpi-gauge__fill {
+  height: 100%;
+  background: var(--pa-kpi-bar-color);
+  /* Width set inline per tile via style="width: X%". */
+  transition: width 0.3s ease;
+}
+
+/* ----- Scale row (0 left · tgt XYZ right) ------------------------------- */
+.pa-kpi-gauge__scale {
+  display: flex;
+  justify-content: space-between;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.2rem;
+  color: var(--pa-text-tertiary);
+}

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

@@ -0,0 +1,128 @@
+/* ========================================
+   KPI · Editorial minimal
+   Six KPIs in a 2×3 / 3×2 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 -------------------------------------------
+   `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. */
+.pa-kpi-edit__grid {
+  display: grid;
+  grid-template-columns: repeat(3, 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. */
+.pa-kpi-edit__grid--2col { grid-template-columns: repeat(2, 1fr); }
+
+/* ----- Tile (editorial spacing leans on the 2.4rem padding) ------------- */
+.pa-kpi-edit__tile {
+  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 25% page-grid cells without
+     manual breakpoints. */
+.pa-kpi-edit__value {
+  font-family: var(--base-font-family);
+  font-size: clamp(3.2rem, 18cqi, 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,210 @@
+/* ========================================
+   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 ------------------------------------ */
+.pa-kpi-hero-list__layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.4rem;
+}
+@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,154 @@
+/* ========================================
+   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
+   without needing subgrid. Wide-only by design — no responsive collapse;
+   narrow placements should use Comparison gauges instead.
+   ======================================== */
+@use '../variables' as *;
+
+.pa-kpi-strip__body { padding: 0; }
+
+/* ----- Table layout ----------------------------------------------------- */
+.pa-kpi-strip__row,
+.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) */
+  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;
+}
+
+/* ----- --no-prev: 4-col layout (metric / now / Δ% / target) -------------
+   Useful for narrow placements; markup omits the prev cells. */
+.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);
+}