@1doc/1ds-react 2.8.0 → 2.10.0

package/CHANGELOG.md

@@ -1,5 +1,1545 @@
 # @1doc/1ds-react
 
+## 2.10.0
+
+### Minor Changes
+
+- 12c65e9: feat(accordion): `titleVariant="neutral"`, o título de texto
+
+  `titleVariant` aceita `default` (o título como era) e `neutral`: 14px na cor do texto
+  (`neutral-dark-pure`), peso médio, também no hover e no aberto, sem cor de ação. O chevron
+  aberto continua azul (é o sinal do estado). Combina com qualquer `variant`.
+
+  ```vue
+  <Accordion :items="itens" variant="separated" titleVariant="neutral" />
+  ```
+
+- 6df8835: feat(attachmentcard): `size="sm"`, o cartão compacto do CrisDoc
+
+  `size="sm"` leva o ícone do preview a 40px (no `md`, 48px) e o ícone do rodapé a
+  12px (no `md`, o `sm` do `Icon`). A largura do cartão, os selos e o painel não
+  mudam. Sem `size`, ou com `md`, o cartão é o mesmo.
+
+  ```vue
+  <AttachmentCard
+    fileName="Protocolo 104-2026.pdf"
+    documentType="Parecer"
+    size="sm"
+    :onOpen="abrir"
+  />
+  ```
+
+- 4ab330c: feat(badge): `attachedSide="left" | "right"` no `Badge attached`
+
+  O rótulo colado no topo do card pode ir para o canto direito. Sem a prop, ou com
+  `left`, continua no esquerdo. Só vale com `attached`.
+
+  ```vue
+  <Badge
+    :attached="true"
+    attachedSide="right"
+    size="sm"
+    appearance="solid"
+    variant="primary"
+  >Prazo hoje</Badge>
+  ```
+
+- 1f805cd: feat(coachmark): `modal={false}`, o cartão sem véu nem foco preso, para dica pontual
+
+  Com `modal={false}` não há véu, recorte nem foco preso: o cartão é um popover
+  ancorado no alvo (`role="dialog"` com `aria-modal="false"`). A página segue
+  clicável, o foco entra no cartão ao abrir mas o Tab pode sair dele, e o Esc fecha de
+  qualquer lugar da página (uma vez só, com o motivo `escape`). Ao fechar, o foco só
+  volta ao elemento de antes se a pessoa não foi a outro lugar. Sem a prop, o tour é
+  modal como sempre (no Vue, `modal` é `any` para a ausência não virar `false`).
+
+  Corrige também o elemento de antes guardado duas vezes no React (o segundo
+  `sincronizar`, antes de o `active` valer, guardava o próprio cartão e o foco não voltava).
+
+  ```vue
+  <Coachmark
+    :open="aberto"
+    :modal="false"
+    :hideSkip="true"
+    finishLabel="Entendi"
+    :steps="[{ target: '#salvar', title: 'Novo: salvar com Ctrl+S' }]"
+    :onClose="() => (aberto = false)"
+  />
+  ```
+
+- 46b3b42: feat(colorpicker): `size="xs"`, a amostra de 20px do CrisDoc
+
+  `size` ganha `xs` (20px), além de `sm` (24px) e `md` (32px). O anel de seleção (o anel duplo)
+  e o roving tabindex são os mesmos nos três tamanhos. O `sm` segue em 24px: o `xs` é o 20px do
+  CrisDoc.
+
+  ```vue
+  <ColorPicker
+    ariaLabel="Marcador"
+    size="xs"
+    :families="['blue', 'red']"
+    defaultValue="--umds-primitive-red-pure"
+  />
+  ```
+
+- 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.
+  - `striped`: zebra nas linhas ímpares.
+  - `selectedRowKeys` (com `rowKey`) e `isRowSelected(row, index)`: destacam a linha
+    sem checkbox (fundo, barra de 4px à esquerda e `aria-selected`). Serve à linha
+    "aberta" de uma lista mestre-detalhe. `selectedKeys` segue sendo o checkbox.
+  - `emptyIcon` (objeto Font Awesome, padrão `faInbox`) e `emptyDescription`.
+  - `hideHeader`: o cabeçalho some da tela e as colunas continuam nomeadas para o
+    leitor de tela (a linha fica visualmente oculta, não removida).
+  - `density="compact"` + `variant="document"`: fonte de 12px e célula de 4px × 8px.
+    A escala do DS não tem 13px, então o compacto da tabela de interface segue em 14.
+  - `treeData` + `childrenKey`: linhas hierárquicas. A tabela vira `role="treegrid"`,
+    as linhas ganham `aria-level`, `aria-posinset`, `aria-setsize` e `aria-expanded`,
+    e a primeira coluna leva recuo por nível, fios (tee, cotovelo e linha contínua) e o
+    botão de expandir/recolher. Teclado: ↓ ↑ andam, → expande (ou desce à primeira
+    filha), ← recolhe (ou sobe ao pai), Home e End. Uma linha por vez na ordem de Tab.
+    Estado: `expandedKeys` (controlado), `defaultExpandedKeys`, `defaultExpandAll` e
+    `onExpand(chaves, linha, expandida)`. A chave é o `rowKey`; sem ele, o caminho de
+    índices. `expandLabel` e `collapseLabel` traduzem o botão. Com `treeData`, os índices
+    dos callbacks contam as linhas visíveis.
+
+  O slot `#cell-<key>` do Vue segue valendo na coluna da árvore (o `postbuild` agora
+  liga as duas ocorrências da célula).
+
+  ```vue
+  <DataTable
+    :columns="colunas"
+    :data="setores"
+    rowKey="id"
+    :treeData="true"
+    headerVariant="dark"
+    :headerUppercase="true"
+    :striped="true"
+    :defaultExpandedKeys="['gab']"
+    :onExpand="aoExpandir"
+  >
+    <template #cell-nome="{ row }"><strong>{{ row.sigla }}</strong> {{ row.nome }}</template>
+  </DataTable>
+  ```
+
+- 1c9f7cb: feat(descriptionlist): `density="compact"`, a fonte de 12px do CrisDoc
+
+  `density="compact"` leva a fonte da lista de 14 para 12px (nos dois desenhos), aperta o
+  espaço entre os pares do `stacked` (de 16 para 12px) e o padding do valor com `bordered`.
+  Sem a prop, ou com `default`, a lista é a mesma.
+
+  ```vue
+  <DescriptionList
+    :items="dados"
+    layout="stacked"
+    :bordered="true"
+    density="compact"
+  />
+  ```
+
+- d062029: feat(emptystate): título com conteúdo rico (elemento no React, slot `title` no Vue)
+
+  O `title` do `EmptyState` aceita conteúdo (negrito, link, ícone). No React é um
+  elemento na própria prop; no Vue é o slot `title`, com a prop como texto de reserva.
+  O título passa a ser um `div` (antes um `p`), com a mesma classe e o mesmo visual,
+  para o conteúdo de bloco não virar HTML inválido. `title` deixou de ser obrigatório
+  na tipagem: no Vue o slot basta.
+
+  ```vue
+  <EmptyState :icon="faMagnifyingGlass" description="Ajuste o filtro de setor.">
+    <template #title>Nenhum processo para <strong>SOBR</strong></template>
+  </EmptyState>
+  ```
+
+- 29955dd: feat(input): `grouped`, o campo dentro de um contêiner que já tem moldura e foco (campo de chips)
+
+  Opt-in. `grouped` implica `borderless` e tira a altura de campo, o padding e o anel
+  de foco próprio do `Input`: a altura vem do conteúdo (a linha cresce com as tags), o
+  campo ocupa o espaço que sobra (`flex: 1 1 80px`, sem `fullWidth`) e quem mostra o foco é
+  o contêiner, com `:focus-within`. O `borderless` sozinho continua como era: com altura de
+  campo e o contorno de foco para dentro. Sem o foco no contêiner, quem usa teclado perde o
+  indicador (WCAG 2.4.7): a doc da prop avisa.
+
+  ```vue
+  <div class="chips-campo"> <!-- a moldura e o :focus-within são seus -->
+    <Tag label="SADM" size="sm" />
+    <Input ariaLabel="Adicionar setor" :grouped="true" size="sm" />
+  </div>
+  ```
+
+- 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
+    `List` (botão de número de página, item de carrossel). `class` (Vue) ou `className`
+    vai ao elemento.
+  - Correção no Vue: `aria-*`, `role`, `data-*` e `style` iam ao `li` além do elemento
+    interativo (o `aria-label` aparecia duas vezes e o `li` ganhava um `role` que não era
+    dele). Agora o `inheritAttrs` está desligado e esses atributos vão só ao elemento
+    interativo, como no React. O `class` do Vue continua no `li`, como sempre. Por baixo,
+    o ListItem passa a ter duas raízes (com `li` e `standalone`), então o HTML do servidor
+    abre com marcador de fragmento.
+
+  ```vue
+  <ListItem
+    :standalone="true"
+    title="12"
+    tooltip="Página 12"
+    :selected="pagina === 12"
+    :onClick="irPara"
+  />
+  ```
+
+- 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
+    (PNG, JPEG, GIF ou WebP até 2 MB, que entra como `data:` URL) e o texto
+    alternativo. Endereço e arquivo inválidos mostram o erro e o painel continua aberto.
+  - `table`: abre um painel com linhas e colunas (1 a 20 e 1 a 10, padrão 3 × 3) e
+    insere a tabela. Com o cursor numa célula aparece a barra de adicionar e remover
+    linha e coluna e remover a tabela (mexe no DOM, então fica fora do desfazer).
+
+  A higienização do valor passou a aceitar `text-align` nos blocos (também pelo
+  atributo `align`), `img` e a tabela (`table`, `thead`, `tbody`, `tr`, `th`, `td`
+  com `colspan` e `rowspan`). Imagem só vale com `http(s)`, caminho (`/x`, `./x`,
+  `../x`) ou `data:image` em base64 de PNG, JPEG, GIF e WebP; SVG, `javascript:`,
+  `//host` e o resto saem inteiros. Colar continua entrando como texto puro.
+
+  Todos os textos novos vêm por `labels` (`imageUrl`, `imageAlt`, `imageFile`,
+  `imageApply`, `imageCancel`, `imageInvalid`, `imageType`, `imageTooLarge`,
+  `tableRows`, `tableCols`, `tableApply`, `tableCancel`, `tableInvalid`,
+  `tableActions`, `tableAddRow`, `tableRemoveRow`, `tableAddCol`, `tableRemoveCol`,
+  `tableRemove` e o nome de cada ferramenta nova).
+
+  ```vue
+  <RichTextEditor
+    label="Parecer"
+    :defaultValue="html"
+    :toolbar="[
+      'bold',
+      'italic',
+      '|',
+      'alignLeft',
+      'alignCenter',
+      'alignRight',
+      'alignJustify',
+      '|',
+      'link',
+      'image',
+      'table',
+    ]"
+  />
+  ```
+
+- af0d976: feat(richtexteditor): família, tamanho de fonte e cor do texto, por token do DS
+
+  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.
+
+  Sem texto selecionado o painel pede a seleção e não aplica nada. Esc fecha só a lista do `Select`
+  aberta; o seguinte fecha o painel. Para voltar ao padrão, use `clear`.
+
+  A higienização aceita `color`, `font-size` e `font-family` só em `<span>` e só com token do DS: cor
+  em hex, `rgb()` ou nome, tamanho em px e fonte por nome saem, e o resto do `style` também.
+
+  Textos novos por `labels`: `fontFamily`, `fontSize`, `textColor`, `fontFamilyBase`,
+  `fontFamilyMono`, `styleClose` e `styleNeedsSelection`.
+
+  ```vue
+  <RichTextEditor
+    label="Parecer"
+    :toolbar="['bold', 'italic', '|', 'fontFamily', 'fontSize', 'textColor']"
+  />
+  ```
+
+- 992f59a: feat(segmentedcontrol): `count` por item, a pílula do contador como a do `Tab`
+
+  Cada opção aceita `count` (número ou texto): uma pílula de 18px depois do rótulo,
+  cinza no segmento solto e branca sobre o azul do escolhido (o mesmo desenho do
+  contador do `Tab`). `0` aparece; vazio e ausente não. O contador entra no nome
+  acessível do segmento ("Todas 31"). Sem `count`, o segmento é o mesmo.
+
+  ```vue
+  <SegmentedControl
+    label="Fila"
+    :value="fila"
+    :onChange="(v) => (fila = v)"
+    :options="[
+      { label: 'Todas', value: 'todas', count: 31 },
+      { label: 'Minhas', value: 'minhas', count: 12 },
+    ]"
+  />
+  ```
+
+- 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
+    filtro com ação no rodapé fechar a lista antes de abrir um modal.
+  - `triggerIcon` (objeto Font Awesome) e `triggerSwatch` (um token de cor): ícone e
+    amostra de cor à esquerda do texto do gatilho, decorativos.
+  - `variant="search"` (o filtro numa barra de busca: altura de campo e contorno neutro)
+    e `variant="combo"` (colado a outro controle, sem borda nem raio próprios). Os dois
+    são filtro: busca focada ao abrir, `emptyOptionLabel` e o rodapé valem.
+  - Dentro de um diálogo (`role="dialog"` ou `aria-modal`), a lista abre por cima dele:
+    `position: fixed` ancorada no gatilho pelo `@floating-ui/dom`, com a largura do
+    gatilho e a altura limitada ao espaço da janela. O `overflow` do corpo do modal
+    não corta mais a lista.
+  - `placement="auto"` agora mede também cada ancestral que rola ou corta (um corpo de
+    modal, um painel com `overflow`), não só a janela, e limita a altura da lista ao
+    espaço que sobra (mínimo de 96px).
+  - `required` repassa `aria-required` ao combobox.
+
+  ```vue
+  <Select
+    variant="filter"
+    ariaLabel="Marcadores"
+    placeholder="Marcadores"
+    :triggerIcon="faTag"
+    :open="aberto"
+    :onOpenChange="(v) => (aberto = v)"
+    :options="marcadores"
+    :value="valor"
+    :onChange="(v) => (valor = v)"
+  >
+    <template #footer>
+      <Button variant="text" size="sm" @click="abrirGerenciador">Gerenciar marcadores</Button>
+    </template>
+  </Select>
+  ```
+
+- 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
+    escolhido um valor (a classe `umds-select--has-value`), que é quando o filtro está
+    recortando a lista. `search` e `combo` mantêm o fundo deles.
+  - `option.color` (um token, `var(--umds-semantic-color-...)`): uma amostra de 12px antes do
+    texto de cada opção na lista e, com a opção escolhida (seleção única), no gatilho.
+    `triggerSwatch` explícito manda sobre ela. A cor é decorativa: o nome da opção continua
+    sendo o texto.
+  - O `useStore` do `Select` passou a checar o gatilho antes do `autoUpdate` (o `tsc` do React
+    acusava o `null`).
+
+  ```vue
+  <Select
+    variant="filter"
+    ariaLabel="Marcadores"
+    placeholder="Marcadores"
+    :triggerIcon="faFilter"
+    :options="[
+      {
+        label: 'Urgente',
+        value: 'urgente',
+        color: 'var(--umds-semantic-color-feedback-negative-pure)',
+      },
+    ]"
+  />
+  ```
+
+- 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
+    ausente não. Com `labelPosition="top"` a grade ganha uma terceira coluna.
+  - `valueTone`: cor do número principal, `default` | `primary` | `positive` | `negative` |
+    `info`, pelas variantes escuras (contraste AA no branco). Não mexe na `variant`, que segue
+    pintando o ícone e a variação.
+
+  ```vue
+  <StatCard
+    labelPosition="top"
+    label="Eficiência"
+    value="22,31%"
+    description="Meu Setor"
+    secondaryValue="14,11%"
+    secondaryLabel="Geral"
+    valueTone="primary"
+  />
+  ```
+
+- 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.
+  - `details`: lista de linhas curtas abaixo da descrição ("Anexo 1 acima de 10 MB").
+  - No `toast()` imperativo e no `ToastStack`, as três opções passam adiante. Toast com ação
+    tem `duration: 0` por padrão (não some antes de dar tempo de agir, WCAG 2.2.1); sem ação
+    continua em 5000, e um `duration` explícito vale sempre.
+
+  ```ts
+  toast({
+    message: "Despacho enviado",
+    variant: "positive",
+    actionLabel: "Desfazer",
+    onAction: desfazer,
+  });
+  ```
+
+### Patch Changes
+
+- 6c12a37: fix(appsubheader): a região do contexto ocupa a altura da barra e só rola na horizontal
+
+  Com a trilha só na página atual (um `Breadcrumb` sem link), o axe acusava
+  `scrollable-region-focusable`. Medido no navegador: a região do contexto tinha 12px de
+  altura (a do item do Breadcrumb, `line-height: 1` em 12px) e `scrollHeight` de 14, e como
+  `overflow-x: auto` faz o `overflow-y` computar para `auto`, ela virava uma região rolável
+  sem nenhum elemento focável dentro. Agora a região ocupa a altura da barra
+  (`align-self: stretch`, 41px, com o conteúdo centralizado) e corta o eixo vertical
+  (`overflow-y: hidden`): não há o que rolar na vertical. A rolagem horizontal da trilha longa
+  continua igual. Story nova "Só a página atual" confere `scrollHeight` e `scrollWidth`.
+
+- e8f1894: fix(attachmentcard): o `dl` do painel de conferência passa no axe (`definition-list`)
+
+  Cada campo do painel era `div > (div > dt + dd) + button`: o `dl` só aceita `div` com `dt` e
+  `dd` direto dentro, então o axe acusava `definition-list`. Agora é `div > dt + dd`, e o
+  botão de copiar mora dentro do `dd`, ao lado do valor (o valor passou a ter o próprio
+  `span`, `umds-attachment-card__campo-valor-texto`). O visual muda só no detalhe: o botão
+  de copiar fica alinhado à linha do valor, não ao centro das duas linhas do campo.
+
+- 04d5a43: fix(badge): o neutro colado é o cinza claro com texto escuro
+
+  `<Badge attached variant="neutral" appearance="solid">` ficava no cinza escuro do `solid`
+  neutro, pesado demais para o rótulo de um card. Agora o neutro colado e sólido é o cinza claro
+  com texto escuro (o "Tarefa manual" do CrisDoc). O `solid` neutro fora do `attached` não muda.
+
+- e5896d9: docs(calendar): os slots do cabeçalho no Vue são `#header-start` e `#header-end`
+
+  O `index.d.ts` e a documentação diziam `headerStart` e `headerEnd` para os dois
+  frameworks, mas no Vue só os nomes com hífen chegam ao cabeçalho (o Vue lê o nome do
+  slot como está: `#headerStart` é descartado em silêncio). A doc do componente, o
+  comentário das props e os `argTypes` dos Storybooks agora dizem: no React, as props
+  `headerStart` e `headerEnd` (um nó); no Vue, os slots `#header-start` e `#header-end`.
+  Sem mudança de comportamento.
+
+## 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