@aurea-uds/native 0.8.6 → 0.8.7

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/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/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 }) }));
@@ -463,6 +478,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 +489,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

@@ -134,7 +134,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;
 }

package/dist/numero.js

@@ -49,7 +49,7 @@ import { Platform, TextInput, View } from "react-native";
 import { IconButton } from "./actions.js";
 import { criarFolha } from "./estilos.js";
 import { useCampo } from "./inputs.js";
-import { useAureaStrings, useAureaTokens } from "./theme.js";
+import { useAureaStrings, useAureaTokens, usePeleSobreAMarca } 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 folha = criarFolha((t) => ({
@@ -235,6 +235,7 @@ const paraEdicao = (n, locale) => {
 export function NumberField({ value, defaultValue, onValueChange, min, max, step = 1, format, locale, disabled, readOnly, size, fullWidth = false, label, placeholder, keyboardType, icons = { increment: "add", decrement: "subtract" }, style, testID, }) {
     const t = useAureaTokens();
     const s = folha(t);
+    const peleDaMarca = usePeleSobreAMarca();
     const strings = useAureaStrings();
     const campo = useCampo();
     const tam = size ?? campo?.size ?? "md";
@@ -310,7 +311,7 @@ export function NumberField({ value, defaultValue, onValueChange, min, max, step
     // (`aurea.css:685`), com os dois botões FORA dela. O estado que faltava é o deles; a geometria
     // continua sendo a nossa.
     const [focado, setFocado] = React.useState(false);
-    return (_jsxs(View, { testID: testID, style: [s.grupo, fullWidth && s.grupoLargo, inativo && s.desabilitado, style], children: [mostrarBotoes && (_jsx(IconButton, { name: icons.decrement, label: strings.decrement, appearance: "ghost", size: tam, disabled: inativo || noLimite(-1), onPress: () => empurrar(-1), testID: testID ? `${testID}-menos` : undefined })), _jsx(TextInput, { testID: testID ? `${testID}-campo` : undefined, value: mostrar, onChangeText: setEmEdicao, onFocus: () => { setFocado(true); setEmEdicao(paraEdicao(numero, locale)); }, onBlur: () => { setFocado(false); confirmar(); }, editable: !inativo && !readOnly, placeholder: placeholder, placeholderTextColor: t.color.subtleForeground, keyboardType: keyboardType ?? tecladoPadrao, 
+    return (_jsxs(View, { testID: testID, style: [s.grupo, fullWidth && s.grupoLargo, inativo && s.desabilitado, style], children: [mostrarBotoes && (_jsx(IconButton, { name: icons.decrement, label: strings.decrement, appearance: "ghost", size: tam, disabled: inativo || noLimite(-1), onPress: () => empurrar(-1), testID: testID ? `${testID}-menos` : undefined })), _jsx(TextInput, { testID: testID ? `${testID}-campo` : undefined, value: mostrar, onChangeText: setEmEdicao, onFocus: () => { setFocado(true); setEmEdicao(paraEdicao(numero, locale)); }, onBlur: () => { setFocado(false); confirmar(); }, editable: !inativo && !readOnly, placeholder: placeholder, placeholderTextColor: peleDaMarca?.color ?? t.color.subtleForeground, keyboardType: keyboardType ?? tecladoPadrao, 
                 // O nome vem do `Field`, como em todo controle deste pacote — e `label` cobre quem usa o
                 // campo solto. Sem um dos dois, é um nó anônimo para o leitor de tela.
                 accessibilityLabel: label ?? campo?.label, accessibilityHint: campo?.hint, accessibilityState: { disabled: !!inativo }, "aria-invalid": campo?.invalido, style: [
@@ -323,5 +324,10 @@ export function NumberField({ value, defaultValue, onValueChange, min, max, step
                     // depois. Um campo inválido que está sendo corrigido tem de mostrar que está ativo —
                     // invertendo, a pessoa digita sem pista nenhuma de onde o teclado está batendo.
                     focado && { borderColor: t.color.focusStrong },
+                    // 🔴 E DENTRO DO CARTÃO DA MARCA A TINTA VENCE OS DOIS — `usePeleSobreAMarca` tem os
+                    // números: sobre o amarelo o inválido mede 1,86 e o foco do tema escuro mede 1,00.
+                    // O foco continua existindo, por espessura.
+                    peleDaMarca,
+                    peleDaMarca && focado && { borderWidth: t.size.borderWidth * 2 },
                 ] }), mostrarBotoes && (_jsx(IconButton, { name: icons.increment, label: strings.increment, appearance: "ghost", size: tam, disabled: inativo || noLimite(1), onPress: () => empurrar(1), testID: testID ? `${testID}-mais` : undefined }))] }));
 }

package/dist/overlays.js

@@ -61,7 +61,7 @@ import { Button } from "./actions.js";
 import { criarFolha } from "./estilos.js";
 import { IconButton } from "./actions.js";
 import { Text } from "./text.js";
-import { useAureaStrings, useAureaTokens } from "./theme.js";
+import { useAureaStrings, useAureaTokens, ForaDaMarca } from "./theme.js";
 import { useReduceMotion } from "./movimento.js";
 const folha = criarFolha((t) => ({
     fundo: { flex: 1, backgroundColor: t.color.overlay },
@@ -157,7 +157,7 @@ export function Dialog({ open, title, children, footer, onClose, scroll = true,
     const s = folha(t);
     const strings = useAureaStrings();
     const Corpo = scroll ? ScrollView : View;
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onClose, testID: testID, children: _jsxs(View, { style: [s.fundo, s.centro], children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: onClose, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(View, { ...naoAtravessa, style: [s.superficie, style], children: [_jsxs(View, { style: s.cabecalho, children: [_jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }), _jsx(IconButton, { name: "close", label: strings.close, appearance: "ghost", size: "sm", onPress: onClose })] }), _jsx(Corpo, { ...(scroll ? { contentContainerStyle: s.corpo } : { style: s.corpo }), children: children }), footer ? _jsx(View, { style: s.rodape, children: footer }) : null] })] }) }));
+    return (_jsx(ForaDaMarca, { children: _jsx(Modal, { visible: open, transparent: true, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onClose, testID: testID, children: _jsxs(View, { style: [s.fundo, s.centro], children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: onClose, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(View, { ...naoAtravessa, style: [s.superficie, style], children: [_jsxs(View, { style: s.cabecalho, children: [_jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }), _jsx(IconButton, { name: "close", label: strings.close, appearance: "ghost", size: "sm", onPress: onClose })] }), _jsx(Corpo, { ...(scroll ? { contentContainerStyle: s.corpo } : { style: s.corpo }), children: children }), footer ? _jsx(View, { style: s.rodape, children: footer }) : null] })] }) }) }));
 }
 /**
  * A decisão que não se desfaz.
@@ -185,9 +185,9 @@ export function ConfirmDialog({ open, title, description, confirmLabel, cancelLa
     const t = useAureaTokens();
     const s = folha(t);
     const strings = useAureaStrings();
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onCancel, testID: testID, children: _jsx(View, { style: [s.fundo, s.centro], children: _jsxs(View, { ...naoAtravessa, style: [s.superficie, s.confirmar], children: [_jsx(View, { style: s.cabecalho, children: _jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }) }), _jsx(View, { style: s.corpo, children: typeof description === "string"
-                            ? _jsx(Text, { size: "md", tone: "muted", children: description })
-                            : description }), _jsxs(View, { style: s.rodape, children: [_jsx(Button, { appearance: "outline", onPress: onCancel, testID: testID ? `${testID}-cancelar` : undefined, children: cancelLabel ?? strings.confirmCancel }), _jsx(Button, { appearance: "solid", tone: destructive ? "danger" : "brand", onPress: onConfirm, testID: testID ? `${testID}-confirmar` : undefined, children: confirmLabel ?? strings.confirmProceed })] })] }) }) }));
+    return (_jsx(ForaDaMarca, { children: _jsx(Modal, { visible: open, transparent: true, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onCancel, testID: testID, children: _jsx(View, { style: [s.fundo, s.centro], children: _jsxs(View, { ...naoAtravessa, style: [s.superficie, s.confirmar], children: [_jsx(View, { style: s.cabecalho, children: _jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }) }), _jsx(View, { style: s.corpo, children: typeof description === "string"
+                                ? _jsx(Text, { size: "md", tone: "muted", children: description })
+                                : description }), _jsxs(View, { style: s.rodape, children: [_jsx(Button, { appearance: "outline", onPress: onCancel, testID: testID ? `${testID}-cancelar` : undefined, children: cancelLabel ?? strings.confirmCancel }), _jsx(Button, { appearance: "solid", tone: destructive ? "danger" : "brand", onPress: onConfirm, testID: testID ? `${testID}-confirmar` : undefined, children: confirmLabel ?? strings.confirmProceed })] })] }) }) }) }));
 }
 /**
  * O painel que entra pela borda.
@@ -229,10 +229,10 @@ export function Drawer({ open, title, children, onClose, side = "right", scroll
         inputRange: [0, 1],
         outputRange: [side === "right" ? 480 : -480, 0],
     });
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "none", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onClose, testID: testID, children: _jsxs(View, { style: s.fundo, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: onClose, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(Animated.View, { ...naoAtravessa, style: [
-                        s.gaveta, side === "right" ? s.gavetaDireita : s.gavetaEsquerda,
-                        { transform: [{ translateX: desloca }] }, style,
-                    ], children: [_jsxs(View, { style: s.cabecalho, children: [_jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }), _jsx(IconButton, { name: "close", label: strings.close, appearance: "ghost", size: "sm", onPress: onClose })] }), _jsx(Corpo, { ...(scroll ? { contentContainerStyle: s.corpo } : { style: s.corpo }), children: children })] })] }) }));
+    return (_jsx(ForaDaMarca, { children: _jsx(Modal, { visible: open, transparent: true, animationType: "none", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onClose, testID: testID, children: _jsxs(View, { style: s.fundo, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: onClose, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(Animated.View, { ...naoAtravessa, style: [
+                            s.gaveta, side === "right" ? s.gavetaDireita : s.gavetaEsquerda,
+                            { transform: [{ translateX: desloca }] }, style,
+                        ], children: [_jsxs(View, { style: s.cabecalho, children: [_jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }), _jsx(IconButton, { name: "close", label: strings.close, appearance: "ghost", size: "sm", onPress: onClose })] }), _jsx(Corpo, { ...(scroll ? { contentContainerStyle: s.corpo } : { style: s.corpo }), children: children })] })] }) }) }));
 }
 /**
  * A folha que sobe de baixo. **NÃO existe na web** — é o único componente deste lote sem ficha.
@@ -287,5 +287,5 @@ export function BottomSheet({ open, title, children, onClose, grabber = true, dr
             }).start();
         },
     }), [draggable, onClose, arrasto, reduzir, t.easing.easeEmphasized]);
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: reduzir !== false ? "none" : "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onClose, testID: testID, children: _jsxs(View, { style: s.fundo, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: onClose, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(Animated.View, { ...naoAtravessa, ...gestos.panHandlers, onLayout: (e) => { altura.current = e.nativeEvent.layout.height; }, style: [s.folhaBaixo, { transform: [{ translateY: arrasto }] }, style], children: [grabber ? (_jsx(View, { style: s.puxadorArea, accessible: false, importantForAccessibility: "no-hide-descendants", children: _jsx(View, { style: s.puxador }) })) : null, title ? (_jsx(View, { style: s.cabecalho, children: _jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }) })) : null, _jsx(Corpo, { ...(scroll ? { contentContainerStyle: s.corpo } : { style: s.corpo }), children: children })] })] }) }));
+    return (_jsx(ForaDaMarca, { children: _jsx(Modal, { visible: open, transparent: true, animationType: reduzir !== false ? "none" : "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onClose, testID: testID, children: _jsxs(View, { style: s.fundo, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: onClose, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(Animated.View, { ...naoAtravessa, ...gestos.panHandlers, onLayout: (e) => { altura.current = e.nativeEvent.layout.height; }, style: [s.folhaBaixo, { transform: [{ translateY: arrasto }] }, style], children: [grabber ? (_jsx(View, { style: s.puxadorArea, accessible: false, importantForAccessibility: "no-hide-descendants", children: _jsx(View, { style: s.puxador }) })) : null, title ? (_jsx(View, { style: s.cabecalho, children: _jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }) })) : null, _jsx(Corpo, { ...(scroll ? { contentContainerStyle: s.corpo } : { style: s.corpo }), children: children })] })] }) }) }));
 }

package/dist/text.js

@@ -88,5 +88,5 @@ export function Text({ size = "md", weight = 400, font = "ui", tone = "default",
     // ⚠ **A consequência está declarada e não é neutra:** dentro de um cartão da marca não existe
     // texto esmaecido. A hierarquia sai de PESO e TAMANHO.
     // ⚠ E `style` continua por último de propósito: quem passa cor à mão assume a conta.
-    return _jsx(TextRN, { style: [s[tone], sobreAMarca && { color: sobreAMarca }, proprio, style], ...rest });
+    return _jsx(TextRN, { style: [s[tone], sobreAMarca && { color: sobreAMarca.tinta }, proprio, style], ...rest });
 }

package/dist/theme.d.ts

@@ -73,13 +73,66 @@ export declare function useAureaTokens(): AureaTokens;
  * `strings.ts`.
  */
 export declare function useAureaStrings(): AureaStrings;
+export interface SobreAMarcaValor {
+    /** A única cor que se pode desenhar sobre a marca: letra, contorno e glifo. 4,54 nos dois temas. */
+    tinta: string;
+    /** A cor do cartão por baixo. Serve de letra para quem se pinta com a tinta INTEIRA. */
+    fundo: string;
+}
 /** O provedor. Quem usa é o `Card variant="brand"`. */
-export declare const SobreAMarca: React.Context<string | null>;
+export declare const SobreAMarca: React.Context<SobreAMarcaValor | null>;
 /**
- * A cor que o texto tem de usar quando está sobre a marca, ou `null` quando não está.
+ * O par de cores obrigatório quando se está sobre a marca, ou `null` quando não se está.
  *
- * ⚠ **Ela vence TODOS os tons, inclusive os explícitos.** Um `tone="danger"` sobre o amarelo
+ * ⚠ **Ele vence TODOS os tons, inclusive os explícitos.** Um `tone="danger"` sobre o amarelo
  * mediria menos que os 4,5 da norma, então respeitá-lo entregaria texto ilegível em nome da
- * obediência. **Sobre o amarelo existe UMA cor de texto** — a hierarquia sai de peso e tamanho.
+ * obediência. **Sobre o amarelo existe UMA tinta** — a hierarquia sai de peso e tamanho.
+ *
+ * ⚠ **E o alcance dele é DECLARADO, não completo.** Leem o contexto: `Text`, a família de campo,
+ * o `Button` e o `IconButton`. **Componente fora dessa lista continua quebrado dentro do cartão
+ * amarelo**, e gate estático nenhum vê isso — o que o consumidor encaixa não está no nosso
+ * código, exatamente o ponto cego que o `check 43` já declara.
+ */
+export declare function useSobreAMarca(): SobreAMarcaValor | null;
+/**
+ * Corta a marca para dentro.
+ *
+ * 🔴 **Existe por uma armadilha do React Native que é invisível na tela e óbvia no código:** o
+ * `Modal` desenha numa camada POR CIMA de tudo, mas em React ele continua sendo FILHO de quem o
+ * escreveu. Um `Select` dentro de um `Card variant="brand"` abre a folha dele **fora** do cartão
+ * amarelo — e a folha herdaria a tinta do amarelo mesmo assim, pintando texto marrom sobre fundo
+ * normal.
+ *
+ * ⚠ **Camada visual e árvore de contexto são coisas diferentes**, e é só o segundo que manda na
+ * cor. Toda superfície que sai do fluxo — as duas folhas de escolha e os quatro sobrepostos —
+ * passa por aqui.
+ */
+export declare function ForaDaMarca({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * A pele que um CAMPO tem de vestir quando está dentro de um `Card variant="brand"`, ou `null`
+ * quando não está.
+ *
+ * O campo perde o fundo e passa a ser um contorno da tinta: **4,54 contra o amarelo nos dois
+ * temas**, contra os 2,43/2,24 do `borderStrong` e os 1,61 do `fieldBg` no tema claro. A norma
+ * 1.4.11 pede 3:1 para o contorno que identifica um campo, e só a tinta chega lá.
+ *
+ * ⚠ **O fundo some porque NÃO HÁ fundo possível** — medidas as três superfícies neutras do
+ * sistema contra o amarelo no tema claro: `card` 1,91 · `background` 1,73 · `secondary` 1,61.
+ * Nenhuma separa. Um contorno forte separa.
+ *
+ * 🔴 **E a tinta vence o estado de INVÁLIDO, que é o contrário do que a intuição manda.** Medido:
+ * a borda de inválido (`danger-400`, `#9f2330`) mede **1,86** contra o amarelo — ela é MENOS
+ * visível que a tinta. Pintar de vermelho ali deixaria o campo errado mais difícil de achar que o
+ * campo certo. Dentro deste cartão o erro é dito pela MENSAGEM do `Field` e pelo estado que o
+ * leitor de tela anuncia, não pela cor — que é o que a norma 1.4.1 já exige de qualquer forma.
+ *
+ * ⚠ **O texto digitado e o marcador de dica ficam da MESMA cor**, porque só existe uma tinta. É
+ * perda real de hierarquia, declarada e não escondida: sobre o amarelo não há segunda cor.
  */
-export declare function useSobreAMarca(): string | null;
+export declare function usePeleSobreAMarca(): {
+    borderColor: string;
+    backgroundColor: string;
+    color: string;
+} | null;

package/dist/theme.js

@@ -109,33 +109,64 @@ export function useAureaTokens() {
 export function useAureaStrings() {
     return usar("useAureaStrings").strings;
 }
-// ─────────────────────────────────────────────────────────────────────────────────────────────
-// Sobre a marca — a cor de texto FORÇADA dentro de uma superfície amarela
-// ─────────────────────────────────────────────────────────────────────────────────────────────
-//
-// 🔴 **Isto existe porque o contraste não deixou escolha**, e os números estão no `layout.tsx`:
-// sobre o `primary`, o texto comum mede **1,83 no tema escuro** e o esmaecido **1,35**. Os dois
-// são ilegíveis. O único par que serve nos DOIS temas é `primary-foreground`, com 4,54.
-//
-// ⚠ **E no React Native não há cascata de cor** — `color` num `View` não desce para o `Text` de
-// dentro, como desceria no CSS. Então a cor tem de viajar por CONTEXTO, que é exatamente a
-// decisão que o `Field` do Lote 4 tomou para empurrar nome, dica e estado de inválido.
-//
-// ⚠ **Ele mora AQUI e não no `layout.tsx` por uma razão de estrutura:** o `layout.tsx` importa o
-// `Text`, então se ele também exportasse o contexto o `text.tsx` teria de importar de volta — um
-// ciclo. Este módulo é o que os dois já importam.
-//
-// ⚠ **Não sai pela porta da frente do pacote.** É acordo interno entre o `Card` e o `Text`.
 const SobreAMarcaCtx = React.createContext(null);
 /** O provedor. Quem usa é o `Card variant="brand"`. */
 export const SobreAMarca = SobreAMarcaCtx;
 /**
- * A cor que o texto tem de usar quando está sobre a marca, ou `null` quando não está.
+ * O par de cores obrigatório quando se está sobre a marca, ou `null` quando não se está.
  *
- * ⚠ **Ela vence TODOS os tons, inclusive os explícitos.** Um `tone="danger"` sobre o amarelo
+ * ⚠ **Ele vence TODOS os tons, inclusive os explícitos.** Um `tone="danger"` sobre o amarelo
  * mediria menos que os 4,5 da norma, então respeitá-lo entregaria texto ilegível em nome da
- * obediência. **Sobre o amarelo existe UMA cor de texto** — a hierarquia sai de peso e tamanho.
+ * obediência. **Sobre o amarelo existe UMA tinta** — a hierarquia sai de peso e tamanho.
+ *
+ * ⚠ **E o alcance dele é DECLARADO, não completo.** Leem o contexto: `Text`, a família de campo,
+ * o `Button` e o `IconButton`. **Componente fora dessa lista continua quebrado dentro do cartão
+ * amarelo**, e gate estático nenhum vê isso — o que o consumidor encaixa não está no nosso
+ * código, exatamente o ponto cego que o `check 43` já declara.
  */
 export function useSobreAMarca() {
     return React.useContext(SobreAMarcaCtx);
 }
+/**
+ * Corta a marca para dentro.
+ *
+ * 🔴 **Existe por uma armadilha do React Native que é invisível na tela e óbvia no código:** o
+ * `Modal` desenha numa camada POR CIMA de tudo, mas em React ele continua sendo FILHO de quem o
+ * escreveu. Um `Select` dentro de um `Card variant="brand"` abre a folha dele **fora** do cartão
+ * amarelo — e a folha herdaria a tinta do amarelo mesmo assim, pintando texto marrom sobre fundo
+ * normal.
+ *
+ * ⚠ **Camada visual e árvore de contexto são coisas diferentes**, e é só o segundo que manda na
+ * cor. Toda superfície que sai do fluxo — as duas folhas de escolha e os quatro sobrepostos —
+ * passa por aqui.
+ */
+export function ForaDaMarca({ children }) {
+    return _jsx(SobreAMarcaCtx.Provider, { value: null, children: children });
+}
+/**
+ * A pele que um CAMPO tem de vestir quando está dentro de um `Card variant="brand"`, ou `null`
+ * quando não está.
+ *
+ * O campo perde o fundo e passa a ser um contorno da tinta: **4,54 contra o amarelo nos dois
+ * temas**, contra os 2,43/2,24 do `borderStrong` e os 1,61 do `fieldBg` no tema claro. A norma
+ * 1.4.11 pede 3:1 para o contorno que identifica um campo, e só a tinta chega lá.
+ *
+ * ⚠ **O fundo some porque NÃO HÁ fundo possível** — medidas as três superfícies neutras do
+ * sistema contra o amarelo no tema claro: `card` 1,91 · `background` 1,73 · `secondary` 1,61.
+ * Nenhuma separa. Um contorno forte separa.
+ *
+ * 🔴 **E a tinta vence o estado de INVÁLIDO, que é o contrário do que a intuição manda.** Medido:
+ * a borda de inválido (`danger-400`, `#9f2330`) mede **1,86** contra o amarelo — ela é MENOS
+ * visível que a tinta. Pintar de vermelho ali deixaria o campo errado mais difícil de achar que o
+ * campo certo. Dentro deste cartão o erro é dito pela MENSAGEM do `Field` e pelo estado que o
+ * leitor de tela anuncia, não pela cor — que é o que a norma 1.4.1 já exige de qualquer forma.
+ *
+ * ⚠ **O texto digitado e o marcador de dica ficam da MESMA cor**, porque só existe uma tinta. É
+ * perda real de hierarquia, declarada e não escondida: sobre o amarelo não há segunda cor.
+ */
+export function usePeleSobreAMarca() {
+    const marca = useSobreAMarca();
+    return marca == null
+        ? null
+        : { borderColor: marca.tinta, backgroundColor: "transparent", color: marca.tinta };
+}

package/package.json

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