@keenmate/pure-admin-core 2.5.0 → 2.7.0

package/README.md

@@ -2,20 +2,31 @@
 
 Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as default.
 
-## What's New in 2.5.0
-
-- **Form Demo showcase page** (`/showcases/form-demo`) — Vanilla-JS CRUD form mirroring the LiveView form demo from `keen-pure-admin`: inline validation slots, edit/update flow, optimistic delete with toast-undo, and a `simulateServerSave()` failure path so error states are exercisable without any tooling.
-- **Alert system overhaul** — `pa-alert__heading` is now the single heading element (compact default + new `--lg` modifier for punchy presentation), default alignment flipped to `align-items: center` so icons sit nicely with single-line content (new `pa-alert--multiline` opt-out for icon + multi-line stacks), real size scale on `--sm` / `--lg` (both padding *and* font now step in 0.25rem / 0.2rem increments), and `__actions` renders with a toast-style separator. Multi-element layouts (heading + list + actions) stack reliably now via `flex-basis: 100%` on structural children.
-- **Snippets audit + gap pass** — Every snippet under `snippets/` cross-checked against its SCSS source (27 audit commits, tracked in `snippets/AUDIT.md`). Wrong attribute names, dead classes, and structural omissions corrected across the board. Four new gap-pass snippets: `filter-card`, `statistics`, `notifications`, `data-display`.
-- **Popconfirm position classes renamed (Breaking)** — `pa-popconfirm--right` / `--left` → `pa-popconfirm--end` / `--start`. SCSS uses logical properties so the popconfirm and its arrow mirror in `dir="rtl"`. No backwards-compatibility aliases — update markup directly.
-- **`pa-alert__heading` size now opt-in (Breaking)** — Was hardcoded `font-size-lg`; defaults to the alert's body font-size now. Add `pa-alert__heading--lg` on existing alerts to keep the previous bigger treatment.
-
-## What's New in 2.4.0
-
-- **`download-themes` bin removed** — Theme management now lives in the [`pureadmin` CLI](https://www.npmjs.com/package/@keenmate/pureadmin) (`npx pureadmin themes add/update/list`). README's Theme Setup section rewritten to match.
-- **Theme-aware charts** — Demo dashboard chart rewritten to source colors and fonts from Pure Admin CSS custom properties (`--pa-accent`, `--pa-text-color-*`, `--base-font-family`). Establishes the canonical pattern for SVG charts tracking the active theme.
-- **KPI square stats theme correctly** — `pa-stat--square` color variants now route through `--pa-accent` / `--pa-success-bg` / etc. instead of raw SCSS vars that resolved to Bootstrap defaults in every theme.
-- **Profile panel readable on colored headers** — Name, email, role badge, and tab icons now use `--pa-header-profile-name-color` (guaranteed to contrast with header bg) instead of body text vars, with opacity/color-mix for hierarchy.
+## 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.
 
 ## Installation