@1doc/1ds-react 2.9.0 → 2.10.0

package/dist/components/Badge/Badge.d.ts

@@ -19,13 +19,22 @@ export interface BadgeProps {
      */
     size?: "2xs" | "xs" | "sm" | "md" | "lg" | "pill";
     /**
-     * Cola o badge no canto superior esquerdo do card (rótulo de card, como
+     * Cola o badge no canto superior do card (rótulo de card, como
      * "Tarefa pendente"): cantos de baixo arredondados, os de cima retos.
      * Posiciona em `absolute`, então o pai precisa de `position: relative`
-     * (o `Card` e o `Box` com `position` já servem).
+     * (o `Card` e o `Box` com `position` já servem). O canto é o esquerdo, ou o
+     * direito com `attachedSide="right"`. Com `variant="neutral"` e `appearance="solid"` o
+     * rótulo colado é o cinza claro com texto escuro (o "Tarefa manual" do CrisDoc), e não o
+     * cinza escuro do `solid`, pesado demais para um rótulo de card.
      * @default false
      */
     attached?: boolean;
+    /**
+     * Em que canto do card o `attached` cola: `left` (padrão) ou `right`.
+     * Só vale com `attached`.
+     * @default 'left'
+     */
+    attachedSide?: "left" | "right";
     /**
      * Estilo visual do badge.
      * @default 'soft'

package/dist/components/Badge/Badge.js

@@ -8,6 +8,9 @@ function Badge(props) {
             `umds-badge--${props.size || "md"}`,
             `umds-badge--${props.appearance || "soft"}`,
             props.attached ? "umds-badge--attached" : "",
+            props.attached && props.attachedSide === "right"
+                ? "umds-badge--attached-right"
+                : "",
             props.className,
         ]
             .filter(Boolean)

package/dist/components/Calendar/Calendar.d.ts

@@ -52,8 +52,9 @@ export interface CalendarDayCell {
  *
  * A data mostrada (`date`) e a visão (`view`) são controláveis (`onDateChange`,
  * `onViewChange`) ou internas (`defaultDate`, `defaultView`). O cabeçalho aceita
- * o slot `headerStart` (um filtro de escopo, à esquerda) e `headerEnd` (a
- * legenda, à direita). Nomes de mês e de dia saem do `Intl` no `locale` pedido;
+ * um filtro de escopo à esquerda e a legenda à direita: no React, as props `headerStart`
+ * e `headerEnd` (um nó); no Vue, os slots `#header-start` e `#header-end` (com hífen: o
+ * Vue lê o nome do slot como está, e `#headerStart` não chega). Nomes de mês e de dia saem do `Intl` no `locale` pedido;
  * os demais textos são props.
  * @property {CalendarEvent[]} events - Eventos (lista plana)
  * @property {string} view - Visão: 'month' | 'week' (controlada)
@@ -82,8 +83,8 @@ export interface CalendarDayCell {
  * @property {function} onDateChange - Mudou a data de referência (navegação): recebe `YYYY-MM-DD`
  * @property {function} onViewChange - Mudou a visão: recebe 'month' | 'week'
  * @property {string} className - Classes CSS adicionais
- * @slot headerStart - Cabeçalho, à esquerda: um filtro de escopo.
- * @slot headerEnd - Cabeçalho, antes do seletor de visão: a legenda.
+ * @slot header-start - Só no Vue (`#header-start`, com hífen). Cabeçalho, à esquerda: um filtro de escopo. No React, a prop `headerStart`.
+ * @slot header-end - Só no Vue (`#header-end`, com hífen). Cabeçalho, antes do seletor de visão: a legenda. No React, a prop `headerEnd`.
  * @quandoUsar Mostrar prazos, vencimentos e compromissos distribuídos no tempo: agenda de documentos, de tarefas, de assinaturas.
  * @quandoNaoUsar Para escolher UMA data num campo, use `DatePicker`. Para uma sequência de acontecimentos sem grade de dias, use `Timeline`. Para uma grade de horas (agenda com horário de início e fim), este componente não serve: não tem eixo de horas.
  */
@@ -111,9 +112,9 @@ export interface CalendarProps {
     moreAriaLabel?: string;
     dayLabel?: (iso: string, count: number) => string;
     className?: string;
-    /** Slot `headerStart`: à esquerda do cabeçalho. */
+    /** Cabeçalho, à esquerda: um filtro de escopo. React: o nó nesta prop. Vue: o slot `#header-start` (com hífen). */
     headerStart?: any;
-    /** Slot `headerEnd`: à direita, antes do seletor de visão. */
+    /** Cabeçalho, à direita, antes do seletor de visão: a legenda. React: o nó nesta prop. Vue: o slot `#header-end` (com hífen). */
     headerEnd?: any;
     onDayClick?: (iso: string) => void;
     onEventClick?: (event: CalendarEvent) => void;

package/dist/components/Coachmark/Coachmark.css

@@ -107,6 +107,16 @@
   border: 0;
 }
 
+/* ── modal={false}: sem véu nem recorte, a página segue clicável ──
+   A raiz cobre a tela só para posicionar o cartão; quem recebe o ponteiro é o cartão. */
+.umds-coachmark--modeless {
+  pointer-events: none;
+}
+
+.umds-coachmark--modeless .umds-coachmark__card {
+  pointer-events: auto;
+}
+
 @media (forced-colors: active) {
   .umds-coachmark__card {
     border: var(--umds-primitive-border-width-thin) solid CanvasText;

package/dist/components/Coachmark/Coachmark.d.ts

@@ -38,7 +38,13 @@ export interface CoachmarkStep {
  *
  * Limite: a página atrás fica inerte (o véu captura o clique), então o alvo
  * não é clicável durante o tour.
+ *
+ * `modal={false}` tira o véu, o recorte e o foco preso: o cartão vira um popover
+ * ancorado no alvo, para uma dica pontual (um passo, "Novo: agora dá para * arrastar"). A página segue clicável, o foco entra no cartão ao abrir mas o Tab
+ * pode sair dele, o Esc fecha de qualquer lugar da página e o cartão vira um
+ * `role="dialog"` com `aria-modal="false"`.
  * @property {boolean} open - Mostra o tour
+ * @property {boolean} modal - `true` (padrão): véu, recorte e foco preso. `false`: sem véu nem foco preso, como um popover ancorado, para dica pontual
  * @property {CoachmarkStep[]} steps - Os passos, em ordem
  * @property {number} step - Passo atual, a partir de 0 (controlado)
  * @property {number} defaultStep - Passo inicial (não controlado)
@@ -57,6 +63,12 @@ export interface CoachmarkStep {
  */
 export interface CoachmarkProps {
     open?: boolean;
+    /**
+     * `true` (padrão): véu, recorte e foco preso. `false`: o cartão é um popover
+     * ancorado, sem véu nem foco preso. `any` de propósito: no Vue uma prop `boolean`
+     * sem valor chega como `false`, e o tour modal viraria sem véu por engano.
+     */
+    modal?: any;
     steps?: CoachmarkStep[];
     step?: number;
     defaultStep?: number;

package/dist/components/Coachmark/Coachmark.js

@@ -12,6 +12,7 @@ function Coachmark(props) {
     const cleanupRef = useRef(null);
     const previousFocusRef = useRef(null);
     const attachedRef = useRef(null);
+    const escDocRef = useRef(null);
     const [internalStep, setInternalStep] = useState(() => props.defaultStep || 0);
     const [uid, setUid] = useState(() => "");
     const [active, setActive] = useState(() => false);
@@ -75,6 +76,14 @@ function Coachmark(props) {
     function skipText() {
         return props.skipLabel || "Sair do tour";
     }
+    function isModal() {
+        if (props.modal === undefined || props.modal === null)
+            return true;
+        return props.modal !== false && props.modal !== "false";
+    }
+    function ariaModalText() {
+        return isModal() ? "true" : "false";
+    }
     function showSkip() {
         return !props.hideSkip;
     }
@@ -85,6 +94,7 @@ function Coachmark(props) {
         return [
             "umds-coachmark",
             hasTarget ? "" : "umds-coachmark--no-target",
+            isModal() ? "" : "umds-coachmark--modeless",
             positioned ? "umds-coachmark--ready" : "",
         ]
             .filter(Boolean)
@@ -196,6 +206,23 @@ function Coachmark(props) {
             cleanupRef.current = null;
         }
     }
+    function ligarEsc() {
+        if (typeof document === "undefined" || escDocRef.current)
+            return;
+        const ouvir = (event) => {
+            // O Esc dentro do cartão já fechou (e deu preventDefault): não fecha duas vezes.
+            if (event.key === "Escape" && !event.defaultPrevented)
+                fechar("escape");
+        };
+        escDocRef.current = ouvir;
+        document.addEventListener("keydown", ouvir);
+    }
+    function desligarEsc() {
+        if (typeof document === "undefined" || !escDocRef.current)
+            return;
+        document.removeEventListener("keydown", escDocRef.current);
+        escDocRef.current = null;
+    }
     function sincronizar() {
         if (typeof document === "undefined")
             return;
@@ -210,12 +237,18 @@ function Coachmark(props) {
         if (show() && !active) {
             setActive(true);
             setTentativas(0);
-            previousFocusRef.current = document.activeElement;
+            // Guarda só na primeira vez: no React o `active` leva um render para
+            // valer, e um segundo `sincronizar` antes disso guardaria o próprio
+            // cartão (já focado) como "o elemento de antes".
+            if (!previousFocusRef.current)
+                previousFocusRef.current = document.activeElement;
             ligar();
             if (cardRef.current)
                 cardRef.current.focus({
                     preventScroll: true,
                 });
+            if (!isModal())
+                ligarEsc();
         }
         else if (show() && active && attachedRef.current !== index()) {
             ligar();
@@ -223,15 +256,22 @@ function Coachmark(props) {
         else if (!show() && active) {
             setActive(false);
             desligar();
+            desligarEsc();
             attachedRef.current = null;
             setHasTarget(false);
             setPositioned(false);
             if (props.step === undefined)
                 setInternalStep(props.defaultStep || 0);
-            if (previousFocusRef.current && previousFocusRef.current.focus) {
+            // Sem véu a pessoa pode ter ido para outro lugar da página: o foco só volta se ela não foi.
+            const focoLivre = isModal() ||
+                document.activeElement === document.body ||
+                !document.activeElement;
+            if (previousFocusRef.current &&
+                previousFocusRef.current.focus &&
+                focoLivre) {
                 previousFocusRef.current.focus();
-                previousFocusRef.current = null;
             }
+            previousFocusRef.current = null;
         }
     }
     function irPara(proximo) {
@@ -274,7 +314,7 @@ function Coachmark(props) {
             handlePrevious();
             return;
         }
-        if (event.key !== "Tab" || !cardRef.current)
+        if (event.key !== "Tab" || !cardRef.current || !isModal())
             return;
         // Foco preso: Tab e Shift+Tab giram dentro do cartão.
         const focaveis = cardRef.current.querySelectorAll("button:not([disabled])");
@@ -314,8 +354,9 @@ function Coachmark(props) {
     useEffect(() => {
         return () => {
             desligar();
+            desligarEsc();
         };
     }, []);
-    return (_jsx(_Fragment, { children: show() ? (_jsx(_Fragment, { children: _jsx(Portal, { children: _jsxs("div", { className: rootClasses(), children: [_jsx("div", { "aria-hidden": "true", className: "umds-coachmark__veil", onMouseDown: (event) => handleVeilMouseDown(event) }), hasTarget ? (_jsx("div", { "aria-hidden": "true", className: "umds-coachmark__cutout", style: cutoutStyle() })) : null, _jsxs("div", { role: "dialog", "aria-modal": "true", ref: cardRef, style: cardStyle(), "aria-labelledby": titleId(), "aria-describedby": contentId(), tabIndex: -1, onKeyDown: (event) => handleKeyDown(event), className: cardClasses(), children: [_jsx("span", { "aria-live": "polite", className: "umds-coachmark__sr", children: announceText() }), _jsx(Text, { as: "span", variant: "body2", weight: "bold", color: "primary", "aria-hidden": "true", children: counterText() }), _jsx(Text, { as: "h2", variant: "subtitle1", weight: "bold", id: titleId(), children: currentStep().title }), currentStep().content ? (_jsx(Text, { as: "p", variant: "body2", color: "secondary", id: contentId(), children: currentStep().content })) : null, _jsxs("div", { className: "umds-coachmark__footer", children: [showSkip() ? (_jsx(Button, { variant: "text", size: "sm", onClick: (event) => fechar("skip"), children: skipText() })) : null, _jsxs("span", { className: "umds-coachmark__actions", children: [!isFirst() ? (_jsx(Button, { variant: "secondary", size: "md", onClick: (event) => handlePrevious(), children: previousText() })) : null, _jsx(Button, { variant: "primary", size: "md", onClick: (event) => handleNext(), children: nextText() })] })] })] })] }) }) })) : null }));
+    return (_jsx(_Fragment, { children: show() ? (_jsx(_Fragment, { children: _jsx(Portal, { children: _jsxs("div", { className: rootClasses(), children: [isModal() ? (_jsx("div", { "aria-hidden": "true", className: "umds-coachmark__veil", onMouseDown: (event) => handleVeilMouseDown(event) })) : null, hasTarget && isModal() ? (_jsx("div", { "aria-hidden": "true", className: "umds-coachmark__cutout", style: cutoutStyle() })) : null, _jsxs("div", { role: "dialog", ref: cardRef, style: cardStyle(), "aria-modal": ariaModalText(), "aria-labelledby": titleId(), "aria-describedby": contentId(), tabIndex: -1, onKeyDown: (event) => handleKeyDown(event), className: cardClasses(), children: [_jsx("span", { "aria-live": "polite", className: "umds-coachmark__sr", children: announceText() }), _jsx(Text, { as: "span", variant: "body2", weight: "bold", color: "primary", "aria-hidden": "true", children: counterText() }), _jsx(Text, { as: "h2", variant: "subtitle1", weight: "bold", id: titleId(), children: currentStep().title }), currentStep().content ? (_jsx(Text, { as: "p", variant: "body2", color: "secondary", id: contentId(), children: currentStep().content })) : null, _jsxs("div", { className: "umds-coachmark__footer", children: [showSkip() ? (_jsx(Button, { variant: "text", size: "sm", onClick: (event) => fechar("skip"), children: skipText() })) : null, _jsxs("span", { className: "umds-coachmark__actions", children: [!isFirst() ? (_jsx(Button, { variant: "secondary", size: "md", onClick: (event) => handlePrevious(), children: previousText() })) : null, _jsx(Button, { variant: "primary", size: "md", onClick: (event) => handleNext(), children: nextText() })] })] })] })] }) }) })) : null }));
 }
 export default Coachmark;

package/dist/components/ColorPicker/ColorPicker.css

@@ -35,7 +35,8 @@
   padding: var(--umds-primitive-spacing-quarck);
 }
 
-.umds-color-picker--sm .umds-color-picker__swatches {
+.umds-color-picker--sm .umds-color-picker__swatches,
+.umds-color-picker--xs .umds-color-picker__swatches {
   gap: var(--umds-primitive-spacing-quarck); /* 4px */
 }
 
@@ -76,6 +77,12 @@
   height: var(--umds-primitive-spacing-xxs);
 }
 
+/* xs: 20px, o tamanho do CrisDoc (16 + 4, dois degraus da escala somados; sem token próprio). */
+.umds-color-picker--xs .umds-color-picker__swatch {
+  width: calc(var(--umds-primitive-spacing-xxxs) + var(--umds-primitive-spacing-quarck)); /* 20px */
+  height: calc(var(--umds-primitive-spacing-xxxs) + var(--umds-primitive-spacing-quarck));
+}
+
 .umds-color-picker__swatch--on-light {
   /* stylelint-disable-next-line 1ds/cor-por-token -- par fixo da marcação sobre amostra clara (ver acima) */
   color: var(--umds-primitive-gray-darkest);

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -44,7 +44,7 @@ export interface ColorPickerSwatch {
  * @property {boolean} allowCustom - Liga o campo de cor livre (hexadecimal)
  * @property {string} customLabel - Rótulo do campo de cor livre (padrão: "Cor livre (hexadecimal)")
  * @property {string} customErrorMessage - Mensagem do hexadecimal inválido (padrão: "Use o formato #RRGGBB")
- * @property {string} size - Tamanho da amostra: 'sm' (24px) | 'md' (32px)
+ * @property {string} size - Tamanho da amostra: 'xs' (20px, o do CrisDoc) | 'sm' (24px) | 'md' (32px). A marcação de selecionada (o anel duplo) é a mesma nos três.
  * @property {boolean} disabled - Desabilita o grupo inteiro
  * @property {string} id - Base dos ids internos; passe em SSR para os ids já saírem no HTML do servidor
  * @property {string} className - Classes CSS adicionais
@@ -63,7 +63,7 @@ export interface ColorPickerProps {
     allowCustom?: boolean;
     customLabel?: string;
     customErrorMessage?: string;
-    size?: "sm" | "md";
+    size?: "xs" | "sm" | "md";
     disabled?: boolean;
     id?: string;
     className?: string;

package/dist/components/DataTable/DataTable.css

@@ -212,6 +212,73 @@
   padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-nano); /* 6px: candidato a novo token; 4px; 8px */
 }
 
+/* ── Cabeçalho escuro (headerVariant="dark") ──
+   O navy do CrisDoc, com o texto claro do par `background-dark` / `neutral-light-pure`
+   (os dois viram juntos com o tema). Ordenação e foco no cabeçalho escuro usam o
+   texto claro, não o azul de ação, que não tem contraste sobre o navy. */
+.umds-datatable--header-dark .umds-datatable__thead {
+  background: var(--umds-semantic-color-background-dark);
+  border-bottom-color: var(--umds-semantic-color-background-dark);
+}
+
+.umds-datatable--header-dark .umds-datatable__th,
+.umds-datatable--header-dark .umds-datatable__th--sortable:hover,
+.umds-datatable--header-dark .umds-datatable__th--sorted {
+  color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+.umds-datatable--header-dark .umds-datatable__sort-icon {
+  color: var(--umds-semantic-color-neutral-light-down);
+}
+
+.umds-datatable--header-dark .umds-datatable__sort-icon--active {
+  color: inherit;
+}
+
+.umds-datatable--header-dark .umds-datatable__sort-button:focus-visible {
+  outline-color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+/* ── Caixa alta no cabeçalho (headerUppercase) ── */
+.umds-datatable--header-uppercase .umds-datatable__th {
+  text-transform: uppercase;
+  letter-spacing: var(--umds-primitive-font-letter-spacing-wide);
+}
+
+/* ── Cabeçalho só para o leitor de tela (hideHeader) ──
+   Visualmente oculto, não removido: as colunas continuam nomeadas. */
+.umds-datatable--header-hidden .umds-datatable__thead {
+  position: absolute;
+  width: var(--umds-primitive-border-width-hairline);
+  height: var(--umds-primitive-border-width-hairline);
+  margin: calc(-1 * var(--umds-primitive-border-width-hairline));
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── Zebra (striped) ── */
+.umds-datatable__row--striped,
+.umds-datatable__row--striped.umds-datatable__row--group {
+  background: var(--umds-semantic-color-background-light);
+}
+
+.umds-datatable__row--striped:hover {
+  background: var(--umds-semantic-color-neutral-light-medium);
+}
+
+.umds-datatable__row--striped.umds-datatable__row--selected {
+  background: var(--umds-semantic-color-primary-light);
+}
+
+/* ── Linha destacada (selectedRowKeys / isRowSelected) ──
+   Além do fundo, uma barra de 4px à esquerda: o destaque não depende só da cor. */
+.umds-datatable__row--highlighted > :first-child {
+  box-shadow: inset var(--umds-primitive-border-width-thick) 0 0 var(--umds-semantic-color-primary-pure);
+}
+
 /* ── Estado vazio ── */
 .umds-datatable__td--empty {
   padding: var(--umds-primitive-spacing-md) var(--umds-primitive-spacing-xxxs); /* 48px 16px */
@@ -233,6 +300,106 @@
   color: var(--umds-semantic-color-neutral-light-down); /* #D5D5D5 */
 }
 
+.umds-datatable__empty-desc {
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+/* ── Linhas hierárquicas (treeData) ──
+   `role="treegrid"`. A primeira coluna de dados leva o recuo por nível, os fios e o
+   botão de expandir/recolher. Os fios são colunas de 24px (o passo do recuo) desenhadas
+   por trás do conteúdo, de ponta a ponta da célula, então atravessam o padding e se
+   emendam de uma linha à outra. */
+.umds-datatable__td--tree {
+  position: relative;
+}
+
+.umds-datatable__tree-guides {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--umds-primitive-spacing-xxxs);
+  display: flex;
+  pointer-events: none;
+}
+
+.umds-datatable__guide {
+  position: relative;
+  flex: 0 0 var(--umds-primitive-spacing-xxs);
+}
+
+.umds-datatable__guide--line::before,
+.umds-datatable__guide--tee::before,
+.umds-datatable__guide--elbow::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  border-left: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+}
+
+.umds-datatable__guide--elbow::before {
+  bottom: 50%;
+}
+
+.umds-datatable__guide--tee::after,
+.umds-datatable__guide--elbow::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  right: 0;
+  border-top: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+}
+
+.umds-datatable__tree-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-quarck);
+  min-width: 0;
+}
+
+.umds-datatable__tree-text {
+  min-width: 0;
+}
+
+.umds-datatable__tree-toggle,
+.umds-datatable__tree-spacer {
+  flex: 0 0 var(--umds-primitive-spacing-xxs);
+  width: var(--umds-primitive-spacing-xxs);
+  height: var(--umds-primitive-spacing-xxs);
+}
+
+.umds-datatable__tree-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: var(--umds-primitive-border-radius-sm);
+  background: none;
+  color: var(--umds-semantic-color-neutral-dark-down);
+  cursor: pointer;
+}
+
+.umds-datatable__tree-toggle:hover {
+  background: var(--umds-semantic-color-neutral-light-medium);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-datatable__tree-toggle:focus-visible {
+  outline: 2px solid var(--umds-semantic-color-primary-pure);
+  outline-offset: 2px;
+}
+
+.umds-datatable--tree .umds-datatable__row:focus-visible {
+  outline: 2px solid var(--umds-semantic-color-primary-pure);
+  outline-offset: -2px;
+}
+
 /* ── Skeleton ── */
 .umds-datatable__skeleton {
   height: 16px;
@@ -301,6 +468,13 @@
   overflow-wrap: anywhere;
 }
 
+/* Compacto na tabela de documento: fonte de 12px (a menor da escala) e célula de 4px × 8px. */
+.umds-datatable--document.umds-datatable--compact .umds-datatable__th,
+.umds-datatable--document.umds-datatable--compact .umds-datatable__td {
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano);
+  font-size: var(--umds-primitive-font-size-xxxs);
+}
+
 @media print {
   .umds-datatable--document {
     overflow-x: visible;

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

@@ -35,7 +35,35 @@ export interface DataTableColumn {
  * @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} density - Densidade das células: 'default' | 'compact'. Com `variant="document"`,
+ *   o compacto também leva a fonte a 12px (a escala do DS não tem 13px).
+ * @property {string} headerVariant - Cabeçalho: 'default' (claro) | 'dark' (navy, texto claro; o cabeçalho
+ *   escuro do CrisDoc). Cores pelos tokens `background-dark` e `neutral-light-pure`, então o tema acompanha.
+ * @property {boolean} headerUppercase - Rótulos do cabeçalho em caixa alta. Opt-in; vale para qualquer
+ *   `headerVariant`.
+ * @property {boolean} striped - Zebra: as linhas ímpares (a segunda, a quarta…) ganham o fundo claro.
+ * @property {Array<string|number>} selectedRowKeys - Chaves das linhas DESTACADAS (requer rowKey). Só
+ *   destaque visual (fundo, barra à esquerda e `aria-selected`), sem checkbox: serve à linha "aberta" de
+ *   uma lista mestre-detalhe. Não confunda com `selectedKeys`, que é a seleção por checkbox.
+ * @property {function} isRowSelected - Destaque por função `(row, rowIndex) => boolean`, com o mesmo
+ *   efeito de `selectedRowKeys`. Use quando a regra não cabe numa lista de chaves.
+ * @property {IconProp} emptyIcon - Ícone do estado vazio (objeto Font Awesome importado). Padrão: `faInbox`.
+ * @property {string} emptyDescription - Texto de apoio abaixo da `emptyMessage` do estado vazio
+ * @property {boolean} hideHeader - Esconde o cabeçalho SÓ NA TELA: as colunas continuam nomeadas para o
+ *   leitor de tela (a linha de cabeçalho fica visualmente oculta, não removida)
+ * @property {boolean} treeData - Linhas hierárquicas: cada linha pode ter filhas em `row[childrenKey]`.
+ *   A tabela vira `role="treegrid"` (`aria-level`, `aria-posinset`, `aria-setsize`, `aria-expanded` nas
+ *   linhas), a primeira coluna ganha recuo por nível, fios e o botão de expandir/recolher. Teclado: ↓ ↑ andam
+ *   entre as linhas visíveis, → expande (ou desce à primeira filha), ← recolhe (ou sobe ao pai), Home e End.
+ *   Com `treeData`, `onRowClick`, `onSelect` e os índices dos callbacks contam as linhas VISÍVEIS.
+ * @property {string} childrenKey - Campo com as linhas filhas. Padrão: 'children'
+ * @property {Array<string|number>} expandedKeys - Chaves das linhas expandidas (controlado). A chave é o
+ *   `rowKey` da linha; sem `rowKey`, o caminho de índices ("0", "0.1")
+ * @property {Array<string|number>} defaultExpandedKeys - Chaves expandidas na abertura (não controlado)
+ * @property {boolean} defaultExpandAll - Abre a árvore toda na primeira renderização (não controlado)
+ * @property {function} onExpand - Callback ao expandir ou recolher: `(chavesExpandidas, linha, expandida)`
+ * @property {string} expandLabel - Nome acessível do botão de expandir. Troque para traduzir.
+ * @property {string} collapseLabel - Nome acessível do botão de recolher. Troque para traduzir.
  * @property {string} sortKey - Chave da coluna atualmente ordenada
  * @property {string} sortDirection - Direção da ordenação: 'asc' | 'desc'
  * @property {number} skeletonRows - Número de linhas skeleton exibidas no loading
@@ -54,7 +82,7 @@ export interface DataTableColumn {
  * @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`.
+ * @quandoNaoUsar Para hierarquia pai-filho SEM colunas (navegação, seleção de pastas) — use `Tree`; com colunas de dado por linha, use `treeData`. 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[];
@@ -70,6 +98,38 @@ export interface DataTableProps {
     /** `document`: tabela de conteúdo de documento, imprimível e sem interação. @default 'default' */
     variant?: "default" | "document";
     density?: "default" | "compact";
+    /** `dark`: cabeçalho navy com texto claro (o do CrisDoc). @default 'default' */
+    headerVariant?: "default" | "dark";
+    /** Rótulos do cabeçalho em caixa alta. @default false */
+    headerUppercase?: boolean;
+    /** Zebra nas linhas ímpares. @default false */
+    striped?: boolean;
+    /** Chaves das linhas destacadas (só visual, sem checkbox; requer `rowKey`). */
+    selectedRowKeys?: Array<string | number>;
+    /** Destaque de linha por função `(row, rowIndex) => boolean`. */
+    isRowSelected?: (row: Record<string, any>, rowIndex: number) => boolean;
+    /** Ícone do estado vazio (objeto Font Awesome importado). @default faInbox */
+    emptyIcon?: IconProp;
+    /** Texto de apoio abaixo de `emptyMessage`. */
+    emptyDescription?: string;
+    /** Esconde o cabeçalho só na tela; o leitor de tela continua lendo as colunas. @default false */
+    hideHeader?: boolean;
+    /** Linhas hierárquicas (`role="treegrid"`), com filhas em `row[childrenKey]`. @default false */
+    treeData?: boolean;
+    /** Campo das linhas filhas. @default 'children' */
+    childrenKey?: string;
+    /** Chaves das linhas expandidas (controlado). */
+    expandedKeys?: Array<string | number>;
+    /** Chaves expandidas na abertura (não controlado). */
+    defaultExpandedKeys?: Array<string | number>;
+    /** Abre a árvore toda na abertura (não controlado). @default false */
+    defaultExpandAll?: boolean;
+    /** Ao expandir ou recolher: `(chavesExpandidas, linha, expandida)`. */
+    onExpand?: (expandedKeys: Array<string | number>, row: Record<string, any>, expanded: boolean) => void;
+    /** Nome acessível do botão de expandir. Troque para traduzir. @default 'Expandir' */
+    expandLabel?: string;
+    /** Nome acessível do botão de recolher. Troque para traduzir. @default 'Recolher' */
+    collapseLabel?: string;
     sortKey?: string;
     sortDirection?: "asc" | "desc";
     skeletonRows?: number;
@@ -83,5 +143,6 @@ export interface DataTableProps {
     /** 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;
 }
+import { IconProp } from "../Icon/Icon";
 declare function DataTable(props: DataTableProps): import("react/jsx-runtime").JSX.Element;
 export default DataTable;