@helloimjolopez-pathway/pathway-components 0.7.2 → 0.8.1

package/components/_shared/focus-ring.js

@@ -0,0 +1,45 @@
+/**
+ * Keyboard focus ring shared by controls that style themselves inline.
+ *
+ * One ring for every Pathway control: FocusRing/Width of Stroke/FocusRing/Base,
+ * drawn as an outline that hugs the element's edge (no gap), the way Figma draws
+ * it: an outside stroke on the control's own container in each Focused variant.
+ * Menu rows take the inset variant, as PopoverMenu.Item does in Figma. Where the
+ * Figma ring takes the place of the control's border, FOCUS_RING_REPLACE also
+ * hides that border while the ring shows.
+ *
+ * A stylesheet rule rather than inline style, because :focus-visible (keyboard
+ * focus only, never a mouse click) can only be matched by a selector.
+ */
+export const FOCUS_RING = "pw-focus-ring";
+export const FOCUS_RING_INSET = "pw-focus-ring pw-focus-ring--inset";
+// The ring replaces the control's border (drawn as an inset box-shadow or a CSS
+// border). A control that also carries an elevation keeps it by setting
+// --pw-ring-keep-shadow in its own style.
+export const FOCUS_RING_REPLACE = "pw-focus-ring pw-focus-ring--replace";
+// For a button that is a bigger touch target than what it draws (an action
+// icon's 44 target around its 28 layer, the 48 profile button around its 32
+// avatar): the ring goes on the drawn layer, marked data-pw-ring-target, as
+// the Figma Focus Ring layer does.
+export const FOCUS_RING_LAYER = "pw-focus-ring pw-focus-ring--layer";
+
+// Also exported so a shadow root can carry it: a rule in document.head does not
+// reach inside one, so the custom elements append this to their own styles.
+export const FOCUS_RING_CSS = `
+.pw-focus-ring:focus{outline:none}
+.pw-focus-ring:focus-visible{outline:var(--contextual-layout-units-focusring-width) solid var(--semantic-color-stroke-focusring-base);outline-offset:0}
+.pw-focus-ring--inset:focus-visible{outline-offset:calc(-1 * var(--contextual-layout-units-focusring-width))}
+.pw-focus-ring--replace:focus-visible{border-color:transparent !important;box-shadow:var(--pw-ring-keep-shadow, none) !important}
+.pw-focus-ring--layer:focus-visible{outline:none}
+.pw-focus-ring--layer:focus-visible [data-pw-ring-target]{outline:var(--contextual-layout-units-focusring-width) solid var(--semantic-color-stroke-focusring-base);outline-offset:0}
+`;
+
+let injected = false;
+export function injectFocusRing() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pathway", "focus-ring");
+  el.textContent = FOCUS_RING_CSS;
+  document.head.appendChild(el);
+}

package/components/module-icon/module-icon.jsx

@@ -385,26 +385,28 @@ export function ModuleIcon({
 }
 
 /**
- * Module.Mark, Size=Large, Style=Emphasis (Figma): the module's mark in a 28
- * tinted box beside its name. Used in the SideNav header of a module shell.
- *   box    28, CornerRadius/Small, Fill/Static/Brand/Faint
- *   glyph  ModuleIcon at 20, mono, Fill/Static/Brand/Strongest
- *   label  16 / 600, Fill/Static/Brand/Strongest, gap Gap/XXTight
+ * Module.Mark (Figma): the module's mark in a 22 tinted box beside its name.
+ * Used in the SideNav header of a module shell (SideNav.Local.Accounting,
+ * read 2026-11-12).
+ *   box    22, CornerRadius/Small, Fill/Static/Brand/Faint
+ *   glyph  ModuleIcon at 16, mono, Fill/Static/Brand/Strongest
+ *   label  Text/Body/Small/Semibold: 14 / 600 / 20 / 0.3 (the repo's `spacious`),
+ *          Fill/Static/Brand/Strongest, gap Gap/XXTight
  */
 export function ModuleMark({ module, label }) {
   const ink = "var(--semantic-color-fill-static-brand-strongest)";
   return (
     <span style={{ display: "inline-flex", alignItems: "center", minWidth: 0,
       gap: "var(--semantic-layout-units-gap-xxtight)", paddingRight: "var(--semantic-layout-units-padding-xxxtight)" }}>
-      <span aria-hidden="true" style={{ width: 28, height: 28, flexShrink: 0, display: "inline-flex",
+      <span aria-hidden="true" style={{ width: 22, height: 22, flexShrink: 0, display: "inline-flex",
         alignItems: "center", justifyContent: "center",
         borderRadius: "var(--semantic-layout-units-cornerradius-small)",
         background: "var(--semantic-color-fill-static-brand-faint)", color: ink }}>
-        <ModuleIcon module={module} size={20} color="mono" />
+        <ModuleIcon module={module} size={16} color="mono" />
       </span>
       <span style={{ fontFamily: "var(--semantic-type-family-brand)", fontWeight: "var(--semantic-type-weight-semibold)",
-        fontSize: "var(--semantic-type-font-size-r)", lineHeight: "var(--semantic-type-line-height-r-single)",
-        color: ink, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{label}</span>
+        fontSize: "var(--semantic-type-font-size-s)", lineHeight: "var(--semantic-type-line-height-s-single)",
+        letterSpacing: "var(--semantic-type-letter-spacing-spacious)", color: ink, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{label}</span>
     </span>
   );
 }

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

@@ -89,6 +89,10 @@ export function NavShell({
   user,
   onModuleSelect,
   onOrgSelect,
+  // TopNav Slot.RowEnd. Undefined follows the module: an appSwitcher may carry
+  // `topNav: { showSearch, showActions }` (Accounting turns both off).
+  showSearch,
+  showActions,
 
   // SideNav
   navItems,
@@ -233,6 +237,8 @@ export function NavShell({
         onModuleSelect={onModuleSelect}
         onOrgSelect={onOrgSelect}
         onSideNavToggle={handleSideNavToggle}
+        showSearch={showSearch ?? (appSwitcher && appSwitcher.topNav && appSwitcher.topNav.showSearch) ?? true}
+        showActions={showActions ?? (appSwitcher && appSwitcher.topNav && appSwitcher.topNav.showActions) ?? true}
       />
       </div>
 

package/components/sidenav/accounting-side-nav.jsx

@@ -51,6 +51,9 @@ export const ACCOUNTING_APP_SWITCHER = {
   icon: "apps",
   // The module's mark in the SideNav header (Figma Module.Mark, Accounting).
   moduleMark: { module: "accounting", label: "Financials" },
+  // The Accounting TopNav is TopNav.Global with Search and Actions hidden
+  // (Figma 40007879:18072): module switcher, org switcher and profile only.
+  topNav: { showSearch: false, showActions: false },
   // Title of the mobile BottomSheet (Figma "Financial Applications").
   sheetTitle: "Financial Applications",
   home: { id: "financials-home", label: "Financials Home",

package/components/sidenav/sidenav.jsx

@@ -1137,13 +1137,18 @@ export function SideNav({
           // inset the thumb by 16px expanded / 12px on the 72px rail, badly off on the rail).
           // negated through calc() because these are var() references, and negating
           // a string would produce NaN
-          marginRight: neg(collapsed ? L.navColPadH : L.navPadH) }}
+          marginRight: neg(collapsed ? L.navColPadH : L.navPadH),
+          // The rows' focus ring hugs their edge, outside it, so the scroll view
+          // (which clips) starts one ring-width further left and pads it back:
+          // nothing moves, and the ring's left edge is no longer cut off.
+          marginLeft: neg("var(--contextual-layout-units-focusring-width)") }}
         viewStyle={{ display: "flex", flexDirection: "column", gap: L.menuGap,
           paddingTop: L.menuPadT,
           // Re-add the content's right inset INSIDE the scroll view so items keep their
           // position; only the thumb moves to the edge. (Spec rule: padding on viewStyle,
           // never on the wrapper, keeps the thumb flush on any scroll surface.)
-          paddingRight: collapsed ? L.navColPadH : L.navPadH }}
+          paddingRight: collapsed ? L.navColPadH : L.navPadH,
+          paddingLeft: "var(--contextual-layout-units-focusring-width)" }}
       >
 
         {appSwitcher && <AppSwitcher {...appSwitcher} collapsed={collapsed} />}

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

@@ -1030,6 +1030,10 @@ function TopNavNewCo({ navRef, className, breakpoint, org, user, openPanel, togg
  *   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.
+ *   showSearch, boolean, default true. Figma TopNav.Search in Slot.RowEnd.
+ *   showActions, boolean, default true. Figma TopNav.Actions in Slot.RowEnd.
+ *                      A module whose bar hides them in Figma turns them off
+ *                      (Accounting, 40007879:18072: module, org and profile only).
  *   onNotifications, () => void
  *   onMore, () => void
  *   className, string
@@ -1054,6 +1058,8 @@ export function TopNav({
   onSearchOpen,
   onSideNavToggle,
   actions,
+  showSearch      = true,
+  showActions     = true,
   onNotifications,
   onMore,
   className = "",
@@ -1259,15 +1265,17 @@ export function TopNav({
         {/* Collapsed search pill. Opening it triggers the full-bar takeover
             overlay below (never an inline expand), so it cannot overlap the
             OrgSwitcher. */}
-        <TopNavSearch
-          expanded={false}
-          onExpandChange={setSearchExpanded}
-          breakpoint={breakpoint}
-          onSearchOpen={onSearchOpen}
-          searchProps={{ value: searchQuery, onChange: setSearchQuery, onClear: () => setSearchQuery("") }}
-        />
+        {showSearch && (
+          <TopNavSearch
+            expanded={false}
+            onExpandChange={setSearchExpanded}
+            breakpoint={breakpoint}
+            onSearchOpen={onSearchOpen}
+            searchProps={{ value: searchQuery, onChange: setSearchQuery, onClear: () => setSearchQuery("") }}
+          />
+        )}
 
-        <TopNavActions breakpoint={breakpoint} actions={actions} onNotifications={onNotifications} onMore={onMore} />
+        {showActions && <TopNavActions breakpoint={breakpoint} actions={actions} onNotifications={onNotifications} onMore={onMore} />}
 
         <TopNavProfile
           user={user}