@1doc/1ds-react 2.7.2 → 2.9.0

package/CHANGELOG.md

@@ -1,5 +1,1285 @@
 # @1doc/1ds-react
 
+## 2.9.0
+
+### Minor Changes
+
+- 704af0c: feat(accordion): conteúdo livre por item no Vue (slot `content-<id>`)
+
+  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`
+    gerado, como já faz com o `DataTable`, e falha o build se o gerado mudar de
+    forma.
+  - Título: o título do item **já é neutro** no 1DS (14/600, `neutral-dark-pure`;
+    só o chevron fica azul quando abre), então não há opção de cor a acrescentar.
+    Se o CrisDoc mediu azul de 16px, era outra peça ou uma versão antiga.
+
+  ```vue
+  <Accordion :items="[{ id: 'campos', title: 'Seção 01', content: '' }]">
+    <template #content-campos>
+      <Input label="Nome" fullWidth />
+    </template>
+  </Accordion>
+  ```
+
+- 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.
+  - `panel`: conteúdo livre do painel do selo, no lugar do resultado da conferência
+    (ações, campos, texto). React: o elemento; Vue: o slot `panel`. Com ele o selo
+    vira botão mesmo sem `statusDetails`. Sem título interno, o painel é nomeado
+    pelo selo (o mesmo nome que o botão tem, "Recursos IA: conferência de ...").
+  - `panelWidth` (px): largura do painel; padrão 300.
+  - `closePanelOnAction`: ao acionar um botão ou link de dentro do painel (o
+    "Aplicar sugestão"), o painel fecha e o foco volta ao selo. A ação do app roda
+    antes. O botão de copiar um campo não conta. Sem a prop, o painel fica aberto
+    até Esc, clique fora ou o foco sair.
+
+  Por baixo, o `postbuild` ganhou `slotsNoScriptVue`: o Vue que recebe só o slot
+  enxergava `props.panel` como `undefined` no script e o selo não virava botão. O
+  gancho troca `props.<prop>` por `(props.<prop> || slots['<slot>'])` nos arquivos
+  listados e falha o build se o gerado não tiver o formato esperado.
+
+  ```vue
+  <AttachmentCard
+    fileName="Protocolo 104-2026.pdf"
+    status="ai"
+    statusLabel="Recursos IA"
+    :panelWidth="280"
+    :closePanelOnAction="true"
+  >
+    <template #panel>
+      <Text>A IA sugere "Recurso Administrativo".</Text>
+      <Button size="sm" @click="aplicar">Aplicar sugestão</Button>
+    </template>
+  </AttachmentCard>
+  ```
+
+- 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
+    textos traduzíveis (`overflowTitle`, `overflowAriaLabel`) recebem o total.
+  - `overlap` (px): quanto cada avatar avança sobre o anterior. O padrão segue 8
+    (`spacing-nano`); 6 é o do CrisDoc e corta menos as iniciais. O recuo do
+    último item acompanha.
+  - `ring` (px): largura do anel (a borda da cor do fundo). O padrão segue 1,5; 1 é
+    o do CrisDoc.
+
+  As duas últimas escrevem `--umds-avatar-group-overlap` e `--umds-avatar-group-ring`
+  no próprio grupo (os padrões vivem no CSS), então só aparece `style` quando você
+  as usa.
+
+  ```vue
+  <AvatarGroup
+    :avatars="primeiros4"
+    :max="4"
+    :overlap="6"
+    :ring="1"
+    :overflowCount="12"
+  />
+  ```
+
+- 8ff3652: feat(badge, tag): tamanhos compactos, `Tag soft` e `pill`, variante `new` e `Badge attached`
+
+  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.
+  - `variant="new"` (a "novidade" do CrisDoc): amarelo, caixa alta, 800, pílula.
+    Solid e soft usam o fundo amarelo; outlined, o contorno. O DS não tem token
+    semântico de amarelo, então usa os primitivos `yellow-*` (com o `yellow-light`
+    já corrigido) e `gray-darkest` para o texto, que não mudam com o tema
+    (contraste 8:1). Candidato a token semântico de destaque.
+  - `attached`: rótulo colado no canto superior esquerdo de um card, com os cantos
+    de baixo arredondados e os de cima retos. Posiciona em `absolute`: o pai
+    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.
+  - `appearance="soft"`: fundo claro da cor da variante, sem contorno.
+  - `pill`: cantos totalmente arredondados, em qualquer aparência e tamanho.
+  - `variant="new"`: amarelo, nas três aparências (soft = `yellow-light` com texto
+    `yellow-dark`).
+
+  ```vue
+  <Badge size="2xs" appearance="solid">SOBR</Badge>
+  <Badge variant="new" size="xs">Novidade</Badge>
+  <div
+    style="position: relative"
+  ><Badge attached variant="info" appearance="solid">Tarefa pendente</Badge></div>
+  <Tag size="xs" appearance="soft" variant="primary" pill label="SEFIN" />
+  <Tag size="xs" appearance="soft" variant="new" pill label="Dado simulado" />
+  ```
+
+- dd0e159: feat(box): item flex (`grow`, `shrink`, `basis`...) e prop `as`
+
+  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
+    o evento. Uma linha com borda e fundo dentro de uma lista é `<Box as="li">`.
+  - Item flex: `grow`, `shrink` (`"0"` | `"1"`), `basis` (`"auto"`, `"0"`, `"25"`,
+    `"33"`, `"50"`, `"66"`, `"75"`, `"100"`; os números são %), `minWidth` (`"0"`
+    | `"auto"`; o Box já nasce com `min-width: 0`), `overflow`, `overflowX`,
+    `overflowY` e `fullHeight` (o `fullWidth` já existia).
+
+  Vue: com `as`, o Box passa a ter raiz múltipla, e o Vue não repassa atributos
+  de fallthrough a esse tipo de componente. Por isso `class` entra no mesmo
+  repasse de `style`, `title`, `role`, `data-*` e `aria-*` (o `Stack` também). Ouvintes
+  (`@click`) não caem mais no raiz: ponha-os num filho.
+
+  ```tsx
+  <Box direction="horizontal" gap="xxxs" padding="md">
+    <Box shrink="0" basis="25">Filtros</Box>
+    <Box grow overflowY="auto" fullHeight>Resultados</Box>
+  </Box>
+  <Box as="ul" aria-label="Setores"><Box as="li" bordered padding="xxxs">SADM</Box></Box>
+  ```
+
+- a6872d9: feat(box): `direction`, `gap`, `align`, `justify` e `wrap` (a caixa também é layout)
+
+  Uma linha, cartão ou região com borda, fundo e padding passa a ser UM componente,
+  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.
+  - `align`, `justify`, `wrap`: como no `Stack`.
+  - Também passam a ir para o elemento raiz: `id`, `style`, `title`, `role`,
+    `tabIndex`, `data-*` e `aria-*` (uma região pede `role` e `aria-label`).
+
+  ```tsx
+  <Box
+    direction="horizontal"
+    gap="xxxs"
+    align="center"
+    justify="between"
+    padding="xs"
+    background="surface"
+    radius="sm"
+    bordered
+  >
+    <Text variant="body2">
+      Reforma da cobertura do Ginásio Poliesportivo Municipal
+    </Text>
+    <Button variant="secondary" size="sm">
+      Abrir
+    </Button>
+  </Box>
+  ```
+
+  Para o elemento semântico (`ul`, `nav`, `section`), continue usando `Stack` com `as`.
+
+- d466e57: feat(button): variante `neutral-text` e tamanho `xs`
+
+  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
+    texto (`neutral-text`). O nome segue o par `negative` / `negative-outlined`.
+  - `size="xs"`: 26px de altura, padding lateral 12, fonte 12 e ícone de 12px
+    (também no `variant="icon"`, que fica 26 x 26). Os 26px do CrisDoc não estão
+    na escala de espaço, então a altura é `calc(spacing-xxs + spacing-micro)`
+    (24 + 2), sem token novo.
+
+  ```vue
+  <Button
+    variant="neutral-text"
+    size="xs"
+    :start-icon="faPlus"
+  >Nova linha</Button>
+  <Button variant="neutral" size="xs">Ordenar: mais recentes</Button>
+  <Button size="xs">Resolver</Button>
+  ```
+
+- d278363: feat(calendar): novo `Calendar`, a agenda com eventos por dia
+
+  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`.
+  - Cor de DADO por token: `color="--umds-primitive-blue-pure"` (o mesmo valor do
+    `ColorPicker`), num chip de fundo suave (a cor a 16% sobre o branco) com barra
+    do lado. O texto é sempre escuro: a cor nunca é a única informação e o contraste
+    não depende do tom. Sem `color`, o primário.
+  - Mês: até `maxVisible` (3) eventos por dia e um "+N" (`onMoreClick(dia,
+escondidos)`). O corte é por QUANTIDADE, não por altura. Semana: sete colunas
+    com todos os eventos.
+  - Grade acessível (`role="grid"`): um Tab entra no dia em foco (hoje, ou o
+    primeiro) e depois nos eventos dele; setas movem de dia (e trocam de mês ou de
+    semana na borda), Home e End vão às pontas da semana, PageUp e PageDown trocam
+    de mês (ou de semana), Enter e Espaço acionam `onDayClick`. Cada dia tem nome
+    ("segunda-feira, 11 de maio de 2026, 2 eventos", `dayLabel` troca) e o de hoje
+    leva `aria-current="date"`.
+  - `date` e `view` controláveis (`onDateChange`, `onViewChange`) ou internos
+    (`defaultDate`, `defaultView`); `selectedDate` marca um dia; `today` fixa o
+    "hoje" (testes, demonstração); `weekStartsOn` 0 (domingo) ou 1.
+  - Cabeçalho com anterior, próximo, "Hoje" e o seletor Mês/Semana
+    (`hideViewSwitcher` esconde), mais dois slots: `headerStart` (filtro de escopo)
+    e `headerEnd` (legenda). No Vue são `#header-start` e `#header-end`.
+  - Textos por prop: `previousLabel`, `nextLabel`, `todayLabel`, `monthLabel`,
+    `weekLabel`, `viewLabel`, `moreLabel` (`{count}`), `moreAriaLabel` (`{count}` e
+    `{date}`); `locale` (padrão `pt-BR`).
+
+  Não faz: eixo de horas (é agenda por dia, não por hora), evento que atravessa
+  vários dias e arrastar para reagendar.
+
+  ```vue
+  <Calendar
+    :events="[
+      {
+        date: '2026-05-04',
+        title: 'Proc. Administrativo 002/2020',
+        color: '--umds-primitive-blue-pure',
+      },
+      {
+        date: '2026-05-11',
+        title: 'Ofício 001/2020',
+        color: '--umds-primitive-red-pure',
+        time: '08:00',
+      },
+    ]"
+    :onEventClick="abrir"
+  >
+    <template #header-start><Select … /></template>
+    <template #header-end><Button variant="secondary" size="sm">Legenda</Button></template>
+  </Calendar>
+  ```
+
+- 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.
+  - `circularRemove`: o × dos chips removíveis vai dentro de um círculo de 14px
+    tingido da cor do texto do chip (o `::before` usa `currentColor` com 15% de
+    opacidade, então acompanha todas as variantes e os temas). É o mesmo botão,
+    com o mesmo nome acessível ("Remover <rótulo>") e o mesmo clique; só vale com
+    `removable`.
+
+  ```vue
+  <Chips
+    label="Processos Inteligentes"
+    size="xs"
+    variant="primary"
+    removable
+    circularRemove
+    :onRemove="remover"
+  />
+  ```
+
+- 80904af: feat(coachmark): novo `Coachmark`, o tour guiado
+
+  Peça nova: uma sequência de passos, cada um apontando um elemento da tela com
+  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
+    existe), o cartão fica no centro e a página inteira escurece.
+  - Posição por `@floating-ui/dom` (já era dependência): `placement` com inversão
+    automática, e o recorte e o cartão acompanham rolagem, redimensionamento e
+    mudança de tamanho do alvo. O alvo é trazido à tela se estiver fora dela.
+  - Controlado por `open`; `onClose(motivo)` com `"finish"` (Concluir no último
+    passo), `"skip"` (Sair do tour) ou `"escape"` (Esc). Passo atual interno
+    (`defaultStep`) ou controlado (`step` + `onStepChange`). Reabrir recomeça do
+    primeiro passo.
+  - Acessibilidade: cartão `role="dialog"` com `aria-modal`, nomeado pelo título e
+    descrito pelo texto. O foco entra no cartão, o Tab fica preso nele, Esc sai,
+    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" (`aria-live`).
+  - Textos por prop: `nextLabel`, `previousLabel`, `finishLabel`, `skipLabel`,
+    `counterLabel` ("{current} de {total}"). `hideSkip` esconde o Sair do tour.
+  - `padding` (px) é a folga do recorte em torno do alvo (padrão 8).
+
+  Limite: a página atrás fica inerte durante o tour (o véu captura o clique), então
+  o alvo não é clicável. O scrim usa o mesmo `rgba` do Modal, que ainda não tem
+  token (candidato a novo token).
+
+  ```vue
+  <Coachmark
+    :open="tourAberto"
+    :steps="[
+      {
+        target: '#aba-fluxos',
+        title: 'Cada item aberto é uma aba',
+        content: 'Fluxos e formulários abrem em abas.',
+      },
+      { title: 'Pronto', content: 'Sem alvo: o cartão fica no centro.' },
+    ]"
+    :onClose="() => (tourAberto = false)"
+  />
+  ```
+
+- 390c707: feat(colorpicker): novo `ColorPicker`, as amostras da paleta do 1DS
+
+  Peça nova. Uma grade de amostras dos primitivos de cor (6 famílias de 4 tons e os
+  7 cinzas, 31 no total), uma linha por família. O valor é o NOME DO TOKEN
+  (`--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
+    duplo, então a seleção não depende só da cor.
+  - `value` / `defaultValue` / `onChange(valor)`; `label` ou `ariaLabel`.
+  - `allowCustom` (desligado por padrão): campo de cor livre em hexadecimal
+    `#RRGGBB`, que sai em maiúsculas. Textos por prop: `customLabel` e
+    `customErrorMessage`.
+  - `families` recorta a paleta (`["blue", "gray"]`); `swatches` troca a lista
+    inteira (nomes traduzidos, recorte livre). `COLOR_PALETTE` e `isHexColor` saem
+    exportados.
+  - `size` `sm` (24px) ou `md` (32px, padrão); raio 8px, anel de 1px na amostra.
+
+  Requer `@1doc/1ds-tokens` com `yellow-light` e `purple-pure` corrigidos (ver o
+  changeset `tokens-primitivos-amarelo-roxo`): a paleta lista os 31 primitivos, e
+  com o tokens 0.4.3 essas duas amostras saem na cor errada.
+
+  ```vue
+  <ColorPicker
+    label="Cor do marcador"
+    :value="cor"
+    :onChange="(c) => (cor = c)"
+    allowCustom
+  />
+  ```
+
+- e3d82fc: feat(datatable): célula livre por coluna, linha de grupo e tipos exportados no Vue
+
+  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>`,
+    que recebe `{ row, value, rowIndex }`. Com `render` e slot na mesma coluna, o
+    slot vale.
+  - Linha de grupo: `rowGroup` (nome do campo ou função `(row, rowIndex) =>
+rótulo`) abre um `<th scope="rowgroup">` que atravessa a tabela antes de cada
+    sequência de linhas com o mesmo rótulo. A tabela não reordena: passe `data` já
+    ordenada pelo grupo. O conteúdo do grupo é o rótulo, ou `renderRowGroup(label,
+row, rowIndex)` no React, ou o slot `#row-group` (`{ label, row, rowIndex }`)
+    no Vue. A linha de grupo não entra na seleção nem no `onRowClick`.
+  - Vue (tipos): o `index.d.ts` do pacote passa a trazer todo tipo exportado pelos
+    componentes. Antes só saíam as `*Props`, `*Action` e `*Option`, e a `DataTableProps`
+    apontava para um `DataTableColumn` que não existia no arquivo. Agora
+    `DataTableColumn`, `DropdownItem`, `AccordionItemData` (e os demais, como
+    `StackSpacing`, `BoxSpacing` e `ChartDatum`) podem ser importados de
+    `@1doc/1ds-vue`. No React eles já eram exportados.
+
+  ```vue
+  <DataTable :columns="colunas" :data="usuarios" rowGroup="setor">
+    <template #cell-nome="{ row }">
+      <Avatar type="letter" size="sm">{{ row.nome[0] }}</Avatar> {{ row.nome }}
+    </template>
+    <template #cell-setores="{ value }">
+      <Tag v-for="setor in value" :key="setor" :label="setor" size="sm" />
+    </template>
+    <template #row-group="{ label }">Setor {{ label }}</template>
+  </DataTable>
+  ```
+
+- a5fe6fe: feat(datatable,descriptionlist): `DataTable variant="document"` e novo `DescriptionList`
+
+  Para o que é CONTEÚDO de documento (se lê e se imprime), não interface.
+
+  **`DataTable variant="document"`** (padrão `default`, nada muda sem a prop):
+  tabela sem interação, com grade de bordas finas em todas as células, sem hover,
+  sem cabeçalho grudado e sem raio. `sortable`, `selectable` e `onRowClick` são
+  ignorados: sem botão de ordenar, sem `aria-sort`, sem checkbox, linha fora da
+  ordem de Tab. Na impressão (`@media print`) o cabeçalho se repete a cada página,
+  uma linha nunca é cortada ao meio e as cores saem (`print-color-adjust`).
+  `columns`, `data`, `align`, `width`, `render`/`#cell-<key>` e `density` valem
+  como sempre.
+
+  **`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.
+  - `layout="stacked"`: rótulo pequeno em cima, valor embaixo, `columns` de 1 a 4
+    (vira 1 em tela estreita); `bordered` põe o valor na caixa de um campo
+    somente leitura.
+  - `ariaLabel` ou `ariaLabelledby`. No Vue o `value` é texto (valor com marcação:
+    monte com `Stack` e `Text`).
+
+  ```vue
+  <DataTable variant="document" :columns="colunas" :data="itens" />
+  <DescriptionList
+    ariaLabel="Dados de empenho"
+    :items="[
+      { label: 'Empenho', value: '2026NE000184' },
+      { label: 'Valor empenhado', value: 'R$ 51.840,00' },
+    ]"
+  />
+  ```
+
+- 801c5c2: feat(fileinput): `variant="trigger"`, o seletor aberto por outro controle
+
+  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`,
+    `multiple`, `name`, `files`, `onChange` e `onRemove` funcionam igual. O input
+    nativo fica oculto ao lado, fora do Tab (o gatilho é quem recebe o foco) e
+    com nome acessível (`label` ou `selectFileLabel`). `disabled` não abre.
+  - O `label` visível não aparece no `trigger`: o gatilho é o próprio conteúdo; o
+    `label` serve de nome acessível do input.
+  - Não há `open()` exposto: o Mitosis não tem como expor método imperativo nos
+    dois frameworks. O `trigger` cobre o caso (botão ou link que abre o seletor).
+
+  ```vue
+  <FileInput
+    variant="trigger"
+    accept=".pdf,.docx"
+    :multiple="true"
+    :onChange="anexar"
+  >
+    <Button variant="secondary" startIcon="paperclip">Anexar arquivo</Button>
+  </FileInput>
+  ```
+
+- 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`
+    traduz.
+  - O valor é o NOME do ícone (`"user"`, `"file-lines"`): `value`/`defaultValue`,
+    `onChange(nome, item)`. Guarde o nome e resolva de volta para o objeto na hora de
+    desenhar.
+  - `radiogroup`: Tab entra no ícone escolhido (ou no primeiro); setas movem a
+    escolha (esquerda e direita um ícone, cima e baixo uma linha: `columns`, padrão
+    8), Home e End vão às pontas. O escolhido ganha fundo e borda do primário e
+    `aria-checked`.
+  - Busca (ligada; `hideSearch` esconde) por nome, rótulo e palavras-chave, sem
+    acento nem caixa. A seta para baixo no campo leva à grade, e o número de
+    resultados é anunciado (`role="status"`). Sem resultado, mostra `emptyText`.
+  - `maxHeight` (px) limita a grade e rola dentro dela; `size` `sm` ou `md`;
+    `disabled`.
+  - Textos por prop: `searchLabel`, `searchPlaceholder`, `emptyText`, `resultsLabel`
+    (`{count}`).
+
+  ```vue
+  <IconPicker
+    label="Ícone da categoria"
+    :icons="[
+      faFolder,
+      faFileLines,
+      { icon: faBuilding, label: 'Órgão', keywords: ['prefeitura'] },
+    ]"
+    :value="icone"
+    :onChange="(nome) => (icone = nome)"
+  />
+  ```
+
+- 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
+    mesmo tratador, que descarta o repetido: no React os dois disparam para o
+    mesmo evento nativo, e no Vue o `change` do blur repete o valor que o `input`
+    da última tecla já entregou. O resultado é uma chamada por tecla nos dois
+    frameworks. Um `change` disparado à mão com valor novo (testes de quem
+    consome) também chega. `onBlur` segue sendo o evento de saída do campo.
+    Quem contornava o blur no Vue com `@input` por fora pode tirar o contorno.
+  - `mask`: `"cpf"`, `"cnpj"`, `"cep"` ou `"phone"` (10 ou 11 dígitos). 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 (`maxlength`) e
+    abre o teclado numérico no celular (`inputmode="numeric"`). Valor controlado
+    só com dígitos também aparece formatado. Cursor: reformatar no meio do texto
+    leva o cursor ao fim (suficiente para digitar do início ao fim).
+  - `iconRight`: ícone decorativo à direita, `aria-hidden`, sem clique. Para ação,
+    continua `iconsRight`.
+  - `borderless`: sem borda, fundo e raio, para o campo dentro de um grupo que já
+    tem a moldura (um `Select` e um `Input` lado a lado numa caixa). O foco não
+    some: vira contorno de 2px para dentro. Com erro, a borda vermelha fica.
+
+  ```vue
+  <Input label="CPF" mask="cpf" :onChange="(v) => (cpf = v)" />
+  <Input
+    ariaLabel="Número"
+    placeholder="Número"
+    borderless
+    fullWidth
+    iconRight="search"
+  />
+  ```
+
+- cfb8c4a: feat(kbd,codeblock): novos `Kbd` e `CodeBlock`, e o token de fonte monoespaçada
+
+  **Token novo** (`@1doc/1ds-tokens`): `--umds-primitive-font-family-mono` e o
+  semântico `--umds-semantic-font-family-mono` (`ui-monospace, SFMono-Regular,
+Menlo, Consolas, 'Liberation Mono', monospace`). É a pilha de fontes do sistema:
+  nenhuma fonte baixada, então nenhum pedido de rede novo. O produto cita o
+  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
+    "combinação". O leitor de tela lê "Ctrl + Shift + P".
+  - Caixa cinza com borda e base mais grossa, fonte monoespaçada; `size` `sm` ou
+    `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.
+  - A área de rolagem é `role="region"` focável (Tab) e nomeada (`ariaLabel`, senão
+    a `language`, senão "Código"): quem usa o teclado consegue rolar.
+  - `copyable` mostra o botão de copiar no cabeçalho: copia o texto inteiro (não só
+    o que está à vista), troca para "Copiado" por dois segundos e anuncia ao leitor
+    de tela. Usa `navigator.clipboard`, e recorre a `execCommand("copy")` quando ele falha.
+    `onCopy(texto)` avisa. `copyLabel` e `copiedLabel` por prop.
+  - `language` é só rótulo no topo. Não colore sintaxe (pede uma biblioteca); fundo
+    claro e texto escuro nos dois temas.
+
+  ```vue
+  <Kbd :keys="['Ctrl', 'K']" size="sm" />
+  <CodeBlock language="JSON" :code="envio" copyable />
+  ```
+
+- fcd9c32: feat(list): estado vazio dentro da lista (`isEmpty`)
+
+  O `List` passa a trazer o estado vazio. Com `isEmpty`, as linhas dão lugar a um
+  `EmptyState` DENTRO da lista: o título do cartão, a busca, os filtros e a
+  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
+    aparece.
+  - Conteúdo próprio: slot `empty` (no React, a prop `empty`) no lugar do
+    `EmptyState`.
+  - Acessibilidade: o bloco vazio é `role="status"`, então a lista esvaziar é
+    anunciada. Sem itens não há `ul` vazia no DOM.
+
+  ```vue
+  <List
+    ariaLabelledby="titulo"
+    :isEmpty="!docs.length"
+    emptyTitle="Nenhum documento"
+    emptyDescription="Tudo em dia."
+    :emptyIcon="faInbox"
+    emptyActionLabel="Atualizar"
+    @emptyAction="recarregar"
+  >
+    <ListItem v-for="d in docs" :key="d.id" :title="d.titulo" />
+  </List>
+  ```
+
+- 4b57ca7: feat(list): novos `ListItem` e `List`, a linha de lista inteira clicável
+
+  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
+    `rel="noopener noreferrer"` sozinho.
+  - Conteúdo: `start`, `title`, `subtitle`, `meta`, `end` e o conteúdo padrão (abaixo
+    de `meta`). `title`, `subtitle` e `meta` aceitam texto por prop ou nó por slot.
+    No Vue os slots se chamam igual (`#start`, `#title`...); no React são as
+    props. Região vazia não desenha nada.
+  - Estados: hover e foco visível (anel interno), `selected` (fundo de seleção e
+    `aria-current="true"`), `disabled` (button desabilitado; link perde o `href` e
+    ganha `aria-disabled`).
+  - `id`, `style`, `role`, `tabIndex`, `data-*` e `aria-*` vão para o elemento
+    interativo (é nele que entra o `aria-label`). `title` é o título da linha, não
+    o atributo HTML.
+  - `List`: `ul` (padrão) ou `ol`, sempre com `role="list"` (o Safari tira a
+    semântica de `list-style: none`), `gap` na escala do DS (padrão `quarck`),
+    `ariaLabel` ou `ariaLabelledby`.
+
+  Medidas: padding 8 12 (o 10 12 do CrisDoc não existe na escala), raio 8, título
+  14/600, subtítulo 14 e meta 12, todos pelo `Text`.
+
+  ```vue
+  <List ariaLabel="Documentos não lidos" gap="nano">
+    <ListItem selected title="Memorando 114/2025" subtitle="Novo contrato - Governo"
+              meta="23 de agosto de 2025" @click="abrir(doc)">
+      <template #start><Avatar type="letter" size="sm">I</Avatar></template>
+      <template #end><Badge variant="info" size="sm">novo</Badge></template>
+    </ListItem>
+  </List>
+  ```
+
+- 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.
+  - `width` e `maxWidth`: qualquer valor CSS. `width` sozinho solta o teto do
+    `size` (o 498px do `md` não segura mais) e passa a ser limitado pela tela.
+    Com `windowControls`, valem só no modo normal.
+  - `windowControls` aceita `true` (o conjunto inteiro, como antes) ou uma lista
+    com os controles que quiser: `["expand", "fullscreen"]`. Nomes: `normal`,
+    `expand`, `fullscreen`, `minimize`. Em lista, sem `normal`, clicar de novo no
+    modo ativo volta ao normal, e o modo normal usa o tamanho do próprio modal
+    (não os 780px do conjunto inteiro). O divisor só aparece com algum controle e
+    com o ×. `onMinimize` só existe se `minimize` estiver na lista.
+  - `responsive` e `responsiveBreakpoint` (padrão 640, lido na montagem): abaixo
+    da largura, o modal vira um painel que sobe pela borda de baixo (largura
+    total, cantos de cima arredondados, alça, entrada por baixo), como o
+    `BottomSheet`; acima, continua centralizado. É o mesmo componente reorganizado
+    (não monta um `BottomSheet` por dentro, porque o Mitosis não repassa slot de
+    um componente a outro), então não tem o gesto de arrastar. No painel os
+    controles de janela e a largura livre somem.
+  - Esc: o ouvinte do `document` passa a rodar no borbulho e a ignorar a tecla se
+    `defaultPrevented`. `Select`, `Combobox`, `Popover` e `Dropdown` já faziam
+    `preventDefault`; `DatePicker` e `MultiSelect` passaram a fazer. Resultado: um
+    `Select` ou `DatePicker` aberto dentro do modal fecha só a lista, e o modal
+    fica. Quem tinha contorno para isso pode tirá-lo.
+
+  ```vue
+  <Modal
+    open
+    variant="primary"
+    width="600px"
+    :window-controls="['expand', 'fullscreen']"
+    title="Verificar rotas e quilometragem"
+    responsive
+  >
+    ...
+  </Modal>
+  ```
+
+- 56229f0: feat(orgchart): novo `OrgChart`, o organograma com conectores
+
+  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
+    forma confiável): cada nó tem largura e altura fixas (`nodeWidth` 176,
+    `nodeHeight` 64, em px), os filhos se distribuem sob o pai (`gapX` 16) e o pai se
+    centra sobre eles; um nível desce `gapY` (40). Os conectores são um SVG de uma
+    linha por pai. O container rola quando o organograma passa da largura.
+  - Visual: a raiz cheia na cor primária, os demais em tom claro; `selectedId` marca
+    um nó. O título e o subtítulo cortam com reticências (o texto inteiro vai no
+    tooltip).
+  - Conteúdo livre do nó: no React `renderNode(nó, { level, expanded })`; no Vue o
+    slot `node` com escopo `{ node, level, expanded }` (ligado no `postbuild.js`,
+    como o do `DataTable`). O conteúdo precisa caber na caixa do nó.
+  - Expandir e recolher: tudo aberto por padrão; `defaultCollapsedIds` (ou
+    `collapsedIds` controlado) escolhe o que começa recolhido, e
+    `onCollapsedChange(ids)` avisa. O botão +/− no pé do nó é para o mouse.
+  - Acessibilidade: `role="tree"` com nós `treeitem` (`aria-level`,
+    `aria-posinset`, `aria-setsize`, `aria-expanded`, `aria-selected`). Um Tab entra
+    no nó em foco; Baixo vai ao primeiro filho (e abre o nó, se recolhido), Cima ao
+    pai, Esquerda e Direita aos irmãos, Home e End ao primeiro e ao último irmão,
+    Espaço expande ou recolhe, Enter aciona `onNodeClick`.
+  - Textos por prop: `ariaLabel` ("Organograma"), `expandLabel`, `collapseLabel`.
+
+  Limites do primeiro corte: só de cima para baixo; sem zoom nem arrastar; nó de
+  altura variável não cabe (use `nodeHeight` para o maior). Para navegar e escolher
+  em hierarquias grandes, o `Tree` é mais denso e acessível.
+
+  ```vue
+  <OrgChart :nodes="setores" ariaLabel="Setores da COPIRN" :onNodeClick="abrir">
+    <template #node="{ node }"><Avatar size="sm">{{ node.title }}</Avatar></template>
+  </OrgChart>
+  ```
+
+- e8453bc: feat(otpinput): novo `OtpInput`, o código de verificação em caixas
+
+  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
+    entra a partir da caixa atual). O preenchimento automático do SMS também,
+    porque a primeira caixa leva `autocomplete="one-time-code"`.
+  - Sem buraco: focar uma caixa à frente da primeira vazia manda o foco de volta a
+    ela.
+  - Valor em string: `value`/`defaultValue`, `onChange(codigo)` a cada mudança e
+    `onComplete(codigo)` quando as caixas enchem (uma vez por código novo).
+  - `type="numeric"` (padrão, teclado numérico no celular) ou `"alphanumeric"`
+    (letras e dígitos, em maiúsculas).
+  - Acessibilidade: `role="group"` nomeado por `label` ou `ariaLabel`; cada caixa
+    tem nome próprio (`digitLabel`, padrão "Dígito {n} de {total}", traduzível);
+    `errorMessage`/`invalid` ligam `aria-invalid` e `aria-describedby`.
+  - `size` `sm` ou `md`; foco e erro seguem os tokens de campo.
+
+  ```vue
+  <OtpInput
+    label="Código de verificação"
+    :length="6"
+    :onComplete="(codigo) => verificar(codigo)"
+    errorMessage="Código inválido ou expirado."
+  />
+  ```
+
+- 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.
+  - Sem a prop, **o teto de 300px continua**: tirá-lo por padrão faria todo painel
+    existente com lista longa estourar a tela sem rolagem. Quem quer o corpo livre
+    passa `maxHeight="none"`. O cabeçalho e o × não rolam junto, como antes.
+
+  ```vue
+  <Popover title="Colunas do card" maxHeight="none" :width="260">
+    <Button>Personalizar</Button>
+    <template #content>...</template>
+  </Popover>
+  ```
+
+- 3c482fa: feat(richtexteditor): novo `RichTextEditor`, texto rico leve sem biblioteca
+
+  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
+    negrito, itálico, sublinhado, listas, link, desfazer e refazer;
+    `["bold", "italic", "underline", "ul", "ol", "link"]` é a compacta e
+    `["bold", "italic"]` a mínima.
+  - `value`/`defaultValue`/`onChange` em HTML. O HTML é SEMPRE higienizado, tanto o
+    que entra por `value` quanto o que se cola: ficam só `a`, `b`/`strong`,
+    `i`/`em`, `u`, `s`/`strike`/`del`, `ul`, `ol`, `li`, `p`, `br`, `div`, `span`,
+    títulos e citação; `script`, `style`, `onerror`, `class` e `javascript:` saem.
+    Colar entra como texto puro. Link só aceita `http(s)`, `mailto`, `tel`, caminho
+    e âncora, e ganha `rel="noopener noreferrer"`. `sanitizarHtml`, `enderecoSeguro`
+    e `normalizarEndereco` vivem em `utils/html-seguro`.
+  - A barra é `role="toolbar"` (Tab numa parada só, setas, Home e End entre as
+    ferramentas). Negrito, itálico, sublinhado, tachado e as listas são botões de
+    liga/desliga (`aria-pressed`) que seguem o cursor. A área é `role="textbox"`
+    multilinha, com `label` ou `ariaLabel`, `aria-invalid` e `aria-describedby`
+    (`errorMessage`, `helperText`). Ctrl+K abre o link.
+  - Link sem modal: um campo logo abaixo da barra (endereço, Aplicar, Remover link,
+    Cancelar; Esc fecha). Sem texto escolhido, o endereço vira o texto do link.
+    Endereço sem esquema ganha `https://`; endereço perigoso mostra o erro e não
+    vira link.
+  - `footer` (slot): a assinatura do autor, dentro da moldura; `resizable` e
+    `minHeight` (px); `readOnly` (sem barra) e `disabled`; `invalid`.
+  - Textos por prop: `placeholder`, `toolbarLabel` e `labels` (parcial: `bold`,
+    `italic`, `underline`, `strike`, `ul`, `ol`, `link`, `undo`, `redo`, `clear`,
+    `linkAddress`, `linkApply`, `linkRemove`, `linkCancel`, `linkInvalid`).
+
+  Fora deste corte, por tamanho: tabela, imagem, cor, fonte, tamanho e
+  alinhamento. Limite técnico: `document.execCommand` é obsoleto no padrão, mas
+  todos os navegadores o mantêm; o histórico do desfazer varia um pouco entre eles.
+
+  ```vue
+  <RichTextEditor
+    label="Despacho"
+    :value="html"
+    :onChange="(h) => (html = h)"
+    :toolbar="['bold', 'italic', 'underline', '|', 'ul', 'ol', '|', 'link']"
+  >
+    <template #footer>Ana Paula Souza, SADM</template>
+  </RichTextEditor>
+  ```
+
+- 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
+    um modal numa janela baixa. A lista continua dentro do campo (posição
+    absoluta), então um contêiner com `overflow` ainda pode cortá-la, igual
+    antes.
+  - `variant="filter"`: botão de filtro de barra de ferramentas, contornado em
+    azul (`primary-pure` sobre `primary-light`), largura do conteúdo, lista de no
+    mínimo 240px, busca focada ao abrir. Combina com `searchable`.
+  - `emptyOptionLabel`: opção "sem filtro" no topo da lista (seleção única).
+    Aparece marcada enquanto nada está escolhido; escolhê-la chama `onChange("")` e
+    o campo volta a mostrar o `placeholder`, que é o nome do filtro.
+  - `footer`: rodapé fixo da lista, com ações ("Gerenciar marcadores"). React:
+    elemento; Vue: slot `footer`. Clicar nele não fecha a lista.
+
+  ```vue
+  <Select
+    variant="filter"
+    size="sm"
+    placeholder="Marcadores"
+    :searchable="true"
+    emptyOptionLabel="Todos os marcadores"
+    :options="marcadores"
+    :value="filtro"
+    :onChange="(v) => (filtro = v)"
+    placement="auto"
+  >
+    <template #footer><Button variant="text" size="sm">Gerenciar marcadores</Button></template>
+  </Select>
+  ```
+
+- e45ce94: feat(stack): `gap="none"`, prop `as`, props de item flex e atributos HTML
+
+  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
+    `role="list"` (o Safari tira a semântica de lista de `list-style: none`).
+    Com `as="form"`, `onSubmit` recebe o evento.
+  - Atributos HTML (`id`, `style`, `title`, `role`, `tabIndex`, `data-*`,
+    `aria-*`) vão para o elemento raiz. Sem isso `as="nav"` não tinha como levar
+    `aria-label`.
+  - Props do próprio Stack como item de outro Stack/flex: `grow`, `shrink`
+    (`"0"` | `"1"`), `basis` (`"auto"`, `"0"`, `"25"`, `"33"`, `"50"`, `"66"`,
+    `"75"`, `"100"`; os números são %), `minWidth` (`"0"` | `"auto"`; o Stack
+    já nasce com `min-width: 0`), `overflow`, `overflowX`, `overflowY`,
+    `fullHeight` e `fullWidth`.
+
+  Decisão: não existe `Stack.Item`. Quem precisa crescer, encolher ou ocupar a
+  altura aninha um Stack com as mesmas props. Subcomponente por ponto não
+  sobrevive aos dois geradores do Mitosis, e o Stack aninhado já é um item flex.
+
+  ```tsx
+  <Stack as="nav" aria-label="Atalhos" fullHeight>
+    <Stack as="ul" gap="none">
+      <Stack as="li">...</Stack>
+    </Stack>
+    <Stack grow overflowY="auto">
+      ...
+    </Stack>
+    <Stack shrink="0">...</Stack>
+  </Stack>
+  ```
+
+- 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
+    rótulo, então o leitor de tela anuncia na mesma ordem. Por baixo, o corpo vira
+    `display: contents` e o cartão uma grade de duas colunas.
+  - `infoTooltip`: texto de ajuda; mostra um ⓘ ao lado do rótulo com o `Tooltip`
+    `dark`. É um botão focável (`infoLabel` traduz o nome, "Mais informações" por
+    padrão) e a ajuda chega ao leitor de tela como descrição do botão. Dentro de
+    um cartão com `onClick` seria botão dentro de botão: evite a combinação.
+
+  ```vue
+  <StatCard
+    labelPosition="top"
+    :value="44"
+    label="Não lidos"
+    :icon="faEyeSlash"
+    variant="primary"
+    infoTooltip="Documentos que você ainda não abriu."
+  />
+  ```
+
+- 3d6dd1d: feat(tabs): contador em pílula (`count`) e aba fechável (`closable`) com botão "+" (`onAdd`)
+
+  Tudo opt-in. Sem as props novas, a aba e a barra se comportam como antes (cada
+  `Tab` ganha um `<span role="presentation">` com `display: contents`, que não
+  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").
+  - `closable`: × num botão próprio, irmão da aba (não dentro dela, para não
+    aninhar botão), círculo de 20px. A tecla Delete na aba focada faz o mesmo.
+    O × não é uma parada de Tab (a aba já tem o Delete); tem nome "Fechar <aba>".
+  - `onClose(index, event)`: quem remove a aba é o app. Clicar no × não troca de aba.
+  - `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).
+
+  ```vue
+  <Tabs
+    :value="atual"
+    :onChange="mudar"
+    :onAdd="adicionar"
+    addLabel="Adicionar aba"
+  >
+    <Tab label="Todas" index="0" :count="31" />
+    <Tab v-for="a in abas" :key="a.id" :label="a.nome" :index="a.id"
+         :closable="true" closeLabel="Fechar" :onClose="fechar" />
+  </Tabs>
+  ```
+
+  Ficou de fora desta rodada: o ponto
+  de estado da aba (a bolinha ao lado do nome); a rolagem horizontal das abas já existia.
+
+- 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
+    temas claros, no escuro e no alto contraste (sem cor fixa). A fonte é a de
+    12px do DS (o CrisDoc usa 11px, que não está na escala). A seta acompanha a cor.
+  - `maxWidth`: largura máxima do balão, qualquer valor CSS, vence o teto de cada
+    variante (280px no padrão, 220px no dark).
+
+  ```vue
+  <Tooltip variant="dark" content="Atualizar" maxWidth="200px">
+    <Button variant="neutral-text" size="xs">Atualizar</Button>
+  </Tooltip>
+  ```
+
+### Patch Changes
+
+- 2259459: fix(ailabel): `defaultOpen` passa a funcionar
+
+  A prop era declarada e documentada, mas nunca lida. Agora o painel nasce
+  aberto com `defaultOpen` (também no HTML do servidor) e o clique continua
+  abrindo e fechando. `open` controlado segue vencendo.
+
+- e00b163: fix(combobox): placeholder do campo somente leitura passa 4,5:1
+
+  Sobre o fundo de somente leitura o placeholder dava 4,20:1 no 1doc (e
+  4,21–4,31:1 nos temas claros de cor). Agora usa `neutral-dark-down`: 6,78:1 no
+  1doc, 10,83:1 no 1doc-dark e 16,48:1 no alto contraste.
+
+- 19ff160: fix(datepicker): placeholder do campo somente leitura passa 4,5:1
+
+  Sobre o fundo de somente leitura o placeholder dava 4,2:1 nos temas claros e
+  o axe reprovava (`color-contrast`). Agora usa `neutral-dark-down`: 6,78:1 no
+  1doc, 10,83:1 no 1doc-dark e 16,48:1 no alto contraste.
+
+- 9315dd7: fix(datepicker): `value` e `defaultValue` chegam ao campo no modo single
+
+  No modo single o componente só lia `range`: `value` e `defaultValue` eram
+  ignorados e o campo mostrava o placeholder. Agora `value` controla o campo e
+  `defaultValue` semeia o modo não-controlado. O modo range não muda.
+
+- 2250bb4: fix(input): placeholder do campo somente leitura passa 4,5:1
+
+  Sobre o fundo de somente leitura o placeholder dava 4,20:1 no 1doc (e
+  4,21–4,31:1 nos temas claros de cor). Agora usa `neutral-dark-down`: 6,78:1 no
+  1doc, 10,83:1 no 1doc-dark e 16,48:1 no alto contraste.
+
+- ef321dc: fix(kanban): quadro não faz a página rolar na horizontal em tela estreita
+
+  O texto só para leitor de tela de cada coluna é `position: absolute` e, sem
+  ancestral posicionado, escapava da rolagem do quadro: a 375px a página ganhava
+  rolagem lateral. `.umds-kanban` passa a ser `position: relative`; o visual não
+  muda.
+
+- 978ad95: fix(multiselect): placeholder do campo somente leitura passa 4,5:1
+
+  Sobre o fundo de somente leitura o placeholder dava 4,20:1 no 1doc (e
+  4,21–4,31:1 nos temas claros de cor). Agora usa `neutral-dark-down`: 6,78:1 no
+  1doc, 10,83:1 no 1doc-dark e 16,48:1 no alto contraste.
+
+- 31d3005: fix(a11y): Select, MultiSelect e SegmentedControl com nome acessível no HTML do servidor
+
+  O id automático desses componentes só nasce no `onMount`, e o nome acessível
+  vinha de `aria-labelledby` apontando para ele: no HTML do servidor, e até a
+  hidratação, o combobox (e os radios do SegmentedControl) ficavam sem nome
+  (axe `aria-input-field-name`). Enquanto não há id, o nome sai do texto do
+  label via `aria-label`; depois do mount volta ao `aria-labelledby`. Servidor e
+  primeira renderização do cliente continuam idênticos. Sem mudança visual.
+
+- 7f58f04: fix(phoneinput): placeholder do campo somente leitura passa 4,5:1
+
+  Sobre o fundo de somente leitura o placeholder dava 4,20:1 no 1doc (e
+  4,21–4,31:1 nos temas claros de cor). Agora usa `neutral-dark-down`: 6,78:1 no
+  1doc, 10,83:1 no 1doc-dark e 16,48:1 no alto contraste.
+
+- 98e9bf0: fix(select): placeholder do campo somente leitura passa 4,5:1
+
+  Sobre o fundo de somente leitura o placeholder dava 4,20:1 no 1doc (e
+  4,21–4,31:1 nos temas claros de cor). Agora usa `neutral-dark-down`: 6,78:1 no
+  1doc, 10,83:1 no 1doc-dark e 16,48:1 no alto contraste.
+
+- c33298c: fix(stack,box): raiz única no Vue, repassa ouvintes e atributos
+
+  No Vue, `Stack` e `Box` saíam com raiz em FRAGMENTO: o Mitosis gera um
+  `<template v-if="elementTag === ...">` por tag, e o Vue não repassa atributo nem
+  ouvinte a um componente de raiz múltipla. Só sobrevivia uma lista fixa
+  (`data-*`, `aria-*`, `style`, `class`, `title`, `role`, `tabIndex`). No 2.8.0
+  publicado a raiz era um `<div>` único e o Vue repassava tudo, então foi uma
+  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
+    fragmento, não para o elemento).
+
+  Agora o template gerado é um `<component :is="elementTag">` só (ligado no
+  `postbuild.js`, como o do `DataTable`), e o fallthrough do Vue leva ao elemento
+  tudo o que o consumidor passa. Continuam como estavam: `as` com as 10 tags,
+  `role="list"` em `ul`/`ol` (o `role` do consumidor vence), `onSubmit` do
+  `as="form"`, `id`, `style` e `className`. O React não muda.
+
+  Novo teste do pacote Vue, `stack-box-raiz-unica.test.mjs`, que monta o
+  componente num DOM (jsdom) e dispara os eventos. O helper `dom.mjs` serve para
+  qualquer teste de comportamento no Vue; não adiciona dependência (usa o jsdom do
+  pacote React e o `vue/compiler-sfc`).
+
+  Outros componentes do 1DS com raiz em fragmento têm o mesmo limite (ex.: `List`,
+  quando troca entre vazio e `ul`/`ol`); este changeset trata só `Stack` e `Box`.
+
+- 81cb08e: fix(textarea): placeholder do campo somente leitura passa 4,5:1
+
+  Sobre o fundo de somente leitura o placeholder dava 4,20:1 no 1doc (e
+  4,21–4,31:1 nos temas claros de cor). Agora usa `neutral-dark-down`: 6,78:1 no
+  1doc, 10,83:1 no 1doc-dark e 16,48:1 no alto contraste.
+
+- f7645bf: fix(timepicker): placeholder do campo somente leitura passa 4,5:1
+
+  Sobre o fundo de somente leitura o placeholder dava 4,20:1 no 1doc (e
+  4,21–4,31:1 nos temas claros de cor). Agora usa `neutral-dark-down`: 6,78:1 no
+  1doc, 10,83:1 no 1doc-dark e 16,48:1 no alto contraste.
+
+- 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
+    não está declarado na interface chega por `attrs`, não por `props`). Nos
+    `.lite.tsx` de `Text` e `Grid` o getter `style` virou `estiloInline`: o Mitosis
+    trocava toda ocorrência da palavra por `style.value` e o estilo do
+    consumidor deixava de passar.
+  - `DataTable` escrevia a classe `umds-datatable__row--selected.value`. O getter
+    `selected` colidia com a palavra dentro da string; virou `selectedIndexes`.
+  - `Button` escrevia `autofocus="false"`. `autoFocus` só vai ao DOM quando
+    verdadeiro.
+  - Tipos do Vue: `setTheme`, `getTheme`, `initTheme`, `getAvailableThemes` e
+    `onThemeChange` estavam tipados com `'light' | 'dark' | 'system'`. Agora
+    `Theme` e `ThemeName` são lidos de `core/src/utils/theme.ts` (`'1doc'`,
+    `'1doc-dark'`, `'1doc-high-contrast'`...), e `registerTheme` foi declarado.
+
+  Testes: `pnpm --filter @1doc/1ds-vue test` (novo, `node:test` com SSR, sem
+  dependência nova) e `AtributosRepassados.test.tsx` no React.
+
+## 2.8.0
+
+### Minor Changes
+
+- 450dfb6: feat(core): rótulos traduzíveis em 22 componentes
+
+  Todo texto em português que estava fixo no código — visível ou lido pelo
+  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).
+  - `AppSidebar`: `expandLabel`, `collapseLabel`.
+  - `AttachmentCard`: `statusContextLabel`, `requiredLabel`, `copyLabel`,
+    `copiedLabel`, `copyErrorLabel`.
+  - `AvatarGroup`: `overflowAriaLabel`, `overflowTitle`.
+  - `BottomSheet`: `grabberLabel`.
+  - `BarChart` e `LineChart`: `categoryLabel`, `valuesListLabel`, `typeLabel`.
+  - `Chips`: `removeAriaLabel`.
+  - `ConfirmDialog`: `loadingLabel`.
+  - `ConfirmAIAction`: `irreversibleLabel`, `typePhraseLabel`, `phraseMatchedLabel`,
+    `phrasePendingLabel`, `loadingLabel`. O `impactLabel` agora também troca o
+    título visível do bloco (antes só o nome acessível da lista).
+  - `DataTable`: `selectAllLabel`, `selectRowLabel`.
+  - `DatePicker`: `dialogLabel`, `dayLabel`.
+  - `FileInput`: `selectFileLabel`, `triggerLabel`, `triggerHint`, `maxSizeLabel`,
+    `dropLabel`, `orLabel`, `browseLabel`, `removeAriaLabel`, `uploadingAriaLabel`.
+  - `Input`: `showPasswordLabel`, `hidePasswordLabel`.
+  - `Kanban`: `announcements` (objeto com as frases do `aria-live`),
+    `assigneeLabel`, `tagsLabel`, `cardRoleDescription`, `columnCountLabel`.
+  - `KanbanCard`: `assigneeLabel`. `KanbanColumn`: `countLabel`.
+  - `Pagination`: `ofLabel`, `itemRangeLabel`, `pageLabel`.
+  - `PhoneInput`: `countryNames`, `copyLabel`, `copyTitle`, `copiedLabel`.
+  - `Stepper`: `completedLabel`, `activeLabel`, `errorLabel`, `pendingLabel`.
+  - `TimePicker`: `hourUnitLabel`, `minuteUnitLabel`, `secondUnitLabel`.
+
+  Texto com variável segue o que o DS já fazia: prefixo em string quando o texto
+  é "verbo + nome" (como o `removeAriaLabel` do `MultiSelect`), função quando há
+  número ou a ordem das palavras muda de idioma para idioma (como o
+  `positionLabel` do `Podium`).
+
+### Patch Changes
+
+- 5f84c72: fix(alert): só `negative` interrompe o leitor de tela
+
+  O Alert usava `role="alert"` (assertivo) em toda variante, e um aviso
+  informativo ou de sucesso cortava o que o leitor de tela estava lendo. Agora
+  `negative` segue com `role="alert"` + `aria-live="assertive"`, e `positive`,
+  `info` e `neutral` passam a `role="status"` + `aria-live="polite"` — a mesma
+  regra do Toast. Sem mudança visual e sem mudança de API.
+
+- 60a225c: fix(app-header): itens de navegação que não cabem vão para o menu "Mais" em vez de serem recortados. O último item cortado ficava com ~13px de alvo clicável (WCAG 2.5.8). O botão usa o `Dropdown` do DS (`aria-haspopup`, `aria-expanded`, setas, Esc devolve o foco), o item ativo continua na barra sempre que couber, e o rótulo é configurável por `moreLabel` (padrão "Mais"). A medição roda só no navegador, depois de montar (ResizeObserver + MutationObserver).
+- 1dd44c4: fix(app-nav-item): o item de navegação do cabeçalho ganha área clicável mínima de 24×24px (WCAG 2.5.8) sem padding nem fundo — só a caixa do botão cresce, centralizada.
+- ffd6692: fix(app-shell): a região de conteúdo (`<main>`) passa a receber foco por teclado (`tabindex="0"`) para rolar pelas setas, com nome acessível configurável na prop nova `contentLabel` (padrão "Conteúdo principal") e foco visível canônico. Resolve o `scrollable-region-focusable` do axe (WCAG 2.1.1).
+- 35e9f76: fix(attachment-card): no Vue, abrir o painel de conferência por clique ou teclado agora leva o foco para dentro dele, como no React. O foco esperava um `onUpdate` do cartão que o Vue não dispara (quem re-renderiza é o Portal), e passou a ser feito também um quadro depois do painel se posicionar.
+- 2e610fa: fix(badge): o ícone do Badge não depende mais da ordem de carga do CSS — a regra do SVG ganhou especificidade (`.umds-badge .umds-badge__icon svg`) e deixa de perder para `.umds-icon svg` quando o CSS do Icon chega depois (voltava a 12px, deslocado).
+- b17859f: fix(bottomsheet): painel nunca sai sem nome acessível
+
+  BottomSheet sem `title`, `ariaLabel` e `ariaLabelledby` saía com
+  `role="dialog"` anônimo. Agora cai no genérico "Painel", como o Drawer, e as
+  props `ariaLabel`/`ariaLabelledby` ganham JSDoc. Sem mudança visual nem de API.
+
+- 75dde22: fix(confirm-dialog): prop `confirmDisabled`; ConfirmAIAction usa em risco alto
+
+  `ConfirmDialog` ganha `confirmDisabled?: boolean`, que desabilita o botão de
+  confirmar sem o estado de carregamento do `confirmLoading`. O
+  `ConfirmAIAction` passa a usá-la: em risco alto o botão fica desabilitado até
+  a frase digitada conferir (antes continuava clicável e só o handler
+  bloqueava). A mensagem `aria-live` passa a dizer que o botão foi liberado.
+
+- 3a124aa: fix(core): o CSS do próprio core passa no `@1doc/1ds-lint`
+
+  Raio e espaço fora da escala viraram token: raio 6px/5px/4px → 8px canônico
+  (AppHeader, SidePanel, SidePanelItem, SidePanelSearch, SidePanelSection), 100px
+  e 12px de contador → pill, 2px → `border-radius-xxs`/`spacing-micro`; espaços
+  20/18/14/10/9/6/3px → degrau mais próximo da escala (AppHeader, AppNavItem,
+  Modal base, SidePanel e filhos). Há mudança de poucos pixels nesses componentes.
+  Onde não existe token equivalente (overlays `rgba`, escurecimento com `black`,
+  raio 3px da caixa do Checkbox, compensações de -5px/-3px/1.5px), o literal
+  continua com `stylelint-disable-next-line` justificado.
+
+- 4d50df8: fix(dropdown): teclado do menu igual no React e no Vue
+
+  No React, as setas levavam o foco para o item que estava ativo antes da tecla,
+  e o End marcava o penúltimo item. A navegação lia o índice ativo logo depois de
+  escrevê-lo: no Vue o valor muda na hora, no React gerado a leitura vinha do
+  render anterior. Agora o próximo índice é calculado por uma função pura e o foco
+  vai para o índice calculado, lido do item focado no DOM. Nos dois frameworks:
+  ArrowDown/ArrowUp movem (com volta nas pontas e pulando item desabilitado),
+  Home/End vão ao primeiro/último, Enter/Espaço ativam, Esc fecha e devolve o foco
+  ao gatilho. Sem mudança visual e sem mudança de API.
+
+- 11935a0: fix(field): borda do campo em repouso passa o WCAG 1.4.11
+
+  `--umds-semantic-field-border-default` deixa `neutral-light-down` (#D5D5D5,
+  1,47:1 sobre branco) e passa a `neutral-dark-medium` (#7D7D7D no tema claro,
+  4,12:1). Passa 3:1 nos 13 temas, sobre `background-white` e `background-light`.
+  Input, Select, MultiSelect, Textarea, Combobox, FileInput e o somente-leitura
+  de PhoneInput passam a ler o token (antes escreviam o primitivo semântico
+  direto); DatePicker, TimePicker e PhoneInput já liam. Desabilitado continua em
+  `neutral-light-down`. Mudança visual: a borda de todo campo fica mais escura.
+
+- fc3a622: fix(file-input): o texto de ajuda (`helperText`) e o subtítulo do card do `FileInput` passam de `neutral-dark-medium` (#7D7D7D, 4,11:1) para `neutral-dark-down` (#565656, 7,34:1) — a mesma cor do texto de ajuda do `Input` — e atingem o contraste mínimo do WCAG 1.4.3.
+- 6754524: fix(modal): prop `ariaLabel` para modal sem título
+
+  Modal sem `title` saía com `role="dialog"` anônimo. Nova prop `ariaLabel`
+  nomeia o diálogo quando não há título (`aria-label`); com título, segue o
+  `aria-labelledby` apontando para ele e `ariaLabel` é ignorado. Sem nenhum dos
+  dois, o diálogo cai no genérico "Diálogo" em vez de sair sem nome (axe
+  aria-dialog-name), como o Drawer já faz com "Painel". Sem mudança visual.
+
+- 0d31b59: fix(modal): a descrição do Modal base passa de `neutral-dark-medium` (#7D7D7D, 4,11:1) para `neutral-dark-down` (#565656, 7,34:1) e atinge o contraste mínimo do WCAG 1.4.3 em todos os temas.
+- e80374d: fix(multiselect): mensagem de erro e texto de apoio ligados ao campo
+
+  O foco do MultiSelect cai no trigger `role="combobox"`, e nada ligava a ele a
+  mensagem de erro nem o `helperText`/`description`: o leitor de tela anunciava
+  o campo e nunca o motivo do erro. Agora o combobox recebe `aria-describedby`
+  (erro primeiro, apoio depois, como no Input) e `aria-invalid` quando há
+  `invalid` ou `errorMessage`.
+
+  Os ids automáticos deixam de ser sorteados na inicialização do componente,
+  o que fazia servidor e cliente gerarem ids diferentes e quebrava a hidratação
+  SSR. O id automático nasce no `onMount`; quem precisa dos ids já no HTML do
+  servidor passa a prop `id`, da qual todos derivam.
+
+- c8d9356: fix(segmented-control): id estável entre servidor e cliente
+
+  O id automático era sorteado na inicialização do componente, então servidor
+  e cliente geravam ids diferentes: a hidratação SSR divergia e o `for` dos
+  rótulos, o `name` dos radios e o `aria-labelledby` do grupo saíam trocados.
+  Nova prop `id`, da qual todos os ids internos derivam (e o `name`, quando não
+  informado). Sem ela, o id automático nasce no `onMount`, só no navegador.
+
+- b2da66f: fix(select): o gatilho do `Select` desabilitado passa a expor `aria-disabled="true"` — leitor de tela anuncia o estado, como já acontecia no `MultiSelect`.
+- 13c288c: fix(select): mensagem de erro e texto de apoio ligados ao campo
+
+  O foco do Select cai no trigger `role="combobox"`, e nada ligava a ele a
+  mensagem de erro nem o `helperText`/`description`: o leitor de tela anunciava
+  o campo e nunca o motivo do erro. Agora o combobox recebe `aria-describedby`
+  (erro primeiro, apoio depois, como no Input) e `aria-invalid` também quando há
+  `errorMessage`, não só com `invalid`.
+
+  Os ids automáticos deixam de ser sorteados na inicialização do componente,
+  o que fazia servidor e cliente gerarem ids diferentes e quebrava a hidratação
+  SSR. O id automático nasce no `onMount`; quem precisa dos ids já no HTML do
+  servidor passa a prop `id`, da qual todos derivam.
+
+- 954b332: fix(side-panel): o contador do `SidePanelItem` e o rótulo do `SidePanelSection` passam de `neutral-dark-medium` (#7D7D7D, 4,11:1) para `neutral-dark-down` (#565656, 7,34:1) e atingem o contraste mínimo do WCAG 1.4.3 em todos os temas.
+- e8cd29b: fix(stepper): o número da etapa pendente passa da cor de desabilitado (`neutral-dark-up`, #A3A3A3, 2,5:1) para `neutral-dark-down` (#565656, 7,34:1), a mesma do título pendente, e atinge o contraste mínimo do WCAG 1.4.3.
+- b622c03: docs(text): o JSDoc da prop `color` do `Text` passa a dizer que `color="disabled"` (#A3A3A3, 2,5:1) é só para texto de controle desabilitado — em qualquer outro texto reprova o WCAG 1.4.3; o indicado é `secondary`.
+- f04dc5a: fix(tooltip): texto anunciado pelo leitor de tela no elemento focável
+
+  O `aria-describedby` ficava no `<span>` que embrulha o gatilho, que nunca
+  recebe foco: o texto do tooltip não era lido. Agora o Tooltip escreve o
+  `aria-describedby` no filho focável (o botão, o link, o campo), somando ao
+  que ele já tinha, e aponta para uma cópia do texto que fica sempre no DOM,
+  visualmente escondida — a bolha só monta depois do foco, tarde demais para o
+  leitor de tela.
+
+  O foco passa a ser escutado com `focusin`/`focusout` nativos: no Vue, o
+  `@focus` no span não disparava quando o foco caía no filho, e o tooltip não
+  abria pelo teclado. Esc continua fechando. Os ids automáticos nascem no
+  `onMount`, sem divergência de hidratação SSR.
+
+- 2b881aa: fix(tooltip): Esc com o tooltip aberto não fecha o Modal em volta
+
+  Um tooltip aberto dentro de Modal, Drawer ou BottomSheet fechava a dica e o
+  overlay no mesmo Esc. Agora o Esc que fecha o tooltip é consumido
+  (`stopPropagation`, escutando no `window` em captura, antes do `document` onde
+  os overlays escutam). Com o tooltip fechado, o Esc segue normal para o overlay.
+  Sem mudança visual e sem mudança de API.
+
 ## 2.7.2
 
 ### Patch Changes