@inchurch/matcha-theme 21.3.3 → 22.0.0

package/components/matcha-autocomplete.scss

@@ -1,145 +1,145 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-autocomplete.scss — Autocomplete (search field + dropdown options)
-// Aligned with Figma matcha/autocomplete:
-//   Estado(2: Fechado, Aberto) — Uses matcha-field/text + matcha-panel
-// Angular: matcha-autocomplete + [matchaAutocomplete] directive
-// Deps: matcha-panel, matcha-option, matcha-form-field
-// =============================================================================
-
-@mixin matcha-autocomplete-theme($theme) {
-
-  matcha-autocomplete {
-    .matcha-autocomplete-container {
-      padding: 0 var(--matcha-space-150, 12px);
-      margin-top: calc(var(--matcha-space-150, 12px) * -1);
-    }
-  }
-
-  // ── Panel override for autocomplete context ──
-  .matcha-autocomplete-panel {
-    background: var(--matcha-color-surface);
-    border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border);
-    border-radius: var(--matcha-radius-lg, 8px);
-    box-shadow: var(--matcha-shadow-2);
-    overflow: hidden;
-  }
-
-  // ── Option within autocomplete ──
-  .matcha-autocomplete-option {
-    display: flex;
-    align-items: center;
-    gap: var(--matcha-space-100, 8px);
-    padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
-    cursor: pointer;
-    color: var(--matcha-color-fg);
-    font-family: var(--matcha-font-family);
-    font-size: var(--matcha-text-body-md, 14px);
-    line-height: var(--matcha-leading-body-md, 20px);
-    position: relative;
-    overflow: hidden;
-
-    // State layer
-    &::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background: currentColor;
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity var(--matcha-duration-instant, 80ms) linear;
-    }
-
-    &:hover:not([aria-disabled="true"]):not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
-    &:active:not([aria-disabled="true"]):not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
-
-    &:focus-visible {
-      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
-      outline-offset: var(--matcha-state-focus-ring-offset, -2px);
-    }
-
-    // Selected state
-    &[aria-selected="true"],
-    &.matcha-option-selected {
-      background: var(--matcha-color-accent-alpha);
-      font-weight: var(--matcha-weight-medium, 500);
-    }
-
-    // Disabled state
-    &[aria-disabled="true"],
-    &.matcha-option-disabled {
-      opacity: 0.5;
-      cursor: default;
-      pointer-events: none;
-    }
-  }
-
-  // ── Empty state (sem resultado pro filtro atual) ──
-  .matcha-autocomplete-empty {
-    padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
-    text-align: center;
-    color: var(--matcha-color-text-placeholder);
-    font-family: var(--matcha-font-family);
-    font-size: var(--matcha-text-body-md, 14px);
-    line-height: var(--matcha-leading-body-md, 20px);
-    font-style: italic;
-  }
-
-  // ── Clear button ──
-  .matcha-autocomplete-clear-button {
-    color: var(--matcha-color-text-hint);
-    cursor: pointer;
-
-    &:hover {
-      color: var(--matcha-color-fg);
-    }
-
-    &:focus-visible {
-      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
-      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-      border-radius: var(--matcha-radius-sm, 2px);
-    }
-  }
-}
-
-// ── Layout ──────────────────────────────────────────────────────────────────
-
-matcha-autocomplete {
-  display: block;
-  width: 100%;
-}
-
-.matcha-autocomplete-container {
-  position: relative;
-}
-
-// ── Chevron ▾ vs. botão × : dividem o canto direito ───────────────────────────
-// Em matcha-field type="autocomplete" o input recebe matchaClearButton (× genérico)
-// E o chevron ▾ desta diretiva — ambos ancorados à direita. Ao digitar/selecionar,
-// o matchaClearButton adiciona .matcha-clear-button--visible; nesse caso escondemos
-// o chevron pra ele não ficar por baixo do ×. Reage sozinho via :has() (sem tocar a
-// lógica JS, preservando o uso standalone do autocomplete). !important vence o
-// display inline que a diretiva seta no chevron (injetado via Renderer2 — mesmo
-// motivo dos !important em matcha-form-field).
-.matcha-form-field:has(.matcha-clear-button--visible) .matcha-autocomplete-chevron {
-  display: none !important;
-}
-
-// ── Disabled state ──
-.matcha-autocomplete-disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-// ── Reduced motion ──────────────────────────────────────────────────────────
-
-@media (prefers-reduced-motion: reduce) {
-  .matcha-autocomplete-panel {
-    transition: none;
-  }
-
-  .matcha-autocomplete-option::before {
-    transition: none;
-  }
-}
+@use "sass:map";
+
+// =============================================================================
+// matcha-autocomplete.scss — Autocomplete (search field + dropdown options)
+// Aligned with Figma matcha/autocomplete:
+//   Estado(2: Fechado, Aberto) — Uses matcha-field/text + matcha-panel
+// Angular: matcha-autocomplete + [matchaAutocomplete] directive
+// Deps: matcha-panel, matcha-option, matcha-form-field
+// =============================================================================
+
+@mixin matcha-autocomplete-theme($theme) {
+
+  matcha-autocomplete {
+    .matcha-autocomplete-container {
+      padding: 0 var(--matcha-space-150, 12px);
+      margin-top: calc(var(--matcha-space-150, 12px) * -1);
+    }
+  }
+
+  // ── Panel override for autocomplete context ──
+  .matcha-autocomplete-panel {
+    background: var(--matcha-color-surface);
+    border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border);
+    border-radius: var(--matcha-radius-lg, 8px);
+    box-shadow: var(--matcha-shadow-2);
+    overflow: hidden;
+  }
+
+  // ── Option within autocomplete ──
+  .matcha-autocomplete-option {
+    display: flex;
+    align-items: center;
+    gap: var(--matcha-space-100, 8px);
+    padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
+    cursor: pointer;
+    color: var(--matcha-color-fg);
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-body-md, 14px);
+    line-height: var(--matcha-leading-body-md, 20px);
+    position: relative;
+    overflow: hidden;
+
+    // State layer
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: currentColor;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity var(--matcha-duration-instant, 80ms) linear;
+    }
+
+    &:hover:not([aria-disabled="true"]):not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
+    &:active:not([aria-disabled="true"]):not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
+
+    &:focus-visible {
+      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
+      outline-offset: var(--matcha-state-focus-ring-offset, -2px);
+    }
+
+    // Selected state
+    &[aria-selected="true"],
+    &.matcha-option-selected {
+      background: var(--matcha-color-accent-alpha);
+      font-weight: var(--matcha-weight-medium, 500);
+    }
+
+    // Disabled state
+    &[aria-disabled="true"],
+    &.matcha-option-disabled {
+      opacity: 0.5;
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+
+  // ── Empty state (sem resultado pro filtro atual) ──
+  .matcha-autocomplete-empty {
+    padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
+    text-align: center;
+    color: var(--matcha-color-text-placeholder);
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-body-md, 14px);
+    line-height: var(--matcha-leading-body-md, 20px);
+    font-style: italic;
+  }
+
+  // ── Clear button ──
+  .matcha-autocomplete-clear-button {
+    color: var(--matcha-color-text-hint);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--matcha-color-fg);
+    }
+
+    &:focus-visible {
+      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
+      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+      border-radius: var(--matcha-radius-sm, 2px);
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+matcha-autocomplete {
+  display: block;
+  width: 100%;
+}
+
+.matcha-autocomplete-container {
+  position: relative;
+}
+
+// ── Chevron ▾ vs. botão × : dividem o canto direito ───────────────────────────
+// Em matcha-field type="autocomplete" o input recebe matchaClearButton (× genérico)
+// E o chevron ▾ desta diretiva — ambos ancorados à direita. Ao digitar/selecionar,
+// o matchaClearButton adiciona .matcha-clear-button--visible; nesse caso escondemos
+// o chevron pra ele não ficar por baixo do ×. Reage sozinho via :has() (sem tocar a
+// lógica JS, preservando o uso standalone do autocomplete). !important vence o
+// display inline que a diretiva seta no chevron (injetado via Renderer2 — mesmo
+// motivo dos !important em matcha-form-field).
+.matcha-form-field:has(.matcha-clear-button--visible) .matcha-autocomplete-chevron {
+  display: none !important;
+}
+
+// ── Disabled state ──
+.matcha-autocomplete-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+
+@media (prefers-reduced-motion: reduce) {
+  .matcha-autocomplete-panel {
+    transition: none;
+  }
+
+  .matcha-autocomplete-option::before {
+    transition: none;
+  }
+}