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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "1.0.0-rc02",
+  "version": "1.0.0-rc04",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {

package/snippets/badges.html

@@ -73,18 +73,19 @@
 
 
 <!-- FIXED WIDTH BADGES -->
+<!-- Use wr-*/minwr-*/maxwr-* utilities with text-truncate for ellipsis -->
 
-<!-- Fixed Width 5x -->
-<span class="pa-badge pa-badge--primary pa-badge--w-5x">Status</span>
+<!-- Fixed Width 8rem -->
+<span class="pa-badge pa-badge--primary minwr-8 maxwr-8 text-truncate">Status</span>
 
-<!-- Fixed Width 8x with Ellipsis -->
+<!-- Fixed Width 15rem with Ellipsis -->
 <span class="pa-tooltip pa-tooltip--bottom" data-tooltip="Very Long Badge Text That Needs Truncation">
-  <span class="pa-badge pa-badge--info pa-badge--w-8x">Very Long Badge Text That Needs Truncation</span>
+  <span class="pa-badge pa-badge--info minwr-15 maxwr-15 text-truncate">Very Long Badge Text That Needs Truncation</span>
 </span>
 
 <!-- Fixed Width with Left Ellipsis (for paths, breadcrumbs) -->
 <span class="pa-tooltip pa-tooltip--bottom pa-tooltip--multiline" data-tooltip="Settings > User Preferences > Notifications > Email">
-  <span class="pa-badge pa-badge--secondary pa-badge--w-6x pa-badge--ellipsis-left">Settings > User Preferences > Notifications > Email</span>
+  <span class="pa-badge pa-badge--secondary minwr-10 maxwr-10 text-truncate pa-badge--ellipsis-left">Settings > User Preferences > Notifications > Email</span>
 </span>
 
 
@@ -185,8 +186,8 @@ SIZES:
 
 MODIFIERS:
 - .pa-badge--pill: Rounded pill shape
-- .pa-badge--w-1x through .pa-badge--w-10x: Fixed widths (1rem to 10rem)
 - .pa-badge--ellipsis-left: Truncate from left instead of right
+- Use utilities for fixed width: minwr-* maxwr-* text-truncate
 
 ELEMENTS:
 - .pa-badge__icon: Icon container inside badge

package/snippets/buttons.html

@@ -108,23 +108,24 @@
 
 
 <!-- BUTTON GROUP GAP VARIANTS -->
+<!-- Use gap-* utility classes to adjust spacing -->
 
-<!-- Compact Gap (tight spacing) -->
-<div class="pa-btn-group pa-btn-group--compact">
+<!-- Compact Gap (2px) -->
+<div class="pa-btn-group gap-2">
   <button class="pa-btn pa-btn--primary">A</button>
   <button class="pa-btn pa-btn--primary">B</button>
   <button class="pa-btn pa-btn--primary">C</button>
 </div>
 
-<!-- Default Gap -->
+<!-- Default Gap (3px) -->
 <div class="pa-btn-group">
   <button class="pa-btn pa-btn--primary">A</button>
   <button class="pa-btn pa-btn--primary">B</button>
   <button class="pa-btn pa-btn--primary">C</button>
 </div>
 
-<!-- Loose Gap (spacious) -->
-<div class="pa-btn-group pa-btn-group--loose">
+<!-- Loose Gap (8px) -->
+<div class="pa-btn-group gap-8">
   <button class="pa-btn pa-btn--primary">A</button>
   <button class="pa-btn pa-btn--primary">B</button>
   <button class="pa-btn pa-btn--primary">C</button>
@@ -233,15 +234,16 @@
 
 
 <!-- FIXED WIDTH BUTTONS -->
+<!-- Use minwr-* utilities for min-width in rem -->
 
-<!-- Fixed Width 6x -->
-<button class="pa-btn pa-btn--primary pa-btn--w-6x">
+<!-- Fixed Width 6rem -->
+<button class="pa-btn pa-btn--primary minwr-6">
   <span class="pa-btn__icon">✓</span>
   OK
 </button>
 
-<!-- Fixed Width 8x -->
-<button class="pa-btn pa-btn--success pa-btn--w-8x">
+<!-- Fixed Width 8rem -->
+<button class="pa-btn pa-btn--success minwr-8">
   <span class="pa-btn__icon">→</span>
   Continue
 </button>
@@ -250,25 +252,25 @@
 <!-- BUTTON ALIGNMENT -->
 
 <!-- Left Aligned (icon flush to left) -->
-<button class="pa-btn pa-btn--primary pa-btn--w-8x pa-btn--align-left">
+<button class="pa-btn pa-btn--primary minwr-8 pa-btn--align-left">
   <span class="pa-btn__icon">✓</span>
   Save
 </button>
 
 <!-- Right Aligned (icon flush to right) -->
-<button class="pa-btn pa-btn--primary pa-btn--w-8x pa-btn--align-right">
+<button class="pa-btn pa-btn--primary minwr-8 pa-btn--align-right">
   Save
   <span class="pa-btn__icon">✓</span>
 </button>
 
 <!-- Center Aligned -->
-<button class="pa-btn pa-btn--primary pa-btn--w-8x pa-btn--align-center">
+<button class="pa-btn pa-btn--primary minwr-8 pa-btn--align-center">
   <span class="pa-btn__icon">✓</span>
   Save
 </button>
 
 <!-- Justified (space-between) -->
-<button class="pa-btn pa-btn--primary pa-btn--w-8x pa-btn--align-justify">
+<button class="pa-btn pa-btn--primary minwr-8 pa-btn--align-justify">
   <span class="pa-btn__icon">✓</span>
   Save
 </button>

package/snippets/callouts.html

@@ -0,0 +1,129 @@
+<!-- ========================================
+   Callout Components
+   Documentation-style callouts with left border accent
+   ======================================== -->
+
+<!-- BASIC CALLOUTS -->
+
+<!-- Info Callout -->
+<div class="pa-callout pa-callout--info">
+  <strong>Note:</strong> This is an informational callout for documentation tips and notes.
+</div>
+
+<!-- Success Callout -->
+<div class="pa-callout pa-callout--success">
+  <strong>Success:</strong> Operation completed successfully. Your changes have been saved.
+</div>
+
+<!-- Warning Callout -->
+<div class="pa-callout pa-callout--warning">
+  <strong>Warning:</strong> This action cannot be undone. Please proceed with caution.
+</div>
+
+<!-- Danger Callout -->
+<div class="pa-callout pa-callout--danger">
+  <strong>Important:</strong> This feature is deprecated and will be removed in the next version.
+</div>
+
+<!-- Primary Callout -->
+<div class="pa-callout pa-callout--primary">
+  <strong>Pro Tip:</strong> You can use keyboard shortcuts to speed up your workflow.
+</div>
+
+<!-- Secondary Callout -->
+<div class="pa-callout pa-callout--secondary">
+  <strong>Note:</strong> This is a secondary callout with neutral styling.
+</div>
+
+<!-- ========================================
+   CALLOUTS WITH ICONS
+   ======================================== -->
+
+<!-- Info with Icon -->
+<div class="pa-callout pa-callout--info">
+  <span class="pa-callout__icon">💡</span>
+  <div class="pa-callout__content">
+    <div class="pa-callout__heading">Did you know?</div>
+    <p>You can hover over any element to see its tooltip. Tooltips provide additional context without cluttering the interface.</p>
+  </div>
+</div>
+
+<!-- Warning with Icon -->
+<div class="pa-callout pa-callout--warning">
+  <span class="pa-callout__icon">⚠️</span>
+  <div class="pa-callout__content">
+    <div class="pa-callout__heading">Breaking Change</div>
+    <p>The <code>getData()</code> method now returns a Promise. Update your code to use <code>await</code> or <code>.then()</code>.</p>
+  </div>
+</div>
+
+<!-- Danger with Icon -->
+<div class="pa-callout pa-callout--danger">
+  <span class="pa-callout__icon">🚨</span>
+  <div class="pa-callout__content">
+    <div class="pa-callout__heading">Security Notice</div>
+    <p>Never commit API keys or secrets to version control. Use environment variables instead.</p>
+  </div>
+</div>
+
+<!-- Success with Icon -->
+<div class="pa-callout pa-callout--success">
+  <span class="pa-callout__icon">✅</span>
+  <div class="pa-callout__content">
+    <div class="pa-callout__heading">Best Practice</div>
+    <p>Always validate user input on both client and server side for maximum security.</p>
+  </div>
+</div>
+
+<!-- ========================================
+   CALLOUT SIZES
+   ======================================== -->
+
+<!-- Small Callout -->
+<div class="pa-callout pa-callout--info pa-callout--sm">
+  <strong>Note:</strong> This is a small callout for compact spaces.
+</div>
+
+<!-- Default Callout -->
+<div class="pa-callout pa-callout--info">
+  <strong>Note:</strong> This is a default-sized callout.
+</div>
+
+<!-- Large Callout -->
+<div class="pa-callout pa-callout--info pa-callout--lg">
+  <strong>Note:</strong> This is a large callout for prominent notices.
+</div>
+
+<!-- ========================================
+   CALLOUTS WITH LISTS
+   ======================================== -->
+
+<!-- Callout with Unordered List -->
+<div class="pa-callout pa-callout--info">
+  <div class="pa-callout__heading">Requirements</div>
+  <ul>
+    <li>Node.js version 16 or higher</li>
+    <li>npm version 8 or higher</li>
+    <li>A modern web browser</li>
+  </ul>
+</div>
+
+<!-- Callout with Ordered List -->
+<div class="pa-callout pa-callout--warning">
+  <div class="pa-callout__heading">Migration Steps</div>
+  <ol>
+    <li>Backup your database</li>
+    <li>Update dependencies with <code>npm update</code></li>
+    <li>Run migrations with <code>npm run migrate</code></li>
+    <li>Verify the application starts correctly</li>
+  </ol>
+</div>
+
+<!-- ========================================
+   CALLOUTS WITH CODE
+   ======================================== -->
+
+<!-- Callout with Inline Code -->
+<div class="pa-callout pa-callout--primary">
+  <strong>Tip:</strong> Use <code>console.table()</code> instead of <code>console.log()</code> for arrays and objects to get a nicely formatted table output.
+</div>

package/snippets/profile.html

@@ -25,6 +25,7 @@
      ================================ -->
 
 <!-- Complete Profile Panel (place before closing </body> tag) -->
+<!-- Note: Use title attributes on name/email for tooltips when text may be truncated -->
 <div class="pa-profile-panel" id="profilePanel">
     <div class="pa-profile-panel__overlay" onclick="closeProfilePanel()"></div>
     <div class="pa-profile-panel__content">
@@ -33,8 +34,8 @@
                 <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>
+                <h3 class="pa-profile-panel__name" title="John Doe">John Doe</h3>
+                <p class="pa-profile-panel__email" title="john.doe@company.com">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">
@@ -81,6 +82,112 @@
 </div>
 
 
+<!-- ================================
+     PROFILE PANEL - WITH FIXED FOOTER
+     Actions fixed at bottom, content scrolls above
+     ================================ -->
+
+<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" title="John Doe">John Doe</h3>
+                <p class="pa-profile-panel__email" title="john.doe@company.com">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>
+
+        <div class="pa-profile-panel__body">
+            <!-- Body content scrolls -->
+            <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>
+            <!-- NO __actions here - they go in __footer -->
+        </div>
+
+        <!-- Fixed footer - always visible at bottom -->
+        <div class="pa-profile-panel__footer">
+            <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>
+</div>
+
+
+<!-- ================================
+     PROFILE PANEL - NO AVATAR (CORPORATE)
+     For apps without user photos
+     ================================ -->
+
+<!-- Profile Panel without avatar (for corporate apps that don't have user photos) -->
+<!-- Add --no-avatar modifier to header to hide the avatar -->
+<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 pa-profile-panel__header--no-avatar">
+            <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" title="John Doe">John Doe</h3>
+                <p class="pa-profile-panel__email" title="john.doe@company.com">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>
+
+        <div class="pa-profile-panel__body">
+            <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="#logout" class="pa-profile-panel__nav-item">
+                        <span class="pa-profile-panel__nav-icon">🚪</span>
+                        Sign Out
+                    </a></li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+</div>
+
+
 <!-- ================================
      PROFILE PANEL - WITH TABS (PROFILE + FAVORITES)
      ================================ -->
@@ -383,11 +490,12 @@ PROFILE PANEL STRUCTURE:
 
 PANEL HEADER:
 - .pa-profile-panel__header - Header container
+- .pa-profile-panel__header--no-avatar - Modifier to hide avatar (for corporate apps)
 - .pa-profile-panel__avatar - Avatar container
 - .pa-profile-panel__avatar-icon - Avatar icon/image
 - .pa-profile-panel__info - User info container
-- .pa-profile-panel__name - User name
-- .pa-profile-panel__email - User email
+- .pa-profile-panel__name - User name (truncates with ellipsis, add title for tooltip)
+- .pa-profile-panel__email - User email (truncates with ellipsis, add title for tooltip)
 - .pa-profile-panel__role - User role badge
 - .pa-profile-panel__close - Close button
 
@@ -398,11 +506,12 @@ PANEL TABS (optional):
 - [data-profile-panel] - Tab panel attribute
 
 PANEL BODY:
-- .pa-profile-panel__body - Body container
+- .pa-profile-panel__body - Body container (scrollable)
 - .pa-profile-panel__nav - Navigation menu
 - .pa-profile-panel__nav-item - Navigation link
 - .pa-profile-panel__nav-icon - Navigation icon
-- .pa-profile-panel__actions - Action buttons container
+- .pa-profile-panel__actions - Action buttons (inside body, scrolls with content)
+- .pa-profile-panel__footer - Fixed footer (outside body, always visible at bottom)
 
 FAVORITES SECTION:
 - .pa-profile-panel__favorites - Favorites container

package/snippets/tabs.html

@@ -149,6 +149,39 @@
 </div>
 
 
+<!-- BORDER TOP TABS -->
+
+<!-- Border Top Tabs - active indicator on top instead of bottom -->
+<div class="pa-tabs pa-tabs--border-top">
+  <button class="pa-tabs__item pa-tabs__item--active">Profile</button>
+  <button class="pa-tabs__item">Favorites</button>
+  <button class="pa-tabs__item">Settings</button>
+</div>
+<div class="pa-tabs__content">
+  <div class="pa-tabs__panel pa-tabs__panel--active" id="border-top-1">
+    Profile content
+  </div>
+  <div class="pa-tabs__panel" id="border-top-2">
+    Favorites content
+  </div>
+  <div class="pa-tabs__panel" id="border-top-3">
+    Settings content
+  </div>
+</div>
+
+<!-- Border Top + Full Width (profile panel style) -->
+<div class="pa-tabs pa-tabs--border-top pa-tabs--full">
+  <button class="pa-tabs__item pa-tabs__item--active">
+    <i class="fa-solid fa-user"></i>
+    <span>Profile</span>
+  </button>
+  <button class="pa-tabs__item">
+    <i class="fa-solid fa-star"></i>
+    <span>Favorites</span>
+  </button>
+</div>
+
+
 <!-- VERTICAL TABS -->
 
 <!-- Vertical Tabs with Icons (use vertical layout wrapper) -->
@@ -539,13 +572,13 @@
 <!-- Vertical Icon-Only Tabs (use vertical layout wrapper, centered for icon-only, square 3x3) -->
 <div class="pa-tabs__vertical-layout">
   <div class="pa-tabs pa-tabs--vertical pa-tabs--centered">
-    <button class="pa-tabs__item pa-tabs__item--w-3x pa-tabs__item--h-3x pa-tabs__item--active pa-tooltip" data-tooltip="Home">
+    <button class="pa-tabs__item minwr-3 minhr-3 pa-tabs__item--active pa-tooltip" data-tooltip="Home">
       <i class="fa-solid fa-house"></i>
     </button>
-    <button class="pa-tabs__item pa-tabs__item--w-3x pa-tabs__item--h-3x pa-tooltip" data-tooltip="Profile">
+    <button class="pa-tabs__item minwr-3 minhr-3 pa-tooltip" data-tooltip="Profile">
       <i class="fa-solid fa-user"></i>
     </button>
-    <button class="pa-tabs__item pa-tabs__item--w-3x pa-tabs__item--h-3x pa-tooltip" data-tooltip="Messages">
+    <button class="pa-tabs__item minwr-3 minhr-3 pa-tooltip" data-tooltip="Messages">
       <i class="fa-solid fa-envelope"></i>
     </button>
   </div>
@@ -564,12 +597,13 @@
 
 
 <!-- FIXED WIDTH TABS -->
+<!-- Use minwr-* utilities for min-width in rem -->
 
 <!-- Fixed Width Tab Items (6rem each) -->
 <div class="pa-tabs">
-  <button class="pa-tabs__item pa-tabs__item--w-6x pa-tabs__item--active">View</button>
-  <button class="pa-tabs__item pa-tabs__item--w-6x">Edit</button>
-  <button class="pa-tabs__item pa-tabs__item--w-6x">Delete</button>
+  <button class="pa-tabs__item minwr-6 pa-tabs__item--active">View</button>
+  <button class="pa-tabs__item minwr-6">Edit</button>
+  <button class="pa-tabs__item minwr-6">Delete</button>
 </div>
 <div class="pa-tabs__content">
   <div class="pa-tabs__panel pa-tabs__panel--active" id="fixed-1">
@@ -585,15 +619,15 @@
 
 <!-- Fixed Width with Icons (8rem each) -->
 <div class="pa-tabs">
-  <button class="pa-tabs__item pa-tabs__item--w-8x pa-tabs__item--active">
+  <button class="pa-tabs__item minwr-8 pa-tabs__item--active">
     <i class="fa-solid fa-chart-line"></i>
     <span>Dashboard</span>
   </button>
-  <button class="pa-tabs__item pa-tabs__item--w-8x">
+  <button class="pa-tabs__item minwr-8">
     <i class="fa-solid fa-chart-bar"></i>
     <span>Analytics</span>
   </button>
-  <button class="pa-tabs__item pa-tabs__item--w-8x">
+  <button class="pa-tabs__item minwr-8">
     <i class="fa-solid fa-file-lines"></i>
     <span>Reports</span>
   </button>
@@ -893,16 +927,12 @@ SIZES:
 - (no class) (default size)
 - pa-tabs--lg (large tabs with generous padding)
 
-FIXED WIDTH (for individual tab items):
-- pa-tabs__item--w-1x through pa-tabs__item--w-10x (1rem to 10rem min-width)
-- Examples: pa-tabs__item--w-6x (6rem), pa-tabs__item--w-8x (8rem)
+FIXED WIDTH/HEIGHT (use utility classes):
+- minwr-1 through minwr-25 (min-width in rem)
+- minhr-1 through minhr-25 (min-height in rem)
+- Examples: minwr-6 (6rem), minwr-8 (8rem), minhr-3 (3rem)
 - Use for consistent tab sizing across navigation
 
-FIXED HEIGHT (for individual tab items):
-- pa-tabs__item--h-1x through pa-tabs__item--h-10x (1rem to 10rem min-height)
-- Examples: pa-tabs__item--h-3x (3rem), pa-tabs__item--h-4x (4rem)
-- Useful for vertical tabs with consistent heights
-
 LAYOUT WRAPPERS:
 - pa-tabs__container (wrapper for horizontal tabs + content)
   - pa-tabs__container--bordered (card-like border around entire tabs system)

package/snippets/tooltips.html

@@ -154,7 +154,7 @@
 
 <!-- Badge with Truncated Text and Tooltip -->
 <span class="pa-tooltip pa-tooltip--bottom" data-tooltip="Very Long Badge Text That Needs Truncation">
-  <span class="pa-badge pa-badge--info pa-badge--w-8x">Very Long Badge Text That Needs Truncation</span>
+  <span class="pa-badge pa-badge--info minwr-8 maxwr-8 text-truncate">Very Long Badge Text That Needs Truncation</span>
 </span>
 
 

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

@@ -405,4 +405,18 @@
   --pa-multiselect-option-hover-bg: #{$multiselect-option-hover-bg};
   --pa-multiselect-pill-bg: #{$multiselect-pill-bg};
   --pa-multiselect-pill-border: #{$multiselect-pill-border};
+
+  // =========================================================================
+  // CUSTOM THEME COLORS (1-9)
+  // Themes can override $color-1 through $color-9 to define branded colors
+  // =========================================================================
+  --pa-color-1: #{$color-1};
+  --pa-color-2: #{$color-2};
+  --pa-color-3: #{$color-3};
+  --pa-color-4: #{$color-4};
+  --pa-color-5: #{$color-5};
+  --pa-color-6: #{$color-6};
+  --pa-color-7: #{$color-7};
+  --pa-color-8: #{$color-8};
+  --pa-color-9: #{$color-9};
 }

package/src/scss/_core.scss

@@ -47,6 +47,9 @@
 // Alert components
 @use 'core-components/alerts' as *;
 
+// Callout components (documentation-style)
+@use 'core-components/callouts' as *;
+
 // Form elements
 @use 'core-components/forms' as *;
 

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

@@ -48,25 +48,21 @@
   &--xs {
     padding: $btn-padding-xs-v $btn-padding-xs-h;
     font-size: $font-size-xs;
-    min-height: 2.8rem; // Enforce consistent height
   }
 
   &--sm {
     padding: $btn-padding-sm-v $btn-padding-sm-h;
     font-size: $font-size-sm;
-    min-height: 3.2rem; // Enforce consistent height (~32px)
   }
 
   &--lg {
     padding: $btn-padding-lg-v $btn-padding-lg-h;
     font-size: $font-size-base;
-    min-height: 4rem; // Enforce consistent height
   }
 
   &--xl {
     padding: $btn-padding-xl-v $btn-padding-xl-h;
     font-size: $font-size-lg;
-    min-height: 4.4rem; // Enforce consistent height
   }
 
   // Button variants (colors)
@@ -324,47 +320,6 @@
     }
   }
 
-  // Fixed width buttons - multipliers of 1rem
-  &--w-1x {
-    min-width: $spinner-size;
-  }
-
-  &--w-2x {
-    min-width: $btn-width-2x;
-  }
-
-  &--w-3x {
-    min-width: $btn-width-3x;
-  }
-
-  &--w-4x {
-    min-width: $btn-width-4x;
-  }
-
-  &--w-5x {
-    min-width: $btn-width-5x;
-  }
-
-  &--w-6x {
-    min-width: $btn-width-6x;
-  }
-
-  &--w-7x {
-    min-width: $btn-width-7x;
-  }
-
-  &--w-8x {
-    min-width: $btn-width-8x;
-  }
-
-  &--w-9x {
-    min-width: $btn-width-9x;
-  }
-
-  &--w-10x {
-    min-width: $btn-width-10x;
-  }
-
   // Content alignment modifiers (position content within button)
   // Button always keeps its horizontal padding (0.75rem on both sides)
   // These classes control content position and remove icon padding on aligned sides
@@ -410,15 +365,6 @@
   flex-wrap: wrap;
   align-items: center;
 
-  // === Gap Size Variants ===
-  &--compact {
-    gap: $btn-group-gap-compact;
-  }
-
-  &--loose {
-    gap: $btn-group-gap-loose;
-  }
-
   // === Direction Variants ===
   &--vertical {
     flex-direction: column;