@helloimjolopez-pathway/pathway-components 0.7.2 → 0.8.0

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}