@inchurch/matcha-theme 22.36.2 → 22.37.0

package/components/matcha-file-uploader.scss

@@ -14,6 +14,29 @@
 
 @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));
@@ -29,6 +52,14 @@
       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 {
@@ -94,8 +125,27 @@
       color: var(--matcha-color-text-primary);
     }
 
-    &.matcha-file-uploader-file__action--delete:hover {
+    // 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);
+      }
     }
   }
 
@@ -116,6 +166,15 @@
     &: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);
+    }
   }
 }
 
@@ -137,6 +196,75 @@
   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;
@@ -157,6 +285,24 @@
   }
 }
 
+// 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
@@ -369,6 +515,14 @@
     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) ──
@@ -429,6 +583,14 @@
     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) ──────────────────────────────
@@ -464,6 +626,7 @@
 
 // ── 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,

package/components/matcha-table.scss

@@ -424,6 +424,33 @@
       --matcha-table-cell-bg: var(--matcha-table-row-bg-hover-accent);
     }
 
+    // O ALVO é a CÉLULA inteira, não só o texto do nome.
+    //
+    // A âncora envolve o nome, e em título curto isso vira um alvo de poucos pixels —
+    // reclamação de quem usa, medida em séries. O `::after` esticado resolve sem trocar
+    // a âncora por handler de clique: o href continua existindo, então ctrl+clique,
+    // clique do meio e "abrir em nova aba" seguem funcionando, e o foco de teclado
+    // continua sendo o do link.
+    //
+    // De quebra conserta o hover: a regra acima só pinta a linha quando o mouse está
+    // sobre o TEXTO. Com a área esticada, pinta ao entrar na célula — que é o que faz
+    // a linha parecer clicável.
+    //
+    // Escopado em `.matcha-table td` de propósito: `a[matcha-cell-link]` também aparece
+    // em card de listagem, fora de tabela, e lá o link deve seguir do tamanho do texto.
+    //
+    // O custo é a seleção de texto DENTRO desta célula. No resto da linha continua
+    // funcionando, que é a diferença para a linha toda clicável.
+    td:has(a[matcha-cell-link]) {
+      position: relative;
+    }
+
+    td a[matcha-cell-link]::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
+
     tbody tr.is-selected td {
       --matcha-table-cell-bg: var(--matcha-table-row-bg-selected);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inchurch/matcha-theme",
-  "version": "22.36.2",
+  "version": "22.37.0",
   "description": "Themes for matcha-design-system",
   "main": "main.scss",
   "scripts": {