@1doc/1ds-react 2.7.2 → 2.9.0

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

@@ -22,6 +22,9 @@ 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} 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} infoTooltip - Texto de ajuda: mostra um ⓘ ao lado do rótulo com um Tooltip escuro. É um botão dentro do cartão; com `onClick` no cartão, evite (botão dentro de botão).
+ * @property {string} infoLabel - Nome acessível do ⓘ. Troque para traduzir. Padrão: "Mais informações".
  * @property {string} align - Alinhamento do conteúdo
  * @property {string} className - Classes CSS adicionais
  * @property {function} onClick - Torna o cartão acionável (vira botão)
@@ -56,6 +59,20 @@ export interface StatCardProps {
     description?: string;
     /** Alinhamento do conteúdo. @default 'start' */
     align?: "start" | "center";
+    /**
+     * Onde o rótulo aparece. `top` põe o rótulo no topo do cartão, acima do
+     * ícone e do número (que passa a 32/800), como no painel da 1Doc. No HTML o
+     * número segue antes do rótulo: só a posição visual muda.
+     * @default 'bottom'
+     */
+    labelPosition?: "bottom" | "top";
+    /**
+     * Texto de ajuda: mostra o ⓘ ao lado do rótulo, com um Tooltip escuro. É um
+     * botão focável dentro do cartão; com `onClick` no cartão, evite.
+     */
+    infoTooltip?: string;
+    /** Nome acessível do ⓘ. @default 'Mais informações' */
+    infoLabel?: string;
     /** Classes CSS adicionais. */
     className?: string;
     /** Torna o cartão acionável. */

package/dist/components/StatCard/StatCard.js

@@ -1,13 +1,16 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './StatCard.css';
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import Icon from "../Icon/Icon";
+import Tooltip from "../Tooltip/Tooltip";
 function StatCard(props) {
     function classes() {
         return [
             "umds-stat-card",
             `umds-stat-card--${props.variant || "neutral"}`,
             props.align === "center" ? "umds-stat-card--centro" : "",
+            props.labelPosition === "top" ? "umds-stat-card--rotulo-topo" : "",
             props.onClick ? "umds-stat-card--acionavel" : "",
             props.className,
         ]
@@ -45,6 +48,6 @@ function StatCard(props) {
         if (props.onClick)
             props.onClick();
     }
-    return (_jsxs("div", { className: classes(), onClick: (event) => aoClicar(), role: ehAcionavel() ? "button" : undefined, tabIndex: ehAcionavel() ? 0 : undefined, children: [props.icon ? (_jsx("span", { className: "umds-stat-card__icone", "aria-hidden": "true", children: _jsx(Icon, { size: "md", variant: "inherit", icon: props.icon }) })) : null, _jsxs("div", { className: "umds-stat-card__corpo", children: [_jsx("span", { className: "umds-stat-card__valor", children: props.value }), _jsx("span", { className: "umds-stat-card__rotulo", children: props.label }), props.description ? (_jsx("span", { className: "umds-stat-card__descricao", children: props.description })) : null, props.trendLabel ? (_jsxs("span", { className: classesDaVariacao(), children: [_jsx("span", { "aria-hidden": "true", children: simboloDaVariacao() }), props.trendLabel] })) : null] })] }));
+    return (_jsxs("div", { className: classes(), onClick: (event) => aoClicar(), role: ehAcionavel() ? "button" : undefined, tabIndex: ehAcionavel() ? 0 : undefined, children: [props.icon ? (_jsx("span", { className: "umds-stat-card__icone", "aria-hidden": "true", children: _jsx(Icon, { size: "md", variant: "inherit", icon: props.icon }) })) : null, _jsxs("div", { className: "umds-stat-card__corpo", children: [_jsx("span", { className: "umds-stat-card__valor", children: props.value }), _jsxs("span", { className: "umds-stat-card__rotulo", children: [props.label, props.infoTooltip ? (_jsx(Tooltip, { variant: "dark", side: "top", content: props.infoTooltip, children: _jsx("button", { type: "button", className: "umds-stat-card__info", "aria-label": props.infoLabel || "Mais informações", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faCircleInfo }) }) })) : null] }), props.description ? (_jsx("span", { className: "umds-stat-card__descricao", children: props.description })) : null, props.trendLabel ? (_jsxs("span", { className: classesDaVariacao(), children: [_jsx("span", { "aria-hidden": "true", children: simboloDaVariacao() }), props.trendLabel] })) : null] })] }));
 }
 export default StatCard;

package/dist/components/Stepper/Stepper.css

@@ -84,7 +84,10 @@
 .umds-stepper__step--pending .umds-stepper__indicator {
   background: var(--umds-semantic-color-background-white); /* #FFFFFF */
   border-color: var(--umds-semantic-color-neutral-light-down); /* #D5D5D5 */
-  color: var(--umds-semantic-color-neutral-dark-up); /* #A3A3A3 */
+  /* O número da etapa pendente é texto, e a etapa não está desabilitada:
+     neutral-dark-up (#A3A3A3, 2,5:1) reprovava o WCAG 1.4.3. Mesma cor do
+     título pendente — #565656, 7,34:1. */
+  color: var(--umds-semantic-color-neutral-dark-down);
 }
 
 /* Status: active */

package/dist/components/Stepper/Stepper.d.ts

@@ -25,6 +25,14 @@ export interface StepperProps {
     currentStep?: number;
     orientation?: "horizontal" | "vertical";
     className?: string;
+    /** Estado lido pelo leitor de tela num passo concluído. Troque para traduzir. @default 'concluído' */
+    completedLabel?: string;
+    /** Estado lido pelo leitor de tela num passo com erro. Troque para traduzir. @default 'erro' */
+    errorLabel?: string;
+    /** Estado lido pelo leitor de tela no passo atual. Troque para traduzir. @default 'atual' */
+    activeLabel?: string;
+    /** Estado lido pelo leitor de tela num passo pendente. Troque para traduzir. @default 'pendente' */
+    pendingLabel?: string;
 }
 declare function Stepper(props: StepperProps): import("react/jsx-runtime").JSX.Element;
 export default Stepper;

package/dist/components/Stepper/Stepper.js

@@ -49,12 +49,12 @@ function Stepper(props) {
     function statusLabel(step, index) {
         const s = resolveStatus(step, index);
         if (s === "completed")
-            return "concluído";
+            return props.completedLabel || "concluído";
         if (s === "error")
-            return "erro";
+            return props.errorLabel || "erro";
         if (s === "active")
-            return "atual";
-        return "pendente";
+            return props.activeLabel || "atual";
+        return props.pendingLabel || "pendente";
     }
     function stepAriaLabel(step, index) {
         const parts = [step.title];

package/dist/components/Switch/Switch.css

@@ -115,6 +115,7 @@
 .umds-switch--sm {
     width: 44px;
     height: var(--umds-primitive-spacing-xxs);
+    /* stylelint-disable-next-line 1ds/espaco-da-escala -- geometria do trilho: (24px - 21px do polegar) / 2; 1px ou 2px descentraliza o polegar */
     padding: 1.5px; /* sem equivalente 1DS: candidato a novo token */
 }
 

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

@@ -16,6 +16,21 @@ export interface TabProps {
     icon?: IconProp;
     /** Se a tab está desabilitada */
     disabled?: boolean;
+    /**
+     * Contador em pílula ao lado do texto: azul na aba ativa, cinza nas outras.
+     * Aceita número ou texto; o `0` aparece. Sem a prop, não há pílula.
+     */
+    count?: number | string;
+    /**
+     * Mostra o × para fechar a aba (abas de navegador, documentos abertos). O
+     * × é um botão próprio, irmão da aba (não dentro dela), e a tecla Delete
+     * na aba focada faz o mesmo. Quem remove a aba é o app, em `onClose`.
+     */
+    closable?: boolean;
+    /** Chamado ao fechar a aba, com o `index` dela e o evento. */
+    onClose?: (index: string, event?: any) => void;
+    /** Prefixo do nome acessível do ×; o texto da aba vem depois ("Fechar Documento 1"). Troque para traduzir. @default 'Fechar' */
+    closeLabel?: string;
     /** Classes CSS adicionais */
     className?: string;
 }

package/dist/components/Tabs/Tab.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import TabsContext from "./tabs.context";
 import Icon from "../Icon/Icon";
 function Tab(props) {
@@ -17,11 +18,26 @@ function Tab(props) {
             ? tabsContext.tabsId + "-panel-" + props.index
             : undefined;
     }
+    function temContador() {
+        return (props.count !== undefined && props.count !== null && props.count !== "");
+    }
+    function itemClasses() {
+        return [
+            "umds-tabs__item",
+            props.closable ? "umds-tabs__item--closable" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function closeAriaText() {
+        return (props.closeLabel || "Fechar") + " " + props.label;
+    }
     function classes() {
         return [
             "umds-tabs__tab",
             isSelected() ? "umds-tabs__tab--selected" : "",
             props.disabled ? "umds-tabs__tab--disabled" : "",
+            props.closable ? "umds-tabs__tab--closable" : "",
             props.className,
         ]
             .filter(Boolean)
@@ -42,9 +58,22 @@ function Tab(props) {
             tabsContext.onChange(props.index);
         }
     }
+    function handleClose(event) {
+        event.stopPropagation();
+        if (props.disabled)
+            return;
+        if (typeof props.onClose === "function") {
+            props.onClose(props.index, event);
+        }
+    }
     function handleKeyDown(event) {
         if (props.disabled)
             return;
+        if (props.closable && event.key === "Delete") {
+            event.preventDefault();
+            handleClose(event);
+            return;
+        }
         if (event.key === "Enter" || event.key === " ") {
             event.preventDefault();
             handleClick();
@@ -81,6 +110,6 @@ function Tab(props) {
         }
     }
     const tabsContext = useContext(TabsContext);
-    return (_jsxs("button", { role: "tab", id: tabId(), "aria-controls": panelId(), "data-tab-index": props.index, "aria-selected": isSelected(), "aria-disabled": props.disabled, tabIndex: isSelected() ? 0 : -1, disabled: props.disabled, onClick: (event) => handleClick(), onKeyDown: (event) => handleKeyDown(event), className: classes(), children: [props.icon ? (_jsx(Icon, { size: "md", variant: "inherit", icon: props.icon })) : null, _jsx("span", { className: labelClasses(), children: props.label })] }));
+    return (_jsxs("span", { role: "presentation", className: itemClasses(), children: [_jsxs("button", { role: "tab", id: tabId(), "aria-controls": panelId(), "data-tab-index": props.index, "aria-selected": isSelected(), "aria-disabled": props.disabled, tabIndex: isSelected() ? 0 : -1, disabled: props.disabled, onClick: (event) => handleClick(), onKeyDown: (event) => handleKeyDown(event), className: classes(), children: [props.icon ? (_jsx(Icon, { size: "md", variant: "inherit", icon: props.icon })) : null, _jsx("span", { className: labelClasses(), children: props.label }), temContador() ? (_jsx("span", { className: "umds-tabs__count", children: props.count })) : null] }), props.closable ? (_jsx("button", { type: "button", className: "umds-tabs__close", "aria-label": closeAriaText(), disabled: props.disabled, tabIndex: -1, onClick: (event) => handleClose(event), children: _jsx(Icon, { variant: "inherit", customSize: "10px", icon: faXmark }) })) : null] }));
 }
 export default Tab;

package/dist/components/Tabs/Tabs.css

@@ -8,6 +8,36 @@
     font-family: var(--umds-semantic-font-family-base);
 }
 
+/* ============================
+   Barra: o tablist e, com onAdd, o botão "+" (fora do tablist)
+   ============================ */
+.umds-tabs__bar {
+    display: flex;
+    align-items: stretch;
+    min-width: 0;
+}
+
+.umds-tabs__bar .umds-tabs__list {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+/* Com "+", a lista não estica: o botão fica logo depois da última aba. */
+.umds-tabs__bar--com-add .umds-tabs__list {
+    flex: 0 1 auto;
+}
+
+/* Envoltório de cada aba (presentation). Sem × é transparente para o layout;
+   com × vira a âncora do botão de fechar. */
+.umds-tabs__item {
+    display: contents;
+}
+
+.umds-tabs__item--closable {
+    display: flex;
+    position: relative;
+}
+
 /* ============================
    Tab List (tablist)
    ============================ */
@@ -150,3 +180,105 @@
 .umds-tabs-content {
     width: 100%;
 }
+
+/* ============================
+   Contador em pílula (count)
+   Cinza nas abas inativas, azul na ativa. 18px de altura (16 + 2, dois degraus
+   do DS somados; sem token próprio).
+   ============================ */
+.umds-tabs__count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    height: calc(var(--umds-primitive-spacing-xxxs) + var(--umds-primitive-spacing-micro)); /* 18px */
+    min-width: calc(var(--umds-primitive-spacing-xxxs) + var(--umds-primitive-spacing-micro)); /* 18px */
+    padding: 0 var(--umds-primitive-spacing-quarck);
+    border-radius: var(--umds-primitive-border-radius-pill);
+    background-color: var(--umds-semantic-color-neutral-light-medium);
+    color: var(--umds-semantic-color-neutral-dark-down);
+    font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+    font-weight: var(--umds-primitive-font-weight-semibold);
+    line-height: 1;
+}
+
+.umds-tabs__tab--selected .umds-tabs__count {
+    background-color: var(--umds-semantic-color-primary-pure);
+    color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+.umds-tabs__tab--disabled .umds-tabs__count {
+    background-color: var(--umds-semantic-color-neutral-light-up);
+    color: var(--umds-semantic-color-neutral-dark-up);
+}
+
+/* ============================
+   Aba fechável (closable): × em botão próprio, sobre a folga direita da aba
+   ============================ */
+.umds-tabs__tab--closable {
+    /* folga para o ×: 8 de margem + 20 do botão + 4 de respiro */
+    padding-right: var(--umds-primitive-spacing-xs); /* 32px */
+}
+
+.umds-tabs__close {
+    position: absolute;
+    top: 50%;
+    right: var(--umds-primitive-spacing-nano);
+    transform: translateY(-50%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px; /* círculo de 20px: o glifo é de 10px */
+    height: 20px;
+    padding: 0;
+    border: none;
+    border-radius: var(--umds-primitive-border-radius-circular);
+    background: transparent;
+    color: var(--umds-semantic-color-neutral-dark-down);
+    cursor: pointer;
+}
+
+.umds-tabs__close:hover:not(:disabled) {
+    background-color: var(--umds-semantic-color-neutral-light-medium);
+    color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-tabs__close:focus-visible {
+    outline: 2px solid var(--umds-semantic-color-primary-pure);
+    outline-offset: 1px;
+}
+
+.umds-tabs__close:disabled {
+    cursor: not-allowed;
+    color: var(--umds-semantic-color-neutral-dark-up);
+}
+
+/* ============================
+   Botão "+" (onAdd)
+   ============================ */
+.umds-tabs__add {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    align-self: center;
+    flex-shrink: 0;
+    width: var(--umds-primitive-spacing-xs); /* 32px */
+    height: var(--umds-primitive-spacing-xs);
+    margin-left: var(--umds-primitive-spacing-quarck);
+    padding: 0;
+    border: none;
+    border-radius: var(--umds-primitive-border-radius-sm);
+    background: transparent;
+    color: var(--umds-semantic-color-neutral-dark-down);
+    cursor: pointer;
+}
+
+.umds-tabs__add:hover {
+    background-color: var(--umds-semantic-color-neutral-light-medium);
+    color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-tabs__add:focus-visible {
+    outline: 2px solid var(--umds-semantic-color-primary-pure);
+    outline-offset: 2px;
+}

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

@@ -23,6 +23,13 @@ export interface TabsProps {
      * como gerar um id compartilhado automaticamente).
      */
     id?: string;
+    /**
+     * Mostra o botão "+" depois da última aba (abrir nova aba, como no navegador)
+     * e o chama com `onAdd`. O botão fica fora do `tablist`.
+     */
+    onAdd?: (event?: any) => void;
+    /** Nome acessível do botão "+". Troque para traduzir. @default 'Adicionar aba' */
+    addLabel?: string;
     /** Classes CSS adicionais */
     className?: string;
     /** Subcomponentes Tab */

package/dist/components/Tabs/Tabs.js

@@ -1,15 +1,26 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './Tabs.css';
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import Icon from "../Icon/Icon";
 import TabsContext from "./tabs.context";
 function Tabs(props) {
     function classes() {
         return ["umds-tabs", props.className].filter(Boolean).join(" ");
     }
+    function barClasses() {
+        return ["umds-tabs__bar", props.onAdd ? "umds-tabs__bar--com-add" : ""]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function handleAdd(event) {
+        if (typeof props.onAdd === "function")
+            props.onAdd(event);
+    }
     return (_jsx(TabsContext.Provider, { value: {
             value: props.value,
             onChange: props.onChange,
             tabsId: props.id,
-        }, children: _jsx("div", { className: classes(), children: _jsx("div", { role: "tablist", className: "umds-tabs__list", "aria-label": props.ariaLabel, children: props.children }) }) }));
+        }, children: _jsx("div", { className: classes(), children: _jsxs("div", { className: barClasses(), children: [_jsx("div", { role: "tablist", className: "umds-tabs__list", "aria-label": props.ariaLabel, children: props.children }), props.onAdd ? (_jsx("button", { type: "button", className: "umds-tabs__add", "aria-label": props.addLabel || "Adicionar aba", onClick: (event) => handleAdd(event), children: _jsx(Icon, { variant: "inherit", customSize: "12px", icon: faPlus }) })) : null] }) }) }));
 }
 export default Tabs;

package/dist/components/Tag/Tag.css

@@ -1,7 +1,8 @@
 /* ============================================
    Tag Component
-   Aparências (appearance): outlined, solid
-   Tamanhos: sm, md, lg
+   Aparências (appearance): outlined, solid, soft
+   Tamanhos: xs, sm, md, lg
+   Modificador: pill
    ============================================ */
 
 .umds-tag {
@@ -84,6 +85,26 @@
 
 /* ── Tamanhos ── */
 
+/* xs: 18px de altura (12 de fonte com line-height 1 + 2 + 2 de padding + 2 de
+   borda). O alvo de toque do × e dos ícones clicáveis continua em 24px, mas a
+   margem negativa devolve o excesso, então a tag não cresce. */
+.umds-tag--xs {
+    gap: var(--umds-primitive-spacing-quarck);
+    padding: var(--umds-primitive-spacing-micro) var(--umds-primitive-spacing-nano);
+    border-radius: var(--umds-primitive-border-radius-sm);
+    font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+    line-height: 1;
+}
+
+.umds-tag--xs .umds-icon {
+    font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+}
+
+.umds-tag--xs .umds-tag__close,
+.umds-tag--xs .umds-tag__icon--clickable {
+    margin: calc(-1 * var(--umds-primitive-spacing-nano)) 0;
+}
+
 .umds-tag--sm {
     gap: var(--umds-primitive-spacing-quarck);
     padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano); /* 3px: candidato a novo token */
@@ -132,6 +153,38 @@
     border-color: var(--umds-semantic-color-primary-dark);
 }
 
+/* ── Aparência: Soft (fundo claro da cor, sem contorno) ── */
+.umds-tag--soft {
+    background-color: var(--umds-semantic-color-neutral-light-medium);
+    border-color: transparent;
+    color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+.umds-tag--soft.umds-tag--primary {
+    background-color: var(--umds-semantic-color-primary-light);
+    color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-tag--soft.umds-tag--positive {
+    background-color: var(--umds-semantic-color-feedback-positive-light);
+    color: var(--umds-semantic-color-feedback-positive-dark);
+}
+
+.umds-tag--soft.umds-tag--negative {
+    background-color: var(--umds-semantic-color-feedback-negative-light);
+    color: var(--umds-semantic-color-feedback-negative-dark);
+}
+
+.umds-tag--soft.umds-tag--info {
+    background-color: var(--umds-semantic-color-feedback-info-light);
+    color: var(--umds-semantic-color-feedback-info-dark);
+}
+
+/* ── Formato pílula (depois dos tamanhos, para vencer o raio deles) ── */
+.umds-tag--pill {
+    border-radius: var(--umds-primitive-border-radius-pill);
+}
+
 /* ── Variantes semânticas (paridade com o Badge) ──
    neutral (default) não gera classe — visual histórico intacto. */
 .umds-tag--outlined.umds-tag--primary {
@@ -174,6 +227,36 @@
 
 /* solid+primary = visual default do solid (primary-pure) — sem regra extra. */
 
+/* ── Variante new (novidade, amarelo) ──
+   O DS não tem token semântico de amarelo: usa os primitivos de amarelo e o
+   cinza escuro, fixos nos temas (candidato a token semântico de destaque). */
+.umds-tag--new {
+    font-weight: var(--umds-primitive-font-weight-bold);
+}
+
+.umds-tag--outlined.umds-tag--new {
+    /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token semântico de amarelo (candidato a novo token) */
+    border-color: var(--umds-primitive-yellow-pure);
+    /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token semântico de amarelo (candidato a novo token) */
+    color: var(--umds-primitive-yellow-dark);
+}
+
+.umds-tag--solid.umds-tag--new {
+    /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token semântico de amarelo (candidato a novo token) */
+    background-color: var(--umds-primitive-yellow-medium);
+    /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token semântico de amarelo (candidato a novo token) */
+    border-color: var(--umds-primitive-yellow-medium);
+    /* stylelint-disable-next-line 1ds/cor-por-token -- par fixo do amarelo: o semântico inverte no tema escuro e perderia o contraste */
+    color: var(--umds-primitive-gray-darkest);
+}
+
+.umds-tag--soft.umds-tag--new {
+    /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token semântico de amarelo (candidato a novo token) */
+    background-color: var(--umds-primitive-yellow-light);
+    /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token semântico de amarelo (candidato a novo token) */
+    color: var(--umds-primitive-yellow-dark);
+}
+
 /* ── Disabled ── */
 .umds-tag--disabled {
     opacity: 0.5;

package/dist/components/Tag/Tag.d.ts

@@ -1,7 +1,7 @@
 import './Tag.css';
 /**
  * Componente Tag para exibir rótulos, categorias e seleções.
- * Suporta aparências outlined/solid, 3 tamanhos e ícones opcionais.
+ * Suporta aparências outlined/solid/soft, 4 tamanhos, formato pílula e ícones opcionais.
  * Ideal para uso em multi-select, filtros e categorização.
  * @quandoUsar Rótulo ESTÁTICO que classifica ou dá status a um item: categoria de um processo, estado ("Em andamento"), prioridade. É leitura, não controle.
  * @quandoNaoUsar Quando o usuário pode remover o item ou alternar a seleção — use `Chips`. Para contagem numérica sobreposta a um ícone, use `Badge`.
@@ -16,22 +16,29 @@ export interface TagProps {
      */
     label?: string;
     /**
-     * Estilo visual da tag.
+     * Estilo visual da tag. `soft` é o fundo claro da cor da variante, sem
+     * contorno (setores, perfil, "Publicado", "Dado simulado").
      * @default 'outlined'
      */
-    appearance?: "outlined" | "solid";
+    appearance?: "outlined" | "solid" | "soft";
+    /**
+     * Formato de pílula (cantos totalmente arredondados).
+     * @default false
+     */
+    pill?: boolean;
     /**
      * Variante semântica de cor (paridade com o Badge) — para tag de STATUS
      * (achado mobile/prefeitura: sem isso, status exigia trocar para Badge).
      * 'neutral' mantém o visual atual.
      * @default 'neutral'
      */
-    variant?: "neutral" | "primary" | "positive" | "negative" | "info";
+    variant?: "neutral" | "primary" | "positive" | "negative" | "info" | "new";
     /**
-     * Tamanho da tag.
+     * Tamanho da tag. `xs` é a compacta de 18px (`line-height: 1`), para linha
+     * de lista e card; `sm` continua com 27px.
      * @default 'md'
      */
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg";
     /**
      * Ícone Font Awesome exibido à esquerda do label.
      */

package/dist/components/Tag/Tag.js

@@ -13,6 +13,7 @@ function Tag(props) {
             props.variant && props.variant !== "neutral"
                 ? `umds-tag--${props.variant}`
                 : "",
+            props.pill ? "umds-tag--pill" : "",
             props.disabled ? "umds-tag--disabled" : "",
             props.className,
         ]

package/dist/components/Text/Text.d.ts

@@ -59,7 +59,15 @@ export interface TextProps {
     as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "label";
     /** Alinhamento do texto */
     align?: "left" | "center" | "right" | "justify";
-    /** Cor do texto usando tokens semânticos */
+    /**
+     * Cor do texto usando tokens semânticos.
+     *
+     * `disabled` (`neutral-dark-up`, #A3A3A3, 2,5:1 sobre branco) é SÓ para
+     * texto de controle desabilitado (rótulo, valor ou ajuda de um campo ou
+     * botão inativo), que o WCAG 1.4.3 isenta de contraste. Em qualquer outro
+     * texto (apoio, legenda, etapa pendente, placeholder) ela reprova o
+     * mínimo de 4,5:1: use `secondary` (`neutral-dark-down`, #565656, 7,34:1).
+     */
     color?: "primary" | "secondary" | "disabled" | "negative" | "inherit"
     /** @deprecated use "negative" — mantido para não quebrar Input, Select e Textarea */
      | "error";

package/dist/components/Text/Text.js

@@ -77,7 +77,7 @@ function Text(props) {
             .filter(Boolean)
             .join(" ");
     }
-    function style() {
+    function estiloInline() {
         const styles = {};
         if (props.maxLines) {
             styles["--umds-text-max-lines"] = String(props.maxLines);
@@ -98,6 +98,6 @@ function Text(props) {
         }
         return out;
     }
-    return (_jsxs(_Fragment, { children: [elementTag() === "h1" ? (_jsx("h1", { id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "h2" ? (_jsx("h2", { id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "h3" ? (_jsx("h3", { id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "h4" ? (_jsx("h4", { id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "h5" ? (_jsx("h5", { id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "h6" ? (_jsx("h6", { id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "p" ? (_jsx("p", { id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "span" ? (_jsx("span", { id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "label" ? (_jsx("label", { htmlFor: props.forId, id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "div" ? (_jsx("div", { id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: props.children })) : null] }));
+    return (_jsxs(_Fragment, { children: [elementTag() === "h1" ? (_jsx("h1", { id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "h2" ? (_jsx("h2", { id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "h3" ? (_jsx("h3", { id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "h4" ? (_jsx("h4", { id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "h5" ? (_jsx("h5", { id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "h6" ? (_jsx("h6", { id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "p" ? (_jsx("p", { id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "span" ? (_jsx("span", { id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "label" ? (_jsx("label", { htmlFor: props.forId, id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "div" ? (_jsx("div", { id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: props.children })) : null] }));
 }
 export default Text;

package/dist/components/Textarea/Textarea.css

@@ -30,7 +30,7 @@
     align-items: flex-start;
     position: relative;
     background-color: var(--umds-semantic-color-background-white);
-    border: 1px solid var(--umds-semantic-color-neutral-light-down);
+    border: 1px solid var(--umds-semantic-field-border-default);
     border-radius: var(--umds-primitive-border-radius-sm);
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
@@ -110,11 +110,11 @@
 /* Read Only State */
 .umds-textarea--readonly .umds-textarea__container {
     background-color: var(--umds-semantic-field-readonly-background);
-    border-color: var(--umds-semantic-color-neutral-light-down);
+    border-color: var(--umds-semantic-field-border-default);
 }
 
 .umds-textarea--readonly .umds-textarea__container:hover {
-    border-color: var(--umds-semantic-color-neutral-light-down);
+    border-color: var(--umds-semantic-field-border-default);
 }
 
 .umds-textarea--readonly .umds-textarea__container:focus-within {
@@ -128,6 +128,14 @@
     resize: none;
 }
 
+/* Somente leitura não é desabilitado: o texto segue lido e a WCAG 1.4.3 vale
+   sem isenção. O placeholder padrão foi calibrado para fundo branco e cai para
+   ~4,2:1 sobre o fundo de somente leitura; neutral-dark-down passa 4,5:1 em
+   todos os temas (1doc 6,78:1 · 1doc-dark 10,83:1 · alto contraste 16,48:1). */
+.umds-textarea--readonly .umds-textarea__control::placeholder {
+    color: var(--umds-semantic-color-neutral-dark-down);
+}
+
 /* Footer (Helper/Error + Counter) */
 .umds-textarea__footer {
     display: flex;

package/dist/components/TimePicker/TimePicker.css

@@ -297,6 +297,14 @@
   border-color: var(--umds-semantic-field-border-default);
 }
 
+/* Somente leitura não é desabilitado: o texto segue lido e a WCAG 1.4.3 vale
+   sem isenção. O placeholder padrão foi calibrado para fundo branco e cai para
+   ~4,2:1 sobre o fundo de somente leitura; neutral-dark-down passa 4,5:1 em
+   todos os temas (1doc 6,78:1 · 1doc-dark 10,83:1 · alto contraste 16,48:1). */
+.umds-timepicker--readonly .umds-timepicker__placeholder {
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
 /* ── Alto contraste ──
    O traço do painel é neutral-light-medium — #5A5A5A neste tema, 3:1 sobre o
    preto. As superfícies flutuantes do tema usam a borda branca