@inchurch/matcha-theme 22.40.1 → 22.40.2

package/components/matcha-crop.scss

@@ -1,419 +1,419 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-crop.scss — Image cropper (Tier 1 + Tier 2 gold)
-//
-// Estrutura:
-//   .matcha-crop                       — host flex column (data-state, data-shape, data-ratio, data-stage)
-//   .matcha-crop__header               — title + toolbar (reset, lock)
-//   .matcha-crop__canvas               — image stage + interaction surface
-//   .matcha-crop__image                — source img (transforma via translate/scale)
-//   .matcha-crop__overlay              — punch-out mask via clip-path
-//   .matcha-crop__area                 — crop frame draggable + 8 handles
-//   .matcha-crop__handle--{nw|n|ne|...} — resize handles (44×44 touch target)
-//   .matcha-crop__zoom-bar             — slider de zoom
-//   .matcha-crop__state                — empty / loading / error visuals
-//   .matcha-crop__footer               — ng-content de actions
-// =============================================================================
-
-@mixin matcha-crop-theme($theme) {
-
-  .matcha-crop {
-    color: var(--matcha-color-text-primary);
-
-    .matcha-crop__header {
-      color: var(--matcha-color-text-primary);
-      border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
-    }
-
-    .matcha-crop__canvas {
-      background: var(--matcha-color-surface-inverse, #121212);
-    }
-
-    // Stage claro (data-stage="light", vindo do componente: stage='light' ou 'auto' com
-    // imagem com alfa). O surface-inverse é pra foto opaca; uma assinatura PNG de traço
-    // escuro sobre transparente sumia nele (IN-42580). Xadrez sutil sobre surface-card:
-    // evidencia a transparência sem competir com a imagem. O scrim fora do frame segue igual.
-    &[data-stage="light"] .matcha-crop__canvas {
-      background-color: var(--matcha-color-surface-card, #ffffff);
-      background-image: repeating-conic-gradient(
-        var(--matcha-color-surface-hover, rgba(0, 0, 0, 0.06)) 0 25%,
-        transparent 0 50%
-      );
-      background-size: 16px 16px;
-    }
-
-    .matcha-crop__overlay {
-      background: var(--matcha-color-scrim, rgba(0, 0, 0, 0.55));
-    }
-
-    .matcha-crop__area {
-      border: var(--matcha-border-thin, 2px) solid var(--matcha-color-accent);
-      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
-
-      &:focus-visible {
-        outline: 3px solid var(--matcha-color-focus-ring);
-        outline-offset: 4px;
-      }
-    }
-
-    .matcha-crop__grid-line {
-      background: var(--matcha-color-on-overlay, rgba(255, 255, 255, 0.3));
-    }
-
-    .matcha-crop__handle {
-      background: var(--matcha-color-surface);
-      border-color: var(--matcha-color-accent);
-    }
-
-    .matcha-crop__zoom-bar {
-      background: var(--matcha-color-surface-card);
-      border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
-      color: var(--matcha-color-text-secondary);
-    }
-
-    .matcha-crop__icon-btn {
-      color: var(--matcha-color-text-secondary);
-
-      &:hover { background: var(--matcha-color-surface-hover); color: var(--matcha-color-text-primary); }
-      &:focus-visible { outline: 2px solid var(--matcha-color-focus-ring); outline-offset: 2px; }
-      &.is-active { color: var(--matcha-color-accent); background: var(--matcha-color-accent-surface-hover); }
-    }
-
-    .matcha-crop__state-icon { color: var(--matcha-color-text-muted); }
-    .matcha-crop__state-title { color: var(--matcha-color-text-primary); }
-    .matcha-crop__state-desc  { color: var(--matcha-color-text-secondary); }
-
-    .matcha-crop__state--error .matcha-crop__state-icon { color: var(--matcha-color-danger); }
-  }
-}
-
-// ── Layout ──────────────────────────────────────────────────────────────────
-
-.matcha-crop {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  min-height: 320px;
-}
-
-// ── Header ──────────────────────────────────────────────────────────────────
-
-.matcha-crop__header {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-100, 8px);
-  padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-title-sm, 16px);
-  font-weight: var(--matcha-weight-semibold, 600);
-  line-height: var(--matcha-leading-title-sm, 22px);
-  flex-shrink: 0;
-}
-
-.matcha-crop__title {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.matcha-crop__toolbar {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-050, 4px);
-}
-
-.matcha-crop__icon-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  background: transparent;
-  border: 0;
-  border-radius: var(--matcha-radius-md, 4px);
-  cursor: pointer;
-  transition: background 150ms ease, color 150ms ease;
-}
-
-// ── Canvas (interaction area) ──────────────────────────────────────────────
-
-.matcha-crop__canvas {
-  position: relative;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  min-height: 320px;
-  cursor: grab;
-  user-select: none;
-
-  &.is-interacting { cursor: grabbing; }
-}
-
-// `width/height: 100%` + `object-fit: contain` é o pareamento correto: força o
-// IMG box a ocupar o canvas inteiro (mesmo pra natural < container), com o
-// conteúdo escalado preservando aspect ratio. `max-width/height` causava bug
-// em fotos menores que o canvas (ex: thumbnail 80×80 num modal 432×320): o
-// browser não upscala via max-*, mas o JS calculava displayRatio = container/
-// natural > 1 assumindo upscale, fazendo o mapeamento display→source ficar
-// deslocado e o crop sair errado.
-.matcha-crop__image {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  user-select: none;
-  -webkit-user-drag: none;
-  pointer-events: none;
-  transform-origin: center center;
-  will-change: transform;
-  transition: transform 80ms ease-out;
-}
-
-// ── Overlay (punch-out via clip-path) ───────────────────────────────────────
-
-.matcha-crop__overlay {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  transition: clip-path 80ms ease-out;
-}
-
-// ── Crop area ───────────────────────────────────────────────────────────────
-
-.matcha-crop__area {
-  position: absolute;
-  box-sizing: border-box;
-  cursor: move;
-  touch-action: none;
-
-  &--circle {
-    border-radius: 50%;
-  }
-}
-
-// Posicionado ACIMA da área de crop em vez do centro. Quando shape=circle,
-// o texto do centro era cruzado pelo border (visualmente parecia cortado).
-// Acima fica em zona de overlay escurecido, sempre legível.
-.matcha-crop__hint {
-  position: absolute;
-  bottom: calc(100% + var(--matcha-space-100, 8px));
-  left: 50%;
-  transform: translateX(-50%);
-  padding: var(--matcha-space-050, 4px) var(--matcha-space-100, 8px);
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.85);
-  background: rgba(0, 0, 0, 0.7);
-  border-radius: var(--matcha-radius-sm, 2px);
-  pointer-events: none;
-  white-space: nowrap;
-}
-
-// ── Rule of thirds grid (mostra só durante interação) ──────────────────────
-
-.matcha-crop__grid {
-  position: absolute;
-  inset: 0;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: 1fr 1fr 1fr;
-  pointer-events: none;
-}
-
-.matcha-crop__grid-line {
-  &:nth-child(1) { grid-column: 2; grid-row: 1 / 4; width: 1px; justify-self: start; }
-  &:nth-child(2) { grid-column: 3; grid-row: 1 / 4; width: 1px; justify-self: start; }
-  &:nth-child(3) { grid-column: 1 / 4; grid-row: 2; height: 1px; align-self: start; }
-  &:nth-child(4) { grid-column: 1 / 4; grid-row: 3; height: 1px; align-self: start; }
-}
-
-// ── Resize handles (8 directions, 44×44 touch target) ──────────────────────
-
-.matcha-crop__handle {
-  position: absolute;
-  width: var(--matcha-crop-handle-size, 16px);
-  height: var(--matcha-crop-handle-size, 16px);
-  margin: calc(-1 * var(--matcha-crop-handle-size, 16px) / 2);
-  padding: 0;
-  background: transparent;
-  border: var(--matcha-border-thin, 2px) solid transparent;
-  border-radius: 50%;
-  pointer-events: auto;
-  z-index: 2;
-  touch-action: none;
-
-  // Expand touch target via ::after (visual = 16px, hit = 44px)
-  &::after {
-    content: '';
-    position: absolute;
-    inset: -14px;
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--matcha-color-focus-ring);
-    outline-offset: 2px;
-  }
-}
-
-// ── Zoom bar ────────────────────────────────────────────────────────────────
-
-.matcha-crop__zoom-bar {
-  position: absolute;
-  bottom: var(--matcha-space-200, 16px);
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-100, 8px);
-  padding: var(--matcha-space-075, 6px) var(--matcha-space-150, 12px);
-  border-radius: var(--matcha-radius-pill, 9999px);
-  backdrop-filter: blur(8px);
-  font-size: var(--matcha-text-body-sm, 12px);
-  z-index: 3;
-}
-
-.matcha-crop__zoom-slider {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 160px;
-  height: 4px;
-  background: var(--matcha-color-surface-border);
-  border-radius: 2px;
-  cursor: pointer;
-  outline: none;
-
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 16px;
-    height: 16px;
-    background: var(--matcha-color-accent);
-    border: 2px solid var(--matcha-color-surface);
-    border-radius: 50%;
-    cursor: grab;
-  }
-  &::-moz-range-thumb {
-    width: 16px;
-    height: 16px;
-    background: var(--matcha-color-accent);
-    border: 2px solid var(--matcha-color-surface);
-    border-radius: 50%;
-    cursor: grab;
-  }
-  &:focus-visible::-webkit-slider-thumb {
-    box-shadow: 0 0 0 3px var(--matcha-color-focus-ring);
-  }
-}
-
-.matcha-crop__zoom-value {
-  min-width: 40px;
-  font-family: 'Fira Code', Consolas, monospace;
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-}
-
-// ── States (empty / loading / error) ────────────────────────────────────────
-
-.matcha-crop__state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--matcha-space-100, 8px);
-  padding: var(--matcha-space-300, 24px);
-  text-align: center;
-  max-width: 360px;
-}
-
-.matcha-crop__state-icon {
-  font-size: 48px;
-  width: 48px;
-  height: 48px;
-  --matcha-icon-color: currentColor;
-
-  &--spin {
-    animation: matcha-crop-spin 1.2s linear infinite;
-  }
-}
-
-.matcha-crop__state-title {
-  margin: 0;
-  font-size: var(--matcha-text-title-sm, 16px);
-  font-weight: var(--matcha-weight-semibold, 600);
-}
-
-.matcha-crop__state-desc {
-  margin: 0;
-  font-size: var(--matcha-text-body-sm, 12px);
-  line-height: 1.4;
-
-  code {
-    padding: 2px 6px;
-    background: var(--matcha-color-surface-card);
-    border-radius: var(--matcha-radius-sm, 2px);
-    font-family: 'Fira Code', Consolas, monospace;
-    font-size: 11px;
-  }
-}
-
-@keyframes matcha-crop-spin {
-  to { transform: rotate(360deg); }
-}
-
-// ── SR-only live region ────────────────────────────────────────────────────
-
-.matcha-crop__sr-live {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-// ── Footer ──────────────────────────────────────────────────────────────────
-// Footer só ocupa espaço quando ng-content tem children projetados.
-// Truque CSS: empty footer fica height 0 via :has() — quando vazio, esconde.
-
-.matcha-crop__footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--matcha-space-100, 8px);
-  padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
-  flex-shrink: 0;
-
-  &:empty {
-    padding: 0;
-  }
-}
-
-// ── Responsive ──────────────────────────────────────────────────────────────
-
-@media (max-width: 640px) {
-  .matcha-crop__header,
-  .matcha-crop__footer {
-    padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
-  }
-  .matcha-crop__canvas { min-height: 280px; }
-  .matcha-crop__zoom-slider { width: 120px; }
-}
-
-// ── Reduced motion ──────────────────────────────────────────────────────────
-
-@media (prefers-reduced-motion: reduce) {
-  .matcha-crop__image,
-  .matcha-crop__overlay {
-    transition: none;
-  }
-  .matcha-crop__state-icon--spin {
-    animation: none;
-  }
-}
+@use "sass:map";
+
+// =============================================================================
+// matcha-crop.scss — Image cropper (Tier 1 + Tier 2 gold)
+//
+// Estrutura:
+//   .matcha-crop                       — host flex column (data-state, data-shape, data-ratio, data-stage)
+//   .matcha-crop__header               — title + toolbar (reset, lock)
+//   .matcha-crop__canvas               — image stage + interaction surface
+//   .matcha-crop__image                — source img (transforma via translate/scale)
+//   .matcha-crop__overlay              — punch-out mask via clip-path
+//   .matcha-crop__area                 — crop frame draggable + 8 handles
+//   .matcha-crop__handle--{nw|n|ne|...} — resize handles (44×44 touch target)
+//   .matcha-crop__zoom-bar             — slider de zoom
+//   .matcha-crop__state                — empty / loading / error visuals
+//   .matcha-crop__footer               — ng-content de actions
+// =============================================================================
+
+@mixin matcha-crop-theme($theme) {
+
+  .matcha-crop {
+    color: var(--matcha-color-text-primary);
+
+    .matcha-crop__header {
+      color: var(--matcha-color-text-primary);
+      border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
+    }
+
+    .matcha-crop__canvas {
+      background: var(--matcha-color-surface-inverse, #121212);
+    }
+
+    // Stage claro (data-stage="light", vindo do componente: stage='light' ou 'auto' com
+    // imagem com alfa). O surface-inverse é pra foto opaca; uma assinatura PNG de traço
+    // escuro sobre transparente sumia nele (IN-42580). Xadrez sutil sobre surface-card:
+    // evidencia a transparência sem competir com a imagem. O scrim fora do frame segue igual.
+    &[data-stage="light"] .matcha-crop__canvas {
+      background-color: var(--matcha-color-surface-card, #ffffff);
+      background-image: repeating-conic-gradient(
+        var(--matcha-color-surface-hover, rgba(0, 0, 0, 0.06)) 0 25%,
+        transparent 0 50%
+      );
+      background-size: 16px 16px;
+    }
+
+    .matcha-crop__overlay {
+      background: var(--matcha-color-scrim, rgba(0, 0, 0, 0.55));
+    }
+
+    .matcha-crop__area {
+      border: var(--matcha-border-thin, 2px) solid var(--matcha-color-accent);
+      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
+
+      &:focus-visible {
+        outline: 3px solid var(--matcha-color-focus-ring);
+        outline-offset: 4px;
+      }
+    }
+
+    .matcha-crop__grid-line {
+      background: var(--matcha-color-on-overlay, rgba(255, 255, 255, 0.3));
+    }
+
+    .matcha-crop__handle {
+      background: var(--matcha-color-surface);
+      border-color: var(--matcha-color-accent);
+    }
+
+    .matcha-crop__zoom-bar {
+      background: var(--matcha-color-surface-card);
+      border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
+      color: var(--matcha-color-text-secondary);
+    }
+
+    .matcha-crop__icon-btn {
+      color: var(--matcha-color-text-secondary);
+
+      &:hover { background: var(--matcha-color-surface-hover); color: var(--matcha-color-text-primary); }
+      &:focus-visible { outline: 2px solid var(--matcha-color-focus-ring); outline-offset: 2px; }
+      &.is-active { color: var(--matcha-color-accent); background: var(--matcha-color-accent-surface-hover); }
+    }
+
+    .matcha-crop__state-icon { color: var(--matcha-color-text-muted); }
+    .matcha-crop__state-title { color: var(--matcha-color-text-primary); }
+    .matcha-crop__state-desc  { color: var(--matcha-color-text-secondary); }
+
+    .matcha-crop__state--error .matcha-crop__state-icon { color: var(--matcha-color-danger); }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+.matcha-crop {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 320px;
+}
+
+// ── Header ──────────────────────────────────────────────────────────────────
+
+.matcha-crop__header {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+  padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-title-sm, 16px);
+  font-weight: var(--matcha-weight-semibold, 600);
+  line-height: var(--matcha-leading-title-sm, 22px);
+  flex-shrink: 0;
+}
+
+.matcha-crop__title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.matcha-crop__toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-050, 4px);
+}
+
+.matcha-crop__icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: var(--matcha-radius-md, 4px);
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease;
+}
+
+// ── Canvas (interaction area) ──────────────────────────────────────────────
+
+.matcha-crop__canvas {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  min-height: 320px;
+  cursor: grab;
+  user-select: none;
+
+  &.is-interacting { cursor: grabbing; }
+}
+
+// `width/height: 100%` + `object-fit: contain` é o pareamento correto: força o
+// IMG box a ocupar o canvas inteiro (mesmo pra natural < container), com o
+// conteúdo escalado preservando aspect ratio. `max-width/height` causava bug
+// em fotos menores que o canvas (ex: thumbnail 80×80 num modal 432×320): o
+// browser não upscala via max-*, mas o JS calculava displayRatio = container/
+// natural > 1 assumindo upscale, fazendo o mapeamento display→source ficar
+// deslocado e o crop sair errado.
+.matcha-crop__image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  user-select: none;
+  -webkit-user-drag: none;
+  pointer-events: none;
+  transform-origin: center center;
+  will-change: transform;
+  transition: transform 80ms ease-out;
+}
+
+// ── Overlay (punch-out via clip-path) ───────────────────────────────────────
+
+.matcha-crop__overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  transition: clip-path 80ms ease-out;
+}
+
+// ── Crop area ───────────────────────────────────────────────────────────────
+
+.matcha-crop__area {
+  position: absolute;
+  box-sizing: border-box;
+  cursor: move;
+  touch-action: none;
+
+  &--circle {
+    border-radius: 50%;
+  }
+}
+
+// Posicionado ACIMA da área de crop em vez do centro. Quando shape=circle,
+// o texto do centro era cruzado pelo border (visualmente parecia cortado).
+// Acima fica em zona de overlay escurecido, sempre legível.
+.matcha-crop__hint {
+  position: absolute;
+  bottom: calc(100% + var(--matcha-space-100, 8px));
+  left: 50%;
+  transform: translateX(-50%);
+  padding: var(--matcha-space-050, 4px) var(--matcha-space-100, 8px);
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.85);
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: var(--matcha-radius-sm, 2px);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+// ── Rule of thirds grid (mostra só durante interação) ──────────────────────
+
+.matcha-crop__grid {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr;
+  pointer-events: none;
+}
+
+.matcha-crop__grid-line {
+  &:nth-child(1) { grid-column: 2; grid-row: 1 / 4; width: 1px; justify-self: start; }
+  &:nth-child(2) { grid-column: 3; grid-row: 1 / 4; width: 1px; justify-self: start; }
+  &:nth-child(3) { grid-column: 1 / 4; grid-row: 2; height: 1px; align-self: start; }
+  &:nth-child(4) { grid-column: 1 / 4; grid-row: 3; height: 1px; align-self: start; }
+}
+
+// ── Resize handles (8 directions, 44×44 touch target) ──────────────────────
+
+.matcha-crop__handle {
+  position: absolute;
+  width: var(--matcha-crop-handle-size, 16px);
+  height: var(--matcha-crop-handle-size, 16px);
+  margin: calc(-1 * var(--matcha-crop-handle-size, 16px) / 2);
+  padding: 0;
+  background: transparent;
+  border: var(--matcha-border-thin, 2px) solid transparent;
+  border-radius: 50%;
+  pointer-events: auto;
+  z-index: 2;
+  touch-action: none;
+
+  // Expand touch target via ::after (visual = 16px, hit = 44px)
+  &::after {
+    content: '';
+    position: absolute;
+    inset: -14px;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--matcha-color-focus-ring);
+    outline-offset: 2px;
+  }
+}
+
+// ── Zoom bar ────────────────────────────────────────────────────────────────
+
+.matcha-crop__zoom-bar {
+  position: absolute;
+  bottom: var(--matcha-space-200, 16px);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+  padding: var(--matcha-space-075, 6px) var(--matcha-space-150, 12px);
+  border-radius: var(--matcha-radius-pill, 9999px);
+  backdrop-filter: blur(8px);
+  font-size: var(--matcha-text-body-sm, 12px);
+  z-index: 3;
+}
+
+.matcha-crop__zoom-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 160px;
+  height: 4px;
+  background: var(--matcha-color-surface-border);
+  border-radius: 2px;
+  cursor: pointer;
+  outline: none;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    background: var(--matcha-color-accent);
+    border: 2px solid var(--matcha-color-surface);
+    border-radius: 50%;
+    cursor: grab;
+  }
+  &::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    background: var(--matcha-color-accent);
+    border: 2px solid var(--matcha-color-surface);
+    border-radius: 50%;
+    cursor: grab;
+  }
+  &:focus-visible::-webkit-slider-thumb {
+    box-shadow: 0 0 0 3px var(--matcha-color-focus-ring);
+  }
+}
+
+.matcha-crop__zoom-value {
+  min-width: 40px;
+  font-family: 'Fira Code', Consolas, monospace;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+// ── States (empty / loading / error) ────────────────────────────────────────
+
+.matcha-crop__state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--matcha-space-100, 8px);
+  padding: var(--matcha-space-300, 24px);
+  text-align: center;
+  max-width: 360px;
+}
+
+.matcha-crop__state-icon {
+  font-size: 48px;
+  width: 48px;
+  height: 48px;
+  --matcha-icon-color: currentColor;
+
+  &--spin {
+    animation: matcha-crop-spin 1.2s linear infinite;
+  }
+}
+
+.matcha-crop__state-title {
+  margin: 0;
+  font-size: var(--matcha-text-title-sm, 16px);
+  font-weight: var(--matcha-weight-semibold, 600);
+}
+
+.matcha-crop__state-desc {
+  margin: 0;
+  font-size: var(--matcha-text-body-sm, 12px);
+  line-height: 1.4;
+
+  code {
+    padding: 2px 6px;
+    background: var(--matcha-color-surface-card);
+    border-radius: var(--matcha-radius-sm, 2px);
+    font-family: 'Fira Code', Consolas, monospace;
+    font-size: 11px;
+  }
+}
+
+@keyframes matcha-crop-spin {
+  to { transform: rotate(360deg); }
+}
+
+// ── SR-only live region ────────────────────────────────────────────────────
+
+.matcha-crop__sr-live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+// ── Footer ──────────────────────────────────────────────────────────────────
+// Footer só ocupa espaço quando ng-content tem children projetados.
+// Truque CSS: empty footer fica height 0 via :has() — quando vazio, esconde.
+
+.matcha-crop__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--matcha-space-100, 8px);
+  padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
+  flex-shrink: 0;
+
+  &:empty {
+    padding: 0;
+  }
+}
+
+// ── Responsive ──────────────────────────────────────────────────────────────
+
+@media (max-width: 640px) {
+  .matcha-crop__header,
+  .matcha-crop__footer {
+    padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
+  }
+  .matcha-crop__canvas { min-height: 280px; }
+  .matcha-crop__zoom-slider { width: 120px; }
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+
+@media (prefers-reduced-motion: reduce) {
+  .matcha-crop__image,
+  .matcha-crop__overlay {
+    transition: none;
+  }
+  .matcha-crop__state-icon--spin {
+    animation: none;
+  }
+}