basalt-ui 1.27.0 → 1.29.0

package/src/dashboard/section.tsx

@@ -0,0 +1,287 @@
+/**
+ * Section — the tier-2 heading composer (docs/CONTROLS-SPEC.md §2.2, law C8): a page-level content
+ * grouping under `WidgetHeader tier="section"` — or `tier="group"` when the section renders on the
+ * `PageAside` panel surface, resolved from `useFilterSurface()` and never a call-site prop (law C1:
+ * no fourth home, no new prop — the aside decides, not the caller). Named exactly `Section` — not
+ * `PageSection` — so
+ * the existing `shadow-basalt-export` guard fires on a consumer's own hand-rolled `Section` /
+ * `PageSection` / `SectionTitle` / `SectionHeading` copy with zero new rule code.
+ *
+ * No `variant`, no border/background of its own — one shaded container level per page belongs to
+ * the cards inside a Section (`ChartCard`/`StatCard`), not to the Section itself.
+ *
+ * `actions` and `tabs` are two separate `CtlSlot`-wrapped fragments rendered in the header row
+ * (C1/C5) via `WidgetHeader`'s single `actions` slot; `tabs` hides while the section is collapsed.
+ * `Section` holds ≤3 actions (C6) — past that, a dev-only `useValidateProps` message fires once per
+ * title (the AST guard lands in wave 6).
+ *
+ * `collapsible` state persists via `createPersistedState('basalt:section:<persistKey>')` when
+ * `persistKey` is given, else it is local `useState` — the header always stays drawn, only the body
+ * unmounts. `defaultOpen` picks the state a first visit lands on; a persisted value outranks it.
+ *
+ * `summary` renders under the header and survives a collapse. That is the whole reason it is a
+ * separate slot rather than the first child: a section a reader folded away should still state its
+ * headline figures, or folding it costs them the numbers they were watching.
+ *
+ * `id` turns the root into a scroll anchor, offset by both the shell header height and the
+ * `PageBar`'s measured height (`--basalt-page-bar-h`, wave 4) so an anchor-jumped heading isn't
+ * hidden under either sticky bar.
+ *
+ * @example
+ * import { Section, StatCard } from 'basalt-ui'
+ *
+ * <Section title="Revenue" icon={<IconChartBar size={16} />} count={rows.length}>
+ *   <StatCard title="MRR" value="$48,204" delta={3.1} />
+ * </Section>
+ *
+ * @example
+ * // Collapsible, with tabs and a persisted fold state.
+ * <Section
+ *   id="usage"
+ *   title="Usage"
+ *   collapsible
+ *   persistKey="usage"
+ *   tabs={<ViewTabs field={viewField} />}
+ * >
+ *   <UsageChart />
+ * </Section>
+ */
+import { Children, useId } from 'react'
+import type { ReactNode } from 'react'
+import { cx } from '../common/props'
+import type { BasaltProps, SlotStylesProps } from '../common/props'
+import { BASALT_PREFIX } from '../common/errors'
+import { useValidateProps } from '../common/validate'
+import { CtlSlot } from '../theme'
+import { BarActionSlot, isBarActionList } from '../controls/actions'
+import type { SlotActions } from '../controls/actions'
+import { useFilterSurface } from '../controls/filter-context'
+import { QueryState } from './query-state'
+import type { QueryEmptyCopy, QueryStateLike } from './query-state'
+import { usePersistedOrLocal } from '../state/persisted-or-local'
+import { WidgetHeader } from './widget-header'
+import type { WidgetHeaderProps } from './widget-header'
+import classes from './section.module.css'
+
+/**
+ * The three boxes `Section` paints, and the whole styling seam it offers (`common/props.ts`):
+ * `root` is the outer stack, `header` is the `WidgetHeader` row, `body` is the collapsible content
+ * box. `summary` is deliberately absent — it is a one-row readout under the header, not a layout
+ * box a consumer positions.
+ */
+export type SectionSlot = 'root' | 'header' | 'body'
+
+// `classNames` is omitted alongside `tier`: `WidgetHeader` publishes its OWN slot union now, and
+// intersecting the two would let a caller write `classNames={{ metric: … }}` on a `Section` and get
+// silence. Section's three slots are its whole styling contract; the header's own slots are reached
+// on a `WidgetHeader`.
+export type SectionProps = Omit<WidgetHeaderProps, 'tier' | 'classNames' | 'actions'> &
+  BasaltProps &
+  SlotStylesProps<SectionSlot> & {
+    /**
+     * Header actions, in either form (law C15): a typed `BarAction[]`, which basalt projects through
+     * the SAME row `PageBar` and `ActionGroup` use — ≤3 inline, the rest folded into `More`, one
+     * kebab below `sm` — or an opaque `ReactNode` a caller drew itself, rendered verbatim. The ≤3
+     * budget (C6) is checked against whichever form is given.
+     */
+    actions?: SlotActions
+    /**
+     * The section's async result. Given one, the BODY renders through `QueryState` at the section
+     * tier — pending / error-with-retry / empty each REPLACE `children`, data renders them — while
+     * the header, the fold chevron and `summary` stay drawn throughout, so a section never blinks out
+     * of the page while it refetches.
+     *
+     * This is law C3's uniform container contract (`docs/CONTROLS-SPEC.md` §1): without it every
+     * caller re-derives the four-way switch `QueryState` exists to delete, and gets it wrong in the
+     * one direction that matters — "nothing here" printed over a 500.
+     */
+    query?: QueryStateLike<unknown>
+    /**
+     * Copy for `query`'s EMPTY branch, rendered through `EmptyState` like every other one. Omit to
+     * render nothing when the result is empty — `QueryState`'s own contract, unchanged. Ignored
+     * without `query`.
+     */
+    empty?: QueryEmptyCopy
+    /** Rendered in the header row, in its own `CtlSlot` — hidden while the section is collapsed. */
+    tabs?: ReactNode
+    /** Renders a chevron toggle in the header; the header stays drawn when closed, only `children`
+     * (and `tabs`) unmount. @default false */
+    collapsible?: boolean
+    /** Persists the fold state at `basalt:section:<persistKey>`. Omit for a local, unpersisted fold
+     * (`useState`). */
+    persistKey?: string
+    /** The fold state a section opens on, respected only while no persisted value exists — a section
+     * a reader has closed stays closed. `false` is what a long secondary block wants. @default true */
+    defaultOpen?: boolean
+    /** Rendered directly under the header and ALWAYS visible, collapsed or not: a collapsed section
+     * still states its headline figures, which is what makes collapsing it a real option. Keep it to
+     * one row — the body is what `children` is for. */
+    summary?: ReactNode
+    /** Turns the root into a scroll anchor (`id` + `scroll-margin-top` cleared for both sticky bars). */
+    id?: string
+    children: ReactNode
+  }
+
+/**
+ * ≤3 actions is C6 (docs/CONTROLS-SPEC.md §1) — the AST guard (`basalt/page-bar-budget`) lands in
+ * wave 6; this is the dev-only stopgap so the budget is visible before the lint rule exists.
+ *
+ * Returns the message rather than logging it, because it is a {@link useValidateProps} check now:
+ * it used to `console.warn` straight from the render body, which said it again on every keystroke
+ * that re-rendered the page. The title is IN the message on purpose — the dedup key is
+ * `${component} ${message}`, so two over-budget sections only both get heard because they name
+ * themselves.
+ */
+function actionBudgetMessage(title: string, actions: SlotActions): string | null {
+  // Both arms of the union are counted, and the typed one is counted EXACTLY: `Children.count` over
+  // a `BarAction[]` would report the array's length as one child.
+  const count = isBarActionList(actions) ? actions.length : Children.count(actions)
+  if (count <= 3) return null
+  return (
+    `${BASALT_PREFIX} Section "${title}": ${count} actions exceeds the ≤3 budget ` +
+    '(docs/CONTROLS-SPEC.md C6) — move the rest behind a menu.'
+  )
+}
+
+function ChevronToggle({
+  open,
+  onToggle,
+  controls,
+}: {
+  open: boolean
+  onToggle: () => void
+  controls: string
+}) {
+  return (
+    <button
+      type="button"
+      className={classes.chevron}
+      data-open={open}
+      aria-expanded={open}
+      aria-controls={controls}
+      aria-label={open ? 'Collapse section' : 'Expand section'}
+      onClick={onToggle}
+    >
+      <svg
+        width={12}
+        height={12}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2.5}
+        aria-hidden="true"
+      >
+        <path d="M6 9l6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    </button>
+  )
+}
+
+export function Section({
+  actions,
+  query,
+  empty,
+  tabs,
+  collapsible = false,
+  persistKey,
+  defaultOpen = true,
+  summary,
+  id,
+  children,
+  className,
+  style,
+  classNames,
+  ...headerProps
+}: SectionProps) {
+  const { title } = headerProps
+
+  // Two dev-only checks, one hook — both are misuses that RENDER fine, which is what puts them in
+  // `useValidateProps` rather than in `assertRequiredProps`.
+  //
+  //  1. A `persistKey` with nothing to fold writes a localStorage key nobody ever reads back — the
+  //     shape a consumer lands on after deleting `collapsible` and leaving the key behind.
+  //  2. More than three header actions (C6). This used to `console.warn` from the render body, so a
+  //     page that re-rendered on every keystroke reprinted it every keystroke.
+  useValidateProps(
+    'Section',
+    () => [
+      persistKey !== undefined && !collapsible
+        ? `${BASALT_PREFIX} Section "${title}": \`persistKey\` is set but \`collapsible\` is ` +
+          'false — there is no fold to persist. Add `collapsible`, or drop `persistKey`.'
+        : null,
+      actions === undefined ? null : actionBudgetMessage(title, actions),
+    ],
+    [persistKey, collapsible, title, actions],
+  )
+
+  const [open, setOpen] = usePersistedOrLocal({
+    scope: 'section',
+    persistKey,
+    initial: defaultOpen,
+  })
+  const bodyId = useId()
+  // The aside decides, not the call site (law C1): a Section on the PageAside panel surface, or on
+  // its mobile sheet projection, renders the quiet `group` tier automatically — a Section never
+  // lives inside a pill FilterSet fold, so `'pill'` (the context default outside any provider) is
+  // the only surface that stays `section`.
+  const tier = useFilterSurface() === 'pill' ? 'section' : 'group'
+
+  // The anchor offset is Section's own, so the caller's `style` merges OVER it rather than
+  // replacing it — a consumer setting a margin must not silently drop the scroll offset.
+  //
+  // NO chrome height in this offset. An anchor scroll happens inside the SCROLLPORT, and since
+  // `AppShell.Main` became that box (`shell/app-main.module.css`) BOTH the app header and `PageBar`
+  // row 2's band are shell regions rendered outside it — counting either would land every `#anchor`
+  // that far below its own heading. What is left is breathing room, which is exactly what
+  // `--vx-space-sticky-header-clearance` means (tokens/palette.ts, `deriveSpacing`).
+  const anchorStyle =
+    id === undefined ? undefined : { scrollMarginTop: 'var(--vx-space-sticky-header-clearance)' }
+  const rootStyle =
+    anchorStyle === undefined && style === undefined ? undefined : { ...anchorStyle, ...style }
+
+  const headerActions =
+    tabs !== undefined || actions !== undefined || collapsible ? (
+      <>
+        {tabs !== undefined && open && <CtlSlot>{tabs}</CtlSlot>}
+        {actions !== undefined && (
+          <CtlSlot>
+            <BarActionSlot actions={actions} />
+          </CtlSlot>
+        )}
+        {collapsible && (
+          <ChevronToggle open={open} onToggle={() => setOpen(!open)} controls={bodyId} />
+        )}
+      </>
+    ) : undefined
+
+  return (
+    <div
+      className={cx(classes.root, classNames?.root, className)}
+      data-tier={tier}
+      {...(id !== undefined && { id })}
+      {...(rootStyle !== undefined && { style: rootStyle })}
+    >
+      <WidgetHeader
+        tier={tier}
+        {...headerProps}
+        {...(classNames?.header !== undefined && { className: classNames.header })}
+        {...(headerActions !== undefined && { actions: headerActions })}
+      />
+      {summary !== undefined && <div className={classes.summary}>{summary}</div>}
+      {open && (
+        <div id={bodyId} className={cx(classes.body, classNames?.body)}>
+          {query === undefined ? (
+            children
+          ) : (
+            // `tier="section"` is the compact one: a bare spinner rather than a 64px centred
+            // block, and the error alert without the page-level stack around it. A Section IS the
+            // region, so the state belongs inside its body, never around its header.
+            <QueryState query={query} tier="section" {...(empty !== undefined && { empty })}>
+              {children}
+            </QueryState>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/dashboard/settings-section.tsx

@@ -30,9 +30,12 @@
  */
 import { Card, Stack } from '@mantine/core'
 import type { ReactNode } from 'react'
-import { WidgetHeader } from '../widget-header'
+import { WidgetHeader } from './widget-header'
+import type { WidgetHeaderTitleProps } from './widget-header'
 import { CtlSlot } from '../theme'
 import { alpha, VX } from '../tokens'
+import { cx } from '../common/props'
+import type { BasaltProps, SlotStylesProps } from '../common/props'
 import classes from './settings-section.module.css'
 
 const eyebrowStyle = {
@@ -44,78 +47,131 @@ const eyebrowStyle = {
   color: VX.status.bad,
 }
 
-export type SettingsSectionProps = {
-  /** Head-font section title, rendered via `WidgetHeader tier="section"`. */
-  title: string
-  /** Optional 13px muted description below the title. */
-  subtitle?: string
-  /** Header-right slot — wrapped in `CtlSlot` (C1/C5). */
-  actions?: ReactNode
-  /** Section body — typically a stack of `SettingsRow`s. */
-  children: ReactNode
-}
+/** The three boxes `SettingsSection`/`DangerZone` paint (`common/props.ts`). */
+export type SettingsSectionSlot = 'root' | 'header' | 'body'
+
+/**
+ * Composed from the named `WidgetHeaderTitleProps` slice (audit B #2) rather than a hand-picked
+ * `title`/`subtitle` pair — which is why `icon` and `info` now reach the header too. `value`/`delta`
+ * are deliberately NOT taken: a settings section groups controls, it states no metric.
+ *
+ * `Section` and `ChartCard` still cut their own ad-hoc subsets; both should move onto the same
+ * slices.
+ */
+export type SettingsSectionProps = BasaltProps &
+  SlotStylesProps<SettingsSectionSlot> &
+  WidgetHeaderTitleProps & {
+    /** Header-right slot — wrapped in `CtlSlot` (C1/C5). */
+    actions?: ReactNode
+    /** Section body — typically a stack of `SettingsRow`s. */
+    children: ReactNode
+  }
 
-export function SettingsSection({ title, subtitle, actions, children }: SettingsSectionProps) {
+export function SettingsSection({
+  title,
+  icon,
+  subtitle,
+  info,
+  actions,
+  children,
+  className,
+  style,
+  classNames,
+}: SettingsSectionProps) {
   return (
-    <Card style={{ padding: 'var(--mantine-spacing-xs) var(--mantine-spacing-sm)' }}>
-      <div className={classes.header}>
+    <Card
+      className={cx(classNames?.root, className)}
+      style={{ padding: 'var(--mantine-spacing-xs) var(--mantine-spacing-sm)', ...style }}
+    >
+      <div className={cx(classes.header, classNames?.header)}>
         <WidgetHeader
           tier="section"
           title={title}
+          {...(icon !== undefined && { icon })}
           {...(subtitle !== undefined && { subtitle })}
+          {...(info !== undefined && { info })}
           {...(actions !== undefined && { actions: <CtlSlot>{actions}</CtlSlot> })}
         />
       </div>
-      <div className={classes.rows}>{children}</div>
+      <div className={cx(classes.rows, classNames?.body)}>{children}</div>
     </Card>
   )
 }
 
-export type SettingsRowProps = {
-  /** 13px ink label on the left. */
-  label: string
-  /** Optional 12.5px muted description under the label. */
-  description?: string
-  /** Right-aligned control (input/switch/button). */
-  control?: ReactNode
-  /** Alternative to `control` for a fully custom right-hand region. */
-  children?: ReactNode
-}
+/** The three boxes `SettingsRow` paints (`common/props.ts`). */
+export type SettingsRowSlot = 'root' | 'label' | 'control'
 
-export function SettingsRow({ label, description, control, children }: SettingsRowProps) {
+export type SettingsRowProps = BasaltProps &
+  SlotStylesProps<SettingsRowSlot> & {
+    /** 13px ink label on the left. */
+    label: string
+    /** Optional 12.5px muted description under the label. */
+    description?: string
+    /** Right-aligned control (input/switch/button). */
+    control?: ReactNode
+    /** Alternative to `control` for a fully custom right-hand region. */
+    children?: ReactNode
+  }
+
+export function SettingsRow({
+  label,
+  description,
+  control,
+  children,
+  className,
+  style,
+  classNames,
+}: SettingsRowProps) {
   return (
-    <div className={classes.row}>
-      <Stack gap={2}>
+    <div
+      className={cx(classes.row, classNames?.root, className)}
+      {...(style !== undefined && { style })}
+    >
+      <Stack gap={2} {...(classNames?.label !== undefined && { className: classNames.label })}>
         <span style={{ fontSize: VX.text.md, color: VX.ink }}>{label}</span>
         {description && (
           <span style={{ fontSize: VX.text.sm, color: VX.muted }}>{description}</span>
         )}
       </Stack>
-      <div className={classes.control}>{control ?? children}</div>
+      <div className={cx(classes.control, classNames?.control)}>{control ?? children}</div>
     </div>
   )
 }
 
 export type DangerZoneProps = SettingsSectionProps
 
-export function DangerZone({ title, subtitle, actions, children }: DangerZoneProps) {
+export function DangerZone({
+  title,
+  icon,
+  subtitle,
+  info,
+  actions,
+  children,
+  className,
+  style,
+  classNames,
+}: DangerZoneProps) {
   return (
     <Card
+      className={cx(classNames?.root, className)}
       style={{
         padding: 'var(--mantine-spacing-xs) var(--mantine-spacing-sm)',
         boxShadow: `${VX.shadowCard}, 0 0 0 1px ${alpha(VX.status.bad, 0.25)}`,
+        ...style,
       }}
     >
-      <div className={classes.header}>
+      <div className={cx(classes.header, classNames?.header)}>
         <span style={eyebrowStyle}>Danger Zone</span>
         <WidgetHeader
           tier="section"
           title={title}
+          {...(icon !== undefined && { icon })}
           {...(subtitle !== undefined && { subtitle })}
+          {...(info !== undefined && { info })}
           {...(actions !== undefined && { actions: <CtlSlot>{actions}</CtlSlot> })}
         />
       </div>
-      <div className={classes.rows}>{children}</div>
+      <div className={cx(classes.rows, classNames?.body)}>{children}</div>
     </Card>
   )
 }

package/src/dashboard/stat-card.module.css

@@ -2,9 +2,10 @@
  * StatCard's sparkline placement (docs/CONTROLS-SPEC.md §2.2). `bleed` (default) keeps the historic
  * full-width row beneath the hero value, bled past the card's own inset padding — same negative
  * margins the pre-WidgetHeader version drew inline. `right` sits the sparkline beside the
- * `WidgetHeader`'s hero-value row instead, the reference-design look, and collapses back to
- * `bleed`'s stacked layout below `sm` — CSS only, no JS branch (`47.99375em` is Mantine's own
- * complement of `min-width: 48em`, same value `content/prose.module.css` derives it from).
+ * BREAKDOWN row instead, the reference-design look, and collapses back to `bleed`'s stacked layout
+ * below `sm` — CSS only for the sparkline's own box, `.metricsRow` below for the row it sits in
+ * (`47.99375em` is Mantine's own complement of `min-width: 48em`, same value
+ * `content/prose.module.css` derives it from).
  */
 
 .body {
@@ -14,31 +15,30 @@
   height: 100%;
 }
 
-/*
- * `flex-end`, not `center`: the sparkline belongs to the HERO ROW, and the hero row is the header
- * block's last line. Centred against the whole body it floated between the title and the value,
- * which reads as a third, unrelated element; bottom-aligned to the header block it sits beside the
- * number it describes, the reference layout. `gap` is the card's own control gap so the trend never
- * touches a long value.
- */
-.body[data-placement='right'] {
-  flex-direction: row;
-  align-items: flex-end;
-  gap: var(--vx-space-control-gap);
-}
-
 .header {
   min-width: 0;
 }
 
 /*
- * `flex-shrink: 0` on the header, `1` on the sparkline slot below: the hero value and its delta keep
- * their width and the TREND gives ground. The other way round, a 4-up KPI grid on a 1440 viewport
- * ellipsized `$1,294,900` to `$1294.…` in order to keep 72px of bars intact, which is the wrong
- * thing to protect. The value still carries `overflow: hidden` as the last resort, and `Card` clips.
+ * `right` placement's second row (measured defect: the "···" actions trigger, and the "Data"
+ * select, sat ~74-88px in from the card's right edge — a phone-only 13px is correct). The cause was
+ * `.body[data-placement='right']` making the WHOLE header (title row, actions included) share a row
+ * with the sparkline, so the header's own right edge — where `.actions` lives — stopped wherever the
+ * sparkline began, not at the card. `.header` is no longer placement-scoped at all now: `.body` stays
+ * a COLUMN in both placements (its base rule above), so `.header` gets the FULL card width for free
+ * via the column's default `align-items: stretch` — the actions slot's own `margin-inline-start:
+ * auto` (`widget-header.module.css`) now resolves against the true card edge. Only the breakdown —
+ * the one text `StatCard` renders itself, outside `WidgetHeader`'s box, and the one piece the
+ * `docs/CONTROLS-SPEC.md` `breakdown` doc calls "the parts the hero number is made of" — shares this
+ * row with the sparkline; `justify-content: flex-end` is what still right-aligns the sparkline on a
+ * card with no breakdown, where this row's only child.
  */
-.body[data-placement='right'] .header {
-  flex: 1 0 auto;
+.metricsRow {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: var(--vx-space-control-gap);
   min-width: 0;
 }
 
@@ -59,6 +59,17 @@
   min-width: 0;
 }
 
+/* Inside `.metricsRow` (`right` placement) the breakdown is no longer stacked directly under
+ * `WidgetHeader`'s own metric row in the SAME box — `.body`'s own `gap` already separates `.header`
+ * from `.metricsRow`, so the `margin-top` above would double that spacing. It also takes the row's
+ * remaining width (`flex: 1 1 auto`) so the sparkline — fixed to its own slot width — gets pushed to
+ * the row's end instead of sitting immediately after a shrink-wrapped breakdown column. */
+.metricsRow .breakdown {
+  margin-top: 0;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
 /*
  * One row, one line, at the TAG tier (`controlHeightTag`, 20px at level 0) — the smallest control
  * step basalt declares, and a token rather than a literal so the rows track the density knob with
@@ -120,32 +131,36 @@
 }
 
 /* Asks for `StatCard`'s `SPARKLINE_RIGHT_WIDTH`/`_HEIGHT` (handed down as custom properties, so this
- * rule and the `< sm` reset below can both reach them) and shrinks below the width before the hero
- * row does — see the `.header` note above. `min-width: 0` is what lets it. */
+ * rule and the `< sm` reset below can both reach them). `align-self: flex-end` is the one alignment
+ * this restructure keeps at the SPARKLINE's own level rather than the row's: `.metricsRow` does not
+ * set `align-items: flex-end` itself, because a card with no breakdown would then need nothing to
+ * anchor against — only the sparkline opts into sitting at the row's bottom edge, which matters once
+ * a breakdown taller than the trend's own 26px is the row's other child. */
 .sparklineRight {
   display: flex;
   flex: 0 1 var(--basalt-stat-sparkline-w, 4.5rem);
   min-width: 0;
   height: var(--basalt-stat-sparkline-h, 1.625rem);
   align-items: flex-end;
+  align-self: flex-end;
   overflow: hidden;
 }
 
 @media (max-width: 47.99375em) {
-  .body[data-placement='right'] {
+  .metricsRow {
     flex-direction: column;
     align-items: stretch;
-  }
-
-  .body[data-placement='right'] .header {
-    flex: initial;
+    justify-content: flex-start;
   }
 
   /* The row became a COLUMN, so `flex-basis` is now the main-axis HEIGHT — the 72px width would
    * become a 72px-tall box around 26px of bars. `flex: none` + the height keeps the bled trend the
-   * same 26px it is beside a hero row. */
-  .body[data-placement='right'] .sparklineRight {
+   * same 26px it is beside a hero row. `align-self: stretch` resets the row-only `flex-end` above:
+   * the cross axis is horizontal now, and this slot must fill the card's width like `.sparklineBleed`
+   * does, not shrink to its content and sit flush right. */
+  .metricsRow .sparklineRight {
     flex: none;
+    align-self: stretch;
     margin-top: auto;
     margin-inline: calc(-1 * var(--mantine-spacing-sm));
     margin-bottom: calc(-1 * var(--mantine-spacing-xs));

package/src/dashboard/stat-card.module.css.d.ts

@@ -5,6 +5,7 @@
 declare const classes: {
   readonly body: string
   readonly header: string
+  readonly metricsRow: string
   readonly breakdown: string
   readonly breakdownRow: string
   readonly breakdownLabel: string