@dloizides/ui-nav 1.9.0 → 1.10.1

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # Changelog
 
+## 1.10.1
+
+- **Fix (a plain-string slot logged `console.error` on EVERY render, in all seven portals).**
+  Every caller-supplied slot in the kit is typed `React.ReactNode`, which legitimately includes
+  `string` — and callers pass exactly that (`brand: FM('app.name')`, a plain localized string).
+  The slot was dropped straight into a `<View>`, and react-native-web refuses to render a bare
+  text node there: `Unexpected text node: <s>. A text node cannot be a child of a <View>.`
+  Nothing in the type system objected, so the defect only ever surfaced as browser console
+  noise — which is why it survived to 1.10.0 across the whole fleet.
+  - Fixed once, in the kit, via the new internal `renderTextSlot` helper: a `string`/`number`
+    slot is wrapped in `<Text>` (routed through the theme's `colors.text`, so it honours dark
+    mode rather than defaulting to black); an element slot passes through **untouched**, so
+    every existing caller renders byte-identically. Array slots have each string member wrapped
+    individually, keys preserved.
+  - Applied to **all 12 slot render sites**, not just the reported one — `NavBar` (`brand`,
+    `right`), `Topbar` (`left`, `notificationSlot`), `Sidebar` (`header`, `footer`),
+    `CollapsedRail` (`header`, `footer`), `AppShell` (`header`, `nav`, `sidebar`,
+    `collapsedSidebar`, `banner`) and `MobileDrawer` (`sidebar`).
+  - Guarded by `src/rawTextSlots.test.tsx`, which spies on `console.error` and asserts silence.
+    Unit tests that only assert "the slot rendered" pass against the bug; this one does not.
+  - **No API change.** Consumers need no edit — the `<Text>` wrapper they were expected to
+    remember is now the kit's job.
+
+## 1.10.0
+
+- **Fix (`layout` was not authoritative — `layout="side"` rendered a top bar anyway).**
+  `wantsTopBar` carried an extra `(layout === 'side' && hasTopBar)` clause, so passing a
+  `topBar` **config** with `layout="side"` mounted the bar regardless — making `'side'` and
+  `'both'` render **pixel-identically** and `layout` unobservable. `layout` now decides which
+  REGIONS exist; `topBar` is only the CONTENT of the top region. A `'side'` app that also wants
+  a bar asks for `layout="both"`, which is what that combination always meant.
+  - Found by `apps/ui-showcase`, which renders every orientation side by side — a product app
+    picks ONE orientation and never sees the other, which is why this survived to 1.9.0.
+  - **Not breaking in this fleet:** no app passed `layout="side"` + `topBar`. The four `'side'`
+    portals (erevna, katalogos, zygos, agora) pass a `header` NODE, not a `topBar` config.
+  - The `hasHeader` clause is **deliberately kept**: `header` is the documented escape hatch by
+    which a `'side'` app supplies its own ready-made header (the structured `Topbar` with
+    language / notification / user slots). It is an explicit "render THIS node", not a config
+    whose presence is silently read as an orientation change.
+- **a11y: `AccountState.accountHint`** — the account-name button's `accessibilityHint` was
+  hardcoded to `displayName`, byte-identical to its `accessibilityLabel`, so a screen reader
+  announced the name twice and never said what pressing it does — and the consumer had no way
+  to correct it. The sibling `upgrade?: TopbarAction` on the same interface has always carried
+  a `hint`; this closes that inconsistency. Falls back to `displayName`, so existing callers
+  are unaffected.
+- **a11y: `AccountState.accountTestID`** — the account-name button's testID was hardcoded, with
+  no override, unlike `TopbarAction.testID?` / `NavItem.testID?` elsewhere in the package.
+- **a11y: `Topbar.language.testID`** — the inline `language` prop type declared no `testID`, so
+  the repo's testID+label+hint standard was **structurally unsatisfiable** for that one button
+  while every other Topbar action (all `TopbarAction`) accepted one.
+
+> Note for consumers: this react-native-web build does **not** forward `accessibilityHint` to
+> the DOM at all — rendered buttons carry `aria-label` but no hint attribute. The hint is a
+> NATIVE-only guarantee today. That is pre-existing and unchanged here, but it means DOM-level
+> tests cannot distinguish a threaded hint from a dropped one; `topbarA11y.test.tsx` therefore
+> pins the prop threading directly.
+
 ## 1.9.0
 
 **`NavBar.contentMaxWidth` — a full-bleed bar with a centred content column.**

package/dist/index.d.mts

@@ -120,16 +120,34 @@ interface AccountState {
     plan?: AccountPlan;
     onLogout: () => void;
     onAccount?: () => void;
+    /**
+     * a11y hint for the account-name button (what pressing it DOES).
+     *
+     * Without this the hint fell back to `displayName` — byte-identical to the
+     * accessibility LABEL, so a screen reader announced the name twice and never
+     * said where the button goes. The sibling `upgrade?: TopbarAction` on this very
+     * interface has always carried a `hint`; this closes that inconsistency. The
+     * `displayName` fallback is retained so existing callers are unaffected.
+     */
+    accountHint?: string;
+    /** testID for the account-name button. Defaults to `NAV_TEST_IDS.accountName`. */
+    accountTestID?: string;
     upgrade?: TopbarAction;
 }
 interface TopbarProps {
     /** Left slot — typically the tenant logo. */
     left?: React.ReactNode;
-    /** Optional language toggle. */
+    /**
+     * Optional language toggle. `testID` is optional but the repo standard wants
+     * one — before 1.10.0 this inline type declared none, so a testID was
+     * structurally unreachable for this button while every other Topbar action
+     * (which use `TopbarAction`) accepted one.
+     */
     language?: {
         label: string;
         hint: string;
         onPress: () => void;
+        testID?: string;
     };
     /** Optional notification slot (e.g. a notification bell). */
     notificationSlot?: React.ReactNode;
@@ -591,8 +609,9 @@ interface NavShellProps extends ForwardedShellProps {
     navigateHint?: (label: string) => string;
     /**
      * Top-bar config → a `NavBar` in the header slot. Required for `'top'` /
-     * `'both'`; ignored for `'side'` unless supplied (a `'side'` app may still pass
-     * a `topBar` with empty `items` for its brand + user header).
+     * `'both'`; **ignored for `'side'`** — `layout` decides which regions exist, so
+     * a `'side'` app that also wants a bar asks for `layout="both"`. A `'side'` app
+     * that wants its OWN header node uses the `header` escape hatch instead.
      */
     topBar?: NavShellTopBar;
     /**

package/dist/index.d.ts

@@ -120,16 +120,34 @@ interface AccountState {
     plan?: AccountPlan;
     onLogout: () => void;
     onAccount?: () => void;
+    /**
+     * a11y hint for the account-name button (what pressing it DOES).
+     *
+     * Without this the hint fell back to `displayName` — byte-identical to the
+     * accessibility LABEL, so a screen reader announced the name twice and never
+     * said where the button goes. The sibling `upgrade?: TopbarAction` on this very
+     * interface has always carried a `hint`; this closes that inconsistency. The
+     * `displayName` fallback is retained so existing callers are unaffected.
+     */
+    accountHint?: string;
+    /** testID for the account-name button. Defaults to `NAV_TEST_IDS.accountName`. */
+    accountTestID?: string;
     upgrade?: TopbarAction;
 }
 interface TopbarProps {
     /** Left slot — typically the tenant logo. */
     left?: React.ReactNode;
-    /** Optional language toggle. */
+    /**
+     * Optional language toggle. `testID` is optional but the repo standard wants
+     * one — before 1.10.0 this inline type declared none, so a testID was
+     * structurally unreachable for this button while every other Topbar action
+     * (which use `TopbarAction`) accepted one.
+     */
     language?: {
         label: string;
         hint: string;
         onPress: () => void;
+        testID?: string;
     };
     /** Optional notification slot (e.g. a notification bell). */
     notificationSlot?: React.ReactNode;
@@ -591,8 +609,9 @@ interface NavShellProps extends ForwardedShellProps {
     navigateHint?: (label: string) => string;
     /**
      * Top-bar config → a `NavBar` in the header slot. Required for `'top'` /
-     * `'both'`; ignored for `'side'` unless supplied (a `'side'` app may still pass
-     * a `topBar` with empty `items` for its brand + user header).
+     * `'both'`; **ignored for `'side'`** — `layout` decides which regions exist, so
+     * a `'side'` app that also wants a bar asks for `layout="both"`. A `'side'` app
+     * that wants its OWN header node uses the `header` escape hatch instead.
      */
     topBar?: NavShellTopBar;
     /**

package/dist/index.js

@@ -2,14 +2,14 @@
 
 var reactNative = require('react-native');
 var uiFeedback = require('@dloizides/ui-feedback');
-var React5 = require('react');
+var React2 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var uiLayout = require('@dloizides/ui-layout');
 var authWeb = require('@dloizides/auth-web');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React5__default = /*#__PURE__*/_interopDefault(React5);
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 
 // src/Sidebar.tsx
 
@@ -299,21 +299,21 @@ var NavExpandableItem = ({
   renderChevron,
   depth = 0
 }) => {
-  const [expanded, setExpanded] = React5.useState(false);
-  const [focused, setFocused] = React5.useState(false);
+  const [expanded, setExpanded] = React2.useState(false);
+  const [focused, setFocused] = React2.useState(false);
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
-  const toggle = React5.useCallback(() => setExpanded((v) => !v), []);
+  const toggle = React2.useCallback(() => setExpanded((v) => !v), []);
   const indent = depth * BASE_INDENT;
   const hasChildren = Array.isArray(item.children) && item.children.length > 0;
   const isActive = isRouteActive(pathname, item.route);
-  const activeItemStyle = React5.useMemo(
+  const activeItemStyle = React2.useMemo(
     () => ({ backgroundColor: colors.border, borderRadius: ACTIVE_BORDER_RADIUS }),
     [colors.border]
   );
-  const paddingStyle = React5.useMemo(() => ({ paddingLeft: indent + BASE_INDENT }), [indent]);
-  const headerPaddingStyle = React5.useMemo(() => ({ paddingLeft: indent }), [indent]);
+  const paddingStyle = React2.useMemo(() => ({ paddingLeft: indent + BASE_INDENT }), [indent]);
+  const headerPaddingStyle = React2.useMemo(() => ({ paddingLeft: indent }), [indent]);
   if (!hasChildren)
     return /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.TouchableOpacity,
@@ -384,6 +384,17 @@ var NavExpandableItem = ({
     )) }) : null
   ] });
 };
+function isBareText(node) {
+  return typeof node === "string" || typeof node === "number";
+}
+function renderTextSlot(node, style) {
+  if (node === void 0 || node === null) return node;
+  if (isBareText(node)) return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style, children: node });
+  return React2__default.default.Children.map(
+    node,
+    (child) => isBareText(child) ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style, children: child }) : child
+  );
+}
 var Sidebar = ({
   items,
   pathname,
@@ -413,7 +424,7 @@ var Sidebar = ({
       ],
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { accessibilityRole: "header", style: [navStyles.sidebarTitle, { color: colors.text }], children: title }),
-        header,
+        renderTextSlot(header, { color: colors.text }),
         items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
           NavExpandableItem,
           {
@@ -428,7 +439,7 @@ var Sidebar = ({
           item.key
         )),
         /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navStyles.sidebarSpacer }),
-        footer
+        renderTextSlot(footer, { color: colors.text })
       ]
     }
   );
@@ -481,7 +492,7 @@ var FocusableTouchable = ({
   testID,
   children
 }) => {
-  const [focused, setFocused] = React5.useState(false);
+  const [focused, setFocused] = React2.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Pressable,
     {
@@ -531,7 +542,7 @@ var Topbar = ({
         containerStyle
       ],
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navStyles.topbarLeft, children: left }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navStyles.topbarLeft, children: renderTextSlot(left, { color: colors.text }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: navStyles.topbarRight, children: [
           language ? /* @__PURE__ */ jsxRuntime.jsx(
             FocusableTouchable,
@@ -540,11 +551,12 @@ var Topbar = ({
               accessibilityLabel: language.label,
               ringColor: primaryColor,
               style: navStyles.topbarRowItem,
+              testID: language.testID,
               onPress: language.onPress,
               children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.topbarLabel, { color: colors.text }], children: language.label })
             }
           ) : null,
-          notificationSlot,
+          renderTextSlot(notificationSlot, { color: colors.text }),
           user ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: navStyles.userBlock, children: [
             /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userName, { color: colors.text }], children: user.name }),
             /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userEmail, { color: colors.textSecondary }], children: user.email })
@@ -553,10 +565,10 @@ var Topbar = ({
             richAccount.onAccount ? /* @__PURE__ */ jsxRuntime.jsx(
               FocusableTouchable,
               {
-                accessibilityHint: richAccount.displayName,
+                accessibilityHint: richAccount.accountHint ?? richAccount.displayName,
                 accessibilityLabel: richAccount.displayName,
                 ringColor: primaryColor,
-                testID: NAV_TEST_IDS.accountName,
+                testID: richAccount.accountTestID ?? NAV_TEST_IDS.accountName,
                 onPress: richAccount.onAccount,
                 children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userName, { color: colors.text }], children: richAccount.displayName })
               }
@@ -633,8 +645,8 @@ var NavBarLink = ({
   navigateHint,
   onPress
 }) => {
-  const [hovered, setHovered] = React5.useState(false);
-  const [focused, setFocused] = React5.useState(false);
+  const [hovered, setHovered] = React2.useState(false);
+  const [focused, setFocused] = React2.useState(false);
   const isHovered = hovered && !isActive;
   const textColor = isActive ? TEXT_ON_PRIMARY2 : isHovered ? colors.hoverText : colors.rest;
   const pillStyle = isActive ? { backgroundColor: colors.activeBg } : isHovered ? { backgroundColor: colors.hoverBg } : void 0;
@@ -678,12 +690,12 @@ var NavOverflowMenu = ({
   testID,
   variant
 }) => {
-  const options = React5.useMemo(() => items.map((item) => ({ label: item.label, value: item.route })), [items]);
-  const activeRoute = React5.useMemo(
+  const options = React2.useMemo(() => items.map((item) => ({ label: item.label, value: item.route })), [items]);
+  const activeRoute = React2.useMemo(
     () => items.find((item) => isRouteActive(pathname, item.route))?.route ?? NO_ACTIVE_ROUTE,
     [items, pathname]
   );
-  const optionTestID = React5.useMemo(() => {
+  const optionTestID = React2.useMemo(() => {
     const byRoute = new Map(items.map((item) => [item.route, item.testID ?? item.key]));
     return (route) => byRoute.get(route) ?? `${testID}-option-${route}`;
   }, [items, testID]);
@@ -740,13 +752,13 @@ function resizeWidthBuffer(previous, count) {
   return next;
 }
 function useNavOverflow(itemCount, gap) {
-  const [availableWidth, setAvailableWidthState] = React5.useState(0);
-  const [moreWidth, setMoreWidthState] = React5.useState(0);
-  const [itemWidths, setItemWidths] = React5.useState(() => new Array(itemCount).fill(0));
-  React5.useEffect(() => {
+  const [availableWidth, setAvailableWidthState] = React2.useState(0);
+  const [moreWidth, setMoreWidthState] = React2.useState(0);
+  const [itemWidths, setItemWidths] = React2.useState(() => new Array(itemCount).fill(0));
+  React2.useEffect(() => {
     setItemWidths((previous) => previous.length === itemCount ? previous : resizeWidthBuffer(previous, itemCount));
   }, [itemCount]);
-  const setItemWidth = React5.useCallback((index, width) => {
+  const setItemWidth = React2.useCallback((index, width) => {
     setItemWidths((previous) => {
       if (index < 0 || index >= previous.length || previous[index] === width) return previous;
       const next = previous.slice();
@@ -754,15 +766,15 @@ function useNavOverflow(itemCount, gap) {
       return next;
     });
   }, []);
-  const setAvailableWidth = React5.useCallback(
+  const setAvailableWidth = React2.useCallback(
     (width) => setAvailableWidthState((previous) => previous === width ? previous : width),
     []
   );
-  const setMoreWidth = React5.useCallback(
+  const setMoreWidth = React2.useCallback(
     (width) => setMoreWidthState((previous) => previous === width ? previous : width),
     []
   );
-  const visibleCount = React5.useMemo(
+  const visibleCount = React2.useMemo(
     () => computeVisibleCount({ availableWidth, itemWidths, moreWidth, gap }),
     [availableWidth, itemWidths, moreWidth, gap]
   );
@@ -774,8 +786,8 @@ function getReducedMotionQuery() {
   return window.matchMedia(REDUCED_MOTION_QUERY);
 }
 function useReducedMotion() {
-  const [reduced, setReduced] = React5.useState(() => getReducedMotionQuery()?.matches ?? false);
-  React5.useEffect(() => {
+  const [reduced, setReduced] = React2.useState(() => getReducedMotionQuery()?.matches ?? false);
+  React2.useEffect(() => {
     const mql = getReducedMotionQuery();
     if (mql === void 0 || mql.addEventListener === void 0) return void 0;
     const onChange = () => setReduced(mql.matches);
@@ -814,24 +826,24 @@ var NavBarInner = ({
   const primaryColor = theme.palette.primary["500"];
   const { width } = reactNative.useWindowDimensions();
   const reducedMotion = useReducedMotion();
-  const [open, setOpen] = React5.useState(false);
-  const [toggleFocused, setToggleFocused] = React5.useState(false);
+  const [open, setOpen] = React2.useState(false);
+  const [toggleFocused, setToggleFocused] = React2.useState(false);
   const { visibleCount, setAvailableWidth, setItemWidth, setMoreWidth } = useNavOverflow(items.length, NAV_LINK_GAP);
   const collapsed = width < collapseBelow;
   const showLinks = !collapsed || open;
-  const innerCapStyle = React5.useMemo(
+  const innerCapStyle = React2.useMemo(
     () => contentMaxWidth === void 0 ? null : { maxWidth: contentMaxWidth, width: "100%", alignSelf: "center" },
     [contentMaxWidth]
   );
-  const toggleMenu = React5.useCallback(() => setOpen((v) => !v), []);
-  const handlePress = React5.useCallback(
+  const toggleMenu = React2.useCallback(() => setOpen((v) => !v), []);
+  const handlePress = React2.useCallback(
     (route) => {
       setOpen(false);
       onNavigate(route);
     },
     [onNavigate]
   );
-  const linkColors = React5.useMemo(
+  const linkColors = React2.useMemo(
     () => ({
       rest: colors.textSecondary,
       hoverText: colors.text,
@@ -853,7 +865,7 @@ var NavBarInner = ({
         containerStyle
       ],
       children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [navBarStyles.inner, collapsed ? null : navBarStyles.innerNoWrap, innerCapStyle], children: [
-        brand !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navBarStyles.brand, children: brand }) : null,
+        brand !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navBarStyles.brand, children: renderTextSlot(brand, { color: colors.text }) }) : null,
         collapsed ? /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Pressable,
           {
@@ -886,7 +898,7 @@ var NavBarInner = ({
             }
           );
           if (collapsed) {
-            return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { nativeID: LINKS_REGION_ID, style: navBarStyles.linksStacked, testID: NAV_TEST_IDS.navBarLinks, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(React5__default.default.Fragment, { children: renderLink(item) }, item.key)) });
+            return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { nativeID: LINKS_REGION_ID, style: navBarStyles.linksStacked, testID: NAV_TEST_IDS.navBarLinks, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(React2__default.default.Fragment, { children: renderLink(item) }, item.key)) });
           }
           const visibleItems = items.slice(0, visibleCount);
           const overflowItems = items.slice(visibleCount);
@@ -930,7 +942,7 @@ var NavBarInner = ({
             }
           );
         })() : null,
-        showLinks && right !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsed ? navBarStyles.rightStacked : navBarStyles.right, children: right }) : null
+        showLinks && right !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsed ? navBarStyles.rightStacked : navBarStyles.right, children: renderTextSlot(right, { color: colors.text }) }) : null
       ] })
     }
   );
@@ -1034,8 +1046,9 @@ var MobileDrawer = ({
   drawerTestID,
   scrimTestID
 }) => {
-  const panelRef = React5.useRef(null);
-  React5.useEffect(() => {
+  const { theme } = uiFeedback.useUi();
+  const panelRef = React2.useRef(null);
+  React2.useEffect(() => {
     const node = panelRef.current;
     if (node === null || typeof node.addEventListener !== "function") return void 0;
     const handleClick = (event) => {
@@ -1058,7 +1071,7 @@ var MobileDrawer = ({
         onPress: onClose
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { ref: panelRef, "aria-modal": true, role: "dialog", style: styles2.panel, testID: drawerTestID, children: sidebar })
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { ref: panelRef, "aria-modal": true, role: "dialog", style: styles2.panel, testID: drawerTestID, children: renderTextSlot(sidebar, { color: theme.colors.text }) })
   ] });
 };
 
@@ -1130,15 +1143,15 @@ var AppShell = ({
     range: railRange
   });
   const useDrawer = railMode === "drawer";
-  const [drawerOpen, setDrawerOpen] = React5.useState(false);
-  const openDrawer = React5.useCallback(() => setDrawerOpen(true), []);
-  const closeDrawer = React5.useCallback(() => setDrawerOpen(false), []);
-  React5.useEffect(() => {
+  const [drawerOpen, setDrawerOpen] = React2.useState(false);
+  const openDrawer = React2.useCallback(() => setDrawerOpen(true), []);
+  const closeDrawer = React2.useCallback(() => setDrawerOpen(false), []);
+  React2.useEffect(() => {
     if (!useDrawer && drawerOpen) setDrawerOpen(false);
   }, [useDrawer, drawerOpen]);
   const drawerLabels = { ...DEFAULT_DRAWER_LABELS, ...mobileMenu };
   const isUnauthenticated = gate !== void 0 && !gate.pending && !gate.authenticated;
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (isUnauthenticated && gate !== void 0) gate.onRedirect();
   }, [isUnauthenticated, gate]);
   if (gate?.pending === true)
@@ -1165,13 +1178,13 @@ var AppShell = ({
         onOpen: openDrawer
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.headerFill, children: header })
-  ] }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: header });
-  const railRegion = railMode === "full" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.sidebar}`, children: sidebar }) : railMode === "collapsed" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.collapsedSidebar}`, children: collapsedSidebar }) : null;
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.headerFill, children: renderTextSlot(header, { color: theme.colors.text }) })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: renderTextSlot(header, { color: theme.colors.text }) });
+  const railRegion = railMode === "full" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.sidebar}`, children: renderTextSlot(sidebar, { color: theme.colors.text }) }) : railMode === "collapsed" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.collapsedSidebar}`, children: renderTextSlot(collapsedSidebar, { color: theme.colors.text }) }) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles3.root, { backgroundColor: theme.colors.background }], testID, children: [
     headerRegion,
-    nav !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.nav}`, children: navInnerStyle !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navInnerStyle, children: nav }) : nav }) : null,
-    banner !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.banner}`, children: banner }) : null,
+    nav !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.nav}`, children: navInnerStyle !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navInnerStyle, children: renderTextSlot(nav, { color: theme.colors.text }) }) : renderTextSlot(nav, { color: theme.colors.text }) }) : null,
+    banner !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.banner}`, children: renderTextSlot(banner, { color: theme.colors.text }) }) : null,
     railRegion !== null ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.bodyRow, children: [
       railRegion,
       scroller
@@ -1217,7 +1230,7 @@ var CollapsedRail = ({
         containerStyle
       ],
       children: [
-        header !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsedRailStyles.slot, children: header }) : null,
+        header !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsedRailStyles.slot, children: renderTextSlot(header, { color: colors.text }) }) : null,
         items.map((item) => {
           const active = isRouteActive(pathname, item.route);
           const iconColor = active ? primaryColor : colors.textSecondary;
@@ -1236,13 +1249,13 @@ var CollapsedRail = ({
           );
         }),
         /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsedRailStyles.spacer }),
-        footer !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsedRailStyles.slot, children: footer }) : null
+        footer !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsedRailStyles.slot, children: renderTextSlot(footer, { color: colors.text }) }) : null
       ]
     }
   );
 };
-function wantsTopBar(layout, hasHeader, hasTopBar) {
-  return layout === "top" || layout === "both" || hasHeader || layout === "side" && hasTopBar;
+function wantsTopBar(layout, hasHeader) {
+  return layout === "top" || layout === "both" || hasHeader;
 }
 function wantsSideRail(layout, hasSideRail) {
   return (layout === "side" || layout === "both") && hasSideRail;
@@ -1261,7 +1274,7 @@ var NavShell = ({
   collapsedRailRange: collapsedRailRangeProp,
   ...shellProps
 }) => {
-  const showTopBar = wantsTopBar(layout, header !== void 0, topBar !== void 0);
+  const showTopBar = wantsTopBar(layout, header !== void 0);
   const showSideRail = wantsSideRail(layout, sideRail !== void 0);
   const headerNode = header !== void 0 ? header : showTopBar && topBar !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
     NavBar,
@@ -1390,7 +1403,7 @@ var DarkModeControl = ({
   const primaryColor = theme.palette.primary["500"];
   const currentIndex = options.findIndex((option) => option.value === value);
   const current = currentIndex >= 0 ? options[currentIndex] : options[0];
-  const advance = React5.useCallback(() => {
+  const advance = React2.useCallback(() => {
     if (options.length === 0) return;
     const from = currentIndex >= 0 ? currentIndex : 0;
     const next = options[(from + 1) % options.length];