@1doc/1ds-react 2.14.0 → 2.15.0

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. */
@@ -353,3 +355,40 @@
   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/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

package/dist/components/TimePicker/TimePicker.css

@@ -123,7 +123,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-lg 12px, aproximado para sm (coerente com input e dígitos) */
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-bottom-md);
   padding: var(--umds-primitive-spacing-xxxs); /* 16px — protótipo --space-4 */
   box-sizing: border-box;
   animation: umds-timepicker-in var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard) both;

package/dist/components/Toast/Toast.css

@@ -4,7 +4,7 @@
    Variantes semânticas (prop `variant`): positive, negative, info, neutral
    (warning do protótipo mesclado no info — ambos laranja feedback-info).
    Tokens do protótipo mapeados para os tokens 1DS.
-   Snap 16/07 (decisões novas): sombra → --umds-semantic-shadow-md (token novo,
+   Snap 16/07 (decisões novas): sombra → --umds-semantic-shadow-bottom-md (token novo,
      valor idêntico ao literal do protótipo); radius 12px → md 16px (overlay
      flutuante → md, como Dropdown/Modal); radius 6px → sm 8px; font-size
      11px → xxxs 12px; spacing 12px → xxxs 16px (mesmas decisões do Alert —
@@ -24,7 +24,7 @@
   padding: var(--umds-primitive-spacing-xxxs, 16px); /* era 12px 16px (protótipo --space-3/--space-4) — snap 16/07 */
   border-radius: var(--umds-primitive-border-radius-sm); /* 8px universal (rodada ago/2026) — a exceção "overlay flutuante → md" caiu */
   border: 1px solid transparent;
-  box-shadow: var(--umds-semantic-shadow-md); /* protótipo --shadow-md — token novo com valor idêntico */
+  box-shadow: var(--umds-semantic-shadow-bottom-md); /* protótipo --shadow-md — token novo com valor idêntico */
   font-family: var(--umds-semantic-font-family-base);
   box-sizing: border-box;
   /* O Portal usa display: contents e não posiciona nada — o próprio toast

package/dist/components/Tooltip/Tooltip.css

@@ -47,9 +47,12 @@
   flex-direction: column;
   position: relative;
   padding: var(--umds-primitive-spacing-mini); /* protótipo --space-3: sem equivalente 1DS exato */
-  background-color: var(--umds-semantic-color-neutral-light-pure);
+  /* Superfície elevada, como o Card: igual ao branco nos temas claros e no
+     alto contraste; nos escuros é mais clara que a página (o neutral-light-pure
+     de antes era quase da cor do fundo, e o balão sumia). */
+  background-color: var(--umds-semantic-color-background-elevated);
   border-radius: var(--umds-primitive-border-radius-sm); /* 8px */
-  box-shadow: var(--umds-primitive-shadow-level-2);
+  box-shadow: var(--umds-semantic-shadow-bottom-lg);
   font-family: var(--umds-semantic-font-family-base);
   font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
   line-height: 1.25;
@@ -93,7 +96,7 @@
   position: absolute;
   width: 8px;
   height: 8px;
-  background-color: var(--umds-semantic-color-neutral-light-pure);
+  background-color: var(--umds-semantic-color-background-elevated);
   transform: rotate(45deg);
 }
 
@@ -181,6 +184,20 @@
   border-color: var(--umds-semantic-color-background-dark);
 }
 
+/* ── Temas escuros (1doc-dark e os *-dark da paleta) ──
+   A sombra preta não aparece sobre fundo escuro: o balão ganha o traço do Card
+   (neutral-light-medium), por dentro para não mudar o tamanho. A seta troca o
+   traço das duas faces expostas pelo mesmo tom e continua o contorno. O
+   variant="dark" (balão claro invertido) não precisa: ele contrasta sozinho. */
+[data-theme$="-dark"] .umds-tooltip__bubble:not(.umds-tooltip__bubble--dark) {
+  outline: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  outline-offset: calc(-1 * var(--umds-primitive-border-width-hairline));
+}
+
+[data-theme$="-dark"] .umds-tooltip__bubble:not(.umds-tooltip__bubble--dark) .umds-tooltip__arrow {
+  border-color: var(--umds-semantic-color-neutral-light-medium);
+}
+
 /* ── Alto contraste ──
    O balão usa neutral-light-pure, que neste tema é preto como a página, e a
    sombra não aparece: sem traço o balão some. Outline para dentro (não

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

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

package/dist/teste/PedidosMatheus2.test.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Avatar from "../components/Avatar/Avatar";
+import Dropdown from "../components/Dropdown/Dropdown";
+import EmptyState from "../components/EmptyState/EmptyState";
+import List from "../components/List/List";
+import ListItem from "../components/List/ListItem";
+import { lerArquivo } from "./lerArquivo";
+describe("Avatar · fallback e name", () => {
+    it("a foto que falha volta para as iniciais do name", () => {
+        const onError = vi.fn();
+        const { container } = render(_jsx(Avatar, { src: "/quebrada.png", name: "Cris Lima", onError: onError }));
+        fireEvent.error(container.querySelector("img"));
+        expect(container.querySelector("img")).toBeNull();
+        expect(container.textContent).toBe("CL");
+        expect(container.firstElementChild).toHaveClass("umds-avatar--letter");
+        expect(onError).toHaveBeenCalledTimes(1);
+    });
+    it("sem name, a falha mostra o children", () => {
+        const { container } = render(_jsx(Avatar, { src: "/quebrada.png", children: "ML" }));
+        fireEvent.error(container.querySelector("img"));
+        expect(container.textContent).toBe("ML");
+    });
+    it("um src novo tenta a foto de novo", () => {
+        const { container, rerender } = render(_jsx(Avatar, { src: "/quebrada.png", name: "Cris Lima" }));
+        fireEvent.error(container.querySelector("img"));
+        rerender(_jsx(Avatar, { src: "/boa.png", name: "Cris Lima" }));
+        expect(container.querySelector("img")).toHaveAttribute("src", "/boa.png");
+    });
+    it("name gera as iniciais (primeiro e último nome) e o nome acessível", () => {
+        const { container } = render(_jsx(Avatar, { name: "Matheus de Souza" }));
+        expect(container.textContent).toBe("MS");
+        expect(container.firstElementChild).toHaveAttribute("aria-label", "Matheus de Souza");
+        expect(container.firstElementChild).toHaveAttribute("role", "img");
+    });
+});
+describe("Dropdown · onSelect no item", () => {
+    it("chama a ação do item com os campos próprios, e depois o onSelect do Dropdown", async () => {
+        const ordem = [];
+        const doItem = vi.fn((item) => ordem.push("item:" + item.command));
+        const doMenu = vi.fn(() => ordem.push("menu"));
+        render(_jsx(Dropdown, { ariaLabel: "A\u00E7\u00F5es", onSelect: doMenu, items: [{ key: "a", label: "Assinar", command: "assinar", onSelect: doItem }], children: _jsx("button", { type: "button", children: "Abrir" }) }));
+        fireEvent.click(screen.getByRole("button", { name: "Abrir" }));
+        fireEvent.click(await screen.findByRole("menuitem", { name: "Assinar" }));
+        expect(ordem).toEqual(["item:assinar", "menu"]);
+    });
+});
+describe("ListItem · variant e li", () => {
+    it("variant primary marca a classe sem aria-current", () => {
+        render(_jsx("ul", { children: _jsx(ListItem, { variant: "primary", href: "#c", title: "Circular" }) }));
+        const link = screen.getByRole("link", { name: "Circular" });
+        expect(link).toHaveClass("umds-list-item--primary");
+        expect(link).not.toHaveAttribute("aria-current");
+    });
+    it("liClassName e liStyle vão para o li", () => {
+        const { container } = render(_jsx("ul", { children: _jsx(ListItem, { title: "Memorando", liClassName: "entra", liStyle: { "--ordem": 2 }, onClick: () => { } }) }));
+        const li = container.querySelector("li");
+        expect(li).toHaveClass("umds-list__item");
+        expect(li).toHaveClass("entra");
+        expect(li.style.getPropertyValue("--ordem")).toBe("2");
+    });
+});
+describe("EmptyState · fill e List · emptyFill", () => {
+    it("fill escreve a classe; List repassa emptyFill", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(EmptyState, { title: "Vazio", fill: true }), _jsx(List, { ariaLabel: "Docs", isEmpty: true, emptyFill: true })] }));
+        expect(container.querySelector(".umds-empty-state--fill")).not.toBeNull();
+        expect(container.querySelector(".umds-list--empty-fill .umds-empty-state--fill")).not.toBeNull();
+    });
+});
+describe("AppShell e StatCard · CSS", () => {
+    it("o AppShell dá a cor de texto do tema a quem herda", async () => {
+        const css = (await lerArquivo("../core/src/components/AppShell/AppShell.css")).replace(/\r\n/g, "\n");
+        const bloco = css.slice(css.indexOf(".umds-app-shell {"), css.indexOf("}", css.indexOf(".umds-app-shell {")));
+        expect(bloco).toContain("color: var(--umds-semantic-color-neutral-dark-pure)");
+    });
+    it("a StatCard com segunda medida empilha em largura pequena", async () => {
+        const css = (await lerArquivo("../core/src/components/StatCard/StatCard.css")).replace(/\r\n/g, "\n");
+        expect(css).toContain("container-type: inline-size");
+        expect(css).toMatch(/@container \(max-width: 240px\)/);
+    });
+});

package/dist/teste/SegmentedControlSuperficie.test.js

@@ -27,7 +27,7 @@ describe("SegmentedControl · variant surface", () => {
         const escolhido = bloco(t, ".umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item,\n.umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item:hover");
         expect(escolhido).toMatch(/background-color:\s*var\(--umds-semantic-color-background-white\)/);
         expect(escolhido).toMatch(/font-weight:\s*var\(--umds-primitive-font-weight-bold\)/);
-        expect(escolhido).toMatch(/box-shadow:\s*var\(--umds-semantic-shadow-md\)/);
+        expect(escolhido).toMatch(/box-shadow:\s*var\(--umds-semantic-shadow-bottom-md\)/);
         expect(bloco(t, ".umds-segmented--surface .umds-segmented__track")).toMatch(/background-color:\s*var\(--umds-semantic-color-neutral-light-medium\)/);
         expect(t).toMatch(/\.umds-segmented__input:checked \+ \.umds-segmented__item,\n\.umds-segmented__input:checked \+ \.umds-segmented__item:hover \{\n\s*background-color:\s*var\(--umds-semantic-color-primary-pure\)/);
     });

package/package.json

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

package/src/teste/PedidosMatheus2.test.tsx

@@ -0,0 +1,102 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Avatar from "../components/Avatar/Avatar";
+import Dropdown from "../components/Dropdown/Dropdown";
+import EmptyState from "../components/EmptyState/EmptyState";
+import List from "../components/List/List";
+import ListItem from "../components/List/ListItem";
+import { lerArquivo } from "./lerArquivo";
+
+describe("Avatar · fallback e name", () => {
+  it("a foto que falha volta para as iniciais do name", () => {
+    const onError = vi.fn();
+    const { container } = render(<Avatar src="/quebrada.png" name="Cris Lima" onError={onError} />);
+    fireEvent.error(container.querySelector("img")!);
+    expect(container.querySelector("img")).toBeNull();
+    expect(container.textContent).toBe("CL");
+    expect(container.firstElementChild).toHaveClass("umds-avatar--letter");
+    expect(onError).toHaveBeenCalledTimes(1);
+  });
+
+  it("sem name, a falha mostra o children", () => {
+    const { container } = render(<Avatar src="/quebrada.png">ML</Avatar>);
+    fireEvent.error(container.querySelector("img")!);
+    expect(container.textContent).toBe("ML");
+  });
+
+  it("um src novo tenta a foto de novo", () => {
+    const { container, rerender } = render(<Avatar src="/quebrada.png" name="Cris Lima" />);
+    fireEvent.error(container.querySelector("img")!);
+    rerender(<Avatar src="/boa.png" name="Cris Lima" />);
+    expect(container.querySelector("img")).toHaveAttribute("src", "/boa.png");
+  });
+
+  it("name gera as iniciais (primeiro e último nome) e o nome acessível", () => {
+    const { container } = render(<Avatar name="Matheus de Souza" />);
+    expect(container.textContent).toBe("MS");
+    expect(container.firstElementChild).toHaveAttribute("aria-label", "Matheus de Souza");
+    expect(container.firstElementChild).toHaveAttribute("role", "img");
+  });
+});
+
+describe("Dropdown · onSelect no item", () => {
+  it("chama a ação do item com os campos próprios, e depois o onSelect do Dropdown", async () => {
+    const ordem: string[] = [];
+    const doItem = vi.fn((item) => ordem.push("item:" + item.command));
+    const doMenu = vi.fn(() => ordem.push("menu"));
+    render(
+      <Dropdown ariaLabel="Ações" onSelect={doMenu} items={[{ key: "a", label: "Assinar", command: "assinar", onSelect: doItem }]}>
+        <button type="button">Abrir</button>
+      </Dropdown>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Abrir" }));
+    fireEvent.click(await screen.findByRole("menuitem", { name: "Assinar" }));
+    expect(ordem).toEqual(["item:assinar", "menu"]);
+  });
+});
+
+describe("ListItem · variant e li", () => {
+  it("variant primary marca a classe sem aria-current", () => {
+    render(<ul><ListItem variant="primary" href="#c" title="Circular" /></ul>);
+    const link = screen.getByRole("link", { name: "Circular" });
+    expect(link).toHaveClass("umds-list-item--primary");
+    expect(link).not.toHaveAttribute("aria-current");
+  });
+
+  it("liClassName e liStyle vão para o li", () => {
+    const { container } = render(
+      <ul><ListItem title="Memorando" liClassName="entra" liStyle={{ "--ordem": 2 } as any} onClick={() => {}} /></ul>,
+    );
+    const li = container.querySelector("li")!;
+    expect(li).toHaveClass("umds-list__item");
+    expect(li).toHaveClass("entra");
+    expect(li.style.getPropertyValue("--ordem")).toBe("2");
+  });
+});
+
+describe("EmptyState · fill e List · emptyFill", () => {
+  it("fill escreve a classe; List repassa emptyFill", () => {
+    const { container } = render(
+      <>
+        <EmptyState title="Vazio" fill />
+        <List ariaLabel="Docs" isEmpty emptyFill />
+      </>,
+    );
+    expect(container.querySelector(".umds-empty-state--fill")).not.toBeNull();
+    expect(container.querySelector(".umds-list--empty-fill .umds-empty-state--fill")).not.toBeNull();
+  });
+});
+
+describe("AppShell e StatCard · CSS", () => {
+  it("o AppShell dá a cor de texto do tema a quem herda", async () => {
+    const css = (await lerArquivo("../core/src/components/AppShell/AppShell.css")).replace(/\r\n/g, "\n");
+    const bloco = css.slice(css.indexOf(".umds-app-shell {"), css.indexOf("}", css.indexOf(".umds-app-shell {")));
+    expect(bloco).toContain("color: var(--umds-semantic-color-neutral-dark-pure)");
+  });
+
+  it("a StatCard com segunda medida empilha em largura pequena", async () => {
+    const css = (await lerArquivo("../core/src/components/StatCard/StatCard.css")).replace(/\r\n/g, "\n");
+    expect(css).toContain("container-type: inline-size");
+    expect(css).toMatch(/@container \(max-width: 240px\)/);
+  });
+});

package/src/teste/SegmentedControlSuperficie.test.tsx

@@ -37,7 +37,7 @@ describe("SegmentedControl · variant surface", () => {
     const escolhido = bloco(t, ".umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item,\n.umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item:hover");
     expect(escolhido).toMatch(/background-color:\s*var\(--umds-semantic-color-background-white\)/);
     expect(escolhido).toMatch(/font-weight:\s*var\(--umds-primitive-font-weight-bold\)/);
-    expect(escolhido).toMatch(/box-shadow:\s*var\(--umds-semantic-shadow-md\)/);
+    expect(escolhido).toMatch(/box-shadow:\s*var\(--umds-semantic-shadow-bottom-md\)/);
     expect(bloco(t, ".umds-segmented--surface .umds-segmented__track")).toMatch(/background-color:\s*var\(--umds-semantic-color-neutral-light-medium\)/);
     expect(t).toMatch(/\.umds-segmented__input:checked \+ \.umds-segmented__item,\n\.umds-segmented__input:checked \+ \.umds-segmented__item:hover \{\n\s*background-color:\s*var\(--umds-semantic-color-primary-pure\)/);
   });