@inchurch/matcha-theme 20.0.8 → 20.276.0

package/components/matcha-stepper.scss

@@ -1,177 +1,377 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-stepper.scss — Step progress indicator
-// Aligned with Figma matcha/stepper/step:
-//   Estado(4: Completo, Ativo, Pendente, Disabled) × Tamanho(2: SM, MD)
-//   Connector lines between steps via CSS
-// =============================================================================
-
-@mixin matcha-stepper-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
-
-  matcha-stepper {
-    // ── Step indicators ──
-    .step-indicator-completo {
-      background: var(--matcha-color-accent, #{getAccent($theme)});
-      color: var(--matcha-color-accent-contrast, #{getAccentContrast($theme)});
-    }
-
-    .step-indicator-ativo {
-      background: var(--matcha-color-fg, #{getForeground($theme)});
-      color: var(--matcha-color-bg, #{getBackground($theme)});
-    }
-
-    .step-indicator-pendente,
-    .step-indicator-disabled {
-      background: var(--matcha-color-disabled, #{getDisabled($theme)});
-      color: var(--matcha-color-bg, #{getBackground($theme)});
-    }
-
-    // ── Labels ──
-    .step-label-completo {
-      color: var(--matcha-color-accent, #{getAccent($theme)});
-    }
-
-    .step-label-ativo {
-      color: var(--matcha-color-fg, #{getForeground($theme)});
-    }
-
-    .step-label-pendente,
-    .step-label-disabled {
-      color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
-    }
-
-    // ── Connector lines ──
-    .step-connector {
-      background: var(--matcha-color-disabled, #{getDisabled($theme)});
-    }
-
-    .step-connector-complete {
-      background: var(--matcha-color-accent, #{getAccent($theme)});
-    }
-
-    // ── Focus ──
-    .step-item:focus-visible {
-      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
-      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-      border-radius: var(--matcha-radius-md, 4px);
-    }
-  }
-}
-
-// ── Layout ──────────────────────────────────────────────────────────────────
-
-matcha-stepper {
-  display: flex;
-  width: 100%;
-
-  // ── Horizontal (default) ──
-  &:not([orientation="vertical"]) {
-    flex-direction: row;
-    align-items: center;
-    gap: var(--matcha-space-200, 16px);
-  }
-
-  // ── Vertical ──
-  &[orientation="vertical"] {
-    flex-direction: column;
-    gap: var(--matcha-space-200, 16px);
-  }
-}
-
-// ── Step item ──
-.step-item {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-100, 8px);
-  cursor: default;
-  white-space: nowrap;
-
-  &.step-clickable {
-    cursor: pointer;
-  }
-
-  &.step-disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-}
-
-// ── Indicator circle ──
-.step-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  flex-shrink: 0;
-  font-family: var(--matcha-font-family);
-
-  &.step-sm {
-    width: var(--matcha-icon-size-md, 24px);
-    height: var(--matcha-icon-size-md, 24px);
-    font-size: var(--matcha-text-body-md, 14px);
-    font-weight: var(--matcha-weight-regular, 400);
-  }
-
-  &.step-md {
-    width: var(--matcha-space-400, 32px);
-    height: var(--matcha-space-400, 32px);
-    font-size: var(--matcha-text-title-sm, 16px);
-    font-weight: var(--matcha-weight-semibold, 600);
-  }
-
-  matcha-icon {
-    flex-shrink: 0;
-  }
-}
-
-// ── Label ──
-.step-label {
-  font-family: var(--matcha-font-family);
-
-  &.step-sm {
-    font-size: var(--matcha-text-body-md, 14px);
-    line-height: var(--matcha-leading-body-md, 20px);
-    font-weight: var(--matcha-weight-regular, 400);
-  }
-
-  &.step-md {
-    font-size: var(--matcha-text-title-sm, 16px);
-    line-height: var(--matcha-leading-title-sm, 22px);
-    font-weight: var(--matcha-weight-semibold, 600);
-  }
-
-  // Ativo SM gets medium weight
-  .step-item-ativo &.step-sm {
-    font-weight: var(--matcha-weight-medium, 500);
-  }
-}
-
-// ── Connector line ──
-.step-connector {
-  flex: 1;
-  height: var(--matcha-border-thin, 2px);
-  min-width: var(--matcha-space-200, 16px);
-
-  // Vertical connector
-  matcha-stepper[orientation="vertical"] & {
-    width: var(--matcha-border-thin, 2px);
-    height: var(--matcha-space-200, 16px);
-    min-width: auto;
-    flex: none;
-    margin-left: calc(var(--matcha-icon-size-md, 24px) / 2 - 1px);
-  }
-
-  matcha-stepper[orientation="vertical"].step-md & {
-    margin-left: calc(var(--matcha-space-400, 32px) / 2 - 1px);
-  }
-}
-
-// ── Reduced motion ──────────────────────────────────────────────────────────
-@media (prefers-reduced-motion: reduce) {
-  .step-indicator,
-  .step-connector {
-    transition: none;
-  }
-}
+@use "sass:map";
+
+// =============================================================================
+// matcha-stepper.scss — Step progress indicator
+// Aligned with Figma matcha/stepper/step:
+//   Estado(4: Completo, Ativo, Pendente, Disabled) × Tamanho(2: SM, MD)
+//   Connector lines between steps via CSS — fill animation on complete
+// =============================================================================
+
+@mixin matcha-stepper-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  matcha-stepper {
+    // ── Step indicators ──
+    // Completo: círculo verde sólido + matcha-icon messaging-check outlined
+    // (canon Figma DSV3: bola accent atrás, ícone outlined dentro).
+    // matcha-icon NÃO herda `color` do parent — usa `--matcha-icon-color`.
+    .step-indicator-completo {
+      background: var(--matcha-color-accent, #{getAccent($theme)});
+      color: var(--matcha-color-accent-text-on, var(--matcha-color-accent-contrast, #{getAccentContrast($theme)}));
+      --matcha-icon-color: var(--matcha-color-accent-text-on, var(--matcha-color-accent-contrast, #{getAccentContrast($theme)}));
+    }
+
+    .step-indicator-ativo {
+      background: var(--matcha-color-fg, #{getForeground($theme)});
+      color: var(--matcha-color-bg, #{getBackground($theme)});
+    }
+
+    .step-indicator-pendente,
+    .step-indicator-disabled {
+      background: var(--matcha-color-disabled, #{getDisabled($theme)});
+      color: var(--matcha-color-bg, #{getBackground($theme)});
+    }
+
+    // ── Labels ──
+    .step-label-completo {
+      color: var(--matcha-color-accent, #{getAccent($theme)});
+    }
+
+    .step-label-ativo {
+      color: var(--matcha-color-fg, #{getForeground($theme)});
+    }
+
+    .step-label-pendente,
+    .step-label-disabled {
+      color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+    }
+
+    // ── Connector lines (track + fill animation) ──
+    .step-connector {
+      background: var(--matcha-color-disabled, #{getDisabled($theme)});
+
+      // Pseudo "fill" que cresce da esquerda → direita quando step completa.
+      &::before {
+        background: var(--matcha-color-accent, #{getAccent($theme)});
+      }
+    }
+
+    // ── Focus ring polido (offset 4px + halo) ──
+    .step-item:focus-visible {
+      outline: var(--matcha-state-focus-ring-width, 2px) solid
+        var(--matcha-color-accent, #{getAccent($theme)});
+      outline-offset: var(--matcha-state-focus-ring-offset, 4px);
+      border-radius: var(--matcha-radius-md, 8px);
+      box-shadow: 0 0 0 4px rgba(getAccent($theme), 0.16);
+    }
+
+    // ── Spinner color (loading state) — herda accent ──
+    .step-spinner {
+      color: var(--matcha-color-accent, #{getAccent($theme)});
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+matcha-stepper {
+  display: flex;
+  width: 100%;
+
+  // ── Horizontal (default) ──
+  &:not([orientation="vertical"]) {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--matcha-space-200, 16px);
+  }
+
+  // ── Vertical ──
+  &[orientation="vertical"] {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--matcha-space-300, 24px);
+  }
+}
+
+// O controller é flex próprio (canon: layout dos step-items/connectors).
+// Horizontal default · Vertical quando [orientation="vertical"].
+matcha-stepper-controller {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+
+  &[aria-orientation="vertical"] {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  // ── Compact mode (esconde labels, mostra só indicators + connectors) ──
+  // Manual: <matcha-stepper-controller compact>
+  // Auto: viewports <480px via media query abaixo
+  &[compact] .step-label {
+    display: none;
+  }
+}
+
+// ── Step item (button native pra a11y de focus/Enter/Space) ──
+.step-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+  flex-shrink: 0;
+  // Reseta button defaults
+  background: none;
+  border: none;
+  padding: var(--matcha-space-075, 6px) var(--matcha-space-100, 8px);
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: default;
+  white-space: nowrap;
+  border-radius: var(--matcha-radius-md, 8px);
+  transition: background-color 160ms ease, transform 160ms ease;
+
+  &.step-clickable {
+    cursor: pointer;
+
+    &:hover {
+      background: var(--matcha-color-surface-hover, rgba(232, 234, 237, 0.06));
+      transform: translateY(-1px);
+    }
+
+    &:active { transform: scale(0.98); }
+  }
+
+  &.step-disabled,
+  &.step-item-disabled {
+    opacity: var(--matcha-opacity-disabled, 0.4);
+    pointer-events: none;
+  }
+
+  &.step-item-loading {
+    pointer-events: none;
+  }
+}
+
+// ── Indicator circle (com transition de cor pra trocas suaves) ──
+.step-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  flex-shrink: 0;
+  font-family: var(--matcha-font-family);
+  transition:
+    background-color 240ms cubic-bezier(0.4, 0, 0.2, 1),
+    color 240ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &.step-sm {
+    width: var(--matcha-icon-size-md, 24px);
+    height: var(--matcha-icon-size-md, 24px);
+    font-size: var(--matcha-text-body-md, 14px);
+    font-weight: var(--matcha-weight-regular, 400);
+  }
+
+  &.step-md {
+    width: var(--matcha-space-400, 32px);
+    height: var(--matcha-space-400, 32px);
+    font-size: var(--matcha-text-title-sm, 16px);
+    font-weight: var(--matcha-weight-semibold, 600);
+  }
+
+  matcha-icon {
+    flex-shrink: 0;
+  }
+}
+
+// ── Spinner (loading state) ──
+.step-spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  svg {
+    width: 70%;
+    height: 70%;
+    animation: matcha-stepper-spin 800ms linear infinite;
+  }
+}
+
+@keyframes matcha-stepper-spin {
+  to { transform: rotate(360deg); }
+}
+
+// ── Label (com transition pra trocas de cor suaves) ──
+.step-label {
+  font-family: var(--matcha-font-family);
+  transition: color 240ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &.step-sm {
+    font-size: var(--matcha-text-body-md, 14px);
+    line-height: var(--matcha-leading-body-md, 20px);
+    font-weight: var(--matcha-weight-regular, 400);
+  }
+
+  &.step-md {
+    font-size: var(--matcha-text-title-sm, 16px);
+    line-height: var(--matcha-leading-title-sm, 22px);
+    font-weight: var(--matcha-weight-semibold, 600);
+  }
+
+  // Ativo SM gets medium weight
+  .step-item-ativo &.step-sm {
+    font-weight: var(--matcha-weight-medium, 500);
+  }
+}
+
+// ── Connector line (track + animated fill) ──
+//
+// Track: fixed-width line (40px horizontal, 24px vertical) com bg disabled.
+// Fill: ::before pseudo growing scaleX(0→1) quando state complete.
+// Pattern Material 3 / iOS Wizard — feedback de progresso direto.
+.step-connector {
+  flex: 0 0 var(--matcha-space-500, 40px);
+  height: var(--matcha-border-thin, 2px);
+  margin: 0 var(--matcha-space-050, 4px);
+  border-radius: var(--matcha-radius-pill, 9999px);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    transform: scaleX(0);
+    transform-origin: left center;
+    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &.step-connector-complete::before {
+    transform: scaleX(1);
+  }
+
+  // Vertical connector — fill cresce de cima → baixo
+  matcha-stepper[orientation="vertical"] & {
+    width: var(--matcha-border-thin, 2px);
+    height: var(--matcha-space-300, 24px);
+    flex: 0 0 var(--matcha-space-300, 24px);
+    margin: var(--matcha-space-050, 4px) 0 var(--matcha-space-050, 4px)
+      calc(var(--matcha-icon-size-md, 24px) / 2 - 1px);
+
+    &::before {
+      transform: scaleY(0);
+      transform-origin: top center;
+    }
+
+    &.step-connector-complete::before {
+      transform: scaleY(1);
+    }
+  }
+
+  matcha-stepper[orientation="vertical"].step-md & {
+    margin-left: calc(var(--matcha-space-400, 32px) / 2 - 1px);
+  }
+}
+
+// ── Mobile: auto-compact mode em viewports estreitos ────────────────────────
+// Esconde labels (mantém só indicators + connectors) — canon iOS form wizard.
+@media (max-width: 480px) {
+  matcha-stepper-controller:not([aria-orientation="vertical"]) .step-label {
+    display: none;
+  }
+  matcha-stepper:not([orientation="vertical"]) {
+    overflow-x: auto;
+  }
+}
+
+// ── Variant "progress": label inline à esquerda + N botões-pill clicáveis ──
+// Cada botão É o pill (visual + click no mesmo elemento). Tokens canônicos
+// DSV3 idem matcha-progress-bar[type=segmented]: empty=disabled-bg,
+// filled=accent. Compacto, single-line, ideal pra toolbar-actions slot
+// (1-line evita assimetria vertical com title 1-line do toolbar).
+.step-progress {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+}
+
+.step-progress-label {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-sm, 12px);
+  font-weight: var(--matcha-weight-semibold, 600);
+  line-height: var(--matcha-leading-body-sm, 16px);
+  color: var(--matcha-color-text-primary);
+  white-space: nowrap;
+}
+
+.step-progress-bar {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--matcha-space-050, 4px);
+}
+
+// Botão-pill: visual canon DSV3 (8px tall, pill radius, disabled-bg base).
+// Width fixo 32px = consistente entre steps. Cursor pointer. Tokens 1:1
+// com matcha-progress-bar[type=segmented] pra parity visual.
+.step-progress-pill {
+  display: block;
+  width: 32px;
+  height: 8px;
+  padding: 0;
+  border: 0;
+  background: var(--matcha-color-disabled-bg, #282C34);
+  cursor: pointer;
+  border-radius: var(--matcha-radius-pill, 9999px);
+  transition: background var(--matcha-duration-fast, 200ms) ease,
+              transform var(--matcha-duration-fast, 200ms) ease;
+}
+
+// is-filled: step ≤ activeStep (completos + ativo) ficam accent.
+.step-progress-pill.is-filled {
+  background: var(--matcha-color-accent, #009400);
+}
+
+// Hover state: pendentes mostram preview accent com opacity; ativo/completos
+// crescem 1.25× verticalmente pra feedback perceptivel.
+.step-progress-pill:not([disabled]):not(.is-filled):hover {
+  background: var(--matcha-color-accent, #009400);
+  opacity: 0.5;
+}
+
+.step-progress-pill:not([disabled]).is-filled:hover {
+  transform: scaleY(1.25);
+}
+
+.step-progress-pill:not([disabled]):focus-visible {
+  outline: 2px solid var(--matcha-color-accent, #009400);
+  outline-offset: 2px;
+}
+
+.step-progress-pill[disabled] {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+// ── Reduced motion (WCAG 2.2.2) ─────────────────────────────────────────────
+@media (prefers-reduced-motion: reduce) {
+  .step-item,
+  .step-indicator,
+  .step-label,
+  .step-connector,
+  .step-connector::before {
+    transition: none;
+  }
+  .step-spinner svg {
+    animation: none;
+  }
+  .step-item.step-clickable:hover {
+    transform: none;
+  }
+  .step-item.step-clickable:active {
+    transform: none;
+  }
+}