@aurea-uds/react 0.45.0 → 0.47.0

package/dist/actions.d.ts

@@ -88,8 +88,13 @@ interface ToggleBase {
     /** 0.32.0, o `ToggleButton` da referência: `default` com o fundo neutro (o padrão), `ghost` sem fundo
      *  (o desenho de até a 0.31.0). O ligado é o idioma "selecionado" da Aurea nos dois. */
     variant?: ToggleVariant;
+    /** A cor do LIGADO (ADR-0084, 27/10/2026): `brand` — o amarelo do botão primário, o padrão —, `neutral` (o cinza) ou
+     *  `contrast` (o grafite, invertido). Dentro de um `ToggleGroup` ou de um `Toolbar` com `pressedStyle`, o do botão vale. */
+    pressedStyle?: TogglePressedStyle;
 }
 export type ToggleVariant = "default" | "ghost";
+/** As três cores do ligado aprovadas pelo Victor em 26/10/2026 (A cinza, B grafite, C amarelo — o padrão). */
+export type TogglePressedStyle = "neutral" | "contrast" | "brand";
 type ToggleChildren = Exclude<React.ReactNode, boolean | null | undefined>;
 export type ToggleProps = ToggleBase & ({
     children: ToggleChildren;
@@ -98,7 +103,7 @@ export type ToggleProps = ToggleBase & ({
     children?: never;
     label: string;
 });
-export declare function Toggle({ pressed, defaultPressed, onPressedChange, value, icon, label, size: sizePedido, disabled, id, className, children, variant }: ToggleProps): React.JSX.Element;
+export declare function Toggle({ pressed, defaultPressed, onPressedChange, value, icon, label, size: sizePedido, disabled, id, className, children, variant, pressedStyle }: ToggleProps): React.JSX.Element;
 export interface IconButtonProps extends Omit<ButtonProps, "children"> {
     label: string;
     icon: AureaIcon;
@@ -130,15 +135,18 @@ export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement>, RefAtt
     detached?: boolean;
 }
 export declare function ButtonGroup({ label, orientation, variant, size, fullWidth, disabled, detached, className, ...props }: ButtonGroupProps): React.JSX.Element;
-export declare function Toolbar({ orientation, label, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+export declare function Toolbar({ orientation, label, className, pressedStyle, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     orientation?: Responsive<Orientation>;
     label?: string;
+    pressedStyle?: TogglePressedStyle;
 }): React.JSX.Element;
 export declare function ToolbarGroup({ label, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     label?: string;
 }): React.JSX.Element;
 export declare function ToolbarSeparator({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
 export interface ToolbarButtonProps extends Omit<ButtonProps, "share"> {
+    /** A cor do ligado (ADR-0084): `brand` (o padrão), `neutral` ou `contrast`. Vale quando o botão está ligado (`aria-pressed`). */
+    pressedStyle?: TogglePressedStyle;
 }
 export declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & RefAttributes<HTMLButtonElement>>;
 export interface ToggleGroupProps {
@@ -157,6 +165,9 @@ export interface ToggleGroupProps {
     fullWidth?: boolean;
     /** Botões soltos (vão de 4), em vez de colados. */
     detached?: boolean;
+    /** A cor do ligado de todos os botões de dentro (ADR-0084): `brand` (o padrão), `neutral` ou `contrast`; cada um pode
+     *  trocar a sua. */
+    pressedStyle?: TogglePressedStyle;
 }
-export declare function ToggleGroup({ value, defaultValue, onValueChange, multiple, orientation, disabled, label, className, children, size, fullWidth, detached }: ToggleGroupProps): React.JSX.Element;
+export declare function ToggleGroup({ value, defaultValue, onValueChange, multiple, orientation, disabled, label, className, children, size, fullWidth, detached, pressedStyle }: ToggleGroupProps): React.JSX.Element;
 export {};

package/dist/actions.js

@@ -205,7 +205,7 @@ function temConteudoVisivel(children) {
 // entre os estados**. Se o texto vira "Mute"/"Unmute" ou "Play"/"Pause", não é toggle — é
 // botão de ação, porque quem lê tela ouve o rótulo NOVO e o estado ao mesmo tempo e não sabe
 // se o botão descreve o que é ou o que fará.
-export function Toggle({ pressed, defaultPressed, onPressedChange, value, icon, label, size: sizePedido, disabled, id, className, children, variant = "default" }) {
+export function Toggle({ pressed, defaultPressed, onPressedChange, value, icon, label, size: sizePedido, disabled, id, className, children, variant = "default", pressedStyle }) {
     const grupo = React.useContext(GrupoDeBotoesContext);
     const size = sizePedido ?? grupo?.size;
     // O tipo barra o consumidor TypeScript; este aviso barra o de JavaScript, que não tem tipo nenhum.
@@ -222,7 +222,7 @@ export function Toggle({ pressed, defaultPressed, onPressedChange, value, icon,
     // sem `size` saía a classe `btn-undefined` (medido no catálogo, nos três botões do `ToggleGroup`); com
     // valor responsivo sairia `btn-[object Object]`.
     const tamanho = ehResponsivo(size) ? classesResponsivas("size", size) : ((valorBase(size) ?? "md") !== "md" && `btn-${valorBase(size)}`);
-    return _jsxs(BaseToggle, { id: id, value: value, disabled: disabled, pressed: pressed, defaultPressed: defaultPressed, onPressedChange: soOValor(onPressedChange), "aria-label": textoVisivel ? undefined : (rotuloVisivel ? label : undefined), className: cx("btn", variant === "ghost" ? "btn-ghost" : "btn-tertiary", tamanho, !textoVisivel && "btn-icon", "toggle", className), children: [icon && _jsx(Icon, { name: icon }), children] });
+    return _jsxs(BaseToggle, { id: id, value: value, disabled: disabled, pressed: pressed, defaultPressed: defaultPressed, onPressedChange: soOValor(onPressedChange), "aria-label": textoVisivel ? undefined : (rotuloVisivel ? label : undefined), "data-pressed-style": pressedStyle, className: cx("btn", variant === "ghost" ? "btn-ghost" : "btn-tertiary", tamanho, !textoVisivel && "btn-icon", "toggle", className), children: [icon && _jsx(Icon, { name: icon }), children] });
 }
 // default ghost (não secondary): um ícone-ação solto — hambúrguer, tema, fechar — é sem
 // caixa por convenção (pedido do Victor: hambúrguer sem borda). Quem quer a caixa passa
@@ -266,18 +266,19 @@ export function ButtonGroup({ label, orientation, variant, size, fullWidth, disa
 // atributo publicado. Nada de o CSS decidir a orientação por breakpoint enquanto o atributo
 // diz outra coisa — seriam duas fontes de verdade e uma janela em que visual e comportamento
 // divergem. Ver `decisions/0047-css-first-para-apresentacao-runtime-para-semantica.md`.
-export function Toolbar({ orientation, label, className, ...props }) {
+// `pressedStyle` (ADR-0084): a cor do ligado de todos os botões de dentro; cada um pode trocar a sua.
+export function Toolbar({ orientation, label, className, pressedStyle, ...props }) {
     const s = useAureaStrings();
     const ancora = useRef(null);
     const resolvida = useValorResponsivo(orientation, "horizontal", ancora);
-    return _jsx(BaseToolbar.Root, { ref: ancora, orientation: resolvida, "aria-label": label ?? s.toolbarLabel, className: cx("toolbar", className), ...props });
+    return _jsx(BaseToolbar.Root, { ref: ancora, orientation: resolvida, "aria-label": label ?? s.toolbarLabel, "data-pressed-style": pressedStyle, className: cx("toolbar", className), ...props });
 }
 export function ToolbarGroup({ label, className, ...props }) { return _jsx(BaseToolbar.Group, { "aria-label": label, className: cx("toolbar-group", className), ...props }); }
 export function ToolbarSeparator({ className, ...props }) { return _jsx(BaseToolbar.Separator, { className: cx("toolbar-sep", className), ...props }); }
-export const ToolbarButton = forwardRef(function ToolbarButton({ variant = "ghost", ...props }, ref) { return _jsx(BaseToolbar.Button, { ref: ref, disabled: props.disabled, render: _jsx(Button, { variant: variant, ...props }) }); });
-export function ToggleGroup({ value, defaultValue, onValueChange, multiple, orientation, disabled, label, className, children, size, fullWidth, detached }) {
+export const ToolbarButton = forwardRef(function ToolbarButton({ variant = "ghost", pressedStyle, ...props }, ref) { return _jsx(BaseToolbar.Button, { ref: ref, disabled: props.disabled, render: _jsx(Button, { variant: variant, "data-pressed-style": pressedStyle, ...props }) }); });
+export function ToggleGroup({ value, defaultValue, onValueChange, multiple, orientation, disabled, label, className, children, size, fullWidth, detached, pressedStyle }) {
     const ancora = useRef(null);
     const resolvida = useValorResponsivo(orientation, "horizontal", ancora);
     const grupo = React.useMemo(() => ({ size }), [size]);
-    return _jsx(GrupoDeBotoesContext.Provider, { value: grupo, children: _jsx(BaseToggleGroup, { ref: ancora, value: value, defaultValue: defaultValue, onValueChange: soOValor(onValueChange), multiple: multiple, orientation: resolvida, disabled: disabled, "aria-label": label, className: cx("toggle-group", detached && "toggle-group-detached", fullWidth && "toggle-group-full", className), children: children }) });
+    return _jsx(GrupoDeBotoesContext.Provider, { value: grupo, children: _jsx(BaseToggleGroup, { ref: ancora, value: value, defaultValue: defaultValue, onValueChange: soOValor(onValueChange), multiple: multiple, orientation: resolvida, disabled: disabled, "aria-label": label, "data-pressed-style": pressedStyle, className: cx("toggle-group", detached && "toggle-group-detached", fullWidth && "toggle-group-full", className), children: children }) });
 }

package/dist/data-display.d.ts

@@ -1,2 +1,2 @@
 export * from "./data-display-client.js";
-export { Kbd, KPI, DataList, Timeline, Prose, Text, Heading, Paragraph, Code, type KPIProps, type KPIDirection, type KPITone, type KPIVariant, type TextProps, type HeadingProps, type ParagraphProps, type CodeProps, type TypographyType, type TypographyColor, type TypographyWeight, type TypographyAlign, type HeadingLevel, type ParagraphSize } from "./markup.js";
+export { Kbd, KPI, DataList, Timeline, Prose, Text, Heading, Paragraph, Code, type KPIProps, type KPIDirection, type KPITone, type KPIVariant, type TimelineVariant, type TextProps, type HeadingProps, type ParagraphProps, type CodeProps, type TypographyType, type TypographyColor, type TypographyWeight, type TypographyAlign, type HeadingLevel, type ParagraphSize } from "./markup.js";

package/dist/inputs-client.d.ts

@@ -310,7 +310,8 @@ export declare function OTPField({ length, value, defaultValue, onValueChange, m
     /** `secondary`: o fundo neutro do `Input` secundário, para o campo dentro de um cartão. */
     variant?: "primary" | "secondary";
 }): React.JSX.Element;
-export declare function SegmentedControl({ items, value, onChange, label, fullWidth, size }: {
+export type SegmentedControlSelectedStyle = "current" | "neutral" | "contrast" | "brand" | "ring" | "dot";
+export declare function SegmentedControl({ items, value, onChange, label, fullWidth, size, selectedStyle }: {
     items: Array<{
         value: string;
         label: ReactNode;
@@ -321,6 +322,7 @@ export declare function SegmentedControl({ items, value, onChange, label, fullWi
     label?: string;
     fullWidth?: boolean;
     size?: "sm" | "md";
+    selectedStyle?: SegmentedControlSelectedStyle;
 }): React.JSX.Element;
 export interface ComboboxOption {
     value: string;

package/dist/inputs-client.js

@@ -730,48 +730,12 @@ export function OTPField({ length, value, defaultValue, onValueChange, mask, dis
     const s = useAureaStrings();
     return _jsx(BaseOTPField.Root, { id: id, length: length, value: value, defaultValue: defaultValue, onValueChange: soOValor(onValueChange), mask: mask, disabled: disabled, required: required, role: "group", "aria-label": label, className: cx("otp-field", className), children: Array.from({ length }, (_, i) => _jsxs(React.Fragment, { children: [_jsx(BaseOTPField.Input, { render: _jsx("input", { "aria-label": `${s.otpDigit} ${i + 1}` }), className: cx("input otp-slot", variant === "secondary" && "input-secondary") }), groupSize && groupSize > 0 && (i + 1) % groupSize === 0 && i < length - 1 ? _jsx(BaseOTPField.Separator, { className: "otp-separator" }) : null] }, i)) });
 }
-// SegmentedControl — achado M20, fechado na Parte C do PLANO-1.0 em 07/08/2026.
-//
-// O DEFEITO: era `role="group"` com N botões de `aria-pressed`. Isso descreve N alternâncias
-// INDEPENDENTES — cada botão anuncia "pressionado/não pressionado", nada diz que só um pode
-// valer, e nunca se ouve "1 de 2". Para escolha única entre poucas opções o padrão APG é
-// `radiogroup`, e a diferença é o que o leitor de tela consegue prometer.
-// A troca mudou a semântica de um componente publicado, então foi registrada: ADR-0016.
-//
-// O MOTOR ENTREGA, ENTÃO NÃO ESCREVEMOS (BUILDING.md §1). O `RadioGroup` do Base UI 1.6 traz o
-// padrão inteiro: roving tabindex, setas que movem E selecionam, Home/End, e `aria-checked`.
-// Escrever isso à mão seria reimplementar um composite que já está testado.
-//
-// `render={<button type="button"/>}` não é enfeite, e a medição de 07/08 é que disse: o
-// `Radio.Root` renderiza um `<span>` por padrão, e a pele da Aurea é `.segmented button`. Sem
-// isso o componente perderia a pele inteira — e o check 18 não veria, porque ele olha CLASSE.
-// O motor também emite um `<input type="radio">` escondido por item (para envio de formulário);
-// ele é `position:fixed` e `aria-hidden`, então não entra no flex nem na árvore de acessibilidade.
-//
-// E `nativeButton` é o par obrigatório do `render` acima — medido em 11/08/2026. O `Radio.Root`
-// declara `nativeButton = false` por padrão (é o valor certo para o `<span>` que ele renderiza
-// sozinho), e o `useButton` do motor CONFERE isso no DOM montado, dentro de um efeito: sem esta
-// palavra sai um `console.error` do Base UI a cada montagem de CLIENTE. Não no catálogo, que é
-// HTML estático — no console de quem INSTALA.
-// O DOM foi medido nos dois lados antes da troca. O `role="button"` que a mensagem ameaça NÃO
-// aparecia (o `role="radio"` do motor já vencia a fusão); o que muda de fato é o `<input>`
-// escondido perder o `id`, que migra para este botão — e migra para o lado certo, porque o botão
-// é o rádio e o input é `aria-hidden`. Comportamento idêntico: Enter não seleciona, Espaço
-// seleciona, a seta move E seleciona. O que sai é a camada sintética que o motor punha por cima
-// da ativação nativa do `<button>`.
-//
-// `fullWidth` (A5, 06/10/2026): o mesmo nome e o mesmo desenho do nativo — o controle ocupa a
-// linha e cada segmento CRESCE a partir do rótulo, sem encolher abaixo dele. É como o grupo
-// de botões alternáveis da referência ocupa a linha.
-// NAVEGAÇÃO (bloco 1, o 5-A — 23/10/2026): com `href` em TODOS os itens, a cápsula é um <nav> de links — o atual leva
-// `aria-current="page"` —, e não um grupo de escolha: ir para outra página é navegação, e o leitor de tela tem de ouvir
-// "link", não "opção". É a chave Web | Native do site. `size="sm"`: a cápsula baixa da referência (abas de 24).
-export function SegmentedControl({ items, value, onChange, label, fullWidth, size = "md" }) {
+export function SegmentedControl({ items, value, onChange, label, fullWidth, size = "md", selectedStyle }) {
     const s = useAureaStrings();
     const classe = cx("segmented", fullWidth && "segmented-full", size === "sm" && "segmented-sm");
     if (items.length > 0 && items.every(i => i.href != null))
-        return _jsx("nav", { className: classe, "aria-label": label ?? s.optionsLabel, children: items.map(i => _jsx("a", { href: i.href, className: i.value === value ? "active" : undefined, "aria-current": i.value === value ? "page" : undefined, children: i.label }, i.value)) });
-    return _jsx(BaseRadioGroup, { className: classe, "aria-label": label ?? s.optionsLabel, value: value, onValueChange: v => onChange?.(String(v)), children: items.map(i => _jsx(BaseRadio.Root, { value: i.value, className: i.value === value ? "active" : undefined, nativeButton: true, render: _jsx("button", { type: "button" }), children: i.label }, i.value)) });
+        return _jsx("nav", { className: classe, "data-segment-style": selectedStyle, "aria-label": label ?? s.optionsLabel, children: items.map(i => _jsx("a", { href: i.href, className: i.value === value ? "active" : undefined, "aria-current": i.value === value ? "page" : undefined, children: i.label }, i.value)) });
+    return _jsx(BaseRadioGroup, { className: classe, "data-segment-style": selectedStyle, "aria-label": label ?? s.optionsLabel, value: value, onValueChange: v => onChange?.(String(v)), children: items.map(i => _jsx(BaseRadio.Root, { value: i.value, className: i.value === value ? "active" : undefined, nativeButton: true, render: _jsx("button", { type: "button" }), children: i.label }, i.value)) });
 }
 const ehAgrupado = (items) => items != null && items.length > 0 && typeof items[0] === "object" && items[0] != null && "items" in items[0];
 // UM renderizador e UMA lista para os dois combobox: duas cópias da mesma árvore é como a

package/dist/markup.d.ts

@@ -196,12 +196,14 @@ export declare function DataList({ items }: {
         value: ReactNode;
     }>;
 }): React.JSX.Element;
-export declare function Timeline({ items }: {
+export type TimelineVariant = "default" | "ring" | "latest" | "time" | "contrast";
+export declare function Timeline({ items, variant }: {
     items: Array<{
         title: ReactNode;
         description?: ReactNode;
         time?: ReactNode;
     }>;
+    variant?: TimelineVariant;
 }): React.JSX.Element;
 export declare function Prose({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
 export type TypographyType = "body" | "body-sm" | "body-xs" | "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

package/dist/markup.js

@@ -126,7 +126,7 @@ export function KPI({ label, value, trend, direction, tone, directionLabel, vari
         : _jsx(Card, { className: cx("kpi", className), ...props, children: miolo });
 }
 export function DataList({ items }) { return _jsx("dl", { className: "data-list", children: items.map((i, n) => _jsxs(React.Fragment, { children: [_jsx("dt", { children: i.term }), _jsx("dd", { children: i.value })] }, n)) }); }
-export function Timeline({ items }) { return _jsx("ol", { className: "timeline", children: items.map((i, n) => _jsxs("li", { children: [_jsx("span", { className: "timeline-dot" }), _jsxs("div", { children: [_jsx("strong", { children: i.title }), i.description && _jsx("p", { children: i.description }), i.time && _jsx("small", { className: "muted", children: i.time })] })] }, n)) }); }
+export function Timeline({ items, variant }) { return _jsx("ol", { className: "timeline", "data-timeline-style": variant, children: items.map((i, n) => _jsxs("li", { children: [_jsx("span", { className: "timeline-dot" }), _jsxs("div", { children: [_jsx("strong", { children: i.title }), i.description && _jsx("p", { children: i.description }), i.time && _jsx("small", { className: "muted", children: i.time })] })] }, n)) }); }
 // Prose (item L5): UMA LINHA, e é para ser mesmo — quem transforma Markdown em elementos é o
 // consumidor. A trava do item é no CSS, escopada em `.prose`, e há prova dela no `skin.spec`.
 // Segurança, porque é o caminho de uso mais provável: quem entrega HTML de terceiro por

package/dist/navigation-client.d.ts

@@ -206,16 +206,18 @@ declare function SidebarShow({ when, children }: {
 export type BottomNavVariant = "floating" | "edge";
 export type BottomNavIndicator = "none" | "subtle" | "pill" | "circle" | "circle-raised" | "circle-bold" | "circle-outline" | "capsule" | "expand";
 export type BottomNavWidth = "full" | "content";
+export type BottomNavCurrentStyle = "current" | "neutral" | "contrast" | "brand" | "ring" | "plain" | "brand-white" | "white-ring" | "brand-gradient" | "bar-ink" | "bar-ring" | "bar-plain" | "bar-light";
 /** @deprecated Os quatro nomes de 17/08/2026. Use `variant` + `indicator`. */
 export type BottomNavVariantLegacy = "flat" | "surface" | "pill" | "dock";
 export type BottomNavVariantAny = BottomNavVariant | BottomNavVariantLegacy;
-export declare function BottomNav({ items, current, variant, indicator, width, label, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
+export declare function BottomNav({ items, current, variant, indicator, width, label, currentStyle, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
     items: SidebarEntry[];
     current?: string;
     variant?: BottomNavVariantAny;
     indicator?: BottomNavIndicator;
     width?: BottomNavWidth;
     label?: string;
+    currentStyle?: BottomNavCurrentStyle;
 }): React.JSX.Element;
 export interface NavListIndicator {
     icon: IconName;

package/dist/navigation-client.js

@@ -434,12 +434,12 @@ function SidebarShow({ when, children }) {
 const LEGADO = {
     flat: ["edge", "none"], surface: ["floating", "circle"], pill: ["floating", "pill"], dock: ["floating", "circle"]
 };
-export function BottomNav({ items, current, variant = "floating", indicator = "none", width = "full", label, className, ...props }) {
+export function BottomNav({ items, current, variant = "floating", indicator = "none", width = "full", label, currentStyle, className, ...props }) {
     const s = useAureaStrings();
     const [layout, marca0] = variant in LEGADO ? LEGADO[variant] : [variant, indicator];
     // O indicador explícito ganha do que o nome legado implica: quem escreveu os dois quis os dois.
     const ind = indicator !== "none" ? indicator : marca0;
-    return _jsx("nav", { className: cx("bottom-nav", layout === "edge" && "bottom-nav-edge", layout !== "edge" && width === "content" && "bottom-nav-content", `bottom-nav-ind-${ind}`, className), "aria-label": label ?? s.bottomNavLabel, ...props, children: items.filter((it) => it !== "separator").map(it => {
+    return _jsx("nav", { className: cx("bottom-nav", layout === "edge" && "bottom-nav-edge", layout !== "edge" && width === "content" && "bottom-nav-content", `bottom-nav-ind-${ind}`, className), "data-current-style": currentStyle, "aria-label": label ?? s.bottomNavLabel, ...props, children: items.filter((it) => it !== "separator").map(it => {
             const ativo = it.id === current;
             // O CONTADOR PENDURA NO ÍCONE, e é por isso que existe esta caixa. Pendurado no ITEM (a
             // primeira versão), `50%` cai no meio do RÓTULO quando o item é linha — o Victor viu o número

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/react",
-  "version": "0.45.0",
+  "version": "0.47.0",
   "description": "Os componentes React da Aurea UDS. Importe @aurea-uds/fonts/css e @aurea-uds/core/css junto.",
   "keywords": [
     "aurea",