@inchurch/matcha-theme 20.0.11 → 20.276.0

package/components/matcha-command-palette.scss

@@ -1,89 +1,317 @@
 @use "sass:map";
 
 // =============================================================================
-// matcha-command-palette.scss — Command Palette (⌘K)
-// Aligned with Figma matcha/command-palette:
-//   Container with 3 slots: search, results, footer-tips
-//   Overlay global, radius 16px
-// Angular: matcha-command-palette
+// matcha-command-palette.scss — Command Palette (⌘K) — 100% tokens DSV3
+//
+// Estrutura (portada pra document.body em runtime via Renderer2):
+//   overlay (fixed, inset:0, blur backdrop, flex center)
+//     └── container (relative, 520px, radius-xl, shadow-4)
+//           ├── search (input + ESC kbd)
+//           ├── divider (hairline)
+//           ├── results listbox (overflow-y, scroll-snap)
+//           │     ├── section header (caption uppercase)
+//           │     ├── result button[role=option]
+//           │     └── matcha-empty-state (compact, slot quando vazio)
+//           └── footer (kbd tips)
+//
+// A11y: combobox + listbox + aria-activedescendant. Focus permanece no input.
 // =============================================================================
 
+// ── Theme (color tokens via mixin pra dark/light) ──────────────────────────
 @mixin matcha-command-palette-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
+    $is-dark: map.get($theme, is-dark);
 
-  .matcha-command-palette {
-    background: var(--matcha-color-surface, #{getSurface($theme)});
-    border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getGrey($theme)});
-    box-shadow: var(--matcha-shadow-4, #{if($is-dark, $shadow-4-dark, $shadow-4-light)});
-    color: var(--matcha-color-fg, #{getForeground($theme)});
-  }
+    .matcha-command-palette {
+        background: var(--matcha-color-surface-card, #{getSurface($theme)});
+        border:     var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, #{getGrey($theme)});
+        box-shadow: var(--matcha-shadow-4);
+        color:      var(--matcha-color-text-primary, #{getForeground($theme)});
 
-  .matcha-command-palette-search {
-    border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getGrey($theme)});
+        &__search-icon {
+            color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
+        }
 
-    input {
-      color: var(--matcha-color-fg, #{getForeground($theme)});
+        &__input {
+            color: var(--matcha-color-text-primary, #{getForeground($theme)});
+            &::placeholder { color: var(--matcha-color-text-placeholder, #{getGrey($theme)}); }
+        }
 
-      &::placeholder {
-        color: var(--matcha-color-text-placeholder, #{getGrey($theme)});
-      }
+        // __divider: cor/bg gerenciados pelo matcha-divider canônico.
+
+        &__section {
+            color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
+        }
+
+        &__result {
+            color: var(--matcha-color-text-primary, #{getForeground($theme)});
+
+            &-icon { color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)}); }
+
+            &:hover:not(:disabled) {
+                background: var(--matcha-color-surface-hover, #{getBackgroundAlpha($theme)});
+            }
+
+            &--selected {
+                background: var(--matcha-color-accent-alpha);
+
+                .matcha-command-palette__result-icon { color: var(--matcha-color-accent); }
+            }
+
+            &:disabled { color: var(--matcha-color-text-disabled, #{getGrey($theme)}); }
+        }
+
+        &__shortcut,
+        &__esc-hint,
+        &__footer kbd {
+            background:    var(--matcha-color-surface-inner, #{getBackgroundAlpha($theme)});
+            border-color:  var(--matcha-color-surface-border, #{getGrey($theme)});
+            color:         var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
+        }
+
+        &__footer {
+            background:    var(--matcha-color-surface-inner, #{getBackgroundAlpha($theme)});
+            color:         var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
+            border-top:    var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, #{getGrey($theme)});
+        }
     }
-  }
+}
 
-  .matcha-command-palette-footer {
-    background: var(--matcha-color-surface-hover, #{getBackgroundAlpha($theme)});
-    color: var(--matcha-color-text-hint, #{getBlueGrey($theme)});
-  }
+// ── Host (não usa display:contents pra não interferir com Renderer2) ───────
+.matcha-command-palette-host {
+    display: contents;
 }
 
-// ── Layout ──────────────────────────────────────────────────────────────────
+// ── Overlay (full-viewport, único position:fixed) ──────────────────────────
+// Portado pra document.body em runtime — sem risco de containing-block trap.
+// Flexbox CENTRA container vertical + horizontalmente no viewport (canon Spotlight/Linear).
+.matcha-command-palette-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--matcha-z-overlay, 1000);
+    background: var(--matcha-color-scrim, rgba(0, 0, 0, 0.5));
+    backdrop-filter: blur(var(--matcha-scrim-modal-blur, 4px));
+    -webkit-backdrop-filter: blur(var(--matcha-scrim-modal-blur, 4px));
 
-.matcha-command-palette {
-  display: flex;
-  flex-direction: column;
-  width: 520px;
-  max-height: 400px;
-  border-radius: var(--matcha-radius-xl, 16px);
-  overflow: hidden;
+    display: flex;
+    align-items: center;       // centra verticalmente no viewport
+    justify-content: center;   // centra horizontalmente no viewport
+    padding: var(--matcha-space-200, 16px);
+    box-sizing: border-box;
+
+    animation: matcha-cmd-overlay-in var(--matcha-duration-fast, 200ms) ease-out;
+
+    &.is-closing {
+        animation: matcha-cmd-overlay-out var(--matcha-duration-fast, 180ms) ease-in forwards;
+    }
 }
 
-.matcha-command-palette-search {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-150, 12px);
-  padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
-  min-height: 52px;
-
-  input {
-    flex: 1;
-    border: none;
-    background: transparent;
+// ── Container (520px, radius-xl, shadow-4) — relative dentro do overlay ───
+// Dimensões via CSS custom properties (escopo do componente) — permitem override
+// em theme dark/light ou via [style.--matcha-command-palette-width].
+.matcha-command-palette {
+    --matcha-command-palette-width:      520px;
+    --matcha-command-palette-max-height: 480px;
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: min(var(--matcha-command-palette-width), 100%);
+    max-height: min(70vh, var(--matcha-command-palette-max-height));
+    border-radius: var(--matcha-radius-xl, 16px);
+    overflow: hidden;
     font-family: var(--matcha-font-family);
-    font-size: var(--matcha-text-body-md, 14px);
-    line-height: var(--matcha-leading-body-md, 20px);
-    outline: none;
-  }
-}
 
-.matcha-command-palette-results {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--matcha-space-100, 8px);
+    animation: matcha-cmd-in var(--matcha-duration-fast, 200ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
+
+    &.is-closing {
+        animation: matcha-cmd-out var(--matcha-duration-fast, 180ms) var(--matcha-easing-accelerated, cubic-bezier(0.4, 0, 1, 1)) forwards;
+    }
+
+    // ── Search ────────────────────────────────────────────────────────────
+    &__search {
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-150, 12px);
+        padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
+        min-height: var(--matcha-control-size-md, 52px);
+        flex-shrink: 0;
+    }
+
+    &__search-icon {
+        flex-shrink: 0;
+        font-size: var(--matcha-icon-size-sm, 16px);
+    }
+
+    &__input {
+        flex: 1;
+        min-width: 0;
+        border: 0;
+        background: transparent;
+        outline: 0;
+        font-family: var(--matcha-font-family);
+        font-size: var(--matcha-text-body-md, 14px);
+        line-height: var(--matcha-leading-body-md, 20px);
+    }
+
+    &__esc-hint {
+        flex-shrink: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--matcha-space-025, 2px) var(--matcha-space-075, 6px);
+        font-family: var(--matcha-font-family);
+        font-size: var(--matcha-text-p-tiny, 11px);
+        line-height: var(--matcha-leading-p-tiny, 14px);
+        font-weight: var(--matcha-weight-medium, 500);
+        letter-spacing: var(--matcha-letter-spacing-wider, 1px);
+        border: var(--matcha-border-hairline, 1px) solid;
+        border-radius: var(--matcha-radius-md, 4px);
+    }
+
+    // ── Divider (matcha-divider canônico — só ajuste de flex-shrink no parent flex) ──
+    &__divider {
+        flex-shrink: 0;
+    }
+
+    // ── Results ────────────────────────────────────────────────────────────
+    &__results {
+        flex: 1 1 auto;
+        overflow-y: auto;
+        padding: var(--matcha-space-100, 8px);
+        scroll-behavior: smooth;
+        scrollbar-width: thin;
+
+        // Quando há matcha-empty-state, centra ele no espaço disponível.
+        &:has(.matcha-command-palette__empty) {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: var(--matcha-space-300, 24px);
+        }
+    }
+
+    &__section {
+        padding: var(--matcha-space-150, 12px) var(--matcha-space-150, 12px) var(--matcha-space-050, 4px);
+        font-size: var(--matcha-text-p-tiny, 11px);
+        line-height: var(--matcha-leading-p-tiny, 14px);
+        font-weight: var(--matcha-weight-semibold, 600);
+        text-transform: uppercase;
+        letter-spacing: var(--matcha-letter-spacing-wider, 1px);
+    }
+
+    // ── Result (button[role=option]) ──────────────────────────────────────
+    &__result {
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-150, 12px);
+        width: 100%;
+        padding: var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
+        min-height: var(--matcha-control-size-sm, 36px);
+        border: 0;
+        background: transparent;
+        border-radius: var(--matcha-radius-md, 4px);
+        cursor: pointer;
+        text-align: start;
+        font-family: var(--matcha-font-family);
+        font-size: var(--matcha-text-body-md, 14px);
+        line-height: var(--matcha-leading-body-md, 20px);
+        transition: background var(--matcha-duration-instant, 80ms) ease;
+
+        &:disabled { cursor: not-allowed; }
+
+        &--selected { font-weight: var(--matcha-weight-medium, 500); }
+
+        &-icon {
+            flex-shrink: 0;
+            font-size: var(--matcha-icon-size-sm, 16px);
+        }
+
+        &-label {
+            flex: 1;
+            min-width: 0;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+    }
+
+    // ── Shortcut + kbd (compartilham token base) ──────────────────────────
+    &__shortcut,
+    &__footer kbd {
+        flex-shrink: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: var(--matcha-space-300, 24px);
+        height: var(--matcha-space-250, 20px);
+        padding: 0 var(--matcha-space-075, 6px);
+        font-family: var(--matcha-font-family);
+        font-size: var(--matcha-text-p-tiny, 11px);
+        line-height: var(--matcha-leading-p-tiny, 14px);
+        font-weight: var(--matcha-weight-medium, 500);
+        border: var(--matcha-border-hairline, 1px) solid;
+        border-radius: var(--matcha-radius-sm, 2px);
+    }
+
+    // ── Empty (matcha-empty-state slot) ───────────────────────────────────
+    &__empty {
+        width: 100%;
+    }
+
+    // ── Footer (kbd tips) ─────────────────────────────────────────────────
+    &__footer {
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-200, 16px);
+        padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
+        min-height: var(--matcha-space-450, 38px);
+        flex-shrink: 0;
+        font-size: var(--matcha-text-p-tiny, 11px);
+        line-height: var(--matcha-leading-p-tiny, 14px);
+    }
+
+    &__footer-tip {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--matcha-space-075, 6px);
+    }
 }
 
-.matcha-command-palette-footer {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-200, 16px);
-  padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
-  font-size: var(--matcha-text-caption, 11px);
-  min-height: 38px;
+// ── Animations ──────────────────────────────────────────────────────────────
+@keyframes matcha-cmd-overlay-in {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+@keyframes matcha-cmd-overlay-out {
+    from { opacity: 1; }
+    to   { opacity: 0; }
+}
+@keyframes matcha-cmd-in {
+    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
+    to   { opacity: 1; transform: translateY(0)    scale(1); }
+}
+@keyframes matcha-cmd-out {
+    from { opacity: 1; transform: translateY(0)    scale(1); }
+    to   { opacity: 0; transform: translateY(-8px) scale(0.96); }
 }
 
 // ── Reduced motion ──────────────────────────────────────────────────────────
-
 @media (prefers-reduced-motion: reduce) {
-  .matcha-command-palette {
-    transition: none;
-  }
+    .matcha-command-palette,
+    .matcha-command-palette-overlay {
+        animation: none !important;
+    }
+}
+
+// ── Forced colors (Windows High Contrast) ──────────────────────────────────
+@media (forced-colors: active) {
+    .matcha-command-palette {
+        border: var(--matcha-border-thin, 1px) solid CanvasText;
+
+        &__result--selected {
+            background: Highlight;
+            color: HighlightText;
+            forced-color-adjust: none;
+        }
+    }
 }