basalt-ui 1.30.2 → 1.31.0

package/src/controls/actions.tsx

@@ -12,11 +12,12 @@
  * rendered, once each, and Mantine's `visibleFrom`/`hiddenFrom` decides which one paints. No JS
  * media query, so there is no first-paint flash and no hook that re-renders on resize.
  */
-import { ActionIcon, Button, Group, Menu } from '@mantine/core'
-import type { MantineBreakpoint } from '@mantine/core'
-import { createContext, isValidElement, useContext, useEffect } from 'react'
-import type { ReactNode } from 'react'
+import { ActionIcon, Box, Button, Group, Menu } from '@mantine/core'
+import { createContext, isValidElement, useContext, useEffect, useRef, useState } from 'react'
+import type { ReactNode, RefObject } from 'react'
 import type { BasaltProps } from '../common/props'
+import { useMeasuredWidths } from '../common/use-measured-widths'
+import { useIsomorphicLayoutEffect } from '../common/isomorphic-layout-effect'
 import type { NavAnchor } from '../shell/nav-types'
 import type { AnyNavLink } from '../router-tanstack/nav'
 import { IconSlot } from '../theme/icon-slot'
@@ -98,9 +99,6 @@ export type GlobalAction = {
   mobile?: 'bar' | 'more' | 'hidden'
 }
 
-/** Secondaries rendered inline on desktop; the rest fold into `More` (`docs/CONTROLS-SPEC.md` §2.1). */
-export const DESKTOP_SECONDARY_MAX = 3
-
 /** `GlobalAction`s without an explicit `mobile` that still land on the mobile bar. */
 export const MOBILE_GLOBAL_BAR_MAX = 2
 
@@ -189,17 +187,12 @@ const MOBILE_PRIMARY_PADDING_X = 10
 const BAR_GAP = 6
 
 /**
- * A declared WIDTH TIER for one rendered form of an action — Mantine's own `visibleFrom`/`hiddenFrom`
- * style props, forwarded verbatim, which is the same CSS-only mechanism this file's `sm` swap uses
- * (see the module header). Never a JS media query: no first-paint flash, no resize re-render.
- *
- * It exists because `sm` is not the only width at which this row runs out of room — see
- * {@link BarEntry}'s `md` label fold for the arithmetic.
+ * The DOM contract between `PageBar` row 1 and {@link useMeasuredFold} — module-internal, not part
+ * of any barrel. `PAGE_BAR_END_ATTR` marks the elastic row the fold measures; `BAR_KEY_ATTR` tags
+ * each rendered action with its `key` so a measured box maps back to its action.
  */
-type TierVisibility = {
-  visibleFrom?: MantineBreakpoint
-  hiddenFrom?: MantineBreakpoint
-}
+export const PAGE_BAR_END_ATTR = 'data-basalt-page-bar-end'
+export const BAR_KEY_ATTR = 'data-bar-key'
 
 /**
  * One action as a button. No `size` prop anywhere: the enclosing `CtlSlot` (mounted by the home,
@@ -209,19 +202,16 @@ function BarButton({
   action,
   variant,
   px,
-  tier,
 }: {
   action: BarActionItem
   variant: 'filled' | 'default'
   /** Overrides the tier's horizontal inset — only the compact mobile primary passes it. */
   px?: number
-  /** The declared width tier this form paints at — see {@link TierVisibility}. */
-  tier?: TierVisibility
 }): ReactNode {
   const shared = {
     variant,
     ...(px !== undefined && { px }),
-    ...tier,
+    [BAR_KEY_ATTR]: action.key,
     disabled: action.disabled === true,
     loading: action.loading === true,
     // EVERY icon in this file goes through `IconSlot` — the box is the framework's, never the
@@ -252,17 +242,14 @@ function BarButton({
 function BarIconButton({
   action,
   variant,
-  tier,
 }: {
   action: BarActionItem
   /** `default` is the bordered desktop form — a joined `ControlGroup` member (see {@link BarEntry}). */
   variant: 'filled' | 'subtle' | 'default'
-  /** The declared width tier this form paints at — see {@link TierVisibility}. */
-  tier?: TierVisibility
 }): ReactNode {
   const shared = {
     variant,
-    ...tier,
+    [BAR_KEY_ATTR]: action.key,
     'aria-label': action.label,
     disabled: action.disabled === true,
     loading: action.loading === true,
@@ -470,16 +457,16 @@ type BarActionRowProps = ActionGroupProps & {
  * label, so a labelled joined set is unaffected; the rule reads what the caller actually supplied
  * rather than adding a prop to ask.
  */
-function joinRuns(
-  actions: readonly BarAction[],
+function joinRuns<T extends BarAction>(
+  actions: readonly T[],
   opts: { viewport: 'desktop' | 'mobile'; excludeKey?: string | undefined },
-): BarAction[][] {
-  const joinable = (action: BarAction): boolean =>
+): T[][] {
+  const joinable = (action: T): boolean =>
     action.kind === undefined &&
     action.key !== opts.excludeKey &&
     (action.group === true || (opts.viewport === 'mobile' && action.icon !== undefined))
 
-  const runs: BarAction[][] = []
+  const runs: T[][] = []
   for (const action of actions) {
     const tail = runs.at(-1)
     if (joinable(action) && tail !== undefined && tail.every(joinable)) tail.push(action)
@@ -488,6 +475,166 @@ function joinRuns(
   return runs
 }
 
+type FoldStep = 'icon' | 'overflow'
+
+/** The `More` trigger's estimated width — reserved only once something has folded (cf. `FOLD_PILL_WIDTH`). */
+const MORE_WIDTH = 80
+
+/**
+ * The measured fold as a pure decision. `room` is the row's available width, `fixed` everything in it
+ * that never folds (primary, sync, joined runs, custom nodes), each foldable `item` its labelled and
+ * icon-only width (`icon` absent when it ships no icon). Folds from the LAST item back: first to
+ * icon-only where an icon exists, then into `More`. Items that stay whole are absent from the result.
+ */
+export function planBarFold(input: {
+  room: number
+  fixed: number
+  gap: number
+  hasMenus: boolean
+  items: readonly { key: string; full: number; icon: number | undefined }[]
+}): Record<string, FoldStep> {
+  const { room, fixed, gap, hasMenus, items } = input
+  const steps: (FoldStep | undefined)[] = items.map(() => undefined)
+  const used = (): number =>
+    items.reduce(
+      (sum, item, i) => {
+        const step = steps[i]
+        if (step === 'overflow') return sum
+        return sum + gap + (step === 'icon' ? (item.icon ?? item.full) : item.full)
+      },
+      fixed + (hasMenus || steps.includes('overflow') ? MORE_WIDTH + gap : 0),
+    )
+
+  for (let i = items.length - 1; i >= 0 && used() > room; i -= 1) {
+    if (items[i]!.icon !== undefined) steps[i] = 'icon'
+  }
+  for (let i = items.length - 1; i >= 0 && used() > room; i -= 1) steps[i] = 'overflow'
+  return Object.fromEntries(items.flatMap((item, i) => (steps[i] ? [[item.key, steps[i]]] : [])))
+}
+
+/** The row's flex items, looking through `display: contents` wrappers (`CtlSlot`). */
+function flowItems(el: Element): Element[] {
+  return Array.from(el.children).flatMap((child) =>
+    getComputedStyle(child).display === 'contents' ? flowItems(child) : [child],
+  )
+}
+
+/**
+ * The desktop row's fold state — shared by `PageBar` row 1 (`host: 'page'`, whose ANCESTOR carries
+ * `PAGE_BAR_END_ATTR`, published by `PageBar` itself) and every other home's `ActionGroup` /
+ * `BarActionSlot` (`host: 'slot'`, which has no wider elastic row to measure against and so tags
+ * its OWN `Group` with the same attribute — `Element.closest` matches the element itself first,
+ * so one `resolveRoot` covers both). Measures the row and re-plans on every resize and once web
+ * fonts settle; a zero reading (hidden below `sm`, not yet laid out) is not overflow, so the row
+ * then stays whole. A changed action set or label drops every remembered width and re-measures
+ * from the whole row, because a folded run cannot report the width its new label would take.
+ *
+ * `runs` is `joinRuns`'s own output, not the flat action list: a `group: true` run (rendered as one
+ * `ControlGroup`) is measured and folded AS A UNIT, keyed by its first member — a run of length > 1
+ * has no `icon` step of its own (its members already render icon-only per {@link BarEntry}), so it
+ * can only stay whole or fold straight into `More`.
+ */
+function useMeasuredFold(input: {
+  host: 'page' | 'slot'
+  runs: readonly (BarActionItem | BarActionCustom)[][]
+  hasMenus: boolean
+}): { folds: Record<string, FoldStep>; groupRef: RefObject<HTMLDivElement | null> } {
+  const { host, runs, hasMenus } = input
+  const groupRef = useRef<HTMLDivElement>(null)
+  const [folds, setFolds] = useState<Record<string, FoldStep>>({})
+  const [epoch, setEpoch] = useState(0)
+  const foldsRef = useRef(folds)
+  const runsRef = useRef(runs)
+  // Menus are filtered out before `runs` is built, so `hasMenus` — which reserves `MORE_WIDTH` in
+  // `planBarFold` — rides the signature: a menu appearing or leaving is a re-measure trigger, not
+  // an invisible one. A run's signature is its representative key plus every member's label — its
+  // members never fold individually, so only the whole run's label set can move its measured width.
+  const signature = `${hasMenus ? 'menus' : 'nomenus'}|${runs
+    .map(
+      (run) => `${run[0]!.key}:${run.map((a) => (a.kind === undefined ? a.label : '')).join(',')}`,
+    )
+    .join('|')}`
+  const measuredSignature = useRef(signature)
+
+  // Declared before the measuring hook so it runs first on every commit.
+  useIsomorphicLayoutEffect(() => {
+    foldsRef.current = folds
+    runsRef.current = runs
+  })
+
+  const measured = useMeasuredWidths({
+    resolveRoot: () => groupRef.current?.closest(`[${PAGE_BAR_END_ATTR}]`) ?? null,
+    signature,
+    nonce: epoch,
+    onMeasure: (row, boxes) => {
+      if (measuredSignature.current !== signature) {
+        measuredSignature.current = signature
+        if (Object.keys(foldsRef.current).length > 0) {
+          // Render the row whole, then measure it: `epoch` re-runs this hook after that commit.
+          foldsRef.current = {}
+          setFolds({})
+          setEpoch((n) => n + 1)
+          return
+        }
+      }
+      const group = groupRef.current
+      if (group === null) return
+      const currentRuns = runsRef.current
+      // A `kind: 'custom'` entry is never a fold candidate (basalt does not draw it, so it has no
+      // form to fold into) — it is always a length-1 run, since `joinRuns` never joins one.
+      const foldable = new Set(
+        currentRuns.filter((run) => run[0]!.kind === undefined).map((run) => run[0]!.key),
+      )
+      const elements = Array.from(group.children).filter(
+        (el): el is HTMLElement =>
+          el instanceof HTMLElement && foldable.has(el.getAttribute(BAR_KEY_ATTR) ?? ''),
+      )
+      for (const el of elements) {
+        const key = el.getAttribute(BAR_KEY_ATTR)!
+        if (foldsRef.current[key] === undefined && el.offsetWidth > 0) {
+          boxes.current.set(key, { width: el.offsetWidth, height: el.offsetHeight })
+        }
+      }
+      const items = currentRuns.flatMap((run) => {
+        const rep = run[0]!
+        if (rep.kind !== undefined) return []
+        const seen = boxes.current.get(rep.key)
+        if (seen === undefined) return []
+        const icon = run.length === 1 && rep.icon !== undefined ? seen.height : undefined
+        return [{ key: rep.key, full: seen.width, icon }]
+      })
+      const rects = flowItems(row)
+        .map((el) => el.getBoundingClientRect())
+        .filter((r) => r.width > 0)
+      if (row.clientWidth <= 0 || rects.length === 0 || items.length === 0) return
+
+      const used = Math.max(...rects.map((r) => r.right)) - Math.min(...rects.map((r) => r.left))
+      const rendered = elements.reduce((sum, el) => sum + el.offsetWidth + BAR_GAP, 0)
+      const moreNow = hasMenus || Object.values(foldsRef.current).includes('overflow')
+      const fixed = used - rendered - (moreNow ? MORE_WIDTH + BAR_GAP : 0)
+      const next = planBarFold({ room: row.clientWidth, fixed, gap: BAR_GAP, hasMenus, items })
+      const prev = foldsRef.current
+      const same =
+        Object.keys(next).length === Object.keys(prev).length &&
+        Object.entries(next).every(([key, step]) => prev[key] === step)
+      if (!same) setFolds(next)
+    },
+  })
+
+  // The first measure can precede the web font, whose swap-in changes every label's width.
+  useIsomorphicLayoutEffect(() => {
+    let disposed = false
+    void document.fonts?.ready
+      ?.then(() => (disposed ? undefined : measured.remeasure()))
+      .catch(() => {})
+    return () => {
+      disposed = true
+    }
+  }, [host, signature])
+
+  return { folds, groupRef }
+}
+
 export function BarActionRow({
   primary,
   secondary,
@@ -505,8 +652,13 @@ export function BarActionRow({
 
   const flat = list.filter((a): a is BarActionItem | BarActionCustom => a.kind !== 'menu')
   const menus = list.filter((a): a is BarActionMenu => a.kind === 'menu')
-  const inline = flat.slice(0, DESKTOP_SECONDARY_MAX)
-  const desktopOverflow = [...flat.slice(DESKTOP_SECONDARY_MAX), ...menus]
+  const allRuns = joinRuns(flat, { viewport: 'desktop' })
+  const { folds, groupRef } = useMeasuredFold({ host, runs: allRuns, hasMenus: menus.length > 0 })
+  const runs = allRuns.filter((run) => folds[run[0]!.key] !== 'overflow')
+  const desktopOverflow = [
+    ...allRuns.flatMap((run) => (folds[run[0]!.key] === 'overflow' ? run : [])),
+    ...menus,
+  ]
 
   const wantsMobile = viewport === 'both'
   const mobileList = [...list, ...mobileOnly]
@@ -551,7 +703,7 @@ export function BarActionRow({
   const hasMobile = mobileBar.length > 0 || claimsKebab
   if (!hasDesktop && !hasMobile && syncNode === undefined) return null
 
-  const desktopLead = inline.length > 0 || desktopOverflow.length > 0 || syncNode === undefined
+  const desktopLead = flat.length > 0 || menus.length > 0 || syncNode === undefined
 
   // The caller's `className`/`style` land on the ONE desktop group and the ONE mobile group. A
   // `syncNode` splits the desktop row in two, and with nothing to lead with (no inline actions, no
@@ -566,16 +718,41 @@ export function BarActionRow({
   return (
     <>
       {hasDesktop && desktopLead && (
-        <Group gap={BAR_GAP} wrap="nowrap" visibleFrom="sm" {...rootProps}>
-          {joinRuns(inline, { viewport: 'desktop' }).map((run) =>
+        <Group
+          ref={groupRef}
+          gap={BAR_GAP}
+          wrap="nowrap"
+          visibleFrom="sm"
+          // A `slot` host has no wider elastic row to measure against (`PageBar` row 1 is the only
+          // one an ancestor tags) — it measures its OWN row instead, and `Element.closest` matches
+          // an element against itself before it walks up, so `useMeasuredFold`'s `resolveRoot` needs
+          // no branch for it.
+          {...(host === 'slot' && { [PAGE_BAR_END_ATTR]: '' })}
+          {...rootProps}
+        >
+          {runs.map((run) =>
             run.length === 1 ? (
-              <BarEntry key={run[0]!.key} action={run[0]!} emphasis="secondary" />
+              <BarEntry
+                key={run[0]!.key}
+                action={run[0]!}
+                emphasis="secondary"
+                iconOnly={folds[run[0]!.key] === 'icon'}
+              />
             ) : (
-              <ControlGroup key={`join-${run[0]!.key}`}>
-                {run.map((action) => (
-                  <BarEntry key={action.key} action={action} emphasis="secondary" iconOnly />
-                ))}
-              </ControlGroup>
+              // Tagged so the joined set is measured and folded AS ONE BOX — its members are
+              // grandchildren of this `Group`, invisible to the direct-children scan
+              // `useMeasuredFold` runs, so the run needs its own `BAR_KEY_ATTR` one level up.
+              <Box
+                key={`join-${run[0]!.key}`}
+                className={classes.joinBox}
+                {...{ [BAR_KEY_ATTR]: run[0]!.key }}
+              >
+                <ControlGroup>
+                  {run.map((action) => (
+                    <BarEntry key={action.key} action={action} emphasis="secondary" iconOnly />
+                  ))}
+                </ControlGroup>
+              </Box>
             ),
           )}
           <OverflowMenu actions={desktopOverflow} />
@@ -621,8 +798,8 @@ export function BarActionRow({
 /**
  * A home's `actions` slot, projected for both viewports.
  *
- * Desktop: `primary` as a `filled` button · up to `DESKTOP_SECONDARY_MAX` secondaries as `default`
- * buttons · everything past that, plus every `kind: 'menu'`, in one `More` menu.
+ * Desktop: `primary` as a `filled` button · secondaries as `default` buttons, folded by the row's
+ * measured width (icon-only, then into `More`) · every `kind: 'menu'` in that same `More` menu.
  * Mobile: `primary` as an icon button when it ships an icon and a compact labelled button when it
  * does not · one kebab holding every `mobile: 'more'` action · `mobile: 'hidden'` drops the action
  * entirely.
@@ -676,8 +853,8 @@ export function isBarActionList(actions: SlotActions): actions is BarAction[] {
 
 /**
  * Renders a {@link SlotActions} slot: the typed form goes through the SAME projection `PageBar` and
- * `ActionGroup` use — inline up to {@link DESKTOP_SECONDARY_MAX}, the rest folded into `More`, and a
- * mobile kebab below `sm` — and the node form is returned untouched.
+ * `ActionGroup` use — inline, `kind: 'menu'` folded into `More`, and a mobile kebab below `sm` — and
+ * the node form is returned untouched.
  *
  * Every entry lands in `secondary`: a `BarAction[]` carries no primary marker, and law C6's "exactly
  * one primary" is the page bar's rule, enforced by `ActionGroupProps.primary` being singular. A home
@@ -710,7 +887,7 @@ function BarEntry({
 }: {
   action: BarAction
   emphasis: 'primary' | 'secondary' | 'mobile-primary' | 'mobile-secondary'
-  /** Set by a JOINED run — see {@link joinRuns}. The label survives as the accessible name. */
+  /** Set by a JOINED run (see {@link joinRuns}) or a measured fold. The label survives as the accessible name. */
   iconOnly?: boolean
 }): ReactNode {
   if (action.kind === 'custom') return <span className={classes.customSlot}>{action.node}</span>
@@ -720,35 +897,6 @@ function BarEntry({
   if (iconOnly === true && action.icon !== undefined) {
     return <BarIconButton action={action} variant="default" />
   }
-  // THE `md` LABEL FOLD — the second declared tier, and the only fold this row had between `sm`
-  // (48em, where the whole mobile swap happens) and the width at which a desktop header is
-  // genuinely wide. Above `sm` the only fold was `DESKTOP_SECONDARY_MAX`, which is a COUNT and
-  // never a width: three labelled secondaries are three labelled secondaries at 768px and at
-  // 2560px.
-  //
-  // The arithmetic, on /dashboard at exactly 768px — the width where the navbar appears and takes
-  // 256px: 512px of header left, against ~554px of row 1 + ~102px of globals + ~48px of gaps ≈
-  // 704px. ~192px over, and nothing above `sm` folded — the breadcrumb absorbed it by shrinking to
-  // zero (`shell/app-header.module.css`'s `.lead`, now floored at 96px, which this tier pays for).
-  // Dropping up to `DESKTOP_SECONDARY_MAX` labelled secondaries to their 30px icon form returns
-  // roughly 180-240px on that row: a labelled `ctl` button is its icon slot + label + insets
-  // (~90-110px depending on the word), an icon-only one is the tier's 30px square.
-  //
-  // The PRIMARY keeps its label at every width — it is the one action a reader must be able to
-  // name without hovering (law C6: exactly one per home), so `emphasis === 'primary'` never enters
-  // this branch. An icon-LESS secondary keeps its label too: there is nothing to fall back to, the
-  // same reason `MobileBarEntry` renders a compact labelled button below `sm`.
-  //
-  // Both forms are rendered and CSS picks one, the mechanism the `sm` swap already uses — that is
-  // law C9 being HONOURED, not breached: the swap belongs to the control, and this is the control.
-  if (emphasis === 'secondary' && action.icon !== undefined) {
-    return (
-      <>
-        <BarIconButton action={action} variant="default" tier={{ hiddenFrom: 'md' }} />
-        <BarButton action={action} variant="default" tier={{ visibleFrom: 'md' }} />
-      </>
-    )
-  }
   return <BarButton action={action} variant={emphasis === 'primary' ? 'filled' : 'default'} />
 }
 

package/src/controls/controls.module.css

@@ -4,7 +4,7 @@
  * Two form factors per control, ONE mount each, switched by CSS only (C9): the `pill` surface
  * (bordered 30px chip + popover) and the `sheet` surface (`PanelRow` label-above-control rows
  * inside the mobile `Filters (n)` Drawer — the same rows the aside's `panel` surface renders;
- * `panel-row.module.css` owns their geometry). `48em` / `47.99375em` are the `sm` breakpoint in the
+ * `panel-row.module.css` owns their geometry). `52.5em` / `52.49375em` are the `sm` size-class boundary in the
  * exact literal form every other basalt CSS module uses — a media query cannot resolve a custom
  * property, so the breakpoint cannot be a token (see `content/prose.module.css`'s note).
  */
@@ -50,7 +50,7 @@
 }
 
 /* Below `sm` only the first `inline` slots are pills; the rest live in the sheet. */
-@media (max-width: 47.99375em) {
+@media (max-width: 52.49375em) {
   .pillSlot:not([data-inline]) {
     display: none;
   }
@@ -60,7 +60,7 @@
  * Folding is a DESKTOP concern only — scoped to `min-width` so a width measured on a wide viewport
  * can never hide a slot the mobile `inline` budget is supposed to keep.
  */
-@media (min-width: 48em) {
+@media (min-width: 52.5em) {
   .pillSlot[data-folded] {
     display: none;
   }
@@ -71,7 +71,7 @@
   display: none;
 }
 
-@media (min-width: 48em) {
+@media (min-width: 52.5em) {
   .foldPill[data-shown] {
     display: inline-flex;
   }
@@ -81,7 +81,7 @@
   display: none;
 }
 
-@media (max-width: 47.99375em) {
+@media (max-width: 52.49375em) {
   .sheetPill {
     display: inline-flex;
   }
@@ -101,10 +101,11 @@
  * outline the row reads as loose text. Declared here rather than by relaxing the resolver, which
  * would put a hairline back on every default button in the app.
  *
- * The ≥36px touch target below `sm` (C15) is drawn as a `::before` overlay so the visible box stays
- * 30px.
+ * The touch target (C15) is the shared `[data-basalt-hit]` overlay (`styles.css`), capped at the
+ * chip-row gap so neighbouring pills never overlap; the visible box stays 30px.
  */
 .pill {
+  --vx-hit-gap: var(--vx-space-control-gap);
   position: relative;
   max-width: 15rem;
   border-color: color-mix(in srgb, var(--vx-ink) 12%, transparent);
@@ -157,30 +158,6 @@
   color: var(--vx-ink);
 }
 
-@media (max-width: 47.99375em) {
-  /* Mantine's Button root clips to its box; the overlay must escape it to be hit-testable. Loading
-   * buttons keep the clip their overlay depends on (same pairing as page-bar.module.css). */
-  .pill:not([data-loading]) {
-    overflow: visible;
-  }
-
-  .pill::before {
-    content: '';
-    position: absolute;
-    /* Both operands scale with `--mantine-scale` (same reconstruction the theme uses for every
-     * other ctl-tier box, `theme/index.ts`'s `ctlSizeVars`) so the overlay stays centred on — and
-     * sized off — the ACTUAL scaled pill box, not its unscaled rem value. */
-    inset-block: calc(
-      (
-          calc(var(--vx-space-control-height-ctl, 1.875rem) * var(--mantine-scale, 1)) -
-            calc(var(--vx-space-touch-control-height, 2.25rem) * var(--mantine-scale, 1))
-        ) /
-        2
-    );
-    inset-inline: 0;
-  }
-}
-
 /* Label at the tier's own step and weight (`docs/CONTROLS-SPEC.md` §3) — Mantine's Button label
  * inherits the root's `--button-fz` but carries the body weight, which reads light against the
  * bordered box. */

package/src/controls/enum-filter.tsx

@@ -31,7 +31,7 @@ import type { ReactNode } from 'react'
 import type { BasaltProps } from '../common/props'
 import type { FieldOption } from '../state'
 import classes from './controls.module.css'
-import { useFilterRegistration, useFilterSurface } from './filter-context'
+import { POPOVER_ROW_HIT_GAP, useFilterRegistration, useFilterSurface } from './filter-context'
 import { FilterPill } from './filter-pill'
 import { useControlName } from './filter-sheet'
 import { PanelChoice, PanelRow } from './panel-row'
@@ -147,7 +147,7 @@ export function EnumFilter<T extends string>({
         setValue(next as T)
       }}
     >
-      <Stack gap={2}>
+      <Stack gap={POPOVER_ROW_HIT_GAP} style={{ '--vx-hit-gap': 'var(--stack-gap)' }}>
         {options.map((option) => (
           <Radio
             key={option.value}

package/src/controls/filter-context.tsx

@@ -32,6 +32,17 @@ import {
 } from 'react'
 import type { ReactNode } from 'react'
 
+/**
+ * The real gap a popover row (`EnumFilter`'s `Radio.Group`, `MultiSelectFilter`'s `Checkbox.Group`)
+ * needs so its `[data-basalt-hit]::after` overlay can reach the full 44px coarse floor with no
+ * overlap into the next row — same derivation as the chart legend's dots mode (`DOTS_HIT_GAP`):
+ * `hit - rowHeight - 2 + 4` headroom, rowHeight being Mantine's default `Radio`/`Checkbox` label row
+ * (~21px). A bare `gap={2}` left the `--vx-hit-gap` cap able to buy only ~4px of the 44
+ * (code-foundations F1). Shared rather than duplicated per file: both popover rows share the exact
+ * same row height and floor, so one drift point beats two hand-kept copies.
+ */
+export const POPOVER_ROW_HIT_GAP = 25
+
 /**
  * Which form a control renders. Provided by `FilterSet` (`'pill'` / `'sheet'`) and by `PageAside`
  * (`'panel'`); `'pill'` when there is neither.

package/src/controls/filter-pill.tsx

@@ -71,6 +71,7 @@ export function FilterPill({
       variant="default"
       size="ctl"
       className={cx(classes.pill, className)}
+      data-basalt-hit
       classNames={{ label: classes.pillLabel }}
       {...(style !== undefined && { style })}
       {...(active === true && { 'data-active': true })}

package/src/controls/index.ts

@@ -8,7 +8,6 @@
 export {
   ActionGroup,
   OverflowMenu,
-  DESKTOP_SECONDARY_MAX,
   MOBILE_GLOBAL_BAR_MAX,
   barActionMobile,
   globalActionMobile,

package/src/controls/multi-select-filter.tsx

@@ -30,7 +30,7 @@ import { assertRequiredProps } from '../common/validate'
 import type { FieldHandle, MultiField } from '../state'
 import type { FilterOption } from './select-filter'
 import classes from './controls.module.css'
-import { useFilterRegistration, useFilterSurface } from './filter-context'
+import { POPOVER_ROW_HIT_GAP, useFilterRegistration, useFilterSurface } from './filter-context'
 import { FilterPill } from './filter-pill'
 import { CheckGlyph, useControlName } from './filter-sheet'
 import { PanelRow } from './panel-row'
@@ -143,7 +143,7 @@ export function MultiSelectFilter<T extends string>(props: MultiSelectFilterProp
         setValue(next as readonly T[])
       }}
     >
-      <Stack gap={2}>
+      <Stack gap={POPOVER_ROW_HIT_GAP} style={{ '--vx-hit-gap': 'var(--stack-gap)' }}>
         {options.map((option) => (
           <Checkbox
             key={option.value}

package/src/controls/sync-button.module.css

@@ -45,7 +45,7 @@
  * width itself, pinned to the `ctl` height so the box is square. This module is unlayered, so it
  * outranks `@layer mantine` regardless of specificity.
  */
-@media (max-width: 47.99375em) {
+@media (max-width: 52.49375em) {
   .label,
   .age {
     display: none;

package/src/dashboard/section.module.css

@@ -18,6 +18,7 @@
  * query at all).
  */
 .root {
+  container: basalt-card / inline-size;
   display: flex;
   flex-direction: column;
   gap: var(--vx-space-section-gap, 0.75rem);
@@ -95,29 +96,3 @@
 .chevron[data-open='false'] svg {
   transform: rotate(-90deg);
 }
-
-/*
- * Law C15 — the chevron is a 12px glyph in a 20px box, which is a fine mouse target and an
- * unusable thumb one. Below `sm` an `::after` overlay lifts the HIT area to
- * `--vx-space-touch-control-height` (36px at level 0) while the visible glyph stays put — the same
- * overlay `shell/page-bar.module.css` draws for the bar's own controls. `overflow: visible` is part
- * of the fix, not tidying: an overlay that extends past the box is clipped by any `overflow:
- * hidden` on the host (which is what made the identical overlay a no-op on Mantine's Button roots).
- */
-@media (max-width: 47.99375em) {
-  .chevron {
-    overflow: visible;
-  }
-
-  .chevron::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    translate: -50% -50%;
-    width: 100%;
-    height: 100%;
-    min-width: var(--vx-space-touch-control-height, 2.25rem);
-    min-height: var(--vx-space-touch-control-height, 2.25rem);
-  }
-}

package/src/dashboard/section.tsx

@@ -156,6 +156,7 @@ function ChevronToggle({
     <button
       type="button"
       className={classes.chevron}
+      data-basalt-hit
       data-open={open}
       aria-expanded={open}
       aria-controls={controls}