@keenmate/pure-admin-core 2.7.0 → 2.8.0

package/README.md

@@ -2,31 +2,21 @@
 
 Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as default.
 
-## What's New in 2.7.0
-
-- **Full `core-components/` consolidation pass — every SCSS-baked role colour migrated to CSS custom properties.** Started with the four files deferred from 2.6.0 (`_statistics.scss` / `_data-display.scss` / `_data-viz.scss` / `_comparison.scss`) and extended to cover the rest: timelines, file selectors, query editors, lists, checkbox lists, logic trees, input wrappers, composite badges, notifications, and live-data card states. Roughly 120 SCSS-baked role-colour references migrated, so theme overrides of `--pa-success` / `--pa-warning` / `--pa-danger` / `--pa-info` now cascade into every component in `core-components/`. Many of these previously baked colours at compile time and silently ignored theme overrides.
-- **Five broken `rgba(var(--pa-X), Y)` rules fixed** — CSS `rgba()` doesn't accept `var()` as a colour input, so the entire declaration is invalid and silently dropped by browsers. Found across `_query-editor.scss`, `_file-selector.scss`, `_notifications.scss`, and `_timeline.scss` — operator-token tints, modal close-button hovers, secondary notification action backgrounds, and secondary timeline dot shadows all rendered transparent. All converted to `color-mix(in srgb, var(--pa-X) Y%, transparent)`.
-- **`.pa-fields--chips` and `.pa-accent-grid` bug fix** — both referenced non-existent `var(--pa-*-color)` tokens, silently falling back to hardcoded RGB literals (`#28a745`, `#e68a00`, etc.). Now reference the canonical `--pa-success` / `--pa-warning` / `--pa-danger` / `--pa-info` tokens. Themes that override role colours now reach these components for the first time.
-- **`.pa-card--live-up` / `--live-down` migrated to the sentiment scale** — direction-of-change indicators (live-data tinted backgrounds reflecting tick direction) moved from role colours (`$success-bg` / `$danger-bg`) to `var(--pa-positive)` / `var(--pa-negative)`. Sentiment is the right semantic layer for ordinal change, leaving the role-colour scale free for categorical urgency.
-- **Timeline simple-variant dot tuning (Visual breaking)** — shadow opacity bumped `0.3 → 0.5` so green / orange / red drop shadows actually register on warm dark themes (only blue read clearly at 30%). Border-radius pulled out as `$timeline-simple-dot-border-radius` (default `30%`, was hardcoded `50%`) — circles → squircles. Both still overridable via `!default`.
-- **Sass interpolation gotcha squashed** — `#{$x * 100}%` was producing `50 %` (with a stray space) in compiled CSS, which `color-mix()` rejects as invalid. Affected all five timeline shadow variants and the composite-badge focus ring — shadows simply didn't render. Fixed via `#{$x * 100%}` (unit inside the multiplication, so Sass emits a real percentage). Worth knowing if you're using the same pattern in your own SCSS.
-- **Global link styling added** — the framework had no `a {}` rule, so links fell back to browser-default `#0000EE` blue (unreadable on dark themes; equally bad on bright theme accents). Added `--pa-link-color` / `--pa-link-color-hover` / `--pa-link-color-visited` tokens defaulting to `var(--pa-accent)`, plus a global rule in `_base.scss` wrapped in `:where()` so component-level overrides (sidebar, navbar, alerts) win without specificity wars. Links now follow the theme's accent by default. Hover uses `color-mix(in srgb, var(--pa-link-color), currentColor 50%)` so it auto-darkens on light themes and auto-lightens on dark themes without per-mode declarations. Theme authors can override the link tokens for distinct link colours.
-- **`.pa-gauge` rebuilt as a true ring with a transparent centre (Visual breaking)** — the previous "donut hole" was an opaque overlay using `var(--pa-card-bg)`, so it broke whenever the gauge wasn't placed directly on a card surface. Replaced with a `mask-image` cut that carves a real transparent hole, working on any surface. Inner and outer ring boundaries are now concentric (`at 50% 100%` shared by conic gradient and mask), so ring thickness is uniform all the way around.
-- **`.pa-gauge` layout rebuild (Visual breaking)** — gauge label (`CPU` / `Memory` / `Temp` / etc.) moved out of the donut hole onto a row below the baseline alongside `__min` and `__max`. Donut hole now holds only the value at `font-size-3xl` (`2.8rem`), anchored at the baseline. New `--pa-gauge-fill` CSS var collapses 4 redundant variant rules into a single token override; new `--pa-gauge-size` CSS var for per-instance size control (`<div class="pa-gauge" style="--pa-gauge-size: 16rem">`).
-- **Track-background visibility fix in dark themes** — `.pa-data-bar` and `.pa-bar-list` used `rgba(0, 0, 0, 0.06)` (effectively invisible in dark mode). Migrated to `var(--pa-surface-track)` so they invert correctly between light and dark themes alongside the rest of the surface tier system.
-- **`.pa-modal--banded` — new compositional modal style.** Combines with the existing role classes — `<div class="pa-modal pa-modal--success pa-modal--banded">` — so header AND footer wear the role colour as filled bands while body and the modal's own buttons stay neutral. Bands consume the alert tokens (`--pa-alert-X-bg/-text/-border`), so the banded modal automatically tracks the alert palette across light/dark themes (15% mix in light, 45% in dark). Compositional pattern means new role variants are one compound selector each, not duplicated structural blocks. Plus a base-rule fix: `.pa-modal__footer` now has matching `border-radius` so coloured footers no longer square off at the bottom corners — latent bug that only surfaced once a fill landed on the footer.
-- **`.pa-btn--outline-secondary` visibility fix on light themes** — the default for `--pa-btn-secondary-outline-color` was the *filled* button's text colour (`#ffffff` on light themes), so outline-secondary rendered as a white border + white text on a white surface (invisible). Default now points to `var(--pa-btn-secondary-bg)` — the filled button's background colour — so outline-secondary inherits a mid-grey by default and reads correctly. Themes that intentionally diverge can still set the token explicitly.
-- **`--pa-sidebar-submenu-active-text` — new token for high-contrast active submenu rows.** Active state set the background colour but inherited text colour from the sidebar's regular text token; on themes where the active background is an intentionally bright brand colour (e.g. corporate's blue-600), the inherited dark-mode text became unreadable against the bright active fill. New token defaults to the existing sidebar text colour (zero impact on themes that don't override the active bg) and can be set to white/high-contrast independently. Applied at both the level-2 submenu link and the collapsed-state toggle.
-- **`.pa-btn-split` chevron corners rebuilt** — the container previously used `overflow: hidden` + `border-radius` to clip both trigger buttons (which had `border-radius: 0`) to a rounded outer shape. With `display: inline-flex` adjacent buttons, hover-fill paint could bypass the rounded-corner clip on outline variants in some browsers/themes, producing square chevron corners. Rebuilt to not rely on container clipping: each trigger keeps its own `border-radius` from base `.pa-btn`; only the inner edges (between main button and chevron toggle) are flattened via logical-property radii. Per-row action buttons inside the dropdown menu are unaffected — the rule now scopes to direct children only.
-
-## What's New in 2.6.0
-
-- **Seven KPI showcase designs** under the new `KPI` sidebar group — Terminal grid (Bloomberg-style dense panel with view-mode toggle), Sparkline list (one-row-per-KPI with filled-area chart), Comparison gauges (progress bars with target tick), Hero + supporting (big focal metric + side rail), Bento (asymmetric grid with sparklines behind values), Numeric strip (tabular spreadsheet-style), and Editorial minimal (light-weight typography with hairline rules). Each page ships with a Usage Guide + CSS Classes Reference card so the markup is documented in-place.
-- **Framework token consolidation** — single source of truth for role colours (`--pa-success / --pa-warning / --pa-danger / --pa-info`), a new 5-step sentiment scale (`--pa-very-positive` through `--pa-very-negative`), text-contrast tiers (`--pa-text-strong / -secondary / -tertiary`), surface tints (`--pa-surface-hover / -track`), popover chrome (`--pa-detail-*`), and chart trendline tokens (`--pa-chart-trendline-height / -stroke`). Button + contextual surfaces rewired so a single override of `--pa-success` cascades through everything.
-- **Role colours migrated to Tailwind palette (Visual breaking)** — `$base-success-color` → `#22c55e`, `$base-warning-color` → `#f97316` (most visible: warning yellow → orange), `$base-danger-color` → `#ef4444`. Themes that override these via `!default` still win; consumers using stock defaults will see the shift on buttons, alerts, and contextual chips.
-- **`pa-stat--square` redesigned (Visual breaking)** — `__symbol` is now an inline 50%-sized companion next to `__number` (was a giant 12%-opacity watermark), markup order drives prefix-vs-suffix layout (`<symbol><number>` for `$847K`, `<number><symbol>` for `87%`), and font sizes are container-relative (`cqi`) so values track tile width instead of viewport. Multi-character units like `°C`, `¥`, `M` now render correctly at any tile size.
-- **Theme-aware dashboard chart + new `pa:theme-change` event** — the demo's D3 chart was reading CSS custom properties from `<html>` (always returned `:root` defaults) and snapshotting them once at draw time. Fixed both bugs and introduced a `pa:theme-change` window event that any consumer code with cached theme-dependent values can listen to and re-render.
-- **Progress ring / gauge dark-theme fixes** — `__inner` mask switched from compile-time `$card-bg` to runtime `var(--pa-card-bg)` so the percentage value stays readable in dark themes; track colours moved from `rgba(0,0,0,0.08)` to a `color-mix(... var(--pa-text-color-1) 12%, transparent)` so the unfilled portion is visible on both light and dark surfaces.
+## What's New in 2.8.0
+
+- **CSS variable defaults now ship at `:root` in `dist/css/main.css`.** The unthemed bundle previously had no `--pa-*` / `--base-*` values — they were emitted only by theme stylesheets, so consuming `@keenmate/pure-admin-core/css` standalone (or any page before its theme link resolved) left tokens unresolved and components rendered with broken fallbacks (KPI sparklines and deltas in near-black via inherited text colour, web components reverting to hardcoded literals). `main.scss` now emits `output-base-css-variables`, `output-pa-css-variables`, and `output-pa-alert-variables-light` at `:root` for a complete neutral default. Themes are unaffected — they emit their own `:root` from their theme file and all 15 themes rebuild byte-identical. Supersedes the partial 2.7.1-era sentiment-scale fallback patch.
+- **KPI layout modifiers and CSS-variable knobs across four showcases.** `.pa-kpi-spark-list--no-delta` drops the Δ% column (with track widths now lifted to local SCSS variables for one source of truth); `.pa-kpi-hero-list__layout--hero-2-3` / `--hero-3-4` shift the hero/rail split off the locked 50/50; `.pa-kpi-bento__grid--hero-right` mirrors the default and `--5-tile` swaps to a five-tile composition, plus a new `--pa-kpi-bento-row-height` variable for tuning row height per instance.
+- **KPI grids redesigned as cell-min-driven auto-fit (Visual breaking).** `.pa-kpi-gauge-list__grid` and `.pa-kpi-edit__grid` swap fixed `repeat(N, 1fr)` + `@container` breakpoints for `repeat(auto-fit, minmax(var(--pa-kpi-X-cell-min, …), 1fr))` — intrinsic responsive cascade, no `@container` queries on the grids. Five new cap-at-N modifiers (`--max-2` through `--max-6`) constrain column count without forcing it; a `--2col` modifier forces a deterministic 2×N rhythm. Migration: bare grids with fixed item counts may produce uneven rows at widths that fit 4+ columns — add the appropriate `--max-N` to preserve a fixed rhythm.
+- **`.pa-kpi-terminal` view-mode toggle generalised to a tab strip (Visual breaking).** `__viewtoggle`/`__viewbtn` renamed to `__tabs`/`__tab`; `data-view` attribute on the root is gone in favour of `data-tab` on tabs and panes; the per-tile `__value[data-mode]` triple-value mechanism is removed. Each tab now swaps in a separate `__pane` with its own tile set and grid layout — authors can put a different number of tiles (and a different grid modifier) behind each tab. JS contract: `initTerminalViewToggle` → `initTerminalTabs`.
+- **`.pa-kpi-strip` column toggles extended to a composable 2–5 column family.** Three independently composable toggle modifiers (`--no-prev`, `--no-delta`, `--no-target`) replace the previous fixed 4/5-col shapes, yielding eight visible-column combinations. Per-column header classes (`__head--metric`/`--now`/`--prev`/`--delta`/`--target`) keep the header row in sync with the data rows. Track widths lifted to local SCSS variables so the eight precomputed templates share one source of truth.
+
+## What's New in 2.7.1
+
+- **KPI showcases promoted to permanent core components.** The seven showcase designs (terminal grid, sparkline list, comparison gauges, hero + supporting, bento, numeric strip, editorial minimal) graduate from demo-inline `<style>`/`<script>` blocks into framework components — ~500 lines of CSS and ~350 lines of JS now live in shared sources instead of duplicated inline blocks.
+- **Eight new core SCSS partials** under `core-components/`. `_kpi-base.scss` carries the chrome shared across all seven designs (`pa-kpi-header`, `pa-kpi-live` + pulse animation, `pa-kpi-footer`, `pa-kpi-detail` hover popover, `pa-kpi-spark-dot`/`-spark-wrap`, `pa-kpi-sectionhead`); seven design-specific files carry per-design layout + typography. All wired into `_core.scss` after `data-viz`.
+- **All `kpi-*` classes renamed to `pa-kpi-*`** to match the framework's BEM prefix rule. Element (`__header`, `__live`, `__footer`, `__detail`) and modifier (`--positive`, `--negative`, `--neutral`, `--up-strong`, `--down-strong`) structures preserved 1:1.
+- **Per-component cascade variables namespace-prefixed.** `--kpi-accent` → `--pa-kpi-accent`, `--kpi-bar-color` → `--pa-kpi-bar-color`. Gauge tick knobs (`--pa-kpi-gauge-tick-pos`, `--pa-kpi-gauge-tick-color`) keep their gauge-specific names.
+- **No new framework tokens.** All sentiment, popover-chrome, sparkline-geometry, contrast-tier, and surface tokens were already emitted by `_base-css-variables.scss` from the 2.6.0 consolidation — this release reuses them.
 
 ## Installation