@1doc/1ds-react 2.8.0 → 2.9.0

package/dist/components/Select/Select.js

@@ -31,6 +31,7 @@ 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);
@@ -92,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 "";
@@ -117,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() {
@@ -132,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));
     }
@@ -148,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
@@ -164,6 +189,14 @@ function Select(props) {
     function labelIdText() {
         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 || !baseId())
             return undefined;
@@ -175,6 +208,21 @@ function Select(props) {
     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;
@@ -184,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);
             }
         }
@@ -368,6 +419,10 @@ 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(() => {
@@ -417,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": 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: [!(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"
                             ? {
@@ -431,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", 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, _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/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;
+}

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

@@ -22,6 +22,9 @@ 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} 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} 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
  * @property {string} className - Classes CSS adicionais
  * @property {function} onClick - Torna o cartão acionável (vira botão)
@@ -56,6 +59,20 @@ export interface StatCardProps {
     description?: string;
     /** Alinhamento do conteúdo. @default 'start' */
     align?: "start" | "center";
+    /**
+     * Onde o rótulo aparece. `top` põe o rótulo no topo do cartão, acima do
+     * ícone e do número (que passa a 32/800), como no painel da 1Doc. No HTML o
+     * número segue antes do rótulo: só a posição visual muda.
+     * @default 'bottom'
+     */
+    labelPosition?: "bottom" | "top";
+    /**
+     * 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.
+     */
+    infoTooltip?: string;
+    /** Nome acessível do ⓘ. @default 'Mais informações' */
+    infoLabel?: string;
     /** Classes CSS adicionais. */
     className?: string;
     /** Torna o cartão acionável. */

package/dist/components/StatCard/StatCard.js

@@ -1,13 +1,16 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './StatCard.css';
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import Icon from "../Icon/Icon";
+import Tooltip from "../Tooltip/Tooltip";
 function StatCard(props) {
     function classes() {
         return [
             "umds-stat-card",
             `umds-stat-card--${props.variant || "neutral"}`,
             props.align === "center" ? "umds-stat-card--centro" : "",
+            props.labelPosition === "top" ? "umds-stat-card--rotulo-topo" : "",
             props.onClick ? "umds-stat-card--acionavel" : "",
             props.className,
         ]
@@ -45,6 +48,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 }), _jsx("span", { className: "umds-stat-card__rotulo", children: props.label }), 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] })] }));
 }
 export default StatCard;

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

@@ -16,6 +16,21 @@ export interface TabProps {
     icon?: IconProp;
     /** Se a tab está desabilitada */
     disabled?: boolean;
+    /**
+     * Contador em pílula ao lado do texto: azul na aba ativa, cinza nas outras.
+     * Aceita número ou texto; o `0` aparece. Sem a prop, não há pílula.
+     */
+    count?: number | string;
+    /**
+     * Mostra o × para fechar a aba (abas de navegador, documentos abertos). O
+     * × é um botão próprio, irmão da aba (não dentro dela), e a tecla Delete
+     * na aba focada faz o mesmo. Quem remove a aba é o app, em `onClose`.
+     */
+    closable?: boolean;
+    /** Chamado ao fechar a aba, com o `index` dela e o evento. */
+    onClose?: (index: string, event?: any) => void;
+    /** Prefixo do nome acessível do ×; o texto da aba vem depois ("Fechar Documento 1"). Troque para traduzir. @default 'Fechar' */
+    closeLabel?: string;
     /** Classes CSS adicionais */
     className?: string;
 }

package/dist/components/Tabs/Tab.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import TabsContext from "./tabs.context";
 import Icon from "../Icon/Icon";
 function Tab(props) {
@@ -17,11 +18,26 @@ function Tab(props) {
             ? tabsContext.tabsId + "-panel-" + props.index
             : undefined;
     }
+    function temContador() {
+        return (props.count !== undefined && props.count !== null && props.count !== "");
+    }
+    function itemClasses() {
+        return [
+            "umds-tabs__item",
+            props.closable ? "umds-tabs__item--closable" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function closeAriaText() {
+        return (props.closeLabel || "Fechar") + " " + props.label;
+    }
     function classes() {
         return [
             "umds-tabs__tab",
             isSelected() ? "umds-tabs__tab--selected" : "",
             props.disabled ? "umds-tabs__tab--disabled" : "",
+            props.closable ? "umds-tabs__tab--closable" : "",
             props.className,
         ]
             .filter(Boolean)
@@ -42,9 +58,22 @@ function Tab(props) {
             tabsContext.onChange(props.index);
         }
     }
+    function handleClose(event) {
+        event.stopPropagation();
+        if (props.disabled)
+            return;
+        if (typeof props.onClose === "function") {
+            props.onClose(props.index, event);
+        }
+    }
     function handleKeyDown(event) {
         if (props.disabled)
             return;
+        if (props.closable && event.key === "Delete") {
+            event.preventDefault();
+            handleClose(event);
+            return;
+        }
         if (event.key === "Enter" || event.key === " ") {
             event.preventDefault();
             handleClick();
@@ -81,6 +110,6 @@ function Tab(props) {
         }
     }
     const tabsContext = useContext(TabsContext);
-    return (_jsxs("button", { role: "tab", id: tabId(), "aria-controls": panelId(), "data-tab-index": props.index, "aria-selected": isSelected(), "aria-disabled": props.disabled, tabIndex: isSelected() ? 0 : -1, disabled: props.disabled, onClick: (event) => handleClick(), onKeyDown: (event) => handleKeyDown(event), className: classes(), children: [props.icon ? (_jsx(Icon, { size: "md", variant: "inherit", icon: props.icon })) : null, _jsx("span", { className: labelClasses(), children: props.label })] }));
+    return (_jsxs("span", { role: "presentation", className: itemClasses(), children: [_jsxs("button", { role: "tab", id: tabId(), "aria-controls": panelId(), "data-tab-index": props.index, "aria-selected": isSelected(), "aria-disabled": props.disabled, tabIndex: isSelected() ? 0 : -1, disabled: props.disabled, onClick: (event) => handleClick(), onKeyDown: (event) => handleKeyDown(event), className: classes(), children: [props.icon ? (_jsx(Icon, { size: "md", variant: "inherit", icon: props.icon })) : null, _jsx("span", { className: labelClasses(), children: props.label }), temContador() ? (_jsx("span", { className: "umds-tabs__count", children: props.count })) : null] }), props.closable ? (_jsx("button", { type: "button", className: "umds-tabs__close", "aria-label": closeAriaText(), disabled: props.disabled, tabIndex: -1, onClick: (event) => handleClose(event), children: _jsx(Icon, { variant: "inherit", customSize: "10px", icon: faXmark }) })) : null] }));
 }
 export default Tab;