@1doc/1ds-react 2.8.0 → 2.10.0

package/dist/components/Stack/Stack.js

@@ -1,6 +1,10 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './Stack.css';
 function Stack(props) {
+    function elementTag() {
+        return props.as || "div";
+    }
     function classes() {
         return [
             "umds-stack",
@@ -10,11 +14,35 @@ function Stack(props) {
             props.justify ? `umds-stack--justify-${props.justify}` : "",
             props.wrap ? "umds-stack--wrap" : "",
             props.inline ? "umds-stack--inline" : "",
+            props.grow ? "umds-stack--grow" : "",
+            props.shrink ? `umds-stack--shrink-${props.shrink}` : "",
+            props.basis ? `umds-stack--basis-${props.basis}` : "",
+            props.minWidth ? `umds-stack--min-w-${props.minWidth}` : "",
+            props.overflow ? `umds-stack--overflow-${props.overflow}` : "",
+            props.overflowX ? `umds-stack--overflow-x-${props.overflowX}` : "",
+            props.overflowY ? `umds-stack--overflow-y-${props.overflowY}` : "",
+            props.fullHeight ? "umds-stack--full-height" : "",
+            props.fullWidth ? "umds-stack--full-width" : "",
             props.className,
         ]
             .filter(Boolean)
             .join(" ");
     }
-    return (_jsx("div", { className: classes(), children: _jsx(_Fragment, { children: props.children }) }));
+    function htmlAttrs() {
+        const out = {};
+        for (const chave in props) {
+            if (chave.indexOf("data-") === 0 ||
+                chave.indexOf("aria-") === 0 ||
+                chave === "style" ||
+                chave === "class" ||
+                chave === "title" ||
+                chave === "role" ||
+                chave === "tabIndex") {
+                out[chave] = props[chave];
+            }
+        }
+        return out;
+    }
+    return (_jsxs(_Fragment, { children: [elementTag() === "div" ? (_jsx("div", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "span" ? (_jsx("span", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "ul" ? (_jsx("ul", { role: "list", id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "ol" ? (_jsx("ol", { role: "list", id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "li" ? (_jsx("li", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "section" ? (_jsx("section", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "nav" ? (_jsx("nav", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "header" ? (_jsx("header", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "footer" ? (_jsx("footer", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "form" ? (_jsx("form", { id: props.id, onSubmit: (event) => props.onSubmit && props.onSubmit(event), ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null] }));
 }
 export default Stack;

package/dist/components/StatCard/StatCard.css

@@ -152,3 +152,141 @@
 .umds-stat-card__variacao--neutral {
   color: var(--umds-semantic-color-neutral-dark-down);
 }
+
+/* ── ⓘ de ajuda ao lado do rótulo (infoTooltip) ── */
+.umds-stat-card__rotulo {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-nano);
+}
+
+.umds-stat-card__info {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--umds-semantic-color-neutral-dark-medium);
+  cursor: help;
+  border-radius: var(--umds-primitive-border-radius-circular);
+}
+
+.umds-stat-card__info:hover {
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-stat-card__info:focus-visible {
+  outline: 2px solid var(--umds-semantic-color-primary-pure);
+  outline-offset: 2px;
+}
+
+/* ── labelPosition="top": rótulo no topo, ícone e número embaixo ──
+   O HTML segue com o número antes do rótulo (a ordem do leitor de tela); só a
+   grade muda a ordem visual. O corpo vira `display: contents` para o rótulo,
+   o número e o resto virarem itens da própria grade do cartão. */
+.umds-stat-card--rotulo-topo {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  column-gap: 0;
+  row-gap: var(--umds-primitive-spacing-nano);
+}
+
+.umds-stat-card--rotulo-topo .umds-stat-card__corpo {
+  display: contents;
+}
+
+.umds-stat-card--rotulo-topo .umds-stat-card__rotulo {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  font-weight: var(--umds-primitive-font-weight-semibold);
+}
+
+.umds-stat-card--rotulo-topo .umds-stat-card__icone {
+  grid-column: 1;
+  grid-row: 2;
+  margin-right: var(--umds-primitive-spacing-mini);
+}
+
+.umds-stat-card--rotulo-topo .umds-stat-card__valor {
+  grid-column: 2;
+  grid-row: 2;
+  font-size: var(--umds-primitive-font-size-lg); /* 32px */
+  font-weight: var(--umds-primitive-font-weight-extrabold);
+}
+
+.umds-stat-card--rotulo-topo .umds-stat-card__descricao,
+.umds-stat-card--rotulo-topo .umds-stat-card__variacao {
+  grid-column: 1 / -1;
+}
+
+/* Sem ícone, o número ocupa a linha toda. */
+.umds-stat-card--rotulo-topo:not(:has(.umds-stat-card__icone)) .umds-stat-card__valor {
+  grid-column: 1 / -1;
+}
+
+/* ── valueTone: cor do número principal (variantes escuras: contraste AA no branco) ── */
+.umds-stat-card--valor-primary .umds-stat-card__valor {
+  color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-stat-card--valor-positive .umds-stat-card__valor {
+  color: var(--umds-semantic-color-feedback-positive-dark);
+}
+
+.umds-stat-card--valor-negative .umds-stat-card__valor {
+  color: var(--umds-semantic-color-feedback-negative-dark);
+}
+
+.umds-stat-card--valor-info .umds-stat-card__valor {
+  color: var(--umds-semantic-color-feedback-info-dark);
+}
+
+/* ── Segunda medida (secondaryValue, secondaryLabel) ──
+   Menor, à direita da principal, separada por um filete. Vem depois do corpo no HTML. */
+.umds-stat-card__secundaria {
+  display: flex;
+  flex-direction: column;
+  gap: var(--umds-primitive-spacing-micro);
+  margin-left: auto;
+  padding-left: var(--umds-primitive-spacing-xxxs);
+  border-left: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  text-align: right;
+}
+
+.umds-stat-card--centro .umds-stat-card__secundaria {
+  margin-left: 0;
+  padding-left: 0;
+  border-left: none;
+  align-items: center;
+  text-align: center;
+}
+
+.umds-stat-card__valor-secundario {
+  font-size: var(--umds-primitive-font-size-sm); /* 20px */
+  font-weight: var(--umds-primitive-font-weight-bold);
+  line-height: 1.15;
+  font-variant-numeric: tabular-nums;
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+.umds-stat-card__rotulo-secundario {
+  font-size: var(--umds-primitive-font-size-xxxs);
+  color: var(--umds-semantic-color-neutral-dark-down);
+  line-height: 1.4;
+}
+
+/* Com o rótulo no topo a grade ganha uma terceira coluna para a segunda medida. */
+.umds-stat-card--rotulo-topo.umds-stat-card--com-secundaria {
+  grid-template-columns: auto 1fr auto;
+}
+
+.umds-stat-card--rotulo-topo .umds-stat-card__secundaria {
+  grid-column: 3;
+  grid-row: 2;
+}
+
+.umds-stat-card--rotulo-topo.umds-stat-card--com-secundaria:not(:has(.umds-stat-card__icone)) .umds-stat-card__valor {
+  grid-column: 1 / 3;
+}

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

@@ -22,6 +22,12 @@ 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|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")
+ * @property {string} valueTone - Cor do número principal: 'default' (cor do texto) | 'primary' | 'positive' | 'negative' | 'info'. Usa as variantes escuras (contraste AA sobre o branco). Não confunda com `variant`, que pinta o ícone e a variação.
+ * @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 +62,26 @@ 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";
+    /** Segunda medida, menor, à direita da principal. 0 aparece; vazio e ausente não. */
+    secondaryValue?: string | number;
+    /** O que a segunda medida significa. */
+    secondaryLabel?: string;
+    /** Cor do número principal. @default 'default' */
+    valueTone?: "default" | "primary" | "positive" | "negative" | "info";
+    /**
+     * 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,20 @@
 "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" : "",
+            temSecundaria() ? "umds-stat-card--com-secundaria" : "",
+            props.valueTone && props.valueTone !== "default"
+                ? "umds-stat-card--valor-" + props.valueTone
+                : "",
             props.onClick ? "umds-stat-card--acionavel" : "",
             props.className,
         ]
@@ -35,6 +42,11 @@ function StatCard(props) {
             return "↓";
         return "→";
     }
+    function temSecundaria() {
+        return (props.secondaryValue !== undefined &&
+            props.secondaryValue !== null &&
+            props.secondaryValue !== "");
+    }
     function ehAcionavel() {
         return !!props.onClick;
     }
@@ -45,6 +57,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] }), temSecundaria() ? (_jsxs("div", { className: "umds-stat-card__secundaria", children: [_jsx("span", { className: "umds-stat-card__valor-secundario", children: props.secondaryValue }), props.secondaryLabel ? (_jsx("span", { className: "umds-stat-card__rotulo-secundario", children: props.secondaryLabel })) : null] })) : null] }));
 }
 export default StatCard;

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;