@gyramais/gyra-design 0.2.50 → 0.2.53

package/dist/index.css

@@ -696,6 +696,12 @@ video {
 .w-\[360px\] {
   width: 360px;
 }
+.w-\[420px\] {
+  width: 420px;
+}
+.w-\[560px\] {
+  width: 560px;
+}
 .w-\[800px\] {
   width: 800px;
 }
@@ -779,6 +785,9 @@ video {
 .gap-4 {
   gap: 1rem;
 }
+.gap-6 {
+  gap: 1.5rem;
+}
 .gap-x-1 {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
@@ -813,6 +822,9 @@ video {
 .rounded-\[6px\] {
   border-radius: 6px;
 }
+.rounded-\[var\(--radius-lg\)\] {
+  border-radius: var(--radius-lg);
+}
 .rounded-full {
   border-radius: 9999px;
 }
@@ -825,6 +837,9 @@ video {
 .border {
   border-width: 1px;
 }
+.border-\[var\(--color-border-secondary\)\] {
+  border-color: var(--color-border-secondary);
+}
 .bg-\[var\(--background-color\)\] {
   background-color: var(--background-color);
 }
@@ -849,6 +864,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
 }
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
 .fill-current {
   fill: currentColor;
 }
@@ -948,6 +967,9 @@ video {
 .text-\[var\(--color-text-secondary\)\] {
   color: var(--color-text-secondary);
 }
+.text-\[var\(--color-text-tertiary\)\] {
+  color: var(--color-text-tertiary);
+}
 .text-\[var\(--primary-button-color\)\] {
   color: var(--primary-button-color);
 }
@@ -1149,6 +1171,11 @@ video {
   --gyra-blue-subtle: #F5F8FF;
   --gyra-teal:        #1FB58A;
   --gyra-teal-light:  #E6F7F1;
+  /* Teal escurecido para texto/glifo sobre --gyra-teal-light (o brand teal
+     puro da 2,36:1 ali e reprova em AA). Par medido: 4,77:1 sobre
+     --gyra-teal-light e 5,29:1 sobre branco, na mesma faixa dos
+     --status-*-text. */
+  --gyra-teal-text:   #0F7A60;
   --gyra-black:       #1D1D1F;
 
   /* ---- Neutrals (Apple gray scale) ----------------------------------- */
@@ -4401,25 +4428,40 @@ h6 {
   padding-top: 1rem;
 }
 .gyramais-card.gyramais-card-loading .gyramais-card-content {
-  min-height: 4rem;
+  min-height: 6rem;
+  /* A regra de esconder abaixo usa `> *`, que casa so ELEMENTO. Um children
+     que seja string/numero solto (ou vindo de fragmento) escaparia e
+     apareceria ao lado do skeleton. Zerar a tipografia aqui colapsa esse texto;
+     o placeholder restaura a sua logo em seguida. */
+  font-size: 0;
+  line-height: 0;
 }
 
-.gyramais-card .gyramais-card-loading {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  z-index: 10;
+/* `gyramais-card-loading` (modificador da RAIZ) e `gyramais-card-placeholder`
+   (o bloco desenhado) sao nomes distintos de proposito. Quando os dois eram a
+   mesma classe, o seletor de descendente abaixo casava tambem a raiz de um
+   <Card loading> ANINHADO dentro de outro Card, e aplicava o layout do
+   placeholder no card inteiro.
+
+   Estado de carregando: o skeleton entra NO FLUXO, nao sobreposto. Assim ele
+   e' quem dita a altura do card, e um `loadingContent` alto (grafico, tabela)
+   nao fica cortado pela altura do conteudo vazio que ele esta substituindo.
+   O conteudo real continua montado, so escondido pela regra abaixo, para nao
+   perder estado no meio do carregamento. */
+.gyramais-card .gyramais-card-placeholder {
   display: flex;
-  height: 100%;
   width: 100%;
-  --tw-scale-x: 102%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  align-items: center;
-  justify-content: center;
-  background-color: #ffffff80;
-  padding-top: 1rem;
-  --tw-backdrop-blur: blur(4px);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  flex-direction: column;
+  align-items: stretch;
+  background-color: var(--color-surface-primary);
+  font-size: var(--fs-body);
+  line-height: var(--lh-normal);
+}
+
+.gyramais-card.gyramais-card-loading
+  .gyramais-card-content
+  > *:not(.gyramais-card-placeholder) {
+  display: none;
 }
 
 .gyramais-chart .recharts-legend-item {
@@ -5775,30 +5817,39 @@ h6 {
 }
 
 .gyramais-empty {
-    padding-top: 1rem;
-    padding-bottom: 1rem
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem
 }
+
 .gyramais-empty .gyramais-empty-icon {
-    display: flex;
-    justify-content: center
+  display: flex;
+  justify-content: center
 }
+
+/* O tamanho vai no SVG, nao no wrapper: icone do MUI declara o proprio
+   `font-size`, entao `text-[40px]` no pai nao chega nele e ele encolhe para o
+   padrao do MUI. */
 .gyramais-empty .gyramais-empty-icon svg {
-    font-size: 40px;
-    --tw-text-opacity: 1;
-    color: rgb(184 184 184 / var(--tw-text-opacity, 1))
+  font-size: 40px;
+  color: var(--color-text-quaternary)
 }
+
+/* Texto secundario, nao preto: lista vazia informa, nao anuncia. Em preto ela
+   pesava igual ao dado de verdade da tabela ao lado. */
 .gyramais-empty .gyramais-empty-text {
-    display: flex;
-    justify-content: center;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 400;
-    line-height: 22px;
-    --tw-text-opacity: 1;
-    color: rgb(0 0 0 / var(--tw-text-opacity, 1))
+  text-align: center;
+  font-size: var(--fs-subheadline);
+  line-height: var(--lh-normal);
+  color: var(--color-text-tertiary)
 }
+
 .gyramais-filter .gyramais-filter-button-container {
   position: relative;
   width: -moz-fit-content;
@@ -6329,6 +6380,17 @@ h6 {
     0;
 }
 
+/*
+ * Text-area nao tem onde flutuar o rotulo: o placeholder subia para top-0 e
+ * ficava em cima da primeira linha digitada. Com valor, some, como o
+ * placeholder nativo.
+ */
+.gyramais-input-controller.gyramais-input-text-area
+  .gyramais-input-placeholder.gyramais-input-with-value {
+  opacity:
+    0;
+}
+
 .gyramais-input {
   min-height:
     40px;
@@ -7377,7 +7439,7 @@ h6 {
 
    Escala: tipografia 15 (nome) / 13 (linha 2) / 12 (estado, conector, motivo);
    espacamento em multiplos de 4: padding do cartao 12, gap entre linhas 2,
-   gap entre cartoes 8 (via o conector de 32px: 24 de pilula + 4 + 4).
+   gap entre cartoes 20 (via o conector de 44px: 24 de pilula + 10 + 10).
 
    Armadilha do repositorio: o index.css global tem `* { outline: none
    !important }` e `*:focus { box-shadow: none !important }`. Anel de foco
@@ -7432,16 +7494,38 @@ h6 {
   display: none;
 }
 
+/* Linha do tempo (modo run): o trilho fica preenchido ate a etapa atual e
+   apagado depois. E a mesma linha de 1px, so que agora ela diz onde a
+   execucao esta sem precisar de mais nada na tela. */
+.gyramais-rail-run .gyramais-rail-item.is-tracked .gyramais-rail-connector::before,
+.gyramais-rail-run .gyramais-rail-item.is-tracked .gyramais-rail-step::before {
+  background: var(--gyra-blue);
+}
+/* Na etapa atual o preenchimento para no marcador (23px, a mesma altura em
+   que a primeira etapa comeca a desenhar o trilho). */
+.gyramais-rail-run .gyramais-rail-item.is-current .gyramais-rail-step::before {
+  background: linear-gradient(
+    to bottom,
+    var(--gyra-blue) 23px,
+    var(--color-border-secondary) 23px
+  );
+}
+/* A primeira etapa ja desenha a partir do marcador: se ela e a atual, nao
+   sobra nada preenchido abaixo dele. */
+.gyramais-rail-run .gyramais-rail-item:first-child.is-current .gyramais-rail-step::before {
+  background: var(--color-border-secondary);
+}
+
 /* ---- Conector (pilula de 24px alinhada ao trilho) ----------------------- */
 
 .gyramais-rail-connector {
   position: relative;
   display: flex;
-  min-height: 32px;
+  min-height: 44px;
   align-items: center;
   gap: 6px;
-  padding-top: 4px;
-  padding-bottom: 4px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
 .gyramais-rail-gate-editor {
@@ -7698,10 +7782,36 @@ h6 {
   background-color: var(--gyra-blue-subtle);
 }
 
-/* Etapa que nao disparou: cartao translucido. O motivo NAO entra aqui,
-   fica fora do cartao, em contraste cheio. */
+/* Elevacao SO na etapa atual do modo run: sombra sutil e borda um tom mais
+   forte. Todo o resto da esteira continua plano, senao a elevacao deixa de
+   apontar para onde a execucao esta. */
+.gyramais-rail-run .gyramais-rail-step.is-active .gyramais-rail-step-card.gyramais-card {
+  border-color: var(--color-border-strong);
+  box-shadow: var(--shadow-dropdown);
+}
+
+/* O unico cartao que pede acao humana: acento ambar na borda esquerda. Sem
+   piscar e sem animacao; o botao primario "Decidir" vem do consumer. O
+   padding esquerdo cai 2px para compensar os 2px extras da borda e o
+   conteudo nao andar. */
+.gyramais-rail-run .gyramais-rail-step.is-waiting .gyramais-rail-step-card.gyramais-card {
+  border-left-width: 3px;
+  border-left-color: var(--color-warning);
+  padding-left: 10px;
+}
+
+/* Etapa que nao disparou: cartao apagado. A opacidade fica no CONTEUDO, nao no
+   cartao inteiro: no cartao ela tambem apagava o glifo, e o #8E8E93 que vale
+   3,26:1 sobre o branco chegava a tela como #C7C7C9, 1,69:1. Medir o token nao
+   e medir o pixel. Borda e conteudo recebem o apagamento explicito; o glifo
+   fica de fora e chega inteiro. */
 .gyramais-rail-step.is-skipped .gyramais-rail-step-card.gyramais-card {
   border-style: dashed;
+  border-color: var(--color-border-secondary);
+}
+.gyramais-rail-step.is-skipped .gyramais-rail-step-main,
+.gyramais-rail-step.is-skipped .gyramais-rail-step-side,
+.gyramais-rail-step.is-skipped .gyramais-rail-step-content {
   opacity: 0.5;
 }
 .gyramais-rail-step.is-disabled .gyramais-rail-step-card.gyramais-card {
@@ -7714,8 +7824,9 @@ h6 {
   gap: 10px;
 }
 
-/* Glifo do tipo: chip neutro de 24px. O tipo vive aqui e no tooltip, nunca
-   como texto no cartao. */
+/* Glifo do tipo: chip de 24px. O tipo vive aqui e no tooltip, nunca como
+   texto no cartao. O fundo neutro e o fallback; cada tipo pinta o seu logo
+   abaixo. */
 .gyramais-rail-step-glyph {
   display: inline-flex;
   height: 24px;
@@ -7728,10 +7839,75 @@ h6 {
   color: var(--color-text-secondary);
   margin-top: -2px;
 }
-.gyramais-rail-step.is-active .gyramais-rail-step-glyph {
+
+/* Cor semantica por FAMILIA de consulta, nao por tipo. Duas cores, e as duas
+   se distinguem de verdade:
+     azul = analise (Analise e Aprofundar consultam o mesmo relatorio),
+     teal = vinculos (consulta OUTROS documentos).
+   A cor e REDUNDANTE de proposito: o glifo e o tooltip continuam carregando o
+   tipo, entao quem nao distingue as cores nao perde informacao nenhuma.
+
+   Por que Aprofundar NAO ganha uma cor propria (intencional, medido): o par
+   #EEF1FB x #EBF4FF tinha dE2000 = 2,7, no limiar de percepcao (JND ~2,3), ou
+   seja, prometia quatro sinais e entregava tres. Nao ha no design system um
+   quarto fundo diluido que fique a dE >= 8 dos outros dois sem roubar a cor de
+   um estado (verde/vermelho). Entre inventar um sinal que ninguem enxerga e
+   assumir a familia, assumimos a familia: uma camada E uma analise a mais
+   sobre o mesmo relatorio, e o glifo (camadas x alvo) separa as duas.
+   Medido (dE2000 entre os fundos): azul x teal 10,7; azul x neutro 3,8 (o
+   neutro nao e um sinal, e a ausencia dele).
+
+   Por que o Checkpoint perdeu o ambar: no resto do produto ambar significa
+   ESTADO ("aguardando"). Um checkpoint parado ficava ambar por dois motivos
+   diferentes (tipo e estado) no mesmo cartao, sem como saber qual. O
+   checkpoint tambem nao consulta fonte nenhuma, entao nao pertence a familia
+   nenhuma: chip neutro, e o ambar volta a significar so estado.
+   Contraste medido do glifo sobre o proprio chip: azul 4,90:1, teal 4,77:1,
+   neutro 5,50:1 (todos acima de 4,5:1). */
+.gyramais-rail-step.is-analysis .gyramais-rail-step-glyph,
+.gyramais-rail-step.is-deepen .gyramais-rail-step-glyph {
+  background-color: var(--gyra-blue-light);
+  color: var(--gyra-blue);
+}
+/* O chip neutro do Checkpoint ganha CONTORNO, nao outra cor: sobre o cartao
+   branco o fundo #F5F5F7 esta a dE2000 2,25 (no limiar de percepcao) e quase
+   nao lia como chip. A borda #E8E8ED e uma aresta, nao um pigmento: resolve a
+   leitura sem mexer nas distancias medidas entre os fundos (azul x neutro
+   3,8) nem no contraste do glifo (5,50:1). */
+.gyramais-rail-step.is-checkpoint .gyramais-rail-step-glyph {
+  border-width: 1px;
+  border-color: var(--color-border-secondary);
+  background-color: var(--color-gray-50);
+  color: var(--color-text-secondary);
+}
+.gyramais-rail-step.is-relationships .gyramais-rail-step-glyph {
+  background-color: var(--gyra-teal-light);
+  color: var(--gyra-teal-text);
+}
+.gyramais-rail-step.is-result .gyramais-rail-step-glyph,
+.gyramais-rail-step.is-offer_review .gyramais-rail-step-glyph,
+.gyramais-rail-step.is-authority .gyramais-rail-step-glyph {
   background-color: var(--gyra-blue-light);
   color: var(--gyra-blue);
 }
+.gyramais-rail-step.is-committee .gyramais-rail-step-glyph {
+  color: #5945b8;
+  background: #f0edff;
+}
+/* Etapa que nao rodou nao merece o pigmento do tipo: o cartao inteiro ja
+   esta translucido e a cor cheia so competiria com quem rodou.
+
+   E ela tambem nao herda o chip NEUTRO: o neutro e o tipo Checkpoint, e o
+   mesmo fundo em dois papeis fazia o cinza significar duas coisas. Aqui o chip
+   simplesmente nao existe (sem fundo, sem contorno), que e o que a etapa pulada
+   e: ausencia. O glifo assenta no branco do cartao e, com a opacidade fora do
+   cartao (acima), o #8E8E93 chega a tela inteiro: 3,26:1 medido no pixel
+   renderizado, e nao no token (WCAG 1.4.11 pede 3:1). */
+.gyramais-rail-step.is-skipped .gyramais-rail-step-glyph {
+  border-width: 0px;
+  background-color: transparent;
+  color: var(--color-text-tertiary);
+}
 
 .gyramais-rail-step-main {
   display: flex;
@@ -7848,7 +8024,7 @@ h6 {
   padding-left: 6px;
   padding-right: 4px;
   font-size: var(--fs-subheadline);
-  font-weight: 500;
+  font-weight: 400;
   line-height: 18px;
   color: var(--color-text-primary);
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
@@ -7857,6 +8033,20 @@ h6 {
   animation-duration: 150ms;
   font-family: inherit;
 }
+/* Mesmo papel, mesmo peso nos dois modos: a linha da politica e 13/400 no
+   edit (aqui) e 13/400 no run (`.gyramais-rail-step-text`). O que diz que
+   este e clicavel e o chevron e o hover, nao meio grau de peso. */
+
+/* Quando o nome da etapa E a politica, o seletor sobe para a linha 1 e passa
+   a ser o titulo: 15/600, a mesma tipografia de `.gyramais-rail-step-name`.
+   Nao ha dois textos, ha um so, e ele e clicavel. */
+.gyramais-rail-step-line1.is-policy-title .gyramais-rail-inline-select {
+  height: 20px;
+  font-size: var(--fs-body);
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: var(--tracking-normal);
+}
 .gyramais-rail-inline-select:hover:not(:disabled) {
   background-color: var(--color-surface-active);
 }
@@ -9926,6 +10116,68 @@ h6 {
     left: 0.5rem !important
 }
 
+.gyramais-skeleton {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  background-color: var(--color-gray-100);
+  border-radius: var(--radius-sm);
+}
+
+/* O brilho que varre o bloco. Pseudo-elemento para nao exigir um filho no DOM. */
+.gyramais-skeleton::after {
+  position: absolute;
+  inset: 0px;
+  content: "";
+  transform: translateX(-100%);
+  background-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.7) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  animation: gyramais-skeleton-shimmer 1.6s ease-in-out infinite;
+}
+
+/* Parado de proposito: item na fila, nao em processamento. */
+.gyramais-skeleton.gyramais-skeleton-static::after {
+  animation: none;
+}
+
+.gyramais-skeleton.gyramais-skeleton-circle {
+  flex-shrink: 0;
+  border-radius: var(--radius-full);
+}
+
+.gyramais-skeleton.gyramais-skeleton-block {
+  border-radius: var(--radius-md);
+}
+
+.gyramais-skeleton-lines {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.gyramais-skeleton-lines .gyramais-skeleton-line {
+  height: 0.75rem;
+}
+
+@keyframes gyramais-skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* Sem animacao para quem pediu menos movimento: o bloco continua marcando o
+   espaco, so nao pulsa. */
+@media (prefers-reduced-motion: reduce) {
+  .gyramais-skeleton::after {
+    animation: none;
+  }
+}
+
 /* PickerPopover — shell base de popovers tipo command-palette / tag-picker. */
 
 /* Container override do Popover base — chrome flat com elevação de dropdown */
@@ -11362,6 +11614,65 @@ h6 {
   }
 }
 
+/* GYR-1646: refetch (troca de filtro, busca, acao de linha) NAO apaga as
+   linhas. Elas ficam esmaecidas enquanto a barra fina no topo indica que algo
+   esta vindo. Trocar dado visivel por placeholder e' regressao de UX: o
+   usuario perde o que estava lendo por causa de uma acao dele mesmo. */
+.gyramais-table-container .gyramais-table-refetching {
+  opacity: 0.45;
+  transition: opacity 150ms ease-out;
+  pointer-events: none;
+}
+
+.gyramais-table-container .gyramais-table-refetching-bar {
+  position: relative;
+  height: 2px;
+  overflow: hidden;
+  background-color: var(--color-gray-100);
+}
+
+.gyramais-table-container .gyramais-table-refetching-bar::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 35%;
+  background-color: var(--gyra-blue);
+  animation: gyramais-table-refetching-slide 1.1s ease-in-out infinite;
+}
+
+@keyframes gyramais-table-refetching-slide {
+  0% {
+    left: -35%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+/* Sem movimento para quem pediu menos: a barra continua marcando o estado. */
+@media (prefers-reduced-motion: reduce) {
+  .gyramais-table-container .gyramais-table-refetching-bar::after {
+    animation: none;
+    width: 100%;
+    opacity: 0.4;
+  }
+}
+
+/* Estado anunciado uma vez para leitor de tela, invisivel na tela. As celulas
+   de skeleton sao decorativas (`aria-hidden`), entao nao repetem o anuncio. */
+.gyramais-table-container .gyramais-table-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .gyramais-tabs {
 
     width: 100%

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gyramais/gyra-design",
-  "version": "0.2.50",
+  "version": "0.2.53",
   "description": "Gyramais Design System",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -9,7 +9,7 @@
     "dist"
   ],
   "scripts": {
-    "test": "npm run test",
+    "test": "echo \"gyra-design ainda nao tem suite de testes — nada foi executado\" && exit 1",
     "build-rollup": "node --max-old-space-size=8192 node_modules/rollup/dist/bin/rollup -c rollup.config.js",
     "build": "node ./scripts/build-prod.js",
     "storybook": "storybook dev -p 6006",