@1doc/1ds-react 2.9.0 → 2.10.0

package/dist/components/DataTable/DataTable.js

@@ -2,16 +2,253 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import './DataTable.css';
 import * as React from "react";
-import { faSort, faSortUp, faSortDown, faInbox, } from "@fortawesome/free-solid-svg-icons";
+import { useState } from "react";
+import { faSort, faSortUp, faSortDown, faInbox, faChevronRight, faChevronDown, } from "@fortawesome/free-solid-svg-icons";
 import Icon from "../Icon/Icon";
 import Checkbox from "../Checkbox/Checkbox";
 function DataTable(props) {
+    const [expandedState, setExpandedState] = useState(() => Array());
+    const [expandTouched, setExpandTouched] = useState(() => false);
+    const [activeRow, setActiveRow] = useState(() => 0);
     function columnsList() {
         return props.columns || [];
     }
     function rows() {
+        if (props.treeData)
+            return treeNodes().map((node) => node.row);
         return props.data || [];
     }
+    function childField() {
+        return props.childrenKey || "children";
+    }
+    function isOpenKey(key, todas) {
+        if (todas)
+            return true;
+        if (props.expandedKeys)
+            return props.expandedKeys.includes(key);
+        if (expandTouched)
+            return expandedState.includes(key);
+        if (props.defaultExpandAll)
+            return true;
+        return (props.defaultExpandedKeys || []).includes(key);
+    }
+    function flatten(todas) {
+        const raizes = props.data || [];
+        const saida = [];
+        const pilha = [];
+        for (let r = raizes.length - 1; r >= 0; r--) {
+            pilha.push({
+                row: raizes[r],
+                level: 0,
+                pos: r,
+                size: raizes.length,
+                path: String(r),
+                guides: [],
+            });
+        }
+        while (pilha.length > 0) {
+            const item = pilha.pop();
+            const filhas = item.row[childField()];
+            const hasKids = Array.isArray(filhas) && filhas.length > 0;
+            const chave = typeof props.rowKey === "function"
+                ? props.rowKey(item.row)
+                : props.rowKey
+                    ? item.row[props.rowKey]
+                    : item.path;
+            const open = hasKids && isOpenKey(chave, todas);
+            saida.push({
+                row: item.row,
+                level: item.level,
+                key: chave,
+                hasKids,
+                open,
+                pos: item.pos + 1,
+                size: item.size,
+                guides: item.guides,
+            });
+            if (open) {
+                // Para as filhas, o guia do PRÓPRIO nó vira a linha que continua (tem irmã depois) ou some.
+                const base = item.guides.map((g, gi) => gi === item.guides.length - 1 ? (g === "tee" ? "line" : "none") : g);
+                for (let c = filhas.length - 1; c >= 0; c--) {
+                    pilha.push({
+                        row: filhas[c],
+                        level: item.level + 1,
+                        pos: c,
+                        size: filhas.length,
+                        path: item.path + "." + c,
+                        guides: [...base, c === filhas.length - 1 ? "elbow" : "tee"],
+                    });
+                }
+            }
+        }
+        return saida;
+    }
+    function treeNodes() {
+        if (!props.treeData)
+            return [];
+        return flatten(false);
+    }
+    function nodeAt(index) {
+        return treeNodes()[index];
+    }
+    function allParentKeys() {
+        return flatten(true)
+            .filter((node) => node.hasKids)
+            .map((node) => node.key);
+    }
+    function currentExpanded() {
+        if (props.expandedKeys)
+            return props.expandedKeys;
+        if (expandTouched)
+            return expandedState;
+        if (props.defaultExpandAll)
+            return allParentKeys();
+        return props.defaultExpandedKeys || [];
+    }
+    function toggleNode(index, abrir) {
+        const node = nodeAt(index);
+        if (!node || !node.hasKids)
+            return;
+        const vaiAbrir = typeof abrir === "boolean" ? abrir : !node.open;
+        if (vaiAbrir === node.open)
+            return;
+        const atuais = currentExpanded();
+        const proximas = vaiAbrir
+            ? [...atuais, node.key]
+            : atuais.filter((k) => k !== node.key);
+        setExpandedState(proximas);
+        setExpandTouched(true);
+        if (props.onExpand)
+            props.onExpand(proximas, node.row, vaiAbrir);
+    }
+    function handleToggleClick(index, event) {
+        if (event)
+            event.stopPropagation();
+        toggleNode(index);
+    }
+    function treeLevel(index) {
+        if (!props.treeData)
+            return undefined;
+        const node = nodeAt(index);
+        return node ? node.level + 1 : undefined;
+    }
+    function treePosInSet(index) {
+        if (!props.treeData)
+            return undefined;
+        const node = nodeAt(index);
+        return node ? node.pos : undefined;
+    }
+    function treeSetSize(index) {
+        if (!props.treeData)
+            return undefined;
+        const node = nodeAt(index);
+        return node ? node.size : undefined;
+    }
+    function treeExpanded(index) {
+        if (!props.treeData)
+            return undefined;
+        const node = nodeAt(index);
+        if (!node || !node.hasKids)
+            return undefined;
+        return node.open ? "true" : "false";
+    }
+    function treeHasKids(index) {
+        const node = nodeAt(index);
+        return !!node && node.hasKids;
+    }
+    function treeOpen(index) {
+        const node = nodeAt(index);
+        return !!node && node.open;
+    }
+    function isTreeCell(colIndex) {
+        return !!props.treeData && colIndex === 0;
+    }
+    function guidesOf(index) {
+        const node = nodeAt(index);
+        // Tipado na variável: o Mitosis tira a anotação de retorno, e sem ela o `map` do JSX fica com parâmetros `any` implícitos.
+        const guias = node ? node.guides : [];
+        return guias;
+    }
+    function guideClass(guia) {
+        return "umds-datatable__guide umds-datatable__guide--" + guia;
+    }
+    function indentOf(index) {
+        const node = nodeAt(index);
+        return ("calc(" +
+            (node ? node.level : 0) +
+            " * var(--umds-primitive-spacing-xxs))");
+    }
+    function toggleLabel(index) {
+        return treeOpen(index)
+            ? props.collapseLabel || "Recolher"
+            : props.expandLabel || "Expandir";
+    }
+    function treeToggleIcon(index) {
+        return treeOpen(index) ? faChevronDown : faChevronRight;
+    }
+    function parentIndexOf(index) {
+        const nos = treeNodes();
+        const nivel = nos[index] ? nos[index].level : 0;
+        for (let i = index - 1; i >= 0; i--) {
+            if (nos[i].level < nivel)
+                return i;
+        }
+        return -1;
+    }
+    function focusRowAt(atual, index) {
+        const linhas = atual.parentElement
+            ? atual.parentElement.querySelectorAll("tr[aria-level]")
+            : [];
+        const alvo = linhas[index];
+        if (alvo)
+            alvo.focus();
+    }
+    function handleTreeKey(index, event) {
+        const total = treeNodes().length;
+        const k = event.key;
+        const atual = event.currentTarget;
+        let alvo = -2;
+        if (k === "ArrowDown")
+            alvo = Math.min(index + 1, total - 1);
+        else if (k === "ArrowUp")
+            alvo = Math.max(index - 1, 0);
+        else if (k === "Home")
+            alvo = 0;
+        else if (k === "End")
+            alvo = total - 1;
+        else if (k === "ArrowRight") {
+            if (!treeHasKids(index))
+                return false;
+            if (!treeOpen(index)) {
+                toggleNode(index, true);
+                event.preventDefault();
+                return true;
+            }
+            alvo = index + 1;
+        }
+        else if (k === "ArrowLeft") {
+            if (treeHasKids(index) && treeOpen(index)) {
+                toggleNode(index, false);
+                event.preventDefault();
+                return true;
+            }
+            alvo = parentIndexOf(index);
+            if (alvo < 0)
+                return false;
+        }
+        else {
+            return false;
+        }
+        event.preventDefault();
+        if (alvo >= 0)
+            focusRowAt(atual, alvo);
+        return true;
+    }
+    function handleRowFocus(index, event) {
+        if (!props.treeData || !event || event.target !== event.currentTarget)
+            return;
+        setActiveRow(index);
+    }
     function selectedIndexes() {
         return props.selectedRows || [];
     }
@@ -32,6 +269,11 @@ function DataTable(props) {
             "umds-datatable",
             props.variant === "document" ? "umds-datatable--document" : "",
             props.density === "compact" ? "umds-datatable--compact" : "",
+            props.headerVariant === "dark" ? "umds-datatable--header-dark" : "",
+            props.headerUppercase ? "umds-datatable--header-uppercase" : "",
+            props.hideHeader ? "umds-datatable--header-hidden" : "",
+            props.striped ? "umds-datatable--striped" : "",
+            props.treeData ? "umds-datatable--tree" : "",
             props.className,
         ]
             .filter(Boolean)
@@ -167,6 +409,17 @@ function DataTable(props) {
             return col.render(row, rowIndex);
         return row[col.key];
     }
+    function isHighlighted(row, index) {
+        if (props.isRowSelected && props.isRowSelected(row, index))
+            return true;
+        if (props.selectedRowKeys && props.rowKey) {
+            return props.selectedRowKeys.includes(rowKeyOf(row, index));
+        }
+        return false;
+    }
+    function ariaSelectedRow(row, index) {
+        return isHighlighted(row, index) ? "true" : undefined;
+    }
     function handleRowClick(rowIndex, row) {
         if (props.variant === "document")
             return;
@@ -174,6 +427,12 @@ function DataTable(props) {
             props.onRowClick(rowIndex, row);
     }
     function aoTeclarNaLinha(rowIndex, row, event) {
+        if (props.treeData &&
+            event &&
+            event.target === event.currentTarget &&
+            handleTreeKey(rowIndex, event)) {
+            return;
+        }
         if (!props.onRowClick || props.variant === "document" || !event)
             return;
         // Só a própria linha aciona. Sem esta guarda, o Espaço dentro do
@@ -189,7 +448,10 @@ function DataTable(props) {
         event.preventDefault();
         handleRowClick(rowIndex, row);
     }
-    function rowTabIndex() {
+    function rowTabIndexAt(index) {
+        if (props.treeData) {
+            return index === Math.min(activeRow, treeNodes().length - 1) ? 0 : -1;
+        }
         return props.onRowClick && props.variant !== "document" ? 0 : undefined;
     }
     function rowRole() {
@@ -200,6 +462,9 @@ function DataTable(props) {
             return props.selectRowLabel(index + 1);
         return "Selecionar linha " + (index + 1);
     }
+    function tableRole() {
+        return props.treeData ? "treegrid" : undefined;
+    }
     function thClasses(col) {
         return [
             "umds-datatable__th",
@@ -237,10 +502,11 @@ function DataTable(props) {
     function sortableCol(col) {
         return !!col.sortable && props.variant !== "document";
     }
-    function tdClasses(col) {
+    function tdClasses(col, colIndex) {
         return [
             "umds-datatable__td",
             col.align ? `umds-datatable__td--${col.align}` : "",
+            isTreeCell(colIndex) ? "umds-datatable__td--tree" : "",
         ]
             .filter(Boolean)
             .join(" ");
@@ -248,7 +514,11 @@ function DataTable(props) {
     function rowClasses(row, rowIdx) {
         return [
             "umds-datatable__row",
-            isSelected(row, rowIdx) ? "umds-datatable__row--selected" : "",
+            isSelected(row, rowIdx) || isHighlighted(row, rowIdx)
+                ? "umds-datatable__row--selected"
+                : "",
+            isHighlighted(row, rowIdx) ? "umds-datatable__row--highlighted" : "",
+            props.striped && rowIdx % 2 === 1 ? "umds-datatable__row--striped" : "",
             props.onRowClick && props.variant !== "document"
                 ? "umds-datatable__row--clickable"
                 : "",
@@ -256,10 +526,12 @@ function DataTable(props) {
             .filter(Boolean)
             .join(" ");
     }
-    return (_jsx("div", { className: tableClasses(), children: _jsxs("table", { className: "umds-datatable__table", "aria-busy": props.loading, children: [_jsx("thead", { className: "umds-datatable__thead", children: _jsxs("tr", { children: [canSelect() ? (_jsx("th", { scope: "col", className: "umds-datatable__th umds-datatable__th--checkbox", children: _jsx(Checkbox, { checked: allSelected(), indeterminate: someSelected(), ariaLabel: props.selectAllLabel || "Selecionar todas as linhas", onChange: (event) => toggleAll() }) })) : null, columnsList()?.map((col) => (_jsxs("th", { scope: "col", style: col.width
+    return (_jsx("div", { className: tableClasses(), children: _jsxs("table", { className: "umds-datatable__table", "aria-busy": props.loading, role: tableRole(), children: [_jsx("thead", { className: "umds-datatable__thead", children: _jsxs("tr", { children: [canSelect() ? (_jsx("th", { scope: "col", className: "umds-datatable__th umds-datatable__th--checkbox", children: _jsx(Checkbox, { checked: allSelected(), indeterminate: someSelected(), ariaLabel: props.selectAllLabel || "Selecionar todas as linhas", onChange: (event) => toggleAll() }) })) : null, columnsList()?.map((col) => (_jsxs("th", { scope: "col", style: col.width
                                     ? {
                                         width: col.width,
                                     }
-                                    : {}, "aria-sort": ariaSort(col), className: thClasses(col), children: [sortableCol(col) ? (_jsxs("button", { type: "button", className: "umds-datatable__sort-button umds-datatable__th-content", onClick: (event) => handleSort(col), children: [col.label, _jsx("span", { "aria-hidden": "true", className: sortIconClasses(col), children: _jsx(Icon, { variant: "inherit", customSize: "12px", icon: sortIconName(col) }) })] })) : null, !sortableCol(col) ? (_jsx("span", { className: "umds-datatable__th-content", children: col.label })) : null] }, col.key)))] }) }), _jsxs("tbody", { className: "umds-datatable__tbody", children: [props.loading ? (_jsx(_Fragment, { children: skeletonRowsList()?.map((_, rowIdx) => (_jsxs("tr", { className: "umds-datatable__row umds-datatable__row--skeleton", children: [canSelect() ? (_jsx("td", { className: "umds-datatable__td umds-datatable__td--checkbox", children: _jsx("div", { className: "umds-datatable__skeleton umds-datatable__skeleton--checkbox" }) })) : null, columnsList()?.map((col) => (_jsx("td", { className: "umds-datatable__td", children: _jsx("div", { className: "umds-datatable__skeleton" }) }, col.key)))] }, `sk-${rowIdx}`))) })) : null, isEmpty() ? (_jsx("tr", { className: "umds-datatable__row--empty", children: _jsx("td", { className: "umds-datatable__td umds-datatable__td--empty", colSpan: colSpan(), children: _jsxs("div", { className: "umds-datatable__empty", children: [_jsx("span", { "aria-hidden": "true", className: "umds-datatable__empty-icon", children: _jsx(Icon, { variant: "inherit", customSize: "48px", icon: faInbox }) }), _jsx("span", { children: props.emptyMessage || "Nenhum registro encontrado" })] }) }) })) : null, hasRows() ? (_jsx(_Fragment, { children: rows()?.map((row, rowIdx) => (_jsxs(React.Fragment, { children: [newGroupLabel(rowIdx) ? (_jsx("tr", { className: "umds-datatable__row umds-datatable__row--group", children: _jsx("th", { scope: "rowgroup", className: "umds-datatable__group", colSpan: colSpan(), children: groupContent(newGroupLabel(rowIdx), row, rowIdx) }) })) : null, _jsxs("tr", { onClick: (event) => handleRowClick(rowIdx, row), onKeyDown: (event) => aoTeclarNaLinha(rowIdx, row, event), tabIndex: rowTabIndex(), role: rowRole(), className: rowClasses(row, rowIdx), children: [canSelect() ? (_jsx("td", { className: "umds-datatable__td umds-datatable__td--checkbox", onClick: (event) => event.stopPropagation(), children: _jsx(Checkbox, { checked: isSelected(row, rowIdx), ariaLabel: rowSelectLabel(rowIdx), onChange: (event) => toggleRow(row, rowIdx) }) })) : null, columnsList()?.map((col) => (_jsx("td", { className: tdClasses(col), children: cellContent(col, row, rowIdx) }, col.key)))] })] }, rowIdx))) })) : null] })] }) }));
+                                    : {}, "aria-sort": ariaSort(col), className: thClasses(col), children: [sortableCol(col) ? (_jsxs("button", { type: "button", className: "umds-datatable__sort-button umds-datatable__th-content", onClick: (event) => handleSort(col), children: [col.label, _jsx("span", { "aria-hidden": "true", className: sortIconClasses(col), children: _jsx(Icon, { variant: "inherit", customSize: "12px", icon: sortIconName(col) }) })] })) : null, !sortableCol(col) ? (_jsx("span", { className: "umds-datatable__th-content", children: col.label })) : null] }, col.key)))] }) }), _jsxs("tbody", { className: "umds-datatable__tbody", children: [props.loading ? (_jsx(_Fragment, { children: skeletonRowsList()?.map((_, rowIdx) => (_jsxs("tr", { className: "umds-datatable__row umds-datatable__row--skeleton", children: [canSelect() ? (_jsx("td", { className: "umds-datatable__td umds-datatable__td--checkbox", children: _jsx("div", { className: "umds-datatable__skeleton umds-datatable__skeleton--checkbox" }) })) : null, columnsList()?.map((col) => (_jsx("td", { className: "umds-datatable__td", children: _jsx("div", { className: "umds-datatable__skeleton" }) }, col.key)))] }, `sk-${rowIdx}`))) })) : null, isEmpty() ? (_jsx("tr", { className: "umds-datatable__row--empty", children: _jsx("td", { className: "umds-datatable__td umds-datatable__td--empty", colSpan: colSpan(), children: _jsxs("div", { className: "umds-datatable__empty", children: [_jsx("span", { "aria-hidden": "true", className: "umds-datatable__empty-icon", children: _jsx(Icon, { variant: "inherit", customSize: "48px", icon: props.emptyIcon || faInbox }) }), _jsx("span", { children: props.emptyMessage || "Nenhum registro encontrado" }), !!props.emptyDescription ? (_jsx("span", { className: "umds-datatable__empty-desc", children: props.emptyDescription })) : null] }) }) })) : null, hasRows() ? (_jsx(_Fragment, { children: rows()?.map((row, rowIdx) => (_jsxs(React.Fragment, { children: [newGroupLabel(rowIdx) ? (_jsx("tr", { className: "umds-datatable__row umds-datatable__row--group", children: _jsx("th", { scope: "rowgroup", className: "umds-datatable__group", colSpan: colSpan(), children: groupContent(newGroupLabel(rowIdx), row, rowIdx) }) })) : null, _jsxs("tr", { onClick: (event) => handleRowClick(rowIdx, row), onKeyDown: (event) => aoTeclarNaLinha(rowIdx, row, event), onFocus: (event) => handleRowFocus(rowIdx, event), tabIndex: rowTabIndexAt(rowIdx), role: rowRole(), "aria-selected": ariaSelectedRow(row, rowIdx), "aria-level": treeLevel(rowIdx), "aria-posinset": treePosInSet(rowIdx), "aria-setsize": treeSetSize(rowIdx), "aria-expanded": treeExpanded(rowIdx), className: rowClasses(row, rowIdx), children: [canSelect() ? (_jsx("td", { className: "umds-datatable__td umds-datatable__td--checkbox", onClick: (event) => event.stopPropagation(), children: _jsx(Checkbox, { checked: isSelected(row, rowIdx), ariaLabel: rowSelectLabel(rowIdx), onChange: (event) => toggleRow(row, rowIdx) }) })) : null, columnsList()?.map((col, colIdx) => (_jsxs("td", { className: tdClasses(col, colIdx), children: [isTreeCell(colIdx) ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "umds-datatable__tree-guides", children: guidesOf(rowIdx)?.map((guia, guiaIdx) => (_jsx("span", { className: guideClass(guia) }, guiaIdx))) }), _jsxs("div", { className: "umds-datatable__tree-content", style: {
+                                                                    paddingLeft: indentOf(rowIdx),
+                                                                }, children: [treeHasKids(rowIdx) ? (_jsx("button", { type: "button", className: "umds-datatable__tree-toggle", tabIndex: -1, "aria-label": toggleLabel(rowIdx), onClick: (event) => handleToggleClick(rowIdx, event), children: _jsx(Icon, { variant: "inherit", customSize: "12px", icon: treeToggleIcon(rowIdx) }) })) : null, !treeHasKids(rowIdx) ? (_jsx("span", { "aria-hidden": "true", className: "umds-datatable__tree-spacer" })) : null, _jsx("div", { className: "umds-datatable__tree-text", children: cellContent(col, row, rowIdx) })] })] })) : null, !isTreeCell(colIdx) ? (_jsx(_Fragment, { children: cellContent(col, row, rowIdx) })) : null] }, col.key)))] })] }, rowIdx))) })) : null] })] }) }));
 }
 export default DataTable;

package/dist/components/DescriptionList/DescriptionList.css

@@ -90,6 +90,20 @@
   background: var(--umds-semantic-field-readonly-background);
 }
 
+/* ── Compacta (density="compact"): a fonte de 12px do CrisDoc ──
+   O rótulo do `stacked` já é 12px; o valor desce de 14 para 12. */
+.umds-description-list--compact {
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+}
+
+.umds-description-list--compact.umds-description-list--stacked {
+  gap: var(--umds-primitive-spacing-mini); /* 12px */
+}
+
+.umds-description-list--compact.umds-description-list--bordered .umds-description-list__description {
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano); /* 4px 8px */
+}
+
 /* Telas estreitas: o stacked vira uma coluna só. */
 @media (max-width: 640px) {
   .umds-description-list--cols-2,

package/dist/components/DescriptionList/DescriptionList.d.ts

@@ -32,6 +32,7 @@ export interface DescriptionListItem {
  * @property {DescriptionListItem[]} items - Os pares, na ordem em que aparecem
  * @property {string} layout - 'inline' (padrão) | 'stacked'
  * @property {number} columns - Só no `stacked`: colunas de pares, de 1 a 4 (padrão 2)
+ * @property {string} density - 'default' | 'compact'. O compacto leva a fonte a 12px (o tamanho do CrisDoc) e aperta o espaço entre os pares do `stacked`.
  * @property {boolean} bordered - Só no `stacked`: o valor numa caixa de campo somente leitura
  * @property {boolean} fit - Só no `inline`: encolhe até o conteúdo em vez de ocupar a largura toda
  * @property {string} emptyValue - Texto quando o valor vem vazio (padrão: "—")
@@ -46,6 +47,8 @@ export interface DescriptionListProps {
     layout?: "inline" | "stacked";
     columns?: 1 | 2 | 3 | 4;
     bordered?: boolean;
+    /** Densidade. `compact`: fonte de 12px e espaço menor entre os pares. @default 'default' */
+    density?: "default" | "compact";
     fit?: boolean;
     emptyValue?: string;
     ariaLabel?: string;

package/dist/components/DescriptionList/DescriptionList.js

@@ -23,6 +23,7 @@ function DescriptionList(props) {
             props.layout !== "stacked" && props.fit
                 ? "umds-description-list--fit"
                 : "",
+            props.density === "compact" ? "umds-description-list--compact" : "",
             props.className,
         ]
             .filter(Boolean)

package/dist/components/EmptyState/EmptyState.d.ts

@@ -4,7 +4,8 @@ import './EmptyState.css';
  * @property {IconProp} icon - Ícone FontAwesome: objeto importado (recomendado —
  *   ex.: faInbox de free-solid-svg-icons), nome ('inbox') ou par ['far','inbox'].
  *   Nomes/pares exigem registro prévio na library. Decorativo (aria-hidden).
- * @property {string} title - Título principal do estado vazio (obrigatório)
+ * @property {string} title - Título principal do estado vazio: texto, ou conteúdo rico (um nó no React; no Vue, o slot `title`, com a prop como texto de reserva). O título é um `div`, então aceita negrito, ícone, link.
+ * @slot title - Só no Vue. Título com conteúdo rico (no lugar do texto da prop `title`).
  * @property {string} description - Texto de apoio exibido abaixo do título
  * @property {string} actionLabel - Rótulo do botão de ação (exibido junto com onAction)
  * @property {function} onAction - Callback acionado ao clicar no botão de ação
@@ -15,7 +16,8 @@ import './EmptyState.css';
  */
 export interface EmptyStateProps {
     icon?: IconProp;
-    title: string;
+    /** Título: texto ou conteúdo rico. No Vue, texto, ou o slot `title`. */
+    title?: any;
     description?: string;
     actionLabel?: string;
     onAction?: () => void;

package/dist/components/EmptyState/EmptyState.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import './EmptyState.css';
 import Icon from "../Icon/Icon";
 function EmptyState(props) {
@@ -23,6 +23,6 @@ function EmptyState(props) {
             return "40px";
         return "32px";
     }
-    return (_jsxs("div", { className: classes(), children: [!!props.icon ? (_jsx("div", { "aria-hidden": "true", className: "umds-empty-state__icon-wrap", children: _jsx(Icon, { variant: "inherit", icon: props.icon, customSize: iconSize() }) })) : null, _jsx("p", { className: "umds-empty-state__title", children: props.title }), !!props.description ? (_jsx("p", { className: "umds-empty-state__desc", children: props.description })) : null, hasAction() ? (_jsx("button", { type: "button", className: "umds-empty-state__action", onClick: (event) => props.onAction && props.onAction(), children: props.actionLabel })) : null] }));
+    return (_jsxs("div", { className: classes(), children: [!!props.icon ? (_jsx("div", { "aria-hidden": "true", className: "umds-empty-state__icon-wrap", children: _jsx(Icon, { variant: "inherit", icon: props.icon, customSize: iconSize() }) })) : null, _jsx("div", { className: "umds-empty-state__title", children: _jsx(_Fragment, { children: props.title }) }), !!props.description ? (_jsx("p", { className: "umds-empty-state__desc", children: props.description })) : null, hasAction() ? (_jsx("button", { type: "button", className: "umds-empty-state__action", onClick: (event) => props.onAction && props.onAction(), children: props.actionLabel })) : null] }));
 }
 export default EmptyState;

package/dist/components/Input/Input.css

@@ -273,6 +273,27 @@
   outline-offset: -2px;
 }
 
+/* ── grouped: o campo dentro de um contêiner que já tem moldura e foco ──
+   O campo de chips: as tags e o input moram na mesma caixa, e quem desenha a moldura
+   e o foco (`:focus-within`) é o contêiner. Aqui o campo não impõe altura de campo
+   (a linha cresce com as tags), nem padding, nem anel próprio. */
+.umds-input--grouped:not(.umds-input--full-width) {
+  width: auto;
+  flex: 1 1 var(--umds-primitive-spacing-xxl); /* 80px: o input nunca encolhe a ponto de sumir */
+  min-width: 0;
+}
+
+.umds-input--grouped .umds-input__container {
+  height: auto;
+  min-height: 0;
+  padding: 0;
+}
+
+.umds-input--grouped .umds-input__container:focus-within:not(.umds-input__container--disabled):not(.umds-input__container--readonly) {
+  outline: none;
+  box-shadow: none;
+}
+
 /* ── Mobile: fonte ≥16px no controle (decisão 25/07) ──
    Fonte <16px num campo focado dispara zoom automático no Safari iOS.
    Só abaixo do breakpoint-sm (640px) — desktop permanece idêntico. */

package/dist/components/Input/Input.d.ts

@@ -35,6 +35,7 @@ export interface InputAction {
  * @property {IconProp} iconLeft - Ícone Font Awesome à esquerda
  * @property {InputAction[]} iconsRight - Botões de ação com ícone à direita
  * @property {IconProp} iconRight - Ícone decorativo à direita (não é botão, some para o leitor de tela). Para ação clicável, use `iconsRight`.
+ * @property {boolean} grouped - O campo vive dentro de um contêiner que já desenha a moldura E o foco (o campo de chips: as tags e o input na mesma caixa). Implica `borderless`, e tira a altura de campo, o padding e o anel de foco próprio: o contêiner mostra o foco com `:focus-within`. Sem esse foco no contêiner, quem usa teclado perde o indicador (WCAG 2.4.7).
  * @property {boolean} borderless - Sem borda, fundo e raio: o campo dentro de um grupo que já tem a moldura (um Select e um Input lado a lado numa mesma caixa). O foco continua visível, em contorno, e o erro mantém a borda vermelha.
  * @property {string} mask - Máscara simples: 'cpf' | 'cnpj' | 'cep' | 'phone'. O valor exibido e o que chega em `onChange` já vêm formatados (para só os dígitos, `valor.replace(/\D/g, "")`). Aceita só dígitos, limita o tamanho e abre o teclado numérico no celular.
  * @property {function} onChange - Callback acionado A CADA TECLA (recebe o novo valor string), nos dois frameworks. O blur sai em `onBlur`.
@@ -94,6 +95,12 @@ export interface InputProps {
     iconRight?: IconProp;
     /** Sem borda, fundo e raio, para o campo dentro de um grupo que já tem a moldura. O foco e o erro continuam visíveis. @default false */
     borderless?: boolean;
+    /**
+     * O campo dentro de um contêiner que já tem a moldura e o foco (o campo de chips).
+     * Implica `borderless` e tira a altura de campo, o padding e o anel de foco
+     * próprio: o foco vem do contêiner (`:focus-within`). @default false
+     */
+    grouped?: boolean;
     /** Máscara simples. O valor exibido e o de `onChange` já saem formatados. */
     mask?: "cpf" | "cnpj" | "cep" | "phone";
     onChange?: (value: string) => void;

package/dist/components/Input/Input.js

@@ -50,7 +50,8 @@ function Input(props) {
             props.disabled ? "umds-input--disabled" : "",
             props.readOnly ? "umds-input--readonly" : "",
             props.numberSpinner ? "umds-input--number-spinner" : "",
-            props.borderless ? "umds-input--borderless" : "",
+            props.borderless || props.grouped ? "umds-input--borderless" : "",
+            props.grouped ? "umds-input--grouped" : "",
             `umds-input--${props.size || "md"}`,
             props.className,
         ]

package/dist/components/List/ListItem.d.ts

@@ -22,14 +22,22 @@ export type ListItemTag = "button" | "a" | "div";
  * tira a linha da ordem de tabulação e bloqueia o clique.
  *
  * Atributos HTML (`id`, `style`, `role`, `tabIndex`, `data-*`, `aria-*`) vão
- * para o elemento interativo, que é quem recebe `aria-label` quando a linha não
- * tem texto visível. `title` NÃO é o atributo HTML: é o título da linha.
+ * SÓ para o elemento interativo (nunca para o `li`), que é quem recebe
+ * `aria-label` quando a linha não tem texto visível. `title` NÃO é o atributo
+ * HTML: é o título da linha. O atributo `title` (a dica nativa do navegador) é a
+ * prop `tooltip`.
+ *
+ * `standalone` tira o `li`: o ListItem vira só o elemento interativo, para uso
+ * fora de um `List` (botão de número de página, item de carrossel, linha dentro
+ * de um `div`). Fora de `ul`/`ol`, o `li` é HTML inválido.
  * @property {string} as - Elemento da linha: 'button' | 'a' | 'div'. Padrão: 'a' com href, senão 'button'
  * @property {string} href - Destino do link (vira as="a")
  * @property {string} target - Destino do link: '_blank' ganha rel="noopener noreferrer"
  * @property {string} rel - Relação do link (sobrescreve o padrão do target)
  * @property {boolean} selected - Item atual: fundo de seleção e aria-current
  * @property {boolean} disabled - Bloqueia clique e foco
+ * @property {string} tooltip - Dica nativa do navegador: vira o atributo HTML `title` do elemento interativo
+ * @property {boolean} standalone - Renderiza sem o `li`, só o elemento interativo (uso fora de `List`)
  * @property {any} title - Título da linha: texto, ou slot `title` (nó)
  * @property {any} subtitle - Segunda linha: texto, ou slot `subtitle` (nó)
  * @property {any} meta - Terceira linha, menor (data, contexto): texto, ou slot `meta` (nó)
@@ -59,6 +67,10 @@ export interface ListItemProps {
     selected?: boolean;
     /** Bloqueia clique e foco. @default false */
     disabled?: boolean;
+    /** Dica nativa do navegador: vira o atributo HTML `title` do elemento interativo. */
+    tooltip?: string;
+    /** Sem o `li`: só o elemento interativo, para usar fora de um `List`. @default false */
+    standalone?: boolean;
     /** Título da linha. Texto, ou slot `title` para um nó. */
     title?: any;
     /** Segunda linha. Texto, ou slot `subtitle` para um nó. */

package/dist/components/List/ListItem.js

@@ -70,12 +70,13 @@ function ListItem(props) {
                 chave.indexOf("aria-") === 0 ||
                 chave === "style" ||
                 chave === "role" ||
-                chave === "tabIndex") {
+                chave === "tabIndex" ||
+                (chave === "class" && props.standalone)) {
                 out[chave] = props[chave];
             }
         }
         return out;
     }
-    return (_jsxs("li", { className: "umds-list__item", children: [elementTag() === "button" ? (_jsxs("button", { type: "button", id: props.id, disabled: props.disabled, "aria-current": ariaCurrent(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "a" ? (_jsxs("a", { id: props.id, href: hrefValue(), target: props.target, rel: relValue(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "div" ? (_jsxs("div", { id: props.id, role: divRole(), tabIndex: divTabIndex(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), onKeyDown: (event) => handleKeyDown(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null] }));
+    return (_jsxs(_Fragment, { children: [!props.standalone ? (_jsxs("li", { className: "umds-list__item", children: [elementTag() === "button" ? (_jsxs("button", { type: "button", id: props.id, title: props.tooltip, disabled: props.disabled, "aria-current": ariaCurrent(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "a" ? (_jsxs("a", { id: props.id, title: props.tooltip, href: hrefValue(), target: props.target, rel: relValue(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "div" ? (_jsxs("div", { id: props.id, title: props.tooltip, role: divRole(), tabIndex: divTabIndex(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), onKeyDown: (event) => handleKeyDown(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null] })) : null, !!props.standalone ? (_jsxs(_Fragment, { children: [elementTag() === "button" ? (_jsxs("button", { type: "button", id: props.id, title: props.tooltip, disabled: props.disabled, "aria-current": ariaCurrent(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "a" ? (_jsxs("a", { id: props.id, title: props.tooltip, href: hrefValue(), target: props.target, rel: relValue(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "div" ? (_jsxs("div", { id: props.id, title: props.tooltip, role: divRole(), tabIndex: divTabIndex(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), onKeyDown: (event) => handleKeyDown(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null] })) : null] }));
 }
 export default ListItem;