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

package/src/scss/_core.scss

@@ -72,6 +72,9 @@
 // Filter card (expandable table filters)
 @use 'core-components/filter-card' as *;
 
+// Range group (compact multi-range filter: slider primitive + floating panel)
+@use 'core-components/range-group' as *;
+
 // Comparison tables
 @use 'core-components/comparison' as *;
 
@@ -114,6 +117,10 @@
 // Splitter (resizable two-pane container)
 @use 'core-components/splitter' as *;
 
+// Overflow (progressive-collapse row — generic primitive used by toolbars,
+// breadcrumb rows, chip rows, button bars, plus the card-actions variant)
+@use 'core-components/overflow' as *;
+
 // Data Display (read-only fields)
 @use 'core-components/data-display' as *;
 

package/src/scss/core-components/_buttons.scss

@@ -492,6 +492,18 @@
     border-end-start-radius: 0;
   }
 
+  // Auto-absorb collapsed state (btn-split-auto-absorb.js): the split
+  // button's own primary action has folded into the dropdown, leaving only
+  // the toggle. Render the lone toggle as a standalone, fully-rounded button
+  // — override the flattened inner corners (the toggle is now :first-child,
+  // so it also picks up the primary's flat-end rule) and drop the divider
+  // border. `:first-child` keeps specificity at/above the `> .pa-btn:first-child`
+  // rule so the all-corner radius wins.
+  &--collapsed > .pa-btn-split__toggle:first-child {
+    border-radius: var(--pa-border-radius);
+    border-inline-start: none;
+  }
+
   // Toggle button (chevron) - fixed square width
   &__toggle {
     border-inline-start: $border-width-base solid rgba(255, 255, 255, 0.25);
@@ -597,3 +609,35 @@
   }
 }
 
+// === Button Toolbar (auto-absorb host) ===
+//
+// Flex row that wraps a `.pa-btn-split.pa-btn-split--auto-absorb` together
+// with the sibling buttons it should absorb when there's no horizontal
+// room. Provides the layout contract `btn-split-auto-absorb.js` needs in
+// order to read a truthful overflow signal:
+//
+//   - `min-width: 0` so the row can shrink below its content width
+//   - `overflow: hidden` so `scrollWidth > clientWidth` actually goes
+//     truthful (without this the row would keep growing past its parent)
+//   - children `flex-shrink: 0` so individual buttons don't collapse into
+//     unreadable slivers — the JS moves them into the menu instead
+//
+// The split button itself stays put (it's the anchor for the dropdown
+// menu) and never shrinks; siblings get moved into / out of the menu.
+//
+// Standalone (any flex context) or nested inside `.pa-card__actions` when it
+// is a card header's actions — `_cards.scss` makes the actions wrapper
+// shrinkable in that case so the overflow signal still works.
+.pa-btn-toolbar {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  min-width: 0;
+  overflow: hidden;
+  flex-shrink: 1;
+
+  > * {
+    flex-shrink: 0;
+  }
+}
+

package/src/scss/core-components/_cards.scss

@@ -83,8 +83,11 @@
       white-space: nowrap;
     }
 
-    // Description paragraphs - flexible middle, truncate with ellipsis
-    > p {
+    // Description - flexible middle, truncate with ellipsis.
+    // `.pa-card__description` is the canonical element; bare `> p` is kept as
+    // legacy tolerance so hand-written markup doesn't break.
+    > p,
+    > .pa-card__description {
       flex: 1;
       min-width: 0;
       overflow: hidden;
@@ -92,6 +95,12 @@
       white-space: nowrap;
       color: var(--pa-text-color-2);
       font-size: $font-size-sm;
+      // Nudge the smaller description onto the title's baseline (see
+      // $card-description-offset-y). `position: relative` keeps it in flow —
+      // truncation/flex sizing are unaffected — it only shifts the paint.
+      // Font-metric dependent, so themes can retune via the CSS variable.
+      position: relative;
+      top: var(--pa-card-description-offset-y, #{$card-description-offset-y});
     }
 
     // Actions container - fixed, doesn't shrink
@@ -118,6 +127,42 @@
       min-width: 6rem;
     }
 
+    // Auto-absorb button toolbar (btn-split-auto-absorb.js) hosted in a header,
+    // nested inside `.pa-card__actions`: prioritise the ACTIONS over the title.
+    // The toolbar must stay shrinkable so the JS can read `scrollWidth >
+    // clientWidth` and decide what to fold — but the title has to yield FIRST.
+    // Otherwise a long title and the toolbar share the deficit by proportional
+    // flex-shrink (weighted by the title's *natural* width), so the toolbar is
+    // allocated less width than its content even while the rendered title
+    // truncates and leaves a visible gap — and the split button folds all the
+    // way down to a lone toggle. A large shrink factor makes the title absorb
+    // nearly all the deficit (truncating to the min-width floor) so the toolbar
+    // keeps its buttons; siblings only begin folding once the title bottoms out
+    // at the floor. Matched as a descendant (not `> `) because the toolbar sits
+    // one level down, inside `.pa-card__actions`.
+    &:has(.pa-btn-toolbar) > h1,
+    &:has(.pa-btn-toolbar) > h2,
+    &:has(.pa-btn-toolbar) > h3,
+    &:has(.pa-btn-toolbar) > h4,
+    &:has(.pa-btn-toolbar) > h5,
+    &:has(.pa-btn-toolbar) > h6,
+    &:has(.pa-btn-toolbar) > .pa-card__title {
+      flex-shrink: 9999;
+      min-width: 8rem;
+    }
+
+    // The actions wrapper hosting the toolbar must itself be shrinkable.
+    // `.pa-card__actions` defaults to `flex-shrink: 0` (above) so it holds its
+    // natural width — which would keep the toolbar inside at natural width too,
+    // and the `scrollWidth > clientWidth` signal would never fire. Let it
+    // shrink (`min-width: 0`) so the deficit propagates down to the toolbar,
+    // which keeps the `overflow: hidden` clip. `:has()` scopes this so ordinary
+    // action wrappers stay fixed-width.
+    .pa-card__actions:has(> .pa-btn-toolbar) {
+      flex-shrink: 1;
+      min-width: 0;
+    }
+
     // Buttons in card headers - negative margin to prevent header height growth
     .pa-btn {
       margin-top: -0.25rem;
@@ -125,6 +170,27 @@
       flex-shrink: 0;
     }
 
+    // …but any actions wrapper that CLIPS its overflow — the auto-absorb
+    // button toolbar and the progressive-overflow actions container both
+    // set `overflow: hidden` so the JS can read `scrollWidth > clientWidth` —
+    // would shave the top/bottom borders off those buttons: the -0.25rem
+    // block margin above pushes each button past the wrapper's content box,
+    // and the clip lands right on the border. Re-parent the compaction onto
+    // the wrapper so its clip edge is flush with the button box; the header
+    // still gets the same height reduction, borders survive. Scoped under
+    // `&__header` so a standalone `.pa-btn-toolbar` (used outside a card
+    // header) is untouched.
+    .pa-btn-toolbar,
+    .pa-card__actions--overflow {
+      margin-top: -0.25rem;
+      margin-bottom: -0.25rem;
+
+      .pa-btn {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
+
     // Underline modifier - accent border under heading inside card header
     &--underlined {
       h1, h2, h3, h4, h5, h6 {
@@ -186,13 +252,18 @@
     &--wrap {
       flex-wrap: wrap;
 
-      > h1, > h2, > h3, > h4, > h5, > h6 {
+      // Un-truncate both the bare-heading shorthand AND the canonical
+      // `.pa-card__title` > `.pa-card__title-text` so titles wrap (not
+      // ellipsis) in wrap mode regardless of which header shape is used.
+      > h1, > h2, > h3, > h4, > h5, > h6,
+      > .pa-card__title .pa-card__title-text {
         white-space: normal;
         overflow: visible;
         text-overflow: clip;
       }
 
-      > p {
+      > p,
+      > .pa-card__description {
         white-space: normal;
         flex-basis: 100%;
         order: 1;
@@ -206,7 +277,11 @@
     align-items: center;
     gap: $spacing-sm;
     min-width: 0; // Enable text truncation
-    flex: 1;
+    // Natural width (like a bare heading), shrinkable, no grow — so a sibling
+    // `.pa-card__description` gets the free space instead of the title hogging
+    // half the row. `justify-content: space-between` on the header still pins
+    // `.pa-card__actions` to the right.
+    flex: 0 1 auto;
 
     &-icon {
       flex-shrink: 0;
@@ -222,7 +297,9 @@
       color: var(--pa-text-color-1);
       font-size: $font-size-base;
       font-weight: $font-weight-semibold;
-      line-height: 1;
+      // Not `1` — line-height 1 clips glyph descenders (g, y, p) under
+      // `overflow: hidden`. Matches the room bare headings already leave.
+      line-height: 1.4;
     }
   }
 
@@ -249,6 +326,18 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: $spacing-sm;
+
+    // Canonical footer content model (mirrors the header): optional leading
+    // content on the left — text or `.pa-card__meta` — plus `.pa-card__actions`
+    // on the right. The auto inline-start margin pins the actions slot to the
+    // trailing edge whether or not there's leading content, so an actions-only
+    // footer no longer needs an empty spacer `<div>` to fight `space-between`.
+    // Buttons live inside `.pa-card__actions` (the same slot as the header) so
+    // they never scatter to opposite corners the way bare footer buttons do.
+    .pa-card__actions {
+      margin-inline-start: auto;
+    }
   }
 
   &__actions {

package/src/scss/core-components/_overflow.scss

@@ -0,0 +1,50 @@
+/* ========================================
+   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. ======================================== */
+@use '../variables' as *;
+
+.pa-overflow {
+  // Flex row by default. The JS pulls children out and appends a trigger
+  // button at the end; both the row and the trigger inherit normal flex
+  // layout from this block. Consumers override gap / alignment per-instance
+  // via inline style or a local class.
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+
+  // Layout contract for the truthful-overflow signal: the wrapper has to
+  // shrink below its content (`min-width: 0`) and clip when it does
+  // (`overflow: hidden`) so `scrollWidth > clientWidth` reliably means
+  // "the row doesn't fit". Without these, modern flex defaults keep the
+  // wrapper at intrinsic content width and the JS sees no overflow.
+  // `flex-shrink: 1` so a parent flex layout can compress the row.
+  min-width: 0;
+  overflow: hidden;
+  flex-shrink: 1;
+
+  // Items themselves stay at intrinsic width — they either fit fully or
+  // get moved to the menu. Without this they'd squeeze unevenly as the
+  // wrapper narrows, defeating the "drop one at a time" UX.
+  > * {
+    flex-shrink: 0;
+  }
+
+  // Trigger button has no dedicated styling here — it ships with
+  // `pa-btn pa-btn--xs pa-btn--ghost` so it picks up the ghost button
+  // appearance automatically. The `__trigger` element class is set by
+  // the JS as a stable hook for consumers who want to retheme it
+  // (e.g. swap the ellipsis icon, change padding).
+}