@ffid-br/tailor-ui 0.6.0 → 0.7.1

package/dist/style.css

@@ -26,71 +26,289 @@
 :where(:root) {
   /* Seguem os tokens do Tailwind do app: quem já troca --color-tailor-green pela
      cor do cliente (accounts, brandTheme) leva o cabeçalho junto. */
-  --tailor-marca-primaria: var(--color-tailor-green, var(--tailor-green));
-  --tailor-marca-primaria-texto: var(--color-tailor-ink, var(--tailor-ink));
-  --tailor-marca-texto: var(--tailor-black);
-  --tailor-marca-texto-suave: #666666;
-  --tailor-marca-borda: #E5E5E5;
-  --tailor-marca-fundo: transparent;
-  --tailor-marca-fonte-titulo: var(--tailor-font);
-  --tailor-marca-fonte-texto: var(--tailor-font);
-  --tailor-marca-peso-titulo: 500;
-  --tailor-marca-caixa-titulo: none;
-  --tailor-marca-raio: 0;
+  --tailor-brand-primary: var(--color-tailor-green, var(--tailor-green));
+  --tailor-brand-primary-text: var(--color-tailor-ink, var(--tailor-ink));
+  --tailor-brand-text: var(--tailor-black);
+  --tailor-brand-text-muted: #666666;
+  --tailor-brand-border: #E5E5E5;
+  --tailor-brand-background: transparent;
+  --tailor-brand-heading-font: var(--tailor-font);
+  --tailor-brand-body-font: var(--tailor-font);
+  --tailor-brand-heading-weight: 500;
+  --tailor-brand-heading-case: none;
+  --tailor-brand-radius: 0;
 }
 :where(.dark, [data-theme="dark"]) {
-  --tailor-marca-primaria-texto: var(--color-tailor-green, var(--tailor-green));
-  --tailor-marca-texto: var(--tailor-white);
-  --tailor-marca-texto-suave: #A3A3A3;
-  --tailor-marca-borda: rgba(255, 255, 255, 0.1);
+  --tailor-brand-primary-text: var(--color-tailor-green, var(--tailor-green));
+  --tailor-brand-text: var(--tailor-white);
+  --tailor-brand-text-muted: #A3A3A3;
+  --tailor-brand-border: rgba(255, 255, 255, 0.1);
 }
-.tailor-marca { display: contents; }
+.tailor-brand { display: contents; }
 
-/* TailorPageHeader — cada medida tem a sua variável --tailor-cabecalho-*. */
+/* TailorPageHeader — cada medida tem a sua variável --tailor-header-*. */
 .tailor-ph {
   display: flex; flex-direction: column; gap: 21px;
-  padding: var(--tailor-cabecalho-padding, 0 0 21px);
-  background: var(--tailor-cabecalho-fundo, var(--tailor-marca-fundo));
-  border-bottom: var(--tailor-cabecalho-regua, 1px solid var(--tailor-marca-borda));
-  color: var(--tailor-marca-texto);
-  font-family: var(--tailor-marca-fonte-texto);
+  padding: var(--tailor-header-padding, 0 0 21px);
+  background: var(--tailor-header-background, var(--tailor-brand-background));
+  border-bottom: var(--tailor-header-rule, 1px solid var(--tailor-brand-border));
+  color: var(--tailor-brand-text);
+  font-family: var(--tailor-brand-body-font);
 }
-.tailor-ph__linha { display: flex; flex-direction: column; gap: 21px; }
+.tailor-ph__row { display: flex; flex-direction: column; gap: 21px; }
 @media (min-width: 640px) {
-  .tailor-ph__linha { flex-direction: row; align-items: flex-end; justify-content: space-between; }
+  .tailor-ph__row { flex-direction: row; align-items: flex-end; justify-content: space-between; }
 }
-.tailor-ph__principal { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
-.tailor-ph__voltar {
+.tailor-ph__main { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
+.tailor-ph__back {
   display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer;
-  font: inherit; font-size: 13px; color: var(--tailor-marca-texto-suave); text-decoration: none; border-radius: var(--tailor-marca-raio);
-}
-.tailor-ph__voltar:hover, .tailor-ph__trilha-link:hover { color: var(--tailor-marca-texto); }
-.tailor-ph__trilha ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--tailor-marca-texto-suave); }
-.tailor-ph__trilha li { display: flex; align-items: center; gap: 6px; }
-.tailor-ph__trilha-link { color: inherit; text-decoration: none; }
-.tailor-ph__trilha [aria-current="page"] { color: var(--tailor-marca-texto); }
-.tailor-ph__voltar:focus-visible, .tailor-ph__trilha-link:focus-visible { outline: 3px solid var(--tailor-marca-primaria); outline-offset: 2px; }
-.tailor-ph__sobretitulo {
+  font: inherit; font-size: 13px; color: var(--tailor-brand-text-muted); text-decoration: none; border-radius: var(--tailor-brand-radius);
+}
+.tailor-ph__back:hover, .tailor-ph__breadcrumb-link:hover { color: var(--tailor-brand-text); }
+.tailor-ph__breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--tailor-brand-text-muted); }
+.tailor-ph__breadcrumbs li { display: flex; align-items: center; gap: 6px; }
+.tailor-ph__breadcrumb-link { color: inherit; text-decoration: none; }
+.tailor-ph__breadcrumbs [aria-current="page"] { color: var(--tailor-brand-text); }
+.tailor-ph__back:focus-visible, .tailor-ph__breadcrumb-link:focus-visible { outline: 3px solid var(--tailor-brand-primary); outline-offset: 2px; }
+.tailor-ph__eyebrow {
   display: flex; align-items: center; gap: 8px; margin: 5px 0 0;
   font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
-  color: var(--tailor-marca-primaria-texto);
+  color: var(--tailor-brand-primary-text);
 }
-.tailor-ph__ponto { width: 8px; height: 8px; background: var(--tailor-marca-primaria); border-radius: var(--tailor-marca-raio); }
-.tailor-ph__titulo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }
-.tailor-ph__titulo {
+.tailor-ph__dot { width: 8px; height: 8px; background: var(--tailor-brand-primary); border-radius: var(--tailor-brand-radius); }
+.tailor-ph__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }
+.tailor-ph__title {
   margin: 0; line-height: 1.1;
-  font-family: var(--tailor-marca-fonte-titulo); font-weight: var(--tailor-marca-peso-titulo);
-  text-transform: var(--tailor-marca-caixa-titulo);
-  font-size: var(--tailor-cabecalho-tamanho-titulo, clamp(26px, 4vw, 42px));
-}
-.tailor-ph__descricao { margin: 0; max-width: 610px; font-size: 16px; line-height: 1.618; color: var(--tailor-marca-texto-suave); }
-.tailor-ph__lateral { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 13px; }
-.tailor-ph__indicador { text-align: right; }
-.tailor-ph__indicador-valor { display: block; font-size: 26px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; font-family: var(--tailor-marca-fonte-titulo); }
-.tailor-ph__indicador-rotulo { display: block; margin-top: 8px; font-size: 13px; color: var(--tailor-marca-texto-suave); }
-.tailor-ph__extra { min-width: 0; }
-
-/* TailorLoader — a malha pequena se desenha a partir do ponto e some, em 2φ (3,236s). */
+  font-family: var(--tailor-brand-heading-font); font-weight: var(--tailor-brand-heading-weight);
+  text-transform: var(--tailor-brand-heading-case);
+  font-size: var(--tailor-header-title-size, clamp(26px, 4vw, 42px));
+}
+.tailor-ph__description { margin: 0; max-width: 610px; font-size: 16px; line-height: 1.618; color: var(--tailor-brand-text-muted); }
+.tailor-ph__aside { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 13px; }
+.tailor-ph__stat { text-align: right; }
+.tailor-ph__stat-value { display: block; font-size: 26px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; font-family: var(--tailor-brand-heading-font); }
+.tailor-ph__stat-label { display: block; margin-top: 8px; font-size: 13px; color: var(--tailor-brand-text-muted); }
+.tailor-ph__below { min-width: 0; }
+
+/* TailorTabela — relatório. Medidas em --tailor-table-*, cores da marca. */
+.tailor-table {
+  border: 1px solid var(--tailor-brand-border); background: var(--tailor-table-background, transparent);
+  color: var(--tailor-brand-text); font-family: var(--tailor-brand-body-font); border-radius: var(--tailor-brand-radius);
+}
+.tailor-table__scroll { overflow-x: auto; }
+.tailor-table table { width: 100%; border-collapse: collapse; font-size: var(--tailor-table-font, 14px); }
+.tailor-table__caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.tailor-table th {
+  padding: var(--tailor-table-header-padding, 10px 13px); white-space: nowrap;
+  font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
+  color: var(--tailor-brand-text-muted); background: var(--tailor-table-header, color-mix(in srgb, var(--tailor-brand-text) 3%, transparent));
+  border-bottom: 1px solid var(--tailor-brand-border);
+}
+.tailor-table__sticky th { position: sticky; top: var(--tailor-table-top, 0); z-index: 1; background: var(--tailor-table-sticky-top, var(--tailor-white)); }
+:where(.dark, [data-theme="dark"]) .tailor-table__sticky th { background: var(--tailor-table-sticky-top, var(--tailor-black)); }
+.tailor-table td { padding: var(--tailor-table-padding, 10px 13px); border-top: 1px solid var(--tailor-brand-border); }
+.tailor-table tbody tr:first-child td { border-top: 0; }
+.tailor-table tbody tr:hover td { background: color-mix(in srgb, var(--tailor-brand-primary) 6%, transparent); }
+.tailor-table--right { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.tailor-table--center { text-align: center; }
+.tailor-table--left { text-align: left; }
+.tailor-table__id { white-space: nowrap; font-family: ui-monospace, "Roboto Mono", Menlo, monospace; font-size: 12px; }
+.tailor-table__sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
+.tailor-table__sort:hover { color: var(--tailor-brand-text); }
+.tailor-table__arrow { opacity: 0.35; }
+.tailor-table__arrow--active { opacity: 1; color: var(--tailor-brand-primary-text); }
+.tailor-table__clickable { cursor: pointer; }
+.tailor-table__clickable:focus-visible, .tailor-table button:focus-visible { outline: 3px solid var(--tailor-brand-primary); outline-offset: -3px; }
+.tailor-table__state { padding: 34px 13px; text-align: center; color: var(--tailor-brand-text-muted); }
+.tailor-table tfoot td { border-top: 1px solid var(--tailor-brand-text); font-weight: 600; }
+.tailor-table__pagination {
+  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
+  padding: 8px 13px; border-top: 1px solid var(--tailor-brand-border); font-size: 13px; color: var(--tailor-brand-text-muted);
+}
+.tailor-table__pages { display: flex; gap: 8px; }
+.tailor-table__pagination button {
+  min-height: 34px; padding: 0 13px; border: 1px solid var(--tailor-brand-border); border-radius: var(--tailor-brand-radius);
+  background: transparent; color: var(--tailor-brand-text); font: inherit; cursor: pointer;
+}
+.tailor-table__pagination button:hover:not(:disabled) { border-color: var(--tailor-brand-text); }
+.tailor-table__pagination button:disabled { opacity: 0.45; cursor: not-allowed; }
+
+/* TailorLoader — o ponto corre a espiral Fibonacci (trechos 3, 5, 8, 13, 21, 34 = 84) com rastro, pulsa e volta. */
+.tailor-loader__rastro { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tailor-rastro 2.618s linear infinite; }
+@keyframes tailor-rastro {
+  0%   { stroke-dashoffset: 1; opacity: 1; }
+  80%  { stroke-dashoffset: 0; opacity: 1; }
+  100% { stroke-dashoffset: 0; opacity: 0; }
+}
+/* Cantos da espiral em fração do trecho de corrida (80%): 3, 8, 16, 29, 50, 84 de 84. */
+.tailor-loader__corredor { animation: tailor-corredor 2.618s linear infinite; }
+@keyframes tailor-corredor {
+  0%      { transform: translate(0, 0); opacity: 1; }
+  2.857%  { transform: translate(3px, 0); }
+  7.619%  { transform: translate(3px, -5px); }
+  15.238% { transform: translate(-5px, -5px); }
+  27.619% { transform: translate(-5px, 8px); }
+  47.619% { transform: translate(16px, 8px); }
+  80%     { transform: translate(16px, -26px) scale(1); opacity: 1; }
+  86%     { transform: translate(16px, -26px) scale(2.2); opacity: 1; }
+  92%     { transform: translate(16px, -26px) scale(0); opacity: 0; }
+  100%    { transform: translate(0, 0) scale(1); opacity: 0; }
+}
+/* compact: o ponto dá a volta num quadrado de 13px. */
+.tailor-loader__volta { background: var(--tailor-loader-dot, var(--tailor-brand-primary)); animation: tailor-volta 1.236s steps(1, end) infinite; }
+@keyframes tailor-volta {
+  0%   { transform: translate(0, 0); }
+  25%  { transform: translate(8px, 0); }
+  50%  { transform: translate(8px, 8px); }
+  75%  { transform: translate(0, 8px); }
+}
+/* dot: o mesmo quadrado, em % para caber em qualquer tamanho de ícone (1em). */
+.tailor-loader__dot { background: var(--tailor-loader-dot, var(--tailor-brand-primary)); animation: tailor-loader-dot 1.236s steps(1, end) infinite; }
+@keyframes tailor-loader-dot {
+  0%   { transform: translate(0, 0); }
+  25%  { transform: translate(161.8%, 0); }
+  50%  { transform: translate(161.8%, 161.8%); }
+  75%  { transform: translate(0, 161.8%); }
+}
+/* Sucesso: a malha nasce verde do ponto, o ponto estoura e o check se desenha. Uma vez só. */
+.tailor-loader__ok-malha .tailor-malha__linha { animation: tailor-ok-malha 0.618s var(--tailor-ease-in-out) both; }
+@keyframes tailor-ok-malha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; opacity: 0.5; } }
+.tailor-loader__ok-ponto { transform-box: fill-box; transform-origin: center; animation: tailor-ok-ponto 0.382s var(--tailor-ease-in-out) both; }
+@keyframes tailor-ok-ponto { 0% { transform: scale(1); } 50% { transform: scale(3); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
+.tailor-loader__check { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tailor-check 0.382s 0.3s var(--tailor-ease-in-out) both; }
+@keyframes tailor-check { to { stroke-dashoffset: 0; } }
+
+/* TailorEsqueleto — barras retas e a linha da marca varrendo de cima a baixo. */
+.tailor-skeleton { position: relative; overflow: hidden; display: grid; gap: 13px; padding: 2px 0; }
+.tailor-skeleton__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.tailor-skeleton__bar { display: block; height: 13px; background: var(--tailor-skeleton-bar, #F2F2F2); }
+.tailor-skeleton__bar--thin { height: 8px; }
+.tailor-skeleton__bar--thick { height: 34px; }
+.tailor-skeleton__row { display: grid; gap: 21px; padding: 8px 0; border-bottom: 1px solid var(--tailor-brand-border); }
+.tailor-skeleton__row--header .tailor-skeleton__bar { height: 8px; }
+.tailor-skeleton__cards { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(144px, 1fr)); }
+.tailor-skeleton__card { display: grid; gap: 13px; padding: 21px; border: 1px solid var(--tailor-brand-border); }
+.tailor-skeleton::after {
+  content: ''; position: absolute; left: 0; top: 0; width: 8px; height: 8px;
+  background: var(--tailor-brand-primary);
+  animation: tailor-skeleton-dot 2.618s var(--tailor-ease-in-out) infinite;
+}
+/* O ponto atravessa o topo uma vez e some; o resto fica parado. */
+@keyframes tailor-skeleton-dot {
+  0%     { left: 0; opacity: 1; }
+  61.8%  { left: calc(100% - 8px); opacity: 1; }
+  70%, 100% { left: calc(100% - 8px); opacity: 0; }
+}
+:where(.dark, [data-theme="dark"]) .tailor-skeleton { --tailor-skeleton-bar: #1F1F1F; }
+
+/* TailorAvisos — caixa preta; a cor do tipo entra varrendo e recolhe na borda; barra do tempo. */
+.tailor-toaster {
+  position: fixed; z-index: 1100; right: 21px; top: 21px; display: flex; flex-direction: column; gap: 8px;
+  width: min(377px, calc(100vw - 32px)); pointer-events: none;
+}
+@media (max-width: 640px) { .tailor-toaster { right: 16px; left: 16px; top: 16px; width: auto; } }
+.tailor-toast {
+  --tailor-toast-color: var(--tailor-brand-primary);
+  position: relative; overflow: hidden; pointer-events: auto; display: flex; align-items: flex-start; gap: 13px;
+  padding: 16px 13px 18px 21px; background: #000; color: #fff; font-family: var(--tailor-font);
+  animation: tailor-toast-in 0.5s var(--tailor-ease-in-out) both;
+}
+.tailor-toast--error { --tailor-toast-color: #FF0040; }
+.tailor-toast::before {
+  content: ''; position: absolute; left: 0; top: 0; bottom: 0; background: var(--tailor-toast-color);
+  width: 3px;
+}
+.tailor-toast > * { position: relative; }
+/* O aviso abre a partir do ponto do ícone (centro do ícone de 21px: 31,5px da esquerda, 26,5px do topo). */
+@keyframes tailor-toast-in { from { clip-path: inset(22.5px calc(100% - 35.5px) calc(100% - 30.5px) 27.5px); } to { clip-path: inset(0); } }
+.tailor-toast__icon { width: 21px; height: 21px; flex-shrink: 0; overflow: visible; stroke: var(--tailor-toast-color); fill: var(--tailor-toast-color); }
+.tailor-toast .tailor-loader__check { animation-delay: 0s; }
+.tailor-toast__text { flex: 1; min-width: 0; }
+.tailor-toast__title { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.382; }
+.tailor-toast__description { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: rgb(255 255 255 / 0.7); }
+.tailor-toast__close {
+  margin: -5px -3px 0 0; width: 34px; height: 34px; flex-shrink: 0; border: 0; background: none; color: rgb(255 255 255 / 0.7);
+  font-size: 21px; line-height: 1; cursor: pointer;
+}
+.tailor-toast__close:hover { color: #fff; }
+.tailor-toast__close:focus-visible { outline: 2px solid var(--tailor-toast-color); outline-offset: -2px; }
+.tailor-toast__timer {
+  position: absolute !important; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tailor-toast-color);
+  transform-origin: left; animation: tailor-toast-timer var(--tailor-toast-duration, 4s) linear both;
+}
+@keyframes tailor-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
+
+/* TailorDigitando — o ponto da marca como cursor. */
+.tailor-typewriter__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.tailor-typewriter__cursor {
+  display: inline-block; width: 0.5em; height: 0.5em; margin-left: 0.12em; vertical-align: baseline;
+  background: var(--tailor-typewriter-cursor, var(--tailor-brand-primary));
+}
+
+/* TailorConclusao — a cor varre o painel, o ícone e o título se escrevem, e tudo recolhe no ponto. */
+.tailor-result {
+  --tailor-result-color: var(--tailor-brand-primary);
+  --tailor-result-text: #000;
+  position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 13px; padding: 34px 21px; text-align: center; font-family: var(--tailor-font);
+  background: var(--tailor-result-color); color: var(--tailor-result-text);
+  --tailor-typewriter-cursor: var(--tailor-result-text);
+  --tailor-result-x: 50%;
+  --tailor-result-y: 50%;
+  animation: tailor-result-in 0.5s var(--tailor-ease-in-out) both;
+}
+.tailor-result--error { --tailor-result-color: #FF0040; --tailor-result-text: #fff; }
+.tailor-result--leaving { animation: tailor-result-out 0.618s var(--tailor-ease-in-out) both; }
+/* O ponto: um quadrado de 8px no centro do botão de origem (ou do painel). */
+@keyframes tailor-result-in {
+  from { clip-path: inset(calc(var(--tailor-result-y) - 4px) calc(100% - var(--tailor-result-x) - 4px) calc(100% - var(--tailor-result-y) - 4px) calc(var(--tailor-result-x) - 4px)); }
+  to   { clip-path: inset(0); }
+}
+@keyframes tailor-result-out {
+  0%   { clip-path: inset(0); }
+  70%  { clip-path: inset(calc(var(--tailor-result-y) - 4px) calc(100% - var(--tailor-result-x) - 4px) calc(100% - var(--tailor-result-y) - 4px) calc(var(--tailor-result-x) - 4px)); opacity: 1; }
+  100% { clip-path: inset(calc(var(--tailor-result-y) - 4px) calc(100% - var(--tailor-result-x) - 4px) calc(100% - var(--tailor-result-y) - 4px) calc(var(--tailor-result-x) - 4px)); opacity: 0; }
+}
+.tailor-result__icon { width: 55px; height: 55px; overflow: visible; stroke: var(--tailor-result-text); }
+.tailor-result .tailor-loader__check { animation-delay: 0.45s; }
+.tailor-result__title { margin: 0; min-height: 1.1em; font-size: 26px; font-weight: 500; line-height: 1.1; }
+.tailor-result__description { font-size: 15px; line-height: 1.5; opacity: 0.8; }
+.tailor-result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
+
+/* TailorField — rótulo, controle e mensagem. Erro: borda e ponto vermelhos, um empurrão curto para chamar o olho. */
+.tailor-field { display: grid; gap: 8px; font-family: var(--tailor-font); color: var(--tailor-brand-text); }
+.tailor-field__label { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 500; }
+.tailor-field__required { font-size: 12px; font-weight: 400; color: var(--tailor-brand-text-muted); }
+.tailor-field__control {
+  min-height: 40px; width: 100%; padding: 0 13px; border: 1px solid var(--tailor-field-border, #999999); border-radius: var(--tailor-brand-radius, 0);
+  background: transparent; color: inherit; font: inherit; font-size: 15px;
+}
+textarea.tailor-field__control { padding: 8px 13px; min-height: 89px; }
+.tailor-field__control:focus { outline: none; border-color: var(--tailor-brand-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tailor-brand-primary) 60%, transparent); }
+.tailor-field--error .tailor-field__control {
+  border-color: #FF0040; background: color-mix(in srgb, #FF0040 5%, transparent);
+  animation: tailor-field-nudge 0.382s var(--tailor-ease-out);
+}
+.tailor-field--error .tailor-field__control:focus { box-shadow: 0 0 0 3px color-mix(in srgb, #FF0040 35%, transparent); }
+.tailor-field__error { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 13px; font-weight: 500; color: #E0003A; }
+.tailor-field__dot { flex-shrink: 0; width: 8px; height: 8px; background: #FF0040; transform: translateY(-1px); }
+.tailor-field__hint { margin: 0; font-size: 13px; color: var(--tailor-brand-text-muted); }
+:where(.dark, [data-theme="dark"]) .tailor-field__error { color: #FF7462; }
+:where(.dark, [data-theme="dark"]) .tailor-field { --tailor-field-border: #666666; }
+@keyframes tailor-field-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-2px); } }
+
+/* TailorUserMenu — o painel nasce do ponto no canto junto do avatar e recolhe nele. */
+.tailor-user-menu__panel { animation: tailor-user-menu-in 0.382s var(--tailor-ease-out) both; }
+.tailor-user-menu__panel--closing { animation: tailor-user-menu-out 0.236s var(--tailor-ease-in-out) both; }
+.tailor-user-menu__panel::before {
+  content: ''; position: absolute; left: -1px; bottom: -1px; width: 8px; height: 8px; background: var(--tailor-brand-primary);
+  animation: tailor-user-menu-dot 0.618s var(--tailor-ease-in-out) both;
+}
+@keyframes tailor-user-menu-in { from { clip-path: inset(calc(100% - 8px) calc(100% - 8px) 0 0); } to { clip-path: inset(0); } }
+@keyframes tailor-user-menu-out { from { clip-path: inset(0); } to { clip-path: inset(calc(100% - 8px) calc(100% - 8px) 0 0); } }
+@keyframes tailor-user-menu-dot { 0%, 61.8% { opacity: 1; } 100% { opacity: 0; } }
+
+/* PontoMalha e a malha da entrada: se desenham a partir do ponto e somem, em 2φ (3,236s). */
 .tailor-malha__linha {
   stroke-dasharray: 1;
   stroke-dashoffset: 1;
@@ -216,6 +434,15 @@
 /* Menos movimento: a informação continua, o movimento sai. */
 @media (prefers-reduced-motion: reduce) {
   .tailor-malha__linha { animation: none; stroke-dashoffset: 0; }
+  .tailor-loader__rastro, .tailor-loader__check, .tailor-loader__ok-malha .tailor-malha__linha { animation: none; stroke-dashoffset: 0; opacity: 1; }
+  .tailor-loader__corredor, .tailor-loader__volta, .tailor-loader__dot { animation: none; }
+  .tailor-loader__ok-ponto { animation: none; opacity: 0; }
+  .tailor-skeleton::after { animation: none; display: none; }
+  .tailor-field--error .tailor-field__control { animation: none; }
+  .tailor-user-menu__panel, .tailor-user-menu__panel--closing, .tailor-user-menu__panel::before { animation: none; }
+  .tailor-user-menu__panel::before { display: none; }
+  .tailor-toast { animation: none; }
+  .tailor-result, .tailor-result > * { animation: none !important; }
   .tailor-loader__reticencias::after { animation: none; content: '...'; }
   .tailor-ponto-pisca { animation: none; }
   .tailor-mascote__corpo, .tailor-mascote__olho, .tailor-mascote__verde { animation: none; }

package/dist/types/components/CinematicIntro.d.ts

@@ -2,7 +2,9 @@ import { default as React } from 'react';
 export type CinematicIntroProps = {
     /** Chamado ao fim da abertura, no "Pular" ou de imediato com menos movimento. */
     onComplete: () => void;
+    /** Linha curta acima do slogan, com o ponto verde. Sem ela, não aparece. */
     overline?: string;
+    /** Frase abaixo da marca (ex.: "Sua operação em outro nível"). Sem ela, não aparece. */
     slogan?: string;
     skipLabel?: string;
     /** Nome do produto abaixo da marca (ex.: "Pilot"). Omitido: só a marca. */

package/dist/types/components/{TailorMarca.d.ts → TailorBrand.d.ts}

@@ -1,33 +1,33 @@
 import { default as React } from 'react';
 /**
- * A marca do cliente em variáveis CSS. Os componentes que leem `--tailor-marca-*`
- * (por enquanto o `TailorPageHeader`) trocam de cor, fonte e cantos sem mudar uma
+ * A marca do cliente em variáveis CSS. Os componentes que leem `--tailor-brand-*`
+ * (`TailorPageHeader`, `TailorTable`, avisos) trocam de cor, fonte e cantos sem mudar uma
  * linha de componente. Sem tema, valem os padrões Tailor do `style.css`.
  */
-export type TailorTema = {
+export type TailorTheme = {
     /** Cor de destaque: o ponto do sobretítulo, a barra de foco. */
-    primaria?: string;
+    primary?: string;
     /** Destaque como texto sobre o fundo (precisa de contraste; no Tailor é o verde-ink). */
-    primariaTexto?: string;
-    texto?: string;
-    textoSuave?: string;
-    borda?: string;
+    primaryText?: string;
+    text?: string;
+    textMuted?: string;
+    border?: string;
     /** Fundo do cabeçalho. Padrão: transparente (o cabeçalho é o começo da página). */
-    fundo?: string;
-    fonteTitulo?: string;
-    fonteTexto?: string;
-    pesoTitulo?: string | number;
+    background?: string;
+    headingFont?: string;
+    bodyFont?: string;
+    headingWeight?: string | number;
     /** `uppercase` para marcas que pedem título em caixa alta. */
-    caixaTitulo?: 'none' | 'uppercase';
+    headingCase?: 'none' | 'uppercase';
     /** Cantos dos elementos com caixa (etiqueta, botão voltar). Tailor: 0. */
-    raio?: string;
+    radius?: string;
 };
 /** O tema como objeto de variáveis, para `style` ou para montar um CSS do cliente. */
-export declare function temaParaVariaveis(tema: TailorTema): Record<string, string>;
-export type TailorMarcaProps = {
-    tema: TailorTema;
+export declare function themeToVars(theme: TailorTheme): Record<string, string>;
+export type TailorBrandProps = {
+    theme: TailorTheme;
     /** Ajustes do tema escuro (`.dark` ou `[data-theme="dark"]` num ancestral). */
-    escuro?: TailorTema;
+    dark?: TailorTheme;
     children: React.ReactNode;
 };
 /**
@@ -35,13 +35,13 @@ export type TailorMarcaProps = {
  * As variáveis vão num `<style>` com seletor próprio, e não em `style`, para o
  * tema escuro conseguir sobrescrever as do claro.
  */
-export declare function TailorMarca({ tema, escuro, children }: TailorMarcaProps): React.JSX.Element;
+export declare function TailorBrand({ theme, dark, children }: TailorBrandProps): React.JSX.Element;
 /**
  * `account_info.whitelabel` do cliente (Mongo `clients`). Os campos além de
  * `colors.primary/secondary/background/text` e `logos.*` são a proposta para
  * completar a marca; enquanto não existirem, ficam os padrões Tailor.
  */
-export type WhitelabelDoCliente = {
+export type TailorWhitelabel = {
     colors?: {
         primary?: string;
         secondary?: string;
@@ -74,13 +74,13 @@ export type WhitelabelDoCliente = {
     };
 };
 /** Razão de contraste WCAG entre duas cores hex. */
-export declare function contraste(a: string, b: string): number;
+export declare function contrast(a: string, b: string): number;
 /**
  * Traduz o whitelabel do Mongo para o tema. Ignora o azul padrão do cadastro e
  * valores que não são hex. A primária só vira cor de texto se tiver contraste
  * AA sobre o fundo; senão o texto de destaque usa a cor de texto da marca.
  */
-export declare function temaDoWhitelabel(wl?: WhitelabelDoCliente | null): {
-    tema: TailorTema;
-    escuro?: TailorTema;
+export declare function themeFromWhitelabel(wl?: TailorWhitelabel | null): {
+    theme: TailorTheme;
+    dark?: TailorTheme;
 };

package/dist/types/components/TailorField.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export type TailorFieldProps = {
+    label: React.ReactNode;
+    /** Mensagem de erro. Com ela, o campo fica vermelho e a mensagem aparece abaixo, com o ponto. */
+    error?: React.ReactNode;
+    /** Ajuda abaixo do campo, quando não há erro. */
+    hint?: React.ReactNode;
+    /** Marca o campo como obrigatório (no rótulo e no `required` do controle). */
+    required?: boolean;
+    /** Um `input`, `select` ou `textarea` (ou componente que repasse as props). Recebe id, aria e a classe do campo. */
+    children: React.ReactElement;
+    className?: string;
+};
+/**
+ * Rótulo, controle e mensagem num lugar só. O erro aparece de uma vez (precisa
+ * ser lido já): borda vermelha, fundo levemente tingido e a mensagem com o
+ * ponto vermelho, ligada ao controle por `aria-describedby`.
+ */
+export declare function TailorField({ label, error, hint, required, children, className }: TailorFieldProps): React.JSX.Element;

package/dist/types/components/TailorLoader.d.ts

@@ -1,17 +1,36 @@
 import { default as React } from 'react';
 export type TailorLoaderProps = {
-    /** Rótulo principal. Padrão: "Carregando". */
+    /** Rótulo principal. Padrão: o texto `loading` do idioma. */
     label?: string;
     /** Linha de apoio abaixo do rótulo (o que está sendo carregado, ou quanto falta). */
-    detail?: string;
+    detail?: React.ReactNode;
+    /**
+     * Arte do parceiro ou do cliente acima do loader (`inline` e `overlay`), para a
+     * espera assinar com a marca dele. Ex.: `whitelabel.logos.rectangular_light`.
+     */
+    logo?: string;
+    /** Arte para fundo escuro (tema escuro e `overlay`). Sem ela, vale `logo`. */
+    logoDark?: string;
+    /** Frases que o ponto escreve e apaga em ciclo, abaixo do rótulo ("Cruzando dados", "Quase lá"). */
+    messages?: string[];
+    /** Progresso real, 0 a 100. Mostra a barra e o número. Sem ele, só a animação. */
+    progress?: number;
+    /** Etapas da carga; só aparecem com `progress` (sem ele não há etapa atual). */
+    steps?: string[];
     /**
      * `inline`: no lugar do conteúdo. `overlay`: tela inteira, bloqueia.
      * `compact`: uma linha (ponto + rótulo), para botões e listas.
-     * `caixa`: numa caixa própria de 377px, com fundo e borda — para painéis
+     * `dot`: só o ponto, do tamanho da fonte (1em), no lugar de um ícone; o rótulo vai para o leitor de tela.
+     * `box`: numa caixa própria de 377px, com fundo e borda — para painéis
      * estreitos e fundos com estampa (chat), onde o inline ficaria transparente.
      */
-    variant?: 'inline' | 'overlay' | 'compact' | 'caixa';
-    /** Tira o respiro externo do `inline`/`caixa` (quem chama já tem espaçamento). */
+    /** `caixa` é o nome antigo de `box` (obsoleto). */
+    variant?: 'inline' | 'overlay' | 'compact' | 'box' | 'dot' | 'caixa';
+    /** Troca a corrida pelo sucesso animado (a malha nasce verde e o ponto vira check). Rótulo padrão: o texto `done` do idioma. */
+    success?: boolean;
+    /** Tira o respiro externo do `inline`/`box` (quem chama já tem espaçamento). */
+    noPadding?: boolean;
+    /** @deprecated use `noPadding`. */
     semRespiro?: boolean;
     className?: string;
 };

package/dist/types/components/TailorPageHeader.d.ts

@@ -7,31 +7,31 @@ export type TailorPageHeaderLink = {
 };
 export type TailorPageHeaderProps = {
     /** ReactNode para permitir um acento dentro do título. */
-    titulo: React.ReactNode;
+    title: React.ReactNode;
     /** Uma frase: o que se faz nesta tela. */
-    descricao?: React.ReactNode;
+    description?: React.ReactNode;
     /** Seção ou contexto, com o ponto da marca. Sem ele, não aparece. */
-    sobretitulo?: string;
+    eyebrow?: string;
     /** Trilha de navegação; o último item é a página atual. */
-    trilha?: Array<{
-        rotulo: string;
+    breadcrumbs?: Array<{
+        label: string;
         href?: string;
     }>;
     /** Link ou ação de voltar, acima de tudo. */
-    voltar?: {
-        rotulo: string;
+    back?: {
+        label: string;
         href?: string;
         onClick?: () => void;
     };
     /** Ao lado do título: status, plano, contagem. */
-    etiqueta?: React.ReactNode;
+    badge?: React.ReactNode;
     /** Números do topo, quando ajudam a decidir o que fazer aqui. */
-    indicadores?: Array<{
-        rotulo: string;
-        valor: React.ReactNode;
+    stats?: Array<{
+        label: string;
+        value: React.ReactNode;
     }>;
     /** Botões e busca, à direita. */
-    acoes?: React.ReactNode;
+    actions?: React.ReactNode;
     /** Abaixo, na largura toda: abas, filtros, barra de busca. */
     children?: React.ReactNode;
     /** Link do roteador do app (ex.: `NavLink`). Repasse todas as props. Sem ele, sai um `<a href>`. */
@@ -39,9 +39,9 @@ export type TailorPageHeaderProps = {
     className?: string;
 };
 /**
- * O cabeçalho de página. Visual só por variáveis `--tailor-marca-*` e
- * `--tailor-cabecalho-*` (ver `TailorMarca`), para vestir a marca do cliente:
+ * O cabeçalho de página. Visual só por variáveis `--tailor-brand-*` e
+ * `--tailor-header-*` (ver `TailorBrand`), para vestir a marca do cliente:
  * cor de destaque, fontes, peso e caixa do título, cantos, fundo.
  * Padrão Tailor: sem card nem sombra, régua de 1px embaixo, título 26 → 42.
  */
-export declare function TailorPageHeader({ titulo, descricao, sobretitulo, trilha, voltar, etiqueta, indicadores, acoes, children, renderLink, className, }: TailorPageHeaderProps): React.JSX.Element;
+export declare function TailorPageHeader({ title, description, eyebrow, breadcrumbs, back, badge, stats, actions, children, renderLink, className, }: TailorPageHeaderProps): React.JSX.Element;

package/dist/types/components/TailorResult.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+export type TailorResultProps = {
+    status: 'success' | 'error';
+    /** No sucesso, escrito pelo ponto letra a letra; no erro, aparece inteiro. */
+    title: string;
+    description?: React.ReactNode;
+    /**
+     * O botão que disparou a ação. O painel nasce do ponto no centro dele e
+     * recolhe de volta para lá. Sem ele, o ponto fica no centro do painel.
+     */
+    origin?: React.RefObject<HTMLElement | null>;
+    /** ms até recolher e chamar `onClose`. Padrão: 1600 no sucesso; no erro não fecha sozinho. `false` desliga. */
+    closeAfter?: number | false;
+    /** Chamado depois que o painel recolhe no ponto: feche o modal aqui. */
+    onClose?: () => void;
+    /** Botões abaixo do texto (ex.: "Tentar de novo" no erro). */
+    actions?: React.ReactNode;
+    className?: string;
+};
+/**
+ * O fim de um modal ou formulário. O ponto do botão cresce até cobrir o painel
+ * com a cor do resultado, o ícone se desenha e o título aparece (escrito no
+ * sucesso, de uma vez no erro, que precisa ser lido já). Depois tudo recolhe no
+ * mesmo ponto e `onClose` fecha o modal. Cobre o pai, que precisa de
+ * `position: relative`.
+ */
+export declare function TailorResult({ status, title, description, origin, closeAfter, onClose, actions, className }: TailorResultProps): React.JSX.Element;

package/dist/types/components/TailorSidebar.d.ts

@@ -113,11 +113,6 @@ export type TailorUserMenuProps = {
     /** Conteúdo livre no painel, antes das ações (tema, notificações push). */
     children?: ReactNode;
 };
-/**
- * Menu do usuário para o `rodape` da `TailorSidebar`. Botão que abre um painel
- * (padrão disclosure: aceita conteúdo livre, como o seletor de tema). Esc e
- * clique fora fecham; setas percorrem os itens.
- */
 export declare const TailorUserMenu: React.FC<TailorUserMenuProps>;
 export type TailorMobileBarProps = {
     /** Abre a gaveta: ligue no `aberto` da `TailorSidebar`. */

package/dist/types/components/TailorSkeleton.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export type TailorSkeletonProps = {
+    /** `text`: parágrafo. `block`: um retângulo (gráfico, imagem). `table`: linhas e colunas. `cards`: indicadores lado a lado. */
+    shape?: 'text' | 'block' | 'table' | 'cards';
+    /** Linhas do texto ou da tabela, ou quantidade de cartões. */
+    lines?: number;
+    /** Colunas da tabela. */
+    columns?: number;
+    /** Altura do `block`. Padrão: 144px. */
+    height?: string;
+    /** Lido pelo leitor de tela. Padrão: o texto `loading` do idioma. */
+    label?: string;
+    className?: string;
+};
+/**
+ * O lugar do conteúdo enquanto ele chega: barras cinza retas e a linha verde
+ * varrendo de cima a baixo. Sem gradiente nem cantos (manual da marca).
+ */
+export declare function TailorSkeleton({ shape, lines, columns, height, label, className }: TailorSkeletonProps): React.JSX.Element;