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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "2.9.0-rc03",
+  "version": "2.9.0-rc04",
   "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/",

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

@@ -152,11 +152,15 @@
 </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__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,6 +168,26 @@
   <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">
+    <h3>Card with Segmented Actions</h3>
+    <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">
@@ -480,8 +504,14 @@ SUB-ELEMENTS:
                                reset so they inherit the header layout cleanly.
 - .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.
+- .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:

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">