@apliteni/apliteni-ui 0.128.0 → 0.129.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.128.0",
+  "version": "0.129.0",
   "workspaces": [
     "react"
   ],

package/react/dist/index.css

@@ -852,7 +852,7 @@
 .rx-toast-stack {
   position: fixed;
   right: var(--space-4);
-  bottom: calc(var(--space-4) + var(--ui-app-bottom-clearance, 0px));
+  bottom: var(--space-4);
   max-width: calc(100% - 2 * var(--space-4));
   z-index: var(--z-toast);
   pointer-events: none;
@@ -869,9 +869,6 @@
 }
 
 /* src/AppShell.css */
-.ui-react-app__bottom {
-  display: none;
-}
 .ui-react-app__actions {
   display: flex;
   flex-wrap: wrap;
@@ -882,66 +879,71 @@
   display: inline-flex;
   opacity: 1;
 }
-.ui-react-app__bottom .ui-nav__item {
-  min-height: 48px;
-}
 .ui-react-app:not(:has(> .ui-app__rail)) {
   grid-template-columns: minmax(0, 1fr);
 }
-.ui-react-app .ui-app__bar > .ui-app__brand {
+.ui-react-app .ui-app__bar > .ui-app__brand:not(.ui-app__brand--band) {
   flex: none;
   margin-inline-end: var(--space-2);
 }
+.ui-react-app__menu .ui-nav--side,
+.ui-react-app__menu .ui-nav--side > * {
+  width: 100%;
+}
+.ui-react-app__menu .ui-nav__item {
+  min-height: 44px;
+}
+:where(:root[data-theme=light]) .ui-react-app__menu .ui-nav__item:not(.is-danger):not(.is-active):hover {
+  background: color-mix(in srgb, var(--surface-3) 50%, transparent);
+}
+:where(:root[data-theme=light]) .ui-react-app__menu .ui-nav__item.is-active {
+  background: var(--surface-3);
+}
+.ui-react-app__band-control {
+  display: contents;
+}
 @media (max-width: 560px) {
-  :root:has(.ui-react-app__bottom) {
-    --ui-app-bottom-clearance: calc(96px + env(safe-area-inset-bottom));
-  }
-  :root:has(.ui-react-app) {
-    scroll-padding-bottom: calc(var(--space-5) + var(--ui-app-bottom-clearance, 0px));
-  }
-  .ui-react-app {
-    display: block;
+  .ui-react-app .ui-app__bar {
+    gap: var(--space-1);
+    padding-inline: var(--space-2);
   }
-  .ui-react-app > .ui-app__rail {
+  .ui-react-app .ui-app__bar-gap {
     display: none;
   }
-  :root:has(.ui-react-app__bottom) .ui-react-app .ui-app__main {
-    padding-bottom: var(--ui-app-bottom-clearance, 0px);
-  }
-  .ui-react-app .ui-app__bar {
-    padding-inline: var(--space-4);
-  }
-  .ui-react-app .ui-app__bar > .ui-app__brand {
+  .ui-react-app .ui-app__search-ic {
     display: none;
   }
-  .ui-react-app__bottom {
-    display: block;
-    position: fixed;
-    inset: auto 0 0;
-    z-index: var(--z-sticky);
-    padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));
-    background: var(--bg);
-    border-top: 1px solid var(--border);
-  }
-  .ui-react-app__bottom .ui-nav__list {
+  .ui-react-app .ui-app__search {
+    flex: 1 1 auto;
+    min-width: 56px;
+    padding-inline: var(--space-2);
+  }
+  .ui-react-app__band-control {
     display: flex;
-    flex-direction: row;
+    flex: 0 1 auto;
+    min-width: 56px;
+    max-width: min(90px, calc(100vw - 261px));
   }
-  .ui-react-app__bottom li {
-    flex: 1;
+  .ui-react-app__band-control > .ui-btn {
     min-width: 0;
+    min-height: 34px;
+    max-width: 100%;
   }
-  .ui-react-app__bottom .ui-nav__item {
-    justify-content: center;
-    flex-direction: column;
-    gap: var(--space-1);
-    padding-inline: var(--space-1);
+  .ui-react-app .ui-app__bar .toggle {
+    margin-inline-start: 1px;
+  }
+  .ui-react-app .ui-app__user--bar {
+    margin-inline-start: 2px;
+  }
+  .ui-react-app .ui-app__user-trigger {
+    min-width: 44px;
   }
-  .ui-react-app__bottom .ui-nav__label {
-    flex: none;
-    font-size: var(--text-xs);
+  .ui-react-app__band-control > .ui-btn .ui-btn__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
-  .ui-react-app__bottom .ui-nav__badge {
+  .ui-react-app .ui-app__bar > .ui-app__brand:not(.ui-app__brand--band) {
     display: none;
   }
 }

package/react/dist/index.js

@@ -3553,7 +3553,7 @@ function Toast({ children }) {
 }
 
 // src/AppShell.tsx
-import { useEffect as useEffect14, useId as useId12, useState as useState14 } from "react";
+import { useEffect as useEffect14, useId as useId12, useRef as useRef19, useState as useState14 } from "react";
 import { paletteHotkey, prism, railCollapsed } from "@apliteni/apliteni-ui";
 
 // src/SidebarNav.tsx
@@ -3751,16 +3751,26 @@ function AppShell({
   const uid = useId12();
   const [collapsed, setCollapsed] = useState14(defaultCollapsed);
   const [search, setSearch] = useState14(false);
-  const [more, setMore] = useState14(false);
+  const [menu, setMenu] = useState14(false);
+  const menuButton = useRef19(null);
   const current = path(pathname);
   const active = sections.filter((section) => current === path(section.href) || path(section.href) !== "/" && current.startsWith(`${path(section.href)}/`)).sort((a, b) => path(b.href).length - path(a.href).length)[0];
   useEffect14(() => {
     setCollapsed(railCollapsed() ?? defaultCollapsed);
   }, [defaultCollapsed]);
   useEffect14(() => {
-    setMore(false);
+    setMenu(false);
     setSearch(false);
   }, [pathname]);
+  useEffect14(() => {
+    if (!menu) return;
+    const grown = () => {
+      const button = menuButton.current;
+      if (button && getComputedStyle(button).display === "none") setMenu(false);
+    };
+    window.addEventListener("resize", grown);
+    return () => window.removeEventListener("resize", grown);
+  }, [menu]);
   useEffect14(() => {
     const hotkey = (event) => {
       if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey || event.key.toLowerCase() !== "k") return;
@@ -3780,36 +3790,17 @@ function AppShell({
     } catch {
     }
   };
-  const links = (items) => items.map((section) => {
-    const linkProps = {
-      href: section.href,
-      className: `ui-nav__item${section === active ? " is-active" : ""}`,
-      // guidelines/going-back.md, section-lit: the same row, so the same reading as
-      // the rail's. "page" here would announce the list as the page the reader is on.
-      "aria-current": section === active ? back ? "true" : "page" : void 0,
-      "aria-label": `${section.label}${section.count == null ? "" : ` ${section.count}`}`,
-      onClick: (event) => {
-        if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) setMore(false);
-      },
-      children: /* @__PURE__ */ jsxs30(Fragment12, { children: [
-        /* @__PURE__ */ jsx35("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx35(Icon, { name: section.icon }) }),
-        /* @__PURE__ */ jsx35("span", { className: "ui-nav__label", children: section.label }),
-        section.count != null && /* @__PURE__ */ jsx35("span", { className: "ui-nav__badge is-neutral", children: section.count })
-      ] })
-    };
-    return /* @__PURE__ */ jsx35("li", { children: renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx35("a", { ...linkProps }) }, section.href);
-  });
-  const sidebar = (items, label) => /* @__PURE__ */ jsx35(
+  const sidebar = (label) => /* @__PURE__ */ jsx35(
     SidebarNav,
     {
       "aria-label": label,
-      items: items.map((section) => ({ ...section, id: section.href, badge: section.count })),
+      items: sections.map((section) => ({ ...section, id: section.href, badge: section.count })),
       active: active?.href,
       activeIs: back ? "section" : "page",
       renderLink: (item, props) => {
-        const section = items.find((section2) => section2.href === item.id);
+        const section = sections.find((section2) => section2.href === item.id);
         const linkProps = { ...props, onClick: (event) => {
-          if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) setMore(false);
+          if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) setMenu(false);
         } };
         return renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx35("a", { ...linkProps });
       }
@@ -3817,8 +3808,6 @@ function AppShell({
   );
   const foldLabel = collapsed ? "Expand sidebar" : "Collapse sidebar";
   const navigable = sections.length > 1 || Boolean(back);
-  const visible = sections.length > 4 ? sections.slice(0, 3) : sections;
-  const remaining = sections.slice(visible.length);
   const initials = account.name.trim().split(/\s+/).map((part) => part[0]).slice(0, 2).join("");
   const lockup = /* @__PURE__ */ jsxs30("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
     brand ?? /* @__PURE__ */ jsx35("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
@@ -3827,7 +3816,7 @@ function AppShell({
   return /* @__PURE__ */ jsxs30("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
     navigable && /* @__PURE__ */ jsxs30("div", { className: "ui-app__rail", role: "region", "aria-label": "Sidebar", children: [
       /* @__PURE__ */ jsx35("div", { className: "ui-app__head", children: lockup }),
-      sidebar(sections, "Sections"),
+      sidebar("Sections"),
       /* @__PURE__ */ jsx35("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx35("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs30("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
         /* @__PURE__ */ jsx35("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs30("svg", { className: "ui-icon", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
           /* @__PURE__ */ jsx35("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
@@ -3839,6 +3828,23 @@ function AppShell({
     ] }),
     /* @__PURE__ */ jsxs30("div", { className: "ui-app__well", children: [
       /* @__PURE__ */ jsxs30("header", { className: "ui-app__bar", children: [
+        navigable && /* @__PURE__ */ jsxs30(Fragment12, { children: [
+          /* @__PURE__ */ jsx35(
+            Button,
+            {
+              ref: menuButton,
+              variant: "ghost",
+              icon: "menu",
+              iconOnly: true,
+              "aria-label": "Menu",
+              className: "ui-app__menu",
+              "aria-haspopup": "dialog",
+              "aria-expanded": menu,
+              onClick: () => setMenu(true)
+            }
+          ),
+          /* @__PURE__ */ jsx35("a", { className: "ui-app__brand ui-app__brand--band", href: brandHref, "aria-label": word, children: brand ?? /* @__PURE__ */ jsx35("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(`${uid}-band`, 24) } }) })
+        ] }),
         !navigable && lockup,
         /* @__PURE__ */ jsxs30("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
           /* @__PURE__ */ jsx35("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx35(Icon, { name: "search" }) }),
@@ -3847,7 +3853,7 @@ function AppShell({
           /* @__PURE__ */ jsx35("kbd", { className: "ui-cmdk__key", children: paletteHotkey() })
         ] }),
         /* @__PURE__ */ jsx35("span", { className: "ui-app__bar-gap" }),
-        bandControl,
+        bandControl && /* @__PURE__ */ jsx35("span", { className: "ui-react-app__band-control", children: bandControl }),
         /* @__PURE__ */ jsx35(ThemeToggle, {}),
         /* @__PURE__ */ jsx35("div", { className: "ui-app__user ui-app__user--bar", children: /* @__PURE__ */ jsx35(
           Dropdown,
@@ -3876,24 +3882,7 @@ function AppShell({
         /* @__PURE__ */ jsx35("div", { className: "ui-app__body", children })
       ] })
     ] }),
-    navigable && /* @__PURE__ */ jsx35("nav", { className: "ui-nav ui-react-app__bottom", "aria-label": "Sections on mobile", children: /* @__PURE__ */ jsxs30("ul", { className: "ui-nav__list", children: [
-      links(visible),
-      remaining.length > 0 && /* @__PURE__ */ jsx35("li", { children: /* @__PURE__ */ jsxs30(
-        "button",
-        {
-          type: "button",
-          className: `ui-nav__item${active && remaining.includes(active) ? " is-active" : ""}`,
-          "aria-haspopup": "dialog",
-          "aria-expanded": more,
-          onClick: () => setMore(true),
-          children: [
-            /* @__PURE__ */ jsx35("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx35(Icon, { name: "moreHorizontal" }) }),
-            /* @__PURE__ */ jsx35("span", { className: "ui-nav__label", children: "More" })
-          ]
-        }
-      ) })
-    ] }) }),
-    /* @__PURE__ */ jsx35(Drawer, { open: more, onClose: () => setMore(false), title: "More sections", side: "bottom", children: sidebar(remaining, "More sections") }),
+    navigable && /* @__PURE__ */ jsx35(Drawer, { open: menu, onClose: () => setMenu(false), title: word, side: "left", size: "sm", children: /* @__PURE__ */ jsx35("div", { className: "ui-react-app__menu", children: sidebar("Menu sections") }) }),
     /* @__PURE__ */ jsx35(CommandPalette, { ...palette ?? { groups: [{ items: sections.map((section) => ({ id: section.href, ...section })) }] }, open: search, onClose: () => setSearch(false) })
   ] });
 }
@@ -3921,7 +3910,7 @@ function EmptyState({ variant = "first-run", title, sub, icon: icon7, art, actio
 }
 
 // src/Success.tsx
-import { forwardRef as forwardRef9, useEffect as useEffect15, useRef as useRef19, useState as useState15 } from "react";
+import { forwardRef as forwardRef9, useEffect as useEffect15, useRef as useRef20, useState as useState15 } from "react";
 import { jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
 var SuccessCheck = forwardRef9(function SuccessCheck2({ variant = "line", className, ...rest }, ref) {
   const circled = variant === "circled";
@@ -3969,7 +3958,7 @@ var pieces = [
 ];
 function Countdown({ seconds, label = "Redirecting", onDone }) {
   const [remaining, setRemaining] = useState15(seconds);
-  const callback = useRef19(onDone);
+  const callback = useRef20(onDone);
   useEffect15(() => {
     callback.current = onDone;
   }, [onDone]);
@@ -4050,7 +4039,7 @@ import {
   useId as useId13,
   useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo4,
-  useRef as useRef20,
+  useRef as useRef21,
   useState as useState16
 } from "react";
 import { CHART_FLOOR, bridgeWalk, chartScale, pointTarget } from "@apliteni/apliteni-ui";
@@ -4216,16 +4205,16 @@ function Chart(props) {
   const plotHeight = height ?? HEIGHT[variant];
   const showTable = table ?? !spark;
   const uid = useId13().replace(/[^\w-]/g, "");
-  const frameEl = useRef20(null);
-  const scroller = useRef20(null);
-  const plot = useRef20(null);
-  const tipEl = useRef20(null);
-  const svgEl = useRef20(null);
-  const ignoreMouseUntil = useRef20(0);
-  const touchMoved = useRef20(false);
-  const dismissed = useRef20(null);
-  const opening = useRef20(false);
-  const pointerFocus = useRef20(false);
+  const frameEl = useRef21(null);
+  const scroller = useRef21(null);
+  const plot = useRef21(null);
+  const tipEl = useRef21(null);
+  const svgEl = useRef21(null);
+  const ignoreMouseUntil = useRef21(0);
+  const touchMoved = useRef21(false);
+  const dismissed = useRef21(null);
+  const opening = useRef21(false);
+  const pointerFocus = useRef21(false);
   const floor = useTapFloor();
   const [width, setWidth] = useState16(0);
   const [openId, setOpenId] = useState16(null);
@@ -4765,7 +4754,7 @@ var AccentPicker = forwardRef10(function AccentPicker2({
 });
 
 // src/NavTabs.tsx
-import { Fragment as Fragment14, forwardRef as forwardRef11, useEffect as useEffect17, useRef as useRef21, useImperativeHandle as useImperativeHandle2 } from "react";
+import { Fragment as Fragment14, forwardRef as forwardRef11, useEffect as useEffect17, useRef as useRef22, useImperativeHandle as useImperativeHandle2 } from "react";
 import { safeUrl, observeNavFit, revealCurrentNav, revealFocusedNav } from "@apliteni/apliteni-ui";
 import { Fragment as Fragment15, jsx as jsx40, jsxs as jsxs34 } from "react/jsx-runtime";
 var NavTabs = forwardRef11(function NavTabs2({
@@ -4778,7 +4767,7 @@ var NavTabs = forwardRef11(function NavTabs2({
   "aria-label": ariaLabel = "Tabs",
   ...rest
 }, ref) {
-  const navRef = useRef21(null);
+  const navRef = useRef22(null);
   useImperativeHandle2(ref, () => navRef.current, []);
   const signature = items.map((item) => item.id).join("\0");
   useEffect17(() => observeNavFit(navRef.current), []);

package/src/assets/icons.js

@@ -180,6 +180,10 @@ export const iconOnlyAllowed = {
   // is the glyph a reader has already met doing this everywhere else. The entry
   // is the decision — review did not infer it from the glyph looking obvious.
   download: 'export or download the rows',
+  // The phone shell's menu control, decided in #592: below 720px the icon strip goes away
+  // and one button opens the full navigation in a drawer. The three-bar glyph is the
+  // reader's own mark for this action.
+  menu: 'open the navigation drawer',
 };
 
 // The word a wordless control's name may open with. The list above says which
@@ -200,6 +204,7 @@ export const iconOnlyNames = {
   // depicts it, so a consumer naming it that way is not borrowing the tray for
   // something else.
   download: ['export', 'download'],
+  menu: ['menu'],
 };
 
 // What a glyph means when a component picks it for the reader rather than a

package/src/components/drawer.js

@@ -153,10 +153,13 @@ export function wireDrawer(root = document) {
     doc.__drawerGlobalWired = true;
     // Any [data-drawer-open="ID"] trigger opens the matching drawer.
     doc.addEventListener('click', (e) => {
-      const opener = e.target.closest?.('[data-drawer-open]');
+      // composedPath() and not target: a trigger inside an open shadow root is retargeted
+      // to its host here, and its drawer is found in the tree the trigger is in.
+      const opener = e.composedPath().find((n) => n.nodeType === 1 && n.hasAttribute('data-drawer-open'));
       if (!opener) return;
       e.preventDefault();
-      const target = doc.getElementById(opener.getAttribute('data-drawer-open'));
+      const id = opener.getAttribute('data-drawer-open');
+      const target = (opener.getRootNode().getElementById?.(id)) || doc.getElementById(id);
       if (target) openDrawer(target, opener);
     });
   }

package/src/components/overlay.js

@@ -51,20 +51,24 @@ export function focusablesIn(panel) {
   return Array.from(panel.querySelectorAll(FOCUSABLE)).filter(reachable);
 }
 
-// Hide everything *outside* `root` from AT + the tab order: walk root→body and mark each
+// Hide everything *outside* `root` from AT + the tab order: walk through a shadow
+// host when present, then to body, and mark each
 // ancestor's other children. Scrim and panel live inside the root so they stay
 // interactive; a drawer under an aria-modal alertdialog is outside it and must not be.
 function mark(page, doc, root) {
   let node = root;
-  while (node && node.parentElement && node !== doc.body) {
-    for (const sib of node.parentElement.children) {
+  while (node && node !== doc.body) {
+    const tree = node.getRootNode();
+    const parent = node.parentElement || (tree.host ? tree : null);
+    if (!parent) break;
+    for (const sib of parent.children) {
       if (sib === node) continue;
       page.marked.push([sib, sib.getAttribute('aria-hidden'), sib.hasAttribute('inert')]);
       sib.setAttribute('aria-hidden', 'true');
       sib.setAttribute('inert', '');
       sib.inert = true;
     }
-    node = node.parentElement;
+    node = parent.host || parent;
   }
 }
 
@@ -248,7 +252,7 @@ export function trapTab(panel, e) {
   if (!items.length) { e.preventDefault(); panel.focus(); return; }
   const first = items[0];
   const last = items[items.length - 1];
-  const active = (panel.ownerDocument || document).activeElement;
+  const active = panel.getRootNode().activeElement || panel.ownerDocument.activeElement;
   if (!panel.contains(active)) {
     e.preventDefault(); (e.shiftKey ? last : first).focus();
   } else if (e.shiftKey && (active === first || active === panel)) {

package/src/components/shell.js

@@ -3,9 +3,10 @@
 // wireShell() once after mounting wires the fold, the nav's groups and the reader's menu.
 // why: docs/components.md#the-page-shell
 import { topbar as productTopbar } from './topbar.js';
-import { esc, icon } from './index.js';
+import { esc, icon, button } from './index.js';
 import { sidebarNav, breadcrumbs, wireNav } from './nav.js';
 import { dropdown, wireDropdown } from './dropdown.js';
+import { drawer, wireDrawer, closeDrawer } from './drawer.js';
 import { backLink } from './back.js';
 import { prism } from '../assets/brand.js';
 import { ACCOUNT_NAV, toMenuTuple, initials } from './account-nav.js';
@@ -207,7 +208,7 @@ const readerFace = (name, email, named, markOnly = false) =>
 //
 // One block, two places: only the direction it opens is the layout's answer.
 // `portal: true` either way — the rail and the band are both sticky.
-function readerBlock({ name, email }, signOutHref, { band = false } = {}) {
+function readerBlock({ name, email }, signOutHref, { band = false, portal = true } = {}) {
   if (!name && !email) return '';
   const cls = `ui-app__user${band ? ' ui-app__user--bar' : ''}`;
   const who = [name, email].filter(Boolean).join(', ');
@@ -225,7 +226,7 @@ function readerBlock({ name, email }, signOutHref, { band = false } = {}) {
     + `</div>`;
   return `<div class="${cls}">${dropdown({
     variant: 'menu',
-    portal: true,
+    portal,
     direction: band ? 'down' : 'up',
     align: band ? 'end' : 'start',
     chevron: !band,
@@ -253,13 +254,26 @@ const searchField = ({ palette, placeholder, shortLabel }) =>
 
 // The band: search at its start, the reader at its end, beside the rail rather than
 // across the top of both. why: docs/components.md#the-page-shell
-const shellBar = (search, account, signOutHref) =>
+const shellBar = (search, account, signOutHref, lead = '') =>
   `<header class="ui-app__bar">`
+  + lead
   + (search ? searchField(search) : '')
   + `<span class="ui-app__bar-gap"></span>`
   + readerBlock(account, signOutHref, { band: true })
   + `</header>`;
 
+// Below 720px the rail is not drawn. A band holds the menu control and the brand's mark,
+// and the control opens the same rail in the kit's left drawer. Each part carries
+// `ui-app__phone`, so layout.css draws it at that width only.
+// why: docs/components.md#the-page-shell
+const menuControl = (id) => button({ label: 'Menu', variant: 'ghost', icon: 'menu', iconOnly: true })
+  .replace('<button ', `<button data-drawer-open="${id}" aria-haspopup="dialog" `)
+  .replace('class="', 'class="ui-app__menu ');
+
+const bandBrand = (word, href, uid) =>
+  `<a class="ui-app__brand ui-app__brand--band" href="${esc(safeUrl(href))}" aria-label="${esc(word)}">`
+  + `${prism(`appb-${uid}`, 24)}</a>`;
+
 // Unique-per-render suffix for the brand mark's clip id — the same reason
 // nav.js keeps a module counter. Two shells on one page must not collide.
 let _shellUid = 0;
@@ -291,6 +305,7 @@ export function appShell(options = {}) {
   // The layout's one branch, read once. Everything below asks this and not the string.
   const banded = layout === 'topbar';
   const up = back ? backLink(back) : '';
+  const menuId = `ui-app-menu-${++_shellUid}`;
   // No footer slot: the nav is places to go, and the one thing that was in it —
   // sign out — is in the reader's menu at the rail's foot.
   const rail = sidebarNav({
@@ -331,6 +346,27 @@ export function appShell(options = {}) {
   const foot = banded
     ? (fold ? `<div class="ui-app__foot">${fold}</div>` : '')
     : readerBlock(account, signOutHref);
+  // The phone's way to the same rail: the menu control, and the drawer it opens. The
+  // drawer holds a second copy of the nav and the reader, because a drawer is a dialog
+  // and the rail is a landmark; layout.css draws one or the other. The banded layout
+  // keeps its reader on the band, so its drawer has no foot.
+  const menu = menuControl(menuId);
+  const mark = bandBrand(word, brandHref, ++_shellUid);
+  const phone = `<div class="ui-app__drawer">${drawer({
+    side: 'left',
+    size: 'sm',
+    title: word,
+    id: menuId,
+    body: sidebarNav({
+      sections: [{ label: navLabel, items: nav }],
+      active,
+      activeIs: up ? 'section' : 'page',
+      ariaLabel: navLabel,
+    }),
+    // Not portalled: a panel lifted to the page would sit outside the open drawer, inert
+    // and under it, so Sign out could not be reached.
+    footer: banded ? '' : readerBlock(account, signOutHref, { portal: false }),
+  })}</div>`;
   const main = `<main class="ui-app__main${width === 'wide' ? ' ui-app__main--wide' : ''}"${maxWidth ? ` style="--ui-app-main: ${maxWidth}"` : ''}>
       ${up || (crumbs.length ? breadcrumbs({ items: crumbs }) : '')}
       ${title ? `<h1>${title}</h1>` : ''}
@@ -339,8 +375,8 @@ export function appShell(options = {}) {
     </main>`;
   // The second column is a box of its own: the band and the page are two rows of it.
   const well = banded
-    ? `<div class="ui-app__well">${shellBar(search, account, signOutHref)}${main}</div>`
-    : main;
+    ? `<div class="ui-app__well">${shellBar(search, account, signOutHref, menu + mark)}${main}</div>`
+    : `${compat ? '' : `<header class="ui-app__bar ui-app__bar--phone">${menu}${mark}</header>`}${main}`;
   const grid = `<div class="ui-app${banded ? ' ui-app--topbar' : ''}${folded ? ' is-collapsed' : ''}"${auto}>
     <div class="ui-app__rail" role="region" aria-label="Sidebar">
       ${head}
@@ -348,8 +384,11 @@ export function appShell(options = {}) {
       ${foot}
     </div>
     ${well}
+    ${phone}
   </div>`;
-  return compat ? `<div class="ui-app-page">${productTopbar(compat)}${grid}</div>` : grid;
+  return compat
+    ? `<div class="ui-app-page">${productTopbar(compat).replace('<div class="topbar__in">', `<div class="topbar__in">${menu}`)}${grid}</div>`
+    : grid;
 }
 
 // ---- Behaviour -----------------------------------------------------------
@@ -358,6 +397,9 @@ export function appShell(options = {}) {
 // keeps every shell under root out of the cookie, shells drawn there later
 // included; only `persist: true` on that root turns it back on.
 const _wiredDocs = new WeakSet();
+// The roots wireShell() was handed, per document: a resize has to find a drawer open
+// inside a shadow root, which the document's own querySelectorAll does not enter.
+const _wiredRoots = new WeakMap();
 const _unpersisted = new WeakSet();
 
 // The toggle, addressed from the rail that owns it: a fold row of a shell's own rail
@@ -369,6 +411,8 @@ const _unpersisted = new WeakSet();
 const FOLD_PATH = '.ui-app__fold-row > [data-rail-toggle]';
 const RAIL_FOLD = `.ui-app__rail ${FOLD_PATH}`;
 
+const DRAWER_LINK = '.ui-app__drawer a.ui-nav__item[href]';
+
 // Under an opted-out root? Steps out of a shadow root through its host.
 const optedOut = (node) => {
   for (let n = node; n; n = n.parentNode || n.host) if (_unpersisted.has(n)) return true;
@@ -390,13 +434,31 @@ function setRail(app, collapsed) {
 function listen(doc) {
   if (_wiredDocs.has(doc)) return;
   _wiredDocs.add(doc);
+  // A drawer left open while the window grows past the phone width would be hidden and
+  // still hold the page inert, so it closes there. Its wrapper is not drawn above that
+  // width, which is how the stylesheet's breakpoint is read without a second copy of it.
+  const view = doc.defaultView;
+  if (view) {
+    view.addEventListener('resize', () => {
+      for (const r of _wiredRoots.get(doc) || []) {
+        r.querySelectorAll('.ui-app__drawer .ui-drawer.is-open').forEach((d) => {
+          if (view.getComputedStyle(d.parentElement).display === 'none') closeDrawer(d);
+        });
+      }
+    });
+  }
   doc.addEventListener('click', (e) => {
     // A shell's own toggle only, in the head of its own rail: a stray
     // [data-rail-toggle] in the page body folds nothing. composedPath() rather
     // than target, so a shell inside an open shadow root is found. closest()
     // rather than a chain of parents, which the head band made one link longer
     // and which said nothing about what it was walking through.
-    const btn = e.composedPath().find((n) => n.nodeType === 1 && n.matches(RAIL_FOLD));
+    const path = e.composedPath();
+    // A press on a place in the phone drawer closes it. A group's toggle is a button
+    // and goes nowhere, so only a link does. why: docs/components.md#the-page-shell
+    const row = path.find((n) => n.nodeType === 1 && n.matches(DRAWER_LINK));
+    if (row) closeDrawer(row.closest('.ui-drawer'));
+    const btn = path.find((n) => n.nodeType === 1 && n.matches(RAIL_FOLD));
     const app = btn && btn.closest('.ui-app');
     if (!app) return;
     const next = !app.classList.contains('is-collapsed');
@@ -408,7 +470,6 @@ function listen(doc) {
       } catch (err) { /* a sandboxed frame: the fold works, nothing is kept */ }
     }
     // A document with no window (DOMParser, createHTMLDocument) has no CustomEvent to send.
-    const view = doc.defaultView;
     if (view) {
       app.dispatchEvent(new view.CustomEvent('ui-rail', { bubbles: true, composed: true, detail: { collapsed: next } }));
     }
@@ -420,6 +481,7 @@ export function wireShell(root = document, { persist } = {}) {
   // The reader's menu is a dropdown() like any other, so it is wired like any
   // other. Idempotent, and a shell with no account draws none to find.
   wireDropdown(root);
+  wireDrawer(root);
   // A server cannot know which key the reader holds, so the browser corrects it here —
   // off the ROOT's window, not the global one. why: docs/components.md#the-page-shell
   const here = root.nodeType === 9 ? root : root.ownerDocument;
@@ -428,6 +490,10 @@ export function wireShell(root = document, { persist } = {}) {
   for (const kbd of root.querySelectorAll('[data-palette-hotkey]')) kbd.textContent = key;
   const doc = root.nodeType === 9 ? root : root.ownerDocument;
   listen(doc);
+  if (!_wiredRoots.has(doc)) _wiredRoots.set(doc, new Set());
+  const roots = _wiredRoots.get(doc);
+  for (const r of roots) if (r !== doc && !(r.host || r).isConnected) roots.delete(r);
+  roots.add(root);
   if (persist === false) _unpersisted.add(root);
   else if (persist === true) _unpersisted.delete(root);
   const saved = railCollapsed(cookieOf(doc));

package/src/styles/layout.css

@@ -119,7 +119,7 @@
    resting step. */
 /* Re-tuned at #295, which took the light rail down a step with the page. Below 720px
    the glyph is the whole row, so it is held at text grade rather than at 1.4.11's bar —
-   stories/apps/shell-states.test.js:1708 `a resting glyph is dimmer but still legible`. */
+   stories/apps/shell-states.test.js:1535 `a resting glyph is dimmer but still legible`. */
 .ui-app__rail .ui-nav__ic svg { opacity: 0.66; }
 
 /* A destructive row of the rail is a navigation row and rests like one; the danger
@@ -139,6 +139,8 @@
   padding-top: var(--space-5);
   border-top: 1px solid var(--border);
 }
+/* A drawer's footer carries no rule above it, so the block keeps the rail's rule out. */
+.ui-app__drawer .ui-app__user { padding-top: 0; border-top: 0; }
 /* The other thing that can close a rail: where the reader's block is in the band,
    the fold's control takes its place under the same rule.
    why: docs/components.md#the-page-shell */
@@ -254,8 +256,7 @@
 .ui-app.is-collapsed .ui-app__fold .ui-app__fold-arrow { transform: scaleX(-1); }
 
 /* -- The collapsed rail --------------------------------------------------- */
-/* Each rule here has its twin in the 720px block below; nothing lays a row out
-   again. why: docs/components.md#the-page-shell */
+/* The reader's own fold, at the widths that have a rail. why: docs/components.md#the-page-shell */
 .ui-app.is-collapsed { --ui-rail-w: calc(var(--ui-nav-strip) + 2 * var(--space-4) + var(--ui-rail-rule)); }
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__cap,
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__label,
@@ -263,20 +264,17 @@
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__caret,
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-app__who,
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-dropdown__chevron,
-:where(.ui-app.is-collapsed) .ui-app__brand span { opacity: 0; pointer-events: none; }
+:where(.ui-app.is-collapsed) .ui-app__rail .ui-app__brand span { opacity: 0; pointer-events: none; }
 /* The toggle rides onto the glyph column — the two widths' own difference — and the
-   lockup goes whole, since that column is where its mark stood. The mark may only go
-   where the control arrives: below 720px the toggle is not drawn, so the 720px block
-   gives the lockup back rather than leaving an empty band with a hairline under it.
-   why: docs/components.md#the-page-shell */
+   lockup goes whole, since that column is where its mark stood. Below 720px there is
+   no rail, so none of this is drawn. why: docs/components.md#the-page-shell */
 :where(.ui-app.is-collapsed) .ui-app__head > .ui-app__fold-row { inset-inline-start: calc(var(--ui-nav-strip) - var(--ui-nav-col)); }
 /* …and only in the layout where something arrives on the mark's column. In the
    topbar layout the toggle is at the rail's foot, nothing lands where the mark
    stands, and a lockup faded out there leaves a band with nothing in it and its
-   hairline still under it — the defect the 720px block below exists to avoid. So
-   that layout keeps the mark and lets the shared rule above fold away its words.
+   hairline still under it. So that layout keeps the mark and lets the shared rule above fold away its words.
    why: docs/components.md#the-page-shell */
-:where(.ui-app:not(.ui-app--topbar).is-collapsed) .ui-app__brand { opacity: 0; visibility: hidden; pointer-events: none; }
+:where(.ui-app:not(.ui-app--topbar).is-collapsed) .ui-app__rail .ui-app__brand { opacity: 0; visibility: hidden; pointer-events: none; }
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__sub { margin-inline-start: 0; padding-inline-start: 0; border-inline-start-width: 0; }
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item:not(:has(.ui-nav__ic))::after { opacity: 0.62; }
 /* The current row's plate on the glyph column, and beside it the one thing a bare rail
@@ -502,61 +500,48 @@
   .ui-toolbar--split > :last-child { margin-inline-start: 0; align-self: start; }
 }
 
-/* -- The narrow rail ------------------------------------------------------ */
-/* Below this width the rail folds to the icon strip instead of disappearing, and
-   it is the fold the reader's own press makes — every rule here has its twin
-   above. Scoped to the shell's own rail; a sidebarNav() elsewhere keeps its
-   labels. Nothing here resizes a glyph: an icon-sizing rule inside a media query
-   is one src/styles/icon-size.test.js cannot measure, and it says so. */
+/* -- The phone shell ------------------------------------------------------ */
+/* Below this width there is no rail and no strip. A band at the top holds the menu
+   control and the brand's mark, the control opens the same rail in the kit's left
+   drawer, and the reading column takes the whole width. The band, the control and the
+   drawer exist at every width and are not drawn above it, so the rail's rows above
+   720px are the rows they were. why: docs/components.md#the-page-shell */
+.ui-app__bar--phone { display: none; }
+.ui-btn.ui-app__menu { display: none; }
+.ui-app__brand--band { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; /* a finger's box around a 24px mark */ }
+.ui-app__drawer { display: none; }
+/* The drawer panel is --bg-elevated, which --surface matches exactly in light, so nav.css's
+   plate measures 1.00:1 there. The current row and the hover wash take the rung the rail
+   takes (--surface-3), and the count keeps its --surface pill on that plate. Dark already
+   has a step and keeps it. why: docs/components.md#the-page-shell */
+:where(:root[data-theme="light"]) .ui-app__drawer .ui-nav__item:not(.is-danger):not(.is-active):hover { background: color-mix(in srgb, var(--surface-3) 50%, transparent); /* code-bg: inherit — The wash keeps the containing ground. */ }
+:where(:root[data-theme="light"]) .ui-app__drawer .ui-nav__item.is-active { background: var(--surface-3); /* code-bg: inherit — The control keeps the containing ground. */ }
 @media (max-width: 720px) {
-  .ui-app { --ui-rail-w: calc(var(--ui-nav-strip) + 2 * var(--space-4) + var(--ui-rail-rule)); }
-  /* The strip is the only layout this width has, so there is nothing to fold. */
-  .ui-app__rail .ui-app__fold-row { display: none; }
-  /* …and the foot goes with it, for the reason the head band does below: in the
-     topbar layout that box holds the toggle and nothing else, so at this width it is
-     padding and a hairline drawn over nothing. Scoped to the shell's own rail, like
-     every other rule in this block. why: docs/components.md#the-page-shell */
-  .ui-app__rail .ui-app__foot { display: none; }
-  /* …and with it the band, when the band has nothing else in it: a head with no
-     wordmark is the toggle alone, so at this width it is padding and a hairline
-     drawn over nothing. The reader's fold cannot take this rule — there the toggle
-     IS drawn. why: docs/components.md#the-page-shell */
-  .ui-app__head:not(:has(> .ui-app__brand)) { display: none; }
-  /* And where the band does hold the mark, the mark stays — at this width the press
-     that folded the rail on a desktop still reads out of the cookie, and the control
-     that would undo it is the one above. A head band faded to nothing here is an empty
-     41px box over a rule, with no way home. The reader's fold cannot take this rule —
-     there the toggle lands on the column the mark gives up.
-     why: docs/components.md#the-page-shell */
-  .ui-app__brand { opacity: 1; visibility: visible; pointer-events: auto; }
-  .ui-app__rail .ui-nav__cap,
-  .ui-app__rail .ui-nav__label,
-  .ui-app__rail .ui-nav__badge,
-  .ui-app__rail .ui-nav__caret,
-  .ui-app__rail .ui-app__who,
-  .ui-app__rail .ui-dropdown__chevron,
-  .ui-app__brand span { opacity: 0; pointer-events: none; }
-  .ui-app__rail .ui-nav__sub { margin-inline-start: 0; padding-inline-start: 0; border-inline-start-width: 0; }
-  .ui-app__rail .ui-nav__item:not(:has(.ui-nav__ic))::after { opacity: 0.62; }
-  .ui-app__rail .ui-nav__item.is-active { isolation: isolate; background: none; }
-  .ui-app__rail .ui-nav__item.is-active::before { content: ""; position: absolute; left: 0; top: 50%; width: var(--ui-nav-strip); height: 100%; border-radius: 10px; transform: translateY(-50%); /* motion: still — a mark on the current row, whose own highlight already transitions; this centres it, it does not travel */ background: var(--surface-3); /* code-bg: inherit — The plate contains no focus target. */ z-index: -1; }
-  .ui-app__rail .ui-nav__item:not(.is-danger):not(.is-active):hover { background: none; }
-  /* The one line of this block that is deliberately NOT the reader's fold: a finger
-     is the only pointer this width has, so a row and the account block are held to
-     44px. Neither floor can spread to the press, where growing the box is the one
-     thing the travel promises nothing does. why: docs/components.md#the-page-shell */
-  .ui-app__rail .ui-nav__item,
-  .ui-app__rail .ui-app__user-trigger { min-height: 44px; }
-  .ui-app__rail .ui-nav__item:is(:hover, :focus-visible) > .ui-nav__label,
-  .ui-app__rail .ui-app__user-trigger:is(:hover, :focus-visible) > .ui-app__who { position: fixed; left: calc(var(--ui-rail-w) + var(--space-2)); z-index: var(--z-dropdown); width: max-content; max-width: 15rem; margin-block: -7px; padding: 6px 10px; border: 1px solid var(--float-edge); box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop); border-radius: var(--radius-xs); background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ color: var(--strong); opacity: 1; pointer-events: none; }
-  @supports (anchor-name: --a) and (anchor-scope: --a) {
-    .ui-app { anchor-scope: --ui-rail; }
-    .ui-app__rail { anchor-name: --ui-rail; }
-    .ui-app__rail .ui-nav__item,
-    .ui-app__rail .ui-app__user-trigger { anchor-name: --ui-rail-row; anchor-scope: --ui-rail-row; }
-    .ui-app__rail .ui-nav__item:is(:hover, :focus-visible) > .ui-nav__label,
-    .ui-app__rail .ui-app__user-trigger:is(:hover, :focus-visible) > .ui-app__who { position-anchor: --ui-rail-row; left: calc(anchor(--ui-rail right) + var(--space-2)); top: anchor(top); bottom: anchor(bottom); align-self: center; margin-block: 0; }
-  }
+  /* A column, not a grid: the band sticks to the top of the shell, and a sticky grid
+     item sticks only inside its own row. */
+  .ui-app { display: flex; flex-direction: column; }
+  .ui-app > .ui-app__rail { display: none; }
+  .ui-app__well { flex: 1 1 auto; }
+  .ui-app > .ui-app__main { flex: 1 1 auto; }
+  .ui-app > .ui-app__bar--phone { display: flex; }
+  .ui-btn.ui-app__menu { display: inline-flex; }
+  .ui-app__brand--band { display: flex; }
+  /* The menu control stands at the band's start with the band's inset beside it. */
+  .ui-app__bar { padding-inline: var(--space-2) var(--space-4); }
+  /* The drawer paints itself and sits out of the flow, so its wrapper takes no height. */
+  .ui-app__drawer { display: block; }
+  /* The rail's rows are the drawer's rows: the column fills the panel, and the foot
+     starts at the panel's edge like the rows above it. */
+  .ui-app__drawer .ui-nav--side,
+  .ui-app__drawer .ui-nav--side > * { width: 100%; }
+  /* The panel's title names the list, so the section's own caption stays out. */
+  .ui-app__drawer .ui-nav__cap { display: none; }
+  .ui-app__drawer .ui-drawer__footer { justify-content: flex-start; }
+  .ui-app__drawer .ui-app__user { width: 100%; }
+  /* A finger is the only pointer this width has, so a row and the account block are
+     held to 44px. why: docs/components.md#the-page-shell */
+  .ui-app__drawer .ui-nav__item,
+  .ui-app__drawer .ui-app__user-trigger { min-height: 44px; }
   .ui-app__main { padding: 28px var(--space-4) 56px; }
   .ui-app__main h1 { font-size: calc(var(--text-xl) + 3px); }
   /* A settings row is label-beside-control down to the width where the control
@@ -733,16 +718,3 @@
     forced-color-adjust: auto; background: Canvas; color: CanvasText; border-color: CanvasText;
   }
 }
-@media (forced-colors: active) and (max-width: 720px) {
-  .ui-app .ui-app__rail .ui-nav__item:is(.is-active, .is-current) { isolation: isolate; background: none !important; }
-  .ui-app .ui-app__rail .ui-nav__item.is-current:not(.is-active)::before {
-    content: ""; position: absolute; left: 0; top: 50%; width: var(--ui-nav-strip); height: 100%; border-radius: 10px;
-    transform: translateY(-50%);
-    z-index: -1;
-  }
-  .ui-app .ui-app__rail .ui-nav__item.is-current:not(.is-active):not(.is-disabled)::before { background: Highlight; }
-  .ui-app .ui-app__rail .ui-nav__item.is-current.is-disabled:not(.is-active)::before { background: GrayText; }
-  .ui-app .ui-app__rail .ui-nav__item:is(.is-active, .is-current):is(:hover, :focus-visible) > .ui-nav__label {
-    forced-color-adjust: auto; background: Canvas; color: CanvasText; border-color: CanvasText;
-  }
-}

package/src/styles/topbar.css

@@ -252,6 +252,15 @@
     padding: var(--space-1) var(--space-3) 3px;
   }
   .topbar__in > .brand { grid-area: 1 / 1 / 2 / 3; justify-self: start; }
+  /* With the shell's menu control on the band it takes the first column and the brand
+     the next, so the switch row below spans both. */
+  .topbar__in:has(> .ui-app__menu) { grid-template-columns: max-content max-content minmax(0, 1fr) auto auto; }
+  .topbar__in > .ui-app__menu { grid-area: 1 / 1; margin-inline-end: var(--space-2); }
+  .topbar__in:has(> .ui-app__menu) > .brand { grid-area: 1 / 2 / 2 / 4; }
+  .topbar__in:has(> .ui-app__menu) > .toggle { grid-area: 1 / 4; }
+  .topbar__in:has(> .ui-app__menu) > .acct { grid-area: 1 / 5; }
+  .topbar__in:has(> .ui-app__menu) > .dtsw { grid-area: 2 / 1 / 3 / 3; }
+  .topbar__in:has(> .ui-app__menu) > .vsw { grid-area: 2 / 3 / 3 / -1; }
   .topbar__in > .toggle { grid-area: 1 / 3; justify-self: end; }
   /* The 8px beside the account is its own margin, so a hidden account leaves no gap and
      the theme switch ends on the inset. */