@aurea-uds/native 0.8.6 → 0.8.8

package/dist/actions.js

@@ -25,7 +25,7 @@ import { Pressable, View } from "react-native";
 import { criarFolha } from "./estilos.js";
 import { Icon } from "./icon.js";
 import { Text } from "./text.js";
-import { useAureaTokens } from "./theme.js";
+import { useAureaTokens, useSobreAMarca } from "./theme.js";
 const ALTURA = {
     xs: "controlHXs", sm: "controlHSm", md: "controlHMd", lg: "controlHLg", xl: "controlHXl",
 };
@@ -67,6 +67,29 @@ function pintar(t, tone) {
     };
     return m[tone];
 }
+/**
+ * O mesmo par, corrigido quando a peça está DENTRO de um `Card variant="brand"`.
+ *
+ * 🔴 **Sem isto o botão não existe sobre o amarelo — medido nas quatro aparências, 17/09/2026:**
+ * cheio neutro **1,61** no claro · cheio da marca **1,00** (amarelo no amarelo) · contornado
+ * **1,38** no claro · só-texto **1,83** no escuro. O `Card variant="brand"` EXIGE `action` no
+ * tipo, então o cartão obrigava a ter um botão e não dava a ele nenhuma forma de aparecer.
+ *
+ * A saída não é paleta nova: **uma única cor do sistema passa de 3:1 contra o amarelo nos dois
+ * temas**, e é a tinta que o cartão já manda para dentro (4,54). Então aqui:
+ *
+ * - **cheio** — o fundo vira a TINTA e a letra vira o amarelo do cartão. O botão fica escuro
+ *   sobre o amarelo, que é o único desenho que se enxerga nos dois temas;
+ * - **contornado e sem fundo** — contorno e letra viram a tinta.
+ *
+ * ⚠ **O tom pedido é IGNORADO aqui**, como já acontece no `Text`: um `tone="danger"` sobre o
+ * amarelo mede menos que a norma, e obedecer entregaria um botão ilegível em nome da obediência.
+ */
+function pintarSobreAMarca(base, marca) {
+    if (marca == null)
+        return base;
+    return { solido: marca.tinta, texto: marca.fundo, sobre: marca.tinta };
+}
 const folha = criarFolha((t) => ({
     // ⚠ O ALVO DE TOQUE, e é a decisão mais importante deste arquivo.
     //
@@ -108,15 +131,17 @@ const folha = criarFolha((t) => ({
 export function Button({ children, appearance = "solid", tone = "neutral", size = "md", leadingIcon, trailingIcon, leading, trailing, icons, fullWidth = false, pressed, disabled, accessibilityLabel, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
-    const cor = pintar(t, tone);
+    const marca = useSobreAMarca();
+    const cor = pintarSobreAMarca(pintar(t, tone), marca);
+    const corDaBorda = marca?.tinta ?? t.color.border;
     const caixa = React.useMemo(() => ({
         height: t.size[ALTURA[size]],
         paddingHorizontal: PADDING[size],
         gap: GAP[size],
         backgroundColor: appearance === "solid" ? cor.solido : "transparent",
-        borderColor: appearance === "outline" ? t.color.border : "transparent",
+        borderColor: appearance === "outline" ? corDaBorda : "transparent",
         ...(fullWidth ? { flex: 1 } : null),
-    }), [t, size, appearance, cor.solido, fullWidth]);
+    }), [t, size, appearance, cor.solido, corDaBorda, fullWidth]);
     const corDoTexto = appearance === "solid" ? cor.texto : cor.sobre;
     return (_jsx(Pressable, { disabled: disabled, accessibilityRole: "button", accessibilityLabel: accessibilityLabel, accessibilityState: { disabled: !!disabled, ...(pressed === undefined ? null : { checked: pressed }) }, style: ({ pressed: tocando }) => [
             s.alvo, fullWidth && s.alvoLargura,
@@ -137,14 +162,16 @@ export function Button({ children, appearance = "solid", tone = "neutral", size
 export function IconButton({ name, label, appearance = "ghost", tone = "neutral", size = "md", icons, pressed, disabled, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
-    const cor = pintar(t, tone);
+    const marca = useSobreAMarca();
+    const cor = pintarSobreAMarca(pintar(t, tone), marca);
+    const corDaBorda = marca?.tinta ?? t.color.border;
     const lado = t.size[ALTURA[size]];
     const caixa = React.useMemo(() => ({
         height: lado, width: lado, paddingHorizontal: 0,
         borderRadius: size === "xs" || size === "sm" ? t.size.radiusSm : t.size.radiusMd,
         backgroundColor: appearance === "solid" ? cor.solido : "transparent",
-        borderColor: appearance === "outline" ? t.color.border : "transparent",
-    }), [t, lado, size, appearance, cor.solido]);
+        borderColor: appearance === "outline" ? corDaBorda : "transparent",
+    }), [t, lado, size, appearance, cor.solido, corDaBorda]);
     return (_jsx(Pressable, { disabled: disabled, accessibilityRole: "button", accessibilityLabel: label, accessibilityState: { disabled: !!disabled, ...(pressed === undefined ? null : { checked: pressed }) }, style: ({ pressed: tocando }) => [
             s.alvo, { minWidth: t.size.targetMin, alignItems: "center" },
             tocando && s.pressionado, disabled && s.inerte,

package/dist/barranav.d.ts

@@ -0,0 +1,52 @@
+import * as React from "react";
+/**
+ * Põe em volta do navegador de abas. O `BottomNav` mede a própria altura e conta para ele; o
+ * `Screen` com `scroll` lê e reserva o espaço no fim do conteúdo, sozinho.
+ *
+ * ```tsx
+ * <BottomNavProvider>
+ *   <Tabs
+ *     screenOptions={{headerShown: false}}
+ *     tabBar={({state, navigation}) => (
+ *       <BottomNav
+ *         label="Menu principal"
+ *         current={state.routes[state.index].name}
+ *         items={rotas.map((r) => ({
+ *           id: r.name, label: r.titulo, icon: r.icone,
+ *           onPress: () => navigation.navigate(r.name),
+ *         }))} />
+ *     )} />
+ * </BottomNavProvider>
+ * ```
+ *
+ * ⚠ **O `BottomNav` vai SOLTO no `tabBar`, sem `View` em volta.** Um embrulho com fundo pinta uma
+ * faixa atrás da pílula e acaba com a flutuação — era o que a documentação antiga mandava fazer,
+ * e era o defeito.
+ *
+ * ⚠ **Fora daqui, `useBottomNavSpace()` devolve 0** e o `Screen` não reserva nada. É o que faz
+ * uma tela cheia, sem abas, continuar exatamente como era.
+ */
+export declare function BottomNavProvider({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * Quanto espaço a barra de abas ocupa no pé da tela, em pontos — pílula, margens e folga do
+ * sistema somadas. **Zero** quando não há `BottomNavProvider` em volta, ou quando a barra é
+ * `edge` (que fica no fluxo e já encurta a tela sozinha).
+ *
+ * O `Screen` com `scroll` já usa isto sozinho. Este gancho é para o resto: uma fileira de botões
+ * presa no pé da tela, por exemplo, que precisa subir acima da pílula.
+ *
+ * ```tsx
+ * const respiro = useBottomNavSpace();
+ * <View style={{position: "absolute", left: 0, right: 0, bottom: respiro}}>
+ *   <Button fullWidth>Salvar</Button>
+ * </View>
+ * ```
+ */
+export declare function useBottomNavSpace(): number;
+/**
+ * Interno: como o `BottomNav` conta a própria altura. Devolve `null` fora de um provedor, e nesse
+ * caso a barra não mede nada — ninguém está ouvindo.
+ */
+export declare function useAnotarBottomNav(): ((n: number) => void) | null;

package/dist/barranav.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Aurea nativo — quanto espaço a barra de abas ocupa, e quem precisa saber.
+//
+// 🔴 **ESTE MÓDULO EXISTE POR UM DEFEITO MEDIDO EM APARELHO, 19/09/2026**, e não por arquitetura.
+// A variante `floating` do `BottomNav` passou a flutuar POR CIMA da tela — que é o que o nome
+// dela sempre prometeu e o que a web já fazia (`.bottom-nav` é `position: sticky; bottom: 0`,
+// `aurea.css:270`). Flutuar por cima tem um preço: **o fim da rolagem fica escondido atrás da
+// pílula.** Alguém tem de reservar esse espaço, e a conta não pode cair no app.
+//
+// ⚠ **Por que a conta não pode ser do app:** ela é a altura da pílula (que depende da densidade,
+// do tamanho da letra do sistema e de haver rótulo) mais as duas margens mais a folga do sistema
+// — que muda entre um aparelho com três botões (≈48) e um com gesto (≈16). Deixar isso para o
+// consumidor é pedir um número mágico que fica errado no primeiro aparelho diferente.
+//
+// ── POR QUE ELE MORA NUM ARQUIVO SÓ DELE ─────────────────────────────────────────────────────
+// Quem MEDE é o `BottomNav` (`navigation.tsx`); quem LÊ é o `Screen` (`screen.tsx`). Os dois não
+// se importam hoje, e pôr o contexto em qualquer um dos dois criaria um ciclo. É a mesma razão
+// que fez a tinta da marca morar no `theme.tsx` — com a diferença de que ali os dois já
+// importavam o `theme`, e aqui não há módulo comum. Então: um arquivo, sem dependência nenhuma
+// além do React.
+import * as React from "react";
+const BarraCtx = React.createContext(null);
+/**
+ * Põe em volta do navegador de abas. O `BottomNav` mede a própria altura e conta para ele; o
+ * `Screen` com `scroll` lê e reserva o espaço no fim do conteúdo, sozinho.
+ *
+ * ```tsx
+ * <BottomNavProvider>
+ *   <Tabs
+ *     screenOptions={{headerShown: false}}
+ *     tabBar={({state, navigation}) => (
+ *       <BottomNav
+ *         label="Menu principal"
+ *         current={state.routes[state.index].name}
+ *         items={rotas.map((r) => ({
+ *           id: r.name, label: r.titulo, icon: r.icone,
+ *           onPress: () => navigation.navigate(r.name),
+ *         }))} />
+ *     )} />
+ * </BottomNavProvider>
+ * ```
+ *
+ * ⚠ **O `BottomNav` vai SOLTO no `tabBar`, sem `View` em volta.** Um embrulho com fundo pinta uma
+ * faixa atrás da pílula e acaba com a flutuação — era o que a documentação antiga mandava fazer,
+ * e era o defeito.
+ *
+ * ⚠ **Fora daqui, `useBottomNavSpace()` devolve 0** e o `Screen` não reserva nada. É o que faz
+ * uma tela cheia, sem abas, continuar exatamente como era.
+ */
+export function BottomNavProvider({ children }) {
+    const [espaco, setEspaco] = React.useState(0);
+    // `setEspaco` tem identidade estável, então isto só muda quando o número muda — e o número só
+    // muda quando a barra muda de tamanho de verdade (rotação, letra do sistema, troca de variante).
+    const valor = React.useMemo(() => ({ espaco, anotar: setEspaco }), [espaco]);
+    return _jsx(BarraCtx.Provider, { value: valor, children: children });
+}
+/**
+ * Quanto espaço a barra de abas ocupa no pé da tela, em pontos — pílula, margens e folga do
+ * sistema somadas. **Zero** quando não há `BottomNavProvider` em volta, ou quando a barra é
+ * `edge` (que fica no fluxo e já encurta a tela sozinha).
+ *
+ * O `Screen` com `scroll` já usa isto sozinho. Este gancho é para o resto: uma fileira de botões
+ * presa no pé da tela, por exemplo, que precisa subir acima da pílula.
+ *
+ * ```tsx
+ * const respiro = useBottomNavSpace();
+ * <View style={{position: "absolute", left: 0, right: 0, bottom: respiro}}>
+ *   <Button fullWidth>Salvar</Button>
+ * </View>
+ * ```
+ */
+export function useBottomNavSpace() {
+    return React.useContext(BarraCtx)?.espaco ?? 0;
+}
+/**
+ * Interno: como o `BottomNav` conta a própria altura. Devolve `null` fora de um provedor, e nesse
+ * caso a barra não mede nada — ninguém está ouvindo.
+ */
+export function useAnotarBottomNav() {
+    return React.useContext(BarraCtx)?.anotar ?? null;
+}

package/dist/busca.js

@@ -75,7 +75,7 @@ import { Icon } from "./icon.js";
 import { KeyboardAvoiding, useCampo } from "./inputs.js";
 import { useReduceMotion } from "./movimento.js";
 import { Text } from "./text.js";
-import { useAureaStrings, useAureaTokens } from "./theme.js";
+import { useAureaStrings, useAureaTokens, ForaDaMarca, usePeleSobreAMarca } from "./theme.js";
 // As mesmas contas do `inputs.tsx`, e elas são repetidas AQUI de propósito: exportá-las de lá
 // tornaria pública uma conta interna do outro módulo, e um `import` de função privada entre
 // módulos irmãos é o começo de um acoplamento que ninguém declara. São três linhas.
@@ -205,6 +205,7 @@ const folha = criarFolha((t) => ({
 export function Combobox({ items, value, onValueChange, onSearchChange, searchDelay = ESPERA_PADRAO, loading, onEndReached, placeholder, searchPlaceholder, empty, clearable = true, draggable = true, disabled, size, chevron = "chevron--down", searchIcon = "search", style, testID, }) {
     const t = useAureaTokens();
     const s = folha(t);
+    const peleDaMarca = usePeleSobreAMarca();
     const strings = useAureaStrings();
     const campo = useCampo();
     const tam = size ?? campo?.size ?? "md";
@@ -292,31 +293,33 @@ export function Combobox({ items, value, onValueChange, onSearchChange, searchDe
                     s.caixa,
                     { height: alturaDoTamanho(t, tam), paddingHorizontal: respiroDoTamanho(t, tam) },
                     campo?.invalido && s.invalido,
+                    // Sobre a marca a tinta vence inválido — ver `usePeleSobreAMarca`.
+                    peleDaMarca,
                     inativo && s.desabilitado,
                     style,
-                ], 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.
-                                            autoFocus: true, autoCorrect: false, autoCapitalize: "none", 
-                                            // Mapeia nos dois sistemas — conferido no fonte do RN, tabela no topo do módulo.
-                                            accessibilityRole: "search", accessibilityLabel: searchPlaceholder ?? strings.comboboxSearch, 
-                                            // `returnKeyType="search"` troca o "enter" do teclado pela lupa. É pista de
-                                            // plataforma, não decoração: diz à pessoa que aquele campo é de busca antes de
-                                            // ela digitar a primeira letra.
-                                            returnKeyType: "search", style: [
-                                                s.campoDeTexto,
-                                                { fontSize: fonteDoTamanho(t, tam), fontFamily: t.font.ui[400],
-                                                    color: t.color.foreground },
-                                            ] }), texto.length > 0 && (_jsx(IconButton, { name: "close", label: strings.searchClear, appearance: "ghost", size: "sm", onPress: () => digitar(""), testID: testID ? `${testID}-busca-limpar` : undefined }))] }), loading && (_jsx(View, { style: s.carregando, children: _jsx(Spinner, { label: strings.comboboxLoading }) })), nada && (_jsx(View, { style: s.vazio, children: typeof empty === "string" || empty == null
-                                        ? _jsx(Text, { size: "sm", tone: "muted", children: empty ?? strings.comboboxEmpty })
-                                        : empty })), _jsx(FlatList, { data: filtrados, keyExtractor: (i) => i.value, keyboardShouldPersistTaps: "handled", onEndReached: onEndReached, onEndReachedThreshold: ANTECEDENCIA_DE_PAGINA, renderItem: ({ item }) => (_jsx(Pressable, { disabled: item.disabled, onPress: () => { onValueChange?.(item); fechar(); }, accessibilityRole: "menuitem", accessibilityState: {
-                                            selected: item.value === value?.value, disabled: !!item.disabled,
-                                        }, style: [
-                                            s.opcao,
-                                            item.value === value?.value && s.opcaoEscolhida,
-                                            item.disabled && s.desabilitado,
-                                        ], children: _jsx(Text, { size: "md", weight: item.value === value?.value ? 600 : 400, children: item.label }) })) })] })] }) })] }));
+                ], 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(ForaDaMarca, { children: _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.
+                                                autoFocus: true, autoCorrect: false, autoCapitalize: "none", 
+                                                // Mapeia nos dois sistemas — conferido no fonte do RN, tabela no topo do módulo.
+                                                accessibilityRole: "search", accessibilityLabel: searchPlaceholder ?? strings.comboboxSearch, 
+                                                // `returnKeyType="search"` troca o "enter" do teclado pela lupa. É pista de
+                                                // plataforma, não decoração: diz à pessoa que aquele campo é de busca antes de
+                                                // ela digitar a primeira letra.
+                                                returnKeyType: "search", style: [
+                                                    s.campoDeTexto,
+                                                    { fontSize: fonteDoTamanho(t, tam), fontFamily: t.font.ui[400],
+                                                        color: t.color.foreground },
+                                                ] }), texto.length > 0 && (_jsx(IconButton, { name: "close", label: strings.searchClear, appearance: "ghost", size: "sm", onPress: () => digitar(""), testID: testID ? `${testID}-busca-limpar` : undefined }))] }), loading && (_jsx(View, { style: s.carregando, children: _jsx(Spinner, { label: strings.comboboxLoading }) })), nada && (_jsx(View, { style: s.vazio, children: typeof empty === "string" || empty == null
+                                            ? _jsx(Text, { size: "sm", tone: "muted", children: empty ?? strings.comboboxEmpty })
+                                            : empty })), _jsx(FlatList, { data: filtrados, keyExtractor: (i) => i.value, keyboardShouldPersistTaps: "handled", onEndReached: onEndReached, onEndReachedThreshold: ANTECEDENCIA_DE_PAGINA, renderItem: ({ item }) => (_jsx(Pressable, { disabled: item.disabled, onPress: () => { onValueChange?.(item); fechar(); }, accessibilityRole: "menuitem", accessibilityState: {
+                                                selected: item.value === value?.value, disabled: !!item.disabled,
+                                            }, style: [
+                                                s.opcao,
+                                                item.value === value?.value && s.opcaoEscolhida,
+                                                item.disabled && s.desabilitado,
+                                            ], children: _jsx(Text, { size: "md", weight: item.value === value?.value ? 600 : 400, children: item.label }) })) })] })] }) }) })] }));
 }
 // ── A DOBRA DE ACENTO, e por que ela é sondada em vez de presumida ───────────────────────────
 // Buscar "acucar" tem de achar "açúcar" — num catálogo em português, exigir o acento certo é
@@ -358,6 +361,7 @@ const dobrar = (v) => {
 export function SearchField({ value, onChangeText, onSearchChange, searchDelay = ESPERA_PADRAO, placeholder, disabled, size, icon = "search", clearable = true, onSubmit, style, testID, }) {
     const t = useAureaTokens();
     const s = folha(t);
+    const peleDaMarca = usePeleSobreAMarca();
     const strings = useAureaStrings();
     const campo = useCampo();
     const tam = size ?? campo?.size ?? "md";
@@ -400,9 +404,12 @@ export function SearchField({ value, onChangeText, onSearchChange, searchDelay =
             // O foco é a única pista de campo ativo que sobra no telefone — mesma decisão do `Input`
             // do Lote 4, e ela vale igual aqui.
             focado && { borderColor: t.color.focusStrong },
+            // Sobre a marca a tinta vence inválido e foco; o foco vira ESPESSURA — `usePeleSobreAMarca`.
+            peleDaMarca,
+            peleDaMarca && focado && { borderWidth: t.size.borderWidth * 2 },
             inativo && s.desabilitado,
             style,
-        ], children: [icon && _jsx(Icon, { name: icon, size: "sm", color: t.color.subtleForeground }), _jsx(TextInput, { testID: testID ? `${testID}-campo` : undefined, value: value, onChangeText: digitar, placeholder: placeholder, placeholderTextColor: t.color.subtleForeground, editable: !inativo, autoCorrect: false, autoCapitalize: "none", returnKeyType: "search", onSubmitEditing: onSubmit, onFocus: () => setFocado(true), onBlur: () => setFocado(false), accessibilityRole: "search", accessibilityLabel: campo?.label ?? placeholder, accessibilityHint: campo?.hint, accessibilityState: { disabled: !!inativo }, style: [
+        ], children: [icon && _jsx(Icon, { name: icon, size: "sm", color: peleDaMarca?.color ?? t.color.subtleForeground }), _jsx(TextInput, { testID: testID ? `${testID}-campo` : undefined, value: value, onChangeText: digitar, placeholder: placeholder, placeholderTextColor: peleDaMarca?.color ?? t.color.subtleForeground, editable: !inativo, autoCorrect: false, autoCapitalize: "none", returnKeyType: "search", onSubmitEditing: onSubmit, onFocus: () => setFocado(true), onBlur: () => setFocado(false), accessibilityRole: "search", accessibilityLabel: campo?.label ?? placeholder, accessibilityHint: campo?.hint, accessibilityState: { disabled: !!inativo }, style: [
                     s.campoDeTexto,
                     { fontSize: fonteDoTamanho(t, tam), fontFamily: t.font.ui[400],
                         color: t.color.foreground },

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { AureaProvider, useAureaTheme, useAureaTokens } from "./theme.js";
 export type { AureaProviderProps, AureaThemeControl } from "./theme.js";
+export { BottomNavProvider, useBottomNavSpace } from "./barranav.js";
 export { resolverTokens } from "./tokens.js";
 export type { AureaDensity, AureaFontFamilies, AureaFontInput, AureaFontScale, AureaShadow, AureaThemeName, AureaTokens, } from "./tokens.js";
 export { criarFolha } from "./estilos.js";

package/dist/index.js

@@ -24,6 +24,9 @@
 // e o caminho profundo é a forma documentada (ADR-0038, cláusula 1) — importar daqui traria os
 // 2571 ao grafo do bundler.
 export { AureaProvider, useAureaTheme, useAureaTokens } from "./theme.js";
+// A barra de abas que flutua precisa contar a própria altura para a tela reservar o fim da
+// rolagem. Ver `barranav.tsx` — e o `BottomNav`, que é quem mede.
+export { BottomNavProvider, useBottomNavSpace } from "./barranav.js";
 export { resolverTokens } from "./tokens.js";
 // A fábrica de folhas memoizada por (tema, densidade). Pública porque o consumidor tem o mesmo
 // problema que os componentes daqui — e a medição em aparelho mostrou que ele é real.

package/dist/inputs.d.ts

@@ -150,6 +150,14 @@ interface ControleProps {
     size?: AureaFieldSize;
     style?: StyleProp<ViewStyle>;
     testID?: string;
+    /**
+     * O nome para quem usa leitor de tela, quando ele NÃO deve aparecer escrito no controle.
+     *
+     * É o caso de uma linha de `NavList`: o nome já está na linha, então repeti-lo no `label` o
+     * escreveria duas vezes — e omitir os dois deixaria o controle **MUDO** para o leitor de tela.
+     * Ele vence o `label` quando os dois vêm.
+     */
+    accessibilityLabel?: string;
 }
 export interface InputGroupProps extends ViewProps {
     /** O degrau do sistema. Cai no `Field` em volta quando não vem, como no `Input`. */
@@ -256,7 +264,7 @@ export interface SwitchProps extends ControleProps {
  * ⚠ **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, description, checked, onChange, disabled, size, style, testID, }: SwitchProps): React.JSX.Element;
+export declare function Switch({ label, description, checked, onChange, disabled, size, style, testID, accessibilityLabel, }: SwitchProps): React.JSX.Element;
 export interface SegmentedControlProps extends ViewProps {
     items: Array<{
         value: string;

package/dist/inputs.js

@@ -45,7 +45,7 @@ import { IconButton } from "./actions.js";
 import { Icon } from "./icon.js";
 import { useReduceMotion } from "./movimento.js";
 import { Text } from "./text.js";
-import { useAureaStrings, useAureaTokens } from "./theme.js";
+import { useAureaStrings, useAureaTokens, usePeleSobreAMarca, ForaDaMarca } from "./theme.js";
 const alturaDoTamanho = (t, s) => s === "sm" ? t.size.controlHSm : s === "lg" ? t.size.controlHLg : t.size.controlHMd;
 const fonteDoTamanho = (t, s) => s === "sm" ? t.size.textXs : s === "lg" ? t.size.textBase : t.size.textMd;
 const respiroDoTamanho = (t, s) => s === "sm" ? t.size.space3 : s === "lg" ? t.size.space4 : 13;
@@ -190,6 +190,7 @@ export function Input({ value, defaultValue, onChangeText, placeholder, disabled
 ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
+    const peleDaMarca = usePeleSobreAMarca();
     const campo = useCampo();
     const grupo = useGrupoDeCampo();
     const tam = size ?? grupo?.size ?? campo?.size ?? "md";
@@ -199,7 +200,7 @@ export function Input({ value, defaultValue, onChangeText, placeholder, disabled
     // O resto vem PRIMEIRO de propósito: o que a Aurea calcula (respiro, cor, nome do `Field`,
     // `editable`) tem de vencer, e as props que ela redefine estão no `Omit` da interface —
     // então não chegam por aqui e não há o que sobrescrever por acidente.
-    , { ...rest, testID: testID, value: value, defaultValue: defaultValue, onChangeText: onChangeText, placeholder: placeholder, placeholderTextColor: t.color.subtleForeground, editable: !inativo, keyboardType: keyboardType, secureTextEntry: secureTextEntry, autoCapitalize: autoCapitalize, multiline: multiline, onFocus: () => { setFocado(true); grupo?.aoFocar(true); onFocus?.(); }, onBlur: () => {
+    , { ...rest, testID: testID, value: value, defaultValue: defaultValue, onChangeText: onChangeText, placeholder: placeholder, placeholderTextColor: peleDaMarca?.color ?? t.color.subtleForeground, editable: !inativo, keyboardType: keyboardType, secureTextEntry: secureTextEntry, autoCapitalize: autoCapitalize, multiline: multiline, onFocus: () => { setFocado(true); grupo?.aoFocar(true); onFocus?.(); }, onBlur: () => {
             setFocado(false);
             grupo?.aoFocar(false);
             // Só avisa quando o texto MUDOU: emitir o mesmo valor a cada saída de foco faria o app
@@ -244,6 +245,16 @@ export function Input({ value, defaultValue, onChangeText, placeholder, disabled
             // O foco é o único estado que sobra do trio da web (hover/focus/active), e ele importa
             // mais aqui: no telefone é a única pista de qual campo o teclado está alimentando.
             !grupo && focado && { borderColor: t.color.focusStrong },
+            // 🔴 DENTRO DO CARTÃO DA MARCA A TINTA VENCE TUDO — inclusive inválido e foco, e isso é
+            // medição, não preferência (os números estão no `usePeleSobreAMarca`): sobre o amarelo a
+            // borda de inválido mede **1,86** e o `focusStrong` do tema ESCURO mede **1,00**, porque
+            // lá ele É o amarelo. Deixá-los vencer apagaria o campo justamente quando ele mais
+            // precisa ser achado.
+            peleDaMarca && { color: peleDaMarca.color },
+            !grupo && peleDaMarca,
+            // E o foco continua existindo, por ESPESSURA em vez de cor — a única pista que sobra
+            // quando só há uma tinta. O dobro da borda do token, não número novo.
+            !grupo && peleDaMarca && focado && { borderWidth: t.size.borderWidth * 2 },
             !grupo && inativo && s.desabilitado,
             style,
         ] }));
@@ -277,6 +288,7 @@ export function Textarea({ rows, size, style, ...rest }) {
 export function InputGroup({ size, disabled, children, style, testID, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
+    const peleDaMarca = usePeleSobreAMarca();
     const campo = useCampo();
     const tam = size ?? campo?.size ?? "md";
     const inativo = disabled ?? campo?.disabled ?? false;
@@ -291,6 +303,9 @@ export function InputGroup({ size, disabled, children, style, testID, ...rest })
             // O foco vem do campo lá dentro, por contexto: no React Native não existe `:focus-within`,
             // e sem isto a única pista de qual campo o teclado alimenta sumiria ao entrar num grupo.
             focado && { borderColor: t.color.focusStrong },
+            // Sobre a marca a tinta vence inválido e foco — ver `usePeleSobreAMarca`.
+            peleDaMarca,
+            peleDaMarca && focado && { borderWidth: t.size.borderWidth * 2 },
             inativo && s.desabilitado,
             style,
         ], ...rest, children: _jsx(GrupoDeCampo.Provider, { value: ctx, children: children }) }));
@@ -312,16 +327,23 @@ export function PasswordField({ defaultVisible = false, size, disabled, autoCapi
     const inativo = disabled ?? campo?.disabled;
     return (_jsxs(InputGroup, { size: tam, disabled: inativo, testID: testID, children: [leading ? _jsx(InputGroupAddon, { children: leading }) : null, _jsx(Input, { ...rest, size: tam, disabled: inativo, autoCapitalize: autoCapitalize, secureTextEntry: !visivel, style: style, testID: testID ? `${testID}-campo` : undefined }), _jsx(InputGroupAddon, { children: _jsx(IconButton, { name: visivel ? "view--off" : "view", label: visivel ? strings.passwordHide : strings.passwordShow, appearance: "ghost", size: tam === "lg" ? "md" : "sm", disabled: inativo, icons: icons, onPress: () => setVisivel(v => !v), testID: testID ? `${testID}-olho` : undefined }) })] }));
 }
-function ControleMarcado({ papel, label, description, checked, onChange, disabled, size, style, testID, }) {
+function ControleMarcado({ papel, label, description, checked, onChange, disabled, size, style, testID, accessibilityLabel, }) {
     const t = useAureaTokens();
     const s = folha(t);
     const campo = useCampo();
     const tam = size ?? campo?.size ?? "md";
     const inativo = disabled ?? campo?.disabled;
+    // Mesma conta do `Switch`, pela mesma razão: sem texto, a coluna vazia com `flex: 1` tomaria a
+    // largura que sobra dentro de uma fileira e apagaria o que estivesse ao lado.
+    const temTexto = label != null || description != null;
     // A marca é METADE da altura do controle — `aurea.css:871`, e é o que faz ela crescer junto
     // com a densidade sem token próprio.
     const lado = alturaDoTamanho(t, tam) / 2;
-    return (_jsxs(Pressable, { testID: testID, onPress: inativo ? undefined : () => onChange?.(!checked), disabled: inativo, accessibilityRole: papel, accessibilityState: { checked: !!checked, disabled: !!inativo }, accessibilityLabel: typeof label === "string" ? label : campo?.label, accessibilityHint: typeof description === "string" ? description : campo?.hint, style: [s.linhaDeControle, inativo && s.desabilitado, style], children: [_jsx(View, { style: [
+    return (_jsxs(Pressable, { testID: testID, onPress: inativo ? undefined : () => onChange?.(!checked), disabled: inativo, accessibilityRole: papel, accessibilityState: { checked: !!checked, disabled: !!inativo }, 
+        // ⚠ O `accessibilityLabel` de fora vence o `label` escrito, e existe para o caso em que o
+        // nome JÁ está na tela ao lado — uma linha de `NavList`, por exemplo. Sem ele, ou o nome
+        // aparece escrito duas vezes, ou o controle sobe MUDO para quem usa leitor de tela.
+        accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : campo?.label), accessibilityHint: typeof description === "string" ? description : campo?.hint, style: [s.linhaDeControle, inativo && s.desabilitado, style], children: [_jsx(View, { style: [
                     s.marcaBase,
                     { width: lado, height: lado,
                         borderRadius: papel === "radio" ? t.size.radiusFull : 5 },
@@ -340,8 +362,8 @@ function ControleMarcado({ papel, label, description, checked, onChange, disable
                             borderLeftWidth: 2, borderBottomWidth: 2,
                             borderColor: t.color.controlSelectedForeground,
                             transform: [{ rotate: "-45deg" }],
-                        } })) }), _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)] })] }));
+                        } })) }), temTexto && (_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)] }))] }));
 }
 /** A caixa que marca. `accessibilityRole="checkbox"` + `state.checked`. */
 export function Checkbox(p) { return _jsx(ControleMarcado, { ...p, papel: "checkbox" }); }
@@ -363,13 +385,14 @@ 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, description, checked, onChange, disabled, size, style, testID, }) {
+export function Switch({ label, description, checked, onChange, disabled, size, style, testID, accessibilityLabel, }) {
     const t = useAureaTokens();
     const s = folha(t);
     const campo = useCampo();
     const tam = size ?? campo?.size ?? "md";
     const inativo = disabled ?? campo?.disabled;
     const reduzir = useReduceMotion();
+    const temTexto = label != null || description != null;
     const h = alturaDoTamanho(t, tam);
     const larguraDoTrilho = h * 7 / 6;
     const alturaDoTrilho = h * 2 / 3;
@@ -388,10 +411,28 @@ export function Switch({ label, description, checked, onChange, disabled, size,
         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, 
+    return (_jsxs(Pressable, { testID: testID, onPress: inativo ? undefined : () => onChange?.(!checked), disabled: inativo, accessibilityRole: "switch", accessibilityState: { checked: !!checked, disabled: !!inativo }, 
+        // O `accessibilityLabel` de fora vence o `label` escrito — ver a prop, em `ControleProps`.
+        accessibilityLabel: 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: [
+        accessibilityHint: typeof description === "string" ? description : campo?.hint, 
+        // 🔴 SEM RÓTULO E SEM DESCRIÇÃO, A RAIZ É O TRILHO E MAIS NADA — e isto é conserto de um
+        // defeito que só aparece no ANDROID, achado pelo consumidor em 19/09/2026.
+        //
+        // A coluna de texto abaixo tem `flex: 1` e existia mesmo vazia. Dentro de uma fileira — uma
+        // linha de `NavList`, onde o valor-componente é IRMÃO do miolo (`navigation.tsx:248`) — esse
+        // `flex: 1` faz a raiz do `Switch` tomar toda a largura que sobra. O miolo, que também tem
+        // `flex: 1`, encolhe até restar só o ícone, e o NOME DA LINHA SOME.
+        //
+        // ⚠ **No navegador o defeito não aparece**, porque lá a divisão de espaço entre dois
+        // irmãos com `flex:1` parte da largura do conteúdo. É a mesma família do `padding-block` do
+        // `Input`: o que a cascata resolve de graça, aqui é conta explícita.
+        style: [
+            { flexDirection: "row", alignItems: "center" },
+            temTexto && { 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 },
@@ -400,8 +441,8 @@ export function Switch({ label, description, checked, onChange, disabled, size,
                         { width: ladoDoPolegar, height: ladoDoPolegar,
                             backgroundColor: checked ? t.color.controlSelectedForeground : t.color.mutedForeground,
                             transform: [{ translateX: pos.interpolate({ inputRange: [0, 1], outputRange: [0, curso] }) }] },
-                    ] }) }), _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)] })] }));
+                    ] }) }), temTexto && (_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.
@@ -463,6 +504,7 @@ export function SegmentedControl({ items, value, onChange, label, disabled, styl
 export function Select({ items, value, onChange, placeholder, disabled, size, chevron = "chevron--down", style, testID, }) {
     const t = useAureaTokens();
     const s = folha(t);
+    const peleDaMarca = usePeleSobreAMarca();
     const campo = useCampo();
     const tam = size ?? campo?.size ?? "md";
     const inativo = disabled ?? campo?.disabled;
@@ -473,9 +515,11 @@ export function Select({ items, value, onChange, placeholder, disabled, size, ch
                     { flexDirection: "row", alignItems: "center", justifyContent: "space-between",
                         height: alturaDoTamanho(t, tam), paddingHorizontal: respiroDoTamanho(t, tam) },
                     campo?.invalido && s.invalido,
+                    // Sobre a marca a tinta vence inválido — ver `usePeleSobreAMarca`.
+                    peleDaMarca,
                     inativo && s.desabilitado,
                     style,
-                ], children: [_jsx(Text, { size: tam === "sm" ? "xs" : tam === "lg" ? "base" : "md", tone: escolhido ? "default" : "subtle", numberOfLines: 1, children: escolhido?.label ?? placeholder ?? "" }), chevron && _jsx(Icon, { name: chevron, size: "sm", color: t.color.subtleForeground })] }), _jsx(Modal, { visible: aberto, transparent: true, animationType: "slide", onRequestClose: () => setAberto(false), children: _jsxs(View, { style: s.fundoDaLista, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: () => setAberto(false), accessible: false }), _jsx(View, { style: s.lista, onStartShouldSetResponder: () => true, children: _jsx(ScrollView, { children: items.map((it) => (_jsx(Pressable, { disabled: it.disabled, onPress: () => { onChange?.(it.value); setAberto(false); }, accessibilityRole: "menuitem", accessibilityState: { selected: it.value === value, disabled: !!it.disabled }, style: [s.opcao, it.disabled && s.desabilitado], children: _jsx(Text, { size: "md", weight: it.value === value ? 600 : 400, children: it.label }) }, it.value))) }) })] }) })] }));
+                ], children: [_jsx(Text, { size: tam === "sm" ? "xs" : tam === "lg" ? "base" : "md", tone: escolhido ? "default" : "subtle", numberOfLines: 1, children: escolhido?.label ?? placeholder ?? "" }), chevron && _jsx(Icon, { name: chevron, size: "sm", color: peleDaMarca?.color ?? t.color.subtleForeground })] }), _jsx(ForaDaMarca, { children: _jsx(Modal, { visible: aberto, transparent: true, animationType: "slide", onRequestClose: () => setAberto(false), children: _jsxs(View, { style: s.fundoDaLista, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: () => setAberto(false), accessible: false }), _jsx(View, { style: s.lista, onStartShouldSetResponder: () => true, children: _jsx(ScrollView, { children: items.map((it) => (_jsx(Pressable, { disabled: it.disabled, onPress: () => { onChange?.(it.value); setAberto(false); }, accessibilityRole: "menuitem", accessibilityState: { selected: it.value === value, disabled: !!it.disabled }, style: [s.opcao, it.disabled && s.desabilitado], children: _jsx(Text, { size: "md", weight: it.value === value ? 600 : 400, children: it.label }) }, it.value))) }) })] }) }) })] }));
 }
 /**
  * A pilha de campos, com o respiro do `--space-5`.

package/dist/layout.js

@@ -87,7 +87,29 @@ export function Cluster({ style, ...rest }) {
 export function Grid({ minColumnWidth = 240, style, children, ...rest }) {
     const s = folha(useAureaTokens());
     const celula = React.useMemo(() => ({ flexGrow: 0, flexShrink: 1, flexBasis: minColumnWidth, minWidth: minColumnWidth, maxWidth: "100%" }), [minColumnWidth]);
-    return (_jsx(View, { style: [s.grid, style], ...rest, children: React.Children.map(children, (filho) => React.isValidElement(filho) ? _jsx(View, { style: celula, children: filho }) : filho) }));
+    return (_jsx(View, { style: [s.grid, style], ...rest, children: React.Children.map(children, (filho) => {
+            if (!React.isValidElement(filho))
+                return filho;
+            // 🔴 O `flexGrow: 1` É O ITEM C14, e ele existe porque a célula NÃO basta.
+            //
+            // A célula já tem a altura certa: a grade é `flexWrap: "wrap"`, e o padrão do Yoga é
+            // `alignItems: Stretch` — medido no fonte do motor, `Style.h:907` —, então cada célula
+            // estica até a mais alta da LINHA. O que não acontecia é o filho preencher a célula: numa
+            // coluna, um filho sem `flexGrow` mede o próprio conteúdo, e dois `KPI` lado a lado, um
+            // com duas linhas de texto e outro com uma, saíam de alturas diferentes.
+            //
+            // ⚠ **Na web isto é de graça e por isso não tinha sido notado:** o `.grid`
+            // (`aurea.css:54`) é `display: grid`, e ali o cartão é o PRÓPRIO item da grade —
+            // `align-items` vale `stretch` por padrão e ele preenche a linha. Aqui existe uma célula
+            // no meio, e é ela que corta a herança de altura.
+            //
+            // ⚠ **O estilo vai ANTES do que o filho já tinha**, para um `style` do consumidor
+            // continuar vencendo. E um filho que não aceite `style` simplesmente não estica — fica
+            // como estava, nunca pior.
+            const proprio = filho.props.style;
+            const estica = React.cloneElement(filho, { style: [{ flexGrow: 1 }, proprio] });
+            return _jsx(View, { style: celula, children: estica });
+        }) }));
 }
 /**
  * A linha de divisão do sistema. Mesma cor e mesma espessura do `.separator` da web.
@@ -134,7 +156,15 @@ export function Card({ variant = "base", style, ...rest }) {
     // ⚠ **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.
+    //
+    // 🔴 **E ISTO NASCEU PELA METADE — o consumidor achou em UM DIA, 17/09/2026.** O parágrafo
+    // acima fala só de TEXTO, e foi só o texto que passou a ler o contexto. Medido depois, dentro
+    // deste mesmo cartão: contorno de campo **2,43/2,24**, fundo de campo **1,61** no claro, glifo
+    // de botão sem fundo **1,83** no escuro — e as QUATRO aparências do `action` que este tipo
+    // EXIGE, todas invisíveis (1,61 · 1,00 · 1,38 · 1,83).
+    // **A mesma frase valia para linha e glifo desde o primeiro dia, e eu parei no texto.**
+    // ✅ Hoje o contexto carrega o par (tinta, fundo), e quem lê está listado no `useSobreAMarca`.
     return variant === "brand"
-        ? _jsx(SobreAMarca.Provider, { value: t.color.primaryForeground, children: pele })
+        ? _jsx(SobreAMarca.Provider, { value: { tinta: t.color.primaryForeground, fundo: t.color.primary }, children: pele })
         : pele;
 }