@1doc/1ds-react 2.8.0 → 2.10.0

package/dist/teste/ToastAcaoEDetalhes.test.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import Toast from "../components/Toast/Toast";
+import ToastStack from "../components/Toast/ToastStack";
+import { dismissAllToasts, toast } from "../utils/toast";
+afterEach(() => {
+    act(() => dismissAllToasts());
+});
+describe("Toast · ação e detalhes", () => {
+    it("actionLabel com onAction desenha o botão; acionar chama onAction e fecha", () => {
+        const aoAgir = vi.fn();
+        const aoFechar = vi.fn();
+        render(_jsx(Toast, { open: true, message: "Despacho enviado", actionLabel: "Desfazer", onAction: aoAgir, onClose: aoFechar }));
+        fireEvent.click(screen.getByRole("button", { name: "Desfazer" }));
+        expect(aoAgir).toHaveBeenCalledTimes(1);
+        expect(aoFechar).toHaveBeenCalledTimes(1);
+    });
+    it("a ação roda antes de fechar", () => {
+        const ordem = [];
+        render(_jsx(Toast, { open: true, message: "x", actionLabel: "Ver processo", onAction: () => ordem.push("acao"), onClose: () => ordem.push("fechar") }));
+        fireEvent.click(screen.getByRole("button", { name: "Ver processo" }));
+        expect(ordem).toEqual(["acao", "fechar"]);
+    });
+    it("actionLabel sem onAction, ou onAction sem actionLabel, não desenha botão de ação", () => {
+        const { rerender } = render(_jsx(Toast, { open: true, message: "x", actionLabel: "Desfazer" }));
+        expect(screen.queryByRole("button", { name: "Desfazer" })).toBeNull();
+        rerender(_jsx(Toast, { open: true, message: "x", onAction: () => { } }));
+        expect(document.querySelector(".umds-toast__action")).toBeNull();
+    });
+    it("details vira uma lista de linhas abaixo da descrição", () => {
+        render(_jsx(Toast, { open: true, message: "3 anexos n\u00E3o enviados", description: "Corrija e envie de novo.", details: ["Anexo 1 acima de 10 MB", "Anexo 2 sem assunto"] }));
+        const itens = screen.getAllByRole("listitem");
+        expect(itens.map((i) => i.textContent)).toEqual(["Anexo 1 acima de 10 MB", "Anexo 2 sem assunto"]);
+    });
+    it("sem details não há lista", () => {
+        render(_jsx(Toast, { open: true, message: "Salvo" }));
+        expect(document.querySelector(".umds-toast__details")).toBeNull();
+    });
+    it("o botão de fechar continua ao lado da ação", () => {
+        render(_jsx(Toast, { open: true, message: "x", actionLabel: "Desfazer", onAction: () => { } }));
+        expect(screen.getByRole("button", { name: "Fechar notificação" })).toBeInTheDocument();
+    });
+});
+describe("toast() imperativo com ação e detalhes", () => {
+    it("passa ação e detalhes ao ToastStack, e acionar a ação fecha o toast", () => {
+        const aoAgir = vi.fn();
+        render(_jsx(ToastStack, {}));
+        act(() => {
+            toast({ message: "Despacho enviado", details: ["SADM", "SOBR"], actionLabel: "Desfazer", onAction: aoAgir });
+        });
+        expect(screen.getByText("Despacho enviado")).toBeInTheDocument();
+        expect(screen.getAllByRole("listitem")).toHaveLength(2);
+        fireEvent.click(screen.getByRole("button", { name: "Desfazer" }));
+        expect(aoAgir).toHaveBeenCalledTimes(1);
+        expect(screen.queryByText("Despacho enviado")).toBeNull();
+    });
+    it("toast com ação não some sozinho (duration 0); sem ação continua em 5000", () => {
+        vi.useFakeTimers();
+        try {
+            render(_jsx(ToastStack, {}));
+            act(() => {
+                toast({ message: "Com ação", actionLabel: "Desfazer", onAction: () => { } });
+                toast({ message: "Sem ação" });
+            });
+            expect(screen.getByText("Com ação")).toBeInTheDocument();
+            expect(screen.getByText("Sem ação")).toBeInTheDocument();
+            act(() => {
+                vi.advanceTimersByTime(5100);
+            });
+            expect(screen.queryByText("Sem ação")).toBeNull();
+            expect(screen.getByText("Com ação")).toBeInTheDocument();
+        }
+        finally {
+            vi.useRealTimers();
+        }
+    });
+    it("um duration explícito vale também com ação", () => {
+        vi.useFakeTimers();
+        try {
+            render(_jsx(ToastStack, {}));
+            act(() => {
+                toast({ message: "Curto", actionLabel: "Desfazer", onAction: () => { }, duration: 1000 });
+            });
+            act(() => {
+                vi.advanceTimersByTime(1100);
+            });
+            expect(screen.queryByText("Curto")).toBeNull();
+        }
+        finally {
+            vi.useRealTimers();
+        }
+    });
+});

package/dist/teste/TooltipDark.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/TooltipDark.test.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import Tooltip from "../components/Tooltip/Tooltip";
+async function abrir(ui) {
+    render(ui);
+    screen.getByRole("button").focus();
+    await waitFor(() => expect(screen.getByRole("tooltip")).toHaveClass("umds-tooltip__bubble--open"));
+    return screen.getByRole("tooltip");
+}
+describe("Tooltip · variant dark e maxWidth", () => {
+    it("dark escreve a classe no balão e no wrapper flutuante", async () => {
+        const balao = await abrir(_jsx(Tooltip, { content: "Atualizar", variant: "dark", children: _jsx("button", { type: "button", children: "Atualizar" }) }));
+        expect(balao).toHaveClass("umds-tooltip__bubble--dark");
+        expect(balao.parentElement).toHaveClass("umds-tooltip__floating--dark");
+    });
+    it("sem variant o balão é o padrão", async () => {
+        const balao = await abrir(_jsx(Tooltip, { content: "Atualizar", children: _jsx("button", { type: "button", children: "Atualizar" }) }));
+        expect(balao).not.toHaveClass("umds-tooltip__bubble--dark");
+        expect(balao.parentElement).not.toHaveClass("umds-tooltip__floating--dark");
+        expect(balao.parentElement?.style.maxWidth).toBe("");
+    });
+    it("maxWidth vai ao wrapper flutuante, em qualquer variante", async () => {
+        const balao = await abrir(_jsx(Tooltip, { content: "Texto longo", variant: "dark", maxWidth: "140px", children: _jsx("button", { type: "button", children: "x" }) }));
+        expect(balao.parentElement?.style.maxWidth).toBe("140px");
+    });
+    it("a descrição acessível não muda com a variante", () => {
+        render(_jsx(Tooltip, { content: "Atualizar", variant: "dark", children: _jsx("button", { type: "button", children: "Recarregar" }) }));
+        expect(screen.getByRole("button")).toHaveAccessibleDescription("Atualizar");
+    });
+});

package/dist/utils/calendario.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Datas do `Calendar`, em ISO local (`YYYY-MM-DD`) e sem biblioteca.
+ *
+ * Tudo aqui trabalha com o DIA como texto: `"2026-05-15"`. O `Date` só aparece
+ * por dentro, sempre à meia-noite LOCAL (`new Date(ano, mes, dia)`), nunca
+ * `new Date("2026-05-15")`, que o JavaScript lê como UTC e, no fuso do Brasil,
+ * devolve o dia anterior.
+ */
+/** `Date` local → `YYYY-MM-DD`. */
+export declare const toIso: (data: Date) => string;
+/** `YYYY-MM-DD` → `Date` à meia-noite local. */
+export declare const parseIso: (iso: string) => Date;
+/** Aceita `Date` ou texto (`2026-05-15` e `2026-05-15T10:00`) e devolve `YYYY-MM-DD`; "" se não der. */
+export declare const normalizeIso: (valor: any) => string;
+export declare const addDays: (iso: string, dias: number) => string;
+/** Soma meses mantendo o dia, ou o último dia do mês de chegada (31/01 + 1 mês = 28/02). */
+export declare const addMonths: (iso: string, meses: number) => string;
+/** Dia da semana: 0 = domingo. */
+export declare const weekdayOf: (iso: string) => number;
+/** Primeiro dia da semana que contém `iso`, dado o dia em que a semana começa (0 = domingo, 1 = segunda). */
+export declare const startOfWeek: (iso: string, comecaEm: number) => string;
+export declare const startOfMonth: (iso: string) => string;
+export declare const endOfMonth: (iso: string) => string;
+export declare const isSameMonth: (a: string, b: string) => boolean;
+/** Os sete dias da semana que contém `iso`. */
+export declare const weekDays: (iso: string, comecaEm: number) => string[];
+/** O mês de `iso` em semanas inteiras (de 4 a 6 linhas), com os dias dos meses vizinhos que completam as pontas. */
+export declare const monthMatrix: (iso: string, comecaEm: number) => string[][];

package/dist/utils/calendario.js

@@ -0,0 +1,73 @@
+/**
+ * Datas do `Calendar`, em ISO local (`YYYY-MM-DD`) e sem biblioteca.
+ *
+ * Tudo aqui trabalha com o DIA como texto: `"2026-05-15"`. O `Date` só aparece
+ * por dentro, sempre à meia-noite LOCAL (`new Date(ano, mes, dia)`), nunca
+ * `new Date("2026-05-15")`, que o JavaScript lê como UTC e, no fuso do Brasil,
+ * devolve o dia anterior.
+ */
+const doisDigitos = (n) => n < 10 ? "0" + n : String(n);
+/** `Date` local → `YYYY-MM-DD`. */
+export const toIso = (data) => data.getFullYear() + "-" + doisDigitos(data.getMonth() + 1) + "-" + doisDigitos(data.getDate());
+/** `YYYY-MM-DD` → `Date` à meia-noite local. */
+export const parseIso = (iso) => {
+    const partes = iso.slice(0, 10).split("-");
+    return new Date(Number(partes[0]), Number(partes[1]) - 1, Number(partes[2]));
+};
+/** Aceita `Date` ou texto (`2026-05-15` e `2026-05-15T10:00`) e devolve `YYYY-MM-DD`; "" se não der. */
+export const normalizeIso = (valor) => {
+    if (!valor)
+        return "";
+    if (typeof valor === "string")
+        return /^\d{4}-\d{2}-\d{2}/.test(valor) ? valor.slice(0, 10) : "";
+    if (valor instanceof Date && !isNaN(valor.getTime()))
+        return toIso(valor);
+    return "";
+};
+export const addDays = (iso, dias) => {
+    const data = parseIso(iso);
+    data.setDate(data.getDate() + dias);
+    return toIso(data);
+};
+/** Soma meses mantendo o dia, ou o último dia do mês de chegada (31/01 + 1 mês = 28/02). */
+export const addMonths = (iso, meses) => {
+    const data = parseIso(iso);
+    const dia = data.getDate();
+    data.setDate(1);
+    data.setMonth(data.getMonth() + meses);
+    const ultimo = new Date(data.getFullYear(), data.getMonth() + 1, 0).getDate();
+    data.setDate(Math.min(dia, ultimo));
+    return toIso(data);
+};
+/** Dia da semana: 0 = domingo. */
+export const weekdayOf = (iso) => parseIso(iso).getDay();
+/** Primeiro dia da semana que contém `iso`, dado o dia em que a semana começa (0 = domingo, 1 = segunda). */
+export const startOfWeek = (iso, comecaEm) => {
+    const recuo = (weekdayOf(iso) - comecaEm + 7) % 7;
+    return addDays(iso, -recuo);
+};
+export const startOfMonth = (iso) => iso.slice(0, 8) + "01";
+export const endOfMonth = (iso) => {
+    const data = parseIso(iso);
+    return toIso(new Date(data.getFullYear(), data.getMonth() + 1, 0));
+};
+export const isSameMonth = (a, b) => a.slice(0, 7) === b.slice(0, 7);
+/** Os sete dias da semana que contém `iso`. */
+export const weekDays = (iso, comecaEm) => {
+    const inicio = startOfWeek(iso, comecaEm);
+    const dias = [];
+    for (let i = 0; i < 7; i++)
+        dias.push(addDays(inicio, i));
+    return dias;
+};
+/** O mês de `iso` em semanas inteiras (de 4 a 6 linhas), com os dias dos meses vizinhos que completam as pontas. */
+export const monthMatrix = (iso, comecaEm) => {
+    const ultimo = endOfMonth(iso);
+    let cursor = startOfWeek(startOfMonth(iso), comecaEm);
+    const semanas = [];
+    while (cursor <= ultimo) {
+        semanas.push(weekDays(cursor, comecaEm));
+        cursor = addDays(cursor, 7);
+    }
+    return semanas;
+};

package/dist/utils/html-seguro.d.ts

@@ -0,0 +1,45 @@
+/**
+ * HTML seguro para o `RichTextEditor`.
+ *
+ * O editor devolve HTML (`onChange`) e recebe HTML (`value`). HTML que vem de
+ * fora (um valor guardado, um texto colado) pode trazer `<img onerror>`,
+ * `<a href="javascript:...">`, `<script>`, `style` e classes de outro site. Este
+ * módulo reduz o HTML ao que o editor sabe escrever: negrito, itálico,
+ * sublinhado, tachado, listas, parágrafos, quebras, títulos, citação, link,
+ * estilo de texto por token (`color`, `font-size`, `font-family` em `<span>`),
+ * alinhamento de bloco (`text-align`), imagem (`http(s)`, caminho ou `data:image`
+ * em PNG, JPEG, GIF e WebP) e tabela simples.
+ *
+ * Roda no navegador (precisa de DOM). Dentro de um `<template>` o HTML é inerte:
+ * nada executa e nenhuma imagem carrega enquanto se higieniza. Sem DOM
+ * (servidor), devolve o texto escapado.
+ */
+/**
+ * Endereço de link que o editor aceita: `http:`, `https:`, `mailto:`, `tel:`,
+ * caminho (`/x`, `./x`, `../x`) ou âncora (`#x`). Devolve o endereço limpo, ou ""
+ * se for perigoso (`javascript:`, `data:`, `vbscript:`...).
+ */
+export declare const enderecoSeguro: (bruto: string) => string;
+/** Devolve o endereço pronto para `href`: o seguro como veio, ou `https://` + o texto quando não tem esquema. "" se perigoso ou vazio. */
+export declare const normalizarEndereco: (bruto: string) => string;
+/**
+ * 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 "".
+ */
+export declare const estiloDeTexto: (propriedade: string, valor: string) => string;
+/**
+ * Endereço de imagem que o editor aceita: `http(s)`, caminho (`/x`, `./x`, `../x`) ou
+ * `data:image` em base64 de PNG, JPEG, GIF ou WebP (SVG fica de fora: carrega script).
+ * Devolve o endereço limpo, ou "" se for perigoso ou vazio.
+ */
+export declare const imagemSegura: (bruto: string) => string;
+/** Reduz `html` ao que o editor escreve. Sem DOM, devolve o texto escapado. */
+export declare const sanitizarHtml: (html: string) => string;
+/** A tabela vazia que o editor insere: `linhas` × `colunas` células com uma quebra, para o cursor entrar. */
+export declare const htmlDaTabela: (linhas: number, colunas: number) => string;
+/** O `<img>` que o editor insere (endereço já seguro). */
+export declare const htmlDaImagem: (endereco: string, alt: string) => string;
+/** O editor está "vazio": sem texto, sem lista e sem quebra solta (o `<br>` que o navegador deixa). */
+export declare const htmlVazio: (html: string) => boolean;
+/** O `<a>` que o editor escreve quando o link não tem texto escolhido: o endereço (já seguro) é o href e o texto. */
+export declare const htmlDoLink: (endereco: string) => string;

package/dist/utils/html-seguro.js

@@ -0,0 +1,208 @@
+/**
+ * HTML seguro para o `RichTextEditor`.
+ *
+ * O editor devolve HTML (`onChange`) e recebe HTML (`value`). HTML que vem de
+ * fora (um valor guardado, um texto colado) pode trazer `<img onerror>`,
+ * `<a href="javascript:...">`, `<script>`, `style` e classes de outro site. Este
+ * módulo reduz o HTML ao que o editor sabe escrever: negrito, itálico,
+ * sublinhado, tachado, listas, parágrafos, quebras, títulos, citação, link,
+ * estilo de texto por token (`color`, `font-size`, `font-family` em `<span>`),
+ * alinhamento de bloco (`text-align`), imagem (`http(s)`, caminho ou `data:image`
+ * em PNG, JPEG, GIF e WebP) e tabela simples.
+ *
+ * Roda no navegador (precisa de DOM). Dentro de um `<template>` o HTML é inerte:
+ * nada executa e nenhuma imagem carrega enquanto se higieniza. Sem DOM
+ * (servidor), devolve o texto escapado.
+ */
+const PERMITIDAS = ["A", "B", "STRONG", "I", "EM", "U", "S", "STRIKE", "DEL", "UL", "OL", "LI", "P", "BR", "DIV", "SPAN", "H1", "H2", "H3", "H4", "BLOCKQUOTE", "IMG", "TABLE", "THEAD", "TBODY", "TR", "TH", "TD"];
+/** Blocos que aceitam `text-align`. */
+const ALINHAVEIS = ["P", "DIV", "H1", "H2", "H3", "H4", "LI", "BLOCKQUOTE", "TH", "TD"];
+const ALINHAMENTOS = ["left", "center", "right", "justify"];
+const DESCARTADAS = ["SCRIPT", "STYLE", "IFRAME", "OBJECT", "EMBED", "LINK", "META", "TEMPLATE", "NOSCRIPT", "SVG", "MATH", "FORM", "INPUT", "BUTTON", "TEXTAREA", "SELECT"];
+const escapar = (texto) => texto.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+/**
+ * Endereço de link que o editor aceita: `http:`, `https:`, `mailto:`, `tel:`,
+ * caminho (`/x`, `./x`, `../x`) ou âncora (`#x`). Devolve o endereço limpo, ou ""
+ * se for perigoso (`javascript:`, `data:`, `vbscript:`...).
+ */
+export const enderecoSeguro = (bruto) => {
+    const texto = (bruto || "").trim();
+    if (!texto)
+        return "";
+    // Caracteres de controle e espaços no meio do esquema são o truque clássico (`java\nscript:`).
+    const semControle = texto.replace(/[\u0000-\u001f\u007f\s]+/g, "");
+    if (/^(https?:\/\/|mailto:|tel:|\/|\.\.?\/|#)/i.test(semControle))
+        return texto;
+    if (/^[a-z][a-z0-9+.-]*:/i.test(semControle))
+        return "";
+    return "";
+};
+/** Devolve o endereço pronto para `href`: o seguro como veio, ou `https://` + o texto quando não tem esquema. "" se perigoso ou vazio. */
+export const normalizarEndereco = (bruto) => {
+    const texto = (bruto || "").trim();
+    if (!texto)
+        return "";
+    const seguro = enderecoSeguro(texto);
+    if (seguro)
+        return seguro;
+    const semControle = texto.replace(/[\u0000-\u001f\u007f\s]+/g, "");
+    if (/^[a-z][a-z0-9+.-]*:/i.test(semControle))
+        return "";
+    return "https://" + texto;
+};
+/** 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)\)$/;
+/**
+ * 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 "".
+ */
+export const estiloDeTexto = (propriedade, valor) => {
+    const prop = String(propriedade || "").trim().toLowerCase();
+    const val = String(valor || "").trim();
+    if (prop === "color" && COR_TOKEN.test(val))
+        return "color: " + val + ";";
+    if (prop === "font-size" && TAMANHO_TOKEN.test(val))
+        return "font-size: " + val + ";";
+    if (prop === "font-family" && FAMILIA_TOKEN.test(val))
+        return "font-family: " + val + ";";
+    return "";
+};
+/** As declarações válidas de um atributo `style` (só color, font-size e font-family por token). */
+const estiloDoSpan = (estilo) => {
+    const partes = String(estilo || "").split(";");
+    let saida = "";
+    for (let i = 0; i < partes.length; i++) {
+        const corte = partes[i].indexOf(":");
+        if (corte === -1)
+            continue;
+        const decl = estiloDeTexto(partes[i].slice(0, corte), partes[i].slice(corte + 1));
+        if (decl)
+            saida += (saida ? " " : "") + decl;
+    }
+    return saida;
+};
+/**
+ * Endereço de imagem que o editor aceita: `http(s)`, caminho (`/x`, `./x`, `../x`) ou
+ * `data:image` em base64 de PNG, JPEG, GIF ou WebP (SVG fica de fora: carrega script).
+ * Devolve o endereço limpo, ou "" se for perigoso ou vazio.
+ */
+export const imagemSegura = (bruto) => {
+    const texto = (bruto || "").trim();
+    if (!texto)
+        return "";
+    const semControle = texto.replace(/[\u0000-\u001f\u007f\s]+/g, "");
+    if (/^data:image\/(png|jpe?g|gif|webp);base64,[a-z0-9+/]+=*$/i.test(semControle))
+        return semControle;
+    // `//host/x` (sem esquema) carregaria de outro site sem o autor ter pedido: fica de fora.
+    if (/^(https?:\/\/|\/(?!\/)|\.\.?\/)/i.test(semControle))
+        return texto;
+    return "";
+};
+/** O `text-align` de um elemento, pelo `style` ou pelo atributo `align`: left, center, right, justify ou "". */
+const alinhamentoDe = (elemento) => {
+    const estilo = String(elemento.getAttribute("style") || "");
+    const achado = /(?:^|;)\s*text-align\s*:\s*([a-z]+)\s*(?:;|$)/i.exec(estilo);
+    const valor = (achado ? achado[1] : String(elemento.getAttribute("align") || "")).toLowerCase();
+    return ALINHAMENTOS.indexOf(valor) !== -1 ? valor : "";
+};
+/** Número inteiro de 2 a 99 em `colspan`/`rowspan`; o resto some. */
+const vao = (valor) => {
+    const n = parseInt(String(valor || ""), 10);
+    return n >= 2 && n <= 99 ? String(n) : "";
+};
+const limparNo = (no, saida, documento) => {
+    const filhos = Array.prototype.slice.call(no.childNodes);
+    for (let i = 0; i < filhos.length; i++) {
+        const filho = filhos[i];
+        if (filho.nodeType === 3) {
+            saida.appendChild(documento.createTextNode(filho.nodeValue));
+            continue;
+        }
+        if (filho.nodeType !== 1)
+            continue;
+        const tag = String(filho.tagName).toUpperCase();
+        if (DESCARTADAS.indexOf(tag) !== -1)
+            continue;
+        if (PERMITIDAS.indexOf(tag) === -1) {
+            // Tag desconhecida: some a tag, fica o conteúdo.
+            limparNo(filho, saida, documento);
+            continue;
+        }
+        if (tag === "IMG") {
+            // Imagem sem endereço seguro some inteira (não deixa um <img> quebrado nem carregando de fora).
+            const origem = imagemSegura(filho.getAttribute("src") || "");
+            if (!origem)
+                continue;
+            const imagem = documento.createElement("img");
+            imagem.setAttribute("src", origem);
+            imagem.setAttribute("alt", String(filho.getAttribute("alt") || ""));
+            saida.appendChild(imagem);
+            continue;
+        }
+        const novo = documento.createElement(tag.toLowerCase());
+        if (ALINHAVEIS.indexOf(tag) !== -1) {
+            const alinhamento = alinhamentoDe(filho);
+            if (alinhamento)
+                novo.setAttribute("style", "text-align: " + alinhamento + ";");
+        }
+        if (tag === "SPAN") {
+            const estiloValido = estiloDoSpan(filho.getAttribute("style") || "");
+            if (estiloValido)
+                novo.setAttribute("style", estiloValido);
+        }
+        if (tag === "TD" || tag === "TH") {
+            const colunas = vao(filho.getAttribute("colspan"));
+            const linhas = vao(filho.getAttribute("rowspan"));
+            if (colunas)
+                novo.setAttribute("colspan", colunas);
+            if (linhas)
+                novo.setAttribute("rowspan", linhas);
+        }
+        if (tag === "A") {
+            const href = enderecoSeguro(filho.getAttribute("href") || "");
+            if (href) {
+                novo.setAttribute("href", href);
+                novo.setAttribute("rel", "noopener noreferrer");
+            }
+        }
+        limparNo(filho, novo, documento);
+        saida.appendChild(novo);
+    }
+};
+/** Reduz `html` ao que o editor escreve. Sem DOM, devolve o texto escapado. */
+export const sanitizarHtml = (html) => {
+    const bruto = html || "";
+    if (typeof document === "undefined")
+        return escapar(bruto);
+    const molde = document.createElement("template");
+    molde.innerHTML = bruto;
+    const saida = document.createElement("div");
+    limparNo(molde.content, saida, document);
+    return saida.innerHTML;
+};
+/** A tabela vazia que o editor insere: `linhas` × `colunas` células com uma quebra, para o cursor entrar. */
+export const htmlDaTabela = (linhas, colunas) => {
+    let celulas = "";
+    for (let c = 0; c < colunas; c++)
+        celulas += "<td><br></td>";
+    let corpo = "";
+    for (let l = 0; l < linhas; l++)
+        corpo += "<tr>" + celulas + "</tr>";
+    return "<table><tbody>" + corpo + "</tbody></table><p><br></p>";
+};
+/** O `<img>` que o editor insere (endereço já seguro). */
+export const htmlDaImagem = (endereco, alt) => '<img src="' + escapar(endereco) + '" alt="' + escapar(alt || "") + '">';
+/** O editor está "vazio": sem texto, sem lista e sem quebra solta (o `<br>` que o navegador deixa). */
+export const htmlVazio = (html) => {
+    if (/<(img|table)[\s>]/i.test(html || ""))
+        return false;
+    const texto = (html || "").replace(/<br\s*\/?>/gi, "").replace(/<\/?(div|p|span)[^>]*>/gi, "").trim();
+    return texto === "";
+};
+/** O `<a>` que o editor escreve quando o link não tem texto escolhido: o endereço (já seguro) é o href e o texto. */
+export const htmlDoLink = (endereco) => {
+    const seguro = escapar(endereco);
+    return '<a href="' + seguro + '">' + seguro + "</a>";
+};

package/dist/utils/paleta-de-cores.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Paleta de cor categórica do 1DS: os primitivos `--umds-primitive-<família>-<tom>`.
+ *
+ * É a lista que o `ColorPicker` mostra por padrão. Ela existe como constante
+ * exportada para o app mapear o valor guardado (o nome do token) de volta para
+ * um rótulo, ou montar a própria lista a partir dela (`COLOR_PALETTE.filter(...)`).
+ *
+ * Primitivo não muda com o tema: é o certo para cor de DADO (marcador, tipo de
+ * documento, setor), que precisa ser a mesma no claro e no escuro. Para cor com
+ * PAPEL (primário, erro, sucesso) use os semânticos `--umds-semantic-color-*`,
+ * que não entram aqui.
+ */
+export type PaletteColor = {
+    /** Nome da variável CSS, ex.: `--umds-primitive-blue-pure`. Use como `var(${value})`. */
+    value: string;
+    /** Nome em português, ex.: "Azul escuro". */
+    label: string;
+    /** Família: blue, red, green, orange, yellow, purple ou gray. */
+    family: string;
+    /** Tom claro o bastante para o ícone de marcação sair escuro (contraste mínimo de 3:1). */
+    onLight: boolean;
+};
+/** Os 31 primitivos de cor (6 famílias x 4 tons + 7 cinzas), do mais escuro ao mais claro. */
+export declare const COLOR_PALETTE: PaletteColor[];
+/** `#RRGGBB` completo (o `#` é opcional). Hexadecimal curto (`#FFF`) não vale. */
+export declare const isHexColor: (texto: string) => boolean;

package/dist/utils/paleta-de-cores.js

@@ -0,0 +1,10 @@
+const cor = (family, tone, label, onLight) => ({
+    value: "--umds-primitive-" + family + "-" + tone,
+    label,
+    family,
+    onLight
+});
+/** Os 31 primitivos de cor (6 famílias x 4 tons + 7 cinzas), do mais escuro ao mais claro. */
+export const COLOR_PALETTE = [cor("blue", "dark", "Azul escuro", false), cor("blue", "pure", "Azul", false), cor("blue", "medium", "Azul médio", false), cor("blue", "light", "Azul claro", true), cor("red", "dark", "Vermelho escuro", false), cor("red", "pure", "Vermelho", false), cor("red", "medium", "Vermelho médio", false), cor("red", "light", "Vermelho claro", true), cor("green", "dark", "Verde escuro", false), cor("green", "pure", "Verde", false), cor("green", "medium", "Verde médio", false), cor("green", "light", "Verde claro", true), cor("orange", "dark", "Laranja escuro", false), cor("orange", "pure", "Laranja", false), cor("orange", "medium", "Laranja médio", true), cor("orange", "light", "Laranja claro", true), cor("yellow", "dark", "Amarelo escuro", false), cor("yellow", "pure", "Amarelo", true), cor("yellow", "medium", "Amarelo médio", true), cor("yellow", "light", "Amarelo claro", true), cor("purple", "dark", "Roxo escuro", false), cor("purple", "pure", "Roxo", false), cor("purple", "medium", "Roxo médio", false), cor("purple", "light", "Roxo claro", true), cor("gray", "darkest", "Cinza muito escuro", false), cor("gray", "darker", "Cinza escuro", false), cor("gray", "dark", "Cinza", false), cor("gray", "medium", "Cinza médio", true), cor("gray", "light", "Cinza claro", true), cor("gray", "lighter", "Cinza mais claro", true), cor("gray", "lightest", "Cinza muito claro", true)];
+/** `#RRGGBB` completo (o `#` é opcional). Hexadecimal curto (`#FFF`) não vale. */
+export const isHexColor = (texto) => /^#?[0-9a-fA-F]{6}$/.test((texto || "").trim());

package/dist/utils/texto.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Texto para comparar: minúsculo, sem acento e sem espaço nas pontas. É o que a
+ * busca do `IconPicker` usa para achar "usuario" em "Usuário".
+ */
+export declare const semAcento: (texto: string) => string;

package/dist/utils/texto.js

@@ -0,0 +1,5 @@
+/**
+ * Texto para comparar: minúsculo, sem acento e sem espaço nas pontas. É o que a
+ * busca do `IconPicker` usa para achar "usuario" em "Usuário".
+ */
+export const semAcento = (texto) => String(texto || "").normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim();

package/dist/utils/toast.d.ts

@@ -21,7 +21,13 @@ export interface ToastOptions {
     description?: string;
     /** Variante semântica @default 'info' */
     variant?: ToastVariant;
-    /** Auto-dismiss em ms; 0 = não fecha sozinho @default 5000 */
+    /** Linhas de detalhe abaixo da descrição */
+    details?: string[];
+    /** Rótulo do botão de ação ("Desfazer"); só aparece com `onAction` */
+    actionLabel?: string;
+    /** Chamado ao acionar o botão de ação; depois dele o toast fecha */
+    onAction?: (event?: any) => void;
+    /** Auto-dismiss em ms; 0 = não fecha sozinho @default 5000 (0 quando há ação: dá tempo de agir, WCAG 2.2.1) */
     duration?: number;
     /** Exibe o botão de fechar @default true */
     closable?: boolean;
@@ -30,6 +36,9 @@ export interface ToastData {
     id: number;
     message: string;
     description?: string;
+    details?: string[];
+    actionLabel?: string;
+    onAction?: (event?: any) => void;
     variant: ToastVariant;
     duration: number;
     closable: boolean;

package/dist/utils/toast.js

@@ -26,7 +26,8 @@ export const toast = (options) => {
     const id = sequence;
     items = [...items, {
             variant: "info",
-            duration: 5000,
+            // Toast com ação não some antes de dar tempo de agir.
+            duration: options.actionLabel && options.onAction ? 0 : 5000,
             closable: true,
             ...options,
             id

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1doc/1ds-react",
-  "version": "2.8.0",
+  "version": "2.10.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.8.0",
-    "@1doc/1ds-tokens": "0.4.3"
+    "@1doc/1ds-core": "2.10.0",
+    "@1doc/1ds-tokens": "0.5.0"
   },
   "publishConfig": {
     "access": "public"