@keenmate/pure-admin-core 1.0.0-rc04 → 1.0.0-rc06

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "1.0.0-rc04",
+  "version": "1.0.0-rc06",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {

package/snippets/layout.html

@@ -42,10 +42,24 @@
     </div>
 
     <!-- Footer (outside inner, inside layout) -->
+    <!-- Three-section layout: Left / Center / Right -->
     <footer class="pa-layout__footer">
-        <div class="pa-layout__footer__content">
+        <!-- Left Section (stays anchored left) -->
+        <div class="pa-footer__left">
             <p>&copy; 2024 Pure Admin Framework</p>
         </div>
+
+        <!-- Center Section (flexible, fills space) -->
+        <div class="pa-footer__center">
+            <!-- Optional center content -->
+        </div>
+
+        <!-- Right Section (stays anchored right) -->
+        <div class="pa-footer__right">
+            <span>App version: 1.2.1</span>
+            <span>Database version: 2.3.1</span>
+            <a href="#">Open Source Licenses</a>
+        </div>
     </footer>
 </div>
 
@@ -368,50 +382,67 @@
 
 <!-- ================================
      NAVBAR/HEADER (with burger menu and navigation)
+     Three-section layout: Left / Center / Right
      ================================ -->
 
 <!-- Complete Navbar Example (hybrid: pa-navbar wrapper, pa-header__ elements) -->
 <nav class="pa-navbar">
     <div class="pa-navbar__inner">
-        <!-- Hamburger Menu (burger) -->
-        <button class="pa-header__burger burger-menu" onclick="toggleSidebar()" aria-label="Toggle sidebar">
-            <span></span>
-            <span></span>
-            <span></span>
-        </button>
-
-        <!-- Brand -->
-        <div class="pa-header__brand">
-            <h1>Pure Admin</h1>
+        <!-- Left Section: Burger, Brand, Left Nav (stays anchored left) -->
+        <div class="pa-header__left">
+            <!-- Hamburger Menu (burger) -->
+            <button class="pa-header__burger burger-menu" onclick="toggleSidebar()" aria-label="Toggle sidebar">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
+
+            <!-- Brand -->
+            <div class="pa-header__brand">
+                <h1>Pure Admin</h1>
+            </div>
+
+            <!-- Left Navigation Links -->
+            <nav class="pa-header__nav pa-header__nav--left">
+                <ul>
+                    <li><a href="/">Dashboard</a></li>
+                    <li><a href="/components">Components</a></li>
+                    <li><a href="/forms">Forms</a></li>
+                </ul>
+            </nav>
         </div>
 
-        <!-- Left Navigation Links -->
-        <nav class="pa-header__nav pa-header__nav--left">
-            <ul>
-                <li><a href="/">📊 Dashboard</a></li>
-                <li><a href="/components">🧩 Components</a></li>
-                <li><a href="/forms">📝 Forms</a></li>
-            </ul>
-        </nav>
-
-        <!-- Page Title (flexible, with ellipsis) -->
-        <div class="pa-header__title">
-            <h2>Dashboard</h2>
+        <!-- Center Section: Page Title (flexible, fills space between left/right) -->
+        <div class="pa-header__center">
+            <div class="pa-header__title">
+                <h2>Dashboard</h2>
+            </div>
         </div>
 
-        <!-- Right Navigation Links -->
-        <nav class="pa-header__nav pa-header__nav--right">
-            <ul>
-                <li><a href="/alerts">⚠️ Alerts</a></li>
-                <li><a href="/tables">📋 Tables</a></li>
-            </ul>
-        </nav>
-
-        <!-- Profile Button -->
-        <button class="pa-header__profile-btn" onclick="toggleProfilePanel()" aria-label="User Profile">
-            <span class="pa-btn__icon">👤</span>
-            <span class="pa-header__profile-name">John Doe</span>
-        </button>
+        <!-- Right Section: Right Nav, Notifications, Profile (stays anchored right) -->
+        <div class="pa-header__right">
+            <!-- Right Navigation Links -->
+            <nav class="pa-header__nav pa-header__nav--right">
+                <ul>
+                    <li><a href="/alerts">Alerts</a></li>
+                    <li><a href="/tables">Tables</a></li>
+                </ul>
+            </nav>
+
+            <!-- Notification Bell -->
+            <div class="pa-notifications">
+                <button class="pa-notifications__btn" onclick="toggleNotifications()" aria-label="Notifications">
+                    <span class="pa-notifications__icon">🔔</span>
+                    <span class="pa-notifications__badge">3</span>
+                </button>
+            </div>
+
+            <!-- Profile Button -->
+            <button class="pa-header__profile-btn" onclick="toggleProfilePanel()" aria-label="User Profile">
+                <span class="pa-btn__icon">👤</span>
+                <span class="pa-header__profile-name">John Doe</span>
+            </button>
+        </div>
     </div>
 </nav>
 
@@ -518,13 +549,19 @@ NAVBAR CLASSES:
 - .pa-navbar - Navbar outer wrapper (outside layout container)
 - .pa-navbar__inner - Navbar inner container
 
-HEADER/NAVBAR ELEMENT CLASSES (inside pa-navbar__inner):
+HEADER SECTION CONTAINERS (inside pa-navbar__inner):
+- .pa-header__left - Left section (burger, brand, nav--left) - stays anchored left
+- .pa-header__center - Center section (title) - flexible, fills space
+- .pa-header__right - Right section (nav--right, notifications, profile) - stays anchored right
+
+HEADER/NAVBAR ELEMENT CLASSES (inside section containers):
 - .pa-header__burger - Burger menu button
 - .burger-menu - Burger menu class (same as __burger)
 - .pa-header__brand - Brand/logo area
 - .pa-header__nav - Navigation container
 - .pa-header__nav--left/right - Navigation alignment
 - .pa-header__title - Page title area (flexible, with ellipsis)
+- .pa-notifications - Notification bell container
 - .pa-header__profile-btn - Profile button
 - .pa-header__profile-name - Profile name text
 
@@ -536,7 +573,11 @@ LAYOUT CLASSES:
 - .pa-layout__main - Main content area
 - .pa-layout__main__inner - Main content inner wrapper
 - .pa-layout__footer - Footer container
-- .pa-layout__footer__content - Footer content wrapper
+
+FOOTER SECTION CONTAINERS (inside pa-layout__footer):
+- .pa-footer__left - Left section (copyright, etc.) - stays anchored left
+- .pa-footer__center - Center section (optional) - flexible, fills space
+- .pa-footer__right - Right section (version info, links) - stays anchored right
 
 LAYOUT WIDTH VARIANTS (applied to body tag):
 - No class - Fluid layout (full width)

package/snippets/modals.html

@@ -8,6 +8,7 @@ MODAL WRAPPER CLASSES:
 - pa-modal: Base modal wrapper
 - pa-modal--show: Show the modal (add/remove via JavaScript)
 - pa-modal--top: Position modal near top instead of center (useful for search/command interfaces)
+- pa-modal--static: Prevent closing via ESC key or backdrop click (must use explicit button)
 - pa-modal--primary: Primary themed modal (blue header)
 - pa-modal--success: Success themed modal (green header)
 - pa-modal--warning: Warning themed modal (orange header)
@@ -75,6 +76,42 @@ HEADER THEME CLASSES (alternative to modal-level themes):
 </div>
 
 
+<!-- STATIC MODAL (No ESC, No Backdrop Click) -->
+
+<!--
+Static modals cannot be closed by:
+- Pressing the Escape key
+- Clicking the backdrop
+
+User MUST click an explicit button to close.
+Use for: license agreements, critical confirmations, required actions.
+
+Implementation:
+1. Add pa-modal--static class to the modal wrapper
+2. Do NOT add onclick to the backdrop
+3. Optionally remove the X close button from header
+4. JavaScript must check for --static class before closing on ESC
+-->
+
+<div class="pa-modal pa-modal--static" id="staticModal">
+  <div class="pa-modal__backdrop"></div><!-- No onclick here! -->
+  <div class="pa-modal__container pa-modal__container--sm">
+    <div class="pa-modal__header pa-modal__header--warning">
+      <h3 class="pa-modal__title">License Agreement</h3>
+      <!-- No X close button - user must use footer buttons -->
+    </div>
+    <div class="pa-modal__body">
+      <p>You must accept the terms to continue.</p>
+      <p>This modal cannot be dismissed with ESC or by clicking outside.</p>
+    </div>
+    <div class="pa-modal__footer">
+      <button class="pa-btn pa-btn--secondary" onclick="closeModal('staticModal')">Decline</button>
+      <button class="pa-btn pa-btn--warning" onclick="closeModal('staticModal')">Accept</button>
+    </div>
+  </div>
+</div>
+
+
 <!-- MODAL SIZES -->
 
 <!-- Small Modal -->
@@ -278,21 +315,23 @@ function closeModal(modalId) {
   }
 }
 
-// Close modal with Escape key
+// Close modal with Escape key (skip static modals)
 document.addEventListener('keydown', function(e) {
   if (e.key === 'Escape') {
     const openModal = document.querySelector('.pa-modal--show');
-    if (openModal) {
+    // Don't close static modals with ESC
+    if (openModal && !openModal.classList.contains('pa-modal--static')) {
       closeModal(openModal.id);
     }
   }
 });
 
-// Close modal when clicking backdrop
+// Close modal when clicking backdrop (skip static modals)
 document.querySelectorAll('.pa-modal__backdrop').forEach(backdrop => {
   backdrop.addEventListener('click', function() {
     const modal = this.closest('.pa-modal');
-    if (modal) {
+    // Don't close static modals on backdrop click
+    if (modal && !modal.classList.contains('pa-modal--static')) {
       closeModal(modal.id);
     }
   });

package/snippets/tables.html

@@ -100,8 +100,8 @@
   </tbody>
 </table>
 
-<!-- 2x Spacing (comfortable padding) -->
-<table class="pa-table pa-table--2x">
+<!-- XS Size (compact, fits button-xs) -->
+<table class="pa-table pa-table--xs">
   <thead>
     <tr>
       <th>Name</th>
@@ -116,8 +116,8 @@
   </tbody>
 </table>
 
-<!-- 3x Spacing (spacious padding) -->
-<table class="pa-table pa-table--3x">
+<!-- LG Size (spacious, fits button-lg) -->
+<table class="pa-table pa-table--lg">
   <thead>
     <tr>
       <th>Name</th>
@@ -294,8 +294,10 @@ BASE CLASS:
 
 MODIFIERS:
 - pa-table--striped (alternating row colors)
-- pa-table--2x (comfortable padding, 2x base)
-- pa-table--3x (spacious padding, 3x base)
+- pa-table--xs (compact, fits button-xs)
+- pa-table--sm (slightly wider horizontal padding)
+- pa-table--lg (spacious, fits button-lg)
+- pa-table--xl (extra spacious, fits button-xl)
 
 HELPERS:
 - col-auto (auto-width column that shrinks to content)

package/snippets/tooltips.html

@@ -75,6 +75,20 @@
 </span>
 
 
+<!-- THEME COLOR TOOLTIPS (color-1 to color-9) -->
+
+<!-- Theme colors use --pa-color-* CSS variables defined by themes -->
+<span class="pa-tooltip pa-tooltip--color-1" data-tooltip="Color 1">Color 1</span>
+<span class="pa-tooltip pa-tooltip--color-2" data-tooltip="Color 2">Color 2</span>
+<span class="pa-tooltip pa-tooltip--color-3" data-tooltip="Color 3">Color 3</span>
+<span class="pa-tooltip pa-tooltip--color-4" data-tooltip="Color 4">Color 4</span>
+<span class="pa-tooltip pa-tooltip--color-5" data-tooltip="Color 5">Color 5</span>
+<span class="pa-tooltip pa-tooltip--color-6" data-tooltip="Color 6">Color 6</span>
+<span class="pa-tooltip pa-tooltip--color-7" data-tooltip="Color 7">Color 7</span>
+<span class="pa-tooltip pa-tooltip--color-8" data-tooltip="Color 8">Color 8</span>
+<span class="pa-tooltip pa-tooltip--color-9" data-tooltip="Color 9">Color 9</span>
+
+
 <!-- CURSOR MODIFIERS -->
 
 <!-- Default tooltip (inherits parent cursor - good for clickable elements like buttons, tabs) -->
@@ -270,6 +284,55 @@
 </div>
 
 
+<!-- POPOVER ALIGNMENT -->
+
+<!-- Left Aligned (default) -->
+<div class="pa-popover" data-placement="bottom">
+  <button class="pa-popover__trigger">?</button>
+  <div class="pa-popover__content">
+    <div class="pa-popover__header">
+      <h4>Left Aligned</h4>
+      <button class="pa-popover__close">×</button>
+    </div>
+    <div class="pa-popover__body">
+      <p>Default alignment is left.</p>
+      <ul>
+        <li>Lists look natural</li>
+        <li>Easy to read</li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<!-- Center Aligned -->
+<div class="pa-popover pa-popover--center" data-placement="bottom">
+  <button class="pa-popover__trigger">?</button>
+  <div class="pa-popover__content">
+    <div class="pa-popover__header">
+      <h4>Centered</h4>
+      <button class="pa-popover__close">×</button>
+    </div>
+    <div class="pa-popover__body">
+      <p>Use --center modifier for centered text.</p>
+    </div>
+  </div>
+</div>
+
+<!-- Right Aligned -->
+<div class="pa-popover pa-popover--right" data-placement="bottom">
+  <button class="pa-popover__trigger">?</button>
+  <div class="pa-popover__content">
+    <div class="pa-popover__header">
+      <h4>Right Aligned</h4>
+      <button class="pa-popover__close">×</button>
+    </div>
+    <div class="pa-popover__body">
+      <p>Use --right modifier for RTL layouts.</p>
+    </div>
+  </div>
+</div>
+
+
 <!-- POPOVER WITH RICH CONTENT -->
 
 <!-- Popover with List -->
@@ -346,6 +409,7 @@ VARIANTS:
 - pa-tooltip--success (success colored background)
 - pa-tooltip--warning (warning colored background)
 - pa-tooltip--danger (danger colored background)
+- pa-tooltip--color-1 through pa-tooltip--color-9 (theme-defined colors)
 
 MULTILINE:
 - pa-tooltip--multiline (allows text wrapping)
@@ -363,6 +427,10 @@ SIZES:
 - pa-popover--sm (small)
 - pa-popover--lg (large)
 
+ALIGNMENT:
+- pa-popover--center (centered body text)
+- pa-popover--right (right-aligned body text)
+
 COMPONENTS:
 - pa-popover__trigger (button/trigger element)
 - pa-popover__content (popover container)

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

@@ -7,6 +7,7 @@
 // Buttons
 .pa-btn {
   display: inline-block;
+  height: $btn-height-base;
   padding: $btn-padding-v $btn-padding-h;
   border: $btn-border-width solid transparent;
   border-radius: $border-radius;
@@ -46,21 +47,25 @@
   }
 
   &--xs {
+    height: $btn-height-xs;
     padding: $btn-padding-xs-v $btn-padding-xs-h;
     font-size: $font-size-xs;
   }
 
   &--sm {
+    height: $btn-height-sm;
     padding: $btn-padding-sm-v $btn-padding-sm-h;
     font-size: $font-size-sm;
   }
 
   &--lg {
+    height: $btn-height-lg;
     padding: $btn-padding-lg-v $btn-padding-lg-h;
     font-size: $font-size-base;
   }
 
   &--xl {
+    height: $btn-height-xl;
     padding: $btn-padding-xl-v $btn-padding-xl-h;
     font-size: $font-size-lg;
   }
@@ -265,6 +270,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    line-height: 1;
 
     // Size-specific icon-only dimensions
     &.pa-btn--xs {

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

@@ -7,8 +7,8 @@
 // Cards
 .pa-card {
   background: var(--pa-card-bg);
-  border: $border-width-base solid var(--pa-border-color);
-  border-radius: $border-radius-lg;
+  border: $card-border-width solid var(--pa-border-color);
+  border-radius: $card-border-radius;
   margin-bottom: $spacing-base;
   box-shadow: $shadow-sm;
   transition: box-shadow $transition-fast $easing-snappy;
@@ -22,8 +22,8 @@
   &__header {
     padding: $card-header-padding-v $card-header-padding-h;
     min-height: $card-header-min-height;
-    border-top-left-radius: $border-radius-lg;
-    border-top-right-radius: $border-radius-lg;
+    border-top-left-radius: $card-border-radius;
+    border-top-right-radius: $card-border-radius;
     border-bottom: $border-width-base solid var(--pa-border-color);
     background: var(--pa-card-header-bg);
     display: flex;
@@ -60,6 +60,12 @@
       color: var(--pa-text-primary);
       font-size: $font-size-base;
     }
+
+    // Buttons in card headers - negative margin to prevent header height growth
+    .pa-btn {
+      margin-top: -0.25rem;
+      margin-bottom: -0.25rem;
+    }
   }
 
   &__title {
@@ -241,6 +247,36 @@
       display: block;
     }
   }
+
+  // Inline tabs in header (for side-by-side card alignment)
+  &__tabs--inline {
+    display: flex;
+    gap: $spacing-xs;
+    margin: -$card-header-padding-v 0; // Negative margin to fill header height
+    border-bottom: none;
+    background: none;
+
+    .pa-card__tab {
+      padding: $card-tab-inline-padding-v $card-tab-inline-padding-h;
+      border: none;
+      border-radius: $border-radius;
+      font-size: $font-size-sm;
+      background: transparent;
+      color: var(--pa-text-secondary);
+      cursor: pointer;
+      transition: all $transition-fast $easing-snappy;
+
+      &:hover {
+        background-color: rgba($accent-color, $card-tab-hover-opacity);
+        color: var(--pa-text-primary);
+      }
+
+      &--active {
+        background: var(--pa-accent);
+        color: var(--pa-btn-primary-text);
+      }
+    }
+  }
 }
 
 // Clickable cards (anchor-wrapped)

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

@@ -40,6 +40,7 @@
   td {
     color: var(--pa-text-primary);
     background-color: var(--pa-table-bg);
+    height: $table-cell-height;
 
     // Buttons in table cells - negative margin to prevent row height growth
     .pa-btn {
@@ -62,28 +63,51 @@
     }
   }
 
-  // 2x spacing variant - comfortable padding (calculated from base)
-  &--2x {
-    th,
+  // Size variants - synchronized with button/input sizes
+  &--xs {
+    th, td {
+      padding: $table-padding-xs-v $table-padding-xs-h;
+    }
     td {
-      padding: ($table-padding-base-v * $table-spacing-2x-multiplier)
-        ($table-padding-base-h * $table-spacing-2x-multiplier);
+      height: $table-cell-height-xs;
     }
   }
 
-  // 3x spacing variant - spacious padding (calculated from base)
-  &--3x {
-    th,
+  &--sm {
+    th, td {
+      padding: $table-padding-sm-v $table-padding-sm-h;
+    }
     td {
-      padding: ($table-padding-base-v * $table-spacing-3x-multiplier)
-        ($table-padding-base-h * $table-spacing-3x-multiplier);
+      height: $table-cell-height-sm;
+    }
+  }
+
+  &--lg {
+    th, td {
+      padding: $table-padding-lg-v $table-padding-lg-h;
+    }
+    td {
+      height: $table-cell-height-lg;
+    }
+  }
+
+  &--xl {
+    th, td {
+      padding: $table-padding-xl-v $table-padding-xl-h;
+    }
+    td {
+      height: $table-cell-height-xl;
     }
   }
 
   // Hover effects
-  tbody tr {
-    // Setup for hover accent border
-    @if $table-hover-accent-width > 0 {
+  @if $table-hover-accent-width > 0 {
+    // Header alignment - add padding-left instead of border
+    th:first-child {
+      padding-left: $table-hover-accent-width + $table-padding-base-h;
+    }
+
+    tbody tr {
       border-#{$table-hover-accent-position}: #{$table-hover-accent-width} solid transparent;
       transition: border-color $transition-normal $easing-smooth;
     }