@keenmate/pure-admin-core 1.0.0 → 1.1.0

package/package.json

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

@@ -411,7 +411,7 @@
 
 <!--
 SIDEBAR WIDTH OPTIONS:
-1. Default: Uses CSS variable --pa-sidebar-width (28.8rem)
+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)
@@ -654,7 +654,7 @@ SIDEBAR MODES (modifiers on .pa-layout__sidebar):
 - .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
+- 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
@@ -692,8 +692,8 @@ JAVASCRIPT:
 - 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
+- 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

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)