@helloimjolopez-pathway/pathway-components 0.7.1 → 0.7.2

package/components/sidenav/sidenav.jsx

@@ -26,6 +26,17 @@
 import React, { useState, useRef, useEffect } from "react";
 import { Scrollable } from "../scrollbar/scrollbar.jsx";
 import ReactDOM from "react-dom";
+import { BottomSheet } from "../bottom-sheet/bottom-sheet.jsx";
+import { FOCUS_RING, FOCUS_RING_INSET, FOCUS_RING_REPLACE, injectFocusRing } from "../_shared/focus-ring.js";
+
+// Anything collapsed out of sight is also out of reach. A closed accordion,
+// the list section on the rail and the header slot on the rail stay mounted
+// so they can animate, so they are made inert: otherwise Tab lands on a row
+// nobody can see. React 18 has no `inert` prop, so it goes on as the plain
+// attribute.
+const inertIf = (hidden) => (hidden ? { inert: "", "aria-hidden": true } : {});
+
+injectFocusRing();
 
 /*
  * ─── DESIGN TOKENS ───────────────────────────────────────────────────────────
@@ -252,7 +263,7 @@ export function SideNavItem({
 
   return (
     <div ref={itemRef} style={{ position: "relative" }}>
-      <div role="button" tabIndex={isDisabled ? -1 : 0}
+      <div className={FOCUS_RING} role="button" tabIndex={isDisabled ? -1 : 0}
         aria-current={isActive ? "page" : undefined}
         aria-disabled={isDisabled ? true : undefined}
         aria-expanded={hasChildren && !isSidebarCollapsed ? isExpanded : undefined}
@@ -500,7 +511,7 @@ export function PopoverRow({ item, onClick, activeId }) {
   const color = T.text.strong;
   return (
     <div onClick={() => onClick(item.id)}
-      role="menuitem" tabIndex={0}
+      className={FOCUS_RING_INSET} role="menuitem" tabIndex={0}
       aria-current={isActive ? "page" : undefined}
       onKeyDown={e => (e.key === "Enter" || e.key === " ") && (e.preventDefault(), onClick(item.id))}
       onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
@@ -515,10 +526,10 @@ export function PopoverRow({ item, onClick, activeId }) {
       <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",
+        // The same Fill/Action/Selection/Indicator as the nav's active stripe, so
+        // a selected menu row and the active nav item always match (PopoverMenu.Item
+        // in Figma was rebound to it on 2026-11-11).
+        backgroundColor: isActive ? T.indicator : "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",
@@ -547,10 +558,10 @@ const eventInside = (el, e) =>
 // Anatomy, read from the variants on 2026-11-06:
 //   wrapper     padding XTight top/bottom, XXXXTight sides (expanded); min 44
 //   Container.Main  44 tall, radius CornerRadius/Base, padding XXTight sides,
-//               gap 2, Button/BorderWidth stroke, Widget shadow
+//               gap 2, Button/BorderWidth stroke, Elevation/Lift shadow
 //     Action Icon 36 (padding XTight) > 24 box > `apps` at 16
 //     Label      Label/Button/Small: 14 / 500 / 20 / 0.3, truncates
-//     RowEnd     20 box > `chevron_right` at 14   (expanded only)
+//     (no trailing chevron: the trigger is the apps icon and the name)
 //   PopoverMenu  2px to the right of the wrapper, top aligned: 220 to 360
 //               wide, CornerRadius/Large, 0.5 Stroke/Static/Neutral/Faint,
 //               Fill/Surface/Elevated, Elevation/Lift; items padding XTight /
@@ -561,16 +572,14 @@ const eventInside = (el, e) =>
 //   Rest           none / Primary/Subtle/Rest 0.75 / Static/Neutral/Bold
 //   Hover          Primary/Subtle/Hover / Primary/Strong/Hover / On Subtle/Hover
 //   Pressed-Open   Primary/Subtle/Pressed / Primary/Strong/Pressed 1px / On Subtle/Pressed
-// The chevron is Action/Secondary/Rest at rest and follows the label otherwise.
 //
 // Rail: Figma draws a 60 square that overhangs the 48 column by 6 a side. The
 // overhang is transparent padding only, and the scroll view clips horizontally,
 // so here the wrapper keeps the 8px vertical padding and the 48x44 Main sits
 // exactly where Figma puts it. The target is 48x60, above the AA 44.
 //
-// The Figma shadow colours the Widget geometry with Brand/600 @ 16%, which has
-// no semantic token; --elevation-widget is the same offsets on the system
-// shadow colour.
+// The trigger casts Elevation/Lift (--elevation-lift), the same shadow as its
+// menu. It never uses Fill/Shadow/Dropshadow.
 const APP_T = {
   restStroke:   c("stroke-action-primary-subtle-rest"),
   hoverFill:    c("fill-action-primary-subtle-hover"),
@@ -580,11 +589,13 @@ const APP_T = {
   openStroke:   c("stroke-action-primary-strong-pressed"),
   openFg:       c("foreground-action-primary-on-subtle-pressed"),
   restFg:       c("foreground-static-neutral-bold"),
-  restChevron:  c("foreground-action-secondary-rest"),
   separator:    c("stroke-static-neutral-base"),
 };
 
-export function AppSwitcher({ label: fallbackLabel, icon = "apps", home, apps = [], activeId, onSelect, collapsed = false }) {
+// presentation "sheet" (mobile) opens the menu in a BottomSheet titled
+// `sheetTitle` instead of the popover (Figma 40016737:141824).
+export function AppSwitcher({ label: fallbackLabel, icon = "apps", home, apps = [], activeId, onSelect, collapsed = false,
+  presentation = "popover", sheetTitle }) {
   // The trigger names WHERE YOU ARE: the current app's label, so after choosing
   // Accounts Payable it reads Accounts Payable. `label` is only the fallback
   // for when no app is current.
@@ -598,16 +609,43 @@ export function AppSwitcher({ label: fallbackLabel, icon = "apps", home, apps =
   const btnRef = useRef(null);
   const menuRef = useRef(null);
 
+  const viaKey = useRef(false);
+
   const toggle = () => {
     if (open) { setOpen(false); return; }
     setRect(wrapRef.current ? wrapRef.current.getBoundingClientRect() : null);
     setOpen(true);
   };
+  // Opened from the keyboard, focus lands on the current application's row
+  // (the WAI-ARIA menu button pattern). The sheet places focus itself.
+  useEffect(() => {
+    if (!open || presentation === "sheet" || !viaKey.current) return;
+    viaKey.current = false;
+    const t = setTimeout(() => {
+      const rows = menuRef.current ? [...menuRef.current.querySelectorAll('[role="menuitem"]')] : [];
+      (rows.find(r => r.getAttribute("aria-current")) || rows[0])?.focus();
+    }, 0);
+    return () => clearTimeout(t);
+  }, [open, presentation]);
+  // Up, Down, Home and End move between rows, wrapping at the ends.
+  const onMenuKey = (e) => {
+    const rows = [...e.currentTarget.querySelectorAll('[role="menuitem"]')];
+    const here = rows.indexOf(document.activeElement);
+    let next = null;
+    if (e.key === "ArrowDown") next = (here + 1) % rows.length;
+    else if (e.key === "ArrowUp") next = (here - 1 + rows.length) % rows.length;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = rows.length - 1;
+    if (next === null || !rows.length) return;
+    e.preventDefault();
+    rows[next].focus();
+  };
   const choose = (id) => { setOpen(false); onSelect && onSelect(id); btnRef.current && btnRef.current.focus(); };
 
   // Close on a click outside either box, and on Escape (focus returns to the trigger).
+  // The BottomSheet owns both for itself, and a press inside it is not outside.
   useEffect(() => {
-    if (!open) return;
+    if (!open || presentation === "sheet") return;
     const down = (e) => {
       if (eventInside(wrapRef.current, e)) return;
       if (eventInside(menuRef.current, e)) return;
@@ -617,11 +655,10 @@ export function AppSwitcher({ label: fallbackLabel, icon = "apps", home, apps =
     document.addEventListener("mousedown", down);
     document.addEventListener("keydown", key);
     return () => { document.removeEventListener("mousedown", down); document.removeEventListener("keydown", key); };
-  }, [open]);
+  }, [open, presentation]);
 
   const active = open || press;
   const fg = active ? APP_T.openFg : hov ? APP_T.hoverFg : APP_T.restFg;
-  const chevron = active ? APP_T.openFg : hov ? APP_T.hoverFg : APP_T.restChevron;
   const homeItem = home || { id: "__home", label: fallbackLabel };
 
   return (
@@ -632,7 +669,9 @@ export function AppSwitcher({ label: fallbackLabel, icon = "apps", home, apps =
       padding: collapsed
         ? `${L.textPad} 0`
         : `${L.textPad} ${L.chevPad}` }}>
-      <button ref={btnRef} type="button" onClick={toggle}
+      <button ref={btnRef} className={FOCUS_RING_REPLACE} type="button" onClick={toggle}
+        onKeyDown={(e) => { if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") viaKey.current = true;
+          if (e.key === "ArrowDown" && !open) { e.preventDefault(); toggle(); } }}
         aria-haspopup="menu" aria-expanded={open}
         aria-label={collapsed ? `Switch application: ${label}` : undefined}
         onMouseEnter={() => setHov(true)} onMouseLeave={() => { setHov(false); setPress(false); }}
@@ -646,7 +685,8 @@ export function AppSwitcher({ label: fallbackLabel, icon = "apps", home, apps =
           background: active ? APP_T.openFill : hov ? APP_T.hoverFill : "transparent",
           // Drawn inside, as Figma strokes, so 0.75 and 1px do not move the content.
           border: "none",
-          boxShadow: `inset 0 0 0 ${active ? "var(--contextual-layout-units-button-borderwidth-selected, 1px)" : "var(--contextual-layout-units-button-borderwidth-rest, 0.75px)"} ${active ? APP_T.openStroke : hov ? APP_T.hoverStroke : APP_T.restStroke}, var(--elevation-widget)`,
+          "--pw-ring-keep-shadow": "var(--elevation-lift)",
+          boxShadow: `inset 0 0 0 ${active ? "var(--contextual-layout-units-button-borderwidth-selected, 1px)" : "var(--contextual-layout-units-button-borderwidth-rest, 0.75px)"} ${active ? APP_T.openStroke : hov ? APP_T.hoverStroke : APP_T.restStroke}, var(--elevation-lift)`,
           transition: "background-color var(--motion-duration-3) var(--motion-easing-standard), box-shadow var(--motion-duration-3) var(--motion-easing-standard)" }}>
         {/* Action Icon: 36 box, 24 wrapper, the glyph at its 16 frame */}
         <span style={{ width: 36, height: 36, display: "flex", alignItems: "center",
@@ -664,18 +704,23 @@ export function AppSwitcher({ label: fallbackLabel, icon = "apps", home, apps =
             color: fg, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
             transition: "color var(--motion-duration-3) var(--motion-easing-standard)" }}>{label}</span>
         )}
-        {!collapsed && (
-          <span style={{ width: 20, height: 20, display: "flex", alignItems: "center",
-            justifyContent: "center", flexShrink: 0 }}>
-            <span className="material-symbols-rounded" aria-hidden="true"
-              style={{ fontSize: 14, lineHeight: 1, display: "block", color: chevron,
-                fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }}>chevron_right</span>
-          </span>
-        )}
       </button>
 
-      {open && rect && ReactDOM.createPortal(
-        <div ref={menuRef} role="menu" aria-label={label}
+      {presentation === "sheet" && (
+        <BottomSheet open={open} title={sheetTitle || label} menu returnFocusRef={btnRef}
+          onOpenChange={(next) => { if (!next) setOpen(false); }}>
+          <PopoverRow item={homeItem} onClick={choose} activeId={activeId} />
+          {apps.length > 0 && (
+            <div role="separator" style={{ padding: "var(--semantic-layout-units-padding-xtight)" }}>
+              <div style={{ borderTop: `0.5px solid ${APP_T.separator}` }} />
+            </div>
+          )}
+          {apps.map(a => <PopoverRow key={a.id} item={a} onClick={choose} activeId={activeId} />)}
+        </BottomSheet>
+      )}
+
+      {open && presentation !== "sheet" && rect && ReactDOM.createPortal(
+        <div ref={menuRef} role="menu" aria-label={label} onKeyDown={onMenuKey}
           style={{ position: "fixed", left: `calc(${rect.right}px + var(--semantic-layout-units-gap-xxxtight))`,
             top: rect.top, zIndex: 1000, boxSizing: "border-box",
             minWidth: 220, maxWidth: 360,
@@ -715,7 +760,7 @@ export function CollapseButton({ isSidebarCollapsed, onToggle, collapseIcon, exp
       <div style={{ height: 1, backgroundColor: T.fill.infoSubtle, marginBottom: L.collapseGap }} />
       <div onClick={onToggle} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
         aria-label={isSidebarCollapsed ? "Expand navigation" : "Collapse navigation"}
-        role="button" tabIndex={0}
+        className={FOCUS_RING} role="button" tabIndex={0}
         onKeyDown={e => (e.key === "Enter" || e.key === " ") && onToggle()}
         style={{ display: "flex", alignItems: "center", minHeight: L.itemH, width: "100%",
           borderRadius: T.radius, backgroundColor: h ? T.fill.navHover : T.fill.navBase,
@@ -768,21 +813,30 @@ export function CollapseButton({ isSidebarCollapsed, onToggle, collapseIcon, exp
 // in Slot.RowEnd (expanded) or centered (collapsed). Divider below.
 // Matches Figma "Slot.NavHeader" (node 40007331:7794).
 // Hidden on mobile (<768px), TopNav hamburger is the sole toggle there.
-export function NavHeader({ isSidebarCollapsed, onToggle, collapseIcon, expandIcon }) {
+// `headerStart` is Figma's Slot.RowStart: the module mark sits at the start of
+// the row and the collapse control at the end. Only the 44 control is a
+// button, so the mark is never a hit area. `hideToggle` keeps the row (and its
+// mark) where the shell has no collapse control, as on the mobile overlay.
+export function NavHeader({ isSidebarCollapsed, onToggle, collapseIcon, expandIcon, headerStart = null, hideToggle = false }) {
   const [h, setH] = useState(false);
   const actionIconColor = T.icon.actionSecondary; // var(--semantic-color-stroke-action-field-hover), always static
+  const start = !isSidebarCollapsed && headerStart;
   return (
     <div style={{ width: "100%", flexShrink: 0 }}>
+      <div style={{ display: "flex", alignItems: "center", height: L.itemH, width: "100%",
+        justifyContent: start ? "space-between" : (isSidebarCollapsed ? "center" : "flex-end"),
+        gap: "var(--semantic-layout-units-gap-xxtight)" }}>
+      {start && <div style={{ display: "flex", alignItems: "center", minWidth: 0, flex: 1 }}>{headerStart}</div>}
+      {!hideToggle && (
       <div onClick={onToggle} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
         aria-label={isSidebarCollapsed ? "Expand navigation" : "Collapse navigation"}
-        role="button" tabIndex={0}
+        className={FOCUS_RING} 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%",
-          justifyContent: isSidebarCollapsed ? "center" : "flex-end", cursor: "pointer" }}>
+        style={{ display: "flex", alignItems: "center", height: L.itemH, flexShrink: 0, 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",
@@ -799,6 +853,8 @@ export function NavHeader({ isSidebarCollapsed, onToggle, collapseIcon, expandIc
           </div>
         </div>
       </div>
+      )}
+      </div>
       {/* 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 }} />
@@ -847,7 +903,7 @@ export function ListItem({ item, isActive, onClick }) {
   return (
     <div onClick={() => onClick && onClick(item.id)}
       onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}
-      role="button" tabIndex={0}
+      className={FOCUS_RING} role="button" tabIndex={0}
       onKeyDown={e => (e.key === "Enter" || e.key === " ") && onClick && onClick(item.id)}
       // SideNavItem.List is a fixed 48 tall (was min 44).
       style={{ display: "flex", alignItems: "center", height: 48, minHeight: L.itemH, width: "100%",
@@ -937,6 +993,10 @@ export function SideNav({
   //   { label, icon?, home?: {id,label}, apps: [{id,label}], activeId, onSelect }
   // Renders as the first entry of the scrolling menu, in both rail states.
   appSwitcher = null,
+  // Figma Slot.RowStart in the header: content at the start of the header row,
+  // beside the collapse control (a module shell puts its Module.Mark here).
+  // Expanded only; the rail has room for the control alone.
+  headerStart = null,
 }) {
   const [expanded, setExpanded] = useState(defaultExpanded);
   const [popoverId, setPopoverId] = useState(null);
@@ -994,7 +1054,7 @@ export function SideNav({
             --motion-duration-5 + --motion-easing-accordion, with inner wrapper opacity
             fade --motion-duration-4 (70ms delay on expand, no delay on collapse). */}
         {hasChildren && !collapsed && (
-          <div style={{
+          <div {...inertIf(!isExp)} style={{
             display: "grid",
             gridTemplateRows: isExp ? "1fr" : "0fr",
             marginTop: isExp ? L.menuGap : 0,
@@ -1037,10 +1097,11 @@ export function SideNav({
     }}>
       {/* NavHeader, TOP of nav, PINNED (flexShrink:0) so it stays visible while the
           item list scrolls beneath it. Hidden on mobile (<768px). */}
-      {(!hideCollapseButton || headerEnd) && (
+      {(!hideCollapseButton || headerEnd || headerStart) && (
         <div style={{ flexShrink: 0 }}>
-          {!hideCollapseButton && (
-            <NavHeader isSidebarCollapsed={collapsed}
+          {(!hideCollapseButton || headerStart) && (
+            <NavHeader isSidebarCollapsed={collapsed} headerStart={headerStart}
+              hideToggle={hideCollapseButton}
               onToggle={() => onCollapseChange && onCollapseChange(!collapsed)} />
           )}
           {/* headerEnd slot. Hidden on the 72px rail: the rail is only wide
@@ -1049,7 +1110,7 @@ export function SideNav({
               unmounting, on the same curve as the section labels, so the
               header does not jump when the rail toggles. */}
           {headerEnd && (
-            <div style={{
+            <div {...inertIf(collapsed)} style={{
               opacity: collapsed ? 0 : 1,
               maxHeight: collapsed ? 0 : 200,
               overflow: "hidden",
@@ -1116,7 +1177,7 @@ export function SideNav({
 
         {/* SideNavListSection, optional. Hidden in collapsed rail. */}
         {listSection && (
-          <div style={{ opacity: collapsed ? 0 : 1,
+          <div {...inertIf(collapsed)} style={{ opacity: collapsed ? 0 : 1,
             maxHeight: collapsed ? 0 : 400, overflow: "hidden",
             transition: "opacity var(--motion-duration-4) var(--motion-easing-standard), max-height var(--motion-duration-5) var(--motion-easing-spring)" }}>
             <SideNavListSection label={listSection.label} items={listSection.items}

package/components/toggle-button/toggle-button.jsx

@@ -75,7 +75,7 @@ export const T = {
   // option's own radius, and the offset shows the surface behind, so there is
   // no white halo on a dark page.
   focusOutline: `${CL("focusring-width")} solid ${SC("stroke-focusring-base")}`,
-  focusOffset:  CL("focusring-offset"),
+  focusOffset:  "0",
   colour:       `${M("duration-2")} ${M("easing-standard")}`,
   shape:        `${M("duration-4")} ${M("easing-spring-soft")}`,
 };
@@ -167,7 +167,8 @@ export const ToggleButtonOption = forwardRef(function ToggleButtonOption({
     background: look.fill[state] || look.fill.rest,
     color: look.fg[state] || look.fg.rest,
     // Inset so the outline never adds width: selecting must not move the row.
-    boxShadow: look.stroke ? `inset 0 0 0 ${T.border} ${look.stroke[state] || look.stroke.rest}` : "none",
+    // In Figma the Focused ring takes the outlined option's border's place.
+    boxShadow: look.stroke && !ring ? `inset 0 0 0 ${T.border} ${look.stroke[state] || look.stroke.rest}` : "none",
     outline: ring ? T.focusOutline : "none",
     outlineOffset: ring ? T.focusOffset : undefined,
     fontFamily: sz.fontFamily, fontSize: sz.fontSize, fontWeight: sz.fontWeight,

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

@@ -10,6 +10,7 @@
  */
 
 import React, { useState, useEffect, useRef } from "react";
+import { FOCUS_RING, FOCUS_RING_INSET, FOCUS_RING_LAYER, FOCUS_RING_REPLACE, injectFocusRing } from "../_shared/focus-ring.js";
 import { ActionIcon } from "../icon/action-icon.jsx";
 import { Icon } from "../icon/icon.jsx";
 
@@ -22,6 +23,8 @@ import { TopNavSearch, SearchInput } from "../search/search.jsx";
 import { OrgSwitcherPanel, DEMO_ORGS } from "../org-switcher/org-switcher.jsx";
 import { ModuleIcon, MODULE_LABELS, MODULES } from "../module-icon/module-icon.jsx";
 
+injectFocusRing();
+
 // ─── DESIGN TOKENS ─────────────────────────────────────────────────────────────
 // Bound to live semantic CSS variables (CLAUDE.md §6). The TopNav bar is a dark
 // brand-blue surface, so every CONTROL on it resolves through the DARK-MODE token
@@ -377,13 +380,13 @@ function TopNavActionIcon({ icon, label, onClick }) {
     // so the clickable box collapsed to the 28 layer.
     <div style={{ display: "flex", alignItems: "center", justifyContent: "center",
       width: L.actionTarget, height: L.actionTarget, flexShrink: 0 }}>
-      <button type="button" aria-label={label} onClick={onClick}
+      <button className={FOCUS_RING_LAYER} 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",
+        <span data-pw-ring-target="" 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}
@@ -427,7 +430,7 @@ export function TopNavProfile({ user, open, onToggle, mobile = false }) {
     // 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 }}>
-      <button
+      <button className={FOCUS_RING_LAYER}
         onClick={onToggle}
         onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
         aria-haspopup="true" aria-expanded={open}
@@ -445,7 +448,7 @@ export function TopNavProfile({ user, open, onToggle, mobile = false }) {
           transition: "background var(--motion-duration-2) var(--motion-easing-standard)",
         }}
       >
-        <div style={{
+        <div data-pw-ring-target="" style={{
           width: L.avatarSize, height: L.avatarSize, borderRadius: "50%",
           background: open ? T.avatarBgPressed : hov ? T.avatarBgHover : T.avatarBg,
           display: "flex", alignItems: "center", justifyContent: "center",
@@ -506,7 +509,7 @@ export function OrgSwitcher({ org, open, onToggle, mobile = false, showCampus =
     // 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
+      <button className={FOCUS_RING_REPLACE}
         onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
         onClick={onToggle}
         aria-haspopup="true" aria-expanded={open}
@@ -665,7 +668,7 @@ export function ModuleSwitcher({ modules, activeId, open, onToggle, breakpoint =
   return (
     // The 48 slot, Padding/XXTight by Padding/XXXTight. This was a raw 4px 2px.
     <div style={{ position: "relative", padding: `${L.slotPadV} ${L.slotPadNarrow}` }}>
-      <button
+      <button className={FOCUS_RING}
         onMouseEnter={() => setHov(true)} onMouseLeave={() => { setHov(false); setPress(false); }}
         onMouseDown={() => setPress(true)} onMouseUp={() => setPress(false)} onBlur={() => setPress(false)}
         onClick={onToggle}
@@ -727,7 +730,7 @@ function TopNavProfileMenu({ user }) {
           <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"
+          <button className={FOCUS_RING_INSET} 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",
@@ -735,7 +738,7 @@ function TopNavProfileMenu({ user }) {
             {label}
           </button>
         ))}
-        <button role="menuitem"
+        <button className={FOCUS_RING_INSET} 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",
@@ -827,7 +830,7 @@ function PillarItem({ label, active, brandItem, tablet, onClick }) {
   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}
+    <button className={FOCUS_RING} 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",
@@ -853,7 +856,7 @@ function NewCoOrgSwitcher({ org, open, onToggle, compact }) {
   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}
+      <button className={FOCUS_RING} 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,
@@ -884,7 +887,7 @@ function PillarTrigger({ label, open, onToggle }) {
   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}
+      <button className={FOCUS_RING} 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",
@@ -902,7 +905,7 @@ function PillarTrigger({ label, open, onToggle }) {
 function NewCoAction({ icon, label, badge, onClick }) {
   const { hov, press, handlers } = usePress();
   return (
-    <button type="button" aria-label={label} onClick={onClick} {...handlers}
+    <button className={FOCUS_RING} 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",
@@ -1204,7 +1207,7 @@ export function TopNav({
           >
             {modules.map(m => (
               <li key={m.id} role="option" aria-selected={m.id === currentModuleId}>
-                <button
+                <button className={FOCUS_RING_INSET}
                   onClick={() => handleModuleSelect(m.id)}
                   style={{
                     display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-medium)",
@@ -1306,7 +1309,7 @@ export function TopNav({
         >
           {/* Exit, to the LEFT and outside the field, so it can never be read
               as the field's own clear control */}
-          <button
+          <button className={FOCUS_RING}
             type="button"
             aria-label="Back"
             onClick={() => setSearchExpanded(false)}