basalt-ui 1.18.0 → 1.19.1

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

@@ -1,7 +1,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Box, Drawer, NavLink, Stack, Text, UnstyledButton } from "@mantine/core";
-import { useState } from "react";
+import { Drawer, Menu, NavLink, ScrollArea, Stack, Text, UnstyledButton } from "@mantine/core";
+import { useReducedMotion } from "@mantine/hooks";
+import { Fragment as Fragment2, useState } from "react";
+import { NavCountBadge } from "./nav-count-badge.js";
+import { useBasaltSpacing } from "../theme/index.js";
 import classes from "./app-mobile-nav.module.css";
+const MENU_MIDDLEWARES = { flip: false, shift: { padding: 8 } };
 function IconMore() {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -24,83 +28,301 @@ function IconMore() {
     }
   );
 }
+function accountRows(account) {
+  if (!account || account.state.status === "loading") return [];
+  const actions = account.actions;
+  if (account.state.status === "unauthenticated") {
+    return [{ key: "basalt-account-sign-in", label: "Sign in", onClick: actions?.onSignIn }];
+  }
+  const rows2 = [];
+  if (actions?.onManageAccount) {
+    rows2.push({
+      key: "basalt-account-manage",
+      label: "Account settings",
+      onClick: actions.onManageAccount
+    });
+  }
+  if (actions?.onManageBilling) {
+    rows2.push({
+      key: "basalt-account-billing",
+      label: "Billing & payment",
+      onClick: actions.onManageBilling
+    });
+  }
+  if (account.state.plan?.isFree && actions?.onUpgrade) {
+    rows2.push({ key: "basalt-account-upgrade", label: "Upgrade", onClick: actions.onUpgrade });
+  }
+  for (const item of actions?.extraMenuItems ?? []) {
+    rows2.push({
+      key: item.key,
+      label: item.label,
+      icon: item.icon,
+      ...item.danger !== void 0 && { danger: item.danger },
+      onClick: item.onClick
+    });
+  }
+  if (actions?.onSignOut) {
+    const onSignOut = actions.onSignOut;
+    rows2.push({
+      key: "basalt-account-sign-out",
+      label: "Sign out",
+      danger: true,
+      onClick: () => void onSignOut()
+    });
+  }
+  return rows2;
+}
+function accountRowCount(account) {
+  return accountRows(account).length;
+}
+function settingsRows(items) {
+  return (items ?? []).map((item) => ({
+    key: item.key,
+    label: item.label,
+    icon: item.icon,
+    onClick: item.onClick
+  }));
+}
+const menuRow = (item, depth) => {
+  const onClick = (event) => {
+    if (item.disabled) {
+      event.preventDefault();
+      return;
+    }
+    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
+  );
+};
+const rows = (items, depth, render) => items.flatMap((item) => [render(item, depth), ...rows(item.children ?? [], depth + 1, render)]);
+const menuActionRow = (row) => /* @__PURE__ */ jsx(
+  Menu.Item,
+  {
+    className: classes.menuItem,
+    leftSection: row.icon,
+    ...row.danger ? { color: "red" } : {},
+    onClick: (event) => row.onClick?.(event),
+    children: row.label
+  },
+  row.key
+);
+const sheetGroupLabel = (group) => group.label ? /* @__PURE__ */ jsx(Text, { component: "div", className: classes.menuLabel, children: group.label }) : null;
 function MobileNav({
-  sections,
-  onOpenMore,
-  renderNavLink
+  model,
+  config,
+  account,
+  settingsMenuItems
 }) {
-  const [openSection, setOpenSection] = useState(null);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("nav", { className: classes.bar, children: [
-      sections.map((section) => /* @__PURE__ */ jsxs(
-        UnstyledButton,
-        {
-          onClick: () => setOpenSection(section),
-          className: classes.tab,
-          "data-active": section.active || void 0,
-          "aria-current": section.active ? "page" : void 0,
-          "aria-label": section.label,
-          children: [
-            section.icon,
-            /* @__PURE__ */ jsx(Text, { className: classes.label, children: section.label })
-          ]
-        },
-        section.key
-      )),
-      /* @__PURE__ */ jsxs(UnstyledButton, { onClick: onOpenMore, className: classes.tab, "aria-label": "More", children: [
-        /* @__PURE__ */ jsx(IconMore, {}),
-        /* @__PURE__ */ jsx(Text, { className: classes.label, children: "More" })
-      ] })
+  const [openKey, setOpenKey] = useState(null);
+  const reduceMotion = useReducedMotion();
+  const { step } = useBasaltSpacing();
+  const close = () => setOpenKey(null);
+  const scrollToTop = () => {
+    const target = config?.getScrollElement?.() ?? document.scrollingElement ?? document.documentElement;
+    target.scrollTo({ top: 0, behavior: reduceMotion ? "auto" : "smooth" });
+  };
+  const extraRows = [...accountRows(account), ...settingsRows(settingsMenuItems)];
+  const hasCount = (slot) => slot.kind === "link" ? Boolean(slot.item.count) : slot.groups.some((g) => groupHasCount(g.items));
+  const tabInner = (slot) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("span", { className: classes.tabIcon, children: [
+      slot.icon ?? (slot.kind !== "link" && slot.isMore ? /* @__PURE__ */ jsx(IconMore, {}) : null),
+      hasCount(slot) ? /* @__PURE__ */ jsx("span", { className: classes.tabDot, "aria-hidden": true }) : null
     ] }),
+    /* @__PURE__ */ jsx(Text, { className: classes.label, children: slot.short })
+  ] });
+  const surfaceTab = (slot, onClick) => /* @__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 } : {},
+      children: tabInner(slot)
+    }
+  );
+  const linkTab = (slot) => {
+    const onClick = (e) => {
+      if (slot.active) {
+        e.preventDefault();
+        scrollToTop();
+      }
+      slot.item.onClick?.(e);
+    };
+    const shared = {
+      className: classes.tab,
+      "data-active": slot.active || void 0,
+      "aria-current": slot.active ? "page" : void 0,
+      "aria-label": slot.label,
+      onClick
+    };
+    const Anchor = slot.item.Anchor;
+    if (Anchor) {
+      return /* @__PURE__ */ jsx(UnstyledButton, { component: Anchor, ...shared, children: tabInner(slot) }, slot.key);
+    }
+    return /* @__PURE__ */ jsx(
+      UnstyledButton,
+      {
+        component: "a",
+        ...slot.item.href !== void 0 && { href: slot.item.href },
+        ...shared,
+        children: tabInner(slot)
+      },
+      slot.key
+    );
+  };
+  const sheetRow = (item, depth) => {
+    const onClick = (e) => {
+      item.onClick?.(e);
+      close();
+    };
+    const shared = {
+      classNames: {
+        root: depth > 0 ? `${classes.row} ${classes.rowNested}` : classes.row
+      },
+      label: item.label,
+      leftSection: item.icon,
+      rightSection: item.count ? /* @__PURE__ */ jsx(NavCountBadge, { count: item.count }) : void 0,
+      active: Boolean(item.active),
+      disabled: Boolean(item.disabled),
+      // Same as the menu row above: `NavLink`'s `disabled` is a `mod`, i.e. `data-disabled` only.
+      "aria-disabled": item.disabled || void 0,
+      "aria-current": item.active ? "page" : void 0,
+      onClick
+    };
+    const Anchor = item.Anchor;
+    if (Anchor && !item.disabled) {
+      return /* @__PURE__ */ jsx(NavLink, { component: Anchor, ...shared }, item.key);
+    }
+    return /* @__PURE__ */ jsx(
+      NavLink,
+      {
+        component: "a",
+        ...item.href !== void 0 && !item.disabled && { href: item.href },
+        ...shared
+      },
+      item.key
+    );
+  };
+  const sheetActionRow = (row) => /* @__PURE__ */ jsx(
+    NavLink,
+    {
+      classNames: { root: classes.row },
+      label: row.label,
+      leftSection: row.icon,
+      ...row.danger ? { color: "red" } : {},
+      onClick: (event) => {
+        row.onClick?.(event);
+        close();
+      }
+    },
+    row.key
+  );
+  const menuSlot = (slot) => /* @__PURE__ */ jsxs(
+    Menu,
+    {
+      opened: openKey === slot.key,
+      onChange: (opened) => setOpenKey(opened ? slot.key : null),
+      position: slot.isMore ? "top-end" : "top",
+      offset: 8,
+      width: step.mobileNavMenuWidth,
+      withinPortal: true,
+      zIndex: 400,
+      middlewares: MENU_MIDDLEWARES,
+      trapFocus: true,
+      returnFocus: true,
+      closeOnItemClick: true,
+      closeOnClickOutside: true,
+      closeOnEscape: true,
+      menuItemTabIndex: 0,
+      transitionProps: {
+        transition: slot.isMore ? "pop-bottom-right" : "pop",
+        duration: reduceMotion ? 0 : 140,
+        exitDuration: reduceMotion ? 0 : 100
+      },
+      classNames: { dropdown: classes.menuDropdown, label: classes.menuLabel },
+      children: [
+        /* @__PURE__ */ jsx(Menu.Target, { children: surfaceTab(slot) }),
+        /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
+          slot.groups.flatMap((group) => [
+            ...group.label ? [/* @__PURE__ */ jsx(Menu.Label, { children: group.label }, `${group.key}-label`)] : [],
+            ...rows(group.items, 0, menuRow)
+          ]),
+          slot.isMore && extraRows.length > 0 && slotHasRows(slot) ? /* @__PURE__ */ jsx(Menu.Divider, {}) : null,
+          slot.isMore ? extraRows.map(menuActionRow) : null,
+          slot.isMore ? config?.moreExtra : null
+        ] })
+      ]
+    },
+    slot.key
+  );
+  const sheetSlot = (slot) => /* @__PURE__ */ jsxs(Fragment2, { children: [
+    surfaceTab(slot, () => setOpenKey(slot.key)),
     /* @__PURE__ */ jsx(
       Drawer,
       {
-        opened: openSection !== null,
-        onClose: () => setOpenSection(null),
+        opened: openKey === slot.key,
+        onClose: close,
         position: "bottom",
-        size: "auto",
         padding: "md",
-        title: openSection?.label,
-        classNames: { content: classes.sheet, title: classes.sheetTitle },
-        children: /* @__PURE__ */ jsx(Stack, { gap: 2, children: openSection?.items.map((item) => {
-          const handleClick = (e) => {
-            item.onClick?.(e);
-            setOpenSection(null);
-          };
-          const active = Boolean(item.active);
-          if (renderNavLink) {
-            return /* @__PURE__ */ jsx(Box, { onClick: () => setOpenSection(null), children: renderNavLink(item, { active }) }, item.key);
-          }
-          return item.href ? /* @__PURE__ */ jsx(
-            NavLink,
-            {
-              classNames: { root: classes.row },
-              component: "a",
-              href: item.href,
-              label: item.label,
-              leftSection: item.icon,
-              active,
-              onClick: handleClick
-            },
-            item.key
-          ) : /* @__PURE__ */ jsxs(
-            UnstyledButton,
-            {
-              onClick: handleClick,
-              className: classes.row,
-              "data-active": active || void 0,
-              children: [
-                item.icon,
-                /* @__PURE__ */ jsx(Text, { className: classes.rowLabel, children: item.label })
-              ]
-            },
-            item.key
-          );
-        }) })
+        title: slot.label,
+        classNames: {
+          content: classes.sheet,
+          title: classes.sheetTitle,
+          header: classes.sheetHeader
+        },
+        transitionProps: {
+          transition: "slide-up",
+          duration: reduceMotion ? 0 : 220,
+          timingFunction: "cubic-bezier(0.32, 0.72, 0, 1)"
+        },
+        children: /* @__PURE__ */ jsx(ScrollArea.Autosize, { mah: "62dvh", type: "scroll", children: /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+          slot.groups.map((group) => /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+            sheetGroupLabel(group),
+            rows(group.items, 0, sheetRow)
+          ] }, group.key)),
+          slot.isMore && extraRows.length > 0 ? /* @__PURE__ */ jsx(Stack, { gap: 2, children: extraRows.map(sheetActionRow) }) : null,
+          slot.isMore ? config?.moreExtra : null
+        ] }) })
       }
     )
-  ] });
+  ] }, slot.key);
+  return /* @__PURE__ */ jsx("nav", { className: classes.bar, "aria-label": "Primary", children: model.slots.map((slot) => {
+    if (slot.kind === "link") return linkTab(slot);
+    if (slot.kind === "menu") return menuSlot(slot);
+    return sheetSlot(slot);
+  }) });
+}
+function slotHasRows(slot) {
+  return slot.groups.some((group) => group.items.length > 0);
+}
+function groupHasCount(items) {
+  return items.some((item) => Boolean(item.count) || groupHasCount(item.children ?? []));
 }
 export {
-  MobileNav
+  MobileNav,
+  accountRowCount
 };

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

@@ -1,3 +1,8 @@
+/*
+ * The mobile bottom bar. Slots are DESTINATIONS: a tap navigates, so the bar must read as a tab
+ * bar rather than as chrome — hence a pill behind the icon for the active slot instead of a
+ * full-tab fill, and a press that depresses the icon without moving the hit box.
+ */
 .bar {
   display: flex;
   align-items: stretch;
@@ -5,6 +10,21 @@
   height: 100%;
   background: var(--mantine-color-body);
   border-top: 1px solid var(--mantine-color-default-border);
+  -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))` +
+   * `padding-bottom: env(safe-area-inset-bottom)`. Adding it here double-counts the inset. */
+}
+
+/* Mantine sets --app-shell-footer-OFFSET to the raw height WITHOUT the inset, so Main's
+ * padding-bottom is short by exactly one inset. This is the only real safe-area gap. */
+@media (max-width: 47.99375em) {
+  .mainSafeArea {
+    padding-bottom: calc(
+      var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding) +
+        env(safe-area-inset-bottom, 0px)
+    );
+  }
 }
 
 .tab {
@@ -16,18 +36,127 @@
   justify-content: center;
   gap: var(--vx-space-mobile-nav-tab-gap);
   color: var(--mantine-color-dimmed);
+  /* Kills the 300ms double-tap-zoom delay and the text-selection flash on a fast repeat tap. */
+  touch-action: manipulation;
+  user-select: none;
+}
+
+.tabIcon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* Deliberately sub-scale: the active pill hugs a 24px glyph, so it is a shape inset rather than
+   * layout spacing — the xs..xl scale has no step this tight. */
+  padding: 2px 12px; /* theme-allow */
+  border-radius: var(--vx-radius-ctrl);
+  transition: transform 140ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+/* A consumer's sidebar icons are typically 18px; the bar normalizes them in CSS so the same
+ * `SidebarItem.icon` renders at slot size with zero consumer change. */
+.tabIcon > svg {
+  width: var(--vx-space-mobile-nav-icon-size);
+  height: var(--vx-space-mobile-nav-icon-size);
 }
 
-/* Active = neutral surface fill + plain text color. Never the identity blue (DESIGN.md). */
+.tab:active .tabIcon {
+  transform: scale(0.9);
+}
+
+/* Active = a neutral pill behind the ICON only, plus plain text color. A full-tab fill is what
+ * makes the bar read as chrome instead of a tab bar. Never the identity blue (DESIGN.md). */
 .tab[data-active] {
   color: var(--mantine-color-text);
+}
+
+.tab[data-active] .tabIcon {
   background-color: color-mix(in srgb, var(--vx-ink) 10%, transparent);
 }
 
+.tab[data-active] .label {
+  font-weight: 600;
+}
+
+/* Unread dot. This is a BADGE, not the active state — the "never the identity blue" rule above
+ * governs the active fill and is unchanged. A count GLYPH is unreadable in a 56px slot. */
+.tabDot {
+  position: absolute;
+  top: 0;
+  inset-inline-end: 8px;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background-color: var(--vx-accent);
+  box-shadow: 0 0 0 2px var(--mantine-color-body);
+}
+
+/* `text-overflow: clip`, never an ellipsis — a truncated word with a "…" in a 72px tab reads as
+ * broken rather than as abbreviated. `SidebarItem.short` is the fix, not the ellipsis. */
 .label {
   font-size: var(--vx-text-micro);
   line-height: 1;
   font-weight: 500;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap;
+}
+
+/* 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). */
+.menuDropdown {
+  padding: 4px;
+  max-height: min(60dvh, 360px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+/* The theme's `Menu.extend` pins `styles.item` padding + font-size to the dense DESKTOP values
+ * INLINE, so a touch-sized mobile row needs `!important` — same cascade problem, same reason, as
+ * `.row` below. */
+.menuItem {
+  min-height: var(--vx-space-mobile-nav-row-height) !important;
+  align-items: center;
+}
+
+.menuItem :global(.mantine-Menu-itemLabel) {
+  font-size: var(--mantine-font-size-md) !important;
+}
+
+/* An active destination reads the same in the More surface as it does in the sheet. */
+.menuItem[aria-current='page'] {
+  background-color: color-mix(in srgb, var(--vx-ink) 13%, transparent);
+  font-weight: 600;
+}
+
+/*
+ * 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).
+ */
+.menuItem[data-disabled] {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+/* Nesting survives to mobile — a child destination is an indented row, not a sibling of its own
+ * parent (which is what today's flattened projection makes it). */
+.menuItemNested {
+  padding-inline-start: calc(var(--mantine-spacing-md) + 12px) !important;
+}
+
+/* Overflow section heading inside the menu — inherits the theme's mono micro-label. */
+.menuLabel {
+  font-family: var(--basalt-font-mono);
+  font-size: var(--vx-text-micro);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--vx-faint);
 }
 
 /*
@@ -39,6 +168,29 @@
   box-shadow: var(--vx-shadow-card);
   border-top-left-radius: var(--mantine-radius-lg);
   border-top-right-radius: var(--mantine-radius-lg);
+  /* A Drawer is NOT an AppShell section, so Mantine adds no inset of its own here. */
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+
+  /*
+   * THE `--drawer-size-auto` TRAP — do not "fix" this by restoring `size="auto"` on the Drawer.
+   * `getSize('auto', 'drawer-size')` (Mantine's `get-size.mjs`) resolves ANY non-numeric size to
+   * `var(--drawer-size-auto)`, and `@mantine/core` defines that custom property NOWHERE — grepped
+   * the full shipped `styles.css`. On a bottom Drawer that dead var flows straight into
+   * `--drawer-height`, so `size="auto"` was never wired to anything; the sheet rendered at
+   * `calc(100% - offset*2)`, i.e. the full viewport, no matter how little content it held. That is
+   * why this component no longer passes a `size` prop at all — it would resolve to *some* value,
+   * but this rule below overrides Mantine's `height`/`max-height` regardless of what that value is.
+   *
+   * This works with NO `!important`: `packages/basalt-ui/styles.css` wraps every Mantine rule in
+   * `@layer mantine` (verified against the installed `styles.layer.css`), and this CSS module is
+   * unlayered — an unlayered rule always wins over a layered one, independent of specificity or
+   * source order. `height: auto` lets the sheet hug its content; `max-height` is a hard ceiling on
+   * the whole sheet (header + body), sized with headroom ABOVE the `ScrollArea.Autosize`'s
+   * `mah="62dvh"` in the JSX — that autosize cap is what actually decides when the sheet starts
+   * scrolling internally, so the two never fight over which one owns "the maximum".
+   */
+  height: auto;
+  max-height: min(70dvh, 100%);
 }
 
 /* Sheet title = a micro-label (docs/DESIGN-SPEC.md §3), matching the sidebar's `.sectionLabel`. */
@@ -51,7 +203,21 @@
   color: var(--vx-faint);
 }
 
-/* Large tap rows inside the group sheet. NavLink rows reuse the sidebar's neutral active fill.
+/*
+ * Mantine's `ModalBase` header forces a `min-height` of `calc(3.75rem * var(--mantine-scale))`
+ * (60px) — sized for a real dialog title, not a 10px micro-label, and a big share of "unnecessarily
+ * big". `--vx-space-mobile-nav-row-height` pins it to the same 44px touch-target floor as every
+ * other row in this bar instead. The header's close button IS the dismiss affordance now — no
+ * separate grabber: there was never swipe-to-dismiss behind it (Mantine ships no drag primitive),
+ * so a plain decorative bar bought nothing an explicit, focusable close control doesn't already
+ * give for free, including to keyboard/screen-reader users the grabber never reached.
+ */
+.sheetHeader {
+  min-height: var(--vx-space-mobile-nav-row-height);
+  padding: 0 var(--mantine-spacing-md);
+}
+
+/* Large tap rows inside the sheet. NavLink rows reuse the sidebar's neutral active fill.
  * `padding` needs `!important`: the theme's `NavLink.extend` forces the dense desktop row padding
  * (6px 10px) INLINE on every NavLink root, which would shrink these touch targets otherwise. */
 .row {
@@ -59,13 +225,23 @@
   align-items: center;
   gap: var(--mantine-spacing-sm);
   width: 100%;
+  min-height: var(--vx-space-mobile-nav-row-height);
   padding: var(--mantine-spacing-sm) var(--mantine-spacing-md) !important;
   border-radius: var(--mantine-radius-sm);
   color: var(--mantine-color-text);
+  touch-action: manipulation;
+  user-select: none;
+}
+
+/* Hover must be gated: on touch an ungated :hover leaves the last-tapped row stuck lit. */
+@media (hover: hover) {
+  .row:hover {
+    background-color: color-mix(in srgb, var(--vx-ink) 8%, transparent);
+  }
 }
 
-.row:hover {
-  background-color: color-mix(in srgb, var(--vx-ink) 8%, transparent);
+.row:active {
+  background-color: color-mix(in srgb, var(--vx-ink) 10%, transparent);
 }
 
 /*
@@ -76,8 +252,7 @@
  * `classNames` are always injected, so the icon needs its own `!important` override here to hold
  * the mobile-only "never accent" doctrine.
  */
-.row[data-active],
-.row[data-active]:hover {
+.row[data-active] {
   --nl-color: var(--mantine-color-text);
   color: var(--mantine-color-text);
   background-color: color-mix(in srgb, var(--vx-ink) 13%, transparent);
@@ -88,13 +263,18 @@
   color: var(--mantine-color-text) !important;
 }
 
-.rowLabel {
-  font-size: var(--mantine-font-size-md);
-  line-height: 1.2;
+.rowNested {
+  padding-inline-start: calc(var(--mantine-spacing-md) + 12px) !important;
 }
 
-/* NavLink-rendered rows match `.rowLabel` — the theme pins the label at the dense desktop 13px
- * INLINE (`styles.label`), so `!important` is required to restore the mobile size. */
+/* Sheet rows read at the mobile body size — the theme pins the label at the dense desktop 13px
+ * INLINE (`styles.label`), so `!important` is required to restore it. */
 .row :global(.mantine-NavLink-label) {
   font-size: var(--mantine-font-size-md) !important;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .tabIcon {
+    transition: none;
+  }
+}

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

@@ -1,14 +1,23 @@
 /**
  * Typed CSS-module declaration (the S4 CSS-modules path). Named string props — not an index
- * signature — so dot access stays verbatim under the package's strict flags.
+ * signature — so dot access stays verbatim under the package's strict flags. HAND-MAINTAINED:
+ * there is no generator, so a new class in `app-mobile-nav.module.css` must be added here too.
  */
 declare const classes: {
   readonly bar: string
+  readonly mainSafeArea: string
   readonly tab: string
+  readonly tabIcon: string
+  readonly tabDot: string
   readonly label: string
+  readonly menuDropdown: string
+  readonly menuItem: string
+  readonly menuItemNested: string
+  readonly menuLabel: string
   readonly sheet: string
   readonly sheetTitle: string
+  readonly sheetHeader: string
   readonly row: string
-  readonly rowLabel: string
+  readonly rowNested: string
 }
 export default classes

package/dist/shell/app-mobile-nav.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=app-mobile-nav.test.d.ts.map

package/dist/shell/app-mobile-nav.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-mobile-nav.test.d.ts","sourceRoot":"","sources":["../../src/shell/app-mobile-nav.test.tsx"],"names":[],"mappings":""}