@aurea-uds/native 0.8.3 → 0.8.5

package/dist/busca.js

@@ -114,6 +114,23 @@ const folha = criarFolha((t) => ({
     // `space05` mede 2 — o mesmo valor, agora com nome. O `.combobox-actions` da web
     // (`aurea.css:1673`) usa `gap:2px` literal; aqui o token existe, então é ele que entra.
     acoes: { flexDirection: "row", alignItems: "center", gap: t.size.space05 },
+    // 🔴 O GATILHO É IRMÃO DO X, NÃO ANCESTRAL — defeito achado pelo consumidor em 16/09/2026.
+    // O `IconButton` de limpar vivia DENTRO deste `Pressable`, e um `Pressable` nasce `accessible`
+    // (`Pressable.js:274`). No iOS esse `accessible` vira `isAccessibilityElement`
+    // (`RCTViewComponentView.mm:398`), e quem é elemento de acessibilidade NÃO expõe os filhos —
+    // então o X existia na tela e não existia para o VoiceOver.
+    // ⚠ **No Android não sumia**, e é por isso que o defeito atravessou o smoke inteiro: lá
+    // `accessible` só liga `isFocusable` (`ReactViewManager.kt:96`) e o `ReactViewGroup.kt:1048`
+    // continua entregando os filhos à árvore. Um aparelho só nunca responderia esta pergunta.
+    // ⚠ É a MESMA forma dos dois consertos que este pacote já carrega (`busca.tsx` fundo da folha,
+    // `inputs.tsx:909`): **num sistema de toque, o irmão resolve o que o ancestral quebra.**
+    // Nenhuma distância nova: `flex`, `minWidth` e `100%` são relações, não medidas.
+    gatilho: { flex: 1, minWidth: 0, height: "100%", flexDirection: "row", alignItems: "center" },
+    // A seta deixou de ser enfeite dentro do gatilho e virou toque próprio — é onde a pessoa toca
+    // para abrir. `accessible={false}` no JSX porque o gatilho JÁ anuncia tudo: um segundo botão
+    // aqui seria a mesma informação duas vezes. O `Icon` sem rótulo já se esconde sozinho
+    // (`icon.tsx:104`), então não sobra nada para o leitor de tela tropeçar.
+    setaToque: { height: "100%", justifyContent: "center" },
     // A folha, com a mesma anatomia da do `Select` (`inputs.tsx:98-113`) — e é de propósito que
     // sejam iguais: são o mesmo gesto, e duas folhas diferentes para o mesmo gesto é como uma
     // biblioteca deixa de ter linguagem.
@@ -271,13 +288,13 @@ export function Combobox({ items, value, onValueChange, onSearchChange, searchDe
         return items.filter((i) => dobrar(i.label).includes(alvo));
     }, [items, texto, onSearchChange]);
     const nada = !loading && filtrados.length === 0;
-    return (_jsxs(_Fragment, { children: [_jsxs(Pressable, { testID: testID, onPress: inativo ? undefined : () => setAberto(true), disabled: inativo, accessibilityRole: "button", accessibilityLabel: campo?.label, accessibilityHint: campo?.hint, accessibilityValue: { text: value?.label }, accessibilityState: { disabled: !!inativo, expanded: aberto }, style: [
+    return (_jsxs(_Fragment, { children: [_jsxs(View, { style: [
                     s.caixa,
                     { height: alturaDoTamanho(t, tam), paddingHorizontal: respiroDoTamanho(t, tam) },
                     campo?.invalido && s.invalido,
                     inativo && s.desabilitado,
                     style,
-                ], children: [_jsx(Text, { size: tam === "sm" ? "xs" : tam === "lg" ? "base" : "md", tone: value ? "default" : "subtle", numberOfLines: 1, style: { flex: 1, minWidth: 0 }, children: value?.label ?? placeholder ?? "" }), _jsxs(View, { style: s.acoes, children: [clearable && value != null && !inativo && (_jsx(IconButton, { name: "close", label: strings.comboboxClear, appearance: "ghost", size: "sm", onPress: () => onValueChange?.(null), testID: testID ? `${testID}-limpar` : undefined })), chevron && _jsx(Icon, { name: chevron, size: "sm", color: t.color.subtleForeground })] })] }), _jsx(Modal, { visible: aberto, transparent: true, animationType: reduzir !== false ? "none" : "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: fechar, children: _jsxs(KeyboardAvoiding, { style: s.fundoDaLista, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: fechar, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(Animated.View, { style: [s.lista, { transform: [{ translateY: arrasto }] }], onLayout: (e) => { altura.current = e.nativeEvent.layout.height; }, onStartShouldSetResponder: () => true, children: [_jsx(View, { style: s.puxadorArea, ...(draggable ? gestos.panHandlers : null), accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(View, { style: s.puxador }) }), _jsxs(View, { style: [s.grupo, { height: alturaDoTamanho(t, tam) }], ...(draggable ? gestos.panHandlers : null), children: [searchIcon && _jsx(Icon, { name: searchIcon, size: "sm", color: t.color.subtleForeground }), _jsx(TextInput, { testID: testID ? `${testID}-busca` : undefined, value: texto, onChangeText: digitar, placeholder: searchPlaceholder ?? strings.comboboxSearch, placeholderTextColor: t.color.subtleForeground, 
+                ], children: [_jsx(Pressable, { testID: testID, onPress: inativo ? undefined : () => setAberto(true), disabled: inativo, accessibilityRole: "button", accessibilityLabel: campo?.label, accessibilityHint: campo?.hint, accessibilityValue: { text: value?.label }, accessibilityState: { disabled: !!inativo, expanded: aberto }, style: s.gatilho, children: _jsx(Text, { size: tam === "sm" ? "xs" : tam === "lg" ? "base" : "md", tone: value ? "default" : "subtle", numberOfLines: 1, style: { flex: 1, minWidth: 0 }, children: value?.label ?? placeholder ?? "" }) }), _jsxs(View, { style: s.acoes, children: [clearable && value != null && !inativo && (_jsx(IconButton, { name: "close", label: strings.comboboxClear, appearance: "ghost", size: "sm", onPress: () => onValueChange?.(null), testID: testID ? `${testID}-limpar` : undefined })), chevron && (_jsx(Pressable, { accessible: false, disabled: inativo, style: s.setaToque, onPress: inativo ? undefined : () => setAberto(true), testID: testID ? `${testID}-seta` : undefined, children: _jsx(Icon, { name: chevron, size: "sm", color: t.color.subtleForeground }) }))] })] }), _jsx(Modal, { visible: aberto, transparent: true, animationType: reduzir !== false ? "none" : "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: fechar, children: _jsxs(KeyboardAvoiding, { style: s.fundoDaLista, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: fechar, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(Animated.View, { style: [s.lista, { transform: [{ translateY: arrasto }] }], onLayout: (e) => { altura.current = e.nativeEvent.layout.height; }, onStartShouldSetResponder: () => true, children: [_jsx(View, { style: s.puxadorArea, ...(draggable ? gestos.panHandlers : null), accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(View, { style: s.puxador }) }), _jsxs(View, { style: [s.grupo, { height: alturaDoTamanho(t, tam) }], ...(draggable ? gestos.panHandlers : null), children: [searchIcon && _jsx(Icon, { name: searchIcon, size: "sm", color: t.color.subtleForeground }), _jsx(TextInput, { testID: testID ? `${testID}-busca` : undefined, value: texto, onChangeText: digitar, placeholder: searchPlaceholder ?? strings.comboboxSearch, placeholderTextColor: t.color.subtleForeground, 
                                             // ⚠ `autoFocus` é o que faz a folha valer a pena: abrir um campo de busca e
                                             // exigir um segundo toque para o teclado subir é um toque a mais em cada
                                             // cadastro. O foco entra com a folha; o teclado vem junto.

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,7 @@ 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 { IconButton } from "./actions.js";
 import { Icon } from "./icon.js";
 import { useReduceMotion } from "./movimento.js";
@@ -94,6 +94,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 +362,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 +387,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 +399,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.
@@ -399,9 +417,27 @@ export function SegmentedControl({ items, value, onChange, label, disabled, styl
     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 (_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));
         }) }));
 }
 /**

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,10 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Pressable, View, } from "react-native";
+import { Pressable, View, ScrollView } 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 { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens } from "./theme.js";
 const folha = criarFolha((t) => ({
@@ -62,7 +63,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 +99,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 +219,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 +279,53 @@ 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(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, 
+                // Sem isto o conteúdo estica até a largura do rolador e o `padding` de 3 da cápsula
+                // aparece como faixa vazia à direita quando as abas cabem.
+                contentContainerStyle: { flexGrow: 0 }, 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/native",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "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.3"
+    "@aurea-uds/tokens": "^0.8.5"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8",