@1doc/1ds-react 2.7.2 → 2.9.0

package/dist/components/ConfirmDialog/ConfirmDialog.js

@@ -45,7 +45,7 @@ function ConfirmDialog(props) {
     }
     function confirmText() {
         return props.confirmLoading
-            ? "Aguarde..."
+            ? props.loadingLabel || "Aguarde..."
             : props.confirmLabel || "Confirmar";
     }
     function handleCancel(event) {
@@ -148,6 +148,6 @@ function ConfirmDialog(props) {
             removeOverlay(uid);
         };
     }, []);
-    return (_jsx(_Fragment, { children: props.open ? (_jsx(_Fragment, { children: _jsx("div", { onClick: (event) => handleOverlayClick(event), className: overlayClasses(), children: _jsxs("div", { role: "alertdialog", "aria-modal": "true", ref: dialogRef, "aria-label": props.title, tabIndex: -1, onClick: (event) => stopPropagation(event), onKeyDown: (event) => handleTrapKeydown(event), className: dialogClasses(), children: [_jsx("div", { className: "umds-confirm-dialog__icon-wrap", children: _jsx(Icon, { variant: "inherit", customSize: "24px", icon: iconName() }) }), _jsxs("div", { className: "umds-confirm-dialog__content", children: [_jsx("h2", { className: "umds-confirm-dialog__title", children: props.title }), props.description ? (_jsx("p", { className: "umds-confirm-dialog__description", children: props.description })) : null, props.children ? (_jsx("div", { className: "umds-confirm-dialog__body", children: _jsx(_Fragment, { children: props.children }) })) : null] }), _jsxs("div", { className: "umds-confirm-dialog__footer", children: [_jsx("button", { type: "button", className: "umds-confirm-dialog__btn umds-confirm-dialog__btn--cancel", ref: cancelBtnRef, onClick: (event) => props.onCancel?.(event), children: props.cancelLabel || "Cancelar" }), _jsx("button", { type: "button", onClick: (event) => props.onConfirm?.(event), disabled: props.confirmLoading, className: confirmBtnClass(), children: confirmText() })] })] }) }) })) : null }));
+    return (_jsx(_Fragment, { children: props.open ? (_jsx(_Fragment, { children: _jsx("div", { onClick: (event) => handleOverlayClick(event), className: overlayClasses(), children: _jsxs("div", { role: "alertdialog", "aria-modal": "true", ref: dialogRef, "aria-label": props.title, tabIndex: -1, onClick: (event) => stopPropagation(event), onKeyDown: (event) => handleTrapKeydown(event), className: dialogClasses(), children: [_jsx("div", { className: "umds-confirm-dialog__icon-wrap", children: _jsx(Icon, { variant: "inherit", customSize: "24px", icon: iconName() }) }), _jsxs("div", { className: "umds-confirm-dialog__content", children: [_jsx("h2", { className: "umds-confirm-dialog__title", children: props.title }), props.description ? (_jsx("p", { className: "umds-confirm-dialog__description", children: props.description })) : null, props.children ? (_jsx("div", { className: "umds-confirm-dialog__body", children: _jsx(_Fragment, { children: props.children }) })) : null] }), _jsxs("div", { className: "umds-confirm-dialog__footer", children: [_jsx("button", { type: "button", className: "umds-confirm-dialog__btn umds-confirm-dialog__btn--cancel", ref: cancelBtnRef, onClick: (event) => props.onCancel?.(event), children: props.cancelLabel || "Cancelar" }), _jsx("button", { type: "button", onClick: (event) => props.onConfirm?.(event), disabled: props.confirmLoading || props.confirmDisabled, className: confirmBtnClass(), children: confirmText() })] })] }) }) })) : null }));
 }
 export default ConfirmDialog;

package/dist/components/DataTable/DataTable.css

@@ -154,6 +154,26 @@
   outline-offset: -2px;
 }
 
+/* ── Linha de grupo (prop rowGroup) ──
+   Um <th scope="rowgroup"> que atravessa a tabela. Não é clicável nem
+   selecionável, então o hover da linha comum não se aplica. */
+.umds-datatable__row--group,
+.umds-datatable__row--group:hover {
+  background: var(--umds-semantic-color-background-light); /* #F4F6F9 */
+}
+
+.umds-datatable__group {
+  padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-xxxs); /* 8px 16px */
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  font-weight: 700;
+  text-align: left;
+  color: var(--umds-semantic-color-neutral-dark-down); /* #565656 */
+}
+
+.umds-datatable--compact .umds-datatable__group {
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano); /* 4px 8px */
+}
+
 /* ── Células ── */
 .umds-datatable__td {
   padding: var(--umds-primitive-spacing-mini) var(--umds-primitive-spacing-xxxs); /* protótipo --space-3 (12px): candidato a novo token; 16px */
@@ -237,3 +257,63 @@
   0%   { background-position: 200% 0; }
   100% { background-position: -200% 0; }
 }
+
+/* ── Variante document (variant="document") ──
+   Tabela de CONTEÚDO de documento (itens de nota, cotações): lê-se e imprime-se,
+   não se opera. Sem hover, sem cursor, sem cabeçalho grudado; grade de bordas
+   finas em todas as células, como no papel. Na impressão o cabeçalho se repete
+   a cada página e uma linha nunca é cortada ao meio. */
+.umds-datatable--document {
+  border: none;
+  border-radius: var(--umds-primitive-border-radius-none);
+  background: transparent;
+}
+
+.umds-datatable--document .umds-datatable__table {
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+}
+
+.umds-datatable--document .umds-datatable__thead {
+  position: static;
+  border-bottom: none;
+}
+
+.umds-datatable--document .umds-datatable__th,
+.umds-datatable--document .umds-datatable__td {
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  vertical-align: top;
+  user-select: auto;
+}
+
+.umds-datatable--document .umds-datatable__th {
+  font-size: var(--umds-primitive-font-size-xxs); /* 14px: no papel o cabeçalho é lido, não escaneado */
+  white-space: normal;
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-datatable--document .umds-datatable__row,
+.umds-datatable--document .umds-datatable__row:hover {
+  background: transparent;
+  border-bottom: none;
+}
+
+.umds-datatable--document .umds-datatable__td {
+  overflow-wrap: anywhere;
+}
+
+@media print {
+  .umds-datatable--document {
+    overflow-x: visible;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  .umds-datatable--document .umds-datatable__thead {
+    display: table-header-group;
+  }
+
+  .umds-datatable--document .umds-datatable__row {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+}

package/dist/components/DataTable/DataTable.d.ts

@@ -7,8 +7,10 @@ import './DataTable.css';
  * @property {string} width - Largura fixa da coluna (ex.: "120px")
  * @property {string} align - Alinhamento do conteúdo: 'left' | 'center' | 'right'
  * @property {function} render - Renderização customizada da célula: recebe a linha e o
- *   índice e retorna o conteúdo (ReactNode no React; no Vue, prefira retornar string).
- *   Sem `render`, a célula exibe `row[key]` — que também aceita ReactNode diretamente.
+ *   índice e retorna o conteúdo. No React devolve qualquer nó (badge, avatar, botão).
+ *   No Vue o retorno é tratado como TEXTO: para célula com markup use o slot
+ *   `#cell-<key>` (recebe `{ row, value, rowIndex }`), que vale sobre o `render`.
+ *   Sem `render` nem slot, a célula exibe `row[key]`.
  */
 export interface DataTableColumn {
     key: string;
@@ -32,6 +34,7 @@ export interface DataTableColumn {
  *   (selectedKeys/onSelectKeys) em vez de índice — sobrevive a paginação e ordenação.
  * @property {Array<string|number>} selectedKeys - Chaves das linhas selecionadas (controlado;
  *   requer rowKey)
+ * @property {string} variant - 'default' (tabela de interface) | 'document' (tabela de CONTEÚDO de documento: sem ordenação, seleção nem clique de linha, bordas finas, cabeçalho repetido e linha inteira por página na impressão)
  * @property {string} density - Densidade das células: 'default' | 'compact'
  * @property {string} sortKey - Chave da coluna atualmente ordenada
  * @property {string} sortDirection - Direção da ordenação: 'asc' | 'desc'
@@ -42,8 +45,16 @@ export interface DataTableColumn {
  * @property {function} onSelectKeys - Callback ao alterar a seleção por chave (requer rowKey)
  * @property {function} onRowClick - Callback ao clicar numa linha (recebe índice e a linha);
  *   cliques no checkbox de seleção não disparam
- * @quandoUsar Dados TABULARES que se comparam coluna a coluna, com ordenação, seleção e paginação. Semântica de tabela para leitor de tela.
- * @quandoNaoUsar Para hierarquia pai-filho — use `Tree`. Para cards em grade sem comparação coluna a coluna, use `Grid` com `Card`.
+ * @property {string|function} rowGroup - Agrupa linhas consecutivas: nome do campo ou função
+ *   (row, rowIndex) => rótulo. Antes da primeira linha de cada grupo entra uma linha de
+ *   grupo (`<th scope="rowgroup">` ocupando a largura toda). Linha sem rótulo não abre grupo.
+ *   A tabela não reordena: ordene `data` por grupo antes de passar.
+ * @property {function} renderRowGroup - Conteúdo da linha de grupo: (label, row, rowIndex) => nó.
+ *   Só no React. No Vue use o slot `#row-group` (recebe `{ label, row, rowIndex }`).
+ * @slot cell-<key> - Só no Vue. Célula livre da coluna `<key>`: `<template #cell-nome="{ row, value, rowIndex }">`.
+ * @slot row-group - Só no Vue. Conteúdo da linha de grupo: `{ label, row, rowIndex }`.
+ * @quandoUsar Dados TABULARES que se comparam coluna a coluna, com ordenação, seleção e paginação. Semântica de tabela para leitor de tela. Com `variant="document"`, a tabela que faz parte do TEXTO de um documento que se imprime (itens de nota, cotações): sem interação, com bordas finas e quebra de página que não corta linha.
+ * @quandoNaoUsar Para hierarquia pai-filho — use `Tree`. Para cards em grade sem comparação coluna a coluna, use `Grid` com `Card`. Para pares rótulo/valor de um documento (sem cabeçalho de coluna), use `DescriptionList`.
  */
 export interface DataTableProps {
     columns: DataTableColumn[];
@@ -53,7 +64,11 @@ export interface DataTableProps {
     selectable?: boolean;
     selectedRows?: number[];
     rowKey?: string | ((row: Record<string, any>) => string | number);
+    rowGroup?: string | ((row: Record<string, any>, rowIndex: number) => string | undefined);
+    renderRowGroup?: (label: string, row: Record<string, any>, rowIndex: number) => any;
     selectedKeys?: Array<string | number>;
+    /** `document`: tabela de conteúdo de documento, imprimível e sem interação. @default 'default' */
+    variant?: "default" | "document";
     density?: "default" | "compact";
     sortKey?: string;
     sortDirection?: "asc" | "desc";
@@ -63,6 +78,10 @@ export interface DataTableProps {
     onSelect?: (selectedIndexes: number[]) => void;
     onSelectKeys?: (selectedKeys: Array<string | number>) => void;
     onRowClick?: (rowIndex: number, row: Record<string, any>) => void;
+    /** Nome acessível do checkbox de selecionar todas as linhas. Troque para traduzir. @default 'Selecionar todas as linhas' */
+    selectAllLabel?: string;
+    /** Nome acessível do checkbox de cada linha. Recebe o número da linha (a partir de 1). Troque para traduzir. @default (rowNumber) => 'Selecionar linha ' + rowNumber */
+    selectRowLabel?: (rowNumber: number) => string;
 }
 declare function DataTable(props: DataTableProps): import("react/jsx-runtime").JSX.Element;
 export default DataTable;

package/dist/components/DataTable/DataTable.js

@@ -1,6 +1,7 @@
 "use client";
 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 Icon from "../Icon/Icon";
 import Checkbox from "../Checkbox/Checkbox";
@@ -11,7 +12,7 @@ function DataTable(props) {
     function rows() {
         return props.data || [];
     }
-    function selected() {
+    function selectedIndexes() {
         return props.selectedRows || [];
     }
     function selectedKeysList() {
@@ -20,9 +21,16 @@ function DataTable(props) {
     function usesKeys() {
         return !!props.rowKey;
     }
+    function isDocument() {
+        return props.variant === "document";
+    }
+    function canSelect() {
+        return !!props.selectable && props.variant !== "document";
+    }
     function tableClasses() {
         return [
             "umds-datatable",
+            props.variant === "document" ? "umds-datatable--document" : "",
             props.density === "compact" ? "umds-datatable--compact" : "",
             props.className,
         ]
@@ -43,8 +51,31 @@ function DataTable(props) {
     function hasRows() {
         return !props.loading && rows().length > 0;
     }
+    function groupOf(row, index) {
+        if (!props.rowGroup)
+            return "";
+        const bruto = typeof props.rowGroup === "function"
+            ? props.rowGroup(row, index)
+            : row[props.rowGroup];
+        return bruto === undefined || bruto === null ? "" : String(bruto);
+    }
+    function newGroupLabel(index) {
+        if (!props.rowGroup)
+            return "";
+        const atual = groupOf(rows()[index], index);
+        if (!atual)
+            return "";
+        if (index === 0)
+            return atual;
+        return groupOf(rows()[index - 1], index - 1) === atual ? "" : atual;
+    }
+    function groupContent(label, row, index) {
+        if (props.renderRowGroup)
+            return props.renderRowGroup(label, row, index);
+        return label;
+    }
     function colSpan() {
-        return columnsList().length + (props.selectable ? 1 : 0);
+        return columnsList().length + (canSelect() ? 1 : 0);
     }
     function rowKeyOf(row, index) {
         if (typeof props.rowKey === "function")
@@ -59,17 +90,17 @@ function DataTable(props) {
         if (usesKeys()) {
             return rows().every((row, i) => selectedKeysList().includes(rowKeyOf(row, i)));
         }
-        return selected().length === rows().length;
+        return selectedIndexes().length === rows().length;
     }
     function someSelected() {
         if (usesKeys()) {
             return (!allSelected() &&
                 rows().some((row, i) => selectedKeysList().includes(rowKeyOf(row, i))));
         }
-        return selected().length > 0 && !allSelected();
+        return selectedIndexes().length > 0 && !allSelected();
     }
     function handleSort(col) {
-        if (!col.sortable)
+        if (!col.sortable || props.variant === "document")
             return;
         const dir = props.sortKey === col.key && props.sortDirection === "asc"
             ? "desc"
@@ -110,7 +141,7 @@ function DataTable(props) {
             const nextKeys = current.includes(key)
                 ? current.filter((k) => k !== key)
                 : [...current, key];
-            const currentIdx = selected();
+            const currentIdx = selectedIndexes();
             const nextIdx = currentIdx.includes(index)
                 ? currentIdx.filter((i) => i !== index)
                 : [...currentIdx, index];
@@ -119,7 +150,7 @@ function DataTable(props) {
         }
         if (!props.onSelect)
             return;
-        const current = selected();
+        const current = selectedIndexes();
         const next = current.includes(index)
             ? current.filter((i) => i !== index)
             : [...current, index];
@@ -129,7 +160,7 @@ function DataTable(props) {
         if (usesKeys()) {
             return selectedKeysList().includes(rowKeyOf(row, index));
         }
-        return selected().includes(index);
+        return selectedIndexes().includes(index);
     }
     function cellContent(col, row, rowIndex) {
         if (col.render)
@@ -137,11 +168,13 @@ function DataTable(props) {
         return row[col.key];
     }
     function handleRowClick(rowIndex, row) {
+        if (props.variant === "document")
+            return;
         if (props.onRowClick)
             props.onRowClick(rowIndex, row);
     }
     function aoTeclarNaLinha(rowIndex, row, event) {
-        if (!props.onRowClick || !event)
+        if (!props.onRowClick || props.variant === "document" || !event)
             return;
         // Só a própria linha aciona. Sem esta guarda, o Espaço dentro do
         // checkbox de seleção era engolido pelo preventDefault abaixo e a
@@ -157,25 +190,33 @@ function DataTable(props) {
         handleRowClick(rowIndex, row);
     }
     function rowTabIndex() {
-        return props.onRowClick ? 0 : undefined;
+        return props.onRowClick && props.variant !== "document" ? 0 : undefined;
     }
     function rowRole() {
         return undefined;
     }
     function rowSelectLabel(index) {
+        if (props.selectRowLabel)
+            return props.selectRowLabel(index + 1);
         return "Selecionar linha " + (index + 1);
     }
     function thClasses(col) {
         return [
             "umds-datatable__th",
-            col.sortable ? "umds-datatable__th--sortable" : "",
-            props.sortKey === col.key ? "umds-datatable__th--sorted" : "",
+            col.sortable && props.variant !== "document"
+                ? "umds-datatable__th--sortable"
+                : "",
+            props.sortKey === col.key && props.variant !== "document"
+                ? "umds-datatable__th--sorted"
+                : "",
             col.align ? `umds-datatable__th--${col.align}` : "",
         ]
             .filter(Boolean)
             .join(" ");
     }
     function ariaSort(col) {
+        if (props.variant === "document")
+            return undefined;
         if (props.sortKey !== col.key)
             return "none";
         return props.sortDirection === "asc" ? "ascending" : "descending";
@@ -193,6 +234,9 @@ function DataTable(props) {
             return faSort;
         return props.sortDirection === "desc" ? faSortDown : faSortUp;
     }
+    function sortableCol(col) {
+        return !!col.sortable && props.variant !== "document";
+    }
     function tdClasses(col) {
         return [
             "umds-datatable__td",
@@ -205,15 +249,17 @@ function DataTable(props) {
         return [
             "umds-datatable__row",
             isSelected(row, rowIdx) ? "umds-datatable__row--selected" : "",
-            props.onRowClick ? "umds-datatable__row--clickable" : "",
+            props.onRowClick && props.variant !== "document"
+                ? "umds-datatable__row--clickable"
+                : "",
         ]
             .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: [props.selectable ? (_jsx("th", { scope: "col", className: "umds-datatable__th umds-datatable__th--checkbox", children: _jsx(Checkbox, { ariaLabel: "Selecionar todas as linhas", checked: allSelected(), indeterminate: someSelected(), 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, 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: [col.sortable ? (_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, !col.sortable ? (_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: [props.selectable ? (_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("tr", { onClick: (event) => handleRowClick(rowIdx, row), onKeyDown: (event) => aoTeclarNaLinha(rowIdx, row, event), tabIndex: rowTabIndex(), role: rowRole(), className: rowClasses(row, rowIdx), children: [props.selectable ? (_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: 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] })] }) }));
 }
 export default DataTable;

package/dist/components/DatePicker/DatePicker.css

@@ -156,6 +156,14 @@
   background-color: var(--umds-semantic-field-readonly-background);
 }
 
+/* Somente leitura não é desabilitado: o texto segue lido e o WCAG 1.4.3 vale
+   sem isenção. O placeholder padrão foi calibrado para fundo branco e cai para
+   ~4,2:1 sobre o fundo de somente leitura; neutral-dark-down passa 4,5:1 em
+   todos os temas (1doc 6,78:1 · 1doc-dark 10,83:1 · alto contraste 16,48:1). */
+.umds-datepicker--readonly .umds-datepicker__placeholder {
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
 /* ── Wrapper flutuante (Portal no body; posicionado pelo floating-ui via style inline) ── */
 .umds-datepicker__floating {
   display: block;

package/dist/components/DatePicker/DatePicker.d.ts

@@ -67,6 +67,10 @@ export interface DatePickerProps {
     previousMonthLabel?: string;
     /** Rótulo acessível do botão de próximo mês. @default 'Próximo mês' */
     nextMonthLabel?: string;
+    /** Nome acessível do painel do calendário (e do campo, quando não há `label` nem `ariaLabel`). Troque para traduzir. @default 'Selecionar data' ou, com mode="range", 'Selecionar período' */
+    dialogLabel?: string;
+    /** Nome acessível de cada dia da grade. Recebe a data em ISO (YYYY-MM-DD). Troque para traduzir. @default (isoDate) => '20 de julho de 2026' (mês por `locale.months`, em minúsculas) */
+    dayLabel?: (isoDate: string) => string;
     /** Período selecionado (modo controlado). */
     /** Modo de seleção. "single" = uma data; "range" = período de duas datas. */
     mode?: "single" | "range";

package/dist/components/DatePicker/DatePicker.js

@@ -34,14 +34,21 @@ function DatePicker(props) {
     const [viewYear, setViewYear] = useState(() => 0);
     const [viewMonth, setViewMonth] = useState(() => 0);
     const [uid, setUid] = useState(() => "umds-datepicker-" + Math.random().toString(36).slice(2, 9));
-    const [internalFrom, setInternalFrom] = useState(() => (props.defaultRange && props.defaultRange.from) || "");
+    const [internalFrom, setInternalFrom] = useState(() => props.mode !== "range" && props.defaultValue
+        ? props.defaultValue
+        : (props.defaultRange && props.defaultRange.from) || "");
     const [internalTo, setInternalTo] = useState(() => (props.defaultRange && props.defaultRange.to) || "");
     const [hoverIso, setHoverIso] = useState(() => "");
     const [focusedIso, setFocusedIso] = useState(() => "");
     function currentFrom() {
+        if (props.mode !== "range" && props.value !== undefined) {
+            return props.value || "";
+        }
         return props.range !== undefined ? props.range.from || "" : internalFrom;
     }
     function currentTo() {
+        if (props.mode !== "range" && props.value !== undefined)
+            return "";
         return props.range !== undefined ? props.range.to || "" : internalTo;
     }
     function monthNames() {
@@ -83,6 +90,8 @@ function DatePicker(props) {
         return props.label ? labelId() : undefined;
     }
     function textoDoAlvo() {
+        if (props.dialogLabel)
+            return props.dialogLabel;
         return props.mode === "range" ? "Selecionar período" : "Selecionar data";
     }
     function comboboxAriaLabel() {
@@ -447,6 +456,8 @@ function DatePicker(props) {
             .join(" ");
     }
     function dayAriaLabel(cell) {
+        if (props.dayLabel)
+            return props.dayLabel(cell.iso);
         const parts = cell.iso.split("-");
         return (Number(parts[2]) +
             " de " +
@@ -487,6 +498,8 @@ function DatePicker(props) {
     }
     function handleKeydown(event) {
         if (event && event.key === "Escape" && open) {
+            // O Esc é do calendário (fecha só ele): o Modal em volta não reage.
+            event.preventDefault();
             closeCalendar();
         }
     }

package/dist/components/DescriptionList/DescriptionList.css

@@ -0,0 +1,113 @@
+/* ─────────────────────────────────────────────
+   DESCRIPTION LIST
+   Pares rótulo/valor de um documento, em <dl>.
+
+   inline:  grade de bordas finas, rótulo pintado à esquerda, sem cabeçalho.
+            As linhas viram `display: contents` para as duas colunas alinharem
+            entre todos os pares; as bordas são as linhas de 1px que a grade
+            deixa entre as células (o fundo da lista é a cor da borda).
+   stacked: rótulo pequeno em cima, valor embaixo, em até 4 colunas.
+
+   Cores: semânticos · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-description-list {
+  margin: 0;
+  padding: 0;
+  font-family: var(--umds-semantic-font-family-base);
+  font-size: var(--umds-primitive-font-size-xxs); /* 14px */
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-description-list__term,
+.umds-description-list__description {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+/* ── inline ── */
+.umds-description-list--inline {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: var(--umds-primitive-border-width-hairline);
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  background: var(--umds-semantic-color-neutral-light-medium);
+}
+
+.umds-description-list--inline.umds-description-list--fit {
+  display: inline-grid;
+}
+
+.umds-description-list--inline .umds-description-list__item {
+  display: contents;
+}
+
+.umds-description-list--inline .umds-description-list__term,
+.umds-description-list--inline .umds-description-list__description {
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano); /* 4px 8px */
+}
+
+/* O rótulo é a coluna pintada: sem negrito e sem quebra. */
+.umds-description-list--inline .umds-description-list__term {
+  background: var(--umds-semantic-color-background-light);
+  color: var(--umds-semantic-color-neutral-dark-down);
+  font-weight: var(--umds-primitive-font-weight-regular);
+  white-space: nowrap;
+}
+
+.umds-description-list--inline .umds-description-list__description {
+  background: var(--umds-semantic-color-background-white);
+}
+
+/* ── stacked ── */
+.umds-description-list--stacked {
+  display: grid;
+  gap: var(--umds-primitive-spacing-xxxs); /* 16px */
+}
+
+.umds-description-list--cols-1 { grid-template-columns: minmax(0, 1fr); }
+.umds-description-list--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.umds-description-list--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.umds-description-list--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+
+.umds-description-list--stacked .umds-description-list__item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  min-width: 0;
+}
+
+.umds-description-list--stacked .umds-description-list__term {
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  font-weight: var(--umds-primitive-font-weight-semibold);
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+.umds-description-list--bordered .umds-description-list__description {
+  padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-mini); /* 8px 12px */
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  border-radius: var(--umds-primitive-border-radius-sm);
+  background: var(--umds-semantic-field-readonly-background);
+}
+
+/* Telas estreitas: o stacked vira uma coluna só. */
+@media (max-width: 640px) {
+  .umds-description-list--cols-2,
+  .umds-description-list--cols-3,
+  .umds-description-list--cols-4 {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+/* ── Impressão: o par não é cortado entre duas páginas e a cor do rótulo sai ── */
+@media print {
+  .umds-description-list {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  .umds-description-list__item {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+}

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

@@ -0,0 +1,59 @@
+import './DescriptionList.css';
+/**
+ * Par rótulo/valor da DescriptionList.
+ * @property {string} label - Rótulo (o termo).
+ * @property {any} value - Valor (a descrição). No Vue é tratado como texto.
+ * @property {string} id - Identidade estável do par (padrão: o próprio rótulo).
+ */
+export interface DescriptionListItem {
+    label: string;
+    value?: any;
+    id?: string;
+    [key: string]: any;
+}
+/**
+ * DescriptionList — pares rótulo/valor de um documento, em `<dl>`.
+ *
+ * Dois desenhos para o mesmo dado:
+ * - `inline` (padrão): uma linha por par, rótulo pintado à esquerda e valor à
+ *   direita, numa grade de bordas finas e SEM cabeçalho. Encolhe até o conteúdo
+ *   (`fit`) ou ocupa a largura toda. É a tabela de "dotação orçamentária" de um
+ *   despacho.
+ * - `stacked`: rótulo pequeno em cima e valor embaixo, em até 4 `columns`. É o
+ *   bloco "Dados do processo". Com `bordered`, o valor ganha a caixa de um campo
+ *   somente leitura.
+ *
+ * O que é do papel fica nela: sem hover, sem foco, sem clique, e na impressão o
+ * par nunca é cortado entre duas páginas. Para tabela com cabeçalho de coluna,
+ * use `DataTable variant="document"`.
+ *
+ * Semântica: `<dl>` com `<dt>` e `<dd>`, agrupados por `<div>` (HTML 5.2). O
+ * leitor de tela anuncia a lista de termos e a quantidade.
+ * @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 {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: "—")
+ * @property {string} ariaLabel - Nome acessível da lista
+ * @property {string} ariaLabelledby - Id do título visível que nomeia a lista
+ * @property {string} className - Classes CSS adicionais
+ * @quandoUsar Dados cadastrais e de empenho dentro do texto de um documento, ficha de processo, bloco de detalhes de uma tela de leitura: qualquer conjunto de "campo: valor".
+ * @quandoNaoUsar Para dados com várias linhas comparáveis coluna a coluna, use `DataTable`. Para campos que a pessoa edita, use `Input` e afins. Para valor com marcação (badge, link, botão), a DescriptionList no Vue só mostra texto: monte o bloco com `Stack` e `Text`.
+ */
+export interface DescriptionListProps {
+    items?: DescriptionListItem[];
+    layout?: "inline" | "stacked";
+    columns?: 1 | 2 | 3 | 4;
+    bordered?: boolean;
+    fit?: boolean;
+    emptyValue?: string;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    className?: string;
+    id?: string;
+    style?: any;
+    [key: string]: any;
+}
+declare function DescriptionList(props: DescriptionListProps): import("react/jsx-runtime").JSX.Element;
+export default DescriptionList;