@1doc/1ds-react 2.9.0 → 2.11.0

package/CHANGELOG.md

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

package/dist/components/Accordion/Accordion.css

@@ -99,6 +99,19 @@
   opacity: 0.6; /* opacidade do protótipo sem token 1DS */
 }
 
+/* ── Título neutro (titleVariant="neutral") ──
+   14px na cor do texto, em peso médio, também no hover e no aberto: o título não
+   pega a cor de ação. O chevron aberto continua azul (é o sinal do estado). */
+.umds-accordion--title-neutral .umds-accordion__title {
+  font-size: var(--umds-primitive-font-size-xxs); /* 14px */
+  font-weight: var(--umds-primitive-font-weight-medium);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-accordion--title-neutral .umds-accordion__trigger:disabled .umds-accordion__title {
+  color: inherit;
+}
+
 /* ── Chevron ──
    Migrado de <svg> inline para o componente Icon (chevron-down).
    O wrapper .umds-accordion__chevron recebe cor (via currentColor →