@aurea-uds/react 0.31.0 → 0.33.0

package/dist/inputs.d.ts

@@ -1,3 +1,3 @@
 export * from "./inputs-client.js";
 export { Textarea, Checkbox, Radio, Switch, Range } from "./markup.js";
-export { Label, InputGroup, InputGroupAddon, type AddonSide, type AddonLayout, type FieldSize } from "./markup.js";
+export { Label, InputGroup, InputGroupAddon, type AddonSide, type AddonLayout, type FieldSize, type FieldVariant } from "./markup.js";

package/dist/internal.d.ts

@@ -1,20 +1,23 @@
 import React from "react";
-import { type AureaStrings, type AureaTheme, type AureaDensity } from "./pure.js";
-export { cx, fundirRender, defaultStrings, ptBR, defaultSpriteUrl, universalStates, stateSeverity, type AureaStrings, type UniversalState, type AureaTheme, type AureaDensity } from "./pure.js";
+import { type AureaStrings, type AureaTheme, type AureaThemePreference, type AureaDensity } from "./pure.js";
+export { cx, fundirRender, defaultStrings, ptBR, defaultSpriteUrl, universalStates, stateSeverity, type AureaStrings, type UniversalState, type AureaTheme, type AureaThemePreference, type AureaDensity } from "./pure.js";
+export declare const controlesRotulaveis: WeakSet<object>;
 export declare const StringsContext: React.Context<AureaStrings>;
 export declare const useAureaStrings: () => AureaStrings;
 export declare const SpriteContext: React.Context<string>;
 export declare const useSpriteUrl: () => string;
 export declare const ThemeContext: React.Context<{
     theme?: AureaTheme;
-    setTheme: (t: AureaTheme) => void;
+    preference?: AureaThemePreference;
+    setTheme: (t: AureaThemePreference) => void;
     toggleTheme: () => void;
 }>;
 /** Tema atual e como trocá-lo. Fora de um `AureaProvider`, devolve `undefined` e no-ops — não
  *  lança: um componente isolado num teste não deve morrer por falta de provider. */
 export declare const useTheme: () => {
     theme?: AureaTheme;
-    setTheme: (t: AureaTheme) => void;
+    preference?: AureaThemePreference;
+    setTheme: (t: AureaThemePreference) => void;
     toggleTheme: () => void;
 };
 export declare const DensityContext: React.Context<{

package/dist/internal.js

@@ -18,6 +18,10 @@ import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { Toast as BaseToast } from "@base-ui/react/toast";
 import { defaultStrings, defaultSpriteUrl } from "./pure.js";
 export { cx, fundirRender, defaultStrings, ptBR, defaultSpriteUrl, universalStates, stateSeverity } from "./pure.js";
+// Os controles da Aurea que moram FORA do pacote principal (o `DatePicker`, em `./calendar`, 0.32.0) e
+// entregam o `id` ao nó focal. O `Field` os nomeia com `<label for>`, como os da lista dele; eles se
+// registram aqui ao carregar, porque importar cada um no `Field` puxaria o motor deles para todo app.
+export const controlesRotulaveis = new WeakSet();
 export const StringsContext = createContext(defaultStrings);
 export const useAureaStrings = () => useContext(StringsContext);
 export const SpriteContext = createContext(defaultSpriteUrl);
@@ -31,7 +35,8 @@ export const useSpriteUrl = () => useContext(SpriteContext);
 // diferente de "escuro". Um default concreto aqui faria o provider sobrescrever, na primeira
 // pintura, o `data-theme` que o documento já traz no markup — e esse atributo existe justamente
 // para não haver piscada de tema ao carregar.
-export const ThemeContext = createContext({ theme: undefined, setTheme: () => { }, toggleTheme: () => { } });
+// `preference` (15/10/2026): o que foi ESCOLHIDO, que pode ser `"system"`; `theme` é o que está na tela.
+export const ThemeContext = createContext({ theme: undefined, preference: undefined, setTheme: () => { }, toggleTheme: () => { } });
 /** Tema atual e como trocá-lo. Fora de um `AureaProvider`, devolve `undefined` e no-ops — não
  *  lança: um componente isolado num teste não deve morrer por falta de provider. */
 export const useTheme = () => useContext(ThemeContext);

package/dist/layout-client.d.ts

@@ -1,7 +1,7 @@
 import { type HTMLAttributes, type RefAttributes, type ReactNode } from "react";
 import { type Orientation, type Responsive } from "./pure.js";
-import { type HeaderVariant, type SidebarVariant, type SidebarItem } from "./navigation.js";
-export declare function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant, topbarDivider, sidebarVariant, sidebarCollapsed, sidebarCollapsible, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+import { type HeaderVariant, type SidebarVariant, type SidebarScrollbar, type SidebarItem } from "./navigation.js";
+export declare function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant, topbarDivider, sidebarVariant, sidebarScrollbar, sidebarCollapsed, sidebarCollapsible, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant, aside, asideLabel, asideVariant, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     brand: ReactNode;
     navigation?: ReactNode;
     navItems?: SidebarItem[];
@@ -11,6 +11,18 @@ export declare function AppShell({ brand, navigation, navItems, currentNavId, na
     topbarVariant?: Exclude<HeaderVariant, "pill">;
     topbarDivider?: boolean;
     sidebarVariant?: SidebarVariant;
+    /** 0.32.0: a barra de rolagem da lateral da esquerda — o `scrollbar` da `Sidebar`. Padrão `hover` (clara, só com o
+     *  ponteiro em cima); `visible` é a barra sempre à vista. */
+    sidebarScrollbar?: SidebarScrollbar;
+    /** 0.32.0 (DOC-01): a coluna da DIREITA — o "Nesta página" de uma documentação (um `TableOfContents`).
+     *  Mora numa `Sidebar placement="right"` do mesmo desenho da da esquerda. De 1280 para cima é a
+     *  terceira coluna; abaixo, desce para depois do conteúdo. */
+    aside?: ReactNode;
+    /** O nome da coluna da direita para o leitor de tela. Padrão: a frase `tocLabel` ("On this page"). */
+    asideLabel?: string;
+    /** 0.32.0: a variante da coluna da direita. Padrão: a mesma da esquerda (`sidebarVariant`). `plain`
+     *  tira a caixa — os itens soltos na página, como no "On this page" da documentação da referência. */
+    asideVariant?: SidebarVariant;
     /** A lateral em trilha de ícones. Controlado: quem passa decide (e o `onSidebarCollapsedChange` avisa). */
     sidebarCollapsed?: boolean;
     /** AN-01: o botão de recolher na junção do menu com o conteúdo, e a trilha sozinha entre 1024 e 1279 de largura. */

package/dist/layout-client.js

@@ -146,7 +146,7 @@ function useLargura(query) {
         return () => mq.removeEventListener?.("change", avisar);
     }, () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(query).matches, () => false);
 }
-export function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant = "floating", topbarDivider, sidebarVariant, sidebarCollapsed, sidebarCollapsible, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant = "surface", children, className, ...props }) {
+export function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant = "floating", topbarDivider, sidebarVariant, sidebarScrollbar, sidebarCollapsed, sidebarCollapsible, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant = "surface", aside, asideLabel, asideVariant, children, className, ...props }) {
     const s = useAureaStrings();
     useGavetaFechaNoDesktop();
     const controlado = sidebarCollapsed !== undefined;
@@ -180,7 +180,7 @@ export function AppShell({ brand, navigation, navItems, currentNavId, navLabel,
     // A condição vai escrita no `icon=` do botão, e não numa variável: é ali que o check 46 lê os
     // ícones que o shell desenha.
     const paraOComeco = !efetiva, direita = useDirection() === "rtl";
-    return _jsxs("div", { className: cx("app-shell", topbarVariant === "flush" && "app-shell-flush", sidebarCollapsible && "app-shell-collapsible", className), ...props, children: [_jsx("a", { className: "skip-link", href: `#${SHELL_MAIN_ID}`, children: s.skipToContent }), _jsx(Header, { variant: topbarVariant, divider: topbarDivider, brand: _jsxs(_Fragment, { children: [_jsx(IconButton, { className: "nav-toggle", icon: "list", label: s.navigationToggle, popoverTarget: SHELL_NAV_ID }), brand] }), children: topbar }), sidebarCollapsible && _jsx("div", { className: "sidebar-toggle-slot", children: _jsx(Tooltip, { content: rotulo, side: "right", children: _jsx(IconButton, { className: "sidebar-toggle", size: "xs", icon: paraOComeco === direita ? "caret-right" : "caret-left", label: rotulo, "aria-expanded": !efetiva, "aria-controls": SHELL_NAV_ID, onClick: alternar }) }) }), _jsx(Sidebar, { id: SHELL_NAV_ID, popover: "auto", variant: sidebarVariant, collapsed: efetiva, items: navItems, current: currentNavId, label: navLabel, onToggle: focoDaGaveta, children: navigation }), _jsx("main", { id: SHELL_MAIN_ID, tabIndex: -1, className: cx("content", contentVariant === "plain" && "content-plain"), children: children })] });
+    return _jsxs("div", { className: cx("app-shell", topbarVariant === "flush" && "app-shell-flush", sidebarCollapsible && "app-shell-collapsible", aside != null && "app-shell-with-aside", className), ...props, children: [_jsx("a", { className: "skip-link", href: `#${SHELL_MAIN_ID}`, children: s.skipToContent }), _jsx(Header, { variant: topbarVariant, divider: topbarDivider, brand: _jsxs(_Fragment, { children: [_jsx(IconButton, { className: "nav-toggle", icon: "list", label: s.navigationToggle, popoverTarget: SHELL_NAV_ID }), brand] }), children: topbar }), sidebarCollapsible && _jsx("div", { className: "sidebar-toggle-slot", children: _jsx(Tooltip, { content: rotulo, side: "right", children: _jsx(IconButton, { className: "sidebar-toggle", size: "xs", icon: paraOComeco === direita ? "caret-right" : "caret-left", label: rotulo, "aria-expanded": !efetiva, "aria-controls": SHELL_NAV_ID, onClick: alternar }) }) }), _jsx(Sidebar, { id: SHELL_NAV_ID, popover: "auto", variant: sidebarVariant, scrollbar: sidebarScrollbar, collapsed: efetiva, items: navItems, current: currentNavId, label: navLabel, onToggle: focoDaGaveta, children: navigation }), _jsx("main", { id: SHELL_MAIN_ID, tabIndex: -1, className: cx("content", contentVariant === "plain" && "content-plain"), children: children }), aside != null && _jsx(Sidebar, { placement: "right", variant: asideVariant ?? sidebarVariant, className: "app-shell-aside", "aria-label": asideLabel ?? s.tocLabel, children: aside })] });
 }
 export function Separator({ orientation, spacing = "none", className, ...props }) {
     const ancora = useRef(null);

package/dist/markup.d.ts

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes, type InputHTMLAttributes, type ReactElement, type ReactNode, type RefAttributes, type TextareaHTMLAttributes } from "react";
+import React, { type AnchorHTMLAttributes, type HTMLAttributes, type InputHTMLAttributes, type ReactElement, type ReactNode, type RefAttributes, type TextareaHTMLAttributes } from "react";
 import { type Responsive } from "./pure.js";
 import type { ComponentSize } from "./actions.js";
 import type { SidebarItem } from "./navigation-client.js";
@@ -15,7 +15,7 @@ type CardBase = HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> &
     accent?: CardAccent;
 };
 export type CardProps = CardBase & ({
-    variant?: "base" | "raised" | "inset" | "selected" | "danger" | "contrast";
+    variant?: "base" | "raised" | "inset" | "outline" | "selected" | "danger" | "contrast";
     render?: ReactElement;
 } | {
     variant: "interactive";
@@ -24,12 +24,22 @@ export type CardProps = CardBase & ({
 export declare function Card({ variant, padding, orientation, accent, className, render, ...props }: CardProps): ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export declare namespace Card {
     export { CardMedia as Media };
+    export { CardHeader as Header };
+    export { CardTitle as Title };
+    export { CardDescription as Description };
+    export { CardContent as Content };
+    export { CardFooter as Footer };
 }
 /** A mídia do cartão — a primeira das partes da especificação do `Card` (A-14). No vertical,
  *  primeira filha, ela SANGRA até a borda de cima e dos lados; no horizontal, fica à esquerda com a
  *  largura de miniatura, dentro do respiro, com o raio que sai da conta da casa (ADR-0033: raio do
  *  cartão menos o respiro dele). O que vai dentro — `Image`, vídeo — é do app. */
 declare function CardMedia({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
+declare function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
+declare function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement> & RefAttributes<HTMLHeadingElement>): React.JSX.Element;
+declare function CardDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement> & RefAttributes<HTMLParagraphElement>): React.JSX.Element;
+declare function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
+declare function CardFooter({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
 export type LayoutGap = "tight" | "normal" | "loose";
 export type StackAlign = "start" | "center" | "end" | "stretch";
 export type ClusterAlign = "start" | "center" | "end" | "baseline";
@@ -132,6 +142,10 @@ export interface SectionProps extends HTMLAttributes<HTMLElement>, RefAttributes
     /** Só no `footer`: as colunas de links, cada uma com título. Os itens são `SidebarItem` (`id`, `label`, `href`, `render`). */
     links?: SectionFooterGroup[];
     /** Só no `footer`: a linha de baixo — direitos, termos, privacidade. */
+    /** Só no `footer` (15/10/2026): `"columns"` (o padrão, o rodapé de site grande) ou `"inline"` — UMA linha centrada, como
+     *  o rodapé da página inicial da referência: a frase legal, os links (sem os títulos das colunas) e o que vier dentro
+     *  (os ícones sociais). A marca não entra. */
+    layout?: "columns" | "inline";
     legal?: ReactNode;
     /** Só no `footer`: até onde o miolo cresce, pela escala do `Container`. Padrão: `xl`. */
     maxWidth?: ContainerSize;
@@ -143,7 +157,7 @@ export interface SectionProps extends HTMLAttributes<HTMLElement>, RefAttributes
  * O conteúdo vai dentro de um `Container`. Dê um nome à faixa (`aria-labelledby` no título dela)
  * quando ela for uma região que o leitor de tela deva listar.
  */
-export declare function Section({ surface, spacing, theme, variant, brand, links, legal, maxWidth, navLabel, children, className, ...props }: SectionProps): React.JSX.Element;
+export declare function Section({ surface, spacing, theme, variant, brand, links, legal, layout, maxWidth, navLabel, children, className, ...props }: SectionProps): React.JSX.Element;
 export type KPIDirection = "up" | "down" | "flat";
 export type KPITone = "success" | "danger" | "neutral";
 export type KPIVariant = "card" | "plain";
@@ -182,9 +196,14 @@ export type TypographyWeight = "normal" | "medium" | "semibold" | "bold" | "extr
 export type TypographyAlign = "start" | "center" | "end" | "justify";
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export type ParagraphSize = "base" | "sm" | "xs";
+/** A cor do texto com o NOME do nativo (DOC-11, os mesmos nomes na web e no nativo). `link` é o amarelo
+ *  de ESCREVER (legível nos dois temas); `primary` é o de PREENCHER, e no tema claro quase some — como no
+ *  nativo. As cores de estado são o par `-400` (ADR-0061). Vence o `color` quando os dois vêm. */
+export type TypographyTone = "default" | "muted" | "subtle" | "primary" | "link" | "danger" | "success" | "warning" | "info";
 interface TypographyBase {
     align?: TypographyAlign;
     color?: TypographyColor;
+    tone?: TypographyTone;
     weight?: TypographyWeight;
     truncate?: boolean;
     /** GAR-16 (0.28.0): algarismos da mesma largura — para número que alinha em coluna (preço, ano,
@@ -194,26 +213,30 @@ interface TypographyBase {
 export interface TextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, RefAttributes<HTMLSpanElement>, TypographyBase {
     type?: TypographyType;
 }
-export declare function Text({ type, align, color, weight, truncate, numeric, className, ...props }: TextProps): React.JSX.Element;
+export declare function Text({ type, align, color, tone, weight, truncate, numeric, className, ...props }: TextProps): React.JSX.Element;
 export interface HeadingProps extends Omit<HTMLAttributes<HTMLHeadingElement>, "color">, RefAttributes<HTMLHeadingElement>, TypographyBase {
     level?: HeadingLevel;
 }
-export declare function Heading({ level, align, color, weight, truncate, numeric, className, ...props }: HeadingProps): React.JSX.Element;
+export declare function Heading({ level, align, color, tone, weight, truncate, numeric, className, ...props }: HeadingProps): React.JSX.Element;
 export interface ParagraphProps extends Omit<HTMLAttributes<HTMLParagraphElement>, "color">, RefAttributes<HTMLParagraphElement>, TypographyBase {
     size?: ParagraphSize;
 }
-export declare function Paragraph({ size, align, color, weight, truncate, numeric, className, ...props }: ParagraphProps): React.JSX.Element;
+export declare function Paragraph({ size, align, color, tone, weight, truncate, numeric, className, ...props }: ParagraphProps): React.JSX.Element;
 export interface CodeProps extends Omit<HTMLAttributes<HTMLElement>, "color">, RefAttributes<HTMLElement>, TypographyBase {
 }
-export declare function Code({ align, color, weight, truncate, className, ...props }: CodeProps): React.JSX.Element;
-export type BadgeEmphasis = "soft" | "solid" | "outline";
+export declare function Code({ align, color, tone, weight, truncate, className, ...props }: CodeProps): React.JSX.Element;
+export type BadgeEmphasis = "soft" | "solid" | "outline" | "flat";
 export type BadgeSize = "xs" | "sm" | "md" | "lg";
 export type BadgePlacement = "top-end" | "top-start" | "bottom-end" | "bottom-start";
 export type BadgeFit = "auto" | "content";
 export declare function formatBadgeCount(count: number, max?: number): string;
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, RefAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
-    /** `soft` é o tom de sempre; `solid` preenche com o acento; `outline` é só contorno. */
+    /** A cor, com o NOME do nativo (DOC-11, 0.32.0: os mesmos nomes na web e no nativo). É o mesmo
+     *  eixo do `variant`, e vence quando os dois vêm. */
+    tone?: BadgeVariant;
+    /** `soft` é o tom de sempre; `solid` preenche com o acento; `outline` é só contorno; `flat` (15/10/2026) é o tom de
+     *  sempre SEM a linha em volta, como o selo da referência (que chamava essa forma de `flat`). */
     emphasis?: BadgeEmphasis;
     size?: BadgeSize;
     /** Ponto de estado antes do texto. Sozinho num `anchor`, ele É o badge. */
@@ -239,7 +262,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, RefAttribut
      *  Chama-se assim, e não `content`, porque este colide com o atributo HTML de mesmo nome. */
     badgeContent?: ReactNode;
 }
-export declare function Badge({ variant, emphasis, size, dot, leading, trailing, image, imageAlt, count, max, showZero, fit, anchor, anchorShape, invisible, badgeContent, children, className, ...props }: BadgeProps): React.JSX.Element;
+export declare function Badge({ variant: variantProp, tone, emphasis, size, dot, leading, trailing, image, imageAlt, count, max, showZero, fit, anchor, anchorShape, invisible, badgeContent, children, className, ...props }: BadgeProps): React.JSX.Element;
 /** O tom da barra: a mesma lista fechada do `ButtonTone`. Pausado é `neutral`; falha é `danger`. */
 export type ProgressTone = "brand" | "neutral" | "success" | "warning" | "danger" | "info";
 export interface ProgressProps {
@@ -252,10 +275,21 @@ export interface ProgressProps {
      *  que falta, bytes. Em texto, vai junto no `aria-valuetext`. */
     detail?: ReactNode;
     tone?: ProgressTone;
+    /** 0.32.0: o rótulo À MOSTRA, no alto à esquerda (o da barra da referência). Sem ele, o `label` só
+     *  nomeia a barra para o leitor de tela, como sempre. */
+    showLabel?: boolean;
+    /** 0.32.0: o valor ("60%") no alto à direita, quando não há `detail`. */
+    showValue?: boolean;
+    /** A espessura do trilho: sm 4, md 8, lg 12 — os da referência. */
+    size?: ProgressSize;
     className?: string;
 }
-export declare function Progress({ value, label, detail, tone, className }: ProgressProps): React.JSX.Element;
-export declare function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
+export type ProgressSize = "sm" | "md" | "lg";
+export declare function Progress({ value, label, detail, tone, showLabel, showValue, size, className }: ProgressProps): React.JSX.Element;
+export type SkeletonAnimation = "pulse" | "none";
+export declare function Skeleton({ animation, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+    animation?: SkeletonAnimation;
+}): React.JSX.Element;
 export declare function AvatarGroup({ children, max, total, label, size, className }: {
     children: ReactNode;
     max?: number;
@@ -290,6 +324,24 @@ export interface HeaderProps extends HTMLAttributes<HTMLElement>, RefAttributes<
     actions?: ReactNode;
     /** Até onde o miolo da barra cresce, pela escala do `Container` (`sm` 640 … `2xl` 1536, `full`). */
     maxWidth?: ContainerSize;
+    /**
+     * Onde ficam os links (14/10/2026): `"end"` (o padrão) logo antes das ações, na outra ponta da marca; `"start"`
+     * colados na marca, com as ações na outra ponta — a página inicial da referência. O nome é o `justify` do
+     * conteúdo da barra dela.
+     */
+    itemsJustify?: "start" | "end";
+    /**
+     * A altura (15/10/2026): `"md"` (o padrão, 64 — a do guia de barra da referência) ou `"sm"` (56, a do topo da página
+     * inicial dela), com 6 entre as ações em vez de 8.
+     */
+    size?: "md" | "sm";
+    /**
+     * Só na `flush` (15/10/2026): o fundo transparente que EMBAÇA o que passa por baixo, como o topo da página inicial
+     * da referência. Quem pede menos transparência no sistema, ou o navegador sem desfoque, recebe o fundo cheio.
+     */
+    blurred?: boolean;
+    /** O que entra no MENU DO CELULAR, embaixo dos links (15/10/2026): o GitHub, a conta. Na barra larga não aparece. */
+    menuActions?: ReactNode;
     /** O nome da navegação para o leitor de tela. Padrão: `"Main"`. */
     navLabel?: string;
     /** O nome do botão de menu do celular. Padrão: `"Menu"`. */
@@ -297,12 +349,14 @@ export interface HeaderProps extends HTMLAttributes<HTMLElement>, RefAttributes<
     /** O `id` do painel do celular. Padrão: `"aurea-header-menu"`. Troque só se a página tiver dois cabeçalhos de site. */
     menuId?: string;
 }
-export declare function Header({ variant, divider, brand, items, current, actions, maxWidth, navLabel, menuLabel, menuId, children, className, ...props }: HeaderProps): React.JSX.Element;
+export declare function Header({ variant, divider, brand, items, current, actions, maxWidth, itemsJustify, size, blurred, menuActions, navLabel, menuLabel, menuId, children, className, ...props }: HeaderProps): React.JSX.Element;
 /** @deprecated `Topbar` é o nome antigo do `Header` (07/10/2026). Continua funcionando, igual; use `Header`. */
 export declare function Topbar(props: HeaderProps): React.JSX.Element;
 export declare function Kbd({ children, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>): React.JSX.Element;
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, RefAttributes<HTMLTextAreaElement> {
     size?: Responsive<FieldSize>;
+    /** 0.32.0, a da referência: `secondary` é o fundo neutro, para o campo dentro de um cartão. */
+    variant?: FieldVariant;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & RefAttributes<HTMLTextAreaElement>>;
 export declare function Checkbox({ label, labelHidden, description, size, className, ...props }: Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & RefAttributes<HTMLInputElement> & {
@@ -311,12 +365,17 @@ export declare function Checkbox({ label, labelHidden, description, size, classN
     description?: ReactNode;
     size?: Responsive<FieldSize>;
 }): React.JSX.Element;
-export declare function Radio({ label, size, className, ...props }: Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & RefAttributes<HTMLInputElement> & {
+export declare function Radio({ label, labelHidden, description, size, className, ...props }: Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & RefAttributes<HTMLInputElement> & {
     label: ReactNode;
+    labelHidden?: boolean;
+    description?: ReactNode;
     size?: Responsive<FieldSize>;
 }): React.JSX.Element;
-export declare function Switch({ label, size, className, ...props }: Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & RefAttributes<HTMLInputElement> & {
+export declare function Switch({ label, labelHidden, description, indicatorPlacement, size, className, ...props }: Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & RefAttributes<HTMLInputElement> & {
     label: ReactNode;
+    labelHidden?: boolean;
+    description?: ReactNode;
+    indicatorPlacement?: "start" | "end";
     size?: Responsive<FieldSize>;
 }): React.JSX.Element;
 export type RangeOrientation = "horizontal" | "vertical";
@@ -324,6 +383,7 @@ export declare function Range({ orientation, className, ...props }: InputHTMLAtt
     orientation?: Responsive<RangeOrientation>;
 }): React.JSX.Element;
 export type FieldSize = Extract<ComponentSize, "sm" | "md" | "lg">;
+export type FieldVariant = "primary" | "secondary";
 export declare function Label({ htmlFor, className, children, ...props }: HTMLAttributes<HTMLLabelElement> & RefAttributes<HTMLLabelElement> & {
     htmlFor?: string;
 }): React.JSX.Element;
@@ -339,4 +399,64 @@ export declare function InputGroupAddon({ side, layout, className, children, ...
 export declare function AspectRatio({ ratio, className, style, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     ratio?: number;
 }): React.JSX.Element;
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>, RefAttributes<HTMLAnchorElement> {
+    /** Abre noutra aba e mostra a seta. */
+    external?: boolean;
+    /** Não navega: sai sem `href` e com `aria-disabled`. */
+    disabled?: boolean;
+}
+export declare function Link({ external, disabled, href, target, rel, className, children, ...props }: LinkProps): React.JSX.Element;
+export type ColorSwatchSize = "xs" | "sm" | "md" | "lg" | "xl";
+export interface ColorSwatchProps extends HTMLAttributes<HTMLSpanElement>, RefAttributes<HTMLSpanElement> {
+    /** Qualquer cor do CSS: `#f0c200`, `oklch(…)`, `var(--primary)`. */
+    color: string;
+    size?: ColorSwatchSize;
+    /** O nome que o leitor de tela anuncia ("Amarelo Aurea"). Sem ele, o valor da cor. */
+    label?: string;
+}
+export interface ColorSwatchOption {
+    color: string;
+    label?: string;
+    /** Esta cor não se escolhe (as outras sim). */
+    disabled?: boolean;
+}
+/** O que as duas formas têm em comum: a escala. (É a base que o leitor da API segue em `base & (a | b)`.) */
+export interface ColorSwatchBase {
+    size?: ColorSwatchSize;
+}
+export interface ColorSwatchPickerProps {
+    /** As cores para escolher — `"#0485f7"` ou `{color, label}`. É o que faz da amostra um grupo de escolha. */
+    options: readonly (string | ColorSwatchOption)[];
+    /** O nome do grupo no formulário, e o que faz das amostras UM grupo (as setas andam entre elas). */
+    name: string;
+    /** O nome do grupo para o leitor de tela ("Cor de destaque"). */
+    label: string;
+    value?: string;
+    defaultValue?: string;
+    /** O evento do navegador, como no `Radio`: `event.target.value` é a cor escolhida. */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /** `"grid"` (o padrão: em linha, quebrando) ou `"stack"` (em coluna), como na referência. */
+    layout?: "grid" | "stack";
+    /** A marca da escolhida, no lugar do "visto" (um `<Icon>`, por exemplo). Ela ganha a tinta que contrasta. */
+    indicator?: ReactNode;
+    /** O nome de cada cor embaixo dela (o `label` da opção; sem ele, o código), como a escolha de tema da referência. */
+    showLabels?: boolean;
+    size?: ColorSwatchSize;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+}
+export declare function ColorSwatch(props: ColorSwatchBase & (ColorSwatchProps | ColorSwatchPickerProps)): React.JSX.Element;
+export type ProgressCircleSize = "sm" | "md" | "lg";
+export interface ProgressCircleProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
+    /** De `min` a `max`. Sem ele, o círculo gira. */
+    value?: number;
+    min?: number;
+    max?: number;
+    size?: ProgressCircleSize;
+    tone?: ProgressTone;
+    /** O nome que o leitor de tela anuncia ("Enviando o arquivo"). */
+    label: string;
+}
+export declare function ProgressCircle({ value, min, max, size, tone, label, className, ...props }: ProgressCircleProps): React.JSX.Element;
 export {};

package/dist/markup.js

@@ -37,6 +37,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // tocar motor. Na dúvida, ele NÃO entra — cliente a mais é lento, servidor a mais é quebrado.
 import React, { forwardRef } from "react";
 import { cx, fundirRender, peleDoEixo } from "./pure.js";
+// As contas de cor são funções puras, sem estado e sem navegador (ADR-0069): o `ColorSwatch` usa a do contraste.
+import { contrastingInk, hsbToRgb, parseColor } from "./color.js";
 export function Card({ variant = "base", padding = "normal", orientation = "vertical", accent, className, render, ...props }) {
     return fundirRender(render, { className: cx("card", variant !== "base" && `card-${variant}`, accent && `card-accent card-accent-${accent}`, padding === "none" && "card-flush", orientation === "horizontal" && "card-horizontal", className), ...(variant === "contrast" ? { "data-theme": "dark" } : null), ...props });
 }
@@ -46,6 +48,19 @@ export function Card({ variant = "base", padding = "normal", orientation = "vert
  *  cartão menos o respiro dele). O que vai dentro — `Image`, vídeo — é do app. */
 function CardMedia({ className, ...props }) { return _jsx("div", { className: cx("card-media", className), ...props }); }
 Card.Media = CardMedia;
+// AS PARTES DO CARTÃO (15/10/2026, o Victor: "A, B, C, pode"), como as da referência: o cabeçalho (o título e a
+// descrição, colados), o conteúdo (4 entre os itens) e o rodapé (em linha). 12 entre as partes, o vão dela — por margem,
+// porque o `Card` da Aurea é um bloco e virar coluna mudaria quem já o usa. O título é um `h3`, como lá.
+function CardHeader({ className, ...props }) { return _jsx("div", { className: cx("card-header", className), ...props }); }
+function CardTitle({ className, ...props }) { return _jsx("h3", { className: cx("card-title", className), ...props }); }
+function CardDescription({ className, ...props }) { return _jsx("p", { className: cx("card-description", className), ...props }); }
+function CardContent({ className, ...props }) { return _jsx("div", { className: cx("card-content", className), ...props }); }
+function CardFooter({ className, ...props }) { return _jsx("div", { className: cx("card-footer", className), ...props }); }
+Card.Header = CardHeader;
+Card.Title = CardTitle;
+Card.Description = CardDescription;
+Card.Content = CardContent;
+Card.Footer = CardFooter;
 export function Stack({ gap, align, className, ...props }) { return _jsx("div", { className: cx("stack", gap && gap !== "normal" && `stack-gap-${gap}`, align && align !== "stretch" && `stack-align-${align}`, className), ...props }); }
 export function Cluster({ gap, align, justify, wrap, className, ...props }) { return _jsx("div", { className: cx("cluster", gap && gap !== "normal" && `cluster-gap-${gap}`, align && align !== "center" && `cluster-align-${align}`, justify && justify !== "start" && `cluster-justify-${justify}`, wrap === false && "cluster-nowrap", className), ...props }); }
 const GRID_MIN = new Set(["xs", "sm", "md", "lg"]);
@@ -80,10 +95,16 @@ export function Container({ size = "xl", className, ...props }) {
 // (`spacing`) e o tema próprio (`theme` — rodapé escuro numa página clara). Nenhuma referência da
 // fila tem um rodapé aberto; o desenho é da Aurea, com tokens que já existem. Os links de cada
 // coluna são `SidebarItem`, a mesma forma dos menus, e o `render` leva o link do roteador.
-export function Section({ surface = "background", spacing = "md", theme, variant = "base", brand, links, legal, maxWidth = "xl", navLabel = "Footer", children, className, ...props }) {
+export function Section({ surface = "background", spacing = "md", theme, variant = "base", brand, links, legal, layout = "columns", maxWidth = "xl", navLabel = "Footer", children, className, ...props }) {
     const pele = cx("section", surface !== "background" && `section-${surface}`, spacing !== "md" && `section-spacing-${spacing}`);
     if (variant !== "footer")
         return _jsx("section", { "data-theme": theme, className: cx(pele, className), ...props, children: children });
+    if (layout === "inline") {
+        const itens = (links ?? []).flatMap((g) => g.items);
+        return _jsx("footer", { "data-theme": theme, className: cx(pele, "section-footer", "section-footer-inline", className), ...props, children: _jsxs("div", { className: cx("container", maxWidth !== "xl" && `container-${maxWidth}`, "section-footer-line"), children: [legal != null && _jsx("p", { className: "section-footer-inline-legal", children: legal }), itens.length > 0 && _jsx("nav", { "aria-label": navLabel, children: _jsx("ul", { className: "section-footer-inline-links", children: itens.map(it => _jsx("li", { children: it.render
+                                    ? fundirRender(it.render, { className: "section-footer-link", children: it.label }, "a")
+                                    : _jsx("a", { className: "section-footer-link", href: it.href, children: it.label }) }, it.id)) }) }), children] }) });
+    }
     return _jsx("footer", { "data-theme": theme, className: cx(pele, "section-footer", className), ...props, children: _jsxs("div", { className: cx("container", maxWidth !== "xl" && `container-${maxWidth}`), children: [_jsxs("div", { className: "section-footer-top", children: [brand != null && _jsx("div", { className: "section-footer-brand", children: brand }), links && links.length > 0 && _jsx("nav", { className: "section-footer-nav", "aria-label": navLabel, children: links.map((g, n) => _jsxs("div", { className: "section-footer-group", children: [_jsx("h2", { className: "section-footer-title", children: g.title }), _jsx("ul", { className: "section-footer-links", children: g.items.map(it => _jsx("li", { children: it.render
                                                 ? fundirRender(it.render, { className: "section-footer-link", children: it.label }, "a")
                                                 : _jsx("a", { className: "section-footer-link", href: it.href, children: it.label }) }, it.id)) })] }, n)) }), children] }), legal != null && _jsx("div", { className: "section-footer-legal", children: legal })] }) });
@@ -104,16 +125,17 @@ export function Timeline({ items }) { return _jsx("ol", { className: "timeline",
 // `dangerouslySetInnerHTML` tem de SANITIZAR antes. A Aurea desenha o texto; ela não pode decidir
 // o que é seguro renderizar. Está dito na ficha, em voz alta.
 export function Prose({ className, ...props }) { return _jsx("div", { className: cx("prose", className), ...props }); }
-const tipografia = (tipo, { align, color, weight, truncate, numeric }, className) => cx("typography", `typography-${tipo}`, color === "muted" && "typography-muted", weight && `typography-weight-${weight}`, align && `typography-align-${align}`, truncate && "typography-truncate", numeric && "typography-numeric", className);
-export function Text({ type = "body", align, color, weight, truncate, numeric, className, ...props }) { return _jsx("span", { className: tipografia(type, { align, color, weight, truncate, numeric }, className), ...props }); }
+const tipografia = (tipo, { align, color, tone, weight, truncate, numeric }, className) => cx("typography", `typography-${tipo}`, (tone ?? color) === "muted" && "typography-muted", tone && tone !== "default" && tone !== "muted" && `typography-tone-${tone}`, weight && `typography-weight-${weight}`, align && `typography-align-${align}`, truncate && "typography-truncate", numeric && "typography-numeric", className);
+export function Text({ type = "body", align, color, tone, weight, truncate, numeric, className, ...props }) { return _jsx("span", { className: tipografia(type, { align, color, tone, weight, truncate, numeric }, className), ...props }); }
 // O nível decide o elemento E o tamanho, como na referência: um `h2` tem a cara de título 2.
-export function Heading({ level = 1, align, color, weight, truncate, numeric, className, ...props }) { const Tag = `h${level}`; return _jsx(Tag, { className: tipografia(`h${level}`, { align, color, weight, truncate, numeric }, className), ...props }); }
-export function Paragraph({ size = "base", align, color, weight, truncate, numeric, className, ...props }) { return _jsx("p", { className: tipografia(size === "base" ? "body" : `body-${size}`, { align, color, weight, truncate, numeric }, className), ...props }); }
-export function Code({ align, color, weight, truncate, className, ...props }) { return _jsx("code", { className: tipografia("code", { align, color, weight, truncate }, className), ...props }); }
+export function Heading({ level = 1, align, color, tone, weight, truncate, numeric, className, ...props }) { const Tag = `h${level}`; return _jsx(Tag, { className: tipografia(`h${level}`, { align, color, tone, weight, truncate, numeric }, className), ...props }); }
+export function Paragraph({ size = "base", align, color, tone, weight, truncate, numeric, className, ...props }) { return _jsx("p", { className: tipografia(size === "base" ? "body" : `body-${size}`, { align, color, tone, weight, truncate, numeric }, className), ...props }); }
+export function Code({ align, color, tone, weight, truncate, className, ...props }) { return _jsx("code", { className: tipografia("code", { align, color, tone, weight, truncate }, className), ...props }); }
 // `max` com `+` é o idioma universal do contador (três das referências o usam). Exportada porque quem
 // escreve o nome acessível precisa do MESMO texto — "99+ unread" tem de bater com o que se vê.
 export function formatBadgeCount(count, max = 99) { return count > max ? `${max}+` : String(count); }
-export function Badge({ variant = "neutral", emphasis = "soft", size = "md", dot, leading, trailing, image, imageAlt, count, max = 99, showZero, fit = "auto", anchor, anchorShape = "square", invisible, badgeContent, children, className, ...props }) {
+export function Badge({ variant: variantProp = "neutral", tone, emphasis = "soft", size = "md", dot, leading, trailing, image, imageAlt, count, max = 99, showZero, fit = "auto", anchor, anchorShape = "square", invisible, badgeContent, children, className, ...props }) {
+    const variant = tone ?? variantProp;
     const numero = count != null ? formatBadgeCount(count, max) : undefined;
     const miolo = anchor ? (numero ?? badgeContent) : (numero ?? children);
     // Ponto puro: `dot` sem nada para mostrar. Aí o badge não tem conteúdo, e ganha medida própria.
@@ -131,7 +153,7 @@ export function Badge({ variant = "neutral", emphasis = "soft", size = "md", dot
 // AN-07 (03/10/2026). Tudo novo é acréscimo: com `value` e sem `detail` nem `tone`, a marcação é a
 // de antes, mais a classe da caixa de fora. A anatomia é a da barra de progresso da referência: a
 // saída no alto à direita, o trilho embaixo, e sem `aria-valuenow` quando não há total.
-export function Progress({ value, label, detail, tone = "brand", className }) {
+export function Progress({ value, label, detail, tone = "brand", showLabel, showValue, size = "md", className }) {
     const semTotal = value == null || Number.isNaN(value);
     const pct = semTotal ? undefined : Math.max(0, Math.min(100, value));
     const temApoio = detail != null && detail !== false && detail !== "";
@@ -139,9 +161,14 @@ export function Progress({ value, label, detail, tone = "brand", className }) {
     // vezes. Apoio que não é texto (um ícone, um link) fica onde está, para o leitor achar sozinho.
     const emTexto = temApoio && (typeof detail === "string" || typeof detail === "number") ? String(detail) : undefined;
     const valuetext = emTexto == null ? undefined : pct == null ? emTexto : `${pct}%, ${emTexto}`;
-    return _jsxs("div", { className: cx("progress-field", className), children: [temApoio && _jsx("div", { className: "progress-detail", "aria-hidden": emTexto != null || undefined, children: detail }), _jsx("div", { className: cx("progress", semTotal && "progress-indeterminate", tone !== "brand" && `progress-tone-${tone}`), role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": pct, "aria-valuetext": valuetext, children: _jsx("span", { style: pct == null ? undefined : { width: `${pct}%` } }) })] });
+    // O rótulo à mostra sai do leitor de tela (`aria-hidden`): quem nomeia a barra continua o `aria-label`,
+    // com o mesmo texto — sem isso, o leitor o leria duas vezes. (Este arquivo não usa hook, então nada de
+    // id gerado para `aria-labelledby`.)
+    const rotuloVisivel = !!showLabel && !!label;
+    const valor = !temApoio && showValue && pct != null ? `${Math.round(pct)}%` : undefined;
+    return _jsxs("div", { className: cx("progress-field", className), children: [rotuloVisivel && _jsx("span", { className: "progress-label", "aria-hidden": "true", children: label }), temApoio && _jsx("div", { className: "progress-detail", "aria-hidden": emTexto != null || undefined, children: detail }), valor && _jsx("div", { className: "progress-detail", "aria-hidden": "true", children: valor }), _jsx("div", { className: cx("progress", semTotal && "progress-indeterminate", tone !== "brand" && `progress-tone-${tone}`, size !== "md" && `progress-${size}`), role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": pct, "aria-valuetext": valuetext, children: _jsx("span", { style: pct == null ? undefined : { width: `${pct}%` } }) })] });
 }
-export function Skeleton({ className, ...props }) { return _jsx("div", { className: cx("skeleton", className), "aria-hidden": "true", ...props }); }
+export function Skeleton({ animation = "pulse", className, ...props }) { return _jsx("div", { className: cx("skeleton", animation === "none" && "skeleton-static", className), "aria-hidden": "true", ...props }); }
 // ── Identity ─────────────────────────────────────────────────────────────────────────────────
 // `React.Children` não é hook — é utilitário de leitura de `children`, e roda no servidor.
 export function AvatarGroup({ children, max, total, label, size, className }) {
@@ -169,10 +196,10 @@ function linksDoHeader(items, current) {
             return _jsx("li", { children: it.render ? fundirRender(it.render, p, "a") : _jsx("a", { href: it.href, ...p }) }, it.id);
         }) });
 }
-export function Header({ variant = "floating", divider, brand, items, current, actions, maxWidth, navLabel = "Main", menuLabel = "Menu", menuId = "aurea-header-menu", children, className, ...props }) {
+export function Header({ variant = "floating", divider, brand, items, current, actions, maxWidth, itemsJustify = "end", size = "md", blurred, menuActions, navLabel = "Main", menuLabel = "Menu", menuId = "aurea-header-menu", children, className, ...props }) {
     const site = !!items && items.length > 0;
-    const miolo = _jsxs(_Fragment, { children: [brand != null && _jsx("div", { className: "brand", children: brand }), site && _jsx("nav", { className: "topbar-nav", "aria-label": navLabel, children: linksDoHeader(items, current) }), children, actions != null && _jsx("div", { className: "topbar-actions", children: actions }), site && _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "btn btn-ghost btn-icon topbar-menu-toggle", popoverTarget: menuId, "aria-label": menuLabel, children: _jsx("span", { className: "topbar-menu-icon", "aria-hidden": "true" }) }), _jsx("nav", { id: menuId, popover: "auto", className: "topbar-menu-panel", "aria-label": navLabel, children: linksDoHeader(items, current) })] })] });
-    return _jsx("header", { className: cx("topbar", `topbar-${variant}`, divider && variant === "flush" && "topbar-divider", site && "topbar-site", maxWidth && "topbar-contained", className), ...props, children: maxWidth ? _jsx("div", { className: cx("container", maxWidth !== "xl" && `container-${maxWidth}`, "topbar-inner"), children: miolo }) : miolo });
+    const miolo = _jsxs(_Fragment, { children: [brand != null && _jsx("div", { className: "brand", children: brand }), site && _jsx("nav", { className: "topbar-nav", "aria-label": navLabel, children: linksDoHeader(items, current) }), children, actions != null && _jsx("div", { className: "topbar-actions", children: actions }), site && _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "btn btn-ghost btn-icon topbar-menu-toggle", popoverTarget: menuId, "aria-label": menuLabel, children: _jsx("span", { className: "topbar-menu-icon", "aria-hidden": "true" }) }), _jsxs("nav", { id: menuId, popover: "auto", className: "topbar-menu-panel", "aria-label": navLabel, children: [linksDoHeader(items, current), menuActions != null && _jsx("div", { className: "topbar-menu-actions", children: menuActions })] })] })] });
+    return _jsx("header", { className: cx("topbar", `topbar-${variant}`, divider && variant === "flush" && "topbar-divider", site && "topbar-site", site && itemsJustify === "start" && "topbar-items-start", size === "sm" && "topbar-sm", blurred && variant === "flush" && "topbar-blurred", maxWidth && "topbar-contained", className), ...props, children: maxWidth ? _jsx("div", { className: cx("container", maxWidth !== "xl" && `container-${maxWidth}`, "topbar-inner"), children: miolo }) : miolo });
 }
 /** @deprecated `Topbar` é o nome antigo do `Header` (07/10/2026). Continua funcionando, igual; use `Header`. */
 export function Topbar(props) { return _jsx(Header, { ...props }); }
@@ -180,13 +207,25 @@ export function Topbar(props) { return _jsx(Header, { ...props }); }
 // Kbd — representação de tecla/atalho. <kbd> é o elemento HTML certo; a pele é nossa. Ele já
 // morava fora da casa dele (no `internal.tsx`, por causa do `Button`); agora mora aqui, pelo
 // mesmo motivo elevado a regra.
-export function Kbd({ children, className, ...props }) { return _jsx("kbd", { className: cx("kbd", className), ...props, children: children }); }
-export const Textarea = forwardRef(function Textarea({ className, size, ...props }, ref) { return _jsx("textarea", { ref: ref, className: cx("textarea", peleDoEixo("textarea", size), className), ...props }); });
+// 0.32.0: uma tecla de UM caractere ("K", "⌘", "/") sai redonda (`kbd-single`), e uma palavra
+// ("Esc", "Enter") em cápsula — o canto da Aurea sobre a medida da referência. Conta-se o que a
+// pessoa vê (`Array.from` não parte um emoji ao meio); conteúdo que não é texto fica em cápsula.
+const umCaractere = (c) => (typeof c === "string" || typeof c === "number") && Array.from(String(c).trim()).length === 1;
+export function Kbd({ children, className, ...props }) { return _jsx("kbd", { className: cx("kbd", umCaractere(children) && "kbd-single", className), ...props, children: children }); }
+export const Textarea = forwardRef(function Textarea({ className, size, variant, ...props }, ref) { return _jsx("textarea", { ref: ref, className: cx("textarea", peleDoEixo("textarea", size), variant === "secondary" && "textarea-secondary", className), ...props }); });
 // `size` nos três marcáveis pela mesma razão do campo: uma linha de formulário com um campo `sm`
 // e um checkbox de tamanho fixo ao lado desalinha. O degrau vai na MARCA, não no rótulo.
 export function Checkbox({ label, labelHidden, description, size, className, ...props }) { return _jsxs("label", { className: cx("checkbox", labelHidden && "checkbox-bare", className), children: [_jsx("input", { type: "checkbox", ...props }), _jsx("span", { className: cx("control-mark", peleDoEixo("control-mark", size)) }), _jsxs("span", { className: labelHidden ? "sr-only" : undefined, children: [_jsx("strong", { children: label }), description && _jsxs(_Fragment, { children: [_jsx("br", {}), _jsx("span", { className: "muted", children: description })] })] })] }); }
-export function Radio({ label, size, className, ...props }) { return _jsxs("label", { className: cx("radio", className), children: [_jsx("input", { type: "radio", ...props }), _jsx("span", { className: cx("control-mark", peleDoEixo("control-mark", size)) }), label] }); }
-export function Switch({ label, size, className, ...props }) { return _jsxs("label", { className: cx("switch", className), children: [_jsx("input", { type: "checkbox", role: "switch", ...props }), _jsx("span", { className: cx("switch-track", peleDoEixo("switch-track", size)) }), _jsx("span", { children: label })] }); }
+// `description` no `Radio` e no `Switch` (15/10/2026, a referência tem nos dois): a linha apagada embaixo do nome, do
+// mesmo jeito do `Checkbox`. Sem ela, a marcação é a de sempre.
+const comDescricao = (label, description) => description ? _jsxs("span", { children: [_jsx("strong", { children: label }), _jsx("br", {}), _jsx("span", { className: "muted", children: description })] }) : label;
+// `labelHidden` (15/10/2026) no `Radio` e no `Switch`, o mesmo do `Checkbox`: o nome sai da tela e fica para o leitor
+// de tela — a fileira de controles sem rótulo da vitrine da referência.
+export function Radio({ label, labelHidden, description, size, className, ...props }) { return _jsxs("label", { className: cx("radio", labelHidden && "radio-bare", className), children: [_jsx("input", { type: "radio", ...props }), _jsx("span", { className: cx("control-mark", peleDoEixo("control-mark", size)) }), labelHidden ? _jsx("span", { className: "sr-only", children: comDescricao(label, description) }) : comDescricao(label, description)] }); }
+// `indicatorPlacement` (15/10/2026, o Victor: "A sim"): a chave no FIM, como o "Allow notifications" da vitrine da
+// referência — o nome e a descrição à esquerda. O mesmo nome do `RadioGroup` do nativo. Muda só a ordem do DESENHO: o
+// campo escondido continua logo antes da chave (o CSS do estado depende disso), e o rótulo é um só para o leitor.
+export function Switch({ label, labelHidden, description, indicatorPlacement = "start", size, className, ...props }) { return _jsxs("label", { className: cx("switch", labelHidden && "switch-bare", indicatorPlacement === "end" && "switch-end", className), children: [_jsx("input", { type: "checkbox", role: "switch", ...props }), _jsx("span", { className: cx("switch-track", peleDoEixo("switch-track", size)) }), _jsx("span", { className: labelHidden ? "sr-only" : undefined, children: comDescricao(label, description) })] }); }
 export function Range({ orientation, className, ...props }) { return _jsx("input", { className: cx("range", peleDoEixo("range", orientation, "horizontal", "range"), className), type: "range", ...props }); }
 // `md` é a classe base — não existe `.input-md`, como não existe `.btn-md`. O prefixo é escrito
 // literal em cada chamada (`input-${size}`, e não `${base}-${size}`) porque é assim que o check 15
@@ -228,3 +267,34 @@ export function InputGroupAddon({ side = "start", layout = "inline", className,
 // escreve o `padding-top: 56.25%` de 2015, ou esquece o `min-width: 0` que impede a caixa de
 // estourar dentro de um grid.
 export function AspectRatio({ ratio = 1, className, style, ...props }) { return _jsx("div", { className: cx("aspect-ratio", className), style: { aspectRatio: ratio, ...style }, ...props }); }
+export function Link({ external, disabled, href, target, rel, className, children, ...props }) {
+    return _jsxs("a", { className: cx("link", className), href: disabled ? undefined : href, "aria-disabled": disabled || undefined, target: external ? target ?? "_blank" : target, rel: external ? rel ?? "noopener noreferrer" : rel, ...props, children: [children, external && _jsx("span", { className: "link-external", "aria-hidden": "true" })] });
+}
+// Transparente quando o texto diz alfa abaixo de 1 (hex de 4 ou 8 dígitos, `rgba()`, `hsla()`…). Cor de token ou
+// `oklch()` a marcação não lê: fica sem xadrez.
+const transparente = (cor) => { const c = parseColor(cor); return c !== null && c.a < 1; };
+export function ColorSwatch(props) {
+    if ("options" in props) {
+        const { options, name, label, value, defaultValue, onChange, layout = "grid", indicator, showLabels, size = "md", disabled, id, className } = props;
+        // O `onChange` é o do CONSUMIDOR, repassado, como no `Checkbox` e no `Radio` desta casa: nenhum manipulador nosso
+        // é escrito aqui (a marcação continua de servidor). Vai por espalhamento, como lá.
+        // `showLabels` (14/10/2026): o rótulo passa a ser a amostra E o nome embaixo — o círculo continua o mesmo
+        // (`.color-swatch-option`, agora um `span`), e clicar no nome também escolhe. O nome é só para os olhos: o leitor
+        // de tela já ouve o `aria-label` do botão de opção.
+        return _jsx("div", { role: "radiogroup", "aria-label": label, id: id, "aria-disabled": disabled || undefined, className: cx("color-swatch-picker", size !== "md" && `color-swatch-picker-${size}`, layout === "stack" && "color-swatch-picker-stack", showLabels && "color-swatch-picker-labels", className), children: options.map((o) => {
+                const op = typeof o === "string" ? { color: o } : o;
+                const cor = parseColor(op.color), rgb = cor && hsbToRgb(cor);
+                const circulo = (Tag, key) => _jsxs(Tag, { className: cx("color-swatch-option", rgb && contrastingInk(rgb) === "dark" && "color-swatch-option-dark"), style: { ["--color-swatch-current"]: op.color }, children: [_jsx("input", { type: "radio", className: "color-swatch-input", name: name, value: op.color, "aria-label": op.label ?? op.color, checked: value === undefined ? undefined : value === op.color, defaultChecked: value === undefined ? defaultValue === op.color : undefined, disabled: disabled || op.disabled, ...(onChange ? { onChange } : {}) }), _jsx("span", { className: cx("color-swatch", cor && cor.a < 1 && "color-swatch-alpha"), "aria-hidden": "true" }), indicator != null && _jsx("span", { className: "color-swatch-indicator", "aria-hidden": "true", children: indicator })] }, key);
+                return showLabels
+                    ? _jsxs("label", { className: "color-swatch-item", children: [circulo("span"), _jsx("span", { className: "color-swatch-name", "aria-hidden": "true", children: op.label ?? op.color })] }, op.color)
+                    : circulo("label", op.color);
+            }) });
+    }
+    const { color, size = "md", label, className, style, ...resto } = props;
+    return _jsx("span", { role: "img", "aria-label": label ?? color, className: cx("color-swatch", size !== "md" && `color-swatch-${size}`, transparente(color) && "color-swatch-alpha", className), style: { ...style, ["--color-swatch-current"]: color }, ...resto });
+}
+export function ProgressCircle({ value, min = 0, max = 100, size = "md", tone = "brand", label, className, ...props }) {
+    const semTotal = value == null || Number.isNaN(value);
+    const pct = semTotal ? 25 : Math.max(0, Math.min(100, (value - min) / (max - min) * 100));
+    return _jsx("div", { role: "progressbar", "aria-label": label, "aria-valuemin": semTotal ? undefined : min, "aria-valuemax": semTotal ? undefined : max, "aria-valuenow": semTotal ? undefined : value, className: cx("progress-circle", size !== "md" && `progress-circle-${size}`, tone !== "brand" && `progress-circle-${tone}`, semTotal && "progress-circle-indeterminate", className), ...props, children: _jsxs("svg", { viewBox: "0 0 36 36", "aria-hidden": "true", children: [_jsx("circle", { className: "progress-circle-track", cx: "18", cy: "18", r: "16" }), _jsx("circle", { className: "progress-circle-fill", cx: "18", cy: "18", r: "16", pathLength: 100, strokeDasharray: "100", strokeDashoffset: 100 - pct })] }) });
+}