@dloizides/ui-nav 1.33.0 → 1.36.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.35.0
+
+- NAV-SCROLL-1 "Opening sidebar groups never hides the items below" (AC-UI-1, AC-UI-2): `Sidebar` items (header slot + list) scroll in a `ScrollView` between the pinned title/search and the pinned footer, with a `theme.colors.surface` fade on each edge that hides items. Inside `MobileDrawer` opening a top-level group closes the other (through `NavAccordionContext`, which `MobileDrawer` provides; no new `Sidebar` prop). `NavExpandableItem` takes optional controlled `expanded` + `onToggle`. No prop changes for existing consumers.
+
 ## 1.28.0
 
 - INVOICE-5 "Edit invoices before sending, shared background and menu hover" (AC-UI-3, AC-UI-6): `AppShell` draws `theme.backdrop` (the `@dloizides/theme-web` 1.5.0 `resolveBackdrop` shape, typed here as `AppShellBackdrop`): its colour and web image on the root, and for `horizon` a brand band behind header and nav that the content overlaps by `overlap.compact` (< 768 px) or `overlap.wide`. No `theme.backdrop` keeps today's flat background.

package/dist/index.d.mts

@@ -1023,8 +1023,10 @@ interface DarkModeControlProps {
     testID?: string;
     /** Extra container style overrides. */
     containerStyle?: ViewStyle | ViewStyle[];
+    /** Show the text label beside the icon; an option without an icon always shows it. */
+    showLabel?: boolean;
 }
-declare const DarkModeControl: ({ value, options, onChange, regionLabel, variant, testID, containerStyle, }: DarkModeControlProps) => React.ReactElement | null;
+declare const DarkModeControl: ({ value, options, onChange, regionLabel, variant, testID, containerStyle, showLabel, }: DarkModeControlProps) => React.ReactElement | null;
 
 /**
  * NavBarLink — a SINGLE horizontal `NavBar` link, extracted so each link owns its
@@ -1207,8 +1209,10 @@ interface NavExpandableItemProps {
      */
     renderChevron?: (expanded: boolean, color: string, size: number) => React.ReactNode;
     depth?: number;
+    expanded?: boolean;
+    onToggle?: (key: string) => void;
 }
-declare const NavExpandableItem: ({ item, pathname, onNavigate, navigateHint, expandHint, collapseHint, renderChevron, activeRoute, depth, }: NavExpandableItemProps) => React.ReactElement;
+declare const NavExpandableItem: ({ item, pathname, onNavigate, navigateHint, expandHint, collapseHint, renderChevron, activeRoute, depth, expanded: expandedProp, onToggle, }: NavExpandableItemProps) => React.ReactElement;
 
 /**
  * Pure matching logic for the {@link CommandPalette}. Kept framework-free so the

package/dist/index.d.ts

@@ -1023,8 +1023,10 @@ interface DarkModeControlProps {
     testID?: string;
     /** Extra container style overrides. */
     containerStyle?: ViewStyle | ViewStyle[];
+    /** Show the text label beside the icon; an option without an icon always shows it. */
+    showLabel?: boolean;
 }
-declare const DarkModeControl: ({ value, options, onChange, regionLabel, variant, testID, containerStyle, }: DarkModeControlProps) => React.ReactElement | null;
+declare const DarkModeControl: ({ value, options, onChange, regionLabel, variant, testID, containerStyle, showLabel, }: DarkModeControlProps) => React.ReactElement | null;
 
 /**
  * NavBarLink — a SINGLE horizontal `NavBar` link, extracted so each link owns its
@@ -1207,8 +1209,10 @@ interface NavExpandableItemProps {
      */
     renderChevron?: (expanded: boolean, color: string, size: number) => React.ReactNode;
     depth?: number;
+    expanded?: boolean;
+    onToggle?: (key: string) => void;
 }
-declare const NavExpandableItem: ({ item, pathname, onNavigate, navigateHint, expandHint, collapseHint, renderChevron, activeRoute, depth, }: NavExpandableItemProps) => React.ReactElement;
+declare const NavExpandableItem: ({ item, pathname, onNavigate, navigateHint, expandHint, collapseHint, renderChevron, activeRoute, depth, expanded: expandedProp, onToggle, }: NavExpandableItemProps) => React.ReactElement;
 
 /**
  * Pure matching logic for the {@link CommandPalette}. Kept framework-free so the

package/dist/index.js

@@ -486,6 +486,18 @@ function resolveActiveRoute(items, pathname) {
   }
   return winner;
 }
+var NavAccordionContext = React.createContext(false);
+function hasActiveDescendant(item, pathname) {
+  if (isRouteActive(pathname, item.route)) return true;
+  return (item.children ?? []).some((child) => hasActiveDescendant(child, pathname));
+}
+function initialOpenGroup(items, pathname) {
+  const hasChildren = (item) => (item.children ?? []).length > 0;
+  return items.find((item) => hasChildren(item) && hasActiveDescendant(item, pathname))?.key;
+}
+function nextOpenGroup(current, pressed) {
+  return current === pressed ? void 0 : pressed;
+}
 var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
 function getReducedMotionQuery() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return void 0;
@@ -535,10 +547,6 @@ function ariaExpandedProps(expanded) {
 function hoverHandlerProps(onIn, onOut) {
   return IS_WEB ? { onHoverIn: onIn, onHoverOut: onOut } : {};
 }
-function hasActiveDescendant(item, pathname) {
-  if (isRouteActive(pathname, item.route)) return true;
-  return (item.children ?? []).some((child) => hasActiveDescendant(child, pathname));
-}
 function TintOverlay({
   opacity,
   color,
@@ -562,15 +570,21 @@ var NavExpandableItem = ({
   collapseHint,
   renderChevron,
   activeRoute,
-  depth = 0
+  depth = 0,
+  expanded: expandedProp,
+  onToggle
 }) => {
-  const [expanded, setExpanded] = React.useState(() => hasActiveDescendant(item, pathname));
+  const [internalExpanded, setExpanded] = React.useState(() => hasActiveDescendant(item, pathname));
+  const expanded = expandedProp ?? internalExpanded;
   const [focused, setFocused] = React.useState(false);
   const [hovered, setHovered] = React.useState(false);
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
-  const toggle = React.useCallback(() => setExpanded((v) => !v), []);
+  const toggle = React.useCallback(() => {
+    if (onToggle !== void 0) onToggle(item.key);
+    else setExpanded((v) => !v);
+  }, [onToggle, item.key]);
   const onHoverIn = React.useCallback(() => setHovered(true), []);
   const onHoverOut = React.useCallback(() => setHovered(false), []);
   const indent = depth * BASE_INDENT;
@@ -681,9 +695,72 @@ var DEFAULT_SEARCH_BREAKPOINT = uiLayout.LAYOUT_COLLAPSE_BREAKPOINT;
 function resolveSearchAffordance(viewport, breakpoint = DEFAULT_SEARCH_BREAKPOINT) {
   return viewport >= breakpoint ? "inline" : "palette";
 }
+
+// src/sidebarEdgeFade.ts
+var EDGE_TOLERANCE = 1;
+function resolveEdgeFades({ offsetY, viewportHeight, contentHeight }) {
+  const hiddenBelow = contentHeight - (offsetY + viewportHeight);
+  return { top: offsetY > EDGE_TOLERANCE, bottom: hiddenBelow > EDGE_TOLERANCE };
+}
+var FADE_BAND_HEIGHT = 6;
+var FADE_BAND_OPACITIES = [0.9, 0.65, 0.4, 0.15];
+var SCROLL_EVENT_THROTTLE_MS = 16;
+var styles2 = reactNative.StyleSheet.create({
+  area: { flex: 1, minHeight: 0 },
+  fade: { position: "absolute", left: 0, right: 0 },
+  fadeTop: { top: 0 },
+  fadeBottom: { bottom: 0, flexDirection: "column-reverse" },
+  band: { height: FADE_BAND_HEIGHT }
+});
+function EdgeFade({ edge, color }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      pointerEvents: "none",
+      style: [styles2.fade, edge === "top" ? styles2.fadeTop : styles2.fadeBottom],
+      testID: `sidebar-fade-${edge}`,
+      children: FADE_BAND_OPACITIES.map((opacity) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles2.band, { backgroundColor: color, opacity }] }, opacity))
+    }
+  );
+}
+var SidebarScrollArea = ({ children }) => {
+  const { theme } = uiFeedback.useUi();
+  const metrics = React.useRef({ offsetY: 0, viewportHeight: 0, contentHeight: 0 });
+  const [fades, setFades] = React.useState({ top: false, bottom: false });
+  const update = React.useCallback((next) => {
+    metrics.current = { ...metrics.current, ...next };
+    const resolved = resolveEdgeFades(metrics.current);
+    setFades((prev) => prev.top === resolved.top && prev.bottom === resolved.bottom ? prev : resolved);
+  }, []);
+  const onLayout = React.useCallback(
+    (e) => update({ viewportHeight: e.nativeEvent.layout.height }),
+    [update]
+  );
+  const onContentSizeChange = React.useCallback((_w, h) => update({ contentHeight: h }), [update]);
+  const onScroll = React.useCallback(
+    (e) => update({ offsetY: e.nativeEvent.contentOffset.y }),
+    [update]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.area, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.ScrollView,
+      {
+        scrollEventThrottle: SCROLL_EVENT_THROTTLE_MS,
+        style: styles2.area,
+        testID: "sidebar-scroll",
+        onContentSizeChange,
+        onLayout,
+        onScroll,
+        children
+      }
+    ),
+    fades.top ? /* @__PURE__ */ jsxRuntime.jsx(EdgeFade, { color: theme.colors.surface, edge: "top" }) : null,
+    fades.bottom ? /* @__PURE__ */ jsxRuntime.jsx(EdgeFade, { color: theme.colors.surface, edge: "bottom" }) : null
+  ] });
+};
 var FIELD_MIN_HEIGHT = 38;
 var CLEAR_GLYPH = "\u2715";
-var styles2 = reactNative.StyleSheet.create({
+var styles3 = reactNative.StyleSheet.create({
   wrap: {
     flexDirection: "row",
     alignItems: "center",
@@ -724,7 +801,7 @@ var SidebarSearch = ({
     reactNative.View,
     {
       style: [
-        styles2.wrap,
+        styles3.wrap,
         { backgroundColor: colors.surface, borderColor: focused ? primary : colors.border },
         focusRingStyle(focused, primary)
       ],
@@ -736,7 +813,7 @@ var SidebarSearch = ({
             accessibilityLabel: labels.placeholder,
             placeholder: labels.placeholder,
             placeholderTextColor: colors.textSecondary,
-            style: [styles2.input, { color: colors.text }],
+            style: [styles3.input, { color: colors.text }],
             testID,
             value,
             onBlur: () => setFocused(false),
@@ -750,10 +827,10 @@ var SidebarSearch = ({
             accessibilityHint: labels.clearHint,
             accessibilityLabel: labels.clearLabel,
             accessibilityRole: "button",
-            style: styles2.clear,
+            style: styles3.clear,
             testID: `${testID}-clear`,
             onPress: onClear,
-            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.clearGlyph, { color: colors.textSecondary }], children: CLEAR_GLYPH })
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.clearGlyph, { color: colors.textSecondary }], children: CLEAR_GLYPH })
           }
         ) : null
       ]
@@ -812,6 +889,10 @@ var Sidebar = ({
   const visibleItems = showInlineSearch ? filterNavItems(items, query) : items;
   const showEmpty = showInlineSearch && isFilterActive(query) && visibleItems.length === 0;
   const activeRoute = resolveActiveRoute(items, pathname);
+  const accordion = React.useContext(NavAccordionContext);
+  const [openGroup, setOpenGroup] = React.useState(() => initialOpenGroup(items, pathname));
+  const toggleGroup = React.useCallback((key) => setOpenGroup((current) => nextOpenGroup(current, key)), []);
+  const accordionProps = (item) => accordion && (item.children ?? []).length > 0 ? { expanded: openGroup === item.key, onToggle: toggleGroup } : {};
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.View,
     {
@@ -845,22 +926,24 @@ var Sidebar = ({
             onPress: paletteTrigger.onOpen
           }
         ) }) : null,
-        renderTextSlot(header, { color: colors.text }),
-        showEmpty && search !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.sidebarEmpty, { color: colors.textSecondary }], testID: "sidebar-search-empty", children: search.emptyText }) : visibleItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-          NavExpandableItem,
-          {
-            activeRoute,
-            collapseHint,
-            expandHint,
-            item,
-            navigateHint,
-            pathname,
-            renderChevron,
-            onNavigate
-          },
-          item.key
-        )),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navStyles.sidebarSpacer }),
+        /* @__PURE__ */ jsxRuntime.jsxs(SidebarScrollArea, { children: [
+          renderTextSlot(header, { color: colors.text }),
+          showEmpty && search !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.sidebarEmpty, { color: colors.textSecondary }], testID: "sidebar-search-empty", children: search.emptyText }) : visibleItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            NavExpandableItem,
+            {
+              activeRoute,
+              collapseHint,
+              expandHint,
+              item,
+              navigateHint,
+              pathname,
+              renderChevron,
+              onNavigate,
+              ...accordionProps(item)
+            },
+            item.key
+          ))
+        ] }),
         renderTextSlot(footer, { color: colors.text })
       ]
     }
@@ -1582,7 +1665,7 @@ var NavBar = ({ barTheme, ...props }) => {
   if (barTheme === void 0) return /* @__PURE__ */ jsxRuntime.jsx(NavBarInner, { ...props });
   return /* @__PURE__ */ jsxRuntime.jsx(uiFeedback.UiProvider, { navigate, t, theme: barTheme, children: /* @__PURE__ */ jsxRuntime.jsx(NavBarInner, { ...props }) });
 };
-var styles3 = reactNative.StyleSheet.create({
+var styles4 = reactNative.StyleSheet.create({
   hitBox: { minHeight: MIN_TOUCH_TARGET, minWidth: MIN_TOUCH_TARGET, justifyContent: "center" }
 });
 function anchorProps(route) {
@@ -1605,7 +1688,7 @@ var BrandHomeLink = ({ route, label, onNavigate, children }) => {
     {
       accessibilityLabel: label,
       accessibilityRole: "link",
-      style: [styles3.hitBox, focusRingStyle(focused, theme.palette.primary["500"])],
+      style: [styles4.hitBox, focusRingStyle(focused, theme.palette.primary["500"])],
       testID: NAV_TEST_IDS.brandHome,
       onBlur: () => setFocused(false),
       onFocus: () => setFocused(true),
@@ -1618,7 +1701,7 @@ var BrandHomeLink = ({ route, label, onNavigate, children }) => {
 var DEFAULT_ICON_SIZE = 32;
 var NAME_FONT_SIZE = 16;
 var NAME_GAP = 8;
-var styles4 = reactNative.StyleSheet.create({
+var styles5 = reactNative.StyleSheet.create({
   name: { flexShrink: 1, fontSize: NAME_FONT_SIZE, fontWeight: "700" },
   row: { alignItems: "center", flexDirection: "row", gap: NAME_GAP }
 });
@@ -1632,7 +1715,7 @@ var BrandMark = ({
   iconOnly = false
 }) => {
   const { theme } = uiFeedback.useUi();
-  return /* @__PURE__ */ jsxRuntime.jsx(BrandHomeLink, { label, route, onNavigate, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.row, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(BrandHomeLink, { label, route, onNavigate, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.row, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Image,
       {
@@ -1646,7 +1729,7 @@ var BrandMark = ({
       reactNative.Text,
       {
         numberOfLines: 1,
-        style: [styles4.name, { color: theme.colors.text }],
+        style: [styles5.name, { color: theme.colors.text }],
         testID: NAV_TEST_IDS.brandMarkName,
         children: name
       }
@@ -1659,7 +1742,7 @@ var Nav = (props) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(NavBar, { ...props });
 };
-var styles5 = reactNative.StyleSheet.create({
+var styles6 = reactNative.StyleSheet.create({
   band: { left: 0, position: "absolute", right: 0, top: 0 }
 });
 function readBackdrop(theme) {
@@ -1682,7 +1765,7 @@ function resolveShellBackdrop(theme, viewport, contentPadding, testID) {
     reactNative.View,
     {
       pointerEvents: "none",
-      style: [styles5.band, { backgroundColor: band.color, height: contentPadding + overlap }],
+      style: [styles6.band, { backgroundColor: band.color, height: contentPadding + overlap }],
       testID: `${testID}${APP_SHELL_SUFFIX.band}`
     }
   );
@@ -1694,7 +1777,7 @@ var CARD_BORDER_WIDTH = 1;
 var CARD_TITLE_FONT_SIZE = 16;
 var CARD_MESSAGE_FONT_SIZE = 14;
 var CARD_TITLE_MARGIN_BOTTOM = 8;
-var styles6 = reactNative.StyleSheet.create({
+var styles7 = reactNative.StyleSheet.create({
   // Loading is a TRANSITIONAL state: the spinner is an absolute overlay ON TOP of
   // stably-mounted children, never a replacement for them. Replacing children here
   // would unmount whatever they host (e.g. a navigator), and on remount React
@@ -1726,9 +1809,9 @@ function MessageCard({
 }) {
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles6.card, { backgroundColor: colors.surface, borderColor: accentColor }], testID, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.cardTitle, { color: accentColor }], children: message.titleText }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.cardMessage, { color: colors.textSecondary }], children: message.messageText })
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles7.card, { backgroundColor: colors.surface, borderColor: accentColor }], testID, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.cardTitle, { color: accentColor }], children: message.titleText }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.cardMessage, { color: colors.textSecondary }], children: message.messageText })
   ] });
 }
 function useContentBody(state, children, testID) {
@@ -1740,12 +1823,12 @@ function useContentBody(state, children, testID) {
     return /* @__PURE__ */ jsxRuntime.jsx(MessageCard, { accentColor: errorColor, message: state.forbidden, testID: `${testID}${APP_SHELL_SUFFIX.forbidden}` });
   if (state.error)
     return /* @__PURE__ */ jsxRuntime.jsx(MessageCard, { accentColor: errorColor, message: state.error, testID: `${testID}${APP_SHELL_SUFFIX.error}` });
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.loadingHost, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.loadingHost, children: [
     children,
     state.loading === true ? /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.View,
       {
-        style: [styles6.loadingOverlay, { backgroundColor: theme.colors.background }],
+        style: [styles7.loadingOverlay, { backgroundColor: theme.colors.background }],
         testID: `${testID}${APP_SHELL_SUFFIX.loading}`,
         children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: primary, size: "large" })
       }
@@ -1772,7 +1855,7 @@ var DEFAULT_DRAWER_LABELS = {
   closeLabel: "Close menu",
   closeHint: "Close the navigation menu"
 };
-var styles7 = reactNative.StyleSheet.create({
+var styles8 = reactNative.StyleSheet.create({
   overlay: { ...reactNative.StyleSheet.absoluteFillObject, zIndex: DRAWER_Z_INDEX },
   // The scrim's tap-to-close hit area is anchored to the RIGHT of the panel
   // (`left: DRAWER_WIDTH`), so it NEVER overlaps the panel: nav-item taps always
@@ -1807,10 +1890,10 @@ var MenuToggle = ({ label, hint, onOpen, testID }) => {
       accessibilityHint: hint,
       accessibilityLabel: label,
       ringColor: theme.palette.primary["500"],
-      style: styles7.menuToggle,
+      style: styles8.menuToggle,
       testID,
       onPress: onOpen,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles8.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
     }
   );
 };
@@ -1836,14 +1919,14 @@ var MobileDrawer = ({
     node.addEventListener("click", handleClick);
     return () => node.removeEventListener("click", handleClick);
   }, [onClose]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.overlay, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles8.overlay, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles7.scrim,
+        style: styles8.scrim,
         testID: scrimTestID,
         onPress: onClose
       }
@@ -1854,9 +1937,9 @@ var MobileDrawer = ({
         ref: panelRef,
         "aria-modal": true,
         role: "dialog",
-        style: [styles7.panel, { backgroundColor: theme.colors.surface }],
+        style: [styles8.panel, { backgroundColor: theme.colors.surface }],
         testID: drawerTestID,
-        children: renderTextSlot(sidebar, { color: theme.colors.text })
+        children: /* @__PURE__ */ jsxRuntime.jsx(NavAccordionContext.Provider, { value: true, children: renderTextSlot(sidebar, { color: theme.colors.text }) })
       }
     )
   ] });
@@ -1872,7 +1955,7 @@ function useContentMaxWidth(width) {
   return resolveContentMaxWidth(width, viewport);
 }
 var DEFAULT_CONTENT_PADDING = 24;
-var styles8 = reactNative.StyleSheet.create({
+var styles9 = reactNative.StyleSheet.create({
   root: { flex: 1 },
   // Auth-pending spinner: an opaque absolute overlay over the mounted shell, so
   // `children` (and any navigator they host) are never unmounted while the gate
@@ -1934,13 +2017,13 @@ var AppShell = ({
   }, [isUnauthenticated, gate]);
   const gatePending = gate?.pending === true;
   if (isUnauthenticated) return null;
-  const columnStyle = maxWidth === "full" ? styles8.columnFull : [styles8.columnCapped, { maxWidth }];
-  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles8.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
+  const columnStyle = maxWidth === "full" ? styles9.columnFull : [styles9.columnCapped, { maxWidth }];
+  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles9.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
   const scroller = /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.ScrollView,
     {
-      contentContainerStyle: [styles8.scrollContent, { padding: contentPadding }],
-      style: styles8.scroll,
+      contentContainerStyle: [styles9.scrollContent, { padding: contentPadding }],
+      style: styles9.scroll,
       testID: `${testID}${APP_SHELL_SUFFIX.content}`,
       children: [
         look.band,
@@ -1948,7 +2031,7 @@ var AppShell = ({
       ]
     }
   );
-  const headerRegion = useDrawer ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles8.headerRow, look.chrome], testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
+  const headerRegion = useDrawer ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles9.headerRow, look.chrome], testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       MenuToggle,
       {
@@ -1958,14 +2041,14 @@ var AppShell = ({
         onOpen: openDrawer
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles8.headerFill, children: renderTextSlot(header, { color: look.chromeText }) })
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles9.headerFill, children: renderTextSlot(header, { color: look.chromeText }) })
   ] }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: look.chrome, testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: renderTextSlot(header, { color: look.chromeText }) });
   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: [styles8.root, look.root], testID, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles9.root, look.root], testID, children: [
     headerRegion,
     nav !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: look.chrome, testID: `${testID}${APP_SHELL_SUFFIX.nav}`, children: navInnerStyle !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navInnerStyle, children: renderTextSlot(nav, { color: look.chromeText }) }) : renderTextSlot(nav, { color: look.chromeText }) }) : 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: styles8.bodyRow, children: [
+    railRegion !== null ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles9.bodyRow, children: [
       railRegion,
       scroller
     ] }) : scroller,
@@ -1982,7 +2065,7 @@ var AppShell = ({
     gatePending ? /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.View,
       {
-        style: [styles8.pendingOverlay, { backgroundColor: theme.colors.background }],
+        style: [styles9.pendingOverlay, { backgroundColor: theme.colors.background }],
         testID: `${testID}${APP_SHELL_SUFFIX.pending}`,
         children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: primary, size: "large" })
       }
@@ -2266,7 +2349,8 @@ var DarkModeControl = ({
   regionLabel,
   variant = "segmented",
   testID,
-  containerStyle
+  containerStyle,
+  showLabel = false
 }) => {
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
@@ -2280,6 +2364,7 @@ var DarkModeControl = ({
     if (next !== void 0) onChange(next.value);
   }, [options, currentIndex, onChange]);
   if (options.length === 0 || current === void 0) return null;
+  const labelVisible = (option) => showLabel || typeof option.renderIcon !== "function";
   if (variant === "cycle") {
     const iconColor = colors.text;
     return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { "aria-label": regionLabel, style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2293,7 +2378,7 @@ var DarkModeControl = ({
         onPress: advance,
         children: [
           typeof current.renderIcon === "function" ? current.renderIcon(iconColor, DARK_MODE_ICON_SIZE) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [darkModeStyles.cycleText, { color: colors.text }], children: current.label })
+          labelVisible(current) ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [darkModeStyles.cycleText, { color: colors.text }], children: current.label }) : null
         ]
       }
     ) });
@@ -2318,7 +2403,7 @@ var DarkModeControl = ({
             onPress: () => onChange(option.value),
             children: [
               typeof option.renderIcon === "function" ? option.renderIcon(textColor, DARK_MODE_ICON_SIZE) : null,
-              /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [darkModeStyles.segmentText, { color: textColor }], children: option.label })
+              labelVisible(option) ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [darkModeStyles.segmentText, { color: textColor }], children: option.label }) : null
             ]
           },
           option.value
@@ -2349,7 +2434,7 @@ var KEY_DOWN = "ArrowDown";
 var KEY_UP = "ArrowUp";
 var KEY_ENTER = "Enter";
 var KEY_ESCAPE = "Escape";
-var styles9 = reactNative.StyleSheet.create({
+var styles10 = reactNative.StyleSheet.create({
   overlay: { ...reactNative.StyleSheet.absoluteFillObject, zIndex: OVERLAY_Z_INDEX, alignItems: "center" },
   scrim: { ...reactNative.StyleSheet.absoluteFillObject, backgroundColor: SCRIM_COLOR2 },
   panel: {
@@ -2378,14 +2463,14 @@ var PaletteRow = ({ item, selected, onChoose }) => {
       accessibilityLabel: item.label,
       accessibilityRole: "button",
       accessibilityState: { selected },
-      style: [styles9.row, selected ? { backgroundColor: colors.border } : void 0],
+      style: [styles10.row, selected ? { backgroundColor: colors.border } : void 0],
       testID: item.testID ?? item.key,
       onPress: () => onChoose(item),
       children: [
         typeof item.renderIcon === "function" ? item.renderIcon(colors.textSecondary, NAV_ICON_SIZE) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles9.rowText, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles9.rowLabel, { color: colors.text }], children: item.label }),
-          item.hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles9.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles10.rowText, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles10.rowLabel, { color: colors.text }], children: item.label }),
+          item.hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles10.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
         ] })
       ]
     }
@@ -2425,14 +2510,14 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
     [results, selected, choose, onClose]
   );
   if (!open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles9.overlay, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles10.overlay, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles9.scrim,
+        style: styles10.scrim,
         testID: `${testID ?? "command-palette"}-scrim`,
         onPress: onClose
       }
@@ -2443,7 +2528,7 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
         "aria-modal": true,
         "aria-label": labels.regionLabel,
         role: "dialog",
-        style: [styles9.panel, { backgroundColor: colors.surface, borderColor: colors.border }],
+        style: [styles10.panel, { backgroundColor: colors.surface, borderColor: colors.border }],
         testID: testID ?? "command-palette",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2453,14 +2538,14 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
               accessibilityLabel: labels.placeholder,
               placeholder: labels.placeholder,
               placeholderTextColor: colors.textSecondary,
-              style: [styles9.input, { color: colors.text, borderBottomColor: colors.border }],
+              style: [styles10.input, { color: colors.text, borderBottomColor: colors.border }],
               testID: `${testID ?? "command-palette"}-input`,
               value: query,
               onChangeText: setQuery,
               onKeyPress
             }
           ),
-          results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles9.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { keyboardShouldPersistTaps: "handled", style: styles9.list, children: results.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(PaletteRow, { item, selected: index === selected, onChoose: choose }, item.key)) })
+          results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles10.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { keyboardShouldPersistTaps: "handled", style: styles10.list, children: results.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(PaletteRow, { item, selected: index === selected, onChoose: choose }, item.key)) })
         ]
       }
     )
@@ -2565,7 +2650,7 @@ var TAB_MIN_HEIGHT = 56;
 var LABEL_SIZE = 12;
 var LABEL_GAP = 2;
 var TAB_PADDING = 4;
-var styles10 = reactNative.StyleSheet.create({
+var styles11 = reactNative.StyleSheet.create({
   tab: {
     flex: 1,
     minHeight: TAB_MIN_HEIGHT,
@@ -2602,31 +2687,31 @@ var BottomTab = ({
       accessibilityLabel: item.label,
       accessibilityRole: "link",
       accessibilityState: { selected: isActive },
-      style: [styles10.tab, { opacity: feedback.opacity }],
+      style: [styles11.tab, { opacity: feedback.opacity }],
       testID: item.testID ?? item.key,
       onPress: () => onPress(item.route),
       onPressIn: () => setPressed(true),
       onPressOut: () => setPressed(false),
       ...ariaCurrentProps3(isActive),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Animated.View, { style: [styles10.iconWrap, { transform: [{ scale }] }], children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Animated.View, { style: [styles11.iconWrap, { transform: [{ scale }] }], children: [
           feedback.pillScale === null ? null : /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.View,
             {
               pointerEvents: "none",
-              style: [styles10.pill, { backgroundColor: colors.pill, transform: [{ scale: feedback.pillScale }] }, motion]
+              style: [styles11.pill, { backgroundColor: colors.pill, transform: [{ scale: feedback.pillScale }] }, motion]
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [{ transform: feedback.iconTransform }, motion], children: item.renderIcon?.(color, ICON_SIZE) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles10.label, { color }], children: item.label })
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles11.label, { color }], children: item.label })
       ]
     }
   );
 };
 var DEFAULT_TEST_ID = "bottom-tab-bar";
 var SLIDER_HEIGHT = 3;
-var styles11 = reactNative.StyleSheet.create({
+var styles12 = reactNative.StyleSheet.create({
   bar: { flexDirection: "row", borderTopWidth: reactNative.StyleSheet.hairlineWidth },
   slider: { position: "absolute", top: 0, height: SLIDER_HEIGHT }
 });
@@ -2653,14 +2738,14 @@ var BottomTabBar = ({
     {
       "aria-label": regionLabel,
       role: "navigation",
-      style: [styles11.bar, { backgroundColor: theme.colors.surface, borderTopColor: theme.colors.border }, containerStyle],
+      style: [styles12.bar, { backgroundColor: theme.colors.surface, borderTopColor: theme.colors.border }, containerStyle],
       testID,
       children: [
         bar === null ? null : /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.View,
           {
             pointerEvents: "none",
-            style: [styles11.slider, { left: bar.left, width: bar.width, backgroundColor: primary }, webTransition("left", barMs, reducedMotion)]
+            style: [styles12.slider, { left: bar.left, width: bar.width, backgroundColor: primary }, webTransition("left", barMs, reducedMotion)]
           }
         ),
         items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(