basalt-ui 1.30.2 → 1.32.0

package/dist/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/dist/dashboard/stat-card.d.ts

@@ -102,7 +102,7 @@ export type StatCardProps = BasaltProps & SlotStylesProps<StatCardSlot> & Widget
      */
     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). */

package/dist/dashboard/stat-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../src/dashboard/stat-card.tsx"],"names":[],"mappings":"AAgGA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EACV,sBAAsB,EACtB,uBAAuB,EACvB,sBAAsB,EACvB,MAAM,iBAAiB,CAAA;AAIxB,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AAEzE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAGnD;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,CAAA;AAE/B;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;AAEnE;;;;;;;GAOG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,YAAY,CAAA;CAC7B,CAAA;AAcD;;;;;;;;GAQG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAkDD;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,eAAe,CAAC,YAAY,CAAC,GAC7B,sBAAsB,GACtB,IAAI,CAAC,uBAAuB,EAAE,OAAO,CAAC,GACtC,sBAAsB,GAAG;IACvB;iEAC6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAA;IAC3C;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC/B;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,qBAAqB,KAAK,SAAS,CAAC,CAAA;IACpE;yFACqF;IACrF,kBAAkB,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IACtC;mGAC+F;IAC/F,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;+EAG2E;IAC3E,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB,CAAA;AAEH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,SAAS,EACT,KAAK,EACL,KAAK,EACL,WAAW,EACX,aAAa,EACb,WAAW,EACX,UAAU,EACV,SAAS,EACT,kBAA4B,EAC5B,OAAO,EACP,IAAI,EACJ,SAAS,EACT,KAAK,EACL,UAAU,GACX,EAAE,aAAa,+BAkKf"}
+{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../src/dashboard/stat-card.tsx"],"names":[],"mappings":"AAgGA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EACV,sBAAsB,EACtB,uBAAuB,EACvB,sBAAsB,EACvB,MAAM,iBAAiB,CAAA;AAIxB,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AAEzE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAGnD;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,CAAA;AAE/B;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;AAEnE;;;;;;;GAOG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,YAAY,CAAA;CAC7B,CAAA;AAcD;;;;;;;;GAQG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAkDD;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,eAAe,CAAC,YAAY,CAAC,GAC7B,sBAAsB,GACtB,IAAI,CAAC,uBAAuB,EAAE,OAAO,CAAC,GACtC,sBAAsB,GAAG;IACvB;iEAC6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAA;IAC3C;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC/B;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,qBAAqB,KAAK,SAAS,CAAC,CAAA;IACpE;4GACwG;IACxG,kBAAkB,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IACtC;mGAC+F;IAC/F,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;+EAG2E;IAC3E,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB,CAAA;AAEH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,SAAS,EACT,KAAK,EACL,KAAK,EACL,WAAW,EACX,aAAa,EACb,WAAW,EACX,UAAU,EACV,SAAS,EACT,kBAA4B,EAC5B,OAAO,EACP,IAAI,EACJ,SAAS,EACT,KAAK,EACL,UAAU,GACX,EAAE,aAAa,+BAqKf"}

package/dist/dashboard/stat-card.js

@@ -88,7 +88,7 @@ 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
@@ -128,6 +128,9 @@ 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/dist/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/dist/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/dist/dashboard/widget-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"widget-grid.d.ts","sourceRoot":"","sources":["../../src/dashboard/widget-grid.tsx"],"names":[],"mappings":"AAoDA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGlD,uGAAuG;AACvG,MAAM,MAAM,cAAc,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AAgB1C,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C;8FAC0F;IAC1F,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,8FAA8F;IAC9F,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,eAAe,+BA8BnF;yBA9Be,UAAU;;;AAgC1B,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG;IAC9C,oGAAoG;IACpG,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;GAEG;AACH,iBAAS,cAAc,CAAC,EAAE,IAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,mBAAmB,+BAkBpF"}
+{"version":3,"file":"widget-grid.d.ts","sourceRoot":"","sources":["../../src/dashboard/widget-grid.tsx"],"names":[],"mappings":"AAqDA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGlD,uGAAuG;AACvG,MAAM,MAAM,cAAc,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AAgB1C,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C;8FAC0F;IAC1F,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,8FAA8F;IAC9F,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,eAAe,+BA8BnF;yBA9Be,UAAU;;;AAgC1B,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG;IAC9C,oGAAoG;IACpG,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;GAEG;AACH,iBAAS,cAAc,CAAC,EAAE,IAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,mBAAmB,+BAkBpF"}

package/dist/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/dist/dashboard/widget-header.d.ts

@@ -24,7 +24,9 @@ export type WidgetHeaderProps = BasaltProps & SlotStylesProps<WidgetHeaderSlot>
     title: string;
     /** Optional leading icon, rendered before the title. Decorative — hidden from assistive tech. */
     icon?: ReactNode;
-    /** Optional muted line rendered below the title row. */
+    /** Optional muted line rendered below the title row. In a card narrower than 480px, or shorter
+     * than 280px regardless of width, it folds into the info glyph's bubble instead (CSS only —
+     * exactly one of the two shows). */
     subtitle?: string;
     /**
      * Renders an info glyph BESIDE the heading (never inside it — this text would otherwise become
@@ -34,8 +36,8 @@ export type WidgetHeaderProps = BasaltProps & SlotStylesProps<WidgetHeaderSlot>
      * click — so a keyboard user gets it too. Mantine-free: a plain state bubble, not a Tooltip.
      */
     info?: string;
-    /** Pre-formatted metric value (mono, hero size). Renders on its own row with `delta`, directly
-     * under the title row — never inline with the title. */
+    /** Pre-formatted metric value (mono, hero size, never truncated). Renders on its own row with
+     * `delta` under the title row, or on the title row in a card 480px or wider. */
     value?: string;
     /**
      * The value's unit, rendered immediately after it on the hero row: muted, mono, `--vx-text-sm`.
@@ -125,8 +127,16 @@ export type WidgetHeaderDeltaProps = Pick<WidgetHeaderProps, 'delta' | 'deltaPer
  * composes it so an inspector row's `hint` is the same glyph, bubble and keyboard behaviour a
  * `WidgetHeader`'s `info` is — not a second one that drifts.
  */
-export declare function InfoGlyph({ text }: {
+export declare function InfoGlyph({ text, note, ariaLabel, className, }: {
     text: string;
+    /** A second paragraph in the bubble, shown only where `.foldNote` is (the folded subtitle). */
+    note?: string;
+    /** The GLYPH's own accessible name. Default `'More information'`; `WidgetHeader` overrides it to
+     * include the subtitle text for its fold-glyph mount (`info === undefined`), where this trigger
+     * IS the subtitle's only accessible surface — the bubble it opens is otherwise unreachable
+     * without first knowing there is something to open. */
+    ariaLabel?: string;
+    className?: string;
 }): import("react").JSX.Element;
 export declare function WidgetHeader({ tier, title, icon, subtitle, info, value, unit, delta, deltaPeriod, deltaPolarity, deltaFormat, deltaGlyph, sparkline, count, actions, className, style, classNames, }: WidgetHeaderProps): import("react").JSX.Element;
 //# sourceMappingURL=widget-header.d.ts.map

package/dist/dashboard/widget-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"widget-header.d.ts","sourceRoot":"","sources":["../../src/dashboard/widget-header.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAGlD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE7D;;;;;;;;;GASG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEnE,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,eAAe,CAAC,gBAAgB,CAAC,GAAG;IAClC;;;;gDAI4C;IAC5C,IAAI,EAAE,gBAAgB,CAAA;IACtB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAA;IACb,iGAAiG;IACjG,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;4DACwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sFAAsF;IACtF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;qEACiE;IACjE,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC;4DACwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;yDACqD;IACrD,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB;2EACuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4FAA4F;IAC5F,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC,CAAA;AAEpG;;;GAGG;AACH,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,MAAM,CAAC,CAAA;AAE/E;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,iBAAiB,EACjB,OAAO,GAAG,aAAa,GAAG,eAAe,GAAG,aAAa,GAAG,YAAY,CACzE,CAAA;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,+BA8CnD;AAED,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,KAAK,EACL,WAAW,EACX,aAAa,EACb,WAAW,EACX,UAAU,EACV,SAAS,EACT,KAAK,EACL,OAAO,EACP,SAAS,EACT,KAAK,EACL,UAAU,GACX,EAAE,iBAAiB,+BAoDnB"}
+{"version":3,"file":"widget-header.d.ts","sourceRoot":"","sources":["../../src/dashboard/widget-header.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAGlD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE7D;;;;;;;;;GASG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEnE,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,eAAe,CAAC,gBAAgB,CAAC,GAAG;IAClC;;;;gDAI4C;IAC5C,IAAI,EAAE,gBAAgB,CAAA;IACtB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAA;IACb,iGAAiG;IACjG,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;wCAEoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;oFACgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sFAAsF;IACtF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;qEACiE;IACjE,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC;4DACwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;yDACqD;IACrD,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB;2EACuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4FAA4F;IAC5F,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC,CAAA;AAEpG;;;GAGG;AACH,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,MAAM,CAAC,CAAA;AAE/E;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,iBAAiB,EACjB,OAAO,GAAG,aAAa,GAAG,eAAe,GAAG,aAAa,GAAG,YAAY,CACzE,CAAA;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,IAAI,EACJ,SAA8B,EAC9B,SAAS,GACV,EAAE;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;2DAGuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,+BAgDA;AAED,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,KAAK,EACL,WAAW,EACX,aAAa,EACb,WAAW,EACX,UAAU,EACV,SAAS,EACT,KAAK,EACL,OAAO,EACP,SAAS,EACT,KAAK,EACL,UAAU,GACX,EAAE,iBAAiB,+BAiEnB"}

package/dist/dashboard/widget-header.js

@@ -4,7 +4,12 @@ import { cx } from "../common/props.js";
 import { IconSlot } from "../theme/icon-slot.js";
 import { DeltaBadge } from "./delta-badge.js";
 import classes from "./widget-header.module.css";
-function InfoGlyph({ text }) {
+function InfoGlyph({
+  text,
+  note,
+  ariaLabel = "More information",
+  className
+}) {
   const [open, setOpen] = useState(false);
   const tipId = useId();
   const triggerRef = useRef(null);
@@ -17,14 +22,15 @@ function InfoGlyph({ text }) {
     document.addEventListener("pointerdown", handlePointerDown);
     return () => document.removeEventListener("pointerdown", handlePointerDown);
   }, [open]);
-  return /* @__PURE__ */ jsxs("span", { className: classes.info, children: [
+  return /* @__PURE__ */ jsxs("span", { className: cx(classes.info, className), children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         ref: triggerRef,
         type: "button",
+        "data-basalt-hit": true,
         className: classes.infoTrigger,
-        "aria-label": "More information",
+        "aria-label": ariaLabel,
         "aria-describedby": open ? tipId : void 0,
         "data-open": open,
         onMouseEnter: () => setOpen(true),
@@ -38,7 +44,10 @@ function InfoGlyph({ text }) {
         children: /* @__PURE__ */ jsx("svg", { width: 11, height: 11, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm0 5a1 1 0 0 1 1 1v7a1 1 0 1 1-2 0v-7a1 1 0 0 1 1-1z" }) })
       }
     ),
-    open && /* @__PURE__ */ jsx("span", { id: tipId, role: "tooltip", className: classes.infoBubble, children: text })
+    open && /* @__PURE__ */ jsxs("span", { id: tipId, role: "tooltip", className: classes.infoBubble, children: [
+      text,
+      note !== void 0 && /* @__PURE__ */ jsx("span", { className: classes.foldNote, children: note })
+    ] })
   ] });
 }
 function WidgetHeader({
@@ -74,9 +83,17 @@ function WidgetHeader({
             icon !== void 0 && /* @__PURE__ */ jsx(IconSlot, { className: cx(classes.icon, classNames?.icon), children: icon }),
             /* @__PURE__ */ jsx("span", { className: classes.titleText, children: title })
           ] }),
-          info !== void 0 && /* @__PURE__ */ jsx(InfoGlyph, { text: info }),
+          info !== void 0 && /* @__PURE__ */ jsx(InfoGlyph, { text: info, ...subtitle !== void 0 && { note: subtitle } }),
+          info === void 0 && subtitle !== void 0 && /* @__PURE__ */ jsx(
+            InfoGlyph,
+            {
+              text: subtitle,
+              className: classes.foldGlyph,
+              ariaLabel: `More information: ${subtitle}`
+            }
+          ),
           count !== void 0 && /* @__PURE__ */ jsx("span", { className: classes.count, children: count }),
-          actions !== void 0 && /* @__PURE__ */ jsx("span", { className: classes.actions, children: actions })
+          actions !== void 0 && /* @__PURE__ */ jsx("span", { className: classes.actions, "data-basalt-hit-scope": true, children: actions })
         ] }),
         (value !== void 0 || delta !== void 0) && /* @__PURE__ */ jsxs("div", { className: cx(classes.metrics, classNames?.metric), children: [
           value !== void 0 && /* @__PURE__ */ jsx("span", { className: classes.value, children: value }),