basalt-ui 1.24.0 → 1.26.0

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

@@ -25,11 +25,17 @@ import type {
   MobileNavGroup,
   MobileNavModel,
   MobileNavSlot,
+  SidebarBlock,
+  SidebarBlockItem,
   SidebarItem,
+  SidebarListBlock,
+  SidebarProgressBlock,
 } from '../nav/types'
 import type { BasaltAccountProps } from './account-types'
 import type { SettingsMenuItem } from './index'
 import { NavCountBadge } from './nav-count-badge'
+import { SidebarBlockToneDot } from './sidebar-blocks'
+import { sidebarBlockMobile } from './sidebar-block-model'
 import { useBasaltSpacing } from '../theme'
 import classes from './app-mobile-nav.module.css'
 
@@ -54,6 +60,13 @@ export type MobileNavProps = {
    *  deletable: everything it used to hold is reachable from More. */
   account?: BasaltAccountProps | undefined
   settingsMenuItems?: SettingsMenuItem[] | undefined
+  /**
+   * The sidebar's blocks, projected. A block with `mobile: 'more'` becomes ONE row in the More
+   * surface (`Awaiting action · 3`) that opens a nested 44px-row sheet of its items — the sidebar
+   * itself does not exist below `sm`, so this is the only way its blocks are reachable at all.
+   * Counted for the menu-vs-sheet threshold by `blockRowCount`, never re-counted here.
+   */
+  blocks?: SidebarBlock[] | undefined
 }
 
 /** Inline "More" glyph — keeps the shell icon-dependency-free. */
@@ -237,10 +250,13 @@ export function MobileNav({
   config,
   account,
   settingsMenuItems,
+  blocks,
 }: MobileNavProps): ReactElement {
-  // `openKey` is the ONLY 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.
+  // `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)
+  // The nested block sheet, keyed the same way and for the same reason.
+  const [openBlockKey, setOpenBlockKey] = useState<string | null>(null)
   // `DEFAULT_THEME.respectReducedMotion` is false in Mantine 9.3 and `createBasaltTheme` does not
   // set it, so the preference has to be read explicitly at the call site.
   const reduceMotion = useReducedMotion()
@@ -257,6 +273,86 @@ export function MobileNav({
 
   const extraRows = [...accountRows(account), ...settingsRows(settingsMenuItems)]
 
+  /**
+   * The blocks that reach More, in sidebar order and with the same emptiness rule `blockRowCount`
+   * applies — the count that picked `menu` vs `sheet` and the rows that render must agree.
+   */
+  const moreBlocks = (blocks ?? []).filter(
+    (block): block is SidebarListBlock | SidebarProgressBlock =>
+      block.kind !== 'custom' &&
+      sidebarBlockMobile(block) === 'more' &&
+      (block.kind !== 'list' || block.items.length > 0),
+  )
+  const listBlocks = moreBlocks.filter((block): block is SidebarListBlock => block.kind === 'list')
+
+  /** A list block raises its nested sheet; a progress block just fires its own handler. */
+  const activateBlock = (block: (typeof moreBlocks)[number]) => {
+    close()
+    if (block.kind === 'list') {
+      setOpenBlockKey(block.key)
+      return
+    }
+    block.onClick?.()
+  }
+
+  const menuBlockRow = (block: (typeof moreBlocks)[number]) => (
+    <Menu.Item key={block.key} className={classes.menuItem} onClick={() => activateBlock(block)}>
+      {blockRowLabel(block)}
+    </Menu.Item>
+  )
+
+  const sheetBlockRow = (block: (typeof moreBlocks)[number]) => (
+    <NavLink
+      key={block.key}
+      classNames={{ root: classes.row }}
+      label={blockRowLabel(block)}
+      onClick={() => activateBlock(block)}
+    />
+  )
+
+  /** One block ITEM, inside the nested sheet. A row with nowhere to go stays plain text. */
+  const blockItemRow = (item: SidebarBlockItem): ReactElement => {
+    const lead =
+      item.icon ?? (item.tone !== undefined ? <SidebarBlockToneDot tone={item.tone} /> : undefined)
+    const meta =
+      item.meta !== undefined ? (
+        <Text component="span" className={classes.rowMeta}>
+          {item.meta}
+        </Text>
+      ) : undefined
+    const interactive =
+      item.Anchor !== undefined || item.href !== undefined || item.onClick !== undefined
+    if (!interactive) {
+      return (
+        <div key={item.key} className={classes.row}>
+          {lead}
+          <Text component="span">{item.label}</Text>
+          {meta}
+        </div>
+      )
+    }
+    const shared = {
+      classNames: { root: classes.row },
+      label: item.label,
+      ...(lead !== undefined && { leftSection: lead }),
+      ...(meta !== undefined && { rightSection: meta }),
+      onClick: () => {
+        item.onClick?.()
+        setOpenBlockKey(null)
+      },
+    }
+    const Anchor = item.Anchor
+    if (Anchor) return <NavLink key={item.key} component={Anchor} {...shared} />
+    return (
+      <NavLink
+        key={item.key}
+        component="a"
+        {...(item.href !== undefined && { href: item.href })}
+        {...shared}
+      />
+    )
+  }
+
   /** True when any destination in the slot carries an unread count — the icon dot (§2.4). */
   const hasCount = (slot: MobileNavSlot): boolean =>
     slot.kind === 'link'
@@ -411,12 +507,14 @@ export function MobileNav({
             : []),
           ...rows(group.items, 0, menuRow),
         ])}
-        {/* A separator separates. With nothing above it — a More slot raised purely by the account
-            and settings rows — it would render as the dropdown's first child, a rule under the
-            top edge. Both sides have to exist. */}
-        {slot.isMore && extraRows.length > 0 && slotHasRows(slot) ? <Menu.Divider /> : null}
+        {/* A separator separates. With nothing above it — a More slot raised purely by the block,
+            account and settings rows — it would render as the dropdown's first child, a rule under
+            the top edge. Both sides have to exist. */}
+        {slot.isMore && moreBlocks.length + extraRows.length > 0 && slotHasRows(slot) ? (
+          <Menu.Divider />
+        ) : null}
+        {slot.isMore ? moreBlocks.map(menuBlockRow) : null}
         {slot.isMore ? extraRows.map(menuActionRow) : null}
-        {slot.isMore ? config?.moreExtra : null}
       </Menu.Dropdown>
     </Menu>
   )
@@ -459,16 +557,49 @@ export function MobileNav({
                 {rows(group.items, 0, sheetRow)}
               </Stack>
             ))}
+            {slot.isMore && moreBlocks.length > 0 ? (
+              <Stack gap={2}>{moreBlocks.map(sheetBlockRow)}</Stack>
+            ) : null}
             {slot.isMore && extraRows.length > 0 ? (
               <Stack gap={2}>{extraRows.map(sheetActionRow)}</Stack>
             ) : null}
-            {slot.isMore ? config?.moreExtra : null}
           </Stack>
         </ScrollArea.Autosize>
       </Drawer>
     </Fragment>
   )
 
+  /**
+   * The nested block sheet — one Drawer instance PER block rather than one shared instance fed the
+   * open block. A shared one would empty its own body the moment `onClose` cleared the key, so the
+   * exit transition would play against a blank sheet; a closed Mantine Drawer renders nothing, so N
+   * instances cost N nothings.
+   */
+  const blockSheet = (block: SidebarListBlock) => (
+    <Drawer
+      key={`block-${block.key}`}
+      opened={openBlockKey === block.key}
+      onClose={() => setOpenBlockKey(null)}
+      position="bottom"
+      padding="md"
+      title={block.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)',
+      }}
+    >
+      <ScrollArea.Autosize mah="62dvh" type="scroll">
+        <Stack gap={2}>{block.items.map(blockItemRow)}</Stack>
+      </ScrollArea.Autosize>
+    </Drawer>
+  )
+
   return (
     <nav className={classes.bar} aria-label="Primary">
       {model.slots.map((slot) => {
@@ -476,10 +607,18 @@ export function MobileNav({
         if (slot.kind === 'menu') return menuSlot(slot)
         return sheetSlot(slot)
       })}
+      {listBlocks.map(blockSheet)}
     </nav>
   )
 }
 
+/** `Awaiting action · 3` — the row's whole job is to say how much is behind it. */
+function blockRowLabel(block: SidebarListBlock | SidebarProgressBlock): string {
+  return block.kind === 'list'
+    ? `${block.label} · ${block.count ?? block.items.length}`
+    : `${block.label} · ${block.value} of ${block.total}`
+}
+
 /** Whether a surface slot paints any destination row at all (as opposed to only derived rows). */
 function slotHasRows(slot: SurfaceSlot): boolean {
   return slot.groups.some((group) => group.items.length > 0)

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

@@ -29,7 +29,7 @@ function getInitials(name: string): string {
   return `${first}${last}`.toUpperCase()
 }
 
-/** Identity initials block — 28px, radius 7, ink-10% bg, mono 10.5px (docs/DESIGN-SPEC.md §5). */
+/** Identity initials block — 28px, radius 7, ink-10% bg, mono micro (11px) (docs/DESIGN-SPEC.md §5). */
 function InitialsBlock({ name }: { name: string }) {
   return (
     <div className={classes.avatar} aria-hidden>
@@ -39,7 +39,7 @@ function InitialsBlock({ name }: { name: string }) {
 }
 
 /** Generic "person" glyph for the unauthenticated row — matches the inline-SVG icon convention
- * used elsewhere in the shell (`IconGear`/`IconClose` in `app-sidebar.tsx`). */
+ * used elsewhere in the shell (`IconGear` in `app-sidebar.tsx`). */
 function IconUser() {
   return (
     <svg

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

@@ -40,30 +40,63 @@
 
 /* Inactive rows: muted text + faint icon. Active rows keep the theme's ink text (via `--nl-color`)
  * untouched — this selector only ever matches when neither `data-active` nor `aria-current="page"`
- * is present. */
-.link:not([data-active]):not([aria-current='page']) {
+ * is present. `[data-ancestor]` is excluded too: it gets its own ink/accent treatment below and
+ * must not fall through to muted/faint here. */
+.link:not([data-active]):not([aria-current='page']):not([data-ancestor]) {
   color: var(--vx-muted) !important;
 }
 
-.link:not([data-active]):not([aria-current='page'])
+.link:not([data-active]):not([aria-current='page']):not([data-ancestor])
   :global(.mantine-NavLink-section[data-position='left']) {
   color: var(--vx-faint);
 }
 
 /* Hover — ink-6% tint + ink text, for inactive rows only (an active row already carries the
- * theme's stronger ink-9% tint and keeps its own hover via `--nl-hover`). */
+ * theme's stronger ink-9% tint and keeps its own hover via `--nl-hover`; an ancestor row gets its
+ * own hover rule below so its accent icon survives the pointer). */
 @media (hover: hover) {
-  .link:not([data-active]):not([aria-current='page']):hover {
+  .link:not([data-active]):not([aria-current='page']):not([data-ancestor]):hover {
     background-color: color-mix(in srgb, var(--vx-ink) 6%, transparent) !important;
     color: var(--vx-ink) !important;
   }
 
-  .link:not([data-active]):not([aria-current='page']):hover
+  .link:not([data-active]):not([aria-current='page']):not([data-ancestor]):hover
     :global(.mantine-NavLink-section[data-position='left']) {
     color: var(--vx-ink);
   }
 }
 
+/*
+ * Ancestor row (`SidebarItem.ancestor` — a parent on the path to the active row, never active
+ * itself, never `aria-current`): must read visibly WEAKER than active and visibly STRONGER than a
+ * hovered inactive row, since all three now share the same 6%/9% ink-tint family. Active carries a
+ * persistent `--nl-bg` ink-9% fill + weight 600 (theme `nav-link.module.css`); a hovered inactive
+ * row carries a transient ink-6% fill. An ancestor therefore gets NO fill at rest (unlike active)
+ * and NO weight change (still 400, unlike active's 600) — only the ink label + accent icon that an
+ * active row also carries, so it reads as "on the path" without claiming to BE the destination.
+ */
+.link[data-ancestor] {
+  color: var(--vx-ink) !important;
+}
+
+.link[data-ancestor] :global(.mantine-NavLink-section[data-position='left']) {
+  color: var(--vx-accent);
+}
+
+/* Hover still adds the shared ink-6% tint (same as any inactive row), but must not let the plain
+ * inactive hover rule above flatten the icon back to ink — that rule is excluded via
+ * `:not([data-ancestor])`, and this one re-asserts the accent icon on top of the shared tint. */
+@media (hover: hover) {
+  .link[data-ancestor]:hover {
+    background-color: color-mix(in srgb, var(--vx-ink) 6%, transparent) !important;
+    color: var(--vx-ink) !important;
+  }
+
+  .link[data-ancestor]:hover :global(.mantine-NavLink-section[data-position='left']) {
+    color: var(--vx-accent);
+  }
+}
+
 /*
  * Icon-only ghost buttons in shell chrome (collapse toggle, mobile close) — docs/DESIGN-SPEC.md
  * §5: transparent, faint icon, hover ink-6% + ink, radius 6. `!important` for the same reason as
@@ -113,6 +146,22 @@
   font-stretch: 88%;
 }
 
+/* Workspace switcher (`brand.menu`) — the brand name plus a chevron, as a row-shaped trigger. The
+ * chevron is faint until hover so the brand still reads as the brand, not as a control. */
+.brandButton {
+  display: flex;
+  align-items: center;
+  gap: var(--vx-space-sidebar-section-label-gap);
+  min-width: 0;
+  padding: 0;
+  color: var(--vx-faint);
+  cursor: pointer;
+}
+
+.brandButton:hover {
+  color: var(--vx-ink);
+}
+
 /*
  * Nav scroll region — a Mantine ScrollArea, whose overlay scrollbar is absolutely positioned inside
  * the (position: relative; overflow: hidden) root, so it floats over the rows instead of reserving
@@ -151,7 +200,7 @@
 
 /*
  * Footer settings row — IDENTICAL geometry to a nav row (padding 6px 10px, radius 6, gap 10,
- * 13px): muted text + faint icon at rest, ink-6% tint + ink on hover, exactly like an inactive
+ * 15px): muted text + faint icon at rest, ink-6% tint + ink on hover, exactly like an inactive
  * nav item, so the footer never reads as a separate control family.
  */
 .footerBtn {
@@ -211,7 +260,7 @@
 }
 
 /*
- * Identity initials block (docs/DESIGN-SPEC.md §5): 28px, radius 7, ink-10% bg, mono 10.5px
+ * Identity initials block (docs/DESIGN-SPEC.md §5): 28px, radius 7, ink-10% bg, mono micro (11px)
  * weight 500, muted — replaces the generic person glyph for the authenticated state.
  */
 .avatar {
@@ -236,7 +285,7 @@
   color: var(--vx-ink);
 }
 
-/* Meta line under the name (email / "FREE · MEMBER") — mono 9.5px, uppercase, faint, tracked
+/* Meta line under the name (email / "FREE · MEMBER") — mono micro (11px), uppercase, faint, tracked
  * 0.03em. */
 .accountMeta {
   font-family: var(--basalt-font-mono);
@@ -293,6 +342,214 @@
   color: var(--vx-ink);
 }
 
+/*
+ * ── Sidebar blocks (docs/CONTROLS-SPEC.md §2.3) ────────────────────────────────────────────────
+ *
+ * Same spacing-only separation law as the nav sections above: no rules, no bands, no fills. A
+ * block's rows are 32px (`--vx-space-sidebar-block-row-height`) — one step under a nav row, since
+ * a block row is reference material rather than a destination.
+ */
+.block {
+  min-width: 0;
+}
+
+.blockHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--vx-space-nav-icon-gap);
+  width: 100%;
+  padding: 0 var(--vx-space-row-inset-x);
+  margin-bottom: var(--vx-space-sidebar-section-label-gap);
+}
+
+/* The header's label takes the free width so a count badge / chevron sits hard right. */
+.blockHeader > div:first-of-type {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+}
+
+/* Collapsible variant — text-only hover, exactly like `.sectionHeader`; never a band. */
+.blockHeaderButton {
+  color: var(--vx-faint);
+  cursor: pointer;
+}
+
+.blockHeaderButton:hover .sectionLabel {
+  color: var(--vx-ink);
+}
+
+.blockIcon {
+  position: relative;
+  display: flex;
+  flex: none;
+  align-items: center;
+  color: var(--vx-faint);
+}
+
+/*
+ * Rail dot — the collapsed rail's whole representation of a `count`. Hidden in the expanded
+ * sidebar, where the count renders as a real `NavCountBadge` instead: a dot and a number saying
+ * the same thing twice is noise, and the rail has no room for the number.
+ */
+.blockDot {
+  position: absolute;
+  top: -2px;
+  inset-inline-end: -3px;
+  display: none;
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background-color: var(--vx-accent);
+  box-shadow: 0 0 0 2px var(--mantine-color-body);
+}
+
+.blockItems {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Block row — 32px, small text, muted; the same ink-6% hover every other sidebar row uses. */
+.blockRow {
+  display: flex;
+  align-items: center;
+  gap: var(--vx-space-nav-icon-gap);
+  min-height: var(--vx-space-sidebar-block-row-height);
+  padding: 0 var(--vx-space-row-inset-x) !important;
+  border-radius: var(--vx-radius-ctrl) !important;
+  font-size: var(--vx-text-sm);
+  color: var(--vx-muted);
+}
+
+.blockRow :global(.mantine-NavLink-label) {
+  font-size: var(--vx-text-sm);
+}
+
+.blockRow :global(.mantine-NavLink-section[data-position='left']) {
+  margin-inline-end: 0;
+  color: var(--vx-faint);
+}
+
+@media (hover: hover) {
+  .blockRow:not(.blockRowStatic):hover {
+    background-color: color-mix(in srgb, var(--vx-ink) 6%, transparent) !important;
+    color: var(--vx-ink) !important;
+  }
+}
+
+/* A non-interactive row (the "Recents" shape) keeps the geometry and drops every affordance. */
+.blockRowStatic {
+  cursor: default;
+}
+
+.blockRowLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.blockRowMeta {
+  flex: none;
+  font-size: var(--vx-text-micro);
+  color: var(--vx-faint);
+}
+
+/* Status dot standing in for a missing row icon — reads the per-scheme `--vx-status-*` solid. */
+.blockToneDot {
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background-color: var(--vx-status-neutral);
+}
+
+.blockToneDot[data-tone='good'] {
+  background-color: var(--vx-status-good);
+}
+
+.blockToneDot[data-tone='warn'] {
+  background-color: var(--vx-status-warn);
+}
+
+.blockToneDot[data-tone='bad'] {
+  background-color: var(--vx-status-bad);
+}
+
+/* "Show more" — a text affordance, not a button surface. */
+.blockMore {
+  min-height: var(--vx-space-sidebar-block-row-height);
+  padding: 0 var(--vx-space-row-inset-x);
+  text-align: left;
+  font-size: var(--vx-text-sm);
+  color: var(--vx-faint);
+}
+
+.blockMore:hover {
+  color: var(--vx-ink);
+}
+
+/* Progress block — label + `n of m` over a thin track. */
+.blockProgress {
+  display: block;
+  width: 100%;
+  padding: var(--vx-space-row-inset-y) var(--vx-space-row-inset-x);
+  border-radius: var(--vx-radius-ctrl);
+  text-align: left;
+}
+
+.blockProgress:hover {
+  background-color: color-mix(in srgb, var(--vx-ink) 6%, transparent);
+}
+
+.blockProgressHead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--vx-space-nav-icon-gap);
+  margin-bottom: var(--vx-space-sidebar-section-label-gap);
+}
+
+/* The rail's progress mark, rendered on the settings row (never inside the block). */
+.blockRing {
+  display: flex;
+  flex: none;
+  align-items: center;
+}
+
+/*
+ * Flat footer links — `settingsMenuItems` at three or fewer, rendered as rows instead of a gear
+ * menu (see `AppSidebar`'s JSDoc for the threshold). Each row IS a `.footerBtn`, so the two
+ * renderings are the same geometry.
+ */
+.footerLinks {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Fixed 18px icon column for a flat footer row — an icon-less row keeps the label aligned with
+ * its neighbours instead of sliding left. */
+.footerIconSlot {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  color: var(--vx-faint);
+}
+
+.footerBtn:hover .footerIconSlot {
+  color: var(--vx-ink);
+}
+
+.footerVersion {
+  padding: var(--vx-space-row-inset-y) var(--vx-space-row-inset-x);
+  font-family: var(--basalt-font-mono);
+  font-size: var(--vx-text-micro);
+  color: var(--vx-faint);
+}
+
 /*
  * Inline child items — indent under the parent with the ONE allowed sidebar line: a 1px
  * `--vx-divider` left guide on the WRAPPER (not per row, so hover tints don't break the line).
@@ -350,9 +607,9 @@
 }
 
 /*
- * Icon-rail (collapsed) — desktop only. Gated behind min-width: sm (48em) so the mobile drawer keeps
- * full labels even when the persisted collapse flag is on. Hide the brand text, section labels and
- * nav labels; center the remaining icons.
+ * Icon-rail (collapsed) — desktop only. Gated behind min-width: sm (48em) so the sidebar doesn't
+ * exist at all below that breakpoint (see `MobileNav`) regardless of the persisted collapse flag.
+ * Hide the brand text, section labels and nav labels; center the remaining icons.
  */
 @media (min-width: 48em) {
   .root[data-collapsed] .brand {
@@ -421,14 +678,40 @@
     display: none;
   }
 
-  /* `navExtra` has no sensible icon-rail representation (arbitrary consumer content, not a nav
-   * row) — hide it in the rail, same treatment as `.childList`. It stays mounted (never a JS
-   * conditional on `collapsed`): `collapsed` is one value shared by the desktop rail AND the
-   * mobile drawer (`AppShell.Navbar`'s `collapsed: { mobile: !mobileOpened }` only ever un-collapses
-   * the mobile side), and the rail-vs-drawer split lives ENTIRELY in this media query, never in JS —
-   * a JS gate on `collapsed` would also drop `navExtra` from the mobile drawer, which opens at full
-   * width regardless of the persisted rail state. */
-  .root[data-collapsed] .navExtra {
+  /*
+   * Block rail projection (`sidebarBlockRail`). `hidden` and `ring` blocks leave the rail entirely
+   * — a `custom` block is arbitrary consumer content with no icon-column representation (the
+   * treatment `navExtra` had), and a progress block's rail form is the ring on the settings row
+   * below, not a squashed track. A `dot` block keeps its icon and nothing else.
+   *
+   * All of it is CSS, never a JS conditional on `collapsed`: the navbar is permanently
+   * `collapsed: { mobile: true }` (there is no mobile drawer — see `MobileNav`), so `collapsed`
+   * means only the desktop expanded-vs-rail state, and this media query is what applies it.
+   */
+  .root[data-collapsed] .block[data-rail='hidden'],
+  .root[data-collapsed] .block[data-rail='ring'] {
+    display: none;
+  }
+
+  .root[data-collapsed] .block[data-rail='dot'] .blockHeader {
+    justify-content: center;
+    padding: 0;
+    margin-bottom: 0;
+  }
+
+  .root[data-collapsed] .block[data-rail='dot'] .blockHeader > *:not(.blockIcon) {
+    display: none;
+  }
+
+  .root[data-collapsed] .block[data-rail='dot'] .blockItems {
+    display: none;
+  }
+
+  .root[data-collapsed] .blockDot {
+    display: block;
+  }
+
+  .root[data-collapsed] .footerVersion {
     display: none;
   }
 }

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

@@ -10,6 +10,7 @@ declare const classes: {
   readonly brand: string
   readonly brandLead: string
   readonly brandName: string
+  readonly brandButton: string
   readonly searchSlot: string
   readonly navScroll: string
   readonly navViewport: string
@@ -27,7 +28,24 @@ declare const classes: {
   readonly sectionHeader: string
   readonly subnavDropdown: string
   readonly childList: string
-  readonly navExtra: string
   readonly ghostIcon: string
+  readonly block: string
+  readonly blockHeader: string
+  readonly blockHeaderButton: string
+  readonly blockIcon: string
+  readonly blockDot: string
+  readonly blockItems: string
+  readonly blockRow: string
+  readonly blockRowStatic: string
+  readonly blockRowLabel: string
+  readonly blockRowMeta: string
+  readonly blockToneDot: string
+  readonly blockMore: string
+  readonly blockProgress: string
+  readonly blockProgressHead: string
+  readonly blockRing: string
+  readonly footerLinks: string
+  readonly footerIconSlot: string
+  readonly footerVersion: string
 }
 export default classes