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

package/dist/css/main.css

@@ -5471,7 +5471,8 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.pa-card__header > p {
+.pa-card__header > p,
+.pa-card__header > .pa-card__description {
   flex: 1;
   min-width: 0;
   overflow: hidden;
@@ -5479,6 +5480,8 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   white-space: nowrap;
   color: var(--pa-text-color-2);
   font-size: 1.4rem;
+  position: relative;
+  top: var(--pa-card-description-offset-y, 1px);
 }
 .pa-card__header .pa-card__actions,
 .pa-card__header .pa-btn-group {
@@ -5490,11 +5493,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;
@@ -5541,12 +5562,14 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 .pa-card__header--wrap {
   flex-wrap: wrap;
 }
-.pa-card__header--wrap > h1, .pa-card__header--wrap > h2, .pa-card__header--wrap > h3, .pa-card__header--wrap > h4, .pa-card__header--wrap > h5, .pa-card__header--wrap > h6 {
+.pa-card__header--wrap > h1, .pa-card__header--wrap > h2, .pa-card__header--wrap > h3, .pa-card__header--wrap > h4, .pa-card__header--wrap > h5, .pa-card__header--wrap > h6,
+.pa-card__header--wrap > .pa-card__title .pa-card__title-text {
   white-space: normal;
   overflow: visible;
   text-overflow: clip;
 }
-.pa-card__header--wrap > p {
+.pa-card__header--wrap > p,
+.pa-card__header--wrap > .pa-card__description {
   white-space: normal;
   flex-basis: 100%;
   order: 1;
@@ -5557,7 +5580,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   align-items: center;
   gap: 0.8rem;
   min-width: 0;
-  flex: 1;
+  flex: 0 1 auto;
 }
 .pa-card__title-icon {
   flex-shrink: 0;
@@ -5572,7 +5595,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   color: var(--pa-text-color-1);
   font-size: 1.6rem;
   font-weight: 600;
-  line-height: 1;
+  line-height: 1.4;
 }
 .pa-card__body {
   padding: 1.6rem 1rem;
@@ -5593,6 +5616,10 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 0.8rem;
+}
+.pa-card__footer .pa-card__actions {
+  margin-inline-start: auto;
 }
 .pa-card__actions {
   display: flex;
@@ -6469,6 +6496,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 +6508,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 +6518,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 +6554,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 +6566,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 +8039,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 +8140,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 +12027,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 +15969,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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "2.9.0-rc03",
+  "version": "2.9.0-rc05",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {
@@ -9,11 +9,13 @@
     "./css/*": "./dist/css/*",
     "./scss": "./src/scss/main.scss",
     "./scss/*": "./src/scss/*",
+    "./js/*": "./src/js/*",
     "./snippets/*": "./snippets/*"
   },
   "files": [
     "dist/",
     "src/scss/",
+    "src/js/",
     "schemas/",
     "scripts/pack-theme.js",
     "snippets/",