@1doc/1ds-react 2.8.0 → 2.9.0

package/dist/components/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,494 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './RichTextEditor.css';
+import * as React from "react";
+import { useState, useRef, useEffect } from "react";
+import { faBold, faItalic, faUnderline, faStrikethrough, faListUl, faListOl, faLink, faRotateLeft, faRotateRight, faEraser, } from "@fortawesome/free-solid-svg-icons";
+import Button from "../Button/Button";
+import Icon from "../Icon/Icon";
+import Input from "../Input/Input";
+import Text from "../Text/Text";
+import { gerarId } from "../../utils/id";
+import { htmlDoLink, htmlVazio, normalizarEndereco, sanitizarHtml, } from "../../utils/html-seguro";
+function RichTextEditor(props) {
+    const editorRef = useRef(null);
+    const toolbarRef = useRef(null);
+    const linkInputWrapRef = useRef(null);
+    const ultimoEmitidoRef = useRef("");
+    const selecaoRef = useRef(null);
+    const focoPendenteRef = useRef("");
+    const observadorRef = useRef(null);
+    const [uid, setUid] = useState(() => "");
+    const [linkOpen, setLinkOpen] = useState(() => false);
+    const [linkUrl, setLinkUrl] = useState(() => "");
+    const [linkError, setLinkError] = useState(() => false);
+    const [toolFocus, setToolFocus] = useState(() => 0);
+    const [active, setActive] = useState(() => "");
+    function baseId() {
+        return props.id || uid;
+    }
+    function labelId() {
+        return baseId() && props.label ? baseId() + "-label" : undefined;
+    }
+    function editorId() {
+        return baseId() ? baseId() + "-editor" : undefined;
+    }
+    function errorId() {
+        return baseId() && props.errorMessage ? baseId() + "-error" : undefined;
+    }
+    function helperId() {
+        return baseId() && props.helperText ? baseId() + "-helper" : undefined;
+    }
+    function describedBy() {
+        const ids = [errorId(), helperId()].filter(Boolean).join(" ");
+        return ids || undefined;
+    }
+    function editorAriaLabel() {
+        if (props.ariaLabel)
+            return props.ariaLabel;
+        return props.label && !labelId() ? props.label : undefined;
+    }
+    function isInvalid() {
+        return !!props.invalid || !!props.errorMessage;
+    }
+    function isEditable() {
+        return !props.disabled && !props.readOnly;
+    }
+    function editableText() {
+        return isEditable() ? "true" : "false";
+    }
+    function showToolbar() {
+        return !props.readOnly;
+    }
+    function classes() {
+        return [
+            "umds-rte",
+            isInvalid() ? "umds-rte--invalid" : "",
+            props.disabled ? "umds-rte--disabled" : "",
+            props.readOnly ? "umds-rte--readonly" : "",
+            props.resizable ? "umds-rte--resizable" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function editorStyle() {
+        const altura = props.minHeight !== undefined && props.minHeight !== null
+            ? props.minHeight
+            : 0;
+        return altura
+            ? {
+                minHeight: altura + "px",
+            }
+            : undefined;
+    }
+    function rotulo(chave) {
+        const padrao = {
+            bold: "Negrito",
+            italic: "Itálico",
+            underline: "Sublinhado",
+            strike: "Tachado",
+            ul: "Lista com marcadores",
+            ol: "Lista numerada",
+            link: "Link",
+            undo: "Desfazer",
+            redo: "Refazer",
+            clear: "Limpar formatação",
+            linkAddress: "Endereço do link",
+            linkApply: "Aplicar",
+            linkRemove: "Remover link",
+            linkCancel: "Cancelar",
+            linkInvalid: "Use um endereço http, https, mailto ou tel.",
+        };
+        const dado = props.labels || {};
+        return dado[chave] || padrao[chave];
+    }
+    function toolbarName() {
+        return props.toolbarLabel || "Formatação";
+    }
+    function tools() {
+        const padrao = [
+            "bold",
+            "italic",
+            "underline",
+            "|",
+            "ul",
+            "ol",
+            "|",
+            "link",
+            "|",
+            "undo",
+            "redo",
+        ];
+        const lista = props.toolbar && props.toolbar.length ? props.toolbar : padrao;
+        const catalogo = {
+            bold: {
+                command: "bold",
+                icon: faBold,
+                toggle: true,
+            },
+            italic: {
+                command: "italic",
+                icon: faItalic,
+                toggle: true,
+            },
+            underline: {
+                command: "underline",
+                icon: faUnderline,
+                toggle: true,
+            },
+            strike: {
+                command: "strikeThrough",
+                icon: faStrikethrough,
+                toggle: true,
+            },
+            ul: {
+                command: "insertUnorderedList",
+                icon: faListUl,
+                toggle: true,
+            },
+            ol: {
+                command: "insertOrderedList",
+                icon: faListOl,
+                toggle: true,
+            },
+            link: {
+                command: "link",
+                icon: faLink,
+                toggle: false,
+            },
+            undo: {
+                command: "undo",
+                icon: faRotateLeft,
+                toggle: false,
+            },
+            redo: {
+                command: "redo",
+                icon: faRotateRight,
+                toggle: false,
+            },
+            clear: {
+                command: "removeFormat",
+                icon: faEraser,
+                toggle: false,
+            },
+        };
+        const saida = [];
+        let posicao = 0;
+        for (let i = 0; i < lista.length; i++) {
+            const chave = lista[i];
+            if (chave === "|") {
+                saida.push({
+                    key: "sep-" + i,
+                    separator: true,
+                });
+                continue;
+            }
+            const def = catalogo[chave];
+            if (!def)
+                continue;
+            saida.push({
+                key: chave,
+                separator: false,
+                command: def.command,
+                icon: def.icon,
+                toggle: def.toggle,
+                position: posicao,
+                label: rotulo(chave),
+            });
+            posicao = posicao + 1;
+        }
+        return saida;
+    }
+    function estaAtiva(ferramenta) {
+        return (!!ferramenta.toggle &&
+            active.split(",").indexOf(ferramenta.command) !== -1);
+    }
+    function pressedText(ferramenta) {
+        return ferramenta.toggle
+            ? estaAtiva(ferramenta)
+                ? "true"
+                : "false"
+            : undefined;
+    }
+    function toolClasses(ferramenta) {
+        return [
+            "umds-rte__tool",
+            estaAtiva(ferramenta) ? "umds-rte__tool--active" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function toolTabIndex(ferramenta) {
+        return ferramenta.position === toolFocus ? 0 : -1;
+    }
+    function escreverHtml(html) {
+        if (!editorRef.current)
+            return;
+        const limpo = sanitizarHtml(html || "");
+        if (editorRef.current.innerHTML !== limpo)
+            editorRef.current.innerHTML = limpo;
+    }
+    function selecaoNaArea() {
+        if (typeof window === "undefined" ||
+            !window.getSelection ||
+            !editorRef.current)
+            return false;
+        const selecao = window.getSelection();
+        return (!!selecao &&
+            selecao.rangeCount > 0 &&
+            editorRef.current.contains(selecao.anchorNode));
+    }
+    function lerEstados() {
+        if (typeof document === "undefined" ||
+            typeof document.queryCommandState !== "function")
+            return;
+        if (!selecaoNaArea())
+            return;
+        const comandos = [
+            "bold",
+            "italic",
+            "underline",
+            "strikeThrough",
+            "insertUnorderedList",
+            "insertOrderedList",
+        ];
+        const ligados = [];
+        for (let i = 0; i < comandos.length; i++) {
+            try {
+                if (document.queryCommandState(comandos[i]))
+                    ligados.push(comandos[i]);
+            }
+            catch (erro) {
+                // O navegador não conhece o comando: fica desligado.
+            }
+        }
+        const texto = ligados.join(",");
+        if (texto !== active)
+            setActive(texto);
+    }
+    function emitir() {
+        if (!editorRef.current)
+            return;
+        let html = editorRef.current.innerHTML;
+        // Apagou tudo: o navegador deixa um <br> e o placeholder (que é :empty) não volta.
+        if (htmlVazio(html)) {
+            html = "";
+            if (editorRef.current.innerHTML !== "" &&
+                editorRef.current.querySelector("li") === null)
+                editorRef.current.innerHTML = "";
+        }
+        ultimoEmitidoRef.current = html;
+        if (props.onChange)
+            props.onChange(html);
+    }
+    function handleInput() {
+        emitir();
+        lerEstados();
+    }
+    function handlePaste(event) {
+        if (!event || !event.clipboardData)
+            return;
+        // Colar entra como texto puro: sem formatação de outro site e sem HTML estranho.
+        event.preventDefault();
+        const texto = event.clipboardData.getData("text/plain");
+        if (texto && typeof document !== "undefined")
+            document.execCommand("insertText", false, texto);
+    }
+    function handleEditorKeyDown(event) {
+        if (!event)
+            return;
+        if ((event.ctrlKey || event.metaKey) &&
+            !event.altKey &&
+            (event.key === "k" || event.key === "K")) {
+            event.preventDefault();
+            abrirLink();
+        }
+    }
+    function handleBlur(event) {
+        if (props.onBlur)
+            props.onBlur(event);
+    }
+    function handleToolMouseDown(event) {
+        if (event && event.preventDefault)
+            event.preventDefault();
+    }
+    function handleToolClick(ferramenta) {
+        if (!isEditable() || typeof document === "undefined")
+            return;
+        if (ferramenta.command === "link") {
+            abrirLink();
+            return;
+        }
+        if (editorRef.current && !selecaoNaArea())
+            editorRef.current.focus();
+        document.execCommand(ferramenta.command, false, undefined);
+        handleInput();
+    }
+    function handleToolFocus(ferramenta) {
+        if (toolFocus !== ferramenta.position)
+            setToolFocus(ferramenta.position);
+    }
+    function handleToolbarKeyDown(event) {
+        if (!event || !toolbarRef.current)
+            return;
+        const tecla = event.key;
+        if (tecla !== "ArrowRight" &&
+            tecla !== "ArrowLeft" &&
+            tecla !== "Home" &&
+            tecla !== "End")
+            return;
+        const botoes = toolbarRef.current.querySelectorAll("button");
+        const total = botoes.length;
+        if (!total)
+            return;
+        let atual = toolFocus;
+        if (tecla === "ArrowRight")
+            atual = (atual + 1) % total;
+        else if (tecla === "ArrowLeft")
+            atual = (atual - 1 + total) % total;
+        else if (tecla === "Home")
+            atual = 0;
+        else
+            atual = total - 1;
+        event.preventDefault();
+        setToolFocus(atual);
+        botoes[atual].focus();
+    }
+    function abrirLink() {
+        if (!isEditable() || typeof window === "undefined" || linkOpen)
+            return;
+        let enderecoAtual = "";
+        selecaoRef.current = null;
+        if (selecaoNaArea()) {
+            const selecao = window.getSelection();
+            selecaoRef.current = selecao.getRangeAt(0).cloneRange();
+            const no = selecao.anchorNode;
+            const elemento = no && no.nodeType === 3 ? no.parentNode : no;
+            const ancora = elemento && elemento.closest ? elemento.closest("a") : null;
+            if (ancora)
+                enderecoAtual = ancora.getAttribute("href") || "";
+        }
+        setLinkUrl(enderecoAtual);
+        setLinkError(false);
+        setLinkOpen(true);
+        focoPendenteRef.current = "link";
+    }
+    function fecharLink() {
+        setLinkOpen(false);
+        setLinkError(false);
+        focoPendenteRef.current = "editor";
+    }
+    function restaurarSelecao() {
+        if (typeof window === "undefined" || !window.getSelection)
+            return;
+        if (editorRef.current)
+            editorRef.current.focus();
+        if (selecaoRef.current) {
+            const selecao = window.getSelection();
+            selecao.removeAllRanges();
+            selecao.addRange(selecaoRef.current);
+        }
+    }
+    function handleLinkInput(texto) {
+        setLinkUrl(texto);
+        if (linkError)
+            setLinkError(false);
+    }
+    function aplicarLink() {
+        if (typeof document === "undefined")
+            return;
+        const endereco = normalizarEndereco(linkUrl);
+        if (!endereco) {
+            setLinkError(true);
+            return;
+        }
+        restaurarSelecao();
+        const selecao = window.getSelection();
+        const semTexto = !!selecao && selecao.isCollapsed;
+        // Sem texto escolhido, o próprio endereço vira o texto do link.
+        const comando = semTexto ? "insertHTML" : "createLink";
+        const argumento = semTexto ? htmlDoLink(endereco) : endereco;
+        document.execCommand(comando, false, argumento);
+        setLinkOpen(false);
+        focoPendenteRef.current = "editor";
+        handleInput();
+    }
+    function removerLink() {
+        if (typeof document === "undefined")
+            return;
+        restaurarSelecao();
+        document.execCommand("unlink", false, undefined);
+        setLinkOpen(false);
+        focoPendenteRef.current = "editor";
+        handleInput();
+    }
+    function handleLinkSubmit(event) {
+        if (event && event.preventDefault)
+            event.preventDefault();
+        aplicarLink();
+    }
+    function handleLinkKeyDown(event) {
+        if (event && event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            fecharLink();
+        }
+    }
+    function linkErrorText() {
+        return linkError ? rotulo("linkInvalid") : undefined;
+    }
+    function linkRemoveVisible() {
+        return linkUrl !== "";
+    }
+    useEffect(() => {
+        setUid(gerarId("umds-rte"));
+        const inicial = props.value !== undefined ? props.value : props.defaultValue || "";
+        escreverHtml(inicial);
+        ultimoEmitidoRef.current = htmlVazio(inicial)
+            ? ""
+            : editorRef.current
+                ? editorRef.current.innerHTML
+                : "";
+        if (typeof document !== "undefined") {
+            const aoMudarSelecao = () => lerEstados();
+            document.addEventListener("selectionchange", aoMudarSelecao);
+            observadorRef.current = () => document.removeEventListener("selectionchange", aoMudarSelecao);
+        }
+    }, []);
+    useEffect(() => {
+        // `value` de fora diferente do que a área tem: reescreve (reset do formulário, valor vindo do servidor).
+        if (props.value !== undefined &&
+            editorRef.current &&
+            props.value !== ultimoEmitidoRef.current) {
+            const limpo = sanitizarHtml(props.value);
+            if (editorRef.current.innerHTML !== limpo &&
+                !(htmlVazio(limpo) && htmlVazio(editorRef.current.innerHTML))) {
+                editorRef.current.innerHTML = limpo;
+            }
+            ultimoEmitidoRef.current = props.value;
+        }
+        if (focoPendenteRef.current) {
+            const alvo = focoPendenteRef.current;
+            focoPendenteRef.current = "";
+            if (alvo === "editor" && editorRef.current) {
+                restaurarSelecao();
+            }
+            else if (alvo === "link" && linkInputWrapRef.current) {
+                const campo = linkInputWrapRef.current.querySelector("input");
+                if (campo)
+                    campo.focus();
+            }
+        }
+    });
+    useEffect(() => {
+        return () => {
+            if (observadorRef.current) {
+                observadorRef.current();
+                observadorRef.current = null;
+            }
+        };
+    }, []);
+    return (_jsxs("div", { className: classes(), children: [props.label ? (_jsx("span", { className: "umds-rte__label", id: labelId(), children: props.label })) : null, _jsxs("div", { className: "umds-rte__frame", children: [showToolbar() ? (_jsx("div", { role: "toolbar", className: "umds-rte__toolbar", ref: toolbarRef, "aria-label": toolbarName(), "aria-controls": editorId(), onKeyDown: (event) => handleToolbarKeyDown(event), children: tools()?.map((ferramenta) => (_jsxs(React.Fragment, { children: [ferramenta.separator ? (_jsx("span", { role: "separator", "aria-orientation": "vertical", className: "umds-rte__separator" })) : null, !ferramenta.separator ? (_jsx("button", { type: "button", "aria-label": ferramenta.label, title: ferramenta.label, "aria-pressed": pressedText(ferramenta), tabIndex: toolTabIndex(ferramenta), disabled: !isEditable(), onMouseDown: (event) => handleToolMouseDown(event), onClick: (event) => handleToolClick(ferramenta), onFocus: (event) => handleToolFocus(ferramenta), className: toolClasses(ferramenta), children: _jsx(Icon, { size: "sm", variant: "inherit", icon: ferramenta.icon }) })) : null] }, ferramenta.key))) })) : null, linkOpen ? (_jsxs("form", { className: "umds-rte__link", noValidate: true, onSubmit: (event) => handleLinkSubmit(event), onKeyDown: (event) => handleLinkKeyDown(event), children: [_jsx("div", { className: "umds-rte__link-field", ref: linkInputWrapRef, children: _jsx(Input, { size: "sm", type: "url", placeholder: "https://", label: rotulo("linkAddress"), value: linkUrl, errorMessage: linkErrorText(), onChange: (texto) => handleLinkInput(texto) }) }), _jsxs("div", { className: "umds-rte__link-actions", children: [_jsx(Button, { variant: "primary", size: "sm", type: "submit", children: rotulo("linkApply") }), linkRemoveVisible() ? (_jsx(Button, { variant: "secondary", size: "sm", onClick: (event) => removerLink(), children: rotulo("linkRemove") })) : null, _jsx(Button, { variant: "text", size: "sm", onClick: (event) => fecharLink(), children: rotulo("linkCancel") })] })] })) : null, _jsx("div", { role: "textbox", "aria-multiline": "true", className: "umds-rte__editor", ref: editorRef, id: editorId(), "aria-label": editorAriaLabel(), "aria-labelledby": labelId(), "aria-describedby": describedBy(), "aria-invalid": isInvalid() ? "true" : undefined, "aria-readonly": props.readOnly ? "true" : undefined, "aria-disabled": props.disabled ? "true" : undefined, "aria-placeholder": props.placeholder, "data-placeholder": props.placeholder, contentEditable: editableText(), tabIndex: props.disabled ? -1 : 0, style: editorStyle(), onInput: (event) => handleInput(), onPaste: (event) => handlePaste(event), onKeyDown: (event) => handleEditorKeyDown(event), onBlur: (event) => handleBlur(event) }), props.footer ? (_jsx("div", { className: "umds-rte__footer", children: _jsx(_Fragment, { children: props.footer }) })) : null] }), props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "negative", id: errorId(), children: props.errorMessage })) : null, props.helperText ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", id: helperId(), children: props.helperText })) : null] }));
+}
+export default RichTextEditor;

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -33,6 +33,9 @@ function SegmentedControl(props) {
     function labelledByText() {
         return props.label ? labelId() : undefined;
     }
+    function groupAriaLabel() {
+        return props.label && !baseId() ? props.label : undefined;
+    }
     function describedByText() {
         return props.errorMessage ? errorId() : undefined;
     }
@@ -66,8 +69,10 @@ function SegmentedControl(props) {
     function rotuloDoSegmento(option) {
         // Com `label` visivel, o `ariaLabel` e IGNORADO de proposito: nome
         // acessivel diferente do texto visivel quebra o WCAG 2.5.3.
+        // Sem id (antes do onMount) o label-for nao liga a nada: o nome e o
+        // proprio texto visivel, o que tambem respeita o 2.5.3.
         if (option.label)
-            return undefined;
+            return baseId() ? undefined : option.label;
         // Ultimo recurso. `value` e nome ruim, mas radio anonimo e pior — e o
         // TypeScript nao pega, porque `label` e `ariaLabel` sao os dois opcionais.
         return option.ariaLabel || option.value;
@@ -83,6 +88,6 @@ function SegmentedControl(props) {
         if (!props.id)
             setUid(gerarId("umds-segmented"));
     }, []);
-    return (_jsxs("div", { className: groupClasses(), children: [props.label ? (_jsxs("span", { className: "umds-segmented__group-label", id: labelId(), children: [props.label, props.required ? (_jsx("span", { className: "umds-segmented__required", children: " *" })) : null] })) : null, _jsx("div", { role: "radiogroup", className: "umds-segmented__track", "aria-labelledby": labelledByText(), "aria-describedby": describedByText(), "aria-invalid": ariaInvalidText(), "aria-required": ariaRequiredText(), children: optionList()?.map((option, index) => (_jsxs(React.Fragment, { children: [_jsx("input", { type: "radio", className: "umds-segmented__input", id: inputId(index), name: groupName(), value: option.value, checked: estaEscolhido(option), disabled: estaDesabilitado(option), "aria-label": rotuloDoSegmento(option), onChange: (event) => handleChange(option) }), _jsx("label", { className: "umds-segmented__item", htmlFor: inputId(index), children: _jsxs("span", { className: "umds-segmented__conteudo", children: [option.icon ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: option.icon })) : null, option.label ? (_jsx("span", { className: "umds-segmented__texto", children: option.label })) : null] }) })] }, option.value))) }), props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "negative", className: "umds-segmented__error-message", id: errorId(), children: props.errorMessage })) : null] }));
+    return (_jsxs("div", { className: groupClasses(), children: [props.label ? (_jsxs("span", { className: "umds-segmented__group-label", id: labelId(), children: [props.label, props.required ? (_jsx("span", { className: "umds-segmented__required", children: " *" })) : null] })) : null, _jsx("div", { role: "radiogroup", className: "umds-segmented__track", "aria-labelledby": labelledByText(), "aria-label": groupAriaLabel(), "aria-describedby": describedByText(), "aria-invalid": ariaInvalidText(), "aria-required": ariaRequiredText(), children: optionList()?.map((option, index) => (_jsxs(React.Fragment, { children: [_jsx("input", { type: "radio", className: "umds-segmented__input", id: inputId(index), name: groupName(), value: option.value, checked: estaEscolhido(option), disabled: estaDesabilitado(option), "aria-label": rotuloDoSegmento(option), onChange: (event) => handleChange(option) }), _jsx("label", { className: "umds-segmented__item", htmlFor: inputId(index), children: _jsxs("span", { className: "umds-segmented__conteudo", children: [option.icon ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: option.icon })) : null, option.label ? (_jsx("span", { className: "umds-segmented__texto", children: option.label })) : null] }) })] }, option.value))) }), props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "negative", className: "umds-segmented__error-message", id: errorId(), children: props.errorMessage })) : null] }));
 }
 export default SegmentedControl;

package/dist/components/Select/Select.css

@@ -157,6 +157,68 @@
   overflow: hidden;
 }
 
+/* ── Lista que abre para cima (placement top, ou auto sem espaço embaixo) ── */
+.umds-select--placement-top .umds-select__dropdown {
+  top: auto;
+  bottom: calc(100% + 4px);
+}
+
+/* ── Rodapé da lista (slot footer): ações fixas abaixo das opções ── */
+.umds-select__footer {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-xxxs);
+  border-top: 1px solid var(--umds-semantic-color-neutral-light-medium);
+  background-color: var(--umds-semantic-color-background-elevated);
+}
+
+/* ── Variante filter: botão de filtro de barra de ferramentas ──
+   Contornado em azul, largura do conteúdo, lista mais larga que o botão. */
+.umds-select--filter {
+  width: auto;
+}
+
+.umds-select--filter.umds-select--full-width {
+  width: 100%;
+}
+
+.umds-select--filter .umds-select__container {
+  width: auto;
+}
+
+.umds-select--filter.umds-select--full-width .umds-select__container {
+  width: 100%;
+}
+
+.umds-select--filter .umds-select__trigger {
+  width: auto;
+  gap: var(--umds-primitive-spacing-nano);
+  border-color: var(--umds-semantic-color-primary-pure);
+  background-color: var(--umds-semantic-color-primary-light);
+}
+
+.umds-select--filter.umds-select--full-width .umds-select__trigger {
+  width: 100%;
+}
+
+.umds-select--filter .umds-select__trigger:hover:not(.umds-select--disabled .umds-select__trigger) {
+  border-color: var(--umds-semantic-color-primary-dark);
+}
+
+.umds-select--filter .umds-select__trigger .umds-text,
+.umds-select--filter .umds-select__actions {
+  color: var(--umds-semantic-color-primary-pure);
+  font-weight: var(--umds-primitive-font-weight-semibold);
+}
+
+.umds-select--filter .umds-select__dropdown {
+  /* 240px: três vezes o degrau xxl (80px). Sem token de largura de menu. */
+  width: max-content;
+  min-width: max(100%, calc(var(--umds-primitive-spacing-xxl) * 3));
+  max-width: calc(100vw - var(--umds-primitive-spacing-xxxs) * 2);
+}
+
 /* ── Busca no dropdown ── */
 .umds-select__search-container {
   display: flex;
@@ -382,6 +444,14 @@
   border-color: var(--umds-semantic-field-border-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-select--readonly .umds-select__placeholder {
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
 /* O campo de busca precisa de indicador de foco — o painel foca ele ao abrir.
    Um outline no <input> desenhava um retângulo azul solto no meio do painel,
    porque o input não tem borda própria para o anel acompanhar. O indicador vai

package/dist/components/Select/Select.d.ts

@@ -40,6 +40,10 @@ export interface SelectOption {
  * @property {string} ariaLabel - Nome acessível quando não há label visível.
  * @property {string} id - ID base dos elementos internos. Gerado automaticamente se omitido.
  * @property {function} onChange - Callback com o(s) valor(es) selecionado(s).
+ * @property {string} placement - Onde a lista abre: 'bottom' (padrão) | 'top' | 'auto'. O `auto` abre para cima quando falta espaço embaixo da tela e há mais em cima (lista dentro do rodapé de um modal).
+ * @property {string} variant - 'default' | 'filter'. O `filter` é o botão de filtro de barra de ferramentas: contornado em azul, largura do conteúdo, lista mais larga que o botão, busca focada ao abrir. Combine com `searchable`, `emptyOptionLabel` e o slot `footer`.
+ * @property {string} emptyOptionLabel - Opção "sem filtro" no topo da lista (seleção única): marcada quando nada está escolhido; ao escolher, `onChange` recebe `""` e o campo volta a mostrar o `placeholder` (o nome do filtro).
+ * @property {any} footer - Rodapé fixo da lista, com ações ("Gerenciar marcadores"). Passe o elemento correspondente (React node ou Vue slot `footer`).
  * @quandoUsar Escolher UM valor de uma lista fechada. O valor selecionado fica visível no campo.
  * @quandoNaoUsar Para escolher VÁRIOS valores — use `MultiSelect`. Para um menu de AÇÕES (editar, excluir, duplicar) em vez de valores, use `Dropdown`. Para 2 a 4 opções mutuamente exclusivas sempre visíveis, use `Radio`.
  */
@@ -77,6 +81,14 @@ export interface SelectProps {
     errorMessage?: string;
     fullWidth?: boolean;
     size?: "sm" | "md" | "lg";
+    /** Onde a lista abre. @default 'bottom' */
+    placement?: "bottom" | "top" | "auto";
+    /** Variante visual. @default 'default' */
+    variant?: "default" | "filter";
+    /** Opção "sem filtro" no topo da lista (seleção única). Escolhê-la chama `onChange("")`. */
+    emptyOptionLabel?: string;
+    /** Rodapé fixo da lista (ações). React node ou slot `footer` no Vue. */
+    footer?: any;
     pagination?: boolean;
     hasMore?: boolean;
     onLoadMore?: () => void;