@1doc/1ds-react 2.11.0 → 2.12.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @1doc/1ds-react
 
+## 2.12.0
+
+### Minor Changes
+
+- d03c66d: Timeline: estado vazio dentro do componente, como o List. `isEmpty`, `emptyTitle`, `emptyDescription`, `emptyIcon`, `emptySize`, `emptyActionLabel` com `onEmptyAction` e o slot `empty` (no React, a prop `empty`) trocam só a trilha por um `EmptyState` com `role="status"`, sem desmontar o que está em volta. Sem `isEmpty`, `items` vazio mostra o vazio quando há `emptyTitle` ou o slot; sem nenhum dos dois, a trilha vazia segue como antes. No Vue, `isEmpty` ausente agora chega como `undefined` (e não `false`), para distinguir "não passou" de "passou false".
+
+## 2.11.1
+
+### Patch Changes
+
+- ffc6176: remove(tokens): `--umds-semantic-font-family-mono` e `--umds-primitive-font-family-mono` saem
+
+  REMOÇÃO de token, não acréscimo. O DS não cria token novo: a família monoespaçada (introduzida no 0.6.0) volta a não
+  existir. Como estamos em 0.x, a remoção sai como minor nos tokens.
+
+  - `Kbd` e `CodeBlock` passam a usar `--umds-semantic-font-family-base`: o texto da tecla e do código sai na fonte do DS,
+    não mais monoespaçada (muda a largura dos caracteres; o espaço e as quebras de linha do `CodeBlock` seguem mantidos).
+  - `RichTextEditor`: a opção "Monoespaçada" da ferramenta `fontFamily` sai (o label `fontFamilyMono` também). Fica só a
+    opção "Padrão" (`fontFamilyBase`). A higienização do valor passa a aceitar só `font-family-base` em `font-family`:
+    um `<span style="font-family: var(--umds-semantic-font-family-mono)">` salvo antes perde a declaração ao carregar.
+  - Quem usou o token: troque por `--umds-semantic-font-family-base`.
+
 ## 2.11.0
 
 ### Minor Changes

package/dist/components/CodeBlock/CodeBlock.css

@@ -1,6 +1,6 @@
 /* ─────────────────────────────────────────────
    CODE BLOCK
-   Texto em fonte monoespaçada, com borda, rolagem e botão de copiar.
+   Texto na fonte do DS (a base, sem fonte de código), com borda, rolagem e botão de copiar.
 
    Fundo claro e texto escuro (contraste de texto, nos temas claro e escuro: os
    dois vêm dos semânticos). Sem cor de sintaxe.
@@ -28,7 +28,7 @@
 }
 
 .umds-code-block__language {
-  font-family: var(--umds-semantic-font-family-mono);
+  font-family: var(--umds-semantic-font-family-base);
   font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
   font-weight: var(--umds-primitive-font-weight-semibold);
   color: var(--umds-semantic-color-neutral-dark-down);
@@ -65,7 +65,7 @@
   margin: 0;
   padding: var(--umds-primitive-spacing-mini) var(--umds-primitive-spacing-xxxs); /* 12px 16px */
   overflow: auto;
-  font-family: var(--umds-semantic-font-family-mono);
+  font-family: var(--umds-semantic-font-family-base);
   font-size: var(--umds-primitive-font-size-xxs); /* 14px */
   line-height: var(--umds-primitive-font-line-height-lg);
   color: var(--umds-semantic-color-neutral-dark-pure);

package/dist/components/CodeBlock/CodeBlock.d.ts

@@ -1,6 +1,6 @@
 import './CodeBlock.css';
 /**
- * CodeBlock — trecho de código (ou JSON, ou um log) em fonte monoespaçada, com
+ * CodeBlock — trecho de código (ou JSON, ou um log) com a fonte do DS, com
  * borda, rolagem e botão de copiar.
  *
  * O texto vem por `code` ou como conteúdo (`<CodeBlock>{...}</CodeBlock>`); o
@@ -25,7 +25,7 @@ import './CodeBlock.css';
  * @property {string} ariaLabel - Nome da área de rolagem (padrão: a linguagem, ou "Código")
  * @property {string} className - Classes CSS adicionais
  * @property {function} onCopy - Chamado com o texto depois de copiar
- * @quandoUsar Mostrar JSON de uma resposta, um comando, um log, um exemplo de uso: texto que se lê em fonte monoespaçada e se copia.
+ * @quandoUsar Mostrar JSON de uma resposta, um comando, um log, um exemplo de uso: texto que se lê como foi escrito e se copia.
  * @quandoNaoUsar Para uma tecla ou atalho, use `Kbd`. Para código dentro de uma frase, use `<code>` direto. Para editar código, use um editor especializado: este bloco só mostra.
  */
 export interface CodeBlockProps {

package/dist/components/Kbd/Kbd.css

@@ -1,6 +1,6 @@
 /* ─────────────────────────────────────────────
    KBD
-   Uma tecla, ou uma combinação, em fonte monoespaçada.
+   Uma tecla, ou uma combinação, na fonte do DS (a base).
 
    A caixa é cinza com borda e uma sombra de base de 1px (a "espessura" da
    tecla). Texto escuro sobre cinza claro: contraste de texto, não só de cor.
@@ -13,7 +13,7 @@
   box-sizing: border-box;
   min-width: var(--umds-primitive-spacing-xxs); /* 24px */
   padding: var(--umds-primitive-spacing-micro) var(--umds-primitive-spacing-nano); /* 2px 8px */
-  font-family: var(--umds-semantic-font-family-mono);
+  font-family: var(--umds-semantic-font-family-base);
   font-weight: var(--umds-primitive-font-weight-semibold);
   line-height: var(--umds-primitive-font-line-height-lg);
   text-align: center;
@@ -40,7 +40,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--umds-primitive-spacing-quarck); /* 4px */
-  font-family: var(--umds-semantic-font-family-mono);
+  font-family: var(--umds-semantic-font-family-base);
 }
 
 .umds-kbd-combo__item {

package/dist/components/Kbd/Kbd.d.ts

@@ -4,7 +4,7 @@ import './Kbd.css';
  *
  * Uma tecla: `<Kbd>Esc</Kbd>`. Uma combinação: `keys` (`["Ctrl", "Shift", "P"]`),
  * que desenha uma caixa por tecla com o `separator` entre elas (`+` por padrão).
- * A fonte é a monoespaçada do DS (`--umds-semantic-font-family-mono`), a caixa é
+ * A fonte é a do DS (`--umds-semantic-font-family-base`), a caixa é
  * cinza com borda e uma sombra de base, como uma tecla de verdade.
  *
  * Semântica: `<kbd>` é o elemento HTML de "entrada de teclado", e um `<kbd>`

package/dist/components/RichTextEditor/RichTextEditor.d.ts

@@ -35,7 +35,7 @@ export type RichTextTool = "bold" | "italic" | "underline" | "strike" | "ul" | "
  * higienização: só PNG, JPEG, GIF e WebP em `data:`, ou `http(s)`; sem SVG.
  *
  * Estilo de texto por TOKEN do DS, também opcional na `toolbar`: `fontFamily`
- * (padrão ou monoespaçada), `fontSize` (12, 14, 16, 20 e 24px, da escala do DS) e
+ * (a fonte do DS), `fontSize` (12, 14, 16, 20 e 24px, da escala do DS) e
  * `textColor` (a paleta do DS). Cada um abre um painel abaixo da barra e aplica ao
  * texto selecionado (sem seleção, o painel pede que se selecione). O valor guarda
  * `<span style="color: var(--umds-primitive-red-pure)">`: só token do DS passa na
@@ -53,7 +53,7 @@ export type RichTextTool = "bold" | "italic" | "underline" | "strike" | "ul" | "
  * @property {string} placeholder - Texto de apoio com o editor vazio
  * @property {string[]} toolbar - Ferramentas da barra, em ordem: 'bold' | 'italic' | 'underline' | 'strike' | 'ul' | 'ol' | 'link' | 'undo' | 'redo' | 'clear' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'image' | 'table' | 'fontFamily' | 'fontSize' | 'textColor' | '|' (separador)
  * @property {string} toolbarLabel - Nome da barra (padrão "Formatação")
- * @property {object} labels - Nomes das ferramentas e dos campos, parcial: `{ bold, italic, underline, strike, ul, ol, link, undo, redo, clear, alignLeft, alignCenter, alignRight, alignJustify, image, table, linkAddress, linkApply, linkRemove, linkCancel, linkInvalid, imageUrl, imageAlt, imageFile, imageApply, imageCancel, imageInvalid, imageType, imageTooLarge, tableRows, tableCols, tableApply, tableCancel, tableInvalid, tableActions, tableAddRow, tableRemoveRow, tableAddCol, tableRemoveCol, tableRemove, fontFamily, fontSize, textColor, fontFamilyBase, fontFamilyMono, styleClose, styleNeedsSelection }`
+ * @property {object} labels - Nomes das ferramentas e dos campos, parcial: `{ bold, italic, underline, strike, ul, ol, link, undo, redo, clear, alignLeft, alignCenter, alignRight, alignJustify, image, table, linkAddress, linkApply, linkRemove, linkCancel, linkInvalid, imageUrl, imageAlt, imageFile, imageApply, imageCancel, imageInvalid, imageType, imageTooLarge, tableRows, tableCols, tableApply, tableCancel, tableInvalid, tableActions, tableAddRow, tableRemoveRow, tableAddCol, tableRemoveCol, tableRemove, fontFamily, fontSize, textColor, fontFamilyBase, styleClose, styleNeedsSelection }`
  * @property {number} minHeight - Altura mínima da área de escrita, em px (padrão 120)
  * @property {boolean} resizable - Deixa redimensionar a altura pelo canto
  * @property {boolean} disabled - Desabilita barra e área

package/dist/components/RichTextEditor/RichTextEditor.js

@@ -148,7 +148,6 @@ function RichTextEditor(props) {
             fontSize: "Tamanho da fonte",
             textColor: "Cor do texto",
             fontFamilyBase: "Padrão",
-            fontFamilyMono: "Monoespaçada",
             styleClose: "Fechar",
             styleNeedsSelection: "Selecione o texto antes de aplicar.",
         };
@@ -790,10 +789,6 @@ function RichTextEditor(props) {
                 label: rotulo("fontFamilyBase"),
                 value: "var(--umds-semantic-font-family-base)",
             },
-            {
-                label: rotulo("fontFamilyMono"),
-                value: "var(--umds-semantic-font-family-mono)",
-            },
         ];
     }
     function fontSizeOptions() {

package/dist/components/Timeline/Timeline.css

@@ -214,3 +214,11 @@
 .umds-timeline--sm.umds-timeline--card .umds-timeline__body {
   padding: var(--umds-primitive-spacing-mini); /* 12px */
 }
+
+/* ── Estado vazio ──
+   O miolo da trilha troca de conteúdo; quem rodeia não muda. O EmptyState já
+   tem o próprio respiro e alinhamento, o wrapper só dá o lugar. */
+.umds-timeline-empty {
+  display: block;
+  font-family: var(--umds-semantic-font-family-base);
+}

package/dist/components/Timeline/Timeline.d.ts

@@ -35,20 +35,56 @@ export interface TimelineItem {
  * Extraída do histórico de versões do processo e da timeline de despachos da
  * 1Doc.
  *
+ * Sem eventos, a trilha troca por um estado vazio dentro do próprio componente:
+ * um `EmptyState` (`emptyTitle`, `emptyDescription`, `emptyIcon`,
+ * `emptyActionLabel` com `onEmptyAction`) ou, para um conteúdo próprio, o slot
+ * `empty` (no React, a prop `empty` recebe o nó). Só o miolo troca: o título do
+ * cartão, os filtros e o que mais estiver ao redor continuam montados, e o
+ * vazio é anunciado ao leitor de tela (`role="status"`). Passe `isEmpty` quando
+ * a decisão for sua (`:is-empty="!eventos.length"`); sem ele, `items` vazio já
+ * mostra o vazio, desde que haja `emptyTitle` ou o slot. Sem nenhum dos dois,
+ * `items` vazio rende a trilha sem eventos, como sempre.
+ *
  * @property {TimelineItem[]} items - Eventos, na ordem em que devem aparecer.
  * @property {boolean} card - Envolve o conteúdo de cada evento num card branco bordered.
  * @property {string} size - Tamanho do marcador e do texto: 'sm' | 'md'.
  * @property {string} ariaLabel - Nome acessível da lista. Padrão: "Linha do tempo".
+ * @property {boolean} isEmpty - Decide o estado vazio: `true` mostra o vazio no lugar da trilha, `false` mantém a trilha. Sem ele, o vazio aparece quando `items` está vazio e há `emptyTitle` ou o slot `empty`.
+ * @property {string} emptyTitle - Título do estado vazio (padrão: "Nenhum evento registrado")
+ * @property {string} emptyDescription - Texto de apoio do estado vazio
+ * @property {IconProp} emptyIcon - Ícone do estado vazio (objeto do Font Awesome)
+ * @property {string} emptySize - Tamanho do estado vazio: 'sm' (padrão, compacto) | 'md' | 'lg'
+ * @property {string} emptyActionLabel - Rótulo do botão do estado vazio (junto de onEmptyAction)
+ * @property {function} onEmptyAction - Callback do botão do estado vazio
+ * @property {any} empty - Slot `empty`: conteúdo próprio no lugar do EmptyState (React node ou Vue slot)
  * @property {string} className - Classes CSS adicionais.
- * @quandoUsar Mostrar o que aconteceu e quando — auditoria, histórico de versões, despachos de um processo.
- * @quandoNaoUsar Para um processo com etapas futuras e progresso, use `Stepper`. Para uma lista sem eixo de tempo, use `List` ou `Card`.
+ * @slot empty - Conteúdo do estado vazio (substitui o EmptyState padrão).
+ * @quandoUsar Mostrar o que aconteceu e quando — auditoria, histórico de versões, despachos de um processo — inclusive quando ainda não aconteceu nada: o "nenhum despacho registrado" fica no componente, sem `v-if` por fora.
+ * @quandoNaoUsar Para um processo com etapas futuras e progresso, use `Stepper`. Para uma lista sem eixo de tempo, use `List` ou `Card`. Para um vazio que ocupa a tela inteira (sem trilha), use `EmptyState` direto.
  */
 export interface TimelineProps {
     items: TimelineItem[];
     card?: boolean;
     size?: "sm" | "md";
     ariaLabel?: string;
+    /** Decide o estado vazio. Sem ele, vale `items` vazio com `emptyTitle` ou slot. */
+    isEmpty?: boolean;
+    /** Título do estado vazio. @default 'Nenhum evento registrado' */
+    emptyTitle?: string;
+    /** Texto de apoio do estado vazio. */
+    emptyDescription?: string;
+    /** Ícone do estado vazio: o objeto importado do Font Awesome. */
+    emptyIcon?: IconProp;
+    /** Tamanho do estado vazio. @default 'sm' */
+    emptySize?: "sm" | "md" | "lg";
+    /** Rótulo do botão do estado vazio (exibido junto de `onEmptyAction`). */
+    emptyActionLabel?: string;
+    /** Chamado no botão do estado vazio. */
+    onEmptyAction?: () => void;
+    /** Conteúdo próprio do estado vazio. No Vue, slot `empty`. */
+    empty?: any;
     className?: string;
 }
+import type { IconProp } from "../Icon/Icon";
 declare function Timeline(props: TimelineProps): import("react/jsx-runtime").JSX.Element;
 export default Timeline;

package/dist/components/Timeline/Timeline.js

@@ -1,8 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import './Timeline.css';
 import Text from "../Text/Text";
 import Icon from "../Icon/Icon";
+import EmptyState from "../EmptyState/EmptyState";
 function Timeline(props) {
+    function showEmpty() {
+        if (props.isEmpty !== undefined && props.isEmpty !== null) {
+            return !!props.isEmpty;
+        }
+        const semEventos = !props.items || props.items.length === 0;
+        return semEventos && !!(props.emptyTitle || props.empty);
+    }
+    function showItems() {
+        return !showEmpty();
+    }
+    function classesDoVazio() {
+        return ["umds-timeline-empty", props.className].filter(Boolean).join(" ");
+    }
+    function emptyTitleText() {
+        return props.emptyTitle || "Nenhum evento registrado";
+    }
+    function emptyActionProps() {
+        if (!props.onEmptyAction)
+            return {};
+        return {
+            actionLabel: props.emptyActionLabel,
+            onAction: props.onEmptyAction,
+        };
+    }
+    function emptySizeValue() {
+        return props.emptySize || "sm";
+    }
     function classesDaLista() {
         return [
             "umds-timeline",
@@ -36,6 +64,6 @@ function Timeline(props) {
     function temCabecalho(item) {
         return !!(item.title || item.timestamp || item.actor);
     }
-    return (_jsx("ol", { role: "list", "aria-label": props.ariaLabel || "Linha do tempo", className: classesDaLista(), children: props.items?.map((item, index) => (_jsxs("li", { "aria-current": item.current ? "true" : undefined, className: classesDoItem(item), children: [_jsxs("div", { "aria-hidden": "true", className: "umds-timeline__rail", children: [_jsx("span", { className: classesDoMarcador(item), children: item.icon ? _jsx(Icon, { size: "sm", icon: item.icon }) : null }), !ehUltimo(index) ? (_jsx("span", { className: "umds-timeline__connector" })) : null] }), _jsxs("div", { className: "umds-timeline__body", children: [temCabecalho(item) ? (_jsxs("div", { className: "umds-timeline__header", children: [item.title ? (_jsx(Text, { as: "span", variant: "body2", weight: "semibold", children: item.title })) : null, item.timestamp ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", children: item.timestamp })) : null, item.actor ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", children: item.actor })) : null] })) : null, item.description ? (_jsx(Text, { as: "p", variant: "body2", color: "secondary", children: item.description })) : null] })] }, index))) }));
+    return (_jsxs(_Fragment, { children: [showEmpty() ? (_jsx("div", { role: "status", className: classesDoVazio(), children: _jsx(_Fragment, { children: props.empty || (_jsx(EmptyState, { icon: props.emptyIcon, title: emptyTitleText(), description: props.emptyDescription, size: emptySizeValue(), ...emptyActionProps() })) }) })) : null, showItems() ? (_jsx("ol", { role: "list", "aria-label": props.ariaLabel || "Linha do tempo", className: classesDaLista(), children: props.items?.map((item, index) => (_jsxs("li", { "aria-current": item.current ? "true" : undefined, className: classesDoItem(item), children: [_jsxs("div", { "aria-hidden": "true", className: "umds-timeline__rail", children: [_jsx("span", { className: classesDoMarcador(item), children: item.icon ? _jsx(Icon, { size: "sm", icon: item.icon }) : null }), !ehUltimo(index) ? (_jsx("span", { className: "umds-timeline__connector" })) : null] }), _jsxs("div", { className: "umds-timeline__body", children: [temCabecalho(item) ? (_jsxs("div", { className: "umds-timeline__header", children: [item.title ? (_jsx(Text, { as: "span", variant: "body2", weight: "semibold", children: item.title })) : null, item.timestamp ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", children: item.timestamp })) : null, item.actor ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", children: item.actor })) : null] })) : null, item.description ? (_jsx(Text, { as: "p", variant: "body2", color: "secondary", children: item.description })) : null] })] }, index))) })) : null] }));
 }
 export default Timeline;

package/dist/teste/RichTextEditorEstiloDeTexto.test.js

@@ -25,7 +25,7 @@ describe("html-seguro: estilo de texto por token", () => {
         expect(estiloDeTexto("color", "var(--umds-primitive-red-pure)")).toBe("color: var(--umds-primitive-red-pure);");
         expect(estiloDeTexto("color", "var(--umds-semantic-color-feedback-negative-pure)")).toBe("color: var(--umds-semantic-color-feedback-negative-pure);");
         expect(estiloDeTexto("font-size", "var(--umds-primitive-font-size-xs)")).toBe("font-size: var(--umds-primitive-font-size-xs);");
-        expect(estiloDeTexto("font-family", "var(--umds-semantic-font-family-mono)")).toBe("font-family: var(--umds-semantic-font-family-mono);");
+        expect(estiloDeTexto("font-family", "var(--umds-semantic-font-family-base)")).toBe("font-family: var(--umds-semantic-font-family-base);");
         for (const mau of ["red", "#ff0000", "rgb(255,0,0)", "var(--outra-coisa)", "var(--umds-primitive-red-pure); background: red", "expression(alert(1))", "url(x)"]) {
             expect(estiloDeTexto("color", mau)).toBe("");
         }
@@ -36,7 +36,7 @@ describe("html-seguro: estilo de texto por token", () => {
     });
     it("o span guarda só as declarações válidas; o resto do style sai", () => {
         expect(sanitizarHtml('<span style="color: var(--umds-primitive-red-pure); background: red; font-size: 40px">a</span>')).toBe('<span style="color: var(--umds-primitive-red-pure);">a</span>');
-        expect(sanitizarHtml('<span style="font-family: var(--umds-semantic-font-family-mono); font-size: var(--umds-primitive-font-size-sm)">a</span>')).toBe('<span style="font-family: var(--umds-semantic-font-family-mono); font-size: var(--umds-primitive-font-size-sm);">a</span>');
+        expect(sanitizarHtml('<span style="font-family: var(--umds-semantic-font-family-base); font-size: var(--umds-primitive-font-size-sm)">a</span>')).toBe('<span style="font-family: var(--umds-semantic-font-family-base); font-size: var(--umds-primitive-font-size-sm);">a</span>');
         expect(sanitizarHtml('<span style="color: red">a</span>')).toBe("<span>a</span>");
     });
     it("estilo só vale em span: em outras tags sai", () => {
@@ -62,15 +62,15 @@ describe("RichTextEditor: fonte, tamanho e cor do texto", () => {
         fireEvent.keyDown(screen.getByRole("group", { name: "Cor do texto" }), { key: "Escape" });
         expect(screen.queryByRole("group", { name: "Cor do texto" })).toBeNull();
     });
-    it("a fonte monoespaçada embrulha o texto selecionado num span com o token", async () => {
+    it("a fonte do DS embrulha o texto selecionado num span com o token", async () => {
         const usuario = userEvent.setup();
         const aoMudar = vi.fn();
         abrir(["fontFamily"], { onChange: aoMudar });
         selecionarTexto();
         await usuario.click(screen.getByRole("button", { name: "Fonte" }));
         await usuario.click(screen.getByRole("combobox", { name: "Fonte" }));
-        await usuario.click(screen.getByRole("option", { name: "Monoespaçada" }));
-        expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="font-family: var(--umds-semantic-font-family-mono);">Parecer</span>');
+        await usuario.click(screen.getByRole("option", { name: "Padrão" }));
+        expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="font-family: var(--umds-semantic-font-family-base);">Parecer</span>');
         expect(aoMudar).toHaveBeenCalled();
         expect(screen.queryByRole("group", { name: "Fonte" })).toBeNull();
     });
@@ -105,11 +105,11 @@ describe("RichTextEditor: fonte, tamanho e cor do texto", () => {
     });
     it("os textos vêm por labels", async () => {
         const usuario = userEvent.setup();
-        abrir(["fontFamily", "textColor"], { labels: { fontFamily: "Font", textColor: "Text color", fontFamilyMono: "Monospaced", styleClose: "Close" } });
+        abrir(["fontFamily", "textColor"], { labels: { fontFamily: "Font", textColor: "Text color", fontFamilyBase: "Default", styleClose: "Close" } });
         selecionarTexto();
         await usuario.click(screen.getByRole("button", { name: "Font" }));
         await usuario.click(screen.getByRole("combobox", { name: "Font" }));
-        expect(screen.getByRole("option", { name: "Monospaced" })).toBeInTheDocument();
+        expect(screen.getByRole("option", { name: "Default" })).toBeInTheDocument();
         await usuario.keyboard("{Escape}");
         expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
     });

package/dist/teste/Timeline.test.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { describe, expect, it } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import Timeline from "../components/Timeline/Timeline";
 /**
@@ -71,3 +72,72 @@ describe("Timeline · conteúdo", () => {
         expect(screen.getByRole("list", { name: "Despachos do processo" })).toBeInTheDocument();
     });
 });
+describe("Timeline · estado vazio", () => {
+    it("isEmpty troca a trilha pelo vazio, com role status e o título padrão", () => {
+        const { container } = render(_jsx(Timeline, { items: EVENTOS, isEmpty: true }));
+        expect(screen.getByRole("status")).toBeInTheDocument();
+        expect(screen.getByText("Nenhum evento registrado")).toBeInTheDocument();
+        expect(screen.queryByRole("list")).toBeNull();
+        expect(screen.queryAllByRole("listitem")).toHaveLength(0);
+        expect(container.querySelector(".umds-timeline__marker")).toBeNull();
+    });
+    it("título, descrição e ícone do vazio vêm das props", () => {
+        const { container } = render(_jsx(Timeline, { items: [], isEmpty: true, emptyTitle: "Nenhum despacho registrado", emptyDescription: "O hist\u00F3rico aparece aqui.", emptyIcon: faCheck }));
+        expect(screen.getByText("Nenhum despacho registrado")).toBeInTheDocument();
+        expect(screen.getByText("O histórico aparece aqui.")).toBeInTheDocument();
+        expect(container.querySelector(".umds-empty-state svg")).toBeInTheDocument();
+    });
+    it("sem isEmpty, items vazio com emptyTitle mostra o vazio", () => {
+        render(_jsx(Timeline, { items: [], emptyTitle: "Nada por aqui" }));
+        expect(screen.getByRole("status")).toBeInTheDocument();
+        expect(screen.getByText("Nada por aqui")).toBeInTheDocument();
+        expect(screen.queryByRole("list")).toBeNull();
+    });
+    it("sem isEmpty, items vazio com a prop empty (slot) mostra o conteúdo próprio", () => {
+        render(_jsx(Timeline, { items: [], empty: _jsx("span", { "data-testid": "proprio", children: "Sem despachos" }) }));
+        expect(screen.getByRole("status")).toContainElement(screen.getByTestId("proprio"));
+        // o EmptyState padrão não entra: o conteúdo próprio o substitui
+        expect(screen.queryByText("Nenhum evento registrado")).toBeNull();
+    });
+    it("sem isEmpty e sem emptyTitle nem slot, items vazio segue sendo a trilha vazia", () => {
+        render(_jsx(Timeline, { items: [] }));
+        expect(screen.queryByRole("status")).toBeNull();
+        expect(screen.getByRole("list")).toBeInTheDocument();
+    });
+    it("isEmpty false manda: items vazio com emptyTitle mantém a trilha", () => {
+        render(_jsx(Timeline, { items: [], isEmpty: false, emptyTitle: "Nada por aqui" }));
+        expect(screen.queryByRole("status")).toBeNull();
+        expect(screen.getByRole("list")).toBeInTheDocument();
+    });
+    it("items com eventos e emptyTitle, sem isEmpty, mostra a trilha", () => {
+        render(_jsx(Timeline, { items: EVENTOS, emptyTitle: "Nada por aqui" }));
+        expect(screen.queryByRole("status")).toBeNull();
+        expect(screen.getAllByRole("listitem")).toHaveLength(3);
+    });
+    it("o botão do vazio só aparece com rótulo e callback, e chama o callback", async () => {
+        const usuario = userEvent.setup();
+        const aoAgir = vi.fn();
+        const { rerender } = render(_jsx(Timeline, { items: [], isEmpty: true, emptyActionLabel: "Limpar filtro" }));
+        expect(screen.queryByRole("button")).toBeNull();
+        rerender(_jsx(Timeline, { items: [], isEmpty: true, emptyActionLabel: "Limpar filtro", onEmptyAction: aoAgir }));
+        await usuario.click(screen.getByRole("button", { name: "Limpar filtro" }));
+        expect(aoAgir).toHaveBeenCalledTimes(1);
+    });
+    it("o entorno não desmonta: só o miolo troca ao esvaziar e ao voltar", async () => {
+        const { rerender } = render(_jsxs("section", { children: [_jsx("h3", { "data-testid": "titulo", children: "Hist\u00F3rico" }), _jsx(Timeline, { items: EVENTOS, isEmpty: false, emptyTitle: "Sem eventos" })] }));
+        const titulo = screen.getByTestId("titulo");
+        expect(screen.getAllByRole("listitem")).toHaveLength(3);
+        rerender(_jsxs("section", { children: [_jsx("h3", { "data-testid": "titulo", children: "Hist\u00F3rico" }), _jsx(Timeline, { items: [], isEmpty: true, emptyTitle: "Sem eventos" })] }));
+        await waitFor(() => expect(screen.getByRole("status")).toBeInTheDocument());
+        expect(screen.getByTestId("titulo")).toBe(titulo);
+        expect(screen.queryByRole("list")).toBeNull();
+        rerender(_jsxs("section", { children: [_jsx("h3", { "data-testid": "titulo", children: "Hist\u00F3rico" }), _jsx(Timeline, { items: EVENTOS, isEmpty: false, emptyTitle: "Sem eventos" })] }));
+        await waitFor(() => expect(screen.getAllByRole("listitem")).toHaveLength(3));
+        expect(screen.getByTestId("titulo")).toBe(titulo);
+        expect(screen.queryByRole("status")).toBeNull();
+    });
+    it("className vai ao wrapper do vazio", () => {
+        render(_jsx(Timeline, { items: [], isEmpty: true, className: "meu-vazio" }));
+        expect(screen.getByRole("status")).toHaveClass("meu-vazio");
+    });
+});

package/dist/utils/html-seguro.js

@@ -53,7 +53,7 @@ export const normalizarEndereco = (bruto) => {
 /** Cor, tamanho e família de fonte só valem como TOKEN do DS: `var(--umds-...)`. Cor em hex, rgb ou nome sai. */
 const COR_TOKEN = /^var\(--umds-(?:primitive|semantic)-[a-z0-9-]+\)$/;
 const TAMANHO_TOKEN = /^var\(--umds-primitive-font-size-[a-z0-9]+\)$/;
-const FAMILIA_TOKEN = /^var\(--umds-(?:primitive|semantic)-font-family-(?:base|mono)\)$/;
+const FAMILIA_TOKEN = /^var\(--umds-(?:primitive|semantic)-font-family-base\)$/;
 /**
  * Declaração de estilo de texto que o editor aceita: `color`, `font-size` e `font-family`,
  * cada uma só com um token do DS. Devolve a declaração limpa ("color: var(--x);") ou "".

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1doc/1ds-react",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "main": "dist/index.js",
   "sideEffects": [
     "**/*.css"
@@ -45,8 +45,8 @@
     "react-dom": "^18.0.0",
     "typescript": "^5.0.0",
     "vitest": "^3.2.7",
-    "@1doc/1ds-core": "2.11.0",
-    "@1doc/1ds-tokens": "0.6.0"
+    "@1doc/1ds-core": "2.12.0",
+    "@1doc/1ds-tokens": "0.7.0"
   },
   "publishConfig": {
     "access": "public"

package/src/teste/RichTextEditorEstiloDeTexto.test.tsx

@@ -29,7 +29,7 @@ describe("html-seguro: estilo de texto por token", () => {
     expect(estiloDeTexto("color", "var(--umds-primitive-red-pure)")).toBe("color: var(--umds-primitive-red-pure);");
     expect(estiloDeTexto("color", "var(--umds-semantic-color-feedback-negative-pure)")).toBe("color: var(--umds-semantic-color-feedback-negative-pure);");
     expect(estiloDeTexto("font-size", "var(--umds-primitive-font-size-xs)")).toBe("font-size: var(--umds-primitive-font-size-xs);");
-    expect(estiloDeTexto("font-family", "var(--umds-semantic-font-family-mono)")).toBe("font-family: var(--umds-semantic-font-family-mono);");
+    expect(estiloDeTexto("font-family", "var(--umds-semantic-font-family-base)")).toBe("font-family: var(--umds-semantic-font-family-base);");
     for (const mau of ["red", "#ff0000", "rgb(255,0,0)", "var(--outra-coisa)", "var(--umds-primitive-red-pure); background: red", "expression(alert(1))", "url(x)"]) {
       expect(estiloDeTexto("color", mau)).toBe("");
     }
@@ -43,8 +43,8 @@ describe("html-seguro: estilo de texto por token", () => {
     expect(sanitizarHtml('<span style="color: var(--umds-primitive-red-pure); background: red; font-size: 40px">a</span>')).toBe(
       '<span style="color: var(--umds-primitive-red-pure);">a</span>',
     );
-    expect(sanitizarHtml('<span style="font-family: var(--umds-semantic-font-family-mono); font-size: var(--umds-primitive-font-size-sm)">a</span>')).toBe(
-      '<span style="font-family: var(--umds-semantic-font-family-mono); font-size: var(--umds-primitive-font-size-sm);">a</span>',
+    expect(sanitizarHtml('<span style="font-family: var(--umds-semantic-font-family-base); font-size: var(--umds-primitive-font-size-sm)">a</span>')).toBe(
+      '<span style="font-family: var(--umds-semantic-font-family-base); font-size: var(--umds-primitive-font-size-sm);">a</span>',
     );
     expect(sanitizarHtml('<span style="color: red">a</span>')).toBe("<span>a</span>");
   });
@@ -74,15 +74,15 @@ describe("RichTextEditor: fonte, tamanho e cor do texto", () => {
     expect(screen.queryByRole("group", { name: "Cor do texto" })).toBeNull();
   });
 
-  it("a fonte monoespaçada embrulha o texto selecionado num span com o token", async () => {
+  it("a fonte do DS embrulha o texto selecionado num span com o token", async () => {
     const usuario = userEvent.setup();
     const aoMudar = vi.fn();
     abrir(["fontFamily"], { onChange: aoMudar });
     selecionarTexto();
     await usuario.click(screen.getByRole("button", { name: "Fonte" }));
     await usuario.click(screen.getByRole("combobox", { name: "Fonte" }));
-    await usuario.click(screen.getByRole("option", { name: "Monoespaçada" }));
-    expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="font-family: var(--umds-semantic-font-family-mono);">Parecer</span>');
+    await usuario.click(screen.getByRole("option", { name: "Padrão" }));
+    expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="font-family: var(--umds-semantic-font-family-base);">Parecer</span>');
     expect(aoMudar).toHaveBeenCalled();
     expect(screen.queryByRole("group", { name: "Fonte" })).toBeNull();
   });
@@ -121,11 +121,11 @@ describe("RichTextEditor: fonte, tamanho e cor do texto", () => {
 
   it("os textos vêm por labels", async () => {
     const usuario = userEvent.setup();
-    abrir(["fontFamily", "textColor"], { labels: { fontFamily: "Font", textColor: "Text color", fontFamilyMono: "Monospaced", styleClose: "Close" } });
+    abrir(["fontFamily", "textColor"], { labels: { fontFamily: "Font", textColor: "Text color", fontFamilyBase: "Default", styleClose: "Close" } });
     selecionarTexto();
     await usuario.click(screen.getByRole("button", { name: "Font" }));
     await usuario.click(screen.getByRole("combobox", { name: "Font" }));
-    expect(screen.getByRole("option", { name: "Monospaced" })).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: "Default" })).toBeInTheDocument();
     await usuario.keyboard("{Escape}");
     expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
   });

package/src/teste/Timeline.test.tsx

@@ -1,5 +1,6 @@
-import { describe, expect, it } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import Timeline from "../components/Timeline/Timeline";
 
@@ -98,3 +99,120 @@ describe("Timeline · conteúdo", () => {
     ).toBeInTheDocument();
   });
 });
+
+describe("Timeline · estado vazio", () => {
+  it("isEmpty troca a trilha pelo vazio, com role status e o título padrão", () => {
+    const { container } = render(<Timeline items={EVENTOS} isEmpty />);
+    expect(screen.getByRole("status")).toBeInTheDocument();
+    expect(screen.getByText("Nenhum evento registrado")).toBeInTheDocument();
+    expect(screen.queryByRole("list")).toBeNull();
+    expect(screen.queryAllByRole("listitem")).toHaveLength(0);
+    expect(container.querySelector(".umds-timeline__marker")).toBeNull();
+  });
+
+  it("título, descrição e ícone do vazio vêm das props", () => {
+    const { container } = render(
+      <Timeline
+        items={[]}
+        isEmpty
+        emptyTitle="Nenhum despacho registrado"
+        emptyDescription="O histórico aparece aqui."
+        emptyIcon={faCheck}
+      />,
+    );
+    expect(screen.getByText("Nenhum despacho registrado")).toBeInTheDocument();
+    expect(screen.getByText("O histórico aparece aqui.")).toBeInTheDocument();
+    expect(container.querySelector(".umds-empty-state svg")).toBeInTheDocument();
+  });
+
+  it("sem isEmpty, items vazio com emptyTitle mostra o vazio", () => {
+    render(<Timeline items={[]} emptyTitle="Nada por aqui" />);
+    expect(screen.getByRole("status")).toBeInTheDocument();
+    expect(screen.getByText("Nada por aqui")).toBeInTheDocument();
+    expect(screen.queryByRole("list")).toBeNull();
+  });
+
+  it("sem isEmpty, items vazio com a prop empty (slot) mostra o conteúdo próprio", () => {
+    render(
+      <Timeline items={[]} empty={<span data-testid="proprio">Sem despachos</span>} />,
+    );
+    expect(screen.getByRole("status")).toContainElement(
+      screen.getByTestId("proprio"),
+    );
+    // o EmptyState padrão não entra: o conteúdo próprio o substitui
+    expect(screen.queryByText("Nenhum evento registrado")).toBeNull();
+  });
+
+  it("sem isEmpty e sem emptyTitle nem slot, items vazio segue sendo a trilha vazia", () => {
+    render(<Timeline items={[]} />);
+    expect(screen.queryByRole("status")).toBeNull();
+    expect(screen.getByRole("list")).toBeInTheDocument();
+  });
+
+  it("isEmpty false manda: items vazio com emptyTitle mantém a trilha", () => {
+    render(<Timeline items={[]} isEmpty={false} emptyTitle="Nada por aqui" />);
+    expect(screen.queryByRole("status")).toBeNull();
+    expect(screen.getByRole("list")).toBeInTheDocument();
+  });
+
+  it("items com eventos e emptyTitle, sem isEmpty, mostra a trilha", () => {
+    render(<Timeline items={EVENTOS} emptyTitle="Nada por aqui" />);
+    expect(screen.queryByRole("status")).toBeNull();
+    expect(screen.getAllByRole("listitem")).toHaveLength(3);
+  });
+
+  it("o botão do vazio só aparece com rótulo e callback, e chama o callback", async () => {
+    const usuario = userEvent.setup();
+    const aoAgir = vi.fn();
+    const { rerender } = render(
+      <Timeline items={[]} isEmpty emptyActionLabel="Limpar filtro" />,
+    );
+    expect(screen.queryByRole("button")).toBeNull();
+    rerender(
+      <Timeline
+        items={[]}
+        isEmpty
+        emptyActionLabel="Limpar filtro"
+        onEmptyAction={aoAgir}
+      />,
+    );
+    await usuario.click(screen.getByRole("button", { name: "Limpar filtro" }));
+    expect(aoAgir).toHaveBeenCalledTimes(1);
+  });
+
+  it("o entorno não desmonta: só o miolo troca ao esvaziar e ao voltar", async () => {
+    const { rerender } = render(
+      <section>
+        <h3 data-testid="titulo">Histórico</h3>
+        <Timeline items={EVENTOS} isEmpty={false} emptyTitle="Sem eventos" />
+      </section>,
+    );
+    const titulo = screen.getByTestId("titulo");
+    expect(screen.getAllByRole("listitem")).toHaveLength(3);
+
+    rerender(
+      <section>
+        <h3 data-testid="titulo">Histórico</h3>
+        <Timeline items={[]} isEmpty emptyTitle="Sem eventos" />
+      </section>,
+    );
+    await waitFor(() => expect(screen.getByRole("status")).toBeInTheDocument());
+    expect(screen.getByTestId("titulo")).toBe(titulo);
+    expect(screen.queryByRole("list")).toBeNull();
+
+    rerender(
+      <section>
+        <h3 data-testid="titulo">Histórico</h3>
+        <Timeline items={EVENTOS} isEmpty={false} emptyTitle="Sem eventos" />
+      </section>,
+    );
+    await waitFor(() => expect(screen.getAllByRole("listitem")).toHaveLength(3));
+    expect(screen.getByTestId("titulo")).toBe(titulo);
+    expect(screen.queryByRole("status")).toBeNull();
+  });
+
+  it("className vai ao wrapper do vazio", () => {
+    render(<Timeline items={[]} isEmpty className="meu-vazio" />);
+    expect(screen.getByRole("status")).toHaveClass("meu-vazio");
+  });
+});

package/src/utils/html-seguro.ts

@@ -51,7 +51,7 @@ export const normalizarEndereco = (bruto: string): string => {
 /** Cor, tamanho e família de fonte só valem como TOKEN do DS: `var(--umds-...)`. Cor em hex, rgb ou nome sai. */
 const COR_TOKEN = /^var\(--umds-(?:primitive|semantic)-[a-z0-9-]+\)$/;
 const TAMANHO_TOKEN = /^var\(--umds-primitive-font-size-[a-z0-9]+\)$/;
-const FAMILIA_TOKEN = /^var\(--umds-(?:primitive|semantic)-font-family-(?:base|mono)\)$/;
+const FAMILIA_TOKEN = /^var\(--umds-(?:primitive|semantic)-font-family-base\)$/;
 
 /**
  * Declaração de estilo de texto que o editor aceita: `color`, `font-size` e `font-family`,