@helloimjolopez-pathway/pathway-tokens 11.0.0 → 11.2.0

package/components/sidenav/sidenav.jsx

@@ -1,5 +1,5 @@
 /**
- * SideNav — Pathway Design System
+ * SideNav, Pathway Design System
  *
  * Importable React component module. Source of truth for the SideNav
  * implementation; the standalone demo (sidenav.html) and the Storybook
@@ -13,7 +13,9 @@
  * drift, and wait. Do not resolve it by fetching Figma. See CLAUDE.md 1.1.
  *
  * Spec: components/sidenav/sidenav-spec.md
- * Figma: https://www.figma.com/design/3sw45aVcngFAmpbP6cfrXP/?node-id=40003951-2927
+ * Figma: https://www.figma.com/design/3sw45aVcngFAmpbP6cfrXP/?node-id=40004059-1375
+ *        SideNav.Container, a COMPONENT_SET. The id cited here until
+ *        2026-10-07, 40003951-2927, does not exist in the file.
  */
 
 import React, { useState, useRef } from "react";
@@ -32,7 +34,7 @@ import ReactDOM from "react-dom";
  * one theme into the bundle, so Midnight Mode could not work at all in the coded
  * component no matter what the consumer did. `t()` also returns the token id
  * unchanged when it cannot resolve a name, which emits invalid CSS that the
- * browser silently drops — so a renamed token failed as a colour that quietly
+ * browser silently drops: so a renamed token failed as a colour that quietly
  * reverted to inherited, with no error anywhere.
  *
  * Referencing the custom property instead means the cascade resolves the value,
@@ -136,12 +138,16 @@ export const L = {
   menuPadT:    u("padding-tight"),
   menuPadB:    u("padding-xxwide"),
   itemH:       u("accessibility-touch-target-aa-height"),
-  iconWrap:    24,   // no token in Figma — leading icon wrapper
+  iconWrap:    24,   // no token in Figma, leading icon wrapper
   iconInner:   16,   // Material Symbols Rounded frame size, per design-system-spec §7.2
   rowPadH:     u("padding-tight"),
+  // Collapsed rail: container.rowStart's padding-right in Figma. It is what
+  // keeps the centred icon a hair left of the square's true centre, the same as
+  // the design.
+  railIconInset: u("padding-xxtight"),
   textPad:     u("padding-xtight"),
-  childIndent: 24,   // no token in Figma — level-1 left indent
-  stripeW:     4,    // no token in Figma — indicator stripe width
+  childIndent: 24,   // no token in Figma, level-1 left indent
+  stripeW:     4,    // no token in Figma, indicator stripe width
   colPadL:     u("padding-medium"),
   colPadR:     u("padding-tight"),
   collapseGap: u("padding-xxtight"),
@@ -234,23 +240,46 @@ export function SideNavItem({
           width: isSidebarCollapsed ? L.itemH : "100%",
           marginLeft: isSidebarCollapsed ? "auto" : undefined,
           marginRight: isSidebarCollapsed ? "auto" : undefined,
+          // Figma's container.rowStart is 40 wide inside the 44 square with
+          // padding-right 6 and primary=CENTER, so the icon centres in the 34
+          // that is left after the 4px indicator column. See the icon wrap below.
+          paddingRight: isSidebarCollapsed ? L.railIconInset : undefined,
+          // border-box or the 6px padding is ADDED to the 44, which made the rail
+          // item 50 wide and no longer a square.
+          boxSizing: "border-box",
           borderRadius: T.radius, backgroundColor: fillBg,
           cursor: isDisabled ? "not-allowed" : "pointer",
           overflow: "hidden", transition: "background-color var(--motion-duration-3) var(--motion-easing-standard)", userSelect: "none" }}>
 
         <IndicatorStripe visible={showStripe} />
 
-        {/* Leading icon — Level 0 only */}
+        {/* Leading icon, Level 0 only */}
         {!isChild && item.icon && (
           <div style={{ width: L.iconWrap, height: L.iconWrap, display: "flex",
             alignItems: "center", justifyContent: "center", flexShrink: 0,
-            marginLeft: L.rowPadH, color: iconColor }}>
+            // COLLAPSED CENTRES, EXPANDED INDENTS. The fixed 12px left margin
+            // applied in both states, so on the rail the 24px icon sat at
+            // x 16..40 of the 44 square: 6px right of centre, in every state.
+            // Reported 2026-10-02. Auto margins hand the free space back to
+            // both sides, which with the 6px right padding above reproduces
+            // Figma's x=9 exactly.
+            marginLeft:  isSidebarCollapsed ? "auto" : L.rowPadH,
+            marginRight: isSidebarCollapsed ? "auto" : undefined,
+            color: iconColor }}>
             {typeof item.icon === "function"
               ? item.icon({ size: L.iconInner, color: iconColor })
               : typeof item.icon === "string"
               ? <span className="material-symbols-rounded" aria-hidden="true"
                   style={{ fontSize: L.iconInner, lineHeight: 1, color: iconColor,
-                    fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20" }}>
+                    // display:block so the glyph is laid out as a box rather than
+                    // on a text baseline: an inline glyph in a flex-centred
+                    // parent is centred by its line box, not by its own art, so
+                    // it rode high inside the 24px wrap.
+                    display: "block",
+                    // opsz MUST match fontSize. It said 20 against a 16px size,
+                    // so the glyph was drawn on a 20px grid and scaled down into
+                    // a 16px box, which shifts the art off centre.
+                    fontVariationSettings: `'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' ${L.iconInner}` }}>
                   {item.icon}
                 </span>
               : React.cloneElement(item.icon, { style: { color: iconColor } })}
@@ -258,9 +287,19 @@ export function SideNavItem({
         )}
 
         {/* Label */}
-        <div style={{ flex: 1, minWidth: 0,
-          paddingLeft: isChild ? 32 : L.textPad,
-          paddingRight: (!isChild && hasChildren) ? 0 : L.rowPadH,
+        <div style={{
+          // Collapsed, the label must take NO part in the flex distribution.
+          // With flex:1 it still claimed the free space even though max-width
+          // clamped it to zero, so the icon's auto margins had nothing left to
+          // centre with and the icon stayed hard left.
+          flex: isSidebarCollapsed ? "0 0 0px" : 1,
+          minWidth: 0,
+          // Collapsed, the padding has to go too. max-width clamps the CONTENT
+          // box, so the label still occupied 8px of padding on the rail and ate
+          // most of the free space the icon's auto margins needed: the icon
+          // landed at x=5 instead of Figma's x=9.
+          paddingLeft:  isSidebarCollapsed ? 0 : (isChild ? 32 : L.textPad),
+          paddingRight: isSidebarCollapsed ? 0 : ((!isChild && hasChildren) ? 0 : L.rowPadH),
           maxWidth: isSidebarCollapsed ? 0 : 200,
           opacity: isSidebarCollapsed ? 0 : 1,
           overflow: "hidden",
@@ -274,15 +313,22 @@ export function SideNavItem({
           </p>
         </div>
 
-        {/* Chevron — groupers only */}
-        {!isChild && hasChildren && (
-          <div style={{ width: 40, height: L.iconWrap, display: "flex",
+        {/* Chevron, groupers only, and EXPANDED ONLY.
+            Figma's SideNavItem.Collapsed is indicator + Container.LeadingIcon
+            and nothing else: there is no chevron in the rail. Giving it
+            width 0 and max-width 0 was not enough, because the glyph still
+            painted outside its collapsed box, so the rail showed a second
+            column of 10px chevrons 17px to the right of the icons. Measured
+            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: isSidebarCollapsed ? 0 : 40, height: L.iconWrap, display: "flex",
             alignItems: "center", justifyContent: "center", flexShrink: 0,
             maxWidth: isSidebarCollapsed ? 0 : 40,
             opacity: isSidebarCollapsed ? 0 : 1,
             overflow: "hidden",
             transition: "max-width var(--motion-duration-6) var(--motion-easing-emphasized), opacity var(--motion-duration-3) var(--motion-easing-standard)" }}>
-            {/* Chevron rotation matches accordion timing — --motion-duration-5 + --motion-easing-accordion */}
+            {/* Chevron rotation matches accordion timing, --motion-duration-5 + --motion-easing-accordion */}
             <div style={{ transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
               transition: "transform var(--motion-duration-5) var(--motion-easing-accordion)" }}>
               {chevronDown ? chevronDown({ size: 10, color: iconColor }) : <ChevDown size={10} color={iconColor} />}
@@ -348,7 +394,7 @@ export function SideNavTooltip({ label, anchorRect, onMouseEnter, onMouseLeave }
 }
 
 // ─── SectionLabel ─────────────────────────────────────────────────────────────
-// Figma node 40006794-5977 — building block used in CollapsedPopover headers.
+// Figma node 40006794-5977, building block used in CollapsedPopover headers.
 // Tokens: Foreground/Static/Neutral/Base (#313131), Label/Section/Small/Semibold
 //         (11px / 600 / 16px / 0.6px letter-spacing, uppercase)
 // Padding: Padding/Tight (12px left), Padding/XTight (8px vertical)
@@ -377,7 +423,7 @@ export function CollapsedPopover({ item, onClick, anchorRect, onMouseEnter, onMo
         boxShadow: c2("--elevation-widget"),
         padding: "var(--semantic-layout-units-padding-xxtight)", minWidth: 200, pointerEvents: "auto",
         animation: "popoverIn var(--motion-duration-3) var(--motion-easing-spring) forwards" }}>
-      {/* Section label — Figma component 40006794-5977 */}
+      {/* Section label, Figma component 40006794-5977 */}
       <div style={{ borderBottom: `0.5px solid ${c("stroke-static-neutral-faint")}` }}>
         <SectionLabel label={item.label} />
       </div>
@@ -416,11 +462,11 @@ export function PopoverRow({ item, onClick, activeId }) {
 // ─── 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
-// (#6b6b6b) — different from nav item icons. SVG assets fetched from Figma directly.
+// (#6b6b6b), different from nav item icons. SVG assets fetched from Figma directly.
 export function CollapseButton({ isSidebarCollapsed, onToggle, collapseIcon, expandIcon }) {
   const [h, setH] = useState(false);
   const labelColor = h ? T.text.navHover : T.text.navBase;
-  const actionIconColor = T.icon.actionSecondary; // var(--semantic-color-stroke-action-field-hover) — always static, no hover change
+  const actionIconColor = T.icon.actionSecondary; // var(--semantic-color-stroke-action-field-hover), always static, no hover change
   return (
     <div style={{ width: "100%" }}>
       <div style={{ height: 1, backgroundColor: T.fill.infoSubtle, marginBottom: L.collapseGap }} />
@@ -432,10 +478,10 @@ export function CollapseButton({ isSidebarCollapsed, onToggle, collapseIcon, exp
           borderRadius: T.radius, backgroundColor: h ? T.fill.navHover : T.fill.navBase,
           cursor: "pointer", transition: "background-color var(--motion-duration-3) var(--motion-easing-standard)", overflow: "hidden" }}>
 
-        {/* Slot.RowStart — 4px stripe column (structural, always present) */}
+        {/* Slot.RowStart, 4px stripe column (structural, always present) */}
         <div style={{ width: L.stripeW, alignSelf: "stretch", flexShrink: 0 }} />
 
-        {/* Container.Main — label (hidden when collapsed) */}
+        {/* Container.Main, label (hidden when collapsed) */}
         <div style={{ flex: 1, paddingLeft: L.rowPadH,
           maxWidth: isSidebarCollapsed ? 0 : 200,
           opacity: isSidebarCollapsed ? 0 : 1,
@@ -449,7 +495,7 @@ export function CollapseButton({ isSidebarCollapsed, onToggle, collapseIcon, exp
           </span>
         </div>
 
-        {/* Slot.RowEnd — Action Icon (right_panel_open / left_panel_open from Figma) */}
+        {/* Slot.RowEnd, Action Icon (right_panel_open / left_panel_open from Figma) */}
         <div style={{ width: 40, height: L.iconWrap, display: "flex",
           alignItems: "center", justifyContent: "center", flexShrink: 0,
           marginLeft: isSidebarCollapsed ? "auto" : 0,
@@ -472,15 +518,15 @@ export function CollapseButton({ isSidebarCollapsed, onToggle, collapseIcon, exp
 // Optional in-nav section heading. Figma: SideNav.SectionLabel (node 40006794:5975).
 // Tokens: Label/Section/Small/Semibold (11px/600/16px/0.6px), Foreground/Static/Neutral/Base (#606060)
 // Container: h-[40px], pl-[4px], pr-[4px], py-[8px]
-// In collapsed rail: hidden — replaced by a Divider (rendered by SideNav itself, see §2.3)
+// In collapsed rail: hidden, replaced by a Divider (rendered by SideNav itself, see §2.3)
 // ── NavHeader ────────────────────────────────────────────────────────────────
 // Sits at the TOP of the SideNav. 48px row with the expand/collapse action icon
 // in Slot.RowEnd (expanded) or centered (collapsed). Divider below.
 // Matches Figma "Slot.NavHeader" (node 40007331:7794).
-// Hidden on mobile (<768px) — TopNav hamburger is the sole toggle there.
+// Hidden on mobile (<768px), TopNav hamburger is the sole toggle there.
 export function NavHeader({ isSidebarCollapsed, onToggle, collapseIcon, expandIcon }) {
   const [h, setH] = useState(false);
-  const actionIconColor = T.icon.actionSecondary; // var(--semantic-color-stroke-action-field-hover) — always static
+  const actionIconColor = T.icon.actionSecondary; // var(--semantic-color-stroke-action-field-hover), always static
   return (
     <div style={{ width: "100%", flexShrink: 0 }}>
       <div onClick={onToggle} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
@@ -510,7 +556,7 @@ export function NavHeader({ isSidebarCollapsed, onToggle, collapseIcon, expandIc
           </div>
         )}
       </div>
-      {/* Divider — Stroke/Static/Neutral/Base, py-[2px] in Figma */}
+      {/* Divider, Stroke/Static/Neutral/Base, py-[2px] in Figma */}
       <div style={{ padding: "2px 0" }}>
         <div style={{ height: 1, backgroundColor: T.fill.infoSubtle }} />
       </div>
@@ -534,7 +580,7 @@ export function NavSectionLabel({ label }) {
 }
 
 // ── BulletDot ────────────────────────────────────────────────────────────────
-// 6px filled circle — leading icon for SideNavListSection's ListItem.
+// 6px filled circle, leading icon for SideNavListSection's ListItem.
 // Color cycles Base / Hover / Active just like SideNavItem icons.
 export function BulletDot({ color }) {
   return (
@@ -581,7 +627,7 @@ export function ListItem({ item, isActive, onClick }) {
 
 // ── SideNavListSection ───────────────────────────────────────────────────────
 // Figma: SideNav.ListSection (node 40007332:8034). A labelled grouping of flat
-// nav items — no icons, no children, no expand/collapse. Used for contextual
+// nav items: no icons, no children, no expand/collapse. Used for contextual
 // link lists (Recent Content, Pinned, Bookmarks). Only shown in expanded sidebar.
 export function SideNavListSection({ label, items, activeId, onNavigate }) {
   return (
@@ -690,7 +736,7 @@ export function SideNav({
           anchorRect={popoverId === item.id ? popoverRect : null}
           onPopoverEnter={onPopoverEnter} onPopoverLeave={onPopoverLeave}
           activeId={activeId} />
-        {/* Level 1 children — animated accordion. grid-template-rows 0fr→1fr at
+        {/* Level 1 children, animated accordion. grid-template-rows 0fr→1fr at
             --motion-duration-5 + --motion-easing-accordion, with inner wrapper opacity
             fade --motion-duration-4 (70ms delay on expand, no delay on collapse). */}
         {hasChildren && !collapsed && (
@@ -730,12 +776,12 @@ export function SideNav({
       paddingLeft:  collapsed ? L.navColPadH : L.navPadH,
       paddingRight: collapsed ? L.navColPadH : L.navPadH,
       boxSizing: "border-box", flexShrink: 0,
-      // Smooth-spring curve — soft personality, no overshoot.
+      // Smooth-spring curve, soft personality, no overshoot.
       transition: "width var(--motion-duration-6) var(--motion-easing-emphasized)",
       borderRight: `0.5px solid ${T.fill.infoSubtle}`,
       overflow: "hidden",   // the inner menu scrolls; the nav itself does not
     }}>
-      {/* NavHeader — TOP of nav, PINNED (flexShrink:0) so it stays visible while the
+      {/* NavHeader, TOP of nav, PINNED (flexShrink:0) so it stays visible while the
           item list scrolls beneath it. Hidden on mobile (<768px). */}
       {(!hideCollapseButton || headerEnd) && (
         <div style={{ flexShrink: 0 }}>
@@ -765,7 +811,7 @@ export function SideNav({
         </div>
       )}
 
-      {/* SideNavMenu — the ONLY scroll region, wrapped in <Scrollable> so the custom
+      {/* SideNavMenu: the ONLY scroll region, wrapped in <Scrollable> so the custom
           overlay scrollbar (identical on every OS, never affects layout/padding) handles
           overflow. flex:1 + minHeight:0 lets it shrink below content height; the pinned
           header above never moves. Applies in BOTH expanded (240px) and collapsed (72px) states. */}
@@ -773,7 +819,7 @@ export function SideNav({
         style={{ flex: 1, minHeight: 0,
           // Bleed the scroll region out to the nav's TRUE right edge so the overlay thumb
           // hugs the edge in BOTH states (the nav's border-box paddingRight would otherwise
-          // inset the thumb by 16px expanded / 12px on the 72px rail — badly off on the rail).
+          // 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) }}
@@ -781,11 +827,11 @@ export function SideNav({
           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.)
+          // never on the wrapper, keeps the thumb flush on any scroll surface.)
           paddingRight: collapsed ? L.navColPadH : L.navPadH }}
       >
 
-        {/* Sectioned render — when `sections` prop is provided */}
+        {/* Sectioned render: when `sections` prop is provided */}
         {sections && sections.map(({ section, items: secItems }, sIdx) => (
           <div key={section} style={{ display: "flex", flexDirection: "column",
             gap: L.menuGap, flexShrink: 0 }}>
@@ -809,10 +855,10 @@ export function SideNav({
           </div>
         ))}
 
-        {/* Flat render — when only `items` is provided (backward compatibility) */}
+        {/* Flat render: when only `items` is provided (backward compatibility) */}
         {!sections && (items || []).map(renderItem)}
 
-        {/* SideNavListSection — optional. Hidden in collapsed rail. */}
+        {/* SideNavListSection, optional. Hidden in collapsed rail. */}
         {listSection && (
           <div style={{ opacity: collapsed ? 0 : 1,
             maxHeight: collapsed ? 0 : 400, overflow: "hidden",
@@ -822,16 +868,16 @@ export function SideNav({
           </div>
         )}
 
-        {/* Body slot — scrolls with the item list, so it sits INSIDE
+        {/* Body slot, scrolls with the item list, so it sits INSIDE
             Scrollable and above the spacer. Use this for content that belongs
             with the items; use `footer` for anything that must stay visible. */}
         {children && <div style={{ flexShrink: 0 }}>{children}</div>}
 
-        {/* Bottom spacer — fills remaining height */}
+        {/* Bottom spacer, fills remaining height */}
         <div style={{ flex: 1, minHeight: L.menuPadB }} />
       </Scrollable>
 
-      {/* Footer slot — OUTSIDE Scrollable and flexShrink:0, so it is pinned to
+      {/* Footer slot, OUTSIDE Scrollable and flexShrink:0, so it is pinned to
           the bottom of the nav and stays put while the list scrolls. The
           divider only appears when the slot has content, so a nav without a
           footer is unchanged. Padding drops to the rail's narrower inset when
@@ -869,7 +915,7 @@ function ChevUp({ size = 10, color }) {
 
 // ─── Collapse / Expand action icons (fetched from Figma 2026-05-12) ──────────
 //
-// PINNED 2026-09-07 — DO NOT RE-SYNC THESE TWO FROM FIGMA.
+// PINNED 2026-09-07: DO NOT RE-SYNC THESE TWO FROM FIGMA.
 //
 // The Figma SideBar Expand/Collapse component was changed after this date to a
 // different icon. Jo has explicitly rejected that change for the repo, for
@@ -882,7 +928,7 @@ function ChevUp({ size = 10, color }) {
 // by pulling Figma, and do not silently re-fetch node 40006793:3783. Ask first
 // if you think it should change.
 // ─────────────────────────────────────────────────────────────────────────────
-// right_panel_open — used on the collapse button when sidebar is EXPANDED (click to collapse)
+// right_panel_open, used on the collapse button when sidebar is EXPANDED (click to collapse)
 // Token: Foreground/Action/Secondary/Rest (#6b6b6b)
 // Figma component: SideBar Expand/Collapse, Type=Collapse, node 40006793:3783
 function RightPanelOpenIcon({ size = 12, color = T.icon.actionSecondary }) {
@@ -893,7 +939,7 @@ function RightPanelOpenIcon({ size = 12, color = T.icon.actionSecondary }) {
   );
 }
 
-// left_panel_open — used on the collapse button when sidebar is COLLAPSED (click to expand)
+// left_panel_open, used on the collapse button when sidebar is COLLAPSED (click to expand)
 // Token: Foreground/Action/Secondary/Rest (#6b6b6b)
 // Figma component: SideBar Expand/Collapse, Type=Expand, node 40006793:3783
 function LeftPanelOpenIcon({ size = 12, color = T.icon.actionSecondary }) {

package/dist/README.md

@@ -2,7 +2,7 @@
 
 **The colour contract is 210 names.** Your full working vocabulary is
 **360**. If you add up every declaration in this folder you get
-1152. That number is not the contract, and the table below says why.
+1155. That number is not the contract, and the table below says why.
 
 ## Link these, in this order
 
@@ -30,7 +30,7 @@ error**.
 | `themes/midnight.css` | 210 | yes | yes | Colour contract, Midnight Mode. Same names as light. |
 | `type.css` | 39 | yes | yes | Type scale. Compose from these. |
 | `layout.css` | 76 | yes | yes | Spacing, radii, border widths. |
-| `layout-contextual.css` | 34 | **no** | **no** | Per-component metrics. This repo's components use these. |
+| `layout-contextual.css` | 37 | **no** | **no** | Per-component metrics. This repo's components use these. |
 | `motion.css` | 21 | yes | yes | Durations and easings. |
 | `layout-responsive.css` | 9 | yes | yes | Sheet and TopNav padding. The only layout tokens with media queries. |
 | `breakpoints.css` | 5 | yes | yes | Breakpoint values. |

package/dist/brands/newco/index.css

@@ -1,7 +1,7 @@
 /*
- NewCo brand layer — single entry point. Load AFTER the Pathway index and set data-brand="newco".
+ NewCo brand layer, single entry point. Load AFTER the Pathway index and set data-brand="newco".
  @imports every token file in load order (primitives first, so the themes that
- reference it resolve). Generated — do not edit. Run `npm run build-dist`.
+ reference it resolve). Generated: do not edit. Run `npm run build-dist`.
 */
 @import "./primitives.css";
 @import "./themes/light.css";

package/dist/brands/newco/layout-contextual.css

@@ -1,5 +1,5 @@
 /**
- * contextual-layout-units — one name per token, breakpoint resolved by media query.
+ * contextual-layout-units: one name per token, breakpoint resolved by media query.
  * Generated by style-dictionary.config.js. Do not edit.
  *
  * [data-brand="newco"] is the desktop value. Narrower breakpoints override only what differs.
@@ -39,4 +39,7 @@
   --contextual-layout-units-sidenav-width-collapsed: 84px;
   --contextual-layout-units-sidenav-width-expanded: 256px;
   --contextual-layout-units-topnav-height: 60px;
+  --contextual-layout-units-widget-minwidth-detail: 0px;
+  --contextual-layout-units-widget-minwidth-explore: 0px;
+  --contextual-layout-units-widget-minwidth-glance: 0px;
 }

package/dist/brands/newco/tokens.js

@@ -373,6 +373,39 @@ const tokens = {
       "height"
     ]
   },
+  "contextual-layout-units-widget-minwidth-detail": {
+    "value": 0,
+    "type": "number",
+    "path": [
+      "contextual-layout-units",
+      "newco",
+      "widget",
+      "minwidth",
+      "detail"
+    ]
+  },
+  "contextual-layout-units-widget-minwidth-explore": {
+    "value": 0,
+    "type": "number",
+    "path": [
+      "contextual-layout-units",
+      "newco",
+      "widget",
+      "minwidth",
+      "explore"
+    ]
+  },
+  "contextual-layout-units-widget-minwidth-glance": {
+    "value": 0,
+    "type": "number",
+    "path": [
+      "contextual-layout-units",
+      "newco",
+      "widget",
+      "minwidth",
+      "glance"
+    ]
+  },
   "primitive-color-amethyst-0": {
     "value": "#faf9fc",
     "type": "color",
@@ -4214,7 +4247,7 @@ const tokens = {
     ]
   },
   "primitive-color-seabreeze-300-70": {
-    "value": "#8598d7b2",
+    "value": "#8598d7b3",
     "type": "color",
     "path": [
       "primitive-color",

package/dist/breakpoints.css

@@ -1,12 +1,12 @@
 /*
  ==========================================================================
- PATHWAY DESIGN TOKENS — CONTRACT
+ PATHWAY DESIGN TOKENS, CONTRACT
  ==========================================================================
 
  The breakpoint values. Name these freely.
 
  Declares 5 custom properties.
- Generated — do not edit. Run `npm run build-tokens`.
+ Generated: do not edit. Run `npm run build-tokens`.
  ==========================================================================
 */
 :root {

package/dist/contract.json

@@ -1,11 +1,11 @@
 {
   "$comment": "The names a consumer may use. Generated from the emitted CSS by scripts/build-contract.js, do not hand-edit. Lint against `contract` if you want the boundary enforced; nothing here blocks a primitive.",
-  "version": "11.0.0",
-  "generated": "2026-10-02",
+  "version": "11.2.0",
+  "generated": "2026-10-13",
   "counts": {
     "contract": 360,
-    "infrastructure": 582,
-    "declarationsAcrossAllFiles": 1152
+    "infrastructure": 585,
+    "declarationsAcrossAllFiles": 1155
   },
   "loadOrder": [
     "primitives.css",
@@ -51,7 +51,7 @@
     "layout-contextual.css": {
       "contract": false,
       "mustLoad": false,
-      "count": 34,
+      "count": 37,
       "role": "Per-component metrics. This repo's components use these."
     },
     "motion.css": {

package/dist/index.css

@@ -1,7 +1,7 @@
 /*
- Pathway design tokens — single entry point.
+ Pathway design tokens, single entry point.
  @imports every token file in load order (primitives first, so the themes that
- reference it resolve). Generated — do not edit. Run `npm run build-dist`.
+ reference it resolve). Generated: do not edit. Run `npm run build-dist`.
 */
 @import "./primitives.css";
 @import "./themes/light.css";

package/dist/layout-contextual.css

@@ -1,16 +1,16 @@
 /*
  ==========================================================================
- PATHWAY DESIGN TOKENS — COMPONENT INTERNALS
+ PATHWAY DESIGN TOKENS, COMPONENT INTERNALS
  ==========================================================================
 
  Per-component metrics (Button, Card, NavItem, Page, focus ring).
 
- This repo's own components use these. Product code generally should not —
+ This repo's own components use these. Product code generally should not 
  prefer layout.css, which is the general spacing contract. These exist so a
  component's geometry can be tuned without moving the whole scale.
 
- Declares 34 custom properties.
- Generated — do not edit. Run `npm run build-tokens`.
+ Declares 37 custom properties.
+ Generated: do not edit. Run `npm run build-tokens`.
  ==========================================================================
 */
 :root {
@@ -48,4 +48,7 @@
   --contextual-layout-units-sidenav-width-collapsed: 84px;
   --contextual-layout-units-sidenav-width-expanded: 256px;
   --contextual-layout-units-topnav-height: 60px;
+  --contextual-layout-units-widget-minwidth-detail: 515px;
+  --contextual-layout-units-widget-minwidth-explore: 1050px;
+  --contextual-layout-units-widget-minwidth-glance: 275px;
 }

package/dist/layout-responsive.css

@@ -1,6 +1,6 @@
 /*
  ==========================================================================
- PATHWAY DESIGN TOKENS — CONTRACT
+ PATHWAY DESIGN TOKENS, CONTRACT
  ==========================================================================
 
  The only layout tokens that change by breakpoint. Name these freely.
@@ -15,7 +15,7 @@
  columns; it says nothing about the chrome's padding.
 
  Declares 23 custom properties.
- Generated — do not edit. Run `npm run build-tokens`.
+ Generated: do not edit. Run `npm run build-tokens`.
  ==========================================================================
 */
 :root {

package/dist/layout.css

@@ -1,11 +1,11 @@
 /*
  ==========================================================================
- PATHWAY DESIGN TOKENS — CONTRACT
+ PATHWAY DESIGN TOKENS, CONTRACT
  ==========================================================================
 
  Spacing, radii and border widths. Name these freely.
 
- Values already carry their unit, so use them directly — do NOT wrap in
+ Values already carry their unit, so use them directly: do NOT wrap in
  calc(... * 1px). That produces calc(4px * 1px), which is not a length, so
  the browser silently drops the declaration.
 
@@ -13,7 +13,7 @@
  putting the breakpoint in the property name, so one name works responsively.
 
  Declares 76 custom properties.
- Generated — do not edit. Run `npm run build-tokens`.
+ Generated: do not edit. Run `npm run build-tokens`.
  ==========================================================================
 */
 :root {

package/dist/motion.css

@@ -1,11 +1,11 @@
 /*
  ==========================================================================
- PATHWAY DESIGN TOKENS — CONTRACT
+ PATHWAY DESIGN TOKENS, CONTRACT
  ==========================================================================
 
  Durations and easings. Name these freely.
 
- These are NOT in the Figma Variables panel — the panel has zero motion
+ These are NOT in the Figma Variables panel: the panel has zero motion
  variables. Their source of truth is docs/design-system-spec.md §2, and
  scripts/sync-motion-tokens.js generates this file from it.
 
@@ -13,12 +13,12 @@
  alone gets no motion at all, and no warning. Consume the package.
 
  Declares 21 custom properties.
- Generated — do not edit. Run `npm run build-tokens`.
+ Generated: do not edit. Run `npm run build-tokens`.
  ==========================================================================
 */
 :root {
   --motion-duration-1: 100ms; /** Instant tap feedback, tiny opacity flickers */
-  --motion-duration-2: 150ms; /** Hover fills, small opacity fades, colour transitions — the most common micro-interaction timing */
+  --motion-duration-2: 150ms; /** Hover fills, small opacity fades, colour transitions: the most common micro-interaction timing */
   --motion-duration-3: 200ms; /** Micro-interactions needing slightly more presence; small reveals, focus rings */
   --motion-duration-4: 300ms; /** Chevron / disclosure rotation, dropdown & popover content, in-component state */
   --motion-duration-5: 380ms; /** Panel state changes: accordions, expand/collapse, item enter/exit */
@@ -26,16 +26,16 @@
   --motion-duration-7: 680ms; /** Cross-component transitions: page content sliding, large layout shifts */
   --motion-duration-8: 1100ms; /** Slowest transition step: very large layout shifts, deliberate full-screen moves */
   --motion-duration-loop: 1000ms; /** Standard continuous-loop period (standalone Spinner, skeleton shimmer) */
-  --motion-duration-loop-fast: 750ms; /** Tighter loop for embedded/inline contexts (in-button spinner — faster reads as more responsive feedback) */
+  --motion-duration-loop-fast: 750ms; /** Tighter loop for embedded/inline contexts (in-button spinner, faster reads as more responsive feedback) */
   --motion-easing-breath: cubic-bezier(0.37, 0, 0.63, 1);
   --motion-easing-burst: cubic-bezier(0.30, 0, 0.5, 1.18);
-  --motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); /** Enters where the element should glide in smoothly — overlay panels, popovers, anything appearing from outside. Pure ease-out, no bounce. */
+  --motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); /** Enters where the element should glide in smoothly: overlay panels, popovers, anything appearing from outside. Pure ease-out, no bounce. */
   --motion-easing-emphasized: cubic-bezier(0.32, 0.72, 0, 1); /** Large physical-scale transitions: full-panel width changes, SideNav width. Smooth glide, no overshoot. */
   --motion-easing-inout: cubic-bezier(0.62, 0.02, 0.23, 1);
-  --motion-easing-spring: cubic-bezier(0.34, 1.04, 0.64, 1); /** Signature Pathway curve. Interactive element entrances: dropdown/popover panel opens. A whisper of overshoot (y2=1.04) — easeful, only *ever so slightly* alive. Softened 2026-06-08 from 1.08, which read as too bouncy. Not for chevrons — see chevron rule below. */
+  --motion-easing-spring: cubic-bezier(0.34, 1.04, 0.64, 1); /** Signature Pathway curve. Interactive element entrances: dropdown/popover panel opens. A whisper of overshoot (y2=1.04), easeful, only *ever so slightly* alive. Softened 2026-06-08 from 1.08, which read as too bouncy. Not for chevrons, see chevron rule below. */
   --motion-easing-spring-soft: cubic-bezier(0.30, 1.05, 0.40, 1);
-  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /** Most transitions — enters AND exits. Smooth, no overshoot. Default for colour, fill, opacity, focus rings. */
-  --motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /** Exits where the element leaves cleanly — dismissing overlays, scaling down. */
-  --motion-easing-accordion: cubic-bezier(0.33, 1.03, 0.68, 1); /** Accordion settle — content reveal/hide, chevron rotation. The gentlest overshoot in the system (y2=1.03). Softened 2026-06-08 from 0.22,1.12,0.36,1, which was visibly bouncy. */
+  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /** Most transitions, enters AND exits. Smooth, no overshoot. Default for colour, fill, opacity, focus rings. */
+  --motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /** Exits where the element leaves cleanly, dismissing overlays, scaling down. */
+  --motion-easing-accordion: cubic-bezier(0.33, 1.03, 0.68, 1); /** Accordion settle, content reveal/hide, chevron rotation. The gentlest overshoot in the system (y2=1.03). Softened 2026-06-08 from 0.22,1.12,0.36,1, which was visibly bouncy. */
   --motion-easing-linear: cubic-bezier(0, 0, 1, 1); /** Continuous loops only (spinners, shimmer). Never for bounded transitions. */
 }