@helloimjolopez-pathway/pathway-components 0.2.0 → 0.2.2

package/components/button/button.jsx

@@ -398,8 +398,8 @@ export function Button({
   };
 
   // Icon slot wrapper, iconWrap = outer slot size, iconInner = rendered glyph size.
-  // fontVariationSettings overrides the global opsz:24 from preview-head.html, // all button icon sizes (14 to 18px) sit below the minimum opsz axis value (20),
-  // so opsz:20 is the correct optical size for the tightest stroke rendering.
+  // opsz 24, as Figma draws its icons, so the glyph fills the slot in Figma's
+  // proportion (changed 2026-11-03; opsz 20 drew it about 6% small).
   const iconWrapStyle = {
     display:              "inline-flex",
     alignItems:           "center",
@@ -410,7 +410,7 @@ export function Button({
     fontSize:             sz.iconInner,
     color:                iconColor,
     transition:           "color var(--motion-duration-2) var(--motion-easing-standard)",
-    fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20",
+    fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24",
   };
 
   // Outer button element, handles the touch-target zone

package/components/icon/icon.jsx

@@ -34,9 +34,12 @@
  *         SideNav is FILL 1 throughout; the Widget header is FILL 0.
  *   wght  400 everywhere in Pathway.
  *   GRAD  0 everywhere in Pathway.
- *   opsz  matched to the font size, which is what keeps the stroke weight even
- *         across sizes. A 16px icon at opsz 20 is visibly lighter than it
- *         should be, and that defect shipped once in the SideNav rail.
+ *   opsz  24 everywhere in Pathway (changed 2026-11-03). Figma's icons are the
+ *         font's opsz-24 artwork scaled to each frame, so the glyph fills its
+ *         box in the same proportion at every size. Tracking opsz to the frame
+ *         (which the font clamps to 20 below 20px) redrew each glyph about 6%
+ *         smaller inside the same box: a 16 help icon drew 12.5 against
+ *         Figma's 13.33.
  *
  * SIZE IS THE FRAME, NEVER THE VECTOR. Figma nests a wrapper (24), an icon
  * frame (16) and the drawn vector (~12), because the Material grid has about
@@ -58,8 +61,8 @@ export const ICON_SOURCES = {
   webSymbols: "https://github.com/google/material-design-icons/tree/master/symbols/web",
 };
 
-/** Pathway's fixed axis values. Only FILL and opsz ever vary. */
-export const AXES = { wght: 400, GRAD: 0 };
+/** Pathway's fixed axis values. Only FILL ever varies. */
+export const AXES = { wght: 400, GRAD: 0, opsz: 24 };
 
 /**
  * The per-size table from docs/design-system-spec.md §7.2. `wrapper` is the
@@ -109,10 +112,9 @@ export function Icon({
         display: "block",
         flexShrink: 0,
         color,
-        // opsz TRACKS THE FONT SIZE. Pinning it to 20 while the glyph renders
-        // at 16 makes the stroke too light, which is what went wrong in the
-        // collapsed SideNav rail.
-        fontVariationSettings: `'FILL' ${fill}, 'wght' ${AXES.wght}, 'GRAD' ${AXES.GRAD}, 'opsz' ${frame}`,
+        // opsz is fixed at 24, Figma's artwork, so the glyph fills the frame
+        // exactly as it does in Figma. See AXES.
+        fontVariationSettings: `'FILL' ${fill}, 'wght' ${AXES.wght}, 'GRAD' ${AXES.GRAD}, 'opsz' ${AXES.opsz}`,
         ...style,
       }}
       {...rest}

package/components/sidenav/sidenav.jsx

@@ -276,10 +276,9 @@ export function SideNavItem({
                     // parent is centred by its line box, not by its own art, so
                     // it rode high inside the 24px wrap.
                     display: "block",
-                    // opsz MUST match fontSize. It said 20 against a 16px size,
-                    // so the glyph was drawn on a 20px grid and scaled down into
-                    // a 16px box, which shifts the art off centre.
-                    fontVariationSettings: `'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' ${L.iconInner}` }}>
+                    // opsz 24, as Figma draws its icons, so the glyph fills the
+                    // box in Figma's proportion (changed 2026-11-03).
+                    fontVariationSettings: `'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24` }}>
                   {item.icon}
                 </span>
               : React.cloneElement(item.icon, { style: { color: iconColor } })}

package/components/top-nav/top-nav-demo.jsx

@@ -0,0 +1,79 @@
+/**
+ * TopNav's standalone demo. Imports the real module, so there is nothing here
+ * that can fall out of step with the shipped component: see
+ * components/_demo/harness.jsx for why the newer demos are generated.
+ *
+ * Replaced the hand-written top-nav.html on 2026-10-30. That page carried its
+ * own copy of TopNav, and the copy had drifted from top-nav.jsx: it still
+ * abbreviated the mobile org label, still drew the campus line in Mono, and
+ * still sized the module mark at 24.
+ */
+import React, { useState } from "react";
+import { DemoChrome, mount } from "../_demo/harness.jsx";
+import { TopNav } from "./top-nav.jsx";
+
+const U = (n) => `var(--semantic-layout-units-${n})`;
+const C = (n) => `var(--semantic-color-${n})`;
+const Y = (n) => `var(--semantic-type-${n})`;
+
+const BARS = [
+  { id: "desktop", label: "Desktop", width: 1200 },
+  { id: "tablet", label: "Tablet", width: 768 },
+  { id: "mobile", label: "Mobile", width: 393 },
+];
+const ORG = { id: "gcc", name: "Grace Community Church", shortName: "Grace Comm", campus: "Knoxville", initials: "GC" };
+const USER = { name: "Jo Lopez", initials: "JL", email: "jo@gracecommunity.org" };
+
+const label = { fontSize: Y("font-size-xs"), lineHeight: Y("line-height-xs-single"), color: C("foreground-static-neutral-subtle") };
+const card = {
+  background: C("fill-surface-elevated"), border: `1px solid ${C("stroke-static-neutral-base")}`,
+  borderRadius: U("cornerradius-large"), padding: U("padding-relaxed"),
+  display: "flex", flexDirection: "column", gap: U("gap-base"), minWidth: 0,
+};
+const h2 = { margin: 0, fontSize: Y("font-size-m"), lineHeight: Y("line-height-m-single"), fontWeight: Y("weight-semibold"), color: C("foreground-static-neutral-bold") };
+
+function App() {
+  const [showCampus, setShowCampus] = useState(false);
+  const [module, setModule] = useState("people");
+  const [brand, setBrand] = useState("amplify");
+  return (
+    <DemoChrome title="TopNav"
+      blurb={"The global bar across the top of every Pathway screen. Hover and open the module and org switchers. " +
+             "The campus line is off by default, as in Figma; turn it on below."}>
+      <div style={{ display: "flex", flexDirection: "column", gap: U("gap-relaxed") }}>
+        <section style={card}>
+          <h2 style={h2}>Options</h2>
+          <label style={{ ...label, display: "flex", alignItems: "center", gap: U("gap-xtight") }}>
+            <input id="topnav-show-campus" type="checkbox" checked={showCampus} onChange={(e) => setShowCampus(e.target.checked)} />
+            Show campus line (Figma "Show CityName")
+          </label>
+          <label style={{ ...label, display: "flex", alignItems: "center", gap: U("gap-xtight") }}>
+            Brand layout
+            <select id="topnav-brand" value={brand} onChange={(e) => setBrand(e.target.value)}>
+              <option value="amplify">Amplify</option>
+              <option value="newco">NewCo</option>
+            </select>
+          </label>
+          <label style={{ ...label, display: "flex", alignItems: "center", gap: U("gap-xtight") }}>
+            Module
+            <select id="topnav-module" value={module} onChange={(e) => setModule(e.target.value)}>
+              {["home", "people", "giving", "accounting", "communications"].map((m) => <option key={m} value={m}>{m}</option>)}
+            </select>
+          </label>
+        </section>
+        {BARS.map((b) => (
+          <section key={b.id} style={card}>
+            <h2 style={h2}>{b.label}</h2>
+            <div style={{ overflowX: "auto" }}>
+              <div style={{ width: b.width }}>
+                <TopNav key={module + brand} brand={brand} breakpoint={b.id} activeModuleId={module} org={ORG} user={USER} showCampus={showCampus} />
+              </div>
+            </div>
+          </section>
+        ))}
+      </div>
+    </DemoChrome>
+  );
+}
+
+mount(<App />);

package/components/top-nav/top-nav.jsx

@@ -143,13 +143,12 @@ export const T = {
   // emphasis comes from font-weight at the call site, not from a bolder colour.
   orgText:        SCD("foreground-action-ghost-rest"),
   orgChevron:     SCD("foreground-action-ghost-rest"),
-  // SubOrgName, the campus line. Figma binds Foreground/Static/Neutral/Mono
-  // here rather than a Ghost rung, so it stays put while OrgName tracks hover.
-  // Mono is safe on this bar now that the bar renders Light, where it is
-  // #ffffff; it would be wrong the moment anything inverted the bar, which is
-  // recorded in the manifest as a Figma-side fragility rather than copied as a
-  // pattern.
-  orgSubText:     SCD("foreground-static-neutral-mono"),
+  // SubOrgName, the campus line. Same Ghost rung as OrgName in every state,
+  // tracking hover and pressed with it. Figma bound it to
+  // Foreground/Static/Neutral/Mono until 2026-10-30, which inverts to a
+  // near-black in every dark mode and made the campus unreadable on
+  // the dark bar; Jo had Figma rebound to the OrgName token that day.
+  orgSubText:     SCD("foreground-action-ghost-rest"),
   avatarBg:       SCD("fill-action-primary-subtle-rest"),
   avatarText:     SCD("foreground-action-primary-on-subtle-rest"),
   // White dropdown-menu surface, tracks fill-neutral-light (now warm-neutral-0).
@@ -180,7 +179,6 @@ export const L = {
   navPadV:     r("topnav-padding-vertical"),
   navH:        c("topnav-height"),
   navGap:      r("topnav-gap-horizontal"),
-  deskOrgMax: 316, mobOrgMax: 120,
   touchTarget: 48, modInnerH: 36,
   orgAvatarNav: 20, orgAvatarSm: 24, orgAvatarPanel: 32,
   searchPill: 32, avatarSize: 32,
@@ -192,16 +190,33 @@ export const L = {
   //   TopNav.Search  Container.Icon         32x32 box, search       16x16
   // The chevron glyph is the SAME 12 in both switchers; only the box differs,
   // which is why one constant serves both.
-  // Org Switcher Container.Main padding, Figma 6,6,6,12.
+  // Org Switcher Container.Main padding, Figma 6,6,6,12; mobile 6,4,6,8.
   modPadL: u("padding-xxtight"),        // 6  ModuleSwitcher Container.Main, left only
   profilePad: u("padding-xxxtight"),    // 4  TopNav.Profile
   orgPadV: u("padding-xxtight"),        // 6
   orgPadL: u("padding-tight"),          // 12
-  orgPadMobileH: u("padding-xxxxtight"),// 2
+  orgPadMobileR: u("padding-xxxtight"), // 4
+  orgPadMobileL: u("padding-xtight"),   // 8
+  // The 48 box around ModuleSwitcher and Org Switcher: Padding/XXTight top and
+  // bottom; ModuleSwitcher and the mobile Org Switcher take Padding/XXXTight at
+  // the sides, the desktop Org Switcher Padding/XXTight. Read 2026-10-30; these
+  // were raw 4px and 4px 2px, so both switchers sat 4px short of the design.
+  slotPadV: u("padding-xxtight"),       // 6
+  slotPadNarrow: u("padding-xxxtight"), // 4
+  // Container.Main max width, Figma 308 desktop, 102 mobile. OrgName truncates
+  // at 200, the campus line at 72.
+  orgMainMax: 308, orgMainMaxMobile: 102, orgNameMax: 200, orgCampusMax: 72,
+  // The mobile org label is a 52-wide text box in Figma (both brands), so the
+  // short name truncates at 52, not at the trigger's 102.
+  orgNameMaxMobile: 52,
+  // Module.Icon is 16 inside a 20 Container.IconLeading. It was 24 in a 30.
+  moduleMark: 16, moduleMarkBox: 20,
   chevronGlyph: 12,
   modChevronBox: 20,
   orgChevronBox: 24,
-  actionIconBox: 28, actionIconGlyph: 14,
+  // Action Icon Size=Base: 16 glyph in a 28 Container.Icon. The glyph was 14,
+  // which also put it below the icon font's smallest optical size.
+  actionIconBox: 28, actionIconGlyph: 16,
   // Figma's Action Icon is 44, not the bar's 48. It is the one control on the
   // bar whose touch target is the AA minimum rather than the nav's own height.
   actionTarget: u("accessibility-touch-target-aa-width"),
@@ -310,78 +325,70 @@ export function OrgAvatarPlaceholder() {
 export const DEFAULT_MODULES = MODULES.map((id) => ({ id, label: MODULE_LABELS[id] }));
 
 // ─── TopNavActions ─────────────────────────────────────────────────────────────
-export function TopNavActions({ breakpoint = "desktop", onNotifications, onMore }) {
-  const [hov0, setHov0]       = useState(false);
-  const [hov1, setHov1]       = useState(false);
-  const [hovMore, setHovMore] = useState(false);
+/**
+ * TopNav.Actions, Figma 40007082:7313. A SLOT (Figma property "Slot.Actions"),
+ * not a fixed pair of bells: a product puts whatever action icons it needs in
+ * it, one bell, or a bell, a cog and a help icon. Each item renders as Figma's
+ * nested Action Icon at Size=Base.
+ *
+ *   actions  Array<{ icon, label, onClick }>. `icon` is a Material Symbols
+ *            ligature, `label` the accessible name. Defaults to the two
+ *            notification bells the bar has always shipped with.
+ *
+ * MOBILE FOLDS. On mobile, more than one action folds into a single more_vert
+ * ("More actions"), which is what Figma's mobile variant shows. One action on
+ * its own stays as itself.
+ *
+ * Action Icon Size=Base, read 2026-10-30 and 2026-11-02:
+ *   target           accessibility-touch-target-aa (44)
+ *   Container.Icon   28, cornerradius-base: rest none, hover
+ *                    Fill/Action/Ghost/Hover, pressed Fill/Action/Ghost/Pressed
+ *   glyph            16: Foreground/Action/Ghost/Rest, /Hover, /Pressed
+ *
+ * THE STATE FILL BELONGS ON THE 28 BOX, not on the touch target.
+ */
+export const DEFAULT_ACTIONS = [
+  { icon: "notifications", label: "Notifications" },
+  { icon: "notifications", label: "Alerts" },
+];
 
-  // Figma TopNav.Actions, node 40007082:7313, Amplify section, read 2026-10-02:
-  //
-  //   component        132x48  horizontal, gap 0
-  //   Action Icon      44x44   three of them, 3 x 44 = 132
-  //   Container.Icon   28x28   r=8   rest no fill, hover Fill/Action/Ghost/Hover,
-  //                                  pressed Fill/Action/Ghost/Pressed
-  //   glyph            14x14   rest Foreground/Action/Ghost/Rest,
-  //                                  hover Foreground/Action/Ghost/Hover
-  //
-  // THE HOVER FILL BELONGS ON THE 28px BOX, not on the touch target. It was on
-  // a 48px button, so the hover state painted a box nearly twice the size of
-  // the one in the design. The target is also 44 in Figma, not 48.
-  const btnStyle = () => ({
-    display: "flex", alignItems: "center", justifyContent: "center",
-    width: "100%", height: "100%", padding: 0,
-    background: "transparent", border: "none", cursor: "pointer",
-  });
-  // The box that actually carries the state.
-  const iconBoxStyle = (hov) => ({
-    display: "flex", alignItems: "center", justifyContent: "center",
-    width: L.actionIconBox, height: L.actionIconBox, borderRadius: L.radius,
-    background: hov ? T.controlHover : "transparent",
-    transition: "background var(--motion-duration-2) var(--motion-easing-standard)",
-  });
-
-  if (breakpoint === "desktop") {
+function TopNavActionIcon({ icon, label, onClick }) {
+  const [hov, setHov] = useState(false);
+  const [press, setPress] = useState(false);
+  const fill = press ? T.controlPressed : hov ? T.controlHover : "transparent";
+  const fg = press ? T.monoPressed : hov ? T.monoHover : T.monoBase;
+  return (
+    <div style={{ display: "flex", alignItems: "center", justifyContent: "center",
+      minHeight: L.actionTarget, minWidth: L.actionTarget }}>
+      <button type="button" aria-label={label} onClick={onClick}
+        onMouseEnter={() => setHov(true)} onMouseLeave={() => { setHov(false); setPress(false); }}
+        onMouseDown={() => setPress(true)} onMouseUp={() => setPress(false)} onBlur={() => setPress(false)}
+        style={{ display: "flex", alignItems: "center", justifyContent: "center",
+          width: "100%", height: "100%", padding: 0,
+          background: "transparent", border: "none", cursor: "pointer" }}>
+        <span style={{ display: "flex", alignItems: "center", justifyContent: "center",
+          width: L.actionIconBox, height: L.actionIconBox, borderRadius: L.radius, background: fill,
+          transition: "background var(--motion-duration-2) var(--motion-easing-standard)" }}>
+          <Icon name={icon} size={L.actionIconGlyph}
+            style={{ color: fg, transition: "color var(--motion-duration-2) var(--motion-easing-standard)" }} />
+        </span>
+      </button>
+    </div>
+  );
+}
+
+export function TopNavActions({ breakpoint = "desktop", actions, onNotifications, onMore }) {
+  const items = (actions || DEFAULT_ACTIONS).map((a) => ({ ...a, onClick: a.onClick || onNotifications }));
+  if (breakpoint === "mobile" && items.length > 1) {
     return (
       <div style={{ display: "flex", alignItems: "center" }}>
-        {[
-          { hov: hov0, setHov: setHov0, label: "Notifications" },
-          { hov: hov1, setHov: setHov1, label: "Alerts" },
-        ].map(({ hov, setHov, label }, idx) => (
-          <div key={idx} style={{ display: "flex", alignItems: "center", justifyContent: "center",
-            minHeight: L.actionTarget, minWidth: L.actionTarget, padding: 0}}>
-            <button
-              onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
-              onClick={onNotifications} aria-label={label}
-              style={btnStyle()}
-            >
-              <span style={iconBoxStyle(hov)}>
-                {/* The glyph tracks hover too: Figma moves it from
-                    Foreground/Action/Ghost/Rest to /Hover. It used to stay put. */}
-                <Icon name="notifications" size={L.actionIconGlyph}
-                  style={{ color: hov ? T.monoHover : T.monoBase,
-                    transition: "color var(--motion-duration-2) var(--motion-easing-standard)" }} />
-              </span>
-            </button>
-          </div>
-        ))}
+        <TopNavActionIcon icon="more_vert" label="More actions" onClick={onMore} />
       </div>
     );
   }
-
   return (
-    <div style={{ display: "flex", alignItems: "center", justifyContent: "center",
-      minHeight: L.actionTarget, minWidth: L.actionTarget }}>
-      <button
-        onMouseEnter={() => setHovMore(true)} onMouseLeave={() => setHovMore(false)}
-        onClick={onMore} aria-label="More actions"
-        style={btnStyle()}
-      >
-        <span style={iconBoxStyle(hovMore)}>
-          <Icon name="more_vert" size={L.actionIconGlyph}
-            style={{ color: hovMore ? T.monoHover : T.monoBase,
-              transition: "color var(--motion-duration-2) var(--motion-easing-standard)" }} />
-        </span>
-      </button>
+    <div style={{ display: "flex", alignItems: "center" }}>
+      {items.map((a, i) => <TopNavActionIcon key={`${a.icon}-${i}`} {...a} />)}
     </div>
   );
 }
@@ -390,8 +397,10 @@ export function TopNavActions({ breakpoint = "desktop", onNotifications, onMore
 export function TopNavProfile({ user, open, onToggle, mobile = false }) {
   const [hov, setHov] = useState(false);
   return (
+    // Figma TopNav.Profile is the 48 box itself. This wrapper added
+    // Padding/XXXXTight around the 48 button, so the profile took 52.
     <div style={{ position: "relative", display: "flex", alignItems: "center",
-      justifyContent: "center", minHeight: L.touchTarget, minWidth: L.touchTarget, padding: "var(--semantic-layout-units-padding-xxxxtight)"}}>
+      justifyContent: "center", minHeight: L.touchTarget, minWidth: L.touchTarget }}>
       <button
         onClick={onToggle}
         onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
@@ -409,10 +418,13 @@ export function TopNavProfile({ user, open, onToggle, mobile = false }) {
         <div style={{
           width: L.avatarSize, height: L.avatarSize, borderRadius: "50%",
           background: T.avatarBg, display: "flex", alignItems: "center", justifyContent: "center",
-          // Desktop/Tablet: Text/Body/Small/Semibold 14px/600
-          // Mobile: Text/Supporting/Small/Semibold 11px/600 (Figma)
-          fontSize: mobile ? 11 : 14, fontWeight: 600, letterSpacing: "var(--semantic-type-letter-spacing-spacious)",
-          color: T.avatarText, lineHeight: 1, flexShrink: 0, overflow: "hidden",
+          // Text/Body/Small/Semibold at EVERY breakpoint, read 2026-10-30. The
+          // mobile 11px this used to drop to is not in Figma. Figma names the
+          // 0.3 tracking Letter Spacing/Wide; the CSS emits 0.3 as -spacious.
+          fontFamily: "var(--semantic-type-family-brand)",
+          fontSize: "var(--semantic-type-font-size-s)", fontWeight: "var(--semantic-type-weight-semibold)",
+          lineHeight: "var(--semantic-type-line-height-s-single)", letterSpacing: "var(--semantic-type-letter-spacing-spacious)",
+          color: T.avatarText, flexShrink: 0, overflow: "hidden",
         }}>
           {user.avatarUrl
             ? <img src={user.avatarUrl} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
@@ -425,60 +437,73 @@ export function TopNavProfile({ user, open, onToggle, mobile = false }) {
 }
 
 // ─── OrgSwitcher ──────────────────────────────────────────────────────────────
-export function OrgSwitcher({ org, open, onToggle, mobile = false }) {
+/**
+ * Org Switcher, Figma set 40006819:14583, read 2026-10-30.
+ *
+ *   showCampus   Figma "Show CityName (Catholic)", BOOLEAN, default false. The
+ *                campus line is off unless a product turns it on. It was shown
+ *                whenever an org had a campus, so every demo carried one.
+ *   org.shortName  Figma "Label-Mobile", TEXT. The mobile trigger shows this
+ *                short name, truncated. Without one it falls back to the
+ *                spec's initials rule (§10.2), with the campus initials only
+ *                when showCampus is on.
+ *
+ * OrgName, the campus line and the trigger all follow the state together:
+ * Foreground/Action/Ghost/Rest, Hover, then Pressed for Pressed and Open. The
+ * chevron stays on Rest in every state, as in Figma.
+ */
+export function OrgSwitcher({ org, open, onToggle, mobile = false, showCampus = false }) {
   const [hov, setHov]           = useState(false);
   const [imgFailed, setImgFailed] = useState(false);
 
   const hasLogo = org.logoUrl && !imgFailed;
+  const label = mobile
+    ? (org.shortName || mobileLabel(org.name, showCampus ? org.campus : null))
+    : org.name;
+  const campus = !mobile && showCampus && org.campus ? org.campus : null;
+  const fg = open ? T.monoPressed : hov ? T.monoHover : T.monoBase;
 
-  // FIGMA HAS TWO TEXT NODES, NOT ONE STRING. OrgName takes
-  // Foreground/Action/Ghost/* and follows the hover state; SubOrgName takes
-  // Foreground/Static/Neutral/Mono and does not. Concatenating them into
-  // "name | campus" gave the campus the org name's colour and made it track
-  // hover, which the design does not. Read off set 40006819:14583, 2026-10-02.
-  //
-  // Mobile still abbreviates into one string, because the mobile variant has a
-  // single label with no room for two.
-  const label = mobile ? mobileLabel(org.name, org.campus) : org.name;
-  const subLabel = mobile ? null : (org.campus || null);
-
-  // Desktop/Tablet: Label/Button/S, 14px/500/20px
-  // Mobile: Label/Button/XS, 12px/500/18px (Figma annotation)
-  const labelStyle = mobile
-    ? { fontSize: "var(--semantic-type-font-size-xs)", fontWeight: 500, lineHeight: "var(--semantic-type-line-height-xs-single)", letterSpacing: "var(--semantic-type-letter-spacing-spacious)"}
-    : { fontSize: "var(--semantic-type-font-size-s)", fontWeight: 500, lineHeight: "var(--semantic-type-line-height-s-single)", letterSpacing: "var(--semantic-type-letter-spacing-spacious)"};
+  // Label/Button/Small at every breakpoint, mobile included (read 2026-11-02;
+  // the 12px Label/Button/XS mobile size is not in Figma). Figma binds its
+  // tracking to the PRIMITIVE Letter Spacing/Wide (0.3); the semantic CSS
+  // name for 0.3 is -spacious.
+  const labelStyle = { fontSize: "var(--semantic-type-font-size-s)", fontWeight: "var(--semantic-type-weight-medium)", lineHeight: "var(--semantic-type-line-height-s-single)", letterSpacing: "var(--semantic-type-letter-spacing-spacious)"};
+  const truncate = { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 };
 
   return (
-    <div style={{ position: "relative", padding: mobile ? "4px 2px" : 4,
-      maxWidth: mobile ? L.mobOrgMax : L.deskOrgMax }}>
+    // The 48 slot: Padding/XXTight all round on desktop, XXTight by XXXTight on mobile.
+    <div style={{ position: "relative", minWidth: 0,
+      padding: mobile ? `${L.slotPadV} ${L.slotPadNarrow}` : L.slotPadV }}>
       <button
         onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
         onClick={onToggle}
         aria-haspopup="true" aria-expanded={open}
         aria-label={`Switch organisation: ${org.name}${org.campus ? ", "+org.campus : ""}`}
         style={{
-          display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-xxtight)",
-          minHeight: 36,
-          // Figma OrgSwitcher Container.Main: pl-12 pr-6 py-4 (updated 2026-06-08 from uniform 4px)
-          // Figma Org Switcher Container.Main is pad 6,6,6,12 on desktop, read
-          // off set 40006819:14583 on 2026-10-02. The vertical was 4 here, so
-          // the trigger sat 4px shorter than the design and out of step with
-          // the module switcher beside it.
-          padding: mobile ? `${L.orgPadV} ${L.orgPadMobileH}` : `${L.orgPadV} ${L.orgPadV} ${L.orgPadV} ${L.orgPadL}`,
+          // Container.Main: gap Gap/XXXTight between RowStart and RowEnd,
+          // padding 6,6,6,12 desktop and 6,4,6,8 mobile, 36 tall.
+          display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-xxxtight)",
+          minHeight: L.modInnerH, boxSizing: "border-box", minWidth: 0,
+          maxWidth: mobile ? L.orgMainMaxMobile : L.orgMainMax,
+          padding: mobile
+            ? `${L.orgPadV} ${L.orgPadMobileR} ${L.orgPadV} ${L.orgPadMobileL}`
+            : `${L.orgPadV} ${L.orgPadV} ${L.orgPadV} ${L.orgPadL}`,
           borderRadius: L.radius,
           // Rest is bare: stroke only, no fill. See the Ghost note in T.
           background: open ? T.controlPressed : hov ? T.controlHover : "transparent",
-          border: `1px solid ${open ? T.orgStrokePressed : hov ? T.orgStrokeHover : T.orgStroke}`,
-          cursor: "pointer", color: T.monoBase, fontFamily: "inherit",
-          transition: "background var(--motion-duration-3) var(--motion-easing-standard), border-color var(--motion-duration-3) var(--motion-easing-standard)",
+          // Button/BorderWidth/Rest, as Figma binds it. This was a raw 1px.
+          // Drawn as an inset shadow because Figma strokes INSIDE the frame:
+          // a CSS border adds to the box and made Container.Main 37.5, not 36.
+          border: "none",
+          boxShadow: `inset 0 0 0 var(--contextual-layout-units-button-borderwidth-rest) ${open ? T.orgStrokePressed : hov ? T.orgStrokeHover : T.orgStroke}`,
+          cursor: "pointer", color: fg, fontFamily: "inherit",
+          transition: "background var(--motion-duration-3) var(--motion-easing-standard), box-shadow var(--motion-duration-3) var(--motion-easing-standard)",
         }}
       >
-        {/* RowStart, org name label only. No avatar or logo displayed in the
-            nav trigger per Figma (showOrgAvatar = false by default).
-            If org.logoUrl is provided it is still used in the org panel below. */}
+        {/* Container.RowStart: 24 tall desktop, 20 mobile, gap Gap/XXTight. */}
         <div style={{ display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-xxtight)",
-          height: 20, padding: "0 2px" }}>
-          {/* Logo avatar, only rendered when a URL is explicitly provided */}
+          height: mobile ? 20 : 24, minWidth: 0 }}>
+          {/* Logo avatar, only when a URL is provided (Figma "Show Org Avatar", default false) */}
           {hasLogo && (
             <div style={{ width: L.orgAvatarSm, height: L.orgAvatarSm, padding: "var(--semantic-layout-units-padding-xxxxtight)",
               display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
@@ -497,57 +522,30 @@ export function OrgSwitcher({ org, open, onToggle, mobile = false }) {
               </div>
             </div>
           )}
-          {/* Label */}
-          <span
-            aria-hidden={mobile ? "true" : undefined}
-            style={{
-              ...labelStyle,
-              whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
-              maxWidth: mobile ? 70 : 248, color: T.orgText, paddingRight: "var(--semantic-layout-units-padding-xxxtight)",
-            }}
-          >
-            {label}
-          </span>
-          {/* SubOrgName. Its own node in Figma with its own token,
-              Foreground/Static/Neutral/Mono, which on this bar resolves to
-              #ffffff and does NOT follow the hover state the way OrgName does.
-              Figma puts it in Container.CityName.Catholic beside the org name
-              with gap 8. */}
-          {subLabel && (
-            <span
-              style={{
-                ...labelStyle,
-                whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
-                maxWidth: 110, flexShrink: 0,
-                color: T.orgSubText,
-                marginLeft: "var(--semantic-layout-units-gap-tight)",
-              }}
-            >
-              {subLabel}
+          {/* Container.OrgName: OrgName and the campus line, gap Gap/Tight. */}
+          <div style={{ display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-tight)", minWidth: 0 }}>
+            <span aria-hidden="true"
+              style={{ ...labelStyle, ...truncate, maxWidth: mobile ? L.orgNameMaxMobile : L.orgNameMax,
+                color: fg, transition: "color var(--motion-duration-2) var(--motion-easing-standard)" }}>
+              {label}
             </span>
-          )}
-          {mobile && (
-            <span style={{ position: "absolute", left: -9999, width: 1, height: 1, overflow: "hidden" }}>
-              {org.name}{org.campus ? ", "+org.campus : ""}
-            </span>
-          )}
+            {campus && (
+              <span aria-hidden="true"
+                style={{ ...labelStyle, ...truncate, maxWidth: L.orgCampusMax, flexShrink: 0,
+                  color: open ? T.monoPressed : hov ? T.monoHover : T.orgSubText,
+                  transition: "color var(--motion-duration-2) var(--motion-easing-standard)" }}>
+                {`| ${campus}`}
+              </span>
+            )}
+          </div>
         </div>
-        {/* Chevron */}
-        <div style={{
-          display: "flex", alignItems: "center", justifyContent: "center",
-          width: 16, height: 16, marginRight: 2,
+        {/* Container.RowEnd: 24 box desktop, 20 mobile, 12 expand_more on Ghost/Rest. */}
+        <span style={{ width: mobile ? L.modChevronBox : L.orgChevronBox, height: mobile ? L.modChevronBox : L.orgChevronBox,
+          display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
           transform: open ? "rotate(180deg)" : "none",
-          transition: "transform var(--motion-duration-4) var(--motion-easing-standard)",
-        }}>
-          {/* Figma Org Switcher Container.RowEnd is a 24x24 box holding a 12x12
-              expand_more. This was a bare 16px glyph with no box, so the
-              chevron was both too large and unaligned with the module
-              switcher's, which sits in a 20 box. */}
-          <span style={{ width: L.orgChevronBox, height: L.orgChevronBox, display: "inline-flex",
-            alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
-            <Icon name="expand_more" size={L.chevronGlyph} style={{ color: T.orgChevron }} />
-          </span>
-        </div>
+          transition: "transform var(--motion-duration-4) var(--motion-easing-standard)" }}>
+          <Icon name="expand_more" size={L.chevronGlyph} style={{ color: T.orgChevron }} />
+        </span>
       </button>
     </div>
   );
@@ -571,23 +569,26 @@ export function ModuleSwitcher({ modules, activeId, open, onToggle, breakpoint =
   const active          = modules.find(m => m.id === activeId) || modules[0];
   const showLabel       = breakpoint === "desktop";
   const isStatic        = type === "static";
+  // The label follows the state (Ghost Rest, Hover, Pressed for Pressed and
+  // Open); the mark and the chevron stay on Rest, as in Figma.
+  const labelFg = isStatic ? T.monoBase : open ? T.monoPressed : hov ? T.monoHover : T.monoBase;
 
-  // Icon + label: identical in both variants.
+  // Icon + label: identical in both variants. Container.RowStart, gap Gap/XXTight.
   const inner = (
-    <div style={{ display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-xxtight)",
-      paddingRight: showLabel && !isStatic ? 2 : 0 }}>
+    <div style={{ display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-xxtight)" }}>
       {/* The module mark. Mono on the bar: the chrome is brand blue, so the
           mark inherits currentColor and reads as near-white, which is what the
           hand-drawn home icon did for one module and nothing did for the rest. */}
-      <div style={{ width: 30, height: 30, display: "flex", alignItems: "center",
+      <div style={{ width: L.moduleMarkBox, height: L.moduleMarkBox, display: "flex", alignItems: "center",
         justifyContent: "center", flexShrink: 0, color: T.monoBase }}>
-        <ModuleIcon module={active.id} size={24} color="mono" />
+        <ModuleIcon module={active.id} size={L.moduleMark} color="mono" />
       </div>
       {/* Label, desktop only */}
       {showLabel && (
-        <span style={{ fontSize: "var(--semantic-type-font-size-s)", fontWeight: 500, lineHeight: "var(--semantic-type-line-height-s-single)",
+        <span style={{ fontSize: "var(--semantic-type-font-size-s)", fontWeight: "var(--semantic-type-weight-medium)", lineHeight: "var(--semantic-type-line-height-s-single)",
           letterSpacing: "var(--semantic-type-letter-spacing-spacious)", whiteSpace: "nowrap", overflow: "hidden",
-          textOverflow: "ellipsis", maxWidth: 160, color: T.monoBase }}>
+          textOverflow: "ellipsis", maxWidth: 160, color: labelFg,
+          transition: "color var(--motion-duration-2) var(--motion-easing-standard)" }}>
           {active.label}
         </span>
       )}
@@ -598,7 +599,7 @@ export function ModuleSwitcher({ modules, activeId, open, onToggle, breakpoint =
   // No chevron, no hover/pressed, no button role/affordance.
   if (isStatic) {
     return (
-      <div style={{ position: "relative", padding: "4px 2px" }}>
+      <div style={{ position: "relative", padding: `${L.slotPadV} ${L.slotPadNarrow}` }}>
         <div
           aria-label={`Current module: ${active.label}`}
           style={{
@@ -619,14 +620,16 @@ export function ModuleSwitcher({ modules, activeId, open, onToggle, breakpoint =
 
   // INTERACTIVE (default), switch-module control.
   return (
-    <div style={{ position: "relative", padding: "4px 2px" }}>
+    // The 48 slot, Padding/XXTight by Padding/XXXTight. This was a raw 4px 2px.
+    <div style={{ position: "relative", padding: `${L.slotPadV} ${L.slotPadNarrow}` }}>
       <button
         onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
         onClick={onToggle}
         aria-haspopup="listbox" aria-expanded={open}
         aria-label={`Switch module: ${active.label}`}
         style={{
-          display: "flex", alignItems: "center",
+          // Container.Main: gap Gap/XXXTight between RowStart and the chevron.
+          display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-xxxtight)",
           maxHeight: L.modInnerH, minHeight: L.modInnerH,
           // Figma ModuleSwitcher Container.Main is pad 0,0,0,6: left only.
           // This was a uniform 4 on all four sides.
@@ -646,17 +649,312 @@ export function ModuleSwitcher({ modules, activeId, open, onToggle, breakpoint =
             2026-10-02. The glyph was right at 12; the box said 16. */}
         <div style={{
           width: L.modChevronBox, height: L.modChevronBox, display: "flex", alignItems: "center",
-          justifyContent: "center", marginLeft: 2,
+          justifyContent: "center",
           transform: open ? "rotate(180deg)" : "none",
           transition: "transform var(--motion-duration-4) var(--motion-easing-standard)",
         }}>
-          <Icon name="expand_more" size={12} style={{ color: T.monoBase }} />
+          <Icon name="expand_more" size={L.chevronGlyph} style={{ color: T.monoBase }} />
         </div>
       </button>
     </div>
   );
 }
 
+// ─── TopNavProfileMenu ─────────────────────────────────────────────────────────
+// The open profile menu. A separate pattern from the bar (see the spec's scope
+// note); shared by both brand layouts so there is one copy of it.
+function TopNavProfileMenu({ user }) {
+  return (
+      <div role="menu" data-theme="light"
+        style={{
+          position: "absolute", top: "calc(100% + 4px)", right: L.navPadH,
+          width: 200, background: T.panelBg,
+          border: `1px solid ${T.panelBorder}`, borderRadius: L.radius,
+          boxShadow: T.panelShadow, padding: "var(--semantic-layout-units-padding-xxxtight)", zIndex: 300,
+          animation: "tnDropIn var(--motion-duration-4) var(--motion-easing-spring) both",
+        }}
+      >
+        <div style={{ padding: " ",
+          borderBottom: `1px solid ${T.panelDivider}`, marginBottom: 4 }}>
+          <div style={{ fontSize: "var(--semantic-type-font-size-s)", fontWeight: 600, color: T.itemText }}>{user.name}</div>
+          <div style={{ fontSize: "var(--semantic-type-font-size-xxs)", color: T.itemMeta, marginTop: 1 }}>{user.email}</div>
+        </div>
+        {["Profile settings", "Settings"].map(label => (
+          <button key={label} role="menuitem"
+            style={{ display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-tight)", padding: "",
+              borderRadius: "var(--semantic-layout-units-cornerradius-base)", fontFamily: "inherit", fontSize: "var(--semantic-type-font-size-s)",
+              color: T.itemTextBase, background: "transparent",
+              border: "none", width: "100%", textAlign: "left", cursor: "pointer" }}>
+            {label}
+          </button>
+        ))}
+        <button role="menuitem"
+          style={{ display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-tight)", padding: "",
+            borderRadius: "var(--semantic-layout-units-cornerradius-base)", fontFamily: "inherit", fontSize: "var(--semantic-type-font-size-s)",
+            color: T.signOut, background: "transparent",
+            border: "none", width: "100%", textAlign: "left", cursor: "pointer" }}>
+          Sign out
+        </button>
+      </div>
+  );
+}
+
+// ─── Brand=NewCo layout ────────────────────────────────────────────────────────
+/**
+ * Figma TopNav.Global, Brand=NewCo (40018199:57659 desktop, 40018199:59368
+ * tablet, 40018199:59418 mobile), read 2026-11-03. A different layout from
+ * Amplify, not a recolour of it:
+ *
+ *   desktop  logo, divider, Pillar (brand tab + module tabs) | Org Switcher,
+ *            search, help, settings, notifications, profile
+ *   tablet   the same RowStart | Org Switcher (mobile type), search,
+ *            notifications, profile
+ *   mobile   SideNav.Control, Pillar trigger, Org Switcher (mobile type) |
+ *            more_vert, profile
+ *
+ * The action icons are NewCo's own line icons (Figma icon/search, icon/help,
+ * icon/gear, icon/bell), not Material Symbols. Their paths are the Figma
+ * exports, drawn at 16 with a 1.44 stroke, as the instances are.
+ */
+const NC_ICONS = {
+  search: ["M11 17.5C14.5899 17.5 17.5 14.5899 17.5 11C17.5 7.41015 14.5899 4.5 11 4.5C7.41015 4.5 4.5 7.41015 4.5 11C4.5 14.5899 7.41015 17.5 11 17.5Z", "M20 20L15.8 15.8"],
+  help: ["M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", "M9.5 9.49999C9.50157 9.04964 9.62476 8.60808 9.85656 8.22196C10.0884 7.83584 10.4202 7.5195 10.8169 7.30638C11.2136 7.09325 11.6606 6.99125 12.1105 7.01116C12.5604 7.03106 12.9966 7.17212 13.3729 7.41945C13.7493 7.66677 14.0519 8.01117 14.2487 8.41625C14.4455 8.82133 14.5292 9.27205 14.491 9.72078C14.4528 10.1695 14.2941 10.5996 14.0316 10.9656C13.7692 11.3316 13.4128 11.6199 13 11.8C12.3 12.1 12 12.7 12 13.5M12 17H12.01"],
+  gear: ["M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z", "M19.4 15C19.2737 15.2975 19.2349 15.6249 19.288 15.9437C19.3411 16.2625 19.4841 16.5595 19.7 16.8L19.8 16.9C20.0292 17.0719 20.2189 17.2911 20.356 17.5427C20.4932 17.7943 20.5747 18.0724 20.595 18.3582C20.6153 18.644 20.5739 18.9309 20.4737 19.1994C20.3735 19.4678 20.2168 19.7116 20.0142 19.9142C19.8116 20.1168 19.5678 20.2735 19.2994 20.3737C19.0309 20.4739 18.744 20.5153 18.4582 20.495C18.1724 20.4747 17.8943 20.3932 17.6427 20.256C17.3911 20.1189 17.1719 19.9292 17 19.7L16.9 19.6C16.6595 19.3841 16.3625 19.2411 16.0437 19.188C15.7249 19.1349 15.3975 19.1737 15.1 19.3C14.8094 19.4311 14.5616 19.6413 14.3848 19.9065C14.208 20.1718 14.1093 20.4814 14.1 20.8V21C14.1 21.5304 13.8893 22.0391 13.5142 22.4142C13.1391 22.7893 12.6304 23 12.1 23C11.5696 23 11.0609 22.7893 10.6858 22.4142C10.3107 22.0391 10.1 21.5304 10.1 21V20.9C10.0822 20.5701 9.96871 20.2526 9.77335 19.9862C9.578 19.7198 9.30927 19.5161 9 19.4C8.70249 19.2737 8.37514 19.2349 8.05634 19.288C7.73753 19.3411 7.44048 19.4841 7.2 19.7L7.1 19.8C6.92807 20.0292 6.7089 20.2189 6.45731 20.356C6.20572 20.4932 5.9276 20.5747 5.64178 20.595C5.35595 20.6153 5.0691 20.5739 4.80065 20.4737C4.53219 20.3735 4.2884 20.2168 4.08579 20.0142C3.88317 19.8116 3.72646 19.5678 3.62626 19.2994C3.52606 19.0309 3.48472 18.744 3.50503 18.4582C3.52534 18.1724 3.60684 17.8943 3.74399 17.6427C3.88115 17.3911 4.07076 17.1719 4.3 17L4.4 16.9C4.61594 16.6595 4.75885 16.3625 4.81199 16.0437C4.86512 15.7249 4.82627 15.3975 4.7 15.1C4.56888 14.8094 4.3587 14.5616 4.09347 14.3848C3.82824 14.208 3.51863 14.1093 3.2 14.1H3C2.46957 14.1 1.96086 13.8893 1.58579 13.5142C1.21071 13.1391 1 12.6304 1 12.1C1 11.5696 1.21071 11.0609 1.58579 10.6858C1.96086 10.3107 2.46957 10.1 3 10.1H3.1C3.42986 10.0822 3.7474 9.96871 4.01379 9.77335C4.28018 9.578 4.48389 9.30927 4.6 9C4.72627 8.70249 4.76512 8.37514 4.71199 8.05634C4.65885 7.73753 4.51594 7.44048 4.3 7.2L4.2 7.1C3.97076 6.92807 3.78115 6.7089 3.64399 6.45731C3.50684 6.20572 3.42534 5.9276 3.40503 5.64178C3.38472 5.35595 3.42606 5.0691 3.52626 4.80065C3.62646 4.53219 3.78317 4.2884 3.98579 4.08579C4.1884 3.88317 4.43219 3.72646 4.70065 3.62626C4.9691 3.52606 5.25595 3.48472 5.54178 3.50503C5.8276 3.52534 6.10572 3.60684 6.35731 3.74399C6.6089 3.88115 6.82807 4.07076 7 4.3L7.1 4.4C7.34048 4.61594 7.63753 4.75885 7.95634 4.81199C8.27514 4.86512 8.60249 4.82627 8.9 4.7H9C9.29055 4.56888 9.53839 4.3587 9.71521 4.09347C9.89203 3.82824 9.99071 3.51863 10 3.2V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.1C14.0093 3.41863 14.108 3.72824 14.2848 3.99347C14.4616 4.2587 14.7094 4.46888 15 4.6C15.2975 4.72627 15.6249 4.76512 15.9437 4.71199C16.2625 4.65885 16.5595 4.51594 16.8 4.3L16.9 4.2C17.0719 3.97076 17.2911 3.78115 17.5427 3.64399C17.7943 3.50684 18.0724 3.42534 18.3582 3.40503C18.644 3.38472 18.9309 3.42606 19.1994 3.52626C19.4678 3.62646 19.7116 3.78317 19.9142 3.98579C20.1168 4.1884 20.2735 4.43219 20.3737 4.70065C20.4739 4.9691 20.5153 5.25595 20.495 5.54178C20.4747 5.8276 20.3932 6.10572 20.256 6.35731C20.1189 6.6089 19.9292 6.82807 19.7 7L19.6 7.1C19.3841 7.34048 19.2411 7.63753 19.188 7.95634C19.1349 8.27514 19.1737 8.60249 19.3 8.9V9C19.4311 9.29055 19.6413 9.53839 19.9065 9.71521C20.1718 9.89203 20.4814 9.99071 20.8 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.9C20.5814 14.0093 20.2718 14.108 20.0065 14.2848C19.7413 14.4616 19.5311 14.7094 19.4 15Z"],
+  bell: ["M10.3 21C10.4577 21.3159 10.7003 21.5816 11.0006 21.7674C11.3008 21.9531 11.6469 22.0515 12 22.0515C12.3531 22.0515 12.6992 21.9531 12.9994 21.7674C13.2997 21.5816 13.5423 21.3159 13.7 21M6 8C6 6.4087 6.63214 4.88258 7.75736 3.75736C8.88258 2.63214 10.4087 2 12 2C13.5913 2 15.1174 2.63214 16.2426 3.75736C17.3679 4.88258 18 6.4087 18 8C18 15 21 17 21 17H3C3 17 6 15 6 8Z"],
+};
+
+function NcIcon({ name }) {
+  // 24 viewBox drawn at 16. Stroke 2.16 in viewBox units renders 1.44, the
+  // instances' stroke weight.
+  return (
+    <svg width={L.actionIconGlyph} height={L.actionIconGlyph} viewBox="0 0 24 24" fill="none" aria-hidden="true"
+      stroke="currentColor" strokeWidth="2.16" strokeLinecap="round" strokeLinejoin="round" style={{ display: "block" }}>
+      {NC_ICONS[name].map((d, i) => <path key={i} d={d} />)}
+    </svg>
+  );
+}
+
+/** NewCo.Logo / Mark / Reversed, 27x32, painted in Foreground/Action/Ghost/Rest. */
+function NewCoMark() {
+  return (
+    <svg width="27" height="32" viewBox="0 0 27 32" fill="currentColor" aria-hidden="true" style={{ display: "block" }}>
+      <path d="M2.29958 25.2142C1.02842 25.2142 0 24.3456 0 23.277C0 22.2765 0.900517 21.4519 2.05683 21.3508L22.8862 19.5081C23.0036 19.4971 23.1237 19.4927 23.2438 19.4927C25.1205 19.4927 26.6422 20.7747 26.6422 22.3556C26.6422 23.9366 25.1205 25.2186 23.2438 25.2186H2.29958V25.2142Z" />
+      <path d="M22.2387 5.52125C23.6274 4.83081 25.418 5.22221 26.2376 6.392C27.0572 7.56179 26.5925 9.07021 25.2039 9.76065C25.0369 9.84201 24.8672 9.91018 24.6923 9.96295L15.2956 12.7643C14.429 13.0238 13.4398 12.7379 12.9543 12.0453C12.4061 11.2603 12.7168 10.2488 13.6486 9.78484L22.2413 5.52125H22.2387Z" />
+      <path d="M8.7547 19.5479C7.74194 19.6754 6.74224 19.1631 6.43424 18.3121C6.09491 17.3754 6.71875 16.3837 7.83069 16.0979L22.453 12.3334C24.1653 11.8936 25.9767 12.705 26.4988 14.1453C27.0208 15.5877 26.0577 17.1137 24.348 17.5535C24.1914 17.5931 24.0322 17.6239 23.8755 17.6437L8.7547 19.5457V19.5479Z" />
+    </svg>
+  );
+}
+
+// Type styles the NewCo bar uses, composed from the scale. Figma binds the
+// tracking to the primitive tier; these are the semantic names for the same values.
+const NC_TYPE = {
+  menuBase:    { fontSize: "var(--semantic-type-font-size-s)", fontWeight: "var(--semantic-type-weight-medium)", lineHeight: "var(--semantic-type-line-height-s-single)", letterSpacing: "var(--semantic-type-letter-spacing-spacious)" },   // Label/Menu/Base/Medium
+  menuLarge:   { fontSize: "var(--semantic-type-font-size-r)", fontWeight: "var(--semantic-type-weight-medium)", lineHeight: "var(--semantic-type-line-height-r-single)", letterSpacing: "var(--semantic-type-letter-spacing-wide)" },      // Label/Menu/Large/Medium
+  sectionSm:   { fontSize: "var(--semantic-type-font-size-r)", fontWeight: "var(--semantic-type-weight-semibold)", lineHeight: "var(--semantic-type-line-height-r-single)", letterSpacing: "var(--semantic-type-letter-spacing-wide)" },    // Heading/Section/Small/Semibold
+  localBase:   { fontSize: "var(--semantic-type-font-size-s)", fontWeight: "var(--semantic-type-weight-semibold)", lineHeight: "var(--semantic-type-line-height-s-tight)", letterSpacing: "var(--semantic-type-letter-spacing-spacious)" },   // Heading/Local/Base/Semibold
+};
+
+// Hover, press and focus as one hook, so every NewCo control reads its state the same way.
+function usePress() {
+  const [hov, setHov] = useState(false);
+  const [press, setPress] = useState(false);
+  return { hov, press, handlers: {
+    onMouseEnter: () => setHov(true), onMouseLeave: () => { setHov(false); setPress(false); },
+    onMouseDown: () => setPress(true), onMouseUp: () => setPress(false), onBlur: () => setPress(false),
+  } };
+}
+
+/**
+ * Pillar.Item, Figma set 40018002:15993. Type=Brand is the first tab (the
+ * product name); Type=Default the module tabs. 36 tall inside a 44 target,
+ * CornerRadius/Full, padding Padding/Base (desktop) or Padding/Tight (tablet).
+ *
+ *   Base     no fill, Foreground/Action/Ghost/Rest
+ *   Hover    Fill/Action/Ghost/Rest, Foreground/Action/Ghost/Hover
+ *   Pressed  Fill/Action/Ghost/Pressed, Foreground/Action/Ghost/Pressed
+ *   Active   Fill/Action/Ghost/Hover, Foreground/Action/Ghost/Pressed, semibold style
+ */
+function PillarItem({ label, active, brandItem, tablet, onClick }) {
+  const { hov, press, handlers } = usePress();
+  const fill = active ? T.controlHover : press ? T.controlPressed : hov ? T.searchFill : "transparent";
+  const fg = active || press ? T.monoPressed : hov ? T.monoHover : T.monoBase;
+  const type = brandItem ? (active ? NC_TYPE.sectionSm : NC_TYPE.menuLarge) : (active ? NC_TYPE.localBase : NC_TYPE.menuBase);
+  return (
+    <button type="button" aria-current={active ? "page" : undefined} onClick={onClick} {...handlers}
+      style={{ display: "flex", alignItems: "center", minWidth: L.actionTarget, minHeight: L.actionTarget,
+        padding: 0, border: "none", background: "transparent", cursor: "pointer", fontFamily: "inherit" }}>
+      <span style={{ display: "flex", alignItems: "center", height: L.modInnerH, boxSizing: "border-box",
+        padding: `0 ${tablet ? u("padding-tight") : u("padding-base")}`, borderRadius: u("cornerradius-full"),
+        background: fill, color: fg, whiteSpace: "nowrap", ...type,
+        transition: "background var(--motion-duration-2) var(--motion-easing-standard), color var(--motion-duration-2) var(--motion-easing-standard)" }}>
+        {label}
+      </span>
+    </button>
+  );
+}
+
+/**
+ * Org Switcher, Brand=NewCo (set 40006819:14583). Pill-shaped (CornerRadius/Full)
+ * with a resting Stroke/Action/Ghost/Rest at Button/BorderWidth/Rest that stays
+ * in every state; the fill follows the state, the label stays on Ghost/Rest.
+ * Type=Desktop: padding 6,6,6,12, gap Gap/XXTight, chevron box 24.
+ * Type=Mobile (tablet and mobile): padding 8,4,8,8, gap Gap/XXXTight, chevron box 20,
+ * label from org.shortName (Figma Label-Mobile).
+ */
+function NewCoOrgSwitcher({ org, open, onToggle, compact }) {
+  const { hov, press, handlers } = usePress();
+  const fill = open || press ? T.controlPressed : hov ? T.controlHover : "transparent";
+  return (
+    <div style={{ position: "relative", padding: L.slotPadV, minWidth: 0 }}>
+      <button type="button" onClick={onToggle} {...handlers}
+        aria-haspopup="true" aria-expanded={open}
+        aria-label={`Switch organisation: ${org.name}${org.campus ? ", " + org.campus : ""}`}
+        style={{ display: "flex", alignItems: "center", boxSizing: "border-box", minHeight: L.modInnerH, minWidth: 0,
+          maxWidth: compact ? L.orgMainMaxMobile : L.orgMainMax,
+          gap: compact ? "var(--semantic-layout-units-gap-xxxtight)" : "var(--semantic-layout-units-gap-xxtight)",
+          padding: compact ? `${u("padding-xtight")} ${u("padding-xxxtight")} ${u("padding-xtight")} ${u("padding-xtight")}`
+                           : `${L.orgPadV} ${L.orgPadV} ${L.orgPadV} ${L.orgPadL}`,
+          borderRadius: u("cornerradius-full"), border: "none", background: fill, cursor: "pointer", fontFamily: "inherit",
+          boxShadow: `inset 0 0 0 var(--contextual-layout-units-button-borderwidth-rest) ${T.orgStroke}`,
+          transition: "background var(--motion-duration-3) var(--motion-easing-standard)" }}>
+        <span aria-hidden="true" style={{ ...NC_TYPE.menuBase, color: T.monoBase, whiteSpace: "nowrap", overflow: "hidden",
+          textOverflow: "ellipsis", minWidth: 0, maxWidth: compact ? L.orgNameMaxMobile : L.orgNameMax }}>
+          {compact ? (org.shortName || org.name) : org.name}
+        </span>
+        <span style={{ width: compact ? L.modChevronBox : L.orgChevronBox, height: compact ? L.modChevronBox : L.orgChevronBox,
+          display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
+          transform: open ? "rotate(180deg)" : "none", transition: "transform var(--motion-duration-4) var(--motion-easing-standard)" }}>
+          <Icon name="expand_more" size={L.chevronGlyph} style={{ color: T.orgChevron }} />
+        </span>
+      </button>
+    </div>
+  );
+}
+
+/** Pillar trigger, mobile: the product name as a pill dropdown, 36 inside a 48 slot. */
+function PillarTrigger({ label, open, onToggle }) {
+  const { hov, press, handlers } = usePress();
+  const fill = open || press ? T.controlPressed : hov ? T.controlHover : "transparent";
+  return (
+    <div style={{ padding: `${L.slotPadV} ${L.slotPadNarrow}` }}>
+      <button type="button" onClick={onToggle} aria-haspopup="true" aria-expanded={open} {...handlers}
+        style={{ display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-xxxtight)", height: L.modInnerH,
+          boxSizing: "border-box", padding: `0 10px 0 ${u("padding-medium")}`, /* pathway-allow: Figma Pillar.Trigger right padding 10 has no token (gap logged in the spec) */
+          borderRadius: u("cornerradius-full"), border: "none", background: fill, cursor: "pointer", fontFamily: "inherit",
+          boxShadow: `inset 0 0 0 var(--contextual-layout-units-button-borderwidth-rest) ${T.orgStroke}`, color: T.monoBase }}>
+        <span style={{ ...NC_TYPE.sectionSm, whiteSpace: "nowrap" }}>{label}</span>
+        <span style={{ width: L.modChevronBox, height: L.modChevronBox, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
+          <Icon name="expand_more" size={L.chevronGlyph} style={{ color: T.monoBase }} />
+        </span>
+      </button>
+    </div>
+  );
+}
+
+/** One NewCo action: a 44 target, CornerRadius/Base, a 16 line icon, optional Badge. */
+function NewCoAction({ icon, label, badge, onClick }) {
+  const { hov, press, handlers } = usePress();
+  return (
+    <button type="button" aria-label={label} onClick={onClick} {...handlers}
+      style={{ position: "relative", display: "flex", alignItems: "center", justifyContent: "center",
+        width: L.actionTarget, height: L.actionTarget, padding: 0, border: "none", cursor: "pointer",
+        borderRadius: L.radius, background: press ? T.controlPressed : hov ? T.controlHover : "transparent",
+        color: press ? T.monoPressed : hov ? T.monoHover : T.monoBase,
+        transition: "background var(--motion-duration-2) var(--motion-easing-standard), color var(--motion-duration-2) var(--motion-easing-standard)" }}>
+      <NcIcon name={icon} />
+      {/* Badge: 8 circle at 26,10, Fill/Static/Attention/Strong with a 1.5 ring in
+          Fill/Surface/Chrome drawn INSIDE the 8, as Figma strokes it. */}
+      {badge && <span aria-hidden="true" style={{ position: "absolute", left: 26, top: 10, width: 8, height: 8,
+        boxSizing: "border-box", borderRadius: "50%", background: SCD("fill-static-attention-strong"),
+        boxShadow: `inset 0 0 0 var(--semantic-layout-units-borderwidth-medium) ${T.navBg}` }} />}
+    </button>
+  );
+}
+
+export const NEWCO_PILLARS = [
+  { id: "newco", label: "NewCo", brand: true },
+  { id: "people", label: "People" },
+  { id: "giving", label: "Giving" },
+  { id: "financials", label: "Financials" },
+  { id: "digital", label: "Digital" },
+];
+
+export const NEWCO_ACTIONS = [
+  { icon: "search", label: "Search" },
+  { icon: "help", label: "Help" },
+  { icon: "gear", label: "Settings" },
+  { icon: "bell", label: "Notifications", badge: true },
+];
+
+function TopNavNewCo({ navRef, className, breakpoint, org, user, openPanel, toggle, close, orgs, onOrgSelect,
+  pillars, activePillarId, onPillarSelect, ncActions, onSideNavToggle, onMore }) {
+  const isMobile = breakpoint === "mobile", isTablet = breakpoint === "tablet";
+  const brandItem = pillars.find((x) => x.brand) || pillars[0];
+  // Tablet keeps search and notifications; mobile folds the actions into more_vert.
+  const shown = isTablet ? ncActions.filter((a) => a.icon === "search" || a.icon === "bell") : ncActions;
+  const org_ = <NewCoOrgSwitcher org={org} open={openPanel === "org"} onToggle={() => { toggle("org"); onOrgSelect?.(); }} compact={isMobile || isTablet} />;
+  return (
+    <div style={{ background: "var(--semantic-color-fill-surface-chrome)", position: "relative", zIndex: 100 }}>
+      <nav ref={navRef} aria-label="Global navigation" className={className}
+        style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
+          height: L.navH, maxHeight: L.navH, boxSizing: "border-box",
+          // Container.Main padding 6 by 16 desktop and tablet, 6 by 8 mobile.
+          padding: `${L.navPadV} ${isMobile ? u("padding-xtight") : u("padding-base")}`, gap: L.navGap,
+          position: "relative", fontFamily: "'Red Hat Text', sans-serif",
+          WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" }}>
+        <div style={{ display: "flex", alignItems: "center", flexShrink: 0, minWidth: 0,
+          gap: isMobile ? "var(--semantic-layout-units-gap-xxtight)" : "var(--semantic-layout-units-gap-tight)" }}>
+          {isMobile ? (
+            <>
+              <ActionIcon name="menu" size="Large" label="Open navigation menu" color={T.monoBase} onClick={onSideNavToggle} />
+              <PillarTrigger label={brandItem.label} open={openPanel === "pillar"} onToggle={() => toggle("pillar")} />
+              {org_}
+            </>
+          ) : (
+            <>
+              {/* Logo.Home: 48 tall, padding 0 by Padding/XTight, CornerRadius/Base */}
+              <a href="#" aria-label="Home" onClick={(e) => e.preventDefault()}
+                style={{ display: "flex", alignItems: "center", height: L.touchTarget, padding: `0 ${u("padding-xtight")}`,
+                  borderRadius: L.radius, color: T.monoBase }}>
+                <NewCoMark />
+              </a>
+              {/* Divider.Logo: 1 by 28, Fill/Action/Ghost/Pressed */}
+              <span aria-hidden="true" style={{ width: 1, height: 28, borderRadius: 1, background: T.controlPressed, flexShrink: 0 }} />
+              <div role="navigation" aria-label="Products"
+                style={{ display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-xxtight)", paddingLeft: u("padding-xtight") }}>
+                {pillars.map((p) => (
+                  <PillarItem key={p.id} label={p.label} brandItem={!!p.brand} tablet={isTablet}
+                    active={p.brand ? activePillarId === p.id || !activePillarId : activePillarId === p.id}
+                    onClick={() => onPillarSelect?.(p.id)} />
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+        <div style={{ display: "flex", alignItems: "center", flexShrink: 0,
+          gap: isMobile || isTablet ? "var(--semantic-layout-units-gap-xxtight)" : "var(--semantic-layout-units-gap-tight)" }}>
+          {!isMobile && org_}
+          {isMobile ? (
+            <TopNavActionIcon icon="more_vert" label="More actions" onClick={onMore} />
+          ) : (
+            <div style={{ display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-xxtight)" }}>
+              {shown.map((a) => <NewCoAction key={a.label} {...a} />)}
+            </div>
+          )}
+          <TopNavProfile user={user} open={openPanel === "profile"} onToggle={() => toggle("profile")} mobile={isMobile} />
+          {openPanel === "profile" && <TopNavProfileMenu user={user} />}
+        </div>
+        {openPanel === "org" && (
+          <div style={{ position: "absolute", top: "calc(100% + 4px)", right: L.navPadH, zIndex: 300,
+            animation: "tnDropIn var(--motion-duration-4) var(--motion-easing-spring) both" }}>
+            <OrgSwitcherPanel orgs={orgs} activeOrgId={org.id} onSelect={(o) => { close(); onOrgSelect?.(o); }} />
+          </div>
+        )}
+      </nav>
+    </div>
+  );
+}
+
 // ─── TopNav ────────────────────────────────────────────────────────────────────
 /**
  * TopNav.Global component.
@@ -669,11 +967,19 @@ export function ModuleSwitcher({ modules, activeId, open, onToggle, breakpoint =
  *                      (no avatar/placeholder). logoUrl, when provided, renders the logo
  *                      in the nav trigger AND in the org-panel dropdown.
  *   user, { name, initials, email, avatarUrl? }
+ *   showCampus, boolean, default false. Figma Org Switcher "Show CityName
+ *                      (Catholic)": shows org.campus beside the org name.
+ *   brand, "amplify" | "newco"  Figma Brand. NewCo is its own layout: logo,
+ *                      Pillar tabs, pill org switcher, line-icon actions.
+ *   pillars, activePillarId, onPillarSelect  NewCo Pillar tabs (default NEWCO_PILLARS)
+ *   newcoActions       NewCo action icons (default NEWCO_ACTIONS)
  *   breakpoint, "desktop" | "tablet" | "mobile"
  *   onModuleSelect, (id: string) => void
  *   onOrgSelect, () => void
  *   onSearchOpen, () => void
  *   onSideNavToggle, () => void  (mobile only)
+ *   actions, Array<{icon, label, onClick}>  Figma TopNav.Actions slot (default: two bells).
+ *                      On mobile, more than one folds into more_vert.
  *   onNotifications, () => void
  *   onMore, () => void
  *   className, string
@@ -685,12 +991,19 @@ export function TopNav({
   orgs            = DEMO_ORGS,   // list shown in the OrgSwitcher "Open" dropdown panel
   user            = { name: "Jo Lopez", initials: "JL", email: "jo@sacredheart.org" },
   breakpoint      = "desktop",
+  brand           = "amplify",          // Figma "Brand": "amplify" | "newco"
+  pillars         = NEWCO_PILLARS,
+  activePillarId,
+  onPillarSelect,
+  newcoActions    = NEWCO_ACTIONS,
+  showCampus      = false,              // Figma Org Switcher "Show CityName (Catholic)", default off
   moduleSwitcherType = "interactive",   // "interactive" | "static" (Amplify Dashboard), Figma "Type"
   initialOpenPanel = null,              // "module" | "org" | "profile" | null, seeds the open panel (demo/snapshot use)
   onModuleSelect,
   onOrgSelect,
   onSearchOpen,
   onSideNavToggle,
+  actions,
   onNotifications,
   onMore,
   className = "",
@@ -730,6 +1043,13 @@ export function TopNav({
   // entire TopNav so it can never collide with the OrgSwitcher or other controls.
   const useTakeover = searchExpanded;
 
+  if (brand === "newco") {
+    return <TopNavNewCo navRef={navRef} className={className} breakpoint={breakpoint} org={org} user={user} orgs={orgs}
+      openPanel={openPanel} toggle={toggle} close={close} onOrgSelect={onOrgSelect}
+      pillars={pillars} activePillarId={activePillarId} onPillarSelect={onPillarSelect}
+      ncActions={newcoActions} onSideNavToggle={onSideNavToggle} onMore={onMore} />;
+  }
+
   return (
     // TWO ELEMENTS, AND THE SPLIT IS THE POINT.
     //
@@ -787,10 +1107,14 @@ export function TopNav({
         padding: `${L.navPadV} ${L.navPadH}`, gap: L.navGap,
         position: "relative", overflow: "visible",
         fontFamily: "'Red Hat Text', sans-serif",
+        // Grayscale smoothing, as Figma renders. macOS subpixel smoothing
+        // draws light text on a dark bar visibly bolder, which made every
+        // label and the avatar initials look a weight heavier than Figma.
+        WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale",
       }}
     >
-      {/* ── Slot.RowStart ── */}
-      <div style={{ display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-tight)", flexShrink: 0 }}>
+      {/* ── Slot.RowStart ── gap Gap/Tight; 0 on mobile (Figma Slot.RowStart.Mobile) */}
+      <div style={{ display: "flex", alignItems: "center", gap: isMobile ? 0 : "var(--semantic-layout-units-gap-tight)", flexShrink: 0 }}>
 
         {/* SideNav.Control, mobile only. Figma set 40007082:7703: three State
             variants wrapping an `Action Icon` at Size=Large, so a 48x48 target,
@@ -859,6 +1183,7 @@ export function TopNav({
           open={openPanel === "org"}
           onToggle={() => { toggle("org"); onOrgSelect?.(); }}
           mobile={isMobile}
+          showCampus={showCampus}
         />
 
         {/* Org panel: the real OrgSwitcher "Open" dropdown (Figma 40007336:9453) */}
@@ -877,8 +1202,8 @@ export function TopNav({
         )}
       </div>
 
-      {/* ── Slot.RowEnd ── */}
-      <div style={{ display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-tight)", flexShrink: 0 }}>
+      {/* ── Slot.RowEnd ── gap Gap/Tight; 0 on mobile (Figma Slot.RowEnd.Mobile) */}
+      <div style={{ display: "flex", alignItems: "center", gap: isMobile ? 0 : "var(--semantic-layout-units-gap-tight)", flexShrink: 0 }}>
 
         {/* Collapsed search pill. Opening it triggers the full-bar takeover
             overlay below (never an inline expand), so it cannot overlap the
@@ -891,7 +1216,7 @@ export function TopNav({
           searchProps={{ value: searchQuery, onChange: setSearchQuery, onClear: () => setSearchQuery("") }}
         />
 
-        <TopNavActions breakpoint={breakpoint} onNotifications={onNotifications} onMore={onMore} />
+        <TopNavActions breakpoint={breakpoint} actions={actions} onNotifications={onNotifications} onMore={onMore} />
 
         <TopNavProfile
           user={user}
@@ -901,39 +1226,7 @@ export function TopNav({
         />
 
         {/* Profile menu */}
-        {openPanel === "profile" && (
-          <div role="menu" data-theme="light"
-            style={{
-              position: "absolute", top: "calc(100% + 4px)", right: L.navPadH,
-              width: 200, background: T.panelBg,
-              border: `1px solid ${T.panelBorder}`, borderRadius: L.radius,
-              boxShadow: T.panelShadow, padding: "var(--semantic-layout-units-padding-xxxtight)", zIndex: 300,
-              animation: "tnDropIn var(--motion-duration-4) var(--motion-easing-spring) both",
-            }}
-          >
-            <div style={{ padding: " ",
-              borderBottom: `1px solid ${T.panelDivider}`, marginBottom: 4 }}>
-              <div style={{ fontSize: "var(--semantic-type-font-size-s)", fontWeight: 600, color: T.itemText }}>{user.name}</div>
-              <div style={{ fontSize: "var(--semantic-type-font-size-xxs)", color: T.itemMeta, marginTop: 1 }}>{user.email}</div>
-            </div>
-            {["Profile settings", "Settings"].map(label => (
-              <button key={label} role="menuitem"
-                style={{ display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-tight)", padding: "",
-                  borderRadius: "var(--semantic-layout-units-cornerradius-base)", fontFamily: "inherit", fontSize: "var(--semantic-type-font-size-s)",
-                  color: T.itemTextBase, background: "transparent",
-                  border: "none", width: "100%", textAlign: "left", cursor: "pointer" }}>
-                {label}
-              </button>
-            ))}
-            <button role="menuitem"
-              style={{ display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-tight)", padding: "",
-                borderRadius: "var(--semantic-layout-units-cornerradius-base)", fontFamily: "inherit", fontSize: "var(--semantic-type-font-size-s)",
-                color: T.signOut, background: "transparent",
-                border: "none", width: "100%", textAlign: "left", cursor: "pointer" }}>
-              Sign out
-            </button>
-          </div>
-        )}
+        {openPanel === "profile" && <TopNavProfileMenu user={user} />}
       </div>
 
       {/* Full-width search takeover, shown whenever search is open, on every
@@ -949,13 +1242,12 @@ export function TopNav({
           Escape still closes. */}
       {useTakeover && (
         <div
-          // data-theme="light" because the takeover IS the bar, and the bar
-          // resolves its chrome in light. Without it the takeover sat inside the
-          // bar's own data-theme="midnight" region, where Fill/Surface/Chrome is
-          // #152343 rather than #2d4889: so opening search visibly darkened the
-          // whole bar. Measured 2026-10-02: bar rgb(45,72,137), takeover
-          // rgb(21,35,67).
-          data-theme="light"
+          // NO data-theme. The takeover IS the bar, so it paints
+          // Fill/Surface/Chrome in the page's own mode, exactly as the bar does.
+          // It used to force data-theme="light", left over from when the bar
+          // itself carried "midnight"; once the bar followed the page, that
+          // override made opening search switch the bar to the Light chrome on
+          // any dark page. Removed 2026-11-02.
           style={{
             position: "absolute", inset: 0, zIndex: 200,
             background: "var(--semantic-color-fill-surface-chrome)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helloimjolopez-pathway/pathway-components",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Pathway Design System React components",
   "type": "module",
   "sideEffects": false,