@1doc/1ds-react 2.7.2 → 2.9.0

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;

package/dist/components/Select/Select.js

@@ -8,6 +8,7 @@ import Icon from "../Icon/Icon";
 import Spinner from "../Spinner/Spinner";
 import Checkbox from "../Checkbox/Checkbox";
 import Tag from "../Tag/Tag";
+import { gerarId } from "../../utils/id";
 function Select(props) {
     const selectRef = useRef(null);
     const triggerRef = useRef(null);
@@ -30,10 +31,36 @@ function Select(props) {
         : props.defaultValue !== undefined && props.defaultValue !== null
             ? [props.defaultValue]
             : Array());
+    const [opensUp, setOpensUp] = useState(() => false);
     const [shouldFocusSearch, setShouldFocusSearch] = useState(() => false);
     const [shouldFocusTrigger, setShouldFocusTrigger] = useState(() => false);
     const [activeIndex, setActiveIndex] = useState(() => -1);
-    const [uid, setUid] = useState(() => "umds-select-" + Math.random().toString(36).slice(2, 9));
+    const [uid, setUid] = useState(() => "");
+    function baseId() {
+        return props.id || uid;
+    }
+    function errorIdText() {
+        return baseId() ? baseId() + "-error" : undefined;
+    }
+    function helperIdText() {
+        return baseId() ? baseId() + "-helper" : undefined;
+    }
+    function isInvalid() {
+        return !!props.invalid || !!props.errorMessage;
+    }
+    function ariaInvalidText() {
+        return isInvalid() ? "true" : undefined;
+    }
+    function describedByText() {
+        if (!baseId())
+            return undefined;
+        const partes = Array();
+        if (props.errorMessage)
+            partes.push(baseId() + "-error");
+        if (mostraApoio())
+            partes.push(baseId() + "-helper");
+        return partes.length > 0 ? partes.join(" ") : undefined;
+    }
     function selectedOptionsList() {
         const currentVal = props.value !== undefined
             ? Array.isArray(props.value)
@@ -66,6 +93,12 @@ function Select(props) {
             : internalSelected || [];
         if (currentVal.length === 0)
             return props.placeholder || "Selecione...";
+        // Opção "sem filtro" escolhida: volta a mostrar o nome do filtro.
+        if (props.emptyOptionLabel &&
+            !props.multiple &&
+            currentVal.length === 1 &&
+            currentVal[0] === "")
+            return props.placeholder || "Selecione...";
         if (props.multiple) {
             if (props.selectionDisplay === "tags")
                 return "";
@@ -91,6 +124,11 @@ function Select(props) {
                     ? []
                     : [props.value]
             : internalSelected || [];
+        if (props.emptyOptionLabel &&
+            !props.multiple &&
+            currentVal.length === 1 &&
+            currentVal[0] === "")
+            return true;
         return currentVal.length === 0;
     }
     function formValue() {
@@ -106,9 +144,18 @@ function Select(props) {
     function filteredOptionsList() {
         if (!props.options)
             return [];
+        // Opção "sem filtro" no topo (seleção única), sempre visível sem busca.
+        const vazia = props.emptyOptionLabel && !props.multiple && !searchTerm
+            ? [
+                {
+                    label: props.emptyOptionLabel,
+                    value: "",
+                },
+            ]
+            : [];
         // If it's remote search (onSearchChange provided), we don't filter locally
         if (!props.searchable || !searchTerm || props.onSearchChange)
-            return props.options;
+            return vazia.concat(props.options);
         const term = searchTerm.toLowerCase();
         return props.options.filter((opt) => opt.label.toLowerCase().includes(term));
     }
@@ -122,6 +169,10 @@ function Select(props) {
             props.invalid ? "umds-select--invalid" : "",
             isOpen ? "umds-select--open" : "",
             props.searchVariant === "inline" ? "umds-select--search-inline" : "",
+            props.variant === "filter" ? "umds-select--filter" : "",
+            opensUp && props.searchVariant !== "inline"
+                ? "umds-select--placement-top"
+                : "",
             props.multiple &&
                 props.selectionDisplay === "tags" &&
                 selectedOptionsList().length > 0
@@ -133,22 +184,45 @@ function Select(props) {
             .join(" ");
     }
     function listboxIdText() {
-        return (props.id || uid) + "-listbox";
+        return baseId() ? baseId() + "-listbox" : undefined;
     }
     function labelIdText() {
-        return (props.id || uid) + "-label";
+        return baseId() ? baseId() + "-label" : undefined;
+    }
+    function comboboxLabelledBy() {
+        return props.label && baseId() ? labelIdText() : undefined;
+    }
+    function comboboxAriaLabel() {
+        if (props.ariaLabel)
+            return props.ariaLabel;
+        return props.label && !baseId() ? props.label : undefined;
     }
     function activeDescendantText() {
-        if (!isOpen || activeIndex < 0)
+        if (!isOpen || activeIndex < 0 || !baseId())
             return undefined;
-        return (props.id || uid) + "-option-" + activeIndex;
+        return baseId() + "-option-" + activeIndex;
     }
     function optionIdText(index) {
-        return (props.id || uid) + "-option-" + index;
+        return baseId() ? baseId() + "-option-" + index : undefined;
     }
     function removeItemAriaLabelText(label) {
         return (props.removeAriaLabel || "Remover") + " " + label;
     }
+    function shouldOpenUp() {
+        const pedido = props.placement || "bottom";
+        if (pedido === "top")
+            return true;
+        if (pedido !== "auto")
+            return false;
+        if (typeof window === "undefined" || !triggerRef.current)
+            return false;
+        const caixa = triggerRef.current.getBoundingClientRect();
+        const abaixo = window.innerHeight - caixa.bottom;
+        const acima = caixa.top;
+        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;
+    }
     function toggle() {
         if (props.disabled || props.readOnly)
             return;
@@ -158,10 +232,13 @@ function Select(props) {
         const next = !isOpen;
         setIsOpen(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.autoFocusSearch ||
+                    props.searchVariant === "inline" ||
+                    props.variant === "filter")) {
                 setShouldFocusSearch(true);
             }
         }
@@ -342,9 +419,15 @@ function Select(props) {
                     ? []
                     : [props.value]
             : internalSelected || [];
+        // "Sem filtro" aparece marcada enquanto nada está escolhido.
+        if (props.emptyOptionLabel && !props.multiple && val === "") {
+            return currentVal.length === 0 || currentVal.includes("");
+        }
         return currentVal.includes(val);
     }
     useEffect(() => {
+        if (!props.id)
+            setUid(gerarId("umds-select"));
         if (typeof document === "undefined")
             return;
         const handleClickOutside = (event) => {
@@ -389,7 +472,7 @@ 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": props.label ? labelIdText() : undefined, "aria-label": props.ariaLabel, "aria-invalid": props.invalid ? "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: [!(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 &&
                                         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"
                             ? {
@@ -403,7 +486,7 @@ 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] })] })) : 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", children: props.errorMessage })) : null, mostraApoio() ? (_jsx(Text, { variant: "caption", color: "secondary", className: "umds-select__description", 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, _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/SidePanel/SidePanel.css

@@ -102,7 +102,7 @@
 }
 
 .umds-side-panel__topo {
-  padding: var(--umds-primitive-spacing-xxxs) 10px 10px; /* produto: 16px 10px 10px */
+  padding: var(--umds-primitive-spacing-xxxs) var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-nano); /* 16px 8px 8px (produto: 16px 10px 10px) */
   flex-shrink: 0;
   box-sizing: border-box;
 }
@@ -111,7 +111,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 10px; /* produto: 10px */
+  margin-bottom: var(--umds-primitive-spacing-nano); /* 8px (produto: 10px) */
   min-height: var(--umds-primitive-spacing-xxs); /* 24px */
 }
 
@@ -131,7 +131,7 @@
   padding: 0;
   margin: 0;
   border: none;
-  border-radius: 6px; /* produto: 6px — a escala do DS só tem 8 */
+  border-radius: var(--umds-primitive-border-radius-sm); /* 8px — raio canônico (produto: 6px) */
   background: none;
   color: var(--umds-semantic-color-neutral-dark-medium);
   cursor: pointer;
@@ -151,7 +151,7 @@
 }
 
 .umds-side-panel__corpo {
-  padding: 0 10px var(--umds-primitive-spacing-xxxs); /* produto: 0 10px 16px */
+  padding: 0 var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-xxxs); /* 0 8px 16px (produto: 0 10px 16px) */
   overflow-y: auto;
   min-height: 0;
   flex: 1;

package/dist/components/SidePanelItem/SidePanelItem.css

@@ -12,13 +12,13 @@
 .umds-side-panel-item {
   display: flex;
   align-items: center;
-  gap: 9px; /* produto: 9px — entre os degraus 8 e 12 da escala */
+  gap: var(--umds-primitive-spacing-nano); /* 8px (produto: 9px) */
   width: 100%;
   height: 34px; /* produto: 34px */
   margin: 0;
-  padding: 0 var(--umds-primitive-spacing-nano) 0 9px; /* produto: 0 8px 0 9px */
+  padding: 0 var(--umds-primitive-spacing-nano); /* 0 8px (produto: 0 8px 0 9px) */
   border: none;
-  border-radius: 6px; /* produto: 6px — a escala do DS só tem 8 */
+  border-radius: var(--umds-primitive-border-radius-sm); /* 8px — raio canônico (produto: 6px) */
   background: none;
   color: var(--umds-semantic-color-neutral-dark-down);
   font-family: inherit;
@@ -71,12 +71,14 @@
   white-space: nowrap;
 }
 
-/* Fora do estado ativo o número é mais claro que o nome: é apoio, não rótulo. */
+/* O contador é texto: `neutral-dark-down` (#565656, 7,34:1), a mesma cor do
+   nome. O produto o deixava mais claro (#7D7D7D), mas isso dá 4,11:1 sobre
+   branco e reprova o WCAG 1.4.3 — a hierarquia fica com o tamanho e o peso. */
 .umds-side-panel-item__num {
   flex-shrink: 0;
   font-size: 11px; /* produto: 11px */
   font-weight: var(--umds-primitive-font-weight-bold);
-  color: var(--umds-semantic-color-neutral-dark-medium);
+  color: var(--umds-semantic-color-neutral-dark-down);
 }
 
 .umds-side-panel-item--ativo .umds-side-panel-item__num {

package/dist/components/SidePanelSearch/SidePanelSearch.css

@@ -17,9 +17,9 @@
 .umds-side-panel-search__campo {
   width: 100%;
   height: 30px; /* produto: 30px — entre os degraus 24 e 32 */
-  padding: 0 var(--umds-primitive-spacing-nano) 0 28px; /* produto: 0 8px 0 28px */
+  padding: 0 var(--umds-primitive-spacing-nano) 0 var(--umds-primitive-spacing-xs); /* 0 8px 0 32px — 24px encostaria o texto na lupa (produto: 28px) */
   border: 1px solid var(--umds-semantic-color-neutral-light-down);
-  border-radius: 6px; /* produto: 6px — a escala do DS só tem 8 */
+  border-radius: var(--umds-primitive-border-radius-sm); /* 8px — raio canônico (produto: 6px) */
   background: var(--umds-semantic-color-neutral-light-up);
   color: var(--umds-semantic-color-neutral-dark-pure);
   font-family: inherit;

package/dist/components/SidePanelSection/SidePanelSection.css

@@ -9,10 +9,11 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--umds-primitive-spacing-nano); /* 8px */
-  padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-nano)
-    6px; /* produto: 8px 8px 6px */
-  margin-top: 14px; /* produto: 14px — entre os degraus 12 e 16 */
-  color: var(--umds-semantic-color-neutral-dark-medium);
+  padding: var(--umds-primitive-spacing-nano); /* 8px (produto: 8px 8px 6px) */
+  margin-top: var(--umds-primitive-spacing-mini); /* 12px (produto: 14px) */
+  /* neutral-dark-down: o rótulo é texto de 10px e o #7D7D7D do produto dá
+     4,11:1 sobre branco (WCAG 1.4.3 pede 4,5:1). */
+  color: var(--umds-semantic-color-neutral-dark-down);
   font-size: 10px; /* produto: 10px — abaixo do menor degrau (12) */
   font-weight: var(--umds-primitive-font-weight-bold);
   line-height: 15px; /* produto: 15px */
@@ -27,9 +28,10 @@
   width: 23px; /* produto: 23px */
   height: 20px; /* produto: 20px */
   padding: 0 var(--umds-primitive-spacing-micro) 0 0; /* produto: 0 2px 0 0 */
+  /* stylelint-disable-next-line 1ds/espaco-da-escala -- ajuste óptico: alinha o glifo com a borda do grupo, não é degrau de espaço */
   margin-right: -3px; /* produto: -3px — alinha o glifo com a borda do grupo */
   border: 1px solid transparent;
-  border-radius: 5px; /* produto: 5px */
+  border-radius: var(--umds-primitive-border-radius-sm); /* 8px — raio canônico (produto: 5px) */
   background: none;
   color: inherit;
   cursor: pointer;

package/dist/components/Stack/Stack.css

@@ -55,3 +55,52 @@
 .umds-stack--justify-between { justify-content: space-between; }
 .umds-stack--justify-around  { justify-content: space-around; }
 .umds-stack--justify-evenly  { justify-content: space-evenly; }
+
+/* ── Sem espaço ── */
+.umds-stack--gap-none { gap: 0; }
+
+/* ── Lista: ul/ol sem marcador, margem nem recuo do navegador ── */
+ul.umds-stack,
+ol.umds-stack {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ── Como item de outro Stack/flex ── */
+.umds-stack--grow { flex-grow: 1; }
+.umds-stack--shrink-0 { flex-shrink: 0; }
+.umds-stack--shrink-1 { flex-shrink: 1; }
+
+.umds-stack--basis-auto { flex-basis: auto; }
+.umds-stack--basis-0    { flex-basis: 0; }
+.umds-stack--basis-25   { flex-basis: 25%; }
+.umds-stack--basis-33   { flex-basis: 33.3333%; }
+.umds-stack--basis-50   { flex-basis: 50%; }
+.umds-stack--basis-66   { flex-basis: 66.6667%; }
+.umds-stack--basis-75   { flex-basis: 75%; }
+.umds-stack--basis-100  { flex-basis: 100%; }
+
+/* O padrão do Stack já é min-width: 0; estas duas só tornam a escolha explícita. */
+.umds-stack--min-w-0    { min-width: 0; }
+.umds-stack--min-w-auto { min-width: auto; }
+
+/* ── Overflow: o eixo vem depois do geral, então vence por ordem de cascata ── */
+.umds-stack--overflow-visible { overflow: visible; }
+.umds-stack--overflow-hidden  { overflow: hidden; }
+.umds-stack--overflow-auto    { overflow: auto; }
+.umds-stack--overflow-scroll  { overflow: scroll; }
+
+.umds-stack--overflow-x-visible { overflow-x: visible; }
+.umds-stack--overflow-x-hidden  { overflow-x: hidden; }
+.umds-stack--overflow-x-auto    { overflow-x: auto; }
+.umds-stack--overflow-x-scroll  { overflow-x: scroll; }
+
+.umds-stack--overflow-y-visible { overflow-y: visible; }
+.umds-stack--overflow-y-hidden  { overflow-y: hidden; }
+.umds-stack--overflow-y-auto    { overflow-y: auto; }
+.umds-stack--overflow-y-scroll  { overflow-y: scroll; }
+
+/* ── Dimensão ── */
+.umds-stack--full-height { height: 100%; }
+.umds-stack--full-width  { width: 100%; }

package/dist/components/Stack/Stack.d.ts

@@ -1,27 +1,60 @@
 import './Stack.css';
-/** Degraus da escala oficial de espaçamento do 1DS. */
-export type StackSpacing = "quarck" | "nano" | "micro" | "mini" | "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+/** Degraus da escala oficial de espaçamento do 1DS. `none` zera o espaço. */
+export type StackSpacing = "none" | "quarck" | "nano" | "micro" | "mini" | "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+/** Elemento HTML que o Stack renderiza. */
+/** Degraus da escala oficial de espaçamento do 1DS. `none` zera o espaço. */
+/** Elemento HTML que o Stack renderiza. */
+export type StackTag = "div" | "span" | "ul" | "ol" | "li" | "section" | "nav" | "header" | "footer" | "form";
+/** Valores de `overflow` aceitos (por eixo ou nos dois). */
+/** Degraus da escala oficial de espaçamento do 1DS. `none` zera o espaço. */
+/** Elemento HTML que o Stack renderiza. */
+/** Valores de `overflow` aceitos (por eixo ou nos dois). */
+export type StackOverflow = "visible" | "hidden" | "auto" | "scroll";
 /**
  * Stack — empilha os filhos com espaçamento da escala do DS.
  *
  * Existe para eliminar o `style={{ display: "flex", gap: 16 }}` escrito à mão,
  * que é por onde o design system vaza: o 16 sai da cabeça de quem escreve, não
  * do token. Aqui o `gap` só aceita degraus da escala oficial.
+ *
+ * Também é o item de outro Stack: quem precisa crescer, encolher ou ocupar a
+ * altura toda dentro de um Stack pai aninha um Stack com `grow`, `shrink`,
+ * `basis`, `fullHeight`... (não existe `Stack.Item`: subcomponente por ponto
+ * não sobrevive aos dois geradores, e o Stack aninhado já é um item flex).
+ *
+ * Atributos HTML (`id`, `style`, `title`, `role`, `tabIndex`, `data-*`,
+ * `aria-*`) vão para o elemento raiz. Com `as="nav"`, `section` ou `form`,
+ * passe `aria-label` ou `aria-labelledby`: a região só é anunciada se tiver nome.
+ * @property {string} as - Elemento HTML: 'div' (padrão) | 'span' | 'ul' | 'ol' | 'li' | 'section' | 'nav' | 'header' | 'footer' | 'form'
  * @property {string} direction - Eixo do empilhamento: 'vertical' (padrão) | 'horizontal'
- * @property {string} gap - Espaço entre os filhos, na escala do DS
+ * @property {string} gap - Espaço entre os filhos, na escala do DS ('none' zera)
  * @property {string} align - Alinhamento no eixo transversal
  * @property {string} justify - Distribuição no eixo principal
  * @property {boolean} wrap - Permite quebrar em várias linhas
  * @property {boolean} inline - Usa display inline-flex em vez de flex
+ * @property {boolean} grow - Como item de outro Stack/flex: cresce para ocupar o espaço livre
+ * @property {string} shrink - Como item flex: '0' não encolhe, '1' encolhe
+ * @property {string} basis - Como item flex: tamanho base ('auto', '0', '25', '33', '50', '66', '75', '100'; os números são %)
+ * @property {string} minWidth - '0' (padrão do Stack) deixa o conteúdo longo encolher; 'auto' devolve o mínimo do conteúdo
+ * @property {string} overflow - Overflow nos dois eixos
+ * @property {string} overflowX - Overflow horizontal
+ * @property {string} overflowY - Overflow vertical
+ * @property {boolean} fullHeight - Ocupa 100% da altura do pai
+ * @property {boolean} fullWidth - Ocupa 100% da largura do pai
  * @property {string} className - Classes CSS adicionais
- * @quandoUsar Empilhar elementos com espaçamento consistente: campos de um formulário, botões de uma barra de ações, itens de uma lista. É o jeito certo de dar respiro sem escrever CSS.
- * @quandoNaoUsar Para layout em COLUNAS que se alinham entre si — use `Grid`. Para uma caixa com padding e fundo, use `Box`. Stack só distribui no eixo, não desenha nada.
+ * @property {function} onSubmit - Só com as="form": callback do envio
+ * @quandoUsar Empilhar elementos com espaçamento consistente: campos de um formulário, botões de uma barra de ações, itens de uma lista (`as="ul"` com filhos `as="li"`). É o jeito certo de dar respiro sem escrever CSS, e de fazer uma região crescer ou rolar dentro de outra.
+ * @quandoNaoUsar Para layout em COLUNAS que se alinham entre si — use `Grid`. Para uma caixa com padding e fundo, use `Box` (que também aceita direction e gap quando a superfície é a própria linha ou região). Stack só distribui no eixo, não desenha nada.
  */
-/** Degraus da escala oficial de espaçamento do 1DS. */
+/** Degraus da escala oficial de espaçamento do 1DS. `none` zera o espaço. */
+/** Elemento HTML que o Stack renderiza. */
+/** Valores de `overflow` aceitos (por eixo ou nos dois). */
 export interface StackProps {
+    /** Elemento HTML renderizado. @default 'div' */
+    as?: StackTag;
     /** Eixo do empilhamento. @default 'vertical' */
     direction?: "vertical" | "horizontal";
-    /** Espaço entre os filhos, na escala oficial (xxxs = 16px). @default 'xxxs' */
+    /** Espaço entre os filhos, na escala oficial (xxxs = 16px; `none` = 0). @default 'xxxs' */
     gap?: StackSpacing;
     /** Alinhamento no eixo transversal. */
     align?: "start" | "center" | "end" | "stretch" | "baseline";
@@ -31,8 +64,33 @@ export interface StackProps {
     wrap?: boolean;
     /** Usa `inline-flex` em vez de `flex`. */
     inline?: boolean;
+    /** Como item de outro Stack/flex: cresce para ocupar o espaço livre. */
+    grow?: boolean;
+    /** Como item flex: `"0"` não encolhe; `"1"` encolhe. */
+    shrink?: "0" | "1";
+    /** Como item flex: tamanho base. Os números são porcentagem do pai. */
+    basis?: "auto" | "0" | "25" | "33" | "50" | "66" | "75" | "100";
+    /** `"0"` (já é o padrão do Stack) deixa o conteúdo encolher; `"auto"` volta ao mínimo do conteúdo. */
+    minWidth?: "0" | "auto";
+    /** Overflow nos dois eixos. */
+    overflow?: StackOverflow;
+    /** Overflow horizontal (vence `overflow` no eixo X). */
+    overflowX?: StackOverflow;
+    /** Overflow vertical (vence `overflow` no eixo Y). */
+    overflowY?: StackOverflow;
+    /** Ocupa 100% da altura do pai. */
+    fullHeight?: boolean;
+    /** Ocupa 100% da largura do pai. */
+    fullWidth?: boolean;
     /** Classes CSS adicionais. */
     className?: string;
+    /** Só com `as="form"`: chamado no envio do formulário. */
+    onSubmit?: (event: any) => void;
+    /** ID HTML do elemento raiz. */
+    id?: string;
+    /** Atributos HTML repassados ao elemento raiz (style, data-*, aria-*…). */
+    style?: any;
+    [key: string]: any;
     /** Conteúdo empilhado. */
     children?: any;
 }

package/dist/components/Stack/Stack.js

@@ -1,6 +1,10 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './Stack.css';
 function Stack(props) {
+    function elementTag() {
+        return props.as || "div";
+    }
     function classes() {
         return [
             "umds-stack",
@@ -10,11 +14,35 @@ function Stack(props) {
             props.justify ? `umds-stack--justify-${props.justify}` : "",
             props.wrap ? "umds-stack--wrap" : "",
             props.inline ? "umds-stack--inline" : "",
+            props.grow ? "umds-stack--grow" : "",
+            props.shrink ? `umds-stack--shrink-${props.shrink}` : "",
+            props.basis ? `umds-stack--basis-${props.basis}` : "",
+            props.minWidth ? `umds-stack--min-w-${props.minWidth}` : "",
+            props.overflow ? `umds-stack--overflow-${props.overflow}` : "",
+            props.overflowX ? `umds-stack--overflow-x-${props.overflowX}` : "",
+            props.overflowY ? `umds-stack--overflow-y-${props.overflowY}` : "",
+            props.fullHeight ? "umds-stack--full-height" : "",
+            props.fullWidth ? "umds-stack--full-width" : "",
             props.className,
         ]
             .filter(Boolean)
             .join(" ");
     }
-    return (_jsx("div", { className: classes(), children: _jsx(_Fragment, { children: props.children }) }));
+    function htmlAttrs() {
+        const out = {};
+        for (const chave in props) {
+            if (chave.indexOf("data-") === 0 ||
+                chave.indexOf("aria-") === 0 ||
+                chave === "style" ||
+                chave === "class" ||
+                chave === "title" ||
+                chave === "role" ||
+                chave === "tabIndex") {
+                out[chave] = props[chave];
+            }
+        }
+        return out;
+    }
+    return (_jsxs(_Fragment, { children: [elementTag() === "div" ? (_jsx("div", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "span" ? (_jsx("span", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "ul" ? (_jsx("ul", { role: "list", id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "ol" ? (_jsx("ol", { role: "list", id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "li" ? (_jsx("li", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "section" ? (_jsx("section", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "nav" ? (_jsx("nav", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "header" ? (_jsx("header", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "footer" ? (_jsx("footer", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "form" ? (_jsx("form", { id: props.id, onSubmit: (event) => props.onSubmit && props.onSubmit(event), ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null] }));
 }
 export default Stack;

package/dist/components/StatCard/StatCard.css

@@ -152,3 +152,76 @@
 .umds-stat-card__variacao--neutral {
   color: var(--umds-semantic-color-neutral-dark-down);
 }
+
+/* ── ⓘ de ajuda ao lado do rótulo (infoTooltip) ── */
+.umds-stat-card__rotulo {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-nano);
+}
+
+.umds-stat-card__info {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--umds-semantic-color-neutral-dark-medium);
+  cursor: help;
+  border-radius: var(--umds-primitive-border-radius-circular);
+}
+
+.umds-stat-card__info:hover {
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-stat-card__info:focus-visible {
+  outline: 2px solid var(--umds-semantic-color-primary-pure);
+  outline-offset: 2px;
+}
+
+/* ── labelPosition="top": rótulo no topo, ícone e número embaixo ──
+   O HTML segue com o número antes do rótulo (a ordem do leitor de tela); só a
+   grade muda a ordem visual. O corpo vira `display: contents` para o rótulo,
+   o número e o resto virarem itens da própria grade do cartão. */
+.umds-stat-card--rotulo-topo {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  column-gap: 0;
+  row-gap: var(--umds-primitive-spacing-nano);
+}
+
+.umds-stat-card--rotulo-topo .umds-stat-card__corpo {
+  display: contents;
+}
+
+.umds-stat-card--rotulo-topo .umds-stat-card__rotulo {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  font-weight: var(--umds-primitive-font-weight-semibold);
+}
+
+.umds-stat-card--rotulo-topo .umds-stat-card__icone {
+  grid-column: 1;
+  grid-row: 2;
+  margin-right: var(--umds-primitive-spacing-mini);
+}
+
+.umds-stat-card--rotulo-topo .umds-stat-card__valor {
+  grid-column: 2;
+  grid-row: 2;
+  font-size: var(--umds-primitive-font-size-lg); /* 32px */
+  font-weight: var(--umds-primitive-font-weight-extrabold);
+}
+
+.umds-stat-card--rotulo-topo .umds-stat-card__descricao,
+.umds-stat-card--rotulo-topo .umds-stat-card__variacao {
+  grid-column: 1 / -1;
+}
+
+/* Sem ícone, o número ocupa a linha toda. */
+.umds-stat-card--rotulo-topo:not(:has(.umds-stat-card__icone)) .umds-stat-card__valor {
+  grid-column: 1 / -1;
+}