@1doc/1ds-react 2.9.0 → 2.11.0

package/dist/components/Accordion/Accordion.d.ts

@@ -14,8 +14,11 @@ export interface AccordionItemData {
 /**
  * Accordion component — lista de painéis expansíveis (sanfona).
  * @property {AccordionItemData[]} items - Itens do accordion (id, title, content, disabled?, defaultOpen?). Conteúdo livre por item: no React, `content` aceita nó; no Vue, o slot `#content-<id>` (recebe `{ item }`).
+ * @property {string[]} open - Ids dos itens abertos (modo controlado). Sem a prop, o Accordion guarda o próprio estado (começando pelos `defaultOpen`). Com ela, quem manda é o app: abrir ou fechar chama `onOpenChange` e o painel só muda quando `open` muda. Serve para lembrar a escolha entre visitas.
+ * @property {function} onOpenChange - Chamado ao abrir ou fechar um item, com a nova lista de ids abertos (`(openIds: string[]) => void`). Funciona também sem `open`.
  * @property {boolean} multiple - Permite manter vários painéis abertos ao mesmo tempo
  * @property {string} variant - Estilo visual: 'default' | 'bordered' | 'separated'
+ * @property {string} titleVariant - Título dos itens: 'default' | 'neutral'. O `neutral` é o título de texto, 14px na cor do texto, sem cor de ação (como um `Button text` neutro), para o accordion do CrisDoc.
  * @property {string} className - Classes CSS adicionais
  * @quandoUsar Conteúdo que fica RECOLHIDO até o usuário querer: FAQ, seções opcionais de formulário, detalhes secundários. Vários podem abrir juntos com `multiple`.
  * @quandoNaoUsar Para alternar entre visões equivalentes sempre disponíveis — use `Tabs`. Se o conteúdo é essencial, não esconda atrás de acordeão.
@@ -23,7 +26,13 @@ export interface AccordionItemData {
 export interface AccordionProps {
     items: AccordionItemData[];
     multiple?: boolean;
+    /** Ids dos itens abertos (controlado). Sem a prop, o estado é interno. */
+    open?: string[];
+    /** Abriu ou fechou um item: recebe a nova lista de ids abertos. */
+    onOpenChange?: (openIds: string[]) => void;
     variant?: "default" | "bordered" | "separated";
+    /** Título dos itens. `neutral`: 14px na cor do texto, peso médio. @default 'default' */
+    titleVariant?: "default" | "neutral";
     className?: string;
 }
 declare function Accordion(props: AccordionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/Accordion.js

@@ -9,8 +9,13 @@ function Accordion(props) {
     function itemList() {
         return props.items || [];
     }
+    function currentOpen() {
+        return props.open !== undefined && props.open !== null
+            ? props.open
+            : openIds;
+    }
     function isOpen(id) {
-        return openIds.includes(id);
+        return currentOpen().includes(id);
     }
     function triggerId(id) {
         return `umds-accordion-trigger-${id}`;
@@ -21,20 +26,28 @@ function Accordion(props) {
     function toggle(id, disabled) {
         if (disabled)
             return;
-        if (openIds.includes(id)) {
-            setOpenIds(openIds.filter((x) => x !== id));
+        const atuais = currentOpen();
+        let proximos;
+        if (atuais.includes(id)) {
+            proximos = atuais.filter((x) => x !== id);
         }
         else if (props.multiple) {
-            setOpenIds([...openIds, id]);
+            proximos = [...atuais, id];
         }
         else {
-            setOpenIds([id]);
+            proximos = [id];
         }
+        // Controlado: quem muda é o app (o `open` novo). Sem `open`, o estado interno.
+        if (props.open === undefined || props.open === null)
+            setOpenIds(proximos);
+        if (props.onOpenChange)
+            props.onOpenChange(proximos);
     }
     function wrapperClasses() {
         return [
             "umds-accordion",
             `umds-accordion--${props.variant || "default"}`,
+            props.titleVariant === "neutral" ? "umds-accordion--title-neutral" : "",
             props.className,
         ]
             .filter(Boolean)

package/dist/components/AppSubheader/AppSubheader.css

@@ -21,14 +21,23 @@
 }
 
 /* O contexto cede espaço e rola sozinho: uma trilha longa não pode empurrar
-   a busca e as ações para fora da tela. */
+   a busca e as ações para fora da tela.
+   Só rola na HORIZONTAL, e só quando a trilha estoura. `overflow-x: auto` sozinho
+   faz o `overflow-y` computar para `auto` também, e o `line-height` do item do
+   Breadcrumb (12px, numa linha de 12px) deixa o conteúdo 2px acima da caixa de 12px
+   (medido: scrollHeight 14, clientHeight 12): com a trilha só na página atual (sem
+   link para focar) o axe acusa `scrollable-region-focusable`. Por isso a região
+   ocupa a altura da barra (`align-self: stretch`, o conteúdo segue centralizado) e o
+   eixo vertical é cortado: não há o que rolar na vertical. */
 .umds-app-subheader__contexto {
   flex: 1;
+  align-self: stretch;
   min-width: 0;
   display: flex;
   align-items: center;
   gap: var(--umds-primitive-spacing-nano);
   overflow-x: auto;
+  overflow-y: hidden;
   scrollbar-width: none;
 }
 

package/dist/components/AttachmentCard/AttachmentCard.css

@@ -183,18 +183,10 @@
 }
 
 .umds-attachment-card__campo {
-    display: flex;
-    align-items: center;
-    gap: var(--umds-primitive-spacing-nano);
     padding: var(--umds-primitive-spacing-nano) 0;
     border-top: 1px solid var(--umds-semantic-color-neutral-light-medium);
 }
 
-.umds-attachment-card__campo-texto {
-    flex: 1;
-    min-width: 0;
-}
-
 .umds-attachment-card__campo-rotulo {
     color: var(--umds-semantic-color-neutral-dark-down);
     font-size: var(--umds-primitive-font-size-xxxs);
@@ -202,7 +194,12 @@
     text-transform: uppercase;
 }
 
+/* O valor e o botão de copiar na mesma linha: o botão mora dentro do <dd> (o <dl> só aceita
+   <dt> e <dd> dentro do <div>). */
 .umds-attachment-card__campo-valor {
+    display: flex;
+    align-items: center;
+    gap: var(--umds-primitive-spacing-nano);
     margin: var(--umds-primitive-spacing-micro) 0 0; /* 2px: respiro rótulo→valor */
     font-size: var(--umds-primitive-font-size-xxs);
     font-weight: var(--umds-primitive-font-weight-bold);
@@ -210,6 +207,11 @@
     overflow-wrap: anywhere;
 }
 
+.umds-attachment-card__campo-valor-texto {
+    flex: 1;
+    min-width: 0;
+}
+
 /* Alvo de toque WCAG 2.5.8: 32×32. */
 .umds-attachment-card__copiar {
     display: inline-flex;

package/dist/components/AttachmentCard/AttachmentCard.d.ts

@@ -15,6 +15,7 @@ import './AttachmentCard.css';
  * @property {boolean} closePanelOnAction - Fecha o painel e devolve o foco ao selo quando alguém aciona um botão ou link de dentro dele (o botão "Aplicar sugestão" do painel de IA). O botão de copiar um campo não conta.
  * @property {Function} onCopyField - Avisa quando um campo do painel é copiado (recebe o campo)
  * @property {IconProp} icon - Ícone central. Padrão: documento.
+ * @property {string} size - Tamanho do cartão: 'md' (padrão) | 'sm'. O `sm` é o compacto do CrisDoc: ícone do preview de 40px (no `md`, 48px) e ícone do rodapé de 12px (no `md`, 16px). A largura e os selos não mudam.
  * @property {Function} onOpen - Abre o anexo. Com ele o cartão inteiro vira alvo de clique, com um único ponto de foco.
  * @property {string} openAriaLabel - Nome acessível da ação de abrir. Padrão: "Abrir <tipo>: <arquivo>".
  * @property {string} className - Classes CSS adicionais
@@ -60,6 +61,8 @@ export interface AttachmentCardProps {
     closePanelOnAction?: boolean;
     onCopyField?: (field: AttachmentCardField) => void;
     icon?: IconProp;
+    /** Tamanho do cartão. `sm`: ícone do preview de 40px e ícone do rodapé de 12px. @default 'md' */
+    size?: "md" | "sm";
     onOpen?: (event?: any) => void;
     openAriaLabel?: string;
     /** Complemento lido depois do selo, para dizer de qual documento ele é. Recebe o tipo de documento (ou o nome do arquivo). Troque para traduzir. @default (subject) => 'conferência de ' + subject */

package/dist/components/AttachmentCard/AttachmentCard.js

@@ -29,6 +29,7 @@ function AttachmentCard(props) {
         return [
             "umds-attachment-card",
             props.onOpen ? "umds-attachment-card--interativo" : "",
+            props.size === "sm" ? "umds-attachment-card--sm" : "",
             props.className,
         ]
             .filter(Boolean)
@@ -145,6 +146,12 @@ function AttachmentCard(props) {
             return faFileExcel;
         return faFile;
     }
+    function tamanhoIconeCentral() {
+        return props.size === "sm" ? "40px" : "48px";
+    }
+    function tamanhoIconeRodape() {
+        return props.size === "sm" ? "12px" : undefined;
+    }
     function iconeCentral() {
         return props.icon || faFileLines;
     }
@@ -386,6 +393,6 @@ function AttachmentCard(props) {
             desligarObservadores();
         };
     }, []);
-    return (_jsxs("div", { className: classes(), id: props.id, children: [_jsxs("div", { className: "umds-attachment-card__topo", children: [temSelo() && !temDetalhe() ? (_jsxs("span", { className: statusClasses(), children: [seloIcone() ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: seloIcone() })) : null, _jsx("span", { className: "umds-attachment-card__status-texto", children: props.statusLabel })] })) : null, temDetalhe() ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", "aria-haspopup": "dialog", ref: seloRef, className: statusBotaoClasses(), "aria-expanded": ariaExpandidoTexto(), "aria-controls": ariaControlsTexto(), onMouseEnter: (event) => abrir(false), onMouseLeave: (event) => agendarFechar(), onClick: (event) => alternar(), onKeyDown: (event) => teclaNoSelo(event), onBlur: (event) => focoSaiu(event), children: [seloIcone() ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: seloIcone() })) : null, _jsx("span", { className: "umds-attachment-card__status-texto", children: props.statusLabel }), _jsx("span", { className: "umds-attachment-card__sr", children: seloComplemento() })] }), _jsx(Portal, { children: aberto ? (_jsx("span", { className: "umds-attachment-card__flutuante", ref: flutuanteRef, style: flutuanteEstilo(), children: _jsxs("div", { className: "umds-attachment-card__detalhe", role: "dialog", "aria-modal": "false", ref: painelRef, id: painelId(), "aria-labelledby": painelNomeadoPor(), "aria-label": painelRotulo(), tabIndex: -1, style: detalheEstilo(), onClick: (event) => cliqueNoPainel(event), onMouseEnter: (event) => cancelarFechar(), onMouseLeave: (event) => agendarFechar(), onKeyDown: (event) => teclaNoPainel(event), children: [_jsx("span", { className: "umds-attachment-card__sr", role: "status", "aria-live": "polite", children: anuncio }), props.panel ? (_jsx(_Fragment, { children: props.panel })) : (_jsx(_Fragment, { children: _jsxs(_Fragment, { children: [_jsxs("div", { className: "umds-attachment-card__detalhe-topo", children: [_jsx("span", { "aria-hidden": "true", className: detalheIconeClasses(), children: _jsx(Icon, { size: "md", variant: "inherit", icon: detalheIcone() }) }), _jsx("span", { className: "umds-attachment-card__detalhe-titulo", id: tituloId(), children: detalheTitulo() })] }), detalheDescricao() ? (_jsx("p", { className: "umds-attachment-card__detalhe-descricao", children: detalheDescricao() })) : null, detalheCampos().length > 0 ? (_jsx("dl", { className: "umds-attachment-card__campos", children: detalheCampos()?.map((campo) => (_jsxs("div", { className: "umds-attachment-card__campo", children: [_jsxs("div", { className: "umds-attachment-card__campo-texto", children: [_jsx("dt", { className: "umds-attachment-card__campo-rotulo", children: campo.label }), _jsx("dd", { className: "umds-attachment-card__campo-valor", children: campo.value })] }), campo.copyable ? (_jsx("button", { type: "button", className: "umds-attachment-card__copiar", "aria-label": rotuloCopiar(campo), onClick: (event) => copiarCampo(campo), children: _jsx(Icon, { size: "sm", variant: "inherit", icon: iconeCopiar(campo) }) })) : null] }, campo.label))) })) : null] }) }))] }) })) : null })] })) : null] }), _jsx("div", { className: "umds-attachment-card__preview", "aria-hidden": "true", children: _jsx(Icon, { customSize: "48px", variant: "inherit", icon: iconeCentral() }) }), _jsx("div", { className: "umds-attachment-card__tipo-area", children: props.documentType ? (_jsxs("span", { className: "umds-attachment-card__tipo", children: [_jsx("span", { className: "umds-attachment-card__tipo-texto", children: props.documentType }), props.required ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "umds-attachment-card__obrigatorio", "aria-hidden": "true", children: "*" }), _jsx("span", { className: "umds-attachment-card__sr", children: props.requiredLabel || "(obrigatório)" })] })) : null] })) : null }), _jsxs("div", { className: "umds-attachment-card__rodape", title: props.fileName, children: [_jsx("span", { className: "umds-attachment-card__rodape-icone", "aria-hidden": "true", children: _jsx(Icon, { size: "sm", variant: "inherit", icon: iconeArquivo() }) }), props.onOpen ? (_jsx("button", { type: "button", className: "umds-attachment-card__nome umds-attachment-card__abrir", "aria-label": rotuloAbrir(), onClick: (event) => handleOpen(event), children: props.fileName })) : (_jsx("span", { className: "umds-attachment-card__nome", children: props.fileName }))] })] }));
+    return (_jsxs("div", { className: classes(), id: props.id, children: [_jsxs("div", { className: "umds-attachment-card__topo", children: [temSelo() && !temDetalhe() ? (_jsxs("span", { className: statusClasses(), children: [seloIcone() ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: seloIcone() })) : null, _jsx("span", { className: "umds-attachment-card__status-texto", children: props.statusLabel })] })) : null, temDetalhe() ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", "aria-haspopup": "dialog", ref: seloRef, className: statusBotaoClasses(), "aria-expanded": ariaExpandidoTexto(), "aria-controls": ariaControlsTexto(), onMouseEnter: (event) => abrir(false), onMouseLeave: (event) => agendarFechar(), onClick: (event) => alternar(), onKeyDown: (event) => teclaNoSelo(event), onBlur: (event) => focoSaiu(event), children: [seloIcone() ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: seloIcone() })) : null, _jsx("span", { className: "umds-attachment-card__status-texto", children: props.statusLabel }), _jsx("span", { className: "umds-attachment-card__sr", children: seloComplemento() })] }), _jsx(Portal, { children: aberto ? (_jsx("span", { className: "umds-attachment-card__flutuante", ref: flutuanteRef, style: flutuanteEstilo(), children: _jsxs("div", { className: "umds-attachment-card__detalhe", role: "dialog", "aria-modal": "false", ref: painelRef, id: painelId(), "aria-labelledby": painelNomeadoPor(), "aria-label": painelRotulo(), tabIndex: -1, style: detalheEstilo(), onClick: (event) => cliqueNoPainel(event), onMouseEnter: (event) => cancelarFechar(), onMouseLeave: (event) => agendarFechar(), onKeyDown: (event) => teclaNoPainel(event), children: [_jsx("span", { className: "umds-attachment-card__sr", role: "status", "aria-live": "polite", children: anuncio }), props.panel ? (_jsx(_Fragment, { children: props.panel })) : (_jsx(_Fragment, { children: _jsxs(_Fragment, { children: [_jsxs("div", { className: "umds-attachment-card__detalhe-topo", children: [_jsx("span", { "aria-hidden": "true", className: detalheIconeClasses(), children: _jsx(Icon, { size: "md", variant: "inherit", icon: detalheIcone() }) }), _jsx("span", { className: "umds-attachment-card__detalhe-titulo", id: tituloId(), children: detalheTitulo() })] }), detalheDescricao() ? (_jsx("p", { className: "umds-attachment-card__detalhe-descricao", children: detalheDescricao() })) : null, detalheCampos().length > 0 ? (_jsx("dl", { className: "umds-attachment-card__campos", children: detalheCampos()?.map((campo) => (_jsxs("div", { className: "umds-attachment-card__campo", children: [_jsx("dt", { className: "umds-attachment-card__campo-rotulo", children: campo.label }), _jsxs("dd", { className: "umds-attachment-card__campo-valor", children: [_jsx("span", { className: "umds-attachment-card__campo-valor-texto", children: campo.value }), campo.copyable ? (_jsx("button", { type: "button", className: "umds-attachment-card__copiar", "aria-label": rotuloCopiar(campo), onClick: (event) => copiarCampo(campo), children: _jsx(Icon, { size: "sm", variant: "inherit", icon: iconeCopiar(campo) }) })) : null] })] }, campo.label))) })) : null] }) }))] }) })) : null })] })) : null] }), _jsx("div", { className: "umds-attachment-card__preview", "aria-hidden": "true", children: _jsx(Icon, { variant: "inherit", icon: iconeCentral(), customSize: tamanhoIconeCentral() }) }), _jsx("div", { className: "umds-attachment-card__tipo-area", children: props.documentType ? (_jsxs("span", { className: "umds-attachment-card__tipo", children: [_jsx("span", { className: "umds-attachment-card__tipo-texto", children: props.documentType }), props.required ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "umds-attachment-card__obrigatorio", "aria-hidden": "true", children: "*" }), _jsx("span", { className: "umds-attachment-card__sr", children: props.requiredLabel || "(obrigatório)" })] })) : null] })) : null }), _jsxs("div", { className: "umds-attachment-card__rodape", title: props.fileName, children: [_jsx("span", { className: "umds-attachment-card__rodape-icone", "aria-hidden": "true", children: _jsx(Icon, { size: "sm", variant: "inherit", icon: iconeArquivo(), customSize: tamanhoIconeRodape() }) }), props.onOpen ? (_jsx("button", { type: "button", className: "umds-attachment-card__nome umds-attachment-card__abrir", "aria-label": rotuloAbrir(), onClick: (event) => handleOpen(event), children: props.fileName })) : (_jsx("span", { className: "umds-attachment-card__nome", children: props.fileName }))] })] }));
 }
 export default AttachmentCard;

package/dist/components/Badge/Badge.css

@@ -3,7 +3,7 @@
    Variantes: neutral, positive, negative, info, primary, new
    Aparências (appearance): solid, soft, outlined
    Tamanhos: 2xs, xs, sm, md, lg, pill
-   Modificador: attached (rótulo colado no topo de um card)
+   Modificador: attached (rótulo colado no topo de um card), attachedSide left | right
    ============================================ */
 
 .umds-badge {
@@ -60,12 +60,12 @@
 
 /* ── Tamanhos — padding + gap por tamanho (sem height fixa) ── */
 
-/* 2xs: 16px de altura (10 de fonte + 2 + 2 de padding + 2 de borda). A fonte de
-   10px não está na escala do DS (menor degrau: 12px); é o selo compacto do
-   CrisDoc, sem token equivalente. */
+/* 2xs: 16px de altura (10 de fonte + 2 + 2 de padding + 2 de borda) e 8px de padding
+   lateral, como o selo do CrisDoc. A fonte de 10px não está na escala do DS (menor
+   degrau: 12px), sem token equivalente. */
 .umds-badge--2xs {
     font-size: 0.625rem; /* 10px: fora da escala, selo compacto */
-    padding: var(--umds-primitive-spacing-micro) var(--umds-primitive-spacing-quarck);
+    padding: var(--umds-primitive-spacing-micro) var(--umds-primitive-spacing-nano);
     gap: var(--umds-primitive-spacing-micro);
     border-radius: var(--umds-primitive-border-radius-xs); /* 4px */
 }
@@ -252,5 +252,27 @@
     position: absolute;
     top: 0;
     left: 0;
+    /* 22px: o rótulo do CrisDoc (24 - 2). Os tamanhos menores (xs, 2xs) sobem a ele; o md já mede 22. */
+    min-height: calc(var(--umds-primitive-spacing-xxs) - var(--umds-primitive-spacing-micro));
     border-radius: 0 0 var(--umds-primitive-border-radius-sm) var(--umds-primitive-border-radius-sm);
 }
+
+/* Canto direito (attachedSide="right"): o rótulo cola no canto superior direito. */
+.umds-badge--attached.umds-badge--attached-right {
+    left: auto;
+    right: 0;
+}
+
+/* Neutro colado: cinza claro com texto escuro (o "Tarefa manual" do CrisDoc).
+   O `solid` neutro é cinza escuro com texto branco, pesado demais para um rótulo de card. */
+.umds-badge--attached.umds-badge--neutral.umds-badge--solid {
+    background-color: var(--umds-semantic-color-neutral-light-medium);
+    color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+/* attachedTone="dark": o neutro escuro do CrisDoc. O ardósia do CrisDoc dá 2,9:1 com texto branco; o par
+   neutral-dark-down + branco dá 7,3:1 e inverte sozinho nos temas escuros. */
+.umds-badge--attached.umds-badge--neutral.umds-badge--solid.umds-badge--attached-dark {
+    background-color: var(--umds-semantic-color-neutral-dark-down);
+    color: var(--umds-semantic-color-neutral-light-pure);
+}

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

@@ -13,19 +13,35 @@ export interface BadgeProps {
      */
     variant?: "neutral" | "positive" | "negative" | "info" | "primary" | "new";
     /**
-     * Tamanho do badge. `2xs` é o compacto (16px, fonte de 10px) para selo de
-     * setor e de contagem dentro de linha de lista e card.
+     * Tamanho do badge. `2xs` é o compacto (16px, fonte de 10px, 8px de padding
+     * lateral) para selo de setor e de contagem dentro de linha de lista e card.
      * @default 'md'
      */
     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";
+    /**
+     * Tom do rótulo colado neutro e sólido: `light` (padrão, cinza claro com texto escuro) ou `dark` (cinza
+     * escuro com texto branco, o rótulo escuro do CrisDoc). Só vale com `attached`, `variant="neutral"` e
+     * `appearance="solid"`; as outras variantes ignoram. O rótulo colado mede 22px de altura.
+     * @default 'light'
+     */
+    attachedTone?: "light" | "dark";
     /**
      * Estilo visual do badge.
      * @default 'soft'

package/dist/components/Badge/Badge.js

@@ -8,6 +8,12 @@ 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.attached && props.attachedTone === "dark"
+                ? "umds-badge--attached-dark"
+                : "",
             props.className,
         ]
             .filter(Boolean)

package/dist/components/Button/Button.css

@@ -56,6 +56,11 @@
   font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
 }
 
+/* density="comfortable": o sm com o padding de 12px do CrisDoc. O botão só de ícone tem largura fixa e fica de fora. */
+.umds-button--sm.umds-button--comfortable:not(.umds-button--icon) {
+  padding: 0 var(--umds-primitive-spacing-mini); /* 12px */
+}
+
 .umds-button--md {
   height: var(--umds-primitive-spacing-sm); /* 40px */
   padding: 0 var(--umds-primitive-spacing-xxxs); /* 16px */

package/dist/components/Button/Button.d.ts

@@ -3,6 +3,7 @@ import './Button.css';
  * Button — botão de ação com variantes, tamanhos, ícones e estado de carregamento.
  * @property {string} variant - Variante visual: 'primary' | 'secondary' | 'neutral' | 'neutral-text' | 'text' | 'negative' | 'negative-outlined' | 'icon'. `neutral` é o contornado cinza; `neutral-text` é o texto sem borda e sem azul, para barras de ações onde nenhum botão é a ação principal.
  * @property {string} size - Tamanho do botão: 'xs' (26px, para dentro de card e linha de lista) | 'sm' (32px) | 'md' (40px) | 'lg' (48px)
+ * @property {string} density - 'default' (padrão) | 'comfortable'. O `comfortable` leva o padding lateral do `sm` de 8px a 12px (o botão pequeno do CrisDoc); a altura (32px) não muda. Nos outros tamanhos não faz diferença: `xs` já usa 12px, `md` 16px e `lg` 24px. Sem a prop, nenhum botão existente muda.
  * @property {boolean} disabled - Desabilita o botão
  * @property {string} type - Tipo nativo do botão: 'button' | 'submit' | 'reset'
  * @property {Function} onClick - Callback disparado no clique
@@ -27,6 +28,8 @@ import './Button.css';
 export interface ButtonProps {
     variant?: "primary" | "secondary" | "neutral" | "neutral-text" | "text" | "negative" | "negative-outlined" | "icon";
     size?: "xs" | "sm" | "md" | "lg";
+    /** `comfortable`: o `sm` com 12px de padding lateral (o padrão é 8px). @default 'default' */
+    density?: "default" | "comfortable";
     disabled?: boolean;
     type?: "button" | "submit" | "reset";
     children?: any;

package/dist/components/Button/Button.js

@@ -9,6 +9,7 @@ function Button(props) {
             "umds-button",
             `umds-button--${props.variant || "primary"}`,
             `umds-button--${props.size || "md"}`,
+            props.density === "comfortable" ? "umds-button--comfortable" : "",
             props.fullWidth ? "umds-button--full-width" : "",
             props.className,
         ]

package/dist/components/Calendar/Calendar.css

@@ -171,6 +171,16 @@
   cursor: pointer;
 }
 
+/* density="compact": evento de 20px (16 + 4: o degrau do DS mais perto dos 20,5 do CrisDoc) e 4px de padding
+   lateral. A linha tem 16px de altura e 2px de padding em cima e embaixo. O título continua cortado com
+   reticências só quando passa da largura (a regra do título, abaixo). */
+.umds-calendar--compact .umds-calendar__event {
+  min-height: calc(var(--umds-primitive-spacing-xxxs) + var(--umds-primitive-spacing-quarck)); /* 20px */
+  padding: var(--umds-primitive-spacing-micro) var(--umds-primitive-spacing-quarck); /* 2px 4px */
+  line-height: var(--umds-primitive-spacing-xxxs); /* 16px */
+  align-items: center;
+}
+
 .umds-calendar__event:hover {
   filter: brightness(0.96);
 }

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)
@@ -64,6 +65,7 @@ export interface CalendarDayCell {
  * @property {string} today - O "hoje" do calendário (`YYYY-MM-DD`; padrão a data do sistema). Útil em testes e em demonstração.
  * @property {number} weekStartsOn - Primeiro dia da semana: 0 domingo (padrão) | 1 segunda
  * @property {number} maxVisible - Eventos por dia na visão de mês antes do "+N" (padrão 3)
+ * @property {string} density - 'default' | 'compact'. O `compact` aperta o evento: altura de 20px (o degrau do DS mais perto dos 20,5 do CrisDoc; o padrão dá 25) e 4px de padding lateral (o padrão tem 8), para o título caber inteiro onde antes cortava com reticências. O título só é cortado (com reticências) quando de fato passa da largura da célula.
  * @property {string} locale - Idioma dos nomes de mês e de dia (padrão 'pt-BR')
  * @property {string} ariaLabel - Nome acessível da grade (padrão: o título, ex.: "Maio 2026")
  * @property {string} previousLabel - Nome do botão de voltar (padrão "Anterior")
@@ -82,8 +84,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.
  */
@@ -98,6 +100,8 @@ export interface CalendarProps {
     today?: string;
     weekStartsOn?: 0 | 1;
     maxVisible?: number;
+    /** `compact`: evento de 20px com 4px de padding lateral. @default 'default' */
+    density?: "default" | "compact";
     locale?: string;
     ariaLabel?: string;
     previousLabel?: string;
@@ -111,9 +115,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/Calendar/Calendar.js

@@ -100,7 +100,12 @@ function Calendar(props) {
         ];
     }
     function rootClasses() {
-        return ["umds-calendar", "umds-calendar--" + viewValue(), props.className]
+        return [
+            "umds-calendar",
+            "umds-calendar--" + viewValue(),
+            props.density === "compact" ? "umds-calendar--compact" : "",
+            props.className,
+        ]
             .filter(Boolean)
             .join(" ");
     }

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

@@ -23,7 +23,8 @@ export interface CoachmarkStep {
  * O cartão é um diálogo modal (`role="dialog"`, `aria-modal`): o foco entra nele
  * ao abrir, o Tab fica preso nele, Esc sai do tour, as setas esquerda e direita
  * voltam e avançam, e o foco volta ao elemento de antes ao fechar. A cada passo o
- * leitor de tela ouve "2 de 8: título" (região `aria-live`).
+ * leitor de tela ouve "2 de 8: título" (região `aria-live`). Com um passo só não há contador ("1 de 1" não
+ * diz nada): o cartão mostra o título e o leitor de tela ouve só ele.
  *
  * O componente é CONTROLADO por `open`: o tour só existe com `open` verdadeiro, e
  * `onClose(motivo)` avisa quando ele quer fechar (`"finish"` no último
@@ -38,7 +39,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 +64,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);
@@ -61,7 +62,12 @@ function Coachmark(props) {
             .replace("{current}", String(index() + 1))
             .replace("{total}", String(stepCount()));
     }
+    function hasCounter() {
+        return stepCount() > 1;
+    }
     function announceText() {
+        if (!hasCounter())
+            return currentStep().title;
         return counterText() + ": " + currentStep().title;
     }
     function nextText() {
@@ -75,6 +81,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 +99,7 @@ function Coachmark(props) {
         return [
             "umds-coachmark",
             hasTarget ? "" : "umds-coachmark--no-target",
+            isModal() ? "" : "umds-coachmark--modeless",
             positioned ? "umds-coachmark--ready" : "",
         ]
             .filter(Boolean)
@@ -196,6 +211,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 +242,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 +261,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 +319,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 +359,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() }), hasCounter() ? (_jsx(Text, { as: "span", variant: "body2", weight: "bold", color: "primary", "aria-hidden": "true", children: counterText() })) : null, _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;