@helloimjolopez-pathway/pathway-components 0.8.0 → 0.9.0

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/nav-shell/nav-shell.jsx

@@ -13,7 +13,7 @@
 import React, { useState, useEffect, useCallback } from "react";
 import TopNav, { DEFAULT_MODULES } from "../top-nav/top-nav.jsx";
 import { SideNav } from "../sidenav/sidenav.jsx";
-import { ModuleMark } from "../module-icon/module-icon.jsx";
+import { moduleHeader } from "../sidenav/accounting-side-nav.jsx";
 
 // ─── CONSTANTS ────────────────────────────────────────────────────────────────
 const TOPNAV_H = 60; // px — spec §9.3 rule 1
@@ -292,7 +292,7 @@ export function NavShell({
           hideCollapseButton={isTablet || isMobile}
           headerEnd={navHeaderEnd}
           footer={navFooter}
-          headerStart={appSwitcher && appSwitcher.moduleMark ? <ModuleMark {...appSwitcher.moduleMark} /> : null}
+          headerStart={moduleHeader(appSwitcher)}
           appSwitcher={appSwitcher ? { ...appSwitcher, activeId: appActive, onSelect: handleAppSelect,
             // Mobile opens the menu as a BottomSheet (Figma 40016737:141824).
             presentation: isMobile ? "sheet" : "popover" } : null}

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

@@ -29,7 +29,8 @@
  */
 import React, { useEffect, useState } from "react";
 import { SideNav } from "./sidenav.jsx";
-import { ModuleMark } from "../module-icon/module-icon.jsx";
+import { SideNavHeaderLabel } from "./sidenav.jsx";
+import { ModuleIcon } from "../module-icon/module-icon.jsx";
 
 // The Accounting module's applications, each with its own side nav. NavShell's
 // `app-switcher` and <pathway-accounting-sidenav> fall back to this when no
@@ -49,7 +50,8 @@ const APP_NAV_STANDARD = ["Dashboard", "Enter", "Manage", "View", "Reports", "Mo
 export const ACCOUNTING_APP_SWITCHER = {
   label: "Financials Home",
   icon: "apps",
-  // The module's mark in the SideNav header (Figma Module.Mark, Accounting).
+  // The module's label in the SideNav header: Figma SideNav.Header.Label with
+  // the Accounting icon chip (40016737:141726, 2026-11-12).
   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.
@@ -66,6 +68,15 @@ export const ACCOUNTING_APP_SWITCHER = {
     { id: "purchasing-management", label: "Purchasing Management", navItems: accountingNav("pm", ["Dashboard", "Enter", "Manage", "Reports", "Modify", "Help"]) },
   ],
 };
+// The nav header's start slot for a module: SideNav.Header.Label with the
+// module's icon chip. NavShell uses the same, so the two headers never differ.
+export function moduleHeader(appSwitcher) {
+  const m = appSwitcher && appSwitcher.moduleMark;
+  if (!m) return null;
+  return <SideNavHeaderLabel label={m.label}
+    icon={m.module ? <ModuleIcon module={m.module} size={14} color="mono" /> : null} />;
+}
+
 const MOBILE_MAX = 767; // below 768, as NavShell's breakpoint
 
 function useIsMobile() {
@@ -107,7 +118,7 @@ export function AccountingSideNav({
 
   return (
     <SideNav key={current && current.id} items={items} activeId={active} onNavigate={navigate}
-      headerStart={appSwitcher.moduleMark ? <ModuleMark {...appSwitcher.moduleMark} /> : null}
+      headerStart={moduleHeader(appSwitcher)}
       appSwitcher={{ ...appSwitcher, activeId: current && current.id, onSelect: selectApp, presentation: mode }}
       {...rest} />
   );

package/components/sidenav/sidenav.jsx

@@ -747,6 +747,38 @@ export function AppSwitcher({ label: fallbackLabel, icon = "apps", home, apps =
   );
 }
 
+// ─── SideNavHeaderLabel ───────────────────────────────────────────────────────
+// Figma SideNav.Header.Label (40018260:4928), read 2026-11-12 from the
+// Accounting Module Nav Shell (40016737:141726). The label at the start of the
+// nav header, beside the collapse control. Text only for a pillar rail; with
+// `icon`, the module's icon chip sits before the name (a module rail, such as
+// Accounting's Financials).
+//   IconChip  28, CornerRadius/Base, Fill/Static/Brand/Strong, clips
+//     icon    the module glyph at 14, Fill/Static/Neutral/Mono
+//   label     Heading/Local/Base/Semibold: 14 / 600 / 18 / 0.3,
+//             Foreground/Static/Neutral/Strong, truncates; gap Gap/XXTight
+//   width     160 in Figma: here it fills the row up to the collapse control
+export function SideNavHeaderLabel({ label, icon = null }) {
+  return (
+    <span style={{ display: "flex", alignItems: "center", minWidth: 0, flex: 1,
+      gap: "var(--semantic-layout-units-gap-xxtight)" }}>
+      {icon && (
+        <span aria-hidden="true" style={{ width: 28, height: 28, flexShrink: 0, overflow: "hidden",
+          display: "inline-flex", alignItems: "center", justifyContent: "center",
+          borderRadius: "var(--semantic-layout-units-cornerradius-base)",
+          background: c("fill-static-brand-strong"), color: c("fill-static-neutral-mono") }}>
+          {icon}
+        </span>
+      )}
+      <span style={{ flex: 1, minWidth: 0, fontFamily: "var(--semantic-type-family-brand)",
+        fontWeight: "var(--semantic-type-weight-semibold)", fontSize: "var(--semantic-type-font-size-s)",
+        lineHeight: "var(--semantic-type-line-height-s-tight)", letterSpacing: "var(--semantic-type-letter-spacing-spacious)",
+        color: c("foreground-static-neutral-strong"),
+        whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{label}</span>
+    </span>
+  );
+}
+
 // ─── CollapseButton ───────────────────────────────────────────────────────────
 // Redesigned in Figma (2026-05-12): now uses Slot.RowStart (Module.Mark icon)
 // + Slot.RowEnd (Action Icon). The action icon uses Foreground/Action/Secondary/Rest