@keenmate/pure-admin-core 2.9.0-rc03 → 2.9.0-rc05

package/src/scss/variables/_components.scss

@@ -176,6 +176,13 @@ $card-body-padding-h: 1rem !default;       // 10px horizontal
 $card-header-padding-v: 0.5rem !default;   // 5px vertical
 $card-header-padding-h: 1rem !default;     // 10px horizontal - matches body
 $card-header-min-height: 4rem !default;    // 40px - fits xs buttons (32px) with padding
+// Vertical nudge that drops the (smaller) header description onto the title's
+// baseline. Under the header's center alignment a 16px title and 14px
+// description don't share a baseline, leaving the description ~1px high. The
+// exact correction is font-metric dependent, so it's exposed as a variable
+// (SCSS default here + `--pa-card-description-offset-y` at runtime) that themes
+// with a different font can retune. Set to 0 to disable the nudge entirely.
+$card-description-offset-y: 1px !default;
 $card-footer-padding-v: 1.2rem !default;   // 12px vertical
 $card-footer-padding-h: 1rem !default;     // 10px horizontal - matches body
 $card-grid-min-width: 280px !default;
@@ -355,11 +362,43 @@ $stat-square-symbol-gap: 0.15em !default;   // tight gap between number and symb
 // (~250–400px). Numbers are sized aggressively so the KPI reads as the dominant element.
 $stat-square-number-min: 3.2rem !default;    // 32px floor
 $stat-square-number-scale: 25cqi !default;   // 25% of tile width
-$stat-square-number-max: 9.6rem !default;    // 96px ceiling (was 7.2/6.4 — bumped so wide tiles render large)
+$stat-square-number-max: 7.2rem !default;    // 72px ceiling (was 9.6 — full-width tiles hit the ceiling and read as oversized banners; 72px keeps a wide tile readable without dominating the page)
 // Symbol is intentionally smaller than the number (visual hierarchy: number primary, unit secondary).
 $stat-square-symbol-min: 1.6rem !default;    // 16px floor (~50% of number-min)
 $stat-square-symbol-scale: 12cqi !default;   // 12% of tile width (~48% of number)
-$stat-square-symbol-max: 4.8rem !default;    // 48px ceiling (~50% of number-max)
+$stat-square-symbol-max: 3.6rem !default;    // 36px ceiling (~50% of number-max, was 4.8)
+
+// Guard so a very wide tile (e.g. one square per full-width row instead of in a
+// 1/3 KPI column) can't grow into a page-dominating block. Caps how tall the
+// flex layout gets before the label is pushed to the bottom edge.
+$stat-square-max-height: 16rem !default;     // 160px
+
+// Stat square FIT mode (opt-in via [data-pa-stat-fit]) — progressive disclosure.
+// The number is sized to fill the box by pa-stat-fit.js (ResizeObserver); the
+// lower-priority rows reveal as the tile earns BOTH enough width and height.
+// NB: @container does NOT auto-interpolate Sass vars (unlike @media) — these
+// must be emitted with #{} in the rules. Gated on width AND height so a
+// wide-but-short banner doesn't reveal the tall-only tiers.
+$stat-square-fit-container-name: pa-stat !default;
+$stat-square-fit-meta-size:     $font-size-xs !default;  // no-JS fallback for the metadata
+                                                         // column; pa-stat-fit.js overrides it
+                                                         // inline with META_RATIO × number size
+$stat-square-fit-symbol-ratio:  0.5    !default;  // symbol = 0.5em of the number
+$stat-square-fit-symbol-min-w:  8rem   !default;  // P1 symbol reveals at…
+$stat-square-fit-symbol-min-h:  4.5rem !default;
+$stat-square-fit-label-min-w:   13rem  !default;  // P2 label
+$stat-square-fit-label-min-h:   6.5rem !default;
+$stat-square-fit-change-min-w:  18rem  !default;  // P3 trend
+$stat-square-fit-change-min-h:  9.5rem !default;
+$stat-square-fit-context-min-w: 24rem  !default;  // P4 context
+$stat-square-fit-context-min-h: 13rem  !default;
+
+// Horizontal "banner" arrangement: on wide tiles the number moves to the left
+// (filling the height) and the metadata stacks in a column to its right, so the
+// number stays dominant and the width isn't wasted. Auto-switches once the tile
+// is at least this wide (plain width query — broadest engine support).
+$stat-square-fit-horizontal-min-w: 32rem !default;  // ≥ this wide → horizontal banner
+$stat-square-fit-number-width:     44%   !default;  // number column share in horizontal
 
 // Stat shadow values
 $stat-text-shadow-1-y: 4px !default;