@keenmate/pure-admin-core 2.9.0-rc01 → 2.9.0-rc04

package/README.md

@@ -2,20 +2,26 @@
 
 Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as default.
 
-## What's New in 2.9.0-rc01
-
-- **`color-scheme` now emitted per theme via the new `$theme-color-scheme` SCSS variable.** Themes signal their colour scheme to the browser so native UA elements (scrollbars, form controls, `<input type="date">`) and the CSS `light-dark()` function resolve correctly. Previously themes applied dark palettes via `--pa-*` / `--base-*` overrides alone, so the browser still saw the host page as `color-scheme: normal` (effectively light) — embedded web components (`web-multiselect`, `web-daterangepicker`) using `light-dark()` for adaptive palettes silently picked the light value on dark themes. Themes set `$theme-color-scheme: dark` (always-dark) or add a one-line `color-scheme: dark;` to their `.pa-mode-dark` block (dual-mode). The unthemed `dist/css/main.css` now ships `color-scheme: light` at `:root`.
-- **Six `--base-*` legacy aliases dropped (breaking for consumers using them directly).** `--base-surface-1`, `--base-surface-2`, `--base-surface-3`, `--base-surface-inverse`, `--base-primary-bg`, `--base-primary-bg-hover` are gone — they aliased to existing semantic tokens (`--base-main-bg` / `--base-page-bg` / `--base-subtle-bg` / `--base-inverse-bg`) with no behavioural difference and added taxonomy confusion. `--base-primary-bg` specifically broke `web-multiselect@1.10.0+` dark-mode hover (its smart `color-mix` fallback was short-circuited by our compile-time `#ffffff` emit). Migration: rename to the matching `--base-*-bg` semantic name; for `--base-primary-bg-hover` consumers, switch to `--base-hover-bg` or compose with `color-mix`.
-- **Profile panel role chip migrated to `.pa-badge` (markup-breaking).** The bespoke `.pa-profile-panel__role` class hardcoded uppercase + letter-spacing and pointed at `--pa-header-profile-name-color`, which rendered as black-on-dark in panel context. Replaced with the standard `.pa-badge` component (theme-tuned for both modes). Snippet markup updated: `<span class="pa-profile-panel__role">…</span>` → `<span class="pa-badge">…</span>`. Use `.pa-badge--light` / `--primary` / `--info` / `--success` / `--warning` / `--danger` for variants.
-- **Coloured card variants no longer leak white pixels around the header chrome.** Two independent causes addressed together — corner-radius mismatch at the header's TOP corners (header's 8px curved more than the card's effective 7px inner radius, exposing a thin slice of card bg) and a gray hairline along the header's BOTTOM edge (border-bottom stayed `--pa-border-color` on coloured variants). The header now omits `border-top-*-radius` (card's `overflow: hidden` clips it) and each variant overrides `border-bottom-color` to match its background. Affects `.pa-card--primary` / `--success` / `--warning` / `--danger` and `.pa-card--color-1` through `--color-9`.
-
-## 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.9.0-rc04
+
+- **New: Range Group — a compact multi-range filter (`.pa-range-group` + a reusable `.pa-range` slider).** One toggle summarises several numeric filters inline (`AGE 25–60 / SALARY $40,000–$200,000 / CHILDREN 2+`) and expands into a Floating-UI panel with one slider per dimension — standing in for a row of separate sliders in a filter bar. Per-row dual-thumb range or single-thumb threshold, RTL-correct by construction, with a `--pa-range-*` theming token namespace and a bubbling `change` / `apply` / `reset` event contract keyed by dimension.
+- **Range Group sliders are richly interactive.** Major/minor tick marks with optional value labels, opt-in snap-to-tick, click-anywhere-to-seek tracks that grab the nearest handle, and five selectable handle shapes (circle, rectangle, bar, chevron, needle) — all pure CSS, mixable per row. Behaviour ships in the package as `range-group.js` (exposed via the `./js/*` export).
+- **The package now ships the components' JavaScript (`src/js/`, via the `./js/*` export).** Interactive behaviours (split-button dropdowns, splitter drag, tooltips/popovers, toasts, command palette, …) were previously referenced in markup but never published; consumers now get the actual implementations instead of dangling handlers.
+- **Stat square — fit-to-box mode (`data-pa-stat-fit` + `pa-stat-fit.js`).** The primary number scales to fill the tile at the largest font that still fits, and supporting rows (symbol, label, change, context) reveal by priority as the tile earns both width and height — one tile that adapts across dashboard sizes instead of a fixed layout.
+- **Auto-absorb split-button toolbars (`.pa-btn-toolbar` + `pa-btn-split--auto-absorb`).** Sibling buttons fold into a split button's dropdown when the row runs out of width and pop back out as space returns, with per-button drop priority — progressive collapse without a parallel "more" menu.
+- **`.pa-splitter` — `pa-splitter:resize` / `:collapse` / `:expand` `CustomEvent`s.** Three bubbling events fire from the affected pane (`resize.detail = { index, pane, size }`, collapse / expand detail = `{ index, pane }`) so consumers can wire sidebars, analytics, or persistence-coupled toolbars on the splitter root with a single delegated listener. `resize` is unfiltered — debounce in the handler. `collapse` / `expand` fire only on user-initiated transitions; init from saved state stays silent.
+- **`.pa-splitter` — drag against a rail'd primary is now asymmetric.** Dragging outward (the direction that would grow the pane) releases the rail and follows the cursor; dragging inward (into the rail, would shrink further) is fully inert. Previously the drag-from-rail path pre-cleared `isMin` on `pointerdown` regardless of direction, so the card visually flashed out of its rail state before the user could express expand intent in the opposite direction — read as the splitter "guessing wrong". Mirrors `svelte-fluentui/MultiSplitter`'s drag-to-be-explicit gate.
+- **`.pa-splitter` — tap-without-drag on the gutter no longer restores a rail'd pane.** Restore gestures are now: rail-body click, dblclick on the gutter, focus + `Enter`/`Space`, `[data-pa-splitter-toggle]` button, or drag outward past the snap threshold. Users expected drag-to-be-explicit and didn't connect "tap the gutter" with the rail-pane body as a restore surface.
+- **`.pa-splitter` — per-pane orientation class** (`pa-splitter__pane--horizontal` / `--vertical`) stamped at registration. Forward-compat hook for theme authors writing nested-splitter-safe rail CSS without walking the DOM to figure out the enclosing splitter's orientation.
+
+## 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.
 
 ## Installation
 
@@ -63,6 +69,47 @@ $btn-primary-bg: #your-button-color;
 @import '@keenmate/pure-admin-core/src/scss/main';
 ```
 
+### JavaScript (Interactive Components)
+
+The framework is CSS-first, but several components need a small vanilla-JS
+behavior to work (no framework runtime, no build step required). These ship
+in `src/js/` and are exposed under the `./js/*` export:
+
+```js
+// Split buttons + the auto-absorb button toolbar
+import '@keenmate/pure-admin-core/js/split-button.js';       // toggleSplitMenu()
+import '@keenmate/pure-admin-core/js/btn-split-auto-absorb.js';
+```
+
+Or via a plain script tag:
+
+```html
+<script src="node_modules/@keenmate/pure-admin-core/src/js/split-button.js"></script>
+```
+
+Each file is a self-contained IIFE that wires itself up on load (and exposes a
+small global / `window.Pa*` API for re-init after dynamic markup injection).
+Pull in only the files for the components you use:
+
+| Component | File(s) |
+|---|---|
+| Split button dropdown | `split-button.js` (defines `toggleSplitMenu`) |
+| Auto-absorb toolbar (`.pa-btn-toolbar`) | `split-button.js` **+** `btn-split-auto-absorb.js` |
+| Tooltips / popovers | `tooltips-popovers.js` |
+| Splitter | `splitter.js` |
+| Toasts | `toast-service.js` |
+| Command palette | `command-palette.js` |
+| Progressive overflow | `overflow.js` |
+| Fit-to-box stat | `pa-stat-fit.js` |
+| Modal dialogs | `modal-dialogs.js` |
+| Range group (`.pa-range-group` / `.pa-range`) | `range-group.js` |
+
+**Positioning dependency:** `split-button.js`, `tooltips-popovers.js`, and
+`range-group.js` use
+[Floating UI](https://floating-ui.com) for dropdown/tooltip placement and
+expect it on the page as the `window.FloatingUIDOM` global (e.g. the
+`@floating-ui/dom` UMD build). Load it before those scripts.
+
 ## Using HTML Snippets
 
 The `snippets/` directory contains clean HTML patterns for all components: