@the-portland-company/shell 0.81.0 → 0.81.2

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## 0.81.2
+
+The rail header matches the Left Navigation design's vertical rhythm. Spec cited: Specs/Left-Navigation §3-§7 (values the page states are unchanged; the design decides the gaps it does not state).
+
+- **Cause.** The org card's white band was fixed at 70px, the Brand `orgLogoMaxHeight` cap, where the design draws a 52px band; the ORGANIZATION eyebrow sat 21px under the lockup where the design has 16px; the mode caption sat 6px under the track where the design has 8px. Every section row landed about 26px low (Design Compare, 2026-10-12: label_moved on Relationship mode / Dashboard / Contacts).
+- **Fix.** `--sidebar-org-band-height: 52px` (logos still scale to fit; the 70px Brand token stays the logo cap), eyebrow margins 2px/9px, caption 8px.
+
+## 0.81.1
+
+The active row's left marker is visible. Spec cited: Specs/Left-Navigation §8.1 ("9% white tint, semibold white text, and a 2px inset marker on the left edge in white").
+
+- **Cause.** The marker drew in `--mode-accent`, the Mode's chrome accent, which is graphite (#2F3136) on the graphite Relationship rail (#1B1C20): in the DOM, invisible on screen. The Design Compare for Left Navigation read the Dashboard row as having no active state (measured 2026-10-12 by the visual-regression tester).
+- **Fix.** New `--sidebar-active-marker: #FFFFFF` in chrome.css (Brand `modes.<mode>.accent`, white for every mode as of v153); `NavActiveRail` draws in it, falling back to the old accent on an older sheet.
+- Tests: `__tests__/mode-accent.test.tsx`.
+
 ## 0.81.0
 
 An organization switch without a reload keeps the mode switcher and the address bar right, and no shell link builds on the retired VRM core. Spec cited: Reference/UI-Platform "Retirement of app.politogyvrm.com" and "URL state"; Specs/Left-Navigation §7.

package/dist/app-chrome.cjs

@@ -2742,7 +2742,7 @@ function NavSidebar({
               }
             ),
             org ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rc("max-md:flex max-md:justify-center"), children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: `mb-[7px] mt-[7px] flex items-center justify-between ${rc("max-md:hidden")}`, children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: NAV_EYEBROW_CLASS, children: "Organization" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: `mb-[9px] mt-[2px] flex items-center justify-between ${rc("max-md:hidden")}`, children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: NAV_EYEBROW_CLASS, children: "Organization" }) }),
               org.loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex w-full items-center gap-2.5 rounded-md border border-[color:var(--line)] bg-[color:var(--panel-elevated)] px-2.5 py-2 shadow-sm ${rc("max-md:w-auto max-md:border-0 max-md:bg-transparent max-md:p-0 max-md:shadow-none")}`, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
@@ -2938,7 +2938,7 @@ function NavSidebar({
                   )
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: `mt-1.5 text-left text-[11px] leading-[1.2] text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] ${rc("max-md:hidden")}`, children: modeCaption(mode.label) })
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: `mt-2 text-left text-[11px] leading-[1.2] text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] ${rc("max-md:hidden")}`, children: modeCaption(mode.label) })
             ] }) : null
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col overflow-y-auto px-[10px] py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex flex-col gap-0.5", children: [
@@ -3170,7 +3170,7 @@ function NavActiveRail() {
     {
       "aria-hidden": "true",
       className: "pointer-events-none absolute inset-y-0 left-0 w-[2px]",
-      style: { background: "var(--mode-accent, transparent)" }
+      style: { background: "var(--sidebar-active-marker, var(--mode-accent, transparent))" }
     }
   );
 }