basalt-ui 1.19.0 → 1.19.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.19.1](https://github.com/jkrumm/basalt-ui/compare/v1.19.0...v1.19.1) (2026-08-20)
+
+
+### Bug Fixes
+
+* cap the mobile bottom-sheet height to its content ([04093ac](https://github.com/jkrumm/basalt-ui/commit/04093ac902d894249ebea3e6381755497670e305))
+
 # [1.19.0](https://github.com/jkrumm/basalt-ui/compare/v1.18.0...v1.19.0) (2026-08-20)
 
 

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

@@ -1 +1 @@
-{"version":3,"file":"app-mobile-nav.d.ts","sourceRoot":"","sources":["../../src/shell/app-mobile-nav.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAc,YAAY,EAAa,MAAM,OAAO,CAAA;AAChE,OAAO,KAAK,EACV,eAAe,EAEf,cAAc,EAGf,MAAM,cAAc,CAAA;AACrB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAiB/C,MAAM,MAAM,cAAc,GAAG;IAC3B,kFAAkF;IAClF,KAAK,EAAE,cAAc,CAAA;IACrB,MAAM,CAAC,EAAE,eAAe,GAAG,SAAS,CAAA;IACpC;;wEAEoE;IACpE,OAAO,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAA;IACxC,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,GAAG,SAAS,CAAA;CACnD,CAAA;AAkFD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,kBAAkB,GAAG,SAAS,GAAG,MAAM,CAE/E;AAsFD,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAM,EACN,OAAO,EACP,iBAAiB,GAClB,EAAE,cAAc,GAAG,YAAY,CAsO/B"}
+{"version":3,"file":"app-mobile-nav.d.ts","sourceRoot":"","sources":["../../src/shell/app-mobile-nav.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAc,YAAY,EAAa,MAAM,OAAO,CAAA;AAChE,OAAO,KAAK,EACV,eAAe,EAEf,cAAc,EAGf,MAAM,cAAc,CAAA;AACrB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAiB/C,MAAM,MAAM,cAAc,GAAG;IAC3B,kFAAkF;IAClF,KAAK,EAAE,cAAc,CAAA;IACrB,MAAM,CAAC,EAAE,eAAe,GAAG,SAAS,CAAA;IACpC;;wEAEoE;IACpE,OAAO,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAA;IACxC,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,GAAG,SAAS,CAAA;CACnD,CAAA;AAkFD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,kBAAkB,GAAG,SAAS,GAAG,MAAM,CAE/E;AAsFD,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAM,EACN,OAAO,EACP,iBAAiB,GAClB,EAAE,cAAc,GAAG,YAAY,CAiP/B"}

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

@@ -281,32 +281,32 @@ function MobileNav({
   );
   const sheetSlot = (slot) => /* @__PURE__ */ jsxs(Fragment2, { children: [
     surfaceTab(slot, () => setOpenKey(slot.key)),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       Drawer,
       {
         opened: openKey === slot.key,
         onClose: close,
         position: "bottom",
-        size: "auto",
         padding: "md",
         title: slot.label,
-        classNames: { content: classes.sheet, title: classes.sheetTitle },
+        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("div", { className: classes.grabber, "aria-hidden": true }),
-          /* @__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
-          ] }) })
-        ]
+        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);

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

@@ -170,6 +170,27 @@
   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`. */
@@ -182,14 +203,18 @@
   color: var(--vx-faint);
 }
 
-/* The dismiss affordance. There is no swipe-to-dismiss: Mantine ships no drag primitive and
- * writing `transform` to Drawer.Content fights its own Transition on the same node. */
-.grabber {
-  width: 36px;
-  height: 4px;
-  margin: 0 auto 8px;
-  border-radius: 999px;
-  background-color: color-mix(in srgb, var(--vx-ink) 18%, transparent);
+/*
+ * 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.

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

@@ -16,7 +16,7 @@ declare const classes: {
   readonly menuLabel: string
   readonly sheet: string
   readonly sheetTitle: string
-  readonly grabber: string
+  readonly sheetHeader: string
   readonly row: string
   readonly rowNested: string
 }

package/llms.txt

@@ -1,4 +1,4 @@
-# basalt-ui v1.19.0
+# basalt-ui v1.19.1
 # Opinionated framework for Mantine-based React apps — theme, app shell, visx charts, toolchain presets
 #
 # basalt-ui is an opinionated framework for Mantine-based React apps.
@@ -19,7 +19,7 @@
 # ./tokens.css subpath. Guide: docs/FRAMEWORK-FREE.md in the repo.
 
 Package: basalt-ui
-Version: 1.19.0
+Version: 1.19.1
 
 ## basalt-ui
 Import: import { ... } from 'basalt-ui'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basalt-ui",
-  "version": "1.19.0",
+  "version": "1.19.1",
   "description": "Opinionated framework for Mantine-based React apps — theme, app shell, visx charts, toolchain presets",
   "keywords": [
     "charts",

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

@@ -170,6 +170,27 @@
   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`. */
@@ -182,14 +203,18 @@
   color: var(--vx-faint);
 }
 
-/* The dismiss affordance. There is no swipe-to-dismiss: Mantine ships no drag primitive and
- * writing `transform` to Drawer.Content fights its own Transition on the same node. */
-.grabber {
-  width: 36px;
-  height: 4px;
-  margin: 0 auto 8px;
-  border-radius: 999px;
-  background-color: color-mix(in srgb, var(--vx-ink) 18%, transparent);
+/*
+ * 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.

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

@@ -16,7 +16,7 @@ declare const classes: {
   readonly menuLabel: string
   readonly sheet: string
   readonly sheetTitle: string
-  readonly grabber: string
+  readonly sheetHeader: string
   readonly row: string
   readonly rowNested: string
 }

package/src/shell/app-mobile-nav.test.tsx

@@ -366,4 +366,38 @@ describe('MobileNav', () => {
     expect(dropdown.querySelectorAll('.mantine-Menu-divider')).toHaveLength(0)
     expect(dropdown.querySelectorAll('.mantine-Menu-item')).toHaveLength(1)
   })
+
+  /**
+   * Regression guard for the mobile-sheet-content-height fix. Neither half is pixel-assertable
+   * under happy-dom (no layout, and CSS-module class hashes are unavailable under `bun test` per
+   * the file header) — so this pins the two DOM-observable facts instead: the sheet is no longer
+   * wired through the dead `size="auto"` → `--drawer-size-auto` custom property (see `.sheet` in
+   * the CSS module for why that was never wired to anything), and the redundant grabber is gone
+   * now that the header's own close button is the sheet's sole dismiss affordance.
+   */
+  test('11. the sheet drops the no-op size prop and the redundant grabber', async () => {
+    renderBar([
+      {
+        label: 'Reports',
+        mobile: { tab: true },
+        items: Array.from({ length: 9 }, (_, i) => item(`row${i + 1}`)),
+      },
+      { label: 'Main', items: [item('home')] },
+    ])
+
+    fireEvent.click(screen.getByLabelText('Reports'))
+    await waitFor(() => expect(drawer()).not.toBeNull())
+
+    // `size="auto"` resolves to `var(--drawer-size-auto)`, a custom property @mantine/core defines
+    // nowhere — its presence anywhere in the tree would be the old bug reappearing.
+    expect(document.querySelector('[style*="drawer-size-auto"]')).toBeNull()
+
+    // The header (title + Mantine's own close button) is the ONLY dismiss affordance now — the
+    // grabber div that used to precede the scroll area is gone, so the body wraps exactly the
+    // `ScrollArea.Autosize` root and nothing else.
+    const header = document.querySelector('.mantine-Drawer-header')
+    expect(header).not.toBeNull()
+    expect(header?.querySelector('.mantine-Drawer-close')).not.toBeNull()
+    expect(document.querySelector('.mantine-Drawer-body')?.children).toHaveLength(1)
+  })
 })

package/src/shell/app-mobile-nav.tsx

@@ -428,18 +428,29 @@ export function MobileNav({
         opened={openKey === slot.key}
         onClose={close}
         position="bottom"
-        size="auto"
+        // NO `size` prop — `size="auto"` used to be here, but it is a no-op on a bottom Drawer in
+        // Mantine 9.3.0 (see the `.sheet` rule in the CSS module for the full trap). The sheet's
+        // actual height/max-height comes entirely from that unlayered CSS rule, which overrides
+        // Mantine's own regardless of what `size` resolves to.
         padding="md"
+        // `title` is both the sheet's accessible name (Mantine wires `aria-labelledby` to it
+        // automatically) and what makes the header render at all — dropping it would need an
+        // explicit `aria-label` on the Drawer instead. `classNames.header` slims Mantine's 60px
+        // title bar down to this bar's touch-target row height; its close button is the sheet's
+        // ONLY dismiss affordance now (see `.sheetHeader` in the CSS module for why the grabber
+        // that used to sit here is gone rather than the header).
         title={slot.label}
-        classNames={{ content: classes.sheet, title: classes.sheetTitle }}
+        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)',
         }}
       >
-        {/* The dismiss affordance. No swipe-to-dismiss — see `.grabber` in the CSS module. */}
-        <div className={classes.grabber} aria-hidden />
         <ScrollArea.Autosize mah="62dvh" type="scroll">
           <Stack gap="xs">
             {slot.groups.map((group) => (