@1doc/1ds-react 2.9.0 → 2.10.0

package/CHANGELOG.md

@@ -1,5 +1,439 @@
 # @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

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 →

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

@@ -16,6 +16,7 @@ export interface AccordionItemData {
  * @property {AccordionItemData[]} items - Itens do accordion (id, title, content, disabled?, defaultOpen?). Conteúdo livre por item: no React, `content` aceita nó; no Vue, o slot `#content-<id>` (recebe `{ item }`).
  * @property {boolean} multiple - Permite manter vários painéis abertos ao mesmo tempo
  * @property {string} variant - Estilo visual: 'default' | 'bordered' | 'separated'
+ * @property {string} titleVariant - Título dos itens: 'default' | 'neutral'. O `neutral` é o título de texto, 14px na cor do texto, sem cor de ação (como um `Button text` neutro), para o accordion do CrisDoc.
  * @property {string} className - Classes CSS adicionais
  * @quandoUsar Conteúdo que fica RECOLHIDO até o usuário querer: FAQ, seções opcionais de formulário, detalhes secundários. Vários podem abrir juntos com `multiple`.
  * @quandoNaoUsar Para alternar entre visões equivalentes sempre disponíveis — use `Tabs`. Se o conteúdo é essencial, não esconda atrás de acordeão.
@@ -24,6 +25,8 @@ export interface AccordionProps {
     items: AccordionItemData[];
     multiple?: boolean;
     variant?: "default" | "bordered" | "separated";
+    /** Título dos itens. `neutral`: 14px na cor do texto, peso médio. @default 'default' */
+    titleVariant?: "default" | "neutral";
     className?: string;
 }
 declare function Accordion(props: AccordionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/Accordion.js

@@ -35,6 +35,7 @@ function Accordion(props) {
         return [
             "umds-accordion",
             `umds-accordion--${props.variant || "default"}`,
+            props.titleVariant === "neutral" ? "umds-accordion--title-neutral" : "",
             props.className,
         ]
             .filter(Boolean)

package/dist/components/AppSubheader/AppSubheader.css

@@ -21,14 +21,23 @@
 }
 
 /* O contexto cede espaço e rola sozinho: uma trilha longa não pode empurrar
-   a busca e as ações para fora da tela. */
+   a busca e as ações para fora da tela.
+   Só rola na HORIZONTAL, e só quando a trilha estoura. `overflow-x: auto` sozinho
+   faz o `overflow-y` computar para `auto` também, e o `line-height` do item do
+   Breadcrumb (12px, numa linha de 12px) deixa o conteúdo 2px acima da caixa de 12px
+   (medido: scrollHeight 14, clientHeight 12): com a trilha só na página atual (sem
+   link para focar) o axe acusa `scrollable-region-focusable`. Por isso a região
+   ocupa a altura da barra (`align-self: stretch`, o conteúdo segue centralizado) e o
+   eixo vertical é cortado: não há o que rolar na vertical. */
 .umds-app-subheader__contexto {
   flex: 1;
+  align-self: stretch;
   min-width: 0;
   display: flex;
   align-items: center;
   gap: var(--umds-primitive-spacing-nano);
   overflow-x: auto;
+  overflow-y: hidden;
   scrollbar-width: none;
 }
 

package/dist/components/AttachmentCard/AttachmentCard.css

@@ -183,18 +183,10 @@
 }
 
 .umds-attachment-card__campo {
-    display: flex;
-    align-items: center;
-    gap: var(--umds-primitive-spacing-nano);
     padding: var(--umds-primitive-spacing-nano) 0;
     border-top: 1px solid var(--umds-semantic-color-neutral-light-medium);
 }
 
-.umds-attachment-card__campo-texto {
-    flex: 1;
-    min-width: 0;
-}
-
 .umds-attachment-card__campo-rotulo {
     color: var(--umds-semantic-color-neutral-dark-down);
     font-size: var(--umds-primitive-font-size-xxxs);
@@ -202,7 +194,12 @@
     text-transform: uppercase;
 }
 
+/* O valor e o botão de copiar na mesma linha: o botão mora dentro do <dd> (o <dl> só aceita
+   <dt> e <dd> dentro do <div>). */
 .umds-attachment-card__campo-valor {
+    display: flex;
+    align-items: center;
+    gap: var(--umds-primitive-spacing-nano);
     margin: var(--umds-primitive-spacing-micro) 0 0; /* 2px: respiro rótulo→valor */
     font-size: var(--umds-primitive-font-size-xxs);
     font-weight: var(--umds-primitive-font-weight-bold);
@@ -210,6 +207,11 @@
     overflow-wrap: anywhere;
 }
 
+.umds-attachment-card__campo-valor-texto {
+    flex: 1;
+    min-width: 0;
+}
+
 /* Alvo de toque WCAG 2.5.8: 32×32. */
 .umds-attachment-card__copiar {
     display: inline-flex;

package/dist/components/AttachmentCard/AttachmentCard.d.ts

@@ -15,6 +15,7 @@ import './AttachmentCard.css';
  * @property {boolean} closePanelOnAction - Fecha o painel e devolve o foco ao selo quando alguém aciona um botão ou link de dentro dele (o botão "Aplicar sugestão" do painel de IA). O botão de copiar um campo não conta.
  * @property {Function} onCopyField - Avisa quando um campo do painel é copiado (recebe o campo)
  * @property {IconProp} icon - Ícone central. Padrão: documento.
+ * @property {string} size - Tamanho do cartão: 'md' (padrão) | 'sm'. O `sm` é o compacto do CrisDoc: ícone do preview de 40px (no `md`, 48px) e ícone do rodapé de 12px (no `md`, 16px). A largura e os selos não mudam.
  * @property {Function} onOpen - Abre o anexo. Com ele o cartão inteiro vira alvo de clique, com um único ponto de foco.
  * @property {string} openAriaLabel - Nome acessível da ação de abrir. Padrão: "Abrir <tipo>: <arquivo>".
  * @property {string} className - Classes CSS adicionais
@@ -60,6 +61,8 @@ export interface AttachmentCardProps {
     closePanelOnAction?: boolean;
     onCopyField?: (field: AttachmentCardField) => void;
     icon?: IconProp;
+    /** Tamanho do cartão. `sm`: ícone do preview de 40px e ícone do rodapé de 12px. @default 'md' */
+    size?: "md" | "sm";
     onOpen?: (event?: any) => void;
     openAriaLabel?: string;
     /** Complemento lido depois do selo, para dizer de qual documento ele é. Recebe o tipo de documento (ou o nome do arquivo). Troque para traduzir. @default (subject) => 'conferência de ' + subject */

package/dist/components/AttachmentCard/AttachmentCard.js

@@ -29,6 +29,7 @@ function AttachmentCard(props) {
         return [
             "umds-attachment-card",
             props.onOpen ? "umds-attachment-card--interativo" : "",
+            props.size === "sm" ? "umds-attachment-card--sm" : "",
             props.className,
         ]
             .filter(Boolean)
@@ -145,6 +146,12 @@ function AttachmentCard(props) {
             return faFileExcel;
         return faFile;
     }
+    function tamanhoIconeCentral() {
+        return props.size === "sm" ? "40px" : "48px";
+    }
+    function tamanhoIconeRodape() {
+        return props.size === "sm" ? "12px" : undefined;
+    }
     function iconeCentral() {
         return props.icon || faFileLines;
     }
@@ -386,6 +393,6 @@ function AttachmentCard(props) {
             desligarObservadores();
         };
     }, []);
-    return (_jsxs("div", { className: classes(), id: props.id, children: [_jsxs("div", { className: "umds-attachment-card__topo", children: [temSelo() && !temDetalhe() ? (_jsxs("span", { className: statusClasses(), children: [seloIcone() ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: seloIcone() })) : null, _jsx("span", { className: "umds-attachment-card__status-texto", children: props.statusLabel })] })) : null, temDetalhe() ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", "aria-haspopup": "dialog", ref: seloRef, className: statusBotaoClasses(), "aria-expanded": ariaExpandidoTexto(), "aria-controls": ariaControlsTexto(), onMouseEnter: (event) => abrir(false), onMouseLeave: (event) => agendarFechar(), onClick: (event) => alternar(), onKeyDown: (event) => teclaNoSelo(event), onBlur: (event) => focoSaiu(event), children: [seloIcone() ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: seloIcone() })) : null, _jsx("span", { className: "umds-attachment-card__status-texto", children: props.statusLabel }), _jsx("span", { className: "umds-attachment-card__sr", children: seloComplemento() })] }), _jsx(Portal, { children: aberto ? (_jsx("span", { className: "umds-attachment-card__flutuante", ref: flutuanteRef, style: flutuanteEstilo(), children: _jsxs("div", { className: "umds-attachment-card__detalhe", role: "dialog", "aria-modal": "false", ref: painelRef, id: painelId(), "aria-labelledby": painelNomeadoPor(), "aria-label": painelRotulo(), tabIndex: -1, style: detalheEstilo(), onClick: (event) => cliqueNoPainel(event), onMouseEnter: (event) => cancelarFechar(), onMouseLeave: (event) => agendarFechar(), onKeyDown: (event) => teclaNoPainel(event), children: [_jsx("span", { className: "umds-attachment-card__sr", role: "status", "aria-live": "polite", children: anuncio }), props.panel ? (_jsx(_Fragment, { children: props.panel })) : (_jsx(_Fragment, { children: _jsxs(_Fragment, { children: [_jsxs("div", { className: "umds-attachment-card__detalhe-topo", children: [_jsx("span", { "aria-hidden": "true", className: detalheIconeClasses(), children: _jsx(Icon, { size: "md", variant: "inherit", icon: detalheIcone() }) }), _jsx("span", { className: "umds-attachment-card__detalhe-titulo", id: tituloId(), children: detalheTitulo() })] }), detalheDescricao() ? (_jsx("p", { className: "umds-attachment-card__detalhe-descricao", children: detalheDescricao() })) : null, detalheCampos().length > 0 ? (_jsx("dl", { className: "umds-attachment-card__campos", children: detalheCampos()?.map((campo) => (_jsxs("div", { className: "umds-attachment-card__campo", children: [_jsxs("div", { className: "umds-attachment-card__campo-texto", children: [_jsx("dt", { className: "umds-attachment-card__campo-rotulo", children: campo.label }), _jsx("dd", { className: "umds-attachment-card__campo-valor", children: campo.value })] }), campo.copyable ? (_jsx("button", { type: "button", className: "umds-attachment-card__copiar", "aria-label": rotuloCopiar(campo), onClick: (event) => copiarCampo(campo), children: _jsx(Icon, { size: "sm", variant: "inherit", icon: iconeCopiar(campo) }) })) : null] }, campo.label))) })) : null] }) }))] }) })) : null })] })) : null] }), _jsx("div", { className: "umds-attachment-card__preview", "aria-hidden": "true", children: _jsx(Icon, { customSize: "48px", variant: "inherit", icon: iconeCentral() }) }), _jsx("div", { className: "umds-attachment-card__tipo-area", children: props.documentType ? (_jsxs("span", { className: "umds-attachment-card__tipo", children: [_jsx("span", { className: "umds-attachment-card__tipo-texto", children: props.documentType }), props.required ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "umds-attachment-card__obrigatorio", "aria-hidden": "true", children: "*" }), _jsx("span", { className: "umds-attachment-card__sr", children: props.requiredLabel || "(obrigatório)" })] })) : null] })) : null }), _jsxs("div", { className: "umds-attachment-card__rodape", title: props.fileName, children: [_jsx("span", { className: "umds-attachment-card__rodape-icone", "aria-hidden": "true", children: _jsx(Icon, { size: "sm", variant: "inherit", icon: iconeArquivo() }) }), props.onOpen ? (_jsx("button", { type: "button", className: "umds-attachment-card__nome umds-attachment-card__abrir", "aria-label": rotuloAbrir(), onClick: (event) => handleOpen(event), children: props.fileName })) : (_jsx("span", { className: "umds-attachment-card__nome", children: props.fileName }))] })] }));
+    return (_jsxs("div", { className: classes(), id: props.id, children: [_jsxs("div", { className: "umds-attachment-card__topo", children: [temSelo() && !temDetalhe() ? (_jsxs("span", { className: statusClasses(), children: [seloIcone() ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: seloIcone() })) : null, _jsx("span", { className: "umds-attachment-card__status-texto", children: props.statusLabel })] })) : null, temDetalhe() ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", "aria-haspopup": "dialog", ref: seloRef, className: statusBotaoClasses(), "aria-expanded": ariaExpandidoTexto(), "aria-controls": ariaControlsTexto(), onMouseEnter: (event) => abrir(false), onMouseLeave: (event) => agendarFechar(), onClick: (event) => alternar(), onKeyDown: (event) => teclaNoSelo(event), onBlur: (event) => focoSaiu(event), children: [seloIcone() ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: seloIcone() })) : null, _jsx("span", { className: "umds-attachment-card__status-texto", children: props.statusLabel }), _jsx("span", { className: "umds-attachment-card__sr", children: seloComplemento() })] }), _jsx(Portal, { children: aberto ? (_jsx("span", { className: "umds-attachment-card__flutuante", ref: flutuanteRef, style: flutuanteEstilo(), children: _jsxs("div", { className: "umds-attachment-card__detalhe", role: "dialog", "aria-modal": "false", ref: painelRef, id: painelId(), "aria-labelledby": painelNomeadoPor(), "aria-label": painelRotulo(), tabIndex: -1, style: detalheEstilo(), onClick: (event) => cliqueNoPainel(event), onMouseEnter: (event) => cancelarFechar(), onMouseLeave: (event) => agendarFechar(), onKeyDown: (event) => teclaNoPainel(event), children: [_jsx("span", { className: "umds-attachment-card__sr", role: "status", "aria-live": "polite", children: anuncio }), props.panel ? (_jsx(_Fragment, { children: props.panel })) : (_jsx(_Fragment, { children: _jsxs(_Fragment, { children: [_jsxs("div", { className: "umds-attachment-card__detalhe-topo", children: [_jsx("span", { "aria-hidden": "true", className: detalheIconeClasses(), children: _jsx(Icon, { size: "md", variant: "inherit", icon: detalheIcone() }) }), _jsx("span", { className: "umds-attachment-card__detalhe-titulo", id: tituloId(), children: detalheTitulo() })] }), detalheDescricao() ? (_jsx("p", { className: "umds-attachment-card__detalhe-descricao", children: detalheDescricao() })) : null, detalheCampos().length > 0 ? (_jsx("dl", { className: "umds-attachment-card__campos", children: detalheCampos()?.map((campo) => (_jsxs("div", { className: "umds-attachment-card__campo", children: [_jsx("dt", { className: "umds-attachment-card__campo-rotulo", children: campo.label }), _jsxs("dd", { className: "umds-attachment-card__campo-valor", children: [_jsx("span", { className: "umds-attachment-card__campo-valor-texto", children: campo.value }), campo.copyable ? (_jsx("button", { type: "button", className: "umds-attachment-card__copiar", "aria-label": rotuloCopiar(campo), onClick: (event) => copiarCampo(campo), children: _jsx(Icon, { size: "sm", variant: "inherit", icon: iconeCopiar(campo) }) })) : null] })] }, campo.label))) })) : null] }) }))] }) })) : null })] })) : null] }), _jsx("div", { className: "umds-attachment-card__preview", "aria-hidden": "true", children: _jsx(Icon, { variant: "inherit", icon: iconeCentral(), customSize: tamanhoIconeCentral() }) }), _jsx("div", { className: "umds-attachment-card__tipo-area", children: props.documentType ? (_jsxs("span", { className: "umds-attachment-card__tipo", children: [_jsx("span", { className: "umds-attachment-card__tipo-texto", children: props.documentType }), props.required ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "umds-attachment-card__obrigatorio", "aria-hidden": "true", children: "*" }), _jsx("span", { className: "umds-attachment-card__sr", children: props.requiredLabel || "(obrigatório)" })] })) : null] })) : null }), _jsxs("div", { className: "umds-attachment-card__rodape", title: props.fileName, children: [_jsx("span", { className: "umds-attachment-card__rodape-icone", "aria-hidden": "true", children: _jsx(Icon, { size: "sm", variant: "inherit", icon: iconeArquivo(), customSize: tamanhoIconeRodape() }) }), props.onOpen ? (_jsx("button", { type: "button", className: "umds-attachment-card__nome umds-attachment-card__abrir", "aria-label": rotuloAbrir(), onClick: (event) => handleOpen(event), children: props.fileName })) : (_jsx("span", { className: "umds-attachment-card__nome", children: props.fileName }))] })] }));
 }
 export default AttachmentCard;

package/dist/components/Badge/Badge.css

@@ -3,7 +3,7 @@
    Variantes: neutral, positive, negative, info, primary, new
    Aparências (appearance): solid, soft, outlined
    Tamanhos: 2xs, xs, sm, md, lg, pill
-   Modificador: attached (rótulo colado no topo de um card)
+   Modificador: attached (rótulo colado no topo de um card), attachedSide left | right
    ============================================ */
 
 .umds-badge {
@@ -254,3 +254,16 @@
     left: 0;
     border-radius: 0 0 var(--umds-primitive-border-radius-sm) var(--umds-primitive-border-radius-sm);
 }
+
+/* Canto direito (attachedSide="right"): o rótulo cola no canto superior direito. */
+.umds-badge--attached.umds-badge--attached-right {
+    left: auto;
+    right: 0;
+}
+
+/* Neutro colado: cinza claro com texto escuro (o "Tarefa manual" do CrisDoc).
+   O `solid` neutro é cinza escuro com texto branco, pesado demais para um rótulo de card. */
+.umds-badge--attached.umds-badge--neutral.umds-badge--solid {
+    background-color: var(--umds-semantic-color-neutral-light-medium);
+    color: var(--umds-semantic-color-neutral-dark-pure);
+}