@helloimjolopez-pathway/pathway-components 0.2.4 → 0.3.1

package/components/badge/badge.jsx

@@ -0,0 +1,331 @@
+/**
+ * Badge: a short status, category or applied value. One component, three types.
+ *
+ * Figma `Badge`, set 40011003:15892, page "↳ ❇️ Badge" (1673:3961). Spec v2:
+ * components/badge/badge-spec.md (REVIEWED 2026-11-06).
+ *
+ *   type="static"       a status or category the system sets. Nothing to press.
+ *                       96 variants: Status (8) x Size (3) x Style (4). Unchanged
+ *                       from v1 except where v1 disagreed with Figma (below).
+ *   type="dismissible"  something a person applied or picked (an applied filter,
+ *                       a person, an editable tag). Only the round x is a button.
+ *   type="interactive"  a filter toggle (aria-pressed), or a drill to a filtered
+ *                       view when `href` or `showTrailingIcon` is set.
+ *
+ * STATIC, v1 to v2. Three v1 values did not match Figma and now do:
+ *   Outline & Fill stroke   v1 Subtle, Figma Strong (Neutral Bold, accents plain).
+ *   Neutral Naked text      v1 Neutral/Bold, Figma Neutral/Base.
+ *   Stroke placement        v1 drew a 1px border INSIDE the box, which made every
+ *                           Static badge 2px taller than the set (24 not 22).
+ *                           Figma strokes outside; a box-shadow does the same.
+ * Figma's default leading icon is the placeholder `error`; in code the icon is
+ * passed explicitly, so existing call sites render exactly as before.
+ *
+ * DISMISSIBLE and INTERACTIVE, every size, with or without icons:
+ *   outer frame    invisible, min width and height Accessibility/Touch Target/AA
+ *                  (44). The pill keeps its size (20 / 22 / 22) inside it.
+ *   Badge.Pill     fill, stroke (outside), CornerRadius/Large, focus ring.
+ *   Container.Main Padding/XXXTight left and right, Padding/XXXXTight top and
+ *                  bottom, NO gap.
+ *   Container.Label Padding/XXXTight left and right; Field Label to value
+ *                  Gap/XXTight.
+ *   icons          the leading icon, the check, the chevron and the x sit
+ *                  directly in Container.Main, each in its own frame only:
+ *                  12 / 14 / 16.
+ * Result: 4 from the pill edge to an icon, 4 from an icon to the text, 8 from
+ * the edge to text alone. With every icon on the badge stops at 240.
+ *
+ * FOCUS RING: Stroke/FocusRing/Base at FocusRing/Width, FocusRing/Offset outside
+ * the pill, on keyboard focus only. On Dismissible the x is focusable but the
+ * ring goes around the whole badge.
+ */
+import React, { useState } from "react";
+import { Icon } from "../icon/icon.jsx";
+
+const C = (n) => `var(--semantic-color-${n})`;
+const U = (n) => `var(--semantic-layout-units-${n})`;
+const X = (n) => `var(--contextual-layout-units-${n})`;
+const Y = (n) => `var(--semantic-type-${n})`;
+
+export const BADGE_TYPES = ["static", "dismissible", "interactive"];
+/** The eight Status values, in the set's own order. Interactive takes the first four of BADGE_INTERACTIVE_STATUS only. */
+export const BADGE_STATUS = [
+  "Neutral", "Severe", "Negative", "Positive", "Attention", "Info",
+  "Accent 2", "Accent 3",
+];
+/** Attention, Severe and the accents have no Action/Status tokens. */
+export const BADGE_INTERACTIVE_STATUS = ["Neutral", "Info", "Positive", "Negative"];
+export const BADGE_SIZES = ["Small", "Medium", "Large"];
+export const BADGE_STYLES = ["Outline & Fill", "Fill", "Outline", "Naked"];
+
+/* Static and Dismissible colours, read per variant from the set. Neutral binds
+ * Base and Bold rungs, Attention's Outline stroke is Strong, and the accents
+ * are named (Jade, Mauve) with an unsuffixed stroke, so this is a table. */
+const FAMILY = {
+  "Neutral":   { fill: "fill-static-neutral-base",          strokeStrong: "stroke-static-neutral-bold",      strokeSubtle: "stroke-static-neutral-bold",
+                 text: "foreground-static-neutral-bold",     textNaked: "foreground-static-neutral-base" },
+  "Severe":    { fill: "fill-static-severe-subtle",         strokeStrong: "stroke-static-severe-strong",     strokeSubtle: "stroke-static-severe-subtle",
+                 text: "foreground-static-severe-on-subtle" },
+  "Negative":  { fill: "fill-static-negative-subtle",       strokeStrong: "stroke-static-negative-strong",   strokeSubtle: "stroke-static-negative-subtle",
+                 text: "foreground-static-negative-on-subtle" },
+  "Positive":  { fill: "fill-static-positive-subtle",       strokeStrong: "stroke-static-positive-strong",   strokeSubtle: "stroke-static-positive-subtle",
+                 text: "foreground-static-positive-on-subtle" },
+  "Attention": { fill: "fill-static-attention-subtle",      strokeStrong: "stroke-static-attention-strong",  strokeSubtle: "stroke-static-attention-strong",
+                 text: "foreground-static-attention-on-subtle" },
+  "Info":      { fill: "fill-static-info-subtle",           strokeStrong: "stroke-static-info-strong",       strokeSubtle: "stroke-static-info-subtle",
+                 text: "foreground-static-info-on-subtle" },
+  "Accent 2":  { fill: "fill-static-accent-jade-subtle",    strokeStrong: "stroke-static-accent-jade",       strokeSubtle: "stroke-static-accent-jade",
+                 text: "foreground-static-accent-jade-on-subtle" },
+  "Accent 3":  { fill: "fill-static-accent-mauve-subtle",   strokeStrong: "stroke-static-accent-mauve",      strokeSubtle: "stroke-static-accent-mauve",
+                 text: "foreground-static-accent-mauve-on-subtle" },
+};
+
+/* Interactive colours: the Action/Status family. `$` is the status key. */
+const ACTION = (s) => {
+  const k = (BADGE_INTERACTIVE_STATUS.includes(s) ? s : "Neutral").toLowerCase();
+  const t = (n) => C(n.replace("$", k));
+  return {
+    off: {
+      fill:   { rest: t("fill-action-status-$-subtle-rest"), hover: t("fill-action-status-$-subtle-hover"), pressed: t("fill-action-status-$-subtle-pressed") },
+      stroke: { rest: t("stroke-action-status-$-rest"),      hover: t("stroke-action-status-$-hover"),      pressed: t("stroke-action-status-$-pressed") },
+      text:   { rest: t("foreground-action-status-$-on-subtle-rest"), hover: t("foreground-action-status-$-on-subtle-hover"), pressed: t("foreground-action-status-$-on-subtle-pressed") },
+    },
+    on: {
+      fill:   { rest: t("fill-action-status-$-strong-rest"), hover: t("fill-action-status-$-strong-hover"), pressed: t("fill-action-status-$-strong-pressed") },
+      text:   t("foreground-action-status-$-on-strong"),
+    },
+  };
+};
+
+export const BADGE_SIZE_SPEC = {
+  Small:  { fontSize: "font-size-xxs", lineHeight: "line-height-xxs-single", icon: 11, ico: 12, contentMax: 200 },
+  Medium: { fontSize: "font-size-xs",  lineHeight: "line-height-xs-single",  icon: 12, ico: 14, contentMax: 196 },
+  Large:  { fontSize: "font-size-s",   lineHeight: "line-height-xs-single",  icon: 14, ico: 16, contentMax: 192 },
+};
+
+/** Layout constants. Static keeps v1's asymmetric padding; the other types use T.pill / T.text. */
+export const L = {
+  radius:    U("cornerradius-large"),   // CornerRadius/Large
+  radiusX:   U("cornerradius-full"),    // CornerRadius/Full, the x
+  border:    U("borderwidth-base"),     // BorderWidth/Base
+  padTop:    U("padding-xxxxtight"),    // Padding/XXXXTight
+  padBottom: U("padding-xxxxtight"),
+  padLeft:   U("padding-xxxtight"),     // Static only
+  padRight:  U("padding-xxtight"),      // Static only
+  gap:       U("gap-xxxtight"),         // Static only
+};
+export const T = {
+  pill:        U("padding-xxxtight"),   // Container.Main left and right
+  text:        U("padding-xxxtight"),   // Container.Label left and right
+  fieldGap:    U("gap-xxtight"),        // Field Label to value
+  rowGap:      U("gap-xtight"),         // badges in a wrapping row
+  touchW:      U("accessibility-touch-target-aa-width"),
+  touchH:      U("accessibility-touch-target-aa-height"),
+  ring:        C("stroke-focusring-base"),
+  ringWidth:   X("focusring-width"),
+  ringOffset:  X("focusring-offset"),
+  fieldMax:    80,                      // raw: Field Label max width, no width token
+  badgeMax:    240,                     // raw: the whole badge with every icon on
+  duration:    "var(--motion-duration-2)",
+  easing:      "var(--motion-easing-standard)",
+};
+
+const font = (spec, weight = "weight-medium") => ({
+  fontFamily: "inherit", fontSize: Y(spec.fontSize), lineHeight: Y(spec.lineHeight),
+  fontWeight: Y(weight), letterSpacing: Y("letter-spacing-extraspacious"), whiteSpace: "nowrap",
+});
+const cut = { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" };
+const outer = { display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
+  minWidth: T.touchW, minHeight: T.touchH, boxSizing: "border-box", padding: 0, margin: 0, border: 0,
+  background: "transparent", font: "inherit", color: "inherit", textDecoration: "none", outline: "none" };
+const strokeShadow = (stroke) => (stroke ? `0 0 0 ${L.border} ${stroke}` : "none");
+/* Focus ring: FocusRing/Width of Stroke/FocusRing/Base, FocusRing/Offset outside the pill,
+ * as an outline so the gap shows whatever surface the badge sits on. No white halo. */
+const focusRing = (focused) => (focused
+  ? { outline: `${T.ringWidth} solid ${T.ring}`, outlineOffset: T.ringOffset }
+  : { outline: "none" });
+const transition = `background ${T.duration} ${T.easing}, color ${T.duration} ${T.easing}, box-shadow ${T.duration} ${T.easing}`;
+
+/**
+ * @param {"static"|"dismissible"|"interactive"} type
+ * @param {string}  label            the text (on Dismissible with a Field Label, the value)
+ * @param {string}  fieldLabel       Dismissible only, for example "Campus:" (type the colon)
+ * @param {boolean} showFieldLabel   Dismissible only
+ * @param {string}  status           one of BADGE_STATUS (Interactive: BADGE_INTERACTIVE_STATUS)
+ * @param {string}  size             Small | Medium | Large
+ * @param {string}  badgeStyle       Outline & Fill | Fill | Outline | Naked
+ * @param {string}  leadingIcon      Material Symbols ligature; omitted means no icon
+ * @param {boolean} showTrailingIcon Interactive only: the drill chevron
+ * @param {boolean} selected         Interactive, controlled
+ * @param {boolean} defaultSelected  Interactive, uncontrolled
+ * @param {function} onChange        Interactive: (selected) => void
+ * @param {function} onRemove        Dismissible: called when the x is pressed
+ * @param {string}  href             Interactive drill: renders a link
+ * @param {boolean} disabled
+ * @param {boolean} removeDisabled   Dismissible: only the x is disabled
+ * @param {"hover"|"pressed"|"focused"} forceState  documentation only: show a state without the pointer (Storybook, Code Connect previews)
+ */
+export function Badge({
+  type = "static",
+  label,
+  fieldLabel,
+  showFieldLabel = false,
+  status = "Neutral",
+  size = "Small",
+  badgeStyle = "Outline & Fill",
+  leadingIcon,
+  trailingIcon,
+  showTrailingIcon = false,
+  selected,
+  defaultSelected = false,
+  onChange,
+  onRemove,
+  href,
+  disabled = false,
+  removeDisabled = false,
+  forceState,
+  className = "",
+  style,
+  ...rest
+}) {
+  const spec = BADGE_SIZE_SPEC[size] || BADGE_SIZE_SPEC.Small;
+  const [inner, setInner] = useState(defaultSelected);
+  const [hoveredState, setHovered] = useState(false);
+  const [pressedState, setPressed] = useState(false);
+  const [focusedState, setFocused] = useState(false);
+  const hovered = hoveredState || forceState === "hover";
+  const pressed = pressedState || forceState === "pressed";
+  const focused = focusedState || forceState === "focused";
+  const painted = {
+    "Outline & Fill": { fill: true,  stroke: "strong" },
+    "Fill":           { fill: true,  stroke: null },
+    "Outline":        { fill: false, stroke: "subtle" },
+    "Naked":          { fill: false, stroke: null },
+  }[badgeStyle] || { fill: true, stroke: "strong" };
+
+  /* ── Static (v1 component, Figma-corrected) ─────────────────────────── */
+  if (type === "static") {
+    const fam = FAMILY[status] || FAMILY.Neutral;
+    const stroke = painted.stroke === "strong" ? C(fam.strokeStrong) : painted.stroke === "subtle" ? C(fam.strokeSubtle) : null;
+    return (
+      <span className={`pw-badge ${className}`} data-type="static" data-status={status} data-size={size}
+        style={{
+          display: "inline-flex", alignItems: "center", boxSizing: "border-box", gap: L.gap,
+          paddingTop: L.padTop, paddingRight: L.padRight, paddingBottom: L.padBottom, paddingLeft: L.padLeft,
+          borderRadius: L.radius,
+          background: painted.fill ? C(fam.fill) : "transparent",
+          boxShadow: stroke ? `0 0 0 ${L.border} ${stroke}` : "none",
+          color: C(badgeStyle === "Naked" && fam.textNaked ? fam.textNaked : fam.text),
+          ...font(spec), ...style,
+        }}
+        {...rest}>
+        {leadingIcon && <Icon name={leadingIcon} size={spec.icon} fill={1} />}
+        {label}
+        {trailingIcon && <Icon name={trailingIcon} size={spec.icon} />}
+      </span>
+    );
+  }
+
+  const pillBase = {
+    display: "inline-flex", alignItems: "center", boxSizing: "border-box", gap: 0,
+    paddingTop: L.padTop, paddingBottom: L.padBottom, paddingLeft: T.pill, paddingRight: T.pill,
+    borderRadius: L.radius, maxWidth: showFieldLabel ? "none" : T.badgeMax, minWidth: 0,
+    transition, ...font(spec),
+  };
+  const textSlot = { display: "inline-flex", minWidth: 0, paddingLeft: T.text, paddingRight: T.text };
+  const ico = (name, fill = 0) => <Icon name={name} size={spec.ico} fill={fill} style={{ flexShrink: 0 }} />;
+
+  /* ── Dismissible ─────────────────────────────────────────────────────── */
+  if (type === "dismissible") {
+    const fam = FAMILY[status] || FAMILY.Neutral;
+    const stroke = painted.stroke === "strong" ? C(fam.strokeStrong) : painted.stroke === "subtle" ? C(fam.strokeSubtle) : null;
+    const xOff = disabled || removeDisabled;
+    const name = showFieldLabel && fieldLabel ? `${fieldLabel} ${label}` : label;
+    const xBg = xOff ? "transparent" : pressed ? C("fill-action-secondary-pressed") : hovered ? C("fill-action-secondary-hover") : "transparent";
+    const xFg = xOff ? C("foreground-action-disabled") : pressed ? C("foreground-action-secondary-pressed") : hovered ? C("foreground-action-secondary-hover") : C("foreground-action-secondary-rest");
+    return (
+      <span className={`pw-badge pw-badge--dismissible ${className}`} data-type="dismissible" data-status={status} data-size={size}
+        style={{ ...outer, ...style }} {...rest}>
+        <span className="pw-badge__pill" style={{
+          ...pillBase,
+          background: painted.fill ? C(fam.fill) : "transparent",
+          color: C(badgeStyle === "Naked" && fam.textNaked ? fam.textNaked : fam.text),
+          boxShadow: strokeShadow(stroke), ...focusRing(focused),
+        }}>
+          {leadingIcon && ico(leadingIcon, 1)}
+          <span className="pw-badge__label" style={{ ...textSlot, gap: T.fieldGap }}>
+            {showFieldLabel && fieldLabel && <span style={{ ...cut, maxWidth: T.fieldMax }}>{fieldLabel}</span>}
+            <span style={{ ...cut, maxWidth: spec.contentMax, fontWeight: Y("weight-semibold") }}>{label}</span>
+          </span>
+          <button type="button" className="pw-badge__remove" aria-label={`Remove ${name}`}
+            aria-disabled={xOff || undefined}
+            onClick={(e) => { if (xOff) { e.preventDefault(); return; } onRemove?.(e); }}
+            onMouseEnter={() => !xOff && setHovered(true)}
+            onMouseLeave={() => { setHovered(false); setPressed(false); }}
+            onMouseDown={() => !xOff && setPressed(true)}
+            onMouseUp={() => setPressed(false)}
+            onFocus={(e) => { if (e.target.matches?.(":focus-visible")) setFocused(true); }}
+            onBlur={() => { setFocused(false); setPressed(false); }}
+            onKeyDown={(e) => { if ((e.key === " " || e.key === "Enter") && !xOff) setPressed(true); }}
+            onKeyUp={() => setPressed(false)}
+            style={{
+              position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center",
+              width: spec.ico, height: spec.ico, padding: 0, margin: 0, border: 0, outline: "none",
+              borderRadius: L.radiusX, background: xBg, color: xFg, flexShrink: 0,
+              cursor: xOff ? "not-allowed" : "pointer", transition,
+            }}>
+            <Icon name="close" size={spec.ico} />
+            {/* the 44 press area, centred on the x (only the x is pressable) */}
+            <span aria-hidden="true" style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)", width: T.touchW, height: T.touchH }} />
+          </button>
+        </span>
+      </span>
+    );
+  }
+
+  /* ── Interactive ─────────────────────────────────────────────────────── */
+  const on = selected !== undefined ? selected : inner;
+  const a = ACTION(status);
+  const st = pressed ? "pressed" : hovered ? "hover" : "rest";
+  const offFill = painted.fill || st !== "rest";
+  const fill = disabled ? C("fill-action-disabled") : on ? a.on.fill[st] : (offFill ? a.off.fill[st] : "transparent");
+  const fg = disabled ? C("foreground-action-disabled") : on ? a.on.text : a.off.text[st];
+  const stroke = disabled || on || !painted.stroke ? null : a.off.stroke[st];
+  const drill = !!href || showTrailingIcon;
+  const lead = on ? "check" : leadingIcon;
+  const Tag = href ? "a" : "button";
+  const handlers = {
+    onMouseEnter: () => !disabled && setHovered(true),
+    onMouseLeave: () => { setHovered(false); setPressed(false); },
+    onMouseDown: () => !disabled && setPressed(true),
+    onMouseUp: () => setPressed(false),
+    onFocus: (e) => { if (e.target.matches?.(":focus-visible")) setFocused(true); },
+    onBlur: () => { setFocused(false); setPressed(false); },
+    onKeyDown: (e) => { if ((e.key === " " || e.key === "Enter") && !disabled) setPressed(true); },
+    onKeyUp: () => setPressed(false),
+    onClick: (e) => {
+      if (disabled) { e.preventDefault(); return; }
+      if (drill) { rest.onClick?.(e); return; }
+      const next = !on; if (selected === undefined) setInner(next); onChange?.(next);
+    },
+  };
+  return (
+    <Tag className={`pw-badge pw-badge--interactive ${className}`} data-type="interactive" data-status={status} data-size={size}
+      {...(href ? { href } : { type: "button" })}
+      {...(!drill ? { "aria-pressed": on } : null)}
+      aria-disabled={disabled || undefined}
+      {...rest} {...handlers}
+      style={{ ...outer, cursor: disabled ? "not-allowed" : "pointer", ...style }}>
+      <span className="pw-badge__pill" style={{
+        ...pillBase, background: fill, color: fg,
+        boxShadow: strokeShadow(stroke), ...focusRing(focused),
+      }}>
+        {lead && ico(lead, on ? 0 : 1)}
+        <span className="pw-badge__label" style={textSlot}><span style={{ ...cut, display: "block", maxWidth: spec.contentMax }}>{label}</span></span>
+        {showTrailingIcon && ico(trailingIcon || "chevron_right")}
+      </span>
+    </Tag>
+  );
+}
+
+export default Badge;

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

@@ -8,9 +8,9 @@
  * 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 React, { useState } from "react";
 import { DemoChrome, mount } from "../_demo/harness.jsx";
-import { NavShell } from "./nav-shell.jsx";
+import { NavShell, ACCOUNTING_APP_SWITCHER } from "./nav-shell.jsx";
 import { PageTemplate } from "../page-template/page-template.jsx";
 import { NAV_SECTIONS } from "../../src/stories/Library/SideNav/sidenavDemoData.jsx";
 
@@ -25,14 +25,26 @@ const ORG = { id: "gcc", name: "Grace Community Church", campus: "Knoxville", in
 const USER = { name: "Jo Lopez", initials: "JL", email: "jo@gracecommunity.org" };
 
 function App() {
+  // The app switcher's on/off, the same switch as the web component's
+  // `app-switcher` attribute. It lives in the page so it works in every width.
+  const [appSwitcher, setAppSwitcher] = useState(false);
+  const [app, setApp] = useState("financials-home");
   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."}>
+             "Mobile opens the nav as an overlay from the hamburger. Tick App switcher to turn on the Accounting app switcher."}>
       <NavShell activeModuleId="accounting" org={ORG} user={USER}
-        navSections={NAV_SECTIONS} activeNavId="balance_sheet" onNavigate={() => {}}>
+        navSections={NAV_SECTIONS} activeNavId="balance_sheet" onNavigate={() => {}}
+        appSwitcher={appSwitcher ? { ...ACCOUNTING_APP_SWITCHER, activeId: app, onSelect: setApp } : null}>
         <PageTemplate>
+          <label style={{ display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-tight)",
+            fontSize: Y("font-size-s"), lineHeight: Y("line-height-s-single"),
+            color: C("foreground-static-neutral-base"), cursor: "pointer" }}>
+            <input id="navshell-app-switcher" type="checkbox" checked={appSwitcher}
+              onChange={(e) => setAppSwitcher(e.target.checked)} />
+            App switcher (Accounting)
+          </label>
           <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

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

@@ -75,6 +75,20 @@ function useBreakpoint() {
  *   defaultCollapsed boolean — initial desktop collapse state (default false)
  *   children         ReactNode — page content (renders inside Shell.Main)
  */
+// The Accounting module's apps, as Figma's Accounting.AppSwitcher lists them.
+// The web component falls back to this when `app-switcher` is on and no
+// `appSwitcher` property has been set.
+export const ACCOUNTING_APP_SWITCHER = {
+  label: "Financials Home",
+  icon: "apps",
+  home: { id: "financials-home", label: "Financials Home" },
+  apps: [
+    { id: "accounts-payable", label: "Accounts Payable" },
+    { id: "accounts-receivable", label: "Accounts Receivable" },
+    { id: "bank-reconciliation", label: "Bank Reconciliation" },
+  ],
+};
+
 export function NavShell({
   // TopNav
   modules         = DEFAULT_MODULES,
@@ -93,6 +107,9 @@ export function NavShell({
   navHeaderEnd = null,
   navChildren  = null,
   navFooter    = null,
+  // Module app switcher in the SideNav (Figma Accounting.AppSwitcher). Off
+  // when null; see SideNav's `appSwitcher` for the shape.
+  appSwitcher  = null,
 
   // Shell
   defaultCollapsed = false,
@@ -233,6 +250,7 @@ export function NavShell({
           hideCollapseButton={isTablet || isMobile}
           headerEnd={navHeaderEnd}
           footer={navFooter}
+          appSwitcher={appSwitcher}
         >
           {navChildren}
         </SideNav>

package/components/sidenav/sidenav.jsx

@@ -23,7 +23,7 @@
  *        2026-10-07, 40003951-2927, does not exist in the file.
  */
 
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { Scrollable } from "../scrollbar/scrollbar.jsx";
 import ReactDOM from "react-dom";
 
@@ -105,7 +105,9 @@ export const T = {
     navActive:       c("foreground-action-secondary-pressed"),
     navDisabled:     c("foreground-action-disabled"),
     secondary:       c("foreground-static-neutral-subtle"), // PopoverMenu.SectionHeader
-    secondarySubtle: c("foreground-static-neutral-faint"),  // NavSectionLabel
+    // NavSectionLabel. Subtle, not Faint: Faint at 11px measured 4.23:1 on
+    // white in Amplify Light, under AA's 4.5. Figma SectionLabel rebound to match.
+    secondarySubtle: c("foreground-static-neutral-subtle"),
     strong:          c("foreground-static-neutral-strong"), // PopoverMenu.Item, tooltip
   },
   icon: {
@@ -171,7 +173,8 @@ export const L = {
   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"),
+  chevPad:     "var(--semantic-layout-units-padding-xxxxtight, 2px)",
+  chevBox:     20,   // Container.HasChildren, a measurement (no token needed)
   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
@@ -358,7 +361,11 @@ 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: `calc(${L.chevFrame}px + 2 * ${L.chevPad})`, height: L.iconWrap, display: "flex",
+          // 20 = 2 + the 16 frame + 2. A plain width: it was a calc() on
+          // Padding/XXXXTight, and on a token set without that name (the
+          // 10.x packages) the whole width was dropped, the box shrank to the
+          // glyph and the chevron sat flush against the row's edge.
+          <div style={{ width: L.chevBox, height: L.iconWrap, display: "flex",
             alignItems: "center", justifyContent: "center", flexShrink: 0,
             opacity: isSidebarCollapsed ? 0 : 1,
             overflow: "hidden",
@@ -490,7 +497,11 @@ export function PopoverRow({ item, onClick, activeId }) {
   const color = T.text.strong;
   return (
     <div onClick={() => onClick(item.id)}
+      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)}
+      onFocus={() => setH(true)} onBlur={() => setH(false)}
       // 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)",
@@ -516,6 +527,173 @@ export function PopoverRow({ item, onClick, activeId }) {
   );
 }
 
+
+// Is the event inside `el`? composedPath, because inside a web component a
+// document listener sees e.target retargeted to the HOST element, so
+// el.contains(e.target) is false for a click on el itself. That made a second
+// click on an open trigger close the panel on mousedown and reopen it on click.
+const eventInside = (el, e) =>
+  !!el && (typeof e.composedPath === "function" ? e.composedPath().includes(el) : el.contains(e.target));
+
+// ─── AppSwitcher ──────────────────────────────────────────────────────────────
+// Figma: Accounting.AppSwitcher (set 40018575:65691), placed as the FIRST child
+// of SideNavMenu in SideNav.Local.Accounting (40016737:141666). A module-level
+// switcher between the module's own applications (Financials Home, Accounts
+// Payable, Accounts Receivable...). Off unless `appSwitcher` is passed to SideNav.
+//
+// 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
+//     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)
+//   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 /
+//               XXTight, gap XXXTight. Home row, a separator, then the apps;
+//               the current app takes the selected fill and the stripe.
+//
+// States (fill / stroke / glyph+label):
+//   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.
+const APP_T = {
+  restStroke:   c("stroke-action-primary-subtle-rest"),
+  hoverFill:    c("fill-action-primary-subtle-hover"),
+  hoverStroke:  c("stroke-action-primary-strong-hover"),
+  hoverFg:      c("foreground-action-primary-on-subtle-hover"),
+  openFill:     c("fill-action-primary-subtle-pressed"),
+  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, icon = "apps", home, apps = [], activeId, onSelect, collapsed = false }) {
+  const [hov, setHov] = useState(false);
+  const [press, setPress] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [rect, setRect] = useState(null);
+  const wrapRef = useRef(null);
+  const btnRef = useRef(null);
+  const menuRef = useRef(null);
+
+  const toggle = () => {
+    if (open) { setOpen(false); return; }
+    setRect(wrapRef.current ? wrapRef.current.getBoundingClientRect() : null);
+    setOpen(true);
+  };
+  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).
+  useEffect(() => {
+    if (!open) return;
+    const down = (e) => {
+      if (eventInside(wrapRef.current, e)) return;
+      if (eventInside(menuRef.current, e)) return;
+      setOpen(false);
+    };
+    const key = (e) => { if (e.key === "Escape") { setOpen(false); btnRef.current && btnRef.current.focus(); } };
+    document.addEventListener("mousedown", down);
+    document.addEventListener("keydown", key);
+    return () => { document.removeEventListener("mousedown", down); document.removeEventListener("keydown", key); };
+  }, [open]);
+
+  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 };
+
+  return (
+    // Full column width in both states: 218 expanded, the rail's 48 collapsed,
+    // where Figma's Container.Main is 48x44 (one rail item is a 44 square).
+    <div ref={wrapRef} style={{ boxSizing: "border-box", width: "100%",
+      minHeight: L.itemH, flexShrink: 0,
+      padding: collapsed
+        ? `${L.textPad} 0`
+        : `${L.textPad} ${L.chevPad}` }}>
+      <button ref={btnRef} type="button" onClick={toggle}
+        aria-haspopup="menu" aria-expanded={open}
+        aria-label={collapsed ? `Switch application: ${label}` : undefined}
+        onMouseEnter={() => setHov(true)} onMouseLeave={() => { setHov(false); setPress(false); }}
+        onMouseDown={() => setPress(true)} onMouseUp={() => setPress(false)} onBlur={() => setPress(false)}
+        style={{ display: "flex", alignItems: "center", width: "100%", height: L.itemH,
+          boxSizing: "border-box", margin: 0, cursor: "pointer", fontFamily: "inherit",
+          justifyContent: collapsed ? "center" : "flex-start",
+          gap: collapsed ? 0 : "var(--semantic-layout-units-gap-xxxtight)",
+          paddingLeft: L.itemPadH, paddingRight: L.itemPadH,
+          borderRadius: "var(--semantic-layout-units-cornerradius-base)",
+          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)" : "var(--contextual-layout-units-button-borderwidth-rest)"} ${active ? APP_T.openStroke : hov ? APP_T.hoverStroke : APP_T.restStroke}, var(--elevation-widget)`,
+          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",
+          justifyContent: "center", flexShrink: 0 }}>
+          <span className="material-symbols-rounded" aria-hidden="true"
+            style={{ fontSize: L.iconInner, lineHeight: 1, display: "block", color: fg,
+              fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24",
+              transition: "color var(--motion-duration-3) var(--motion-easing-standard)" }}>{icon}</span>
+        </span>
+        {!collapsed && (
+          <span style={{ flex: 1, minWidth: 0, textAlign: "left",
+            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: 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}
+          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,
+            maxHeight: `calc(100vh - ${Math.round(rect.top)}px - var(--semantic-layout-units-padding-base))`,
+            overflowY: "auto",
+            background: T.surface.navElevated,
+            border: `var(--semantic-layout-units-borderwidth-xthin, 0.5px) solid ${c("stroke-static-neutral-faint")}`,
+            borderRadius: "var(--semantic-layout-units-cornerradius-large)",
+            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)",
+            animation: "popoverIn var(--motion-duration-3) var(--motion-easing-spring) forwards" }}>
+          <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} />)}
+        </div>,
+        document.body
+      )}
+    </div>
+  );
+}
+
 // ─── 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
@@ -573,7 +751,7 @@ 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/Faint
+// Tokens: Label/Section/Small/Semibold (11px/600/16px/0.6px), Foreground/Static/Neutral/Subtle
 // 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)
@@ -747,6 +925,10 @@ export function SideNav({
   headerEnd = null,
   children = null,
   footer = null,
+  // Module app switcher (Figma Accounting.AppSwitcher). Off when null.
+  //   { 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,
 }) {
   const [expanded, setExpanded] = useState(defaultExpanded);
   const [popoverId, setPopoverId] = useState(null);
@@ -895,6 +1077,8 @@ export function SideNav({
           paddingRight: collapsed ? L.navColPadH : L.navPadH }}
       >
 
+        {appSwitcher && <AppSwitcher {...appSwitcher} collapsed={collapsed} />}
+
         {/* Sectioned render: when `sections` prop is provided */}
         {sections && sections.map(({ section, items: secItems }, sIdx) => (
           <div key={section} style={{ display: "flex", flexDirection: "column",

package/components/tooltip/tooltip.jsx

@@ -306,7 +306,12 @@ export function Tooltip({
   useEffect(() => {
     if (!isOpen) return;
     const onKey = (e) => { if (e.key === "Escape") { setDismissed(true); setTapped(false); } };
-    const onDown = (e) => { if (!triggerRef.current?.contains(e.target) && !tipRef.current?.contains(e.target)) { setHover(false); setTapped(false); } };
+    // composedPath: inside a web component e.target is the HOST, so contains()
+    // would treat a tap on the trigger itself as a tap outside.
+    const onDown = (e) => {
+      const inside = (el) => !!el && (typeof e.composedPath === "function" ? e.composedPath().includes(el) : el.contains(e.target));
+      if (!inside(triggerRef.current) && !inside(tipRef.current)) { setHover(false); setTapped(false); }
+    };
     document.addEventListener("keydown", onKey);
     document.addEventListener("pointerdown", onDown);
     return () => { document.removeEventListener("keydown", onKey); document.removeEventListener("pointerdown", onDown); };

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

@@ -359,6 +359,13 @@ export const DEFAULT_ACTIONS = [
   { icon: "notifications_unread", label: "Notifications" },
 ];
 
+// Is the event inside `el`? composedPath, because inside a web component a
+// document listener sees e.target retargeted to the HOST element, so
+// el.contains(e.target) is false for a click on el itself. That made a second
+// click on an open trigger close the panel on mousedown and reopen it on click.
+const eventInside = (el, e) =>
+  !!el && (typeof e.composedPath === "function" ? e.composedPath().includes(el) : el.contains(e.target));
+
 function TopNavActionIcon({ icon, label, onClick }) {
   const [hov, setHov] = useState(false);
   const [press, setPress] = useState(false);
@@ -1061,7 +1068,7 @@ export function TopNav({
   const close  = () => setOpenPanel(null);
 
   useEffect(() => {
-    const h = (e) => { if (!navRef.current?.contains(e.target)) close(); };
+    const h = (e) => { if (!eventInside(navRef.current, e)) close(); };
     document.addEventListener("mousedown", h);
     return () => document.removeEventListener("mousedown", h);
   }, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helloimjolopez-pathway/pathway-components",
-  "version": "0.2.4",
+  "version": "0.3.1",
   "description": "Pathway Design System React components",
   "type": "module",
   "sideEffects": false,
@@ -17,7 +17,8 @@
     "./sidenav": "./components/sidenav/sidenav.jsx",
     "./nav-shell": "./components/nav-shell/nav-shell.jsx",
     "./page-template": "./components/page-template/page-template.jsx",
-    "./tooltip": "./components/tooltip/tooltip.jsx"
+    "./tooltip": "./components/tooltip/tooltip.jsx",
+    "./badge": "./components/badge/badge.jsx"
   },
   "peerDependencies": {
     "react": ">=17",