@aurea-uds/native 0.10.1 → 0.11.0

package/dist/actions.js

@@ -82,12 +82,24 @@ function pintar(t, tone) {
  *   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.
+ * ~~⚠ **O tom pedido é IGNORADO aqui**~~ — **E7, 25/09/2026: no botão CHEIO com tom, ele vale.**
+ * O Victor quis as cores (confirmar em verde, "agora não" em vermelho). Medido antes, nos dois
+ * temas: a letra sobre o próprio fundo do botão passa sempre (sucesso 6,3 e 9,39; perigo 4,57 e
+ * 6,32), mas o FUNDO do botão contra o amarelo não se distingue (sucesso no escuro **1,00**,
+ * perigo 1,51, aviso 1,36; no claro perigo 2,50) — o formato sumiria. Então o botão cheio com tom
+ * mantém a cor dele e ganha **contorno na tinta do cartão** (4,54 contra o amarelo): a cor diz o
+ * que ele faz, o contorno diz onde ele está.
+ *
+ * ⚠ **No contornado e no sem fundo o tom continua ignorado**: ali a letra colorida fica direto
+ * sobre o amarelo, e nenhum tom passa de 4,5 — obedecer entregaria um botão ilegível. O neutro e
+ * o da marca também seguem na tinta (neutro 1,61; marca é amarelo no amarelo, 1,00).
  */
-function pintarSobreAMarca(base, marca) {
+const TONS_COM_COR = new Set(["success", "danger", "warning", "info"]);
+function pintarSobreAMarca(base, marca, tone, appearance) {
     if (marca == null)
         return base;
+    if (appearance === "solid" && TONS_COM_COR.has(tone))
+        return { ...base, contorno: marca.tinta };
     return { solido: marca.tinta, texto: marca.fundo, sobre: marca.tinta };
 }
 const folha = criarFolha((t) => ({
@@ -131,22 +143,28 @@ export function Button({ children, appearance = "solid", tone = "neutral", size
     const t = useAureaTokens();
     const s = folha(t);
     const marca = useSobreAMarca();
-    const cor = pintarSobreAMarca(pintar(t, tone), marca);
+    const cor = pintarSobreAMarca(pintar(t, tone), marca, tone, appearance);
     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" ? corDaBorda : "transparent",
+        borderColor: cor.contorno ?? (appearance === "outline" ? corDaBorda : "transparent"),
         ...(fullWidth ? { flex: 1 } : null),
-    }), [t, size, appearance, cor.solido, corDaBorda, fullWidth]);
+    }), [t, size, appearance, cor.solido, cor.contorno, 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,
             tocando && s.pressionado, disabled && s.inerte,
         ], ...rest, children: _jsxs(View, { style: [s.caixa, caixa], children: [leading ?? null, leadingIcon ? _jsx(Icon, { name: leadingIcon, size: ICONE[size], color: corDoTexto, icons: icons }) : null, typeof children === "string"
-                    ? _jsx(Text, { size: FONTE[size], weight: 500, leading: "none", style: { color: corDoTexto }, children: children })
+                    // E1 (25/09/2026): entrelinha NORMAL (1,5), como o rótulo do botão do HeroUI Native
+                    // (`button.css`: `line-height: var(--text-*--line-height)`). Era `none` (1,0), e o IBM
+                    // Plex precisa de 1,3 em para caber inteiro (sobe 1,025 e desce 0,275): no Android o RN
+                    // corta o que passa da linha, e a perna do g, do p e do ç sumia. Cabe em todo tamanho e
+                    // densidade (medido): `xs`/`sm` têm linha de 21 e o menor botão mede 24 (compacto); os
+                    // maiores têm linha de 24 e medem 32 ou mais.
+                    ? _jsx(Text, { size: FONTE[size], weight: 500, leading: "normal", style: { color: corDoTexto }, children: children })
                     : children, trailingIcon ? _jsx(Icon, { name: trailingIcon, size: ICONE[size], color: corDoTexto, icons: icons }) : null, trailing ?? null] }) }));
 }
 /**
@@ -162,15 +180,15 @@ export function IconButton({ name, label, appearance = "ghost", tone = "neutral"
     const t = useAureaTokens();
     const s = folha(t);
     const marca = useSobreAMarca();
-    const cor = pintarSobreAMarca(pintar(t, tone), marca);
+    const cor = pintarSobreAMarca(pintar(t, tone), marca, tone, appearance);
     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" ? corDaBorda : "transparent",
-    }), [t, lado, size, appearance, cor.solido, corDaBorda]);
+        borderColor: cor.contorno ?? (appearance === "outline" ? corDaBorda : "transparent"),
+    }), [t, lado, size, appearance, cor.solido, cor.contorno, 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.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type StyleProp, type ViewStyle } from "react-native";
+import { type TextInputProps, type StyleProp, type ViewStyle } from "react-native";
 import { type IconName } from "./icon.js";
 import { type AureaFieldSize } from "./inputs.js";
 /** Uma linha do catálogo. **Mesma forma da web** (`ComboboxOption`), mais o `disabled` que o `Select` daqui já tinha. */
@@ -59,6 +59,13 @@ export interface ComboboxProps {
     chevron?: IconName | false;
     /** O glifo da lupa no campo da folha. Registre-o, ou passe `false`. */
     searchIcon?: IconName | false;
+    /**
+     * O teclado do campo de busca da folha — E6, 25/09/2026. Para buscar um ANO ou um código, passe
+     * `"number-pad"`: sem isto abre o teclado de letras. É o `keyboardType` do `TextInput`, com o
+     * mesmo prefixo `search` do `searchPlaceholder` e do `searchIcon`, que também são do campo da
+     * folha e não do gatilho. Padrão: o teclado de texto.
+     */
+    searchKeyboardType?: TextInputProps["keyboardType"];
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }
@@ -91,7 +98,7 @@ export interface ComboboxProps {
  * na web e pela mesma razão do achado I1 da auditoria: um componente com a sua própria cópia do
  * estado é a segunda fonte de verdade que ninguém sabe que existe.
  */
-export declare function Combobox({ items, value, onValueChange, onSearchChange, searchDelay, loading, onEndReached, placeholder, searchPlaceholder, empty, clearable, draggable, disabled, size, chevron, searchIcon, style, testID, }: ComboboxProps): React.JSX.Element;
+export declare function Combobox({ items, value, onValueChange, onSearchChange, searchDelay, loading, onEndReached, placeholder, searchPlaceholder, empty, clearable, draggable, disabled, size, chevron, searchIcon, searchKeyboardType, style, testID, }: ComboboxProps): React.JSX.Element;
 export interface SearchFieldProps {
     value?: string;
     onChangeText?: (v: string) => void;

package/dist/busca.js

@@ -68,6 +68,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // folha, e ele leva `search` — que mapeia nos dois.
 import * as React from "react";
 import { Animated, Easing, FlatList, Modal, PanResponder, Pressable, TextInput, View, } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { IconButton } from "./actions.js";
 import { criarFolha } from "./estilos.js";
 import { Spinner } from "./feedback.js";
@@ -130,7 +131,15 @@ const folha = criarFolha((t) => ({
     // para abrir. `accessible={false}` no JSX porque o gatilho JÁ anuncia tudo: um segundo botão
     // aqui seria a mesma informação duas vezes. O `Icon` sem rótulo já se esconde sozinho
     // (`icon.tsx:104`), então não sobra nada para o leitor de tela tropeçar.
-    setaToque: { height: "100%", justifyContent: "center" },
+    // E8 (25/09/2026): a seta tem a MESMA caixa de toque do X — `targetMin` (44) de altura mínima,
+    // conteúdo no meio —, e duas caixas iguais numa fila centralizada têm o mesmo centro, com ou
+    // sem o X. Era `height: "100%"`, e a fila `acoes` não tem altura: medido no Yoga 3 (o motor do
+    // RN), com a errata de compatibilidade (`Errata.All`) o 100% se resolvia errado — a seta ficava
+    // com 25 de altura e o centro dela 5 abaixo do centro do X e do campo, que é o que o app viu no
+    // Android. Nos outros modos o defeito some. Com a caixa igual, os três centros coincidem nas 18
+    // combinações medidas (3 erratas × campo de 32/36/40 × com e sem X), e o toque da seta sobe de
+    // 16 para 44 de altura.
+    setaToque: { minHeight: t.size.targetMin, justifyContent: "center" },
     // A folha, com a mesma anatomia da do `Select` (`inputs.tsx:98-113`) — e é de propósito que
     // sejam iguais: são o mesmo gesto, e duas folhas diferentes para o mesmo gesto é como uma
     // biblioteca deixa de ter linguagem.
@@ -202,7 +211,7 @@ const folha = criarFolha((t) => ({
  * na web e pela mesma razão do achado I1 da auditoria: um componente com a sua própria cópia do
  * estado é a segunda fonte de verdade que ninguém sabe que existe.
  */
-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, }) {
+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", searchKeyboardType, style, testID, }) {
     const t = useAureaTokens();
     const s = folha(t);
     const peleDaMarca = usePeleSobreAMarca();
@@ -297,7 +306,7 @@ export function Combobox({ items, value, onValueChange, onSearchChange, searchDe
                     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(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, 
+                ], 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; }, 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.
@@ -307,7 +316,7 @@ export function Combobox({ items, value, onValueChange, onSearchChange, searchDe
                                                 // `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: [
+                                                returnKeyType: "search", keyboardType: searchKeyboardType, style: [
                                                     s.campoDeTexto,
                                                     { fontSize: fonteDoTamanho(t, tam), fontFamily: t.font.ui[400],
                                                         color: t.color.foreground },
@@ -319,7 +328,7 @@ export function Combobox({ items, value, onValueChange, onSearchChange, searchDe
                                                 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(Text, { size: "md", weight: item.value === value?.value ? 600 : 400, children: item.label }) })) }), _jsx(SafeAreaView, { edges: ["bottom"] })] })] }) }) })] }));
 }
 // ── 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 é

package/dist/display.d.ts

@@ -57,22 +57,6 @@ export interface BadgeProps extends ViewProps {
     invisible?: boolean;
     children?: React.ReactNode;
 }
-/**
- * A pílula pequena — rótulo, contagem ou ponto.
- *
- * ⚠ **Ancorado, o número é DECORATIVO para o leitor de tela.** Ele some da árvore, e quem carrega
- * a informação é o rótulo de quem foi decorado. Sem isso o leitor anuncia *"sino, 8"* e a pessoa
- * não sabe o que é o 8 — regra lida em três fontes de acessibilidade em 17/08/2026 e registrada
- * no fonte da web. **Quem usa contagem ancorada escreve o rótulo do alvo**, sempre:
- *
- *     <Badge count={8} anchor="top-end">
- *       <IconButton name="notification" label="Avisos, 8 não lidos" onPress={abrir} />
- *     </Badge>
- *
- * ⚠ **`image`/`imageAlt` da web NÃO atravessaram.** Nenhuma das sete telas do consumidor medido
- * usa selo com miniatura, e prop sem consumidor é superfície pública para manter de graça. Volta
- * quando houver tela que peça.
- */
 export declare function Badge({ tone, emphasis, size, dot, count, max, showZero, leading, trailing, fit, anchor, badgeContent, invisible, children, style, ...rest }: BadgeProps): React.JSX.Element;
 export type AureaStatusVariant = "neutral" | "online" | "offline" | "busy" | "away" | "success" | "warning" | "danger" | "info";
 export interface StatusProps extends ViewProps {

package/dist/display.js

@@ -30,18 +30,27 @@ import { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens } from "./theme.js";
 const folha = criarFolha((t) => ({
     // ── Badge ──────────────────────────────────────────────────────────────────────────────────
-    // `3px 9px` de padding e `gap:6` são crus no CSS e entram como estão: são a medida da peça na
-    // web, e arredondá-los para token faria a mesma pílula ter duas larguras nos dois alvos.
+    // 🔴 AS MEDIDAS SÃO AS DO `Chip` DO HeroUI NATIVE (1.0.10, `chip.css`) — ordem do Victor de
+    // 25/09/2026: "se o HeroUI já tem, vamos usar as deles". Recheio, letra, linha e vão:
+    //     sm  8 × 2  · letra 12 · linha 16        md  12 × 4 · letra 14 · linha 20
+    //     lg  16 × 6 · letra 16 · linha 24        vão 4 entre ponto, texto e adornos
+    // Até a 0.10.1 eram `3px 9px` e `gap:6` crus, e o texto saía com entrelinha 1,0: no Android a
+    // perna do g e do p era cortada (a mesma causa do E1 no `Button`). A linha do HeroUI é ≥ 1,33 ×
+    // a letra, e o IBM Plex precisa de 1,3. O raio continua a cápsula da Aurea (identidade) e a
+    // borda continua nossa.
+    // ⚠ O `xs` NÃO existe no HeroUI (é o contador sobre ícone): fica a medida nossa, 16 de altura,
+    // agora com letra 12 e linha 16 para caber a letra inteira.
     selo: {
-        flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 6,
-        minHeight: t.size.space6, paddingVertical: 3, paddingHorizontal: 9,
+        flexDirection: "row", alignItems: "center", justifyContent: "center", gap: t.size.space1,
+        paddingVertical: t.size.space1, paddingHorizontal: t.size.space3,
         borderWidth: t.size.borderWidth, borderRadius: t.size.radiusControl,
         backgroundColor: t.color.secondary, borderColor: t.color.border,
     },
     selo_xs: { minHeight: t.size.space4, paddingVertical: 0, paddingHorizontal: t.size.space1, borderWidth: 0 },
-    selo_sm: { minHeight: t.size.space5, paddingVertical: 0, paddingHorizontal: t.size.space2 },
+    selo_sm: { paddingVertical: t.size.space05, paddingHorizontal: t.size.space2 },
     selo_md: {},
-    selo_lg: { minHeight: t.size.space7, paddingVertical: 0, paddingHorizontal: t.size.space3 },
+    // 6 de recheio vertical: no HeroUI é `calc(var(--spacing) * 1.5)`, e `--spacing` é o `space1`.
+    selo_lg: { paddingVertical: t.size.space1 * 1.5, paddingHorizontal: t.size.space4 },
     ponto: { width: t.size.space2, height: t.size.space2, borderRadius: t.size.radiusFull },
     // `fit="content"` (R-01): o mesmo `alignSelf` que a âncora abaixo já usa para não esticar.
     justo: { alignSelf: "flex-start" },
@@ -85,6 +94,11 @@ export const formatarContagem = (count, max = 99) => count > max ? `${max}+` : S
  * usa selo com miniatura, e prop sem consumidor é superfície pública para manter de graça. Volta
  * quando houver tela que peça.
  */
+/** A letra e a linha do selo, do `Chip` do HeroUI Native (ver a folha). O token direto, e não o
+ *  `size` do `Text`, que no telefone sobe um degrau (ADR-0050) — o HeroUI não sobe no chip. */
+const LETRA_DO_SELO = (t, size) => size === "lg" ? { fontSize: t.size.textBase, lineHeight: t.size.space6 }
+    : size === "md" ? { fontSize: t.size.textSm, lineHeight: t.size.space5 }
+        : { fontSize: t.size.textXs, lineHeight: t.size.space4 };
 export function Badge({ tone = "neutral", emphasis = "soft", size = "md", dot, count, max = 99, showZero, leading, trailing, fit = "auto", anchor, badgeContent, invisible, children, style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
@@ -123,7 +137,7 @@ export function Badge({ tone = "neutral", emphasis = "soft", size = "md", dot, c
             style,
         ], ...(anchor ? { accessibilityElementsHidden: true,
             importantForAccessibility: "no-hide-descendants" } : rest), children: [dot && !soPonto && _jsx(View, { style: [s.ponto, { backgroundColor: corDoTexto }] }), !soPonto && leading, typeof miolo === "string" || typeof miolo === "number"
-                ? _jsx(Text, { size: size === "lg" ? "sm" : "xs", weight: 500, leading: "none", style: { color: corDoTexto }, children: miolo })
+                ? _jsx(Text, { weight: 500, style: [LETRA_DO_SELO(t, size), { color: corDoTexto }], children: miolo })
                 : miolo, !soPonto && trailing] }));
     if (!anchor)
         return selo;

package/dist/index.d.ts

@@ -42,3 +42,4 @@ export { NumberField, formatarNumero, lerNumero, separadoresDoLocale } from "./n
 export type { NumberFieldProps, AureaSeparadores } from "./numero.js";
 export { Image, Gallery } from "./midia.js";
 export type { ImageProps, GalleryProps, AureaGalleryItem, AureaImageSource, } from "./midia.js";
+export type { AureaFilaJustify } from "./rolagem.js";

package/dist/inputs.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { TextInput, type KeyboardTypeOptions, type StyleProp, type TextInputProps, type TextStyle, type ViewProps, type ViewStyle } from "react-native";
+import { type AureaFilaJustify } from "./rolagem.js";
 import { type AureaIconRegistry, type IconName } from "./icon.js";
 export type AureaFieldSize = "sm" | "md" | "lg";
 type ContextoDeCampo = {
@@ -150,6 +151,12 @@ interface ControleProps {
     size?: AureaFieldSize;
     style?: StyleProp<ViewStyle>;
     testID?: string;
+    /**
+     * Onde a marca fica na altura do texto — E5, 25/09/2026. `center` (o padrão) põe a marca no meio
+     * do bloco, como o HeroUI Native (`radio.css` e `control-field.css`: `align-items: center`).
+     * `start` a põe no meio da PRIMEIRA linha, para rótulo longo, de várias linhas.
+     */
+    align?: "center" | "start";
     /**
      * O nome para quem usa leitor de tela, quando ele NÃO deve aparecer escrito no controle.
      *
@@ -275,6 +282,8 @@ export interface SegmentedControlProps extends ViewProps {
     /** Nome do grupo para o leitor de tela. */
     label?: string;
     disabled?: boolean;
+    /** Onde o controle fica quando cabe na linha: `start` (padrão), `center` ou `end` (E3). */
+    justify?: AureaFilaJustify;
 }
 /**
  * Um de poucos, lado a lado.
@@ -284,7 +293,7 @@ export interface SegmentedControlProps extends ViewProps {
  * há teclado aqui**, então o que resta é o que já se faz à mão: papel de grupo de rádio, um
  * `radio` por segmento, e o estado `selected` em quem está escolhido.
  */
-export declare function SegmentedControl({ items, value, onChange, label, disabled, style, ...rest }: SegmentedControlProps): React.JSX.Element;
+export declare function SegmentedControl({ items, value, onChange, label, disabled, justify, style, ...rest }: SegmentedControlProps): React.JSX.Element;
 export interface SelectProps {
     items: Array<{
         value: string;

package/dist/inputs.js

@@ -39,6 +39,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 //   .segmented     :922            linha, gap 3, padding 3, minH controlHMd, fundo muted
 import * as React from "react";
 import { Animated, KeyboardAvoidingView as KeyboardAvoidingViewRN, Modal, Platform, Pressable, ScrollView, TextInput, View, } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { comOpacidade, criarFolha } from "./estilos.js";
 import { FilaRolante } from "./rolagem.js";
 import { IconButton } from "./actions.js";
@@ -79,11 +80,14 @@ const folha = criarFolha((t) => ({
     campoNoGrupo: { flex: 1, minWidth: 0, paddingVertical: 0, textAlignVertical: "center" },
     encaixe: { flexDirection: "row", alignItems: "center", flexShrink: 0, gap: t.size.space1 },
     marcaBase: {
-        alignItems: "center", justifyContent: "center", marginTop: 1,
+        alignItems: "center", justifyContent: "center",
         borderWidth: t.size.borderWidth, borderColor: t.color.borderStrong,
         backgroundColor: t.color.fieldBg,
     },
-    linhaDeControle: { flexDirection: "row", alignItems: "flex-start", gap: 9 },
+    // E5: a marca no MEIO da altura do texto, como o HeroUI Native. Era `flex-start` com um
+    // `marginTop: 1` fixo, e a bolinha ficava presa no topo do rótulo.
+    linhaDeControle: { flexDirection: "row", alignItems: "center", gap: 9 },
+    linhaNoTopo: { alignItems: "flex-start" },
     trilho: { borderRadius: t.size.radiusFull, backgroundColor: t.color.muted,
         borderWidth: t.size.borderWidth, borderColor: t.color.border, justifyContent: "center" },
     polegar: { position: "absolute", left: 3, borderRadius: t.size.radiusFull },
@@ -327,7 +331,7 @@ export function PasswordField({ defaultVisible = false, size, disabled, autoCapi
     const inativo = disabled ?? campo?.disabled;
     return (_jsxs(InputGroup, { size: tam, disabled: inativo, testID: testID, children: [leading ? _jsx(InputGroupAddon, { children: leading }) : null, _jsx(Input, { ...rest, size: tam, disabled: inativo, autoCapitalize: autoCapitalize, secureTextEntry: !visivel, style: style, testID: testID ? `${testID}-campo` : undefined }), _jsx(InputGroupAddon, { children: _jsx(IconButton, { name: visivel ? "view--off" : "view", label: visivel ? strings.passwordHide : strings.passwordShow, appearance: "ghost", size: tam === "lg" ? "md" : "sm", disabled: inativo, icons: icons, onPress: () => setVisivel(v => !v), testID: testID ? `${testID}-olho` : undefined }) })] }));
 }
-function ControleMarcado({ papel, label, description, checked, onChange, disabled, size, style, testID, accessibilityLabel, }) {
+function ControleMarcado({ papel, label, description, checked, onChange, disabled, size, style, testID, accessibilityLabel, align = "center", }) {
     const t = useAureaTokens();
     const s = folha(t);
     const campo = useCampo();
@@ -339,12 +343,16 @@ function ControleMarcado({ papel, label, description, checked, onChange, disable
     // A marca é METADE da altura do controle — `aurea.css:871`, e é o que faz ela crescer junto
     // com a densidade sem token próprio.
     const lado = alturaDoTamanho(t, tam) / 2;
+    // `start`: o meio da marca no meio da PRIMEIRA linha do rótulo. A linha é a do `Text size="sm"`
+    // do rótulo (entrelinha normal), então a conta sai dos mesmos tokens que desenham o texto.
+    const linha = t.size.textBase * t.size.leadingNormal;
+    const noTopo = align === "start" ? { marginTop: Math.max(0, (linha - lado) / 2) } : null;
     return (_jsxs(Pressable, { testID: testID, onPress: inativo ? undefined : () => onChange?.(!checked), disabled: inativo, accessibilityRole: papel, accessibilityState: { checked: !!checked, disabled: !!inativo }, 
         // ⚠ O `accessibilityLabel` de fora vence o `label` escrito, e existe para o caso em que o
         // nome JÁ está na tela ao lado — uma linha de `NavList`, por exemplo. Sem ele, ou o nome
         // aparece escrito duas vezes, ou o controle sobe MUDO para quem usa leitor de tela.
-        accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : campo?.label), accessibilityHint: typeof description === "string" ? description : campo?.hint, style: [s.linhaDeControle, inativo && s.desabilitado, style], children: [_jsx(View, { style: [
-                    s.marcaBase,
+        accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : campo?.label), accessibilityHint: typeof description === "string" ? description : campo?.hint, style: [s.linhaDeControle, align === "start" && s.linhaNoTopo, inativo && s.desabilitado, style], children: [_jsx(View, { style: [
+                    s.marcaBase, noTopo,
                     { width: lado, height: lado,
                         borderRadius: papel === "radio" ? t.size.radiusFull : 5 },
                     checked && { backgroundColor: t.color.controlSelected, borderColor: t.color.controlSelected },
@@ -452,12 +460,12 @@ export function Switch({ label, description, checked, onChange, disabled, size,
  * há teclado aqui**, então o que resta é o que já se faz à mão: papel de grupo de rádio, um
  * `radio` por segmento, e o estado `selected` em quem está escolhido.
  */
-export function SegmentedControl({ items, value, onChange, label, disabled, style, ...rest }) {
+export function SegmentedControl({ items, value, onChange, label, disabled, justify, style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
     const campo = useCampo();
     const inativo = disabled ?? campo?.disabled;
-    return (_jsx(FilaRolante, { children: _jsx(View, { accessibilityRole: "radiogroup", accessibilityLabel: label ?? campo?.label, style: [s.segmentada, inativo && s.desabilitado, style], ...rest, children: items.map((it) => {
+    return (_jsx(FilaRolante, { justify: justify, 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, 
@@ -519,7 +527,7 @@ export function Select({ items, value, onChange, placeholder, disabled, size, ch
                     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: 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))) }) })] }) }) })] }));
+                ], 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(SafeAreaView, { edges: ["bottom"], style: s.lista, 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/navigation.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { type ViewProps } from "react-native";
 import { type IconName } from "./icon.js";
+import { type AureaFilaJustify } from "./rolagem.js";
 export interface AureaNavItem {
     id: string;
     label: React.ReactNode;
@@ -197,6 +198,8 @@ export interface TabsProps extends ViewProps {
     onChange?: (id: string) => void;
     /** Nome da fila de abas para o leitor de tela. */
     label?: string;
+    /** Onde a fila de abas fica quando cabe: `start` (padrão), `center` ou `end` (E3). */
+    justify?: AureaFilaJustify;
 }
 /**
  * As abas DENTRO da tela — trocar o painel, não trocar de página.
@@ -231,4 +234,4 @@ export interface TabsProps extends ViewProps {
  * largura de tela grande. Não há tablet medido neste projeto, e no nativo vale demanda antes de
  * cobertura — a mesma decisão da `Table` do Lote 6.
  */
-export declare function Tabs({ tabs, value, onChange, label, style, ...rest }: TabsProps): React.JSX.Element;
+export declare function Tabs({ tabs, value, onChange, label, justify, style, ...rest }: TabsProps): React.JSX.Element;

package/dist/navigation.js

@@ -413,12 +413,12 @@ export function Stepper({ items, label, doneIcon = "checkmark", errorIcon = "err
  * largura de tela grande. Não há tablet medido neste projeto, e no nativo vale demanda antes de
  * cobertura — a mesma decisão da `Table` do Lote 6.
  */
-export function Tabs({ tabs, value, onChange, label, style, ...rest }) {
+export function Tabs({ tabs, value, onChange, label, justify, style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
     const strings = useAureaStrings();
     const aberta = tabs.find((it) => it.id === value);
-    return (_jsxs(View, { style: style, ...rest, children: [_jsx(FilaRolante, { children: _jsx(View, { accessibilityRole: "tablist", accessibilityLabel: label ?? strings.tabsLabel, style: s.abas, children: tabs.map((it) => {
+    return (_jsxs(View, { style: style, ...rest, children: [_jsx(FilaRolante, { justify: justify, 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: t.size.opacityDisabled }], 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/overlays.js

@@ -57,6 +57,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // mesma função interna com uma largura diferente.
 import * as React from "react";
 import { Animated, Easing, Modal, PanResponder, Pressable, ScrollView, View, } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { Button } from "./actions.js";
 import { criarFolha } from "./estilos.js";
 import { IconButton } from "./actions.js";
@@ -133,8 +134,14 @@ const DURACAO = 280;
 // afirmação mais forte que "passou no teste", mas não é o vidro. Foi exatamente confiar em
 // "passou no teste" que produziu a primeira tentativa.
 //
-// O `naoAtravessa` FICA no painel como segunda linha: agora é redundante, e redundância que
-// não custa nada num caminho que já falhou uma vez se paga.
+// ~~O `naoAtravessa` FICA no painel como segunda linha: agora é redundante, e redundância que
+// não custa nada num caminho que já falhou uma vez se paga.~~ — **E4, 25/09/2026: ela CUSTAVA.**
+// No Android, um `View` que vira dono do toque pelo JavaScript passa a interceptar os movimentos
+// seguintes (`JSResponderHandler.onInterceptTouchEvent`), e o `ScrollView` de dentro deixa de
+// rolar. O app viu a lista do `Select` e a do `Combobox` sem rolar; a suspeita não está confirmada
+// no aparelho, mas a linha era redundante por construção e saiu dos painéis que têm rolagem dentro
+// (`Dialog`, `Drawer`, `Select`, `Combobox`). Fica no `ConfirmDialog` (sem fundo tocável e sem
+// rolagem) e no `BottomSheet`, onde os `panHandlers` do arrasto já a sobrescrevem.
 //
 // ⚠ Vale para os QUATRO que têm esta forma: `Dialog`, `Drawer`, `BottomSheet` e o `Select` do
 // Lote 4 (`inputs.tsx`). O `ConfirmDialog` é imune desde que nasceu — o fundo dele não tem
@@ -157,7 +164,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(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] })] }) }) }));
+    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, { 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.
@@ -229,7 +236,7 @@ export function Drawer({ open, title, children, onClose, side = "right", scroll
         inputRange: [0, 1],
         outputRange: [side === "right" ? 480 : -480, 0],
     });
-    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: [
+    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, { 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 })] })] }) }) }));
@@ -287,5 +294,5 @@ export function BottomSheet({ open, title, children, onClose, grabber = true, dr
             }).start();
         },
     }), [draggable, onClose, arrasto, reduzir, t.easing.easeEmphasized]);
-    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 })] })] }) }) }));
+    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 }), _jsx(SafeAreaView, { edges: ["bottom"] })] })] }) }) }));
 }

package/dist/rolagem.d.ts

@@ -6,11 +6,18 @@ export interface FilaRolanteProps {
     /** Estilo do invólucro externo, não do conteúdo. */
     style?: StyleProp<ViewStyle>;
     testID?: string;
+    /**
+     * Onde a fila fica quando CABE — E3, 25/09/2026. `start` (o padrão, o de sempre), `center` ou
+     * `end`. Quando não cabe, ela rola, e o alinhamento deixa de existir: começa no início.
+     */
+    justify?: AureaFilaJustify;
 }
+/** Onde a fila fica, na linha, quando cabe. O nome é o do `Cluster` (R-09): o eixo da fileira. */
+export type AureaFilaJustify = "start" | "center" | "end";
 /**
  * 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;
+export declare function FilaRolante({ children, style, testID, justify }: FilaRolanteProps): React.JSX.Element;

package/dist/rolagem.js

@@ -25,13 +25,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // iOS.** O que está provado aqui é a medição, não a leitura.
 import * as React from "react";
 import { ScrollView } from "react-native";
+const JUSTIFICAR = { center: "center", end: "flex-end" };
 /**
  * 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 }) {
+export function FilaRolante({ children, style, testID, justify = "start" }) {
     const [visivel, setVisivel] = React.useState(0);
     const [conteudo, setConteudo] = React.useState(0);
     const transbordou = conteudo > visivel && visivel > 0;
@@ -41,5 +42,9 @@ export function FilaRolante({ children, style, testID }) {
         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 }));
+        // E3: centralizar ou ir para o fim exige o contrário — o recipiente do conteúdo cresce até a
+        // largura do rolador (`flexGrow: 1`) e POSICIONA a cápsula lá dentro. Ela não estica: na
+        // fileira, o filho tem a largura dele. Medido pelo app: rolador 335 de largura, fileira 281,
+        // encostada à esquerda, e um `Cluster justify="center"` em volta não mudava nada.
+        contentContainerStyle: justify === "start" ? { flexGrow: 0 } : { flexGrow: 1, justifyContent: JUSTIFICAR[justify] }, style: style, children: children }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/native",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "A Aurea UDS para React Native: o provider de tema e densidade, os componentes e os ícones do Carbon sobre react-native-svg.",
   "keywords": [
     "aurea",
@@ -51,7 +51,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@aurea-uds/tokens": "^0.10.1"
+    "@aurea-uds/tokens": "^0.11.0"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8",