@1doc/1ds-react 2.7.2 → 2.9.0

package/dist/components/CodeBlock/CodeBlock.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './CodeBlock.css';
+import { useState, useRef, useEffect } from "react";
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import Icon from "../Icon/Icon";
+function CodeBlock(props) {
+    const codeRef = useRef(null);
+    const timerRef = useRef(null);
+    const [copied, setCopied] = useState(() => false);
+    function classes() {
+        return [
+            "umds-code-block",
+            props.wrap ? "umds-code-block--wrap" : "",
+            props.copyable ? "umds-code-block--copyable" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function scrollStyle() {
+        return props.maxHeight
+            ? {
+                maxHeight: props.maxHeight + "px",
+            }
+            : undefined;
+    }
+    function regionName() {
+        return props.ariaLabel || props.language || "Código";
+    }
+    function copyText() {
+        return props.copyLabel || "Copiar";
+    }
+    function copiedText() {
+        return props.copiedLabel || "Copiado";
+    }
+    function buttonName() {
+        return copied ? copiedText() : copyText();
+    }
+    function buttonIcon() {
+        return copied ? faCheck : faCopy;
+    }
+    function announce() {
+        return copied ? copiedText() : "";
+    }
+    function textoDoBloco() {
+        if (props.code !== undefined)
+            return props.code;
+        return codeRef.current ? codeRef.current.textContent || "" : "";
+    }
+    function copiarComFallback(texto) {
+        if (typeof document === "undefined")
+            return;
+        const campo = document.createElement("textarea");
+        campo.value = texto;
+        campo.setAttribute("readonly", "");
+        campo.style.position = "fixed";
+        campo.style.opacity = "0";
+        document.body.appendChild(campo);
+        campo.select();
+        try {
+            document.execCommand("copy");
+        }
+        catch (erro) {
+            // Sem como copiar neste navegador: o botão não confirma.
+        }
+        document.body.removeChild(campo);
+    }
+    function marcarCopiado(texto) {
+        setCopied(true);
+        if (props.onCopy)
+            props.onCopy(texto);
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+            setCopied(false);
+        }, 2000);
+    }
+    function handleCopy() {
+        const texto = textoDoBloco();
+        if (typeof navigator !== "undefined" &&
+            navigator.clipboard &&
+            navigator.clipboard.writeText) {
+            navigator.clipboard.writeText(texto).then(() => marcarCopiado(texto), () => {
+                copiarComFallback(texto);
+                marcarCopiado(texto);
+            });
+            return;
+        }
+        copiarComFallback(texto);
+        marcarCopiado(texto);
+    }
+    useEffect(() => {
+        return () => {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+                timerRef.current = null;
+            }
+        };
+    }, []);
+    return (_jsxs("div", { id: props.id, className: classes(), children: [props.language || props.copyable ? (_jsxs("div", { className: "umds-code-block__header", children: [_jsx("span", { className: "umds-code-block__language", children: props.language }), props.copyable ? (_jsxs("button", { type: "button", className: "umds-code-block__copy", "aria-label": buttonName(), title: buttonName(), onClick: (event) => handleCopy(), children: [_jsx(Icon, { size: "sm", variant: "inherit", icon: buttonIcon() }), _jsx("span", { className: "umds-code-block__copy-text", children: buttonName() })] })) : null] })) : null, _jsx("pre", { role: "region", className: "umds-code-block__scroll", "aria-label": regionName(), tabIndex: 0, style: scrollStyle(), children: _jsxs("code", { className: "umds-code-block__code", ref: codeRef, children: [props.code, _jsx(_Fragment, { children: props.children })] }) }), _jsx("span", { role: "status", "aria-live": "polite", className: "umds-code-block__sr", children: announce() })] }));
+}
+export default CodeBlock;

package/dist/components/ColorPicker/ColorPicker.css

@@ -0,0 +1,133 @@
+/* ─────────────────────────────────────────────
+   COLOR PICKER
+   Grade de amostras da paleta do 1DS (primitivos de cor). Valor = nome do token.
+
+   Na paleta do DS a grade tem 7 colunas (os cinzas são 7) e a PRIMEIRA amostra
+   de cada família abre linha nova: uma linha por família, sem aninhar nada no
+   DOM — a ordem de Tab e das setas continua a da lista.
+
+   A amostra escolhida tem dois sinais além da cor: anel duplo e ícone de
+   marcação. O ícone usa primitivos (branco ou cinza escuro), porque a cor da
+   amostra é primitiva e não muda com o tema: o contraste fica o mesmo no escuro.
+
+   Cores: semânticos (e primitivos, na marcação) · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-color-picker {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  font-family: var(--umds-semantic-font-family-base);
+}
+
+.umds-color-picker__label {
+  font-size: var(--umds-semantic-field-label-size);
+  font-weight: var(--umds-semantic-field-label-weight);
+  color: var(--umds-semantic-field-label-color);
+}
+
+/* ── Grade ── */
+.umds-color-picker__swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  /* Folga para o anel de seleção (4px) não ser cortado por um overflow do pai. */
+  padding: var(--umds-primitive-spacing-quarck);
+}
+
+.umds-color-picker--sm .umds-color-picker__swatches {
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+}
+
+.umds-color-picker__swatches--familias {
+  display: grid;
+  grid-template-columns: repeat(7, max-content);
+}
+
+.umds-color-picker__swatch--nova-linha {
+  grid-column-start: 1;
+}
+
+/* ── Amostra ── */
+.umds-color-picker__swatch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  /* Anel de 1px: amostra clara não some no fundo branco. */
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+  border-radius: var(--umds-primitive-border-radius-sm);
+  /* A cor da amostra vem do `style` (background-color); o ícone herda o branco. */
+  /* stylelint-disable-next-line 1ds/cor-por-token -- a amostra é primitivo (não muda com o tema); a marcação precisa do par fixo, senão o semântico inverte no escuro e perde o contraste */
+  color: var(--umds-primitive-white);
+  transition: box-shadow var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
+}
+
+.umds-color-picker--md .umds-color-picker__swatch {
+  width: var(--umds-primitive-spacing-xs); /* 32px */
+  height: var(--umds-primitive-spacing-xs);
+}
+
+.umds-color-picker--sm .umds-color-picker__swatch {
+  width: var(--umds-primitive-spacing-xxs); /* 24px */
+  height: var(--umds-primitive-spacing-xxs);
+}
+
+.umds-color-picker__swatch--on-light {
+  /* stylelint-disable-next-line 1ds/cor-por-token -- par fixo da marcação sobre amostra clara (ver acima) */
+  color: var(--umds-primitive-gray-darkest);
+}
+
+.umds-color-picker__swatch:hover:not(:disabled) {
+  box-shadow: 0 0 0 var(--umds-primitive-border-width-thin) var(--umds-semantic-color-neutral-light-down);
+}
+
+.umds-color-picker__swatch--selected,
+.umds-color-picker__swatch--selected:hover:not(:disabled) {
+  /* Anel duplo: a cor do fundo da página por dentro e o primário por fora. */
+  box-shadow:
+    0 0 0 var(--umds-primitive-border-width-thin) var(--umds-semantic-color-background-white),
+    0 0 0 calc(var(--umds-primitive-border-width-thin) * 2) var(--umds-semantic-color-primary-pure);
+}
+
+.umds-color-picker__swatch:focus-visible {
+  outline: var(--umds-primitive-border-width-thin) solid var(--umds-semantic-color-primary-pure);
+  outline-offset: var(--umds-primitive-spacing-quarck);
+}
+
+.umds-color-picker__swatch:disabled {
+  cursor: not-allowed;
+  opacity: var(--umds-semantic-field-disabled-opacity);
+}
+
+/* ── Cor livre ── */
+.umds-color-picker__custom {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+}
+
+.umds-color-picker__custom-preview {
+  flex: none;
+  box-sizing: border-box;
+  width: var(--umds-primitive-spacing-xs); /* 32px, a altura do Input sm */
+  height: var(--umds-primitive-spacing-xs);
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+  border-radius: var(--umds-primitive-border-radius-sm);
+}
+
+/* ── Alto contraste: a marcação e a borda ficam, a cor é do usuário ── */
+@media (forced-colors: active) {
+  .umds-color-picker__swatch {
+    forced-color-adjust: none;
+    border-color: CanvasText;
+  }
+
+  .umds-color-picker__swatch--selected {
+    outline: var(--umds-primitive-border-width-thin) solid Highlight;
+    outline-offset: var(--umds-primitive-border-width-thin);
+  }
+}

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,73 @@
+import './ColorPicker.css';
+/**
+ * Amostra do ColorPicker.
+ * @property {string} value - Nome da variável CSS (`--umds-primitive-blue-pure`) ou uma cor hexadecimal (`#0058DB`).
+ * @property {string} label - Nome da cor, para leitor de tela e tooltip.
+ * @property {boolean} onLight - Cor clara: o ícone de marcação sai escuro.
+ * @property {boolean} disabled - Desabilita só esta amostra.
+ */
+export interface ColorPickerSwatch {
+    value: string;
+    label: string;
+    onLight?: boolean;
+    disabled?: boolean;
+    [key: string]: any;
+}
+/**
+ * ColorPicker — escolha de UMA cor numa grade de amostras da paleta do 1DS.
+ *
+ * O valor é o NOME DO TOKEN (`--umds-primitive-blue-pure`), não o hexadecimal:
+ * guarde o nome e escreva `var(${valor})` onde pintar, e a cor acompanha a
+ * paleta do DS. As amostras são os primitivos de cor (6 famílias de 4 tons e
+ * os 7 cinzas), por isso a cor escolhida é a mesma no tema claro e no escuro,
+ * o que é o certo para cor de dado (marcador, tipo de documento, setor).
+ *
+ * É um `radiogroup`: um Tab entra na grade (na amostra escolhida, ou na
+ * primeira) e as setas movem a escolha, com Home e End nas pontas. Cada amostra
+ * tem nome acessível ("Azul escuro") e a escolhida ganha um ícone de marcação,
+ * então a seleção nunca depende só da cor.
+ *
+ * `allowCustom` liga o campo de cor livre (hexadecimal `#RRGGBB`). Vem
+ * DESLIGADO: cor fora da paleta foge do DS, e quem liga assume o desvio. O
+ * valor livre sai em maiúsculas (`#0058DB`) e se distingue do token por começar
+ * com `#`.
+ *
+ * Para um recorte da paleta (só azul e cinza) ou para traduzir os nomes, passe
+ * `swatches`; `COLOR_PALETTE` é a lista padrão, exportada para filtrar.
+ * @property {string} value - Valor escolhido (controlado): nome do token ou `#RRGGBB`
+ * @property {string} defaultValue - Valor inicial (não controlado)
+ * @property {string} label - Rótulo visível do grupo
+ * @property {string} ariaLabel - Nome acessível quando não há `label` visível
+ * @property {string} ariaLabelledby - Id do texto que nomeia o grupo
+ * @property {ColorPickerSwatch[]} swatches - Amostras no lugar da paleta do DS (ex.: nomes traduzidos)
+ * @property {string[]} families - Mostra só estas famílias da paleta do DS: 'blue' | 'red' | 'green' | 'orange' | 'yellow' | 'purple' | 'gray'
+ * @property {boolean} allowCustom - Liga o campo de cor livre (hexadecimal)
+ * @property {string} customLabel - Rótulo do campo de cor livre (padrão: "Cor livre (hexadecimal)")
+ * @property {string} customErrorMessage - Mensagem do hexadecimal inválido (padrão: "Use o formato #RRGGBB")
+ * @property {string} size - Tamanho da amostra: 'sm' (24px) | 'md' (32px)
+ * @property {boolean} disabled - Desabilita o grupo inteiro
+ * @property {string} id - Base dos ids internos; passe em SSR para os ids já saírem no HTML do servidor
+ * @property {string} className - Classes CSS adicionais
+ * @property {function} onChange - Callback com o valor escolhido (nome do token ou `#RRGGBB`)
+ * @quandoUsar Escolher a cor de um marcador, de um tipo de documento, de um setor ou de uma série de dados, sempre dentro da paleta do DS.
+ * @quandoNaoUsar Para cor com PAPEL na interface (primária, erro, sucesso), use os tokens semânticos direto: não é escolha do usuário. Para escolher entre poucas opções que não são cor, use `SegmentedControl` ou `RadioGroup`. Para uma cor qualquer da web, ligue `allowCustom` sabendo que ela sai do DS.
+ */
+export interface ColorPickerProps {
+    value?: string;
+    defaultValue?: string;
+    label?: string;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    swatches?: ColorPickerSwatch[];
+    families?: string[];
+    allowCustom?: boolean;
+    customLabel?: string;
+    customErrorMessage?: string;
+    size?: "sm" | "md";
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    onChange?: (value: string) => void;
+}
+declare function ColorPicker(props: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
+export default ColorPicker;

package/dist/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,219 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './ColorPicker.css';
+import { useState, useRef, useEffect } from "react";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import Icon from "../Icon/Icon";
+import Input from "../Input/Input";
+import { gerarId } from "../../utils/id";
+import { COLOR_PALETTE, isHexColor } from "../../utils/paleta-de-cores";
+function ColorPicker(props) {
+    const groupRef = useRef(null);
+    const [internalValue, setInternalValue] = useState(() => props.defaultValue !== undefined ? props.defaultValue : "");
+    const [uid, setUid] = useState(() => "");
+    const [hexDraft, setHexDraft] = useState(() => "");
+    const [hexEditing, setHexEditing] = useState(() => false);
+    const [hexTouched, setHexTouched] = useState(() => false);
+    function baseId() {
+        return props.id || uid;
+    }
+    function labelId() {
+        return baseId() && props.label ? baseId() + "-label" : undefined;
+    }
+    function currentValue() {
+        return props.value !== undefined ? props.value : internalValue;
+    }
+    function swatchList() {
+        if (props.swatches && props.swatches.length)
+            return props.swatches;
+        const familias = props.families;
+        if (!familias || !familias.length)
+            return COLOR_PALETTE;
+        return COLOR_PALETTE.filter((cor) => familias.indexOf(cor.family) !== -1);
+    }
+    function usaPaletaDoDs() {
+        return !(props.swatches && props.swatches.length);
+    }
+    function groupClasses() {
+        return [
+            "umds-color-picker",
+            `umds-color-picker--${props.size || "md"}`,
+            props.disabled ? "umds-color-picker--disabled" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function swatchesClasses() {
+        return [
+            "umds-color-picker__swatches",
+            usaPaletaDoDs() ? "umds-color-picker__swatches--familias" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function groupAriaLabel() {
+        if (props.ariaLabel)
+            return props.ariaLabel;
+        // Antes do onMount o label ainda não tem id para o aria-labelledby apontar.
+        return props.label && !labelId() ? props.label : undefined;
+    }
+    function groupLabelledBy() {
+        return props.ariaLabelledby || labelId();
+    }
+    function corCss(valor) {
+        if (!valor)
+            return "";
+        return valor.indexOf("--") === 0 ? "var(" + valor + ")" : valor;
+    }
+    function swatchStyle(swatch) {
+        return {
+            backgroundColor: corCss(swatch.value),
+        };
+    }
+    function swatchClasses(swatch) {
+        return [
+            "umds-color-picker__swatch",
+            swatch.onLight ? "umds-color-picker__swatch--on-light" : "",
+            estaEscolhida(swatch) ? "umds-color-picker__swatch--selected" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function novaLinha(swatch, index) {
+        if (!usaPaletaDoDs())
+            return false;
+        if (index === 0)
+            return true;
+        const anterior = swatchList()[index - 1];
+        return !!anterior && !!swatch.family && anterior.family !== swatch.family;
+    }
+    function swatchItemClasses(swatch, index) {
+        return [
+            swatchClasses(swatch),
+            novaLinha(swatch, index) ? "umds-color-picker__swatch--nova-linha" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function estaEscolhida(swatch) {
+        return (!!currentValue() &&
+            swatch.value.toLowerCase() === currentValue().toLowerCase());
+    }
+    function estaDesabilitada(swatch) {
+        return !!props.disabled || !!swatch.disabled;
+    }
+    function indiceDoTab() {
+        const lista = swatchList();
+        for (let i = 0; i < lista.length; i++) {
+            if (estaEscolhida(lista[i]) && !estaDesabilitada(lista[i]))
+                return i;
+        }
+        for (let i = 0; i < lista.length; i++) {
+            if (!estaDesabilitada(lista[i]))
+                return i;
+        }
+        return 0;
+    }
+    function tabIndexDa(index) {
+        return index === indiceDoTab() ? 0 : -1;
+    }
+    function emitir(valor) {
+        setInternalValue(valor);
+        if (props.onChange)
+            props.onChange(valor);
+    }
+    function escolher(swatch) {
+        if (estaDesabilitada(swatch))
+            return;
+        setHexEditing(false);
+        setHexDraft("");
+        setHexTouched(false);
+        emitir(swatch.value);
+    }
+    function handleKeyDown(event, index) {
+        if (!event || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const lista = swatchList();
+        const total = lista.length;
+        if (!total)
+            return;
+        let passo = 0;
+        let alvo = index;
+        if (event.key === "ArrowRight" || event.key === "ArrowDown")
+            passo = 1;
+        else if (event.key === "ArrowLeft" || event.key === "ArrowUp")
+            passo = -1;
+        else if (event.key === "Home") {
+            passo = 1;
+            alvo = -1;
+        }
+        else if (event.key === "End") {
+            passo = -1;
+            alvo = total;
+        }
+        else
+            return;
+        event.preventDefault();
+        for (let tentativa = 0; tentativa < total; tentativa++) {
+            alvo = (alvo + passo + total) % total;
+            if (!estaDesabilitada(lista[alvo]))
+                break;
+        }
+        if (estaDesabilitada(lista[alvo]))
+            return;
+        escolher(lista[alvo]);
+        if (groupRef.current) {
+            const botoes = groupRef.current.querySelectorAll('[role="radio"]');
+            const botao = botoes[alvo];
+            if (botao)
+                botao.focus();
+        }
+    }
+    function hexText() {
+        if (hexEditing)
+            return hexDraft;
+        const atual = currentValue();
+        return atual && atual.indexOf("#") === 0 ? atual : "";
+    }
+    function hexInvalid() {
+        return hexTouched && !!hexText() && !isHexColor(hexText());
+    }
+    function customPreview() {
+        const texto = hexText();
+        return isHexColor(texto) ? corCss(normalizarHex(texto)) : "";
+    }
+    function customLabelText() {
+        return props.customLabel || "Cor livre (hexadecimal)";
+    }
+    function customErrorText() {
+        return hexInvalid()
+            ? props.customErrorMessage || "Use o formato #RRGGBB"
+            : undefined;
+    }
+    function normalizarHex(texto) {
+        const limpo = texto.trim();
+        return (limpo.indexOf("#") === 0 ? limpo : "#" + limpo).toUpperCase();
+    }
+    function handleHexInput(texto) {
+        setHexEditing(true);
+        setHexDraft(texto);
+        if (isHexColor(texto))
+            emitir(normalizarHex(texto));
+    }
+    function handleHexBlur() {
+        setHexTouched(true);
+        if (isHexColor(hexDraft)) {
+            setHexEditing(false);
+            setHexDraft("");
+        }
+    }
+    useEffect(() => {
+        if (!props.id)
+            setUid(gerarId("umds-color-picker"));
+    }, []);
+    return (_jsxs("div", { className: groupClasses(), children: [props.label ? (_jsx("span", { className: "umds-color-picker__label", id: labelId(), children: props.label })) : null, _jsx("div", { role: "radiogroup", ref: groupRef, "aria-label": groupAriaLabel(), "aria-labelledby": groupLabelledBy(), className: swatchesClasses(), children: swatchList()?.map((swatch, index) => (_jsx("button", { type: "button", role: "radio", style: swatchStyle(swatch), "aria-checked": estaEscolhida(swatch) ? "true" : "false", "aria-label": swatch.label, title: swatch.label, disabled: estaDesabilitada(swatch), tabIndex: tabIndexDa(index), onClick: (event) => escolher(swatch), onKeyDown: (event) => handleKeyDown(event, index), className: swatchItemClasses(swatch, index), children: estaEscolhida(swatch) ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: faCheck })) : null }, swatch.value))) }), props.allowCustom ? (_jsxs("div", { className: "umds-color-picker__custom", children: [_jsx("span", { "aria-hidden": "true", className: "umds-color-picker__custom-preview", style: {
+                            backgroundColor: customPreview(),
+                        } }), _jsx(Input, { size: "sm", placeholder: "#0058DB", label: customLabelText(), value: hexText(), disabled: props.disabled, errorMessage: customErrorText(), onChange: (texto) => handleHexInput(texto), onBlur: (event) => handleHexBlur() })] })) : null] }));
+}
+export default ColorPicker;

package/dist/components/Combobox/Combobox.css

@@ -41,7 +41,7 @@
   display: flex;
   align-items: center;
   background-color: var(--umds-semantic-color-background-white);
-  border: 1px solid var(--umds-semantic-color-neutral-light-down);
+  border: 1px solid var(--umds-semantic-field-border-default);
   border-radius: var(--umds-primitive-border-radius-sm);
   box-sizing: border-box;
   transition:
@@ -203,17 +203,25 @@
 /* ── Estado: ReadOnly ── */
 .umds-combobox--readonly .umds-combobox__field {
   background-color: var(--umds-semantic-field-readonly-background);
-  border-color: var(--umds-semantic-color-neutral-light-down);
+  border-color: var(--umds-semantic-field-border-default);
 }
 
 .umds-combobox--readonly .umds-combobox__field:hover {
-  border-color: var(--umds-semantic-color-neutral-light-down);
+  border-color: var(--umds-semantic-field-border-default);
 }
 
 .umds-combobox--readonly .umds-combobox__control {
   cursor: default;
 }
 
+/* Somente leitura não é desabilitado: o texto segue lido e a WCAG 1.4.3 vale
+   sem isenção. O placeholder padrão foi calibrado para fundo branco e cai para
+   ~4,2:1 sobre o fundo de somente leitura; neutral-dark-down passa 4,5:1 em
+   todos os temas (1doc 6,78:1 · 1doc-dark 10,83:1 · alto contraste 16,48:1). */
+.umds-combobox--readonly .umds-combobox__control::placeholder {
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
 /* ── Dropdown (espelha .umds-select__dropdown) ── */
 .umds-combobox__dropdown {
   position: absolute;

package/dist/components/ConfirmAIAction/ConfirmAIAction.d.ts

@@ -16,13 +16,23 @@ import './ConfirmAIAction.css';
  * @property {Function} onConfirm - Confirmação. Só dispara quando o risco permite.
  * @property {Function} onCancel - Cancelamento
  * @property {string} className - Classes CSS adicionais
- * LACUNA CONHECIDA: o `ConfirmDialog` não expõe `confirmDisabled`, então em risco alto o botão de confirmar continua clicável e o bloqueio acontece no handler. A tela diz isso em vez de fingir botão desabilitado. Pedido ao time do DS.
+ * Em risco alto, o botão de confirmar fica desabilitado (`confirmDisabled` do `ConfirmDialog`) até a frase digitada conferir; o handler bloqueia de novo, por garantia.
  * @quandoUsar Ação sugerida por IA que o usuário não pode desfazer sozinho, ou que dispara efeito em cascata: despachar, tramitar, arquivar, notificar o cidadão. Cascata conta como risco alto mesmo quando cada passo é reversível.
  * @quandoNaoUsar Ação reversível em um clique — mantenha só o "desfazer" e não interrompa. Para confirmação que não veio de sugestão de IA, use `ConfirmDialog` direto.
  */
 export interface ConfirmAIActionProps {
     /** Rótulo acessível do bloco de impacto. @default 'O que será afetado' */
     impactLabel?: string;
+    /** Aviso de irreversibilidade em risco alto. Troque para traduzir. @default 'Esta ação não pode ser desfeita.' */
+    irreversibleLabel?: string;
+    /** Texto antes da frase a digitar em risco alto (a frase vem depois, em negrito). Troque para traduzir. @default 'Para confirmar, digite' */
+    typePhraseLabel?: string;
+    /** Anúncio (aria-live) quando a frase digitada confere. Troque para traduzir. @default 'Texto confere. O botão de confirmar foi liberado.' */
+    phraseMatchedLabel?: string;
+    /** Anúncio (aria-live) enquanto a frase digitada não confere. Troque para traduzir. @default 'O botão de confirmar fica desabilitado até o texto conferir.' */
+    phrasePendingLabel?: string;
+    /** Texto do botão de confirmar durante `confirmLoading`, repassado ao ConfirmDialog. Troque para traduzir. @default 'Aguarde...' */
+    loadingLabel?: string;
     open?: any;
     risk?: "baixo" | "medio" | "alto";
     title: string;

package/dist/components/ConfirmAIAction/ConfirmAIAction.js

@@ -19,6 +19,9 @@ function ConfirmAIAction(props) {
             return true;
         return ((props.typedValue || "").trim().toUpperCase() === frase().toUpperCase());
     }
+    function textoDigite() {
+        return (props.typePhraseLabel || "Para confirmar, digite") + " ";
+    }
     function variante() {
         return nivel() === "alto" ? "negative" : "info";
     }
@@ -47,6 +50,8 @@ function ConfirmAIAction(props) {
             props.onConfirm(event);
         }
     }
-    return (_jsx(ConfirmDialog, { open: props.open, title: props.title, description: props.description, variant: variante(), confirmLabel: props.confirmLabel || "Confirmar", cancelLabel: props.cancelLabel || "Cancelar", confirmLoading: props.confirmLoading, onConfirm: (event) => handleConfirm(event), onCancel: (event) => handleCancel(event), children: _jsxs("div", { className: classes(), children: [props.affected && props.affected.length > 0 ? (_jsxs("div", { className: "umds-confirmai__bloco", children: [_jsx("p", { className: "umds-confirmai__rotulo", children: "O que ser\u00E1 afetado" }), _jsx("ul", { className: "umds-confirmai__lista", tabIndex: 0, "aria-label": props.impactLabel || "O que será afetado", children: listaAfetados()?.map((item) => (_jsx("li", { children: item }, item))) })] })) : null, _jsx(_Fragment, { children: props.children }), exigeDigitacao() ? (_jsxs("div", { className: "umds-confirmai__bloco umds-confirmai__alto", children: [_jsxs("p", { className: "umds-confirmai__aviso", children: [_jsx(Icon, { size: "sm", variant: "inherit", icon: faTriangleExclamation }), _jsx("span", { children: "Esta a\u00E7\u00E3o n\u00E3o pode ser desfeita." })] }), _jsxs("label", { className: "umds-confirmai__label", htmlFor: "umds-confirmai-frase", children: ["Para confirmar, digite ", _jsx("strong", { children: frase() })] }), _jsx("input", { id: "umds-confirmai-frase", className: "umds-confirmai__campo", type: "text", autoComplete: "off", value: props.typedValue, onInput: (event) => handleTyped(event) }), _jsx("p", { className: "umds-confirmai__estado", "aria-live": "polite", children: liberado() ? (_jsx(_Fragment, { children: "Texto confere. A confirma\u00E7\u00E3o ser\u00E1 aceita." })) : (_jsx(_Fragment, { children: "Enquanto o texto n\u00E3o conferir, o bot\u00E3o de confirmar n\u00E3o tem efeito." })) })] })) : null] }) }));
+    return (_jsx(ConfirmDialog, { open: props.open, title: props.title, description: props.description, variant: variante(), confirmLabel: props.confirmLabel || "Confirmar", cancelLabel: props.cancelLabel || "Cancelar", confirmLoading: props.confirmLoading, loadingLabel: props.loadingLabel, confirmDisabled: !liberado(), onConfirm: (event) => handleConfirm(event), onCancel: (event) => handleCancel(event), children: _jsxs("div", { className: classes(), children: [props.affected && props.affected.length > 0 ? (_jsxs("div", { className: "umds-confirmai__bloco", children: [_jsx("p", { className: "umds-confirmai__rotulo", children: props.impactLabel || "O que será afetado" }), _jsx("ul", { className: "umds-confirmai__lista", tabIndex: 0, "aria-label": props.impactLabel || "O que será afetado", children: listaAfetados()?.map((item) => (_jsx("li", { children: item }, item))) })] })) : null, _jsx(_Fragment, { children: props.children }), exigeDigitacao() ? (_jsxs("div", { className: "umds-confirmai__bloco umds-confirmai__alto", children: [_jsxs("p", { className: "umds-confirmai__aviso", children: [_jsx(Icon, { size: "sm", variant: "inherit", icon: faTriangleExclamation }), _jsx("span", { children: props.irreversibleLabel || "Esta ação não pode ser desfeita." })] }), _jsxs("label", { className: "umds-confirmai__label", htmlFor: "umds-confirmai-frase", children: [textoDigite(), _jsx("strong", { children: frase() })] }), _jsx("input", { id: "umds-confirmai-frase", className: "umds-confirmai__campo", type: "text", autoComplete: "off", value: props.typedValue, onInput: (event) => handleTyped(event) }), _jsx("p", { className: "umds-confirmai__estado", "aria-live": "polite", children: liberado() ? (_jsx(_Fragment, { children: props.phraseMatchedLabel ||
+                                    "Texto confere. O botão de confirmar foi liberado." })) : (_jsx(_Fragment, { children: props.phrasePendingLabel ||
+                                    "O botão de confirmar fica desabilitado até o texto conferir." })) })] })) : null] }) }));
 }
 export default ConfirmAIAction;

package/dist/components/ConfirmDialog/ConfirmDialog.css

@@ -11,6 +11,7 @@
 .umds-confirm-dialog-overlay {
   position: fixed;
   inset: 0;
+  /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token de scrim/overlay (candidato a novo token) */
   background: rgba(0, 0, 0, 0.45); /* overlay escuro — sem token 1DS (mesma abordagem do Modal) */
   display: flex;
   align-items: center;
@@ -168,7 +169,9 @@
   /* Escurecimento dinâmico do feedback-info-dark (decisão 25/07: info/warning
      permanece LARANJA; sem token -darker — derivado por color-mix). No tema
      1doc resolve no mesmo #7a3909 de antes; acompanha tema/dark nos demais. */
+  /* stylelint-disable-next-line 1ds/cor-por-token -- escurecimento por color-mix com preto: o DS não tem token -darker nem preto semântico (candidato a novo token) */
   background: color-mix(in srgb, var(--umds-semantic-color-feedback-info-dark) 80%, black);
+  /* stylelint-disable-next-line 1ds/cor-por-token -- escurecimento por color-mix com preto: o DS não tem token -darker nem preto semântico (candidato a novo token) */
   border-color: color-mix(in srgb, var(--umds-semantic-color-feedback-info-dark) 80%, black);
 }
 

package/dist/components/ConfirmDialog/ConfirmDialog.d.ts

@@ -40,11 +40,25 @@ export interface ConfirmDialogProps {
      * @default 'Cancelar'
      */
     cancelLabel?: string;
+    /**
+     * Texto do botão de confirmação enquanto `confirmLoading` está ligado.
+     * Troque para traduzir.
+     * @default 'Aguarde...'
+     */
+    loadingLabel?: string;
     /**
      * Desabilita o botão de confirmação e exibe estado de carregamento.
      * @default false
      */
     confirmLoading?: boolean;
+    /**
+     * Desabilita o botão de confirmação sem estado de carregamento — para quando
+     * a confirmação depende de uma condição ainda não cumprida (ex.: digitar a
+     * frase de segurança). O botão sai com `disabled` nativo: não recebe foco
+     * nem clique, e o leitor de tela o anuncia como indisponível.
+     * @default false
+     */
+    confirmDisabled?: boolean;
     /**
      * Renderiza o diálogo inline (overlay relativo, sem fixed) — útil para
      * documentação/Storybook, onde o overlay fixed ficaria preso em containers