basalt-ui 1.30.2 → 1.31.0

package/dist/controls/actions.js

@@ -1,10 +1,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ActionIcon, Button, Group, Menu } from "@mantine/core";
-import { createContext, isValidElement, useContext, useEffect } from "react";
+import { ActionIcon, Box, Button, Group, Menu } from "@mantine/core";
+import { createContext, isValidElement, useContext, useEffect, useRef, useState } from "react";
+import { useMeasuredWidths } from "../common/use-measured-widths.js";
+import { useIsomorphicLayoutEffect } from "../common/isomorphic-layout-effect.js";
 import { IconSlot } from "../theme/icon-slot.js";
 import { ControlGroup } from "./control-group.js";
 import classes from "./actions.module.css";
-const DESKTOP_SECONDARY_MAX = 3;
 const MOBILE_GLOBAL_BAR_MAX = 2;
 const NO_EXTRAS = {
   mobileMoreActions: [],
@@ -49,16 +50,17 @@ function ChevronGlyph() {
 }
 const MOBILE_PRIMARY_PADDING_X = 10;
 const BAR_GAP = 6;
+const PAGE_BAR_END_ATTR = "data-basalt-page-bar-end";
+const BAR_KEY_ATTR = "data-bar-key";
 function BarButton({
   action,
   variant,
-  px,
-  tier
+  px
 }) {
   const shared = {
     variant,
     ...px !== void 0 && { 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
@@ -78,12 +80,11 @@ function BarButton({
 }
 function BarIconButton({
   action,
-  variant,
-  tier
+  variant
 }) {
   const shared = {
     variant,
-    ...tier,
+    [BAR_KEY_ATTR]: action.key,
     "aria-label": action.label,
     disabled: action.disabled === true,
     loading: action.loading === true,
@@ -192,6 +193,103 @@ function joinRuns(actions, opts) {
   }
   return runs;
 }
+const MORE_WIDTH = 80;
+function planBarFold(input) {
+  const { room, fixed, gap, hasMenus, items } = input;
+  const steps = items.map(() => void 0);
+  const used = () => 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 !== void 0) 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]]] : []));
+}
+function flowItems(el) {
+  return Array.from(el.children).flatMap(
+    (child) => getComputedStyle(child).display === "contents" ? flowItems(child) : [child]
+  );
+}
+function useMeasuredFold(input) {
+  const { host, runs, hasMenus } = input;
+  const groupRef = useRef(null);
+  const [folds, setFolds] = useState({});
+  const [epoch, setEpoch] = useState(0);
+  const foldsRef = useRef(folds);
+  const runsRef = useRef(runs);
+  const signature = `${hasMenus ? "menus" : "nomenus"}|${runs.map(
+    (run) => `${run[0].key}:${run.map((a) => a.kind === void 0 ? a.label : "").join(",")}`
+  ).join("|")}`;
+  const measuredSignature = useRef(signature);
+  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) {
+          foldsRef.current = {};
+          setFolds({});
+          setEpoch((n) => n + 1);
+          return;
+        }
+      }
+      const group = groupRef.current;
+      if (group === null) return;
+      const currentRuns = runsRef.current;
+      const foldable = new Set(
+        currentRuns.filter((run) => run[0].kind === void 0).map((run) => run[0].key)
+      );
+      const elements = Array.from(group.children).filter(
+        (el) => 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] === void 0 && 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 !== void 0) return [];
+        const seen = boxes.current.get(rep.key);
+        if (seen === void 0) return [];
+        const icon = run.length === 1 && rep.icon !== void 0 ? seen.height : void 0;
+        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);
+    }
+  });
+  useIsomorphicLayoutEffect(() => {
+    let disposed = false;
+    void document.fonts?.ready?.then(() => disposed ? void 0 : measured.remeasure()).catch(() => {
+    });
+    return () => {
+      disposed = true;
+    };
+  }, [host, signature]);
+  return { folds, groupRef };
+}
 function BarActionRow({
   primary,
   secondary,
@@ -207,8 +305,13 @@ function BarActionRow({
   const list = secondary ?? [];
   const flat = list.filter((a) => a.kind !== "menu");
   const menus = list.filter((a) => 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];
   const mobileBar = wantsMobile ? [
@@ -230,19 +333,51 @@ function BarActionRow({
   const hasDesktop = primary !== void 0 || list.length > 0;
   const hasMobile = mobileBar.length > 0 || claimsKebab;
   if (!hasDesktop && !hasMobile && syncNode === void 0) return null;
-  const desktopLead = inline.length > 0 || desktopOverflow.length > 0 || syncNode === void 0;
+  const desktopLead = flat.length > 0 || menus.length > 0 || syncNode === void 0;
   const rootProps = {
     ...className !== void 0 && { className },
     ...style !== void 0 && { style }
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    hasDesktop && desktopLead && /* @__PURE__ */ jsxs(Group, { gap: BAR_GAP, wrap: "nowrap", visibleFrom: "sm", ...rootProps, children: [
-      joinRuns(inline, { viewport: "desktop" }).map(
-        (run) => run.length === 1 ? /* @__PURE__ */ jsx(BarEntry, { action: run[0], emphasis: "secondary" }, run[0].key) : /* @__PURE__ */ jsx(ControlGroup, { children: run.map((action) => /* @__PURE__ */ jsx(BarEntry, { action, emphasis: "secondary", iconOnly: true }, action.key)) }, `join-${run[0].key}`)
-      ),
-      /* @__PURE__ */ jsx(OverflowMenu, { actions: desktopOverflow }),
-      syncNode === void 0 && desktopPrimary
-    ] }),
+    hasDesktop && desktopLead && /* @__PURE__ */ jsxs(
+      Group,
+      {
+        ref: groupRef,
+        gap: BAR_GAP,
+        wrap: "nowrap",
+        visibleFrom: "sm",
+        ...host === "slot" && { [PAGE_BAR_END_ATTR]: "" },
+        ...rootProps,
+        children: [
+          runs.map(
+            (run) => run.length === 1 ? /* @__PURE__ */ jsx(
+              BarEntry,
+              {
+                action: run[0],
+                emphasis: "secondary",
+                iconOnly: folds[run[0].key] === "icon"
+              },
+              run[0].key
+            ) : (
+              // 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.
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  className: classes.joinBox,
+                  ...{ [BAR_KEY_ATTR]: run[0].key },
+                  children: /* @__PURE__ */ jsx(ControlGroup, { children: run.map((action) => /* @__PURE__ */ jsx(BarEntry, { action, emphasis: "secondary", iconOnly: true }, action.key)) })
+                },
+                `join-${run[0].key}`
+              )
+            )
+          ),
+          /* @__PURE__ */ jsx(OverflowMenu, { actions: desktopOverflow }),
+          syncNode === void 0 && desktopPrimary
+        ]
+      }
+    ),
     syncNode,
     syncNode !== void 0 && desktopPrimary !== null && /* @__PURE__ */ jsx(Group, { gap: BAR_GAP, wrap: "nowrap", visibleFrom: "sm", ...!desktopLead && rootProps, children: desktopPrimary }),
     hasMobile && /* @__PURE__ */ jsxs(Group, { gap: BAR_GAP, wrap: "nowrap", hiddenFrom: "sm", ...rootProps, children: [
@@ -291,12 +426,6 @@ function BarEntry({
   if (iconOnly === true && action.icon !== void 0) {
     return /* @__PURE__ */ jsx(BarIconButton, { action, variant: "default" });
   }
-  if (emphasis === "secondary" && action.icon !== void 0) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(BarIconButton, { action, variant: "default", tier: { hiddenFrom: "md" } }),
-      /* @__PURE__ */ jsx(BarButton, { action, variant: "default", tier: { visibleFrom: "md" } })
-    ] });
-  }
   return /* @__PURE__ */ jsx(BarButton, { action, variant: emphasis === "primary" ? "filled" : "default" });
 }
 function MobileBarEntry({
@@ -315,14 +444,16 @@ function MobileBarEntry({
 }
 export {
   ActionGroup,
+  BAR_KEY_ATTR,
   BarActionRow,
   BarActionSlot,
   BarExtrasProvider,
-  DESKTOP_SECONDARY_MAX,
   MOBILE_GLOBAL_BAR_MAX,
   OverflowMenu,
+  PAGE_BAR_END_ATTR,
   barActionMobile,
   globalActionAsBarAction,
   globalActionMobile,
-  isBarActionList
+  isBarActionList,
+  planBarFold
 };

package/dist/controls/actions.module.css

@@ -24,7 +24,7 @@
   padding: 0 var(--vx-space-row-inset-x);
 }
 
-@media (max-width: 47.99375em) {
+@media (pointer: coarse) {
   .menuItem,
   .customRow {
     min-height: var(--vx-space-sheet-row-height);
@@ -60,3 +60,16 @@
 
   color: var(--vx-faint);
 }
+
+/*
+ * The `Box` wrapping a joined `ControlGroup` run (`BAR_KEY_ATTR`, one level up from the group
+ * itself) so `useMeasuredFold` can measure the whole run as a single box. Without `flex: none` this
+ * wrapper is an ORDINARY flex item of the desktop row (`flex: 0 1 auto`, Mantine `Box`'s default) —
+ * exactly the shrink target the row's own fold arithmetic squeezes first, so its `offsetWidth` read
+ * back a compressed width instead of the run's real max-content width. `ControlGroup` itself
+ * already carries this on its own root (`.group`, `controls.module.css`) — this wrapper needs the
+ * same property one box further out.
+ */
+.joinBox {
+  flex: none;
+}

package/dist/controls/actions.module.css.d.ts

@@ -9,5 +9,6 @@ declare const classes: {
   readonly customSlot: string
   readonly kebabIcon: string
   readonly chevronIcon: string
+  readonly joinBox: string
 }
 export default classes

package/dist/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/dist/controls/enum-filter.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, Radio, Stack } from "@mantine/core";
 import classes from "./controls.module.css";
-import { useFilterRegistration, useFilterSurface } from "./filter-context.js";
+import { POPOVER_ROW_HIT_GAP, useFilterRegistration, useFilterSurface } from "./filter-context.js";
 import { FilterPill } from "./filter-pill.js";
 import { useControlName } from "./filter-sheet.js";
 import { PanelChoice, PanelRow } from "./panel-row.js";
@@ -66,7 +66,7 @@ function EnumFilter({
           setValue(next);
         },
         children: [
-          /* @__PURE__ */ jsx(Stack, { gap: 2, children: options.map((option) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Stack, { gap: POPOVER_ROW_HIT_GAP, style: { "--vx-hit-gap": "var(--stack-gap)" }, children: options.map((option) => /* @__PURE__ */ jsx(
             Radio,
             {
               value: option.value,

package/dist/controls/filter-context.d.ts

@@ -1,4 +1,14 @@
 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 declare 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/dist/controls/filter-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter-context.d.ts","sourceRoot":"","sources":["../../src/controls/filter-context.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;AAItD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,IAAI,aAAa,CAEhD;AAED,uFAAuF;AACvF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gGAAgG;IAChG,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,oEAAoE;IACpE,QAAQ,CAAC,KAAK,EAAE,MAAM,IAAI,CAAA;CAC3B,CAAA;AAED,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,kBAAkB,GAAG,IAAI,CAAA;IAC7D,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;CAC9B,CAAA;AAID,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAA;IAC/B;oGACgG;IAChG,QAAQ,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAA;IACxC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;CAC7B,CAAA;AAED,gGAAgG;AAChG,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,GAAG,SAAS,CAM9F;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,GAAG,IAAI,CAkBhF;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAA;IACjC,mEAAmE;IACnE,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;IAC5B,sCAAsC;IACtC,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AAED;;;;GAIG;AACH,wBAAgB,eAAe,IAAI,YAAY,CAiC9C"}
+{"version":3,"file":"filter-context.d.ts","sourceRoot":"","sources":["../../src/controls/filter-context.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,KAAK,CAAA;AAErC;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;AAItD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,IAAI,aAAa,CAEhD;AAED,uFAAuF;AACvF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gGAAgG;IAChG,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,oEAAoE;IACpE,QAAQ,CAAC,KAAK,EAAE,MAAM,IAAI,CAAA;CAC3B,CAAA;AAED,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,kBAAkB,GAAG,IAAI,CAAA;IAC7D,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;CAC9B,CAAA;AAID,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAA;IAC/B;oGACgG;IAChG,QAAQ,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAA;IACxC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;CAC7B,CAAA;AAED,gGAAgG;AAChG,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,GAAG,SAAS,CAM9F;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,GAAG,IAAI,CAkBhF;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAA;IACjC,mEAAmE;IACnE,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;IAC5B,sCAAsC;IACtC,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AAED;;;;GAIG;AACH,wBAAgB,eAAe,IAAI,YAAY,CAiC9C"}

package/dist/controls/filter-context.js

@@ -9,6 +9,7 @@ import {
   useRef,
   useState
 } from "react";
+const POPOVER_ROW_HIT_GAP = 25;
 const FilterSurfaceContext = createContext("pill");
 function useFilterSurface() {
   return useContext(FilterSurfaceContext);
@@ -63,6 +64,7 @@ function useFilterCensus() {
 }
 export {
   FilterSetScope,
+  POPOVER_ROW_HIT_GAP,
   useFilterCensus,
   useFilterRegistration,
   useFilterSurface

package/dist/controls/filter-pill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter-pill.d.ts","sourceRoot":"","sources":["../../src/controls/filter-pill.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAKlD,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB,iGAAiG;IACjG,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB;sFACkF;IAClF,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,kDAAkD;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;IAC7B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAC7B,qEAAqE;IACrE,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,6FAA6F;IAC7F,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,0FAA0F;IAC1F,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,EACP,SAAS,EACT,KAAK,EACL,SAAS,EACT,KAAK,GACN,EAAE,eAAe,GAAG,SAAS,CA4D7B"}
+{"version":3,"file":"filter-pill.d.ts","sourceRoot":"","sources":["../../src/controls/filter-pill.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAKlD,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB,iGAAiG;IACjG,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB;sFACkF;IAClF,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,kDAAkD;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;IAC7B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAC7B,qEAAqE;IACrE,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,6FAA6F;IAC7F,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,0FAA0F;IAC1F,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,EACP,SAAS,EACT,KAAK,EACL,SAAS,EACT,KAAK,GACN,EAAE,eAAe,GAAG,SAAS,CA6D7B"}

package/dist/controls/filter-pill.js

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

package/dist/controls/index.d.ts

@@ -5,7 +5,7 @@
  * desktop/mobile swap in CSS (law C9). Actions and sync land in wave 3; the filter/tab family
  * follows in wave 4.
  */
-export { ActionGroup, OverflowMenu, DESKTOP_SECONDARY_MAX, MOBILE_GLOBAL_BAR_MAX, barActionMobile, globalActionMobile, type BarAction, type BarActionItem, type BarActionMenu, type BarActionCustom, type ActionGroupProps, type GlobalAction, type OverflowMenuProps, } from './actions.js';
+export { ActionGroup, OverflowMenu, MOBILE_GLOBAL_BAR_MAX, barActionMobile, globalActionMobile, type BarAction, type BarActionItem, type BarActionMenu, type BarActionCustom, type ActionGroupProps, type GlobalAction, type OverflowMenuProps, } from './actions.js';
 export { SyncButton, formatAge, AGE_REFRESH_MS, type SyncButtonProps } from './sync-button.js';
 export { ControlGroup, type ControlGroupProps } from './control-group.js';
 export { FilterSet, type FilterSetProps } from './filter-set.js';

package/dist/controls/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/controls/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EACL,WAAW,EACX,YAAY,EACZ,qBAAqB,EACrB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACjB,KAAK,iBAAiB,GACvB,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAC3F,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAMtE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,KAAK,sBAAsB,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAChG,OAAO,EACL,aAAa,EACb,cAAc,EACd,KAAK,kBAAkB,EACvB,KAAK,YAAY,GAClB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EACL,YAAY,EACZ,KAAK,YAAY,EACjB,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,GAC7B,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,uBAAuB,CAAA;AACtF,OAAO,EAAE,YAAY,EAAE,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAC/F,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACtE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACtE,OAAO,EAAE,QAAQ,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAM/E,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/controls/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EACL,WAAW,EACX,YAAY,EACZ,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACjB,KAAK,iBAAiB,GACvB,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAC3F,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAMtE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,KAAK,sBAAsB,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAChG,OAAO,EACL,aAAa,EACb,cAAc,EACd,KAAK,kBAAkB,EACvB,KAAK,YAAY,GAClB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EACL,YAAY,EACZ,KAAK,YAAY,EACjB,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,GAC7B,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,uBAAuB,CAAA;AACtF,OAAO,EAAE,YAAY,EAAE,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAC/F,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACtE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACtE,OAAO,EAAE,QAAQ,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAM/E,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/controls/index.js

@@ -1,7 +1,6 @@
 import {
   ActionGroup,
   OverflowMenu,
-  DESKTOP_SECONDARY_MAX,
   MOBILE_GLOBAL_BAR_MAX,
   barActionMobile,
   globalActionMobile
@@ -30,7 +29,6 @@ export {
   COMPARE_VALUES,
   CompareFilter,
   ControlGroup,
-  DESKTOP_SECONDARY_MAX,
   FilterSet,
   MOBILE_GLOBAL_BAR_MAX,
   MultiSelectFilter,

package/dist/controls/multi-select-filter.js

@@ -3,7 +3,7 @@ import { Button, Checkbox, Stack } from "@mantine/core";
 import { useState } from "react";
 import { assertRequiredProps } from "../common/validate.js";
 import classes from "./controls.module.css";
-import { useFilterRegistration, useFilterSurface } from "./filter-context.js";
+import { POPOVER_ROW_HIT_GAP, useFilterRegistration, useFilterSurface } from "./filter-context.js";
 import { FilterPill } from "./filter-pill.js";
 import { CheckGlyph, useControlName } from "./filter-sheet.js";
 import { PanelRow } from "./panel-row.js";
@@ -64,7 +64,7 @@ function MultiSelectFilter(props) {
           setValue(next);
         },
         children: [
-          /* @__PURE__ */ jsx(Stack, { gap: 2, children: options.map((option) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Stack, { gap: POPOVER_ROW_HIT_GAP, style: { "--vx-hit-gap": "var(--stack-gap)" }, children: options.map((option) => /* @__PURE__ */ jsx(
             Checkbox,
             {
               value: option.value,

package/dist/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/dist/dashboard/section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../src/dashboard/section.tsx"],"names":[],"mappings":"AAiDA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAKnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAGtD,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAGnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAGxD;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;AAMpD,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAAC,GACnF,WAAW,GACX,eAAe,CAAC,WAAW,CAAC,GAAG;IAC7B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC/B;;;;OAIG;IACH,KAAK,CAAC,EAAE,cAAc,CAAA;IACtB,gGAAgG;IAChG,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;8CAC0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;uBACmB;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;uGACmG;IACnG,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;uDAEmD;IACnD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,qGAAqG;IACrG,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAyDH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,KAAK,EACL,KAAK,EACL,IAAI,EACJ,WAAmB,EACnB,UAAU,EACV,WAAkB,EAClB,OAAO,EACP,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,EACL,UAAU,EACV,GAAG,WAAW,EACf,EAAE,YAAY,+BA4Fd"}
+{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../src/dashboard/section.tsx"],"names":[],"mappings":"AAiDA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAKnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAGtD,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAGnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAGxD;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;AAMpD,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAAC,GACnF,WAAW,GACX,eAAe,CAAC,WAAW,CAAC,GAAG;IAC7B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC/B;;;;OAIG;IACH,KAAK,CAAC,EAAE,cAAc,CAAA;IACtB,gGAAgG;IAChG,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;8CAC0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;uBACmB;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;uGACmG;IACnG,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;uDAEmD;IACnD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,qGAAqG;IACrG,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AA0DH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,KAAK,EACL,KAAK,EACL,IAAI,EACJ,WAAmB,EACnB,UAAU,EACV,WAAkB,EAClB,OAAO,EACP,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,EACL,UAAU,EACV,GAAG,WAAW,EACf,EAAE,YAAY,+BA4Fd"}

package/dist/dashboard/section.js

@@ -25,6 +25,7 @@ function ChevronToggle({
     {
       type: "button",
       className: classes.chevron,
+      "data-basalt-hit": true,
       "data-open": open,
       "aria-expanded": open,
       "aria-controls": controls,

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,