basalt-ui 1.30.2 → 1.32.0

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,8 @@
  * 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) {
+/* theme-allow raw-media-query — the control's own C9 icon-only swap at the compact size class */
+@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}

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

@@ -1,11 +1,8 @@
 /*
- * 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
- * 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).
+ * StatCard's sparkline placement (docs/CONTROLS-SPEC.md §2.2). `bleed` (default) keeps the full-width
+ * row beneath the hero value, bled past the card's inset padding. `right` sits the sparkline beside
+ * the BREAKDOWN row and collapses back to `bleed`'s stacked layout when the card itself is narrower
+ * than 480px (`container: basalt-card`, set on the Card root in `stat-card.tsx`).
  */
 
 .body {
@@ -131,7 +128,7 @@
 }
 
 /* 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). `align-self: flex-end` is the one alignment
+ * rule and the narrow-card 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
@@ -146,7 +143,7 @@
   overflow: hidden;
 }
 
-@media (max-width: 47.99375em) {
+@container basalt-card (max-width: 479.9px) {
   .metricsRow {
     flex-direction: column;
     align-items: stretch;

package/src/dashboard/stat-card.tsx

@@ -11,7 +11,7 @@
  *
  * `sparklinePlacement` decides where the trend visual sits: `'bleed'` (default) keeps the historic
  * full-width row beneath the hero value, bled past the card's own inset padding; `'right'` sits it
- * beside the hero row, the reference-design look. Below `sm`, `'right'` collapses back to the
+ * beside the hero row, the reference-design look. In a card narrower than 480px, `'right'` collapses back to the
  * `'bleed'` layout — CSS only, no JS branch (`stat-card.module.css`).
  *
  * `info` and `subtitle` are forwarded to that same `WidgetHeader`, and a hero KPI usually wants
@@ -277,7 +277,7 @@ export type StatCardProps = BasaltProps &
      */
     sparkline?: ReactNode | ((size: StatCardSparklineSize) => ReactNode)
     /** Where `sparkline` sits. `'bleed'` (default) is today's full-width row bled to the card edges;
-     * `'right'` sits it beside the hero value row. Collapses to `'bleed'` below `sm`. */
+     * `'right'` sits it beside the hero value row. Collapses to `'bleed'` in a card narrower than 480px. */
     sparklinePlacement?: 'bleed' | 'right'
     /** Header-right slot (e.g. a ghost "..." menu trigger) — wrapped in `CtlSlot tier="widget"`, so a
      * raw `ActionIcon` with no `size` lands on the 24px step the 28px header row holds (C1/C5). */
@@ -357,7 +357,7 @@ export function StatCard({
         )}
         {...(!bleeds && {
           // CUSTOM PROPERTIES, not `flexBasis`/`height` directly. A React inline style beats every
-          // stylesheet rule, so an inline `flexBasis: 72` also applied below `sm` — where `'right'`
+          // stylesheet rule, so an inline `flexBasis: 72` also applied in a narrow card — where `'right'`
           // collapses `.metricsRow` to a COLUMN and flex-basis is therefore the main-axis HEIGHT.
           // The mobile sparkline rendered in a 72px-tall box holding 26px of bars, which is the dead
           // band under every KPI value on a phone. Handed to CSS as values instead, the media query
@@ -400,6 +400,9 @@ export function StatCard({
         // Anchors the tone rail. Set unconditionally so a card's stacking context does not change
         // depending on whether it happens to have crossed a threshold this render.
         position: 'relative',
+        // The card's own width drives its chrome (`widget-header.module.css`, `.metricsRow`).
+        containerType: 'inline-size',
+        containerName: 'basalt-card',
         ...style,
       }}
       data-tone={tone}

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

@@ -2,8 +2,8 @@
  * StatGroup's column law and its optional rail, in CSS (law C9).
  *
  * **The law keys on the CONTAINER, not the viewport.** A viewport breakpoint answers the wrong
- * question — the same one `resolveChartTier` refuses to ask (`charts/primitives/chart-frame-layout.
- * ts`): the shell has regions that change the AVAILABLE width with the viewport held still (a
+ * question — the same one `resolveContainerClass` refuses to ask (`tokens/size-classes.ts`): the
+ * shell has regions that change the AVAILABLE width with the viewport held still (a
  * `PageAside` claiming its 300px, the sidebar collapsing 256px → its 48px rail, a consumer's own
  * split layout), and `@media` cannot see any of them. Measured defect: a `PageAside` mounted on a
  * 1512px desktop left the KPI row ~956px wide, `@media` still resolved `lg`, and four cells of
@@ -15,25 +15,24 @@
  * one: a query with no container resolves to false, so a shell-only context would have silently
  * pinned every non-shell consumer to the base count.
  *
- * The `@supports not` block below it is the pre-2023 fallback and the ONLY place the old viewport
- * law survives. It is written as an exclusive alternative rather than as a base the container
- * queries override, because the rail's `:nth-child` suppressors are MORE specific than the rule
- * that draws the border: two overlapping laws would each suppress a different set of leading cells
- * and the rail would lose hairlines in the middle of a row. One law at a time, chosen by support.
+ * The literals are the container-class law (`CONTAINER_CLASSES`, `tokens/size-classes.ts`): the
+ * `sm` count opens at `wide` (800px), not at the viewport-era 768. Two are StatGroup's own and say
+ * so: 260px (one column, below) and 1200px, where the full `cols` count opens. The class table
+ * stops at 800, and 800 is too early for a full KPI row — four cells of ~190px clamp a value a real
+ * dashboard prints (`tests/layout/page-aside.layout.test.ts` measures ~195px against the 844px row
+ * a claimed aside leaves). Conditions are px, never `em`: `em` inside a `@container` condition
+ * resolves against the CONTAINER's font-size, so a consumer panel with smaller text would silently
+ * move the boundary. A condition cannot read a custom property, so the numbers are written; the
+ * COUNTS are custom properties the component sets per instance.
  *
- * The literals: `@container` conditions are stated in px, `@media` ones in Mantine's own `em`
- * (`--mantine-breakpoint-sm` 48em, `--mantine-breakpoint-lg` 75em). Both spellings name the same
- * boundary at the 16px initial font size — 768px and 1200px — but `em` inside a `@container`
- * condition resolves against the CONTAINER's font-size rather than the root's, so a consumer panel
- * with smaller text would silently move the breakpoint. px is the only spelling that cannot drift.
- * (`47.99375em` → `767.9px`, `74.99375em` → `1199.9px`; the same complements `stat-card.module.css`
- * uses.) A condition still cannot read a custom property either way, so the numbers are written;
- * the COUNTS are custom properties the component sets per instance.
+ * No viewport fallback: basalt's own CSS already requires `color-mix()` (Safari 16.2, Chrome 111,
+ * Firefox 113), and every one of those parses `@container` — a `@supports not (container-type)`
+ * block is unreachable in any browser that renders basalt at all.
  */
 
 .container {
   container-type: inline-size;
-  container-name: basalt-stat-group;
+  container-name: basalt-grid;
 }
 
 .root {
@@ -44,13 +43,26 @@
   gap: var(--vx-space-stack-md);
 }
 
-@container basalt-stat-group (min-width: 768px) {
+/* 260px is StatGroup's own literal (docs/DESIGN-CORE.md § Layout, elevation, shapes), not a container class: one column below it,
+ * so every cell leads a row and the rail draws no leading hairline at all. */
+@container basalt-grid (max-width: 259.9px) {
+  .root {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .root[data-divided] > *:nth-child(n) {
+    border-inline-start: 0;
+    padding-inline-start: 0;
+  }
+}
+
+@container basalt-grid (min-width: 800px) {
   .root {
     grid-template-columns: repeat(var(--basalt-stat-group-cols-sm), minmax(0, 1fr));
   }
 }
 
-@container basalt-stat-group (min-width: 1200px) {
+@container basalt-grid (min-width: 1200px) {
   .root {
     grid-template-columns: repeat(var(--basalt-stat-group-cols-lg), minmax(0, 1fr));
   }
@@ -71,14 +83,14 @@
   padding-inline-start: var(--vx-space-stack-md);
 }
 
-@container basalt-stat-group (max-width: 767.9px) {
+@container basalt-grid (max-width: 799.9px) {
   .root[data-divided] > *:nth-child(2n + 1) {
     border-inline-start: 0;
     padding-inline-start: 0;
   }
 }
 
-@container basalt-stat-group (min-width: 768px) and (max-width: 1199.9px) {
+@container basalt-grid (min-width: 800px) and (max-width: 1199.9px) {
   .root[data-divided][data-sm-cols='2'] > *:nth-child(2n + 1),
   .root[data-divided][data-sm-cols='3'] > *:nth-child(3n + 1) {
     border-inline-start: 0;
@@ -86,7 +98,7 @@
   }
 }
 
-@container basalt-stat-group (min-width: 1200px) {
+@container basalt-grid (min-width: 1200px) {
   .root[data-divided][data-cols='2'] > *:nth-child(2n + 1),
   .root[data-divided][data-cols='3'] > *:nth-child(3n + 1),
   .root[data-divided][data-cols='4'] > *:nth-child(4n + 1),
@@ -95,48 +107,3 @@
     padding-inline-start: 0;
   }
 }
-
-/*
- * The pre-container-query fallback — Safari < 16, Chrome < 106, Firefox < 110. Verbatim the law
- * this file shipped before, keyed on the viewport, and reachable ONLY where `@container` is not.
- * A browser that cannot parse `container-type` also cannot parse the `@container` blocks above, so
- * the two sets are never live at once.
- */
-@supports not (container-type: inline-size) {
-  @media (min-width: 48em) {
-    .root {
-      grid-template-columns: repeat(var(--basalt-stat-group-cols-sm), minmax(0, 1fr));
-    }
-  }
-
-  @media (min-width: 75em) {
-    .root {
-      grid-template-columns: repeat(var(--basalt-stat-group-cols-lg), minmax(0, 1fr));
-    }
-  }
-
-  @media (max-width: 47.99375em) {
-    .root[data-divided] > *:nth-child(2n + 1) {
-      border-inline-start: 0;
-      padding-inline-start: 0;
-    }
-  }
-
-  @media (min-width: 48em) and (max-width: 74.99375em) {
-    .root[data-divided][data-sm-cols='2'] > *:nth-child(2n + 1),
-    .root[data-divided][data-sm-cols='3'] > *:nth-child(3n + 1) {
-      border-inline-start: 0;
-      padding-inline-start: 0;
-    }
-  }
-
-  @media (min-width: 75em) {
-    .root[data-divided][data-cols='2'] > *:nth-child(2n + 1),
-    .root[data-divided][data-cols='3'] > *:nth-child(3n + 1),
-    .root[data-divided][data-cols='4'] > *:nth-child(4n + 1),
-    .root[data-divided][data-cols='5'] > *:nth-child(5n + 1) {
-      border-inline-start: 0;
-      padding-inline-start: 0;
-    }
-  }
-}

package/src/dashboard/widget-grid.module.css

@@ -15,18 +15,19 @@
  * container. A span resolved against the viewport while the tracks follow the container is exactly
  * the phantom-track defect `WidgetGrid.Item`'s context clamp exists to prevent.
  *
- * The literals: px in `@container`, Mantine's own `em` in the `@supports not` fallback — same
- * boundary (768px / 1200px at the 16px initial font size), but `em` inside a `@container`
- * condition resolves against the CONTAINER's font-size, so px is the only spelling that cannot
- * drift. A condition cannot read a custom property either way, so the numbers are written; the
- * COUNTS are custom properties, set once per instance by the component — three hand-written
- * `repeat()` blocks would have to enumerate every `cols` value, and the whole point of this
- * primitive is that a consumer states one desktop number and basalt owns the rest.
+ * The literals are the container-class law, as in `stat-group.module.css`: the `sm` count opens
+ * at `wide` (800px); 1200px, where the full `cols` count opens, is the grid's own boundary above
+ * the class table's top step. px, never `em` (an `em` condition resolves against the container's
+ * font-size). A condition cannot read a custom property, so the numbers are written; the COUNTS
+ * are custom properties, set once per instance by the component — three hand-written `repeat()`
+ * blocks would have to enumerate every `cols` value, and the whole point of this primitive is that
+ * a consumer states one desktop number and basalt owns the rest. No viewport fallback, for the
+ * reason `stat-group.module.css` states: nothing that renders basalt lacks `@container`.
  */
 
 .container {
   container-type: inline-size;
-  container-name: basalt-widget-grid;
+  container-name: basalt-grid;
 }
 
 .root {
@@ -47,7 +48,7 @@
   min-width: 0;
 }
 
-@container basalt-widget-grid (min-width: 768px) {
+@container basalt-grid (min-width: 800px) {
   .root {
     grid-template-columns: repeat(var(--basalt-widget-grid-cols-sm), minmax(0, 1fr));
   }
@@ -57,7 +58,7 @@
   }
 }
 
-@container basalt-widget-grid (min-width: 1200px) {
+@container basalt-grid (min-width: 1200px) {
   .root {
     grid-template-columns: repeat(var(--basalt-widget-grid-cols-lg), minmax(0, 1fr));
   }
@@ -66,31 +67,3 @@
     grid-column: span var(--basalt-widget-grid-span-lg);
   }
 }
-
-/*
- * The pre-container-query fallback — Safari < 16, Chrome < 106, Firefox < 110. Verbatim the law
- * this file shipped before, keyed on the viewport, and reachable ONLY where `@container` is not: a
- * browser that cannot parse `container-type` cannot parse the blocks above either, so the two sets
- * are never live at once.
- */
-@supports not (container-type: inline-size) {
-  @media (min-width: 48em) {
-    .root {
-      grid-template-columns: repeat(var(--basalt-widget-grid-cols-sm), minmax(0, 1fr));
-    }
-
-    .item {
-      grid-column: span var(--basalt-widget-grid-span-sm);
-    }
-  }
-
-  @media (min-width: 75em) {
-    .root {
-      grid-template-columns: repeat(var(--basalt-widget-grid-cols-lg), minmax(0, 1fr));
-    }
-
-    .item {
-      grid-column: span var(--basalt-widget-grid-span-lg);
-    }
-  }
-}

package/src/dashboard/widget-grid.tsx

@@ -10,7 +10,7 @@
  * **`cols` is the DESKTOP count, and it is the only number a consumer states.** The law is
  * `base 1 → sm min(cols, 2) → lg cols`: a phone gets one column because a dashboard card holds a
  * chart; a tablet gets at most two because a third makes every chart narrower than
- * `VX.phoneChartWidth`; the full count lands at `lg`. Mantine's `cols={{ … }}` object is
+ * `CONTAINER_CLASSES.regular`; the full count lands at `lg`. Mantine's `cols={{ … }}` object is
  * deliberately NOT forwarded — a responsive object on the public prop is exactly the seam that let
  * five call sites disagree.
  *
@@ -19,12 +19,13 @@
  * ACTUALLY has. The shell moves that width without moving the viewport — a `PageAside` claiming its
  * 300px, the sidebar collapsing 256px → its 48px rail, a consumer's split pane — and a `@media`
  * query sees none of it: it kept three chart columns in a 956px content box and every chart in the
- * row went narrower than `VX.phoneChartWidth`, which is the exact condition the `lg` rung exists to
- * avoid. See `widget-grid.module.css`'s header for the fallback.
+ * row went narrower than `CONTAINER_CLASSES.regular`, which is the exact condition the `lg` rung
+ * exists to avoid. See `widget-grid.module.css`'s header for the fallback.
  *
- * **This is the sanctioned place `lg` enters the package.** `sm` is still the only breakpoint a
- * consumer writes (`docs/CONTROLS-SPEC.md` §2); `WidgetGrid` and `StatGroup` own `lg` internally so
- * nobody else has to.
+ * **This is the sanctioned place `lg` enters the package.** A consumer never writes a
+ * breakpoint — component layout keys on the container's own width
+ * (`docs/DESIGN-CORE.md` § Layout, elevation, shapes); `WidgetGrid` and `StatGroup` own their `lg`
+ * container rung internally so nobody else has to.
  *
  * `WidgetGrid.Item` is for the one card that is wider than the rest — a hero chart beside two
  * stacked panels. `span` is likewise the DESKTOP span and is CLAMPED to the live column count at