@helloimjolopez-pathway/pathway-components 0.2.2 → 0.2.4

package/components/icon/action-icon.jsx

@@ -90,6 +90,13 @@ export const T = {
  * @param {string} color  Override the resting colour. Omit on a light surface;
  *                        pass one on a dark or on-brand surface, where Ghost
  *                        is the right family.
+ * @param {object} states Override the hover and pressed tokens as
+ *                        { hover, pressed, layerHover, layerPress }. A dark or
+ *                        on-brand surface needs this as well as `color`: the
+ *                        default ladder paints a light Primary/Subtle layer and a
+ *                        dark Secondary glyph, which is right on a light page and
+ *                        wrong on the navy TopNav. SideNav.Control (40007082:7703)
+ *                        binds the Ghost ladder instead.
  */
 export function ActionIcon({
   name,
@@ -97,6 +104,7 @@ export function ActionIcon({
   label,
   fill = 0,
   color,
+  states,
   onClick,
   disabled,
   className = "",
@@ -107,7 +115,8 @@ export function ActionIcon({
   const [hov, setHov] = useState(false);
   const [press, setPress] = useState(false);
   const s = ACTION_ICON_SIZES[size] || ACTION_ICON_SIZES.Small;
-  const fg = disabled ? T.rest : press ? T.pressed : hov ? T.hover : (color || T.rest);
+  const st = { ...T, ...states };
+  const fg = disabled ? T.rest : press ? st.pressed : hov ? st.hover : (color || T.rest);
 
   return (
     <button
@@ -141,7 +150,7 @@ export function ActionIcon({
       <span style={{
         display: "inline-flex", alignItems: "center", justifyContent: "center",
         width: s.layer, height: s.layer, borderRadius: U("cornerradius-base"),
-        background: press ? T.layerPress : hov ? T.layerHover : "transparent",
+        background: press ? st.layerPress : hov ? st.layerHover : "transparent",
         transition: noMotion ? "none" : `background ${M("duration-2")} ${M("easing-standard")}`,
       }}>
         <Icon name={name} size={s.glyph} fill={fill} style={{

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

@@ -0,0 +1,46 @@
+/**
+ * NavShell's standalone demo. Imports the real NavShell, which composes the
+ * real TopNav and SideNav, so nothing here can fall out of step with them: see
+ * components/_demo/harness.jsx for why the newer demos are generated.
+ *
+ * Replaced the hand-written nav-shell.html on 2026-11-03. That page carried its
+ * own copies of TopNav and SideNav, both from before the Figma parity passes:
+ * a 240px nav, no item radius, a 4px stripe rounded at 4, a 20px glyph, a 22px
+ * module mark, raw rgba hover fills, and a 56px NavHeader Figma does not draw.
+ */
+import React from "react";
+import { DemoChrome, mount } from "../_demo/harness.jsx";
+import { NavShell } from "./nav-shell.jsx";
+import { PageTemplate } from "../page-template/page-template.jsx";
+import { NAV_SECTIONS } from "../../src/stories/Library/SideNav/sidenavDemoData.jsx";
+
+const C = (n) => `var(--semantic-color-${n})`;
+const Y = (n) => `var(--semantic-type-${n})`;
+
+// NavShell is fixed to the viewport, so every width, Desktop included, renders
+// in an inner frame: in this document it would sit on top of the demo chrome.
+const WIDTHS = { Desktop: 1440, Tablet: 900, Mobile: 390 };
+
+const ORG = { id: "gcc", name: "Grace Community Church", campus: "Knoxville", initials: "GC" };
+const USER = { name: "Jo Lopez", initials: "JL", email: "jo@gracecommunity.org" };
+
+function App() {
+  return (
+    <DemoChrome title="NavShell" widths={WIDTHS}
+      blurb={"TopNav, SideNav and the page area composed into one application frame. " +
+             "Desktop pushes the page with a collapsible nav, Tablet locks the 72px rail, " +
+             "Mobile opens the nav as an overlay from the hamburger."}>
+      <NavShell activeModuleId="accounting" org={ORG} user={USER}
+        navSections={NAV_SECTIONS} activeNavId="balance_sheet" onNavigate={() => {}}>
+        <PageTemplate>
+          <h1 style={{ margin: 0, fontSize: Y("font-size-xl"), lineHeight: Y("line-height-xl-single"),
+            fontWeight: Y("weight-semibold"), color: C("foreground-static-neutral-bold") }}>
+            Balance Sheet
+          </h1>
+        </PageTemplate>
+      </NavShell>
+    </DemoChrome>
+  );
+}
+
+mount(<App />);

package/components/nav-shell/nav-shell.jsx

@@ -49,9 +49,9 @@ function useBreakpoint() {
  *   SideNav    fixed, left edge, top 60px → bottom, push layout
  *   Shell.Main scrollable content area, margin-left = SideNav width
  *
- * Desktop:  SideNav 240px expanded | 84px collapsed, user toggles
- * Tablet:   SideNav always 84px rail, toggle locked
- * Mobile:   SideNav hidden, slides in as 240px overlay on hamburger tap
+ * Desktop:  SideNav 250px expanded | 72px collapsed, user toggles
+ * Tablet:   SideNav always 72px rail, toggle locked
+ * Mobile:   SideNav hidden, slides in as 250px overlay on hamburger tap
  *
  * Props (TopNav pass-through):
  *   modules          Array<{id, label, icon}> — all modules (default: DEFAULT_MODULES)
@@ -107,10 +107,13 @@ export function NavShell({
   // Mobile overlay open state
   const [mobileOpen, setMobileOpen] = useState(false);
 
-  // Tablet: rail (84px) is fixed, no user toggle
-  // Mobile:  always "collapsed" visually (but managed separately via mobileOpen)
+  // Tablet: rail (72px) is fixed, no user toggle
+  // Mobile:  expanded inside the overlay, opened and closed via mobileOpen
   // Desktop: user-controlled
-  const effectiveCollapsed = isTablet || isMobile ? true : collapsed;
+  // Mobile is EXPANDED: the overlay is the full 250 nav, as spec §8 and the
+  // NavShell story both have it. This forced it collapsed, so the 250 overlay
+  // opened with a 72 rail inside it and 178px of blank.
+  const effectiveCollapsed = isTablet ? true : isMobile ? false : collapsed;
 
   // Shell.Main margin-left: matches current SideNav width for push layout.
   // Mobile: no margin (SideNav is an overlay).
@@ -163,6 +166,12 @@ export function NavShell({
       </a>
 
       {/* ── TopNav: position fixed, full width, 60px ─────────────────────── */}
+      {/* The comment above was all there was: TopNav renders a plain in-flow
+          <nav>, so it sat in the document flow while Shell.Main ALSO took a
+          60px top margin, putting a blank 60px band under the bar, and the
+          fixed SideNav sat under any wrapper padding. The wrapper makes it
+          fixed, as spec §9.3 says. */}
+      <div style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 100 }}>
       <TopNav
         modules={modules}
         activeModuleId={activeModuleId}
@@ -174,6 +183,7 @@ export function NavShell({
         onOrgSelect={onOrgSelect}
         onSideNavToggle={handleSideNavToggle}
       />
+      </div>
 
       {/* ── Mobile scrim — darkens content while SideNav overlay is open ─── */}
       {isMobile && mobileOpen && (
@@ -190,7 +200,7 @@ export function NavShell({
 
       {/* ── SideNav container ────────────────────────────────────────────── */}
       {/* Position: fixed so it stays below TopNav while the content scrolls.
-          On mobile: width controls the overlay reveal (0 → 240px); the SideNav
+          On mobile: width controls the overlay reveal (0 → 250px); the SideNav
           itself renders inside a clipping container and slides in from the left.
           On desktop/tablet: overflow hidden so the SideNav's own width transition
           stays within the container; no width needed here. */}
@@ -219,7 +229,8 @@ export function NavShell({
           onNavigate={onNavigate}
           collapsed={effectiveCollapsed}
           onCollapseChange={handleCollapseChange}
-          hideCollapseButton={isTablet}
+          // Mobile: the TopNav hamburger is the only toggle (NavHeader spec).
+          hideCollapseButton={isTablet || isMobile}
           headerEnd={navHeaderEnd}
           footer={navFooter}
         >

package/components/org-switcher/org-switcher.jsx

@@ -513,6 +513,7 @@ function OrgRow({ org, active, onSelect }) {
       onMouseLeave={() => setHov(false)}
       aria-current={active ? "true" : undefined}
       style={{
+        position: "relative",
         display: "flex", alignItems: "center", gap: 12, width: "100%", textAlign: "left",
         padding: "8px 8px", border: "none", cursor: "pointer", borderRadius: 8,
         fontFamily: "inherit",
@@ -520,6 +521,17 @@ function OrgRow({ org, active, onSelect }) {
         transition: noMotion ? "none" : "background var(--motion-duration-2) var(--motion-easing-standard)",
       }}
     >
+      {/* indicator.stripe on the selected row, as OrgSwitcher.Row State=Selected
+          draws it (40018011:16090): 4 wide, 44 tall, right corners rounded 8,
+          Fill/Action/Selection/Indicator. The same stripe as the side nav. */}
+      {active && (
+        <span aria-hidden="true" style={{
+          position: "absolute", left: 0, top: "50%", transform: "translateY(-50%)",
+          width: 4, height: 44,
+          borderRadius: "0 var(--semantic-layout-units-cornerradius-base) var(--semantic-layout-units-cornerradius-base) 0",
+          background: "var(--semantic-color-fill-action-selection-indicator)",
+        }} />
+      )}
       {/* Logo tile, org initials on brand fill (falls back from a logo image) */}
       <div style={{
         width: 44, height: 44, borderRadius: 6, flexShrink: 0, background: PANEL_T.logoBg,
@@ -538,7 +550,8 @@ function OrgRow({ org, active, onSelect }) {
         <ModuleCluster />
       </div>
       {/* Trailing chevron */}
-      <Icon name="chevron_right" size={20} style={{ color: PANEL_T.icon, flexShrink: 0 }} />
+      {/* 12, as OrgSwitcher.Row's trailing chevron in Figma. Was 20. */}
+      <Icon name="chevron_right" size={12} style={{ color: PANEL_T.icon, flexShrink: 0 }} />
     </button>
   );
 }
@@ -577,7 +590,8 @@ export function OrgSwitcherPanel({
         display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-tight)", padding: "var(--semantic-layout-units-padding-xtight)", borderRadius: "var(--semantic-layout-units-cornerradius-base)",
         border: `1px solid ${PANEL_T.border}`,
       }}>
-        <Icon name="search" size={20} style={{ color: PANEL_T.icon }} />
+        {/* 18, as OrgSwitcher.Panel's Field.Search icon in Figma. Was 20. */}
+        <Icon name="search" size={18} style={{ color: PANEL_T.icon }} />
         <input
           type="text"
           value={query}

package/components/search/search.jsx

@@ -598,17 +598,19 @@ export function TopNavSearch({
           flexShrink: 0,
         }}
       >
-        {/* Fixed 32×32 square + border-radius 50% = always a perfect circle, regardless of flex context */}
+        {/* Container.Icon: 36x36 with CornerRadius/Full and a Button/BorderWidth/Rest
+            (0.75) stroke, read from TopNav.Global 2026-11-03. Was 32 with 0.5. */}
         <div
           style={{
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            width: 32,
-            height: 32,
-            borderRadius: "50%",
+            width: 36,
+            height: 36,
+            boxSizing: "border-box",
+            borderRadius: "var(--semantic-layout-units-cornerradius-full)",
             background: hov ? T.collapsedBtnHover : T.collapsedBtnFill,
-            border: `0.5px solid ${hov ? T.collapsedBtnBorderHov : T.collapsedBtnBorder}`,
+            border: `var(--contextual-layout-units-button-borderwidth-rest) solid ${hov ? T.collapsedBtnBorderHov : T.collapsedBtnBorder}`,
             transition: "background var(--motion-duration-2) var(--motion-easing-standard), border-color var(--motion-duration-2) var(--motion-easing-standard)",
           }}
         >

package/components/sidenav/sidenav.jsx

@@ -12,6 +12,11 @@
  * accurate; the correct action is still to leave this file alone, name the
  * drift, and wait. Do not resolve it by fetching Figma. See CLAUDE.md 1.1.
  *
+ * 2026-11-03: Jo explicitly asked for SideNav to be brought in line with Figma
+ * (stripe height and the rest). Pulled from nodes 40003954:284, 40005607:25240,
+ * 40004035:27057, 40006794:5975, 40007332:6995 and 40007332:8034. The collapse
+ * and expand glyphs stay pinned regardless; see the note at the bottom.
+ *
  * Spec: components/sidenav/sidenav-spec.md
  * Figma: https://www.figma.com/design/3sw45aVcngFAmpbP6cfrXP/?node-id=40004059-1375
  *        SideNav.Container, a COMPONENT_SET. The id cited here until
@@ -74,7 +79,10 @@ export const T = {
     navHover:   c("fill-action-selection-hover"),
     navActive:  c("fill-action-selection-selected"),
     navTrail:   c("fill-action-selection-trail"),
-    infoSubtle: c("stroke-static-neutral-base"),   // container right border
+    // Container right border (Mode=Stroked) and every divider: Figma binds
+    // Stroke/Static/Neutral/Faint on both (40004183:6254, 40006793:3783).
+    // Was stroke-static-neutral-base, a rung darker.
+    infoSubtle: c("stroke-static-neutral-faint"),
   },
   surface: {
     // Figma binds Fill/Surface/Elevated on SideNav.Container (node 40004059:1375).
@@ -96,8 +104,9 @@ export const T = {
     navHover:        c("foreground-action-secondary-hover"),
     navActive:       c("foreground-action-secondary-pressed"),
     navDisabled:     c("foreground-action-disabled"),
-    secondary:       c("foreground-static-neutral-base"),   // PopoverMenu.SectionLabel
-    secondarySubtle: c("foreground-static-neutral-base"),   // NavSectionLabel
+    secondary:       c("foreground-static-neutral-subtle"), // PopoverMenu.SectionHeader
+    secondarySubtle: c("foreground-static-neutral-faint"),  // NavSectionLabel
+    strong:          c("foreground-static-neutral-strong"), // PopoverMenu.Item, tooltip
   },
   icon: {
     navBase:         c("foreground-action-secondary-rest"),
@@ -106,10 +115,12 @@ export const T = {
     navDisabled:     c("foreground-action-disabled"),
     actionSecondary: c("foreground-action-secondary-rest"), // CollapseButton
   },
-  // The active-item stripe takes the loud brand blue straight from the Action
-  // tier rather than owning a token of its own.
-  indicator: c("fill-action-primary-strong-pressed"),
-  radius:    u("cornerradius-base"),
+  // Figma binds Fill/Action/Selection/Indicator on indicator.stripe (node
+  // 40004035:27051). It was fill-action-primary-strong-pressed, which happens
+  // to resolve to the same brand-550 today but is not the bound token.
+  indicator: c("fill-action-selection-indicator"),
+  // Figma binds NavItem/CornerRadius (Contextual) on every SideNavItem variant.
+  radius:    x("navitem-cornerradius"),
 };
 
 /*
@@ -148,19 +159,43 @@ export const L = {
   textPad:     u("padding-xtight"),
   childIndent: 24,   // no token in Figma, level-1 left indent
   stripeW:     4,    // no token in Figma, indicator stripe width
+  // Indicator stripe insets, read from Figma 2026-11-03. On a 44px item the
+  // stripe sits inside container.indicator (padding 4 top/bottom) and then
+  // indicator.stripe (padding 6 top/bottom), so it paints 44 - 8 - 12 = 24px
+  // tall. The repo had only the outer 4px, which made it 36px.
+  stripeOuterPadV: u("padding-xxxtight"),
+  stripeInnerPadV: u("padding-xxtight"),
+  stripeRadius:    u("cornerradius-base"),   // Figma Border Radius/S, 8
+  // Expanded rows: container.rowStart padding. Level 0 is 6 (Padding/XXTight),
+  // so the leading icon starts at x=10. It was 12, which put it at x=16.
+  itemPadH:    u("padding-xxtight"),
+  // Container.HasChildren: 2px padding around a 16px frame holding a 12px
+  // expand_more glyph, 20px wide in total. Was a 40px box with a 10px glyph.
+  chevPad:     u("padding-xxxxtight"),
+  chevFrame:   16,   // no token in Figma, icon frame
+  chevGlyph:   12,   // no token in Figma, expand_more glyph
+  // Level 1 (nesting) rows: rowStart 12 + container.main 24 + label 8, so the
+  // label starts at x=48 after the 4px indicator column. Was 32 (x=36).
+  childRowPadL: u("padding-tight"),
+  childMainPadL: u("padding-relaxed"),
   colPadL:     u("padding-medium"),
   colPadR:     u("padding-tight"),
   collapseGap: u("padding-xxtight"),
 };
 
 // ─── IndicatorStripe ──────────────────────────────────────────────────────────
-export function IndicatorStripe({ visible }) {
+// Figma: container.indicator (padding 4 vertical) > indicator.stripe (padding 6
+// vertical) > the 4px bar. `inset` overrides the total vertical inset for the
+// rows where Figma places the stripe differently (SideNavItem.List: 6 only).
+export function IndicatorStripe({ visible, inset }) {
   return (
     <div style={{ width: L.stripeW, alignSelf: "stretch", display: "flex",
       flexDirection: "column", alignItems: "flex-start",
-      justifyContent: "center", padding: "4px 0", flexShrink: 0 }}>
+      justifyContent: "center",
+      padding: inset ? `${inset} 0` : `calc(${L.stripeOuterPadV} + ${L.stripeInnerPadV}) 0`,
+      boxSizing: "border-box", flexShrink: 0 }}>
       <div style={{ flex: "1 0 0", width: L.stripeW, minHeight: 1,
-        borderRadius: "0 8px 8px 0",
+        borderRadius: `0 ${L.stripeRadius} ${L.stripeRadius} 0`,
         backgroundColor: visible ? T.indicator : "transparent",
         transition: "background-color var(--motion-duration-3) var(--motion-easing-standard)" }} />
     </div>
@@ -263,7 +298,7 @@ export function SideNavItem({
             // Reported 2026-10-02. Auto margins hand the free space back to
             // both sides, which with the 6px right padding above reproduces
             // Figma's x=9 exactly.
-            marginLeft:  isSidebarCollapsed ? "auto" : L.rowPadH,
+            marginLeft:  isSidebarCollapsed ? "auto" : L.itemPadH,
             marginRight: isSidebarCollapsed ? "auto" : undefined,
             color: iconColor }}>
             {typeof item.icon === "function"
@@ -297,8 +332,10 @@ export function SideNavItem({
           // box, so the label still occupied 8px of padding on the rail and ate
           // most of the free space the icon's auto margins needed: the icon
           // landed at x=5 instead of Figma's x=9.
-          paddingLeft:  isSidebarCollapsed ? 0 : (isChild ? 32 : L.textPad),
-          paddingRight: isSidebarCollapsed ? 0 : ((!isChild && hasChildren) ? 0 : L.rowPadH),
+          paddingLeft:  isSidebarCollapsed ? 0
+            : (isChild ? `calc(${L.childRowPadL} + ${L.childMainPadL} + ${L.textPad})` : L.textPad),
+          // container.rowStart's right padding: 6 on Level 0, 12 on Level 1.
+          paddingRight: isSidebarCollapsed ? 0 : (isChild ? L.childRowPadL : L.itemPadH),
           maxWidth: isSidebarCollapsed ? 0 : 200,
           opacity: isSidebarCollapsed ? 0 : 1,
           overflow: "hidden",
@@ -321,16 +358,15 @@ export function SideNavItem({
             2026-10-02: two distinct glyph centres, 28.8 and 45.8, where there
             should be one. It is now not rendered at all when collapsed. */}
         {!isChild && hasChildren && !isSidebarCollapsed && (
-          <div style={{ width: isSidebarCollapsed ? 0 : 40, height: L.iconWrap, display: "flex",
+          <div style={{ width: `calc(${L.chevFrame}px + 2 * ${L.chevPad})`, height: L.iconWrap, display: "flex",
             alignItems: "center", justifyContent: "center", flexShrink: 0,
-            maxWidth: isSidebarCollapsed ? 0 : 40,
             opacity: isSidebarCollapsed ? 0 : 1,
             overflow: "hidden",
             transition: "max-width var(--motion-duration-6) var(--motion-easing-emphasized), opacity var(--motion-duration-3) var(--motion-easing-standard)" }}>
             {/* Chevron rotation matches accordion timing, --motion-duration-5 + --motion-easing-accordion */}
             <div style={{ transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
               transition: "transform var(--motion-duration-5) var(--motion-easing-accordion)" }}>
-              {chevronDown ? chevronDown({ size: 10, color: iconColor }) : <ChevDown size={10} color={iconColor} />}
+              {chevronDown ? chevronDown({ size: L.chevGlyph, color: iconColor }) : <ChevDown size={L.chevGlyph} color={iconColor} />}
             </div>
           </div>
         )}
@@ -380,11 +416,18 @@ export function SideNavTooltip({ label, anchorRect, onMouseEnter, onMouseLeave }
         top: anchorRect.top + anchorRect.height / 2,
         zIndex: 1000, backgroundColor: T.surface.navLight,
         border: `0.5px solid ${c("stroke-static-neutral-faint")}`, borderRadius: "var(--semantic-layout-units-cornerradius-base)",
+        // Figma binds Elevation/Card/Rest here, which has no CSS token yet.
+        // Widget is the nearest existing elevation.
         boxShadow: c2("--elevation-widget"),
-        padding: "6px 8px", whiteSpace: "nowrap", pointerEvents: "auto",
+        padding: "var(--semantic-layout-units-padding-xxtight) var(--semantic-layout-units-padding-xtight)",
+        whiteSpace: "nowrap", pointerEvents: "auto",
         animation: "popoverInCentered var(--motion-duration-3) var(--motion-easing-spring) forwards" }}>
+      {/* Text/Body/Small/Regular, Foreground/Static/Neutral/Strong (Figma
+          "Text Container", node 40005607:25190). Letter spacing is Figma's
+          Wide, 0.3px, which is the repo's `spacious` token: the repo's `wide`
+          is 0.1px. */}
       <span style={{ fontFamily: "'Red Hat Text',sans-serif", fontWeight: 400,
-        fontSize: "var(--semantic-type-font-size-s)", lineHeight: "var(--semantic-type-line-height-s-single)", letterSpacing: "var(--semantic-type-letter-spacing-wide)", color: T.text.secondary }}>
+        fontSize: "var(--semantic-type-font-size-s)", lineHeight: "var(--semantic-type-line-height-s-single)", letterSpacing: "var(--semantic-type-letter-spacing-spacious)", color: T.text.strong }}>
         {label}
       </span>
     </div>,
@@ -393,17 +436,19 @@ export function SideNavTooltip({ label, anchorRect, onMouseEnter, onMouseLeave }
 }
 
 // ─── SectionLabel ─────────────────────────────────────────────────────────────
-// Figma node 40006794-5977, building block used in CollapsedPopover headers.
-// Tokens: Foreground/Static/Neutral/Base (#313131), Label/Section/Small/Semibold
-//         (11px / 600 / 16px / 0.6px letter-spacing, uppercase)
-// Padding: Padding/Tight (12px left), Padding/XTight (8px vertical)
+// The flyout's header is PopoverMenu.SectionHeader (node 40018992:3361), read
+// from SideNavItem.Collapsed on 2026-11-03: Text/Supporting/Base/Semibold
+// (12px / 600 / 18px / 0.6px), Foreground/Static/Neutral/Subtle, sentence case,
+// padding 6 vertical, 12 left, 8 right. It was the 11px uppercase nav section
+// label in neutral-base with a divider under it, which Figma does not have.
 export function SectionLabel({ label }) {
   return (
-    <div style={{ display: "flex", alignItems: "center", width: "100%",
-      paddingLeft: "var(--semantic-layout-units-padding-tight)", paddingTop: "var(--semantic-layout-units-padding-xtight)", paddingBottom: "var(--semantic-layout-units-padding-xtight)"}}>
+    <div style={{ display: "flex", alignItems: "center", width: "100%", boxSizing: "border-box",
+      paddingLeft: "var(--semantic-layout-units-padding-tight)", paddingRight: "var(--semantic-layout-units-padding-xtight)",
+      paddingTop: "var(--semantic-layout-units-padding-xxtight)", paddingBottom: "var(--semantic-layout-units-padding-xxtight)" }}>
       <span style={{ fontFamily: "'Red Hat Text',sans-serif", fontWeight: 600,
-        fontSize: "var(--semantic-type-font-size-xxs)", lineHeight: "var(--semantic-type-line-height-xxs-single)", letterSpacing: "var(--semantic-type-letter-spacing-extraspacious)",
-        color: T.text.secondary, textTransform: "uppercase",
+        fontSize: "var(--semantic-type-font-size-xs)", lineHeight: "var(--semantic-type-line-height-xs-single)", letterSpacing: "var(--semantic-type-letter-spacing-extraspacious)",
+        color: T.text.secondary,
         whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
         {label}
       </span>
@@ -418,14 +463,15 @@ export function CollapsedPopover({ item, onClick, anchorRect, onMouseEnter, onMo
     <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}
       style={{ position: "fixed", left: anchorRect.right + 8, top: anchorRect.top,
         zIndex: 1000, backgroundColor: T.surface.navElevated,
-        border: `0.5px solid ${c("stroke-static-neutral-faint")}`, borderRadius: "var(--semantic-layout-units-cornerradius-base)",
-        boxShadow: c2("--elevation-widget"),
-        padding: "var(--semantic-layout-units-padding-xxtight)", minWidth: 200, pointerEvents: "auto",
+        // Figma "Popover Menu" in SideNavItem.Collapsed: radius Unit/10, Elevation/Lift,
+        // 220 wide (220 to 360), Items slot padding 8 vertical, 6 horizontal, gap 2.
+        border: `0.5px solid ${c("stroke-static-neutral-faint")}`, borderRadius: "var(--primitive-unit-unit-10)",
+        boxShadow: c2("--elevation-lift"),
+        padding: "var(--semantic-layout-units-padding-xtight) var(--semantic-layout-units-padding-xxtight)",
+        display: "flex", flexDirection: "column", gap: "var(--semantic-layout-units-gap-xxxtight)",
+        boxSizing: "border-box", minWidth: 220, maxWidth: 360, pointerEvents: "auto",
         animation: "popoverIn var(--motion-duration-3) var(--motion-easing-spring) forwards" }}>
-      {/* Section label, Figma component 40006794-5977 */}
-      <div style={{ borderBottom: `0.5px solid ${c("stroke-static-neutral-faint")}` }}>
-        <SectionLabel label={item.label} />
-      </div>
+      <SectionLabel label={item.label} />
       {item.children.map(child =>
         <PopoverRow key={child.id} item={child} onClick={onClick} activeId={activeId} />
       )}
@@ -439,19 +485,31 @@ export function PopoverRow({ item, onClick, activeId }) {
   const [h, setH] = useState(false);
   const isActive = item.id === activeId;
   const bg = isActive ? T.fill.navActive : h ? T.fill.navHover : "transparent";
-  const color = isActive ? T.text.navActive : h ? T.text.navHover : T.text.navBase;
+  // PopoverMenu.Item label is Foreground/Static/Neutral/Strong in every state;
+  // the selected row is marked by its fill and the stripe, never by the text.
+  const color = T.text.strong;
   return (
     <div onClick={() => onClick(item.id)}
       onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
-      style={{ display: "flex", alignItems: "center", minHeight: 40, borderRadius: "var(--semantic-layout-units-cornerradius-base)",
+      // PopoverMenu.Item: min 44, padding 12 all round, radius CornerRadius/Base.
+      style={{ position: "relative", display: "flex", alignItems: "center", minHeight: L.itemH,
+        boxSizing: "border-box", padding: "var(--semantic-layout-units-padding-tight)",
+        borderRadius: "var(--semantic-layout-units-cornerradius-base)",
         overflow: "hidden", backgroundColor: bg, cursor: "pointer",
         transition: "background-color var(--motion-duration-3) var(--motion-easing-standard)" }}>
-      <div style={{ width: 4, alignSelf: "stretch", borderRadius: "0 4px 4px 0",
-        backgroundColor: isActive ? T.indicator : "transparent",
-        flexShrink: 0, transition: "background-color var(--motion-duration-3) var(--motion-easing-standard)" }} />
-      <span style={{ padding: "0 8px", fontFamily: "'Red Hat Text',sans-serif",
-        fontWeight: 400, fontSize: "var(--semantic-type-font-size-s)", lineHeight: "var(--semantic-type-line-height-s-single)", letterSpacing: "var(--semantic-type-letter-spacing-wide)",
-        color, transition: "color var(--motion-duration-3) var(--motion-easing-standard)", flex: 1 }}>
+      {/* Stripe: absolutely placed, inset 8 top and bottom, so 28px on a 44px row. */}
+      <div style={{ position: "absolute", left: 0, top: "var(--semantic-layout-units-padding-xtight)",
+        bottom: "var(--semantic-layout-units-padding-xtight)", width: L.stripeW,
+        borderRadius: `0 ${L.stripeRadius} ${L.stripeRadius} 0`,
+        // PopoverMenu.Item's Stripe binds Fill/Action/Primary/Strong/Pressed in
+        // Figma (40018914:3149), not the nav's Selection/Indicator. Same value
+        // in Light; in Midnight they differ, so this follows Figma.
+        backgroundColor: isActive ? c("fill-action-primary-strong-pressed") : "transparent",
+        transition: "background-color var(--motion-duration-3) var(--motion-easing-standard)" }} />
+      {/* Label/Menu/Base/Medium: 14 / 500 / 20 / 0.3 (the repo's `spacious`). */}
+      <span style={{ fontFamily: "'Red Hat Text',sans-serif",
+        fontWeight: 500, fontSize: "var(--semantic-type-font-size-s)", lineHeight: "var(--semantic-type-line-height-s-single)", letterSpacing: "var(--semantic-type-letter-spacing-spacious)",
+        color, flex: 1 }}>
         {item.label}
       </span>
     </div>
@@ -515,8 +573,9 @@ export function CollapseButton({ isSidebarCollapsed, onToggle, collapseIcon, exp
 // ─── SideNav (top-level container) ────────────────────────────────────────────
 // ── NavSectionLabel ──────────────────────────────────────────────────────────
 // Optional in-nav section heading. Figma: SideNav.SectionLabel (node 40006794:5975).
-// Tokens: Label/Section/Small/Semibold (11px/600/16px/0.6px), Foreground/Static/Neutral/Base (#606060)
-// Container: h-[40px], pl-[4px], pr-[4px], py-[8px]
+// Tokens: Label/Section/Small/Semibold (11px/600/16px/0.6px), Foreground/Static/Neutral/Faint
+// Container: h 40, padding 6 left, 6 right, 12 vertical (read 2026-11-03; was
+// 4 / 4 / 8 in neutral-base)
 // In collapsed rail: hidden, replaced by a Divider (rendered by SideNav itself, see §2.3)
 // ── NavHeader ────────────────────────────────────────────────────────────────
 // Sits at the TOP of the SideNav. 48px row with the expand/collapse action icon
@@ -532,31 +591,30 @@ export function NavHeader({ isSidebarCollapsed, onToggle, collapseIcon, expandIc
         aria-label={isSidebarCollapsed ? "Expand navigation" : "Collapse navigation"}
         role="button" tabIndex={0}
         onKeyDown={e => (e.key === "Enter" || e.key === " ") && onToggle()}
+        // Figma SideBar Expand/Collapse: Container.Main 44 tall, the Action.Icon
+        // is a 44 touch target holding a 28px Container.Icon (radius Unit/10),
+        // which is what takes the hover fill. The whole row used to fill, and
+        // the icon box was 36. The glyphs themselves stay pinned (see below).
         style={{ display: "flex", alignItems: "center", height: L.itemH, width: "100%",
-          borderRadius: T.radius, cursor: "pointer",
-          backgroundColor: h ? T.fill.navHover : "transparent",
-          transition: "background-color var(--motion-duration-3) var(--motion-easing-standard)" }}>
-        {isSidebarCollapsed ? (
-          /* Collapsed: centered action icon */
-          <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
-            {expandIcon
-              ? expandIcon({ size: 12, color: actionIconColor })
-              : <LeftPanelOpenIcon color={actionIconColor} />}
-          </div>
-        ) : (
-          /* Expanded: right-aligned action icon in Slot.RowEnd */
-          <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-end" }}>
-            <div style={{ width: 36, height: 36, display: "flex",
-              alignItems: "center", justifyContent: "center" }}>
-              {collapseIcon
-                ? collapseIcon({ size: 12, color: actionIconColor })
-                : <RightPanelOpenIcon color={actionIconColor} />}
-            </div>
+          justifyContent: isSidebarCollapsed ? "center" : "flex-end", cursor: "pointer" }}>
+        <div style={{ width: L.itemH, height: L.itemH, display: "flex",
+          alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
+          <div style={{ width: 28, height: 28, display: "flex", alignItems: "center",
+            justifyContent: "center", borderRadius: "var(--primitive-unit-unit-10)",
+            backgroundColor: h ? T.fill.navHover : "transparent",
+            transition: "background-color var(--motion-duration-3) var(--motion-easing-standard)" }}>
+            {isSidebarCollapsed
+              ? (expandIcon
+                  ? expandIcon({ size: 12, color: actionIconColor })
+                  : <LeftPanelOpenIcon color={actionIconColor} />)
+              : (collapseIcon
+                  ? collapseIcon({ size: 12, color: actionIconColor })
+                  : <RightPanelOpenIcon color={actionIconColor} />)}
           </div>
-        )}
+        </div>
       </div>
-      {/* Divider, Stroke/Static/Neutral/Base, py-[2px] in Figma */}
-      <div style={{ padding: "2px 0" }}>
+      {/* Divider, padding 4 vertical in Figma (was 2) */}
+      <div style={{ padding: "var(--semantic-layout-units-padding-xxxtight) 0" }}>
         <div style={{ height: 1, backgroundColor: T.fill.infoSubtle }} />
       </div>
     </div>
@@ -565,8 +623,8 @@ export function NavHeader({ isSidebarCollapsed, onToggle, collapseIcon, expandIc
 
 export function NavSectionLabel({ label }) {
   return (
-    <div style={{ display: "flex", alignItems: "center", height: 40, width: "100%",
-      paddingLeft: "var(--semantic-layout-units-padding-xxxtight)", paddingRight: "var(--semantic-layout-units-padding-xxxtight)", paddingTop: "var(--semantic-layout-units-padding-xtight)", paddingBottom: "var(--semantic-layout-units-padding-xtight)",
+    <div style={{ display: "flex", alignItems: "center", height: 40, width: "100%", boxSizing: "border-box",
+      paddingLeft: "var(--semantic-layout-units-padding-xxtight)", paddingRight: "var(--semantic-layout-units-padding-xxtight)", paddingTop: "var(--semantic-layout-units-padding-tight)", paddingBottom: "var(--semantic-layout-units-padding-tight)",
       flexShrink: 0 }}>
       <span style={{ fontFamily: "'Red Hat Text',sans-serif", fontWeight: 600,
         fontSize: "var(--semantic-type-font-size-xxs)", lineHeight: "var(--semantic-type-line-height-xxs-single)", letterSpacing: "var(--semantic-type-letter-spacing-extraspacious)",
@@ -579,12 +637,15 @@ export function NavSectionLabel({ label }) {
 }
 
 // ── BulletDot ────────────────────────────────────────────────────────────────
-// 6px filled circle, leading icon for SideNavListSection's ListItem.
-// Color cycles Base / Hover / Active just like SideNavItem icons.
+// Leading icon for SideNavListSection's ListItem: Figma's Icon.Leading there is
+// the Material "circle" glyph in a 16px frame (a 13.3px disc), node 40007332:6989.
+// It was a 6px dot. Color cycles Base / Hover / Active just like SideNavItem icons.
 export function BulletDot({ color }) {
   return (
-    <div style={{ width: 6, height: 6, borderRadius: "50%",
-      backgroundColor: color, flexShrink: 0 }} />
+    <svg width={L.iconInner} height={L.iconInner} viewBox="0 0 16 16" aria-hidden="true"
+      style={{ display: "block", flexShrink: 0 }}>
+      <circle cx="8" cy="8" r="6.6667" fill={color} />
+    </svg>
   );
 }
 
@@ -602,17 +663,21 @@ export function ListItem({ item, isActive, onClick }) {
       onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}
       role="button" tabIndex={0}
       onKeyDown={e => (e.key === "Enter" || e.key === " ") && onClick && onClick(item.id)}
-      style={{ display: "flex", alignItems: "center", minHeight: L.itemH, width: "100%",
+      // SideNavItem.List is a fixed 48 tall (was min 44).
+      style={{ display: "flex", alignItems: "center", height: 48, minHeight: L.itemH, width: "100%",
         borderRadius: T.radius, backgroundColor: bg, cursor: "pointer",
         overflow: "hidden", transition: "background-color var(--motion-duration-3) var(--motion-easing-standard)",
         userSelect: "none" }}>
-      <IndicatorStripe visible={isActive} />
+      {/* Figma places this stripe with indicator.stripe's 6px inset only, so it
+          is 36px on the 48px row. */}
+      <IndicatorStripe visible={isActive} inset={L.stripeInnerPadV} />
       <div style={{ width: L.iconWrap, height: L.iconWrap, display: "flex",
         alignItems: "center", justifyContent: "center", flexShrink: 0,
         marginLeft: L.rowPadH }}>
         <BulletDot color={dotColor} />
       </div>
-      <div style={{ flex: 1, minWidth: 0, paddingLeft: L.textPad, paddingRight: L.rowPadH }}>
+      {/* text.label padding 8 both sides, then container.rowStart's 12. */}
+      <div style={{ flex: 1, minWidth: 0, paddingLeft: L.textPad, paddingRight: `calc(${L.textPad} + ${L.rowPadH})` }}>
         <p style={{ fontFamily: "'Red Hat Text',sans-serif", fontWeight: 400,
           fontSize: "var(--semantic-type-font-size-xs)", lineHeight: "var(--semantic-type-line-height-xs-single)", letterSpacing: "var(--semantic-type-letter-spacing-extraspacious)", color,
           margin: 0, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
@@ -777,7 +842,7 @@ export function SideNav({
       boxSizing: "border-box", flexShrink: 0,
       // Smooth-spring curve, soft personality, no overshoot.
       transition: "width var(--motion-duration-6) var(--motion-easing-emphasized)",
-      borderRight: `0.5px solid ${T.fill.infoSubtle}`,
+      borderRight: `1px solid ${T.fill.infoSubtle}`,
       overflow: "hidden",   // the inner menu scrolls; the nav itself does not
     }}>
       {/* NavHeader, TOP of nav, PINNED (flexShrink:0) so it stays visible while the
@@ -897,17 +962,14 @@ export function SideNav({
 }
 
 // ─── Built-in chevron icons ───────────────────────────────────────────────────
-function ChevDown({ size = 10, color }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
-      <path d="M3 5.5L8 10.5L13 5.5" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  );
-}
-function ChevUp({ size = 10, color }) {
+// Material Symbols Rounded expand_more, the exact glyph Figma places in
+// Container.HasChildren (node 40014002:8313), 12px box. The hand-drawn stroke
+// chevron it replaces was heavier and 10px. Up is the same glyph rotated, which
+// is what the item already does when it opens.
+function ChevDown({ size = 12, color }) {
   return (
-    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
-      <path d="M3 10.5L8 5.5L13 10.5" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+    <svg width={size} height={size} viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <path d="M6 7.475C5.93333 7.475 5.87083 7.46458 5.8125 7.44375C5.75417 7.42292 5.7 7.3875 5.65 7.3375L3.35 5.0375C3.25833 4.94583 3.2125 4.82917 3.2125 4.6875C3.2125 4.54583 3.25833 4.42917 3.35 4.3375C3.44167 4.24583 3.55833 4.2 3.7 4.2C3.84167 4.2 3.95833 4.24583 4.05 4.3375L6 6.2875L7.95 4.3375C8.04167 4.24583 8.15833 4.2 8.3 4.2C8.44167 4.2 8.55833 4.24583 8.65 4.3375C8.74167 4.42917 8.7875 4.54583 8.7875 4.6875C8.7875 4.82917 8.74167 4.94583 8.65 5.0375L6.35 7.3375C6.3 7.3875 6.24583 7.42292 6.1875 7.44375C6.12917 7.46458 6.06667 7.475 6 7.475Z" fill={color} />
     </svg>
   );
 }

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

@@ -150,7 +150,11 @@ export const T = {
   // 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"),
+  avatarBgHover:  SCD("fill-action-primary-subtle-hover"),
+  avatarBgPressed: SCD("fill-action-primary-subtle-pressed"),
   avatarText:     SCD("foreground-action-primary-on-subtle-rest"),
+  avatarTextHover: SCD("foreground-action-primary-on-subtle-hover"),
+  avatarTextPressed: SCD("foreground-action-primary-on-subtle-pressed"),
   // White dropdown-menu surface, tracks fill-neutral-light (now warm-neutral-0).
   panelBg:        SCL("fill-static-neutral-faint"),
   activeItem:     SCL("fill-action-primary-subtle-rest"),
@@ -180,7 +184,7 @@ export const L = {
   navH:        c("topnav-height"),
   navGap:      r("topnav-gap-horizontal"),
   touchTarget: 48, modInnerH: 36,
-  orgAvatarNav: 20, orgAvatarSm: 24, orgAvatarPanel: 32,
+  orgAvatarNav: 16, orgAvatarSm: 24, orgAvatarPanel: 32,
   searchPill: 32, avatarSize: 32,
   // ICON GEOMETRY, read off the leaf nodes of Figma TopNav.Global 40007067:6508
   // on 2026-10-02 rather than inferred from container padding:
@@ -347,9 +351,12 @@ export const DEFAULT_MODULES = MODULES.map((id) => ({ id, label: MODULE_LABELS[i
  *
  * THE STATE FILL BELONGS ON THE 28 BOX, not on the touch target.
  */
+// TopNav.Actions in Figma (40007082:7313): help, settings, notifications_unread,
+// each a 16 glyph in a 28 layer in a 44 target. This drew "notifications" twice.
 export const DEFAULT_ACTIONS = [
-  { icon: "notifications", label: "Notifications" },
-  { icon: "notifications", label: "Alerts" },
+  { icon: "help", label: "Help" },
+  { icon: "settings", label: "Settings" },
+  { icon: "notifications_unread", label: "Notifications" },
 ];
 
 function TopNavActionIcon({ icon, label, onClick }) {
@@ -358,8 +365,11 @@ function TopNavActionIcon({ icon, label, onClick }) {
   const fill = press ? T.controlPressed : hov ? T.controlHover : "transparent";
   const fg = press ? T.monoPressed : hov ? T.monoHover : T.monoBase;
   return (
+    // The 44 target is the button itself. It used to be a min-size wrapper
+    // with a height:100% button, which a min-height parent does not resolve,
+    // so the clickable box collapsed to the 28 layer.
     <div style={{ display: "flex", alignItems: "center", justifyContent: "center",
-      minHeight: L.actionTarget, minWidth: L.actionTarget }}>
+      width: L.actionTarget, height: L.actionTarget, flexShrink: 0 }}>
       <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)}
@@ -378,7 +388,8 @@ function TopNavActionIcon({ icon, label, onClick }) {
 }
 
 export function TopNavActions({ breakpoint = "desktop", actions, onNotifications, onMore }) {
-  const items = (actions || DEFAULT_ACTIONS).map((a) => ({ ...a, onClick: a.onClick || onNotifications }));
+  const items = (actions || DEFAULT_ACTIONS).map((a) => ({
+    ...a, onClick: a.onClick || (a.icon === "notifications_unread" ? onNotifications : undefined) }));
   if (breakpoint === "mobile" && items.length > 1) {
     return (
       <div style={{ display: "flex", alignItems: "center" }}>
@@ -393,6 +404,14 @@ export function TopNavActions({ breakpoint = "desktop", actions, onNotifications
   );
 }
 
+// SideNav.Control's hover and pressed (Figma 40007082:7703): Fill/Action/Ghost on
+// the 32 layer and a Foreground/Action/Ghost glyph. ActionIcon's own ladder is
+// for light pages and painted a pale layer under a dark glyph on the navy bar.
+const GHOST_ACTION_STATES = {
+  hover: T.monoHover, pressed: T.monoPressed,
+  layerHover: T.controlHover, layerPress: T.controlPressed,
+};
+
 // ─── TopNavProfile ─────────────────────────────────────────────────────────────
 export function TopNavProfile({ user, open, onToggle, mobile = false }) {
   const [hov, setHov] = useState(false);
@@ -410,21 +429,27 @@ export function TopNavProfile({ user, open, onToggle, mobile = false }) {
           display: "flex", alignItems: "center", justifyContent: "center",
           // Figma TopNav.Profile is 48x48 with pad 4,4,4,4. This was 44 with 6.
           width: L.touchTarget, height: L.touchTarget, boxSizing: "border-box",
-          background: open ? T.controlPressed : hov ? T.controlHover : "transparent",
+          // The 48 box takes no fill in any state (Figma TopNav.Profile,
+          // 40016590:37966): hover and pressed land on the avatar itself, on
+          // the Primary/Subtle ladder. This used to paint a Ghost circle
+          // behind an avatar that never changed.
+          background: "transparent",
           border: "none", borderRadius: "50%", cursor: "pointer", padding: L.profilePad,
           transition: "background var(--motion-duration-2) var(--motion-easing-standard)",
         }}
       >
         <div style={{
           width: L.avatarSize, height: L.avatarSize, borderRadius: "50%",
-          background: T.avatarBg, display: "flex", alignItems: "center", justifyContent: "center",
+          background: open ? T.avatarBgPressed : hov ? T.avatarBgHover : T.avatarBg,
+          display: "flex", alignItems: "center", justifyContent: "center",
+          transition: "background var(--motion-duration-2) var(--motion-easing-standard), color var(--motion-duration-2) var(--motion-easing-standard)",
           // 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",
+          color: open ? T.avatarTextPressed : hov ? T.avatarTextHover : T.avatarText, flexShrink: 0, overflow: "hidden",
         }}>
           {user.avatarUrl
             ? <img src={user.avatarUrl} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
@@ -482,7 +507,10 @@ export function OrgSwitcher({ org, open, onToggle, mobile = false, showCampus =
         style={{
           // 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)",
+          // Desktop places the chevron INSIDE Container.RowStart, whose gap is
+          // Gap/XXTight (4); mobile keeps it at Main level on Gap/XXXTight (2).
+          display: "flex", alignItems: "center",
+          gap: mobile ? "var(--semantic-layout-units-gap-xxxtight)" : "var(--semantic-layout-units-gap-xxtight)",
           minHeight: L.modInnerH, boxSizing: "border-box", minWidth: 0,
           maxWidth: mobile ? L.orgMainMaxMobile : L.orgMainMax,
           padding: mobile
@@ -495,7 +523,9 @@ export function OrgSwitcher({ org, open, onToggle, mobile = false, showCampus =
           // 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}`,
+          // Hover and pressed thicken to Button/BorderWidth/Selected (1px), as
+          // Figma binds them on 40006819:14582 and 40006933:15754.
+          boxShadow: `inset 0 0 0 ${open || hov ? "var(--contextual-layout-units-button-borderwidth-selected)" : "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)",
         }}
@@ -505,11 +535,16 @@ export function OrgSwitcher({ org, open, onToggle, mobile = false, showCampus =
           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)",
+            // Figma "Show Org Avatar": a 24 box with Padding/XXXTight, so a 16
+            // avatar with a 1px Stroke/Action/Primary/Strong/Rest ring. It was
+            // padded 2, a 20 avatar, ringed in Ghost.
+            <div style={{ width: L.orgAvatarSm, height: L.orgAvatarSm, padding: "var(--semantic-layout-units-padding-xxxtight)",
+              boxSizing: "border-box",
               display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
               <div style={{
                 width: L.orgAvatarNav, height: L.orgAvatarNav, borderRadius: L.radiusSm,
-                border: `1px solid ${T.orgStroke}`,
+                border: `1px solid ${SCD("stroke-action-primary-strong-rest")}`,
+                boxSizing: "border-box",
                 background: "transparent",
                 display: "flex", alignItems: "center", justifyContent: "center",
                 overflow: "hidden", position: "relative", flexShrink: 0,
@@ -566,12 +601,13 @@ export function OrgSwitcher({ org, open, onToggle, mobile = false, showCampus =
  */
 export function ModuleSwitcher({ modules, activeId, open, onToggle, breakpoint = "desktop", type = "interactive" }) {
   const [hov, setHov]   = useState(false);
+  const [press, setPress] = useState(false);
   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;
+  const labelFg = isStatic ? T.monoBase : open || press ? T.monoPressed : hov ? T.monoHover : T.monoBase;
 
   // Icon + label: identical in both variants. Container.RowStart, gap Gap/XXTight.
   const inner = (
@@ -608,7 +644,7 @@ export function ModuleSwitcher({ modules, activeId, open, onToggle, breakpoint =
           // Figma ModuleSwitcher Container.Main is pad 0,0,0,6: left only.
           // This was a uniform 4 on all four sides.
           padding: `0 0 0 ${L.modPadL}`, borderRadius: L.radius,
-            background: "transparent", border: "1px solid transparent",
+            background: "transparent", border: "none", boxSizing: "border-box",
             color: T.monoBase, fontFamily: "inherit", cursor: "default",
           }}
         >
@@ -623,24 +659,28 @@ export function ModuleSwitcher({ modules, activeId, open, onToggle, breakpoint =
     // 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)}
+        onMouseEnter={() => setHov(true)} onMouseLeave={() => { setHov(false); setPress(false); }}
+        onMouseDown={() => setPress(true)} onMouseUp={() => setPress(false)} onBlur={() => setPress(false)}
         onClick={onToggle}
         aria-haspopup="listbox" aria-expanded={open}
         aria-label={`Switch module: ${active.label}`}
         style={{
-          // Container.Main: gap Gap/XXXTight between RowStart and the chevron.
-          display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-xxxtight)",
+          // Container.Main: gap Gap/XXXTight between RowStart and the chevron
+          // on desktop. With the label hidden (tablet, mobile) Figma has no gap:
+          // the mark and the chevron touch.
+          display: "flex", alignItems: "center", gap: showLabel ? "var(--semantic-layout-units-gap-xxxtight)" : 0,
           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.
           padding: `0 0 0 ${L.modPadL}`, borderRadius: L.radius,
-          background: open ? T.controlPressed : hov ? T.controlHover : "transparent",
-          // No stroke in any state, Figma's ModuleSwitcher has none, unlike the
-          // org switcher next to it. Transparent rather than none so the two
-          // controls keep the same box height.
-          border: "1px solid transparent",
+          background: open || press ? T.controlPressed : hov ? T.controlHover : "transparent",
+          // No stroke in any state: Figma's ModuleSwitcher has none. This was a
+          // 1px transparent border, which inset the content by 1px (the mark sat
+          // at x=7, not 6). The org switcher draws its stroke as an inset
+          // shadow, so the two still share the 36 box height.
+          border: "none", boxSizing: "border-box",
           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)",
+          transition: "background var(--motion-duration-3) var(--motion-easing-standard)",
         }}
       >
         {inner}
@@ -906,7 +946,7 @@ function TopNavNewCo({ navRef, className, breakpoint, org, user, openPanel, togg
           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} />
+              <ActionIcon name="menu" size="Large" label="Open navigation menu" color={T.monoBase} states={GHOST_ACTION_STATES} onClick={onSideNavToggle} />
               <PillarTrigger label={brandItem.label} open={openPanel === "pillar"} onToggle={() => toggle("pillar")} />
               {org_}
             </>
@@ -1128,6 +1168,7 @@ export function TopNav({
             size="Large"
             label="Open navigation menu"
             color={T.monoBase}
+            states={GHOST_ACTION_STATES}
             onClick={onSideNavToggle}
           />
         )}

package/package.json

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