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

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;
     }

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

@@ -336,6 +336,125 @@
         padding-top: $spacing-md;
       }
     }
+
+    // Card variant - tabs act as card header (same height as pa-card__header)
+    &--card {
+      position: relative; // For dropdown positioning
+      border: $card-border-width solid var(--pa-border-color);
+      border-radius: $card-border-radius;
+      background-color: var(--pa-card-bg);
+      box-shadow: $shadow-sm;
+
+      .pa-tabs {
+        height: $card-header-min-height;
+        padding: $card-header-padding-v $card-header-padding-h;
+        background: var(--pa-card-header-bg);
+        border-bottom: $border-width-base solid var(--pa-border-color);
+        box-sizing: border-box;
+        border-top-left-radius: $card-border-radius;
+        border-top-right-radius: $card-border-radius;
+        margin-bottom: 0;
+        align-items: center;
+        gap: $spacing-xs;
+        flex-wrap: nowrap;
+        overflow: visible; // Allow dropdown to overflow
+      }
+
+      .pa-tabs__content {
+        padding: $card-body-padding-v $card-body-padding-h;
+      }
+
+      .pa-tabs__panel {
+        padding-top: 0;
+      }
+
+      // Overflow toggle for tabs that don't fit
+      .pa-tabs__overflow {
+        position: relative;
+        margin-left: auto;
+        flex-shrink: 0;
+      }
+
+      .pa-tabs__overflow-toggle {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: $card-header-min-height;
+        height: 100%;
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: var(--pa-text-secondary);
+        cursor: pointer;
+        transition: all $transition-fast $easing-snappy;
+        border-left: $border-width-base solid var(--pa-border-color);
+        margin: (-$card-header-padding-v) (-$card-header-padding-h) (-$card-header-padding-v) 0;
+        box-sizing: content-box;
+        height: $card-header-min-height;
+
+        &:hover {
+          background-color: rgba($accent-color, $card-tab-hover-opacity);
+          color: var(--pa-text-primary);
+        }
+
+        // When overflow contains the active tab
+        &--has-active {
+          color: var(--pa-accent);
+
+          &::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: $border-width-medium;
+            background: var(--pa-accent);
+          }
+        }
+
+        i {
+          font-size: $font-size-sm;
+        }
+      }
+
+      .pa-tabs__overflow-menu {
+        position: absolute;
+        top: $card-header-min-height;
+        right: 0;
+        min-width: 15rem;
+        background: var(--pa-card-bg);
+        border: $card-border-width solid var(--pa-border-color);
+        border-radius: $border-radius;
+        box-shadow: $shadow-lg;
+        z-index: $z-index-dropdown;
+        display: none;
+        flex-direction: column;
+        padding: $spacing-xs 0;
+
+        &--open {
+          display: flex;
+        }
+
+        .pa-tabs__item {
+          padding: $spacing-sm $spacing-base;
+          border: none;
+          border-bottom: none;
+          border-radius: 0;
+          text-align: left;
+          white-space: nowrap;
+
+          &:hover {
+            background-color: rgba($accent-color, $card-tab-hover-opacity);
+          }
+
+          &--active {
+            background-color: rgba($accent-color, 0.1);
+            border-bottom: none;
+          }
+        }
+      }
+    }
   }
 
   // Vertical tabs layout wrapper (for proper spacing with content)

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

@@ -237,6 +237,29 @@
     border-left-color: var(--pa-btn-danger-bg);
   }
 
+  // Numbered color variants (color-1 through color-9)
+  // These use theme-customizable colors from --pa-color-* CSS variables
+  @for $i from 1 through 9 {
+    &--color-#{$i}::before {
+      background-color: var(--pa-color-#{$i});
+    }
+    &--color-#{$i}::after {
+      border-top-color: var(--pa-color-#{$i});
+    }
+    &--color-#{$i}.pa-tooltip--right::after {
+      border-top-color: transparent;
+      border-right-color: var(--pa-color-#{$i});
+    }
+    &--color-#{$i}.pa-tooltip--bottom::after {
+      border-top-color: transparent;
+      border-bottom-color: var(--pa-color-#{$i});
+    }
+    &--color-#{$i}.pa-tooltip--left::after {
+      border-top-color: transparent;
+      border-left-color: var(--pa-color-#{$i});
+    }
+  }
+
   // Smart positioning - collision detection adjustments
   // Applied dynamically by JavaScript based on viewport boundaries
 
@@ -390,6 +413,7 @@
     font-size: $font-size-sm;
     line-height: $line-height-base;
     color: var(--pa-text-primary);
+    text-align: left; // Reset inherited alignment for rich content
 
     p {
       margin: 0 0 $spacing-sm 0;
@@ -454,6 +478,15 @@
     min-width: $popover-lg-min-width;
     max-width: $popover-lg-max-width;
   }
+
+  // Alignment variants
+  &--center &__body {
+    text-align: center;
+  }
+
+  &--right &__body {
+    text-align: right;
+  }
 }
 
 // ========================================
@@ -500,4 +533,11 @@
     background-color: var(--pa-btn-danger-bg);
     color: var(--pa-btn-danger-text);
   }
+
+  // Numbered color variants (color-1 through color-9)
+  @for $i from 1 through 9 {
+    &.pa-tooltip--color-#{$i} {
+      background-color: var(--pa-color-#{$i});
+    }
+  }
 }

package/src/scss/core-components/forms/_form-inputs.scss

@@ -6,6 +6,7 @@
 
 .pa-input {
   width: 100%;
+  height: #{$base-input-size-md-height}rem;
   padding: $input-padding-v $input-padding-h;
   border: $border-width-base solid var(--pa-border-color);
   border-radius: $border-radius;
@@ -23,6 +24,7 @@
 
 .pa-select {
   width: 100%;
+  height: #{$base-input-size-md-height}rem;
   padding: $select-padding-v $select-padding-h;
   border: $border-width-base solid var(--pa-border-color);
   border-radius: $border-radius;
@@ -61,27 +63,31 @@
   }
 }
 
-// Input Sizes
+// Input Sizes - heights aligned with $base-input-size-* variables
 .pa-input--xs,
 .pa-select--xs {
+  height: #{$base-input-size-xs-height}rem;
   padding: $input-padding-xs-v $input-padding-h;
   font-size: $font-size-xs;
 }
 
 .pa-input--sm,
 .pa-select--sm {
+  height: #{$base-input-size-sm-height}rem;
   padding: $input-padding-v $input-padding-h;
   font-size: $font-size-sm;
 }
 
 .pa-input--lg,
 .pa-select--lg {
+  height: #{$base-input-size-lg-height}rem;
   padding: $input-padding-v $input-padding-h;
   font-size: $font-size-base;
 }
 
 .pa-input--xl,
 .pa-select--xl {
+  height: #{$base-input-size-xl-height}rem;
   padding: $input-padding-v $input-padding-h;
   font-size: $font-size-lg;
 }

package/src/scss/themes/audi-light.scss

@@ -90,7 +90,7 @@ $table-header-bg: $audi-gray-100;
 $table-hover-bg: $audi-gray-50;
 
 // Enable red accent on table row hover (Audi signature detail)
-$table-hover-accent-width: 3px;
+$table-hover-accent-width: 0.3rem;  // 3px in 10px base
 $table-hover-accent-color: $accent-color;
 $table-hover-accent-position: left;
 
@@ -200,6 +200,10 @@ $danger-bg-light: rgba(255, 0, 0, 0.1);
 // Set body font
 $body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
 
+// Card styling - thicker border for Audi design language
+$card-border-width: $border-width-medium;
+$card-border-radius: 0; // Sharp edges
+
 // Import core styles with overridden variables
 @import '../core';
 @import '../utilities';

package/src/scss/themes/audi.scss

@@ -107,7 +107,7 @@ $table-header-bg: $audi-black;
 $table-hover-bg: $audi-gray-light;
 
 // Enable red accent on table row hover (Audi signature detail)
-$table-hover-accent-width: 3px;
+$table-hover-accent-width: 0.3rem;  // 3px in 10px base
 $table-hover-accent-color: $accent-color; // Uses the red #ff0000
 $table-hover-accent-position: left;
 
@@ -220,6 +220,10 @@ $danger-bg-light: rgba(255, 0, 0, 0.25);
 // 4. Override font family SCSS variable after fonts are defined
 $body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
 
+// Card styling - thicker border for Audi design language
+$card-border-width: $border-width-medium;
+$card-border-radius: 0; // Sharp edges
+
 // 5. Import core framework styles (will use all our SCSS variables)
 @import '../core';
 
@@ -256,8 +260,6 @@ $body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
 }
 
 .pa-card {
-  border-radius: 0 !important; // Sharp edges
-  border: $border-width-medium solid $border-color;
   box-shadow: 0 $spacing-xs ($spacing-sm * 2) rgba($audi-black, 0.8);
 }