@1doc/1ds-react 2.13.0 → 2.15.0

package/dist/components/List/List.css

@@ -34,6 +34,15 @@ ol.umds-list {
   justify-content: center;
 }
 
+/* emptyFill: a lista vazia ocupa o espaço do pai (coluna que rola, painel) e o
+   EmptyState (fill) fica no meio dele. */
+.umds-list--empty-fill {
+  flex: 1 1 auto;
+  align-self: stretch;
+  width: 100%;
+  min-height: 100%;
+}
+
 /* ── <li> que envolve a linha ── */
 .umds-list__item {
   display: block;
@@ -134,3 +143,77 @@ ol.umds-list {
   display: block;
   color: var(--umds-semantic-color-neutral-dark-down);
 }
+
+/* ── Ações da linha (slot `actions`) ──
+   O controle fica no `li`, AO LADO do elemento clicável: clicar no ⋮ não
+   aciona a linha, e não há botão dentro de link. O `li` vira a linha visual
+   (flex), e o hover e a seleção passam do elemento para o `li`, para o fundo
+   cobrir as ações também. */
+.umds-list__item:has(> .umds-list-item__actions) {
+  display: flex;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  padding-right: var(--umds-primitive-spacing-nano); /* 8px */
+  border-radius: var(--umds-primitive-border-radius-sm); /* 8px */
+  transition: background-color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
+}
+
+.umds-list__item:has(> .umds-list-item__actions) > .umds-list-item {
+  flex: 1 1 auto;
+  width: auto;
+}
+
+.umds-list__item:has(> .umds-list-item__actions) > .umds-list-item,
+.umds-list__item:has(> .umds-list-item__actions) > .umds-list-item.umds-list-item--interactive:hover {
+  background: transparent;
+}
+
+.umds-list__item:has(> .umds-list-item--interactive:not(.umds-list-item--disabled)):has(> .umds-list-item__actions):hover {
+  background: var(--umds-semantic-color-background-light);
+}
+
+.umds-list__item:has(> .umds-list-item--selected):has(> .umds-list-item__actions) {
+  background: var(--umds-semantic-color-primary-light);
+}
+
+.umds-list__item:has(> .umds-list-item--selected.umds-list-item--interactive):has(> .umds-list-item__actions):hover {
+  background: color-mix(
+    in srgb,
+    var(--umds-semantic-color-primary-light) 85%,
+    var(--umds-semantic-color-background-white)
+  );
+}
+
+.umds-list-item__actions {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+}
+/* ── variant="primary": o item em destaque (Central de Ações) ──
+   Fundo azul-claro e hover um tom acima, como o cartão da referência. Não é
+   seleção (sem aria-current). O fundo é o mesmo azul-claro da seleção; o que\n   muda é o hover, que escurece em vez de clarear. */
+.umds-list-item--primary {
+  background: var(--umds-semantic-color-primary-light);
+}
+
+.umds-list-item--primary.umds-list-item--interactive:hover {
+  background: color-mix(
+    in srgb,
+    var(--umds-semantic-color-primary-medium) 35%,
+    var(--umds-semantic-color-primary-light)
+  );
+}
+
+/* Com ações, a superfície passa para o li (como a seleção). */
+.umds-list__item:has(> .umds-list-item--primary):has(> .umds-list-item__actions) {
+  background: var(--umds-semantic-color-primary-light);
+}
+
+.umds-list__item:has(> .umds-list-item--primary.umds-list-item--interactive):has(> .umds-list-item__actions):hover {
+  background: color-mix(
+    in srgb,
+    var(--umds-semantic-color-primary-medium) 35%,
+    var(--umds-semantic-color-primary-light)
+  );
+}

package/dist/components/List/List.d.ts

@@ -32,6 +32,7 @@ export type ListTag = "ul" | "ol";
  * @property {string} emptyDescription - Texto de apoio do estado vazio
  * @property {IconProp} emptyIcon - Ícone do estado vazio (objeto do Font Awesome)
  * @property {string} emptySize - Tamanho do estado vazio: 'sm' (padrão, compacto) | 'md' | 'lg'
+ * @property {boolean} emptyFill - O estado vazio ocupa e centraliza no espaço disponível (coluna que rola, painel de altura fixa)
  * @property {string} emptyActionLabel - Rótulo do botão do estado vazio (junto de onEmptyAction)
  * @property {function} onEmptyAction - Callback do botão do estado vazio
  * @property {any} empty - Slot `empty`: conteúdo próprio no lugar do EmptyState
@@ -61,6 +62,8 @@ export interface ListProps {
     emptyIcon?: IconProp;
     /** Tamanho do estado vazio. @default 'sm' */
     emptySize?: "sm" | "md" | "lg";
+    /** O estado vazio ocupa e centraliza no espaço disponível. @default false */
+    emptyFill?: boolean;
     /** Rótulo do botão do estado vazio (exibido junto de `onEmptyAction`). */
     emptyActionLabel?: string;
     /** Chamado no botão do estado vazio. */

package/dist/components/List/List.js

@@ -21,7 +21,11 @@ function List(props) {
             .join(" ");
     }
     function emptyClasses() {
-        return ["umds-list umds-list--empty", props.className]
+        return [
+            "umds-list umds-list--empty",
+            props.emptyFill ? "umds-list--empty-fill" : "",
+            props.className,
+        ]
             .filter(Boolean)
             .join(" ");
     }
@@ -48,6 +52,6 @@ function List(props) {
         }
         return out;
     }
-    return (_jsxs(_Fragment, { children: [showEmpty() ? (_jsx("div", { role: "status", id: props.id, ...htmlAttrs(), className: emptyClasses(), children: _jsx(_Fragment, { children: props.empty || (_jsx(EmptyState, { icon: props.emptyIcon, title: emptyTitleText(), description: props.emptyDescription, size: emptySizeValue(), ...emptyActionProps() })) }) })) : null, showItems() && elementTag() === "ul" ? (_jsx("ul", { role: "list", id: props.id, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledby, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, showItems() && elementTag() === "ol" ? (_jsx("ol", { role: "list", id: props.id, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledby, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null] }));
+    return (_jsxs(_Fragment, { children: [showEmpty() ? (_jsx("div", { role: "status", id: props.id, ...htmlAttrs(), className: emptyClasses(), children: _jsx(_Fragment, { children: props.empty || (_jsx(EmptyState, { icon: props.emptyIcon, title: emptyTitleText(), description: props.emptyDescription, size: emptySizeValue(), fill: props.emptyFill, ...emptyActionProps() })) }) })) : null, showItems() && elementTag() === "ul" ? (_jsx("ul", { role: "list", id: props.id, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledby, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, showItems() && elementTag() === "ol" ? (_jsx("ol", { role: "list", id: props.id, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledby, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null] }));
 }
 export default List;

package/dist/components/List/ListItem.d.ts

@@ -27,6 +27,12 @@ export type ListItemTag = "button" | "a" | "div";
  * HTML: é o título da linha. O atributo `title` (a dica nativa do navegador) é a
  * prop `tooltip`.
  *
+ * `actions` é o lugar de controles da linha (o ⋮ de um menu, um botão de
+ * excluir): fica no `li`, AO LADO do elemento clicável e não dentro dele, então
+ * o clique no controle não aciona a linha e o HTML continua válido. A linha toda
+ * (com as ações) ganha o fundo de hover e de seleção. Só existe com o `li`
+ * (sem `standalone`).
+ *
  * `standalone` tira o `li`: o ListItem vira só o elemento interativo, para uso
  * fora de um `List` (botão de número de página, item de carrossel, linha dentro
  * de um `div`). Fora de `ul`/`ol`, o `li` é HTML inválido.
@@ -35,6 +41,9 @@ export type ListItemTag = "button" | "a" | "div";
  * @property {string} target - Destino do link: '_blank' ganha rel="noopener noreferrer"
  * @property {string} rel - Relação do link (sobrescreve o padrão do target)
  * @property {boolean} selected - Item atual: fundo de seleção e aria-current
+ * @property {string} variant - Superfície da linha: 'default' (transparente) | 'primary' (fundo azul-claro com hover próprio, o item em destaque da Central de Ações). Não é seleção: não marca aria-current
+ * @property {string} liClassName - Classes CSS do `li` (a linha visual). Use para animação de entrada escalonada; não vale com `standalone`
+ * @property {object} liStyle - Estilo inline do `li` (ex.: `{ '--ordem': 3 }` ou `transitionDelay`). Não vale com `standalone`
  * @property {boolean} disabled - Bloqueia clique e foco
  * @property {string} tooltip - Dica nativa do navegador: vira o atributo HTML `title` do elemento interativo
  * @property {boolean} standalone - Renderiza sem o `li`, só o elemento interativo (uso fora de `List`)
@@ -43,6 +52,7 @@ export type ListItemTag = "button" | "a" | "div";
  * @property {any} meta - Terceira linha, menor (data, contexto): texto, ou slot `meta` (nó)
  * @property {any} start - Slot `start`: conteúdo antes do texto (avatar, ícone)
  * @property {any} end - Slot `end`: conteúdo no fim da linha (badge, seta, valor)
+ * @property {any} actions - Slot `actions`: controles da linha (menu ⋮, botão), fora do elemento clicável
  * @property {function} onClick - Callback do clique (ou de Enter/Espaço no as="div")
  * @property {string} className - Classes CSS adicionais, no elemento interativo
  * @slot start - Conteúdo antes do texto.
@@ -50,6 +60,7 @@ export type ListItemTag = "button" | "a" | "div";
  * @slot subtitle - Segunda linha (substitui a prop `subtitle`).
  * @slot meta - Terceira linha (substitui a prop `meta`).
  * @slot end - Conteúdo no fim da linha.
+ * @slot actions - Controles da linha, ao lado do elemento clicável (não dentro dele).
  * @quandoUsar Itens de uma lista em que a linha toda é a ação: documentos não lidos, notificações, resultados de busca, opções de menu de filtro, itens de navegação secundária. Hover, foco visível e seleção já vêm resolvidos.
  * @quandoNaoUsar Para dados comparados coluna a coluna, use `DataTable`. Para um cartão com título, ações e elevação própria, use `Card`. Para um botão solto fora de lista, use `Button`. Para a navegação principal do produto, use `SidePanelItem` ou `AppNavItem`.
  */
@@ -63,6 +74,12 @@ export interface ListItemProps {
     target?: string;
     /** Relação do link. Sobrescreve o padrão do `target`. */
     rel?: string;
+    /** Superfície: `primary` é o item em destaque, azul-claro com hover próprio. Não é seleção. @default 'default' */
+    variant?: "default" | "primary";
+    /** Classes CSS do `li` (a linha visual), para animação de entrada. Sem efeito com `standalone`. */
+    liClassName?: string;
+    /** Estilo inline do `li` (variável CSS, transitionDelay). Sem efeito com `standalone`. */
+    liStyle?: any;
     /** Item atual: fundo de seleção e `aria-current`. @default false */
     selected?: boolean;
     /** Bloqueia clique e foco. @default false */
@@ -81,6 +98,8 @@ export interface ListItemProps {
     start?: any;
     /** Conteúdo no fim da linha (badge, seta, valor). No Vue, slot `end`. */
     end?: any;
+    /** Controles da linha (menu ⋮, botão), fora do elemento clicável. Só com o `li`. No Vue, slot `actions`. */
+    actions?: any;
     /** Chamado no clique da linha (ou em Enter/Espaço no `as="div"`). */
     onClick?: (event: any) => void;
     /** Classes CSS adicionais, no elemento interativo. */

package/dist/components/List/ListItem.js

@@ -10,11 +10,15 @@ function ListItem(props) {
     function isInteractive() {
         return elementTag() !== "div" || !!props.onClick;
     }
+    function liClasses() {
+        return ["umds-list__item", props.liClassName].filter(Boolean).join(" ");
+    }
     function classes() {
         return [
             "umds-list-item",
             isInteractive() ? "umds-list-item--interactive" : "",
             props.selected ? "umds-list-item--selected" : "",
+            props.variant === "primary" ? "umds-list-item--primary" : "",
             props.disabled ? "umds-list-item--disabled" : "",
             props.className,
         ]
@@ -77,6 +81,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", { style: props.liStyle, className: liClasses(), 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/Modal/Modal.css

@@ -41,7 +41,7 @@
   z-index: 2;
   background-color: var(--umds-semantic-color-background-elevated); /* superfície elevada: igual ao white no light; mais clara no dark (decisão 25/07) */
   border-radius: var(--umds-primitive-border-radius-sm); /* 8px universal (rodada ago/2026) — a exceção "superfície grande → md" caiu */
-  box-shadow: var(--umds-semantic-shadow-lg); /* era primitive-shadow-level-3 (0.16) — decisão 16/07 */
+  box-shadow: var(--umds-semantic-shadow-center-xl);
   padding: var(--umds-primitive-spacing-xxs);
   width: clamp(320px, 90%, 498px);
   max-width: 498px;
@@ -337,9 +337,8 @@
   padding: var(--umds-primitive-spacing-xxxs) var(--umds-primitive-spacing-xxs); /* 16px 24px (produto: 14px 22px) */
   border-top: 1px solid var(--umds-semantic-color-neutral-light-medium);
   background: var(--umds-semantic-color-neutral-light-pure);
-  /* Levanta o rodapé do conteúdo que passa por baixo dele ao rolar.
-     Sombra não tem token no 1DS — candidato a novo token. */
-  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
+  /* Levanta o rodapé do conteúdo que passa por baixo dele ao rolar. */
+  box-shadow: var(--umds-semantic-shadow-top-md);
   flex-shrink: 0;
   box-sizing: border-box;
 }

package/dist/components/MultiSelect/MultiSelect.css

@@ -195,7 +195,7 @@
   background-color: var(--umds-semantic-color-background-elevated); /* superfície elevada: igual ao white no light; mais clara no dark (decisão 25/07) */
   border: 1px solid var(--umds-semantic-color-neutral-light-down);
   border-radius: var(--umds-primitive-border-radius-sm);
-  box-shadow: var(--umds-semantic-shadow-md); /* protótipo --shadow-md */
+  box-shadow: var(--umds-semantic-shadow-bottom-md); /* protótipo --shadow-md */
   z-index: var(--umds-semantic-layer-popover); /* 1400 - acima de modal */
   max-height: 320px;
   display: flex;

package/dist/components/OrgChart/OrgChart.css

@@ -54,7 +54,7 @@
   color: var(--umds-semantic-color-primary-dark);
   border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
   border-radius: var(--umds-primitive-border-radius-sm);
-  box-shadow: var(--umds-semantic-shadow-sm);
+  box-shadow: var(--umds-semantic-shadow-bottom-sm);
   cursor: pointer;
   transition:
     box-shadow var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard),
@@ -69,7 +69,7 @@
 }
 
 .umds-org-chart__node:hover {
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-bottom-md);
 }
 
 .umds-org-chart__node--selected {

package/dist/components/PhoneInput/PhoneInput.css

@@ -54,7 +54,7 @@
   /* 1px como os demais campos: 1,5px era do protótipo e engrossava só aqui. */
   border: 1px solid var(--umds-semantic-field-border-default);
   border-radius: var(--umds-primitive-border-radius-sm, 8px); /* era 12px (protótipo --radius-lg) — snap 14/07: controle de campo → sm, alinha com Input/Select */
-  box-shadow: var(--umds-semantic-shadow-sm); /* era 0 1px 2px 0.04, 0 1px 3px 0.02 (protótipo --shadow-sm) — mapeado 14/07 */
+  box-shadow: var(--umds-semantic-shadow-bottom-sm); /* era 0 1px 2px 0.04, 0 1px 3px 0.02 (protótipo --shadow-sm) — mapeado 14/07 */
   transition:
     border-color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard),
     box-shadow var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
@@ -234,7 +234,7 @@
   background: var(--umds-semantic-color-background-elevated); /* superfície elevada: igual ao white no light; mais clara no dark (decisão 25/07) */
   border: 1px solid var(--umds-semantic-color-neutral-light-medium); /* #EBEBEB */
   border-radius: var(--umds-primitive-border-radius-sm); /* 8px (protótipo --radius-md) */
-  box-shadow: var(--umds-semantic-shadow-md); /* era 0 4px 16px rgba(0,0,0,0.12) — mapeado para shadow-md 14/07 */
+  box-shadow: var(--umds-semantic-shadow-bottom-md); /* era 0 4px 16px rgba(0,0,0,0.12) — mapeado para shadow-md 14/07 */
   overflow: hidden;
   animation: umds-phone-dropdown-in var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard) both;
 }

package/dist/components/Popover/Popover.css

@@ -37,7 +37,7 @@
   background: var(--umds-semantic-color-background-elevated); /* superfície elevada: igual ao white no claro, mais clara no escuro */
   border: 1px solid var(--umds-semantic-color-neutral-light-down);
   border-radius: var(--umds-primitive-border-radius-sm);
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-bottom-md);
   font-family: var(--umds-semantic-font-family-base);
   transition: opacity var(--umds-semantic-motion-duration-fast)
     var(--umds-semantic-motion-easing-standard);

package/dist/components/SegmentedControl/SegmentedControl.css

@@ -234,7 +234,7 @@
   background-color: var(--umds-semantic-color-background-white);
   color: var(--umds-semantic-color-neutral-dark-pure);
   font-weight: var(--umds-primitive-font-weight-bold);
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-bottom-md);
 }
 
 .umds-segmented--surface .umds-segmented__input:disabled + .umds-segmented__item:hover {

package/dist/components/Select/Select.css

@@ -149,7 +149,7 @@
   background-color: var(--umds-semantic-color-background-elevated); /* superfície elevada: igual ao white no light; mais clara no dark (decisão 25/07) */
   border: 1px solid var(--umds-semantic-color-neutral-light-down);
   border-radius: var(--umds-primitive-border-radius-sm);
-  box-shadow: var(--umds-semantic-shadow-md); /* protótipo --shadow-md */
+  box-shadow: var(--umds-semantic-shadow-bottom-md); /* protótipo --shadow-md */
   z-index: var(--umds-semantic-layer-popover); /* 1400 - acima de modal */
   max-height: 300px;
   display: flex;

package/dist/components/StatCard/StatCard.css

@@ -11,9 +11,11 @@
   align-items: flex-start;
   gap: var(--umds-primitive-spacing-mini);
   padding: var(--umds-primitive-spacing-xxxs);
-  border: 1px solid var(--umds-semantic-color-neutral-light-down);
+  /* Mesma borda e superfície do Card: lado a lado, os cartões têm o mesmo
+     contorno (#EBEBEB no claro), e no escuro o fundo é o elevado. */
+  border: 1px solid var(--umds-semantic-color-neutral-light-medium);
   border-radius: var(--umds-primitive-border-radius-sm);
-  background-color: var(--umds-semantic-color-background-white);
+  background-color: var(--umds-semantic-color-background-elevated);
   color: var(--umds-semantic-color-neutral-dark-pure);
   font-family: var(--umds-semantic-font-family-base);
   text-align: left;
@@ -38,7 +40,7 @@
 
 .umds-stat-card--acionavel:hover {
   border-color: var(--umds-semantic-color-primary-pure);
-  box-shadow: var(--umds-semantic-shadow-sm);
+  box-shadow: var(--umds-semantic-shadow-bottom-sm);
 }
 
 /* Foco canônico de não-campo. */
@@ -243,8 +245,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 +282,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 +305,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 +342,53 @@
   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;
+}
+
+/* ── Segunda medida em largura pequena (container query) ──
+   Num cartão estreito (cabeçalho mobile, ~115px) as duas medidas lado a lado
+   se sobrepunham. O cartão com segunda medida vira container de largura e,
+   abaixo de 240px, a segunda medida desce para a linha de baixo, separada por
+   um filete em cima em vez do da esquerda.
+   `width: 100%`: um container de inline-size não mede o conteúdo, então num
+   pai flex com tamanho pelo conteúdo ele encolheria até sumir. Com 100%, numa
+   linha flex os cartões dividem o espaço; em grade e em bloco nada muda. */
+.umds-stat-card--com-secundaria {
+  container-type: inline-size;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+/* 240px: duas medidas de 24px com o filete e o respiro não cabem abaixo disso.
+   Container query não aceita var(), por isso o literal. */
+@container (max-width: 240px) {
+  .umds-stat-card:not(.umds-stat-card--centro) .umds-stat-card__secundaria {
+    flex-basis: 100%;
+    margin-left: 0;
+    padding-left: 0;
+    padding-top: var(--umds-primitive-spacing-nano);
+    border-left: none;
+    border-top: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+    align-items: flex-start;
+    text-align: left;
+  }
+
+  .umds-stat-card--rotulo-topo .umds-stat-card__secundaria,
+  .umds-stat-card--rotulo-topo .umds-stat-card__secundaria:has(.umds-stat-card__rotulo-secundario) {
+    grid-column: 1 / -1;
+    grid-row: auto;
+    display: flex;
+    margin-left: 0;
+  }
+}

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/Switch/Switch.css

@@ -51,7 +51,7 @@
 .umds-switch__thumb {
     background-color: var(--umds-semantic-color-neutral-light-pure);
     border-radius: var(--umds-primitive-border-radius-circular);
-    box-shadow: var(--umds-semantic-shadow-sm); /* era 0 1px 2px 0.1, 0 1px 1px 0.06 — mapeado para shadow-sm 14/07 (sombra do thumb fica mais sutil) */
+    box-shadow: var(--umds-semantic-shadow-bottom-sm); /* era 0 1px 2px 0.1, 0 1px 1px 0.06 — mapeado para shadow-sm 14/07 (sombra do thumb fica mais sutil) */
     display: flex;
     align-items: center;
     justify-content: center;
@@ -144,7 +144,7 @@
     background-color: var(--umds-semantic-color-neutral-light-pure);
     padding: var(--umds-primitive-spacing-xxxs);
     border-radius: var(--umds-primitive-border-radius-sm);
-    box-shadow: var(--umds-semantic-shadow-sm); /* era 0 4px 8px 0.06 — mapeado para shadow-sm 14/07 (card de fundo sutil) */
+    box-shadow: var(--umds-semantic-shadow-bottom-sm); /* era 0 4px 8px 0.06 — mapeado para shadow-sm 14/07 (card de fundo sutil) */
 }
 
 .umds-switch-text {

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

@@ -62,6 +62,12 @@ export interface TextProps {
     /**
      * Cor do texto usando tokens semânticos.
      *
+     * SEM `color`, o texto HERDA a cor do pai (é o que deixa um Text dentro de um
+     * botão, alerta ou cartão colorido acompanhar a cor dele). Dentro do
+     * `AppShell` o pai já tem a cor de texto do tema. Fora dele, num título solto
+     * na página, passe `color="primary"` (`neutral-dark-pure`, o texto principal,
+     * não o azul) para o tema escuro funcionar.
+     *
      * `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