@1doc/1ds-react 2.10.0 → 2.11.0

package/CHANGELOG.md

@@ -1,5 +1,224 @@
 # @1doc/1ds-react
 
+## 2.11.0
+
+### Minor Changes
+
+- bf2cfdc: feat(accordion): `open` e `onOpenChange`, abertura controlada
+
+  `open` (lista de ids dos itens abertos) e `onOpenChange` (recebe a nova lista a cada abrir ou fechar). Com `open`, quem manda é o
+  app: o clique só pede e o painel muda quando `open` muda, para lembrar a escolha entre visitas (as seções do CrisDoc). Sem `open`, o
+  Accordion guarda o próprio estado, como antes (começando pelos `defaultOpen`), e `onOpenChange` também avisa. `open=[]` é controlado
+  (tudo fechado), não ausência. Item desabilitado não pede nada.
+
+  ```vue
+  <Accordion
+    :items="secoes"
+    multiple
+    :open="abertos"
+    :onOpenChange="(ids) => (abertos = ids)"
+  />
+  ```
+
+- 9c8baa3: feat(badge): `2xs` com 8px de padding lateral; `attached` com 22px e o tom escuro como opção (`attachedTone`)
+
+  - `size="2xs"`: o padding lateral passa de 4px a 8px, como o selo do CrisDoc. A altura segue em 16px e a fonte em 10px.
+  - `attached`: o rótulo colado tem altura mínima de 22px (24 - 2) de qualquer tamanho; o `md` (padrão) já media 22 e
+    o `xs` e o `2xs` colados sobem a ele.
+  - `attachedTone="dark"` (novo; padrão `light`): o neutro sólido colado em cinza escuro (`neutral-dark-down`) com texto
+    branco, o rótulo escuro do CrisDoc. O ardósia do CrisDoc dá 2,9:1 com texto branco, então o DS usa o token que passa
+    (7,3:1 e inverte sozinho nos temas escuros). Só vale com `attached`, `variant="neutral"` e `appearance="solid"`.
+
+  ```vue
+  <Badge
+    attached
+    size="xs"
+    variant="neutral"
+    appearance="solid"
+    attachedTone="dark"
+  >Tarefa manual</Badge>
+  ```
+
+- 7883c6b: feat(button): `density="comfortable"`, o `sm` com 12px de padding lateral
+
+  O botão pequeno do CrisDoc tem 12px de padding lateral e o `sm` do DS tem 8px. Mudar o `sm` alargaria todo botão que já o
+  usa, então a diferença virou uma densidade: `density="comfortable"` leva o `sm` a 12px (a altura de 32px, a fonte e o raio
+  não mudam). Sem a prop, nenhum botão muda. Nos outros tamanhos a prop não faz diferença (`xs` já usa 12px, `md` 16px e
+  `lg` 24px), e o botão só de ícone, de largura fixa, fica de fora.
+
+  ```vue
+  <Button
+    variant="secondary"
+    size="sm"
+    density="comfortable"
+  >Personalizar</Button>
+  ```
+
+- c101901: feat(calendar): `density="compact"`, evento de 20px
+
+  `density` (`default` | `compact`). O `compact` leva o evento a 20px de altura (16 + 4, o degrau do DS mais perto dos 20,5 do CrisDoc;
+  o padrão dá 25) com 4px de padding lateral (o padrão tem 8) e linha de 16px. Com menos padding o título cabe inteiro onde antes
+  cortava; ele só é cortado, com reticências, quando passa da largura da célula. O padrão não muda.
+
+  ```vue
+  <Calendar :events="eventos" density="compact" />
+  ```
+
+- c9c05cc: feat(coachmark): com um passo só, sem o contador "1 de 1"
+
+  O contador ("2 de 8") só aparece com mais de um passo, no cartão e na região `aria-live`: com um passo o leitor de
+  tela ouve só o título. É o caso da dica pontual (`modal={false}`) e de qualquer tour de um passo. `counterLabel`
+  continua valendo para os tours com mais passos. O botão do último passo segue sendo "Concluir" (`finishLabel`).
+
+- ad47648: feat(datatable): `density="compact"` com cabeçalho e linha de 44px, e tom por linha (`rowTone`)
+
+  - `density="compact"`: `th` e `td` ganham `height` igual à altura de campo do DS (44px), no lugar dos 38 e 49 de
+    antes. É mínimo: conteúdo mais alto (avatar, botão) estica a linha. A tabela de documento (`variant="document"`)
+    continua justa.
+  - `rowTone`: o nome do campo da linha com o tom, ou uma função `(row, rowIndex) => tom`. Tons: `negative`,
+    `positive`, `info` (fundo claro da cor semântica) e `muted` (texto esmaecido). A linha selecionada ou destacada
+    vence o tom e o tom vence a zebra. Tom desconhecido é ignorado. O tom é decoração: o estado também vai em texto.
+
+  ```vue
+  <DataTable
+    density="compact"
+    :columns="colunas"
+    :data="usuarios"
+    :rowTone="
+      (u) => (u.bloqueado ? 'negative' : u.desligado ? 'muted' : undefined)
+    "
+  />
+  ```
+
+- a1de816: feat(input): `variant="ghost"`, a busca dentro de um painel
+
+  `variant` (`default` | `ghost`). O `ghost` tira a borda escura do repouso: fundo cinza claro (`background-light`) e borda clara
+  (`neutral-light-medium`). Só o repouso muda: hover (borda mais escura), foco (borda azul e anel), erro, desabilitado e somente leitura
+  são os do campo padrão, e o ícone, o placeholder e o cursor seguem dizendo que é um campo. Sem a prop, nada muda.
+
+  ```vue
+  <Input
+    variant="ghost"
+    size="sm"
+    fullWidth
+    ariaLabel="Buscar filtros"
+    placeholder="Buscar filtros"
+  />
+  ```
+
+- 9e41dc1: feat(modal): `density="1doc"`, as proporções do modal do CrisDoc
+
+  `density` (`default` | `1doc`) leva o cabeçalho a 67px (o padrão dá 61), o rodapé a 65px (o padrão dá 73, com o padding de 12px 24px)
+  e o raio a 12px (o padrão é 8px). As alturas são mínimas: título com subtítulo ou botão mais alto continua crescendo. Combina com
+  `variant="primary"`. A tela cheia e o painel (`responsive`) mantêm os cantos deles. Sem a prop, o modal não muda. Sem token para
+  essas medidas: literais comentados no CSS.
+
+  ```vue
+  <Modal
+    :open="aberto"
+    density="1doc"
+    variant="primary"
+    title="Resolver tarefa"
+    width="600px"
+  />
+  ```
+
+- 7d9e687: feat(segmentedcontrol): `variant="surface"`, o escolhido em superfície branca
+
+  `variant` (`default` | `surface`). No `surface` o trilho é cinza claro, sem divisores, e o segmento escolhido é uma peça branca com
+  sombra, texto escuro e negrito (o seletor do CrisDoc). A seleção não depende só do tom: o peso e a sombra a dizem. O contador do
+  escolhido fica cinza sobre o branco e o dos outros, branco sobre o trilho. O padrão (azul cheio) não muda.
+
+  ```vue
+  <SegmentedControl
+    label="Modo"
+    variant="surface"
+    :options="opcoes"
+    :value="modo"
+    :onChange="trocar"
+  />
+  ```
+
+- bf81dfa: feat(select): a lista do filtro tem a largura do gatilho, com `listMinWidth` e sem passar da janela
+
+  Regressão do 2.10 no `Select variant="filter"` (a lista do Marcadores da inbox media 556px e passava 17px da borda):
+
+  - Causa: o wrapper do filtro tinha `width: auto` e é `display: flex` (bloco), então se esticava até a largura do pai;
+    o `100%` da lista passava a ser a do pai e não a do gatilho. Agora é `fit-content`.
+  - A lista tem a largura do gatilho (nunca menor), cresce até o conteúdo e fica dentro da janela: o campo de busca
+    não entra mais na conta da largura (`contain: inline-size`) e acompanha a lista.
+  - Perto da borda direita a lista se alinha ao fim do gatilho (medido ao abrir). Na lista flutuante dentro de
+    diálogo, o floating-ui ganhou `shift` com 8px de respiro.
+  - `listMinWidth` (número em px ou medida CSS) troca o mínimo de 240px: o CrisDoc usa 220.
+
+  ```vue
+  <Select
+    variant="filter"
+    ariaLabel="Marcadores"
+    placeholder="Marcadores"
+    searchable
+    :listMinWidth="220"
+    :options="marcadores"
+  />
+  ```
+
+- cfe3687: feat(select): `item` com o escopo da opção, na lista e no gatilho
+
+  O conteúdo de cada opção agora recebe a opção nos dois frameworks:
+
+  - Vue: o slot `#item="{ optionData }"` (o Mitosis gerava `<slot name="item">` sem escopo e o `optionData` chegava `undefined`; o
+    `postbuild.js` passa `optionData` e o apelido `option`).
+  - React: `item` pode ser uma função `({ optionData }) => nó` (antes, a função virava filho inválido). O nó solto, sem escopo,
+    continua valendo na lista.
+  - Com a opção escolhida (seleção única), o gatilho mostra o conteúdo do `item` no lugar do texto: o "SeletorComEtiqueta" do
+    CrisDoc, com nome e etiqueta, aparece igual na lista e no campo. Sem valor (placeholder), na seleção múltipla e com o nó solto do
+    React, o gatilho segue com o texto.
+
+  ```vue
+  <Select label="Prioridade" :options="opcoes" :value="valor" :onChange="mudar">
+    <template #item="{ optionData }"><strong>{{ optionData.label }}</strong> {{ optionData.etiqueta }}</template>
+  </Select>
+  ```
+
+- 53dfebe: feat(statcard): `size="sm"`, o KPI com o número a 18px/800
+
+  Os KPIs da home do CrisDoc têm o número a 18px/800. `size="sm"` leva o número a esse tamanho (o `md`, padrão, segue
+  em 24/700). Vale também com `labelPosition="top"`, que tem o número em 32/800: o `sm` vence. O 18px não está na escala
+  de fonte do DS (que vai de 16 a 20) e fica como literal comentado, como o 10px do `Badge` 2xs. O número continua antes
+  do rótulo no HTML.
+
+  ```vue
+  <StatCard
+    size="sm"
+    label="Minhas tarefas"
+    :value="12"
+    :icon="faClock"
+    variant="primary"
+  />
+  ```
+
+- 4471b90: feat(tabs): `density="compact"`, abas de 40px
+
+  O `Tabs` ganha `density` (`default` | `compact`). O `compact` leva a altura mínima das abas de 48px a 40px (o degrau `sm` do DS) com
+  padding vertical de 8px, para barras de abas dentro de uma tela (o CrisDoc usa 40). A pílula do contador (`count`) não muda e já
+  era o que o CrisDoc pede: cinza (`neutral-light-medium`) na aba inativa e azul só na ativa, nas duas densidades. Sem a prop, nenhuma
+  aba muda.
+
+  ```vue
+  <Tabs :value="aba" :onChange="trocar" density="compact" ariaLabel="Processos">
+    <Tab label="Fluxos" index="1" :count="56" />
+  </Tabs>
+  ```
+
+### Patch Changes
+
+- 7ccb05c: fix(tag): `variant="positive"` outlined com o texto em `positive-dark`
+
+  O contorno da tag outlined é transparente, então o texto cai sobre o fundo de quem está atrás, que muitas vezes é
+  tingido (o azul-claro de um card). `positive-pure` sobre `primary-light` dá 3,6:1 e reprova o WCAG 1.4.3;
+  `positive-dark` dá 7,9:1 e é o mesmo par de texto da tag `soft`. Nos temas escuro e de alto contraste o `dark` também
+  passa de 4,5:1. O contorno continua em `positive-pure`. As outras variantes não mudam.
+
 ## 2.10.0
 
 ### Minor Changes

package/dist/components/Accordion/Accordion.d.ts

@@ -14,6 +14,8 @@ export interface AccordionItemData {
 /**
  * Accordion component — lista de painéis expansíveis (sanfona).
  * @property {AccordionItemData[]} items - Itens do accordion (id, title, content, disabled?, defaultOpen?). Conteúdo livre por item: no React, `content` aceita nó; no Vue, o slot `#content-<id>` (recebe `{ item }`).
+ * @property {string[]} open - Ids dos itens abertos (modo controlado). Sem a prop, o Accordion guarda o próprio estado (começando pelos `defaultOpen`). Com ela, quem manda é o app: abrir ou fechar chama `onOpenChange` e o painel só muda quando `open` muda. Serve para lembrar a escolha entre visitas.
+ * @property {function} onOpenChange - Chamado ao abrir ou fechar um item, com a nova lista de ids abertos (`(openIds: string[]) => void`). Funciona também sem `open`.
  * @property {boolean} multiple - Permite manter vários painéis abertos ao mesmo tempo
  * @property {string} variant - Estilo visual: 'default' | 'bordered' | 'separated'
  * @property {string} titleVariant - Título dos itens: 'default' | 'neutral'. O `neutral` é o título de texto, 14px na cor do texto, sem cor de ação (como um `Button text` neutro), para o accordion do CrisDoc.
@@ -24,6 +26,10 @@ export interface AccordionItemData {
 export interface AccordionProps {
     items: AccordionItemData[];
     multiple?: boolean;
+    /** Ids dos itens abertos (controlado). Sem a prop, o estado é interno. */
+    open?: string[];
+    /** Abriu ou fechou um item: recebe a nova lista de ids abertos. */
+    onOpenChange?: (openIds: string[]) => void;
     variant?: "default" | "bordered" | "separated";
     /** Título dos itens. `neutral`: 14px na cor do texto, peso médio. @default 'default' */
     titleVariant?: "default" | "neutral";

package/dist/components/Accordion/Accordion.js

@@ -9,8 +9,13 @@ function Accordion(props) {
     function itemList() {
         return props.items || [];
     }
+    function currentOpen() {
+        return props.open !== undefined && props.open !== null
+            ? props.open
+            : openIds;
+    }
     function isOpen(id) {
-        return openIds.includes(id);
+        return currentOpen().includes(id);
     }
     function triggerId(id) {
         return `umds-accordion-trigger-${id}`;
@@ -21,15 +26,22 @@ function Accordion(props) {
     function toggle(id, disabled) {
         if (disabled)
             return;
-        if (openIds.includes(id)) {
-            setOpenIds(openIds.filter((x) => x !== id));
+        const atuais = currentOpen();
+        let proximos;
+        if (atuais.includes(id)) {
+            proximos = atuais.filter((x) => x !== id);
         }
         else if (props.multiple) {
-            setOpenIds([...openIds, id]);
+            proximos = [...atuais, id];
         }
         else {
-            setOpenIds([id]);
+            proximos = [id];
         }
+        // Controlado: quem muda é o app (o `open` novo). Sem `open`, o estado interno.
+        if (props.open === undefined || props.open === null)
+            setOpenIds(proximos);
+        if (props.onOpenChange)
+            props.onOpenChange(proximos);
     }
     function wrapperClasses() {
         return [

package/dist/components/Badge/Badge.css

@@ -60,12 +60,12 @@
 
 /* ── Tamanhos — padding + gap por tamanho (sem height fixa) ── */
 
-/* 2xs: 16px de altura (10 de fonte + 2 + 2 de padding + 2 de borda). A fonte de
-   10px não está na escala do DS (menor degrau: 12px); é o selo compacto do
-   CrisDoc, sem token equivalente. */
+/* 2xs: 16px de altura (10 de fonte + 2 + 2 de padding + 2 de borda) e 8px de padding
+   lateral, como o selo do CrisDoc. A fonte de 10px não está na escala do DS (menor
+   degrau: 12px), sem token equivalente. */
 .umds-badge--2xs {
     font-size: 0.625rem; /* 10px: fora da escala, selo compacto */
-    padding: var(--umds-primitive-spacing-micro) var(--umds-primitive-spacing-quarck);
+    padding: var(--umds-primitive-spacing-micro) var(--umds-primitive-spacing-nano);
     gap: var(--umds-primitive-spacing-micro);
     border-radius: var(--umds-primitive-border-radius-xs); /* 4px */
 }
@@ -252,6 +252,8 @@
     position: absolute;
     top: 0;
     left: 0;
+    /* 22px: o rótulo do CrisDoc (24 - 2). Os tamanhos menores (xs, 2xs) sobem a ele; o md já mede 22. */
+    min-height: calc(var(--umds-primitive-spacing-xxs) - var(--umds-primitive-spacing-micro));
     border-radius: 0 0 var(--umds-primitive-border-radius-sm) var(--umds-primitive-border-radius-sm);
 }
 
@@ -267,3 +269,10 @@
     background-color: var(--umds-semantic-color-neutral-light-medium);
     color: var(--umds-semantic-color-neutral-dark-pure);
 }
+
+/* attachedTone="dark": o neutro escuro do CrisDoc. O ardósia do CrisDoc dá 2,9:1 com texto branco; o par
+   neutral-dark-down + branco dá 7,3:1 e inverte sozinho nos temas escuros. */
+.umds-badge--attached.umds-badge--neutral.umds-badge--solid.umds-badge--attached-dark {
+    background-color: var(--umds-semantic-color-neutral-dark-down);
+    color: var(--umds-semantic-color-neutral-light-pure);
+}

package/dist/components/Badge/Badge.d.ts

@@ -13,8 +13,8 @@ export interface BadgeProps {
      */
     variant?: "neutral" | "positive" | "negative" | "info" | "primary" | "new";
     /**
-     * Tamanho do badge. `2xs` é o compacto (16px, fonte de 10px) para selo de
-     * setor e de contagem dentro de linha de lista e card.
+     * Tamanho do badge. `2xs` é o compacto (16px, fonte de 10px, 8px de padding
+     * lateral) para selo de setor e de contagem dentro de linha de lista e card.
      * @default 'md'
      */
     size?: "2xs" | "xs" | "sm" | "md" | "lg" | "pill";
@@ -35,6 +35,13 @@ export interface BadgeProps {
      * @default 'left'
      */
     attachedSide?: "left" | "right";
+    /**
+     * Tom do rótulo colado neutro e sólido: `light` (padrão, cinza claro com texto escuro) ou `dark` (cinza
+     * escuro com texto branco, o rótulo escuro do CrisDoc). Só vale com `attached`, `variant="neutral"` e
+     * `appearance="solid"`; as outras variantes ignoram. O rótulo colado mede 22px de altura.
+     * @default 'light'
+     */
+    attachedTone?: "light" | "dark";
     /**
      * Estilo visual do badge.
      * @default 'soft'

package/dist/components/Badge/Badge.js

@@ -11,6 +11,9 @@ function Badge(props) {
             props.attached && props.attachedSide === "right"
                 ? "umds-badge--attached-right"
                 : "",
+            props.attached && props.attachedTone === "dark"
+                ? "umds-badge--attached-dark"
+                : "",
             props.className,
         ]
             .filter(Boolean)

package/dist/components/Button/Button.css

@@ -56,6 +56,11 @@
   font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
 }
 
+/* density="comfortable": o sm com o padding de 12px do CrisDoc. O botão só de ícone tem largura fixa e fica de fora. */
+.umds-button--sm.umds-button--comfortable:not(.umds-button--icon) {
+  padding: 0 var(--umds-primitive-spacing-mini); /* 12px */
+}
+
 .umds-button--md {
   height: var(--umds-primitive-spacing-sm); /* 40px */
   padding: 0 var(--umds-primitive-spacing-xxxs); /* 16px */

package/dist/components/Button/Button.d.ts

@@ -3,6 +3,7 @@ import './Button.css';
  * Button — botão de ação com variantes, tamanhos, ícones e estado de carregamento.
  * @property {string} variant - Variante visual: 'primary' | 'secondary' | 'neutral' | 'neutral-text' | 'text' | 'negative' | 'negative-outlined' | 'icon'. `neutral` é o contornado cinza; `neutral-text` é o texto sem borda e sem azul, para barras de ações onde nenhum botão é a ação principal.
  * @property {string} size - Tamanho do botão: 'xs' (26px, para dentro de card e linha de lista) | 'sm' (32px) | 'md' (40px) | 'lg' (48px)
+ * @property {string} density - 'default' (padrão) | 'comfortable'. O `comfortable` leva o padding lateral do `sm` de 8px a 12px (o botão pequeno do CrisDoc); a altura (32px) não muda. Nos outros tamanhos não faz diferença: `xs` já usa 12px, `md` 16px e `lg` 24px. Sem a prop, nenhum botão existente muda.
  * @property {boolean} disabled - Desabilita o botão
  * @property {string} type - Tipo nativo do botão: 'button' | 'submit' | 'reset'
  * @property {Function} onClick - Callback disparado no clique
@@ -27,6 +28,8 @@ import './Button.css';
 export interface ButtonProps {
     variant?: "primary" | "secondary" | "neutral" | "neutral-text" | "text" | "negative" | "negative-outlined" | "icon";
     size?: "xs" | "sm" | "md" | "lg";
+    /** `comfortable`: o `sm` com 12px de padding lateral (o padrão é 8px). @default 'default' */
+    density?: "default" | "comfortable";
     disabled?: boolean;
     type?: "button" | "submit" | "reset";
     children?: any;

package/dist/components/Button/Button.js

@@ -9,6 +9,7 @@ function Button(props) {
             "umds-button",
             `umds-button--${props.variant || "primary"}`,
             `umds-button--${props.size || "md"}`,
+            props.density === "comfortable" ? "umds-button--comfortable" : "",
             props.fullWidth ? "umds-button--full-width" : "",
             props.className,
         ]

package/dist/components/Calendar/Calendar.css

@@ -171,6 +171,16 @@
   cursor: pointer;
 }
 
+/* density="compact": evento de 20px (16 + 4: o degrau do DS mais perto dos 20,5 do CrisDoc) e 4px de padding
+   lateral. A linha tem 16px de altura e 2px de padding em cima e embaixo. O título continua cortado com
+   reticências só quando passa da largura (a regra do título, abaixo). */
+.umds-calendar--compact .umds-calendar__event {
+  min-height: calc(var(--umds-primitive-spacing-xxxs) + var(--umds-primitive-spacing-quarck)); /* 20px */
+  padding: var(--umds-primitive-spacing-micro) var(--umds-primitive-spacing-quarck); /* 2px 4px */
+  line-height: var(--umds-primitive-spacing-xxxs); /* 16px */
+  align-items: center;
+}
+
 .umds-calendar__event:hover {
   filter: brightness(0.96);
 }

package/dist/components/Calendar/Calendar.d.ts

@@ -65,6 +65,7 @@ export interface CalendarDayCell {
  * @property {string} today - O "hoje" do calendário (`YYYY-MM-DD`; padrão a data do sistema). Útil em testes e em demonstração.
  * @property {number} weekStartsOn - Primeiro dia da semana: 0 domingo (padrão) | 1 segunda
  * @property {number} maxVisible - Eventos por dia na visão de mês antes do "+N" (padrão 3)
+ * @property {string} density - 'default' | 'compact'. O `compact` aperta o evento: altura de 20px (o degrau do DS mais perto dos 20,5 do CrisDoc; o padrão dá 25) e 4px de padding lateral (o padrão tem 8), para o título caber inteiro onde antes cortava com reticências. O título só é cortado (com reticências) quando de fato passa da largura da célula.
  * @property {string} locale - Idioma dos nomes de mês e de dia (padrão 'pt-BR')
  * @property {string} ariaLabel - Nome acessível da grade (padrão: o título, ex.: "Maio 2026")
  * @property {string} previousLabel - Nome do botão de voltar (padrão "Anterior")
@@ -99,6 +100,8 @@ export interface CalendarProps {
     today?: string;
     weekStartsOn?: 0 | 1;
     maxVisible?: number;
+    /** `compact`: evento de 20px com 4px de padding lateral. @default 'default' */
+    density?: "default" | "compact";
     locale?: string;
     ariaLabel?: string;
     previousLabel?: string;

package/dist/components/Calendar/Calendar.js

@@ -100,7 +100,12 @@ function Calendar(props) {
         ];
     }
     function rootClasses() {
-        return ["umds-calendar", "umds-calendar--" + viewValue(), props.className]
+        return [
+            "umds-calendar",
+            "umds-calendar--" + viewValue(),
+            props.density === "compact" ? "umds-calendar--compact" : "",
+            props.className,
+        ]
             .filter(Boolean)
             .join(" ");
     }

package/dist/components/Coachmark/Coachmark.d.ts

@@ -23,7 +23,8 @@ export interface CoachmarkStep {
  * O cartão é um diálogo modal (`role="dialog"`, `aria-modal`): o foco entra nele
  * ao abrir, o Tab fica preso nele, Esc sai do tour, as setas esquerda e direita
  * voltam e avançam, e o foco volta ao elemento de antes ao fechar. A cada passo o
- * leitor de tela ouve "2 de 8: título" (região `aria-live`).
+ * leitor de tela ouve "2 de 8: título" (região `aria-live`). Com um passo só não há contador ("1 de 1" não
+ * diz nada): o cartão mostra o título e o leitor de tela ouve só ele.
  *
  * O componente é CONTROLADO por `open`: o tour só existe com `open` verdadeiro, e
  * `onClose(motivo)` avisa quando ele quer fechar (`"finish"` no último

package/dist/components/Coachmark/Coachmark.js

@@ -62,7 +62,12 @@ function Coachmark(props) {
             .replace("{current}", String(index() + 1))
             .replace("{total}", String(stepCount()));
     }
+    function hasCounter() {
+        return stepCount() > 1;
+    }
     function announceText() {
+        if (!hasCounter())
+            return currentStep().title;
         return counterText() + ": " + currentStep().title;
     }
     function nextText() {
@@ -357,6 +362,6 @@ function Coachmark(props) {
             desligarEsc();
         };
     }, []);
-    return (_jsx(_Fragment, { children: show() ? (_jsx(_Fragment, { children: _jsx(Portal, { children: _jsxs("div", { className: rootClasses(), children: [isModal() ? (_jsx("div", { "aria-hidden": "true", className: "umds-coachmark__veil", onMouseDown: (event) => handleVeilMouseDown(event) })) : null, hasTarget && isModal() ? (_jsx("div", { "aria-hidden": "true", className: "umds-coachmark__cutout", style: cutoutStyle() })) : null, _jsxs("div", { role: "dialog", ref: cardRef, style: cardStyle(), "aria-modal": ariaModalText(), "aria-labelledby": titleId(), "aria-describedby": contentId(), tabIndex: -1, onKeyDown: (event) => handleKeyDown(event), className: cardClasses(), children: [_jsx("span", { "aria-live": "polite", className: "umds-coachmark__sr", children: announceText() }), _jsx(Text, { as: "span", variant: "body2", weight: "bold", color: "primary", "aria-hidden": "true", children: counterText() }), _jsx(Text, { as: "h2", variant: "subtitle1", weight: "bold", id: titleId(), children: currentStep().title }), currentStep().content ? (_jsx(Text, { as: "p", variant: "body2", color: "secondary", id: contentId(), children: currentStep().content })) : null, _jsxs("div", { className: "umds-coachmark__footer", children: [showSkip() ? (_jsx(Button, { variant: "text", size: "sm", onClick: (event) => fechar("skip"), children: skipText() })) : null, _jsxs("span", { className: "umds-coachmark__actions", children: [!isFirst() ? (_jsx(Button, { variant: "secondary", size: "md", onClick: (event) => handlePrevious(), children: previousText() })) : null, _jsx(Button, { variant: "primary", size: "md", onClick: (event) => handleNext(), children: nextText() })] })] })] })] }) }) })) : null }));
+    return (_jsx(_Fragment, { children: show() ? (_jsx(_Fragment, { children: _jsx(Portal, { children: _jsxs("div", { className: rootClasses(), children: [isModal() ? (_jsx("div", { "aria-hidden": "true", className: "umds-coachmark__veil", onMouseDown: (event) => handleVeilMouseDown(event) })) : null, hasTarget && isModal() ? (_jsx("div", { "aria-hidden": "true", className: "umds-coachmark__cutout", style: cutoutStyle() })) : null, _jsxs("div", { role: "dialog", ref: cardRef, style: cardStyle(), "aria-modal": ariaModalText(), "aria-labelledby": titleId(), "aria-describedby": contentId(), tabIndex: -1, onKeyDown: (event) => handleKeyDown(event), className: cardClasses(), children: [_jsx("span", { "aria-live": "polite", className: "umds-coachmark__sr", children: announceText() }), hasCounter() ? (_jsx(Text, { as: "span", variant: "body2", weight: "bold", color: "primary", "aria-hidden": "true", children: counterText() })) : null, _jsx(Text, { as: "h2", variant: "subtitle1", weight: "bold", id: titleId(), children: currentStep().title }), currentStep().content ? (_jsx(Text, { as: "p", variant: "body2", color: "secondary", id: contentId(), children: currentStep().content })) : null, _jsxs("div", { className: "umds-coachmark__footer", children: [showSkip() ? (_jsx(Button, { variant: "text", size: "sm", onClick: (event) => fechar("skip"), children: skipText() })) : null, _jsxs("span", { className: "umds-coachmark__actions", children: [!isFirst() ? (_jsx(Button, { variant: "secondary", size: "md", onClick: (event) => handlePrevious(), children: previousText() })) : null, _jsx(Button, { variant: "primary", size: "md", onClick: (event) => handleNext(), children: nextText() })] })] })] })] }) }) })) : null }));
 }
 export default Coachmark;

package/dist/components/DataTable/DataTable.css

@@ -207,6 +207,14 @@
   padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-nano); /* 6px: candidato a novo token; 8px */
 }
 
+/* Cabeçalho e linha de 44px (a altura de campo do DS). `height` na célula vale como mínimo: conteúdo mais
+   alto (avatar, botão) estica a linha. O documento imprime justo e fica fora. */
+.umds-datatable--compact:not(.umds-datatable--document) .umds-datatable__th,
+.umds-datatable--compact:not(.umds-datatable--document) .umds-datatable__td {
+  box-sizing: border-box;
+  height: var(--umds-semantic-field-height);
+}
+
 .umds-datatable--compact .umds-datatable__th--checkbox,
 .umds-datatable--compact .umds-datatable__td--checkbox {
   padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-nano); /* 6px: candidato a novo token; 4px; 8px */
@@ -273,6 +281,40 @@
   background: var(--umds-semantic-color-primary-light);
 }
 
+/* ── Tom por linha (rowTone) ──
+   Fundo claro da cor semântica; a linha selecionada ou destacada vence o tom (por isso o :not). Fica depois da
+   zebra para vencê-la. `muted` só esmaece o texto. */
+.umds-datatable__row--negative:not(.umds-datatable__row--selected),
+.umds-datatable__row--negative:not(.umds-datatable__row--selected).umds-datatable__row--striped {
+  background: var(--umds-semantic-color-feedback-negative-light);
+}
+
+.umds-datatable__row--positive:not(.umds-datatable__row--selected),
+.umds-datatable__row--positive:not(.umds-datatable__row--selected).umds-datatable__row--striped {
+  background: var(--umds-semantic-color-feedback-positive-light);
+}
+
+.umds-datatable__row--info:not(.umds-datatable__row--selected),
+.umds-datatable__row--info:not(.umds-datatable__row--selected).umds-datatable__row--striped {
+  background: var(--umds-semantic-color-feedback-info-light);
+}
+
+.umds-datatable__row--negative:not(.umds-datatable__row--selected):hover {
+  background: color-mix(in srgb, var(--umds-semantic-color-feedback-negative-light) 85%, var(--umds-semantic-color-background-white));
+}
+
+.umds-datatable__row--positive:not(.umds-datatable__row--selected):hover {
+  background: color-mix(in srgb, var(--umds-semantic-color-feedback-positive-light) 85%, var(--umds-semantic-color-background-white));
+}
+
+.umds-datatable__row--info:not(.umds-datatable__row--selected):hover {
+  background: color-mix(in srgb, var(--umds-semantic-color-feedback-info-light) 85%, var(--umds-semantic-color-background-white));
+}
+
+.umds-datatable__row--muted .umds-datatable__td {
+  color: var(--umds-semantic-color-neutral-dark-down); /* #565656: 7,3:1 sobre branco */
+}
+
 /* ── Linha destacada (selectedRowKeys / isRowSelected) ──
    Além do fundo, uma barra de 4px à esquerda: o destaque não depende só da cor. */
 .umds-datatable__row--highlighted > :first-child {

package/dist/components/DataTable/DataTable.d.ts

@@ -35,8 +35,13 @@ export interface DataTableColumn {
  * @property {Array<string|number>} selectedKeys - Chaves das linhas selecionadas (controlado;
  *   requer rowKey)
  * @property {string} variant - 'default' (tabela de interface) | 'document' (tabela de CONTEÚDO de documento: sem ordenação, seleção nem clique de linha, bordas finas, cabeçalho repetido e linha inteira por página na impressão)
- * @property {string} density - Densidade das células: 'default' | 'compact'. Com `variant="document"`,
- *   o compacto também leva a fonte a 12px (a escala do DS não tem 13px).
+ * @property {string} density - Densidade das células: 'default' | 'compact'. O compacto aperta o padding e
+ *   fixa a altura do cabeçalho e da linha em 44px (a altura de campo do DS; o conteúdo maior que isso cresce a
+ *   linha). Com `variant="document"`, o compacto também leva a fonte a 12px (a escala do DS não tem 13px).
+ * @property {string|function} rowTone - Tom por linha: nome do campo da linha que traz o tom, ou função
+ *   `(row, rowIndex) => tom`. Tons: 'negative' (vermelho claro), 'positive' (verde claro), 'info' (laranja claro)
+ *   e 'muted' (texto esmaecido). Sem tom, a linha segue o padrão; a linha selecionada ou destacada vence o tom.
+ *   O tom é decoração: diga o estado também em texto ou ícone (a cor sozinha não basta).
  * @property {string} headerVariant - Cabeçalho: 'default' (claro) | 'dark' (navy, texto claro; o cabeçalho
  *   escuro do CrisDoc). Cores pelos tokens `background-dark` e `neutral-light-pure`, então o tema acompanha.
  * @property {boolean} headerUppercase - Rótulos do cabeçalho em caixa alta. Opt-in; vale para qualquer
@@ -98,6 +103,8 @@ export interface DataTableProps {
     /** `document`: tabela de conteúdo de documento, imprimível e sem interação. @default 'default' */
     variant?: "default" | "document";
     density?: "default" | "compact";
+    /** Tom por linha: nome do campo ou função `(row, rowIndex) => 'negative' | 'positive' | 'info' | 'muted'`. */
+    rowTone?: string | ((row: Record<string, any>, rowIndex: number) => string | undefined);
     /** `dark`: cabeçalho navy com texto claro (o do CrisDoc). @default 'default' */
     headerVariant?: "default" | "dark";
     /** Rótulos do cabeçalho em caixa alta. @default false */

package/dist/components/DataTable/DataTable.js

@@ -511,9 +511,24 @@ function DataTable(props) {
             .filter(Boolean)
             .join(" ");
     }
+    function toneOf(row, index) {
+        if (!props.rowTone)
+            return "";
+        const bruto = typeof props.rowTone === "function"
+            ? props.rowTone(row, index)
+            : row[props.rowTone];
+        const tom = bruto === undefined || bruto === null ? "" : String(bruto);
+        return tom === "negative" ||
+            tom === "positive" ||
+            tom === "info" ||
+            tom === "muted"
+            ? tom
+            : "";
+    }
     function rowClasses(row, rowIdx) {
         return [
             "umds-datatable__row",
+            toneOf(row, rowIdx) ? "umds-datatable__row--" + toneOf(row, rowIdx) : "",
             isSelected(row, rowIdx) || isHighlighted(row, rowIdx)
                 ? "umds-datatable__row--selected"
                 : "",

package/dist/components/Input/Input.css

@@ -257,6 +257,15 @@
   outline-offset: 0; /* exceção ao offset 2px: o botão vive DENTRO do campo, e o afastamento invadiria a borda */
 }
 
+/* ── variant="ghost": a busca dentro de um painel, sem a borda escura ──
+   Só o repouso muda (fundo claro e borda clara). Hover, foco, erro, desabilitado e somente leitura vêm das
+   regras do campo padrão, que têm mais especificidade (o :where zera a das cadeias de :not aqui), então o
+   hover escurece a borda e o foco segue com borda azul e anel. A moldura clara não é o único sinal do campo: o ícone, o placeholder e o cursor o dizem. */
+.umds-input--ghost:where(:not(.umds-input--error):not(.umds-input--disabled):not(.umds-input--readonly)) .umds-input__container {
+  background-color: var(--umds-semantic-color-background-light);
+  border-color: var(--umds-semantic-color-neutral-light-medium);
+}
+
 /* ── borderless: o campo dentro de um grupo que já tem a moldura ──
    Sem borda, fundo e raio. O foco NÃO some: o anel do campo vira um contorno
    para dentro (WCAG 2.4.7), e o erro mantém a borda vermelha (a cor do erro não

package/dist/components/Input/Input.d.ts

@@ -36,6 +36,7 @@ export interface InputAction {
  * @property {InputAction[]} iconsRight - Botões de ação com ícone à direita
  * @property {IconProp} iconRight - Ícone decorativo à direita (não é botão, some para o leitor de tela). Para ação clicável, use `iconsRight`.
  * @property {boolean} grouped - O campo vive dentro de um contêiner que já desenha a moldura E o foco (o campo de chips: as tags e o input na mesma caixa). Implica `borderless`, e tira a altura de campo, o padding e o anel de foco próprio: o contêiner mostra o foco com `:focus-within`. Sem esse foco no contêiner, quem usa teclado perde o indicador (WCAG 2.4.7).
+ * @property {string} variant - 'default' | 'ghost'. O `ghost` é o campo de busca dentro de um painel: fundo cinza claro e borda clara (a escura do padrão some em repouso). O hover escurece a borda, e o foco, o erro, o desabilitado e o somente leitura são os do campo padrão (o anel de foco continua inteiro). Sem a prop, nada muda.
  * @property {boolean} borderless - Sem borda, fundo e raio: o campo dentro de um grupo que já tem a moldura (um Select e um Input lado a lado numa mesma caixa). O foco continua visível, em contorno, e o erro mantém a borda vermelha.
  * @property {string} mask - Máscara simples: 'cpf' | 'cnpj' | 'cep' | 'phone'. O valor exibido e o que chega em `onChange` já vêm formatados (para só os dígitos, `valor.replace(/\D/g, "")`). Aceita só dígitos, limita o tamanho e abre o teclado numérico no celular.
  * @property {function} onChange - Callback acionado A CADA TECLA (recebe o novo valor string), nos dois frameworks. O blur sai em `onBlur`.
@@ -93,6 +94,8 @@ export interface InputProps {
     iconsRight?: InputAction[];
     /** Ícone decorativo à direita (não clicável, `aria-hidden`). Para ação, use `iconsRight`. */
     iconRight?: IconProp;
+    /** `ghost`: o campo de busca dentro de um painel, sem a borda escura em repouso. @default 'default' */
+    variant?: "default" | "ghost";
     /** Sem borda, fundo e raio, para o campo dentro de um grupo que já tem a moldura. O foco e o erro continuam visíveis. @default false */
     borderless?: boolean;
     /**

package/dist/components/Input/Input.js

@@ -52,6 +52,7 @@ function Input(props) {
             props.numberSpinner ? "umds-input--number-spinner" : "",
             props.borderless || props.grouped ? "umds-input--borderless" : "",
             props.grouped ? "umds-input--grouped" : "",
+            props.variant === "ghost" ? "umds-input--ghost" : "",
             `umds-input--${props.size || "md"}`,
             props.className,
         ]