@helloimjolopez-pathway/pathway-components 0.4.0 → 0.6.0

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

@@ -0,0 +1,145 @@
+/**
+ * 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/bottom-sheet/bottom-sheet.jsx

@@ -0,0 +1,433 @@
+/**
+ * BottomSheet: the mobile way to show a menu, a switcher or a short set of
+ * options. A modal panel anchored to the bottom of the viewport, over a dimmed
+ * overlay.
+ *
+ * SOURCE OF TRUTH: Figma set `BottomSheet` 40018874:13685 on the
+ * `↳ ❇️ BottomSheet` page, variant Platform=Web 40018722:111, read 2026-11-10.
+ * Platform=iOS and Platform=Android are the operating system's own sheet
+ * frames; a browser has none, so the web draws Platform=Web and nothing else.
+ *
+ *   BottomSheet (Platform=Web)     Fill/Surface/Elevated, top corners
+ *                                  CornerRadius/XLarge, bottom corners square,
+ *                                  VERTICAL gap Gap/Tight, max width 640,
+ *                                  effect style `BottomSheet`
+ *     Container.Top
+ *       Handle                     BottomSheet.Handle 40018716:5338: a 20 tall
+ *                                  zone holding a 32x4 pill,
+ *                                  Fill/Static/Neutral/Strong, CornerRadius/Full
+ *       BottomSheet.Header         40018716:5340: min height Touch Target/AA,
+ *                                  pad 8 / 2 / 4 / 2 (XTight, XXXXTight,
+ *                                  XXXTight, XXXXTight), gap XXTight
+ *         Back (Show Back)         Action Icon Size=Base, `arrow_back`
+ *         Container.Title          pad left Padding/Base
+ *           Title                  Heading/Local/Base/Semibold,
+ *                                  Foreground/Static/Neutral/Strong
+ *         Close                    Action Icon Size=Base, `close`
+ *     Body (slot)                  pad 0 / XTight / XTight, gap XXTight,
+ *                                  scrolls when taller than the space left
+ *     Footer (Show Footer)         BottomSheet.Footer 40018716:5354: top border
+ *                                  Stroke/Static/Neutral/Faint at
+ *                                  BorderWidth/Base, pad Tight / Base / Base,
+ *                                  Actions slot right-aligned, gap Tight
+ *   BottomSheet.Overlay            40018716:5380: Scrim/Subtle
+ *
+ * WHAT THIS COMPONENT IS NOT. It does not decide when a sheet is used. Figma
+ * says below 768 the content opens here and from 768 up the same content opens
+ * as a PopoverMenu; that choice belongs to the host (TopNav, SideNav, a row's
+ * More menu), which renders a BottomSheet or a Dropdown. It does not draw the
+ * rows either: the Body is a slot, and a menu in it is the real
+ * `DropdownItem` / `DropdownDivider` from dropdown.jsx, never a copy.
+ *
+ * WHY THERE IS NO DRAWER LIBRARY. The Figma description names Vaul Drawer on
+ * Radix Dialog. The component package ships with React as its only peer
+ * dependency, and Tooltip and Scroll-to-Enable both build their overlays
+ * without one, so this follows the Radix Dialog anatomy (Overlay, Content,
+ * Title, Close) with the behaviour written here: focus moved in and returned,
+ * Tab kept inside, Esc, page scroll locked, the rest of the page inert, and
+ * swipe down to close.
+ */
+import React, { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { ActionIcon } from "../icon/action-icon.jsx";
+import { DropdownClose } from "../dropdown/dropdown.jsx";
+import { useReducedMotion } from "../_shared/use-reduced-motion.jsx";
+
+const C = (n) => `var(--semantic-color-${n})`;
+const U = (n) => `var(--semantic-layout-units-${n})`;
+const Y = (n) => `var(--semantic-type-${n})`;
+const M = (n) => `var(--motion-${n})`;
+
+export const T = {
+  surface: C("fill-surface-elevated"),
+  overlay: C("scrim-subtle"),
+  handle:  C("fill-static-neutral-strong"),
+  title:   C("foreground-static-neutral-strong"),
+  footerBorder: C("stroke-static-neutral-faint"),
+  /* Figma's effect style `BottomSheet` is a drop shadow of x -6, y 0, blur 36
+     on Cool Neutral/900 at 16%. It binds a PRIMITIVE colour and has no CSS
+     token. --elevation-sheet is the nearest token that exists, the same
+     choice Dropdown made for PopoverMenu's shadow. Kept by Jo, 2026-11-10. */
+  shadow:  "var(--elevation-sheet)",
+};
+
+export const L = {
+  radius:        U("cornerradius-xlarge"),
+  sheetGap:      U("gap-tight"),
+  // Measurements, not tokens: the sheet stops at 640 and always leaves 56 of
+  // overlay showing above it so it reads as a layer over the page.
+  maxWidth:      640,
+  topClearance:  56,
+  handleZone:    20,
+  pillWidth:     32,
+  pillHeight:    4,
+  pillRadius:    U("cornerradius-full"),
+  headerMinH:    U("accessibility-touch-target-aa-height"),
+  headerPadTop:  U("padding-xtight"),
+  headerPadX:    U("padding-xxxxtight"),
+  headerPadBottom: U("padding-xxxtight"),
+  headerGap:     U("gap-xxtight"),
+  titleInset:    U("padding-base"),
+  bodyPad:       U("padding-xtight"),
+  bodyGap:       U("gap-xxtight"),
+  footerBorder:  U("borderwidth-base"),
+  footerPadTop:  U("padding-tight"),
+  footerPad:     U("padding-base"),
+  footerGap:     U("gap-tight"),
+  // Swipe: a drag shorter than this, or slower than the flick speed, springs
+  // back. Behaviour thresholds, not design values.
+  dismissDistance: 80,
+  flickSpeed:    0.5,
+};
+
+export const TYPE = {
+  // ❇️ Heading/Local/Base/Semibold
+  title: {
+    fontFamily: Y("family-brand"),
+    fontSize: Y("font-size-s"),
+    fontWeight: Y("weight-semibold"),
+    lineHeight: Y("line-height-s-tight"),
+    letterSpacing: Y("letter-spacing-wide"),
+  },
+};
+
+export const MOTION = {
+  enter:        `pw-bottom-sheet-up ${M("duration-5")} ${M("easing-emphasized")} both`,
+  exit:         `pw-bottom-sheet-down ${M("duration-4")} ${M("easing-accelerate")} both`,
+  fadeIn:       `pw-bottom-sheet-fade-in ${M("duration-4")} ${M("easing-standard")} both`,
+  fadeOut:      `pw-bottom-sheet-fade-out ${M("duration-4")} ${M("easing-standard")} both`,
+  settle:       `transform ${M("duration-4")} ${M("easing-decelerate")}`,
+};
+
+const CSS =
+  "@keyframes pw-bottom-sheet-up{from{transform:translateY(100%)}to{transform:none}}" +
+  "@keyframes pw-bottom-sheet-down{from{transform:none}to{transform:translateY(100%)}}" +
+  "@keyframes pw-bottom-sheet-fade-in{from{opacity:0}to{opacity:1}}" +
+  "@keyframes pw-bottom-sheet-fade-out{from{opacity:1}to{opacity:0}}" +
+  ".pw-bottom-sheet__body{scrollbar-width:thin}";
+
+function useInjectedStyles() {
+  useLayoutEffect(() => {
+    if (typeof document === "undefined" || document.getElementById("pw-bottom-sheet-css")) return;
+    const s = document.createElement("style");
+    s.id = "pw-bottom-sheet-css";
+    s.textContent = CSS;
+    document.head.appendChild(s);
+  }, []);
+}
+
+const FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const MENU_ITEMS = '[role="menuitem"]:not([disabled]), [role="menuitemradio"]:not([disabled]), [role="menuitemcheckbox"]:not([disabled])';
+
+/** BottomSheet.Handle: the drag affordance. Hidden from assistive technology:
+ *  Close, Esc and the overlay are the accessible ways to close. */
+export function BottomSheetHandle() {
+  return (
+    <div aria-hidden="true" data-part="handle"
+      style={{ height: L.handleZone, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
+      <div style={{ width: L.pillWidth, height: L.pillHeight, borderRadius: L.pillRadius, background: T.handle }} />
+    </div>
+  );
+}
+
+/**
+ * BottomSheet.Header: title row. The title names the dialog. It wraps to two
+ * lines and then truncates. Close is always present; Back appears when the
+ * Body has been swapped in place.
+ */
+export function BottomSheetHeader({ title, titleId, titleRef, showBack = false, onBack, onClose,
+  backLabel = "Back", closeLabel = "Close" }) {
+  return (
+    <div data-part="header" style={{
+      display: "flex", alignItems: "center", gap: L.headerGap, minHeight: L.headerMinH, boxSizing: "border-box",
+      padding: `${L.headerPadTop} ${L.headerPadX} ${L.headerPadBottom}`,
+    }}>
+      {showBack && <ActionIcon name="arrow_back" size="Base" label={backLabel} onClick={onBack} />}
+      <div style={{ flex: 1, minWidth: 0, paddingLeft: L.titleInset }}>
+        <h2 id={titleId} ref={titleRef} tabIndex={-1} style={{
+          margin: 0, outline: "none", color: T.title, ...TYPE.title,
+          overflowWrap: "anywhere", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden",
+        }}>{title}</h2>
+      </div>
+      <ActionIcon name="close" size="Base" label={closeLabel} onClick={onClose} />
+    </div>
+  );
+}
+
+/** BottomSheet.Footer: sticky actions, right-aligned. Pass Buttons as children. */
+export function BottomSheetFooter({ children }) {
+  return (
+    <div data-part="footer" style={{
+      display: "flex", alignItems: "center", justifyContent: "flex-end", gap: L.footerGap, flexShrink: 0,
+      borderTop: `${L.footerBorder} solid ${T.footerBorder}`,
+      padding: `${L.footerPadTop} ${L.footerPad} calc(${L.footerPad} + env(safe-area-inset-bottom, 0px))`,
+    }}>
+      {children}
+    </div>
+  );
+}
+
+/** BottomSheet.Overlay: the dimmed layer behind the sheet. A tap closes. */
+export function BottomSheetOverlay({ onClick, animation, opacity }) {
+  return (
+    <div data-part="overlay" aria-hidden="true" onClick={onClick}
+      style={{ position: "absolute", inset: 0, background: T.overlay, animation, opacity }} />
+  );
+}
+
+/**
+ * @param {boolean}   open          Controlled. The sheet animates out when this
+ *                                  turns false, then unmounts.
+ * @param {function}  onOpenChange  Called with false when the sheet asks to
+ *                                  close: Close, overlay, Esc, swipe, or a
+ *                                  menu item chosen.
+ * @param {string}    title         Header Title. Also the dialog's name.
+ * @param {node}      children      The Body slot.
+ * @param {boolean}   menu          The Body is a menu: role=menu, arrow keys,
+ *                                  Home and End. Use with DropdownItem rows.
+ * @param {boolean}   showHandle    Figma `Show Handle`. Default true.
+ * @param {node}      footer        BottomSheet.Footer's Actions. Figma
+ *                                  `Show Footer` is true when this is given.
+ * @param {boolean}   showBack      Header `Show Back`, for a Body swapped in
+ *                                  place. Never open a second sheet.
+ * @param {function}  onBack        Back pressed.
+ * @param {"auto"|"title"|"first"} initialFocus  auto: in a menu, the checked
+ *                                  item, else the first item; otherwise the
+ *                                  title. Moving to the title is what a
+ *                                  swapped Body needs.
+ * @param {object}    returnFocusRef  Where focus goes on close. Default: the
+ *                                  element that had focus when it opened.
+ * @param {string}    closeLabel    Close's accessible name. Default "Close".
+ * @param {string}    backLabel     Back's accessible name. Default "Back".
+ * @param {Element}   container     Portal target. Default document.body.
+ * @param {boolean}   contained     Documentation frames only: draw the sheet
+ *                                  inside its positioned parent instead of
+ *                                  over the viewport, with no portal, no scroll
+ *                                  lock, no inert page and no focus moved.
+ */
+export function BottomSheet({
+  open,
+  onOpenChange,
+  title,
+  children,
+  menu = false,
+  showHandle = true,
+  footer,
+  showBack = false,
+  onBack,
+  initialFocus = "auto",
+  returnFocusRef,
+  closeLabel = "Close",
+  backLabel = "Back",
+  container,
+  contained = false,
+  className = "",
+  style,
+}) {
+  useInjectedStyles();
+  const noMotion = useReducedMotion();
+  const titleId = `pwbs${useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+  const [rendered, setRendered] = useState(!!open);
+  const [leaving, setLeaving] = useState(false);
+  const [drag, setDrag] = useState(0);
+  const [dragging, setDragging] = useState(false);
+  const sheet = useRef(null);
+  const body = useRef(null);
+  const titleRef = useRef(null);
+  const host = useRef(null);
+  const opener = useRef(null);
+  const gesture = useRef(null);
+
+  const requestClose = () => onOpenChange?.(false);
+
+  // Mount on open; on close play the exit, then unmount.
+  useEffect(() => {
+    if (open) {
+      if (typeof document !== "undefined") opener.current = document.activeElement;
+      setLeaving(false); setDrag(0); setRendered(true);
+    } else if (rendered) {
+      setLeaving(true);
+    }
+  }, [open]);
+
+  const onAnimationEnd = (e) => {
+    if (e.target !== sheet.current || !leaving) return;
+    setRendered(false); setLeaving(false); setDrag(0);
+    focusBack.current = true;
+  };
+
+  /* Return focus once the page is no longer inert. Focusing the opener from the
+     animation handler itself ran while the inert effect still held, so focus
+     fell to <body>. This effect runs after that effect's cleanup. */
+  const focusBack = useRef(false);
+
+  // While open: lock page scroll and make everything outside the sheet inert,
+  // so assistive technology and Tab see only the dialog.
+  useEffect(() => {
+    if (!rendered || !host.current || contained) return undefined;
+    const root = host.current;
+    const overflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const parent = root.parentNode;
+    const inerted = [...(parent?.children || [])].filter((n) => n !== root && !n.inert && n.tagName !== "SCRIPT" && n.tagName !== "STYLE");
+    inerted.forEach((n) => { n.inert = true; });
+    return () => {
+      document.body.style.overflow = overflow;
+      inerted.forEach((n) => { n.inert = false; });
+    };
+  }, [rendered]);
+
+  useEffect(() => {
+    if (rendered || !focusBack.current) return;
+    focusBack.current = false;
+    const back = returnFocusRef?.current || opener.current;
+    if (back && back.isConnected && typeof back.focus === "function") back.focus();
+  }, [rendered]);
+
+  // Initial focus, after the sheet is in the DOM.
+  useEffect(() => {
+    if (!rendered || leaving || !sheet.current || contained) return;
+    const items = body.current ? [...body.current.querySelectorAll(MENU_ITEMS)] : [];
+    let target = titleRef.current;
+    if (initialFocus === "first") target = items[0] || sheet.current.querySelector(FOCUSABLE) || target;
+    else if (initialFocus === "auto" && menu && items.length) target = items.find((n) => n.getAttribute("aria-checked") === "true") || items[0];
+    target?.focus({ preventScroll: true });
+  }, [rendered, leaving]);
+
+  // A Body swapped in place moves focus to the new title.
+  const firstShowBack = useRef(true);
+  useEffect(() => {
+    if (firstShowBack.current) { firstShowBack.current = false; return; }
+    if (rendered && !contained) titleRef.current?.focus({ preventScroll: true });
+  }, [showBack]);
+
+  const onKeyDown = (e) => {
+    if (e.key === "Escape") {
+      // Stop here: a sheet over an open SideNav closes the sheet only.
+      e.stopPropagation(); e.nativeEvent?.stopImmediatePropagation?.();
+      requestClose(); return;
+    }
+    if (e.key === "Tab" && sheet.current) {
+      const els = [...sheet.current.querySelectorAll(FOCUSABLE)].filter((n) => n.offsetParent !== null || n === document.activeElement);
+      if (!els.length) { e.preventDefault(); return; }
+      const first = els[0], last = els[els.length - 1];
+      if (e.shiftKey && (document.activeElement === first || document.activeElement === titleRef.current)) { e.preventDefault(); last.focus(); }
+      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
+      return;
+    }
+    if (!menu || !body.current || !body.current.contains(document.activeElement)) return;
+    const list = [...body.current.querySelectorAll(MENU_ITEMS)];
+    if (!list.length) return;
+    const here = list.indexOf(document.activeElement);
+    let next = null;
+    if (e.key === "ArrowDown") next = (here + 1) % list.length;
+    else if (e.key === "ArrowUp") next = (here - 1 + list.length) % list.length;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = list.length - 1;
+    if (next !== null) { e.preventDefault(); list[next].focus(); }
+  };
+
+  /* Swipe down to close. It starts anywhere on the sheet, but inside the Body
+     only when the Body is scrolled to the top, so it never fights the Body's
+     own scroll. It takes over only after 8px of downward travel, so a tap on a
+     row stays a tap. */
+  const onPointerDown = (e) => {
+    if (e.button !== undefined && e.button !== 0) return;
+    const inBody = body.current?.contains(e.target);
+    if (inBody && body.current.scrollTop > 0) return;
+    gesture.current = { y: e.clientY, t: performance.now(), id: e.pointerId, active: false };
+  };
+  const onPointerMove = (e) => {
+    const g = gesture.current;
+    if (!g || g.id !== e.pointerId) return;
+    const dy = e.clientY - g.y;
+    if (!g.active) {
+      if (dy < -4) { gesture.current = null; return; }
+      if (dy < 8) return;
+      g.active = true;
+      setDragging(true);
+      sheet.current?.setPointerCapture?.(e.pointerId);
+    }
+    setDrag(Math.max(0, dy));
+  };
+  const onPointerUp = (e) => {
+    const g = gesture.current;
+    gesture.current = null;
+    if (!g || !g.active) return;
+    setDragging(false);
+    const dy = Math.max(0, e.clientY - g.y);
+    const speed = dy / Math.max(1, performance.now() - g.t);
+    if (dy > L.dismissDistance || speed > L.flickSpeed) requestClose();
+    else setDrag(0);
+  };
+
+  if (!rendered || typeof document === "undefined") return null;
+
+  const slide = noMotion ? (leaving ? MOTION.fadeOut : MOTION.fadeIn) : (leaving ? MOTION.exit : MOTION.enter);
+  const dragShift = drag > 0 && !leaving;
+  const overlayOpacity = dragShift && sheet.current ? Math.max(0, 1 - drag / sheet.current.offsetHeight) : undefined;
+
+  const tree = (
+    <div ref={host} className={`pw-bottom-sheet ${className}`} data-open={!leaving || undefined}
+      style={{ position: contained ? "absolute" : "fixed", inset: 0, zIndex: contained ? 1 : 1000, display: "flex", flexDirection: "column", justifyContent: "flex-end", alignItems: "center", ...style }}>
+      <BottomSheetOverlay onClick={requestClose} animation={leaving ? MOTION.fadeOut : MOTION.fadeIn} opacity={overlayOpacity} />
+      <div ref={sheet} role="dialog" aria-modal="true" aria-labelledby={titleId}
+        onKeyDown={onKeyDown} onAnimationEnd={onAnimationEnd}
+        onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={onPointerUp} onPointerCancel={onPointerUp}
+        style={{
+          position: "relative", width: "100%", maxWidth: L.maxWidth, boxSizing: "border-box",
+          maxHeight: contained ? `calc(100% - ${L.topClearance}px)` : `calc(100dvh - ${L.topClearance}px)`,
+          display: "flex", flexDirection: "column", gap: L.sheetGap,
+          background: T.surface, boxShadow: T.shadow,
+          borderRadius: `${L.radius} ${L.radius} 0 0`,
+          animation: dragShift ? "none" : slide,
+          transform: dragShift ? `translateY(${drag}px)` : undefined,
+          transition: dragging || noMotion ? "none" : MOTION.settle,
+          touchAction: "pan-y",
+        }}>
+        <div data-part="top" style={{ display: "flex", flexDirection: "column", flexShrink: 0 }}>
+          {showHandle && <BottomSheetHandle />}
+          <BottomSheetHeader title={title} titleId={titleId} titleRef={titleRef}
+            showBack={showBack} onBack={onBack} onClose={requestClose}
+            closeLabel={closeLabel} backLabel={backLabel} />
+        </div>
+        <div ref={body} className="pw-bottom-sheet__body" data-part="body"
+          role={menu ? "menu" : undefined} aria-labelledby={menu ? titleId : undefined}
+          style={{
+            display: "flex", flexDirection: "column", gap: L.bodyGap, minHeight: 0, flex: "0 1 auto",
+            overflowY: "auto", overflowX: "hidden", overscrollBehavior: "contain",
+            padding: footer
+              ? `0 ${L.bodyPad} ${L.bodyPad}`
+              : `0 ${L.bodyPad} calc(${L.bodyPad} + env(safe-area-inset-bottom, 0px))`,
+          }}>
+          {/* Choosing a DropdownItem closes the sheet, as it closes a Dropdown. */}
+          <DropdownClose.Provider value={requestClose}>{children}</DropdownClose.Provider>
+        </div>
+        {footer && <BottomSheetFooter>{footer}</BottomSheetFooter>}
+      </div>
+    </div>
+  );
+  return contained ? tree : createPortal(tree, container || document.body);
+}
+
+export default BottomSheet;