@keenmate/pure-admin-core 2.3.2 → 2.3.4

package/README.md

@@ -2,19 +2,18 @@
 
 Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as default.
 
-## What's New in 2.3.2
+## What's New in 2.3.4
+
+- **Command palette home screen & hotkeys** — Opens with categorized commands and search contexts. Alt+D/A/G/T hotkeys jump directly into commands. Global search finds commands alongside data. Form codes for quick `/go` navigation.
+- **Dropdown z-index fix** — Split button menus no longer go under sidebar/header
+
+## What's New in 2.3.3
 
 - **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
 - **Outline-secondary button contrast** — New `--pa-btn-secondary-outline-color` variable, readable on all dark themes
 - **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,67 @@ 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
+
+macOS Spotlight-style search with multi-step commands, context search, and global search. Opens with `Ctrl+K` / `Cmd+K`.
+
+#### Behavior
+
+**Home Screen** — On open, displays a categorized list of available commands (with hotkey badges) and search contexts. Items are clickable. Typing immediately filters or switches to the appropriate mode.
+
+**Three Input Modes:**
+
+| Prefix | Mode | Behavior |
+|--------|------|----------|
+| `/` | Commands | Shows matching commands. Exact match + space enters the command wizard. |
+| `:` | Context search | Shows matching search contexts. Exact match + space enters scoped search with debounced filtering. |
+| (none) | Global search | Searches across all categories (commands, contexts, and data). Results limited to ~3 per category. |
+
+**Multi-step Commands** — Commands define an array of `steps`. Each step has `getOptions(query, previousSelections)` returning filterable options. Steps can be conditional (`shouldShow(selections)`), support free-text entry (`freeText: true`), and have prompts displayed between selections (e.g., "in", "to", "as"). The command's `onComplete(selections)` fires after all steps.
+
+**Fuzzy Matching** — Commands and contexts match on `shortcut`, `aliases`, and `name`. Matching is bidirectional: typing `/d` finds `/deploy`, and typing `/deploy` finds `/d`.
+
+**Form Codes** — Step options can have a `code` property (e.g., `"24"` for Alerts). The `filterOpts` helper matches on `label`, `description`, and exact `code` — enabling quick navigation by numeric codes common in business applications.
+
+**Display Styles:**
+
+- **Inline** — Everything in one input: `/deploy in Production branch main`. The input shows the full command string with prompts and selected values concatenated.
+- **Tokens** — Selections render as `pa-badge` chips in `__tokens` container above the input. Each badge has a `×` remove button to rewind to that step. The input only contains the current step's query. The command shortcut is the first badge.
+
+**Hotkeys** — Commands can define a `hotkey` (e.g., `"Alt+D"`). These work globally (palette closed) and inside the palette (on the home screen). The hotkey opens the palette and enters the command directly, skipping the command list.
+
+**Context Label** — `__context` element shows the active command name (e.g., "Assign to User") or search context (e.g., "Searching in Products"). Positioned inside `__input-wrapper` relative to the input.
+
+**Search Highlighting** — Matching text in result titles is wrapped in `<mark>` elements, styled with `--pa-command-palette-highlight-bg` and `--pa-command-palette-highlight-text`. Highlights persist during keyboard navigation.
+
+**Keyboard:** `↑↓` navigate, `Enter`/`Tab` select (or submit free text), `Esc` close, `Alt+key` command hotkeys.
+
+#### CSS Classes
+
+- `.pa-command-palette` - Base container (`--active` to show)
+- `.pa-command-palette__backdrop` - Overlay backdrop
+- `.pa-command-palette__container` - Modal dialog
+- `.pa-command-palette__search` - Search area (tokens + input-wrapper)
+- `.pa-command-palette__tokens` - Token badges container (hidden when empty via `:empty`)
+- `.pa-command-palette__input-wrapper` - Wraps input + context label (positioning anchor)
+- `.pa-command-palette__input` - Search input
+- `.pa-command-palette__context` - Context label (`--visible` to show)
+- `.pa-command-palette__results` - Scrollable results area (`--loading` for overlay)
+- `.pa-command-palette__home` - Home screen container
+- `.pa-command-palette__home-section` - Section with border-top separator
+- `.pa-command-palette__home-heading` - Uppercase section heading
+- `.pa-command-palette__item` - Result row (`--active` for keyboard highlight)
+- `.pa-command-palette__item-icon` - Item icon
+- `.pa-command-palette__item-content` - Title + subtitle wrapper
+- `.pa-command-palette__item-title` - Title (supports `<mark>` for highlights)
+- `.pa-command-palette__item-meta` - Subtitle/metadata (shows `[code]` prefix when present)
+- `.pa-command-palette__shortcut` - Hotkey badge group (flex container)
+- `.pa-command-palette__key` - Keyboard key badge (themeable via `--pa-command-palette-key-bg/key-text`)
+- `.pa-command-palette__token-prompt` - Step prompt text between token badges
+- `.pa-command-palette__footer` - Keyboard hints bar
+- `.pa-command-palette__empty` - Empty state message
+- `.pa-command-palette__loader` - Loading spinner + text
+
 ### Toasts
 - `.pa-toast` - Base toast
 - `.pa-toast--primary/success/danger/warning/info` - Variants

package/dist/css/main.css

@@ -6230,7 +6230,7 @@ a.pa-card p {
   border: 1px solid var(--pa-border-color);
   border-radius: var(--pa-border-radius);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  z-index: 1000;
+  z-index: 7500;
   display: none;
   flex-direction: column;
   padding: 0.4rem 0;
@@ -7819,7 +7819,7 @@ a.pa-card p {
   border: 1px solid var(--pa-border-color);
   border-radius: var(--pa-border-radius);
   box-shadow: 0 0 80px rgba(0, 0, 0, 0.15);
-  z-index: 1000;
+  z-index: 7500;
   overflow: hidden;
 }
 .pa-btn-split__menu--open {
@@ -8594,7 +8594,7 @@ a.pa-card p {
   border: 1px solid var(--pa-border-color);
   border-radius: var(--pa-border-radius);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  z-index: 1060;
+  z-index: 7600;
 }
 .pa-popover__content[data-show] {
   display: block;
@@ -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,10 +13905,32 @@ 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;
 }
+.pa-command-palette__home {
+  padding: 0.8rem 0;
+}
+.pa-command-palette__home-section:not(:first-child) {
+  border-top: 1px solid var(--pa-border-color);
+  margin-top: 0.4rem;
+  padding-top: 0.4rem;
+}
+.pa-command-palette__home-heading {
+  padding: 0.4rem 0.8rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--pa-text-color-2);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.pa-command-palette__shortcut {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-shrink: 0;
+}
 .pa-command-palette__empty {
   padding: 4.8rem 0.8rem;
   text-align: center;
@@ -13970,14 +14005,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,12 +14020,13 @@ 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;
-  font-weight: 500;
-  font-size: 1rem;
+  font-weight: var(--pa-command-palette-key-font-weight);
+  font-size: var(--pa-command-palette-key-font-size);
   line-height: 1;
 }
 .pa-command-palette__section {
@@ -14117,7 +14145,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 +14218,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.4",
   "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,10 @@
   --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};
+  --pa-command-palette-key-font-size: #{$font-size-xs};
+  --pa-command-palette-key-font-weight: #{$font-weight-semibold};
 
   // =========================================================================
   // 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,13 +149,42 @@
         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;
       }
     }
   }
 
+  // Home screen (idle state)
+  &__home {
+    padding: $spacing-sm 0;
+  }
+
+  &__home-section {
+    &:not(:first-child) {
+      border-top: $border-width-base solid var(--pa-border-color);
+      margin-top: $spacing-xs;
+      padding-top: $spacing-xs;
+    }
+  }
+
+  &__home-heading {
+    padding: $spacing-xs $command-palette-input-padding-h;
+    font-size: $font-size-2xs;
+    font-weight: $font-weight-semibold;
+    color: var(--pa-text-color-2);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  &__shortcut {
+    display: flex;
+    align-items: center;
+    gap: $spacing-xs;
+    flex-shrink: 0;
+  }
+
   // Empty state
   &__empty {
     padding: $command-palette-empty-padding-v $command-palette-input-padding-h;
@@ -231,14 +276,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,12 +295,13 @@
 
   &__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;
-    font-weight: $font-weight-medium;
-    font-size: $font-size-2xs;
+    font-weight: var(--pa-command-palette-key-font-weight);
+    font-size: var(--pa-command-palette-key-font-size);
     line-height: 1;
   }
 
@@ -405,7 +443,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 +524,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);

package/src/scss/variables/_system.scss

@@ -17,8 +17,8 @@ $z-index-toast: 8000 !default;
 $z-index-tooltip: 9000 !default;
 
 // Additional z-index values
-$z-index-dropdown: 1000 !default;
-$z-index-popover: 1060 !default;
+$z-index-dropdown: 7500 !default;
+$z-index-popover: 7600 !default;
 $z-index-loader: 10 !default;
 $z-index-command-palette: 10500 !default;
 $z-index-settings-panel: 10000 !default;