@keenmate/pure-admin-core 1.0.0-rc01 → 1.0.0-rc02

package/snippets/profile.html

@@ -8,15 +8,15 @@
      ================================ -->
 
 <!-- Profile Button (goes in header/navbar) -->
-<button class="pa-navbar__profile-btn" onclick="toggleProfilePanel()" aria-label="User Profile">
+<button class="pa-header__profile-btn" onclick="toggleProfilePanel()" aria-label="User Profile">
     <span class="pa-btn__icon">👤</span>
-    <span class="pa-navbar__profile-name">John Doe</span>
+    <span class="pa-header__profile-name">John Doe</span>
 </button>
 
 <!-- Profile Button with Font Awesome -->
-<button class="pa-navbar__profile-btn" onclick="toggleProfilePanel()" aria-label="User Profile">
+<button class="pa-header__profile-btn" onclick="toggleProfilePanel()" aria-label="User Profile">
     <span class="pa-btn__icon"><i class="fa-solid fa-user"></i></span>
-    <span class="pa-navbar__profile-name">John Doe</span>
+    <span class="pa-header__profile-name">John Doe</span>
 </button>
 
 
@@ -81,6 +81,115 @@
 </div>
 
 
+<!-- ================================
+     PROFILE PANEL - WITH TABS (PROFILE + FAVORITES)
+     ================================ -->
+
+<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">👤</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">
+                ✕
+            </button>
+        </div>
+
+        <!-- Profile Panel Tabs -->
+        <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
+                </button>
+                <button class="pa-tabs__item" data-profile-tab="favorites">
+                    <span>⭐</span> Favorites
+                </button>
+            </div>
+        </div>
+
+        <div class="pa-profile-panel__body">
+            <!-- Profile Tab -->
+            <div class="pa-tabs__panel pa-tabs__panel--active" data-profile-panel="profile">
+                <nav class="pa-profile-panel__nav">
+                    <ul>
+                        <li><a href="#profile" class="pa-profile-panel__nav-item">
+                            <span class="pa-profile-panel__nav-icon">👤</span>
+                            Profile Settings
+                        </a></li>
+                        <li><a href="#security" class="pa-profile-panel__nav-item">
+                            <span class="pa-profile-panel__nav-icon">🔒</span>
+                            Security
+                        </a></li>
+                        <li><a href="#notifications" class="pa-profile-panel__nav-item">
+                            <span class="pa-profile-panel__nav-icon">🔔</span>
+                            Notifications
+                        </a></li>
+                        <li><a href="#preferences" class="pa-profile-panel__nav-item">
+                            <span class="pa-profile-panel__nav-icon">⚙️</span>
+                            Preferences
+                        </a></li>
+                        <li><a href="#help" class="pa-profile-panel__nav-item">
+                            <span class="pa-profile-panel__nav-icon">❓</span>
+                            Help & Support
+                        </a></li>
+                    </ul>
+                </nav>
+
+                <div class="pa-profile-panel__actions">
+                    <button class="pa-btn pa-btn--secondary pa-btn--block">
+                        Switch Account
+                    </button>
+                    <button class="pa-btn pa-btn--danger pa-btn--block">
+                        Sign Out
+                    </button>
+                </div>
+            </div>
+
+            <!-- Favorites Tab -->
+            <div class="pa-tabs__panel" data-profile-panel="favorites">
+                <div class="pa-profile-panel__favorites">
+                    <ul>
+                        <li>
+                            <div class="pa-profile-panel__favorite-item" data-href="/dashboard">
+                                <span class="pa-profile-panel__favorite-icon">📊</span>
+                                <span class="pa-profile-panel__favorite-label">Dashboard</span>
+                                <button class="pa-profile-panel__favorite-remove" title="Remove from favorites">✕</button>
+                            </div>
+                        </li>
+                        <li>
+                            <div class="pa-profile-panel__favorite-item" data-href="/reports">
+                                <span class="pa-profile-panel__favorite-icon">📝</span>
+                                <span class="pa-profile-panel__favorite-label">Reports</span>
+                                <button class="pa-profile-panel__favorite-remove" title="Remove from favorites">✕</button>
+                            </div>
+                        </li>
+                        <li>
+                            <div class="pa-profile-panel__favorite-item" data-href="/settings">
+                                <span class="pa-profile-panel__favorite-icon">⚙️</span>
+                                <span class="pa-profile-panel__favorite-label">Settings</span>
+                                <button class="pa-profile-panel__favorite-remove" title="Remove from favorites">✕</button>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <div class="pa-profile-panel__favorites-add">
+                    <button class="pa-btn pa-btn--sm pa-btn--outline-secondary pa-btn--block">
+                        + Add Current Page
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
 <!-- ================================
      PROFILE PANEL - WITH FONT AWESOME
      ================================ -->
@@ -206,7 +315,7 @@ function closeProfilePanel() {
  */
 document.addEventListener('click', (e) => {
     const profilePanel = document.getElementById('profilePanel');
-    const profileBtn = document.querySelector('.pa-navbar__profile-btn');
+    const profileBtn = document.querySelector('.pa-header__profile-btn');
 
     if (!profilePanel || !profileBtn) return;
 
@@ -215,6 +324,43 @@ document.addEventListener('click', (e) => {
         closeProfilePanel();
     }
 });
+
+/**
+ * Profile panel tab switching
+ */
+document.querySelectorAll('[data-profile-tab]').forEach(tab => {
+    tab.addEventListener('click', () => {
+        const tabId = tab.dataset.profileTab;
+        // Update active tab
+        document.querySelectorAll('[data-profile-tab]').forEach(t =>
+            t.classList.toggle('pa-tabs__item--active', t.dataset.profileTab === tabId));
+        // Update active panel
+        document.querySelectorAll('[data-profile-panel]').forEach(p =>
+            p.classList.toggle('pa-tabs__panel--active', p.dataset.profilePanel === tabId));
+    });
+});
+
+/**
+ * Favorite item click - navigate using data-href
+ */
+document.querySelectorAll('.pa-profile-panel__favorite-item').forEach(item => {
+    item.addEventListener('click', (e) => {
+        // Skip if clicking the remove button
+        if (e.target.closest('.pa-profile-panel__favorite-remove')) return;
+        const href = item.dataset.href;
+        if (href) window.location.href = href;
+    });
+});
+
+/**
+ * Favorite remove button - remove item from list
+ */
+document.querySelectorAll('.pa-profile-panel__favorite-remove').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        btn.closest('li').remove();
+    });
+});
 </script>
 
 
@@ -224,9 +370,9 @@ document.addEventListener('click', (e) => {
 
 <!--
 PROFILE BUTTON (HEADER):
-- .pa-navbar__profile-btn - Profile button in header
+- .pa-header__profile-btn - Profile button in header
 - .pa-btn__icon - Icon container
-- .pa-navbar__profile-name - User name text
+- .pa-header__profile-name - User name text
 
 PROFILE PANEL STRUCTURE:
 - .pa-profile-panel - Main panel container
@@ -245,6 +391,12 @@ PANEL HEADER:
 - .pa-profile-panel__role - User role badge
 - .pa-profile-panel__close - Close button
 
+PANEL TABS (optional):
+- .pa-profile-panel__tabs - Tabs container
+- .pa-tabs.pa-tabs--full - Full-width tabs
+- [data-profile-tab] - Tab button attribute
+- [data-profile-panel] - Tab panel attribute
+
 PANEL BODY:
 - .pa-profile-panel__body - Body container
 - .pa-profile-panel__nav - Navigation menu
@@ -252,10 +404,20 @@ PANEL BODY:
 - .pa-profile-panel__nav-icon - Navigation icon
 - .pa-profile-panel__actions - Action buttons container
 
+FAVORITES SECTION:
+- .pa-profile-panel__favorites - Favorites container
+- .pa-profile-panel__favorite-item - Favorite link (use div with data-href)
+- .pa-profile-panel__favorite-icon - Favorite icon
+- .pa-profile-panel__favorite-label - Favorite text label
+- .pa-profile-panel__favorite-remove - Remove button (appears on hover)
+- .pa-profile-panel__favorites-add - Add button container
+
 JAVASCRIPT FUNCTIONS:
 - toggleProfilePanel() - Toggle panel open/closed
 - closeProfilePanel() - Close panel
 - Auto-closes when clicking outside
+- Tab switching via data-profile-tab/data-profile-panel attributes
+- Favorite navigation via data-href attribute
 
 PLACEMENT:
 - Profile button goes in header/navbar

package/src/scss/_base-css-variables.scss

@@ -15,19 +15,31 @@
 // ============================================================================
 
 @mixin output-base-css-variables {
-  // === Colors ===
+  // === Accent Colors ===
   --base-accent-color: #{$base-accent-color};
   --base-accent-color-hover: #{$base-accent-color-hover};
   --base-accent-color-active: #{$base-accent-color-active};
   --base-accent-color-light: #{$base-accent-color-light};
   --base-accent-color-light-hover: #{$base-accent-color-light-hover};
-  --base-primary-bg: #{$base-primary-bg};
-  --base-primary-bg-hover: #{$base-primary-bg-hover};
+
+  // === Text Colors ===
   --base-text-color-1: #{$base-text-color-1};
   --base-text-color-2: #{$base-text-color-2};
   --base-text-color-3: #{$base-text-color-3};
   --base-text-color-4: #{$base-text-color-4};
   --base-text-color-on-accent: #{$base-text-color-on-accent};
+
+  // === Surface Colors ===
+  --base-surface-1: #{$base-surface-1};
+  --base-surface-2: #{$base-surface-2};
+  --base-surface-3: #{$base-surface-3};
+  --base-surface-inverse: #{$base-surface-inverse};
+  --base-overlay-bg: #{$base-overlay-bg};
+  --base-shadow-color: #{$base-shadow-color};
+  --base-primary-bg: #{$base-primary-bg};
+  --base-primary-bg-hover: #{$base-primary-bg-hover};
+
+  // === Border Colors ===
   --base-border-color: #{$base-border-color};
   --base-border: #{$base-border};
 
@@ -56,8 +68,55 @@
   --base-tooltip-bg: #{$base-tooltip-bg};
   --base-tooltip-text-color: #{$base-tooltip-text-color};
 
+  // === Contextual Colors - Success ===
+  --base-success-color: #{$base-success-color};
+  --base-success-color-hover: #{$base-success-color-hover};
+  --base-success-bg-light: #{$base-success-bg-light};
+  --base-success-bg-subtle: #{$base-success-bg-subtle};
+  --base-success-border: #{$base-success-border};
+  --base-success-text: #{$base-success-text};
+  --base-success-text-light: #{$base-success-text-light};
+  --base-text-on-success: #{$base-text-on-success};
+
+  // === Contextual Colors - Danger ===
+  --base-danger-color: #{$base-danger-color};
+  --base-danger-color-hover: #{$base-danger-color-hover};
+  --base-danger-bg-light: #{$base-danger-bg-light};
+  --base-danger-bg-subtle: #{$base-danger-bg-subtle};
+  --base-danger-border: #{$base-danger-border};
+  --base-danger-text: #{$base-danger-text};
+  --base-danger-text-light: #{$base-danger-text-light};
+  --base-text-on-danger: #{$base-text-on-danger};
+
+  // === Contextual Colors - Warning ===
+  --base-warning-color: #{$base-warning-color};
+  --base-warning-color-hover: #{$base-warning-color-hover};
+  --base-warning-bg-light: #{$base-warning-bg-light};
+  --base-warning-bg-subtle: #{$base-warning-bg-subtle};
+  --base-warning-border: #{$base-warning-border};
+  --base-warning-text: #{$base-warning-text};
+  --base-warning-text-light: #{$base-warning-text-light};
+  --base-text-on-warning: #{$base-text-on-warning};
+
+  // === Contextual Colors - Info ===
+  --base-info-color: #{$base-info-color};
+  --base-info-color-hover: #{$base-info-color-hover};
+  --base-info-bg-light: #{$base-info-bg-light};
+  --base-info-bg-subtle: #{$base-info-bg-subtle};
+  --base-info-border: #{$base-info-border};
+  --base-info-text: #{$base-info-text};
+  --base-info-text-light: #{$base-info-text-light};
+  --base-text-on-info: #{$base-text-on-info};
+
+  // === Interactive States ===
+  --base-hover-overlay: #{$base-hover-overlay};
+  --base-active-overlay: #{$base-active-overlay};
+  --base-focus-ring-color: #{$base-focus-ring-color};
+  --base-focus-ring-width: #{$base-focus-ring-width};
+
   // === Typography ===
   --base-font-family: #{$base-font-family};
+  --base-font-family-mono: #{$base-font-family-mono};
   --base-font-size-2xs: #{$base-font-size-2xs};
   --base-font-size-xs: #{$base-font-size-xs};
   --base-font-size-sm: #{$base-font-size-sm};
@@ -68,6 +127,7 @@
   --base-font-weight-normal: #{$base-font-weight-normal};
   --base-font-weight-medium: #{$base-font-weight-medium};
   --base-font-weight-semibold: #{$base-font-weight-semibold};
+  --base-font-weight-bold: #{$base-font-weight-bold};
   --base-line-height-tight: #{$base-line-height-tight};
   --base-line-height-normal: #{$base-line-height-normal};
   --base-line-height-relaxed: #{$base-line-height-relaxed};

package/src/scss/_core.scss

@@ -11,6 +11,9 @@
 // Base styles and resets
 @use 'core-components/base' as *;
 
+// Scrollbar styling (global)
+@use 'core-components/scrollbars' as *;
+
 // Layout components (header, sidebar, footer, responsive)
 @use 'core-components/layout' as *;
 

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

@@ -83,12 +83,12 @@
       color: var(--pa-text-primary);
       font-size: $font-size-base;
       font-weight: $font-weight-semibold;
+      line-height: 1;
     }
   }
 
   &__body {
-    padding: $card-body-padding $card-body-padding $card-body-padding
-      $card-body-padding;
+    padding: $card-body-padding-v $card-body-padding-h;
     flex: 1;
 
     // Remove top margin from first child to avoid double spacing with padding

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

@@ -196,8 +196,8 @@
   &__nav-item {
     display: flex;
     align-items: center;
-    gap: $spacing-md;
-    padding: $card-footer-padding-v $card-footer-padding-h;
+    gap: $sidebar-item-gap;
+    padding: $sidebar-padding;
     color: var(--pa-text-primary);
     text-decoration: none;
     border-radius: $border-radius;
@@ -217,8 +217,8 @@
   }
 
   &__nav-icon {
-    font-size: $font-size-lg;
-    width: $profile-nav-icon-width;
+    font-size: $font-size-base;
+    width: $sidebar-icon-size;
     text-align: center;
   }
 
@@ -228,54 +228,126 @@
     gap: $spacing-md;
     margin-top: auto;
   }
-}
 
-// Responsive adjustments
-@media (max-width: $mobile-breakpoint) {
-  .pa-profile-panel__content {
-    width: 85vw;
-    max-width: $profile-panel-mobile-max-width;
+  // Tabs section
+  &__tabs {
+    padding: 0 $spacing-lg;
+    border-bottom: $border-width-base solid var(--pa-border-color);
+    background-color: var(--pa-header-bg);
+
+    .pa-tabs {
+      border-bottom: none;
+      margin-bottom: 0;
+    }
+
+    .pa-tabs__item {
+      color: var(--pa-header-text-secondary);
+      border-bottom-color: transparent;
+
+      &:hover {
+        color: var(--pa-header-text);
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+
+      &--active {
+        color: var(--pa-header-text);
+        border-bottom-color: var(--pa-accent);
+      }
+    }
   }
 
-  .pa-header__profile-name {
-    display: none;
+  // Favorites section
+  &__favorites {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    li {
+      margin-bottom: $spacing-sm;
+    }
   }
-}
 
-// Global scrollbar styling - applies to all content
-/* Webkit browsers (Chrome, Safari, Edge) */
-*::-webkit-scrollbar {
-  width: $scrollbar-width;
-  height: $scrollbar-width;
-}
+  &__favorite-item {
+    display: flex;
+    align-items: center;
+    gap: $sidebar-item-gap;
+    padding: $sidebar-padding;
+    color: var(--pa-text-primary);
+    text-decoration: none;
+    border-radius: $border-radius;
+    cursor: pointer;
+    transition: background-color $transition-fast $easing-snappy,
+                color $transition-fast $easing-snappy;
+    font-weight: $font-weight-medium;
 
-*::-webkit-scrollbar-track {
-  background: var(--pa-primary-bg);
-  border-radius: $border-radius;
-}
+    &:hover {
+      background-color: var(--pa-accent-light);
+      color: var(--pa-accent);
+    }
 
-*::-webkit-scrollbar-thumb {
-  background: $border-color;
-  border-radius: $border-radius;
-  border: $border-width-base solid var(--pa-primary-bg);
+    &:focus {
+      outline: $focus-outline-width solid var(--pa-accent);
+      outline-offset: $focus-outline-offset;
+    }
+  }
 
-  &:hover {
-    background: $accent-color;
-    border-color: $accent-hover;
+  &__favorite-icon {
+    font-size: $font-size-base;
+    width: $sidebar-icon-size;
+    text-align: center;
   }
 
-  &:active {
-    background: $accent-hover;
+  &__favorite-label {
+    flex: 1;
   }
-}
 
-*::-webkit-scrollbar-corner {
-  background: var(--pa-primary-bg);
-}
+  // Favorite remove button
+  &__favorite-remove {
+    opacity: 0;
+    margin-left: auto;
+    background: none;
+    border: none;
+    padding: $spacing-sm;
+    color: var(--pa-text-secondary);
+    cursor: pointer;
+    border-radius: $border-radius;
+    font-size: $font-size-sm;
+    line-height: 1;
+    transition: opacity $transition-fast $easing-snappy,
+                color $transition-fast $easing-snappy,
+                background-color $transition-fast $easing-snappy;
+
+    &:hover {
+      color: var(--pa-danger);
+      background-color: var(--pa-danger-bg-light);
+    }
+  }
 
-/* Firefox */
-* {
-  scrollbar-width: auto;
-  scrollbar-color: var(--pa-border-color) var(--pa-primary-bg);
+  // Show remove button on favorite-item hover
+  &__favorite-item:hover &__favorite-remove {
+    opacity: 1;
+  }
+
+  &__favorites-add {
+    margin-top: auto;
+    padding-top: $spacing-md;
+  }
 }
 
+// Responsive adjustments
+@media (max-width: $mobile-breakpoint) {
+  .pa-profile-panel__content {
+    width: 85vw;
+    max-width: $profile-panel-mobile-max-width;
+  }
+
+  .pa-header__profile-name {
+    display: none;
+  }
+}

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

@@ -0,0 +1,41 @@
+// ============================================================================
+// SCROLLBARS
+// Global scrollbar styling for consistent appearance across browsers
+// ============================================================================
+@use '../variables' as *;
+
+/* Webkit browsers (Chrome, Safari, Edge) */
+*::-webkit-scrollbar {
+  width: $scrollbar-width;
+  height: $scrollbar-width;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--pa-primary-bg);
+  border-radius: $scrollbar-border-radius;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: $border-color;
+  border-radius: $scrollbar-border-radius;
+  border: $border-width-base solid var(--pa-primary-bg);
+
+  &:hover {
+    background: $accent-color;
+    border-color: $accent-hover;
+  }
+
+  &:active {
+    background: $accent-hover;
+  }
+}
+
+*::-webkit-scrollbar-corner {
+  background: var(--pa-primary-bg);
+}
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--pa-border-color) var(--pa-primary-bg);
+}

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

@@ -75,7 +75,7 @@
       font-size: $font-size-4xl;
       font-weight: $font-weight-bold;
       color: var(--pa-text-primary);
-      line-height: 1;
+      line-height: 1.1;
       margin-bottom: $spacing-sm;
     }
 
@@ -120,7 +120,7 @@
     .pa-stat__number {
       font-size: clamp($stat-square-number-min, $stat-square-number-scale, $stat-square-number-max);
       font-weight: $font-weight-bold;
-      line-height: 1;
+      line-height: 1.1;
       color: inherit;
       z-index: $focus-outline-width;
       position: relative;
@@ -134,7 +134,7 @@
     .pa-stat__symbol {
       font-size: clamp($stat-square-symbol-min, $stat-square-symbol-scale, $stat-square-symbol-max);
       font-weight: $font-weight-bold;
-      line-height: 1;
+      line-height: 1.1;
       opacity: $stat-symbol-opacity;
       color: inherit;
       position: absolute;

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

@@ -304,7 +304,7 @@
     &--bordered {
       border: $border-width-base solid var(--pa-border-color);
       border-radius: $border-radius-lg;
-      padding: $card-body-padding;
+      padding: $card-body-padding-v $card-body-padding-h;
       background-color: var(--pa-card-bg);
 
       // Remove bottom border from tabs since wrapper has border
@@ -337,7 +337,7 @@
     &--bordered {
       border: $border-width-base solid var(--pa-border-color);
       border-radius: $border-radius-lg;
-      padding: $card-body-padding;
+      padding: $card-body-padding-v $card-body-padding-h;
       background-color: var(--pa-card-bg);
 
       // Add divider between tabs and content (gap already provides spacing)