@keenmate/pure-admin-core 1.0.0-rc05 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "1.0.0-rc05",
+  "version": "1.0.0",
   "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>
 
@@ -366,52 +380,115 @@
 </aside>
 
 
+<!-- ================================
+     SIDEBAR WIDTH CONTROL
+     ================================ -->
+
+<!-- Default width (28.8rem / 288px from CSS variable) -->
+<aside class="pa-layout__sidebar">
+    <!-- Nav content -->
+</aside>
+
+<!-- Resizable sidebar (opt-in, drag right edge to resize) -->
+<aside class="pa-layout__sidebar pa-layout__sidebar--resizable">
+    <!-- Nav content -->
+    <!-- Drag handle appears on right edge -->
+    <!-- Width saved to localStorage -->
+    <!-- Double-click handle to reset to default -->
+</aside>
+
+<!-- Custom fixed width using utility class (overrides default and resize) -->
+<aside class="pa-layout__sidebar wr-25">
+    <!-- Fixed 25rem (250px) width -->
+    <!-- wr-* sets exact width, blocks resize -->
+</aside>
+
+<!-- Custom minimum width using utility class (allows resize above minimum) -->
+<aside class="pa-layout__sidebar pa-layout__sidebar--resizable minwr-20">
+    <!-- Minimum 20rem (200px) width -->
+    <!-- minwr-* sets floor, resize still works above it -->
+</aside>
+
+<!--
+SIDEBAR WIDTH OPTIONS:
+1. Default: Uses CSS variable --pa-sidebar-width (28.8rem)
+2. Resizable: Add --resizable class, user can drag to resize (180-500px range)
+3. Fixed width: Add wr-* utility class (e.g., wr-20, wr-25, wr-30)
+4. Minimum width: Add minwr-* utility class (e.g., minwr-15, minwr-20)
+
+WIDTH UTILITY CLASSES (rem-based, 10px = 1rem):
+- .wr-15 to .wr-25 - Fixed width (15rem to 25rem)
+- .minwr-15 to .minwr-25 - Minimum width (allows resize above)
+- .maxwr-15 to .maxwr-25 - Maximum width (limits resize)
+
+NOTE: Fixed width (.wr-*) overrides both default and resizable width.
+      Use .minwr-* with --resizable to set a floor while allowing resize.
+-->
+
+
 <!-- ================================
      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 +595,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 +619,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)
@@ -564,6 +651,14 @@ SIDEBAR MODES (modifiers on .pa-layout__sidebar):
 - Default - Sidebar scrolls with content
 - .pa-layout__sidebar--sticky - Sidebar stays fixed while content scrolls
 - .pa-layout__sidebar--icon-collapse - Sidebar collapses to icon bar instead of hiding
+- .pa-layout__sidebar--resizable - Drag right edge to resize (opt-in)
+
+SIDEBAR WIDTH CONTROL:
+- Default width: 28.8rem (288px) via CSS variable --pa-sidebar-width
+- Resizable: Add --resizable class for drag-to-resize (180-500px range)
+- Fixed width: Add .wr-* utility class (e.g., wr-25 = 250px) - overrides resize
+- Min width: Add .minwr-* utility class (e.g., minwr-20) - sets floor for resize
+- Max width: Add .maxwr-* utility class (e.g., maxwr-40) - sets ceiling for resize
 
 BURGER MENU:
 - .burger-menu - Burger menu button (same as .pa-header__burger)
@@ -595,4 +690,16 @@ JAVASCRIPT:
 - toggleSidebar() - Toggle sidebar visibility (burger menu)
 - toggleSubmenu(button) - Toggle submenu open/closed
 - Stores state in localStorage for persistence across page loads
+
+PROFILE PANEL WIDTH CONTROL:
+- Default width: 20vw via CSS variable --pa-profile-panel-width
+- Default max-width: 48rem (480px) via CSS variable --pa-profile-panel-max-width
+- Override with utility classes: Add .wr-* to .pa-profile-panel__content
+- Examples:
+  - .wr-30 = fixed 30rem (300px) width
+  - .wr-40 = fixed 40rem (400px) width
+  - .minwr-25 = minimum 25rem width
+  - .maxwr-50 = maximum 50rem width
+- Uses low specificity (:where) so utility classes can override
+- Available: wr-1 to wr-10, then 15, 20, 25, 30, 35, 40, 45, 50 (same for minwr/maxwr)
 -->

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

@@ -262,3 +262,28 @@ $grid-columns-fractions: (
   padding-bottom: 0;
 }
 
+// ============================================================================
+// AUTO-STACK ON MOBILE
+// ============================================================================
+// Base percentage/fraction columns auto-stack to 100% on mobile
+// Use explicit responsive classes (pa-col-sm-*, pa-col-md-*) to override
+@media (max-width: $mobile-breakpoint) {
+  // Stack percentage columns
+  @each $size in $grid-columns-5 {
+    @if $size < 100 {
+      .pa-col-#{$size} {
+        flex: 0 0 100%;
+        max-width: 100%;
+      }
+    }
+  }
+
+  // Stack fraction columns
+  @each $name, $width in $grid-columns-fractions {
+    .pa-col-#{$name} {
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
+  }
+}
+

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

@@ -251,3 +251,70 @@
     right: -$spacing-base; // Align to right edge of viewport
   }
 }
+
+// ====================
+// Page View Modifier
+// ====================
+// Larger variant for full-page notification list
+
+.pa-notifications__list--page {
+  max-height: none;
+  overflow: visible;
+
+  .pa-notifications__item {
+    padding: $spacing-base $spacing-lg;
+  }
+
+  .pa-notifications__icon-wrapper {
+    width: 4rem;
+    height: 4rem;
+    font-size: $font-size-lg;
+  }
+
+  .pa-notifications__content {
+    h4 {
+      font-size: $font-size-sm;
+      margin-bottom: $spacing-xs;
+    }
+
+    p {
+      font-size: $font-size-sm;
+      -webkit-line-clamp: 3;
+    }
+  }
+
+  .pa-notifications__time {
+    font-size: $font-size-xs;
+  }
+}
+
+// Action buttons (for page view)
+.pa-notifications__actions {
+  display: flex;
+  gap: $spacing-xs;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity $transition-fast $easing-snappy;
+}
+
+.pa-notifications__item:hover .pa-notifications__actions {
+  opacity: 1;
+}
+
+// Mobile: always show actions
+@media (max-width: $mobile-breakpoint) {
+  .pa-notifications__list--page {
+    .pa-notifications__item {
+      flex-wrap: wrap;
+    }
+
+    .pa-notifications__actions {
+      opacity: 1;
+      width: 100%;
+      justify-content: flex-end;
+      margin-top: $spacing-sm;
+      padding-top: $spacing-sm;
+      border-top: $border-width-base solid var(--pa-border-color);
+    }
+  }
+}

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

@@ -4,6 +4,18 @@
    ======================================== */
 @use '../variables' as *;
 
+// CSS variable for profile panel width (allows utility class override)
+:root {
+  --pa-profile-panel-width: #{$profile-panel-width};
+  --pa-profile-panel-max-width: #{$profile-panel-max-width};
+}
+
+// Profile panel content width - :where() for low specificity (utility classes can override)
+:where(.pa-profile-panel__content) {
+  width: var(--pa-profile-panel-width);
+  max-width: var(--pa-profile-panel-max-width);
+}
+
 // ====================
 // Profile Panel & Header Button
 // ====================
@@ -73,8 +85,6 @@
     position: absolute;
     top: 0;
     right: 0;
-    width: $profile-panel-width;
-    max-width: $profile-panel-max-width;
     height: 100vh;
     background-color: var(--pa-card-bg);
     box-shadow: $shadow-profile-panel;

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

@@ -16,17 +16,16 @@
 }
 
 *::-webkit-scrollbar-thumb {
-  background: $border-color;
+  background: var(--pa-border-color);
   border-radius: $scrollbar-border-radius;
   border: $border-width-base solid var(--pa-primary-bg);
 
   &:hover {
-    background: $accent-color;
-    border-color: $accent-hover;
+    background: var(--pa-accent);
   }
 
   &:active {
-    background: $accent-hover;
+    background: var(--pa-accent-hover);
   }
 }
 

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

@@ -322,6 +322,7 @@
       border-radius: $border-radius-lg;
       padding: $card-body-padding-v $card-body-padding-h;
       background-color: var(--pa-card-bg);
+      margin-bottom: $spacing-base; // Match pa-card margin
 
       // Remove bottom border from tabs since wrapper has border
       .pa-tabs {
@@ -344,6 +345,7 @@
       border-radius: $card-border-radius;
       background-color: var(--pa-card-bg);
       box-shadow: $shadow-sm;
+      margin-bottom: $spacing-base; // Match pa-card margin
 
       .pa-tabs {
         height: $card-header-min-height;
@@ -474,6 +476,7 @@
       border-radius: $border-radius-lg;
       padding: $card-body-padding-v $card-body-padding-h;
       background-color: var(--pa-card-bg);
+      margin-bottom: $spacing-base; // Match pa-card margin
 
       // Add divider between tabs and content (gap already provides spacing)
       .pa-tabs--vertical {

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

@@ -122,6 +122,23 @@ html.font-size-4xl {
 .overflow-hidden { overflow: hidden; }
 .overflow-visible { overflow: visible; }
 
+// Overlay scrollbar utilities (scrollbar floats over content, doesn't reduce width)
+// Supported in Chromium browsers; Firefox falls back to auto
+.overflow-overlay {
+  overflow: auto;
+  overflow: overlay;
+}
+
+.overflow-y-overlay {
+  overflow-y: auto;
+  overflow-y: overlay;
+}
+
+.overflow-x-overlay {
+  overflow-x: auto;
+  overflow-x: overlay;
+}
+
 // Cursor utilities
 .cursor-pointer { cursor: pointer; }
 .cursor-help { cursor: help; }
@@ -235,6 +252,13 @@ html.font-size-4xl {
 .column-gap-base { column-gap: $spacing-base; }
 .column-gap-lg { column-gap: $spacing-lg; }
 
+// Align-self utilities (for flex/grid children)
+.self-start { align-self: flex-start; }
+.self-center { align-self: center; }
+.self-end { align-self: flex-end; }
+.self-stretch { align-self: stretch; }
+.self-baseline { align-self: baseline; }
+
 // Font-size utilities (10px rem base)
 // Direct font-size classes using typography variables
 .text-2xs { font-size: $font-size-2xs; }   // 1rem = 10px
@@ -248,6 +272,13 @@ html.font-size-4xl {
 .text-3xl { font-size: $font-size-3xl; }   // 2.8rem = 28px
 .text-4xl { font-size: $font-size-4xl; }   // 3.2rem = 32px
 
+// Text truncation with ellipsis
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 // Component showcase styling
 .component-showcase {
   display: flex;
@@ -292,3 +323,11 @@ html.font-size-4xl {
   }
 }
 
+// Theme color utilities (color-1 through color-9)
+// Use these to apply theme colors to any element
+@for $i from 1 through 9 {
+  .pa-bg-color-#{$i} { background-color: var(--pa-color-#{$i}); }
+  .pa-text-color-#{$i} { color: var(--pa-color-#{$i}); }
+  .pa-border-color-#{$i} { border-color: var(--pa-color-#{$i}); }
+}
+

package/src/scss/core-components/forms/_input-groups.scss

@@ -35,10 +35,11 @@
   &__append {
     display: flex;
     align-items: center;
-    padding: $input-padding-v $input-padding-h;
+    height: #{$base-input-size-md-height}rem;
+    line-height: #{$base-input-size-md-height}rem;
+    padding: 0 $input-padding-h;
     border: $border-width-base solid var(--pa-border-color);
     font-size: $font-size-sm;
-    line-height: 1;
     white-space: nowrap;
     border-radius: 0;
   }
@@ -74,8 +75,8 @@
     border-left: $border-width-base solid var(--pa-border-color);
   }
 
-  // When input is focused, only show focus border on edges adjacent to input
-  &:focus-within {
+  // When input is focused, show focus border on adjacent prepend/append
+  &:has(.pa-input:focus) {
     // Last prepend (one before input) gets focus border
     .pa-input-group__prepend {
       border-right: $border-width-base solid var(--pa-input-focus-border-color);
@@ -99,13 +100,10 @@
 
   &__button {
     border-radius: 0;
-    border-color: var(--pa-border-color);
-    border-left: none;
 
     &:first-child {
       border-top-left-radius: $border-radius;
       border-bottom-left-radius: $border-radius;
-      border-left: $border-width-base solid var(--pa-border-color);
     }
 
     &:last-child {
@@ -118,7 +116,8 @@
   &--xs {
     .pa-input-group__prepend,
     .pa-input-group__append {
-      padding: $input-padding-xs-v $input-padding-h;
+      height: #{$base-input-size-xs-height}rem;
+      line-height: #{$base-input-size-xs-height}rem;
       font-size: $font-size-xs;
     }
   }
@@ -126,7 +125,8 @@
   &--sm {
     .pa-input-group__prepend,
     .pa-input-group__append {
-      padding: $input-padding-v $input-padding-h;
+      height: #{$base-input-size-sm-height}rem;
+      line-height: #{$base-input-size-sm-height}rem;
       font-size: $font-size-sm;
     }
   }
@@ -134,7 +134,8 @@
   &--lg {
     .pa-input-group__prepend,
     .pa-input-group__append {
-      padding: $input-padding-v $input-padding-h;
+      height: #{$base-input-size-lg-height}rem;
+      line-height: #{$base-input-size-lg-height}rem;
       font-size: $font-size-base;
     }
   }
@@ -142,7 +143,8 @@
   &--xl {
     .pa-input-group__prepend,
     .pa-input-group__append {
-      padding: $input-padding-v $input-padding-h;
+      height: #{$base-input-size-xl-height}rem;
+      line-height: #{$base-input-size-xl-height}rem;
       font-size: $font-size-lg;
     }
   }

package/src/scss/core-components/layout/_layout-container.scss

@@ -95,11 +95,73 @@ body.pa-layout--sticky .pa-layout__inner {
 
 // Footer - outside inner, sibling to inner
 .pa-layout__footer {
-  height: $footer-height;
+  min-height: $footer-height;
   background-color: var(--pa-footer-bg);
   border-top: $border-width-base solid var(--pa-footer-border-color);
   display: flex;
   align-items: center;
-  padding: 0 $spacing-base;
+  padding: $spacing-xs $spacing-base;
   flex-shrink: 0; // Don't shrink footer
+  gap: $spacing-base;
+}
+
+// Footer sections - Left/Center/Right layout (mirrors navbar structure)
+.pa-footer__left {
+  display: flex;
+  align-items: center;
+  gap: $spacing-base;
+  flex-shrink: 0;
+}
+
+.pa-footer__center {
+  flex: 1;
+  min-width: 0; // Allow shrinking for ellipsis
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pa-footer__right {
+  display: flex;
+  align-items: center;
+  gap: $spacing-base;
+  flex-shrink: 0;
+
+  &--vertical {
+    flex-direction: column;
+    align-items: flex-end;
+    gap: $spacing-xs;
+  }
+}
+
+// Responsive footer - stack sections on mobile
+@media (max-width: $mobile-breakpoint) {
+  .pa-layout__footer {
+    flex-wrap: wrap;
+    min-height: auto;
+    padding: $spacing-sm $spacing-base;
+  }
+
+  .pa-footer__left,
+  .pa-footer__center,
+  .pa-footer__right {
+    flex-shrink: 1;
+    min-width: 0;
+  }
+
+  .pa-footer__left {
+    flex: 1 1 auto;
+  }
+
+  .pa-footer__center {
+    display: none; // Hide empty center on mobile
+  }
+
+  .pa-footer__right {
+    flex: 0 1 auto;
+
+    &--vertical {
+      align-items: flex-end;
+    }
+  }
 }

package/src/scss/core-components/layout/_navbar-elements.scss

@@ -60,12 +60,13 @@
       }
     }
 
+    // Note: margin auto no longer needed with pa-header__left/center/right structure
     &--left {
-      margin-right: auto;
+      // Elements in left section
     }
 
     &--right {
-      margin-left: auto;
+      // Elements in right section
     }
   }
 

package/src/scss/core-components/layout/_navbar.scss

@@ -69,3 +69,26 @@ body.pa-container-2xl .pa-navbar {
   align-items: center;
   gap: $spacing-base;
 }
+
+// Header sections - Left/Center/Right layout
+.pa-header__left {
+  display: flex;
+  align-items: center;
+  gap: $spacing-base;
+  flex-shrink: 0;
+}
+
+.pa-header__center {
+  flex: 1;
+  min-width: 0; // Allow shrinking for ellipsis
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pa-header__right {
+  display: flex;
+  align-items: center;
+  gap: $spacing-base;
+  flex-shrink: 0;
+}