@aurea-uds/native 0.8.4 → 0.8.6

package/dist/chart.js

@@ -169,27 +169,24 @@ export function Chart({ labels, series, label, mark = "line", height = ALTURA, y
         return d.trim();
     };
     const tocar = (i) => { setTocado(i); onSelect?.(i); };
-    return (_jsxs(View, { accessible: true, 
-        // ⚠ SEM papel: `group` não mapeia em plataforma nenhuma (ver o topo). `accessible` sozinho
-        // é o que agrupa de verdade no RN, e o rótulo é o que diz o que este bloco é.
-        accessibilityLabel: nome, style: [s.caixa, style], testID: testID, children: [_jsxs(View, { onLayout: (e) => setLargura(e.nativeEvent.layout.width), style: { height }, children: [largura > 0 ? (_jsxs(Svg, { width: largura, height: height, testID: testID ? `${testID}-svg` : undefined, children: [_jsx(G, { children: passos.map((v, i) => (_jsx(Line, { x1: CALHA.esquerda, y1: y(v), x2: largura - CALHA.direita, y2: y(v), stroke: t.color.border, strokeWidth: t.size.borderWidth }, `g${i}`))) }), _jsxs(G, { children: [passos.map((v, i) => (_jsx(SvgText, { x: CALHA.esquerda - 6, y: y(v) + 4, textAnchor: "end", fontSize: t.size.textXs, fontFamily: t.font.ui[400], fill: t.color.mutedForeground, children: formatValue(v) }, `ty${i}`))), labels.map((rotulo, i) => (_jsx(SvgText, { x: x(i), y: height - 6, textAnchor: "middle", fontSize: t.size.textXs, fontFamily: t.font.ui[400], fill: t.color.mutedForeground, children: rotulo }, `tx${i}`)))] }), series.map((serie, n) => {
-                                const marca = serie.mark ?? mark;
-                                const cor = cores[n];
-                                if (marca === "bar") {
-                                    // As barras de várias séries dividem a faixa, com 2dp de respiro entre elas — o
-                                    // vão é o que impede duas cores vizinhas de virarem um bloco só.
-                                    const barras = series.filter((z) => (z.mark ?? mark) === "bar").length;
-                                    const ordem = series.filter((z) => (z.mark ?? mark) === "bar").indexOf(serie);
-                                    const larguraBarra = Math.max(1, (faixa * 0.7) / barras - 2);
-                                    return (_jsx(G, { children: serie.data.map((v, i) => v == null ? null : (_jsx(Rect, { x: x(i) - (faixa * 0.7) / 2 + ordem * (larguraBarra + 2), y: Math.min(y(v), y(0)), width: larguraBarra, height: Math.max(1, Math.abs(y(v) - y(0))), 
-                                            // 4dp arredondado na ponta do dado, ancorado na base — a base fica reta.
-                                            rx: 4, fill: cor }, i))) }, n));
-                                }
-                                return (_jsxs(G, { children: [marca === "area" ? (_jsx(Path, { d: caminho(serie.data, true), fill: cor, fillOpacity: 0.15 })) : null, _jsx(Path, { d: caminho(serie.data, false), stroke: cor, strokeWidth: 2, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" })] }, n));
-                            }), selecionado != null && selecionado >= 0 && selecionado < labels.length ? (_jsxs(G, { children: [_jsx(Line, { x1: x(selecionado), y1: CALHA.topo, x2: x(selecionado), y2: CALHA.topo + areaA, stroke: t.color.borderStrong, strokeWidth: t.size.borderWidth }), series.map((serie, n) => {
-                                        const v = serie.data[selecionado];
-                                        return v == null ? null : (_jsx(Circle, { cx: x(selecionado), cy: y(v), r: 4, fill: cores[n], stroke: t.color.card, strokeWidth: 2 }, n));
-                                    })] })) : null] })) : null, largura > 0 ? (_jsx(View, { style: { position: "absolute", left: CALHA.esquerda, top: CALHA.topo,
+    return (_jsxs(View, { style: [s.caixa, style], testID: testID, children: [_jsxs(View, { onLayout: (e) => setLargura(e.nativeEvent.layout.width), style: { height }, children: [largura > 0 ? (_jsx(View, { accessible: true, accessibilityLabel: nome, children: _jsxs(Svg, { width: largura, height: height, testID: testID ? `${testID}-svg` : undefined, children: [_jsx(G, { children: passos.map((v, i) => (_jsx(Line, { x1: CALHA.esquerda, y1: y(v), x2: largura - CALHA.direita, y2: y(v), stroke: t.color.border, strokeWidth: t.size.borderWidth }, `g${i}`))) }), _jsxs(G, { children: [passos.map((v, i) => (_jsx(SvgText, { x: CALHA.esquerda - 6, y: y(v) + 4, textAnchor: "end", fontSize: t.size.textXs, fontFamily: t.font.ui[400], fill: t.color.mutedForeground, children: formatValue(v) }, `ty${i}`))), labels.map((rotulo, i) => (_jsx(SvgText, { x: x(i), y: height - 6, textAnchor: "middle", fontSize: t.size.textXs, fontFamily: t.font.ui[400], fill: t.color.mutedForeground, children: rotulo }, `tx${i}`)))] }), series.map((serie, n) => {
+                                    const marca = serie.mark ?? mark;
+                                    const cor = cores[n];
+                                    if (marca === "bar") {
+                                        // As barras de várias séries dividem a faixa, com 2dp de respiro entre elas — o
+                                        // vão é o que impede duas cores vizinhas de virarem um bloco só.
+                                        const barras = series.filter((z) => (z.mark ?? mark) === "bar").length;
+                                        const ordem = series.filter((z) => (z.mark ?? mark) === "bar").indexOf(serie);
+                                        const larguraBarra = Math.max(1, (faixa * 0.7) / barras - 2);
+                                        return (_jsx(G, { children: serie.data.map((v, i) => v == null ? null : (_jsx(Rect, { x: x(i) - (faixa * 0.7) / 2 + ordem * (larguraBarra + 2), y: Math.min(y(v), y(0)), width: larguraBarra, height: Math.max(1, Math.abs(y(v) - y(0))), 
+                                                // 4dp arredondado na ponta do dado, ancorado na base — a base fica reta.
+                                                rx: 4, fill: cor }, i))) }, n));
+                                    }
+                                    return (_jsxs(G, { children: [marca === "area" ? (_jsx(Path, { d: caminho(serie.data, true), fill: cor, fillOpacity: 0.15 })) : null, _jsx(Path, { d: caminho(serie.data, false), stroke: cor, strokeWidth: 2, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" })] }, n));
+                                }), selecionado != null && selecionado >= 0 && selecionado < labels.length ? (_jsxs(G, { children: [_jsx(Line, { x1: x(selecionado), y1: CALHA.topo, x2: x(selecionado), y2: CALHA.topo + areaA, stroke: t.color.borderStrong, strokeWidth: t.size.borderWidth }), series.map((serie, n) => {
+                                            const v = serie.data[selecionado];
+                                            return v == null ? null : (_jsx(Circle, { cx: x(selecionado), cy: y(v), r: 4, fill: cores[n], stroke: t.color.card, strokeWidth: 2 }, n));
+                                        })] })) : null] }) })) : null, largura > 0 ? (_jsx(View, { style: { position: "absolute", left: CALHA.esquerda, top: CALHA.topo,
                             width: areaL, height: areaA, flexDirection: "row" }, children: labels.map((rotulo, i) => (_jsx(Pressable, { onPress: () => tocar(i), accessibilityRole: "button", accessibilityState: { selected: selecionado === i }, accessibilityLabel: [
                                 rotulo,
                                 ...series.map((serie) => {

package/dist/display.d.ts

@@ -17,6 +17,19 @@ export interface BadgeProps extends ViewProps {
     size?: AureaBadgeSize;
     /** Um ponto antes do texto. Sozinho (sem conteúdo), o selo VIRA o ponto. */
     dot?: boolean;
+    /**
+     * Conteúdo antes do texto — na prática, um glifo (`<Icon name="checkmark" size="sm" />`).
+     *
+     * ⚠ **É NÓ e não nome de ícone, e a razão é a mesma da web** (`markup.tsx:126`): o `Icon` vive
+     * noutro módulo, e receber o nome obrigaria este arquivo a importá-lo — trazendo o registro de
+     * ícones ao grafo de todo app que só quer um selo. É a cláusula 4 da ADR-0038, e é o mesmo
+     * desenho que o `Button` ganhou na `0.8.3`.
+     *
+     * ⚠ **O slot NÃO tinge o que recebe.** Quem passa o glifo escolhe a cor dele.
+     */
+    leading?: React.ReactNode;
+    /** O mesmo, depois do texto. */
+    trailing?: React.ReactNode;
     count?: number;
     /** Acima disto o selo mostra `99+`. */
     max?: number;
@@ -45,7 +58,7 @@ export interface BadgeProps extends ViewProps {
  * usa selo com miniatura, e prop sem consumidor é superfície pública para manter de graça. Volta
  * quando houver tela que peça.
  */
-export declare function Badge({ tone, emphasis, size, dot, count, max, showZero, anchor, badgeContent, invisible, children, style, ...rest }: BadgeProps): React.JSX.Element;
+export declare function Badge({ tone, emphasis, size, dot, count, max, showZero, leading, trailing, anchor, badgeContent, invisible, children, style, ...rest }: BadgeProps): React.JSX.Element;
 export type AureaStatusVariant = "neutral" | "online" | "offline" | "busy" | "away" | "success" | "warning" | "danger" | "info";
 export interface StatusProps extends ViewProps {
     variant?: AureaStatusVariant;

package/dist/display.js

@@ -83,7 +83,7 @@ export const formatarContagem = (count, max = 99) => count > max ? `${max}+` : S
  * usa selo com miniatura, e prop sem consumidor é superfície pública para manter de graça. Volta
  * quando houver tela que peça.
  */
-export function Badge({ tone = "neutral", emphasis = "soft", size = "md", dot, count, max = 99, showZero, anchor, badgeContent, invisible, children, style, ...rest }) {
+export function Badge({ tone = "neutral", emphasis = "soft", size = "md", dot, count, max = 99, showZero, leading, trailing, anchor, badgeContent, invisible, children, style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
     const acento = tone === "primary" ? t.color.primaryEmphasis
@@ -119,9 +119,9 @@ export function Badge({ tone = "neutral", emphasis = "soft", size = "md", dot, c
                 backgroundColor: acento, borderWidth: 0 },
             style,
         ], ...(anchor ? { accessibilityElementsHidden: true,
-            importantForAccessibility: "no-hide-descendants" } : rest), children: [dot && !soPonto && _jsx(View, { style: [s.ponto, { backgroundColor: corDoTexto }] }), typeof miolo === "string" || typeof miolo === "number"
+            importantForAccessibility: "no-hide-descendants" } : rest), children: [dot && !soPonto && _jsx(View, { style: [s.ponto, { backgroundColor: corDoTexto }] }), !soPonto && leading, typeof miolo === "string" || typeof miolo === "number"
                 ? _jsx(Text, { size: size === "lg" ? "sm" : "xs", weight: 500, leading: "none", style: { color: corDoTexto }, children: miolo })
-                : miolo] }));
+                : miolo, !soPonto && trailing] }));
     if (!anchor)
         return selo;
     const escondido = invisible || (count === 0 && !showZero) || (miolo == null && !dot);

package/dist/estilos.d.ts

@@ -15,4 +15,19 @@ type NamedStyles<T> = {
     [P in keyof T]: ViewStyle | TextStyle | ImageStyle;
 };
 export declare function criarFolha<T extends NamedStyles<T> | NamedStyles<Record<string, unknown>>>(descrever: (t: AureaTokens) => T & NamedStyles<Record<string, unknown>>): (t: AureaTokens) => T;
+/**
+ * O `color-mix(in srgb, X 12%, transparent)` do CSS, traduzido.
+ *
+ * **Não há `color-mix` no React Native** — medido no interpretador de cor, o mesmo que a ADR-0027
+ * já tinha atravessado a pé. O que existe é hex de OITO dígitos, e `#RRGGBBAA` com o alfa certo
+ * dá o mesmo pixel sobre um fundo opaco. Cai para a cor crua se ela não for hex de seis, para
+ * nunca produzir uma string que o RN descarte em silêncio.
+ *
+ * ⚠ **Ele morava dentro do `navigation.tsx` e mudou de casa em 17/09/2026**, quando o
+ * `SegmentedControl` passou a precisar do mesmo cálculo para o fio do escolhido. Copiar a função
+ * para o segundo arquivo é exatamente o defeito que o `CLAUDE.md` nomeia — *correção local é
+ * proibida sem responder "quem mais tem esse problema?"*. **Não é exportado pela porta da frente
+ * do pacote**: é ferramenta de dentro, e o `check 39` cobraria teste de tudo que sai por lá.
+ */
+export declare const comOpacidade: (cor: string, pct: number) => string;
 export {};

package/dist/estilos.js

@@ -29,3 +29,20 @@ export function criarFolha(descrever) {
         return folha;
     };
 }
+/**
+ * O `color-mix(in srgb, X 12%, transparent)` do CSS, traduzido.
+ *
+ * **Não há `color-mix` no React Native** — medido no interpretador de cor, o mesmo que a ADR-0027
+ * já tinha atravessado a pé. O que existe é hex de OITO dígitos, e `#RRGGBBAA` com o alfa certo
+ * dá o mesmo pixel sobre um fundo opaco. Cai para a cor crua se ela não for hex de seis, para
+ * nunca produzir uma string que o RN descarte em silêncio.
+ *
+ * ⚠ **Ele morava dentro do `navigation.tsx` e mudou de casa em 17/09/2026**, quando o
+ * `SegmentedControl` passou a precisar do mesmo cálculo para o fio do escolhido. Copiar a função
+ * para o segundo arquivo é exatamente o defeito que o `CLAUDE.md` nomeia — *correção local é
+ * proibida sem responder "quem mais tem esse problema?"*. **Não é exportado pela porta da frente
+ * do pacote**: é ferramenta de dentro, e o `check 39` cobraria teste de tudo que sai por lá.
+ */
+export const comOpacidade = (cor, pct) => /^#[0-9a-fA-F]{6}$/.test(cor)
+    ? cor + Math.round(Math.max(0, Math.min(1, pct)) * 255).toString(16).padStart(2, "0")
+    : cor;

package/dist/feedback.d.ts

@@ -84,7 +84,7 @@ export interface AlertProps extends ViewProps {
  *     import InformationFilled from "@aurea-uds/native/icons/information--filled";
  *     const ICONES = criarRegistroDeIcones({"information--filled": InformationFilled, …});
  */
-export declare function Alert({ variant, state, title, icon, onDismiss, children, style, ...rest }: AlertProps): React.JSX.Element;
+export declare function Alert({ variant, state, title, icon, onDismiss, children, style, accessibilityLabel, accessibilityHint, ...rest }: AlertProps): React.JSX.Element;
 export interface EmptyStateProps {
     icon?: IconName;
     title: React.ReactNode;

package/dist/feedback.js

@@ -53,6 +53,14 @@ const folha = criarFolha((t) => ({
         borderWidth: t.size.borderWidth, borderRadius: t.size.radiusLg,
         backgroundColor: t.color.secondary, borderColor: t.color.border,
     },
+    // O GRUPO de leitura: ícone + texto, lidos como uma coisa só. Ele existe porque a moldura
+    // deixou de ser `accessible` (ver o comentário no componente) — e sem um grupo o título e o
+    // corpo virariam duas paradas separadas do leitor de tela.
+    // Nenhuma medida nova: `flex`, `minWidth` e o MESMO `gap` da moldura. O "X" fica de fora.
+    grupoDoAlerta: {
+        flex: 1, minWidth: 0,
+        flexDirection: "row", alignItems: "flex-start", gap: t.size.space3,
+    },
     alerta_info: { backgroundColor: t.color.infoBg, borderColor: t.color.info },
     alerta_success: { backgroundColor: t.color.successBg, borderColor: t.color.success },
     alerta_warning: { backgroundColor: t.color.warningBg, borderColor: t.color.warning },
@@ -176,7 +184,11 @@ export const ICONE_DA_VARIANTE = {
  *     import InformationFilled from "@aurea-uds/native/icons/information--filled";
  *     const ICONES = criarRegistroDeIcones({"information--filled": InformationFilled, …});
  */
-export function Alert({ variant, state, title, icon, onDismiss, children, style, ...rest }) {
+export function Alert({ variant, state, title, icon, onDismiss, children, style, 
+// 🔴 ESTES DOIS SAEM DO RESTO DE PROPÓSITO, e é consequência do conserto abaixo: a moldura
+// deixou de ser elemento de acessibilidade, e rótulo em quem não é elemento **não faz nada no
+// iOS**. Eles pousam no GRUPO, que é quem o leitor de tela alcança.
+accessibilityLabel, accessibilityHint, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
     const strings = useAureaStrings();
@@ -185,11 +197,15 @@ export function Alert({ variant, state, title, icon, onDismiss, children, style,
         : v === "warning" ? t.color.warning
             : v === "danger" ? (t.color.danger400 ?? t.color.destructive)
                 : t.color.info;
-    return (_jsxs(View, { accessible: true, ...(v === "danger" ? { accessibilityRole: "alert" } : null), 
-        // No Android o papel sozinho não faz o leitor falar sem foco; a região viva faz.
-        accessibilityLiveRegion: v === "danger" ? "assertive" : "polite", style: [s.alerta, s[`alerta_${v}`], style], ...rest, children: [_jsx(Icon, { name: icon ?? ICONE_DA_VARIANTE[v], size: "md", color: corDoIcone }), _jsxs(View, { style: s.corpoDoAlerta, children: [title != null && _jsx(Text, { size: "sm", weight: 600, children: title }), children != null
-                        ? (typeof children === "string" ? _jsx(Text, { size: "sm", tone: "muted", children: children }) : children)
-                        : state ? _jsx(Text, { size: "sm", tone: "muted", children: strings.universalState[state] }) : null] }), onDismiss ? _jsx(IconButton, { appearance: "ghost", size: "sm", name: "close", label: strings.close, onPress: onDismiss }) : null] }));
+    return (_jsxs(View
+    // Android: a região viva é o que faz o leitor falar sem foco, e ela cobre a moldura
+    // inteira de propósito — o que muda é o conteúdo, e o "X" some junto quando o aviso fecha.
+    , { 
+        // Android: a região viva é o que faz o leitor falar sem foco, e ela cobre a moldura
+        // inteira de propósito — o que muda é o conteúdo, e o "X" some junto quando o aviso fecha.
+        accessibilityLiveRegion: v === "danger" ? "assertive" : "polite", style: [s.alerta, s[`alerta_${v}`], style], ...rest, children: [_jsxs(View, { accessible: true, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, ...(v === "danger" ? { accessibilityRole: "alert" } : null), style: s.grupoDoAlerta, children: [_jsx(Icon, { name: icon ?? ICONE_DA_VARIANTE[v], size: "md", color: corDoIcone }), _jsxs(View, { style: s.corpoDoAlerta, children: [title != null && _jsx(Text, { size: "sm", weight: 600, children: title }), children != null
+                                ? (typeof children === "string" ? _jsx(Text, { size: "sm", tone: "muted", children: children }) : children)
+                                : state ? _jsx(Text, { size: "sm", tone: "muted", children: strings.universalState[state] }) : null] })] }), onDismiss ? _jsx(IconButton, { appearance: "ghost", size: "sm", name: "close", label: strings.close, onPress: onDismiss }) : null] }));
 }
 /**
  * O nada, dito com jeito.

package/dist/index.d.ts

@@ -21,8 +21,8 @@ export { useAureaStrings } from "./theme.js";
 export { defaultStrings, ptBR, gravidadeDoEstado, AUREA_UNIVERSAL_STATES } from "./strings.js";
 export type { AureaStrings, AureaUniversalState } from "./strings.js";
 export { useReduceMotion } from "./movimento.js";
-export { BottomNav, Topbar, NavList, Stepper } from "./navigation.js";
-export type { BottomNavProps, TopbarProps, NavListProps, StepperProps, AureaNavItem, AureaNavListItem, AureaStepItem, AureaStepState, AureaBottomNavVariant, AureaBottomNavIndicator, AureaTopbarVariant, } from "./navigation.js";
+export { BottomNav, Topbar, NavList, Stepper, Tabs } from "./navigation.js";
+export type { BottomNavProps, TopbarProps, NavListProps, StepperProps, AureaNavItem, AureaNavListItem, AureaStepItem, AureaStepState, AureaBottomNavVariant, AureaBottomNavIndicator, AureaTopbarVariant, TabsProps, AureaTabItem, } from "./navigation.js";
 export { Field, Label, Input, Textarea, Select, Switch, Checkbox, Radio, SegmentedControl, Form, KeyboardAvoiding, useCampo, } from "./inputs.js";
 export type { FieldProps, LabelProps, InputProps, TextareaProps, SelectProps, SwitchProps, CheckboxProps, RadioProps, SegmentedControlProps, FormProps, KeyboardAvoidingProps, AureaFieldSize, } from "./inputs.js";
 export { InputGroup, InputGroupAddon, PasswordField, useGrupoDeCampo } from "./inputs.js";

package/dist/index.js

@@ -48,7 +48,10 @@ export { useReduceMotion } from "./movimento.js";
 // ── Lote 3 — a moldura de navegação ────────────────────────────────────────────────────────
 // ⚠ A Aurea **não entrega roteamento**. Estes componentes recebem `items` e `current` e avisam
 // por `onPress`; quem troca de tela é o app.
-export { BottomNav, Topbar, NavList, Stepper } from "./navigation.js";
+// ⚠ **O `Tabs` entrou em 17/09/2026, e é a única peça daqui que NÃO saiu de um lote** — ele
+// veio do consumidor, que precisava trocar de painel dentro de uma tela e só tinha o
+// `SegmentedControl`, que anuncia "rádio". A fronteira com o `BottomNav` está no JSDoc dele.
+export { BottomNav, Topbar, NavList, Stepper, Tabs } from "./navigation.js";
 // ── Lote 4 — os formulários ────────────────────────────────────────────────────────────────
 // ⚠ O `Field` NÃO nomeia o controle por referência, como o `<label for>` da web: ele empurra o
 // nome, a dica e o estado de inválido para o controle por CONTEXTO. É a tradução que decidiu o

package/dist/inputs.d.ts

@@ -234,7 +234,16 @@ export declare function Checkbox(p: CheckboxProps): React.JSX.Element;
  * estado do app — quem sabe qual está escolhido é o `useState` da tela, e `checked` sai dele.
  */
 export declare function Radio(p: RadioProps): React.JSX.Element;
-export interface SwitchProps extends Omit<ControleProps, "description"> {
+/**
+ * ⚠ **Ele TIRAVA a `description`, e passou a aceitá-la em 17/09/2026** — pedido do consumidor
+ * (uma linha de explicação embaixo de "Desbloqueio por digital", no Perfil).
+ *
+ * ⚠ **E isto é uma frente em que o nativo vai ADIANTE da web, não atrás — declarado, não
+ * escondido.** Medido em `packages/react/src/markup.tsx`: lá o `Checkbox` tem `description`, o
+ * `Radio` **não**, e o `Switch` **não**. Aqui os três têm. A dívida passa a ser da web, e quem
+ * mexer nela deve fechar a diferença em vez de reabrir esta.
+ */
+export interface SwitchProps extends ControleProps {
 }
 /**
  * O interruptor.
@@ -247,7 +256,7 @@ export interface SwitchProps extends Omit<ControleProps, "description"> {
  * ⚠ **E ele respeita "menos movimento"**: com a preferência ligada, o polegar salta em vez de
  * deslizar. O estado continua o mesmo — o que some é a animação, não a informação.
  */
-export declare function Switch({ label, checked, onChange, disabled, size, style, testID }: SwitchProps): React.JSX.Element;
+export declare function Switch({ label, description, checked, onChange, disabled, size, style, testID, }: SwitchProps): React.JSX.Element;
 export interface SegmentedControlProps extends ViewProps {
     items: Array<{
         value: string;

package/dist/inputs.js

@@ -39,7 +39,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 //   .segmented     :922            linha, gap 3, padding 3, minH controlHMd, fundo muted
 import * as React from "react";
 import { Animated, KeyboardAvoidingView as KeyboardAvoidingViewRN, Modal, Platform, Pressable, ScrollView, TextInput, View, } from "react-native";
-import { criarFolha } from "./estilos.js";
+import { comOpacidade, criarFolha } from "./estilos.js";
+import { FilaRolante } from "./rolagem.js";
 import { IconButton } from "./actions.js";
 import { Icon } from "./icon.js";
 import { useReduceMotion } from "./movimento.js";
@@ -94,6 +95,20 @@ const folha = criarFolha((t) => ({
     segmento: { flex: 1, alignItems: "center", justifyContent: "center",
         paddingHorizontal: 14, borderRadius: t.size.radiusControl },
     segmentoAtivo: { backgroundColor: t.color.secondary },
+    // 🔴 O FIO AMARELO DO ESCOLHIDO — ele faltava, e a falta era metade do defeito C4.
+    // O `aurea.css:958-960` põe este fio em TODOS os selecionados da casa (`.is-selected`, aba
+    // ativa, botão alternado e `.segmented button.active`), e o bloco de comentário acima dele
+    // diz por quê, com data: *"Item de nav ativo, aba ativa, item de lista lateral e botão
+    // alternado ligado mostram o MESMO sinal (…) Um usuário aprende uma vez e reconhece em todo
+    // lugar (pedido do Victor, 24/07)."*
+    // Os três números saem daquela linha, não de mim: altura 2 (fração de pixel borra), recuo 15,
+    // e o amarelo a 75% (cheio ele grita mais que o próprio rótulo).
+    // ⚠ Em segmento estreito o recuo de 15 de cada lado zera a largura e o fio some — **e é o
+    // mesmo comportamento da web**, onde `inset-inline:15px` num box estreito não desenha nada.
+    fioDoSegmento: {
+        position: "absolute", left: 15, right: 15, bottom: 0, height: 2,
+        borderRadius: t.size.radiusFull, backgroundColor: comOpacidade(t.color.primary, 0.75),
+    },
     formulario: { gap: t.size.space5 },
     // A folha do `Select`: no RN não existe `<select>`, então a lista é um `Modal` — que é
     // exatamente o "motor novo sobre `Modal`" que a §5.2.4 previu.
@@ -348,7 +363,7 @@ export function Radio(p) { return _jsx(ControleMarcado, { ...p, papel: "radio" }
  * ⚠ **E ele respeita "menos movimento"**: com a preferência ligada, o polegar salta em vez de
  * deslizar. O estado continua o mesmo — o que some é a animação, não a informação.
  */
-export function Switch({ label, checked, onChange, disabled, size, style, testID }) {
+export function Switch({ label, description, checked, onChange, disabled, size, style, testID, }) {
     const t = useAureaTokens();
     const s = folha(t);
     const campo = useCampo();
@@ -373,7 +388,10 @@ export function Switch({ label, checked, onChange, disabled, size, style, testID
         a.start();
         return () => a.stop();
     }, [checked, pos, reduzir]);
-    return (_jsxs(Pressable, { testID: testID, onPress: inativo ? undefined : () => onChange?.(!checked), disabled: inativo, accessibilityRole: "switch", accessibilityState: { checked: !!checked, disabled: !!inativo }, accessibilityLabel: typeof label === "string" ? label : campo?.label, style: [{ flexDirection: "row", alignItems: "center", gap: 10 }, inativo && s.desabilitado, style], children: [_jsx(View, { style: [
+    return (_jsxs(Pressable, { testID: testID, onPress: inativo ? undefined : () => onChange?.(!checked), disabled: inativo, accessibilityRole: "switch", accessibilityState: { checked: !!checked, disabled: !!inativo }, accessibilityLabel: typeof label === "string" ? label : campo?.label, 
+        // Mesma regra do `ControleMarcado`: a descrição vira DICA quando é texto. Sem isto ela
+        // desenha na tela e não existe para quem usa leitor de tela.
+        accessibilityHint: typeof description === "string" ? description : campo?.hint, style: [{ flexDirection: "row", alignItems: "center", gap: 10 }, inativo && s.desabilitado, style], children: [_jsx(View, { style: [
                     s.trilho,
                     { width: larguraDoTrilho, height: alturaDoTrilho },
                     checked && { backgroundColor: t.color.controlSelected, borderColor: t.color.controlSelected },
@@ -382,7 +400,8 @@ export function Switch({ label, checked, onChange, disabled, size, style, testID
                         { width: ladoDoPolegar, height: ladoDoPolegar,
                             backgroundColor: checked ? t.color.controlSelectedForeground : t.color.mutedForeground,
                             transform: [{ translateX: pos.interpolate({ inputRange: [0, 1], outputRange: [0, curso] }) }] },
-                    ] }) }), typeof label === "string" ? _jsx(Text, { size: "sm", children: label }) : label] }));
+                    ] }) }), _jsxs(View, { style: { flex: 1 }, children: [typeof label === "string" ? _jsx(Text, { size: "sm", children: label }) : label, description != null && (typeof description === "string"
+                        ? _jsx(Text, { size: "xs", tone: "muted", children: description }) : description)] })] }));
 }
 /**
  * Um de poucos, lado a lado.
@@ -397,12 +416,30 @@ export function SegmentedControl({ items, value, onChange, label, disabled, styl
     const s = folha(t);
     const campo = useCampo();
     const inativo = disabled ?? campo?.disabled;
-    return (_jsx(View, { accessibilityRole: "radiogroup", accessibilityLabel: label ?? campo?.label, style: [s.segmentada, inativo && s.desabilitado, style], ...rest, children: items.map((it) => {
-            const ativo = it.value === value;
-            return (_jsx(Pressable, { onPress: inativo ? undefined : () => onChange?.(it.value), disabled: inativo, accessibilityRole: "radio", accessibilityState: { checked: ativo, disabled: !!inativo }, accessibilityLabel: typeof it.label === "string" ? it.label : undefined, style: [s.segmento, ativo && s.segmentoAtivo], children: typeof it.label === "string"
-                    ? _jsx(Text, { size: "sm", weight: ativo ? 600 : 400, style: { color: ativo ? t.color.foreground : t.color.mutedForeground }, children: it.label })
-                    : it.label }, it.value));
-        }) }));
+    return (_jsx(FilaRolante, { children: _jsx(View, { accessibilityRole: "radiogroup", accessibilityLabel: label ?? campo?.label, style: [s.segmentada, inativo && s.desabilitado, style], ...rest, children: items.map((it) => {
+                const ativo = it.value === value;
+                return (_jsxs(Pressable, { onPress: inativo ? undefined : () => onChange?.(it.value), disabled: inativo, accessibilityRole: "radio", accessibilityState: { checked: ativo, disabled: !!inativo }, accessibilityLabel: typeof it.label === "string" ? it.label : undefined, style: [s.segmento, ativo && s.segmentoAtivo], children: [typeof it.label === "string"
+                            ? _jsx(Text, { size: "sm", weight: ativo ? 600 : 400, 
+                                // 🔴 ERA `foreground`, E ISSO QUEBRAVA A LINGUAGEM DE SELECIONADO.
+                                // Achado pelo consumidor em 17/09/2026. A web pinta o escolhido com a
+                                // MARCA (`aurea.css:937-938`), e o comentário de cima daquela regra diz
+                                // que nav ativo, aba ativa, item de lista e botão ligado mostram o mesmo
+                                // sinal — ordem do Victor, 24/07. O `SegmentedControl` daqui discordava
+                                // da web **e do `BottomNav` deste mesmo pacote**, que já usa este token.
+                                //
+                                // ⚠ **`primaryEmphasis` e NÃO `primary`, e a razão está no CSS:** *"sem
+                                // fundo, a marca vira TEXTO, e o amarelo puro"* não se lê no claro
+                                // (`aurea.css:358`). É a mesma lição que a `0.8.3` pagou no `Button`.
+                                // No escuro os dois valem o mesmo amarelo; no claro este aprofunda.
+                                //
+                                // ⚠ **Uma divergência declarada, não escondida:** para o `.segmented` a
+                                // web usa uma mistura própria (`primary 45% + foreground`) em vez do
+                                // token, enquanto para o `.bottom-nav` usa o token. São dois âmbares
+                                // parecidos para a MESMA linguagem, e isso é incoerência DA WEB. Escolhi
+                                // o token, que deixa os dois componentes daqui iguais entre si.
+                                style: { color: ativo ? t.color.primaryEmphasis : t.color.mutedForeground }, children: it.label })
+                            : it.label, ativo && _jsx(View, { style: s.fioDoSegmento })] }, it.value));
+            }) }) }));
 }
 /**
  * A escolha de um de muitos.

package/dist/layout.d.ts

@@ -55,11 +55,34 @@ export interface SeparatorProps extends ViewProps {
  * comportamento certo.
  */
 export declare function Separator({ orientation, label, style, ...rest }: SeparatorProps): React.JSX.Element;
-export type AureaCardVariant = "base" | "raised" | "interactive" | "inset" | "selected" | "danger";
-export interface CardProps extends ViewProps {
-    variant?: AureaCardVariant;
+export type AureaCardVariant = "base" | "raised" | "interactive" | "inset" | "selected" | "danger" | "brand";
+interface CardBase extends ViewProps {
     children?: React.ReactNode;
 }
+/**
+ * 🔴 **O `brand` EXIGE `action`, e isso é de propósito — a regra é do TIPO, não de documento.**
+ *
+ * O cartão na cor da marca entrou em 17/09/2026 e é a **primeira superfície grande preenchida
+ * com o amarelo** neste sistema. Até aqui ele só pintava coisa pequena: o ponto do contador, a
+ * pílula do passo atual, o link de pular para o conteúdo. Um cartão amarelo é precedente, e
+ * precedente sem trava vira decoração — outras telas pedem o mesmo e o amarelo deixa de
+ * significar "aja aqui".
+ *
+ * A regra combinada foi *"o cartão amarelo é só para pedir uma ação da pessoa"*. **Escrita num
+ * documento, ela apagaria** — este repositório tem registro disso em cada arquivo, e a §"Afirmação
+ * velha" do `CLAUDE.md` existe por causa desse desgaste. Então ela mora no tipo: sem `action`, o
+ * `brand` não compila. É a mesma escolha que faz o `label` do `IconButton` ser obrigatório.
+ */
+interface CardDaMarca extends CardBase {
+    variant: "brand";
+    /** O que a pessoa faz aqui — um `Button`, um `IconButton`, um campo. Sem isto não compila. */
+    action: React.ReactNode;
+}
+interface CardComum extends CardBase {
+    variant?: Exclude<AureaCardVariant, "brand">;
+    action?: never;
+}
+export type CardProps = CardDaMarca | CardComum;
 /**
  * Superfície flutuante, raio 22 (`--radius-card`) — identidade declarada INTOCÁVEL.
  *
@@ -69,3 +92,4 @@ export interface CardProps extends ViewProps {
  * que É um alvo — quem o torna tocável é a tela.
  */
 export declare function Card({ variant, style, ...rest }: CardProps): React.JSX.Element;
+export {};

package/dist/layout.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Aurea nativo — os primitivos de layout: `Stack`, `Cluster`, `Grid`, `Card`.
 //
 // Medidos no core da web antes de escrever (passo 1 do BUILDING.md), e o que eles são lá:
@@ -19,7 +19,7 @@ import { View } from "react-native";
 // `...rest` sem nada a mais.
 import { criarFolha } from "./estilos.js";
 import { Text } from "./text.js";
-import { useAureaTokens } from "./theme.js";
+import { useAureaTokens, SobreAMarca } from "./theme.js";
 const folha = criarFolha((t) => ({
     // A LINHA DO SISTEMA, e os números são os mesmos do `.separator` da web (`aurea.css`): cor de
     // `border` e espessura de UM pixel. ⚠ Um pixel não sai de `--space-*` de propósito — a linha
@@ -52,6 +52,11 @@ const folha = criarFolha((t) => ({
     card_inset: { backgroundColor: t.color.surfaceInset, borderColor: "transparent" },
     card_selected: { borderColor: t.color.primaryOutline, backgroundColor: t.color.surface2 },
     card_danger: { borderColor: t.color.danger400 ?? t.color.destructive, backgroundColor: t.color.dangerBg },
+    // O amarelo é o DE PREENCHER — `primary`, o mesmo do botão sólido. A borda some: uma superfície
+    // cheia não precisa de contorno, e um contorno sobre o amarelo mede 2,43 no claro (invisível).
+    card_brand: { backgroundColor: t.color.primary, borderColor: "transparent" },
+    // A ação fica embaixo, separada pelo mesmo respiro que o resto da casa usa entre blocos.
+    acaoDaMarca: { marginTop: t.size.space3 },
 }));
 /** Coluna com `--space-4` entre os filhos. **Sem prop de espaçamento, de propósito.** */
 export function Stack({ style, ...rest }) {
@@ -112,6 +117,24 @@ export function Separator({ orientation = "horizontal", label, style, ...rest })
  * que É um alvo — quem o torna tocável é a tela.
  */
 export function Card({ variant = "base", style, ...rest }) {
-    const s = folha(useAureaTokens());
-    return _jsx(View, { style: [s.cardBase, s[`card_${variant}`], style], ...rest });
+    const t = useAureaTokens();
+    const s = folha(t);
+    const { action, children, ...resto } = rest;
+    const corpo = (_jsxs(_Fragment, { children: [children, action != null && _jsx(View, { style: s.acaoDaMarca, children: action })] }));
+    const pele = _jsx(View, { style: [s.cardBase, s[`card_${variant}`], style], ...resto, children: corpo });
+    // 🔴 SOBRE O AMARELO A COR DO TEXTO NÃO É ESCOLHA, É OBRIGAÇÃO — e os números decidiram isto.
+    // Medido nos dois temas, texto contra o `primary`:
+    //     texto comum ........ 10,34 no claro  ·  **1,83 no escuro**  🔴 ilegível
+    //     texto esmaecido .....  4,24 no claro  ·  **1,35 no escuro**  🔴 ilegível
+    //     primary-foreground ..  4,54 nos DOIS                          ✅ único que serve
+    // Sem forçar, o cartão da marca sairia quebrado no tema escuro **sem ninguém ver no claro**.
+    // ⚠ **E no RN não há cascata de cor**: `color` num `View` não desce para o `Text` de dentro.
+    // A saída é CONTEXTO — a mesma decisão que o `Field` do Lote 4 tomou para empurrar nome e dica.
+    //
+    // ⚠ **Consequência declarada: sobre o amarelo existe UMA cor de texto, não duas.** O tom
+    // `muted` mede 1,35 no escuro, então ele não pode sobreviver aqui. A hierarquia dentro deste
+    // cartão sai de PESO e TAMANHO, não de cor — e isso é restrição do contraste, não gosto.
+    return variant === "brand"
+        ? _jsx(SobreAMarca.Provider, { value: t.color.primaryForeground, children: pele })
+        : pele;
 }

package/dist/navigation.d.ts

@@ -133,3 +133,51 @@ export interface StepperProps extends ViewProps {
  * vocabulário — é o vocabulário que existe, e dizer isso é melhor que fingir paridade.
  */
 export declare function Stepper({ items, label, doneIcon, errorIcon, style, ...rest }: StepperProps): React.JSX.Element;
+export interface AureaTabItem {
+    id: string;
+    label: React.ReactNode;
+    content: React.ReactNode;
+    disabled?: boolean;
+}
+export interface TabsProps extends ViewProps {
+    tabs: AureaTabItem[];
+    /** O `id` da aba aberta. Controlado — quem guarda o estado é o consumidor, como na web. */
+    value: string;
+    onChange?: (id: string) => void;
+    /** Nome da fila de abas para o leitor de tela. */
+    label?: string;
+}
+/**
+ * As abas DENTRO da tela — trocar o painel, não trocar de página.
+ *
+ * ⚠ **E essa frase é a fronteira com o `BottomNav`, que o Lote 3 quase errou ao contrário.** Lá
+ * a ficha da web proíbe `tab` com a razão pronta — *"a tab swaps a panel inside the page, a
+ * bottom bar changes page"* —, e há um teste cujo único trabalho é reprovar essa palavra na barra
+ * de baixo. **Aqui é o caso certo**, então `tablist`/`tab` são os papéis honestos.
+ * Medido antes de escrever: os dois estão no tipo do RN **e** no enum Kotlin
+ * (`ReactAccessibilityDelegate.kt:368,370`), que é a interseção que o `check 41` cobra.
+ *
+ * ⚠ **A fila ROLA na horizontal, e a web não rola — divergência deliberada, com fonte.** A
+ * referência máxima de desenho deste projeto tem estados de rolagem na lista de abas
+ * (`left-scroll`, `right-scroll`, `left-right-scroll` no inventário), e num telefone de 360dp
+ * quatro rótulos já não cabem. Espremer todas seria a outra saída, e ela apaga o rótulo — que é
+ * o defeito que o app mediu no `SegmentedControl`. **A cápsula, o respiro e o raio continuam
+ * sendo os do CSS**; o que muda é o transbordo.
+ *
+ * ⚠ **O painel inativo NÃO fica montado.** Na web o motor mantém os painéis no DOM e esconde;
+ * aqui montar todos custaria memória e um painel com lista longa pagaria por telas que ninguém
+ * está vendo. **A consequência está declarada e não é neutra:** o estado interno de um painel
+ * (rolagem, texto digitado) **se perde** ao trocar de aba. Quem precisar do contrário guarda o
+ * estado fora, como já faz com `value`.
+ *
+ * ⚠ **A aba escolhida NÃO usa a cor da marca, e isso é de propósito.** O `.tab.active` da web é
+ * `--foreground` sobre `--secondary`, e ele **desliga o fio amarelo**
+ * (`aurea.css:1128`, `:after { display:none }`) que o `.segmented` recebe. São dois sinais
+ * diferentes para duas coisas diferentes: escolher um valor é uma coisa, trocar de painel é
+ * outra. **Não "harmonize" isto com o `SegmentedControl`** — a diferença foi escrita à mão lá.
+ *
+ * ⚠ **Sem orientação VERTICAL.** A web tem (`aurea.css:1122-1126`), e ela resolve um problema de
+ * largura de tela grande. Não há tablet medido neste projeto, e no nativo vale demanda antes de
+ * cobertura — a mesma decisão da `Table` do Lote 6.
+ */
+export declare function Tabs({ tabs, value, onChange, label, style, ...rest }: TabsProps): React.JSX.Element;

package/dist/navigation.js

@@ -1,9 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Pressable, View, } from "react-native";
+import { Pressable, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Badge } from "./display.js";
-import { criarFolha } from "./estilos.js";
+import { comOpacidade, criarFolha } from "./estilos.js";
 import { Icon } from "./icon.js";
+import { Card } from "./layout.js";
+import { FilaRolante } from "./rolagem.js";
 import { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens } from "./theme.js";
 const folha = criarFolha((t) => ({
@@ -62,7 +64,32 @@ const folha = criarFolha((t) => ({
         paddingVertical: t.size.space2, paddingHorizontal: t.size.space3,
         borderRadius: t.size.radiusCard - t.size.space1,
     },
+    // O MIOLO da linha: ícone + texto (+ valor em texto) + seta. Ele é quem toca; o que vem
+    // depois dele, na moldura, é IRMÃO — ver o comentário no componente.
+    // Nenhuma medida nova: `flex`, `minWidth` e o MESMO `gap` da moldura.
+    linhaMiolo: { flex: 1, minWidth: 0, flexDirection: "row", alignItems: "center", gap: t.size.space3 },
     linhaTexto: { flex: 1, minWidth: 0 },
+    // ── Tabs ───────────────────────────────────────────────────────────────────────────────────
+    // A cápsula é a MESMA do `SegmentedControl`, e o CSS diz isso em voz alta no comentário de
+    // cima do `.tabs` (`aurea.css:1114`): *"Mesma regra da .segmented"*. Os três números vêm de
+    // lá — `gap:3px; padding:3px` — e não de mim.
+    abas: {
+        flexDirection: "row", gap: 3, padding: 3,
+        minHeight: t.size.controlHMd, borderRadius: t.size.radiusControl,
+        backgroundColor: t.color.muted,
+    },
+    // `padding:0 14px` é literal no `.tab` (`aurea.css:1127`). A aba NÃO estica (nada de `flex`):
+    // na web ela é conteúdo dentro de um `inline-flex`, e é isso que deixa a lista rolar quando
+    // não cabe, em vez de espremer todas.
+    // ⚠ O nome é `abaDeTab` porque `aba` JÁ EXISTE neste arquivo — é o item do `BottomNav`
+    // (linha 78), que tem `flex: 1` e cresce. Reusar o nome teria sobrescrito um dos dois em
+    // silêncio, e o `tsc` só pegou porque são chaves do mesmo objeto.
+    abaDeTab: {
+        alignItems: "center", justifyContent: "center",
+        paddingHorizontal: 14, borderRadius: t.size.radiusControl,
+    },
+    abaDeTabAtiva: { backgroundColor: t.color.secondary },
+    painel: { marginTop: t.size.space3 },
     // ── Stepper ────────────────────────────────────────────────────────────────────────────────
     trilha: { flexDirection: "row" },
     passo: { flex: 1, alignItems: "center" },
@@ -73,39 +100,6 @@ const folha = criarFolha((t) => ({
         backgroundColor: t.color.surface1,
     },
 }));
-// ─────────────────────────────────────────────────────────────────────────────────────────────
-// A DECISÃO DE ACESSIBILIDADE QUE ATRAVESSA O MÓDULO INTEIRO
-//
-// A ficha do `BottomNav` na web escreve, em voz alta, o que ela NÃO adota — e a razão atravessa
-// para cá sem uma vírgula de diferença:
-//
-//   "What is deliberately NOT adopted is the Tabs pattern: a tab swaps a panel inside the page,
-//    a bottom bar changes page. Giving role=tablist to a menu makes the screen reader promise
-//    arrow keys that lead nowhere."
-//
-// No React Native existem `accessibilityRole="tab"` e `"tablist"`, e usá-los aqui seria fácil e
-// errado pelo mesmo motivo. **Não são usados.**
-//
-// O que a web usa no lugar é `<nav>` + `<a>` + `aria-current="page"`. Disso, o que existe no RN:
-//
-//   `<nav>`  → NÃO existe. Não há landmarks no Android/iOS como no HTML. A barra recebe
-//              `accessibilityLabel` (o `label`, ou a frase do provider) e nada mais. Inventar
-//              `toolbar` porque sobrou seria dizer uma coisa que não é.
-//   `<a>`    → `accessibilityRole="link"`, que é o mais próximo honesto de "isto leva a outro
-//              lugar" — e é o que separa a aba de um `button`, que promete ação nesta tela.
-//   current  → `accessibilityState={{selected: true}}`. É o par do `aria-current` no RN.
-// ─────────────────────────────────────────────────────────────────────────────────────────────
-/**
- * O `color-mix(in srgb, X 12%, transparent)` do CSS, traduzido.
- *
- * **Não há `color-mix` no React Native** — medido no interpretador de cor, o mesmo que a ADR-0027
- * já tinha atravessado a pé. O que existe é hex de OITO dígitos, e `#RRGGBBAA` com o alfa certo
- * dá o mesmo pixel sobre um fundo opaco. Cai para a cor crua se ela não for hex de seis, para
- * nunca produzir uma string que o RN descarte em silêncio.
- */
-const comOpacidade = (cor, pct) => /^#[0-9a-fA-F]{6}$/.test(cor)
-    ? cor + Math.round(Math.max(0, Math.min(1, pct)) * 255).toString(16).padStart(2, "0")
-    : cor;
 /**
  * A barra inferior — a pele da navegação, **não a navegação**.
  *
@@ -226,11 +220,33 @@ export function Topbar({ variant = "floating", brand, children, style, ...rest }
 export function NavList({ items, chevron = "chevron--right", style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
-    return (_jsx(View, { accessibilityRole: "list", style: [s.lista, style], ...rest, children: items.map((it) => (_jsxs(Pressable, { onPress: it.onPress, disabled: it.disabled, accessibilityRole: "link", accessibilityState: { disabled: !!it.disabled }, style: [s.linha, it.disabled && { opacity: 0.5 }], children: [it.icon && _jsx(Icon, { name: it.icon, size: "md", color: t.color.foreground }), _jsxs(View, { style: s.linhaTexto, children: [typeof it.label === "string"
-                            ? _jsx(Text, { size: "sm", numberOfLines: 1, children: it.label }) : it.label, it.description != null && (typeof it.description === "string"
-                            ? _jsx(Text, { size: "xs", tone: "muted", numberOfLines: 1, children: it.description })
-                            : it.description)] }), it.value != null && (typeof it.value === "string" || typeof it.value === "number"
-                    ? _jsx(Text, { size: "sm", tone: "muted", children: it.value }) : it.value), chevron && _jsx(Icon, { name: chevron, size: "sm", color: t.color.mutedForeground })] }, it.id))) }));
+    return (_jsx(View, { accessibilityRole: "list", style: [s.lista, style], ...rest, children: items.map((it) => {
+            // 🔴 DUAS COISAS QUE O CONSUMIDOR MEDIU EM 17/09/2026, e as duas moram nesta linha.
+            //
+            // 1 · **O `value` ficava DENTRO do `Pressable`.** Como ele aceita qualquer conteúdo, um
+            //     `Switch` ali virava botão dentro de botão — e **no iOS o `Switch` desaparecia**
+            //     para o VoiceOver (a mesma armadilha do `Combobox`, do `Alert` e do `Chart`; o
+            //     `check 43` é quem guarda a família).
+            //     ⚠ **O `check 43` NÃO pega este caso, e é honesto dizer:** ele lê o NOSSO código, e
+            //     aqui o que é tocável chega de fora. **Slot que recebe conteúdo do consumidor é
+            //     ponto cego de qualquer gate estático** — por isso o conserto é de DESENHO.
+            //
+            // 2 · **Toda linha declarava `accessibilityRole="link"`, mesmo sem `onPress`.** Uma lista
+            //     só de leitura anunciava cada linha como link que não vai a lugar nenhum.
+            //
+            // O que ficou, e por que o `value` se divide por TIPO em vez de sair sempre:
+            //   • valor em TEXTO fica no miolo, porque é parte da frase da linha — pô-lo fora criaria
+            //     uma segunda parada dizendo só "42 km", solta;
+            //   • valor em COMPONENTE fica FORA, irmão do miolo, porque pode ser tocável.
+            const temAcao = typeof it.onPress === "function";
+            const valorEhTexto = typeof it.value === "string" || typeof it.value === "number";
+            const miolo = (_jsxs(_Fragment, { children: [it.icon && _jsx(Icon, { name: it.icon, size: "md", color: t.color.foreground }), _jsxs(View, { style: s.linhaTexto, children: [typeof it.label === "string"
+                                ? _jsx(Text, { size: "sm", numberOfLines: 1, children: it.label }) : it.label, it.description != null && (typeof it.description === "string"
+                                ? _jsx(Text, { size: "xs", tone: "muted", numberOfLines: 1, children: it.description })
+                                : it.description)] }), valorEhTexto && _jsx(Text, { size: "sm", tone: "muted", children: it.value }), temAcao && chevron
+                        && _jsx(Icon, { name: chevron, size: "sm", color: t.color.mutedForeground })] }));
+            return (_jsxs(View, { style: [s.linha, it.disabled && { opacity: 0.5 }], children: [temAcao ? (_jsx(Pressable, { onPress: it.onPress, disabled: it.disabled, accessibilityRole: "link", accessibilityState: { disabled: !!it.disabled }, style: s.linhaMiolo, children: miolo })) : (_jsx(View, { accessible: true, accessibilityState: { disabled: !!it.disabled }, style: s.linhaMiolo, children: miolo })), !valorEhTexto && it.value != null ? it.value : null] }, it.id));
+        }) }));
 }
 /**
  * A trilha de passos — o onboarding de 3 passos que o consumidor já tem.
@@ -264,3 +280,50 @@ export function Stepper({ items, label, doneIcon = "checkmark", errorIcon = "err
             return it.onPress ? (_jsx(Pressable, { onPress: it.onPress, accessibilityRole: "button", accessibilityState: { selected: st === "active" }, style: s.passo, children: miolo }, n)) : (_jsx(View, { accessible: true, accessibilityState: { selected: st === "active" }, style: s.passo, children: miolo }, n));
         }) }));
 }
+/**
+ * As abas DENTRO da tela — trocar o painel, não trocar de página.
+ *
+ * ⚠ **E essa frase é a fronteira com o `BottomNav`, que o Lote 3 quase errou ao contrário.** Lá
+ * a ficha da web proíbe `tab` com a razão pronta — *"a tab swaps a panel inside the page, a
+ * bottom bar changes page"* —, e há um teste cujo único trabalho é reprovar essa palavra na barra
+ * de baixo. **Aqui é o caso certo**, então `tablist`/`tab` são os papéis honestos.
+ * Medido antes de escrever: os dois estão no tipo do RN **e** no enum Kotlin
+ * (`ReactAccessibilityDelegate.kt:368,370`), que é a interseção que o `check 41` cobra.
+ *
+ * ⚠ **A fila ROLA na horizontal, e a web não rola — divergência deliberada, com fonte.** A
+ * referência máxima de desenho deste projeto tem estados de rolagem na lista de abas
+ * (`left-scroll`, `right-scroll`, `left-right-scroll` no inventário), e num telefone de 360dp
+ * quatro rótulos já não cabem. Espremer todas seria a outra saída, e ela apaga o rótulo — que é
+ * o defeito que o app mediu no `SegmentedControl`. **A cápsula, o respiro e o raio continuam
+ * sendo os do CSS**; o que muda é o transbordo.
+ *
+ * ⚠ **O painel inativo NÃO fica montado.** Na web o motor mantém os painéis no DOM e esconde;
+ * aqui montar todos custaria memória e um painel com lista longa pagaria por telas que ninguém
+ * está vendo. **A consequência está declarada e não é neutra:** o estado interno de um painel
+ * (rolagem, texto digitado) **se perde** ao trocar de aba. Quem precisar do contrário guarda o
+ * estado fora, como já faz com `value`.
+ *
+ * ⚠ **A aba escolhida NÃO usa a cor da marca, e isso é de propósito.** O `.tab.active` da web é
+ * `--foreground` sobre `--secondary`, e ele **desliga o fio amarelo**
+ * (`aurea.css:1128`, `:after { display:none }`) que o `.segmented` recebe. São dois sinais
+ * diferentes para duas coisas diferentes: escolher um valor é uma coisa, trocar de painel é
+ * outra. **Não "harmonize" isto com o `SegmentedControl`** — a diferença foi escrita à mão lá.
+ *
+ * ⚠ **Sem orientação VERTICAL.** A web tem (`aurea.css:1122-1126`), e ela resolve um problema de
+ * largura de tela grande. Não há tablet medido neste projeto, e no nativo vale demanda antes de
+ * cobertura — a mesma decisão da `Table` do Lote 6.
+ */
+export function Tabs({ tabs, value, onChange, label, style, ...rest }) {
+    const t = useAureaTokens();
+    const s = folha(t);
+    const strings = useAureaStrings();
+    const aberta = tabs.find((it) => it.id === value);
+    return (_jsxs(View, { style: style, ...rest, children: [_jsx(FilaRolante, { children: _jsx(View, { accessibilityRole: "tablist", accessibilityLabel: label ?? strings.tabsLabel, style: s.abas, children: tabs.map((it) => {
+                        const ativa = it.id === value;
+                        return (_jsx(Pressable, { onPress: it.disabled ? undefined : () => onChange?.(it.id), disabled: it.disabled, accessibilityRole: "tab", accessibilityState: { selected: ativa, disabled: !!it.disabled }, accessibilityLabel: typeof it.label === "string" ? it.label : undefined, style: [s.abaDeTab, ativa && s.abaDeTabAtiva, it.disabled && { opacity: 0.5 }], children: typeof it.label === "string"
+                                ? _jsx(Text, { size: "sm", weight: ativa ? 600 : 400, style: { color: ativa ? t.color.foreground : t.color.mutedForeground }, children: it.label })
+                                : it.label }, it.id));
+                    }) }) }), aberta
+                ? (_jsx(Card, { variant: "inset", accessibilityLabel: typeof aberta.label === "string" ? aberta.label : undefined, style: s.painel, children: aberta.content }))
+                : null] }));
+}

package/dist/rolagem.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+export interface FilaRolanteProps {
+    /** O conteúdo da fila — normalmente a cápsula com os itens dentro. */
+    children: React.ReactNode;
+    /** Estilo do invólucro externo, não do conteúdo. */
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Uma linha que rola para o lado quando não cabe, e que sabe QUANDO não cabe.
+ *
+ * O componente fica com a informação em vez de adivinhar: `onLayout` dá a largura visível e
+ * `onContentSizeChange` dá a do conteúdo. Com as duas, `transbordou` é uma conta, não um palpite.
+ */
+export declare function FilaRolante({ children, style, testID }: FilaRolanteProps): React.JSX.Element;

package/dist/rolagem.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// A FILA QUE ROLA — e por que ela existe em vez de cada componente resolver o seu.
+//
+// 🔴 **ISTO NÃO É DESENHO NOVO: É TRADUÇÃO QUE FALTOU.** O consumidor pediu em 17/09/2026 um
+// grupo de opções que coubesse com seis itens, e a primeira resposta que eu ia dar era criar um
+// componente de "chips". **Medindo a web antes, o pedido já estava resolvido lá:**
+//
+//     aurea.css:2127, em tela de até 640px:
+//     .tabs,.pagination,.segmented { max-width:100%; overflow-x:auto; }
+//
+// Ou seja: **na web o segmentado e as abas JÁ rolam no telefone.** O nativo é que não traduziu.
+// Criar um terceiro jeito de escolher teria sido inventar o que já existia — e essa briga tem
+// nome neste repositório: o `Sidebar`.
+//
+// ⚠ **E o sinal de "tem mais" foi pedido junto, com razão:** quem não sabe que dá para arrastar
+// não acha a sexta opção. A saída óbvia do React Native **não serve** — `fadingEdgeLength` é
+// `@platform android` (medido no tipo do RN), e usá-la daria o aviso no Android e **nada no
+// iPhone**. É a armadilha de um alvo só que este projeto já pagou várias vezes.
+// Gradiente também não: proibido desde a Fase 0.
+//
+// **O que fica, e é o mesmo da web:** a opção cortada pela borda é o sinal, e ele vem do recorte.
+// O que este módulo acrescenta é MEDIR se há transbordo, para (1) mostrar a barra de rolagem só
+// quando ela significa alguma coisa e (2) dar ao teste um número para conferir.
+// ⚠ **Declarado: se o corte LÊ bem é pergunta de vidro, e nenhum aparelho deste projeto rodou
+// iOS.** O que está provado aqui é a medição, não a leitura.
+import * as React from "react";
+import { ScrollView } from "react-native";
+/**
+ * Uma linha que rola para o lado quando não cabe, e que sabe QUANDO não cabe.
+ *
+ * O componente fica com a informação em vez de adivinhar: `onLayout` dá a largura visível e
+ * `onContentSizeChange` dá a do conteúdo. Com as duas, `transbordou` é uma conta, não um palpite.
+ */
+export function FilaRolante({ children, style, testID }) {
+    const [visivel, setVisivel] = React.useState(0);
+    const [conteudo, setConteudo] = React.useState(0);
+    const transbordou = conteudo > visivel && visivel > 0;
+    return (_jsx(ScrollView, { horizontal: true, testID: testID, onLayout: (e) => setVisivel(e.nativeEvent.layout.width), onContentSizeChange: (w) => setConteudo(w), 
+        // A barra só aparece quando ela quer dizer alguma coisa. Com tudo cabendo ela seria ruído,
+        // e é assim que o `overflow-x:auto` da web se comporta: sem transbordo, sem barra.
+        showsHorizontalScrollIndicator: transbordou, 
+        // Sem isto o conteúdo estica até a largura do rolador, e o respiro da cápsula aparece como
+        // faixa vazia à direita quando os itens cabem.
+        contentContainerStyle: { flexGrow: 0 }, style: style, children: children }));
+}

package/dist/strings.d.ts

@@ -22,6 +22,8 @@ export interface AureaStrings {
     dataEmpty: string;
     /** O nome da barra inferior para o leitor de tela. */
     bottomNavLabel: string;
+    /** Nome da fila de abas. Mesma chave da web (`pure.tsx`), traduzida de lá. */
+    tabsLabel: string;
     /** O nome da trilha de passos. */
     stepperLabel: string;
     /** O que o `DatePicker` mostra quando não há data escolhida. */

package/dist/strings.js

@@ -32,6 +32,7 @@ export const defaultStrings = {
     dataError: "This could not be loaded.",
     dataEmpty: "Nothing here yet",
     bottomNavLabel: "Main",
+    tabsLabel: "Tabs",
     stepperLabel: "Steps",
     datePlaceholder: "Pick a date",
     cameraDenied: "Camera access is off. Turn it on in Settings to attach a photo.",
@@ -69,6 +70,7 @@ export const ptBR = {
     dataError: "Não foi possível carregar.",
     dataEmpty: "Ainda não há nada aqui",
     bottomNavLabel: "Principal",
+    tabsLabel: "Abas",
     stepperLabel: "Etapas",
     datePlaceholder: "Escolher data",
     cameraDenied: "O acesso à câmera está desligado. Ligue nas configurações para anexar uma foto.",

package/dist/text.js

@@ -22,7 +22,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Text as TextRN } from "react-native";
 import { criarFolha } from "./estilos.js";
-import { useAureaTokens } from "./theme.js";
+import { useAureaTokens, useSobreAMarca } from "./theme.js";
 const TAMANHO = {
     xs: "textXs", sm: "textSm", md: "textMd", base: "textBase", lg: "textLg",
     xl: "textXl", "2xl": "text2xl", "3xl": "text3xl", "4xl": "text4xl", "5xl": "text5xl",
@@ -61,6 +61,7 @@ const folha = criarFolha((t) => {
 export function Text({ size = "md", weight = 400, font = "ui", tone = "default", leading = "normal", italic = false, align, tracking, style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
+    const sobreAMarca = useSobreAMarca();
     const proprio = React.useMemo(() => {
         const fontSize = t.size[TAMANHO[size]] ?? t.size.textMd;
         const escala = t.font[font];
@@ -79,5 +80,13 @@ export function Text({ size = "md", weight = 400, font = "ui", tone = "default",
             ...(align ? { textAlign: align } : null),
         };
     }, [t, size, weight, font, leading, italic, align, tracking]);
-    return _jsx(TextRN, { style: [s[tone], proprio, style], ...rest });
+    // 🔴 SOBRE UMA SUPERFÍCIE DA MARCA A COR É FORÇADA, e ela vence até o tom explícito.
+    // Medido contra o `primary` nos dois temas: texto comum dá **1,83 no escuro**, esmaecido
+    // **1,35**, e `danger` menos ainda. **Nenhum tom alcança os 4,5 da norma sobre o amarelo** —
+    // só o `primary-foreground`, com 4,54. Respeitar um `tone` ali dentro seria obedecer a prop e
+    // entregar texto que não se lê.
+    // ⚠ **A consequência está declarada e não é neutra:** dentro de um cartão da marca não existe
+    // texto esmaecido. A hierarquia sai de PESO e TAMANHO.
+    // ⚠ E `style` continua por último de propósito: quem passa cor à mão assume a conta.
+    return _jsx(TextRN, { style: [s[tone], sobreAMarca && { color: sobreAMarca }, proprio, style], ...rest });
 }

package/dist/theme.d.ts

@@ -73,3 +73,13 @@ export declare function useAureaTokens(): AureaTokens;
  * `strings.ts`.
  */
 export declare function useAureaStrings(): AureaStrings;
+/** O provedor. Quem usa é o `Card variant="brand"`. */
+export declare const SobreAMarca: React.Context<string | null>;
+/**
+ * A cor que o texto tem de usar quando está sobre a marca, ou `null` quando não está.
+ *
+ * ⚠ **Ela vence TODOS os tons, inclusive os explícitos.** Um `tone="danger"` sobre o amarelo
+ * mediria menos que os 4,5 da norma, então respeitá-lo entregaria texto ilegível em nome da
+ * obediência. **Sobre o amarelo existe UMA cor de texto** — a hierarquia sai de peso e tamanho.
+ */
+export declare function useSobreAMarca(): string | null;

package/dist/theme.js

@@ -109,3 +109,33 @@ export function useAureaTokens() {
 export function useAureaStrings() {
     return usar("useAureaStrings").strings;
 }
+// ─────────────────────────────────────────────────────────────────────────────────────────────
+// Sobre a marca — a cor de texto FORÇADA dentro de uma superfície amarela
+// ─────────────────────────────────────────────────────────────────────────────────────────────
+//
+// 🔴 **Isto existe porque o contraste não deixou escolha**, e os números estão no `layout.tsx`:
+// sobre o `primary`, o texto comum mede **1,83 no tema escuro** e o esmaecido **1,35**. Os dois
+// são ilegíveis. O único par que serve nos DOIS temas é `primary-foreground`, com 4,54.
+//
+// ⚠ **E no React Native não há cascata de cor** — `color` num `View` não desce para o `Text` de
+// dentro, como desceria no CSS. Então a cor tem de viajar por CONTEXTO, que é exatamente a
+// decisão que o `Field` do Lote 4 tomou para empurrar nome, dica e estado de inválido.
+//
+// ⚠ **Ele mora AQUI e não no `layout.tsx` por uma razão de estrutura:** o `layout.tsx` importa o
+// `Text`, então se ele também exportasse o contexto o `text.tsx` teria de importar de volta — um
+// ciclo. Este módulo é o que os dois já importam.
+//
+// ⚠ **Não sai pela porta da frente do pacote.** É acordo interno entre o `Card` e o `Text`.
+const SobreAMarcaCtx = React.createContext(null);
+/** O provedor. Quem usa é o `Card variant="brand"`. */
+export const SobreAMarca = SobreAMarcaCtx;
+/**
+ * A cor que o texto tem de usar quando está sobre a marca, ou `null` quando não está.
+ *
+ * ⚠ **Ela vence TODOS os tons, inclusive os explícitos.** Um `tone="danger"` sobre o amarelo
+ * mediria menos que os 4,5 da norma, então respeitá-lo entregaria texto ilegível em nome da
+ * obediência. **Sobre o amarelo existe UMA cor de texto** — a hierarquia sai de peso e tamanho.
+ */
+export function useSobreAMarca() {
+    return React.useContext(SobreAMarcaCtx);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/native",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "description": "React Native target for Aurea UDS: the theme x density provider, the first components and the Carbon icons, drawn on react-native-svg.",
   "keywords": [
     "aurea",
@@ -47,7 +47,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@aurea-uds/tokens": "^0.8.4"
+    "@aurea-uds/tokens": "^0.8.6"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8",