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

package/snippets/buttons.html

@@ -283,6 +283,57 @@
 </div>
 
 
+<!-- Auto-Absorb Split Button (sibling buttons collapse into menu on resize) -->
+<!-- The .pa-btn-toolbar wrapper provides the constrained-width flex row;
+     btn-split-auto-absorb.js moves overflowing siblings into the menu.
+     Standalone form (any flex context): -->
+<div class="pa-btn-toolbar">
+  <button class="pa-btn pa-btn--primary">Save</button>
+  <button class="pa-btn pa-btn--primary">Format</button>
+  <button class="pa-btn pa-btn--primary">Refresh</button>
+  <button class="pa-btn pa-btn--primary" data-pa-absorb-priority="10">Publish</button>
+  <div class="pa-btn-split pa-btn-split--auto-absorb">
+    <button class="pa-btn pa-btn--primary">Run</button>
+    <button class="pa-btn pa-btn--primary pa-btn-split__toggle" onclick="toggleSplitMenu(event)">
+      <i class="fas fa-chevron-down text-2xs pa-btn-split__chevron"></i>
+    </button>
+    <div class="pa-btn-split__menu">
+      <div class="pa-btn-split__menu-inner">
+        <button class="pa-btn-split__item">Run with options&hellip;</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- In a card header, nest the toolbar inside .pa-card__actions (the canonical
+     header actions slot) — same as a plain button row or a .pa-btn-group. The
+     framework makes that actions wrapper shrinkable so overflow detection still
+     works, and the header title yields before the toolbar collapses. -->
+<div class="pa-card">
+  <div class="pa-card__header">
+    <h3>Team Members</h3>
+    <div class="pa-card__actions">
+      <div class="pa-btn-toolbar">
+        <button class="pa-btn pa-btn--secondary">Search</button>
+        <button class="pa-btn pa-btn--secondary">Filter</button>
+        <div class="pa-btn-split pa-btn-split--auto-absorb">
+          <button class="pa-btn pa-btn--primary">Add user</button>
+          <button class="pa-btn pa-btn--primary pa-btn-split__toggle" onclick="toggleSplitMenu(event)">
+            <i class="fas fa-chevron-down text-2xs pa-btn-split__chevron"></i>
+          </button>
+          <div class="pa-btn-split__menu">
+            <div class="pa-btn-split__menu-inner">
+              <button class="pa-btn-split__item">Add user with role&hellip;</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="pa-card__body">Card content.</div>
+</div>
+
+
 <!-- BUTTONS WITH ICONS -->
 
 <!-- Button with Icon (Text Icon) -->

package/snippets/cards.html

@@ -11,10 +11,16 @@
 </div>
 
 
-<!-- CARD WITH HEADER -->
+<!-- CARD WITH HEADER
+     The title ALWAYS uses .pa-card__title > .pa-card__title-text (the icon
+     span is optional). This is the one canonical header title structure —
+     a bare <h3> in the header still renders, but is legacy tolerance, not
+     the documented shape. -->
 <div class="pa-card">
   <div class="pa-card__header">
-    <h3>Card Title</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Card Title</h3>
+    </div>
   </div>
   <div class="pa-card__body">
     Card content goes here.
@@ -28,7 +34,9 @@
     Card content goes here.
   </div>
   <div class="pa-card__footer">
-    <button class="pa-btn pa-btn--primary">Action</button>
+    <div class="pa-card__actions">
+      <button class="pa-btn pa-btn--primary">Action</button>
+    </div>
   </div>
 </div>
 
@@ -36,31 +44,37 @@
 <!-- COMPLETE CARD (header + body + footer) -->
 <div class="pa-card">
   <div class="pa-card__header">
-    <h3>Complete Card</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Complete Card</h3>
+    </div>
   </div>
   <div class="pa-card__body">
     <p>This card has all three sections: header, body, and footer.</p>
   </div>
   <div class="pa-card__footer">
-    <button class="pa-btn pa-btn--secondary">Cancel</button>
-    <button class="pa-btn pa-btn--primary">Save</button>
+    <div class="pa-card__actions">
+      <button class="pa-btn pa-btn--secondary">Cancel</button>
+      <button class="pa-btn pa-btn--primary">Save</button>
+    </div>
   </div>
 </div>
 
 
 <!-- ================================
      THREE-PART HEADER LAYOUT
-     .pa-card__header is a flex row with automatic behaviour:
-       [title (truncates)] — [description <p> (flexes and truncates)] — [actions (fixed)]
-     Any h1..h6 / <p> children get ellipsis on overflow so narrow cards
+     .pa-card__header is a flex row with three canonical slots:
+       [.pa-card__title (truncates)] — [.pa-card__description (flexes, truncates)] — [.pa-card__actions (fixed)]
+     The title-text and description get ellipsis on overflow so narrow cards
      never push content out of the header. Use .pa-card__header--wrap
      if you'd rather have the text wrap to multiple lines instead.
      ================================ -->
 
 <div class="pa-card">
   <div class="pa-card__header">
-    <h3>Dashboard</h3>
-    <p>Live metrics across every connected service — updated every 30 seconds.</p>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Dashboard</h3>
+    </div>
+    <p class="pa-card__description">Live metrics across every connected service — updated every 30 seconds.</p>
     <div class="pa-card__actions">
       <button class="pa-btn pa-btn--sm pa-btn--secondary">Refresh</button>
     </div>
@@ -71,8 +85,10 @@
 <!-- Wrap instead of truncate -->
 <div class="pa-card">
   <div class="pa-card__header pa-card__header--wrap">
-    <h3>Wrapping Header</h3>
-    <p>This description wraps to multiple lines when the header gets narrow, instead of being clipped with an ellipsis.</p>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Wrapping Header</h3>
+    </div>
+    <p class="pa-card__description">This description wraps to multiple lines when the header gets narrow, instead of being clipped with an ellipsis.</p>
     <div class="pa-card__actions">
       <button class="pa-btn pa-btn--sm pa-btn--secondary">Action</button>
     </div>
@@ -90,7 +106,9 @@
 <!-- Default (accent-coloured underline) -->
 <div class="pa-card">
   <div class="pa-card__header pa-card__header--underlined">
-    <h3>Section</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Section</h3>
+    </div>
   </div>
   <div class="pa-card__body">Body content.</div>
 </div>
@@ -98,14 +116,18 @@
 <!-- Semantic colour variants -->
 <div class="pa-card">
   <div class="pa-card__header pa-card__header--underlined pa-card__header--underline-success">
-    <h3>Success underline</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Success underline</h3>
+    </div>
   </div>
   <div class="pa-card__body">Body.</div>
 </div>
 
 <div class="pa-card">
   <div class="pa-card__header pa-card__header--underlined pa-card__header--underline-danger">
-    <h3>Danger underline</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Danger underline</h3>
+    </div>
   </div>
   <div class="pa-card__body">Body.</div>
 </div>
@@ -113,7 +135,9 @@
 <!-- Theme colour slot (1..9) -->
 <div class="pa-card">
   <div class="pa-card__header pa-card__header--underlined pa-card__header--underline-color-3">
-    <h3>Theme colour 3 underline</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Theme colour 3 underline</h3>
+    </div>
   </div>
   <div class="pa-card__body">Body.</div>
 </div>
@@ -124,7 +148,7 @@
 -->
 
 
-<!-- CARD WITH TITLE COMPONENTS (icon + truncating text) -->
+<!-- CARD WITH TITLE ICON (the icon span is the only optional part) -->
 <div class="pa-card">
   <div class="pa-card__header">
     <div class="pa-card__title">
@@ -136,8 +160,9 @@
     </div>
   </div>
   <div class="pa-card__body">
-    Use .pa-card__title when you need the title-icon combo + __actions
-    alignment; h3 alone works too when no icon is needed.
+    The title always uses .pa-card__title > .pa-card__title-text; add the
+    .pa-card__title-icon span when you want a leading icon. Same structure
+    with or without the icon — never a bare <h3>.
   </div>
 </div>
 
@@ -145,18 +170,26 @@
 <!-- CARD WITH METADATA -->
 <div class="pa-card">
   <div class="pa-card__header">
-    <h3>Article Title</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Article Title</h3>
+    </div>
     <span class="pa-card__meta">Published 2 hours ago</span>
   </div>
   <div class="pa-card__body">Article content.</div>
 </div>
 
 
-<!-- CARD WITH ACTIONS IN HEADER -->
+<!-- CARD WITH ACTIONS IN HEADER
+     .pa-card__actions is THE canonical wrapper for header controls: it is a
+     documented card sub-element, carries its own gap + vertical centering, and
+     the header flex rules pin it to flex-shrink: 0 so it never gets squeezed.
+     Reach for this by default. -->
 <div class="pa-card">
   <div class="pa-card__header">
-    <h3>Card with Actions</h3>
-    <div class="pa-btn-group">
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Card with Actions</h3>
+    </div>
+    <div class="pa-card__actions">
       <button class="pa-btn pa-btn--sm pa-btn--secondary">Cancel</button>
       <button class="pa-btn pa-btn--sm pa-btn--success">Save</button>
     </div>
@@ -164,15 +197,38 @@
   <div class="pa-card__body">Card content.</div>
 </div>
 
+<!-- …want the SEGMENTED (joined-corner) button look? Nest .pa-btn-group
+     INSIDE .pa-card__actions. Don't use .pa-btn-group as the direct header
+     child — it's a general-purpose button-cluster component, not the card's
+     actions slot; putting it straight in the header only "works" because the
+     header happens to also pin .pa-btn-group to flex-shrink: 0, and it drags
+     the attached-button styling in whether you want it or not. -->
+<div class="pa-card">
+  <div class="pa-card__header">
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Card with Segmented Actions</h3>
+    </div>
+    <div class="pa-card__actions">
+      <div class="pa-btn-group">
+        <button class="pa-btn pa-btn--sm pa-btn--secondary">Day</button>
+        <button class="pa-btn pa-btn--sm pa-btn--secondary">Week</button>
+        <button class="pa-btn pa-btn--sm pa-btn--secondary">Month</button>
+      </div>
+    </div>
+  </div>
+  <div class="pa-card__body">Card content.</div>
+</div>
+
 
 <!-- CARD WITH FOOTER ACTIONS -->
 <div class="pa-card">
   <div class="pa-card__header">
-    <h3>Form Card</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Form Card</h3>
+    </div>
   </div>
   <div class="pa-card__body">Form content here.</div>
   <div class="pa-card__footer">
-    <div></div>
     <div class="pa-card__actions">
       <button class="pa-btn pa-btn--secondary">Cancel</button>
       <button class="pa-btn pa-btn--success">Save</button>
@@ -184,7 +240,9 @@
 <!-- CARD WITH NO-PADDING BODY (for flush tables / lists) -->
 <div class="pa-card">
   <div class="pa-card__header">
-    <h3>User List</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">User List</h3>
+    </div>
   </div>
   <div class="pa-card__body pa-card__body--no-padding">
     <table class="pa-table">
@@ -354,7 +412,9 @@
 <!-- Inline tabs — pills that live in the header row -->
 <div class="pa-card">
   <div class="pa-card__header">
-    <h3>Sales</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Sales</h3>
+    </div>
     <div class="pa-card__tabs pa-card__tabs--inline">
       <button class="pa-card__tab pa-card__tab--active">Day</button>
       <button class="pa-card__tab">Week</button>
@@ -372,7 +432,9 @@
      identical, but the entire area becomes clickable. -->
 <a href="/products/42" class="pa-card">
   <div class="pa-card__header">
-    <h3>Widget Pro</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Widget Pro</h3>
+    </div>
   </div>
   <div class="pa-card__body">
     <p>Click anywhere on this card to navigate.</p>
@@ -474,21 +536,41 @@ CLICKABLE CARD:
                                looks identical to a regular card.
 
 SUB-ELEMENTS:
-- .pa-card__header             Flex row: [title] — [description] — [actions].
-                               Direct h1..h6 and <p> children auto-truncate.
-                               Native tags inside get margin/padding/border
-                               reset so they inherit the header layout cleanly.
+- .pa-card__header             Flex row of three canonical slots:
+                               [.pa-card__title] — [.pa-card__description] —
+                               [.pa-card__actions]. (Bare h1..h6 / <p> children
+                               still render + auto-truncate as legacy tolerance,
+                               but the documented shape is the slots above —
+                               one structure, so a <Card> wrapper emits one tree.)
+- .pa-card__description        Muted, flexing, truncating description line —
+                               the header's middle slot. Bare <p> tolerated.
 - .pa-card__body               flex: 1; standard padding.
 - .pa-card__footer             Border-top + footer background; flex row.
-- .pa-card__actions            Button/control container (gap + align-center).
-                               flex-shrink: 0 inside header.
+                               Canonical content: optional leading text /
+                               .pa-card__meta on the left + .pa-card__actions
+                               on the right. The actions slot auto-pins to the
+                               trailing edge (no empty spacer <div> needed),
+                               with or without leading content. Always put
+                               footer buttons inside .pa-card__actions so they
+                               don't scatter to opposite corners.
+- .pa-card__actions            THE canonical header actions slot. Button/
+                               control container (gap + align-center);
+                               flex-shrink: 0 inside header. Use this for any
+                               set of header controls. For the segmented
+                               (joined-corner) look, nest a .pa-btn-group
+                               INSIDE it — don't put .pa-btn-group straight in
+                               the header (it's a generic button cluster, not
+                               the actions slot).
 - .pa-card__meta               Muted secondary text (dates, byline, etc.).
 
-TITLE SUB-COMPONENT:
-- .pa-card__title              Flex row wrapping icon + text; flex: 1 so
-                               the actions sibling stays on the right.
-- .pa-card__title-icon         Fixed-size icon.
-- .pa-card__title-text         Truncates with ellipsis on overflow.
+TITLE SUB-COMPONENT (the canonical header title — use it for EVERY card):
+- .pa-card__title              Flex row wrapping the optional icon + text;
+                               flex: 0 1 auto (natural width) so a sibling
+                               .pa-card__description gets the free space and
+                               .pa-card__actions stays right. Always present,
+                               with or without an icon — never a bare <h3>.
+- .pa-card__title-icon         Fixed-size leading icon (optional).
+- .pa-card__title-text         The heading (h1..h6); truncates with ellipsis.
 
 BODY MODIFIER:
 - .pa-card__body--no-padding   Strips body padding (for tables / lists
@@ -526,10 +608,9 @@ SECTION WRAPPERS (lighter than a card, for heading-only groupings):
                                underline, no container behaviour.
 
 IMPLICIT BEHAVIOURS:
-- The header is flex with auto-truncation: direct h1..h6 and <p>
-  children get white-space: nowrap + text-overflow: ellipsis. This
-  is why long card titles look "cut off" in narrow columns — use
-  --wrap to opt out.
+- The header truncates: .pa-card__title-text and .pa-card__description
+  get white-space: nowrap + text-overflow: ellipsis. This is why long
+  card titles look "cut off" in narrow columns — use --wrap to opt out.
 - Buttons inside the header get -0.25rem vertical margin so they
   don't grow the header height past $card-header-min-height.
 - Card body :first-child gets margin-top: 0 to avoid double-spacing
@@ -540,8 +621,10 @@ STRUCTURE PATTERNS:
 Card with three-part header:
 <div class="pa-card">
   <div class="pa-card__header">
-    <h3>Title</h3>
-    <p>Description (truncates)</p>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Title</h3>
+    </div>
+    <p class="pa-card__description">Description (truncates)</p>
     <div class="pa-card__actions">
       <button class="pa-btn pa-btn--sm">Action</button>
     </div>
@@ -552,7 +635,9 @@ Card with three-part header:
 Card with underlined header (semantic variant):
 <div class="pa-card">
   <div class="pa-card__header pa-card__header--underlined pa-card__header--underline-danger">
-    <h3>Critical Settings</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Critical Settings</h3>
+    </div>
   </div>
   <div class="pa-card__body">…</div>
 </div>

package/snippets/comparison.html

@@ -22,18 +22,20 @@
      ================================ -->
 
 <div class="pa-card">
-    <div class="pa-card__header d-flex justify-content-between align-items-center">
+    <div class="pa-card__header">
         <h3>Version Detail</h3>
-        <div class="pa-btn-group">
-            <button class="pa-btn pa-btn--sm pa-btn--primary">
-                <i class="fa-solid fa-table-list"></i> View in form
-            </button>
-            <button class="pa-btn pa-btn--sm pa-btn--secondary">
-                <i class="fa-solid fa-table"></i> View in table
-            </button>
-            <button class="pa-btn pa-btn--sm pa-btn--secondary pa-btn--icon-only">
-                <i class="fa-solid fa-location-dot"></i>
-            </button>
+        <div class="pa-card__actions">
+            <div class="pa-btn-group">
+                <button class="pa-btn pa-btn--sm pa-btn--primary">
+                    <i class="fa-solid fa-table-list"></i> View in form
+                </button>
+                <button class="pa-btn pa-btn--sm pa-btn--secondary">
+                    <i class="fa-solid fa-table"></i> View in table
+                </button>
+                <button class="pa-btn pa-btn--sm pa-btn--secondary pa-btn--icon-only">
+                    <i class="fa-solid fa-location-dot"></i>
+                </button>
+            </div>
         </div>
     </div>
     <div class="pa-card__body pa-card__body--no-padding">
@@ -136,18 +138,20 @@
      ================================ -->
 
 <div class="pa-card">
-    <div class="pa-card__header d-flex justify-content-between align-items-center">
+    <div class="pa-card__header">
         <h3>Merge Comparison</h3>
-        <div class="pa-btn-group">
-            <button class="pa-btn pa-btn--sm pa-btn--success">
-                <i class="fa-solid fa-code-merge"></i> Accept A
-            </button>
-            <button class="pa-btn pa-btn--sm pa-btn--info">
-                <i class="fa-solid fa-code-merge"></i> Accept B
-            </button>
-            <button class="pa-btn pa-btn--sm pa-btn--secondary">
-                <i class="fa-solid fa-xmark"></i> Reject Both
-            </button>
+        <div class="pa-card__actions">
+            <div class="pa-btn-group">
+                <button class="pa-btn pa-btn--sm pa-btn--success">
+                    <i class="fa-solid fa-code-merge"></i> Accept A
+                </button>
+                <button class="pa-btn pa-btn--sm pa-btn--info">
+                    <i class="fa-solid fa-code-merge"></i> Accept B
+                </button>
+                <button class="pa-btn pa-btn--sm pa-btn--secondary">
+                    <i class="fa-solid fa-xmark"></i> Reject Both
+                </button>
+            </div>
         </div>
     </div>
     <div class="pa-card__body pa-card__body--no-padding">