@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-option.scss

@@ -1,170 +1,170 @@
-// =============================================================================
-// matcha-option.scss — Item selecionável (dropdowns, menus, drawer)
-// Aligned with Figma DSV3 matcha/option (7 estados, tokenized accent)
-// Node: 14237:113
-// =============================================================================
-
-// ── Structural (outside mixin) ──────────────────────────────────────────────
-
-.matcha-option {
-  // Figma matcha/option: pad 12/16, gap 16, min-height 48
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-200, 16px);
-  padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
-  min-height: var(--matcha-option-height, 48px);
-  box-sizing: border-box;
-  cursor: pointer;
-  border-radius: var(--matcha-radius-md, 4px);
-  margin: var(--matcha-space-025, 2px) var(--matcha-space-050, 4px);
-  transition:
-    background-color var(--matcha-duration-instant, 80ms) ease,
-    box-shadow var(--matcha-duration-instant, 80ms) ease;
-
-  // Touch: força click imediato (sem aguardar 300ms de double-tap) e impede
-  // o browser de interpretar tap leve como scroll dentro de containers com
-  // overflow-y: auto (dropdowns, command-palette, autocomplete results).
-  // Sem isso, click em touchscreen e DevTools touch-emulation às vezes não
-  // chega no @HostListener('click') da matcha-option.
-  touch-action: manipulation;
-
-  // Disabled — pointer/cursor only
-  &[aria-disabled="true"],
-  &[disabled],
-  &.matcha-option-disabled {
-    pointer-events: none;
-    cursor: default;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-
-// ── Theme mixin ─────────────────────────────────────────────────────────────
-
-@mixin matcha-option-theme($theme) {
-  .matcha-option {
-    color: var(--matcha-color-text-primary);
-    background: transparent;
-
-    // ── Hover (não selected) — state-layer/hover 8% ──
-    &:hover:not([aria-disabled="true"]):not([disabled]):not(.matcha-option-disabled):not([aria-selected="true"]) {
-      background: color-mix(
-        in srgb,
-        var(--matcha-color-state-layer-fg) calc(var(--matcha-state-layer-hover, 0.08) * 100%),
-        transparent
-      );
-    }
-
-    // ── Selected — accent/alpha ──
-    &[aria-selected="true"] {
-      background: var(--matcha-color-accent-alpha);
-      font-weight: var(--matcha-weight-medium, 500);
-
-      // Hover sobre selected — accent/surface-hover (mais opaco)
-      &:hover:not([aria-disabled="true"]) {
-        background: var(--matcha-color-accent-surface-hover);
-      }
-    }
-
-    // ── Danger ──
-    &.matcha-option--danger {
-      color: var(--matcha-color-danger);
-
-      &:hover:not([aria-disabled="true"]) {
-        background: var(--matcha-color-danger-surface-hover);
-      }
-    }
-
-    // ── Disabled — Figma DSV3 matcha/option: opacity 0.5 (não 0.38 do token global) ──
-    // O componente Figma especifica 0.5 explicitamente — visualmente mais leve do que
-    // 0.38 do --matcha-opacity-disabled (Material 3 default). Mantemos fidelidade ao Figma.
-    &[aria-disabled="true"],
-    &[disabled],
-    &.matcha-option-disabled {
-      color: var(--matcha-color-interaction-disabled-fg);
-      opacity: var(--matcha-opacity-option-disabled, 0.5);
-      background: transparent;
-    }
-
-    // ── Focused — border 2px primary/default (Figma DSV3) sem deslocar layout ──
-    // outline-offset negativo simula border interno sem afetar box-sizing.
-    &:focus-visible:not([aria-disabled="true"]):not([disabled]):not(.matcha-option-disabled) {
-      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-primary);
-      outline-offset: calc(-1 * var(--matcha-state-focus-ring-width, 2px));
-    }
-
-    // ── Keyboard highlight (cursor de navegação, orthogonal a selected) ──
-    // Aplicado pelo matcha-select ao navegar com ArrowUp/Down.
-    &.matcha-option-highlighted:not([aria-disabled="true"]):not([disabled]) {
-      background: color-mix(
-        in srgb,
-        var(--matcha-color-state-layer-fg) calc(var(--matcha-state-layer-hover, 0.08) * 100%),
-        transparent
-      );
-
-      // Combinado com selected: mantém tint accent + leve intensificação
-      &[aria-selected="true"] {
-        background: var(--matcha-color-accent-surface-hover);
-      }
-    }
-
-    // ── Modo múltiplo (matcha-select-multiple) — checkbox à esquerda ──
-    // O realce do item marcado é o próprio checkbox; por isso o fundo
-    // accent/alpha do single-select é neutralizado quando não há hover/cursor.
-    &.matcha-option-multiple {
-      gap: var(--matcha-space-100, 8px);
-
-      &[aria-selected="true"]:not(:hover):not(.matcha-option-highlighted) {
-        background: transparent;
-      }
-
-      .matcha-option-checkbox {
-        display: inline-flex;
-        align-items: center;
-        // Checkbox é puramente visual: o clique cai no host matcha-option,
-        // que faz o toggle (tanto na opção quanto sobre o checkbox).
-        pointer-events: none;
-      }
-    }
-  }
-}
-
-// ── Forced colors ──
-@media (forced-colors: active) {
-    matcha-option {
-        color: CanvasText !important;
-
-        &:hover:not(.is-disabled):not([disabled]) {
-            background: SelectedItem !important;
-            color: SelectedItemText !important;
-        }
-
-        &.is-active,
-        &[active],
-        &[aria-selected="true"] {
-            background: Highlight !important;
-            color: HighlightText !important;
-        }
-
-        &:focus-visible {
-            outline: 2px solid CanvasText !important;
-            outline-offset: -2px;
-        }
-
-        &.is-disabled,
-        &[disabled] {
-            color: GrayText !important;
-        }
-    }
-}
-
-// ── Print ──
-// Options são parte de UI interativa — não renderizam em papel.
-@media print {
-    matcha-option {
-        display: none !important;
-    }
-}
+// =============================================================================
+// matcha-option.scss — Item selecionável (dropdowns, menus, drawer)
+// Aligned with Figma DSV3 matcha/option (7 estados, tokenized accent)
+// Node: 14237:113
+// =============================================================================
+
+// ── Structural (outside mixin) ──────────────────────────────────────────────
+
+.matcha-option {
+  // Figma matcha/option: pad 12/16, gap 16, min-height 48
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-200, 16px);
+  padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
+  min-height: var(--matcha-option-height, 48px);
+  box-sizing: border-box;
+  cursor: pointer;
+  border-radius: var(--matcha-radius-md, 4px);
+  margin: var(--matcha-space-025, 2px) var(--matcha-space-050, 4px);
+  transition:
+    background-color var(--matcha-duration-instant, 80ms) ease,
+    box-shadow var(--matcha-duration-instant, 80ms) ease;
+
+  // Touch: força click imediato (sem aguardar 300ms de double-tap) e impede
+  // o browser de interpretar tap leve como scroll dentro de containers com
+  // overflow-y: auto (dropdowns, command-palette, autocomplete results).
+  // Sem isso, click em touchscreen e DevTools touch-emulation às vezes não
+  // chega no @HostListener('click') da matcha-option.
+  touch-action: manipulation;
+
+  // Disabled — pointer/cursor only
+  &[aria-disabled="true"],
+  &[disabled],
+  &.matcha-option-disabled {
+    pointer-events: none;
+    cursor: default;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+// ── Theme mixin ─────────────────────────────────────────────────────────────
+
+@mixin matcha-option-theme($theme) {
+  .matcha-option {
+    color: var(--matcha-color-text-primary);
+    background: transparent;
+
+    // ── Hover (não selected) — state-layer/hover 8% ──
+    &:hover:not([aria-disabled="true"]):not([disabled]):not(.matcha-option-disabled):not([aria-selected="true"]) {
+      background: color-mix(
+        in srgb,
+        var(--matcha-color-state-layer-fg) calc(var(--matcha-state-layer-hover, 0.08) * 100%),
+        transparent
+      );
+    }
+
+    // ── Selected — accent/alpha ──
+    &[aria-selected="true"] {
+      background: var(--matcha-color-accent-alpha);
+      font-weight: var(--matcha-weight-medium, 500);
+
+      // Hover sobre selected — accent/surface-hover (mais opaco)
+      &:hover:not([aria-disabled="true"]) {
+        background: var(--matcha-color-accent-surface-hover);
+      }
+    }
+
+    // ── Danger ──
+    &.matcha-option--danger {
+      color: var(--matcha-color-danger);
+
+      &:hover:not([aria-disabled="true"]) {
+        background: var(--matcha-color-danger-surface-hover);
+      }
+    }
+
+    // ── Disabled — Figma DSV3 matcha/option: opacity 0.5 (não 0.38 do token global) ──
+    // O componente Figma especifica 0.5 explicitamente — visualmente mais leve do que
+    // 0.38 do --matcha-opacity-disabled (Material 3 default). Mantemos fidelidade ao Figma.
+    &[aria-disabled="true"],
+    &[disabled],
+    &.matcha-option-disabled {
+      color: var(--matcha-color-interaction-disabled-fg);
+      opacity: var(--matcha-opacity-option-disabled, 0.5);
+      background: transparent;
+    }
+
+    // ── Focused — border 2px primary/default (Figma DSV3) sem deslocar layout ──
+    // outline-offset negativo simula border interno sem afetar box-sizing.
+    &:focus-visible:not([aria-disabled="true"]):not([disabled]):not(.matcha-option-disabled) {
+      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-primary);
+      outline-offset: calc(-1 * var(--matcha-state-focus-ring-width, 2px));
+    }
+
+    // ── Keyboard highlight (cursor de navegação, orthogonal a selected) ──
+    // Aplicado pelo matcha-select ao navegar com ArrowUp/Down.
+    &.matcha-option-highlighted:not([aria-disabled="true"]):not([disabled]) {
+      background: color-mix(
+        in srgb,
+        var(--matcha-color-state-layer-fg) calc(var(--matcha-state-layer-hover, 0.08) * 100%),
+        transparent
+      );
+
+      // Combinado com selected: mantém tint accent + leve intensificação
+      &[aria-selected="true"] {
+        background: var(--matcha-color-accent-surface-hover);
+      }
+    }
+
+    // ── Modo múltiplo (matcha-select-multiple) — checkbox à esquerda ──
+    // O realce do item marcado é o próprio checkbox; por isso o fundo
+    // accent/alpha do single-select é neutralizado quando não há hover/cursor.
+    &.matcha-option-multiple {
+      gap: var(--matcha-space-100, 8px);
+
+      &[aria-selected="true"]:not(:hover):not(.matcha-option-highlighted) {
+        background: transparent;
+      }
+
+      .matcha-option-checkbox {
+        display: inline-flex;
+        align-items: center;
+        // Checkbox é puramente visual: o clique cai no host matcha-option,
+        // que faz o toggle (tanto na opção quanto sobre o checkbox).
+        pointer-events: none;
+      }
+    }
+  }
+}
+
+// ── Forced colors ──
+@media (forced-colors: active) {
+    matcha-option {
+        color: CanvasText !important;
+
+        &:hover:not(.is-disabled):not([disabled]) {
+            background: SelectedItem !important;
+            color: SelectedItemText !important;
+        }
+
+        &.is-active,
+        &[active],
+        &[aria-selected="true"] {
+            background: Highlight !important;
+            color: HighlightText !important;
+        }
+
+        &:focus-visible {
+            outline: 2px solid CanvasText !important;
+            outline-offset: -2px;
+        }
+
+        &.is-disabled,
+        &[disabled] {
+            color: GrayText !important;
+        }
+    }
+}
+
+// ── Print ──
+// Options são parte de UI interativa — não renderizam em papel.
+@media print {
+    matcha-option {
+        display: none !important;
+    }
+}