basalt-ui 1.30.2 → 1.32.0

package/dist/controls/actions.d.ts

@@ -71,8 +71,6 @@ export type GlobalAction = {
     /** @default 'bar' for the first two, `'more'` for the rest */
     mobile?: 'bar' | 'more' | 'hidden';
 };
-/** Secondaries rendered inline on desktop; the rest fold into `More` (`docs/CONTROLS-SPEC.md` §2.1). */
-export declare const DESKTOP_SECONDARY_MAX = 3;
 /** `GlobalAction`s without an explicit `mobile` that still land on the mobile bar. */
 export declare const MOBILE_GLOBAL_BAR_MAX = 2;
 /**
@@ -100,6 +98,13 @@ export declare function barActionMobile(action: BarAction, isPrimary: boolean):
 export declare function globalActionMobile(action: GlobalAction, index: number): 'bar' | 'more' | 'hidden';
 /** A `GlobalAction` reaching a `BarAction` slot — the kebab renders one row shape, not two. */
 export declare function globalActionAsBarAction(action: GlobalAction): BarActionCustom;
+/**
+ * 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.
+ */
+export declare const PAGE_BAR_END_ATTR = "data-basalt-page-bar-end";
+export declare const BAR_KEY_ATTR = "data-bar-key";
 export type OverflowMenuProps = BasaltProps & {
     actions: readonly BarAction[];
     /**
@@ -149,12 +154,30 @@ type BarActionRowProps = ActionGroupProps & {
      */
     syncNode?: ReactNode;
 };
+type FoldStep = 'icon' | 'overflow';
+/**
+ * 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 declare function planBarFold(input: {
+    room: number;
+    fixed: number;
+    gap: number;
+    hasMenus: boolean;
+    items: readonly {
+        key: string;
+        full: number;
+        icon: number | undefined;
+    }[];
+}): Record<string, FoldStep>;
 export declare function BarActionRow({ primary, secondary, host, viewport, mobileOnly, syncNode, className, style, }: BarActionRowProps): ReactNode;
 /**
  * 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.
@@ -192,8 +215,8 @@ export type SlotActions = BarAction[] | ReactNode;
 export declare 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

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

@@ -1 +1 @@
-{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../src/controls/actions.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../src/controls/actions.tsx"],"names":[],"mappings":"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"}

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).
  */
@@ -49,8 +49,13 @@
   flex-shrink: 0;
 }
 
+/* theme-allow-file raw-media-query — the ControlRow's own C9 swap (pills inline, the rest in a
+   sheet) keys on the SIZE CLASS by design: the sheet is compact-class chrome, the same axis the
+   shell's bottom bar reads. Every width query here is `SIZE_CLASSES.medium`, pinned by
+   `breakpoint-literals.test.ts`. */
+
 /* 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 +65,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 +76,7 @@
   display: none;
 }
 
-@media (min-width: 48em) {
+@media (min-width: 52.5em) {
   .foldPill[data-shown] {
     display: inline-flex;
   }
@@ -81,7 +86,7 @@
   display: none;
 }
 
-@media (max-width: 47.99375em) {
+@media (max-width: 52.49375em) {
   .sheetPill {
     display: inline-flex;
   }
@@ -101,10 +106,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 +163,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,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/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,