basalt-ui 1.26.0 → 1.28.0

package/src/shell/app-header.module.css

@@ -1,5 +1,9 @@
-/* App-shell top bar layout. ONE 48px row on every viewport —
- * [breadcrumb] ········ [page bar row 1] | [global actions].
+/* App-shell top bar layout. ONE 48px row on every viewport, spanning the FULL viewport width —
+ * [brand | collapse] [breadcrumb] ········ [page bar row 1] | [global actions].
+ *
+ * The leading zone is `app-brand.module.css`'s `.zone`: exactly `--app-shell-navbar-offset` wide,
+ * so its trailing edge lands on the sidebar|main seam and the breadcrumb after it starts on Main's
+ * own content edge. It is absent below `sm`, where there is no navbar to align with.
  *
  * The pre-1.26.0 mobile layout wrapped to a second, always-reserved row for the page actions and
  * scrolled it sideways. Both are gone (law C7 and law C14): the header height is now the
@@ -7,9 +11,10 @@
  * folds into `ActionGroup`'s kebab instead of scrolling out of view. */
 
 /*
- * Transparent header (docs/DESIGN-SPEC.md §5): NO bottom rule at all. The header and the page body
- * share the same page background, so a separator only draws a line across an already-continuous
- * surface. The AppShell's own built-in border is disabled too (`withBorder={false}` in index.tsx).
+ * Transparent header (docs/DESIGN-SPEC.md §5): background stays the page body's own. Its bottom
+ * edge is the `AppShell.Header` region seam, drawn by Mantine off `--app-shell-border-color` →
+ * `--vx-divider`, running edge to edge now that the shell uses Mantine's DEFAULT layout rather than
+ * `alt` — never a border in this module.
  */
 .bar {
   display: flex;

package/src/shell/app-main.module.css

@@ -0,0 +1,107 @@
+/*
+ * The shell's in-flow column: the page-bar BAND, then `AppShell.Main` as the scrollport.
+ *
+ * Mantine's own `.m_8983817` rule offsets Main with PADDING (`padding-top: calc(header-offset +
+ * padding)`, and the same shape for the three other regions) and gives it `min-height: 100dvh`, so
+ * nothing in the shell is a scroll container and the DOCUMENT scrolls. That put the scrollbar at the
+ * far right of the viewport, outside the aside, and made every sticky offset in the package a
+ * window-scroll number. These rules restate those four offsets as MARGINS and bound Main's height to
+ * the band between the header and the footer, which makes Main the one scrolling element and parks
+ * its scrollbar on its own right edge — between the content and the aside.
+ *
+ * Main stays in NORMAL FLOW (margins + flex, never `position: fixed`): a fixed Main would create a
+ * stacking context over the whole page and take the scroll-restoration story with it.
+ *
+ * These rules win over Mantine's with no `!important` and no specificity games: the consumer imports
+ * `@mantine/core/styles.layer.css`, so every Mantine rule lives in `@layer mantine`, and an
+ * UNLAYERED rule always beats a layered one. Same mechanism `app-mobile-nav.module.css` documents
+ * for the bottom sheet's height law.
+ */
+
+/*
+ * The AppShell ROOT as a COLUMN FLEX, and it is load-bearing rather than tidying.
+ *
+ * Two jobs. First, it is what lets the band SIZE ITSELF: the band is `flex: 0 0 auto` and Main is
+ * `flex: 1 1 auto`, so Main's height is whatever the band leaves over — no measurement, no
+ * `--basalt-page-bar-h` arithmetic, and nothing to go stale for the frame between a route change
+ * and the ResizeObserver. Second, a flex container's items never margin-collapse: `.main`'s
+ * `margin-top` used to collapse THROUGH the root (which carries no border or padding in
+ * `mode="fixed"`) and push the whole shell down by a header height. MEASURED before the fix: the
+ * document's `scrollHeight` read 892 against an 844px viewport, i.e. the page scrolled by exactly
+ * the 48px the margin was supposed to consume.
+ *
+ * Header, navbar, aside and footer are `position: fixed`, so they are out of flow and are not flex
+ * items — the column really only holds the band and Main. Scoped away from `mode="static"` (a grid)
+ * so it can never fight Mantine's own display: `BasaltShell` never sets that mode, and this rule
+ * should not be the reason it cannot.
+ */
+.shell:not([data-mode='static']) {
+  display: flex;
+  flex-direction: column;
+}
+
+/*
+ * The page-bar band — `PageBar` row 2's home (`page-bar.tsx`'s `PageBarBandOutlet`), OUTSIDE the
+ * scrollport so it neither scrolls with the content nor has to stick against it.
+ *
+ * `:empty` is the whole of law C14 here: the outlet is always mounted (a portal needs a target that
+ * exists before anything portals into it), and with nothing inside it the box is zero-height, draws
+ * no seam and costs the page nothing. A route with no `PageBar` is pixel-identical to one rendered
+ * without an outlet at all.
+ */
+.band {
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  min-width: 0;
+  margin-top: var(--app-shell-header-offset, 0rem);
+  margin-inline-start: var(--app-shell-navbar-offset, 0rem);
+  margin-inline-end: var(--app-shell-aside-offset, 0rem);
+  padding-inline: var(--app-shell-padding);
+  background-color: var(--vx-surface-bg);
+  /* Mantine's own AppShell timing, so the band and the regions it aligns to move as one box. */
+  transition-property: margin;
+  transition-duration: var(--app-shell-transition-duration);
+  transition-timing-function: var(--app-shell-transition-timing-function);
+}
+
+/*
+ * The ONE line under the page bar. The header's own seam belongs to `AppShell.Header` one region up
+ * and is painted by Mantine's `[data-with-border]`, so the two never double up — and because this
+ * rule is gated on the band actually holding something, a page with no bar paints no line at all.
+ */
+.band:not(:empty) {
+  border-bottom: 1px solid var(--vx-divider);
+}
+
+.main {
+  /* The remainder of the column: whatever the band left. `min-height: 0` is what lets a flex item
+   * shrink below its content and therefore scroll at all. */
+  flex: 1 1 auto;
+  min-height: 0;
+  box-sizing: border-box;
+  /*
+   * The footer's inset is subtracted SEPARATELY because `--app-shell-footer-offset` is the RAW
+   * footer height: Mantine's own `.footer` rule grows the painted box by
+   * `env(safe-area-inset-bottom)` on top of that (see `app-mobile-nav.module.css`). This is the
+   * same one-inset gap the deleted `.mainSafeArea` padding used to close — folded in here, where
+   * the box is decided, instead of as a second answer further down.
+   */
+  margin-bottom: calc(var(--app-shell-footer-offset, 0rem) + env(safe-area-inset-bottom, 0px));
+  margin-inline-start: var(--app-shell-navbar-offset, 0rem);
+  margin-inline-end: var(--app-shell-aside-offset, 0rem);
+  padding: var(--app-shell-padding);
+  /* Without this a wide flex/grid child (a bare table, a nowrap control row) sizes Main to ITSELF. */
+  min-width: 0;
+  overflow-y: auto;
+  /*
+   * `auto`, never `hidden`/`clip`. Clipping would make horizontal overflow invisible instead of
+   * absent — exactly the phone defect `no-horizontal-overflow.layout.test.ts` guards, and the guard
+   * reads `main.scrollWidth <= clientWidth`, which a clip would silently satisfy.
+   */
+  overflow-x: auto;
+  /* A page that bottoms out must not hand the scroll to the document behind it. */
+  overscroll-behavior: contain;
+  /* Mantine animates `padding` here; the offsets are margins now, so the navbar-collapse transition
+   * tracks those instead. The HEIGHT is flex's job and needs no transition of its own. */
+  transition-property: margin;
+}

package/src/shell/app-main.module.css.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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. HAND-MAINTAINED:
+ * there is no generator, so a new class in `app-main.module.css` must be added here too.
+ */
+declare const classes: {
+  readonly shell: string
+  readonly band: string
+  readonly main: string
+}
+export default classes

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

@@ -1,7 +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.
+ * full-tab fill, and a press that depresses the icon without moving the hit box. The top edge is
+ * the shell's `AppShell.Footer` region seam (docs/DESIGN-SPEC.md §5), not this module's to draw.
  */
 .bar {
   display: flex;
@@ -9,23 +10,16 @@
   width: 100%;
   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)
-    );
-  }
-}
+/* The `.mainSafeArea` padding-bottom that used to live here is GONE, not moved wholesale: Mantine
+ * sets --app-shell-footer-OFFSET to the raw height WITHOUT the inset, and `app-main.module.css`
+ * now subtracts the offset AND the inset from Main's height, so the one real safe-area gap is
+ * closed where the scrollport's box is decided. A padding here would double-count it. */
 
 .tab {
   flex: 1 1 0;
@@ -120,9 +114,9 @@
   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. */
+/* The theme's `Menu.extend` already pins `styles.item` to the row-inset tokens INLINE (the same
+ * vocabulary the sheet's `.row` now reads too) but sets no `min-height` — that's the one thing
+ * this override still supplies, over the theme's own unset default. */
 .menuItem {
   min-height: var(--vx-space-mobile-nav-row-height) !important;
   align-items: center;
@@ -201,6 +195,22 @@
   max-height: min(70dvh, 100%);
 }
 
+/*
+ * M5 — symmetric row insets. Mantine's Drawer `padding="md"` (18px) is symmetric by construction,
+ * but `offsetScrollbars="present"` (the M4 scrollbar-gutter fix) reserves its gutter INSIDE the
+ * body on top of that padding, on the scrollbar side only — measured 18px left / 30px right before
+ * this rule (18 body padding + the then-12px default gutter). Trimming the body's own right inset
+ * by exactly `scrollbarSize` (8px, set alongside `offsetScrollbars` in the JSX) leaves the reserved
+ * gutter to fill the gap it opened instead of stacking on top of it: 10 body + 8 gutter = 18,
+ * matching the untouched left side. The thumb still lives entirely inside that 8px zone, past the
+ * row's own right edge — it never overlaps a row, which is the invariant `offsetScrollbars` exists
+ * to hold; only its OWN width moved, not whether it reserves one. No `!important`: this module is
+ * unlayered and already wins over Mantine's `@layer mantine` body rule (see `.sheet` above).
+ */
+.sheet :global(.mantine-Drawer-body) {
+  padding-inline-end: calc(var(--mantine-spacing-md) - 8px);
+}
+
 /* Sheet title = a micro-label (docs/DESIGN-SPEC.md §3), matching the sidebar's `.sectionLabel`. */
 .sheetTitle {
   font-family: var(--basalt-font-mono);
@@ -214,7 +224,7 @@
 /*
  * 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
+ * big". `--vx-space-mobile-nav-row-height` pins it to the same 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
@@ -225,16 +235,22 @@
   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. */
+/*
+ * Large tap rows inside the sheet — ONE row vocabulary with the desktop sidebar's `.link`
+ * (docs/DESIGN-SPEC.md §5): the theme's `NavLink.extend` already forces `--vx-space-row-inset-y`/
+ * `-x` padding, `VX.text.md` font-size and `--vx-space-row-line-height` line-height INLINE on every
+ * NavLink root AND its label (`theme/index.ts`'s `styles.root`/`styles.label`), so this rule no
+ * longer fights that — it used to force the dense desktop row's padding back OPEN with
+ * `!important`, which is exactly how a "44px touch row" and a "29px sidebar row" ended up as two
+ * unrelated geometries for the same list. What is left here is only what the theme does not supply:
+ * the touch-target `min-height` floor (`--vx-space-mobile-nav-row-height`, 40px — WCAG 2.5.5 AA).
+ */
 .row {
   display: flex;
   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;
@@ -279,14 +295,19 @@
   color: var(--mantine-color-text) !important;
 }
 
+/*
+ * Nested (child) rows — same idiom as the sidebar's `.childList` (docs/DESIGN-SPEC.md §5, "Child
+ * items"): a 1px `--vx-divider` left guide plus the sidebar's own child indent, reusing the exact
+ * tokens rather than inventing a mobile-only indent. The sidebar draws the guide on a wrapper
+ * around the whole child group; a flat sheet has no such wrapper, so the guide is drawn per row
+ * instead and `width` is pulled in by the same amount the row is pushed out, so it still ends flush
+ * with its parent's right edge.
+ */
 .rowNested {
-  padding-inline-start: calc(var(--mantine-spacing-md) + 12px) !important;
-}
-
-/* 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;
+  width: calc(100% - var(--vx-space-sidebar-child-list-indent));
+  margin-inline-start: var(--vx-space-sidebar-child-list-indent);
+  border-left: 1px solid var(--vx-divider);
+  padding-inline-start: var(--vx-space-sidebar-child-row-indent) !important;
 }
 
 @media (prefers-reduced-motion: reduce) {

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

@@ -5,7 +5,6 @@
  */
 declare const classes: {
   readonly bar: string
-  readonly mainSafeArea: string
   readonly tab: string
   readonly tabIcon: string
   readonly tabDot: string

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

@@ -20,6 +20,10 @@ import { Drawer, Menu, NavLink, ScrollArea, Stack, Text, UnstyledButton } from '
 import { useReducedMotion } from '@mantine/hooks'
 import { Fragment, useState } from 'react'
 import type { MouseEvent, ReactElement, ReactNode } from 'react'
+import { cx } from '../common/props'
+import type { BasaltProps } from '../common/props'
+import { assertRequiredProps } from '../common/validate'
+import { SCROLLPORT_ATTRIBUTE } from '../common/scroll-parent'
 import type {
   MobileNavConfig,
   MobileNavGroup,
@@ -51,7 +55,7 @@ type LinkSlot = Extract<MobileNavSlot, { kind: 'link' }>
 /** A slot that raises a surface. `menu` and `sheet` share one shape — only the renderer differs. */
 type SurfaceSlot = Exclude<MobileNavSlot, LinkSlot>
 
-export type MobileNavProps = {
+export type MobileNavProps = BasaltProps & {
   /** The projection from `projectMobileNav` — `BasaltShell` builds it, memoized. */
   model: MobileNavModel
   config?: MobileNavConfig | undefined
@@ -251,7 +255,10 @@ export function MobileNav({
   account,
   settingsMenuItems,
   blocks,
+  className,
+  style,
 }: MobileNavProps): ReactElement {
+  assertRequiredProps('MobileNav', { model }, ['model'], { model: '`model.slots`' })
   // `openKey` is the ONLY slot state here, and it is keyed by slot rather than holding a slot
   // object: `sections` identity churning on every consumer render must not close an open menu.
   const [openKey, setOpenKey] = useState<string | null>(null)
@@ -264,10 +271,19 @@ export function MobileNav({
 
   const close = () => setOpenKey(null)
 
-  /** §2.5 — re-tapping the ACTIVE slot scrolls to top instead of pushing a redundant history entry. */
+  /**
+   * §2.5 — re-tapping the ACTIVE slot scrolls to top instead of pushing a redundant history entry.
+   *
+   * `AppShell.Main` is the shell's scrollport (`app-main.module.css`), so `document.scrollingElement`
+   * scrolls nothing inside a shell and the tap read as dead. The declared handle comes FIRST after
+   * the consumer's own override, and the document stays the fallback for a shell-less app.
+   */
   const scrollToTop = () => {
     const target =
-      config?.getScrollElement?.() ?? document.scrollingElement ?? document.documentElement
+      config?.getScrollElement?.() ??
+      document.querySelector(`[${SCROLLPORT_ATTRIBUTE}]`) ??
+      document.scrollingElement ??
+      document.documentElement
     target.scrollTo({ top: 0, behavior: reduceMotion ? 'auto' : 'smooth' })
   }
 
@@ -549,19 +565,31 @@ export function MobileNav({
           timingFunction: 'cubic-bezier(0.32, 0.72, 0, 1)',
         }}
       >
-        <ScrollArea.Autosize mah="62dvh" type="scroll">
-          <Stack gap="xs">
+        {/* `offsetScrollbars="present"` reserves the overlay bar's own gutter (Mantine's
+            `data-offset-scrollbars`) instead of floating it over the rows' trailing edge — the
+            sheet has no spare right inset the way the sidebar's `.navScroll` bleed does. The outer
+            Stack's gap and the group Stack's `gap={2}` both reuse the sidebar's section rhythm
+            (`--vx-space-sidebar-section-gap`/`-section-label-gap`); the inner `gap={1}` is the
+            sidebar's own row-to-row gap (`app-sidebar.tsx`'s nav `Stack gap={1}`).
+            `scrollbarSize={8}` (down from Mantine's 12px default) is the tightest gutter that still
+            clears a touch-sized thumb without the row overlap the M4 fix was written against; the
+            `.sheet :global(.mantine-Drawer-body)` rule in the CSS module trims the body's own
+            RIGHT padding by that same 8px, so the reserved gutter fills the gap it opened instead
+            of stacking on top of the (symmetric) Drawer `padding="md"` — measured 18/18, not the
+            18/30 the untrimmed body produced. */}
+        <ScrollArea.Autosize mah="62dvh" type="scroll" offsetScrollbars="present" scrollbarSize={8}>
+          <Stack gap="var(--vx-space-sidebar-section-gap)">
             {slot.groups.map((group) => (
               <Stack key={group.key} gap={2}>
                 {sheetGroupLabel(group)}
-                {rows(group.items, 0, sheetRow)}
+                <Stack gap={1}>{rows(group.items, 0, sheetRow)}</Stack>
               </Stack>
             ))}
             {slot.isMore && moreBlocks.length > 0 ? (
-              <Stack gap={2}>{moreBlocks.map(sheetBlockRow)}</Stack>
+              <Stack gap={1}>{moreBlocks.map(sheetBlockRow)}</Stack>
             ) : null}
             {slot.isMore && extraRows.length > 0 ? (
-              <Stack gap={2}>{extraRows.map(sheetActionRow)}</Stack>
+              <Stack gap={1}>{extraRows.map(sheetActionRow)}</Stack>
             ) : null}
           </Stack>
         </ScrollArea.Autosize>
@@ -594,14 +622,18 @@ export function MobileNav({
         timingFunction: 'cubic-bezier(0.32, 0.72, 0, 1)',
       }}
     >
-      <ScrollArea.Autosize mah="62dvh" type="scroll">
-        <Stack gap={2}>{block.items.map(blockItemRow)}</Stack>
+      <ScrollArea.Autosize mah="62dvh" type="scroll" offsetScrollbars="present" scrollbarSize={8}>
+        <Stack gap={1}>{block.items.map(blockItemRow)}</Stack>
       </ScrollArea.Autosize>
     </Drawer>
   )
 
   return (
-    <nav className={classes.bar} aria-label="Primary">
+    <nav
+      className={cx(classes.bar, className)}
+      aria-label="Primary"
+      {...(style !== undefined && { style })}
+    >
       {model.slots.map((slot) => {
         if (slot.kind === 'link') return linkTab(slot)
         if (slot.kind === 'menu') return menuSlot(slot)

package/src/shell/app-sidebar-account.tsx

@@ -18,6 +18,9 @@
  */
 import { Group, Menu, Skeleton, Stack, Text, UnstyledButton } from '@mantine/core'
 import { useBasaltSpacing } from '../theme'
+import { cx } from '../common/props'
+import type { BasaltProps } from '../common/props'
+import { assertRequiredProps } from '../common/validate'
 import type { BasaltAccountProps } from './account-types'
 import classes from './app-sidebar.module.css'
 
@@ -59,9 +62,14 @@ function IconUser() {
   )
 }
 
-function AccountSkeleton() {
+function AccountSkeleton({ className, style }: BasaltProps) {
   return (
-    <Group className={classes.accountRow} gap="sm" wrap="nowrap">
+    <Group
+      className={cx(classes.accountRow, className)}
+      gap="sm"
+      wrap="nowrap"
+      {...(style !== undefined && { style })}
+    >
       <Skeleton height={28} width={28} style={{ borderRadius: 'var(--vx-radius-card)' }} />
       <Stack gap={4} className={classes.accountText}>
         <Skeleton height={10} width="70%" radius="sm" />
@@ -71,7 +79,9 @@ function AccountSkeleton() {
   )
 }
 
-export function SidebarAccount({ state, actions, showEmail }: BasaltAccountProps) {
+export function SidebarAccount(props: BasaltAccountProps & BasaltProps) {
+  assertRequiredProps('SidebarAccount', props, ['state'])
+  const { state, actions, showEmail, className, style } = props
   // Density-tracking Menu dropdown width (`SPACE_STEP.sidebarAccountMenuWidth`) — read the ACTIVE
   // resolved level, not the frozen level-0 constant, so the dropdown widens with its rows as density
   // rises (see that constant's own doc in `tokens/palette.ts`). Called unconditionally, ahead of the
@@ -79,12 +89,21 @@ export function SidebarAccount({ state, actions, showEmail }: BasaltAccountProps
   const { step } = useBasaltSpacing()
 
   if (state.status === 'loading') {
-    return <AccountSkeleton />
+    return (
+      <AccountSkeleton
+        {...(className !== undefined && { className })}
+        {...(style !== undefined && { style })}
+      />
+    )
   }
 
   if (state.status === 'unauthenticated') {
     return (
-      <UnstyledButton className={classes.accountRow} onClick={actions?.onSignIn}>
+      <UnstyledButton
+        className={cx(classes.accountRow, className)}
+        onClick={actions?.onSignIn}
+        {...(style !== undefined && { style })}
+      >
         <IconUser />
         <Text className={classes.accountText} size="sm" fw={500}>
           Sign in
@@ -99,7 +118,11 @@ export function SidebarAccount({ state, actions, showEmail }: BasaltAccountProps
   return (
     <Menu position="right-end" withArrow width={step.sidebarAccountMenuWidth} zIndex={500}>
       <Menu.Target>
-        <UnstyledButton className={classes.accountRow} aria-label="Account menu">
+        <UnstyledButton
+          className={cx(classes.accountRow, className)}
+          aria-label="Account menu"
+          {...(style !== undefined && { style })}
+        >
           <InitialsBlock name={identity.name} />
           <Stack gap={2} className={classes.accountText}>
             <Text className={classes.accountName} truncate>