@helloimjolopez-pathway/pathway-components 0.4.0 → 0.6.0

package/components/toggle-button/toggle-button-demo.jsx

@@ -0,0 +1,193 @@
+/**
+ * Toggle Button's standalone demo. Imports the real module, so there is nothing
+ * here that can fall out of step with the shipped component: see
+ * components/_demo/harness.jsx for why the newer demos are generated.
+ */
+import React, { useState } from "react";
+import { DemoChrome, mount } from "../_demo/harness.jsx";
+import { ToggleButton, ToggleButtonOption, SIZES } from "./toggle-button.jsx";
+import { Widget } from "../widget/widget.jsx";
+import { TooltipProvider } from "../tooltip/tooltip.jsx";
+
+const U = (n) => `var(--semantic-layout-units-${n})`;
+const C = (n) => `var(--semantic-color-${n})`;
+const Y = (n) => `var(--semantic-type-${n})`;
+
+const STYLES = ["Primary", "Secondary", "Tertiary"];
+const SIZE_KEYS = Object.keys(SIZES);
+
+const VIEW = [
+  { value: "bar", label: "Bar", icon: "bar_chart" },
+  { value: "line", label: "Line", icon: "show_chart" },
+  { value: "table", label: "Table", icon: "table_rows" },
+];
+const MONTHLY = "Budgets are set by month.";
+const PERIOD = [
+  { value: "d", label: "D", disabled: true, reason: `Daily totals aren't available. ${MONTHLY}` },
+  { value: "w", label: "W", disabled: true, reason: `Weekly totals aren't available. ${MONTHLY}` },
+  { value: "m", label: "M" },
+  { value: "p", label: "P" },
+  { value: "q", label: "Q" },
+  { value: "y", label: "Y" },
+];
+const RANGE = [
+  { value: "this", label: "This fiscal year" },
+  { value: "last", label: "Last fiscal year" },
+  { value: "ytd", label: "Year to date" },
+  { value: "quarter", label: "This quarter" },
+];
+
+const card = {
+  background: C("fill-surface-elevated"), border: `1px solid ${C("stroke-static-neutral-base")}`,
+  borderRadius: U("cornerradius-large"), padding: U("padding-relaxed"),
+  display: "flex", flexDirection: "column", gap: U("gap-base"), minWidth: 0,
+};
+const h2 = { margin: 0, fontSize: Y("font-size-m"), lineHeight: Y("line-height-m-single"), fontWeight: Y("weight-semibold"), color: C("foreground-static-neutral-bold") };
+const small = { fontSize: Y("font-size-xs"), lineHeight: Y("line-height-xs-single"), color: C("foreground-static-neutral-subtle") };
+
+/* A chart placeholder: bars whose heights change with the view, so a choice is
+   visible straight away, which is the job the toggle does. */
+function Chart({ view }) {
+  const data = [62, 44, 30, 28, 46, 80, 58, 64, 40, 54, 70, 70];
+  if (view === "table") {
+    return (
+      <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: U("gap-xtight"), ...small }}>
+        {["Jan", "Feb", "Mar", "Apr", "May", "Jun"].map((m, i) => (
+          <React.Fragment key={m}><span>{m}</span><span style={{ color: C("foreground-static-neutral-base") }}>${(data[i] * 31).toLocaleString()}</span></React.Fragment>
+        ))}
+      </div>
+    );
+  }
+  return (
+    <div style={{ display: "flex", alignItems: "flex-end", gap: U("gap-xtight"), height: 140 }}>
+      {data.map((v, i) => (
+        <div key={i} style={{ flex: 1, height: `${v}%`, background: C("fill-chart-sequential-07"),
+          borderRadius: view === "line" ? U("cornerradius-full") : U("cornerradius-small"),
+          maxHeight: view === "line" ? 6 : undefined, alignSelf: view === "line" ? "auto" : undefined,
+          marginBottom: view === "line" ? `${v - 6}%` : 0 }} />
+      ))}
+    </div>
+  );
+}
+
+function InWidget() {
+  const [view, setView] = useState("bar");
+  const [period, setPeriod] = useState("m");
+  const [bank, setBank] = useState("bar");
+  return (
+    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 360px), 1fr))", gap: U("gap-relaxed") }}>
+      <Widget title="Budget Compared to Actual" size="detail" inGrid={false}>
+        <div style={{ display: "flex", flexDirection: "column", gap: U("gap-base") }}>
+          <div style={{ display: "flex", justifyContent: "flex-end", minWidth: 0 }}>
+            <ToggleButton label="Chart view" options={VIEW} value={view} onChange={setView} showIcon />
+          </div>
+          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: U("gap-base"), minWidth: 0 }}>
+            <span style={{ fontSize: Y("font-size-xl"), lineHeight: Y("line-height-xl-single"), fontWeight: Y("weight-semibold"), color: C("foreground-static-neutral-strong") }}>2,000</span>
+            <ToggleButton label="Period" options={PERIOD} value={period} onChange={setPeriod} />
+          </div>
+          <Chart view={view} />
+        </div>
+      </Widget>
+      <Widget title="Bank Balances" size="detail" inGrid={false}>
+        <div style={{ display: "flex", flexDirection: "column", gap: U("gap-base") }}>
+          <div style={{ display: "flex", justifyContent: "flex-end" }}>
+            <ToggleButton label="Chart view" options={VIEW} value={bank} onChange={setBank} showIcon showLabel={false} />
+          </div>
+          <Chart view={bank} />
+        </div>
+      </Widget>
+    </div>
+  );
+}
+
+function Styles() {
+  const [v, setV] = useState({});
+  return (
+    <section style={card}>
+      <h2 style={h2}>Styles and sizes</h2>
+      <p style={{ ...small, margin: 0 }}>Primary for one page-level toggle per view. Secondary inside cards, widgets, dialogs and sheets. Tertiary where Secondary fits but the selection should carry brand colour.</p>
+      {STYLES.map((st) => (
+        <div key={st} style={{ display: "flex", flexDirection: "column", gap: U("gap-xtight") }}>
+          <div style={small}>{st}</div>
+          <div style={{ display: "flex", alignItems: "center", gap: U("gap-relaxed"), flexWrap: "wrap" }}>
+            {SIZE_KEYS.map((sz) => (
+              <ToggleButton key={sz} label={`${st} ${sz}`} toggleStyle={st} size={sz} options={VIEW} showIcon
+                value={v[st + sz] ?? "bar"} onChange={(x) => setV((o) => ({ ...o, [st + sz]: x }))} />
+            ))}
+          </div>
+        </div>
+      ))}
+      <div style={small}>Icon only</div>
+      <div style={{ display: "flex", alignItems: "center", gap: U("gap-relaxed"), flexWrap: "wrap" }}>
+        {SIZE_KEYS.map((sz) => (
+          <ToggleButton key={sz} label={`Icon only ${sz}`} size={sz} options={VIEW} showIcon showLabel={false}
+            value={v["i" + sz] ?? "bar"} onChange={(x) => setV((o) => ({ ...o, ["i" + sz]: x }))} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function States() {
+  const [st, setSt] = useState("Secondary");
+  const states = [null, "hover", "focused", "pressed"];
+  const names = ["Rest", "Hover", "Focused", "Pressed"];
+  return (
+    <section style={card}>
+      <h2 style={h2}>States</h2>
+      <ToggleButton label="Style" options={STYLES.map((s) => ({ value: s, label: s }))} value={st} onChange={setSt} size="XS" />
+      <div style={{ display: "grid", gridTemplateColumns: "auto repeat(5, max-content)", gap: `${U("gap-base")} ${U("gap-relaxed")}`, alignItems: "center", overflowX: "auto" }}>
+        <span />{[...names, "Unavailable"].map((n) => <span key={n} style={small}>{n}</span>)}
+        {[false, true].map((sel) => (
+          <React.Fragment key={String(sel)}>
+            <span style={small}>{sel ? "Selected" : "Unselected"}</span>
+            {states.map((s, i) => (
+              <ToggleButtonOption key={i} toggleStyle={st} size="M" selected={sel} position="Only" label="Option" icon="bar_chart" forceState={s} tabIndex={-1} />
+            ))}
+            {sel ? <span style={small}>never</span>
+              : <ToggleButtonOption toggleStyle={st} size="M" position="Only" label="Option" icon="bar_chart" disabled tabIndex={-1} />}
+          </React.Fragment>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function Narrow() {
+  const [w, setW] = useState(520);
+  const [period, setPeriod] = useState("m");
+  const [range, setRange] = useState("this");
+  return (
+    <section style={card}>
+      <h2 style={h2}>Narrow space</h2>
+      <p style={{ ...small, margin: 0 }}>Drag the slider. Unavailable options move into More first, then options from the end. The selected option always stays in the row.</p>
+      <label style={{ ...small, display: "flex", alignItems: "center", gap: U("gap-tight") }}>
+        Container width {w}px
+        <input type="range" min={120} max={640} value={w} onChange={(e) => setW(+e.target.value)} style={{ flex: 1, maxWidth: 320 }} />
+      </label>
+      <div style={{ width: w, maxWidth: "100%", padding: U("padding-xtight"), border: `1px dashed ${C("stroke-static-neutral-bold")}`, borderRadius: U("cornerradius-base"), display: "flex", flexDirection: "column", gap: U("gap-base") }}>
+        <ToggleButton label="Period" options={PERIOD} value={period} onChange={setPeriod} />
+        <ToggleButton label="Range" options={RANGE} value={range} onChange={setRange} size="M" />
+      </div>
+    </section>
+  );
+}
+
+function App() {
+  return (
+    <DemoChrome title="Toggle Button"
+      blurb={"Pick one of two to five options; one is always selected. Keyboard: Tab to the group, arrows move and select, " +
+             "Home and End jump. Hover, focus or tap an unavailable option to see why."}>
+      <TooltipProvider>
+        <div style={{ display: "flex", flexDirection: "column", gap: U("gap-relaxed") }}>
+          <InWidget />
+          <Narrow />
+          <Styles />
+          <States />
+        </div>
+      </TooltipProvider>
+    </DemoChrome>
+  );
+}
+
+mount(<App />);

package/components/toggle-button/toggle-button.jsx

@@ -0,0 +1,434 @@
+/**
+ * Toggle Button, Pathway Design System
+ *
+ * Importable React component module. Source of truth for the Toggle Button
+ * implementation; the standalone demo (toggle-button.html), the Storybook
+ * stories and the <pathway-toggle-button> web component all consume this.
+ *
+ * A row of two to five options where exactly one is selected at all times. It
+ * switches how nearby content is shown: a chart view, a period. To assistive
+ * technology it is a radio group.
+ *
+ * Spec:  components/toggle-button/toggle-button-spec.md
+ * Figma: https://www.figma.com/design/3sw45aVcngFAmpbP6cfrXP/?node-id=40018458-121921
+ */
+
+import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Tooltip } from "../tooltip/tooltip.jsx";
+import { Dropdown, DropdownItem } from "../dropdown/dropdown.jsx";
+import { Icon } from "../icon/icon.jsx";
+import { useReducedMotion } from "../_shared/use-reduced-motion.jsx";
+
+// ─── TOKEN HELPERS ────────────────────────────────────────────────────────────
+// SC = semantic-color (themes/*.css), SL = semantic-layout-units (layout.css),
+// CL = contextual-layout-units (layout-contextual.css), ST = semantic-type
+// (type.css), M = motion (motion.css). PU = primitive unit, used ONLY where no
+// semantic token fits (the half-height radius on XS, M and L, spec §3.4).
+const SC = (p) => `var(--semantic-color-${p})`;
+const SL = (p) => `var(--semantic-layout-units-${p})`;
+const CL = (p) => `var(--contextual-layout-units-${p})`;
+const ST = (p) => `var(--semantic-type-${p})`;
+const M = (p) => `var(--motion-${p})`;
+const PU = (n) => `var(--primitive-unit-unit-${n})`;
+
+const ramp = (prefix) => ({ rest: SC(`${prefix}-rest`), hover: SC(`${prefix}-hover`), pressed: SC(`${prefix}-pressed`) });
+
+// ─── COLOUR TOKENS ────────────────────────────────────────────────────────────
+// Every style shares the unselected option; the styles differ only in how the
+// selected option looks. Read off Figma, nodes 40018457:867 / 40018458:975 /
+// 40018458:1732, spec §3.1 to §3.3.
+export const UNSELECTED = {
+  fill:   { ...ramp("fill-action-secondary"), disabled: SC("fill-action-disabled") },
+  fg:     { ...ramp("foreground-action-secondary"), disabled: SC("foreground-action-disabled") },
+  stroke: null,
+};
+
+export const STYLES = {
+  Primary: {
+    fill:   ramp("fill-action-primary-strong"),
+    // On Strong has one step: the label stays the same through hover and pressed.
+    fg:     { rest: SC("foreground-action-primary-on-strong"), hover: SC("foreground-action-primary-on-strong"), pressed: SC("foreground-action-primary-on-strong") },
+    stroke: null,
+  },
+  Secondary: {
+    // Documented exception, spec §3.1: no action token exists for a raised
+    // neutral selection, so the fill borrows the elevated surface in every
+    // state and the outline carries hover and pressed.
+    fill:   { rest: SC("fill-surface-elevated"), hover: SC("fill-surface-elevated"), pressed: SC("fill-surface-elevated") },
+    fg:     ramp("foreground-action-secondary"),
+    stroke: ramp("stroke-action-secondary"),
+  },
+  Tertiary: {
+    fill:   ramp("fill-action-primary-subtle"),
+    fg:     ramp("foreground-action-primary-on-subtle"),
+    stroke: ramp("stroke-action-primary-strong"),
+  },
+};
+
+// ─── SHARED LAYOUT AND MOTION ─────────────────────────────────────────────────
+export const T = {
+  gap:          SL("gap-xxxtight"),                          // 2px between options
+  border:       SL("borderwidth-base"),                      // 1px, drawn inside
+  touchW:       SL("accessibility-touch-target-aa-width"),   // 44
+  touchH:       SL("accessibility-touch-target-aa-height"),  // 44
+  // Focus ring drawn the way Button draws it (spec §3.6): an outline follows the
+  // option's own radius, and the offset shows the surface behind, so there is
+  // no white halo on a dark page.
+  focusOutline: `${CL("focusring-width")} solid ${SC("stroke-focusring-base")}`,
+  focusOffset:  CL("focusring-offset"),
+  colour:       `${M("duration-2")} ${M("easing-standard")}`,
+  shape:        `${M("duration-4")} ${M("easing-spring-soft")}`,
+};
+
+// Button's label styles, so a Toggle Button and a Button of the same size read
+// the same. Tracking is per size, as Figma's Label/Button styles are.
+const LABEL = (size, lineHeight, tracking) => ({
+  fontFamily:    ST("family-brand"),
+  fontSize:      ST(`font-size-${size}`),
+  fontWeight:    ST("weight-medium"),
+  lineHeight:    ST(`line-height-${lineHeight}`),
+  letterSpacing: ST(`letter-spacing-${tracking}`),
+});
+
+// ─── SIZE TABLE ───────────────────────────────────────────────────────────────
+// height and icon are measurements (spec §3.5); every other value is a token.
+// outer = the fully round radius, half the height: only S has a semantic token
+// at that value, XS / M / L bind the primitive units Figma binds.
+export const SIZES = {
+  XS: { height: 28, padH: SL("padding-xtight"),  inner: SL("cornerradius-small"), outer: PU(14),                     gap: SL("gap-xtight"), icon: 14, ...LABEL("xs", "xs-single", "extraspacious") },
+  S:  { height: 32, padH: SL("padding-tight"),   inner: SL("cornerradius-small"), outer: SL("cornerradius-xlarge"),  gap: SL("gap-tight"),  icon: 16, ...LABEL("s", "s-single", "spacious") },
+  M:  { height: 40, padH: SL("padding-base"),    inner: SL("cornerradius-base"),  outer: PU(20),                     gap: SL("gap-tight"),  icon: 18, ...LABEL("r", "r-single", "wide") },
+  L:  { height: 48, padH: SL("padding-relaxed"), inner: SL("cornerradius-base"),  outer: PU(24),                     gap: SL("gap-tight"),  icon: 20, ...LABEL("m", "m-single", "wide") },
+};
+
+const radiusFor = (sz, position, selected) => {
+  if (selected) return sz.outer;
+  const o = sz.outer, i = sz.inner;
+  if (position === "Only") return o;
+  if (position === "First") return `${o} ${i} ${i} ${o}`;
+  if (position === "Last") return `${i} ${o} ${o} ${i}`;
+  return i;
+};
+
+// ─── ToggleButtonOption ───────────────────────────────────────────────────────
+/**
+ * One option: Figma's ToggleButton.Option building block. The row renders
+ * these; on its own it is for state matrices and documentation.
+ *
+ * @param {"Primary"|"Secondary"|"Tertiary"} toggleStyle  Figma `Style`. Not `style`, which is React's inline style prop (Button does the same with `buttonStyle`)
+ * @param {"XS"|"S"|"M"|"L"} size
+ * @param {boolean} selected   Figma `Selected`
+ * @param {"First"|"Middle"|"Last"|"Only"} position  which corners are outer; set by the row
+ * @param {string}  label      Figma `Label`; also the name of an icon-only option
+ * @param {string}  icon       Material Symbols ligature; FILL 0 unselected, FILL 1 selected
+ * @param {boolean} showIcon   Figma `Show Icon`
+ * @param {boolean} showLabel  Figma `Show Label`
+ * @param {boolean} disabled   unavailable: aria-disabled, never the native attribute
+ * @param {boolean} fill       stretch to share the row's width
+ * @param {"hover"|"pressed"|"focused"|null} forceState  visual only, for state matrices
+ * @param {"radio"|"button"} as  the More trigger renders as a plain button
+ */
+export const ToggleButtonOption = forwardRef(function ToggleButtonOption({
+  toggleStyle = "Secondary",
+  size = "S",
+  selected = false,
+  position = "Middle",
+  label = "Label",
+  icon,
+  showIcon = true,
+  showLabel = true,
+  disabled = false,
+  fill = false,
+  forceState = null,
+  as = "radio",
+  onPointerEnter, onPointerLeave, onPointerDown, onPointerUp, onFocus, onBlur, onKeyDown, onKeyUp, onClick,
+  className = "",
+  ...rest
+}, ref) {
+  const reduced = useReducedMotion();
+  const [hover, setHover] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  const [focused, setFocused] = useState(false);
+
+  const sz = SIZES[size] || SIZES.S;
+  const look = selected ? (STYLES[toggleStyle] || STYLES.Secondary) : UNSELECTED;
+  const state = disabled ? "disabled"
+    : forceState === "pressed" || pressed ? "pressed"
+    : forceState === "hover" || hover ? "hover"
+    : "rest";
+  const ring = !disabled && (forceState === "focused" || focused);
+  const iconOnly = showIcon && !showLabel;
+
+  const main = {
+    display: "flex", alignItems: "center", justifyContent: "center", gap: sz.gap,
+    boxSizing: "border-box", height: sz.height, minWidth: T.touchW, width: fill ? "100%" : undefined,
+    paddingLeft: iconOnly ? 0 : sz.padH, paddingRight: iconOnly ? 0 : sz.padH,
+    borderRadius: radiusFor(sz, position, selected),
+    background: look.fill[state] || look.fill.rest,
+    color: look.fg[state] || look.fg.rest,
+    // Inset so the outline never adds width: selecting must not move the row.
+    boxShadow: look.stroke ? `inset 0 0 0 ${T.border} ${look.stroke[state] || look.stroke.rest}` : "none",
+    outline: ring ? T.focusOutline : "none",
+    outlineOffset: ring ? T.focusOffset : undefined,
+    fontFamily: sz.fontFamily, fontSize: sz.fontSize, fontWeight: sz.fontWeight,
+    lineHeight: sz.lineHeight, letterSpacing: sz.letterSpacing, whiteSpace: "nowrap",
+    transition: reduced ? "none"
+      : `background-color ${T.colour}, color ${T.colour}, box-shadow ${T.colour}, border-radius ${T.shape}`,
+  };
+
+  const outer = {
+    position: "relative", zIndex: ring ? 1 : undefined,
+    display: "inline-flex", alignItems: "center", justifyContent: "center",
+    minHeight: T.touchH, minWidth: T.touchW, flex: fill ? "1 1 0" : "0 0 auto",
+    padding: 0, margin: 0, border: 0, background: "transparent", outline: "none",
+    font: "inherit", color: "inherit", cursor: disabled ? "not-allowed" : "pointer",
+    WebkitTapHighlightColor: "transparent",
+  };
+
+  const radio = as === "radio";
+  return (
+    <button
+      ref={ref}
+      type="button"
+      role={radio ? "radio" : undefined}
+      aria-checked={radio ? selected : undefined}
+      aria-disabled={disabled || undefined}
+      aria-label={iconOnly ? label : undefined}
+      data-selected={selected || undefined}
+      className={`pw-toggle-button__option ${className}`.trim()}
+      style={outer}
+      {...rest}
+      onPointerEnter={(e) => { setHover(true); onPointerEnter?.(e); }}
+      onPointerLeave={(e) => { setHover(false); setPressed(false); onPointerLeave?.(e); }}
+      onPointerDown={(e) => { if (!disabled) setPressed(true); onPointerDown?.(e); }}
+      onPointerUp={(e) => { setPressed(false); onPointerUp?.(e); }}
+      onFocus={(e) => { let v = true; try { v = e.target.matches(":focus-visible"); } catch { /* older browsers */ } setFocused(v); onFocus?.(e); }}
+      onBlur={(e) => { setFocused(false); setPressed(false); onBlur?.(e); }}
+      onKeyDown={(e) => { if (!disabled && (e.key === " " || e.key === "Enter")) setPressed(true); onKeyDown?.(e); }}
+      onKeyUp={(e) => { setPressed(false); onKeyUp?.(e); }}
+      onClick={onClick}
+    >
+      <span className="pw-toggle-button__main" style={main}>
+        {showIcon && icon && <Icon name={icon} size={sz.icon} fill={selected ? 1 : 0} />}
+        {showLabel && <span className="pw-toggle-button__label">{label}</span>}
+      </span>
+    </button>
+  );
+});
+
+// ─── Overflow ─────────────────────────────────────────────────────────────────
+// Which options stay in the row (spec §10): unavailable options leave first,
+// then available ones from the end; the selected option never leaves; the ones
+// that stay keep their order.
+export function fitOptions(options, widths, selectedValue, room, moreWidth, gapPx) {
+  const total = (ids) => ids.reduce((s, i) => s + widths[i], 0) + Math.max(0, ids.length - 1) * gapPx;
+  let keep = options.map((_, i) => i);
+  if (total(keep) <= room) return { visible: keep, hidden: [] };
+  const budget = room - moreWidth - gapPx;
+  const order = [
+    ...keep.filter((i) => options[i].disabled).reverse(),
+    ...keep.filter((i) => !options[i].disabled && options[i].value !== selectedValue).reverse(),
+  ];
+  for (const i of order) {
+    if (total(keep) <= budget) break;
+    keep = keep.filter((k) => k !== i);
+  }
+  return { visible: keep, hidden: options.map((_, i) => i).filter((i) => !keep.includes(i)) };
+}
+
+const pxOf = (el, name, fallback) => {
+  if (typeof window === "undefined" || !el) return fallback;
+  const v = parseFloat(getComputedStyle(el).getPropertyValue(name));
+  return Number.isFinite(v) ? v : fallback;
+};
+
+// ─── ToggleButton ─────────────────────────────────────────────────────────────
+/**
+ * @param {Array<{value:string,label:string,icon?:string,disabled?:boolean,reason?:string}>} options  2 to 5
+ * @param {string}   value         controlled selection
+ * @param {string}   defaultValue  uncontrolled start; otherwise the first available option
+ * @param {Function} onChange      (value) => void
+ * @param {string}   label         the group's accessible name, required
+ * @param {"Primary"|"Secondary"|"Tertiary"} toggleStyle  Figma `Style`
+ * @param {"XS"|"S"|"M"|"L"} size  Figma `Size`
+ * @param {boolean}  showIcon      Figma `Show Icon`, one content type per row
+ * @param {boolean}  showLabel     Figma `Show Label`
+ * @param {boolean}  fill          stretch to the container; options share the width
+ * @param {string}   moreLabel     the More trigger's text, for translation
+ */
+export function ToggleButton({
+  options = [],
+  value: valueProp,
+  defaultValue,
+  onChange,
+  label,
+  toggleStyle = "Secondary",
+  size = "S",
+  showIcon = false,
+  showLabel = true,
+  fill = false,
+  moreLabel = "More",
+  className = "",
+  style,
+}) {
+  const firstAvailable = options.find((o) => !o.disabled)?.value;
+  const controlled = valueProp !== undefined;
+  const [inner, setInner] = useState(defaultValue ?? firstAvailable);
+  const value = controlled ? valueProp : inner;
+
+  const select = useCallback((v) => {
+    const opt = options.find((o) => o.value === v);
+    if (!opt || opt.disabled || v === value) return;
+    if (!controlled) setInner(v);
+    onChange?.(v);
+  }, [options, value, controlled, onChange]);
+
+  // ── measure every option at its natural width, then fit the row ──
+  const wrapRef = useRef(null);
+  const measureRef = useRef(null);
+  const btnRefs = useRef({});
+  const [fit, setFit] = useState({ visible: options.map((_, i) => i), hidden: [], natural: null });
+  const [focusAfter, setFocusAfter] = useState(null);
+
+  const refit = useCallback(() => {
+    const wrap = wrapRef.current, meas = measureRef.current;
+    if (!wrap || !meas) return;
+    const items = [...meas.querySelectorAll("[data-measure]")];
+    const widths = items.slice(0, options.length).map((n) => n.getBoundingClientRect().width);
+    const moreW = items[options.length]?.getBoundingClientRect().width || 0;
+    const gapPx = pxOf(wrap, "--semantic-layout-units-gap-xxxtight", 2);
+    const natural = widths.reduce((s, w) => s + w, 0) + Math.max(0, widths.length - 1) * gapPx;
+    const room = wrap.getBoundingClientRect().width;
+    const next = fitOptions(options, widths, value, Math.max(room, 0), moreW, gapPx);
+    setFit((f) => (f.natural === natural && f.visible.join() === next.visible.join() ? f : { ...next, natural }));
+  }, [options, value]);
+
+  useLayoutEffect(() => { refit(); }, [refit, size, showIcon, showLabel, toggleStyle]);
+  useEffect(() => {
+    if (typeof ResizeObserver === "undefined") return undefined;
+    // Watching the measure layer as well as the wrapper re-fits once the icon
+    // font loads: before it does, ligatures render as words and look too wide.
+    const ro = new ResizeObserver(() => refit());
+    if (wrapRef.current) ro.observe(wrapRef.current);
+    if (measureRef.current) ro.observe(measureRef.current);
+    return () => ro.disconnect();
+  }, [refit]);
+
+  useEffect(() => {
+    if (focusAfter == null) return undefined;
+    const id = requestAnimationFrame(() => { btnRefs.current[focusAfter]?.focus(); setFocusAfter(null); });
+    return () => cancelAnimationFrame(id);
+  }, [focusAfter, fit]);
+
+  const visible = fit.visible.filter((i) => i < options.length);
+  const hidden = fit.hidden.filter((i) => i < options.length);
+  const showMore = hidden.length > 0;
+  const iconOnly = showIcon && !showLabel;
+
+  // ── keyboard: roving tabindex over the visible options (spec §12) ──
+  const onKey = (e, index) => {
+    const at = visible.indexOf(index);
+    const go = (i) => {
+      const opt = options[visible[i]];
+      btnRefs.current[opt.value]?.focus();
+      if (!opt.disabled) select(opt.value);
+    };
+    const avail = visible.filter((i) => !options[i].disabled);
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") { e.preventDefault(); go((at + 1) % visible.length); }
+    else if (e.key === "ArrowLeft" || e.key === "ArrowUp") { e.preventDefault(); go((at - 1 + visible.length) % visible.length); }
+    else if (e.key === "Home" && avail.length) { e.preventDefault(); go(visible.indexOf(avail[0])); }
+    else if (e.key === "End" && avail.length) { e.preventDefault(); go(visible.indexOf(avail[avail.length - 1])); }
+    else if (e.key === " " || e.key === "Enter") { e.preventDefault(); select(options[index].value); }
+  };
+
+  const count = visible.length + (showMore ? 1 : 0);
+  const positionOf = (slot) => (count === 1 ? "Only" : slot === 0 ? "First" : slot === count - 1 ? "Last" : "Middle");
+  const shared = { toggleStyle, size, showIcon, showLabel, fill };
+
+  const renderOption = (i, slot) => {
+    const o = options[i];
+    const selected = o.value === value;
+    const button = (
+      <ToggleButtonOption
+        key={o.value}
+        ref={(n) => { btnRefs.current[o.value] = n; }}
+        {...shared}
+        label={o.label}
+        icon={o.icon}
+        selected={selected}
+        disabled={!!o.disabled}
+        position={positionOf(slot)}
+        tabIndex={selected ? 0 : -1}
+        onClick={() => select(o.value)}
+        onKeyDown={(e) => onKey(e, i)}
+      />
+    );
+    if (o.disabled && o.reason) {
+      // Icon-only: the trigger keeps its name and the tooltip shows name and reason.
+      return (
+        <Tooltip key={o.value} content={iconOnly ? `${o.label}. ${o.reason}` : o.reason} describe={o.reason}
+          purpose="description" persistOnPress>
+          {button}
+        </Tooltip>
+      );
+    }
+    if (iconOnly) return <Tooltip key={o.value} content={o.label} purpose="label">{button}</Tooltip>;
+    return button;
+  };
+
+  const wrapStyle = {
+    display: fill ? "flex" : "inline-flex", alignItems: "center", gap: T.gap,
+    // Width is the natural width, capped by the container, so the row always
+    // knows how much room it has, even after options have moved into More.
+    width: fill ? "100%" : (fit.natural != null ? fit.natural : undefined),
+    maxWidth: "100%", minWidth: 0, flexShrink: 1, position: "relative", verticalAlign: "middle",
+    ...style,
+  };
+
+  return (
+    <div ref={wrapRef} className={`pw-toggle-button ${className}`.trim()} style={wrapStyle}>
+      <div role="radiogroup" aria-label={label}
+        style={{ display: "flex", alignItems: "center", gap: T.gap, flex: fill ? "1 1 auto" : "0 0 auto", minWidth: 0 }}>
+        {visible.map((i, slot) => renderOption(i, slot))}
+      </div>
+
+      {showMore && (
+        <Dropdown
+          align="end"
+          label={iconOnly ? "More options" : moreLabel}
+          renderTrigger={({ title, ...trigger }) => (
+            <ToggleButtonOption {...shared} {...trigger} as="button" fill={false}
+              label={iconOnly ? "More options" : moreLabel} icon={iconOnly ? "more_horiz" : undefined}
+              position={positionOf(count - 1)} />
+          )}
+        >
+          {hidden.map((i) => {
+            const o = options[i];
+            return (
+              <DropdownItem key={o.value} label={o.label} icon={showIcon ? o.icon : undefined}
+                disabled={!!o.disabled} note={o.disabled ? o.reason : undefined}
+                onSelect={() => { select(o.value); setFocusAfter(o.value); }} />
+            );
+          })}
+        </Dropdown>
+      )}
+
+      {/* Measure layer: every option and the More trigger at natural size, out
+          of view and out of the accessibility tree. */}
+      <div ref={measureRef} aria-hidden="true" inert=""
+        style={{ position: "absolute", left: 0, top: 0, visibility: "hidden", pointerEvents: "none", display: "flex", gap: T.gap, whiteSpace: "nowrap" }}>
+        {options.map((o) => (
+          <span key={o.value} data-measure="" style={{ display: "inline-flex" }}>
+            <ToggleButtonOption {...shared} fill={false} label={o.label} icon={o.icon} selected={o.value === value} tabIndex={-1} />
+          </span>
+        ))}
+        <span data-measure="" style={{ display: "inline-flex" }}>
+          <ToggleButtonOption {...shared} fill={false} as="button" label={iconOnly ? "More options" : moreLabel}
+            icon={iconOnly ? "more_horiz" : undefined} tabIndex={-1} />
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default ToggleButton;

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

@@ -532,7 +532,7 @@ export function OrgSwitcher({ org, open, onToggle, mobile = false, showCampus =
           border: "none",
           // Hover and pressed thicken to Button/BorderWidth/Selected (1px), as
           // Figma binds them on 40006819:14582 and 40006933:15754.
-          boxShadow: `inset 0 0 0 ${open || hov ? "var(--contextual-layout-units-button-borderwidth-selected)" : "var(--contextual-layout-units-button-borderwidth-rest)"} ${open ? T.orgStrokePressed : hov ? T.orgStrokeHover : T.orgStroke}`,
+          boxShadow: `inset 0 0 0 ${open || hov ? "var(--contextual-layout-units-button-borderwidth-selected, var(--contextual-layout-units-button-borderwidth, 1px))" : "var(--contextual-layout-units-button-borderwidth-rest, var(--contextual-layout-units-button-borderwidth, 0.75px))"} ${open ? T.orgStrokePressed : hov ? T.orgStrokeHover : T.orgStroke}`,
           cursor: "pointer", color: fg, fontFamily: "inherit",
           transition: "background var(--motion-duration-3) var(--motion-easing-standard), box-shadow var(--motion-duration-3) var(--motion-easing-standard)",
         }}
@@ -862,7 +862,7 @@ function NewCoOrgSwitcher({ org, open, onToggle, compact }) {
           padding: compact ? `${u("padding-xtight")} ${u("padding-xxxtight")} ${u("padding-xtight")} ${u("padding-xtight")}`
                            : `${L.orgPadV} ${L.orgPadV} ${L.orgPadV} ${L.orgPadL}`,
           borderRadius: u("cornerradius-full"), border: "none", background: fill, cursor: "pointer", fontFamily: "inherit",
-          boxShadow: `inset 0 0 0 var(--contextual-layout-units-button-borderwidth-rest) ${T.orgStroke}`,
+          boxShadow: `inset 0 0 0 var(--contextual-layout-units-button-borderwidth-rest, var(--contextual-layout-units-button-borderwidth, 0.75px)) ${T.orgStroke}`,
           transition: "background var(--motion-duration-3) var(--motion-easing-standard)" }}>
         <span aria-hidden="true" style={{ ...NC_TYPE.menuBase, color: T.monoBase, whiteSpace: "nowrap", overflow: "hidden",
           textOverflow: "ellipsis", minWidth: 0, maxWidth: compact ? L.orgNameMaxMobile : L.orgNameMax }}>
@@ -888,7 +888,7 @@ function PillarTrigger({ label, open, onToggle }) {
         style={{ display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-xxxtight)", height: L.modInnerH,
           boxSizing: "border-box", padding: `0 10px 0 ${u("padding-medium")}`, /* pathway-allow: Figma Pillar.Trigger right padding 10 has no token (gap logged in the spec) */
           borderRadius: u("cornerradius-full"), border: "none", background: fill, cursor: "pointer", fontFamily: "inherit",
-          boxShadow: `inset 0 0 0 var(--contextual-layout-units-button-borderwidth-rest) ${T.orgStroke}`, color: T.monoBase }}>
+          boxShadow: `inset 0 0 0 var(--contextual-layout-units-button-borderwidth-rest, var(--contextual-layout-units-button-borderwidth, 0.75px)) ${T.orgStroke}`, color: T.monoBase }}>
         <span style={{ ...NC_TYPE.sectionSm, whiteSpace: "nowrap" }}>{label}</span>
         <span style={{ width: L.modChevronBox, height: L.modChevronBox, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
           <Icon name="expand_more" size={L.chevronGlyph} style={{ color: T.monoBase }} />