@keenmate/pure-admin-core 2.3.2 → 2.3.3

package/README.md

@@ -2,6 +2,11 @@
 
 Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as default.
 
+## What's New in 2.3.3
+
+- **Command palette rewrite** — Multi-step command wizards (`/deploy`, `/assign`, `/go`, `/theme`), context search (`:p`, `:u`, `:o`), global search, inline/tokens display modes matching keen-pure-admin
+- **Dark theme fixes** — Command palette loading overlay, key badges, and item badges all use CSS variables instead of SCSS defaults stuck on light mode
+
 ## What's New in 2.3.2
 
 - **Themeable border-radius via CSS variables** — All components now use `var(--pa-border-radius)`. Themes override in `:root` (same pattern as colors). Fixes long-standing issue where `@use` module isolation prevented theme control of border-radius
@@ -9,12 +14,6 @@ Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as defau
 - **Split button dropdown rework** — Two-container pattern (`__menu` + `__menu-inner`) matching web-multiselect. New `__item-row` element for rows with action buttons. Container handles `overflow: hidden` + `border-radius`
 - **Removed hover lift** — `translateY(-1px)` removed from buttons and stat cards for consistency
 
-## What's New in 2.3.0
-
-- **Toast action buttons** — New `pa-toast__actions` element for action buttons inside toasts, separated by a border-top. Toast service supports `actions: [{ label, variant, onClick }]` with auto-dismiss on click
-- **Toast service improvements** — `filled`, `progressColor`, and `maxWidth` options. Container width ratchets up to the widest toast shown, preventing layout jitter when toasts dismiss
-- **Toast progress bar** — More visible: 5px height, 0.6 opacity (was 3px / 0.3)
-
 ## Installation
 
 ```bash
@@ -338,6 +337,28 @@ Works with both `pa-table` and `web-grid` component. First/last columns automati
 - `.pa-modal__container--sm/md/lg/xl/xxl` - Sizes
 - `.pa-modal--primary/success/danger/warning` - Themed headers
 
+### Command Palette
+- `.pa-command-palette` - Base container (add `--active` to show)
+- `.pa-command-palette__backdrop` - Overlay backdrop
+- `.pa-command-palette__container` - Modal dialog
+- `.pa-command-palette__search` - Search area (input + tokens + context)
+- `.pa-command-palette__tokens` - Token badges container (for token display mode)
+- `.pa-command-palette__input-wrapper` - Wraps input + context label (positioning anchor)
+- `.pa-command-palette__input` - Search input
+- `.pa-command-palette__context` - Context label (e.g., "Assign to User", "Searching in Products")
+- `.pa-command-palette__results` - Scrollable results area
+- `.pa-command-palette__item` - Result row (`--active` for keyboard-highlighted)
+- `.pa-command-palette__item-icon` - Item icon
+- `.pa-command-palette__item-content` - Title + subtitle wrapper
+- `.pa-command-palette__item-title` - Item title (supports `<mark>` for search highlights)
+- `.pa-command-palette__item-meta` - Subtitle/metadata
+- `.pa-command-palette__preview` - Command step preview text
+- `.pa-command-palette__footer` - Keyboard hints bar
+- `.pa-command-palette__key` - Keyboard shortcut badge
+- `.pa-command-palette__token-prompt` - Step prompt text between token badges
+- **Modes:** `/` commands, `:` context search, plain text global search
+- **Display styles:** Inline (everything in input) or Tokens (selections as badges)
+
 ### Toasts
 - `.pa-toast` - Base toast
 - `.pa-toast--primary/success/danger/warning/info` - Variants

package/dist/css/main.css

@@ -13824,6 +13824,11 @@ code {
   flex-wrap: wrap;
   gap: 0.4rem;
   align-items: center;
+  margin-bottom: 0.8rem;
+}
+.pa-command-palette__tokens:empty {
+  display: none;
+  margin-bottom: 0;
 }
 .pa-command-palette__tokens .pa-badge {
   display: inline-flex;
@@ -13845,6 +13850,14 @@ code {
 .pa-command-palette__tokens .pa-badge__remove:hover {
   opacity: 1;
 }
+.pa-command-palette__token-prompt {
+  font-size: 1.2rem;
+  color: var(--pa-text-color-2);
+  font-style: italic;
+}
+.pa-command-palette__input-wrapper {
+  position: relative;
+}
 .pa-command-palette__input {
   width: 100%;
   height: 3.8rem;
@@ -13867,7 +13880,7 @@ code {
 }
 .pa-command-palette__context {
   position: absolute;
-  inset-inline-end: calc(0.8rem + 0.8rem);
+  inset-inline-end: 0.8rem;
   top: 50%;
   transform: translateY(-50%);
   font-size: 1.2rem;
@@ -13892,7 +13905,7 @@ code {
   content: "";
   position: absolute;
   inset: 0;
-  background-color: rgba(255, 255, 255, 0.7);
+  background-color: color-mix(in srgb, var(--pa-modal-content-bg) 70%, transparent);
   pointer-events: none;
   z-index: 1;
 }
@@ -13970,14 +13983,6 @@ code {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.pa-command-palette__item-badge {
-  flex-shrink: 0;
-  font-size: 1.2rem;
-  padding: 2px 0.4rem;
-  background-color: #e9ecef;
-  color: var(--pa-text-color-2);
-  border-radius: var(--pa-border-radius-sm);
-}
 .pa-command-palette__footer {
   border-top: 1px solid var(--pa-border-color);
   padding: 0.8rem 0.8rem;
@@ -13993,7 +13998,8 @@ code {
 }
 .pa-command-palette__key {
   padding: 2px 0.4rem;
-  background-color: #e9ecef;
+  background-color: var(--pa-command-palette-key-bg);
+  color: var(--pa-command-palette-key-text);
   border: 1px solid var(--pa-border-color);
   border-radius: var(--pa-border-radius-sm);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -14117,7 +14123,7 @@ code {
   font-size: 1rem;
   font-weight: 500;
   color: var(--pa-text-color-2);
-  background-color: #e9ecef;
+  background-color: var(--pa-subtle-bg);
   border: 1px solid var(--pa-border-color);
   border-radius: var(--pa-border-radius-sm);
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
@@ -14190,7 +14196,7 @@ code {
   font-size: 1rem;
   font-weight: 500;
   color: var(--pa-text-color-1);
-  background-color: #e9ecef;
+  background-color: var(--pa-subtle-bg);
   border: 1px solid var(--pa-border-color);
   border-radius: var(--pa-border-radius-sm);
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);

package/package.json

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

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

@@ -459,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

package/src/scss/core-components/_command-palette.scss

@@ -51,6 +51,12 @@
     flex-wrap: wrap;
     gap: $spacing-xs;
     align-items: center;
+    margin-bottom: $spacing-sm;
+
+    &:empty {
+      display: none;
+      margin-bottom: 0;
+    }
 
     .pa-badge {
       display: inline-flex;
@@ -77,6 +83,16 @@
     }
   }
 
+  &__token-prompt {
+    font-size: $font-size-xs;
+    color: var(--pa-text-color-2);
+    font-style: italic;
+  }
+
+  &__input-wrapper {
+    position: relative;
+  }
+
   &__input {
     width: 100%;
     height: $command-palette-input-height;
@@ -100,10 +116,10 @@
     }
   }
 
-  // Context label (e.g., "Searching in Products")
+  // Context label (e.g., "Searching in Products") — positioned relative to input-wrapper
   &__context {
     position: absolute;
-    inset-inline-end: calc(#{$spacing-sm} + #{$command-palette-input-padding-h}); // RTL: flips to left
+    inset-inline-end: $command-palette-input-padding-h; // RTL: flips to left
     top: 50%;
     transform: translateY(-50%);
     font-size: $font-size-xs;
@@ -133,7 +149,7 @@
         content: '';
         position: absolute;
         inset: 0; // RTL: full overlay works in both directions
-        background-color: rgba($modal-content-bg, 0.7);
+        background-color: color-mix(in srgb, var(--pa-modal-content-bg) 70%, transparent);
         pointer-events: none;
         z-index: 1;
       }
@@ -231,14 +247,6 @@
   }
 
   // Item badge (e.g., category, status)
-  &__item-badge {
-    flex-shrink: 0;
-    font-size: $font-size-xs;
-    padding: 2px $spacing-xs;
-    background-color: $secondary-light-bg;
-    color: var(--pa-text-color-2);
-    border-radius: var(--pa-border-radius-sm);
-  }
 
   // Footer with keyboard hints
   &__footer {
@@ -258,7 +266,8 @@
 
   &__key {
     padding: 2px $spacing-xs;
-    background-color: $secondary-light-bg;
+    background-color: var(--pa-command-palette-key-bg);
+    color: var(--pa-command-palette-key-text);
     border: $border-width-base solid var(--pa-border-color);
     border-radius: var(--pa-border-radius-sm);
     font-family: $body-font-family;
@@ -405,7 +414,7 @@
       font-size: $font-size-2xs;
       font-weight: $font-weight-medium;
       color: var(--pa-text-color-2);
-      background-color: $secondary-light-bg;
+      background-color: var(--pa-subtle-bg);
       border: $border-width-base solid var(--pa-border-color);
       border-radius: var(--pa-border-radius-sm);
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
@@ -486,7 +495,7 @@
   font-size: $font-size-2xs;
   font-weight: $font-weight-medium;
   color: var(--pa-text-color-1);
-  background-color: $secondary-light-bg;
+  background-color: var(--pa-subtle-bg);
   border: $border-width-base solid var(--pa-border-color);
   border-radius: var(--pa-border-radius-sm);
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);