@inchurch/matcha-theme 21.3.3 → 22.0.0

package/components/matcha-command-palette.scss

@@ -1,316 +1,316 @@
-@use "sass:map";
-
-// =============================================================================
-// 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) {
-
-    .matcha-command-palette {
-        background: var(--matcha-color-surface-card);
-        border:     var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
-        box-shadow: var(--matcha-shadow-4);
-        color:      var(--matcha-color-text-primary);
-
-        &__search-icon {
-            color: var(--matcha-color-text-secondary);
-        }
-
-        &__input {
-            color: var(--matcha-color-text-primary);
-            &::placeholder { color: var(--matcha-color-text-placeholder); }
-        }
-
-        // __divider: cor/bg gerenciados pelo matcha-divider canônico.
-
-        &__section {
-            color: var(--matcha-color-text-secondary);
-        }
-
-        &__result {
-            color: var(--matcha-color-text-primary);
-
-            &-icon { color: var(--matcha-color-text-secondary); }
-
-            &:hover:not(:disabled) {
-                background: var(--matcha-color-surface-hover);
-            }
-
-            &--selected {
-                background: var(--matcha-color-accent-alpha);
-
-                .matcha-command-palette__result-icon { color: var(--matcha-color-accent); }
-            }
-
-            &:disabled { color: var(--matcha-color-text-disabled, var(--matcha-color-text-muted)); }
-        }
-
-        &__shortcut,
-        &__esc-hint,
-        &__footer kbd {
-            background:    var(--matcha-color-surface-inner);
-            border-color:  var(--matcha-color-surface-border);
-            color:         var(--matcha-color-text-secondary);
-        }
-
-        &__footer {
-            background:    var(--matcha-color-surface-inner);
-            color:         var(--matcha-color-text-secondary);
-            border-top:    var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
-        }
-    }
-}
-
-// ── Host (não usa display:contents pra não interferir com Renderer2) ───────
-.matcha-command-palette-host {
-    display: contents;
-}
-
-// ── 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));
-
-    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;
-    }
-}
-
-// ── 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);
-
-    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);
-    }
-}
-
-// ── 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,
-    .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;
-        }
-    }
-}
+@use "sass:map";
+
+// =============================================================================
+// 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) {
+
+    .matcha-command-palette {
+        background: var(--matcha-color-surface-card);
+        border:     var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
+        box-shadow: var(--matcha-shadow-4);
+        color:      var(--matcha-color-text-primary);
+
+        &__search-icon {
+            color: var(--matcha-color-text-secondary);
+        }
+
+        &__input {
+            color: var(--matcha-color-text-primary);
+            &::placeholder { color: var(--matcha-color-text-placeholder); }
+        }
+
+        // __divider: cor/bg gerenciados pelo matcha-divider canônico.
+
+        &__section {
+            color: var(--matcha-color-text-secondary);
+        }
+
+        &__result {
+            color: var(--matcha-color-text-primary);
+
+            &-icon { color: var(--matcha-color-text-secondary); }
+
+            &:hover:not(:disabled) {
+                background: var(--matcha-color-surface-hover);
+            }
+
+            &--selected {
+                background: var(--matcha-color-accent-alpha);
+
+                .matcha-command-palette__result-icon { color: var(--matcha-color-accent); }
+            }
+
+            &:disabled { color: var(--matcha-color-text-disabled, var(--matcha-color-text-muted)); }
+        }
+
+        &__shortcut,
+        &__esc-hint,
+        &__footer kbd {
+            background:    var(--matcha-color-surface-inner);
+            border-color:  var(--matcha-color-surface-border);
+            color:         var(--matcha-color-text-secondary);
+        }
+
+        &__footer {
+            background:    var(--matcha-color-surface-inner);
+            color:         var(--matcha-color-text-secondary);
+            border-top:    var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
+        }
+    }
+}
+
+// ── Host (não usa display:contents pra não interferir com Renderer2) ───────
+.matcha-command-palette-host {
+    display: contents;
+}
+
+// ── 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));
+
+    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;
+    }
+}
+
+// ── 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);
+
+    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);
+    }
+}
+
+// ── 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,
+    .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;
+        }
+    }
+}