@helloimjolopez-pathway/pathway-components 0.7.2 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helloimjolopez-pathway/pathway-components",
-  "version": "0.7.2",
+  "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 />);