@aurea-uds/native 0.8.5 → 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

@@ -40,11 +40,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import * as React from "react";
 import { Animated, KeyboardAvoidingView as KeyboardAvoidingViewRN, Modal, Platform, Pressable, ScrollView, TextInput, View, } from "react-native";
 import { comOpacidade, criarFolha } from "./estilos.js";
+import { FilaRolante } from "./rolagem.js";
 import { IconButton } from "./actions.js";
 import { Icon } from "./icon.js";
 import { useReduceMotion } from "./movimento.js";
 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;
@@ -189,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";
@@ -198,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
@@ -243,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,
         ] }));
@@ -276,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;
@@ -290,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 }) }));
@@ -415,30 +431,30 @@ export function SegmentedControl({ items, value, onChange, label, disabled, styl
     const s = folha(t);
     const campo = useCampo();
     const inativo = disabled ?? campo?.disabled;
-    return (_jsx(View, { accessibilityRole: "radiogroup", accessibilityLabel: label ?? campo?.label, style: [s.segmentada, inativo && s.desabilitado, style], ...rest, children: items.map((it) => {
-            const ativo = it.value === value;
-            return (_jsxs(Pressable, { onPress: inativo ? undefined : () => onChange?.(it.value), disabled: inativo, accessibilityRole: "radio", accessibilityState: { checked: ativo, disabled: !!inativo }, accessibilityLabel: typeof it.label === "string" ? it.label : undefined, style: [s.segmento, ativo && s.segmentoAtivo], children: [typeof it.label === "string"
-                        ? _jsx(Text, { size: "sm", weight: ativo ? 600 : 400, 
-                            // 🔴 ERA `foreground`, E ISSO QUEBRAVA A LINGUAGEM DE SELECIONADO.
-                            // Achado pelo consumidor em 17/09/2026. A web pinta o escolhido com a
-                            // MARCA (`aurea.css:937-938`), e o comentário de cima daquela regra diz
-                            // que nav ativo, aba ativa, item de lista e botão ligado mostram o mesmo
-                            // sinal — ordem do Victor, 24/07. O `SegmentedControl` daqui discordava
-                            // da web **e do `BottomNav` deste mesmo pacote**, que já usa este token.
-                            //
-                            // ⚠ **`primaryEmphasis` e NÃO `primary`, e a razão está no CSS:** *"sem
-                            // fundo, a marca vira TEXTO, e o amarelo puro"* não se lê no claro
-                            // (`aurea.css:358`). É a mesma lição que a `0.8.3` pagou no `Button`.
-                            // No escuro os dois valem o mesmo amarelo; no claro este aprofunda.
-                            //
-                            // ⚠ **Uma divergência declarada, não escondida:** para o `.segmented` a
-                            // web usa uma mistura própria (`primary 45% + foreground`) em vez do
-                            // token, enquanto para o `.bottom-nav` usa o token. São dois âmbares
-                            // parecidos para a MESMA linguagem, e isso é incoerência DA WEB. Escolhi
-                            // o token, que deixa os dois componentes daqui iguais entre si.
-                            style: { color: ativo ? t.color.primaryEmphasis : t.color.mutedForeground }, children: it.label })
-                        : it.label, ativo && _jsx(View, { style: s.fioDoSegmento })] }, it.value));
-        }) }));
+    return (_jsx(FilaRolante, { children: _jsx(View, { accessibilityRole: "radiogroup", accessibilityLabel: label ?? campo?.label, style: [s.segmentada, inativo && s.desabilitado, style], ...rest, children: items.map((it) => {
+                const ativo = it.value === value;
+                return (_jsxs(Pressable, { onPress: inativo ? undefined : () => onChange?.(it.value), disabled: inativo, accessibilityRole: "radio", accessibilityState: { checked: ativo, disabled: !!inativo }, accessibilityLabel: typeof it.label === "string" ? it.label : undefined, style: [s.segmento, ativo && s.segmentoAtivo], children: [typeof it.label === "string"
+                            ? _jsx(Text, { size: "sm", weight: ativo ? 600 : 400, 
+                                // 🔴 ERA `foreground`, E ISSO QUEBRAVA A LINGUAGEM DE SELECIONADO.
+                                // Achado pelo consumidor em 17/09/2026. A web pinta o escolhido com a
+                                // MARCA (`aurea.css:937-938`), e o comentário de cima daquela regra diz
+                                // que nav ativo, aba ativa, item de lista e botão ligado mostram o mesmo
+                                // sinal — ordem do Victor, 24/07. O `SegmentedControl` daqui discordava
+                                // da web **e do `BottomNav` deste mesmo pacote**, que já usa este token.
+                                //
+                                // ⚠ **`primaryEmphasis` e NÃO `primary`, e a razão está no CSS:** *"sem
+                                // fundo, a marca vira TEXTO, e o amarelo puro"* não se lê no claro
+                                // (`aurea.css:358`). É a mesma lição que a `0.8.3` pagou no `Button`.
+                                // No escuro os dois valem o mesmo amarelo; no claro este aprofunda.
+                                //
+                                // ⚠ **Uma divergência declarada, não escondida:** para o `.segmented` a
+                                // web usa uma mistura própria (`primary 45% + foreground`) em vez do
+                                // token, enquanto para o `.bottom-nav` usa o token. São dois âmbares
+                                // parecidos para a MESMA linguagem, e isso é incoerência DA WEB. Escolhi
+                                // o token, que deixa os dois componentes daqui iguais entre si.
+                                style: { color: ativo ? t.color.primaryEmphasis : t.color.mutedForeground }, children: it.label })
+                            : it.label, ativo && _jsx(View, { style: s.fioDoSegmento })] }, it.value));
+            }) }) }));
 }
 /**
  * A escolha de um de muitos.
@@ -462,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;
@@ -472,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.d.ts

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

package/dist/layout.js

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

package/dist/navigation.js

@@ -1,10 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Pressable, View, ScrollView } from "react-native";
+import { Pressable, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Badge } from "./display.js";
 import { comOpacidade, criarFolha } from "./estilos.js";
 import { Icon } from "./icon.js";
 import { Card } from "./layout.js";
+import { FilaRolante } from "./rolagem.js";
 import { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens } from "./theme.js";
 const folha = criarFolha((t) => ({
@@ -317,10 +318,7 @@ export function Tabs({ tabs, value, onChange, label, style, ...rest }) {
     const s = folha(t);
     const strings = useAureaStrings();
     const aberta = tabs.find((it) => it.id === value);
-    return (_jsxs(View, { style: style, ...rest, children: [_jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, 
-                // Sem isto o conteúdo estica até a largura do rolador e o `padding` de 3 da cápsula
-                // aparece como faixa vazia à direita quando as abas cabem.
-                contentContainerStyle: { flexGrow: 0 }, children: _jsx(View, { accessibilityRole: "tablist", accessibilityLabel: label ?? strings.tabsLabel, style: s.abas, children: tabs.map((it) => {
+    return (_jsxs(View, { style: style, ...rest, children: [_jsx(FilaRolante, { children: _jsx(View, { accessibilityRole: "tablist", accessibilityLabel: label ?? strings.tabsLabel, style: s.abas, children: tabs.map((it) => {
                         const ativa = it.id === value;
                         return (_jsx(Pressable, { onPress: it.disabled ? undefined : () => onChange?.(it.id), disabled: it.disabled, accessibilityRole: "tab", accessibilityState: { selected: ativa, disabled: !!it.disabled }, accessibilityLabel: typeof it.label === "string" ? it.label : undefined, style: [s.abaDeTab, ativa && s.abaDeTabAtiva, it.disabled && { opacity: 0.5 }], children: typeof it.label === "string"
                                 ? _jsx(Text, { size: "sm", weight: ativa ? 600 : 400, style: { color: ativa ? t.color.foreground : t.color.mutedForeground }, children: it.label })

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/rolagem.d.ts

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

package/dist/rolagem.js

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

package/dist/text.js

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

package/dist/theme.d.ts

@@ -73,3 +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<SobreAMarcaValor | null>;
+/**
+ * O par de cores obrigatório quando se está sobre a marca, ou `null` quando não se está.
+ *
+ * ⚠ **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 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 usePeleSobreAMarca(): {
+    borderColor: string;
+    backgroundColor: string;
+    color: string;
+} | null;

package/dist/theme.js

@@ -109,3 +109,64 @@ export function useAureaTokens() {
 export function useAureaStrings() {
     return usar("useAureaStrings").strings;
 }
+const SobreAMarcaCtx = React.createContext(null);
+/** O provedor. Quem usa é o `Card variant="brand"`. */
+export const SobreAMarca = SobreAMarcaCtx;
+/**
+ * O par de cores obrigatório quando se está sobre a marca, ou `null` quando não se está.
+ *
+ * ⚠ **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 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.5",
+  "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.5"
+    "@aurea-uds/tokens": "^0.8.7"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8",