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

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 *;
 
@@ -111,6 +114,13 @@
 // Settings Panel
 @use 'core-components/settings-panel' as *;
 
+// 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

@@ -44,6 +44,21 @@
     }
   }
 
+  // Chromeless action button — no fill, no border, just the label / icon.
+  // Used for inline affordances inside dense surfaces (card-header actions,
+  // notification dismiss, toast close, splitter minimize) where a full button
+  // would compete with the content.
+  &--ghost {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--pa-text-secondary);
+
+    &:hover {
+      background-color: var(--pa-surface-hover);
+      color: var(--pa-text-color-1);
+    }
+  }
+
   &--xs {
     height: $btn-height-xs;
     padding: $btn-padding-xs-v $btn-padding-xs-h;
@@ -477,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);
@@ -582,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

@@ -100,6 +100,60 @@
       flex-shrink: 0;
     }
 
+    // …unless it's the progressive-overflow variant, which intentionally
+    // shrinks below content so the JS can read `scrollWidth > clientWidth`
+    // as the "needs overflow" signal. Nested under `&__header` so the
+    // selector matches `.pa-card__header .pa-card__actions--overflow` —
+    // the same specificity as the rule above, but later in source order
+    // and explicit on the modifier.
+    .pa-card__actions--overflow {
+      flex-shrink: 1;
+    }
+
+    // When the actions wrapper can shrink (overflow variant), give the title
+    // a floor so it can't be squeezed to 0 — icon + a few chars + ellipsis
+    // stay visible no matter how narrow. `:has()` scopes the override so
+    // ordinary cards keep `min-width: 0` and their full ellipsis range.
+    &:has(> .pa-card__actions--overflow) > .pa-card__title {
+      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;
@@ -107,6 +161,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 {
@@ -237,6 +312,61 @@
     display: flex;
     gap: $spacing-sm;
     align-items: center;
+
+    // Responsive actions — render both the spread button list AND a
+    // collapsed split-button form; a container query on the header swaps
+    // which is visible. Stays CSS-only (no ResizeObserver / layout reads)
+    // but the markup carries both forms.
+    //
+    //   <div class="pa-card__header">
+    //     <div class="pa-card__title">…</div>
+    //     <div class="pa-card__actions pa-card__actions--responsive">
+    //       <div class="pa-card__actions-full">
+    //         …spread buttons…
+    //       </div>
+    //       <div class="pa-card__actions-collapsed">
+    //         <div class="pa-btn-split">…same actions as a menu…</div>
+    //       </div>
+    //     </div>
+    //   </div>
+    //
+    // Container is the header; threshold is $card-actions-collapse-at.
+    // Wired up via :has() (Baseline 2023) so authors don't need a second
+    // modifier on the header.
+    &--responsive {
+      > .pa-card__actions-full {
+        display: flex;
+        gap: $spacing-sm;
+        align-items: center;
+      }
+      > .pa-card__actions-collapsed {
+        display: none;
+      }
+    }
+
+    // Progressive overflow variant — driven by card-actions-overflow.js.
+    // `min-width: 0` lets flex shrink the wrapper below its content; with
+    // `overflow: hidden` the wrapper clips its children when narrow, which
+    // is what makes `scrollWidth > clientWidth` a reliable overflow signal
+    // for the JS. Buttons themselves get `flex-shrink: 0` so they don't
+    // squeeze to fit — they either fit fully or get moved to the menu.
+    &--overflow {
+      min-width: 0;
+      overflow: hidden;
+
+      > * {
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  // Enable the container query on any header that contains a responsive
+  // actions wrapper. Container query rule itself is emitted at the bottom
+  // of this file (outside the .pa-card block) since `@container` can't
+  // hide inside an arbitrarily-nested selector cleanly.
+  &__header:has(> .pa-card__actions--responsive) {
+    container-type: inline-size;
+    container-name: pa-card-header;
   }
 
   &__meta {
@@ -499,3 +629,79 @@ a.pa-card {
   border-bottom: $border-width-medium solid var(--pa-accent);
   padding-bottom: $spacing-sm;
 }
+
+// Responsive card actions — container query for the spread/collapsed swap.
+// Container context set by `.pa-card__header:has(> .pa-card__actions--responsive)`
+// above. Threshold needs explicit interpolation in `@container` (the Sass
+// auto-interpolation that works in `@media` doesn't apply here).
+@container pa-card-header (max-width: #{$card-actions-collapse-at}) {
+  .pa-card__actions--responsive {
+    > .pa-card__actions-full {
+      display: none;
+    }
+    > .pa-card__actions-collapsed {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+// Card adaptation inside a minimized splitter pane.
+// Lives here (not in `_splitter.scss`) so the splitter stays unaware of card
+// internals — the rotation hook on the splitter side is `[data-pa-splitter-rail-title]`
+// and this rule applies that attribute's contract to the card header.
+//
+// Layout: pa-card already has `height: 100%` etc., we just hide body/footer,
+// promote the header to fill the rail, and pin the title to the top.
+.pa-splitter__pane--minimized > .pa-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+
+  > .pa-card__body,
+  > .pa-card__footer {
+    display: none;
+  }
+
+  > .pa-card__header {
+    flex: 1 1 auto;
+    // Pin title to the rail's top (inline-start in sideways-rl writing mode).
+    justify-content: flex-start;
+    writing-mode: sideways-rl;
+
+    // Icons reset to natural orientation (descendant combinator covers both
+    // flat markup and the BEM `pa-card__title > i` nesting).
+    i,
+    svg {
+      writing-mode: initial;
+    }
+
+    // Vertically align the icon between expanded and minimized states.
+    // In expanded mode, `align-items: center` centers the title vertically
+    // (icon center at header-min-height / 2 from top). In minimized mode,
+    // `justify-content: flex-start` pins the title to the rail's top edge.
+    // Push the title down by the difference so the icon sits at the same
+    // visual y-position in both states — no "jump" when toggling.
+    .pa-card__title {
+      padding-top: calc((#{$card-header-min-height} - #{$font-size-base}) / 2 - #{$card-header-padding-v});
+    }
+
+    // Hide interactive controls inside the header — they'd be sideways and
+    // unreadable. The list here is intentional: cards know their own header
+    // contents better than the splitter ever could.
+    .pa-btn,
+    .pa-btn-group,
+    button,
+    input {
+      display: none;
+    }
+  }
+}
+
+// Mirror modifier — when the splitter root carries `pa-splitter--minimize-mirror`,
+// the card heading flips 180° (matches the generic mirror behaviour, scoped
+// to the card title heading).
+.pa-splitter--minimize-mirror .pa-splitter__pane--minimized > .pa-card > .pa-card__header :is(h1, h2, h3, h4, h5, h6) {
+  transform: scale(-1, -1);
+}

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).
+}