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

package/dist/css/main.css

@@ -5484,11 +5484,35 @@ 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: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;
@@ -5593,6 +5617,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;
@@ -5922,6 +5965,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
@@ -6402,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);
@@ -6413,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;
@@ -6423,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;
@@ -6459,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);
@@ -6467,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;
@@ -7306,6 +7517,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;
@@ -7810,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;
@@ -7907,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
@@ -11782,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
@@ -15242,6 +15828,166 @@ 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;
+}
+
+/* ========================================
+   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