@1doc/1ds-react 2.9.0 → 2.11.0

package/dist/components/Select/Select.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import './Select.css';
 import { useState, useRef, useEffect } from "react";
 import { faChevronUp, faChevronDown, faMagnifyingGlass, faXmark, faCheck, faTrash, } from "@fortawesome/free-solid-svg-icons";
+import { computePosition, autoUpdate, offset, flip, shift, size, } from "@floating-ui/dom";
 import Text from "../Text/Text";
 import Icon from "../Icon/Icon";
 import Spinner from "../Spinner/Spinner";
@@ -15,6 +16,10 @@ function Select(props) {
     const searchInputRef = useRef(null);
     const outsideWatcherRef = useRef(null);
     const searchTimeoutRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const floatCleanupRef = useRef(null);
+    const latestOpenRef = useRef(false);
+    const latestOpenChangeRef = useRef(null);
     function textoDeApoio() {
         return props.helperText || props.description || "";
     }
@@ -25,6 +30,15 @@ function Select(props) {
         return props.readOnly ? "true" : undefined;
     }
     const [isOpen, setIsOpen] = useState(() => false);
+    const [prepared, setPrepared] = useState(() => false);
+    const [floatMode, setFloatMode] = useState(() => false);
+    const [floatReady, setFloatReady] = useState(() => false);
+    const [floatX, setFloatX] = useState(() => 0);
+    const [floatY, setFloatY] = useState(() => 0);
+    const [floatW, setFloatW] = useState(() => 0);
+    const [floatMaxH, setFloatMaxH] = useState(() => 0);
+    const [listMaxH, setListMaxH] = useState(() => 0);
+    const [alignEnd, setAlignEnd] = useState(() => false);
     const [searchTerm, setSearchTerm] = useState(() => "");
     const [internalSelected, setInternalSelected] = useState(() => Array.isArray(props.defaultValue)
         ? props.defaultValue
@@ -36,6 +50,24 @@ function Select(props) {
     const [shouldFocusTrigger, setShouldFocusTrigger] = useState(() => false);
     const [activeIndex, setActiveIndex] = useState(() => -1);
     const [uid, setUid] = useState(() => "");
+    function opened() {
+        if (props.open !== undefined)
+            return props.open === "" ? true : !!props.open;
+        return isOpen;
+    }
+    function isFilter() {
+        return (props.variant === "filter" ||
+            props.variant === "search" ||
+            props.variant === "combo");
+    }
+    function setOpen(next) {
+        if (next === opened())
+            return;
+        if (props.open === undefined)
+            setIsOpen(next);
+        if (props.onOpenChange)
+            props.onOpenChange(next);
+    }
     function baseId() {
         return props.id || uid;
     }
@@ -48,6 +80,9 @@ function Select(props) {
     function isInvalid() {
         return !!props.invalid || !!props.errorMessage;
     }
+    function ariaRequiredText() {
+        return props.required ? "true" : undefined;
+    }
     function ariaInvalidText() {
         return isInvalid() ? "true" : undefined;
     }
@@ -116,6 +151,28 @@ function Select(props) {
         }
         return String(currentVal[0]);
     }
+    function opcaoDoGatilho() {
+        if (props.multiple || isPlaceholder())
+            return undefined;
+        return selectedOptionsList()[0];
+    }
+    function itemNoGatilho() {
+        return typeof props.item === "function" && !!opcaoDoGatilho();
+    }
+    function conteudoDoItemNoGatilho() {
+        return props.item({
+            optionData: opcaoDoGatilho(),
+            option: opcaoDoGatilho(),
+        });
+    }
+    function triggerSwatchColor() {
+        if (props.triggerSwatch)
+            return props.triggerSwatch;
+        if (props.multiple || isPlaceholder())
+            return undefined;
+        const escolhida = selectedOptionsList()[0];
+        return escolhida ? escolhida.color : undefined;
+    }
     function isPlaceholder() {
         const currentVal = props.value !== undefined
             ? Array.isArray(props.value)
@@ -162,14 +219,20 @@ function Select(props) {
     function wrapperClassesList() {
         return [
             "umds-select",
-            `umds-select--${props.size || "md"}`,
+            `umds-select--${props.size || (isFilter() ? "sm" : "md")}`,
+            isFilter() && !isPlaceholder() ? "umds-select--has-value" : "",
             props.fullWidth ? "umds-select--full-width" : "",
             props.disabled ? "umds-select--disabled" : "",
             props.readOnly ? "umds-select--readonly" : "",
             props.invalid ? "umds-select--invalid" : "",
-            isOpen ? "umds-select--open" : "",
+            opened() ? "umds-select--open" : "",
             props.searchVariant === "inline" ? "umds-select--search-inline" : "",
-            props.variant === "filter" ? "umds-select--filter" : "",
+            isFilter() ? "umds-select--filter" : "",
+            props.variant === "search" ? "umds-select--filter-search" : "",
+            props.variant === "combo" ? "umds-select--filter-combo" : "",
+            opened() && floatMode ? "umds-select--floating" : "",
+            opened() && alignEnd ? "umds-select--list-end" : "",
+            props.triggerIcon ? "umds-select--has-trigger-icon" : "",
             opensUp && props.searchVariant !== "inline"
                 ? "umds-select--placement-top"
                 : "",
@@ -198,7 +261,7 @@ function Select(props) {
         return props.label && !baseId() ? props.label : undefined;
     }
     function activeDescendantText() {
-        if (!isOpen || activeIndex < 0 || !baseId())
+        if (!opened() || activeIndex < 0 || !baseId())
             return undefined;
         return baseId() + "-option-" + activeIndex;
     }
@@ -208,8 +271,18 @@ function Select(props) {
     function removeItemAriaLabelText(label) {
         return (props.removeAriaLabel || "Remover") + " " + label;
     }
-    function shouldOpenUp() {
+    function insideDialog() {
+        if (typeof document === "undefined" ||
+            !triggerRef.current ||
+            props.searchVariant === "inline")
+            return false;
+        if (typeof triggerRef.current.closest !== "function")
+            return false;
+        return !!triggerRef.current.closest('[role="dialog"], [aria-modal="true"]');
+    }
+    function shouldOpenUp(flutuante) {
         const pedido = props.placement || "bottom";
+        setListMaxH(0);
         if (pedido === "top")
             return true;
         if (pedido !== "auto")
@@ -217,32 +290,140 @@ function Select(props) {
         if (typeof window === "undefined" || !triggerRef.current)
             return false;
         const caixa = triggerRef.current.getBoundingClientRect();
-        const abaixo = window.innerHeight - caixa.bottom;
-        const acima = caixa.top;
+        let topo = 0;
+        let base = window.innerHeight;
+        if (!flutuante) {
+            let pai = triggerRef.current.parentElement;
+            while (pai && pai !== document.body) {
+                const corte = window.getComputedStyle(pai).overflowY;
+                if (corte === "auto" ||
+                    corte === "scroll" ||
+                    corte === "hidden" ||
+                    corte === "clip") {
+                    const area = pai.getBoundingClientRect();
+                    topo = Math.max(topo, area.top);
+                    base = Math.min(base, area.bottom);
+                }
+                pai = pai.parentElement;
+            }
+        }
+        const abaixo = base - caixa.bottom;
+        const acima = caixa.top - topo;
         const opcoes = filteredOptionsList().length;
         const estimada = Math.min(300, opcoes * 36 + 8 + (props.searchable ? 44 : 0) + (props.footer ? 44 : 0));
-        return abaixo < estimada && acima > abaixo;
+        const sobe = abaixo < estimada && acima > abaixo;
+        const espaco = (sobe ? acima : abaixo) - 8;
+        if (espaco < 300)
+            setListMaxH(Math.max(96, Math.floor(espaco)));
+        return sobe;
+    }
+    function prepareOpen() {
+        setPrepared(true);
+        // Local: no React gerado o setState é assíncrono e o estado leria STALE.
+        const flutuante = insideDialog();
+        setFloatMode(flutuante);
+        setFloatReady(false);
+        setAlignEnd(false);
+        setOpensUp(shouldOpenUp(flutuante));
+        // Abre com a opção já selecionada ativa (padrão combobox).
+        setActiveIndex(filteredOptionsList().findIndex((opt) => isOptionSelected(opt.value)));
+        if (props.searchable &&
+            (props.autoFocusSearch || props.searchVariant === "inline" || isFilter())) {
+            setShouldFocusSearch(true);
+        }
+    }
+    function updateFloat() {
+        if (!triggerRef.current || !dropdownRef.current)
+            return;
+        computePosition(triggerRef.current, dropdownRef.current, {
+            strategy: "fixed",
+            placement: opensUp ? "top-start" : "bottom-start",
+            middleware: [
+                offset(4),
+                flip({
+                    fallbackStrategy: "bestFit",
+                }),
+                // Perto da borda da janela, a lista desliza para dentro (8px de respiro).
+                shift({
+                    padding: 8,
+                }),
+                size({
+                    apply({ availableHeight, rects }) {
+                        setFloatW(rects.reference.width);
+                        setFloatMaxH(Math.max(96, Math.min(300, Math.floor(availableHeight - 8))));
+                    },
+                }),
+            ],
+        }).then((posicao) => {
+            setFloatX(Math.round(posicao.x));
+            setFloatY(Math.round(posicao.y));
+            setFloatReady(true);
+        });
+    }
+    function listMinWidthCss() {
+        const pedida = props.listMinWidth;
+        if (!isFilter() || pedida === undefined || pedida === null || pedida === "")
+            return "";
+        return typeof pedida === "number" ? pedida + "px" : String(pedida);
+    }
+    function keepInWindow() {
+        if (typeof window === "undefined" || !dropdownRef.current)
+            return;
+        if (!opened() || !isFilter() || floatMode || alignEnd)
+            return;
+        const caixa = dropdownRef.current.getBoundingClientRect();
+        // 8px de respiro até a borda: o degrau nano do DS.
+        if (caixa.right > window.innerWidth - 8)
+            setAlignEnd(true);
+    }
+    function dropdownStyle() {
+        if (props.searchVariant === "inline")
+            return {
+                top: "0",
+            };
+        if (opened() && floatMode) {
+            const estilo = {
+                position: "fixed",
+                top: "0",
+                left: "0",
+                bottom: "auto",
+                transform: "translate(" + floatX + "px, " + floatY + "px)",
+                visibility: floatReady ? "visible" : "hidden",
+            };
+            if (isFilter()) {
+                estilo.minWidth =
+                    "max(" +
+                        floatW +
+                        "px, " +
+                        (listMinWidthCss() || "calc(var(--umds-primitive-spacing-xxl) * 3)") +
+                        ")";
+            }
+            else {
+                estilo.width = floatW + "px";
+            }
+            if (floatMaxH)
+                estilo.maxHeight = floatMaxH + "px";
+            return estilo;
+        }
+        const estilo = {};
+        if (listMaxH)
+            estilo.maxHeight = listMaxH + "px";
+        if (listMinWidthCss())
+            estilo.minWidth = "max(100%, " + listMinWidthCss() + ")";
+        return estilo;
     }
     function toggle() {
         if (props.disabled || props.readOnly)
             return;
-        // NUNCA ler isOpen logo após atribuí-lo: no React gerado o
-        // setState é assíncrono e a leitura vem STALE. Decidir os ramos pela
-        // variável local (mesmo padrão do toggle do Switch).
-        const next = !isOpen;
-        setIsOpen(next);
+        // Decide pela variável local: no React gerado o setState é assíncrono e
+        // ler o estado logo após atribuí-lo vem STALE.
+        const next = !opened();
+        setOpen(next);
         if (next) {
-            setOpensUp(shouldOpenUp());
-            // Abre com a opção já selecionada ativa (padrão combobox).
-            setActiveIndex(filteredOptionsList().findIndex((opt) => isOptionSelected(opt.value)));
-            if (props.searchable &&
-                (props.autoFocusSearch ||
-                    props.searchVariant === "inline" ||
-                    props.variant === "filter")) {
-                setShouldFocusSearch(true);
-            }
+            prepareOpen();
         }
         else {
+            setPrepared(false);
             setActiveIndex(-1);
         }
     }
@@ -275,7 +456,8 @@ function Select(props) {
         }
     }
     function closeSearch() {
-        setIsOpen(false);
+        setOpen(false);
+        setPrepared(false);
         setSearchTerm("");
         setActiveIndex(-1);
         if (props.onSearchChange) {
@@ -298,7 +480,7 @@ function Select(props) {
             return;
         const key = event.key;
         if (key === "Escape") {
-            if (isOpen) {
+            if (opened()) {
                 event.preventDefault();
                 closeSearch();
             }
@@ -311,7 +493,7 @@ function Select(props) {
             return;
         }
         event.preventDefault();
-        if (!isOpen) {
+        if (!opened()) {
             toggle();
             return;
         }
@@ -377,7 +559,8 @@ function Select(props) {
         else {
             newValue = option.value;
             setInternalSelected([newValue]);
-            setIsOpen(false);
+            setOpen(false);
+            setPrepared(false);
             setActiveIndex(-1);
         }
         if (props.onChange) {
@@ -428,12 +611,23 @@ function Select(props) {
     useEffect(() => {
         if (!props.id)
             setUid(gerarId("umds-select"));
+        // No Vue o onUpdate só roda depois de uma atualização: a lista que já nasce
+        // aberta (open controlado) é preparada aqui.
+        latestOpenRef.current = opened();
+        latestOpenChangeRef.current = props.onOpenChange;
+        if (opened() && !prepared)
+            prepareOpen();
+        keepInWindow();
         if (typeof document === "undefined")
             return;
         const handleClickOutside = (event) => {
             if (selectRef.current &&
                 !selectRef.current.contains(event.target)) {
+                // Só avisa quando a lista está aberta: o ouvinte vive no document inteiro.
+                if (latestOpenRef.current && latestOpenChangeRef.current)
+                    latestOpenChangeRef.current(false);
                 setIsOpen(false);
+                setPrepared(false);
                 setActiveIndex(-1);
             }
         };
@@ -441,7 +635,30 @@ function Select(props) {
         document.addEventListener("mousedown", handleClickOutside);
     }, []);
     useEffect(() => {
-        if (isOpen && shouldFocusSearch) {
+        // Guarda o estado visto neste render para o ouvinte de clique fora.
+        latestOpenRef.current = opened();
+        latestOpenChangeRef.current = props.onOpenChange;
+        // Aberta de fora (open controlado): aplica os efeitos de abrir uma vez.
+        if (opened() && !prepared)
+            prepareOpen();
+        if (!opened() && prepared)
+            setPrepared(false);
+        if (!opened() && alignEnd)
+            setAlignEnd(false);
+        keepInWindow();
+        // Lista flutuante: segue o gatilho (scroll, resize) enquanto aberta.
+        if (opened() &&
+            floatMode &&
+            triggerRef.current &&
+            dropdownRef.current &&
+            !floatCleanupRef.current) {
+            floatCleanupRef.current = autoUpdate(triggerRef.current, dropdownRef.current, () => updateFloat());
+        }
+        if ((!opened() || !floatMode) && floatCleanupRef.current) {
+            floatCleanupRef.current();
+            floatCleanupRef.current = null;
+        }
+        if (opened() && shouldFocusSearch) {
             // Retry a few times if ref is not yet ready (though onUpdate usually implies rendered)
             // We use a small timeout to ensure browser paints or simply check ref
             if (searchInputRef.current) {
@@ -450,7 +667,7 @@ function Select(props) {
             }
         }
         // Devolve o foco ao trigger após fechar por Esc/seleção via teclado.
-        if (!isOpen && shouldFocusTrigger) {
+        if (!opened() && shouldFocusTrigger) {
             if (triggerRef.current) {
                 triggerRef.current.focus();
                 setShouldFocusTrigger(false);
@@ -459,6 +676,10 @@ function Select(props) {
     });
     useEffect(() => {
         return () => {
+            if (floatCleanupRef.current) {
+                floatCleanupRef.current();
+                floatCleanupRef.current = null;
+            }
             // Cancela o debounce pendente da busca — evita callback após unmount.
             if (searchTimeoutRef.current) {
                 clearTimeout(searchTimeoutRef.current);
@@ -472,13 +693,11 @@ function Select(props) {
             }
         };
     }, []);
-    return (_jsxs("div", { ref: selectRef, className: wrapperClassesList(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-select__label", id: labelIdText(), children: [props.label, props.required ? (_jsx("span", { className: "umds-select__required", children: " *" })) : null] })) : null, _jsxs("div", { className: "umds-select__container", children: [!(isOpen && props.searchVariant === "inline") ? (_jsxs("div", { role: "combobox", "aria-haspopup": "listbox", className: "umds-select__trigger", ref: triggerRef, onClick: (event) => toggle(), onKeyDown: (event) => handleTriggerKeyDown(event), "aria-readonly": ariaReadonly(), "aria-expanded": isOpen, "aria-controls": listboxIdText(), "aria-activedescendant": activeDescendantText(), "aria-labelledby": comboboxLabelledBy(), "aria-label": comboboxAriaLabel(), "aria-invalid": ariaInvalidText(), "aria-describedby": describedByText(), "aria-disabled": props.disabled ? "true" : undefined, tabIndex: props.disabled ? -1 : 0, children: [_jsxs("div", { className: "umds-select__values", children: [displayLabelText() ? (_jsx(Text, { as: "span", variant: "body2", className: isPlaceholder() ? "umds-select__placeholder" : "", children: displayLabelText() })) : null, props.multiple &&
+    return (_jsxs("div", { ref: selectRef, className: wrapperClassesList(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-select__label", id: labelIdText(), children: [props.label, props.required ? (_jsx("span", { className: "umds-select__required", children: " *" })) : null] })) : null, _jsxs("div", { className: "umds-select__container", children: [!(opened() && props.searchVariant === "inline") ? (_jsxs("div", { role: "combobox", "aria-haspopup": "listbox", className: "umds-select__trigger", ref: triggerRef, onClick: (event) => toggle(), onKeyDown: (event) => handleTriggerKeyDown(event), "aria-readonly": ariaReadonly(), "aria-expanded": opened(), "aria-controls": listboxIdText(), "aria-activedescendant": activeDescendantText(), "aria-labelledby": comboboxLabelledBy(), "aria-label": comboboxAriaLabel(), "aria-invalid": ariaInvalidText(), "aria-required": ariaRequiredText(), "aria-describedby": describedByText(), "aria-disabled": props.disabled ? "true" : undefined, tabIndex: props.disabled ? -1 : 0, children: [_jsxs("div", { className: "umds-select__values", children: [props.triggerIcon ? (_jsx("span", { "aria-hidden": "true", className: "umds-select__trigger-icon", children: _jsx(Icon, { variant: "inherit", customSize: "12px", icon: props.triggerIcon }) })) : null, triggerSwatchColor() ? (_jsx("span", { "aria-hidden": "true", className: "umds-select__swatch", style: {
+                                            background: triggerSwatchColor(),
+                                        } })) : null, itemNoGatilho() ? (_jsx("span", { className: "umds-select__trigger-item", children: conteudoDoItemNoGatilho() })) : null, displayLabelText() && !itemNoGatilho() ? (_jsx(Text, { as: "span", variant: "body2", className: isPlaceholder() ? "umds-select__placeholder" : "", children: displayLabelText() })) : null, props.multiple &&
                                         props.selectionDisplay === "tags" &&
-                                        selectedOptionsList().length > 0 ? (_jsx("div", { className: "umds-select__tags", children: selectedOptionsList()?.map((opt) => (_jsx(Tag, { size: "sm", label: opt.label, closable: true, disabled: props.disabled, onClose: (e) => removeValue(opt.value, e) }, opt.value))) })) : null] }), _jsxs("div", { className: "umds-select__actions", children: [props.loading ? _jsx(Spinner, { size: "sm", variant: "secondary" }) : null, _jsx("div", { className: "umds-select__arrow", children: _jsx(Icon, { size: "sm", icon: isOpen ? faChevronUp : faChevronDown }) })] })] })) : null, isOpen ? (_jsxs("div", { className: "umds-select__dropdown", style: props.searchVariant === "inline"
-                            ? {
-                                top: "0",
-                            }
-                            : {}, onKeyDown: (event) => handleDropdownKeyDown(event), children: [props.searchable ? (_jsxs("div", { className: "umds-select__search-container", children: [_jsx("div", { className: "umds-select__search-icon", children: _jsx(Icon, { size: "sm", icon: faMagnifyingGlass }) }), _jsx("input", { type: "text", className: "umds-select__search-input", ref: searchInputRef, placeholder: props.searchPlaceholder || "Buscar...", "aria-label": props.searchAriaLabel || "Buscar", value: searchTerm, onInput: (e) => handleSearch(e) }), props.searchVariant === "inline" ? (_jsx("button", { type: "button", className: "umds-select__search-close", "aria-label": props.closeSearchAriaLabel || "Fechar busca", onClick: (event) => closeSearch(), onKeyDown: (event) => handleSearchCloseKeyDown(event), children: _jsx(Icon, { size: "sm", icon: faXmark }) })) : null] })) : null, _jsxs("div", { role: "listbox", className: "umds-select__options", id: listboxIdText(), "aria-multiselectable": props.multiple ? "true" : undefined, onScroll: (e) => onScrollList(e), children: [filteredOptionsList().length === 0 && !props.loading ? (_jsx("div", { className: "umds-select__no-options", children: _jsx(Text, { variant: "body2", color: "secondary", children: props.emptyLabel || "Nenhum item encontrado" }) })) : null, filteredOptionsList()?.map((option, index) => (_jsxs("div", { role: "option", id: optionIdText(index), "aria-selected": isOptionSelected(option.value), onClick: (event) => selectOption(option), className: [
+                                        selectedOptionsList().length > 0 ? (_jsx("div", { className: "umds-select__tags", children: selectedOptionsList()?.map((opt) => (_jsx(Tag, { size: "sm", label: opt.label, closable: true, disabled: props.disabled, onClose: (e) => removeValue(opt.value, e) }, opt.value))) })) : null] }), _jsxs("div", { className: "umds-select__actions", children: [props.loading ? _jsx(Spinner, { size: "sm", variant: "secondary" }) : null, _jsx("div", { className: "umds-select__arrow", children: _jsx(Icon, { size: "sm", icon: opened() ? faChevronUp : faChevronDown }) })] })] })) : null, opened() ? (_jsxs("div", { className: "umds-select__dropdown", ref: dropdownRef, style: dropdownStyle(), onKeyDown: (event) => handleDropdownKeyDown(event), children: [props.searchable ? (_jsxs("div", { className: "umds-select__search-container", children: [_jsx("div", { className: "umds-select__search-icon", children: _jsx(Icon, { size: "sm", icon: faMagnifyingGlass }) }), _jsx("input", { type: "text", className: "umds-select__search-input", ref: searchInputRef, placeholder: props.searchPlaceholder || "Buscar...", "aria-label": props.searchAriaLabel || "Buscar", value: searchTerm, onInput: (e) => handleSearch(e) }), props.searchVariant === "inline" ? (_jsx("button", { type: "button", className: "umds-select__search-close", "aria-label": props.closeSearchAriaLabel || "Fechar busca", onClick: (event) => closeSearch(), onKeyDown: (event) => handleSearchCloseKeyDown(event), children: _jsx(Icon, { size: "sm", icon: faXmark }) })) : null] })) : null, _jsxs("div", { role: "listbox", className: "umds-select__options", id: listboxIdText(), "aria-multiselectable": props.multiple ? "true" : undefined, onScroll: (e) => onScrollList(e), children: [filteredOptionsList().length === 0 && !props.loading ? (_jsx("div", { className: "umds-select__no-options", children: _jsx(Text, { variant: "body2", color: "secondary", children: props.emptyLabel || "Nenhum item encontrado" }) })) : null, filteredOptionsList()?.map((option, index) => (_jsxs("div", { role: "option", id: optionIdText(index), "aria-selected": isOptionSelected(option.value), onClick: (event) => selectOption(option), className: [
                                             "umds-select__option",
                                             isOptionSelected(option.value)
                                                 ? "umds-select__option--selected"
@@ -486,7 +705,9 @@ function Select(props) {
                                             index === activeIndex ? "umds-select__option--active" : "",
                                         ]
                                             .filter(Boolean)
-                                            .join(" "), children: [props.multiple ? (_jsx("div", { className: "umds-select__option-checkbox", children: _jsx(Checkbox, { checked: isOptionSelected(option.value), decorative: true }) })) : null, _jsx("div", { className: "umds-select__option-content", children: _jsx(_Fragment, { children: props.item || (_jsx(Text, { variant: "body2", children: option.label })) }) }), !props.multiple && isOptionSelected(option.value) ? (_jsx("div", { className: "umds-select__option-check", children: _jsx(Icon, { size: "sm", icon: faCheck }) })) : null] }, option.value))), props.loading && props.pagination ? (_jsxs("div", { className: "umds-select__loading-more", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { variant: "caption", children: props.loadingLabel || "Carregando mais..." })] })) : null] }), props.footer ? (_jsx("div", { className: "umds-select__footer", children: _jsx(_Fragment, { children: props.footer }) })) : null] })) : null] }), props.name ? (_jsx("input", { type: "hidden", name: props.name, value: formValue() || "" })) : null, props.errorMessage ? (_jsx(Text, { variant: "caption", color: "negative", className: "umds-select__error-message", id: errorIdText(), children: props.errorMessage })) : null, mostraApoio() ? (_jsx(Text, { variant: "caption", color: "secondary", className: "umds-select__description", id: helperIdText(), children: textoDeApoio() })) : null, props.multiple &&
+                                            .join(" "), children: [props.multiple ? (_jsx("div", { className: "umds-select__option-checkbox", children: _jsx(Checkbox, { checked: isOptionSelected(option.value), decorative: true }) })) : null, option.color ? (_jsx("span", { "aria-hidden": "true", className: "umds-select__swatch", style: {
+                                                    background: option.color,
+                                                } })) : null, _jsx("div", { className: "umds-select__option-content", children: _jsx(_Fragment, { children: typeof props.item === "function" ? props.item({ optionData: option, option }) : props.item || (_jsx(Text, { variant: "body2", children: option.label })) }) }), !props.multiple && isOptionSelected(option.value) ? (_jsx("div", { className: "umds-select__option-check", children: _jsx(Icon, { size: "sm", icon: faCheck }) })) : null] }, option.value))), props.loading && props.pagination ? (_jsxs("div", { className: "umds-select__loading-more", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { variant: "caption", children: props.loadingLabel || "Carregando mais..." })] })) : null] }), props.footer ? (_jsx("div", { className: "umds-select__footer", children: _jsx(_Fragment, { children: props.footer }) })) : null] })) : null] }), props.name ? (_jsx("input", { type: "hidden", name: props.name, value: formValue() || "" })) : null, props.errorMessage ? (_jsx(Text, { variant: "caption", color: "negative", className: "umds-select__error-message", id: errorIdText(), children: props.errorMessage })) : null, mostraApoio() ? (_jsx(Text, { variant: "caption", color: "secondary", className: "umds-select__description", id: helperIdText(), children: textoDeApoio() })) : null, props.multiple &&
                 props.selectionDisplay === "list" &&
                 selectedOptionsList().length > 0 ? (_jsx("div", { className: "umds-select__selected-list", children: selectedOptionsList()?.map((opt) => (_jsxs("div", { className: "umds-select__selected-list-item", children: [_jsx(Text, { variant: "body2", children: opt.label }), _jsx("button", { type: "button", className: "umds-select__list-remove", "aria-label": removeItemAriaLabelText(opt.label), onClick: (e) => removeValue(opt.value, e), children: _jsx(Icon, { size: "sm", icon: faTrash }) })] }, opt.value))) })) : null] }));
 }

package/dist/components/StatCard/StatCard.css

@@ -225,3 +225,76 @@
 .umds-stat-card--rotulo-topo:not(:has(.umds-stat-card__icone)) .umds-stat-card__valor {
   grid-column: 1 / -1;
 }
+
+/* ── valueTone: cor do número principal (variantes escuras: contraste AA no branco) ── */
+.umds-stat-card--valor-primary .umds-stat-card__valor {
+  color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-stat-card--valor-positive .umds-stat-card__valor {
+  color: var(--umds-semantic-color-feedback-positive-dark);
+}
+
+.umds-stat-card--valor-negative .umds-stat-card__valor {
+  color: var(--umds-semantic-color-feedback-negative-dark);
+}
+
+.umds-stat-card--valor-info .umds-stat-card__valor {
+  color: var(--umds-semantic-color-feedback-info-dark);
+}
+
+/* ── Segunda medida (secondaryValue, secondaryLabel) ──
+   Menor, à direita da principal, separada por um filete. Vem depois do corpo no HTML. */
+.umds-stat-card__secundaria {
+  display: flex;
+  flex-direction: column;
+  gap: var(--umds-primitive-spacing-micro);
+  margin-left: auto;
+  padding-left: var(--umds-primitive-spacing-xxxs);
+  border-left: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  text-align: right;
+}
+
+.umds-stat-card--centro .umds-stat-card__secundaria {
+  margin-left: 0;
+  padding-left: 0;
+  border-left: none;
+  align-items: center;
+  text-align: center;
+}
+
+.umds-stat-card__valor-secundario {
+  font-size: var(--umds-primitive-font-size-sm); /* 20px */
+  font-weight: var(--umds-primitive-font-weight-bold);
+  line-height: 1.15;
+  font-variant-numeric: tabular-nums;
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+.umds-stat-card__rotulo-secundario {
+  font-size: var(--umds-primitive-font-size-xxxs);
+  color: var(--umds-semantic-color-neutral-dark-down);
+  line-height: 1.4;
+}
+
+/* Com o rótulo no topo a grade ganha uma terceira coluna para a segunda medida. */
+.umds-stat-card--rotulo-topo.umds-stat-card--com-secundaria {
+  grid-template-columns: auto 1fr auto;
+}
+
+.umds-stat-card--rotulo-topo .umds-stat-card__secundaria {
+  grid-column: 3;
+  grid-row: 2;
+}
+
+.umds-stat-card--rotulo-topo.umds-stat-card--com-secundaria:not(:has(.umds-stat-card__icone)) .umds-stat-card__valor {
+  grid-column: 1 / 3;
+}
+
+/* ── size="sm": o KPI de 18px/800 ──
+   18px não está na escala de fonte do DS (16 e 20): é a medida dos KPIs da home do CrisDoc, mantida como literal.
+   Dois seletores de classe para vencer o 32/800 do `labelPosition="top"` sem depender da ordem. */
+.umds-stat-card.umds-stat-card--sm .umds-stat-card__valor {
+  font-size: 1.125rem; /* 18px */
+  font-weight: var(--umds-primitive-font-weight-extrabold);
+}

package/dist/components/StatCard/StatCard.d.ts

@@ -22,7 +22,11 @@ import './StatCard.css';
  * @property {string} trendIntent - Se a variação é boa ou ruim (cor), independente da direção: 'positive' | 'negative' | 'neutral'
  * @property {string} trendLabel - Texto da variação (ex.: '12% em relação ao mês anterior')
  * @property {string} description - Texto auxiliar abaixo do rótulo
+ * @property {string} size - 'md' (padrão) | 'sm': o `sm` leva o número a 18px/800, o tamanho dos KPIs da home do CrisDoc (fora da escala de fonte do DS, que vai de 16 a 20). Vale também com `labelPosition="top"`.
  * @property {string} labelPosition - Onde o rótulo aparece: 'bottom' (padrão, embaixo do número) | 'top' (no topo do cartão, acima do ícone e do número, com o número em 32/800). No HTML o número continua vindo antes do rótulo, então o leitor de tela anuncia igual.
+ * @property {string|number} secondaryValue - Segunda medida do cartão, menor, à direita da principal ("22,31%" do setor e "14,11%" do geral). Vem depois do resto no HTML. `0` aparece; vazio e ausente não.
+ * @property {string} secondaryLabel - O que a segunda medida significa ("Geral")
+ * @property {string} valueTone - Cor do número principal: 'default' (cor do texto) | 'primary' | 'positive' | 'negative' | 'info'. Usa as variantes escuras (contraste AA sobre o branco). Não confunda com `variant`, que pinta o ícone e a variação.
  * @property {string} infoTooltip - Texto de ajuda: mostra um ⓘ ao lado do rótulo com um Tooltip escuro. É um botão dentro do cartão; com `onClick` no cartão, evite (botão dentro de botão).
  * @property {string} infoLabel - Nome acessível do ⓘ. Troque para traduzir. Padrão: "Mais informações".
  * @property {string} align - Alinhamento do conteúdo
@@ -66,6 +70,14 @@ export interface StatCardProps {
      * @default 'bottom'
      */
     labelPosition?: "bottom" | "top";
+    /** Segunda medida, menor, à direita da principal. 0 aparece; vazio e ausente não. */
+    secondaryValue?: string | number;
+    /** O que a segunda medida significa. */
+    secondaryLabel?: string;
+    /** Tamanho do número: `sm` é o KPI de 18px/800. @default 'md' */
+    size?: "md" | "sm";
+    /** Cor do número principal. @default 'default' */
+    valueTone?: "default" | "primary" | "positive" | "negative" | "info";
     /**
      * Texto de ajuda: mostra o ⓘ ao lado do rótulo, com um Tooltip escuro. É um
      * botão focável dentro do cartão; com `onClick` no cartão, evite.

package/dist/components/StatCard/StatCard.js

@@ -10,7 +10,12 @@ function StatCard(props) {
             "umds-stat-card",
             `umds-stat-card--${props.variant || "neutral"}`,
             props.align === "center" ? "umds-stat-card--centro" : "",
+            props.size === "sm" ? "umds-stat-card--sm" : "",
             props.labelPosition === "top" ? "umds-stat-card--rotulo-topo" : "",
+            temSecundaria() ? "umds-stat-card--com-secundaria" : "",
+            props.valueTone && props.valueTone !== "default"
+                ? "umds-stat-card--valor-" + props.valueTone
+                : "",
             props.onClick ? "umds-stat-card--acionavel" : "",
             props.className,
         ]
@@ -38,6 +43,11 @@ function StatCard(props) {
             return "↓";
         return "→";
     }
+    function temSecundaria() {
+        return (props.secondaryValue !== undefined &&
+            props.secondaryValue !== null &&
+            props.secondaryValue !== "");
+    }
     function ehAcionavel() {
         return !!props.onClick;
     }
@@ -48,6 +58,6 @@ function StatCard(props) {
         if (props.onClick)
             props.onClick();
     }
-    return (_jsxs("div", { className: classes(), onClick: (event) => aoClicar(), role: ehAcionavel() ? "button" : undefined, tabIndex: ehAcionavel() ? 0 : undefined, children: [props.icon ? (_jsx("span", { className: "umds-stat-card__icone", "aria-hidden": "true", children: _jsx(Icon, { size: "md", variant: "inherit", icon: props.icon }) })) : null, _jsxs("div", { className: "umds-stat-card__corpo", children: [_jsx("span", { className: "umds-stat-card__valor", children: props.value }), _jsxs("span", { className: "umds-stat-card__rotulo", children: [props.label, props.infoTooltip ? (_jsx(Tooltip, { variant: "dark", side: "top", content: props.infoTooltip, children: _jsx("button", { type: "button", className: "umds-stat-card__info", "aria-label": props.infoLabel || "Mais informações", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faCircleInfo }) }) })) : null] }), props.description ? (_jsx("span", { className: "umds-stat-card__descricao", children: props.description })) : null, props.trendLabel ? (_jsxs("span", { className: classesDaVariacao(), children: [_jsx("span", { "aria-hidden": "true", children: simboloDaVariacao() }), props.trendLabel] })) : null] })] }));
+    return (_jsxs("div", { className: classes(), onClick: (event) => aoClicar(), role: ehAcionavel() ? "button" : undefined, tabIndex: ehAcionavel() ? 0 : undefined, children: [props.icon ? (_jsx("span", { className: "umds-stat-card__icone", "aria-hidden": "true", children: _jsx(Icon, { size: "md", variant: "inherit", icon: props.icon }) })) : null, _jsxs("div", { className: "umds-stat-card__corpo", children: [_jsx("span", { className: "umds-stat-card__valor", children: props.value }), _jsxs("span", { className: "umds-stat-card__rotulo", children: [props.label, props.infoTooltip ? (_jsx(Tooltip, { variant: "dark", side: "top", content: props.infoTooltip, children: _jsx("button", { type: "button", className: "umds-stat-card__info", "aria-label": props.infoLabel || "Mais informações", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faCircleInfo }) }) })) : null] }), props.description ? (_jsx("span", { className: "umds-stat-card__descricao", children: props.description })) : null, props.trendLabel ? (_jsxs("span", { className: classesDaVariacao(), children: [_jsx("span", { "aria-hidden": "true", children: simboloDaVariacao() }), props.trendLabel] })) : null] }), temSecundaria() ? (_jsxs("div", { className: "umds-stat-card__secundaria", children: [_jsx("span", { className: "umds-stat-card__valor-secundario", children: props.secondaryValue }), props.secondaryLabel ? (_jsx("span", { className: "umds-stat-card__rotulo-secundario", children: props.secondaryLabel })) : null] })) : null] }));
 }
 export default StatCard;

package/dist/components/Tabs/Tabs.css

@@ -93,6 +93,17 @@
     white-space: nowrap;
 }
 
+/* ============================
+   Densidade compacta (density="compact" no Tabs)
+   Altura mínima de 40px (o degrau sm do DS) e padding vertical de 8px: com o texto de 14px e a barra de
+   3px, a aba fica nos 40. Só o padding vertical (padding-block), para não desfazer o espaço do × da aba
+   fechável. O contador em pílula não muda: cinza na aba inativa e azul só na ativa.
+   ============================ */
+.umds-tabs--compact .umds-tabs__tab {
+    min-height: var(--umds-primitive-spacing-sm); /* 40px */
+    padding-block: var(--umds-primitive-spacing-nano);
+}
+
 /* ============================
    Label
    ============================ */

package/dist/components/Tabs/Tabs.d.ts

@@ -14,6 +14,13 @@ export interface TabsProps {
     onChange?: (index: string) => void;
     /** Label de acessibilidade para o tablist */
     ariaLabel?: string;
+    /**
+     * Densidade das abas: `compact` leva a altura mínima de 48px a 40px (padding vertical de 8px), para barras
+     * de abas dentro de uma tela (o CrisDoc usa 40). O contador em pílula não muda: cinza na aba inativa e azul
+     * só na ativa, nas duas densidades.
+     * @default 'default'
+     */
+    density?: "default" | "compact";
     /**
      * Identificador estável usado como base dos ids acessíveis
      * (`{id}-tab-{index}` / `{id}-panel-{index}`). Passe o MESMO id no

package/dist/components/Tabs/Tabs.js

@@ -6,7 +6,13 @@ import Icon from "../Icon/Icon";
 import TabsContext from "./tabs.context";
 function Tabs(props) {
     function classes() {
-        return ["umds-tabs", props.className].filter(Boolean).join(" ");
+        return [
+            "umds-tabs",
+            props.density === "compact" ? "umds-tabs--compact" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
     }
     function barClasses() {
         return ["umds-tabs__bar", props.onAdd ? "umds-tabs__bar--com-add" : ""]