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

package/README.md

@@ -2,6 +2,18 @@
 
 Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as default.
 
+## 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.
@@ -11,14 +23,6 @@ Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as defau
 - **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
 
 ```bash
@@ -65,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:

package/dist/css/main.css

@@ -5490,11 +5490,29 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 .pa-card__header:has(> .pa-card__actions--overflow) > .pa-card__title {
   min-width: 6rem;
 }
+.pa-card__header:has(.pa-btn-toolbar) > h1, .pa-card__header:has(.pa-btn-toolbar) > h2, .pa-card__header:has(.pa-btn-toolbar) > h3, .pa-card__header:has(.pa-btn-toolbar) > h4, .pa-card__header:has(.pa-btn-toolbar) > h5, .pa-card__header:has(.pa-btn-toolbar) > h6, .pa-card__header:has(.pa-btn-toolbar) > .pa-card__title {
+  flex-shrink: 9999;
+  min-width: 8rem;
+}
+.pa-card__header .pa-card__actions:has(> .pa-btn-toolbar) {
+  flex-shrink: 1;
+  min-width: 0;
+}
 .pa-card__header .pa-btn {
   margin-top: -0.25rem;
   margin-bottom: -0.25rem;
   flex-shrink: 0;
 }
+.pa-card__header .pa-btn-toolbar,
+.pa-card__header .pa-card__actions--overflow {
+  margin-top: -0.25rem;
+  margin-bottom: -0.25rem;
+}
+.pa-card__header .pa-btn-toolbar .pa-btn,
+.pa-card__header .pa-card__actions--overflow .pa-btn {
+  margin-top: 0;
+  margin-bottom: 0;
+}
 .pa-card__header--underlined h1, .pa-card__header--underlined h2, .pa-card__header--underlined h3, .pa-card__header--underlined h4, .pa-card__header--underlined h5, .pa-card__header--underlined h6 {
   border-bottom: 2px solid var(--pa-accent);
   padding-bottom: 0.8rem;
@@ -6469,6 +6487,7 @@ a.pa-card p {
   padding: 2.4rem;
   min-height: 12.8rem;
   min-width: 12.8rem;
+  max-height: 16rem;
   position: relative;
   border-radius: var(--pa-border-radius);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -6480,7 +6499,7 @@ a.pa-card p {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 .pa-stat--square .pa-stat__number {
-  font-size: clamp(3.2rem, 25cqi, 9.6rem);
+  font-size: clamp(3.2rem, 25cqi, 7.2rem);
   font-weight: 700;
   line-height: 1;
   color: inherit;
@@ -6490,7 +6509,7 @@ a.pa-card p {
   white-space: nowrap;
 }
 .pa-stat--square .pa-stat__symbol {
-  font-size: clamp(1.6rem, 12cqi, 4.8rem);
+  font-size: clamp(1.6rem, 12cqi, 3.6rem);
   font-weight: 700;
   line-height: 1;
   color: inherit;
@@ -6526,6 +6545,10 @@ a.pa-card p {
   background-color: var(--pa-warning-bg);
   color: var(--pa-btn-warning-text);
 }
+.pa-stat--square.pa-stat--warning .pa-stat__number {
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  filter: none;
+}
 .pa-stat--square.pa-stat--danger {
   background-color: var(--pa-danger-bg);
   color: var(--pa-btn-danger-text);
@@ -6534,6 +6557,127 @@ a.pa-card p {
   background-color: var(--pa-text-color-2);
   color: var(--pa-btn-primary-text);
 }
+.pa-stat--square[data-pa-stat-fit] {
+  container-type: size;
+  container-name: pa-stat;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: stretch;
+  max-height: none;
+}
+.pa-stat--square[data-pa-stat-fit] .pa-stat__slot {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.pa-stat--square[data-pa-stat-fit] .pa-stat__group {
+  display: inline-flex;
+  align-items: baseline;
+  column-gap: 0.15em;
+  line-height: 1;
+  white-space: nowrap;
+  font-weight: 700;
+}
+.pa-stat--square[data-pa-stat-fit] .pa-stat__group .pa-stat__number {
+  font-size: 1em;
+}
+.pa-stat--square[data-pa-stat-fit] .pa-stat__group .pa-stat__symbol {
+  font-size: 0.5em;
+  opacity: 0.85;
+}
+.pa-stat--square[data-pa-stat-fit] .pa-stat__meta {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 0 0 auto;
+  font-size: 1.2rem;
+}
+.pa-stat--square[data-pa-stat-fit] .pa-stat__label {
+  flex: 0 0 auto;
+  margin-top: 0.35em;
+  font-size: 1em;
+}
+.pa-stat--square[data-pa-stat-fit] .pa-stat__change {
+  flex: 0 0 auto;
+  margin-top: 0.35em;
+  font-size: 0.9em;
+  font-weight: 600;
+  line-height: 1.2;
+  color: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pa-stat--square[data-pa-stat-fit] .pa-stat__change--positive {
+  color: var(--pa-positive);
+}
+.pa-stat--square[data-pa-stat-fit] .pa-stat__change--neutral {
+  color: var(--pa-neutral);
+}
+.pa-stat--square[data-pa-stat-fit] .pa-stat__change--negative {
+  color: var(--pa-negative);
+}
+.pa-stat--square[data-pa-stat-fit] .pa-stat__context {
+  flex: 0 0 auto;
+  margin-top: 0.35em;
+  font-size: 0.8em;
+  opacity: 0.7;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pa-stat--square[data-pa-stat-fit] .pa-stat__symbol,
+.pa-stat--square[data-pa-stat-fit] .pa-stat__label,
+.pa-stat--square[data-pa-stat-fit] .pa-stat__change,
+.pa-stat--square[data-pa-stat-fit] .pa-stat__context {
+  display: none;
+}
+@container pa-stat (min-width: 8rem) and (min-height: 4.5rem) {
+  .pa-stat--square[data-pa-stat-fit] .pa-stat__symbol {
+    display: inline;
+  }
+}
+@container pa-stat (min-width: 13rem) and (min-height: 6.5rem) {
+  .pa-stat--square[data-pa-stat-fit] .pa-stat__label {
+    display: block;
+  }
+}
+@container pa-stat (min-width: 18rem) and (min-height: 9.5rem) {
+  .pa-stat--square[data-pa-stat-fit] .pa-stat__change {
+    display: block;
+  }
+}
+@container pa-stat (min-width: 24rem) and (min-height: 13rem) {
+  .pa-stat--square[data-pa-stat-fit] .pa-stat__context {
+    display: block;
+  }
+}
+.pa-stat--square[data-pa-stat-fit].pa-stat--fit-wide {
+  flex-direction: row;
+  align-items: stretch;
+  column-gap: 2.4rem;
+}
+.pa-stat--square[data-pa-stat-fit].pa-stat--fit-wide .pa-stat__slot {
+  flex: 0 0 44%;
+  min-width: 0;
+  justify-content: center;
+}
+.pa-stat--square[data-pa-stat-fit].pa-stat--fit-wide .pa-stat__meta {
+  flex: 1 1 auto;
+  min-width: 0;
+  justify-content: center;
+}
+.pa-stat--square[data-pa-stat-fit].pa-stat--fit-wide .pa-stat__symbol {
+  display: inline;
+}
+.pa-stat--square[data-pa-stat-fit].pa-stat--fit-wide .pa-stat__label,
+.pa-stat--square[data-pa-stat-fit].pa-stat--fit-wide .pa-stat__change,
+.pa-stat--square[data-pa-stat-fit].pa-stat--fit-wide .pa-stat__context {
+  display: block;
+}
 
 .pa-kpi-grid {
   margin: -0.8rem;
@@ -7886,6 +8030,10 @@ a.pa-card p {
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 }
+.pa-btn-split--collapsed > .pa-btn-split__toggle:first-child {
+  border-radius: var(--pa-border-radius);
+  border-inline-start: none;
+}
 .pa-btn-split__toggle {
   border-inline-start: 1px solid rgba(255, 255, 255, 0.25);
   padding-inline: 0;
@@ -7983,6 +8131,18 @@ a.pa-card p {
   opacity: 0.7;
 }
 
+.pa-btn-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  min-width: 0;
+  overflow: hidden;
+  flex-shrink: 1;
+}
+.pa-btn-toolbar > * {
+  flex-shrink: 0;
+}
+
 /* ========================================
    Loader Components
    Spinners, dots, bars, pulse, ring, wave loaders and animations
@@ -11858,6 +12018,356 @@ web-multiselect {
   pointer-events: none;
 }
 
+/* ========================================
+   Range Group
+   A compact multi-range filter: one toggle that summarises several
+   numeric range filters (e.g. "Age / Salary / Children") inline, and
+   expands into a floating panel with one slider per dimension.
+
+   Two blocks live here, on purpose:
+
+   - .pa-range        — the slider primitive. Single- OR dual-thumb,
+                        driven entirely by CSS custom properties that JS
+                        sets (--_pos on each thumb, --_fill-start /
+                        --_fill-end on the fill). Positioning uses LOGICAL
+                        properties (inset-inline-*) so RTL mirrors for
+                        free — JS only ever deals in 0–100 percentages.
+   - .pa-range-group  — the compact control: a __toggle summarising the
+                        rows, and a floating __panel of .pa-range rows.
+                        The panel is anchored with Floating UI (see the
+                        demo's range-group.js, mirroring split-button.js).
+
+   The group is meant to drop into a filter-card __filters row as a
+   single control that stands in for N sliders. See snippets/range-group.html.
+   ======================================== */
+/* ----------------------------------------
+   Slider primitive — pa-range
+   ---------------------------------------- */
+.pa-range {
+  position: relative;
+  height: 2.2rem;
+  touch-action: none;
+  user-select: none;
+  cursor: pointer;
+}
+
+.pa-range--ticks-labeled {
+  height: calc(2.2rem + 1.6rem);
+}
+.pa-range--ticks-labeled .pa-range__rail {
+  top: calc(2.2rem / 2);
+}
+
+.pa-range__rail {
+  position: absolute;
+  inset-inline: calc(var(--pa-range-thumb-size, 1.6rem) / 2);
+  top: 50%;
+  transform: translateY(-50%);
+  height: var(--pa-range-track-height, 0.4rem);
+}
+
+.pa-range__track {
+  position: absolute;
+  inset: 0;
+  border-radius: 999px;
+  background-color: var(--pa-range-track, var(--pa-surface-track));
+}
+
+.pa-range__fill {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  height: var(--pa-range-track-height, 0.4rem);
+  border-radius: 999px;
+  background-color: var(--pa-range-fill, var(--pa-accent));
+  inset-inline-start: var(--_fill-start, 0%);
+  inset-inline-end: var(--_fill-end, 0%);
+}
+
+/* ---- Tick marks ----
+   Built by range-group.js when a row has data-ticks. The container lives
+   INSIDE the rail (so 0–100% maps to the same travel as the thumbs) and is
+   the rail's first child — painted behind the track/fill, so each tick shows
+   only as protruding ends. Marks are pointer-events:none, so a track click
+   still reaches the .pa-range click-to-seek handler. */
+.pa-range__ticks {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.pa-range__tick {
+  position: absolute;
+  top: 50%;
+  inset-inline-start: var(--_pos, 0%);
+  width: 0.1rem;
+  height: 0.9rem;
+  margin-inline-start: calc(0.1rem / -2);
+  transform: translateY(-50%);
+  border-radius: 999px;
+  background-color: var(--pa-range-tick, var(--pa-border-color));
+}
+
+.pa-range__tick--major {
+  width: 0.2rem;
+  height: 1.4rem;
+  margin-inline-start: calc(0.2rem / -2);
+  background-color: var(--pa-range-tick-major, var(--pa-text-tertiary));
+}
+
+.pa-range__tick-labels {
+  position: absolute;
+  inset-inline: 0;
+  top: calc(100% + 0.3rem);
+  height: 0;
+  pointer-events: none;
+}
+
+.pa-range__tick-label {
+  position: absolute;
+  inset-inline-start: var(--_pos, 0%);
+  transform: translateX(-50%);
+  font-size: 1rem;
+  color: var(--pa-text-tertiary);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.pa-range__thumb {
+  --_thumb-w: var(--pa-range-thumb-size, 1.6rem);
+  --_thumb-h: var(--pa-range-thumb-size, 1.6rem);
+  position: absolute;
+  top: 50%;
+  inset-inline-start: var(--_pos, 0%);
+  margin-inline-start: calc(var(--_thumb-w) / -2);
+  transform: translateY(-50%);
+  width: var(--_thumb-w);
+  height: var(--_thumb-h);
+  padding: 0;
+  border: 0.2rem solid var(--pa-range-thumb-border, var(--pa-accent));
+  border-radius: 50%;
+  background-color: var(--pa-range-thumb-bg, var(--pa-card-bg));
+  cursor: grab;
+  touch-action: none;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+}
+.pa-range__thumb:hover {
+  border-color: var(--pa-range-thumb-border-hover, var(--pa-accent-hover));
+}
+.pa-range__thumb:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 0.3rem var(--pa-range-focus-ring, var(--pa-accent-light));
+}
+.pa-range__thumb:active, .pa-range__thumb.pa-range__thumb--grabbing {
+  cursor: grabbing;
+  box-shadow: 0 0 0 0.3rem var(--pa-range-focus-ring, var(--pa-accent-light));
+}
+
+/* ---- Handle shapes ----
+   Modifiers on .pa-range that restyle its thumbs. Purely cosmetic — no JS
+   involvement — so a shape can be mixed per row. Each just overrides the
+   private size props + border-radius; centring follows automatically. */
+.pa-range--handle-rect .pa-range__thumb {
+  --_thumb-w: 1.2rem;
+  --_thumb-h: 1.9rem;
+  border-radius: var(--pa-border-radius-sm);
+}
+
+.pa-range--handle-bar .pa-range__thumb {
+  --_thumb-w: 0.35rem;
+  --_thumb-h: 2.2rem;
+  border-radius: 999px;
+  background-color: var(--pa-range-thumb-border, var(--pa-accent));
+}
+.pa-range--handle-bar .pa-range__thumb:hover {
+  background-color: var(--pa-range-thumb-border-hover, var(--pa-accent-hover));
+}
+
+.pa-range--handle-arrow .pa-range__thumb {
+  --_thumb-w: 1.6rem;
+  --_thumb-h: 2rem;
+  border-radius: var(--pa-border-radius-sm);
+}
+.pa-range--handle-arrow .pa-range__thumb::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  inset-inline-start: 50%;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-block-start: 0.2rem solid var(--pa-range-thumb-border, var(--pa-accent));
+  border-inline-end: 0.2rem solid var(--pa-range-thumb-border, var(--pa-accent));
+  transform: translateX(-0.177rem) translate(-50%, -50%) rotate(45deg);
+}
+
+.pa-range--handle-arrow .pa-range__thumb--min::before {
+  transform: translateX(0.177rem) translate(-50%, -50%) rotate(-135deg);
+}
+
+.pa-range--handle-needle .pa-range__thumb {
+  --_thumb-w: 1.2rem;
+  --_thumb-h: 2.2rem;
+  background-color: transparent;
+  border-color: transparent;
+  border-radius: var(--pa-border-radius-sm);
+}
+.pa-range--handle-needle .pa-range__thumb::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: 50%;
+  bottom: 50%;
+  width: 1.2rem;
+  height: 1.1rem;
+  margin-inline-start: calc(1.2rem / -2);
+  background-color: var(--pa-range-thumb-border, var(--pa-accent));
+  clip-path: polygon(50% 100%, 0 0, 100% 0);
+  transition: background-color 0.15s ease;
+}
+.pa-range--handle-needle .pa-range__thumb:hover::before {
+  background-color: var(--pa-range-thumb-border-hover, var(--pa-accent-hover));
+}
+
+.pa-range--single .pa-range__thumb--min {
+  display: none;
+}
+
+.pa-range--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ----------------------------------------
+   Compact control — pa-range-group
+   ---------------------------------------- */
+.pa-range-group {
+  position: relative;
+  display: inline-flex;
+}
+
+.pa-range-group__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 1.2rem;
+  width: 100%;
+  padding: 0.8rem 1.2rem;
+  border: 1px solid var(--pa-border-color);
+  border-radius: var(--pa-border-radius);
+  background-color: var(--pa-input-bg);
+  color: var(--pa-text-color-1);
+  font-size: 1.4rem;
+  line-height: 1.3;
+  text-align: start;
+  cursor: pointer;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.pa-range-group__toggle:hover {
+  border-color: var(--pa-accent-hover);
+}
+.pa-range-group__toggle:focus-visible {
+  outline: none;
+  border-color: var(--pa-accent);
+  box-shadow: 0 0 0 0.3rem var(--pa-accent-light);
+}
+
+.pa-range-group__summary {
+  flex: 1;
+  min-width: 0;
+  font-size: 1.4rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pa-range-group__seg-label {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--pa-text-tertiary);
+}
+
+.pa-range-group__seg-value {
+  font-weight: 500;
+  color: var(--pa-text-color-1);
+  font-variant-numeric: tabular-nums;
+}
+
+.pa-range-group__seg-value--empty {
+  color: var(--pa-text-tertiary);
+  font-weight: 400;
+}
+
+.pa-range-group__seg-sep {
+  color: var(--pa-text-tertiary);
+  margin-inline: 0.4rem;
+}
+
+.pa-range-group__caret {
+  flex-shrink: 0;
+  font-size: 1.2rem;
+  color: var(--pa-text-secondary);
+  transition: transform 0.2s ease;
+}
+
+.pa-range-group--open .pa-range-group__caret {
+  transform: rotate(180deg);
+}
+
+/* ---- Floating panel ---- */
+.pa-range-group__panel {
+  display: none;
+  flex-direction: column;
+  gap: 2.4rem;
+  min-width: var(--pa-range-group-panel-min-width, 32rem);
+  padding: 1.6rem;
+  border: 1px solid var(--pa-border-color);
+  border-radius: var(--pa-border-radius-lg);
+  background-color: var(--pa-card-bg);
+  box-shadow: var(--pa-detail-shadow);
+  z-index: 7500;
+}
+.pa-range-group__panel.pa-range-group__panel--open {
+  display: flex;
+}
+
+.pa-range-group__row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.pa-range-group__row-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.8rem;
+}
+
+.pa-range-group__row-label {
+  font-size: 1.4rem;
+  font-weight: 600;
+  color: var(--pa-text-color-1);
+}
+
+.pa-range-group__row-value {
+  font-size: 1.4rem;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: var(--pa-range-fill, var(--pa-accent));
+}
+.pa-range-group__row-value.pa-range-group__row-value--empty {
+  color: var(--pa-text-tertiary);
+}
+
+.pa-range-group__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.8rem;
+  margin-top: 0.4rem;
+  padding-top: 2.4rem;
+  border-top: 1px solid var(--pa-border-color);
+}
+
 /* ========================================
    Comparison Table Component
    Two-column and three-column comparison tables for version control, data changes, and merge operations
@@ -15450,6 +15960,34 @@ code {
   background-color: #007bff;
 }
 
+/* ========================================
+   Overflow (progressive-collapse row)
+
+   Generic primitive: a horizontal flex row whose children get walked into
+   a "more" menu when the row can't fit, driven by `overflow.js`. Use
+   anywhere you want a button toolbar, breadcrumb row, chip row, or tab bar
+   to collapse gracefully on narrow widths.
+
+     <div class="pa-overflow" data-pa-actions-overflow-from="end">
+       <button class="pa-btn pa-btn--xs">Save</button>
+       <button class="pa-btn pa-btn--xs" data-pa-actions-priority="10">Run</button>
+     </div>
+
+   The card-flavoured alias `pa-card__actions--overflow` carries equivalent
+   rules under `.pa-card__header` (see `_cards.scss`); both wire into the
+   same JS module. ======================================== */
+.pa-overflow {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  min-width: 0;
+  overflow: hidden;
+  flex-shrink: 1;
+}
+.pa-overflow > * {
+  flex-shrink: 0;
+}
+
 /* ========================================
    Data Display Components
    Read-only label-value field pairs