@helloimjolopez-pathway/pathway-components 0.8.0 → 0.8.1

package/components/_shared/focus-ring.js

@@ -0,0 +1,45 @@
+/**
+ * Keyboard focus ring shared by controls that style themselves inline.
+ *
+ * One ring for every Pathway control: FocusRing/Width of Stroke/FocusRing/Base,
+ * drawn as an outline that hugs the element's edge (no gap), the way Figma draws
+ * it: an outside stroke on the control's own container in each Focused variant.
+ * Menu rows take the inset variant, as PopoverMenu.Item does in Figma. Where the
+ * Figma ring takes the place of the control's border, FOCUS_RING_REPLACE also
+ * hides that border while the ring shows.
+ *
+ * A stylesheet rule rather than inline style, because :focus-visible (keyboard
+ * focus only, never a mouse click) can only be matched by a selector.
+ */
+export const FOCUS_RING = "pw-focus-ring";
+export const FOCUS_RING_INSET = "pw-focus-ring pw-focus-ring--inset";
+// The ring replaces the control's border (drawn as an inset box-shadow or a CSS
+// border). A control that also carries an elevation keeps it by setting
+// --pw-ring-keep-shadow in its own style.
+export const FOCUS_RING_REPLACE = "pw-focus-ring pw-focus-ring--replace";
+// For a button that is a bigger touch target than what it draws (an action
+// icon's 44 target around its 28 layer, the 48 profile button around its 32
+// avatar): the ring goes on the drawn layer, marked data-pw-ring-target, as
+// the Figma Focus Ring layer does.
+export const FOCUS_RING_LAYER = "pw-focus-ring pw-focus-ring--layer";
+
+// Also exported so a shadow root can carry it: a rule in document.head does not
+// reach inside one, so the custom elements append this to their own styles.
+export const FOCUS_RING_CSS = `
+.pw-focus-ring:focus{outline:none}
+.pw-focus-ring:focus-visible{outline:var(--contextual-layout-units-focusring-width) solid var(--semantic-color-stroke-focusring-base);outline-offset:0}
+.pw-focus-ring--inset:focus-visible{outline-offset:calc(-1 * var(--contextual-layout-units-focusring-width))}
+.pw-focus-ring--replace:focus-visible{border-color:transparent !important;box-shadow:var(--pw-ring-keep-shadow, none) !important}
+.pw-focus-ring--layer:focus-visible{outline:none}
+.pw-focus-ring--layer:focus-visible [data-pw-ring-target]{outline:var(--contextual-layout-units-focusring-width) solid var(--semantic-color-stroke-focusring-base);outline-offset:0}
+`;
+
+let injected = false;
+export function injectFocusRing() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pathway", "focus-ring");
+  el.textContent = FOCUS_RING_CSS;
+  document.head.appendChild(el);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helloimjolopez-pathway/pathway-components",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Pathway Design System React components",
   "type": "module",
   "sideEffects": [

package/components/bottom-sheet/bottom-sheet-demo.jsx

@@ -1,145 +0,0 @@
-/**
- * BottomSheet's standalone demo. Imports the real module, and the rows are the
- * real DropdownItem and DropdownDivider, so nothing here can fall out of step
- * with what ships: see components/_demo/harness.jsx for why demos are generated.
- */
-import React, { useRef, useState } from "react";
-import { DemoChrome, mount } from "../_demo/harness.jsx";
-import { BottomSheet } from "./bottom-sheet.jsx";
-import { DropdownItem, DropdownDivider, DropdownClose } from "../dropdown/dropdown.jsx";
-import { Button } from "../button/button.jsx";
-import { ActionIcon } from "../icon/action-icon.jsx";
-
-const U = (n) => `var(--semantic-layout-units-${n})`;
-const C = (n) => `var(--semantic-color-${n})`;
-const Y = (n) => `var(--semantic-type-${n})`;
-
-const APPS = ["Financials Home", "Accounts Payable", "Accounts Receivable", "General Ledger", "Fixed Assets", "Purchasing Management"];
-const ROWS = [
-  { id: 1, payee: "Grace Office Supply", amount: "$412.50" },
-  { id: 2, payee: "Northside Utilities", amount: "$1,208.00" },
-  { id: 3, payee: "Covenant Insurance", amount: "$3,940.12" },
-];
-
-const caption = { fontSize: Y("font-size-xs"), lineHeight: Y("line-height-xs-single"), color: C("foreground-static-neutral-subtle") };
-
-/* The real screen: Accounts Payable on a phone. The app switcher, a row's More
-   menu, and Filters each open a sheet. */
-function InContext() {
-  const [app, setApp] = useState("Accounts Payable");
-  const [sheet, setSheet] = useState(null);        // "apps" | { row } | "filters"
-  const [moving, setMoving] = useState(false);     // the row menu swapped to "Move to fund"
-  const [log, setLog] = useState("");
-  const close = () => { setSheet(null); setMoving(false); };
-
-  const row = sheet && typeof sheet === "object" ? sheet.row : null;
-
-  return (
-    <section style={{ background: C("fill-surface-elevated"), border: `1px solid ${C("stroke-static-neutral-base")}`,
-      borderRadius: U("cornerradius-large"), overflow: "hidden", maxWidth: 420, width: "100%", margin: "0 auto" }}>
-      <div style={{ padding: U("padding-base"), display: "flex", flexDirection: "column", gap: U("gap-base") }}>
-        <button type="button" aria-haspopup="dialog" onClick={() => setSheet("apps")}
-          style={{ font: "inherit", display: "flex", alignItems: "center", gap: U("gap-tight"), minHeight: 44, cursor: "pointer",
-            padding: `0 ${U("padding-tight")}`, borderRadius: U("cornerradius-base"), textAlign: "left",
-            border: `1px solid ${C("stroke-action-primary-strong-pressed")}`, background: C("fill-action-primary-subtle-pressed"),
-            color: C("foreground-action-primary-on-subtle-pressed"), fontSize: Y("font-size-s"), fontWeight: Y("weight-medium") }}>
-          <span className="material-symbols-rounded" aria-hidden="true" style={{ fontSize: 24 }}>apps</span>
-          <span style={{ flex: 1 }}>{app}</span>
-          <span className="material-symbols-rounded" aria-hidden="true" style={{ fontSize: 14 }}>chevron_right</span>
-        </button>
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
-          <h2 style={{ margin: 0, fontSize: Y("font-size-m"), lineHeight: Y("line-height-m-single"), fontWeight: Y("weight-semibold"), color: C("foreground-static-neutral-strong") }}>Bills to pay</h2>
-          <Button buttonStyle="Outlined" type="Secondary" size="S" text="Filters" showLeadingIcon leadingIcon="filter_list"
-            aria-haspopup="dialog" onClick={() => setSheet("filters")} />
-        </div>
-        <div>
-          {ROWS.map((r) => (
-            <div key={r.id} style={{ display: "flex", alignItems: "center", gap: U("gap-tight"), padding: `${U("padding-xtight")} 0`,
-              borderBottom: `1px solid ${C("stroke-static-neutral-faint")}`, fontSize: Y("font-size-s"), color: C("foreground-static-neutral-base") }}>
-              <span style={{ flex: 1, minWidth: 0 }}>{r.payee}</span>
-              <span>{r.amount}</span>
-              <ActionIcon name="more_vert" size="Base" label={`More for ${r.payee}`} aria-haspopup="dialog"
-                onClick={() => setSheet({ row: r })} />
-            </div>
-          ))}
-        </div>
-        <p role="status" style={{ margin: 0, ...caption }}>{log || "Open the app switcher, a row's More menu, or Filters."}</p>
-      </div>
-
-      <BottomSheet open={sheet === "apps"} onOpenChange={(o) => !o && close()} title="Financial Applications" menu>
-        {APPS.map((a, i) => (
-          <React.Fragment key={a}>
-            <DropdownItem label={a} checked={a === app} onSelect={() => { setApp(a); setLog(`Switched to ${a}.`); }} />
-            {i === 0 && <DropdownDivider />}
-          </React.Fragment>
-        ))}
-      </BottomSheet>
-
-      <BottomSheet open={!!row} onOpenChange={(o) => !o && close()} menu
-        title={moving ? "Move to fund" : row?.payee}
-        showBack={moving} onBack={() => setMoving(false)}>
-        {moving ? (
-          ["General Fund", "Building Fund", "Missions Fund"].map((f) => (
-            <DropdownItem key={f} label={f} onSelect={() => setLog(`${row?.payee} moved to ${f}.`)} />
-          ))
-        ) : (
-          <>
-            <DropdownItem label="Edit" icon="edit" onSelect={() => setLog(`Edit ${row?.payee}.`)} />
-            <DropdownItem label="Duplicate" icon="content_copy" onSelect={() => setLog(`Duplicated ${row?.payee}.`)} />
-            {/* A follow-up choice swaps the Body in place; it never opens a second sheet. */}
-            <MoveItem onMove={() => setMoving(true)} />
-            <DropdownDivider />
-            <DropdownItem label="Delete" icon="delete" danger onSelect={() => setLog(`Delete ${row?.payee} would ask for confirmation.`)} />
-          </>
-        )}
-      </BottomSheet>
-
-      <Filters open={sheet === "filters"} onClose={close} onApply={(n) => setLog(`Showing ${n} results.`)} />
-    </section>
-  );
-}
-
-/* "Move to fund…" swaps the Body instead of closing the sheet, so it is the
-   real DropdownItem with the close context cleared. */
-function MoveItem({ onMove }) {
-  return (
-    <DropdownClose.Provider value={null}>
-      <DropdownItem label="Move to fund…" icon="drive_file_move" onSelect={onMove} />
-    </DropdownClose.Provider>
-  );
-}
-
-function Filters({ open, onClose, onApply }) {
-  const [unpaid, setUnpaid] = useState(true);
-  const [overdue, setOverdue] = useState(false);
-  const count = 24 - (unpaid ? 0 : 6) - (overdue ? 10 : 0);
-  const reset = () => { setUnpaid(false); setOverdue(false); };
-  const Check = ({ label, on, set }) => (
-    <label style={{ display: "flex", alignItems: "center", gap: U("gap-medium"), minHeight: 44, padding: `0 ${U("padding-tight")}`,
-      fontSize: Y("font-size-s"), color: C("foreground-static-neutral-strong"), cursor: "pointer" }}>
-      <input type="checkbox" checked={on} onChange={(e) => set(e.target.checked)} /> {label}
-    </label>
-  );
-  return (
-    <BottomSheet open={open} onOpenChange={(o) => !o && onClose()} title="Filters"
-      footer={<>
-        <Button buttonStyle="Fill" type="Secondary" size="M" text="Reset" onClick={reset} />
-        <Button buttonStyle="Fill" type="Primary" size="M" text={`Show ${count} results`} onClick={() => { onApply(count); onClose(); }} />
-      </>}>
-      <Check label="Unpaid" on={unpaid} set={setUnpaid} />
-      <Check label="Overdue only" on={overdue} set={setOverdue} />
-    </BottomSheet>
-  );
-}
-
-function App() {
-  return (
-    <DemoChrome title="BottomSheet"
-      blurb={"The mobile way to show a menu, a switcher or a short set of options. Close, the overlay, Esc and a swipe down all close it, " +
-             "and focus returns to the control that opened it. Choosing an item closes it. Below 768 only: the host decides, so switch to Mobile."}>
-      <InContext />
-    </DemoChrome>
-  );
-}
-
-mount(<App />);

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

@@ -1,59 +0,0 @@
-/**
- * NavShell's standalone demo. Imports the real NavShell, which composes the
- * real TopNav and SideNav, so nothing here can fall out of step with them: see
- * components/_demo/harness.jsx for why the newer demos are generated.
- *
- * Replaced the hand-written nav-shell.html on 2026-11-03. That page carried its
- * own copies of TopNav and SideNav, both from before the Figma parity passes:
- * 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, { useState } from "react";
-import { DemoChrome, mount } from "../_demo/harness.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";
-
-const C = (n) => `var(--semantic-color-${n})`;
-const Y = (n) => `var(--semantic-type-${n})`;
-
-// NavShell is fixed to the viewport, so every width, Desktop included, renders
-// in an inner frame: in this document it would sit on top of the demo chrome.
-const WIDTHS = { Desktop: 1440, Tablet: 900, Mobile: 390 };
-
-const ORG = { id: "gcc", name: "Grace Community Church", campus: "Knoxville", initials: "GC" };
-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);
-  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. Tick App switcher to turn on the Accounting app switcher."}>
-      <NavShell activeModuleId="accounting" org={ORG} user={USER}
-        navSections={NAV_SECTIONS} activeNavId="balance_sheet"
-        // NavShell tracks the current page and app itself. With the switcher on,
-        // each Accounting app brings its own side nav.
-        appSwitcher={appSwitcher ? ACCOUNTING_APP_SWITCHER : 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
-          </h1>
-        </PageTemplate>
-      </NavShell>
-    </DemoChrome>
-  );
-}
-
-mount(<App />);

package/components/radio/radio-demo.jsx

@@ -1,175 +0,0 @@
-/**
- * Radio'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 { RadioGroup, Radio, RadioMark, SIZES, ORIENTATIONS } from "./radio.jsx";
-import { Button } from "../button/button.jsx";
-
-const U = (n) => `var(--semantic-layout-units-${n})`;
-const C = (n) => `var(--semantic-color-${n})`;
-const Y = (n) => `var(--semantic-type-${n})`;
-
-const label = { fontSize: Y("font-size-xs"), lineHeight: Y("line-height-xs-single"), color: C("foreground-static-neutral-subtle") };
-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 TYPES = ["Unselected", "Selected", "Error Unselected", "Error Selected"];
-const STATES = ["Active", "Hover", "Focused", "Pressed", "Disabled"];
-
-function Pick({ list, value, onPick }) {
-  return (
-    <div style={{ display: "flex", gap: U("gap-xtight"), flexWrap: "wrap" }}>
-      {list.map((x) => <Button key={x} size="S" buttonStyle={x === value ? "Fill" : "Outlined"} type="Secondary" text={x} onClick={() => onPick(x)} />)}
-    </div>
-  );
-}
-
-function InContext() {
-  const [contact, setContact] = useState(null);
-  const [tried, setTried] = useState(false);
-  const error = tried && !contact;
-  return (
-    <section style={card}>
-      <h2 style={h2}>Set up a recurring gift</h2>
-      <span style={label}>Press Save gift without picking how to reach Ana. Tab into a group and use the arrow keys.</span>
-      <RadioGroup label="Frequency" helpText="The first gift is taken on the start date." defaultValue="monthly" name="frequency">
-        <Radio value="once" text="One time" />
-        <Radio value="weekly" text="Weekly" />
-        <Radio value="biweekly" text="Every two weeks" />
-        <Radio value="monthly" text="Monthly" />
-      </RadioGroup>
-      <RadioGroup label="Statement delivery" orientation="Horizontal" defaultValue="email" name="statement">
-        <Radio value="email" text="Email" />
-        <Radio value="mail" text="Mail" />
-        <Radio value="sms" text="Text message" disabled />
-      </RadioGroup>
-      <RadioGroup label="Best way to reach Ana" required name="contact" value={contact} onChange={setContact}
-        error={error} errorMessage="Choose how to reach Ana">
-        <Radio value="phone" text="Phone" />
-        <Radio value="email" text="Email" />
-        <Radio value="none" text="Don’t contact" />
-      </RadioGroup>
-      <div><Button text="Save gift" type="Primary" buttonStyle="Fill" onClick={() => setTried(true)} /></div>
-    </section>
-  );
-}
-
-function Playground() {
-  const [size, setSize] = useState("Base");
-  const [orientation, setOrientation] = useState("Vertical");
-  const [state, setState] = useState("Default");
-  const [required, setRequired] = useState("off");
-  return (
-    <section style={card}>
-      <h2 style={h2}>Playground</h2>
-      <div style={{ display: "flex", gap: U("gap-relaxed"), flexWrap: "wrap" }}>
-        <div><div style={label}>Size</div><Pick list={SIZES} value={size} onPick={setSize} /></div>
-        <div><div style={label}>Orientation</div><Pick list={ORIENTATIONS} value={orientation} onPick={setOrientation} /></div>
-        <div><div style={label}>State</div><Pick list={["Default", "Error", "Disabled"]} value={state} onPick={setState} /></div>
-        <div><div style={label}>Required</div><Pick list={["off", "on"]} value={required} onPick={setRequired} /></div>
-      </div>
-      <RadioGroup label="Gift type" size={size} orientation={orientation} required={required === "on"}
-        error={state === "Error"} errorMessage="Choose a gift type" disabled={state === "Disabled"}
-        helpText="You can change this later.">
-        <Radio value="one" text="One-time gift" />
-        <Radio value="recurring" text="Recurring gift" />
-        <Radio value="pledge" text="Pledge payment" />
-      </RadioGroup>
-    </section>
-  );
-}
-
-function Matrix() {
-  return (
-    <section style={card}>
-      <h2 style={h2}>Every Type, State and Size</h2>
-      <div style={{ overflowX: "auto" }}>
-        <table style={{ borderCollapse: "collapse", fontSize: Y("font-size-xs"), color: C("foreground-static-neutral-subtle") }}>
-          <thead><tr><th />{STATES.map((s) => <th key={s} style={{ padding: U("padding-xtight"), textAlign: "left", fontWeight: Y("weight-medium") }}>{s}</th>)}</tr></thead>
-          <tbody>
-            {SIZES.flatMap((size) => TYPES.map((t) => (
-              <tr key={size + t}>
-                <th style={{ padding: U("padding-xtight"), textAlign: "left", fontWeight: Y("weight-medium") }}>{t}, {size}</th>
-                {STATES.map((s) => (
-                  <td key={s} style={{ padding: U("padding-xtight") }}>
-                    <RadioGroup label={`${t}, ${s}, ${size}`} showLabel={false} size={size} error={t.startsWith("Error")}
-                      value={t.endsWith("Selected") && !t.endsWith("Unselected") ? "x" : null} onChange={() => {}}>
-                      <Radio value="x" text="Label" disabled={s === "Disabled"} forceState={["Hover", "Focused", "Pressed"].includes(s) ? s : undefined} />
-                    </RadioGroup>
-                  </td>
-                ))}
-              </tr>
-            )))}
-          </tbody>
-        </table>
-      </div>
-    </section>
-  );
-}
-
-function Content() {
-  return (
-    <section style={card}>
-      <h2 style={h2}>Long and translated labels</h2>
-      <div style={{ display: "flex", gap: U("gap-relaxed"), flexWrap: "wrap", alignItems: "flex-start" }}>
-        <RadioGroup label="Gift acknowledgement" defaultValue="letter">
-          <Radio value="email" text="Send a thank-you email" />
-          <Radio value="letter" text="Send a printed thank-you letter with the year-end giving statement, and copy the primary contact" />
-          <Radio value="none" text="Don’t acknowledge" />
-        </RadioGroup>
-        <RadioGroup label="Frecuencia" helpText="La primera donación se cobra en la fecha de inicio." defaultValue="m">
-          <Radio value="o" text="Una vez" />
-          <Radio value="w" text="Cada semana" />
-          <Radio value="b" text="Cada dos semanas" />
-          <Radio value="m" text="Cada mes" />
-        </RadioGroup>
-      </div>
-    </section>
-  );
-}
-
-function InMenu() {
-  const options = ["Date, newest first", "Amount, largest first", "Donor name, A to Z"];
-  const [picked, setPicked] = useState(options[0]);
-  return (
-    <section style={card}>
-      <h2 style={h2}>RadioMark inside a menu</h2>
-      <span style={label}>The Menu owns the menuitemradio role and draws RadioMark (Base) as its leading visual.</span>
-      <div role="menu" aria-label="Sort by" style={{ display: "flex", flexDirection: "column", width: 280,
-        borderRadius: U("cornerradius-base"), border: `1px solid ${C("stroke-static-neutral-base")}`, background: C("fill-surface-elevated") }}>
-        {options.map((o) => (
-          <div key={o} role="menuitemradio" aria-checked={picked === o} tabIndex={0}
-            onClick={() => setPicked(o)} onKeyDown={(e) => { if (e.key === " " || e.key === "Enter") { e.preventDefault(); setPicked(o); } }}
-            style={{ display: "flex", alignItems: "center", cursor: "pointer", fontSize: Y("font-size-s"), color: C("foreground-static-neutral-base") }}>
-            <RadioMark selected={picked === o} />{o}
-          </div>
-        ))}
-      </div>
-    </section>
-  );
-}
-
-function App() {
-  return (
-    <DemoChrome title="Radio"
-      blurb={"Pick exactly one option from a short list people can see all at once. Base on desktop, Large on touch. " +
-             "Tab lands on the picked option, arrows move and pick, Space picks. The focus ring shows for the keyboard only."}>
-      <div style={{ display: "flex", flexDirection: "column", gap: U("gap-relaxed") }}>
-        <InContext />
-        <Playground />
-        <Matrix />
-        <Content />
-        <InMenu />
-      </div>
-    </DemoChrome>
-  );
-}
-
-mount(<App />);

package/components/scroll-to-enable/scroll-to-enable-demo.jsx

@@ -1,125 +0,0 @@
-/**
- * Scroll-to-Enable'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, isEmbed, mount } from "../_demo/harness.jsx";
-import { ScrollToEnable } from "./scroll-to-enable.jsx";
-
-const U = (n) => `var(--semantic-layout-units-${n})`;
-const C = (n) => `var(--semantic-color-${n})`;
-const Y = (n) => `var(--semantic-type-${n})`;
-
-const FCRA = [
-  "In connection with your employment application with [Org Name] (the “Organization”), this notice is intended to inform you that a consumer report will be obtained on you from a consumer reporting agency for employment purposes. These purposes may include hiring, promotion, reassignment or retention.",
-  "The consumer report may contain information about your character, general reputation, personal characteristics and mode of living. It may include, but is not limited to, criminal history, motor vehicle records, education and employment verification, and credit history, where permitted by law.",
-  "You have the right, upon written request made within a reasonable time, to request whether a consumer report has been run about you, and to request a copy of your report. You may also request the nature and scope of any investigative consumer report.",
-  "This online application is protected by a secure certificate authority, which supports up to a TLS 1.2 256-bit encryption process. All information provided on this form is secure.",
-  "A summary of your rights under the Fair Credit Reporting Act is available on request, and a copy will be provided with any adverse action notice.",
-];
-const SHORT = [FCRA[0]];
-const LABEL = "I acknowledge receipt of the disclosure regarding background investigation and certify that I have read and understand this document.";
-
-const body = (paras) => paras.map((p, i) => <p key={i}>{p}</p>);
-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 caption = { fontSize: Y("font-size-xs"), lineHeight: Y("line-height-xs-single"), color: C("foreground-static-neutral-subtle") };
-
-/* The real screen it lives on: the background check form, step 3. */
-function InContext() {
-  const [short, setShort] = useState(false);
-  const [done, setDone] = useState(false);
-  return (
-    <section style={{ ...card, padding: 0, overflow: "hidden" }}>
-      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: `${U("padding-tight")} ${U("padding-relaxed")}`,
-        background: C("fill-static-brand-strong"), color: C("foreground-static-brand-on-strong"), fontSize: Y("font-size-s") }}>
-        <span>[Org Name] Background Check</span><span>Step 3 of 6</span>
-      </div>
-      <div style={{ padding: U("padding-relaxed"), display: "flex", justifyContent: "center" }}>
-        <div style={{ width: "100%", maxWidth: 456, display: "flex", flexDirection: "column", gap: U("gap-base") }}>
-          <div>
-            <h2 style={{ ...h2, fontSize: Y("font-size-xl") }}>FCRA Notice</h2>
-            <p style={{ margin: 0, fontSize: Y("font-size-s"), color: C("foreground-static-neutral-base") }}>Please read and acknowledge receipt of the disclosure.</p>
-          </div>
-          <ScrollToEnable key={`${short}-${done}`} title="Terms & Conditions" agreementLabel={LABEL}
-            onContinue={() => setDone(true)} onPrint={() => {}}>
-            {body(short ? SHORT : FCRA)}
-          </ScrollToEnable>
-          {done && <p role="status" style={{ margin: 0, ...caption }}>Continue accepted: the form would move to step 4.</p>}
-          <div style={{ display: "flex", gap: U("gap-tight"), alignItems: "center", flexWrap: "wrap", ...caption }}>
-            Notice:
-            {[["Long", false], ["Short, fits", true]].map(([name, v]) => (
-              <button key={name} type="button" aria-pressed={short === v} onClick={() => { setShort(v); setDone(false); }}
-                style={{ font: "inherit", padding: `${U("padding-xxxtight")} ${U("padding-tight")}`, borderRadius: U("cornerradius-base"),
-                  border: `1px solid ${short === v ? C("stroke-action-primary-strong-rest") : C("stroke-static-neutral-base")}`,
-                  background: short === v ? C("fill-action-primary-subtle-rest") : "transparent", color: C("foreground-static-neutral-base"), cursor: "pointer" }}>
-                {name}
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-function Cell({ label, children }) {
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: U("gap-tight"), minWidth: 0 }}>
-      <span style={caption}>{label}</span>
-      {children}
-    </div>
-  );
-}
-
-function States() {
-  const grid = { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(min(340px, 100%), 1fr))", gap: U("gap-relaxed") };
-  const inline = ["Unread", "Reading", "Read", "Agreed", "Blocked", "Agreement Missing"];
-  const page = ["Unread", "Blocked", "Read", "Agreed", "Agreement Missing"];
-  const sheet = ["Sheet Unread", "Sheet Blocked", "Sheet Read"];
-  const make = (s, layout) => (
-    <ScrollToEnable layout={layout} demoState={s} title={layout === "sheet" ? "FCRA Notice" : "Terms & Conditions"}
-      agreementLabel={LABEL} noticeHeight={layout === "sheet" && s.startsWith("Sheet") ? 180 : undefined} onPrint={() => {}}>
-      {body(FCRA)}
-    </ScrollToEnable>
-  );
-  return (
-    <>
-      <section style={card}>
-        <h2 style={h2}>Inline (viewport 768 and up)</h2>
-        <div style={grid}>{inline.map((s) => <Cell key={s} label={s}>{make(s, "inline")}</Cell>)}</div>
-      </section>
-      <section style={card}>
-        <h2 style={h2}>Sheet: the page (viewport under 768)</h2>
-        <div style={grid}>{page.map((s) => <Cell key={s} label={s}>{make(s, "sheet")}</Cell>)}</div>
-      </section>
-      <section style={card}>
-        <h2 style={h2}>Sheet: open</h2>
-        <div style={grid}>{sheet.map((s) => <Cell key={s} label={s}>{make(s, "sheet")}</Cell>)}</div>
-      </section>
-    </>
-  );
-}
-
-function App() {
-  return (
-    <DemoChrome title="Scroll-to-Enable"
-      blurb={"The person reaches the end of a legal notice before agreeing and continuing. Nothing is disabled: " +
-             "press Continue or the checkbox early and it says what to do and moves focus there. " +
-             "Inline at 768 and wider; switch to Mobile for the sheet. Tab into the notice and use the arrow keys; Esc closes the sheet."}>
-      <div style={{ display: "flex", flexDirection: "column", gap: U("gap-relaxed") }}>
-        <InContext />
-        {/* The Tablet and Mobile frames show the real screen only: the state
-            grids force each layout and are reference, not responsive. */}
-        {!isEmbed() && <States />}
-      </div>
-    </DemoChrome>
-  );
-}
-
-mount(<App />);

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

@@ -1,193 +0,0 @@
-/**
- * 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/tooltip/tooltip-demo.jsx

@@ -1,149 +0,0 @@
-/**
- * Tooltip'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 { Tooltip, TooltipProvider } from "./tooltip.jsx";
-import { Button } from "../button/button.jsx";
-
-const U = (n) => `var(--semantic-layout-units-${n})`;
-const C = (n) => `var(--semantic-color-${n})`;
-const Y = (n) => `var(--semantic-type-${n})`;
-
-const SIDES = ["top", "bottom", "left", "right"];
-const ALIGNS = ["start", "center", "end"];
-const LONG = "Weekly totals aren't available because budgets are set by month. Switch to Month to compare.";
-
-const label = { fontSize: Y("font-size-xs"), lineHeight: Y("line-height-xs-single"), color: C("foreground-static-neutral-subtle") };
-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") };
-
-/* An unavailable option stays focusable so it can say why, which a native
-   disabled button cannot. This stands in for a Toggle Button option. */
-const Unavailable = React.forwardRef(function Unavailable({ children, ...rest }, ref) {
-  return (
-    <button ref={ref} type="button" aria-disabled="true" {...rest}
-      style={{ minWidth: U("accessibility-touch-target-aa-width"), minHeight: U("accessibility-touch-target-aa-height"),
-        padding: `0 ${U("padding-tight")}`, border: 0, borderRadius: U("cornerradius-base"), cursor: "not-allowed",
-        background: C("fill-action-disabled"), color: C("foreground-action-disabled"),
-        fontFamily: Y("family-brand"), fontSize: Y("font-size-s"), fontWeight: Y("weight-medium") }}>
-      {children}
-    </button>
-  );
-});
-
-function Playground() {
-  const [side, setSide] = useState("top");
-  const [align, setAlign] = useState("center");
-  const [arrow, setArrow] = useState(true);
-  const [text, setText] = useState("Bar chart");
-  const pick = (list, v, set) => (
-    <div style={{ display: "flex", gap: U("gap-xtight"), flexWrap: "wrap" }}>
-      {list.map((x) => <Button key={x} size="S" buttonStyle={x === v ? "Fill" : "Outlined"} type="Secondary" text={x} onClick={() => set(x)} />)}
-    </div>
-  );
-  return (
-    <section style={card}>
-      <h2 style={h2}>Playground</h2>
-      <div style={{ display: "flex", gap: U("gap-relaxed"), flexWrap: "wrap" }}>
-        <div><div style={label}>Side</div>{pick(SIDES, side, setSide)}</div>
-        <div><div style={label}>Align</div>{pick(ALIGNS, align, setAlign)}</div>
-        <div><div style={label}>Arrow</div>{pick(["on", "off"], arrow ? "on" : "off", (x) => setArrow(x === "on"))}</div>
-      </div>
-      <label style={{ ...label, display: "flex", flexDirection: "column", gap: U("gap-xxtight"), maxWidth: 420 }}>
-        Content
-        <input id="tooltip-content" value={text} onChange={(e) => setText(e.target.value)}
-          style={{ font: "inherit", fontSize: Y("font-size-s"), padding: U("padding-xtight"), borderRadius: U("cornerradius-small"),
-            border: `1px solid ${C("stroke-static-neutral-bold")}`, background: C("fill-surface-elevated"), color: C("foreground-static-neutral-base") }} />
-      </label>
-      <div style={{ minHeight: 160, display: "flex", alignItems: "center", justifyContent: "center" }}>
-        <Tooltip content={text} side={side} align={align} arrow={arrow} open purpose="description">
-          <button type="button" style={{ width: 120, height: 44, border: `1px dashed ${C("stroke-static-neutral-bold")}`,
-            borderRadius: U("cornerradius-base"), background: "transparent", color: C("foreground-static-neutral-subtle"), font: "inherit" }}>
-            Trigger
-          </button>
-        </Tooltip>
-      </div>
-    </section>
-  );
-}
-
-function Uses() {
-  return (
-    <section style={card}>
-      <h2 style={h2}>Try it: hover, Tab, tap, Esc</h2>
-      <div style={{ display: "flex", gap: U("gap-wide"), flexWrap: "wrap", alignItems: "flex-end" }}>
-        <div style={{ display: "flex", flexDirection: "column", gap: U("gap-tight") }}>
-          <span style={label}>Names icon-only controls</span>
-          <div style={{ display: "flex", gap: U("gap-xxtight") }}>
-            {[["bar_chart", "Bar chart"], ["show_chart", "Line chart"], ["table_rows", "Table"]].map(([icon, name]) => (
-              <Tooltip key={icon} content={name} purpose="label">
-                <Button buttonStyle="Naked" type="Secondary" size="M" showText={false} text={name}
-                  leadingIcon={icon} showLeadingIcon />
-              </Tooltip>
-            ))}
-          </div>
-        </div>
-        <div style={{ display: "flex", flexDirection: "column", gap: U("gap-tight") }}>
-          <span style={label}>Says why an option is unavailable</span>
-          <Tooltip content="Weekly totals aren't available. Budgets are set by month." persistOnPress>
-            <Unavailable>Week</Unavailable>
-          </Tooltip>
-        </div>
-        <div style={{ display: "flex", flexDirection: "column", gap: U("gap-tight") }}>
-          <span style={label}>Adds a short hint</span>
-          <Tooltip content="Includes payments that haven't cleared yet.">
-            <Button buttonStyle="Naked" type="Secondary" size="M" showText={false} text="About this balance"
-              leadingIcon="info" showLeadingIcon />
-          </Tooltip>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-function Grid() {
-  return (
-    <section style={card}>
-      <h2 style={h2}>Sides and alignment</h2>
-      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: U("gap-base") }}>
-        {SIDES.flatMap((s) => ALIGNS.map((a) => (
-          <div key={s + a} style={{ minHeight: 150, display: "flex", flexDirection: "column", gap: U("gap-tight"),
-            border: `1px dashed ${C("stroke-static-neutral-base")}`, borderRadius: U("cornerradius-base"), padding: U("padding-tight") }}>
-            <span style={label}>{s}, {a}</span>
-            <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
-              <Tooltip content={a === "center" ? "Bar chart" : LONG.slice(0, 44)} side={s} align={a} open>
-                <span tabIndex={-1} style={{ width: 28, height: 28, borderRadius: U("cornerradius-small"), background: C("fill-static-neutral-base") }} />
-              </Tooltip>
-            </div>
-          </div>
-        )))}
-      </div>
-    </section>
-  );
-}
-
-function App() {
-  return (
-    <DemoChrome title="Tooltip"
-      blurb={"A short, plain-text label beside a control. It is always the opposite mode to the page: " +
-             "switch to Midnight to see it turn light. Hover waits 300ms, keyboard focus opens it at once, " +
-             "a tap shows it for 2.6 seconds, Esc closes it."}>
-      <TooltipProvider>
-        <div style={{ display: "flex", flexDirection: "column", gap: U("gap-relaxed") }}>
-          <Uses />
-          <Playground />
-          <Grid />
-        </div>
-      </TooltipProvider>
-    </DemoChrome>
-  );
-}
-
-mount(<App />);

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

@@ -1,79 +0,0 @@
-/**
- * TopNav'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.
- *
- * Replaced the hand-written top-nav.html on 2026-10-30. That page carried its
- * own copy of TopNav, and the copy had drifted from top-nav.jsx: it still
- * abbreviated the mobile org label, still drew the campus line in Mono, and
- * still sized the module mark at 24.
- */
-import React, { useState } from "react";
-import { DemoChrome, mount } from "../_demo/harness.jsx";
-import { TopNav } from "./top-nav.jsx";
-
-const U = (n) => `var(--semantic-layout-units-${n})`;
-const C = (n) => `var(--semantic-color-${n})`;
-const Y = (n) => `var(--semantic-type-${n})`;
-
-const BARS = [
-  { id: "desktop", label: "Desktop", width: 1200 },
-  { id: "tablet", label: "Tablet", width: 768 },
-  { id: "mobile", label: "Mobile", width: 393 },
-];
-const ORG = { id: "gcc", name: "Grace Community Church", shortName: "Grace Comm", campus: "Knoxville", initials: "GC" };
-const USER = { name: "Jo Lopez", initials: "JL", email: "jo@gracecommunity.org" };
-
-const label = { fontSize: Y("font-size-xs"), lineHeight: Y("line-height-xs-single"), color: C("foreground-static-neutral-subtle") };
-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") };
-
-function App() {
-  const [showCampus, setShowCampus] = useState(false);
-  const [module, setModule] = useState("people");
-  const [brand, setBrand] = useState("amplify");
-  return (
-    <DemoChrome title="TopNav"
-      blurb={"The global bar across the top of every Pathway screen. Hover and open the module and org switchers. " +
-             "The campus line is off by default, as in Figma; turn it on below."}>
-      <div style={{ display: "flex", flexDirection: "column", gap: U("gap-relaxed") }}>
-        <section style={card}>
-          <h2 style={h2}>Options</h2>
-          <label style={{ ...label, display: "flex", alignItems: "center", gap: U("gap-xtight") }}>
-            <input id="topnav-show-campus" type="checkbox" checked={showCampus} onChange={(e) => setShowCampus(e.target.checked)} />
-            Show campus line (Figma "Show CityName")
-          </label>
-          <label style={{ ...label, display: "flex", alignItems: "center", gap: U("gap-xtight") }}>
-            Brand layout
-            <select id="topnav-brand" value={brand} onChange={(e) => setBrand(e.target.value)}>
-              <option value="amplify">Amplify</option>
-              <option value="newco">NewCo</option>
-            </select>
-          </label>
-          <label style={{ ...label, display: "flex", alignItems: "center", gap: U("gap-xtight") }}>
-            Module
-            <select id="topnav-module" value={module} onChange={(e) => setModule(e.target.value)}>
-              {["home", "people", "giving", "accounting", "communications"].map((m) => <option key={m} value={m}>{m}</option>)}
-            </select>
-          </label>
-        </section>
-        {BARS.map((b) => (
-          <section key={b.id} style={card}>
-            <h2 style={h2}>{b.label}</h2>
-            <div style={{ overflowX: "auto" }}>
-              <div style={{ width: b.width }}>
-                <TopNav key={module + brand} brand={brand} breakpoint={b.id} activeModuleId={module} org={ORG} user={USER} showCampus={showCampus} />
-              </div>
-            </div>
-          </section>
-        ))}
-      </div>
-    </DemoChrome>
-  );
-}
-
-mount(<App />);