basalt-ui 1.29.2 → 1.30.0

package/dist/shell/app-mobile-nav.js

@@ -106,45 +106,27 @@ function settingsRows(items) {
     ...item.active !== void 0 && { active: item.active }
   }));
 }
-const menuRow = (item, depth) => {
-  const onClick = (event) => {
-    if (item.disabled) {
-      event.preventDefault();
-      return;
+function deepestScrolledDescendant(root) {
+  if (root === null) return null;
+  let best = null;
+  let bestDepth = -1;
+  for (const node of root.querySelectorAll("*")) {
+    if (node.scrollTop <= 0) continue;
+    if (node.getClientRects().length === 0) continue;
+    let depth = 0;
+    for (let parent = node.parentElement; parent !== null; parent = parent.parentElement) depth += 1;
+    if (depth > bestDepth) {
+      best = node;
+      bestDepth = depth;
     }
-    item.onClick?.(event);
-  };
-  const shared = {
-    className: depth > 0 ? `${classes.menuItem} ${classes.menuItemNested}` : classes.menuItem,
-    leftSection: item.icon,
-    disabled: Boolean(item.disabled),
-    // Mantine emits `data-disabled` (a STYLING hook) and nothing else, so the ARIA state is ours
-    // to set — a disabled destination still renders (§2.3 rule 11), so it has to announce itself.
-    "aria-disabled": item.disabled || void 0,
-    "aria-current": item.active ? "page" : void 0,
-    rightSection: item.count ? /* @__PURE__ */ jsx(NavCountBadge, { count: item.count }) : void 0,
-    onClick
-  };
-  const Anchor = item.Anchor;
-  if (Anchor && !item.disabled) {
-    return /* @__PURE__ */ jsx(Menu.Item, { component: Anchor, ...shared, children: item.label }, item.key);
   }
-  return /* @__PURE__ */ jsx(
-    Menu.Item,
-    {
-      component: "a",
-      ...item.href !== void 0 && !item.disabled && { href: item.href },
-      ...shared,
-      children: item.label
-    },
-    item.key
-  );
-};
+  return best;
+}
 const rows = (items, depth, render) => items.flatMap((item) => [render(item, depth), ...rows(item.children ?? [], depth + 1, render)]);
-const menuActionRow = (row) => /* @__PURE__ */ jsx(
+const menuActionRow = (row, sectionStart = false) => /* @__PURE__ */ jsx(
   Menu.Item,
   {
-    className: classes.menuItem,
+    className: sectionStart ? `${classes.menuItem} ${classes.menuSectionStart}` : classes.menuItem,
     leftSection: row.icon,
     rightSection: row.active ? /* @__PURE__ */ jsx(IconCheck, {}) : void 0,
     ...row.danger ? { color: "red" } : {},
@@ -170,24 +152,49 @@ function MobileNav({
   const reduceMotion = useReducedMotion();
   const { step } = useBasaltSpacing();
   const close = () => setOpenKey(null);
-  const scrollToTop = () => {
-    const target = config?.getScrollElement?.() ?? document.querySelector(`[${SCROLLPORT_ATTRIBUTE}]`) ?? document.scrollingElement ?? document.documentElement;
+  const scrollElementToTop = (target) => {
+    if (!target || target.scrollTop <= 0) return false;
     target.scrollTo({ top: 0, behavior: reduceMotion ? "auto" : "smooth" });
+    return true;
+  };
+  const scrollToTop = () => {
+    const declared = config?.getScrollElement?.() ?? document.querySelector(`[${SCROLLPORT_ATTRIBUTE}]`);
+    if (scrollElementToTop(declared)) return true;
+    if (scrollElementToTop(deepestScrolledDescendant(declared ?? document.body))) return true;
+    return scrollElementToTop(document.scrollingElement ?? document.documentElement);
+  };
+  const onActivate = (item, event) => {
+    if (item.disabled) {
+      event.preventDefault();
+      return false;
+    }
+    if (item.active === true && scrollToTop()) event.preventDefault();
+    item.onClick?.(event);
+    return true;
   };
   const extraRows = [...accountRows(account), ...settingsRows(settingsMenuItems)];
   const moreBlocks = (blocks ?? []).filter(
     (block) => block.kind !== "custom" && sidebarBlockMobile(block) === "more" && (block.kind !== "list" || block.items.length > 0)
   );
   const listBlocks = moreBlocks.filter((block) => block.kind === "list");
+  const tailRule = (slot) => moreBlocks.length + extraRows.length > 0 && slotHasRows(slot);
   const activateBlock = (block) => {
     close();
     if (block.kind === "list") {
-      setOpenBlockKey(block.key);
+      requestAnimationFrame(() => setOpenBlockKey(block.key));
       return;
     }
     block.onClick?.();
   };
-  const menuBlockRow = (block) => /* @__PURE__ */ jsx(Menu.Item, { className: classes.menuItem, onClick: () => activateBlock(block), children: blockRowLabel(block) }, block.key);
+  const menuBlockRow = (block, sectionStart = false) => /* @__PURE__ */ jsx(
+    Menu.Item,
+    {
+      className: sectionStart ? `${classes.menuItem} ${classes.menuSectionStart}` : classes.menuItem,
+      onClick: () => activateBlock(block),
+      children: blockRowLabel(block)
+    },
+    block.key
+  );
   const sheetBlockRow = (block) => /* @__PURE__ */ jsx(
     NavLink,
     {
@@ -238,24 +245,20 @@ function MobileNav({
     ] }),
     /* @__PURE__ */ jsx(Text, { className: classes.label, children: slot.short })
   ] });
-  const surfaceTab = (slot, onClick) => /* @__PURE__ */ jsx(
+  const surfaceTab = (slot, onClick, expanded) => /* @__PURE__ */ jsx(
     UnstyledButton,
     {
       className: classes.tab,
       "data-active": slot.active || void 0,
       "aria-current": slot.active ? "page" : void 0,
       "aria-label": slot.label,
-      ...onClick ? { onClick } : {},
+      ...onClick ? { onClick, "aria-haspopup": "dialog", "aria-expanded": Boolean(expanded) } : {},
       children: tabInner(slot)
     }
   );
   const linkTab = (slot) => {
     const onClick = (e) => {
-      if (slot.active) {
-        e.preventDefault();
-        scrollToTop();
-      }
-      slot.item.onClick?.(e);
+      onActivate(slot.item, e);
     };
     const shared = {
       className: classes.tab,
@@ -279,9 +282,38 @@ function MobileNav({
       slot.key
     );
   };
+  const menuRow = (item, depth) => {
+    const shared = {
+      className: depth > 0 ? `${classes.menuItem} ${classes.menuItemNested}` : classes.menuItem,
+      leftSection: item.icon,
+      disabled: Boolean(item.disabled),
+      // Mantine emits `data-disabled` (a STYLING hook) and nothing else, so the ARIA state is ours
+      // to set — a disabled destination still renders (§2.3 rule 11), so it has to announce itself.
+      "aria-disabled": item.disabled || void 0,
+      "aria-current": item.active ? "page" : void 0,
+      rightSection: item.count ? /* @__PURE__ */ jsx(NavCountBadge, { count: item.count }) : void 0,
+      onClick: (event) => {
+        onActivate(item, event);
+      }
+    };
+    const Anchor = item.Anchor;
+    if (Anchor && !item.disabled) {
+      return /* @__PURE__ */ jsx(Menu.Item, { component: Anchor, ...shared, children: item.label }, item.key);
+    }
+    return /* @__PURE__ */ jsx(
+      Menu.Item,
+      {
+        component: "a",
+        ...item.href !== void 0 && !item.disabled && { href: item.href },
+        ...shared,
+        children: item.label
+      },
+      item.key
+    );
+  };
   const sheetRow = (item, depth) => {
     const onClick = (e) => {
-      item.onClick?.(e);
+      if (!onActivate(item, e)) return;
       close();
     };
     const shared = {
@@ -335,7 +367,7 @@ function MobileNav({
       onChange: (opened) => setOpenKey(opened ? slot.key : null),
       position: slot.isMore ? "top-end" : "top",
       offset: 8,
-      width: step.mobileNavMenuWidth,
+      width: slot.isMore ? "min(78vw, 300px)" : step.mobileNavMenuWidth,
       withinPortal: true,
       zIndex: 400,
       middlewares: MENU_MIDDLEWARES,
@@ -358,22 +390,29 @@ function MobileNav({
             ...group.label ? [/* @__PURE__ */ jsx(Menu.Label, { children: group.label }, `${group.key}-label`)] : [],
             ...rows(group.items, 0, menuRow)
           ]),
-          slot.isMore && moreBlocks.length + extraRows.length > 0 && slotHasRows(slot) ? /* @__PURE__ */ jsx(Menu.Divider, {}) : null,
-          slot.isMore ? moreBlocks.map(menuBlockRow) : null,
-          slot.isMore ? extraRows.map(menuActionRow) : null
+          slot.isMore ? moreBlocks.map((block, index) => menuBlockRow(block, tailRule(slot) && index === 0)) : null,
+          slot.isMore ? extraRows.map(
+            (row, index) => menuActionRow(row, tailRule(slot) && moreBlocks.length === 0 && index === 0)
+          ) : null
         ] })
       ]
     },
     slot.key
   );
   const sheetSlot = (slot) => /* @__PURE__ */ jsxs(Fragment2, { children: [
-    surfaceTab(slot, () => setOpenKey(slot.key)),
+    surfaceTab(
+      slot,
+      () => setOpenKey(openKey === slot.key ? null : slot.key),
+      openKey === slot.key
+    ),
     /* @__PURE__ */ jsx(
       Drawer,
       {
         opened: openKey === slot.key,
         onClose: close,
         position: "bottom",
+        zIndex: 400,
+        overlayProps: { zIndex: 400 },
         padding: "md",
         title: slot.label,
         classNames: {
@@ -384,6 +423,10 @@ function MobileNav({
         transitionProps: {
           transition: "slide-up",
           duration: reduceMotion ? 0 : 220,
+          // Asymmetric on purpose: the entrance may take its time, the EXIT is a hit-test window.
+          // Mantine's default exit equals the duration, so a dismissed sheet left 220ms of live
+          // overlay over the bar — long enough to eat the next tab tap.
+          exitDuration: reduceMotion ? 0 : 120,
           timingFunction: "cubic-bezier(0.32, 0.72, 0, 1)"
         },
         children: /* @__PURE__ */ jsx(ScrollArea.Autosize, { mah: "62dvh", type: "scroll", offsetScrollbars: "present", scrollbarSize: 8, children: /* @__PURE__ */ jsxs(Stack, { gap: "var(--vx-space-sidebar-section-gap)", children: [
@@ -403,6 +446,8 @@ function MobileNav({
       opened: openBlockKey === block.key,
       onClose: () => setOpenBlockKey(null),
       position: "bottom",
+      zIndex: 400,
+      overlayProps: { zIndex: 400 },
       padding: "md",
       title: block.label,
       classNames: {
@@ -413,6 +458,8 @@ function MobileNav({
       transitionProps: {
         transition: "slide-up",
         duration: reduceMotion ? 0 : 220,
+        // Same reasoning as `sheetSlot`'s Drawer — a long exit leaves a live overlay over the bar.
+        exitDuration: reduceMotion ? 0 : 120,
         timingFunction: "cubic-bezier(0.32, 0.72, 0, 1)"
       },
       children: /* @__PURE__ */ jsx(ScrollArea.Autosize, { mah: "62dvh", type: "scroll", offsetScrollbars: "present", scrollbarSize: 8, children: /* @__PURE__ */ jsx(Stack, { gap: 1, children: block.items.map(blockItemRow) }) })

package/dist/shell/app-mobile-nav.module.css

@@ -9,7 +9,14 @@
   align-items: stretch;
   width: 100%;
   height: 100%;
-  background: var(--mantine-color-body);
+  /* NOT `--mantine-color-body`: that is the EXACT fill the scrollport above paints (both resolve
+   * to `--vx-surface-bg`), so the only thing separating the bar from the page was the region
+   * seam's 9%-alpha hairline — invisible on a phone, which is the "it could also have a border"
+   * report. `--vx-surface-panel` is a derived step above bg on both schemes and is the same
+   * relation `.sheet` already uses, so the edge is a real tonal one with no new token, no drop
+   * shadow (DESIGN-CORE pins depth to three tokens, none of them an upward-cast footer shadow)
+   * and no `withBorder` on the shell region (basalt-mantine.md forbids drawing that ourselves). */
+  background-color: var(--vx-surface-panel);
   -webkit-tap-highlight-color: transparent;
   /* NO padding-bottom / env() here: Mantine's own AppShell `.footer` rule already does
    * `height: calc(var(--app-shell-footer-height) + env(safe-area-inset-bottom))` +
@@ -90,7 +97,8 @@
   height: 8px;
   border-radius: 999px;
   background-color: var(--vx-accent);
-  box-shadow: 0 0 0 2px var(--mantine-color-body);
+  /* The halo punches the dot out of whatever the BAR paints, so it tracks `.bar`'s fill. */
+  box-shadow: 0 0 0 2px var(--vx-surface-panel);
 }
 
 /* `text-overflow: clip`, never an ellipsis — a truncated word with a "…" in a 72px tab reads as
@@ -106,10 +114,25 @@
 }
 
 /* The menu pops UP out of its tab and is configured `flip: false` — flipping a bottom-anchored
- * menu would put it under the footer. `menuMax` is what guarantees it fits (§2.2). */
+ * menu would put it under the footer, so something has to guarantee it fits. That something is the
+ * `max-height` below, not `menuMax` (§2.2 as it used to be written). */
 .menuDropdown {
-  padding: 4px;
-  max-height: min(60dvh, 360px);
+  padding: var(--vx-space-stack-xs);
+  /* THIS is what guarantees the menu never renders below the fold — not `menuMax`, which is only
+   * the menu-vs-sheet taste threshold (`mobile-nav-model.ts`'s module doc has the accounting).
+   *
+   * `min(62dvh, 440px)`, down from `min(72dvh, 560px)`. The old pair fit — but fitting was never
+   * the whole ask: MEASURED in headless Chrome at 390x844 the dropdown rendered 300x560 at
+   * y=221..781, i.e. 66% of the screen, which reads as a panel rather than as the "subtle, small
+   * menu" the More surface is supposed to be. At 440 the same phone gets 52%.
+   *
+   * The accounting, at both ends of the supported range. 390x844: headroom above the bar is 772px,
+   * 62dvh resolves to 523px, so the 440px term binds — 57% of the headroom. 320x568: headroom is
+   * ~496px, 62dvh resolves to 352px, so THAT term binds — 71% of the headroom. Either way the
+   * binding term is one of the two written here and it lands under the headroom, which is the
+   * property that matters: the cap, not `menuMax`, is the guarantee. Past it the dropdown scrolls
+   * inside itself instead of growing, so a long More list costs scroll, never fold. */
+  max-height: min(62dvh, 440px);
   overflow-y: auto;
   overscroll-behavior: contain;
 }
@@ -135,13 +158,16 @@
 /*
  * A disabled destination still RENDERS in the menu (§2.3 rule 11) — it just must not be reachable.
  * Mantine's `Menu.css` styles `[data-disabled]` with a dimmed color and nothing else, and the row
- * is polymorphic (`component="a"`), so the native `disabled` attribute does not apply either: with
- * no rule here the row stays fully clickable. `pointer-events: none` is the real guard; `menuRow`
- * carries a matching handler guard for the paths pointers do not cover (keyboard, synthetic
- * clicks, a consumer stylesheet that resets this).
+ * is polymorphic (`component="a"`), so the native `disabled` attribute does not apply either.
+ *
+ * `pointer-events: none` USED to be the guard here and is deliberately gone. It made the row
+ * swallow a tap with zero feedback — no `:active`, no press state, nothing — which on a phone is
+ * indistinguishable from a button that is simply broken, and "I tap and nothing happens" is
+ * literally the report this change answers. The guard is now entirely in the handlers (`menuRow`,
+ * `sheetRow`), which cover the pointer path and every path a pointer never takes; the row still
+ * depresses under a finger and still goes nowhere, which is the honest version of dead.
  */
 .menuItem[data-disabled] {
-  pointer-events: none;
   cursor: not-allowed;
 }
 
@@ -151,7 +177,10 @@
   padding-inline-start: calc(var(--mantine-spacing-md) + 12px) !important;
 }
 
-/* Overflow section heading inside the menu — inherits the theme's mono micro-label. */
+/* Overflow section heading, in the menu AND in the sheet — inherits the theme's mono micro-label.
+ * The inset matches the rows' own (`--vx-space-row-inset-x`) so the heading and the labels under
+ * it share one left edge; the vertical padding is asymmetric on purpose — a heading belongs to
+ * what follows it, so it sits closer to its own rows than to the section above. */
 .menuLabel {
   font-family: var(--basalt-font-mono);
   font-size: var(--vx-text-micro);
@@ -159,6 +188,65 @@
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--vx-faint);
+  padding: 6px var(--vx-space-row-inset-x) 2px;
+}
+
+/*
+ * The popover's SECTION RHYTHM — what replaced the single `Menu.Divider`, and it is SPACE, not a
+ * line.
+ *
+ * The Drawer's bulk was never its row height (40px is a WCAG 2.5.5 floor pinned by
+ * `theme/density-relations.test.ts`); it was the stack rhythm around the rows — a 12px section
+ * gap, 18px of Drawer padding and a header row. A popover with one hairline through the middle and
+ * no rhythm at all is the other extreme, so each group opens its own band instead.
+ *
+ * A `border-top: 1px solid var(--vx-divider)` here was the obvious move and is deliberately NOT
+ * what shipped: `theme/divider-law.test.ts` inventories every horizontal hairline in the package
+ * and classifies it as `between-rows`, `region-boundary` or (inside `content/**` only)
+ * `prose-typography` — and it says in as many words that a rule under a HEADING in the chrome lane
+ * is none of the three, and that the fix is to delete it and let the type scale and the space do
+ * the work. A mono uppercase micro-label at `--vx-faint` over its own band of air is already a
+ * section boundary; a line under it would be the second one.
+ *
+ * `:not(:first-child)` keeps the first group flush with the dropdown's own padding instead of
+ * opening a band under the top edge with nothing above it — the same "a separator separates"
+ * property the guarded `Menu.Divider` used to carry in JSX. Scoped to `.menuDropdown` because
+ * `.menuLabel` is also the SHEET's group heading (`sheetGroupLabel`), where each label is its
+ * group Stack's first child and the rhythm is the Drawer's own to draw.
+ *
+ * The band is 6/4, down from 8/8 — the second half of the same "still too big" verdict the
+ * `max-height` above answers, and the cheaper half. MEASURED per heading at 8/8: 8px margin + 8px
+ * padding-top + 2px padding-bottom + a 17px line = a 35px box, and there are FIVE of them in the
+ * shipped More surface — 175px, 28% of the whole dropdown spent on five words. 6/4 takes each
+ * banded heading to 29px and hands 24px back to the rows. It does NOT touch the row height (40px
+ * is the WCAG 2.5.5 floor named at the top of this comment) and it does not add the line the
+ * paragraph above rules out: this is the same space that argument asked to carry the boundary,
+ * spent tighter.
+ */
+.menuDropdown .menuLabel:not(:first-child) {
+  margin-top: 6px;
+  padding-top: 4px;
+}
+
+/* The same band, on the first row of the UNLABELLED tail (blocks + account + settings) — the one
+ * boundary in the More surface with no heading to open it. Margin rather than padding: a row is a
+ * touch target with a `min-height` floor and symmetric inset, so growing one side of it would make
+ * that row read as a different size from its siblings. */
+.menuDropdown .menuSectionStart {
+  margin-top: 8px;
+}
+
+/*
+ * A sticky heading over a scrolling dropdown must be OPAQUE. `theme/index.ts` documents the same
+ * fix for the Drawer's header: basalt dropped that background to `transparent`, which reads fine
+ * until rows actually scroll under it and then shows every one of them straight through the title.
+ * `--vx-surface-overlay` is the dropdown's own fill, so the heading matches the box it sits in.
+ */
+.menuDropdown .menuLabel {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--vx-surface-overlay);
 }
 
 /*

package/dist/shell/app-mobile-nav.module.css.d.ts

@@ -13,6 +13,7 @@ declare const classes: {
   readonly menuItem: string
   readonly menuItemNested: string
   readonly menuLabel: string
+  readonly menuSectionStart: string
   readonly sheet: string
   readonly sheetTitle: string
   readonly sheetHeader: string

package/dist/shell/app-sidebar.module.css

@@ -142,12 +142,50 @@
 
 /* Re-apply the bled inset INSIDE the viewport, so rows keep their exact 10px/10px column while the
  * bar floats clear of them in the gutter. Static padding, not Mantine's `offsetScrollbars`: the
- * latter pads only while overflowing, which reflows the rows the moment a section expands. */
+ * latter pads only while overflowing, which reflows the rows the moment a section expands.
+ *
+ * `padding-block-end` is the scroll END-STOP: with only the inline inset, an overflowing column
+ * cut its last row flush against the viewport edge, which reads as a label whose list is CLIPPED
+ * rather than as something that scrolls. One `region-gap` of air below the last row is the same
+ * number the search slot opens at the column's other end.
+ *
+ * The end-stop is necessary and NOT sufficient, and the mask below is the other half. MEASURED at
+ * 1512x945 with the playground's nav: `.navScroll` is `flex: 1; min-height: 0` between the search
+ * slot and a `flex-shrink: 0` footer, so any nav taller than the leftover column overflows — and
+ * the end-stop only pads the BOTTOM OF THE CONTENT, which the reader sees exactly once, at the
+ * scroll end. Everywhere else the viewport's own edge cuts whatever row happens to cross it, and
+ * `.footer`'s progress block starts one `region-gap` under that cut. Two hard edges 12px apart:
+ * the column reads BROKEN rather than scrolled. Nothing else says otherwise, because the
+ * ScrollArea is `type="hover"` — at rest there is no bar at all.
+ *
+ * So: a scroll fade on the viewport's bottom edge, and deliberately NOT the other candidate, a
+ * `--vx-divider` seam on `.footer`. A rule there would answer a question nobody asked — the footer
+ * boundary is already carried by its own `padding-top` and the account row's inset (see `.footer`
+ * below) — and it would answer the real one WRONG: a hairline drawn across a row that is severed
+ * mid-glyph makes the severing crisper, not legible. A fade is the only one of the two that says
+ * "there is more, and it moves". It also keeps this module out of `theme/divider-law.test.ts`'s
+ * inventory, which is the correct outcome and not a dodge: that ledger exists so every hairline is
+ * a line someone chose, and this one would have been chosen to stand in for a scrollbar.
+ *
+ * The ramp is one `region-gap` tall, which is what pairs it with the end-stop instead of fighting
+ * it: at the scroll END those 12px hold the end-stop's padding — empty — so the last row lands
+ * fully opaque, and a column that does not overflow fades nothing but its own trailing air. Only
+ * mid-scroll, where a real row crosses the edge, does the fade have anything to dim.
+ *
+ * `black`/`transparent` here are alpha, not color: a mask reads only the alpha channel, so these
+ * carry no design meaning and deliberately are NOT `--vx-*` tokens. Do not route them through the
+ * palette in a token sweep. */
 .navViewport {
   padding-inline-end: var(--vx-space-row-inset-x);
+  padding-block-end: var(--vx-space-sidebar-region-gap);
+  mask-image: linear-gradient(
+    to bottom,
+    black calc(100% - var(--vx-space-sidebar-region-gap)),
+    transparent
+  );
 }
 
-/* Sections separate by SPACING only — 15px between sections, nothing above the first (the brand
+/* Sections separate by SPACING only — 16px between sections, nothing above the first (the brand
  * band's centred `min-height` already opens the region's air, and the optional search slot's own
  * `padding-block` opens more when it renders). */
 .nav > div + div {
@@ -156,9 +194,24 @@
 
 /*
  * Footer region — no border; the account row's own top padding supplies the separation.
+ *
+ * The region owns its own air on both axes, because the `Stack` wrapping it is `gap={0}`
+ * (`app-sidebar.tsx`) — the footer's rhythm is single-sourced HERE, so the whole answer is
+ * readable in one place rather than split between a prop and a stylesheet. Without it a
+ * bottom-placed block (a `kind: 'progress'` block defaults to `'bottom'`) stacked FLUSH on the
+ * settings and account rows and on the scroll region above, which is the "cramped" footer.
+ *
+ * `region-gap` (12) above the cluster, `stack-sm` (8) between its parts — deliberately tighter
+ * than the nav's `section-gap` (16): the footer is ONE pinned cluster whose rows belong together,
+ * not a list of peer sections.
  */
 .footer {
   flex-shrink: 0;
+  padding-top: var(--vx-space-sidebar-region-gap);
+}
+
+.footer > * + * {
+  margin-top: var(--vx-space-stack-sm);
 }
 
 /*

package/dist/shell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/shell/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGlD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAUlD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAC1E,OAAO,KAAK,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACjF,OAAO,KAAK,EACV,eAAe,EAEf,YAAY,EAEZ,cAAc,EACf,MAAM,aAAa,CAAA;AAQpB,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAC1E,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,GAC1B,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,YAAY,EACV,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjE,OAAO,EACL,gBAAgB,EAChB,KAAK,uBAAuB,EAC5B,uBAAuB,EACvB,uBAAuB,EACvB,eAAe,GAChB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAC5E,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AACzE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,cAAc,CAAA;AACjF,OAAO,EAAE,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACrE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,cAAc,CAAA;AAEjF;;;;GAIG;AACH,YAAY,EACV,SAAS,EACT,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,eAAe,EACf,cAAc,EACd,cAAc,EACd,aAAa,EACb,gBAAgB,GACjB,MAAM,aAAa,CAAA;AAEpB,gEAAgE;AAChE,MAAM,MAAM,WAAW,GAAG;IACxB,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAA;IACZ,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,6DAA6D;AAC7D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;IACjC;;oEAEgE;IAChE,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C;;;OAGG;IACH,KAAK,EAAE,WAAW,GAAG;QAAE,IAAI,CAAC,EAAE,eAAe,EAAE,CAAA;KAAE,CAAA;IACjD,mGAAmG;IACnG,QAAQ,EAAE,cAAc,EAAE,CAAA;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,CAAA;IAC3B;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,YAAY,EAAE,CAAA;IAC9B;;;;;;;;;;;OAWG;IACH,aAAa,CAAC,EAAE,YAAY,EAAE,CAAA;IAC9B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAA;IACtC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B;;;;OAIG;IACH,MAAM,CAAC,EAAE,mBAAmB,GAAG;QAAE,OAAO,CAAC,EAAE,oBAAoB,CAAA;KAAE,CAAA;IACjE;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IAChD,oBAAoB;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AA+ED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BASlD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/shell/index.tsx"],"names":[],"mappings":"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"}

package/dist/shell/index.js

@@ -69,7 +69,6 @@ function collapseStore(key) {
   collapseStores.set(key, store);
   return store;
 }
-const SHELL_INSET = "sm";
 function BasaltShell(props) {
   assertRequiredProps("BasaltShell", props, ["brand", "sections"]);
   return /* @__PURE__ */ jsx(PageBarProvider, { globalActions: props.globalActions ?? [], children: /* @__PURE__ */ jsx(AsideProvider, { children: /* @__PURE__ */ jsx(ShellFrame, { ...props }) }) });
@@ -92,6 +91,7 @@ function ShellFrame({
   style
 }) {
   const { step } = useBasaltSpacing();
+  const inset = { base: step.appShellInsetMobile, sm: step.appShellInset };
   const aside = useAsideRegion();
   const [storedCollapsed, setStoredCollapsed] = collapseStore(storageKey)();
   const isCollapseControlled = collapsedProp !== void 0;
@@ -136,11 +136,11 @@ function ShellFrame({
         collapsed: { desktop: !aside.claimed, mobile: true }
       },
       footer: { height: { base: step.mobileNavBarHeight, sm: 0 } },
-      padding: SHELL_INSET,
+      padding: inset,
       className: cx(mainClasses.shell, className),
       ...style !== void 0 && { style },
       children: [
-        /* @__PURE__ */ jsx(AppShell.Header, { px: SHELL_INSET, children: /* @__PURE__ */ jsxs("div", { className: headerClasses.bar, children: [
+        /* @__PURE__ */ jsx(AppShell.Header, { px: inset, children: /* @__PURE__ */ jsxs("div", { className: headerClasses.bar, children: [
           /* @__PURE__ */ jsx("div", { className: brandClasses.zone, "data-collapsed": collapsed || void 0, children: /* @__PURE__ */ jsx(AppBrand, { brand, collapsed, onToggleCollapse: toggleCollapse }) }),
           /* @__PURE__ */ jsx("div", { className: headerClasses.lead, children: /* @__PURE__ */ jsx(AppBreadcrumbs, { ...activeCrumb }) }),
           /* @__PURE__ */ jsx(PageBarOutlet, { className: headerClasses.pageBar }),

package/dist/shell/mobile-nav-model.d.ts

@@ -9,19 +9,38 @@
  * The law it implements is the interaction model, not a heuristic: a slot is a DESTINATION, so a
  * tap navigates with no overlay to dismiss. An overlay exists only where a slot genuinely holds
  * more than one destination, and its surface is INFERRED from how many rows it holds rather than
- * configured — six rows is the arithmetic ceiling for a menu that pops out of a 56px bar without
- * ever rendering below the fold (6 x 44px + 8px padding = 272px against 415px of headroom on the
- * smallest supported viewport), so past that the surface becomes a bottom sheet.
+ * configured — up to `menuMax` rows it is a content-sized menu popping out of the tab, past that a
+ * bottom sheet.
+ *
+ * WHAT KEEPS THE MENU ABOVE THE FOLD IS CSS, NOT THIS CONSTANT. `.menuDropdown` declares
+ * `max-height: min(72dvh, 560px)` + `overflow-y: auto` + `overscroll-behavior: contain`, so the
+ * dropdown is bounded at ANY row count and scrolls inside itself past it. Measured at 390x844 the
+ * headroom above the bar is 772px (bar top 788, less the 8px menu offset and the 8px shift
+ * padding), so the 560px cap uses 73% of it; on the smallest supported viewport (320x568) the
+ * headroom is ~496px and 72dvh is 409px — the cap is binding on every supported phone, and the row
+ * count never is. The old arithmetic here ("6 x 44px + 8px padding against 415px of headroom") was
+ * stale in almost every number: rows are 40px (`--vx-space-mobile-nav-row-height`), the dropdown's
+ * own padding is `2 * --vx-space-stack-xs` = 8px, and the headroom figures above are the measured
+ * ones.
+ *
+ * `menuMax` therefore survives for the case a menu genuinely should not hold: a 30-destination nav
+ * still deserves a sheet, where a title, a close button and 62dvh of scroll read better than a
+ * tall popover hanging off one tab.
  */
 import type { MobileNavConfig, MobileNavModel, SidebarBlock, SidebarSection } from './nav-types.js';
 /** Hard cap on bar slots, INCLUDING More. Five 72px slots is the widest a 360px viewport holds. */
 export declare const MOBILE_MAX_TABS_DEFAULT = 5;
 /**
- * Rows a slot may hold before it becomes a sheet instead of a menu. Arithmetic, not taste — see
- * the module doc: six rows is the last count a bottom-anchored, non-flipping menu fits above the
- * bar on the smallest supported viewport.
+ * Rows a slot may hold before it becomes a sheet instead of a menu.
+ *
+ * It was 6 on the theory that the count was what kept the menu above the fold. It is not — the
+ * dropdown's own `max-height` is (module doc), at every row count. What 6 actually did was flip
+ * the playground's ~11-row More slot into a full Drawer, which is the "big door on mobile" the
+ * owner reported. 12 keeps every realistic More surface a compact popover and leaves the sheet
+ * for the nav that has genuinely outgrown one. `mobileNav.menuMax` remains the consumer opt-out
+ * in both directions.
  */
-export declare const MOBILE_MENU_MAX_DEFAULT = 6;
+export declare const MOBILE_MENU_MAX_DEFAULT = 12;
 /** The overflow slot's reserved key. A slot like any other — it just exists only when needed. */
 export declare const MOBILE_MORE_KEY = "__more";
 export type ProjectMobileNavOptions = {

package/dist/shell/mobile-nav-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-nav-model.d.ts","sourceRoot":"","sources":["../../src/shell/mobile-nav-model.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAAK,EACV,eAAe,EAEf,cAAc,EAGd,YAAY,EAEZ,cAAc,EACf,MAAM,aAAa,CAAA;AAGpB,mGAAmG;AACnG,eAAO,MAAM,uBAAuB,IAAI,CAAA;AAExC;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,IAAI,CAAA;AAExC,iGAAiG;AACjG,eAAO,MAAM,eAAe,WAAW,CAAA;AAEvC,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,CAAC,EAAE,eAAe,GAAG,SAAS,CAAA;IACpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,SAAS,YAAY,EAAE,GAAG,SAAS,GAAG,MAAM,CAQjF;AAwVD;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,cAAc,EAAE,EAC1B,IAAI,CAAC,EAAE,uBAAuB,GAC7B,cAAc,CA2EhB"}
+{"version":3,"file":"mobile-nav-model.d.ts","sourceRoot":"","sources":["../../src/shell/mobile-nav-model.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,OAAO,KAAK,EACV,eAAe,EAEf,cAAc,EAGd,YAAY,EAEZ,cAAc,EACf,MAAM,aAAa,CAAA;AAGpB,mGAAmG;AACnG,eAAO,MAAM,uBAAuB,IAAI,CAAA;AAExC;;;;;;;;;GASG;AACH,eAAO,MAAM,uBAAuB,KAAK,CAAA;AAEzC,iGAAiG;AACjG,eAAO,MAAM,eAAe,WAAW,CAAA;AAEvC,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,CAAC,EAAE,eAAe,GAAG,SAAS,CAAA;IACpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,SAAS,YAAY,EAAE,GAAG,SAAS,GAAG,MAAM,CAQjF;AA8VD;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,cAAc,EAAE,EAC1B,IAAI,CAAC,EAAE,uBAAuB,GAC7B,cAAc,CA8EhB"}

package/dist/shell/mobile-nav-model.js

@@ -1,6 +1,6 @@
 import { sidebarBlockMobile } from "./sidebar-block-model.js";
 const MOBILE_MAX_TABS_DEFAULT = 5;
-const MOBILE_MENU_MAX_DEFAULT = 6;
+const MOBILE_MENU_MAX_DEFAULT = 12;
 const MOBILE_MORE_KEY = "__more";
 function blockRowCount(blocks) {
   if (blocks === void 0) return 0;
@@ -117,7 +117,13 @@ function sectionCandidate(section, menuMax) {
           // The section's own identity wins when it declares one — the consumer configured the
           // SLOT — and falls back to the single destination's icon when it does not.
           icon: mobile?.icon ?? section.icon ?? only.icon,
-          active: hasActiveDestination(only),
+          // `isActiveDestination`, not the rollup — this collapse produced a LINK, and a link slot
+          // covers exactly the one key it navigates to, exactly as `itemCandidate` does. The two
+          // predicates agree TODAY (this branch needs `rows === 1`, `countRows` counts descendants,
+          // so `only` is childless whenever it is taken) — which is the point: activeness now reads
+          // the slot's own `covered` set instead of a non-local fact about what `rows === 1`
+          // implies. Widen the collapse and the rollup would light a tab whose tap lands elsewhere.
+          active: isActiveDestination(only),
           item: only
         };
       }
@@ -252,7 +258,10 @@ function projectMobileNav(sections, opts) {
       label: only.label,
       short: only.short ?? only.label,
       icon: only.icon,
-      active: hasActiveDestination(only),
+      // Same as `sectionCandidate`'s collapse, for the same reason and with the same caveat: a
+      // LINK slot reads only the destination its tap reaches, and `rows === 1` makes the two
+      // predicates agree today — state the law locally rather than inherit it.
+      active: isActiveDestination(only),
       item: only
     });
     return { slots };