@campminder/components 0.1.0 → 0.3.0

package/README.md

@@ -1,5 +1,8 @@
 # @campminder/components
 
+> Published on public npm. Install and render: [`docs/consuming-the-shell.md`](../../docs/consuming-the-shell.md).
+> Working in here: [`CONTRIBUTING.md`](../../CONTRIBUTING.md).
+
 The Campminder chrome: left nav, top bar, super-user banner. Lit web components,
 composition-agnostic, rendering only what they are handed.
 
@@ -196,3 +199,36 @@ fails loudly rather than silently rendering an empty banner.
 
 > Components render themselves; the shell owns layout. No component may touch
 > `document.body`, `document.head`, or query for a sibling.
+
+## Dismissing the side-nav flyout
+
+`<cm-side-nav>` exposes exactly one dismissal entry point:
+
+```ts
+dismissFlyout(restoreFocus: boolean): void
+```
+
+It closes the flyout when one is open and is a no-op when none is. Every trigger
+routes through it — the flyout's own Escape and shift-Tab paths, the navigation's
+mouseleave, the `cm-mega-menu-close` event (which now carries
+`detail.restoreFocus`), and the host shell's page-level Escape and outside pointer
+press — so the focus rule below is applied in one place and no trigger can bypass
+it.
+
+**The focus rule.** Focus moves only when `restoreFocus` is true _and_ focus is
+currently inside the flyout; then it goes to the category control that opened the
+flyout, falling back to the navigation's collapse control when that category
+control no longer exists. Focus is never left on the document body, and is never
+pulled into the navigation from somewhere else on the page — a person typing in a
+form field, or pressing a pointer outside the flyout, keeps the focus they have.
+
+Two consequences worth keeping in mind when changing this code:
+
+- The focus target is read **before** the open-category state is cleared. The
+  target is found via the `category-hovered` class, which is derived from that
+  state; clearing first leaves nothing to find and silently reintroduces the
+  dropped-focus bug.
+- Page-level Escape and outside-pointer listening belongs to the **shell**, which
+  calls `dismissFlyout` on each slotted navigation — `true` for Escape, `false`
+  for an outside pointer press. This component registers nothing on `document` or
+  `window`, per the rule above, and `mega-menu-isolation.test.ts` observes that.

package/dist/{property-B5JHHBCF.js → shell-tokens-BjECzZvL.js}

@@ -22,7 +22,7 @@ let it = class {
     return this.cssText;
   }
 };
-const at = (r) => new it(typeof r == "string" ? r : r + "", void 0, B), Ot = (r, ...t) => {
+const rt = (r) => new it(typeof r == "string" ? r : r + "", void 0, B), Mt = (r, ...t) => {
   const e = r.length === 1 ? r[0] : t.reduce((s, i, o) => s + ((n) => {
     if (n._$cssResult$ === !0) return n.cssText;
     if (typeof n == "number") return n;
@@ -35,17 +35,17 @@ const at = (r) => new it(typeof r == "string" ? r : r + "", void 0, B), Ot = (r,
     const s = document.createElement("style"), i = H.litNonce;
     i !== void 0 && s.setAttribute("nonce", i), s.textContent = e.cssText, r.appendChild(s);
   }
-}, Z = I ? (r) => r : (r) => r instanceof CSSStyleSheet ? ((t) => {
+}, F = I ? (r) => r : (r) => r instanceof CSSStyleSheet ? ((t) => {
   let e = "";
   for (const s of t.cssRules) e += s.cssText;
-  return at(e);
+  return rt(e);
 })(r) : r;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: ct, defineProperty: dt, getOwnPropertyDescriptor: pt, getOwnPropertyNames: ut, getOwnPropertySymbols: $t, getPrototypeOf: _t } = Object, f = globalThis, J = f.trustedTypes, ft = J ? J.emptyScript : "", D = f.reactiveElementPolyfillSupport, w = (r, t) => r, N = { toAttribute(r, t) {
+const { is: ct, defineProperty: dt, getOwnPropertyDescriptor: pt, getOwnPropertyNames: ut, getOwnPropertySymbols: $t, getPrototypeOf: _t } = Object, f = globalThis, Z = f.trustedTypes, ft = Z ? Z.emptyScript : "", k = f.reactiveElementPolyfillSupport, w = (r, t) => r, N = { toAttribute(r, t) {
   switch (t) {
     case Boolean:
       r = r ? ft : null;
@@ -73,7 +73,7 @@ const { is: ct, defineProperty: dt, getOwnPropertyDescriptor: pt, getOwnProperty
       }
   }
   return e;
-} }, q = (r, t) => !ct(r, t), K = { attribute: !0, type: String, converter: N, reflect: !1, useDefault: !1, hasChanged: q };
+} }, V = (r, t) => !ct(r, t), J = { attribute: !0, type: String, converter: N, reflect: !1, useDefault: !1, hasChanged: V };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), f.litPropertyMetadata ?? (f.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 let v = class extends HTMLElement {
   static addInitializer(t) {
@@ -82,7 +82,7 @@ let v = class extends HTMLElement {
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(t, e = K) {
+  static createProperty(t, e = J) {
     if (e.state && (e.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((e = Object.create(e)).wrapped = !0), this.elementProperties.set(t, e), !e.noAccessor) {
       const s = Symbol(), i = this.getPropertyDescriptor(t, s, e);
       i !== void 0 && dt(this.prototype, t, i);
@@ -100,7 +100,7 @@ let v = class extends HTMLElement {
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(t) {
-    return this.elementProperties.get(t) ?? K;
+    return this.elementProperties.get(t) ?? J;
   }
   static _$Ei() {
     if (this.hasOwnProperty(w("elementProperties"))) return;
@@ -129,8 +129,8 @@ let v = class extends HTMLElement {
     const e = [];
     if (Array.isArray(t)) {
       const s = new Set(t.flat(1 / 0).reverse());
-      for (const i of s) e.unshift(Z(i));
-    } else t !== void 0 && e.push(Z(t));
+      for (const i of s) e.unshift(F(i));
+    } else t !== void 0 && e.push(F(t));
     return e;
   }
   static _$Eu(t, e) {
@@ -202,7 +202,7 @@ let v = class extends HTMLElement {
     var n;
     if (t !== void 0) {
       const a = this.constructor;
-      if (i === !1 && (o = this[t]), s ?? (s = a.getPropertyOptions(t)), !((s.hasChanged ?? q)(o, e) || s.useDefault && s.reflect && o === ((n = this._$Ej) == null ? void 0 : n.get(t)) && !this.hasAttribute(a._$Eu(t, s)))) return;
+      if (i === !1 && (o = this[t]), s ?? (s = a.getPropertyOptions(t)), !((s.hasChanged ?? V)(o, e) || s.useDefault && s.reflect && o === ((n = this._$Ej) == null ? void 0 : n.get(t)) && !this.hasAttribute(a._$Eu(t, s)))) return;
       this.C(t, e, s);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
@@ -278,18 +278,18 @@ let v = class extends HTMLElement {
   firstUpdated(t) {
   }
 };
-v.elementStyles = [], v.shadowRootOptions = { mode: "open" }, v[w("elementProperties")] = /* @__PURE__ */ new Map(), v[w("finalized")] = /* @__PURE__ */ new Map(), D == null || D({ ReactiveElement: v }), (f.reactiveElementVersions ?? (f.reactiveElementVersions = [])).push("2.1.2");
+v.elementStyles = [], v.shadowRootOptions = { mode: "open" }, v[w("elementProperties")] = /* @__PURE__ */ new Map(), v[w("finalized")] = /* @__PURE__ */ new Map(), k == null || k({ ReactiveElement: v }), (f.reactiveElementVersions ?? (f.reactiveElementVersions = [])).push("2.1.2");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const C = globalThis, F = (r) => r, R = C.trustedTypes, G = R ? R.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, rt = "$lit$", _ = `lit$${Math.random().toFixed(9).slice(2)}$`, nt = "?" + _, At = `<${nt}>`, g = document, P = () => g.createComment(""), U = (r) => r === null || typeof r != "object" && typeof r != "function", V = Array.isArray, mt = (r) => V(r) || typeof (r == null ? void 0 : r[Symbol.iterator]) == "function", j = `[ 	
-\f\r]`, b = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Q = /-->/g, X = />/g, A = RegExp(`>|${j}(?:([^\\s"'>=/]+)(${j}*=${j}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), Y = /'/g, tt = /"/g, ot = /^(?:script|style|textarea|title)$/i, yt = (r) => (t, ...e) => ({ _$litType$: r, strings: t, values: e }), Ht = yt(1), E = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), et = /* @__PURE__ */ new WeakMap(), m = g.createTreeWalker(g, 129);
-function ht(r, t) {
-  if (!V(r) || !r.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return G !== void 0 ? G.createHTML(t) : t;
+const C = globalThis, K = (r) => r, R = C.trustedTypes, Y = R ? R.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, nt = "$lit$", _ = `lit$${Math.random().toFixed(9).slice(2)}$`, ot = "?" + _, At = `<${ot}>`, g = document, P = () => g.createComment(""), U = (r) => r === null || typeof r != "object" && typeof r != "function", q = Array.isArray, mt = (r) => q(r) || typeof (r == null ? void 0 : r[Symbol.iterator]) == "function", D = `[ 	
+\f\r]`, b = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, G = /-->/g, Q = />/g, A = RegExp(`>|${D}(?:([^\\s"'>=/]+)(${D}*=${D}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), X = /'/g, tt = /"/g, ht = /^(?:script|style|textarea|title)$/i, yt = (r) => (t, ...e) => ({ _$litType$: r, strings: t, values: e }), Tt = yt(1), E = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), et = /* @__PURE__ */ new WeakMap(), m = g.createTreeWalker(g, 129);
+function at(r, t) {
+  if (!q(r) || !r.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return Y !== void 0 ? Y.createHTML(t) : t;
 }
 const gt = (r, t) => {
   const e = r.length - 1, s = [];
@@ -297,11 +297,11 @@ const gt = (r, t) => {
   for (let a = 0; a < e; a++) {
     const h = r[a];
     let c, p, l = -1, u = 0;
-    for (; u < h.length && (n.lastIndex = u, p = n.exec(h), p !== null); ) u = n.lastIndex, n === b ? p[1] === "!--" ? n = Q : p[1] !== void 0 ? n = X : p[2] !== void 0 ? (ot.test(p[2]) && (i = RegExp("</" + p[2], "g")), n = A) : p[3] !== void 0 && (n = A) : n === A ? p[0] === ">" ? (n = i ?? b, l = -1) : p[1] === void 0 ? l = -2 : (l = n.lastIndex - p[2].length, c = p[1], n = p[3] === void 0 ? A : p[3] === '"' ? tt : Y) : n === tt || n === Y ? n = A : n === Q || n === X ? n = b : (n = A, i = void 0);
+    for (; u < h.length && (n.lastIndex = u, p = n.exec(h), p !== null); ) u = n.lastIndex, n === b ? p[1] === "!--" ? n = G : p[1] !== void 0 ? n = Q : p[2] !== void 0 ? (ht.test(p[2]) && (i = RegExp("</" + p[2], "g")), n = A) : p[3] !== void 0 && (n = A) : n === A ? p[0] === ">" ? (n = i ?? b, l = -1) : p[1] === void 0 ? l = -2 : (l = n.lastIndex - p[2].length, c = p[1], n = p[3] === void 0 ? A : p[3] === '"' ? tt : X) : n === tt || n === X ? n = A : n === G || n === Q ? n = b : (n = A, i = void 0);
     const $ = n === A && r[a + 1].startsWith("/>") ? " " : "";
-    o += n === b ? h + At : l >= 0 ? (s.push(c), h.slice(0, l) + rt + h.slice(l) + _ + $) : h + _ + (l === -2 ? a : $);
+    o += n === b ? h + At : l >= 0 ? (s.push(c), h.slice(0, l) + nt + h.slice(l) + _ + $) : h + _ + (l === -2 ? a : $);
   }
-  return [ht(r, o + (r[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), s];
+  return [at(r, o + (r[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), s];
 };
 class x {
   constructor({ strings: t, _$litType$: e }, s) {
@@ -315,11 +315,11 @@ class x {
     }
     for (; (i = m.nextNode()) !== null && h.length < a; ) {
       if (i.nodeType === 1) {
-        if (i.hasAttributes()) for (const l of i.getAttributeNames()) if (l.endsWith(rt)) {
+        if (i.hasAttributes()) for (const l of i.getAttributeNames()) if (l.endsWith(nt)) {
           const u = p[n++], $ = i.getAttribute(l).split(_), M = /([.?@])?(.*)/.exec(u);
-          h.push({ type: 1, index: o, name: M[2], strings: $, ctor: M[1] === "." ? Et : M[1] === "?" ? St : M[1] === "@" ? bt : k }), i.removeAttribute(l);
+          h.push({ type: 1, index: o, name: M[2], strings: $, ctor: M[1] === "." ? Et : M[1] === "?" ? St : M[1] === "@" ? bt : L }), i.removeAttribute(l);
         } else l.startsWith(_) && (h.push({ type: 6, index: o }), i.removeAttribute(l));
-        if (ot.test(i.tagName)) {
+        if (ht.test(i.tagName)) {
           const l = i.textContent.split(_), u = l.length - 1;
           if (u > 0) {
             i.textContent = R ? R.emptyScript : "";
@@ -327,7 +327,7 @@ class x {
             i.append(l[u], P());
           }
         }
-      } else if (i.nodeType === 8) if (i.data === nt) h.push({ type: 2, index: o });
+      } else if (i.nodeType === 8) if (i.data === ot) h.push({ type: 2, index: o });
       else {
         let l = -1;
         for (; (l = i.data.indexOf(_, l + 1)) !== -1; ) h.push({ type: 7, index: o }), l += _.length - 1;
@@ -408,7 +408,7 @@ class O {
   }
   $(t) {
     var o;
-    const { values: e, _$litType$: s } = t, i = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = x.createElement(ht(s.h, s.h[0]), this.options)), s);
+    const { values: e, _$litType$: s } = t, i = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = x.createElement(at(s.h, s.h[0]), this.options)), s);
     if (((o = this._$AH) == null ? void 0 : o._$AD) === i) this._$AH.p(e);
     else {
       const n = new vt(i, this), a = n.u(this.options);
@@ -420,7 +420,7 @@ class O {
     return e === void 0 && et.set(t.strings, e = new x(t)), e;
   }
   k(t) {
-    V(this._$AH) || (this._$AH = [], this._$AR());
+    q(this._$AH) || (this._$AH = [], this._$AR());
     const e = this._$AH;
     let s, i = 0;
     for (const o of t) i === e.length ? e.push(s = new O(this.O(P()), this.O(P()), this, this.options)) : s = e[i], s._$AI(o), i++;
@@ -429,8 +429,8 @@ class O {
   _$AR(t = this._$AA.nextSibling, e) {
     var s;
     for ((s = this._$AP) == null ? void 0 : s.call(this, !1, !0, e); t !== this._$AB; ) {
-      const i = F(t).nextSibling;
-      F(t).remove(), t = i;
+      const i = K(t).nextSibling;
+      K(t).remove(), t = i;
     }
   }
   setConnected(t) {
@@ -438,7 +438,7 @@ class O {
     this._$AM === void 0 && (this._$Cv = t, (e = this._$AP) == null || e.call(this, t));
   }
 }
-class k {
+class L {
   get tagName() {
     return this.element.tagName;
   }
@@ -463,7 +463,7 @@ class k {
     t === d ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
   }
 }
-class Et extends k {
+class Et extends L {
   constructor() {
     super(...arguments), this.type = 3;
   }
@@ -471,7 +471,7 @@ class Et extends k {
     this.element[this.name] = t === d ? void 0 : t;
   }
 }
-class St extends k {
+class St extends L {
   constructor() {
     super(...arguments), this.type = 4;
   }
@@ -479,7 +479,7 @@ class St extends k {
     this.element.toggleAttribute(this.name, !!t && t !== d);
   }
 }
-class bt extends k {
+class bt extends L {
   constructor(t, e, s, i, o) {
     super(t, e, s, i, o), this.type = 5;
   }
@@ -504,8 +504,8 @@ class wt {
     S(this, t);
   }
 }
-const z = C.litHtmlPolyfillSupport;
-z == null || z(x, O), (C.litHtmlVersions ?? (C.litHtmlVersions = [])).push("3.3.3");
+const j = C.litHtmlPolyfillSupport;
+j == null || j(x, O), (C.litHtmlVersions ?? (C.litHtmlVersions = [])).push("3.3.3");
 const Ct = (r, t, e) => {
   const s = (e == null ? void 0 : e.renderBefore) ?? t;
   let i = s._$litPart$;
@@ -548,15 +548,15 @@ class T extends v {
 }
 var st;
 T._$litElement$ = !0, T.finalized = !0, (st = y.litElementHydrateSupport) == null || st.call(y, { LitElement: T });
-const L = y.litElementPolyfillSupport;
-L == null || L({ LitElement: T });
+const z = y.litElementPolyfillSupport;
+z == null || z({ LitElement: T });
 (y.litElementVersions ?? (y.litElementVersions = [])).push("4.2.2");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Tt = (r) => (t, e) => {
+const Nt = (r) => (t, e) => {
   e !== void 0 ? e.addInitializer(() => {
     customElements.define(r, t);
   }) : customElements.define(r, t);
@@ -566,7 +566,7 @@ const Tt = (r) => (t, e) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Pt = { attribute: !0, type: String, converter: N, reflect: !1, hasChanged: q }, Ut = (r = Pt, t, e) => {
+const Pt = { attribute: !0, type: String, converter: N, reflect: !1, hasChanged: V }, Ut = (r = Pt, t, e) => {
   const { kind: s, metadata: i } = e;
   let o = globalThis.litPropertyMetadata.get(i);
   if (o === void 0 && globalThis.litPropertyMetadata.set(i, o = /* @__PURE__ */ new Map()), s === "setter" && ((r = Object.create(r)).wrapped = !0), o.set(e.name, r), s === "accessor") {
@@ -587,17 +587,21 @@ const Pt = { attribute: !0, type: String, converter: N, reflect: !1, hasChanged:
   }
   throw Error("Unsupported decorator location: " + s);
 };
-function Nt(r) {
+function Rt(r) {
   return (t, e) => typeof e == "object" ? Ut(r, t, e) : ((s, i, o) => {
     const n = i.hasOwnProperty(o);
     return i.constructor.createProperty(o, s), n ? Object.getOwnPropertyDescriptor(i, o) : void 0;
   })(r, t, e);
 }
+const xt = "--cm-shell-font-family", Lt = rt(
+  `var(${xt}, 'General Sans', system-ui, sans-serif)`
+);
 export {
   d as A,
+  Lt as S,
   T as a,
-  Ht as b,
-  Ot as i,
-  Nt as n,
-  Tt as t
+  Tt as b,
+  Mt as i,
+  Rt as n,
+  Nt as t
 };

package/dist/shell-tokens.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Shell-wide design tokens shared by every chrome component's stylesheet.
+ *
+ * `mega-menu-layout.ts` is the precedent: a value two or more stylesheets must
+ * agree on gets exactly one home, because the failure mode of disagreement is
+ * silent. A font is worse than a width that way — a stale copy renders, it just
+ * renders wrong, and nothing in the build notices.
+ */
+/**
+ * The custom property a host document sets to choose the shell's typeface.
+ *
+ * Exported as a string (not just baked into {@link SHELL_FONT_FAMILY}) so the
+ * guard script and tests can assert against one spelling instead of a literal
+ * they'd have to keep in sync by hand.
+ */
+export declare const SHELL_FONT_FAMILY_VAR = "--cm-shell-font-family";
+/**
+ * The shell's font stack, as every component's `:host` should declare it.
+ *
+ * Deliberately a `var()` with a fallback chain rather than a literal. Two
+ * properties of that shape are load-bearing:
+ *
+ * 1. **It only ever reads `--cm-shell-font-family`, never assigns it.** A host
+ *    that has not loaded General Sans sets the property and wins. If any
+ *    `:host` rule in this package assigned it instead, that declaration would
+ *    beat the host's and the override would be dead on arrival.
+ * 2. **Naming General Sans here, rather than shipping the font, is the whole
+ *    mechanism.** `@font-face` is document-scoped, not shadow-scoped, so faces
+ *    the host registers are already reachable from inside these shadow roots —
+ *    the shell only has to ask for them by name. This is the same conclusion
+ *    `SideNav.styles.ts`'s port notes reached when they deleted the upstream
+ *    `@import url(fonts.googleapis.com/...)`: a font is something the shell
+ *    should provide, not something a component fetches for itself.
+ *
+ * Vendoring the font files here would undo both. The consumer already
+ * self-hosts them, and a second copy re-inherits the base-path 404 that
+ * AB#26011 fixed downstream.
+ */
+export declare const SHELL_FONT_FAMILY: import('lit').CSSResult;

package/dist/shell-tokens.test.d.ts

@@ -0,0 +1 @@
+

package/dist/side-nav/MegaMenu.d.ts

@@ -25,6 +25,15 @@ export declare class MegaMenu extends LitElement {
     disconnectedCallback(): void;
     private handleKeyDown;
     private get categoryData();
+    /**
+     * The close event keeps its name, `bubbles` and `composed` flags; `detail` is
+     * new and carries the caller's focus intent onward to `<cm-side-nav>`'s
+     * `dismissFlyout()`, which is the one place the focus rule is applied. Both
+     * keyboard paths ask for restoration — they are the paths where focus is inside
+     * the flyout and would otherwise be dropped on the document body. The close
+     * button asks too; it is harmless when focus is not inside, because
+     * `dismissFlyout` only moves focus that actually sits in the flyout.
+     */
     private handleCloseMegaMenu;
     /**
      * Packs menu items into as many 248px columns as the container's own
@@ -40,7 +49,6 @@ export declare class MegaMenu extends LitElement {
      */
     private setMenuItemsContainerWidth;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
-    private renderLeaf;
     render(): import('lit').TemplateResult<1> | null;
 }
 declare global {

package/dist/side-nav/MegaMenuMobile.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+import { MenuTree } from '@campminder/menu-tree';
+
+/**
+ * `<cm-mega-menu-mobile>` — the mobile drill-down for a category with
+ * sub-categories, built new for Floor 5D (AB#26231) rather than ported.
+ *
+ * Upstream's `MegaMenuMobile` drove this through `MobileModalController`
+ * (rewrites `meta[name=viewport]`, five `document`-level touch listeners,
+ * `document.body` scroll-lock) and `showMobileSubmenu` / `activeMobileCategory`
+ * state that Floor 4 never carried over. None of that comes across — see
+ * `AGENTS.md`'s one rule and the plan's Floor 5D section. This component only
+ * renders the content for whichever category `<cm-side-nav>` has drilled into;
+ * `<cm-side-nav>` owns the `activeMobileCategoryId` state and the overlay/backdrop
+ * chrome around it, the same split `<cm-mega-menu>` has with its hover state.
+ *
+ * `tree` + `categoryId` match `<cm-mega-menu>`'s shape deliberately — matching on
+ * `id`, never on the terminology-resolved `label`.
+ */
+export declare class MegaMenuMobile extends LitElement {
+    static readonly styles: import('lit').CSSResult[];
+    tree: MenuTree;
+    categoryId: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleKeyDown;
+    private get categoryData();
+    /**
+     * Requests the host go back to the main mobile menu list. Named `-back`, not
+     * `-close`, because it does not dismiss the mobile overlay itself — only
+     * `<cm-side-nav>`'s own toggle/backdrop does that (see its doc comment).
+     */
+    private handleBack;
+    /**
+     * Required, not decorative: drilling in removes the category button focus
+     * was on from the DOM (it belonged to the main list, now unmounted), so
+     * without this, focus is dropped onto the document body.
+     */
+    firstUpdated(): void;
+    render(): import('lit').TemplateResult<1> | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cm-mega-menu-mobile': MegaMenuMobile;
+    }
+}

package/dist/side-nav/MegaMenuMobile.styles.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Styles for `<cm-mega-menu-mobile>`, new for Floor 5D (AB#26231) — see that
+ * file's doc comment for why this is a rewrite, not a port.
+ *
+ * `--color-section-bg` is one of the four tokens the plan reserved on
+ * `SideNavStyles`'s `:host` for this floor (verified 2026-09-04 that upstream's
+ * only consumers of it are the mobile stylesheets); it pierces the shadow
+ * boundary from `<cm-side-nav>` the same way `--cm-side-nav-width` does for
+ * `MegaMenuStyles`.
+ */
+export declare const MegaMenuMobileStyles: import('lit').CSSResult;

package/dist/side-nav/SideNav.d.ts

@@ -5,13 +5,58 @@ import { MenuTree } from '@campminder/menu-tree';
  * `<cm-side-nav>` — the left navigation.
  *
  * Ported 2026-09-02 from core-js's `SideNav.ts` (`<side-nav>`), core rendering path,
- * with the desktop mega-menu flyout added 2026-09-04 (Floor 5) — mounted inside
+ * with the desktop mega-menu flyout added 2026-09-04 (Floor 5), and the mobile
+ * drill-down variant added 2026-09-17 (Floor 5D, AB#26231) — both mounted inside
  * this component's own shadow root, not slotted; see the render() seam note below.
- * Mobile and the search-bar integration remain out of scope for both floors.
+ * The search-bar integration remains out of scope.
+ *
+ * Floor 5D renders both the desktop flyout and the mobile drill-down on every
+ * render and lets `SideNavStyles`'s `@media (max-width: ${MOBILE_BREAKPOINT_PX}px)`
+ * decide which is displayed — see that file's header. `mega-menu-layout.ts`'s
+ * `MOBILE_BREAKPOINT_PX` is the one place that number lives; both that CSS rule and
+ * the `matchMedia` query below read it, so they cannot silently disagree about
+ * where the line is.
+ *
+ * The inactive variant gets `aria-hidden` from `isNarrowViewport`, which
+ * `initMobileMediaQuery()`/`teardownMobileMediaQuery()` (below) keep live via a
+ * `matchMedia` `change` listener — a first pass at this floor used a one-time
+ * `window.innerWidth` read instead, which is wrong: CSS re-evaluates its media
+ * query continuously, so a viewport crossing the breakpoint after first render
+ * (a desktop resize, a tablet rotation) would have left `aria-hidden` pointing at
+ * the *previous* state, exposing the hidden variant to assistive technology and
+ * suppressing the visible one — worse than omitting the attribute. `matchMedia`
+ * here drives only that attribute; it does not gate which variant is
+ * *constructed* (both still always render) and is not what decides which one is
+ * visually shown (the CSS media query still is). Guarded for `matchMedia` being
+ * absent — true of this repo's jsdom, and kept defensive elsewhere — by falling
+ * back to the same static `window.innerWidth` read, un-updating, rather than
+ * throwing. The listener is added in `connectedCallback` and removed in
+ * `disconnectedCallback`, so it never outlives the element and does not touch
+ * `document`/`window`/`document.body` — it targets the `MediaQueryList` object
+ * `matchMedia()` returns, not those globals, so it does not trip AC-8's
+ * isolation guard (`mega-menu-isolation.test.ts`).
  */
 export declare class SideNav extends LitElement {
     static readonly styles: import('lit').CSSResult[];
     private hoveredCategory;
+    /**
+     * Floor 5D's drill-down state machine, built from scratch — Floor 4 never
+     * ported `showMobileSubmenu` / `activeMobileCategory`, so there was nothing
+     * here to adapt. `mobileMenuOpen` is the mobile overlay itself (opened from
+     * `.menu-toggle`); `activeMobileCategoryId` is which category, if any, the
+     * overlay has drilled into. Deliberately two separate booleans/ids rather
+     * than one union, so "overlay open, showing the main list" and "overlay
+     * open, showing a drill-down" are both representable without a sentinel.
+     */
+    private mobileMenuOpen;
+    private activeMobileCategoryId;
+    /**
+     * Whether the mobile variant is the one CSS is currently showing. Kept live by
+     * `matchMedia`'s `change` event where available (see this file's header
+     * comment); the initializer is also the fallback value used when it is not.
+     */
+    private isNarrowViewport;
+    private mobileMediaQuery;
     private hoverTimeout;
     /**
      * Collapsed state lives on `<campminder-app-shell>`, keyed per portal — see its
@@ -60,24 +105,87 @@ export declare class SideNav extends LitElement {
      * getter needs to cache.
      */
     private get selectedCategory();
+    connectedCallback(): void;
     disconnectedCallback(): void;
+    /** The fallback used where `matchMedia` is unavailable — see the class doc comment. */
+    private static readViewportWidthFallback;
+    private initMobileMediaQuery;
+    private teardownMobileMediaQuery;
+    private handleMobileMediaChange;
     private toggleSidenav;
     private setSelectedCategory;
     private handleMenuItemHover;
     private clearHoverTimeout;
     private handleMouseEnter;
     private handleMouseLeave;
+    /**
+     * The single dismissal entry point for the flyout — every trigger routes through
+     * here (the flyout's own Escape and shift-Tab paths, the nav's mouseleave, and
+     * the shell's page-level Escape / outside pointer press) so the focus rule is
+     * applied in exactly one place and no trigger can bypass it.
+     *
+     * `restoreFocus` is the caller's *intent*; focus only actually moves when it is
+     * also true that focus is currently inside the flyout. A person typing in a form
+     * field while the flyout is dismissed keeps their cursor where it is, and a
+     * pointer press outside keeps the focus the press itself produces.
+     *
+     * The focus target is read BEFORE `hoveredCategory` is cleared, and that order is
+     * load-bearing: the target is found via the `category-hovered` class, which is
+     * derived from `hoveredCategory` in `buildCategoryClass`. Clearing first would
+     * leave nothing to find and silently drop focus onto the document body — the very
+     * defect this method exists to fix.
+     */
+    dismissFlyout(restoreFocus: boolean): void;
+    private focusIsInsideFlyout;
+    /**
+     * The category control the flyout was opened from, or the collapse control when
+     * that category control no longer exists — it always does, so focus can never
+     * land on the document body.
+     */
+    private focusRestoreTarget;
     private get hamburgerIcon();
     /**
      * The category the mega-menu flyout is open for, or `undefined` when none
      * is. Guards on `renderableSubCategories(category).length > 0` (the same
-     * predicate `hasSubmenus` uses for the chevron above) rather than on
+     * predicate `hasSubmenus` uses to render a category as a button) rather than on
      * `hoveredCategory` alone — `hoveredCategory` can also be the literal
      * string `'sidebar-toggle'` (see `handleMouseEnter` call sites), and a
      * category with no renderable sub-categories must not open onto nothing.
      */
     private get openCategory();
     private buildCategoryClass;
+    /** The category the mobile drill-down is showing, mirroring `openCategory`. */
+    private get openMobileCategory();
+    private toggleMobileMenu;
+    /**
+     * The single dismissal entry point for the mobile overlay — every trigger
+     * (the backdrop click, `.menu-toggle`, the overlay's own Escape) routes
+     * through here, mirroring `dismissFlyout`'s reasoning, so the focus rule is
+     * applied in exactly one place and no trigger can bypass it.
+     *
+     * `restoreFocus` is the caller's intent; focus only actually moves when it is
+     * also true that focus is currently inside the overlay. The target is read
+     * BEFORE state is cleared, same load-bearing order as `dismissFlyout` — the
+     * restore target is `.menu-toggle`, which stays in the DOM regardless of
+     * `mobileMenuOpen`, but focus-inside-overlay is only answerable while the
+     * overlay is still open.
+     */
+    dismissMobileMenu(restoreFocus: boolean): void;
+    private focusIsInsideMobileOverlay;
+    private openMobileSubmenu;
+    private closeMobileSubmenu;
+    private handleMobileOverlayKeyDown;
+    private buildMobileCategoryClass;
+    private getMobileCategoryHtml;
+    private renderMobileMainMenu;
+    /**
+     * The mobile overlay's body — either the main category list, or the
+     * drill-down for whichever category is active. `cm-mega-menu-mobile-back`
+     * is the drill-down asking to return to the list; it does not close the
+     * overlay (that's `.menu-toggle` / the backdrop), so it only clears
+     * `activeMobileCategoryId`.
+     */
+    private renderMobileOverlayBody;
     private getCategoryHtml;
     private renderMainMenu;
     render(): import('lit').TemplateResult<1>;

package/dist/side-nav/SideNav.styles.d.ts

@@ -38,5 +38,14 @@
  * 2026-09-04, Floor 5 added `position: relative` to `.nav-container` as the
  * mega-menu flyout's positioning context. `.nav-main-content` was deliberately
  * left at `overflow: hidden` — see that rule's own comment below for why.
+ *
+ * 2026-09-17, Floor 5D (AB#26231) added the `@media (max-width: 530px)` block
+ * that picks the mobile variant over the desktop one — the whole of what makes
+ * "both variants render, CSS chooses" true — and ungated `.menu-toggle` /
+ * `.toggle-mobile-btn` (parked since Floor 5) and `.chevron-right` (parked
+ * since Floor 4) for the mobile category list's own use. `--overlay-menu-width`,
+ * `--overlay-menu-max-width`, `--color-backdrop` and `--color-section-bg` were
+ * reserved on `:host` since Floor 5 for exactly this floor; they now size the
+ * mobile overlay panel and its backdrop.
  */
 export declare const SideNavStyles: import('lit').CSSResult;

package/dist/side-nav/Utils/render-leaf.d.ts

@@ -0,0 +1,3 @@
+import { MenuLeaf } from '@campminder/menu-tree';
+
+export declare function renderMenuLeaf(leaf: MenuLeaf): import('lit').TemplateResult<1>;

package/dist/side-nav/mega-menu-focus.test.d.ts

@@ -0,0 +1 @@
+

package/dist/side-nav/mega-menu-isolation.test.d.ts

@@ -0,0 +1 @@
+

package/dist/side-nav/mega-menu-layout.d.ts

@@ -7,3 +7,14 @@
  */
 export declare const MENU_ITEM_WIDTH_PX = 248;
 export declare const MENU_ITEM_GUTTER_PX = 16;
+/**
+ * The desktop-flyout / mobile-drill-down breakpoint, Floor 5D (AB#26231).
+ * `SideNav.styles.ts`'s `@media (max-width: ${MOBILE_BREAKPOINT_PX}px)` (which
+ * variant is actually shown) and `SideNav.ts`'s `matchMedia` query (which one
+ * is marked `aria-hidden`) both read this one constant, so the two cannot
+ * silently disagree about where the line is — the same drift class the
+ * mega-menu constants above already guard against. Kept at upstream's `530`;
+ * revisit when `campminder-ui`'s breakpoints land (per the plan's Floor 5D
+ * ruling 3).
+ */
+export declare const MOBILE_BREAKPOINT_PX = 530;

package/dist/side-nav/mega-menu-mobile-focus.test.d.ts

@@ -0,0 +1 @@
+

package/dist/side-nav/mega-menu-mobile.test.d.ts

@@ -0,0 +1 @@
+

package/dist/side-nav/side-nav-styles-cascade.test.d.ts

@@ -0,0 +1 @@
+export {};