@keenmate/pure-admin-core 2.3.1 → 2.3.3

package/snippets/command-palette.html

@@ -20,16 +20,18 @@
     <div class="pa-command-palette__container">
         <!-- Search input -->
         <div class="pa-command-palette__search">
-            <input
-                type="text"
-                class="pa-command-palette__input"
-                id="commandPaletteInput"
-                placeholder="Search products, orders, users... (try /p, /o, /u)"
-                autocomplete="off"
-                spellcheck="false"
-            >
-            <!-- Context label (hidden by default, shown when prefix detected) -->
-            <div class="pa-command-palette__context" id="commandPaletteContext"></div>
+            <div class="pa-command-palette__tokens" id="commandPaletteTokens"></div>
+            <div class="pa-command-palette__input-wrapper">
+                <input
+                    type="text"
+                    class="pa-command-palette__input"
+                    id="commandPaletteInput"
+                    placeholder="Type / for commands, : to search, or just start typing..."
+                    autocomplete="off"
+                    spellcheck="false"
+                >
+                <div class="pa-command-palette__context" id="commandPaletteContext"></div>
+            </div>
         </div>
 
         <!-- Results container -->
@@ -79,7 +81,7 @@
         <div class="pa-command-palette__item-title">MacBook Pro 16"</div>
         <div class="pa-command-palette__item-meta">SKU: MBP-16-001 • $2,499.00</div>
     </div>
-    <div class="pa-command-palette__item-badge">In Stock</div>
+    <span class="pa-badge">In Stock</span>
 </div>
 
 <!-- Active result item -->
@@ -89,7 +91,7 @@
         <div class="pa-command-palette__item-title">iPhone 15 Pro</div>
         <div class="pa-command-palette__item-meta">SKU: IP15P-256 • $999.00</div>
     </div>
-    <div class="pa-command-palette__item-badge">New</div>
+    <span class="pa-badge">New</span>
 </div>
 
 <!-- Result with highlighted search match -->
@@ -99,7 +101,7 @@
         <div class="pa-command-palette__item-title">Air<mark>Pods</mark> Pro</div>
         <div class="pa-command-palette__item-meta">SKU: APP-GEN2 • $249.00</div>
     </div>
-    <div class="pa-command-palette__item-badge">Popular</div>
+    <span class="pa-badge">Popular</span>
 </div>
 
 <!-- Pagination indicator (shown when multiple pages) -->

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

@@ -281,6 +281,7 @@
   --pa-btn-secondary-bg: #{$btn-secondary-bg};
   --pa-btn-secondary-bg-hover: #{$btn-secondary-bg-hover};
   --pa-btn-secondary-text: #{$btn-secondary-text};
+  --pa-btn-secondary-outline-color: #{$btn-secondary-text};
 
   // Success
   --pa-btn-success-bg: #{$btn-success-bg};
@@ -458,6 +459,8 @@
   --pa-command-palette-item-active-bg: #{$command-palette-item-active-bg};
   --pa-command-palette-highlight-bg: #{$command-palette-highlight-bg};
   --pa-command-palette-highlight-text: #{$command-palette-highlight-text};
+  --pa-command-palette-key-bg: #{$subtle-bg};
+  --pa-command-palette-key-text: #{$text-color-1};
 
   // =========================================================================
   // MULTISELECT COLORS
@@ -495,4 +498,11 @@
   --pa-color-7-text: #{$color-7-text};
   --pa-color-8-text: #{$color-8-text};
   --pa-color-9-text: #{$color-9-text};
+
+  // =========================================================================
+  // STRUCTURAL (themeable via CSS variables)
+  // =========================================================================
+  --pa-border-radius-sm: #{$border-radius-sm};
+  --pa-border-radius: #{$border-radius};
+  --pa-border-radius-lg: #{$border-radius-lg};
 }

package/src/scss/_core.scss

@@ -1,121 +1,121 @@
-/* Pure Admin Visual Framework - Core Styles */
-
-// Forward variables so they're available to files that @use this module
-@forward 'variables/index';
-
-// RTL (Right-to-Left) helper mixins
-// Provides mixins for transforms, rotations, and complex positioning in RTL
-@use 'rtl-helpers' as *;
-
-/* ========================================
-   Component Imports
-   Each component is now in its own file for better maintainability
-   ======================================== */
-
-// 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 *;
-
-// Grid system and component layouts
-@use 'core-components/grid' as *;
-
-// Card components
-@use 'core-components/cards' as *;
-
-// Tab components
-@use 'core-components/tabs' as *;
-
-// Statistics components
-@use 'core-components/statistics' as *;
-
-// List components
-@use 'core-components/lists' as *;
-
-// Badge components (standard and composite)
-@use 'core-components/badges' as *;
-
-// Button components
-@use 'core-components/buttons' as *;
-
-// Loader animations
-@use 'core-components/loaders' as *;
-
-// Tooltips and popovers
-@use 'core-components/tooltips' as *;
-
-// Alert components
-@use 'core-components/alerts' as *;
-
-// Callout components (documentation-style)
-@use 'core-components/callouts' as *;
-
-// Form elements
-@use 'core-components/forms' as *;
-
-// Web Components Theme Integration (for @keenmate components)
-@use 'core-components/web-components-theme' as *;
-
-// File selector components
-@use 'core-components/file-selector' as *;
-
-// Checkbox lists
-@use 'core-components/checkbox-lists' as *;
-
-// Table components
-@use 'core-components/tables' as *;
-
-// Filter card (expandable table filters)
-@use 'core-components/filter-card' as *;
-
-// Comparison tables
-@use 'core-components/comparison' as *;
-
-// Code blocks and syntax display
-@use 'core-components/code' as *;
-
-// Pagination and load more
-@use 'core-components/pagers' as *;
-
-// Profile panel
-@use 'core-components/profile' as *;
-
-// Modal windows
-@use 'core-components/modals' as *;
-
-// Toast notifications
-@use 'core-components/toasts' as *;
-
-// Timeline components
-@use 'core-components/timeline' as *;
-
-// Command Palette
-@use 'core-components/command-palette' as *;
-
-// Logic Tree Renderer
-@use 'core-components/logic-tree' as *;
-
-// Notification bell
-@use 'core-components/notifications' as *;
-
-// Popconfirm (anchored confirmation dialogs)
-@use 'core-components/popconfirm' as *;
-
-// Detail Panel
-@use 'core-components/detail-panel' as *;
-
-// Settings Panel
-@use 'core-components/settings-panel' as *;
-
-// Data Display (read-only fields)
-@use 'core-components/data-display' as *;
-
-// Data Visualization (progress bars, rings, gauges, heatmaps, sparklines)
-@use 'core-components/data-viz' as *;
-
-// Utility classes and helpers
-@use 'core-components/utilities' as *;
+/* Pure Admin Visual Framework - Core Styles */
+
+// Forward variables so they're available to files that @use this module
+@forward 'variables/index';
+
+// RTL (Right-to-Left) helper mixins
+// Provides mixins for transforms, rotations, and complex positioning in RTL
+@use 'rtl-helpers' as *;
+
+/* ========================================
+   Component Imports
+   Each component is now in its own file for better maintainability
+   ======================================== */
+
+// 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 *;
+
+// Grid system and component layouts
+@use 'core-components/grid' as *;
+
+// Card components
+@use 'core-components/cards' as *;
+
+// Tab components
+@use 'core-components/tabs' as *;
+
+// Statistics components
+@use 'core-components/statistics' as *;
+
+// List components
+@use 'core-components/lists' as *;
+
+// Badge components (standard and composite)
+@use 'core-components/badges' as *;
+
+// Button components
+@use 'core-components/buttons' as *;
+
+// Loader animations
+@use 'core-components/loaders' as *;
+
+// Tooltips and popovers
+@use 'core-components/tooltips' as *;
+
+// Alert components
+@use 'core-components/alerts' as *;
+
+// Callout components (documentation-style)
+@use 'core-components/callouts' as *;
+
+// Form elements
+@use 'core-components/forms' as *;
+
+// Web Components Theme Integration (for @keenmate components)
+@use 'core-components/web-components-theme' as *;
+
+// File selector components
+@use 'core-components/file-selector' as *;
+
+// Checkbox lists
+@use 'core-components/checkbox-lists' as *;
+
+// Table components
+@use 'core-components/tables' as *;
+
+// Filter card (expandable table filters)
+@use 'core-components/filter-card' as *;
+
+// Comparison tables
+@use 'core-components/comparison' as *;
+
+// Code blocks and syntax display
+@use 'core-components/code' as *;
+
+// Pagination and load more
+@use 'core-components/pagers' as *;
+
+// Profile panel
+@use 'core-components/profile' as *;
+
+// Modal windows
+@use 'core-components/modals' as *;
+
+// Toast notifications
+@use 'core-components/toasts' as *;
+
+// Timeline components
+@use 'core-components/timeline' as *;
+
+// Command Palette
+@use 'core-components/command-palette' as *;
+
+// Logic Tree Renderer
+@use 'core-components/logic-tree' as *;
+
+// Notification bell
+@use 'core-components/notifications' as *;
+
+// Popconfirm (anchored confirmation dialogs)
+@use 'core-components/popconfirm' as *;
+
+// Detail Panel
+@use 'core-components/detail-panel' as *;
+
+// Settings Panel
+@use 'core-components/settings-panel' as *;
+
+// Data Display (read-only fields)
+@use 'core-components/data-display' as *;
+
+// Data Visualization (progress bars, rings, gauges, heatmaps, sparklines)
+@use 'core-components/data-viz' as *;
+
+// Utility classes and helpers
+@use 'core-components/utilities' as *;