@1doc/1ds-react 2.13.0 → 2.15.0

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # @1doc/1ds-react
 
+## 2.15.0
+
+### Minor Changes
+
+- 7e46f1c: Avatar: volta sozinho para as iniciais quando a foto falha, e a prop `name` gera as iniciais ("Cris Lima" → "CL") e o nome acessível.
+- 7e46f1c: Dropdown: `onSelect` em cada item, e campos próprios no item (`command`, `payload`...) que voltam no `onSelect` sem cast.
+- 7e46f1c: EmptyState: `fill` para ocupar e centralizar no espaço disponível (o vazio de uma coluna que rola); no List, `emptyFill`.
+- 7e46f1c: ListItem: `variant="primary"` (item em destaque, azul-claro com hover próprio) e `liClassName`/`liStyle` para o `li`, para entrada escalonada.
+- 532cc7f: feat(tokens)!: sombras e tipografia espelham a biblioteca "Design tokens — Redesign" do Figma
+
+  QUEBRA a API dos tokens de sombra e de tipografia semântica. Como os tokens estão em 0.x, sai como minor.
+
+  **Sombras** — 18 tokens `--umds-semantic-shadow-{bottom,top,center}-{xs,sm,md,lg,xl,2xl}`, um para cada estilo
+  `Shadow/<Direção>/<Tamanho>` do Figma.
+  - Saem `--umds-semantic-shadow-xs|sm|md|lg`: troque por `--umds-semantic-shadow-bottom-xs|sm|md|lg` (mesmo valor).
+  - Saem os primitivos `--umds-primitive-shadow-level-1..4`, que não existem no Figma. Equivalência usada no core:
+    `level-1` → `bottom-md`, `level-2` → `bottom-lg`, `level-3` → `bottom-xl`, `level-4` → `bottom-2xl`.
+    Muda o visual de `Box` (`shadow="level1|2|3"`, a prop continua igual), `Tooltip`, `Chart` (tooltip) e `Coachmark`.
+  - Sombra por componente, decisão de design:
+    - `BottomSheet` (painel e rodapé) e `BottomNavigation` (barra `raised`): `shadow-top-sm`, a sombra sobe a partir da borda de baixo.
+    - `Modal` e `ConfirmDialog`: `shadow-center-xl`. O rodapé fixo do `Modal` troca o literal `0 -4px 16px rgba(0,0,0,.08)` por `shadow-top-md`.
+    - Listas dos campos de formulário (`Select`, `MultiSelect`, `Combobox`, `DatePicker`, `TimePicker`, `PhoneInput`): `shadow-bottom-md`.
+
+  **Tipografia** — os papéis semânticos passam a ser os do Figma, cada um com cinco pesos:
+  `--umds-semantic-typography-<papel>-{font-size,line-height,letter-spacing}` e
+  `--umds-semantic-typography-<papel>-font-weight-{light,regular,medium,semibold,bold}`, com `<papel>` em `giant`,
+  `display`, `heading-h1..h4`, `title-lg|md|sm`, `paragraph`, `label` e `caption`.
+  - Saem `display-giant`, `display-lg`, `heading-h5`, `heading-h6`, `body-*` e `label-lg|md|sm`, e o `font-weight` único
+    de cada papel. Equivalências: `display-giant` → `giant`, `display-lg` → `display`, `heading-h5` → `title-lg`,
+    `heading-h6` → `title-md`, `body-lg` → `title-md`, `body-md` → `title-sm`, `body-sm` → `paragraph`,
+    `label-md` → `label`, `label-sm` → `caption`, `label-lg` → `title-sm`.
+  - Valores alinhados ao Figma: `giant` e `display` com entrelinha 120% e espaçamento −0,01em (eram 100% e −0,02em);
+    `label` com entrelinha 133% e 0,02em; `caption` em 170%.
+  - Nenhum componente usava os tokens semânticos de tipografia; `Text` e os demais seguem nos primitivos, sem mudança.
+
+  Atualize `@1doc/1ds-tokens` para a 0.8.0 junto com o react ou o vue: o CSS dos componentes usa os nomes novos e, com os tokens antigos, as sombras somem. A faixa do peer segue `>=0.1.0` (o changesets exige que ela inclua a versão atual; ver `.agent/troubleshooting/tokens-peerdep-forca-major.md`).
+
+### Patch Changes
+
+- 7e46f1c: AppShell: o conteúdo herda a cor de texto do tema. No tema escuro, um título sem `color` não fica mais preto.
+- 7e46f1c: StatCard: borda e superfície do Card (`neutral-light-medium` e `background-elevated`). Lado a lado com um Card, o contorno é o mesmo, e no tema escuro o fundo é o elevado.
+- 7e46f1c: StatCard: abaixo de 240px de largura a segunda medida desce para a linha de baixo, em vez de se sobrepor à principal. O cartão com segunda medida ocupa a largura do pai.
+- 7e46f1c: Tooltip: no tema escuro o balão padrão usa a superfície elevada e ganha o traço do Card, e não some mais no fundo. Nos temas claros e no alto contraste nada muda.
+- 7e46f1c: Vue: o `index.d.ts` não declara mais `GlobalComponents`, que colidia com o PrimeVue e quebrava o `vue-tsc` em telas que nem usam o 1DS. Quem registra o 1DS com `app.component` liga a declaração com `"types": ["@1doc/1ds-vue/global"]`.
+
+## 2.14.0
+
+### Minor Changes
+
+- aca81ec: Counter (novo): número que conta até o valor, para KPI de painel e total de páginas. Formato do `Intl.NumberFormat` (pt-BR por padrão), `prefix`/`suffix`/`decimals`, largura do valor final reservada, leitor de tela ouvindo só o valor final e respeito a `prefers-reduced-motion`.
+- aca81ec: ListItem: slot `actions`, renderizado no `li` ao lado do elemento clicável (o ⋮ de menu deixa de ficar dentro do link). No Vue, o ListItem com `li` passa a ter raiz única, então funciona dentro de `TransitionGroup`.
+- aca81ec: Tooltip: a cópia escondida do texto não escapa mais de área com rolagem (o wrapper ganhou `position: relative`), e a seta acompanha o gatilho quando o balão é empurrado para caber perto da borda.
+- aca81ec: Dropdown: `href`, `target` e `rel` no `DropdownItem`. Com `href`, o item é um `<a role="menuitem">` (Ctrl+clique e nova aba funcionam), e o `onSelect` continua sendo chamado.
+- aca81ec: Button: `href`, `target` e `rel`. Com `href`, o Button é um `<a>` com a mesma aparência; desabilitado, volta a ser `<button disabled>`. O hover do `variant="icon"` virou uma camada translúcida da cor do ícone: no fundo claro o cinza é o mesmo de antes, e sobre fundo colorido não vira mais um quadrado branco.
+- aca81ec: StatCard: `secondaryTone` (cor da segunda medida), `loading` (os números viram Skeleton e o cartão ganha `aria-busy`) e `value` aceitando um nó, como um `Counter` (slot `value` no Vue).
+
+## 2.13.1
+
+### Patch Changes
+
+- 1a927c5: StatCard: a segunda medida (`secondaryValue`) passa a ter o mesmo tamanho e peso do número principal, em todas as combinações (`md`, `sm` e `labelPosition="top"`). Com o rótulo no topo, o `secondaryLabel` fica na mesma linha da `description` ("Geral" ao lado de "Meu Setor"), em vez de colado embaixo do número.
+
 ## 2.13.0
 
 ### Minor Changes
@@ -50,7 +112,6 @@
 
   REMOÇÃO de token, não acréscimo. O DS não cria token novo: a família monoespaçada (introduzida no 0.6.0) volta a não
   existir. Como estamos em 0.x, a remoção sai como minor nos tokens.
-
   - `Kbd` e `CodeBlock` passam a usar `--umds-semantic-font-family-base`: o texto da tecla e do código sai na fonte do DS,
     não mais monoespaçada (muda a largura dos caracteres; o espaço e as quebras de linha do `CodeBlock` seguem mantidos).
   - `RichTextEditor`: a opção "Monoespaçada" da ferramenta `fontFamily` sai (o label `fontFamilyMono` também). Fica só a
@@ -79,7 +140,6 @@
   ```
 
 - 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.
@@ -129,7 +189,6 @@
   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.
@@ -200,7 +259,6 @@
 - 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
@@ -223,7 +281,6 @@
 - 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,
@@ -362,7 +419,6 @@
 - 82e85c5: feat(datatable): cabeçalho escuro, zebra, destaque de linha, vazio com ícone, `hideHeader` e linhas hierárquicas (`treeData`)
 
   Tudo opt-in; sem as props novas a tabela é a mesma.
-
   - `headerVariant="dark"`: cabeçalho navy com texto claro (`background-dark` e
     `neutral-light-pure`, então o tema acompanha). `headerUppercase`: caixa alta
     nos rótulos, vale para qualquer cabeçalho.
@@ -450,7 +506,6 @@
   ```
 
 - 76c0087: feat(listitem): `tooltip`, `standalone` e atributos HTML só no elemento interativo
-
   - `tooltip`: vira o atributo HTML `title` do `button`, `a` ou `div` (a dica nativa do
     navegador). `title` continua sendo o título da linha, não o atributo.
   - `standalone`: renderiza sem o `li`, só o elemento interativo, para usar fora de um
@@ -476,7 +531,6 @@
 - 3500910: feat(richtexteditor): alinhamento, imagem e tabela simples na `toolbar`
 
   Opt-in: a barra padrão não muda. Entram na `toolbar` por nome:
-
   - `alignLeft`, `alignCenter`, `alignRight`, `alignJustify`: botões de liga/desliga
     que seguem o cursor (`aria-pressed`). O valor guarda `text-align` nos blocos.
   - `image`: abre um painel (como o do link) com o endereço da imagem, o arquivo
@@ -522,7 +576,6 @@
 
   Opt-in na `toolbar`: `fontFamily`, `fontSize` e `textColor`. Cada um abre um painel abaixo da
   barra e aplica ao texto selecionado, embrulhando-o num `<span style="...">`:
-
   - `fontFamily`: padrão ou monoespaçada (`var(--umds-semantic-font-family-base|mono)`), num `Select`.
   - `fontSize`: 12, 14, 16, 20 e 24px, os degraus da escala do DS (`var(--umds-primitive-font-size-*)`).
   - `textColor`: a paleta do DS, num `ColorPicker` `xs`; o valor guarda o `var()` do token escolhido.
@@ -565,7 +618,6 @@
 - 22a79d8: feat(select): `open`/`onOpenChange`, gatilho com ícone e amostra de cor, variantes `search` e `combo`, lista por cima de diálogo e `placement="auto"` que mede o ancestral
 
   Tudo opt-in; o Select sem as props novas se comporta como antes, fora de diálogo.
-
   - `open` e `onOpenChange(open)`: a lista controlada de fora. O clique, o teclado,
     o clique fora, o Esc e a escolha de uma opção avisam o pai, que decide o novo
     `open`. Sem `open`, o Select abre e fecha sozinho e também avisa. É o que deixa o
@@ -605,7 +657,6 @@
 - f7fa5dd: feat(select): o filtro no tamanho do CrisDoc, com cor por opção (`option.color`)
 
   Para substituir o `FiltroSelect` do app:
-
   - As variantes de filtro (`filter`, `search`, `combo`) nascem no tamanho `sm` (32px, fonte de
     12px) quando `size` não é passado; `size="md"` continua valendo. O `Select` padrão não muda.
   - O gatilho do `filter` tem fundo branco com contorno azul. O azul-claro só vem depois de
@@ -635,7 +686,6 @@
   ```
 
 - b9f0813: feat(statcard): segunda medida (`secondaryValue`/`secondaryLabel`) e `valueTone`
-
   - `secondaryValue` e `secondaryLabel`: a segunda medida do cartão, menor (20px), à direita da
     principal, separada por um filete ("22,31% Meu Setor | 14,11% Geral"). No HTML vem depois do
     resto, então o leitor de tela lê a medida principal inteira antes. `0` aparece; vazio e
@@ -657,7 +707,6 @@
   ```
 
 - a4b6bb7: feat(toast): ação (`actionLabel`/`onAction`) e lista de detalhes (`details`)
-
   - `actionLabel` + `onAction`: um botão depois do texto ("Desfazer", "Ver processo").
     Acionar chama `onAction` e depois fecha o toast (`onClose`). O botão só aparece com os
     dois. O botão de fechar continua ao lado.
@@ -720,7 +769,6 @@
   No React o `content` do item já aceitava qualquer nó. No Vue ele era interpolado
   como texto, então o painel só aceitava string. Agora, no Vue, cada item pode ter
   um slot com o próprio conteúdo.
-
   - `#content-<id>`: slot com escopo por item (`<id>` é o `id` do item), que recebe
     `{ item }` e vale sobre o `content` de texto daquele item. Itens sem slot
     continuam mostrando o texto. O `postbuild` liga o slot ao `Accordion.vue`
@@ -741,7 +789,6 @@
 - 3d9472d: feat(attachmentcard): `status="ai"`, painel livre (`panel`), `panelWidth` e `closePanelOnAction`
 
   Opt-in; sem as props novas o cartão é o mesmo.
-
   - `status="ai"`: selo de recurso de IA, no roxo da IA (`ai-light` / `ai-dark`, os
     mesmos tokens do `AILabel`), com a varinha como ícone padrão (`statusIcon`
     continua mandando). O ícone do painel também é a varinha.
@@ -778,7 +825,6 @@
 - 2c0dafb: feat(avatargroup): `overlap`, `ring` e `overflowCount`
 
   Opt-in; sem as props novas o grupo é o mesmo.
-
   - `overflowCount`: quantas pessoas existem além das de `avatars`. O "+N" deixa de
     exigir N itens-fantasma: com 16 responsáveis, passe os 4 primeiros e
     `overflowCount={12}`. Soma com o que passar de `max` dentro de `avatars`, e os
@@ -808,7 +854,6 @@
   Tudo opt-in: sem as props novas, o HTML e o visual são os mesmos.
 
   **Badge**
-
   - `size="2xs"`: 16px de altura, fonte de 10px, raio 4. A fonte de 10px não está
     na escala do DS (o menor degrau é 12px), então é um literal comentado no CSS;
     se o mínimo de 12px for decisão de acessibilidade, o 2xs é o que sai.
@@ -822,7 +867,6 @@
     precisa de `position: relative`.
 
   **Tag**
-
   - `size="xs"`: 18px (`line-height: 1`, padding 2 e 8, fonte 12, ícone 12). Foi
     criado um tamanho novo em vez de mexer no `sm` (27px), para não encolher quem
     já usa `sm`. O × e o ícone clicável mantêm o alvo de 24px com margem negativa.
@@ -845,7 +889,6 @@
 
   O `Box` ganha as props de item flex do `Stack` e a troca de elemento, com os
   mesmos nomes e valores. Sem as props novas, o HTML e as classes são os mesmos.
-
   - `as`: `div` (padrão), `span`, `ul`, `ol`, `li`, `section`, `nav`, `header`,
     `footer`, `form`. `ul` e `ol` saem sem marcador, margem e recuo (o padding do
     Box continua valendo) e com `role="list"`. Com `as="form"`, `onSubmit` recebe
@@ -874,7 +917,6 @@
   sem `Stack` por dentro nem flex no CSS do produto. As cinco props têm os mesmos
   nomes e valores do `Stack`; qualquer uma delas liga o `display: flex`. Sem
   nenhuma, o `Box` segue sendo um bloco comum (API antiga intacta).
-
   - `direction`: `"vertical"` (padrão quando o flex está ligado) | `"horizontal"`.
   - `gap`: degraus da escala, mais `"none"`. Diferente do `Stack`, não tem valor
     padrão: sem `gap` os filhos ficam colados.
@@ -908,7 +950,6 @@
 
   Para barra de ações (editor, filtros, linha de card), onde nenhum botão é a
   ação principal e o azul atrapalha. Sem as props novas, nada muda.
-
   - `variant="neutral-text"`: texto cinza (`neutral-dark-down`), sem borda e sem
     fundo; hover em `neutral-light-medium`. O `neutral` continua sendo o
     contornado cinza, então "neutro" cobre os dois: contornado (`neutral`) e
@@ -932,7 +973,6 @@
 
   Peça nova: visão de mês e de semana, com eventos por dia, sem biblioteca de
   datas (o `Intl` escreve os nomes de mês e de dia).
-
   - `events`: lista plana `{ date, title, color?, time?, id? }`. `date` é
     `YYYY-MM-DD`, data-hora ISO ou `Date`. A grade agrupa por dia e ordena por
     `time`.
@@ -987,7 +1027,6 @@ escondidos)`). O corte é por QUANTIDADE, não por altura. Semana: sete colunas
 - 33719b6: feat(chips): `size="xs"` e × com moldura circular (`circularRemove`)
 
   Opt-in; sem as props novas o `Chips` é o mesmo.
-
   - `size="xs"`: 20px de altura, padding lateral 8, fonte de 12px e × de 8px. A
     altura é `calc(spacing-xxxs + spacing-quarck)` (16 + 4), sem token novo. O
     CrisDoc usa fonte de 11px, que não está na escala do DS; fica o degrau de 12px.
@@ -1014,7 +1053,6 @@ escondidos)`). O corte é por QUANTIDADE, não por altura. Semana: sete colunas
   um cartão, enquanto o resto da página escurece e o alvo fica destacado num
   recorte (uma caixa transparente cuja sombra escurece o resto, sem máscara nem
   SVG).
-
   - `steps`: `{ target?, title, content?, placement? }`. `target` é um seletor CSS
     (`"#aba-fluxos"`), um elemento, uma ref do React (`{ current }`), uma ref do Vue
     (`{ value }`) ou uma função que devolve um deles. Sem alvo (ou alvo que não
@@ -1060,7 +1098,6 @@ escondidos)`). O corte é por QUANTIDADE, não por altura. Semana: sete colunas
   (`--umds-primitive-blue-pure`): guarde o nome e pinte com `var(${valor})`. Como
   primitivo não muda com o tema, a cor escolhida é a mesma no claro e no escuro, o
   que é o certo para cor de dado (marcador, tipo de documento, setor).
-
   - `radiogroup`: Tab entra na amostra escolhida (ou na primeira), setas movem a
     escolha, Home e End vão às pontas, amostra desabilitada é pulada. Cada amostra
     tem nome acessível ("Azul escuro") e a escolhida ganha ícone de marcação e anel
@@ -1091,7 +1128,6 @@ escondidos)`). O corte é por QUANTIDADE, não por altura. Semana: sete colunas
 
   A `DataTable` passa a aceitar markup na célula nos dois frameworks. API antiga
   intacta: sem as props e slots novos, o HTML e as classes são os mesmos.
-
   - Célula livre. No React, `column.render(row, rowIndex)` já devolvia nó e
     continua assim (o docblock agora diz). No Vue, o retorno do `render` continua
     sendo tratado como texto, e a célula com markup vem do slot `#cell-<key>`,
@@ -1137,7 +1173,6 @@ row, rowIndex)` no React, ou o slot `#row-group` (`{ label, row, rowIndex }`)
 
   **`DescriptionList`**, para os pares rótulo/valor (o `DocPares` do CrisDoc não
   cabia na tabela: não tem cabeçalho de coluna). `<dl>` com `<dt>` e `<dd>`:
-
   - `items`: `{ label, value, id? }`. Valor vazio mostra "—" (`emptyValue`).
   - `layout="inline"` (padrão): grade de bordas finas, rótulo pintado e sem quebra
     à esquerda, valor à direita; `fit` encolhe até o conteúdo.
@@ -1162,7 +1197,6 @@ row, rowIndex)` no React, ou o slot `#row-group` (`{ label, row, rowIndex }`)
 
   Para o "Anexar arquivo" de um botão ou o "Alterar foto" de um link, sem a caixa
   de arrastar. Opt-in; `base` e `card` não mudam.
-
   - `variant="trigger"`: o conteúdo que você passa (React: `children`; Vue: slot
     padrão) é o gatilho. O clique nele abre o seletor (o clique sobe até o
     envoltório, então o Enter num `Button` também funciona), e `accept`,
@@ -1188,7 +1222,6 @@ row, rowIndex)` no React, ou o slot `#row-group` (`{ label, row, rowIndex }`)
 - 0e89b88: feat(iconpicker): novo `IconPicker`, a grade de ícones com busca
 
   Peça nova, sem dependência: os ícones vêm por prop.
-
   - `icons`: objetos do Font Awesome importados (`faUser`, `faFolder`...), ou
     `{ icon, label?, keywords? }` quando o nome ou a busca precisam de ajuda. O nome
     de um ícone sem `label` é o `iconName` sem hífen ("file lines"); `iconLabel`
@@ -1222,7 +1255,6 @@ row, rowIndex)` no React, ou o slot `#row-group` (`{ label, row, rowIndex }`)
   ```
 
 - 4d0cb08: feat(input): `onChange` a cada tecla no Vue, `mask`, `iconRight` e `borderless`
-
   - **`onChange` a cada tecla no Vue (paridade com o React).** O campo passa a
     escutar `input` além de `change`. Antes, no Vue, `onChange` só disparava quando
     o campo perdia o foco (o evento `change` nativo). Os dois eventos entram no
@@ -1264,7 +1296,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
   semântico; os dois componentes abaixo já o usam.
 
   **`Kbd`**: uma tecla ou uma combinação, em `<kbd>`.
-
   - Uma tecla vai como conteúdo (`<Kbd>Esc</Kbd>`); uma combinação em `keys`
     (`["Ctrl", "Shift", "P"]`), com `separator` entre as teclas (padrão `+`). Cada
     tecla é um `<kbd>` dentro do `<kbd>` do conjunto, que é como o HTML diz
@@ -1273,7 +1304,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
     `md`. Raiz única: `title`, `data-*`, `aria-*` e ouvintes chegam ao elemento.
 
   **`CodeBlock`**: trecho de código, JSON ou log, com borda, rolagem e cópia.
-
   - O texto vem por `code` ou como conteúdo, com espaços e quebras mantidos. Linha
     longa rola na horizontal, ou quebra com `wrap`; `maxHeight` (px) limita a
     altura e rola na vertical.
@@ -1298,7 +1328,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
   paginação ao redor continuam montados (e o foco no campo de busca não se perde),
   porque só o miolo troca. A lista não conta filhos: `isEmpty` é a decisão de
   quem a usa (`:is-empty="!itens.length"`).
-
   - Texto: `emptyTitle` (padrão "Nenhum item encontrado"), `emptyDescription`,
     `emptyIcon` (objeto do Font Awesome), `emptySize` (`sm` padrão, `md`, `lg`).
   - Ação: `emptyActionLabel` com `onEmptyAction`. Sem o callback o botão não
@@ -1327,7 +1356,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
   Peça nova. O `ListItem` é a linha cujo alvo de clique e de foco é a linha
   toda, com conteúdo livre. Renderiza um `<li>` com UM `button`, `a` ou `div`
   dentro, por isso vive num `List` (ou num `ul`/`ol`, como `Stack as="ul"`).
-
   - `as`: `button` | `a` | `div`. Sem `as`, vira `a` quando há `href` e `button`
     nos outros casos. `div` é a linha que só mostra; com `onClick` ganha
     role="button", tabindex 0, Enter e Espaço. `target="_blank"` põe
@@ -1362,7 +1390,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
 - eeb6a16: feat(modal): `variant="primary"`, `width`/`maxWidth`, `windowControls` em lista e `responsive`; o Esc respeita quem já o usou
 
   Tudo opt-in; sem as props novas o modal é o mesmo.
-
   - `variant="primary"`: cabeçalho cheio na cor primária (título, subtítulo e
     controles em `neutral-light-pure`, hover em `primary-dark`). É o modal base com
     as três faixas, não o diálogo de feedback.
@@ -1405,7 +1432,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
 
   Peça nova: uma árvore desenhada de cima para baixo, com linhas ligando cada pai
   aos filhos, em que os nós com filhos expandem e recolhem. Sem dependência.
-
   - `nodes`: lista de nós raiz `{ id, title, subtitle?, children? }`. Mais de uma
     raiz funciona (floresta).
   - O desenho é calculado, não aninhado (o Mitosis não gera componente recursivo de
@@ -1443,7 +1469,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
 
   Peça nova para códigos curtos recebidos por outro canal (autenticação em duas
   etapas, confirmação de e-mail ou telefone).
-
   - `length` caixas (6 por padrão). Digitar avança o foco; Backspace apaga e, em
     caixa vazia, volta e apaga a anterior; setas, Home e End movem.
   - Colar o código inteiro em qualquer caixa distribui os caracteres (um pedaço
@@ -1470,7 +1495,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
   ```
 
 - d89ebe3: feat(popover): `maxHeight` para o corpo do painel
-
   - `maxHeight`: altura máxima do corpo, que rola além dela. Número vira px; texto
     vai como CSS (`"60vh"`). `"none"` deixa o corpo crescer com o conteúdo, como
     no painel "Colunas do card" do CrisDoc.
@@ -1490,7 +1514,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
   Peça nova, sobre `contenteditable` e `document.execCommand`. Sem dependência
   nova: o primeiro corte é o que as telas de despacho, resposta e descrição de
   serviço pedem.
-
   - Ferramentas: negrito, itálico, sublinhado, tachado, lista com marcadores, lista
     numerada, link, desfazer, refazer e limpar formatação. A barra se escolhe por
     `toolbar` (a ordem do array é a da tela, `"|"` é um separador): a padrão traz
@@ -1537,7 +1560,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
 - b02f4ff: feat(select): `placement` (a lista abre para cima) e variante `filter` com opção "sem filtro" e rodapé
 
   Tudo opt-in; sem as props novas o `Select` é o mesmo.
-
   - `placement`: `bottom` (padrão), `top` ou `auto`. O `auto` mede o espaço na hora
     de abrir e abre para cima só se a lista (altura estimada, no máximo os 300px
     do CSS) não cabe embaixo e há mais espaço em cima, como o campo no rodapé de
@@ -1573,7 +1595,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
 
   O `Stack` passa a cobrir o que o produto ainda escrevia em CSS próprio. API
   antiga intacta: sem as props novas, o HTML e as classes são os mesmos.
-
   - `gap="none"` zera o espaço (antes só havia os degraus da escala).
   - `as`: `div` (padrão), `span`, `ul`, `ol`, `li`, `section`, `nav`, `header`,
     `footer`, `form`. `ul` e `ol` saem sem marcador, margem e recuo, com
@@ -1607,7 +1628,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
 - 1d59843: feat(statcard): `labelPosition="top"` e `infoTooltip`
 
   Opt-in; sem as props novas o `StatCard` é o mesmo.
-
   - `labelPosition="top"`: o rótulo vai para o topo do cartão, acima do ícone e do
     número, e o número passa a 32/800 (o degrau `font-size-lg` do DS), como no
     painel da 1Doc. Só a posição visual muda: no HTML o número continua antes do
@@ -1636,7 +1656,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
   muda o layout, e o `Tabs` ganha uma `div` de barra com o mesmo comportamento).
 
   **Tab**
-
   - `count` (número ou texto): pílula de 18px ao lado do texto, azul na aba ativa
     (`primary-pure`) e cinza nas outras (`neutral-light-medium`). O `0` aparece. O
     número entra no nome acessível da aba ("Todas 31").
@@ -1647,7 +1666,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
   - `closeLabel`: prefixo do nome acessível do ×, para traduzir ("Close Doc 1").
 
   **Tabs**
-
   - `onAdd(event)`: mostra o "+" logo depois da última aba, **fora** do
     `role="tablist"` (o tablist só pode ter abas). `addLabel` traduz o nome
     ("Adicionar aba" por padrão).
@@ -1671,7 +1689,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
 - 96e752b: feat(tooltip): `variant="dark"` compacto e `maxWidth`
 
   Opt-in; sem as props novas o `Tooltip` é o mesmo.
-
   - `variant="dark"`: balão escuro e compacto (padding 4/8, raio 4, teto de 220px)
     para ícone, sigla e botão de barra de ferramentas. Fundo `background-dark` e
     texto `neutral-light-pure`: o par invertido do tema, então o contraste vale nos
@@ -1762,7 +1779,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
   regressão silenciosa das props novas (`as`, `gap="none"`...).
 
   Descartados em silêncio, antes desta correção:
-
   - ouvintes: `@click`, `@keydown`, `@dragstart`, `@drop`, `@paste`, `@mousedown`...
   - atributos fora da lista: `tabindex` (minúsculo), `draggable`...
   - `v-show` e o `$el` do `ref` do componente (apontavam para o nó de âncora do
@@ -1797,7 +1813,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
 - 0fc7a82: fix(vue): `Text`, `Grid` e `Logo` repassam `title`, `style` e `aria-*`; `Button` e `DataTable` param de sujar o DOM
 
   Quatro defeitos que só existiam no Vue gerado (o React estava certo):
-
   - `Text`, `Grid` e `Logo` descartavam `title`, `style`, `aria-*` e `data-*`. O
     laço `for (k in props)` do `htmlAttrs` compilava para `props.props`, que não
     existe. O passo `postbuild` do core passa a ler `props` e `useAttrs()` (o que
@@ -1827,7 +1842,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
   leitor de tela — ganhou prop. Sem a prop, nada muda: o padrão é o português de
   antes, byte a byte. Com ela, um produto em outro idioma deixa de mostrar ou ler
   português.
-
   - `AILabel`: `sourcesLabel`, `notIncludedLabel`.
   - `AIContent`: `label`, `ariaLabel`, `explanationTitle`, `sourcesLabel`,
     `notIncludedLabel` (repassados ao selo interno, que antes não recebia nenhum).
@@ -2052,7 +2066,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
 
   Família nova de gráficos, sem biblioteca externa: o Mitosis desenha o SVG e o
   resultado é o mesmo no React e no Vue.
-
   - `BarChart` — barras verticais, com séries agrupadas lado a lado e suporte a
     valores negativos (a barra arredonda na ponta do dado, nunca na base).
   - `LineChart` — uma ou mais séries; `null` interrompe a linha em vez de cair a
@@ -2171,7 +2184,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
 
   E no `Dropdown`, dois defeitos de gatilho achados ao escrever o teste — mesma
   raiz, o `<span>` wrapper não é o gatilho real:
-
   - o **Escape fechava o menu e largava o foco no `<body>`**: quem recebia o
     `focus()` era o wrapper, que fica sem `tabindex` quando o slot já traz um
     `Button`, e `focus()` num span sem tabindex é no-op;
@@ -2189,7 +2201,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
 ### Minor Changes
 
 - 3d2977e: fix(app-header): menu do usuário fora do botão, ícones sem registro e barra que não estoura
-
   - O bloco do usuário vira um `<button>` de verdade (Enter/Espaço nativos) e o
     `userMenu` é renderizado ao lado dele, não dentro — clicar no menu não
     dispara mais `onUserClick`. Prop nova `userMenuOpen` liga `aria-haspopup` e
@@ -2288,14 +2299,12 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
 
   Agora, sem `variant`, o `Modal` é o modal base da 1Doc — o "Criar Novo
   Documento", medido em `NovoDocumentoModal.css`:
-
   - **cabeçalho fixo** com título (16/700), subtítulo (12px) e divisor;
   - **corpo**, o único que rola;
   - **rodapé fixo** com divisor, sombra que o levanta, região de apoio à esquerda
     e ações à direita.
 
   Props novas:
-
   - `windowControls` — restaurar · expandir · tela cheia · minimizar, antes do ×.
     É tudo ou nada: ou o modal tem só o ×, ou o conjunto inteiro. Ligado, o modal
     muda de tamanho sozinho (780px · 1120px · tela cheia).
@@ -2447,7 +2456,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
 - fa15735: **App shell: `AppShell`, `AppHeader` e `AppSidebar`.**
 
   Era a maior lacuna apontada pela auditoria interna — o padrão de layout da 1Doc estava escrito e mesmo assim cada produto o reconstruía do zero. Só no protótipo são ~1.000 linhas entre `App.tsx`, `Header.tsx`, `Subheader.tsx` e CSS.
-
   - **`AppShell`** — a moldura. Cabeçalho e barra não rolam; só o conteúdo rola. Traz as duas linhas que faltam em quase toda implementação manual: `min-height: 0` (sem ela a rolagem escapa para o body e o header "fixo" sobe junto) e `min-width: 0` (sem ela uma tabela larga empurra o layout inteiro).
   - **`AppHeader`** — barra de 56px com marca, navegação e ações. O que vai dentro é do produto.
   - **`AppSidebar`** — 48px fechada, 248px aberta. Com a barra fechada o rótulo **continua no HTML**, só sai da vista: trocá-lo por um ícone solto deixaria a navegação muda para leitor de tela.
@@ -2457,7 +2465,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
   **Paridade com o protótipo: 16 de 22 medidas batem exatamente.** As 6 restantes não têm valor exato na escala do DS — nos casos de espaço e tamanho, os dois degraus vizinhos ficam à mesma distância do protótipo, e bater com ele exigiria inventar token. A regra aplicada foi cor e medida sempre 100% do design system, escolhendo o valor mais próximo. A conta é refeita com `node scripts/verifica-paridade-shell.mjs`.
 
 - 2a86d8c: Três componentes novos na trilha **Preview**, para telas onde parte do conteúdo ou parte da decisão vem de um modelo:
-
   - **`AILabel`** — selo de conteúdo gerado, com painel de explicabilidade que responde de onde veio, o que não entrou e o que fazer se estiver errado.
   - **`AIContent`** — envolve conteúdo gerado. Quando o usuário edita, o tratamento de IA **sai**: a partir dali o texto é dele, e manter a marca atribuiria autoria errada. Mantém a ação de reverter para a sugestão.
   - **`ConfirmAIAction`** — conteúdo para o `ConfirmDialog` quando a ação foi sugerida por IA. Escalona a confirmação pelo risco e lista o que será afetado. Cascata conta como risco alto mesmo com cada passo reversível.
@@ -2469,7 +2476,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
 - 7c44c6d: **As peças que faltavam para reproduzir a tela da 1Doc:** `AppSubheader`, `SidePanel`, `AppNavItem` e `StatCard`, somadas ao `AppShell`, `AppHeader` e `AppSidebar`.
 
   Levantadas medindo o protótipo, não por suposição: o `SidePanel` tem 254px porque é o número do protótipo, o mesmo na Emissão e nas Tarefas; o `AppSubheader` tem 42px pelo mesmo motivo. Toda a geometria virou token `--umds-semantic-shell-*`.
-
   - **`AppNavItem`** — o item da navegação horizontal do topo: rótulo, contador e seta. O contador aceita `badgeLabel`, porque "9" sozinho não diz nada a quem usa leitor de tela.
   - **`AppSubheader`** — a barra de contexto: trilha à esquerda, setor e ações à direita.
   - **`SidePanel`** — o painel lateral **da tela** (histórico, filtros), que fecha animando a largura até zero. Não confundir com `AppSidebar`: na 1Doc a navegação do app é horizontal, e o que fica à esquerda é sempre um destes.
@@ -2487,7 +2493,6 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
   O `tabIndex` continua: quem navega por teclado alcança a linha e Enter/Espaço acionam, igual a antes. O que muda é só o anúncio — que, dentro de uma tabela, já estava errado.
 
 - 2bc13c1: Três falhas de comportamento apontadas pela auditoria interna, todas verificadas na tela:
-
   - **`DataTable`** — com `selectable` e `onRowClick` juntos, o Espaço dentro do checkbox era engolido pelo `preventDefault` do handler da linha e acionava a linha inteira: marcar por teclado era impossível. O caminho do mouse já tinha a guarda equivalente; só o teclado ficou de fora.
   - **`DatePicker`** — o foco nunca entrava no painel. `ArrowDown` abria o calendário e o teclado ficava inerte, porque o painel vive num Portal e o Tab a partir do gatilho ia para o resto da página. O alvo do foco passou a ser o dia marcado pelo roving tabindex, que é a verdade do DOM no instante em que o frame roda — o seletor anterior lia um valor de estado da closure do render anterior, que ao abrir ainda era o antigo.
   - **`BottomSheet`** — o listener global de `keydown` era registrado a cada montagem e nunca removido, acumulando ao trocar de tela, em StrictMode e em navegação por rotas. Junto, o id da instância passou a ser gerado no inicializador: um painel que montasse já com `open=true` registrava id vazio na pilha de overlays e o Esc não fechava.
@@ -2634,13 +2639,11 @@ Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema
 - 445de52: feat(icon): nova API dinâmica, remoção do Font Awesome Pro e tipagem extensível
 
   **Breaking change** — a prop `name` foi removida do `<Icon>`. Use `icon` no lugar, que aceita três formatos:
-
   - string: `<Icon icon="home" />`
   - tupla `[prefix, iconName]`: `<Icon icon={["fas", "home"]} />`
   - objeto `IconLookup` (ex.: `<Icon icon={faHome} />`)
 
   **Novas props:**
-
   - `transform`: aceita string (parseada via `faParse.transform`) ou objeto `Transform` do FA core.
   - `mask` / `maskId`: ícone de máscara (suporta os mesmos formatos de `icon`).
   - `symbol`: cria `<symbol>` reutilizável (`FaSymbol` do FA core).

package/dist/components/AILabel/AILabel.css

@@ -105,7 +105,7 @@
     border: 1px solid var(--umds-semantic-color-ai-light);
     border-radius: var(--umds-primitive-border-radius-sm);
     background-color: var(--umds-semantic-color-neutral-light-pure);
-    box-shadow: var(--umds-semantic-shadow-sm);
+    box-shadow: var(--umds-semantic-shadow-bottom-sm);
     color: var(--umds-semantic-color-neutral-dark-pure);
     font-size: var(--umds-primitive-font-size-xxs);
     line-height: 1.5;

package/dist/components/Alert/Alert.css

@@ -38,7 +38,7 @@
   z-index: var(--umds-semantic-layer-toast); /* 1500 - camada de notificação */
   width: 420px;
   max-width: calc(100vw - 32px);
-  box-shadow: var(--umds-semantic-shadow-md); /* protótipo --shadow-md */
+  box-shadow: var(--umds-semantic-shadow-bottom-md); /* protótipo --shadow-md */
 }
 
 .umds-alert--top-right {

package/dist/components/AppShell/AppShell.css

@@ -31,6 +31,10 @@
   display: flex;
   flex-direction: column;
   background-color: var(--umds-semantic-color-background-light);
+  /* Cor de texto do tema para tudo o que herda (um Text sem `color`, um título
+     solto num Stack). Sem ela o conteúdo herdava o preto padrão do navegador,
+     e no tema escuro o texto sumia no fundo escuro. */
+  color: var(--umds-semantic-color-neutral-dark-pure);
   font-family: var(--umds-semantic-font-family-base);
 }
 

package/dist/components/AttachmentCard/AttachmentCard.css

@@ -36,7 +36,7 @@
 /* Mesmo hover do `Card hoverable`: realce de borda + sombra. */
 .umds-attachment-card--interativo:hover {
     border-color: var(--umds-semantic-color-primary-medium);
-    box-shadow: var(--umds-semantic-shadow-md);
+    box-shadow: var(--umds-semantic-shadow-bottom-md);
 }
 
 /* ── selo de situação ──────────────────────────────────────────────────── */
@@ -129,7 +129,7 @@
     border: 1px solid var(--umds-semantic-color-neutral-light-medium);
     border-radius: var(--umds-primitive-border-radius-sm);
     background-color: var(--umds-semantic-color-background-elevated);
-    box-shadow: var(--umds-semantic-shadow-md);
+    box-shadow: var(--umds-semantic-shadow-bottom-md);
     font-family: var(--umds-semantic-font-family-base);
     color: var(--umds-semantic-color-neutral-dark-pure);
 }

package/dist/components/Avatar/Avatar.d.ts

@@ -7,11 +7,16 @@ import './Avatar.css';
 export interface AvatarProps {
     /**
      * URL da imagem. Se fornecida, o tipo será automaticamente 'Photo' visualmente.
-     * O componente NÃO faz fallback automático quando a imagem falha ao
-     * carregar: ele emite `onError` e o consumidor decide (ex.: limpar o
-     * `src` para exibir as iniciais via `children`).
+     * Se a imagem falhar ao carregar, o avatar volta sozinho para as iniciais
+     * (`name` ou `children`) e emite `onError`. Um `src` novo tenta de novo.
      */
     src?: string;
+    /**
+     * Nome da pessoa: gera as iniciais (primeira letra do primeiro e do último
+     * nome, "Cris Lima" → "CL") e vira o nome acessível quando não há
+     * `ariaLabel`. Com `name`, as iniciais vêm dele, no lugar de `children`.
+     */
+    name?: string;
     /**
      * Texto alternativo para a imagem (acessibilidade).
      */

package/dist/components/Avatar/Avatar.js

@@ -1,23 +1,47 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import './Avatar.css';
+import { useState, useEffect } from "react";
 function Avatar(props) {
+    const [imagemFalhou, setImagemFalhou] = useState(() => false);
+    function mostraFoto() {
+        return !!props.src && !imagemFalhou;
+    }
+    function iniciais() {
+        const partes = (props.name || "").trim().split(/\s+/).filter(Boolean);
+        if (partes.length === 0)
+            return "";
+        const primeira = partes[0].charAt(0);
+        const ultima = partes.length > 1 ? partes[partes.length - 1].charAt(0) : "";
+        return (primeira + ultima).toUpperCase();
+    }
+    function aoFalhar(event) {
+        setImagemFalhou(true);
+        if (props.onError)
+            props.onError(event);
+    }
     function classes() {
         return [
             "umds-avatar",
             `umds-avatar--${props.size || "md"}`,
-            `umds-avatar--${props.type || (props.src ? "photo" : "letter")}`,
+            `umds-avatar--${props.type || (props.src && !imagemFalhou ? "photo" : "letter")}`,
             props.className,
         ]
             .filter(Boolean)
             .join(" ");
     }
     function computedRole() {
-        return props.ariaLabel || props.src ? "img" : undefined;
+        return props.ariaLabel || props.src || props.name ? "img" : undefined;
     }
     function computedAriaLabel() {
-        return props.ariaLabel || (props.src && props.alt ? props.alt : undefined);
+        return (props.ariaLabel ||
+            (props.src && props.alt ? props.alt : undefined) ||
+            props.name ||
+            undefined);
     }
-    return (_jsxs("div", { title: props.title, role: computedRole(), "aria-label": computedAriaLabel(), className: classes(), children: [props.src ? (_jsx("img", { className: "umds-avatar__image", src: props.src, alt: props.alt || "", onError: (event) => props.onError && props.onError() })) : null, !props.src ? _jsx(_Fragment, { children: props.children }) : null] }));
+    useEffect(() => {
+        setImagemFalhou(false);
+    }, [props.src]);
+    return (_jsxs("div", { title: props.title, role: computedRole(), "aria-label": computedAriaLabel(), className: classes(), children: [mostraFoto() ? (_jsx("img", { className: "umds-avatar__image", src: props.src, alt: props.alt || "", onError: (event) => aoFalhar(event) })) : null, !mostraFoto() ? (_jsx(_Fragment, { children: props.name ? _jsx(_Fragment, { children: iniciais() }) : _jsx(_Fragment, { children: props.children }) })) : null] }));
 }
 export default Avatar;