@1doc/1ds-react 2.12.2 → 2.14.0

package/dist/components/List/ListItem.js

@@ -77,6 +77,6 @@ function ListItem(props) {
         }
         return out;
     }
-    return (_jsxs(_Fragment, { children: [!props.standalone ? (_jsxs("li", { className: "umds-list__item", children: [elementTag() === "button" ? (_jsxs("button", { type: "button", id: props.id, title: props.tooltip, disabled: props.disabled, "aria-current": ariaCurrent(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "a" ? (_jsxs("a", { id: props.id, title: props.tooltip, href: hrefValue(), target: props.target, rel: relValue(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "div" ? (_jsxs("div", { id: props.id, title: props.tooltip, role: divRole(), tabIndex: divTabIndex(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), onKeyDown: (event) => handleKeyDown(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null] })) : null, !!props.standalone ? (_jsxs(_Fragment, { children: [elementTag() === "button" ? (_jsxs("button", { type: "button", id: props.id, title: props.tooltip, disabled: props.disabled, "aria-current": ariaCurrent(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "a" ? (_jsxs("a", { id: props.id, title: props.tooltip, href: hrefValue(), target: props.target, rel: relValue(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "div" ? (_jsxs("div", { id: props.id, title: props.tooltip, role: divRole(), tabIndex: divTabIndex(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), onKeyDown: (event) => handleKeyDown(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null] })) : null] }));
+    return (_jsx(_Fragment, { children: !props.standalone ? (_jsx(_Fragment, { children: _jsxs("li", { className: "umds-list__item", children: [elementTag() === "button" ? (_jsxs("button", { type: "button", id: props.id, title: props.tooltip, disabled: props.disabled, "aria-current": ariaCurrent(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "a" ? (_jsxs("a", { id: props.id, title: props.tooltip, href: hrefValue(), target: props.target, rel: relValue(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "div" ? (_jsxs("div", { id: props.id, title: props.tooltip, role: divRole(), tabIndex: divTabIndex(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), onKeyDown: (event) => handleKeyDown(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, props.actions ? (_jsx("div", { className: "umds-list-item__actions", children: _jsx(_Fragment, { children: props.actions }) })) : null] }) })) : (_jsx(_Fragment, { children: _jsxs(_Fragment, { children: [elementTag() === "button" ? (_jsxs("button", { type: "button", id: props.id, title: props.tooltip, disabled: props.disabled, "aria-current": ariaCurrent(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "a" ? (_jsxs("a", { id: props.id, title: props.tooltip, href: hrefValue(), target: props.target, rel: relValue(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "div" ? (_jsxs("div", { id: props.id, title: props.tooltip, role: divRole(), tabIndex: divTabIndex(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), onKeyDown: (event) => handleKeyDown(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null] }) })) }));
 }
 export default ListItem;

package/dist/components/StatCard/StatCard.css

@@ -243,8 +243,25 @@
   color: var(--umds-semantic-color-feedback-info-dark);
 }
 
+/* ── secondaryTone: cor da segunda medida (mesmas variantes do valueTone) ── */
+.umds-stat-card--secundario-primary .umds-stat-card__valor-secundario {
+  color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-stat-card--secundario-positive .umds-stat-card__valor-secundario {
+  color: var(--umds-semantic-color-feedback-positive-dark);
+}
+
+.umds-stat-card--secundario-negative .umds-stat-card__valor-secundario {
+  color: var(--umds-semantic-color-feedback-negative-dark);
+}
+
+.umds-stat-card--secundario-info .umds-stat-card__valor-secundario {
+  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. */
+   À direita da principal, separada por um filete. Vem depois do corpo no HTML. */
 .umds-stat-card__secundaria {
   display: flex;
   flex-direction: column;
@@ -263,8 +280,9 @@
   text-align: center;
 }
 
+/* Mesmo tamanho e peso do número principal: as duas medidas se comparam lado a lado. */
 .umds-stat-card__valor-secundario {
-  font-size: var(--umds-primitive-font-size-sm); /* 20px */
+  font-size: var(--umds-primitive-font-size-md);
   font-weight: var(--umds-primitive-font-weight-bold);
   line-height: 1.15;
   font-variant-numeric: tabular-nums;
@@ -285,6 +303,30 @@
 .umds-stat-card--rotulo-topo .umds-stat-card__secundaria {
   grid-column: 3;
   grid-row: 2;
+  /* A grade não tem vão entre colunas: o filete ganha o mesmo respiro dos dois lados. */
+  margin-left: var(--umds-primitive-spacing-xxxs);
+}
+
+.umds-stat-card--rotulo-topo .umds-stat-card__valor-secundario {
+  font-size: var(--umds-primitive-font-size-lg); /* 32px, como o principal */
+  font-weight: var(--umds-primitive-font-weight-extrabold);
+}
+
+/* Com rótulo na segunda medida, ela ocupa as linhas do número e da descrição
+   (subgrid): o rótulo dela fica na linha da descrição ("Geral" ao lado de
+   "Meu Setor") e o valor na linha do número principal. */
+.umds-stat-card--rotulo-topo .umds-stat-card__secundaria:has(.umds-stat-card__rotulo-secundario) {
+  grid-row: 2 / span 2;
+  display: grid;
+  grid-template-rows: subgrid;
+  /* `normal` usa o vão da grade do cartão; o `micro` da regra base deslocaria a linha em 1,5px. */
+  row-gap: normal;
+  align-items: center;
+}
+
+.umds-stat-card--rotulo-topo.umds-stat-card--com-secundaria .umds-stat-card__descricao {
+  grid-column: 1 / 3;
+  grid-row: 3;
 }
 
 .umds-stat-card--rotulo-topo.umds-stat-card--com-secundaria:not(:has(.umds-stat-card__icone)) .umds-stat-card__valor {
@@ -298,3 +340,16 @@
   font-size: 1.125rem; /* 18px */
   font-weight: var(--umds-primitive-font-weight-extrabold);
 }
+
+/* A segunda medida acompanha o número principal. */
+.umds-stat-card.umds-stat-card--sm .umds-stat-card__valor-secundario {
+  font-size: 1.125rem; /* 18px */
+  font-weight: var(--umds-primitive-font-weight-extrabold);
+}
+
+/* ── loading: o Skeleton ocupa a altura do número (1em da fonte dele) ── */
+.umds-stat-card[aria-busy="true"] .umds-stat-card__valor,
+.umds-stat-card[aria-busy="true"] .umds-stat-card__valor-secundario {
+  display: inline-flex;
+  align-items: center;
+}

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

@@ -14,7 +14,7 @@ import './StatCard.css';
  *   pessoa a segurar o rótulo na cabeça esperando o valor.
  * - **A variação não depende só da cor.** Sobe e desce vêm com seta, porque
  *   verde e vermelho sozinhos não comunicam para quem não distingue cores.
- * @property {string} value - O número ou medida em destaque
+ * @property {any} value - O número ou medida em destaque. Aceita um nó, como um `Counter` para o número contar até o valor (no Vue, slot `value`)
  * @property {string} label - O que o número significa
  * @property {IconProp} icon - Ícone Font Awesome como objeto importado
  * @property {string} variant - Cor de apoio do ícone e da variação
@@ -24,20 +24,22 @@ import './StatCard.css';
  * @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|number} secondaryValue - Segunda medida do cartão, no mesmo tamanho da principal, à direita dela ("22,31%" do setor e "14,11%" do geral). Com `labelPosition="top"`, o `secondaryLabel` fica na linha da `description`. 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} secondaryTone - Cor da segunda medida, com as mesmas opções de `valueTone` ("Meu Setor" em azul e "Geral" em verde, por exemplo).
+ * @property {boolean} loading - Carregando: os números viram Skeleton do tamanho deles (rótulos e ⓘ continuam), a variação some e o cartão ganha `aria-busy`. Dispensa montar o Skeleton por fora.
  * @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)
  * @quandoUsar Painel e visão geral: destacar UMA medida por cartão, em linha com outras. O número é o protagonista da leitura.
- * @quandoNaoUsar Para listar dados comparáveis — use `DataTable`. Para um bloco com título e conteúdo livre, `Card`. Para um rótulo curto de estado, `Tag` ou `Badge`. Não empilhe vários números num StatCard só: um cartão, uma medida.
+ * @quandoNaoUsar Para listar dados comparáveis — use `DataTable`. Para um bloco com título e conteúdo livre, `Card`. Para um rótulo curto de estado, `Tag` ou `Badge`. Não empilhe vários números num StatCard só: uma medida, ou duas comparadas (`secondaryValue`).
  */
 export interface StatCardProps {
-    /** O número ou medida em destaque. */
-    value?: string | number;
+    /** O número ou medida em destaque. Texto, número ou nó (um `Counter`); no Vue, slot `value`. */
+    value?: any;
     /** O que o número significa. */
     label?: string;
     /** Ícone Font Awesome como objeto importado. */
@@ -70,7 +72,7 @@ export interface StatCardProps {
      * @default 'bottom'
      */
     labelPosition?: "bottom" | "top";
-    /** Segunda medida, menor, à direita da principal. 0 aparece; vazio e ausente não. */
+    /** Segunda medida, no tamanho da principal, à direita dela. 0 aparece; vazio e ausente não. */
     secondaryValue?: string | number;
     /** O que a segunda medida significa. */
     secondaryLabel?: string;
@@ -78,6 +80,10 @@ export interface StatCardProps {
     size?: "md" | "sm";
     /** Cor do número principal. @default 'default' */
     valueTone?: "default" | "primary" | "positive" | "negative" | "info";
+    /** Cor da segunda medida. Mesmas opções de `valueTone`. @default 'default' */
+    secondaryTone?: "default" | "primary" | "positive" | "negative" | "info";
+    /** Carregando: números viram Skeleton, a variação some, `aria-busy` no cartão. @default false */
+    loading?: boolean;
     /**
      * 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.

package/dist/components/StatCard/StatCard.js

@@ -1,9 +1,10 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, 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";
+import Skeleton from "../Skeleton/Skeleton";
 function StatCard(props) {
     function classes() {
         return [
@@ -16,6 +17,9 @@ function StatCard(props) {
             props.valueTone && props.valueTone !== "default"
                 ? "umds-stat-card--valor-" + props.valueTone
                 : "",
+            props.secondaryTone && props.secondaryTone !== "default"
+                ? "umds-stat-card--secundario-" + props.secondaryTone
+                : "",
             props.onClick ? "umds-stat-card--acionavel" : "",
             props.className,
         ]
@@ -58,6 +62,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 }), _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] }));
+    return (_jsxs("div", { className: classes(), onClick: (event) => aoClicar(), role: ehAcionavel() ? "button" : undefined, tabIndex: ehAcionavel() ? 0 : undefined, "aria-busy": props.loading ? "true" : 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: [_jsxs("span", { className: "umds-stat-card__valor", children: [props.loading ? _jsx(Skeleton, { width: "3em", height: "1em" }) : null, !props.loading ? _jsx(_Fragment, { children: props.value }) : null] }), _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 && !props.loading ? (_jsxs("span", { className: classesDaVariacao(), children: [_jsx("span", { "aria-hidden": "true", children: simboloDaVariacao() }), props.trendLabel] })) : null] }), temSecundaria() ? (_jsxs("div", { className: "umds-stat-card__secundaria", children: [_jsxs("span", { className: "umds-stat-card__valor-secundario", children: [props.loading ? _jsx(Skeleton, { width: "3em", height: "1em" }) : null, !props.loading ? _jsx(_Fragment, { children: props.secondaryValue }) : null] }), props.secondaryLabel ? (_jsx("span", { className: "umds-stat-card__rotulo-secundario", children: props.secondaryLabel })) : null] })) : null] }));
 }
 export default StatCard;

package/dist/components/Tooltip/Tooltip.css

@@ -8,6 +8,9 @@
 ───────────────────────────────────────────── */
 
 .umds-tooltip {
+  /* Bloco de contenção da cópia escondida (__descricao, absolute): sem ele,
+     ela escapa do overflow de uma área que rola e estica a página. */
+  position: relative;
   display: inline-flex;
   height: fit-content;
 }

package/dist/components/Tooltip/Tooltip.js

@@ -2,7 +2,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './Tooltip.css';
 import { useState, useRef, useEffect } from "react";
-import { computePosition, autoUpdate, offset, flip, shift, } from "@floating-ui/dom";
+import { computePosition, autoUpdate, offset, flip, shift, arrow, } from "@floating-ui/dom";
 import Icon from "../Icon/Icon";
 import Portal from "../Portal/Portal";
 import { gerarId } from "../../utils/id";
@@ -28,6 +28,7 @@ function Tooltip(props) {
     const [posY, setPosY] = useState(() => 0);
     const [finalSide, setFinalSide] = useState(() => "top");
     const [finalAlign, setFinalAlign] = useState(() => "center");
+    const [arrowOffset, setArrowOffset] = useState(() => -1);
     const [bubbleId, setBubbleId] = useState(() => "");
     const [descId, setDescId] = useState(() => "");
     function bubbleIdText() {
@@ -92,6 +93,12 @@ function Tooltip(props) {
                 padding: 8,
             }),
         ];
+        // A seta acompanha o gatilho quando o balão é empurrado para caber.
+        if (arrowRef.current)
+            middlewares.push(arrow({
+                element: arrowRef.current,
+                padding: 8,
+            }));
         computePosition(triggerRef.current, floatingRef.current, {
             placement,
             strategy: "fixed",
@@ -105,6 +112,14 @@ function Tooltip(props) {
             const parts = position.placement.split("-");
             setFinalSide(parts[0]);
             setFinalAlign(parts[1] || "center");
+            // Só quando o shift deslocou o balão a seta sai da posição estática
+            // (as 12 classes side×align): nos outros casos o visual não muda.
+            const deslocamento = position.middlewareData.shift;
+            const seta = position.middlewareData.arrow;
+            const empurrado = !!deslocamento && (deslocamento.x !== 0 || deslocamento.y !== 0);
+            const vertical = parts[0] === "left" || parts[0] === "right";
+            const eixo = seta ? (vertical ? seta.y : seta.x) : undefined;
+            setArrowOffset(empurrado && typeof eixo === "number" ? eixo : -1);
             setPositioned(true);
         });
     }
@@ -273,6 +288,22 @@ function Tooltip(props) {
             "umds-tooltip__arrow--align-" + finalAlign,
         ].join(" ");
     }
+    function arrowStyle() {
+        if (arrowOffset < 0)
+            return undefined;
+        if (finalSide === "left" || finalSide === "right") {
+            return {
+                top: arrowOffset + "px",
+                bottom: "auto",
+                transform: "rotate(45deg)",
+            };
+        }
+        return {
+            left: arrowOffset + "px",
+            right: "auto",
+            transform: "rotate(45deg)",
+        };
+    }
     useEffect(() => {
         if (!triggerRef.current)
             return;
@@ -315,6 +346,6 @@ function Tooltip(props) {
             stopKeydownWatch();
         };
     }, []);
-    return (_jsxs("span", { ref: triggerRef, className: ["umds-tooltip", props.className].filter(Boolean).join(" "), onMouseEnter: (event) => handleOpen(), onMouseLeave: (event) => handleClose(event), children: [_jsx(_Fragment, { children: props.children }), _jsxs("span", { className: "umds-tooltip__descricao", "aria-hidden": "true", id: descIdText(), children: [props.title ? _jsx(_Fragment, { children: tituloDescrito() }) : null, props.content ? _jsx(_Fragment, { children: props.content }) : null] }), _jsx(Portal, { children: mounted ? (_jsx("span", { ref: floatingRef, className: floatingClasses(), style: floatingStyle(), children: _jsxs("span", { role: "tooltip", className: bubbleClasses(), id: bubbleIdText(), "aria-hidden": !open, children: [_jsxs("span", { className: "umds-tooltip__row", children: [props.icon ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: props.icon })) : null, _jsxs("span", { className: "umds-tooltip__text", children: [props.title ? (_jsx("span", { className: "umds-tooltip__title", children: props.title })) : null, props.content ? (_jsx("span", { className: "umds-tooltip__content", children: _jsx(_Fragment, { children: props.content }) })) : null] })] }), _jsx("span", { ref: arrowRef, className: arrowClasses() })] }) })) : null })] }));
+    return (_jsxs("span", { ref: triggerRef, className: ["umds-tooltip", props.className].filter(Boolean).join(" "), onMouseEnter: (event) => handleOpen(), onMouseLeave: (event) => handleClose(event), children: [_jsx(_Fragment, { children: props.children }), _jsxs("span", { className: "umds-tooltip__descricao", "aria-hidden": "true", id: descIdText(), children: [props.title ? _jsx(_Fragment, { children: tituloDescrito() }) : null, props.content ? _jsx(_Fragment, { children: props.content }) : null] }), _jsx(Portal, { children: mounted ? (_jsx("span", { ref: floatingRef, className: floatingClasses(), style: floatingStyle(), children: _jsxs("span", { role: "tooltip", className: bubbleClasses(), id: bubbleIdText(), "aria-hidden": !open, children: [_jsxs("span", { className: "umds-tooltip__row", children: [props.icon ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: props.icon })) : null, _jsxs("span", { className: "umds-tooltip__text", children: [props.title ? (_jsx("span", { className: "umds-tooltip__title", children: props.title })) : null, props.content ? (_jsx("span", { className: "umds-tooltip__content", children: _jsx(_Fragment, { children: props.content }) })) : null] })] }), _jsx("span", { ref: arrowRef, className: arrowClasses(), style: arrowStyle() })] }) })) : null })] }));
 }
 export default Tooltip;

package/dist/index.d.ts

@@ -50,6 +50,8 @@ export { default as Input } from "./components/Input/Input";
 export { default as Kanban } from "./components/Kanban/Kanban";
 export { default as KanbanCard } from "./components/Kanban/KanbanCard";
 export { default as KanbanColumn } from "./components/Kanban/KanbanColumn";
+export { default as Counter } from "./components/Counter/Counter";
+export type * from "./components/Counter/Counter";
 export { default as Kbd } from "./components/Kbd/Kbd";
 export { default as Link } from "./components/Link/Link";
 export { default as LineChart } from "./components/Chart/LineChart";

package/dist/index.js

@@ -56,6 +56,7 @@ export { default as Input } from "./components/Input/Input";
 export { default as Kanban } from "./components/Kanban/Kanban";
 export { default as KanbanCard } from "./components/Kanban/KanbanCard";
 export { default as KanbanColumn } from "./components/Kanban/KanbanColumn";
+export { default as Counter } from "./components/Counter/Counter";
 export { default as Kbd } from "./components/Kbd/Kbd";
 export { default as Link } from "./components/Link/Link";
 export { default as LineChart } from "./components/Chart/LineChart";

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

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

package/dist/teste/BreadcrumbTruncado.test.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import Breadcrumb from "../components/Breadcrumb/Breadcrumb";
+import { render } from "@testing-library/react";
+import { lerArquivo } from "./lerArquivo";
+const cssBreadcrumb = (await lerArquivo("../core/src/components/Breadcrumb/Breadcrumb.css")).replace(/\r\n/g, "\n");
+const bloco = (texto, seletor) => {
+    const inicio = texto.indexOf(seletor + " {");
+    expect(inicio, seletor).toBeGreaterThanOrEqual(0);
+    return texto.slice(inicio, texto.indexOf("}", inicio));
+};
+const ITENS = [
+    { label: "1Doc", href: "#" },
+    { label: "Proc. Administrativo 412/2026", onClick: () => { } },
+    { label: "Reforma da cobertura do Ginásio Poliesportivo Municipal" },
+];
+describe("Breadcrumb · truncate", () => {
+    it("truncate escreve a classe na raiz; sem a prop, não", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: ITENS, truncate: true }), _jsx(Breadcrumb, { items: ITENS })] }));
+        expect(container.children[0]).toHaveClass("umds-breadcrumb--truncate");
+        expect(container.children[1]).not.toHaveClass("umds-breadcrumb--truncate");
+    });
+    it("com truncate, o rótulo inteiro vai no title do link, do item clicável e da página atual; sem, nenhum title", () => {
+        const { container } = render(_jsx(Breadcrumb, { items: ITENS, truncate: true }));
+        expect(container.querySelector("a.umds-breadcrumb__link")).toHaveAttribute("title", "1Doc");
+        expect(container.querySelector("[role=button].umds-breadcrumb__link")).toHaveAttribute("title", "Proc. Administrativo 412/2026");
+        expect(container.querySelector(".umds-breadcrumb__current")).toHaveAttribute("title", "Reforma da cobertura do Ginásio Poliesportivo Municipal");
+        const sem = render(_jsx(Breadcrumb, { items: ITENS }));
+        expect(sem.container.querySelectorAll("[title]")).toHaveLength(0);
+    });
+    it("CSS: uma linha; a página atual encolhe primeiro até 80px; o texto ganha reticências; o padrão segue quebrando linha", () => {
+        expect(bloco(cssBreadcrumb, ".umds-breadcrumb--truncate .umds-breadcrumb__list")).toMatch(/flex-wrap:\s*nowrap/);
+        const ultimo = bloco(cssBreadcrumb, ".umds-breadcrumb--truncate .umds-breadcrumb__item:last-child");
+        expect(ultimo).toMatch(/flex-shrink:\s*100000;/);
+        expect(ultimo).toMatch(/min-width:\s*var\(--umds-primitive-spacing-xxl\)/);
+        expect(bloco(cssBreadcrumb, ".umds-breadcrumb--truncate .umds-breadcrumb__sep")).toMatch(/flex-shrink:\s*0/);
+        expect(cssBreadcrumb).toMatch(/\.umds-breadcrumb--truncate \.umds-breadcrumb__current \{[^}]*text-overflow:\s*ellipsis/);
+        expect(bloco(cssBreadcrumb, ".umds-breadcrumb__list")).toMatch(/flex-wrap:\s*wrap/);
+    });
+});

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

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

package/dist/teste/PedidosMatheus.test.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import Button from "../components/Button/Button";
+import Counter from "../components/Counter/Counter";
+import Dropdown from "../components/Dropdown/Dropdown";
+import ListItem from "../components/List/ListItem";
+import StatCard from "../components/StatCard/StatCard";
+describe("Counter", () => {
+    it("sem animação mostra o valor final formatado em pt-BR", () => {
+        const { container } = render(_jsx(Counter, { value: 1284, disableAnimation: true }));
+        expect(container.querySelector(".umds-counter__numero")).toHaveTextContent("1.284");
+        expect(container.querySelector(".umds-counter__numero")).toHaveAttribute("aria-hidden", "true");
+        expect(container.querySelector(".umds-counter__leitura")).toHaveTextContent("1.284");
+    });
+    it("casas decimais seguem o value; prefixo e sufixo entram no texto", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(Counter, { value: 22.31, suffix: "%", disableAnimation: true }), _jsx(Counter, { value: 15890.5, prefix: "R$ ", decimals: 2, disableAnimation: true })] }));
+        const leituras = container.querySelectorAll(".umds-counter__leitura");
+        expect(leituras[0]).toHaveTextContent("22,31%");
+        expect(leituras[1].textContent).toBe("R$ 15.890,50");
+    });
+    it("conta do from até o valor e termina no valor exato", async () => {
+        vi.useFakeTimers();
+        const { container } = render(_jsx(Counter, { value: 500, duration: 100 }));
+        const numero = () => container.querySelector(".umds-counter__numero").textContent;
+        expect(numero()).toBe("0");
+        await act(async () => {
+            vi.advanceTimersByTime(500);
+        });
+        expect(numero()).toBe("500");
+        // A reserva e a leitura já nascem com o valor final.
+        expect(container.querySelector(".umds-counter__leitura")).toHaveTextContent("500");
+        vi.useRealTimers();
+    });
+});
+describe("ListItem · actions", () => {
+    it("as ações ficam no li, fora do elemento clicável", () => {
+        const { container } = render(_jsx("ul", { children: _jsx(ListItem, { href: "#doc", title: "Memorando", actions: _jsx("button", { type: "button", children: "Mais" }) }) }));
+        const acao = screen.getByRole("button", { name: "Mais" });
+        expect(acao.closest("a")).toBeNull();
+        expect(acao.parentElement).toHaveClass("umds-list-item__actions");
+        expect(container.querySelector("li > a")).toHaveAttribute("href", "#doc");
+    });
+});
+describe("Button · href", () => {
+    it("com href é um link; desabilitado volta a ser botão", () => {
+        render(_jsxs(_Fragment, { children: [_jsx(Button, { href: "#inbox", children: "Inbox" }), _jsx(Button, { href: "#cal", target: "_blank", children: "Calend\u00E1rio" }), _jsx(Button, { href: "#fila", disabled: true, children: "Fila" })] }));
+        expect(screen.getByRole("link", { name: "Inbox" })).toHaveAttribute("href", "#inbox");
+        expect(screen.getByRole("link", { name: "Calendário" })).toHaveAttribute("rel", "noopener noreferrer");
+        expect(screen.getByRole("button", { name: "Fila" })).toBeDisabled();
+    });
+    it("loading segura a navegação do link", () => {
+        render(_jsx(Button, { href: "#inbox", loading: true, loadingPosition: "start", children: "Inbox" }));
+        const link = screen.getByRole("link", { name: "Inbox" });
+        const evento = new MouseEvent("click", { bubbles: true, cancelable: true });
+        link.dispatchEvent(evento);
+        expect(evento.defaultPrevented).toBe(true);
+    });
+});
+describe("Dropdown · href", () => {
+    it("item com href vira <a role=menuitem>, e o onSelect continua", async () => {
+        const onSelect = vi.fn();
+        render(_jsx(Dropdown, { ariaLabel: "A\u00E7\u00F5es", onSelect: onSelect, items: [
+                { key: "assinar", label: "Assinar", href: "#assinar" },
+                { key: "arquivar", label: "Arquivar" },
+            ], children: _jsx("button", { type: "button", children: "Abrir" }) }));
+        fireEvent.click(screen.getByRole("button", { name: "Abrir" }));
+        const assinar = await screen.findByRole("menuitem", { name: "Assinar" });
+        expect(assinar.tagName).toBe("A");
+        expect(assinar).toHaveAttribute("href", "#assinar");
+        expect(screen.getByRole("menuitem", { name: "Arquivar" }).tagName).toBe("BUTTON");
+        fireEvent.click(assinar);
+        expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ key: "assinar" }));
+    });
+});
+describe("StatCard · loading e secondaryTone", () => {
+    it("loading troca os números por Skeleton e marca aria-busy", () => {
+        const { container } = render(_jsx(StatCard, { value: "22,31%", label: "Qualidade", secondaryValue: "14,11%", trendLabel: "+2%", trend: "up", loading: true }));
+        const cartao = container.querySelector(".umds-stat-card");
+        expect(cartao).toHaveAttribute("aria-busy", "true");
+        expect(cartao.textContent).not.toContain("22,31%");
+        expect(cartao.textContent).not.toContain("14,11%");
+        expect(cartao.textContent).not.toContain("+2%");
+        expect(cartao.textContent).toContain("Qualidade");
+    });
+    it("secondaryTone escreve a classe; default não", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(StatCard, { value: "1", secondaryValue: "2", secondaryTone: "positive" }), _jsx(StatCard, { value: "1", secondaryValue: "2", secondaryTone: "default" })] }));
+        expect(container.children[0]).toHaveClass("umds-stat-card--secundario-positive");
+        expect(container.children[1].className).not.toContain("secundario-");
+    });
+});

package/dist/teste/StatCardTamanhoSm.test.js

@@ -23,6 +23,14 @@ describe("StatCard · size", () => {
         const { container } = render(_jsx(StatCard, { value: 44, label: "N\u00E3o lidos", size: "sm", labelPosition: "top" }));
         expect(container.firstElementChild).toHaveClass("umds-stat-card--sm", "umds-stat-card--rotulo-topo");
     });
+    it("a segunda medida tem o mesmo tamanho e peso do número, no sm e no rótulo no topo", () => {
+        const sm = bloco(".umds-stat-card.umds-stat-card--sm .umds-stat-card__valor-secundario");
+        expect(sm).toMatch(/font-size:\s*1\.125rem/);
+        expect(sm).toMatch(/font-weight:\s*var\(--umds-primitive-font-weight-extrabold\)/);
+        const topo = bloco(".umds-stat-card--rotulo-topo .umds-stat-card__valor-secundario");
+        expect(topo).toMatch(/font-size:\s*var\(--umds-primitive-font-size-lg\)/);
+        expect(topo).toMatch(/font-weight:\s*var\(--umds-primitive-font-weight-extrabold\)/);
+    });
     it("o número continua antes do rótulo no HTML", () => {
         const { container } = render(_jsx(StatCard, { value: 44, label: "N\u00E3o lidos", size: "sm" }));
         const valor = container.querySelector(".umds-stat-card__valor");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1doc/1ds-react",
-  "version": "2.12.2",
+  "version": "2.14.0",
   "main": "dist/index.js",
   "sideEffects": [
     "**/*.css"
@@ -45,7 +45,7 @@
     "react-dom": "^18.0.0",
     "typescript": "^5.0.0",
     "vitest": "^3.2.7",
-    "@1doc/1ds-core": "2.12.2",
+    "@1doc/1ds-core": "2.14.0",
     "@1doc/1ds-tokens": "0.7.0"
   },
   "publishConfig": {

package/src/index.ts

@@ -58,6 +58,8 @@ export { default as Input } from "./components/Input/Input";
 export { default as Kanban } from "./components/Kanban/Kanban";
 export { default as KanbanCard } from "./components/Kanban/KanbanCard";
 export { default as KanbanColumn } from "./components/Kanban/KanbanColumn";
+export { default as Counter } from "./components/Counter/Counter";
+export type * from "./components/Counter/Counter";
 export { default as Kbd } from "./components/Kbd/Kbd";
 export { default as Link } from "./components/Link/Link";
 export { default as LineChart } from "./components/Chart/LineChart";

package/src/teste/BreadcrumbTruncado.test.tsx

@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+import Breadcrumb from "../components/Breadcrumb/Breadcrumb";
+import { render } from "@testing-library/react";
+import { lerArquivo } from "./lerArquivo";
+
+const cssBreadcrumb = (await lerArquivo("../core/src/components/Breadcrumb/Breadcrumb.css")).replace(/\r\n/g, "\n");
+const bloco = (texto: string, seletor: string) => {
+  const inicio = texto.indexOf(seletor + " {");
+  expect(inicio, seletor).toBeGreaterThanOrEqual(0);
+  return texto.slice(inicio, texto.indexOf("}", inicio));
+};
+
+const ITENS = [
+  { label: "1Doc", href: "#" },
+  { label: "Proc. Administrativo 412/2026", onClick: () => {} },
+  { label: "Reforma da cobertura do Ginásio Poliesportivo Municipal" },
+];
+
+describe("Breadcrumb · truncate", () => {
+  it("truncate escreve a classe na raiz; sem a prop, não", () => {
+    const { container } = render(
+      <>
+        <Breadcrumb items={ITENS} truncate />
+        <Breadcrumb items={ITENS} />
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-breadcrumb--truncate");
+    expect(container.children[1]).not.toHaveClass("umds-breadcrumb--truncate");
+  });
+
+  it("com truncate, o rótulo inteiro vai no title do link, do item clicável e da página atual; sem, nenhum title", () => {
+    const { container } = render(<Breadcrumb items={ITENS} truncate />);
+    expect(container.querySelector("a.umds-breadcrumb__link")).toHaveAttribute("title", "1Doc");
+    expect(container.querySelector("[role=button].umds-breadcrumb__link")).toHaveAttribute("title", "Proc. Administrativo 412/2026");
+    expect(container.querySelector(".umds-breadcrumb__current")).toHaveAttribute(
+      "title",
+      "Reforma da cobertura do Ginásio Poliesportivo Municipal",
+    );
+    const sem = render(<Breadcrumb items={ITENS} />);
+    expect(sem.container.querySelectorAll("[title]")).toHaveLength(0);
+  });
+
+  it("CSS: uma linha; a página atual encolhe primeiro até 80px; o texto ganha reticências; o padrão segue quebrando linha", () => {
+    expect(bloco(cssBreadcrumb, ".umds-breadcrumb--truncate .umds-breadcrumb__list")).toMatch(/flex-wrap:\s*nowrap/);
+    const ultimo = bloco(cssBreadcrumb, ".umds-breadcrumb--truncate .umds-breadcrumb__item:last-child");
+    expect(ultimo).toMatch(/flex-shrink:\s*100000;/);
+    expect(ultimo).toMatch(/min-width:\s*var\(--umds-primitive-spacing-xxl\)/);
+    expect(bloco(cssBreadcrumb, ".umds-breadcrumb--truncate .umds-breadcrumb__sep")).toMatch(/flex-shrink:\s*0/);
+    expect(cssBreadcrumb).toMatch(/\.umds-breadcrumb--truncate \.umds-breadcrumb__current \{[^}]*text-overflow:\s*ellipsis/);
+    expect(bloco(cssBreadcrumb, ".umds-breadcrumb__list")).toMatch(/flex-wrap:\s*wrap/);
+  });
+});