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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "1.0.0-rc06",
+  "version": "1.1.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/customization.html

@@ -120,7 +120,7 @@ Future versions may include CSS variables for:
 - Animation timing customization
 
 For now, use SCSS variables for deep customization:
-$primary-bg: #your-color;
+$main-bg: #your-color;
 $accent-color: #your-accent;
 @import '@pure-admin/core/scss';
 -->

package/snippets/layout.html

@@ -380,6 +380,52 @@
 </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-local-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
@@ -605,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-local-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)
@@ -636,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-local-profile-panel-width
+- Default max-width: 48rem (480px) via CSS variable --pa-local-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/snippets/manifest.json

@@ -299,56 +299,6 @@
       "size": 249,
       "modified": "2025-10-01T16:46:47.199Z"
     },
-    "themes/audi-light.scss": {
-      "hash": "e99983bd63a1b01ca40b2e76d84140bdb61ef19a074752c652e6518a5623caea",
-      "size": 8631,
-      "modified": "2025-12-13T15:59:43.512Z"
-    },
-    "themes/audi.scss": {
-      "hash": "3231e9daa6f3e9b1263a21f61712df62cdf1bcf93d6ebf2ac1b317961e75a25b",
-      "size": 9314,
-      "modified": "2025-12-13T18:14:18.929Z"
-    },
-    "themes/corporate.scss": {
-      "hash": "00193bbf439190a2afda040ffe5a2258d6d64ac0564ff4d11933be9d0d07270c",
-      "size": 5608,
-      "modified": "2025-12-13T15:59:52.882Z"
-    },
-    "themes/dark-blue.scss": {
-      "hash": "27b5f70fe3f70ed1a3952f16a78fca953b73cfb56b8bc5452f3fe8aa9c768c17",
-      "size": 4948,
-      "modified": "2025-12-13T18:15:26.140Z"
-    },
-    "themes/dark-green.scss": {
-      "hash": "30a9f2c3ca8dee1720a530f6498f6f3ae3b2511564b686a4bf98ba5e78326c59",
-      "size": 4998,
-      "modified": "2025-12-13T18:15:50.449Z"
-    },
-    "themes/dark-red.scss": {
-      "hash": "7d1e12211c30d4ebcc6fac4652c8e51cc20a95b70794c41853d17d8ea1cc2cee",
-      "size": 4954,
-      "modified": "2025-12-13T18:15:51.566Z"
-    },
-    "themes/dark.scss": {
-      "hash": "9a25e83f9587c663de918a506d2a0edb1ded0a8ea60081392f3128d825b036b3",
-      "size": 4272,
-      "modified": "2025-12-13T18:15:09.759Z"
-    },
-    "themes/express.scss": {
-      "hash": "b54bafa90d5defc586aaffcaa9ba241274872e01ed26cee065cde40234a215c9",
-      "size": 7738,
-      "modified": "2025-12-13T15:59:39.049Z"
-    },
-    "themes/minimal.scss": {
-      "hash": "cd997b7f8785a6dc4b6aadeb9eae83024b38c101c7c053d66db4cfc346155b7f",
-      "size": 3652,
-      "modified": "2025-12-13T15:59:44.548Z"
-    },
-    "themes/_dark-base.scss": {
-      "hash": "e383f750029a362210abc29d437cbbae509c3b20817731cea318e5611d5c6de8",
-      "size": 5272,
-      "modified": "2025-10-13T13:03:54.101Z"
-    },
     "utilities.scss": {
       "hash": "a7b3f7cdc2d390ea3af3aedf21cdf2c70c9ce0fe6833e3bfb6870ec9dd33e416",
       "size": 7327,

package/snippets/profile.html

@@ -209,14 +209,16 @@
             </button>
         </div>
 
-        <!-- Profile Panel Tabs -->
+        <!-- Profile Panel Tabs (with text labels) -->
         <div class="pa-profile-panel__tabs">
             <div class="pa-tabs pa-tabs--full">
                 <button class="pa-tabs__item pa-tabs__item--active" data-profile-tab="profile">
-                    <span>👤</span> Profile
+                    <i class="fa-solid fa-user"></i>
+                    <span class="pa-profile-panel__tab-text">Profile</span>
                 </button>
                 <button class="pa-tabs__item" data-profile-tab="favorites">
-                    <span>⭐</span> Favorites
+                    <i class="fa-solid fa-star"></i>
+                    <span class="pa-profile-panel__tab-text">Favorites</span>
                 </button>
             </div>
         </div>
@@ -297,6 +299,49 @@
 </div>
 
 
+<!-- ================================
+     PROFILE PANEL - WITH ICON-ONLY TABS
+     Add --icon-only modifier to hide text labels
+     ================================ -->
+
+<div class="pa-profile-panel" id="profilePanel">
+    <div class="pa-profile-panel__overlay" onclick="closeProfilePanel()"></div>
+    <div class="pa-profile-panel__content">
+        <div class="pa-profile-panel__header">
+            <div class="pa-profile-panel__avatar">
+                <span class="pa-profile-panel__avatar-icon"><i class="fa-solid fa-user"></i></span>
+            </div>
+            <div class="pa-profile-panel__info">
+                <h3 class="pa-profile-panel__name">John Doe</h3>
+                <p class="pa-profile-panel__email">john.doe@company.com</p>
+                <span class="pa-profile-panel__role">Administrator</span>
+            </div>
+            <button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">
+                <i class="fa-solid fa-xmark"></i>
+            </button>
+        </div>
+
+        <!-- Profile Panel Tabs (icon-only) - add --icon-only modifier -->
+        <div class="pa-profile-panel__tabs pa-profile-panel__tabs--icon-only">
+            <div class="pa-tabs pa-tabs--full">
+                <button class="pa-tabs__item pa-tabs__item--active" data-profile-tab="profile" title="Profile">
+                    <i class="fa-solid fa-user"></i>
+                    <span class="pa-profile-panel__tab-text">Profile</span>
+                </button>
+                <button class="pa-tabs__item" data-profile-tab="favorites" title="Favorites">
+                    <i class="fa-solid fa-star"></i>
+                    <span class="pa-profile-panel__tab-text">Favorites</span>
+                </button>
+            </div>
+        </div>
+
+        <div class="pa-profile-panel__body">
+            <!-- Content same as regular tabs variant -->
+        </div>
+    </div>
+</div>
+
+
 <!-- ================================
      PROFILE PANEL - WITH FONT AWESOME
      ================================ -->
@@ -501,9 +546,12 @@ PANEL HEADER:
 
 PANEL TABS (optional):
 - .pa-profile-panel__tabs - Tabs container
+- .pa-profile-panel__tabs--icon-only - Modifier to hide text labels (icon-only mode)
+- .pa-profile-panel__tab-text - Text label element (hidden when --icon-only is applied)
 - .pa-tabs.pa-tabs--full - Full-width tabs
 - [data-profile-tab] - Tab button attribute
 - [data-profile-panel] - Tab panel attribute
+- Add title attribute to tab buttons for tooltip when using icon-only mode
 
 PANEL BODY:
 - .pa-profile-panel__body - Body container (scrollable)