@1doc/1ds-react 2.10.0 → 2.11.0

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/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 {};

package/dist/teste/AccordionControlado.test.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { useState } from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Accordion from "../components/Accordion/Accordion";
+const ITENS = [
+    { id: "prazos", title: "Prazos", content: "Dez dias úteis.", defaultOpen: true },
+    { id: "anexos", title: "Anexos", content: "Até 10 MB." },
+    { id: "sigilo", title: "Sigilo", content: "Só o setor." },
+];
+const aberto = (nome) => screen.getByRole("button", { name: nome }).getAttribute("aria-expanded") === "true";
+describe("Accordion · não controlado (como antes)", () => {
+    it("começa pelos defaultOpen e o clique abre e fecha; onOpenChange avisa a nova lista", () => {
+        const aoMudar = vi.fn();
+        render(_jsx(Accordion, { items: ITENS, multiple: true, onOpenChange: aoMudar }));
+        expect(aberto("Prazos")).toBe(true);
+        fireEvent.click(screen.getByRole("button", { name: "Anexos" }));
+        expect(aberto("Anexos")).toBe(true);
+        expect(aoMudar).toHaveBeenLastCalledWith(["prazos", "anexos"]);
+        fireEvent.click(screen.getByRole("button", { name: "Prazos" }));
+        expect(aberto("Prazos")).toBe(false);
+        expect(aoMudar).toHaveBeenLastCalledWith(["anexos"]);
+    });
+    it("sem multiple, abrir um fecha o outro", () => {
+        render(_jsx(Accordion, { items: ITENS }));
+        fireEvent.click(screen.getByRole("button", { name: "Anexos" }));
+        expect(aberto("Anexos")).toBe(true);
+        expect(aberto("Prazos")).toBe(false);
+    });
+});
+describe("Accordion · controlado (open e onOpenChange)", () => {
+    it("open manda: o que está em open está aberto, ignorando defaultOpen", () => {
+        render(_jsx(Accordion, { items: ITENS, open: ["sigilo"] }));
+        expect(aberto("Sigilo")).toBe(true);
+        expect(aberto("Prazos")).toBe(false);
+    });
+    it("o clique só pede (onOpenChange); sem o app mudar open, nada abre", () => {
+        const aoMudar = vi.fn();
+        render(_jsx(Accordion, { items: ITENS, multiple: true, open: ["prazos"], onOpenChange: aoMudar }));
+        fireEvent.click(screen.getByRole("button", { name: "Anexos" }));
+        expect(aoMudar).toHaveBeenCalledWith(["prazos", "anexos"]);
+        expect(aberto("Anexos")).toBe(false);
+    });
+    it("o app guarda a escolha: com o estado dele, abre, fecha e a lista chega em ordem", () => {
+        let ultima = [];
+        function App() {
+            const [abertos, setAbertos] = useState([]);
+            return (_jsx(Accordion, { items: ITENS, multiple: true, open: abertos, onOpenChange: (ids) => {
+                    ultima = ids;
+                    setAbertos(ids);
+                } }));
+        }
+        render(_jsx(App, {}));
+        expect(aberto("Prazos")).toBe(false);
+        fireEvent.click(screen.getByRole("button", { name: "Sigilo" }));
+        fireEvent.click(screen.getByRole("button", { name: "Anexos" }));
+        expect(ultima).toEqual(["sigilo", "anexos"]);
+        expect(aberto("Sigilo") && aberto("Anexos")).toBe(true);
+        fireEvent.click(screen.getByRole("button", { name: "Sigilo" }));
+        expect(ultima).toEqual(["anexos"]);
+        expect(aberto("Sigilo")).toBe(false);
+    });
+    it("open vazio é controlado (tudo fechado), não ausência", () => {
+        render(_jsx(Accordion, { items: ITENS, open: [] }));
+        expect(aberto("Prazos")).toBe(false);
+    });
+    it("item desabilitado não pede nada", () => {
+        const aoMudar = vi.fn();
+        render(_jsx(Accordion, { items: [{ id: "x", title: "Bloqueado", content: "...", disabled: true }], open: [], onOpenChange: aoMudar }));
+        fireEvent.click(screen.getByRole("button", { name: "Bloqueado" }));
+        expect(aoMudar).not.toHaveBeenCalled();
+    });
+});

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

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

package/dist/teste/BadgeAttachedTomEPadding.test.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import Badge from "../components/Badge/Badge";
+import { lerArquivo } from "./lerArquivo";
+const cssBadge = await lerArquivo("../core/src/components/Badge/Badge.css");
+const css = cssBadge.replace(/\r\n/g, "\n");
+const bloco = (seletor) => {
+    const inicio = css.indexOf(seletor + " {");
+    return css.slice(inicio, css.indexOf("}", inicio));
+};
+describe("Badge 2xs · padding lateral de 8px", () => {
+    it("a regra do 2xs usa o degrau nano (8px) dos lados e o micro (2px) em cima e embaixo", () => {
+        expect(bloco(".umds-badge--2xs")).toMatch(/padding:\s*var\(--umds-primitive-spacing-micro\)\s+var\(--umds-primitive-spacing-nano\)/);
+    });
+    it("os outros tamanhos não mudam de padding", () => {
+        expect(bloco(".umds-badge--xs")).toMatch(/padding:\s*var\(--umds-primitive-spacing-micro\)\s+var\(--umds-primitive-spacing-quarck\)/);
+        expect(bloco(".umds-badge--md")).toMatch(/padding:\s*var\(--umds-primitive-spacing-quarck\)\s+var\(--umds-primitive-spacing-nano\)/);
+    });
+});
+describe("Badge attached · 22px e tom escuro", () => {
+    it("o rótulo colado tem altura mínima de 22px (24 - 2), de qualquer tamanho", () => {
+        expect(bloco(".umds-badge--attached")).toMatch(/min-height:\s*calc\(var\(--umds-primitive-spacing-xxs\)\s*-\s*var\(--umds-primitive-spacing-micro\)\)/);
+        const { container } = render(_jsx(Badge, { attached: true, size: "xs", variant: "neutral", appearance: "solid", children: "Tarefa manual" }));
+        expect(container.firstElementChild).toHaveClass("umds-badge--attached", "umds-badge--xs");
+    });
+    it("attachedTone dark escreve a classe; sem ela e com light, não", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(Badge, { attached: true, attachedTone: "dark", variant: "neutral", appearance: "solid", children: "A" }), _jsx(Badge, { attached: true, variant: "neutral", appearance: "solid", children: "B" }), _jsx(Badge, { attached: true, attachedTone: "light", variant: "neutral", appearance: "solid", children: "C" })] }));
+        expect(container.children[0]).toHaveClass("umds-badge--attached-dark");
+        expect(container.children[1]).not.toHaveClass("umds-badge--attached-dark");
+        expect(container.children[2]).not.toHaveClass("umds-badge--attached-dark");
+    });
+    it("sem attached o tom é ignorado", () => {
+        const { container } = render(_jsx(Badge, { attachedTone: "dark", variant: "neutral", appearance: "solid", children: "A" }));
+        expect(container.firstElementChild).not.toHaveClass("umds-badge--attached-dark");
+    });
+    it("CSS: o escuro é neutral-dark-down com texto branco, só no neutro sólido colado", () => {
+        const regra = bloco(".umds-badge--attached.umds-badge--neutral.umds-badge--solid.umds-badge--attached-dark");
+        expect(regra).toMatch(/background-color:\s*var\(--umds-semantic-color-neutral-dark-down\)/);
+        expect(regra).toMatch(/color:\s*var\(--umds-semantic-color-neutral-light-pure\)/);
+        expect(bloco(".umds-badge--attached.umds-badge--neutral.umds-badge--solid")).toMatch(/neutral-light-medium/);
+    });
+});

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

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

package/dist/teste/ButtonDensidade.test.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Button from "../components/Button/Button";
+import { lerArquivo } from "./lerArquivo";
+const cssButton = await lerArquivo("../core/src/components/Button/Button.css");
+const css = cssButton.replace(/\r\n/g, "\n");
+const bloco = (seletor) => {
+    const inicio = css.indexOf(seletor + " {");
+    return css.slice(inicio, css.indexOf("}", inicio));
+};
+describe("Button · density", () => {
+    it("comfortable escreve a classe; sem a prop e com default o botão é o de antes", () => {
+        render(_jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", density: "comfortable", children: "A" }), _jsx(Button, { size: "sm", children: "B" }), _jsx(Button, { size: "sm", density: "default", children: "C" })] }));
+        expect(screen.getByRole("button", { name: "A" })).toHaveClass("umds-button--sm", "umds-button--comfortable");
+        expect(screen.getByRole("button", { name: "B" })).not.toHaveClass("umds-button--comfortable");
+        expect(screen.getByRole("button", { name: "C" })).not.toHaveClass("umds-button--comfortable");
+    });
+    it("CSS: o sm confortável tem 12px de padding lateral; o sm de antes segue em 8px; o só-ícone fica de fora", () => {
+        expect(bloco(".umds-button--sm.umds-button--comfortable:not(.umds-button--icon)")).toMatch(/padding:\s*0\s+var\(--umds-primitive-spacing-mini\)/);
+        expect(bloco(".umds-button--sm")).toMatch(/padding:\s*0\s+var\(--umds-primitive-spacing-nano\)/);
+    });
+    it("os outros tamanhos mantêm o padding (a densidade só mexe no sm)", () => {
+        expect(bloco(".umds-button--xs")).toMatch(/padding:\s*0\s+var\(--umds-primitive-spacing-mini\)/);
+        expect(bloco(".umds-button--md")).toMatch(/padding:\s*0\s+var\(--umds-primitive-spacing-xxxs\)/);
+        expect(bloco(".umds-button--lg")).toMatch(/padding:\s*0\s+var\(--umds-primitive-spacing-xxs\)/);
+    });
+});