@inchurch/matcha-theme 22.40.0 → 22.40.1

package/components/matcha-file-uploader.scss

@@ -1,650 +1,650 @@
-@use "../abstracts/media-breakpoint" as *;
-@use "sass:map";
-
-// =============================================================================
-// matcha-file-uploader.scss — File upload component (matcha/file-uploader no Figma DSV3)
-//
-// 3 estados canon (16152:254):
-//   Estado=Dropzone  (16152:209) — área vazia com icon pill + title + hint + 2 botões
-//   Estado=Enviando  (16152:227) — thumb 64×36 + nome + progress + % + cancel
-//   Estado=Completo  (16152:242) — thumb 64×36 + nome + size + delete (trash)
-//
-// Width canon: 480px (component se adapta via max-width: 480px + width: 100%)
-// =============================================================================
-
-@mixin matcha-file-uploader-theme($theme) {
-
-  // ── Shell (modo múltiplo: moldura única em volta de dropzone + lista) ──
-  // Recebe o mesmo tratamento visual da dropzone porque é ELE que passa a ser
-  // a "área de upload" quando a lista mora dentro — inclusive o realce de
-  // dragover, já que os handlers de drag vivem aqui.
-  .matcha-file-uploader-shell {
-    background: var(--matcha-color-surface-background, var(--matcha-color-surface-bg));
-    border-color: var(--matcha-color-surface-border);
-
-    &.matcha-file-uploader-dragover {
-      background: var(--matcha-color-accent-alpha);
-      border-color: var(--matcha-color-accent);
-    }
-
-    &.matcha-file-uploader-disabled {
-      opacity: 0.5;
-      // pointer-events + cursor default, não `not-allowed`: constraint #14 do
-      // INTERACTION-SYSTEM (o lint de CSS avisa). A dropzone legada abaixo ainda
-      // usa not-allowed — rastreado no backlog, fora do escopo desta mudança.
-      pointer-events: none;
-      cursor: default;
-    }
-  }
-
-  // ── Dropzone ──
-  .matcha-file-uploader-dropzone {
-    background: var(--matcha-color-surface-background, var(--matcha-color-surface-bg));
-    border-color: var(--matcha-color-surface-border);
-
-    &.matcha-file-uploader-dragover {
-      background: var(--matcha-color-accent-alpha);
-      border-color: var(--matcha-color-accent);
-    }
-
-    &.matcha-file-uploader-disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-
-    // Dentro do shell a moldura e o fundo são do shell — a dropzone é só a
-    // afordância de clique. Duas classes de propósito: precisa vencer o bloco
-    // acima, que tem a mesma especificidade.
-    &.matcha-file-uploader-dropzone--inset {
-      background: transparent;
-      border-color: transparent;
-    }
-  }
-
-  .matcha-file-uploader-dropzone__icon-pill {
-    background: var(--matcha-color-interaction-disabled-bg, #282c34);
-    color: var(--matcha-color-text-secondary);
-  }
-
-  .matcha-file-uploader-dropzone__title {
-    color: var(--matcha-color-text-primary);
-  }
-
-  .matcha-file-uploader-dropzone__optional {
-    color: var(--matcha-color-interaction-disabled-fg, rgba(232, 234, 237, 0.38));
-  }
-
-  .matcha-file-uploader-dropzone__hint {
-    color: var(--matcha-color-text-secondary);
-  }
-
-  // ── File item ──
-  .matcha-file-uploader-file {
-    background: var(--matcha-color-surface-card);
-    border-color: var(--matcha-color-surface-border);
-  }
-
-  .matcha-file-uploader-file__thumb {
-    // interaction-disabled-bg, e nao elevation-surface-3: a moldura do arquivo nao e uma
-    // superficie elevada, e um fundo neutro atras de um icone — e o surface-3 desaparecia
-    // sobre o card em que a linha vive.
-    background: var(--matcha-color-interaction-disabled-bg);
-    color: var(--matcha-color-text-muted);
-  }
-
-  .matcha-file-uploader-file__name {
-    color: var(--matcha-color-text-primary);
-  }
-
-  .matcha-file-uploader-file__size {
-    color: var(--matcha-color-text-secondary);
-  }
-
-  .matcha-file-uploader-file__progress {
-    background: var(--matcha-color-surface-border);
-  }
-
-  .matcha-file-uploader-file__progress-fill {
-    background: var(--matcha-color-accent);
-  }
-
-  .matcha-file-uploader-file__percent {
-    color: var(--matcha-color-text-secondary);
-  }
-
-  .matcha-file-uploader-file__error-text {
-    color: var(--matcha-color-danger);
-  }
-
-  .matcha-file-uploader-file__action {
-    color: var(--matcha-color-text-secondary);
-
-    &:hover {
-      background: var(--matcha-color-surface-hover, transparent);
-      color: var(--matcha-color-text-primary);
-    }
-
-    // Apagar é vermelho EM REPOUSO, não só no hover: remover arquivo é
-    // destrutivo e irreversível, e num modo múltiplo com vários itens
-    // empilhados a ação precisa ser distinguível antes de o ponteiro chegar
-    // nela (em touch não há hover nenhum). `danger` é papel, não hue —
-    // o tema pode remapear.
-    //
-    // `--matcha-icon-color` é obrigatório, e não redundante com o `color`: o
-    // matcha-icon resolve o glyph por `var(--matcha-icon-color, …-icon-default)`
-    // (matcha-icon.scss:97) e NÃO herda o `color` do pai. Era por isso que o
-    // vermelho antigo de hover nunca chegou a pintar a lixeira.
-    &.matcha-file-uploader-file__action--delete {
-      color: var(--matcha-color-danger);
-      --matcha-icon-color: var(--matcha-color-danger);
-
-      // Fundo tinted em vez de surface-hover neutro, e a cor é reafirmada
-      // porque o :hover genérico acima empurraria text-primary.
-      &:hover {
-        background: var(--matcha-color-danger-alpha);
-        color: var(--matcha-color-danger);
-        --matcha-icon-color: var(--matcha-color-danger);
-      }
-    }
-  }
-
-  // ── Card layout (preview preenchido) ──
-  .matcha-file-uploader-card {
-    border-color: var(--matcha-color-surface-border);
-  }
-
-  // contain (logo/transparência): fundo neutro atrás da imagem inteira
-  .matcha-file-uploader-card--contain {
-    background: var(--matcha-color-surface-card);
-  }
-
-  .matcha-file-uploader-card__action {
-    background: var(--matcha-color-surface-card-alpha, var(--matcha-color-surface-card));
-    color: var(--matcha-color-text-primary);
-
-    &:hover {
-      background: var(--matcha-color-surface-card);
-    }
-
-    // Mesma regra do delete na linha. Aqui só o GLYPH vira danger: o fundo
-    // continua sendo a pastilha de surface-card, que é o que garante contraste
-    // do ícone sobre uma imagem qualquer — trocá-lo por danger-alpha (10%)
-    // deixaria o vermelho competir com a foto atrás.
-    &.matcha-file-uploader-card__action--delete {
-      color: var(--matcha-color-danger);
-      --matcha-icon-color: var(--matcha-color-danger);
-    }
-  }
-}
-
-// ──────────────────────────────────────────────────────────────────────────────
-// LAYOUT — independente de tema
-// ──────────────────────────────────────────────────────────────────────────────
-
-// Host — full-width; consumer aplica max-width externamente se quiser cap
-.matcha-file-uploader {
-  display: block;
-  width: 100%;
-}
-
-// ── Empty state wrapper (dropzone + ação secundária FORA do drop) ──────────
-.matcha-file-uploader-empty {
-  display: flex;
-  flex-direction: column;
-  gap: var(--matcha-space-150, 12px);
-  width: 100%;
-}
-
-// ── Shell (modo múltiplo) ────────────────────────────────────────────────────
-// A "área de upload" quando a lista mora dentro: uma moldura tracejada só,
-// com a dropzone no topo e a lista rolável embaixo. Sem arquivo nenhum o
-// resultado é visualmente idêntico à dropzone solta — só a moldura mudou de
-// dono, do filho para o pai.
-.matcha-file-uploader-shell {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  box-sizing: border-box;
-  border: var(--matcha-border-thin, 2px) dashed transparent;
-  border-radius: var(--matcha-radius-lg, 8px);
-  overflow: hidden; // o radius precisa cortar a lista que rola por dentro
-  transition: background-color var(--matcha-duration-instant, 80ms) linear,
-              border-color var(--matcha-duration-instant, 80ms) linear;
-
-  // Classe de dimensionamento posta NO HOST tem que alcancar o shell — mesmo
-  // padrao (e mesmo racional) do matcha-grid, grid.component.scss:11-18. Sem
-  // isto, `<matcha-file-uploader class="h-400">` esticaria o host e deixaria o
-  // shell na altura do conteudo, e a area continuaria crescendo por dentro.
-  //
-  // `height: 100%` contra host de altura auto resolve pra `auto`: e no-op para
-  // quem nao define altura, portanto value-preserving nos usos existentes.
-  height: 100%;
-
-  // O foco visível é da dropzone interna (o elemento focável), não do shell.
-  &:focus-within {
-    outline: none;
-  }
-
-  // Com altura definida no host, e a DROPZONE que absorve a sobra: com 1 arquivo
-  // ela fica grande e a area nao tem buraco; conforme a lista cresce, cede
-  // espaco ate o proprio conteudo (pill + dois textos), que o min-height auto
-  // do flex protege de ser esmagado. Sem altura definida, nao ha sobra para
-  // distribuir e o resultado e o mesmo de antes.
-  .matcha-file-uploader-dropzone--inset {
-    flex: 1 1 auto;
-  }
-}
-
-// ── Lista de arquivos rolável (dentro do shell) ──────────────────────────────
-// max-height em custom property com fallback, igual --matcha-panel-max-height
-// (280px é o mesmo teto que select/autocomplete/panel já usam para "lista com
-// mais conteúdo abaixo"). Passar `none` devolve o crescimento ilimitado antigo.
-.matcha-file-uploader-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--matcha-space-100, 8px);
-  min-height: 0; // sem isso o floor de min-content impede o scroll no flex
-  // Pede o tamanho do conteudo e ENCOLHE quando falta espaco — e ai o scroll
-  // interno assume. E o que faz a lista caber quando o host tem altura definida
-  // e o teto de 280px seria maior do que sobrou.
-  flex: 0 1 auto;
-  max-height: var(--matcha-file-uploader-list-max-height, 280px);
-  overflow-y: auto;
-  overflow-x: hidden; // scrollbar vertical + nowrap gera barra horizontal fantasma
-  overscroll-behavior: contain; // o scroll não vaza pra página ao chegar no fim
-  -webkit-overflow-scrolling: touch;
-  padding: 0 var(--matcha-space-100, 8px) var(--matcha-space-100, 8px);
-}
-
-// Dentro da lista o espaçamento é do `gap` — o margin-top do item rolaria
-// junto e daria um respiro fantasma no topo do scroll.
-.matcha-file-uploader-list > .matcha-file-uploader-file,
-.matcha-file-uploader-list > .matcha-file-uploader-card {
-  margin-top: 0;
-}
-
-
-// ── Dropzone box (Estado=Dropzone — Figma 16152:209) — a zona INTEIRA é o alvo
-.matcha-file-uploader-dropzone {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--matcha-space-200, 16px);
-  padding: var(--matcha-space-400, 32px) var(--matcha-space-300, 24px);
-  border: var(--matcha-border-thin, 2px) dashed transparent;
-  border-radius: var(--matcha-radius-lg, 8px);
-  cursor: pointer;
-  transition: background-color var(--matcha-duration-instant, 80ms) linear,
-              border-color var(--matcha-duration-instant, 80ms) linear;
-
-  &:focus-visible {
-    outline: var(--matcha-border-thin, 2px) solid var(--matcha-color-accent, #009400);
-    outline-offset: 2px;
-  }
-}
-
-// Dropzone dentro do shell: sem moldura própria (é do shell) e sem o radius
-// que arredondaria um canto interno. Mantém padding, cursor e foco.
-// Precisa vir DEPOIS do bloco base: mesma especificidade (uma classe), então é
-// a ordem que decide — declarado antes, o `border: 2px dashed` do base vencia e
-// sobravam 2px de borda transparente dentro do shell.
-.matcha-file-uploader-dropzone--inset {
-  border-width: 0;
-  border-radius: 0;
-
-  // Anel de foco PARA DENTRO. A dropzone inset ocupa a largura toda do shell,
-  // que tem `overflow: hidden` (o radius precisa cortar a lista rolável): com o
-  // `outline-offset: 2px` do bloco base o anel cai fora da caixa e é ceifado,
-  // deixando o alvo de teclado sem indicação visível nas laterais.
-  &:focus-visible {
-    outline-offset: -2px;
-  }
-}
-
-// layout="card": dropzone vazio compartilha a proporção do card preenchido
-// (aspect-ratio aplicado inline via previewRatio) pra empty e filled terem a
-// MESMA altura lado a lado. Sem isso, vazio é dimensionado por padding/conteúdo
-// e preenchido por aspect-ratio → alturas divergentes.
-.matcha-file-uploader-dropzone--card {
-  width: 100%;
-  overflow: hidden;
-}
-
-// Icon pill (bg interaction/disabled-bg + padding 40h/16v · icon 24×24)
-.matcha-file-uploader-dropzone__icon-pill {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--matcha-space-200, 16px) var(--matcha-space-500, 40px);
-  border-radius: var(--matcha-radius-pill, 9999px);
-  flex-shrink: 0;
-
-  matcha-icon {
-    --matcha-icon-size: 24px;
-    width: 24px;
-    height: 24px;
-  }
-}
-
-// Text block — column gap 4px, center
-.matcha-file-uploader-dropzone__text {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--matcha-space-050, 4px);
-  text-align: center;
-  width: 100%;
-}
-
-// Title row (inline: title + optional)
-.matcha-file-uploader-dropzone__title-row {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--matcha-space-050, 4px);
-  white-space: nowrap;
-}
-
-.matcha-file-uploader-dropzone__title {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-label-md, 14px);
-  font-weight: var(--matcha-weight-medium, 500);
-  line-height: var(--matcha-leading-label-md, 20px);
-}
-
-.matcha-file-uploader-dropzone__optional {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-label-md, 14px);
-  font-weight: var(--matcha-weight-medium, 500);
-  line-height: var(--matcha-leading-label-md, 20px);
-}
-
-.matcha-file-uploader-dropzone__hint {
-  margin: 0;
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-body-sm, 12px);
-  font-weight: var(--matcha-weight-regular, 400);
-  line-height: var(--matcha-leading-body-sm, 16px);
-  white-space: pre-line; // suporta \n pra hint multi-linha (1280×720 px... \n Clique pra selecionar...)
-}
-
-// Actions row (slot secondary + select arquivo)
-// Hidden input
-.matcha-file-uploader-input {
-  display: none;
-}
-
-// ── File Item — Estados Enviando (16152:227) e Completo (16152:242) ──────────
-.matcha-file-uploader-file {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-200, 16px);
-  border: var(--matcha-border-hairline, 1px) solid transparent;
-  border-radius: var(--matcha-radius-lg, 8px);
-  margin-top: var(--matcha-space-100, 8px);
-  width: 100%;
-
-  // Enviando: padding 20/24 (mais respiro vs. Figma original 16)
-  &.matcha-file-uploader-file--uploading {
-    padding: var(--matcha-space-250, 20px) var(--matcha-space-300, 24px);
-  }
-
-  // Completo/Erro: padding 20/24 (mais respiro vs. Figma original 12/16)
-  &.matcha-file-uploader-file--completed,
-  &.matcha-file-uploader-file--error {
-    padding: var(--matcha-space-250, 20px) var(--matcha-space-300, 24px);
-  }
-}
-
-// Thumbnail 64×36 (16:9 · radius lg)
-.matcha-file-uploader-file__thumb {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 64px;
-  height: 36px;
-  border-radius: var(--matcha-radius-lg, 8px);
-  flex-shrink: 0;
-  overflow: hidden;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  matcha-icon {
-    --matcha-icon-size: 20px;
-    width: 20px;
-    height: 20px;
-  }
-}
-
-// Info column (flex-1)
-.matcha-file-uploader-file__info {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 0;
-  min-width: 0;
-  overflow: hidden;
-
-  // Enviando: gap 6 (entre nome e progress bar)
-  .matcha-file-uploader-file--uploading & {
-    gap: var(--matcha-space-075, 6px);
-  }
-
-  // Completo: gap 4 (entre nome e size)
-  .matcha-file-uploader-file--completed &,
-  .matcha-file-uploader-file--error & {
-    gap: var(--matcha-space-050, 4px);
-  }
-}
-
-// File name — Manrope Medium 13/19 letter 0.2 (text/button-sm)
-.matcha-file-uploader-file__name {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-label-sm, 12px);
-  font-weight: var(--matcha-weight-medium, 500);
-  line-height: var(--matcha-leading-label-sm, 16px);
-  letter-spacing: 0.2px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-// Nome como ancora: mesma tipografia, aparencia de link. `display: block` porque o
-// ellipsis do nome depende de o elemento ser bloco, e <a> e inline por padrao.
-.matcha-file-uploader-file__name--link {
-  display: block;
-  color: var(--matcha-color-accent);
-  text-decoration: underline;
-
-  &:hover,
-  &:focus-visible {
-    text-decoration: none;
-  }
-}
-
-// File size — Manrope Regular 11/14 letter 0.3 (text/caption)
-.matcha-file-uploader-file__size {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-p-tiny, 11px);
-  font-weight: var(--matcha-weight-regular, 400);
-  line-height: var(--matcha-leading-p-tiny, 14px);
-  letter-spacing: 0.3px;
-}
-
-// Error text — body-sm danger
-.matcha-file-uploader-file__error-text {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-body-sm, 12px);
-  font-weight: var(--matcha-weight-regular, 400);
-  line-height: var(--matcha-leading-body-sm, 16px);
-}
-
-// ── Progress bar (height 4px · radius sm) ─────────────────────────────────────
-.matcha-file-uploader-file__progress {
-  width: 100%;
-  height: 4px;
-  border-radius: var(--matcha-radius-sm, 2px);
-  overflow: hidden;
-}
-
-.matcha-file-uploader-file__progress-fill {
-  height: 100%;
-  border-radius: var(--matcha-radius-sm, 2px);
-  transition: width var(--matcha-duration-moderate, 300ms) ease;
-}
-
-// Percent label — body-sm text-secondary
-.matcha-file-uploader-file__percent {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-body-sm, 12px);
-  font-weight: var(--matcha-weight-regular, 400);
-  line-height: var(--matcha-leading-body-sm, 16px);
-  flex-shrink: 0;
-}
-
-// Cancel/Delete action button — 20×20 (icon size + bg transparent + hover)
-.matcha-file-uploader-file__action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: var(--matcha-radius-sm, 2px);
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: background-color var(--matcha-duration-instant, 80ms) linear,
-              color var(--matcha-duration-instant, 80ms) linear;
-
-  matcha-icon {
-    --matcha-icon-size: 20px;
-    width: 20px;
-    height: 20px;
-  }
-  // Com o uploader desabilitado a linha continua legivel, mas as acoes saem de
-  // operacao. `pointer-events: none` + `cursor: default` em vez de
-  // `not-allowed`: constraint #14 do INTERACTION-SYSTEM.
-  &:disabled {
-    opacity: var(--matcha-opacity-disabled, 0.38);
-    pointer-events: none;
-    cursor: default;
-  }
-}
-
-// ── Card layout — preview preenchido 16:9 + ações no hover (Estado=Drop filled) ──
-.matcha-file-uploader-card {
-  position: relative;
-  width: 100%;
-  // SEM margin-top: o card preenchido tem que alinhar o topo com o dropzone
-  // vazio quando lado a lado (layout card). margin-top desalinhava em 8px.
-  border: var(--matcha-border-hairline, 1px) solid transparent;
-  border-radius: var(--matcha-radius-lg, 8px);
-  overflow: hidden;
-  aspect-ratio: 16 / 9; // fallback; sobrescrito por [style.aspect-ratio]="previewRatio"
-}
-
-.matcha-file-uploader-card__img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover; // sobrescrito por [style.object-fit]="previewFit"
-}
-
-.matcha-file-uploader-card__actions {
-  position: absolute;
-  top: var(--matcha-space-100, 8px);
-  right: var(--matcha-space-100, 8px);
-  display: flex;
-  gap: var(--matcha-space-100, 8px);
-  opacity: 1; // persistente — descobrível e operável em touch (canon 20252:2253)
-  transition: opacity var(--matcha-duration-instant, 80ms) linear;
-}
-
-// Em dispositivos com hover, atenua no resting e destaca no hover/foco — mantém
-// a tela limpa sem esconder a affordance onde não há hover (touch/totem).
-@media (hover: hover) {
-  .matcha-file-uploader-card__actions { opacity: 0.72; }
-
-  .matcha-file-uploader-card:hover .matcha-file-uploader-card__actions,
-  .matcha-file-uploader-card:focus-within .matcha-file-uploader-card__actions {
-    opacity: 1;
-  }
-}
-
-.matcha-file-uploader-card__action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border: none;
-  border-radius: var(--matcha-radius-pill, 9999px);
-  cursor: pointer;
-  backdrop-filter: blur(8px);
-  transition: background-color var(--matcha-duration-instant, 80ms) linear;
-
-  matcha-icon {
-    --matcha-icon-size: 18px;
-    width: 18px;
-    height: 18px;
-  }
-
-  // Mesma regra da acao da linha: desabilitado sai de operacao sem virar
-  // `not-allowed` (constraint #14 do INTERACTION-SYSTEM).
-  &:disabled {
-    opacity: var(--matcha-opacity-disabled, 0.38);
-    pointer-events: none;
-    cursor: default;
-  }
-}
-
-// ── Cropper inline (modo crop: imagem única) ──────────────────────────────
-.matcha-file-uploader-cropper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--matcha-space-150, 12px);
-  margin-top: var(--matcha-space-100, 8px);
-}
-
-.matcha-file-uploader-cropper matcha-crop {
-  display: block;
-  width: 100%;
-  min-height: 280px;
-}
-
-.matcha-file-uploader-cropper__actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--matcha-space-100, 8px);
-}
-
-// ── Responsive ───────────────────────────────────────────────────────────────
-@include media-breakpoint('xs') {
-  .matcha-file-uploader-dropzone {
-    padding: var(--matcha-space-300, 24px) var(--matcha-space-200, 16px);
-  }
-
-  .matcha-file-uploader-dropzone__icon-pill {
-    padding: var(--matcha-space-150, 12px) var(--matcha-space-400, 32px);
-  }
-}
-
-// ── Reduced motion ───────────────────────────────────────────────────────────
-@media (prefers-reduced-motion: reduce) {
-  .matcha-file-uploader-shell,
-  .matcha-file-uploader-dropzone,
-  .matcha-file-uploader-file__progress-fill,
-  .matcha-file-uploader-file__action,
-  .matcha-file-uploader-card__actions,
-  .matcha-file-uploader-card__action {
-    transition: none;
-  }
-}
+@use "../abstracts/media-breakpoint" as *;
+@use "sass:map";
+
+// =============================================================================
+// matcha-file-uploader.scss — File upload component (matcha/file-uploader no Figma DSV3)
+//
+// 3 estados canon (16152:254):
+//   Estado=Dropzone  (16152:209) — área vazia com icon pill + title + hint + 2 botões
+//   Estado=Enviando  (16152:227) — thumb 64×36 + nome + progress + % + cancel
+//   Estado=Completo  (16152:242) — thumb 64×36 + nome + size + delete (trash)
+//
+// Width canon: 480px (component se adapta via max-width: 480px + width: 100%)
+// =============================================================================
+
+@mixin matcha-file-uploader-theme($theme) {
+
+  // ── Shell (modo múltiplo: moldura única em volta de dropzone + lista) ──
+  // Recebe o mesmo tratamento visual da dropzone porque é ELE que passa a ser
+  // a "área de upload" quando a lista mora dentro — inclusive o realce de
+  // dragover, já que os handlers de drag vivem aqui.
+  .matcha-file-uploader-shell {
+    background: var(--matcha-color-surface-background, var(--matcha-color-surface-bg));
+    border-color: var(--matcha-color-surface-border);
+
+    &.matcha-file-uploader-dragover {
+      background: var(--matcha-color-accent-alpha);
+      border-color: var(--matcha-color-accent);
+    }
+
+    &.matcha-file-uploader-disabled {
+      opacity: 0.5;
+      // pointer-events + cursor default, não `not-allowed`: constraint #14 do
+      // INTERACTION-SYSTEM (o lint de CSS avisa). A dropzone legada abaixo ainda
+      // usa not-allowed — rastreado no backlog, fora do escopo desta mudança.
+      pointer-events: none;
+      cursor: default;
+    }
+  }
+
+  // ── Dropzone ──
+  .matcha-file-uploader-dropzone {
+    background: var(--matcha-color-surface-background, var(--matcha-color-surface-bg));
+    border-color: var(--matcha-color-surface-border);
+
+    &.matcha-file-uploader-dragover {
+      background: var(--matcha-color-accent-alpha);
+      border-color: var(--matcha-color-accent);
+    }
+
+    &.matcha-file-uploader-disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    // Dentro do shell a moldura e o fundo são do shell — a dropzone é só a
+    // afordância de clique. Duas classes de propósito: precisa vencer o bloco
+    // acima, que tem a mesma especificidade.
+    &.matcha-file-uploader-dropzone--inset {
+      background: transparent;
+      border-color: transparent;
+    }
+  }
+
+  .matcha-file-uploader-dropzone__icon-pill {
+    background: var(--matcha-color-interaction-disabled-bg, #282c34);
+    color: var(--matcha-color-text-secondary);
+  }
+
+  .matcha-file-uploader-dropzone__title {
+    color: var(--matcha-color-text-primary);
+  }
+
+  .matcha-file-uploader-dropzone__optional {
+    color: var(--matcha-color-interaction-disabled-fg, rgba(232, 234, 237, 0.38));
+  }
+
+  .matcha-file-uploader-dropzone__hint {
+    color: var(--matcha-color-text-secondary);
+  }
+
+  // ── File item ──
+  .matcha-file-uploader-file {
+    background: var(--matcha-color-surface-card);
+    border-color: var(--matcha-color-surface-border);
+  }
+
+  .matcha-file-uploader-file__thumb {
+    // interaction-disabled-bg, e nao elevation-surface-3: a moldura do arquivo nao e uma
+    // superficie elevada, e um fundo neutro atras de um icone — e o surface-3 desaparecia
+    // sobre o card em que a linha vive.
+    background: var(--matcha-color-interaction-disabled-bg);
+    color: var(--matcha-color-text-muted);
+  }
+
+  .matcha-file-uploader-file__name {
+    color: var(--matcha-color-text-primary);
+  }
+
+  .matcha-file-uploader-file__size {
+    color: var(--matcha-color-text-secondary);
+  }
+
+  .matcha-file-uploader-file__progress {
+    background: var(--matcha-color-surface-border);
+  }
+
+  .matcha-file-uploader-file__progress-fill {
+    background: var(--matcha-color-accent);
+  }
+
+  .matcha-file-uploader-file__percent {
+    color: var(--matcha-color-text-secondary);
+  }
+
+  .matcha-file-uploader-file__error-text {
+    color: var(--matcha-color-danger);
+  }
+
+  .matcha-file-uploader-file__action {
+    color: var(--matcha-color-text-secondary);
+
+    &:hover {
+      background: var(--matcha-color-surface-hover, transparent);
+      color: var(--matcha-color-text-primary);
+    }
+
+    // Apagar é vermelho EM REPOUSO, não só no hover: remover arquivo é
+    // destrutivo e irreversível, e num modo múltiplo com vários itens
+    // empilhados a ação precisa ser distinguível antes de o ponteiro chegar
+    // nela (em touch não há hover nenhum). `danger` é papel, não hue —
+    // o tema pode remapear.
+    //
+    // `--matcha-icon-color` é obrigatório, e não redundante com o `color`: o
+    // matcha-icon resolve o glyph por `var(--matcha-icon-color, …-icon-default)`
+    // (matcha-icon.scss:97) e NÃO herda o `color` do pai. Era por isso que o
+    // vermelho antigo de hover nunca chegou a pintar a lixeira.
+    &.matcha-file-uploader-file__action--delete {
+      color: var(--matcha-color-danger);
+      --matcha-icon-color: var(--matcha-color-danger);
+
+      // Fundo tinted em vez de surface-hover neutro, e a cor é reafirmada
+      // porque o :hover genérico acima empurraria text-primary.
+      &:hover {
+        background: var(--matcha-color-danger-alpha);
+        color: var(--matcha-color-danger);
+        --matcha-icon-color: var(--matcha-color-danger);
+      }
+    }
+  }
+
+  // ── Card layout (preview preenchido) ──
+  .matcha-file-uploader-card {
+    border-color: var(--matcha-color-surface-border);
+  }
+
+  // contain (logo/transparência): fundo neutro atrás da imagem inteira
+  .matcha-file-uploader-card--contain {
+    background: var(--matcha-color-surface-card);
+  }
+
+  .matcha-file-uploader-card__action {
+    background: var(--matcha-color-surface-card-alpha, var(--matcha-color-surface-card));
+    color: var(--matcha-color-text-primary);
+
+    &:hover {
+      background: var(--matcha-color-surface-card);
+    }
+
+    // Mesma regra do delete na linha. Aqui só o GLYPH vira danger: o fundo
+    // continua sendo a pastilha de surface-card, que é o que garante contraste
+    // do ícone sobre uma imagem qualquer — trocá-lo por danger-alpha (10%)
+    // deixaria o vermelho competir com a foto atrás.
+    &.matcha-file-uploader-card__action--delete {
+      color: var(--matcha-color-danger);
+      --matcha-icon-color: var(--matcha-color-danger);
+    }
+  }
+}
+
+// ──────────────────────────────────────────────────────────────────────────────
+// LAYOUT — independente de tema
+// ──────────────────────────────────────────────────────────────────────────────
+
+// Host — full-width; consumer aplica max-width externamente se quiser cap
+.matcha-file-uploader {
+  display: block;
+  width: 100%;
+}
+
+// ── Empty state wrapper (dropzone + ação secundária FORA do drop) ──────────
+.matcha-file-uploader-empty {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-150, 12px);
+  width: 100%;
+}
+
+// ── Shell (modo múltiplo) ────────────────────────────────────────────────────
+// A "área de upload" quando a lista mora dentro: uma moldura tracejada só,
+// com a dropzone no topo e a lista rolável embaixo. Sem arquivo nenhum o
+// resultado é visualmente idêntico à dropzone solta — só a moldura mudou de
+// dono, do filho para o pai.
+.matcha-file-uploader-shell {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  border: var(--matcha-border-thin, 2px) dashed transparent;
+  border-radius: var(--matcha-radius-lg, 8px);
+  overflow: hidden; // o radius precisa cortar a lista que rola por dentro
+  transition: background-color var(--matcha-duration-instant, 80ms) linear,
+              border-color var(--matcha-duration-instant, 80ms) linear;
+
+  // Classe de dimensionamento posta NO HOST tem que alcancar o shell — mesmo
+  // padrao (e mesmo racional) do matcha-grid, grid.component.scss:11-18. Sem
+  // isto, `<matcha-file-uploader class="h-400">` esticaria o host e deixaria o
+  // shell na altura do conteudo, e a area continuaria crescendo por dentro.
+  //
+  // `height: 100%` contra host de altura auto resolve pra `auto`: e no-op para
+  // quem nao define altura, portanto value-preserving nos usos existentes.
+  height: 100%;
+
+  // O foco visível é da dropzone interna (o elemento focável), não do shell.
+  &:focus-within {
+    outline: none;
+  }
+
+  // Com altura definida no host, e a DROPZONE que absorve a sobra: com 1 arquivo
+  // ela fica grande e a area nao tem buraco; conforme a lista cresce, cede
+  // espaco ate o proprio conteudo (pill + dois textos), que o min-height auto
+  // do flex protege de ser esmagado. Sem altura definida, nao ha sobra para
+  // distribuir e o resultado e o mesmo de antes.
+  .matcha-file-uploader-dropzone--inset {
+    flex: 1 1 auto;
+  }
+}
+
+// ── Lista de arquivos rolável (dentro do shell) ──────────────────────────────
+// max-height em custom property com fallback, igual --matcha-panel-max-height
+// (280px é o mesmo teto que select/autocomplete/panel já usam para "lista com
+// mais conteúdo abaixo"). Passar `none` devolve o crescimento ilimitado antigo.
+.matcha-file-uploader-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-100, 8px);
+  min-height: 0; // sem isso o floor de min-content impede o scroll no flex
+  // Pede o tamanho do conteudo e ENCOLHE quando falta espaco — e ai o scroll
+  // interno assume. E o que faz a lista caber quando o host tem altura definida
+  // e o teto de 280px seria maior do que sobrou.
+  flex: 0 1 auto;
+  max-height: var(--matcha-file-uploader-list-max-height, 280px);
+  overflow-y: auto;
+  overflow-x: hidden; // scrollbar vertical + nowrap gera barra horizontal fantasma
+  overscroll-behavior: contain; // o scroll não vaza pra página ao chegar no fim
+  -webkit-overflow-scrolling: touch;
+  padding: 0 var(--matcha-space-100, 8px) var(--matcha-space-100, 8px);
+}
+
+// Dentro da lista o espaçamento é do `gap` — o margin-top do item rolaria
+// junto e daria um respiro fantasma no topo do scroll.
+.matcha-file-uploader-list > .matcha-file-uploader-file,
+.matcha-file-uploader-list > .matcha-file-uploader-card {
+  margin-top: 0;
+}
+
+
+// ── Dropzone box (Estado=Dropzone — Figma 16152:209) — a zona INTEIRA é o alvo
+.matcha-file-uploader-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--matcha-space-200, 16px);
+  padding: var(--matcha-space-400, 32px) var(--matcha-space-300, 24px);
+  border: var(--matcha-border-thin, 2px) dashed transparent;
+  border-radius: var(--matcha-radius-lg, 8px);
+  cursor: pointer;
+  transition: background-color var(--matcha-duration-instant, 80ms) linear,
+              border-color var(--matcha-duration-instant, 80ms) linear;
+
+  &:focus-visible {
+    outline: var(--matcha-border-thin, 2px) solid var(--matcha-color-accent, #009400);
+    outline-offset: 2px;
+  }
+}
+
+// Dropzone dentro do shell: sem moldura própria (é do shell) e sem o radius
+// que arredondaria um canto interno. Mantém padding, cursor e foco.
+// Precisa vir DEPOIS do bloco base: mesma especificidade (uma classe), então é
+// a ordem que decide — declarado antes, o `border: 2px dashed` do base vencia e
+// sobravam 2px de borda transparente dentro do shell.
+.matcha-file-uploader-dropzone--inset {
+  border-width: 0;
+  border-radius: 0;
+
+  // Anel de foco PARA DENTRO. A dropzone inset ocupa a largura toda do shell,
+  // que tem `overflow: hidden` (o radius precisa cortar a lista rolável): com o
+  // `outline-offset: 2px` do bloco base o anel cai fora da caixa e é ceifado,
+  // deixando o alvo de teclado sem indicação visível nas laterais.
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+}
+
+// layout="card": dropzone vazio compartilha a proporção do card preenchido
+// (aspect-ratio aplicado inline via previewRatio) pra empty e filled terem a
+// MESMA altura lado a lado. Sem isso, vazio é dimensionado por padding/conteúdo
+// e preenchido por aspect-ratio → alturas divergentes.
+.matcha-file-uploader-dropzone--card {
+  width: 100%;
+  overflow: hidden;
+}
+
+// Icon pill (bg interaction/disabled-bg + padding 40h/16v · icon 24×24)
+.matcha-file-uploader-dropzone__icon-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--matcha-space-200, 16px) var(--matcha-space-500, 40px);
+  border-radius: var(--matcha-radius-pill, 9999px);
+  flex-shrink: 0;
+
+  matcha-icon {
+    --matcha-icon-size: 24px;
+    width: 24px;
+    height: 24px;
+  }
+}
+
+// Text block — column gap 4px, center
+.matcha-file-uploader-dropzone__text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--matcha-space-050, 4px);
+  text-align: center;
+  width: 100%;
+}
+
+// Title row (inline: title + optional)
+.matcha-file-uploader-dropzone__title-row {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--matcha-space-050, 4px);
+  white-space: nowrap;
+}
+
+.matcha-file-uploader-dropzone__title {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-label-md, 14px);
+  font-weight: var(--matcha-weight-medium, 500);
+  line-height: var(--matcha-leading-label-md, 20px);
+}
+
+.matcha-file-uploader-dropzone__optional {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-label-md, 14px);
+  font-weight: var(--matcha-weight-medium, 500);
+  line-height: var(--matcha-leading-label-md, 20px);
+}
+
+.matcha-file-uploader-dropzone__hint {
+  margin: 0;
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-sm, 12px);
+  font-weight: var(--matcha-weight-regular, 400);
+  line-height: var(--matcha-leading-body-sm, 16px);
+  white-space: pre-line; // suporta \n pra hint multi-linha (1280×720 px... \n Clique pra selecionar...)
+}
+
+// Actions row (slot secondary + select arquivo)
+// Hidden input
+.matcha-file-uploader-input {
+  display: none;
+}
+
+// ── File Item — Estados Enviando (16152:227) e Completo (16152:242) ──────────
+.matcha-file-uploader-file {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-200, 16px);
+  border: var(--matcha-border-hairline, 1px) solid transparent;
+  border-radius: var(--matcha-radius-lg, 8px);
+  margin-top: var(--matcha-space-100, 8px);
+  width: 100%;
+
+  // Enviando: padding 20/24 (mais respiro vs. Figma original 16)
+  &.matcha-file-uploader-file--uploading {
+    padding: var(--matcha-space-250, 20px) var(--matcha-space-300, 24px);
+  }
+
+  // Completo/Erro: padding 20/24 (mais respiro vs. Figma original 12/16)
+  &.matcha-file-uploader-file--completed,
+  &.matcha-file-uploader-file--error {
+    padding: var(--matcha-space-250, 20px) var(--matcha-space-300, 24px);
+  }
+}
+
+// Thumbnail 64×36 (16:9 · radius lg)
+.matcha-file-uploader-file__thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 36px;
+  border-radius: var(--matcha-radius-lg, 8px);
+  flex-shrink: 0;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  matcha-icon {
+    --matcha-icon-size: 20px;
+    width: 20px;
+    height: 20px;
+  }
+}
+
+// Info column (flex-1)
+.matcha-file-uploader-file__info {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+
+  // Enviando: gap 6 (entre nome e progress bar)
+  .matcha-file-uploader-file--uploading & {
+    gap: var(--matcha-space-075, 6px);
+  }
+
+  // Completo: gap 4 (entre nome e size)
+  .matcha-file-uploader-file--completed &,
+  .matcha-file-uploader-file--error & {
+    gap: var(--matcha-space-050, 4px);
+  }
+}
+
+// File name — Manrope Medium 13/19 letter 0.2 (text/button-sm)
+.matcha-file-uploader-file__name {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-label-sm, 12px);
+  font-weight: var(--matcha-weight-medium, 500);
+  line-height: var(--matcha-leading-label-sm, 16px);
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// Nome como ancora: mesma tipografia, aparencia de link. `display: block` porque o
+// ellipsis do nome depende de o elemento ser bloco, e <a> e inline por padrao.
+.matcha-file-uploader-file__name--link {
+  display: block;
+  color: var(--matcha-color-accent);
+  text-decoration: underline;
+
+  &:hover,
+  &:focus-visible {
+    text-decoration: none;
+  }
+}
+
+// File size — Manrope Regular 11/14 letter 0.3 (text/caption)
+.matcha-file-uploader-file__size {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-p-tiny, 11px);
+  font-weight: var(--matcha-weight-regular, 400);
+  line-height: var(--matcha-leading-p-tiny, 14px);
+  letter-spacing: 0.3px;
+}
+
+// Error text — body-sm danger
+.matcha-file-uploader-file__error-text {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-sm, 12px);
+  font-weight: var(--matcha-weight-regular, 400);
+  line-height: var(--matcha-leading-body-sm, 16px);
+}
+
+// ── Progress bar (height 4px · radius sm) ─────────────────────────────────────
+.matcha-file-uploader-file__progress {
+  width: 100%;
+  height: 4px;
+  border-radius: var(--matcha-radius-sm, 2px);
+  overflow: hidden;
+}
+
+.matcha-file-uploader-file__progress-fill {
+  height: 100%;
+  border-radius: var(--matcha-radius-sm, 2px);
+  transition: width var(--matcha-duration-moderate, 300ms) ease;
+}
+
+// Percent label — body-sm text-secondary
+.matcha-file-uploader-file__percent {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-sm, 12px);
+  font-weight: var(--matcha-weight-regular, 400);
+  line-height: var(--matcha-leading-body-sm, 16px);
+  flex-shrink: 0;
+}
+
+// Cancel/Delete action button — 20×20 (icon size + bg transparent + hover)
+.matcha-file-uploader-file__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--matcha-radius-sm, 2px);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--matcha-duration-instant, 80ms) linear,
+              color var(--matcha-duration-instant, 80ms) linear;
+
+  matcha-icon {
+    --matcha-icon-size: 20px;
+    width: 20px;
+    height: 20px;
+  }
+  // Com o uploader desabilitado a linha continua legivel, mas as acoes saem de
+  // operacao. `pointer-events: none` + `cursor: default` em vez de
+  // `not-allowed`: constraint #14 do INTERACTION-SYSTEM.
+  &:disabled {
+    opacity: var(--matcha-opacity-disabled, 0.38);
+    pointer-events: none;
+    cursor: default;
+  }
+}
+
+// ── Card layout — preview preenchido 16:9 + ações no hover (Estado=Drop filled) ──
+.matcha-file-uploader-card {
+  position: relative;
+  width: 100%;
+  // SEM margin-top: o card preenchido tem que alinhar o topo com o dropzone
+  // vazio quando lado a lado (layout card). margin-top desalinhava em 8px.
+  border: var(--matcha-border-hairline, 1px) solid transparent;
+  border-radius: var(--matcha-radius-lg, 8px);
+  overflow: hidden;
+  aspect-ratio: 16 / 9; // fallback; sobrescrito por [style.aspect-ratio]="previewRatio"
+}
+
+.matcha-file-uploader-card__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover; // sobrescrito por [style.object-fit]="previewFit"
+}
+
+.matcha-file-uploader-card__actions {
+  position: absolute;
+  top: var(--matcha-space-100, 8px);
+  right: var(--matcha-space-100, 8px);
+  display: flex;
+  gap: var(--matcha-space-100, 8px);
+  opacity: 1; // persistente — descobrível e operável em touch (canon 20252:2253)
+  transition: opacity var(--matcha-duration-instant, 80ms) linear;
+}
+
+// Em dispositivos com hover, atenua no resting e destaca no hover/foco — mantém
+// a tela limpa sem esconder a affordance onde não há hover (touch/totem).
+@media (hover: hover) {
+  .matcha-file-uploader-card__actions { opacity: 0.72; }
+
+  .matcha-file-uploader-card:hover .matcha-file-uploader-card__actions,
+  .matcha-file-uploader-card:focus-within .matcha-file-uploader-card__actions {
+    opacity: 1;
+  }
+}
+
+.matcha-file-uploader-card__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--matcha-radius-pill, 9999px);
+  cursor: pointer;
+  backdrop-filter: blur(8px);
+  transition: background-color var(--matcha-duration-instant, 80ms) linear;
+
+  matcha-icon {
+    --matcha-icon-size: 18px;
+    width: 18px;
+    height: 18px;
+  }
+
+  // Mesma regra da acao da linha: desabilitado sai de operacao sem virar
+  // `not-allowed` (constraint #14 do INTERACTION-SYSTEM).
+  &:disabled {
+    opacity: var(--matcha-opacity-disabled, 0.38);
+    pointer-events: none;
+    cursor: default;
+  }
+}
+
+// ── Cropper inline (modo crop: imagem única) ──────────────────────────────
+.matcha-file-uploader-cropper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-150, 12px);
+  margin-top: var(--matcha-space-100, 8px);
+}
+
+.matcha-file-uploader-cropper matcha-crop {
+  display: block;
+  width: 100%;
+  min-height: 280px;
+}
+
+.matcha-file-uploader-cropper__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--matcha-space-100, 8px);
+}
+
+// ── Responsive ───────────────────────────────────────────────────────────────
+@include media-breakpoint('xs') {
+  .matcha-file-uploader-dropzone {
+    padding: var(--matcha-space-300, 24px) var(--matcha-space-200, 16px);
+  }
+
+  .matcha-file-uploader-dropzone__icon-pill {
+    padding: var(--matcha-space-150, 12px) var(--matcha-space-400, 32px);
+  }
+}
+
+// ── Reduced motion ───────────────────────────────────────────────────────────
+@media (prefers-reduced-motion: reduce) {
+  .matcha-file-uploader-shell,
+  .matcha-file-uploader-dropzone,
+  .matcha-file-uploader-file__progress-fill,
+  .matcha-file-uploader-file__action,
+  .matcha-file-uploader-card__actions,
+  .matcha-file-uploader-card__action {
+    transition: none;
+  }
+}