@1doc/1ds-react 2.10.0 → 2.11.1

package/dist/components/DataTable/DataTable.js

@@ -511,9 +511,24 @@ function DataTable(props) {
             .filter(Boolean)
             .join(" ");
     }
+    function toneOf(row, index) {
+        if (!props.rowTone)
+            return "";
+        const bruto = typeof props.rowTone === "function"
+            ? props.rowTone(row, index)
+            : row[props.rowTone];
+        const tom = bruto === undefined || bruto === null ? "" : String(bruto);
+        return tom === "negative" ||
+            tom === "positive" ||
+            tom === "info" ||
+            tom === "muted"
+            ? tom
+            : "";
+    }
     function rowClasses(row, rowIdx) {
         return [
             "umds-datatable__row",
+            toneOf(row, rowIdx) ? "umds-datatable__row--" + toneOf(row, rowIdx) : "",
             isSelected(row, rowIdx) || isHighlighted(row, rowIdx)
                 ? "umds-datatable__row--selected"
                 : "",

package/dist/components/Input/Input.css

@@ -257,6 +257,15 @@
   outline-offset: 0; /* exceção ao offset 2px: o botão vive DENTRO do campo, e o afastamento invadiria a borda */
 }
 
+/* ── variant="ghost": a busca dentro de um painel, sem a borda escura ──
+   Só o repouso muda (fundo claro e borda clara). Hover, foco, erro, desabilitado e somente leitura vêm das
+   regras do campo padrão, que têm mais especificidade (o :where zera a das cadeias de :not aqui), então o
+   hover escurece a borda e o foco segue com borda azul e anel. A moldura clara não é o único sinal do campo: o ícone, o placeholder e o cursor o dizem. */
+.umds-input--ghost:where(:not(.umds-input--error):not(.umds-input--disabled):not(.umds-input--readonly)) .umds-input__container {
+  background-color: var(--umds-semantic-color-background-light);
+  border-color: var(--umds-semantic-color-neutral-light-medium);
+}
+
 /* ── borderless: o campo dentro de um grupo que já tem a moldura ──
    Sem borda, fundo e raio. O foco NÃO some: o anel do campo vira um contorno
    para dentro (WCAG 2.4.7), e o erro mantém a borda vermelha (a cor do erro não

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

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

package/dist/components/Input/Input.js

@@ -52,6 +52,7 @@ function Input(props) {
             props.numberSpinner ? "umds-input--number-spinner" : "",
             props.borderless || props.grouped ? "umds-input--borderless" : "",
             props.grouped ? "umds-input--grouped" : "",
+            props.variant === "ghost" ? "umds-input--ghost" : "",
             `umds-input--${props.size || "md"}`,
             props.className,
         ]

package/dist/components/Kbd/Kbd.css

@@ -1,6 +1,6 @@
 /* ─────────────────────────────────────────────
    KBD
-   Uma tecla, ou uma combinação, em fonte monoespaçada.
+   Uma tecla, ou uma combinação, na fonte do DS (a base).
 
    A caixa é cinza com borda e uma sombra de base de 1px (a "espessura" da
    tecla). Texto escuro sobre cinza claro: contraste de texto, não só de cor.
@@ -13,7 +13,7 @@
   box-sizing: border-box;
   min-width: var(--umds-primitive-spacing-xxs); /* 24px */
   padding: var(--umds-primitive-spacing-micro) var(--umds-primitive-spacing-nano); /* 2px 8px */
-  font-family: var(--umds-semantic-font-family-mono);
+  font-family: var(--umds-semantic-font-family-base);
   font-weight: var(--umds-primitive-font-weight-semibold);
   line-height: var(--umds-primitive-font-line-height-lg);
   text-align: center;
@@ -40,7 +40,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--umds-primitive-spacing-quarck); /* 4px */
-  font-family: var(--umds-semantic-font-family-mono);
+  font-family: var(--umds-semantic-font-family-base);
 }
 
 .umds-kbd-combo__item {

package/dist/components/Kbd/Kbd.d.ts

@@ -4,7 +4,7 @@ import './Kbd.css';
  *
  * Uma tecla: `<Kbd>Esc</Kbd>`. Uma combinação: `keys` (`["Ctrl", "Shift", "P"]`),
  * que desenha uma caixa por tecla com o `separator` entre elas (`+` por padrão).
- * A fonte é a monoespaçada do DS (`--umds-semantic-font-family-mono`), a caixa é
+ * A fonte é a do DS (`--umds-semantic-font-family-base`), a caixa é
  * cinza com borda e uma sombra de base, como uma tecla de verdade.
  *
  * Semântica: `<kbd>` é o elemento HTML de "entrada de teclado", e um `<kbd>`

package/dist/components/Modal/Modal.css

@@ -407,6 +407,25 @@
   background: var(--umds-semantic-color-primary-medium);
 }
 
+/* ── density="1doc": as proporções do modal do CrisDoc ──
+   Cabeçalho de 67px (o padrão dá 61), rodapé de 65px (o padrão dá 73) e raio de 12px (o DS usa 8). Sem token
+   para essas medidas: literais comentados, como o resto do modal base. As alturas são mínimas, então título
+   com subtítulo ou botão mais alto continua crescendo. Fora a tela cheia e o painel, que têm cantos próprios. */
+.umds-modal--1doc:not(.umds-modal--fullscreen):not(.umds-modal--janela-fullscreen):not(.umds-modal--sheet) {
+  /* stylelint-disable-next-line 1ds/raio-canonico -- o 12px é a opção density="1doc" (o modal do CrisDoc); o padrão segue em 8px */
+  border-radius: 12px;
+}
+
+.umds-modal--1doc.umds-modal--base .umds-modal__header {
+  align-items: center;
+  min-height: 67px;
+}
+
+.umds-modal--1doc.umds-modal--base .umds-modal__footer {
+  min-height: 65px;
+  padding: var(--umds-primitive-spacing-mini) var(--umds-primitive-spacing-xxs); /* 12px 24px */
+}
+
 /* ── responsive: abaixo do breakpoint vira painel que sobe pela borda de baixo ──
    Mesma anatomia do BottomSheet (largura total, cantos de cima arredondados,
    alça, entrada por baixo). Quem decide o breakpoint é o componente (media

package/dist/components/Modal/Modal.d.ts

@@ -95,6 +95,13 @@ export interface ModalProps {
      * @default 'dialog'
      */
     layout?: "dialog" | "content";
+    /**
+     * Proporções do modal. `1doc` leva o cabeçalho a 67px, o rodapé a 65px e o raio a 12px, as medidas do
+     * modal do CrisDoc; o padrão (`default`) segue com 61px, 73px e 8px. Só o modal base (com título), e
+     * combina com `variant="primary"`. Tela cheia e painel (`responsive`) mantêm os cantos deles.
+     * @default 'default'
+     */
+    density?: "default" | "1doc";
     /** Classes CSS adicionais para o container do modal */
     className?: string;
     /** Se verdadeiro, renderiza o modal inline (sem fixed/overlay), útil para documentação */

package/dist/components/Modal/Modal.js

@@ -149,6 +149,7 @@ function Modal(props) {
             `umds-modal--${props.variant || "default"}`,
             props.size && props.size !== "md" ? `umds-modal--${props.size}` : "",
             ehFeedback() ? "umds-modal--feedback" : "umds-modal--base",
+            props.density === "1doc" ? "umds-modal--1doc" : "",
             classeDaJanela(),
             props.responsive && isCompact ? "umds-modal--sheet" : "",
             props.className,

package/dist/components/RichTextEditor/RichTextEditor.d.ts

@@ -35,7 +35,7 @@ export type RichTextTool = "bold" | "italic" | "underline" | "strike" | "ul" | "
  * higienização: só PNG, JPEG, GIF e WebP em `data:`, ou `http(s)`; sem SVG.
  *
  * Estilo de texto por TOKEN do DS, também opcional na `toolbar`: `fontFamily`
- * (padrão ou monoespaçada), `fontSize` (12, 14, 16, 20 e 24px, da escala do DS) e
+ * (a fonte do DS), `fontSize` (12, 14, 16, 20 e 24px, da escala do DS) e
  * `textColor` (a paleta do DS). Cada um abre um painel abaixo da barra e aplica ao
  * texto selecionado (sem seleção, o painel pede que se selecione). O valor guarda
  * `<span style="color: var(--umds-primitive-red-pure)">`: só token do DS passa na
@@ -53,7 +53,7 @@ export type RichTextTool = "bold" | "italic" | "underline" | "strike" | "ul" | "
  * @property {string} placeholder - Texto de apoio com o editor vazio
  * @property {string[]} toolbar - Ferramentas da barra, em ordem: 'bold' | 'italic' | 'underline' | 'strike' | 'ul' | 'ol' | 'link' | 'undo' | 'redo' | 'clear' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'image' | 'table' | 'fontFamily' | 'fontSize' | 'textColor' | '|' (separador)
  * @property {string} toolbarLabel - Nome da barra (padrão "Formatação")
- * @property {object} labels - Nomes das ferramentas e dos campos, parcial: `{ bold, italic, underline, strike, ul, ol, link, undo, redo, clear, alignLeft, alignCenter, alignRight, alignJustify, image, table, linkAddress, linkApply, linkRemove, linkCancel, linkInvalid, imageUrl, imageAlt, imageFile, imageApply, imageCancel, imageInvalid, imageType, imageTooLarge, tableRows, tableCols, tableApply, tableCancel, tableInvalid, tableActions, tableAddRow, tableRemoveRow, tableAddCol, tableRemoveCol, tableRemove, fontFamily, fontSize, textColor, fontFamilyBase, fontFamilyMono, styleClose, styleNeedsSelection }`
+ * @property {object} labels - Nomes das ferramentas e dos campos, parcial: `{ bold, italic, underline, strike, ul, ol, link, undo, redo, clear, alignLeft, alignCenter, alignRight, alignJustify, image, table, linkAddress, linkApply, linkRemove, linkCancel, linkInvalid, imageUrl, imageAlt, imageFile, imageApply, imageCancel, imageInvalid, imageType, imageTooLarge, tableRows, tableCols, tableApply, tableCancel, tableInvalid, tableActions, tableAddRow, tableRemoveRow, tableAddCol, tableRemoveCol, tableRemove, fontFamily, fontSize, textColor, fontFamilyBase, styleClose, styleNeedsSelection }`
  * @property {number} minHeight - Altura mínima da área de escrita, em px (padrão 120)
  * @property {boolean} resizable - Deixa redimensionar a altura pelo canto
  * @property {boolean} disabled - Desabilita barra e área

package/dist/components/RichTextEditor/RichTextEditor.js

@@ -148,7 +148,6 @@ function RichTextEditor(props) {
             fontSize: "Tamanho da fonte",
             textColor: "Cor do texto",
             fontFamilyBase: "Padrão",
-            fontFamilyMono: "Monoespaçada",
             styleClose: "Fechar",
             styleNeedsSelection: "Selecione o texto antes de aplicar.",
         };
@@ -790,10 +789,6 @@ function RichTextEditor(props) {
                 label: rotulo("fontFamilyBase"),
                 value: "var(--umds-semantic-font-family-base)",
             },
-            {
-                label: rotulo("fontFamilyMono"),
-                value: "var(--umds-semantic-font-family-mono)",
-            },
         ];
     }
     function fontSizeOptions() {

package/dist/components/SegmentedControl/SegmentedControl.css

@@ -208,3 +208,49 @@
   background-color: var(--umds-semantic-color-neutral-light-pure);
   color: var(--umds-semantic-color-primary-pure);
 }
+
+/* ── variant="surface": o escolhido em superfície branca (o seletor do CrisDoc) ──
+   Trilho cinza claro sem divisores; o segmento escolhido é uma peça branca com sombra e texto escuro em
+   negrito (a seleção não depende só do tom: o peso e a sombra a dizem). O trilho deixa de recortar, para a
+   sombra aparecer. O contador do escolhido fica cinza sobre o branco e o dos outros, branco sobre o trilho. */
+.umds-segmented--surface .umds-segmented__track {
+  background-color: var(--umds-semantic-color-neutral-light-medium);
+  border-color: var(--umds-semantic-color-neutral-light-medium);
+  overflow: visible;
+}
+
+.umds-segmented--surface .umds-segmented__item {
+  background-color: transparent;
+  border-right-color: transparent;
+  border-radius: var(--umds-primitive-border-radius-sm);
+}
+
+.umds-segmented--surface .umds-segmented__item:hover {
+  background-color: var(--umds-semantic-color-neutral-light-down);
+}
+
+.umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item,
+.umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item:hover {
+  background-color: var(--umds-semantic-color-background-white);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+  font-weight: var(--umds-primitive-font-weight-bold);
+  box-shadow: var(--umds-semantic-shadow-md);
+}
+
+.umds-segmented--surface .umds-segmented__input:disabled + .umds-segmented__item:hover {
+  background-color: transparent;
+}
+
+.umds-segmented--surface .umds-segmented__input:disabled:checked + .umds-segmented__item:hover {
+  background-color: var(--umds-semantic-color-background-white);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-segmented--surface .umds-segmented__count {
+  background-color: var(--umds-semantic-color-background-white);
+}
+
+.umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item .umds-segmented__count {
+  background-color: var(--umds-semantic-color-neutral-light-medium);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -40,6 +40,7 @@ export interface SegmentedControlOption {
  * @property {boolean} invalid - Estado de erro.
  * @property {string} errorMessage - Mensagem de erro do grupo.
  * @property {string} size - Tamanho: 'sm' (32px) | 'md' (40px).
+ * @property {string} variant - 'default' (padrão): o segmento escolhido é azul cheio com texto branco. 'surface': trilho cinza claro e o segmento escolhido em superfície branca, com sombra e texto em negrito (o seletor do CrisDoc). O contador do escolhido fica cinza sobre o branco e o dos outros, branco sobre o trilho.
  * @property {boolean} fullWidth - Os segmentos dividem a largura do container.
  * @property {string} className - Classes CSS adicionais.
  * @property {function} onChange - Callback com o valor escolhido.
@@ -58,6 +59,8 @@ export interface SegmentedControlProps {
     invalid?: boolean;
     errorMessage?: string;
     size?: "sm" | "md";
+    /** `surface`: o escolhido em superfície branca sobre trilho cinza, no lugar do azul cheio. @default 'default' */
+    variant?: "default" | "surface";
     fullWidth?: boolean;
     className?: string;
     onChange?: (value: string) => void;

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -49,6 +49,7 @@ function SegmentedControl(props) {
         return [
             "umds-segmented",
             `umds-segmented--${props.size || "md"}`,
+            props.variant === "surface" ? "umds-segmented--surface" : "",
             props.fullWidth ? "umds-segmented--full-width" : "",
             props.disabled ? "umds-segmented--disabled" : "",
             isInvalid() ? "umds-segmented--invalid" : "",

package/dist/components/Select/Select.css

@@ -175,8 +175,10 @@
 
 /* ── Variante filter: botão de filtro de barra de ferramentas ──
    Contornado em azul, largura do conteúdo, lista mais larga que o botão. */
+/* fit-content e não auto: o wrapper é flex (bloco), e `auto` o estica até a largura do pai. Com ele esticado,
+   o `100%` da lista passava a ser o do pai (556px numa barra) e não o do gatilho. */
 .umds-select--filter {
-  width: auto;
+  width: fit-content;
 }
 
 .umds-select--filter.umds-select--full-width {
@@ -224,12 +226,25 @@
 }
 
 .umds-select--filter .umds-select__dropdown {
-  /* 240px: três vezes o degrau xxl (80px). Sem token de largura de menu. */
+  /* 240px: três vezes o degrau xxl (80px). Sem token de largura de menu. `listMinWidth` troca este mínimo
+     (estilo inline). A lista nunca é mais estreita que o gatilho (100%). */
   width: max-content;
   min-width: max(100%, calc(var(--umds-primitive-spacing-xxl) * 3));
   max-width: calc(100vw - var(--umds-primitive-spacing-xxxs) * 2);
 }
 
+/* Perto da borda direita da janela: a lista se alinha ao fim do gatilho (`alignEnd`, medido ao abrir). */
+.umds-select--filter.umds-select--list-end .umds-select__dropdown {
+  left: auto;
+  right: 0;
+}
+
+/* A busca da lista de filtro acompanha a largura da lista e não a dita: `contain: inline-size` tira a
+   largura natural do campo da conta do `max-content`. */
+.umds-select--filter .umds-select__search-container {
+  contain: inline-size;
+}
+
 /* ── Variante search: o filtro dentro de uma barra de busca ──
    Altura de campo e contorno neutro, para ficar ao lado do campo de busca. */
 .umds-select--filter-search .umds-select__trigger {
@@ -333,6 +348,7 @@
 
 .umds-select__search-input {
   flex: 1;
+  min-width: 0;
   border: none;
   outline: none;
   font-size: var(--umds-primitive-font-size-xxs);
@@ -557,3 +573,13 @@
   border-bottom-color: var(--umds-semantic-color-primary-pure);
   box-shadow: inset 0 -1px 0 var(--umds-semantic-color-primary-pure);
 }
+
+/* ── item no gatilho: o conteúdo do slot/função `item` da opção escolhida ── */
+.umds-select__trigger-item {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+  font-size: var(--umds-semantic-field-text-size);
+  color: var(--umds-semantic-field-text-color);
+}

package/dist/components/Select/Select.d.ts

@@ -53,6 +53,8 @@ export interface SelectOption {
  * @property {string} triggerSwatch - Amostra de cor à esquerda do texto do gatilho: um token (`var(--umds-semantic-color-...)`) ou `var(--umds-primitive-...)`. Decorativa; o texto diz a opção.
  * @property {string} emptyOptionLabel - Opção "sem filtro" no topo da lista (seleção única): marcada quando nada está escolhido; ao escolher, `onChange` recebe `""` e o campo volta a mostrar o `placeholder` (o nome do filtro).
  * @property {any} footer - Rodapé fixo da lista, com ações ("Gerenciar marcadores"). Passe o elemento correspondente (React node ou Vue slot `footer`).
+ * @property {any} item - Conteúdo de cada opção na lista, e do gatilho com a opção escolhida (seleção única). No React, uma função `({ optionData }) => nó` (`optionData` é a opção: `label`, `value` e os campos seus). No Vue, o slot com escopo `#item="{ optionData }"` (o mesmo `optionData`; `option` é um apelido). Sem ela, a opção é o `label` em texto. Na lista de seleção múltipla e na do `emptyOptionLabel` o gatilho segue mostrando o texto.
+ * @property {string|number} listMinWidth - Largura mínima da lista das variantes de filtro: um número (px) ou uma medida CSS ("220px"). Padrão: 240px. A lista tem a largura do gatilho (nunca menor), cresce até o conteúdo e nunca passa da borda da janela: perto da borda direita ela se alinha ao fim do gatilho. A busca interna acompanha a largura da lista, sem alargá-la.
  * @quandoUsar Escolher UM valor de uma lista fechada. O valor selecionado fica visível no campo.
  * @quandoNaoUsar Para escolher VÁRIOS valores — use `MultiSelect`. Para um menu de AÇÕES (editar, excluir, duplicar) em vez de valores, use `Dropdown`. Para 2 a 4 opções mutuamente exclusivas sempre visíveis, use `Radio`.
  */
@@ -110,6 +112,11 @@ export interface SelectProps {
     emptyOptionLabel?: string;
     /** Rodapé fixo da lista (ações). React node ou slot `footer` no Vue. */
     footer?: any;
+    /**
+     * Largura mínima da lista das variantes de filtro: número (px) ou medida CSS ("220px"). A lista nunca
+     * fica mais estreita que o gatilho. @default 240 (o `filter` do DS)
+     */
+    listMinWidth?: string | number;
     pagination?: boolean;
     hasMore?: boolean;
     onLoadMore?: () => void;

package/dist/components/Select/Select.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import './Select.css';
 import { useState, useRef, useEffect } from "react";
 import { faChevronUp, faChevronDown, faMagnifyingGlass, faXmark, faCheck, faTrash, } from "@fortawesome/free-solid-svg-icons";
-import { computePosition, autoUpdate, offset, flip, size, } from "@floating-ui/dom";
+import { computePosition, autoUpdate, offset, flip, shift, size, } from "@floating-ui/dom";
 import Text from "../Text/Text";
 import Icon from "../Icon/Icon";
 import Spinner from "../Spinner/Spinner";
@@ -38,6 +38,7 @@ function Select(props) {
     const [floatW, setFloatW] = useState(() => 0);
     const [floatMaxH, setFloatMaxH] = useState(() => 0);
     const [listMaxH, setListMaxH] = useState(() => 0);
+    const [alignEnd, setAlignEnd] = useState(() => false);
     const [searchTerm, setSearchTerm] = useState(() => "");
     const [internalSelected, setInternalSelected] = useState(() => Array.isArray(props.defaultValue)
         ? props.defaultValue
@@ -150,6 +151,20 @@ function Select(props) {
         }
         return String(currentVal[0]);
     }
+    function opcaoDoGatilho() {
+        if (props.multiple || isPlaceholder())
+            return undefined;
+        return selectedOptionsList()[0];
+    }
+    function itemNoGatilho() {
+        return typeof props.item === "function" && !!opcaoDoGatilho();
+    }
+    function conteudoDoItemNoGatilho() {
+        return props.item({
+            optionData: opcaoDoGatilho(),
+            option: opcaoDoGatilho(),
+        });
+    }
     function triggerSwatchColor() {
         if (props.triggerSwatch)
             return props.triggerSwatch;
@@ -216,6 +231,7 @@ function Select(props) {
             props.variant === "search" ? "umds-select--filter-search" : "",
             props.variant === "combo" ? "umds-select--filter-combo" : "",
             opened() && floatMode ? "umds-select--floating" : "",
+            opened() && alignEnd ? "umds-select--list-end" : "",
             props.triggerIcon ? "umds-select--has-trigger-icon" : "",
             opensUp && props.searchVariant !== "inline"
                 ? "umds-select--placement-top"
@@ -307,6 +323,7 @@ function Select(props) {
         const flutuante = insideDialog();
         setFloatMode(flutuante);
         setFloatReady(false);
+        setAlignEnd(false);
         setOpensUp(shouldOpenUp(flutuante));
         // Abre com a opção já selecionada ativa (padrão combobox).
         setActiveIndex(filteredOptionsList().findIndex((opt) => isOptionSelected(opt.value)));
@@ -326,6 +343,10 @@ function Select(props) {
                 flip({
                     fallbackStrategy: "bestFit",
                 }),
+                // Perto da borda da janela, a lista desliza para dentro (8px de respiro).
+                shift({
+                    padding: 8,
+                }),
                 size({
                     apply({ availableHeight, rects }) {
                         setFloatW(rects.reference.width);
@@ -339,6 +360,22 @@ function Select(props) {
             setFloatReady(true);
         });
     }
+    function listMinWidthCss() {
+        const pedida = props.listMinWidth;
+        if (!isFilter() || pedida === undefined || pedida === null || pedida === "")
+            return "";
+        return typeof pedida === "number" ? pedida + "px" : String(pedida);
+    }
+    function keepInWindow() {
+        if (typeof window === "undefined" || !dropdownRef.current)
+            return;
+        if (!opened() || !isFilter() || floatMode || alignEnd)
+            return;
+        const caixa = dropdownRef.current.getBoundingClientRect();
+        // 8px de respiro até a borda: o degrau nano do DS.
+        if (caixa.right > window.innerWidth - 8)
+            setAlignEnd(true);
+    }
     function dropdownStyle() {
         if (props.searchVariant === "inline")
             return {
@@ -355,7 +392,11 @@ function Select(props) {
             };
             if (isFilter()) {
                 estilo.minWidth =
-                    "max(" + floatW + "px, calc(var(--umds-primitive-spacing-xxl) * 3))";
+                    "max(" +
+                        floatW +
+                        "px, " +
+                        (listMinWidthCss() || "calc(var(--umds-primitive-spacing-xxl) * 3)") +
+                        ")";
             }
             else {
                 estilo.width = floatW + "px";
@@ -364,11 +405,12 @@ function Select(props) {
                 estilo.maxHeight = floatMaxH + "px";
             return estilo;
         }
-        return listMaxH
-            ? {
-                maxHeight: listMaxH + "px",
-            }
-            : {};
+        const estilo = {};
+        if (listMaxH)
+            estilo.maxHeight = listMaxH + "px";
+        if (listMinWidthCss())
+            estilo.minWidth = "max(100%, " + listMinWidthCss() + ")";
+        return estilo;
     }
     function toggle() {
         if (props.disabled || props.readOnly)
@@ -575,6 +617,7 @@ function Select(props) {
         latestOpenChangeRef.current = props.onOpenChange;
         if (opened() && !prepared)
             prepareOpen();
+        keepInWindow();
         if (typeof document === "undefined")
             return;
         const handleClickOutside = (event) => {
@@ -600,6 +643,9 @@ function Select(props) {
             prepareOpen();
         if (!opened() && prepared)
             setPrepared(false);
+        if (!opened() && alignEnd)
+            setAlignEnd(false);
+        keepInWindow();
         // Lista flutuante: segue o gatilho (scroll, resize) enquanto aberta.
         if (opened() &&
             floatMode &&
@@ -649,7 +695,7 @@ function Select(props) {
     }, []);
     return (_jsxs("div", { ref: selectRef, className: wrapperClassesList(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-select__label", id: labelIdText(), children: [props.label, props.required ? (_jsx("span", { className: "umds-select__required", children: " *" })) : null] })) : null, _jsxs("div", { className: "umds-select__container", children: [!(opened() && props.searchVariant === "inline") ? (_jsxs("div", { role: "combobox", "aria-haspopup": "listbox", className: "umds-select__trigger", ref: triggerRef, onClick: (event) => toggle(), onKeyDown: (event) => handleTriggerKeyDown(event), "aria-readonly": ariaReadonly(), "aria-expanded": opened(), "aria-controls": listboxIdText(), "aria-activedescendant": activeDescendantText(), "aria-labelledby": comboboxLabelledBy(), "aria-label": comboboxAriaLabel(), "aria-invalid": ariaInvalidText(), "aria-required": ariaRequiredText(), "aria-describedby": describedByText(), "aria-disabled": props.disabled ? "true" : undefined, tabIndex: props.disabled ? -1 : 0, children: [_jsxs("div", { className: "umds-select__values", children: [props.triggerIcon ? (_jsx("span", { "aria-hidden": "true", className: "umds-select__trigger-icon", children: _jsx(Icon, { variant: "inherit", customSize: "12px", icon: props.triggerIcon }) })) : null, triggerSwatchColor() ? (_jsx("span", { "aria-hidden": "true", className: "umds-select__swatch", style: {
                                             background: triggerSwatchColor(),
-                                        } })) : null, displayLabelText() ? (_jsx(Text, { as: "span", variant: "body2", className: isPlaceholder() ? "umds-select__placeholder" : "", children: displayLabelText() })) : null, props.multiple &&
+                                        } })) : null, itemNoGatilho() ? (_jsx("span", { className: "umds-select__trigger-item", children: conteudoDoItemNoGatilho() })) : null, displayLabelText() && !itemNoGatilho() ? (_jsx(Text, { as: "span", variant: "body2", className: isPlaceholder() ? "umds-select__placeholder" : "", children: displayLabelText() })) : null, props.multiple &&
                                         props.selectionDisplay === "tags" &&
                                         selectedOptionsList().length > 0 ? (_jsx("div", { className: "umds-select__tags", children: selectedOptionsList()?.map((opt) => (_jsx(Tag, { size: "sm", label: opt.label, closable: true, disabled: props.disabled, onClose: (e) => removeValue(opt.value, e) }, opt.value))) })) : null] }), _jsxs("div", { className: "umds-select__actions", children: [props.loading ? _jsx(Spinner, { size: "sm", variant: "secondary" }) : null, _jsx("div", { className: "umds-select__arrow", children: _jsx(Icon, { size: "sm", icon: opened() ? faChevronUp : faChevronDown }) })] })] })) : null, opened() ? (_jsxs("div", { className: "umds-select__dropdown", ref: dropdownRef, style: dropdownStyle(), onKeyDown: (event) => handleDropdownKeyDown(event), children: [props.searchable ? (_jsxs("div", { className: "umds-select__search-container", children: [_jsx("div", { className: "umds-select__search-icon", children: _jsx(Icon, { size: "sm", icon: faMagnifyingGlass }) }), _jsx("input", { type: "text", className: "umds-select__search-input", ref: searchInputRef, placeholder: props.searchPlaceholder || "Buscar...", "aria-label": props.searchAriaLabel || "Buscar", value: searchTerm, onInput: (e) => handleSearch(e) }), props.searchVariant === "inline" ? (_jsx("button", { type: "button", className: "umds-select__search-close", "aria-label": props.closeSearchAriaLabel || "Fechar busca", onClick: (event) => closeSearch(), onKeyDown: (event) => handleSearchCloseKeyDown(event), children: _jsx(Icon, { size: "sm", icon: faXmark }) })) : null] })) : null, _jsxs("div", { role: "listbox", className: "umds-select__options", id: listboxIdText(), "aria-multiselectable": props.multiple ? "true" : undefined, onScroll: (e) => onScrollList(e), children: [filteredOptionsList().length === 0 && !props.loading ? (_jsx("div", { className: "umds-select__no-options", children: _jsx(Text, { variant: "body2", color: "secondary", children: props.emptyLabel || "Nenhum item encontrado" }) })) : null, filteredOptionsList()?.map((option, index) => (_jsxs("div", { role: "option", id: optionIdText(index), "aria-selected": isOptionSelected(option.value), onClick: (event) => selectOption(option), className: [
                                             "umds-select__option",
@@ -661,7 +707,7 @@ function Select(props) {
                                             .filter(Boolean)
                                             .join(" "), children: [props.multiple ? (_jsx("div", { className: "umds-select__option-checkbox", children: _jsx(Checkbox, { checked: isOptionSelected(option.value), decorative: true }) })) : null, option.color ? (_jsx("span", { "aria-hidden": "true", className: "umds-select__swatch", style: {
                                                     background: option.color,
-                                                } })) : null, _jsx("div", { className: "umds-select__option-content", children: _jsx(_Fragment, { children: props.item || (_jsx(Text, { variant: "body2", children: option.label })) }) }), !props.multiple && isOptionSelected(option.value) ? (_jsx("div", { className: "umds-select__option-check", children: _jsx(Icon, { size: "sm", icon: faCheck }) })) : null] }, option.value))), props.loading && props.pagination ? (_jsxs("div", { className: "umds-select__loading-more", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { variant: "caption", children: props.loadingLabel || "Carregando mais..." })] })) : null] }), props.footer ? (_jsx("div", { className: "umds-select__footer", children: _jsx(_Fragment, { children: props.footer }) })) : null] })) : null] }), props.name ? (_jsx("input", { type: "hidden", name: props.name, value: formValue() || "" })) : null, props.errorMessage ? (_jsx(Text, { variant: "caption", color: "negative", className: "umds-select__error-message", id: errorIdText(), children: props.errorMessage })) : null, mostraApoio() ? (_jsx(Text, { variant: "caption", color: "secondary", className: "umds-select__description", id: helperIdText(), children: textoDeApoio() })) : null, props.multiple &&
+                                                } })) : null, _jsx("div", { className: "umds-select__option-content", children: _jsx(_Fragment, { children: typeof props.item === "function" ? props.item({ optionData: option, option }) : props.item || (_jsx(Text, { variant: "body2", children: option.label })) }) }), !props.multiple && isOptionSelected(option.value) ? (_jsx("div", { className: "umds-select__option-check", children: _jsx(Icon, { size: "sm", icon: faCheck }) })) : null] }, option.value))), props.loading && props.pagination ? (_jsxs("div", { className: "umds-select__loading-more", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { variant: "caption", children: props.loadingLabel || "Carregando mais..." })] })) : null] }), props.footer ? (_jsx("div", { className: "umds-select__footer", children: _jsx(_Fragment, { children: props.footer }) })) : null] })) : null] }), props.name ? (_jsx("input", { type: "hidden", name: props.name, value: formValue() || "" })) : null, props.errorMessage ? (_jsx(Text, { variant: "caption", color: "negative", className: "umds-select__error-message", id: errorIdText(), children: props.errorMessage })) : null, mostraApoio() ? (_jsx(Text, { variant: "caption", color: "secondary", className: "umds-select__description", id: helperIdText(), children: textoDeApoio() })) : null, props.multiple &&
                 props.selectionDisplay === "list" &&
                 selectedOptionsList().length > 0 ? (_jsx("div", { className: "umds-select__selected-list", children: selectedOptionsList()?.map((opt) => (_jsxs("div", { className: "umds-select__selected-list-item", children: [_jsx(Text, { variant: "body2", children: opt.label }), _jsx("button", { type: "button", className: "umds-select__list-remove", "aria-label": removeItemAriaLabelText(opt.label), onClick: (e) => removeValue(opt.value, e), children: _jsx(Icon, { size: "sm", icon: faTrash }) })] }, opt.value))) })) : null] }));
 }

package/dist/components/StatCard/StatCard.css

@@ -290,3 +290,11 @@
 .umds-stat-card--rotulo-topo.umds-stat-card--com-secundaria:not(:has(.umds-stat-card__icone)) .umds-stat-card__valor {
   grid-column: 1 / 3;
 }
+
+/* ── size="sm": o KPI de 18px/800 ──
+   18px não está na escala de fonte do DS (16 e 20): é a medida dos KPIs da home do CrisDoc, mantida como literal.
+   Dois seletores de classe para vencer o 32/800 do `labelPosition="top"` sem depender da ordem. */
+.umds-stat-card.umds-stat-card--sm .umds-stat-card__valor {
+  font-size: 1.125rem; /* 18px */
+  font-weight: var(--umds-primitive-font-weight-extrabold);
+}

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

@@ -22,6 +22,7 @@ import './StatCard.css';
  * @property {string} trendIntent - Se a variação é boa ou ruim (cor), independente da direção: 'positive' | 'negative' | 'neutral'
  * @property {string} trendLabel - Texto da variação (ex.: '12% em relação ao mês anterior')
  * @property {string} description - Texto auxiliar abaixo do rótulo
+ * @property {string} size - 'md' (padrão) | 'sm': o `sm` leva o número a 18px/800, o tamanho dos KPIs da home do CrisDoc (fora da escala de fonte do DS, que vai de 16 a 20). Vale também com `labelPosition="top"`.
  * @property {string} labelPosition - Onde o rótulo aparece: 'bottom' (padrão, embaixo do número) | 'top' (no topo do cartão, acima do ícone e do número, com o número em 32/800). No HTML o número continua vindo antes do rótulo, então o leitor de tela anuncia igual.
  * @property {string|number} secondaryValue - Segunda medida do cartão, menor, à direita da principal ("22,31%" do setor e "14,11%" do geral). Vem depois do resto no HTML. `0` aparece; vazio e ausente não.
  * @property {string} secondaryLabel - O que a segunda medida significa ("Geral")
@@ -73,6 +74,8 @@ export interface StatCardProps {
     secondaryValue?: string | number;
     /** O que a segunda medida significa. */
     secondaryLabel?: string;
+    /** Tamanho do número: `sm` é o KPI de 18px/800. @default 'md' */
+    size?: "md" | "sm";
     /** Cor do número principal. @default 'default' */
     valueTone?: "default" | "primary" | "positive" | "negative" | "info";
     /**

package/dist/components/StatCard/StatCard.js

@@ -10,6 +10,7 @@ function StatCard(props) {
             "umds-stat-card",
             `umds-stat-card--${props.variant || "neutral"}`,
             props.align === "center" ? "umds-stat-card--centro" : "",
+            props.size === "sm" ? "umds-stat-card--sm" : "",
             props.labelPosition === "top" ? "umds-stat-card--rotulo-topo" : "",
             temSecundaria() ? "umds-stat-card--com-secundaria" : "",
             props.valueTone && props.valueTone !== "default"

package/dist/components/Tabs/Tabs.css

@@ -93,6 +93,17 @@
     white-space: nowrap;
 }
 
+/* ============================
+   Densidade compacta (density="compact" no Tabs)
+   Altura mínima de 40px (o degrau sm do DS) e padding vertical de 8px: com o texto de 14px e a barra de
+   3px, a aba fica nos 40. Só o padding vertical (padding-block), para não desfazer o espaço do × da aba
+   fechável. O contador em pílula não muda: cinza na aba inativa e azul só na ativa.
+   ============================ */
+.umds-tabs--compact .umds-tabs__tab {
+    min-height: var(--umds-primitive-spacing-sm); /* 40px */
+    padding-block: var(--umds-primitive-spacing-nano);
+}
+
 /* ============================
    Label
    ============================ */

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

@@ -14,6 +14,13 @@ export interface TabsProps {
     onChange?: (index: string) => void;
     /** Label de acessibilidade para o tablist */
     ariaLabel?: string;
+    /**
+     * Densidade das abas: `compact` leva a altura mínima de 48px a 40px (padding vertical de 8px), para barras
+     * de abas dentro de uma tela (o CrisDoc usa 40). O contador em pílula não muda: cinza na aba inativa e azul
+     * só na ativa, nas duas densidades.
+     * @default 'default'
+     */
+    density?: "default" | "compact";
     /**
      * Identificador estável usado como base dos ids acessíveis
      * (`{id}-tab-{index}` / `{id}-panel-{index}`). Passe o MESMO id no

package/dist/components/Tabs/Tabs.js

@@ -6,7 +6,13 @@ import Icon from "../Icon/Icon";
 import TabsContext from "./tabs.context";
 function Tabs(props) {
     function classes() {
-        return ["umds-tabs", props.className].filter(Boolean).join(" ");
+        return [
+            "umds-tabs",
+            props.density === "compact" ? "umds-tabs--compact" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
     }
     function barClasses() {
         return ["umds-tabs__bar", props.onAdd ? "umds-tabs__bar--com-add" : ""]

package/dist/components/Tag/Tag.css

@@ -194,7 +194,9 @@
 
 .umds-tag--outlined.umds-tag--positive {
     border-color: var(--umds-semantic-color-feedback-positive-pure);
-    color: var(--umds-semantic-color-feedback-positive-pure);
+    /* O contorno transparente deixa o texto sobre o fundo de quem está atrás (um card tingido de azul-claro).
+       positive-pure sobre primary-light dá 3,6:1; positive-dark dá 7,9:1 e é o par de texto do `soft`. */
+    color: var(--umds-semantic-color-feedback-positive-dark);
 }
 
 .umds-tag--outlined.umds-tag--negative {

package/dist/teste/AccordionControlado.test.d.ts

@@ -0,0 +1 @@
+export {};