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

package/README.md

@@ -2,21 +2,22 @@
 
 Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as default.
 
-## 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.
+## What's New in 2.9.0-rc03
+
+- **`.pa-splitter` drag model reworked to "rebalance-on-drag".** Each gutter now resizes only its primary neighbour (edge-closer side, LTR/RTL tiebreaker on ties); the matching delta is absorbed by the immediate adjacent non-rail pane (classic boundary feel), or — when the adjacent pane is rail — tunnels through the rail wall to the contiguous non-rail block beyond. Eliminates the "boundary locks when both sides are rail" deadlock from the prior model — drag-from-rail with a railed neighbour now grows the primary by pulling room from the next section.
+- **Middle panes can now minimize to rail** (previously first / last only). Any pane with `data-pa-splitter-minimize` collapses on toggle / dblclick / drag-snap regardless of position. Snap-into-rail enforces an "at least one expanded pane" invariant — you can't drag the last visible pane to rail and end up with nothing to grab.
+- **Restoring a minimized pane reclaims layout gaps cleanly.** When a prior minimize hit an absorber's `max` cap and left empty space in the layout, restoring the pane now reaches its remembered size by drawing from the gap (not just from other panes' shrink headroom) — fixes the "restored pane stuck at min width" surprise. Conversely, restoring no longer aggressively inflates a sibling pane to fill remaining gap — empty space stays as empty space and gets consumed as more panes restore. No more "sibling pane suddenly jumps" UX.
+- **Rail width in `--pa-splitter-rail-size` now correctly resolves `rem` / non-px units.** Previously `parseFloat("4rem")` returned `4` and snapped rail panes to 4px-wide strips; rebuilt via a hidden probe element so the browser does the unit resolution. The three-step fallback chain (per-instance attribute → CSS var → literal 40) still applies.
+- **Gutter highlighting now isolates the dragged gutter only.** During a drag, the splitter `--dragging` modifier suppresses `:hover` / `:focus-visible` on sibling gutters so they don't light up as the cursor passes over them or as a stale focus ring lingers — only the active gutter carries the highlight.
+- **Splitter padding subtracted from available space.** Flex children sit inside the splitter's content box but `clientWidth` includes padding — without subtracting it the last pane's `flex-basis` overflowed and got clipped by `overflow: hidden`. Visible in the N-pane demo where the rightmost rail's right edge touched the splitter border.
+
+## What's New in 2.9.0-rc02
+
+- **`.pa-splitter` — resizable container with optional collapse-to-rail.** Vanilla JS + SCSS, two orientations (`--horizontal` / `--vertical`), per-instance constraints (`min-start` / `max-start` accept px or %), and `localStorage` persistence via `data-pa-splitter-id`. Pointer-event drag (mouse / touch / pen), `gap`-aware constraint math, keyboard a11y on the gutter (`role="separator"`, arrow keys, `Home`/`End`, `Enter`/`Space` to toggle), and a `ResizeObserver`-driven re-clamp on container resize. Opt-in `data-pa-splitter-minimize="start" | "end"` collapses a pane to a thin sideways-rotated header rail; dragging past a snap threshold commits, dragging back outward restores.
+- **`.pa-splitter` N-pane mode (3+ panes).** `init()` is now a dispatcher: the legacy 2-pane path (selected by `pane--start` + `pane--end` markup) is preserved byte-identical; everything else goes through `initNPane()`. Per-pane API: `data-pa-splitter-size="240px|30%"` for initial sizing, `-min` / `-max` for per-pane clamps, `data-pa-splitter-minimize` as presence marker (first / last pane only — middle-pane rail rotation has nowhere clean to dock). Drag math is per-gutter stop-at-min (Split.js basic-mode semantics). Container-resize redistributes proportionally to unminimized panes; minimized panes stay pinned to rail. Storage shape versioned under the same `pa-splitter:<id>` key.
+- **`pa-card__actions--responsive` — CSS-only collapse to a split button when the header runs out of space.** Render both forms inline (`pa-card__actions-full` + `pa-card__actions-collapsed`, the latter hosting a `pa-btn-split`); a container query on `.pa-card__header:has(> .pa-card__actions--responsive)` swaps which is visible. Threshold lives in one SCSS variable (`$card-actions-collapse-at`, default `28rem`). No JS, no `ResizeObserver` — but action data is duplicated in the DOM.
+- **`pa-card__actions--overflow` — JS-driven progressive collapse into a "..." menu.** Complement to `--responsive`: walks buttons into an overflow menu one at a time as space shrinks, restoring them in original DOM order as it grows. `data-pa-actions-overflow-from="end" | "start"` controls drop direction; `data-pa-actions-priority="N"` per button pins primary actions. Menu reuses `pa-btn-split__menu` styling (one menu source across split-button and overflow). Positioning via Floating UI (`computePosition` + `offset` + `flip` + `shift` + `autoUpdate`), with a hand-rolled fallback when `FloatingUIDOM` isn't loaded. Auto-closes on any wrapper resize or when the trigger goes `display: none` (e.g. splitter rail mode).
+- **`pa-btn--ghost` variant defined in core.** Previously referenced by demo files (`alerts`, `notifications`, `splitter`) but had no SCSS rule — every usage silently rendered as a base `.pa-btn`. Now defined in `_buttons.scss`: transparent background and border, `var(--pa-text-secondary)` text, hover snaps to `var(--pa-surface-hover)` + `--pa-text-color-1`. No new tokens introduced; themes need a rebuild to pick up the variant.
 
 ## Installation
 

package/dist/css/main.css

@@ -5425,8 +5425,6 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 .pa-card__header {
   padding: 0.5rem 1rem;
   min-height: 4rem;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
   border-bottom: 1px solid var(--pa-border-color);
   background: var(--pa-card-header-bg);
   display: flex;
@@ -5486,6 +5484,12 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 .pa-card__header .pa-btn-group {
   flex-shrink: 0;
 }
+.pa-card__header .pa-card__actions--overflow {
+  flex-shrink: 1;
+}
+.pa-card__header:has(> .pa-card__actions--overflow) > .pa-card__title {
+  min-width: 6rem;
+}
 .pa-card__header .pa-btn {
   margin-top: -0.25rem;
   margin-bottom: -0.25rem;
@@ -5595,6 +5599,25 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   gap: 0.8rem;
   align-items: center;
 }
+.pa-card__actions--responsive > .pa-card__actions-full {
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+}
+.pa-card__actions--responsive > .pa-card__actions-collapsed {
+  display: none;
+}
+.pa-card__actions--overflow {
+  min-width: 0;
+  overflow: hidden;
+}
+.pa-card__actions--overflow > * {
+  flex-shrink: 0;
+}
+.pa-card__header:has(> .pa-card__actions--responsive) {
+  container-type: inline-size;
+  container-name: pa-card-header;
+}
 .pa-card__meta {
   color: var(--pa-text-color-2);
   font-size: 1.4rem;
@@ -5604,6 +5627,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--primary .pa-card__header {
   background-color: var(--pa-accent);
+  border-bottom-color: var(--pa-accent);
   color: var(--pa-btn-primary-text);
 }
 .pa-card--primary .pa-card__header h1,
@@ -5619,6 +5643,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--success .pa-card__header {
   background-color: var(--pa-success-bg);
+  border-bottom-color: var(--pa-success-bg);
   color: var(--pa-btn-success-text);
 }
 .pa-card--success .pa-card__header h1,
@@ -5634,6 +5659,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--warning .pa-card__header {
   background-color: var(--pa-warning-bg);
+  border-bottom-color: var(--pa-warning-bg);
   color: var(--pa-btn-warning-text);
 }
 .pa-card--warning .pa-card__header h1,
@@ -5649,6 +5675,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--danger .pa-card__header {
   background-color: var(--pa-danger-bg);
+  border-bottom-color: var(--pa-danger-bg);
   color: var(--pa-btn-danger-text);
 }
 .pa-card--danger .pa-card__header h1,
@@ -5695,6 +5722,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--color-1 .pa-card__header {
   background-color: var(--pa-color-1);
+  border-bottom-color: var(--pa-color-1);
   color: var(--pa-color-1-text);
 }
 .pa-card--color-1 .pa-card__header h1,
@@ -5710,6 +5738,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--color-2 .pa-card__header {
   background-color: var(--pa-color-2);
+  border-bottom-color: var(--pa-color-2);
   color: var(--pa-color-2-text);
 }
 .pa-card--color-2 .pa-card__header h1,
@@ -5725,6 +5754,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--color-3 .pa-card__header {
   background-color: var(--pa-color-3);
+  border-bottom-color: var(--pa-color-3);
   color: var(--pa-color-3-text);
 }
 .pa-card--color-3 .pa-card__header h1,
@@ -5740,6 +5770,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--color-4 .pa-card__header {
   background-color: var(--pa-color-4);
+  border-bottom-color: var(--pa-color-4);
   color: var(--pa-color-4-text);
 }
 .pa-card--color-4 .pa-card__header h1,
@@ -5755,6 +5786,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--color-5 .pa-card__header {
   background-color: var(--pa-color-5);
+  border-bottom-color: var(--pa-color-5);
   color: var(--pa-color-5-text);
 }
 .pa-card--color-5 .pa-card__header h1,
@@ -5770,6 +5802,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--color-6 .pa-card__header {
   background-color: var(--pa-color-6);
+  border-bottom-color: var(--pa-color-6);
   color: var(--pa-color-6-text);
 }
 .pa-card--color-6 .pa-card__header h1,
@@ -5785,6 +5818,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--color-7 .pa-card__header {
   background-color: var(--pa-color-7);
+  border-bottom-color: var(--pa-color-7);
   color: var(--pa-color-7-text);
 }
 .pa-card--color-7 .pa-card__header h1,
@@ -5800,6 +5834,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--color-8 .pa-card__header {
   background-color: var(--pa-color-8);
+  border-bottom-color: var(--pa-color-8);
   color: var(--pa-color-8-text);
 }
 .pa-card--color-8 .pa-card__header h1,
@@ -5815,6 +5850,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--color-9 .pa-card__header {
   background-color: var(--pa-color-9);
+  border-bottom-color: var(--pa-color-9);
   color: var(--pa-color-9-text);
 }
 .pa-card--color-9 .pa-card__header h1,
@@ -5911,6 +5947,48 @@ a.pa-card p {
   padding-bottom: 0.8rem;
 }
 
+@container pa-card-header (max-width: 28rem) {
+  .pa-card__actions--responsive > .pa-card__actions-full {
+    display: none;
+  }
+  .pa-card__actions--responsive > .pa-card__actions-collapsed {
+    display: flex;
+    align-items: center;
+  }
+}
+.pa-splitter__pane--minimized > .pa-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+.pa-splitter__pane--minimized > .pa-card > .pa-card__body,
+.pa-splitter__pane--minimized > .pa-card > .pa-card__footer {
+  display: none;
+}
+.pa-splitter__pane--minimized > .pa-card > .pa-card__header {
+  flex: 1 1 auto;
+  justify-content: flex-start;
+  writing-mode: sideways-rl;
+}
+.pa-splitter__pane--minimized > .pa-card > .pa-card__header i,
+.pa-splitter__pane--minimized > .pa-card > .pa-card__header svg {
+  writing-mode: initial;
+}
+.pa-splitter__pane--minimized > .pa-card > .pa-card__header .pa-card__title {
+  padding-top: calc((4rem - 1.6rem) / 2 - 0.5rem);
+}
+.pa-splitter__pane--minimized > .pa-card > .pa-card__header .pa-btn,
+.pa-splitter__pane--minimized > .pa-card > .pa-card__header .pa-btn-group,
+.pa-splitter__pane--minimized > .pa-card > .pa-card__header button,
+.pa-splitter__pane--minimized > .pa-card > .pa-card__header input {
+  display: none;
+}
+
+.pa-splitter--minimize-mirror .pa-splitter__pane--minimized > .pa-card > .pa-card__header :is(h1, h2, h3, h4, h5, h6) {
+  transform: scale(-1, -1);
+}
+
 /* ========================================
    Tabs Component
    Standalone tabs for organizing content into separate sections
@@ -7295,6 +7373,15 @@ a.pa-card p {
   background-color: var(--pa-main-bg);
   border-color: var(--pa-accent);
 }
+.pa-btn--ghost {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--pa-text-secondary);
+}
+.pa-btn--ghost:hover {
+  background-color: var(--pa-surface-hover);
+  color: var(--pa-text-color-1);
+}
 .pa-btn--xs {
   height: 3.1rem;
   padding: 0.6rem 0.8rem;
@@ -12264,18 +12351,6 @@ code {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.pa-profile-panel__role {
-  display: inline-block;
-  padding: 0.8rem 1.2rem;
-  background-color: var(--pa-accent-light);
-  background-color: color-mix(in srgb, var(--pa-header-profile-name-color) 15%, transparent);
-  color: var(--pa-header-profile-name-color);
-  font-size: 1.2rem;
-  font-weight: 500;
-  border-radius: var(--pa-border-radius);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
 .pa-profile-panel__close {
   position: absolute;
   top: 1.6rem;
@@ -15243,6 +15318,138 @@ code {
   transform: rotate(180deg);
 }
 
+/* ========================================
+   Splitter Component
+   Resizable container with draggable gutters (2 or more panes).
+   Modifiers:
+     --horizontal       panes side-by-side, vertical gutter (default)
+     --vertical         panes stacked, horizontal gutter
+     --dragging         applied to root while user is dragging
+     --collapsed        start pane has been collapsed to 0
+     --minimize-mirror  flip rail-title text 180° (bottom-to-top reading)
+
+   Rail mode is fully decoupled from any specific component. The splitter
+   only rotates elements marked `[data-pa-splitter-rail-title]` inside a
+   minimized pane; per-component adaptation (e.g. card body / footer
+   hiding) lives in that component's SCSS, keyed off
+   `.pa-splitter__pane--minimized > .pa-foo`. Card integration is in
+   `_cards.scss`.
+   ======================================== */
+:root {
+  --pa-splitter-rail-size: 4rem;
+}
+
+.pa-splitter {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.pa-splitter--horizontal {
+  flex-direction: row;
+}
+.pa-splitter--horizontal > .pa-splitter__gutter {
+  cursor: col-resize;
+  width: var(--pa-splitter-gutter-size, 0.6rem);
+  height: auto;
+  align-self: stretch;
+}
+.pa-splitter--horizontal > .pa-splitter__gutter::before {
+  width: 2px;
+  height: 2.4rem;
+}
+.pa-splitter--vertical {
+  flex-direction: column;
+}
+.pa-splitter--vertical > .pa-splitter__gutter {
+  cursor: row-resize;
+  width: auto;
+  height: var(--pa-splitter-gutter-size, 0.6rem);
+  align-self: stretch;
+}
+.pa-splitter--vertical > .pa-splitter__gutter::before {
+  width: 2.4rem;
+  height: 2px;
+}
+.pa-splitter--dragging {
+  user-select: none;
+}
+.pa-splitter--dragging > .pa-splitter__pane {
+  pointer-events: none;
+}
+.pa-splitter--dragging > .pa-splitter__gutter:not(.pa-splitter__gutter--active) {
+  pointer-events: none;
+}
+.pa-splitter--dragging > .pa-splitter__gutter:not(.pa-splitter__gutter--active):focus-visible {
+  box-shadow: none;
+}
+.pa-splitter--dragging > .pa-splitter__gutter:not(.pa-splitter__gutter--active):focus-visible::before {
+  background-color: rgba(128, 128, 128, 0.45);
+}
+.pa-splitter__gutter--active {
+  background-color: rgba(0, 123, 255, 0.35);
+}
+.pa-splitter__gutter--active::before {
+  background-color: #007bff;
+}
+.pa-splitter__pane {
+  overflow: auto;
+  min-width: 0;
+  min-height: 0;
+}
+.pa-splitter__pane--start {
+  flex: 0 0 auto;
+}
+.pa-splitter__pane--end {
+  flex: 1 1 0;
+}
+.pa-splitter__pane--minimized {
+  cursor: pointer;
+  overflow: hidden;
+}
+.pa-splitter__pane--minimized [data-pa-splitter-rail-title] {
+  writing-mode: sideways-rl;
+}
+.pa-splitter__pane--minimized [data-pa-splitter-rail-title] i,
+.pa-splitter__pane--minimized [data-pa-splitter-rail-title] svg {
+  writing-mode: initial;
+}
+.pa-splitter--minimize-mirror .pa-splitter__pane--minimized [data-pa-splitter-rail-title] :is(h1, h2, h3, h4, h5, h6) {
+  transform: scale(-1, -1);
+}
+.pa-splitter__gutter {
+  position: relative;
+  flex: 0 0 auto;
+  background-color: rgba(128, 128, 128, 0.08);
+  transition: background-color 0.15s ease;
+  touch-action: none;
+  outline: none;
+}
+.pa-splitter__gutter::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: rgba(128, 128, 128, 0.45);
+  border-radius: 2px;
+  transition: background-color 0.15s ease;
+}
+.pa-splitter__gutter:hover {
+  background-color: rgba(128, 128, 128, 0.18);
+}
+.pa-splitter__gutter:hover::before {
+  background-color: #007bff;
+}
+.pa-splitter__gutter:focus-visible {
+  box-shadow: inset 0 0 0 2px rgba(0, 123, 255, 0.4);
+}
+.pa-splitter__gutter:focus-visible::before {
+  background-color: #007bff;
+}
+
 /* ========================================
    Data Display Components
    Read-only label-value field pairs
@@ -19321,12 +19528,6 @@ html.pa-font-base-12 {
   --base-active-bg: rgb(218.2368421053, 223.25, 228.2631578947);
   --base-disabled-bg: #e9ecef;
   --base-elevated-bg: #f5f5f5;
-  --base-surface-1: #ffffff;
-  --base-surface-2: #f8f9fa;
-  --base-surface-3: #e9ecef;
-  --base-surface-inverse: #2c3e50;
-  --base-primary-bg: #ffffff;
-  --base-primary-bg-hover: rgb(242.25, 242.25, 242.25);
   --base-border-color: #e1e5e9;
   --base-border: 1px solid #e1e5e9;
   --base-input-bg: #ffffff;
@@ -19401,6 +19602,7 @@ html.pa-font-base-12 {
   --base-border-radius-sm: 0.4;
   --base-border-radius-md: 0.6;
   --base-border-radius-lg: 0.8;
+  color-scheme: light;
   --pa-main-bg: #f8f9fa;
   --pa-page-bg: #f8f9fa;
   --pa-subtle-bg: #ffffff;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "2.8.0",
+  "version": "2.9.0-rc03",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {

package/snippets/profile.html

@@ -58,7 +58,7 @@ to save horizontal space in the navbar.
                 <!-- title= attrs give a tooltip when the text truncates with ellipsis -->
                 <h3 class="pa-profile-panel__name"  title="John Doe">John Doe</h3>
                 <p  class="pa-profile-panel__email" title="john.doe@company.com">john.doe@company.com</p>
-                <span class="pa-profile-panel__role">Administrator</span>
+                <span class="pa-badge">Administrator</span>
             </div>
             <button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">
                 ✕
@@ -124,7 +124,7 @@ to save horizontal space in the navbar.
             <div class="pa-profile-panel__info">
                 <h3 class="pa-profile-panel__name">John Doe</h3>
                 <p  class="pa-profile-panel__email">john.doe@company.com</p>
-                <span class="pa-profile-panel__role">Administrator</span>
+                <span class="pa-badge">Administrator</span>
             </div>
             <button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">✕</button>
         </div>
@@ -170,7 +170,7 @@ to save horizontal space in the navbar.
             <div class="pa-profile-panel__info">
                 <h3 class="pa-profile-panel__name">Jane Smith</h3>
                 <p  class="pa-profile-panel__email">jane.smith@corp.example</p>
-                <span class="pa-profile-panel__role">Analyst</span>
+                <span class="pa-badge">Analyst</span>
             </div>
             <button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">✕</button>
         </div>
@@ -207,7 +207,7 @@ to save horizontal space in the navbar.
             <div class="pa-profile-panel__info">
                 <h3 class="pa-profile-panel__name">John Doe</h3>
                 <p  class="pa-profile-panel__email">john.doe@company.com</p>
-                <span class="pa-profile-panel__role">Administrator</span>
+                <span class="pa-badge">Administrator</span>
             </div>
             <button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">✕</button>
         </div>
@@ -425,7 +425,10 @@ HEADER:
 - .pa-profile-panel__info               Text column (name + email + role).
 - .pa-profile-panel__name               User name (ellipsis on overflow).
 - .pa-profile-panel__email              Email (ellipsis on overflow).
-- .pa-profile-panel__role               Role badge (uppercase, tinted bg).
+- .pa-badge                             Role chip (standard badge component;
+                                        add `.pa-badge--primary` / `--info` /
+                                        `--success` / `--warning` / `--danger`
+                                        / `--light` for variant styling).
 - .pa-profile-panel__close              Close button (top-end corner).
 
 Theme-colour design choices (why they're like this):
@@ -433,11 +436,13 @@ Theme-colour design choices (why they're like this):
   colour the header uses for the user's name. This guarantees contrast
   against dark / coloured header backgrounds across all themes (body
   text colours would read wrong on a dark header).
-- __role paints its background with color-mix(in srgb,
-  var(--pa-header-profile-name-color) 15%, transparent) so the tint is
-  derived from the header colour and works on any theme. An older
-  --pa-accent-light fallback is declared first for browsers without
-  color-mix.
+- Role uses the standard `.pa-badge` component (var(--pa-btn-secondary-bg)
+  / -text by default), which themes already tune for both light and dark
+  modes. Previously this was a custom `.pa-profile-panel__role` element
+  coupled to --pa-header-profile-name-color — that token is sized for the
+  header (e.g. black on yellow in Express) and went invisible on dark
+  panel bodies. Migrated to `.pa-badge` in 2.9.0; older snippet markup
+  using `pa-profile-panel__role` needs the class swap.
 
 TABS (optional — sits between __header and __body):
 - .pa-profile-panel__tabs               Tabs container (border-bottom + header-bg).