@1doc/1ds-react 2.9.0 → 2.10.0

package/dist/components/Select/Select.css

@@ -191,10 +191,16 @@
   width: 100%;
 }
 
+/* Fundo branco: o azul-claro do gatilho só vem depois de escolhido um valor (`--has-value`,
+   abaixo), que é quando o filtro está recortando a lista. O tamanho padrão é o sm (32px). */
 .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-background-white);
+}
+
+.umds-select--filter.umds-select--has-value .umds-select__trigger {
   background-color: var(--umds-semantic-color-primary-light);
 }
 
@@ -212,6 +218,11 @@
   font-weight: var(--umds-primitive-font-weight-semibold);
 }
 
+/* Fonte de 12px no filtro pequeno (o tamanho do CrisDoc); no md segue 14px. */
+.umds-select--filter.umds-select--sm .umds-select__trigger .umds-text {
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+}
+
 .umds-select--filter .umds-select__dropdown {
   /* 240px: três vezes o degrau xxl (80px). Sem token de largura de menu. */
   width: max-content;
@@ -219,6 +230,89 @@
   max-width: calc(100vw - var(--umds-primitive-spacing-xxxs) * 2);
 }
 
+/* ── Variante search: o filtro dentro de uma barra de busca ──
+   Altura de campo e contorno neutro, para ficar ao lado do campo de busca. */
+.umds-select--filter-search .umds-select__trigger {
+  border-color: var(--umds-semantic-field-border-default);
+  background-color: var(--umds-semantic-color-background-white);
+}
+
+.umds-select--filter-search.umds-select--has-value .umds-select__trigger {
+  background-color: var(--umds-semantic-color-background-white);
+}
+
+.umds-select--filter-search .umds-select__trigger:hover:not(.umds-select--disabled .umds-select__trigger) {
+  border-color: var(--umds-semantic-field-border-hover);
+}
+
+.umds-select--filter-search .umds-select__trigger .umds-text,
+.umds-select--filter-search .umds-select__actions {
+  color: var(--umds-semantic-color-neutral-dark-pure);
+  font-weight: var(--umds-primitive-font-weight-regular);
+}
+
+.umds-select--filter-search .umds-select__actions {
+  color: var(--umds-semantic-color-neutral-dark-medium);
+}
+
+/* ── Variante combo: o filtro colado a outro controle ──
+   Sem contorno nem raio próprios: quem desenha a borda é o contêiner do combo. */
+.umds-select--filter-combo .umds-select__trigger {
+  border-color: transparent;
+  border-radius: var(--umds-primitive-border-radius-none);
+  background-color: transparent;
+}
+
+.umds-select--filter-combo.umds-select--has-value .umds-select__trigger {
+  background-color: transparent;
+}
+
+.umds-select--filter-combo .umds-select__trigger:hover:not(.umds-select--disabled .umds-select__trigger) {
+  border-color: transparent;
+  background-color: var(--umds-semantic-color-background-light);
+}
+
+.umds-select--filter-combo .umds-select__trigger .umds-text,
+.umds-select--filter-combo .umds-select__actions {
+  color: var(--umds-semantic-color-neutral-dark-down);
+  font-weight: var(--umds-primitive-font-weight-regular);
+}
+
+/* O foco do combo é o anel do próprio gatilho, por dentro (o contêiner pode cortar o de fora). */
+.umds-select--filter-combo .umds-select__trigger:focus-visible,
+.umds-select--filter-combo.umds-select--open .umds-select__trigger {
+  border-color: transparent;
+  box-shadow: inset 0 0 0 var(--umds-primitive-border-width-thin) var(--umds-semantic-color-primary-pure);
+}
+
+/* ── Ícone e amostra de cor no gatilho (triggerIcon, triggerSwatch) ── */
+.umds-select__trigger-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--umds-semantic-color-neutral-dark-medium);
+}
+
+.umds-select--filter .umds-select__trigger-icon {
+  color: inherit;
+}
+
+.umds-select__swatch {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: var(--umds-primitive-spacing-mini);
+  height: var(--umds-primitive-spacing-mini);
+  border-radius: var(--umds-primitive-border-radius-xs);
+  /* Anel de 1px: amostra clara não some no fundo branco, nem escura no escuro. */
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+}
+
+/* ── Lista flutuante (dentro de diálogo) ──
+   O estilo inline (fixed, translate, largura e altura medidas) vem do componente. */
+.umds-select--floating .umds-select__dropdown {
+  box-sizing: border-box;
+}
+
 /* ── Busca no dropdown ── */
 .umds-select__search-container {
   display: flex;

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

@@ -3,10 +3,13 @@ import './Select.css';
  * Opção exibida na lista do Select.
  * @property {string} label - Texto visível da opção.
  * @property {any} value - Valor associado à opção.
+ * @property {string} color - Cor da opção, um token (`var(--umds-semantic-color-...)` ou `var(--umds-primitive-...)`): uma amostra de 12px antes do texto na lista e, com a opção escolhida (seleção única), no gatilho. Decorativa: o texto diz a opção. Sem a prop, nada muda.
  */
 export interface SelectOption {
     label: string;
     value: string | number;
+    /** Cor da opção (token): amostra antes do texto, e no gatilho quando escolhida. */
+    color?: string;
     [key: string]: any;
 }
 /**
@@ -40,8 +43,14 @@ 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} placement - Onde a lista abre: 'bottom' (padrão) | 'top' | 'auto'. O `auto` mede o espaço da janela E do ancestral que rola ou corta (um corpo de modal, um painel com overflow): abre para cima quando falta espaço embaixo e há mais em cima, e limita a altura da lista ao espaço que sobra.
+ *
+ * Dentro de um diálogo (`role="dialog"` ou `aria-modal`), a lista abre por cima dele: ela passa a `position: fixed`, ancorada no gatilho pelo `@floating-ui/dom`, e não é cortada pelo `overflow` do corpo do modal.
+ * @property {string} variant - 'default' | 'filter' | 'search' | 'combo'. O `filter` é o botão de filtro de barra de ferramentas: 32px (`size="sm"` é o padrão das variantes de filtro) e fonte de 12px, fundo branco com contorno azul (azul-claro só depois de escolhido um valor), largura do conteúdo, lista mais larga que o botão, busca focada ao abrir. `search` é o mesmo filtro dentro de uma barra de busca (altura de campo, contorno neutro). `combo` é o filtro colado a outro controle (sem contorno nem raio próprios: quem desenha a borda é o contêiner). Combine com `searchable`, `emptyOptionLabel` e o slot `footer`.
+ * @property {boolean} open - Abre/fecha a lista de fora (modo controlado). Sem ela, o Select controla o próprio estado. Use com `onOpenChange`: o filtro com ação no rodapé fecha a lista antes de abrir um modal.
+ * @property {function} onOpenChange - Chamado quando a lista pede para abrir ou fechar (clique, teclado, clique fora, Esc, escolha de opção). No modo controlado, é quem decide o novo `open`.
+ * @property {IconProp} triggerIcon - Ícone à esquerda do texto do gatilho (objeto Font Awesome importado). Decorativo.
+ * @property {string} triggerSwatch - Amostra de cor à esquerda do texto do gatilho: um token (`var(--umds-semantic-color-...)`) ou `var(--umds-primitive-...)`. Decorativa; o texto diz a opção.
  * @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.
@@ -83,8 +92,20 @@ export interface SelectProps {
     size?: "sm" | "md" | "lg";
     /** Onde a lista abre. @default 'bottom' */
     placement?: "bottom" | "top" | "auto";
-    /** Variante visual. @default 'default' */
-    variant?: "default" | "filter";
+    /** Variante visual. `filter`, `search` e `combo` são o filtro de barra. @default 'default' */
+    variant?: "default" | "filter" | "search" | "combo";
+    /**
+     * Abre/fecha a lista de fora (modo controlado). `any` de propósito: no Vue uma
+     * prop `boolean` sem valor chega como `false`, e `props.open !== undefined`
+     * ficaria sempre verdadeiro (o Select se acharia controlado e nunca abriria).
+     */
+    open?: any;
+    /** Pede para abrir ou fechar a lista. No modo controlado, o pai decide o novo `open`. */
+    onOpenChange?: (open: boolean) => void;
+    /** Ícone à esquerda do texto do gatilho. */
+    triggerIcon?: IconProp;
+    /** Amostra de cor à esquerda do texto do gatilho (token de cor). */
+    triggerSwatch?: string;
     /** 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. */
@@ -105,5 +126,6 @@ export interface SelectProps {
     ariaLabel?: string;
     className?: string;
 }
+import { IconProp } from "../Icon/Icon";
 declare function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;
 export default Select;

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, 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,14 @@ 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 [searchTerm, setSearchTerm] = useState(() => "");
     const [internalSelected, setInternalSelected] = useState(() => Array.isArray(props.defaultValue)
         ? props.defaultValue
@@ -36,6 +49,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 +79,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 +150,14 @@ function Select(props) {
         }
         return String(currentVal[0]);
     }
+    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 +204,19 @@ 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" : "",
+            props.triggerIcon ? "umds-select--has-trigger-icon" : "",
             opensUp && props.searchVariant !== "inline"
                 ? "umds-select--placement-top"
                 : "",
@@ -198,7 +245,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 +255,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 +274,114 @@ 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);
+        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",
+                }),
+                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 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, calc(var(--umds-primitive-spacing-xxl) * 3))";
+            }
+            else {
+                estilo.width = floatW + "px";
+            }
+            if (floatMaxH)
+                estilo.maxHeight = floatMaxH + "px";
+            return estilo;
+        }
+        return listMaxH
+            ? {
+                maxHeight: listMaxH + "px",
+            }
+            : {};
     }
     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 +414,8 @@ function Select(props) {
         }
     }
     function closeSearch() {
-        setIsOpen(false);
+        setOpen(false);
+        setPrepared(false);
         setSearchTerm("");
         setActiveIndex(-1);
         if (props.onSearchChange) {
@@ -298,7 +438,7 @@ function Select(props) {
             return;
         const key = event.key;
         if (key === "Escape") {
-            if (isOpen) {
+            if (opened()) {
                 event.preventDefault();
                 closeSearch();
             }
@@ -311,7 +451,7 @@ function Select(props) {
             return;
         }
         event.preventDefault();
-        if (!isOpen) {
+        if (!opened()) {
             toggle();
             return;
         }
@@ -377,7 +517,8 @@ function Select(props) {
         else {
             newValue = option.value;
             setInternalSelected([newValue]);
-            setIsOpen(false);
+            setOpen(false);
+            setPrepared(false);
             setActiveIndex(-1);
         }
         if (props.onChange) {
@@ -428,12 +569,22 @@ 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();
         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 +592,27 @@ 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);
+        // 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 +621,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 +630,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 +647,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, displayLabelText() ? (_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 +659,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: 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,68 @@
 .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;
+}