basalt-ui 1.27.0 → 1.28.0

package/dist/controls/controls.module.css

@@ -2,10 +2,11 @@
  * `basalt-ui/controls` — the filter/tab home surface (docs/CONTROLS-SPEC.md §3).
  *
  * Two form factors per control, ONE mount each, switched by CSS only (C9): the `pill` surface
- * (bordered 30px chip + popover) and the `sheet` surface (44px full-width rows inside the mobile
- * `Filters (n)` Drawer). `48em` / `47.99375em` are the `sm` breakpoint 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).
+ * (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
+ * 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).
  */
 
 /* ── The pill row (FilterSet, desktop + the mobile inline head) ───────────────────────────────── */
@@ -228,21 +229,19 @@
 /* ── The sheet surface (inside the bottom Drawer) ─────────────────────────────────────────────── */
 
 /*
- * One rhythm, one kind of separator. Groups are 12px apart (`--vx-space-stack-md`) and NOTHING
- * between them draws a line: the only hairline in the sheet is the one between two option rows of
- * the SAME group (`.sheetOption`, below), which is what makes it read as a list rather than as a
- * stack of boxed sections. The pre-1.28 sheet had a footer rule, a Drawer header rule and a
- * `Radio.Group` per filter, so a six-filter sheet drew seven lines and none of them grouped
- * anything.
+ * The sheet's body holds a flat list of `PanelRow`s — the SAME rows the aside's `panel` surface
+ * renders (`panel-row.module.css`), zero gap between them: each row already draws its own
+ * `padding-block` inset and its own `.row + .row` hairline, the same "one rhythm, one separator"
+ * rule the aside's own body follows. A `gap` here would double up with that inset instead of
+ * replacing it.
  */
 .sheetBody {
   display: flex;
   flex-direction: column;
-  gap: var(--vx-space-stack-md, 0.75rem);
 }
 
 /* The Drawer header holds the title AND `Reset all` (see `FilterSheet`'s doc), so it is a row that
- * spreads rather than Mantine's default title-plus-close pair. 44px, like every sheet row. */
+ * spreads rather than Mantine's default title-plus-close pair. */
 .sheetHeader {
   min-height: var(--vx-space-sheet-row-height, 2.75rem);
   padding-block: 0;
@@ -265,141 +264,12 @@
   color: var(--vx-ink);
 }
 
-.sheetField {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-/* ── SheetOptionList / SheetDisclosure ────────────────────────────────────────────────────────── */
-
-/* A `<fieldset>` in the option-list case (see `SheetOptionList`), a plain div in the disclosure
- * case — the reset covers both, since a div ignores all of it. */
-.sheetList {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
-  border: none;
-  min-inline-size: 0;
-  min-width: 0;
-}
-
 /*
- * The 44px option row (C15). `<label>` in a list, `<button>` in a disclosure — one class, because
- * the two must be indistinguishable: the disclosure IS the list's last entry.
- *
- * `appearance`/`margin`/`border`/`background`/`text-align` reset the `<button>` form back to the
- * `<label>`'s box; a `<label>` ignores all five, so there is no need for a second selector.
- */
-.sheetOption {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: var(--mantine-spacing-xs, 0.625rem);
-  width: 100%;
-  min-height: var(--vx-space-sheet-row-height, 2.75rem);
-  appearance: none;
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: none;
-  text-align: start;
-  color: var(--vx-muted);
-  cursor: pointer;
-}
-
-/* Hairline BETWEEN rows only — a trailing border on the last row would be the group separator this
- * sheet deliberately does not draw. */
-.sheetOption + .sheetOption,
-.sheetDisclosureBody + .sheetOption,
-.sheetOption + .sheetDisclosureBody {
-  border-top: 1px solid color-mix(in srgb, var(--vx-ink) 6%, transparent);
-}
-
-.sheetOption[data-selected] {
-  color: var(--vx-ink);
-}
-
-.sheetOption[data-disabled] {
-  color: var(--vx-faint);
-  cursor: not-allowed;
-}
-
-@media (hover: hover) {
-  .sheetOption:not([data-disabled]):hover {
-    color: var(--vx-ink);
-  }
-}
-
-/*
- * The real native radio/checkbox, visually hidden — the row's semantics, not decoration (see
- * `SheetOptionList`'s doc). Not `display: none`: a hidden input is unfocusable, which would take the
- * arrow-key group behaviour with it. Standard visually-hidden clip, and `:focus-visible` on it is
- * what draws the ROW's focus ring below.
- */
-.sheetOptionInput {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
-
-.sheetOption:has(.sheetOptionInput:focus-visible),
-.sheetOption:focus-visible {
-  outline: 2px solid var(--vx-accent);
-  outline-offset: -2px;
-  border-radius: var(--vx-radius-ctrl);
-}
-
-.sheetOptionLabel {
-  flex: 1;
-  min-width: 0;
-  font-size: var(--vx-text-md);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.sheetOptionCheck {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  color: var(--vx-accent);
-}
-
-.sheetDisclosureBody {
-  padding-bottom: var(--vx-space-stack-sm, 0.5rem);
-}
-
-/*
- * The group heading — the package's MONO MICRO label (`docs/DESIGN-SPEC.md` §3), the same treatment
- * `shell/app-sidebar.module.css`'s `.sectionLabel` draws for a nav section. It read as a head-font
- * 13.5px line before, which is the same typography as the option rows it labels, so a group heading
- * and its first option were indistinguishable — and the sheet's only remaining structure IS the
- * heading, since it draws no rules between groups.
- */
-.sheetLabel {
-  font-family: var(--basalt-font-mono);
-  font-size: var(--vx-text-micro);
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--vx-faint);
-}
-
-/*
- * The heading a `Radio.Group`/`Checkbox.Group` renders for itself (Mantine's `Input.Label`) — same
- * typography as `.sheetLabel`, which is what the other sheet fields use. Both surfaces get it: in
- * the popover it is the only place the filter's NAME appears (the pill reads the value), and in the
- * sheet it replaces a `SheetField` heading that could never be programmatically associated —
- * `Radio.Group` overwrites any `aria-labelledby` with its own.
+ * The heading a `Radio.Group`/`Checkbox.Group` renders for itself (Mantine's `Input.Label`) — the
+ * package's MONO MICRO label treatment, weighted up to the head font so it reads as a control's own
+ * name rather than as an option row. In the popover it is the only place the filter's NAME appears
+ * (the pill reads the value); the sheet and panel forms name their control through `PanelRow`'s own
+ * label instead, which is why this class is popover-only.
  */
 .groupLabel {
   font-family: var(--basalt-font-head);
@@ -409,46 +279,6 @@
   color: var(--vx-muted);
 }
 
-/* The sheet's `SheetField` heading sits 2px off its list — the mono micro step above is small
- * enough that the default flow gap read as part of the first row. */
-.sheetField > .sheetLabel {
-  margin-bottom: 2px;
-}
-
-/* 44px rows — the one sheet dimension C15 pins. */
-.sheetRow {
-  display: flex;
-  align-items: center;
-  gap: var(--mantine-spacing-xs, 0.625rem);
-  min-height: var(--vx-space-sheet-row-height, 2.75rem);
-  width: 100%;
-  border-bottom: 1px solid var(--vx-surface-hairline);
-}
-
-.sheetRow:last-child {
-  border-bottom: none;
-}
-
-/*
- * A 44px row is only a 44px TOUCH TARGET if the `<label>` fills it. Mantine centres a Radio/Checkbox
- * `body` in its root and the label line-height is ~20px, so without these the tappable strip is the
- * middle 20px of the row and the outer 12px top and bottom do nothing (C15's number, not delivered).
- * Passed through `classNames`, never as a global `.sheetRow label` selector — a descendant selector
- * here would also capture a nested control's own labels.
- */
-.sheetRowBody {
-  flex: 1;
-  align-items: center;
-  min-height: inherit;
-}
-
-.sheetRowLabel {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  min-height: inherit;
-}
-
 /* ── ControlGroup ─────────────────────────────────────────────────────────────────────────────── */
 
 /*
@@ -540,3 +370,156 @@
   max-width: 9rem;
   flex: 0 1 auto;
 }
+
+/* ── The facet list (MultiSelectFilter, `panel` + `sheet` surfaces) ──────────────────────────────── */
+
+/*
+ * Foundry's facet column (`docs/ASIDE-SPEC.md` §1): one 30px row per option, label left, an optional
+ * mono count and a proportional bar behind it, a check at the trailing edge when selected. The
+ * `sheet` surface renders the SAME list (`docs/CONTROLS-SPEC.md` §3: "sheet = panel rows inside a
+ * Drawer") — a set past `max` folds behind `Show N more` on both.
+ *
+ * The semantics are a hidden native `<input>` inside a `<label>` — not `role="checkbox"` on a div —
+ * so the arrow-key group behaviour, the form-association and the announced state come for free, and
+ * the `<label>` wrapping it makes the whole row the hit target rather than a 16px mark inside it.
+ */
+.facetList {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  border: none;
+  min-inline-size: 0;
+  min-width: 0;
+}
+
+.facetOption {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--vx-space-control-gap, 0.375rem);
+  width: 100%;
+  min-width: 0;
+  height: calc(var(--vx-space-control-height-ctl, 1.875rem) * var(--mantine-scale, 1));
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  text-align: start;
+  color: var(--vx-muted);
+  cursor: pointer;
+}
+
+.facetOption[data-selected] {
+  color: var(--vx-ink);
+}
+
+.facetOption[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.facetOption:has(.facetInput:focus-visible),
+.facetOption:focus-visible {
+  outline: 2px solid var(--vx-accent);
+  outline-offset: -2px;
+  border-radius: var(--vx-radius-ctrl);
+}
+
+/*
+ * The proportional bar. It is BEHIND the row's text, not a column beside it — a bar in its own
+ * column costs the label a third of a 300px row, and the quantity being compared is the row itself.
+ * The width arrives as `--facet-fill` (an inline custom property, the one dynamic number here), so
+ * this rule owns every other dimension and the tint.
+ *
+ * Accent at low alpha, never a fill: `--vx-accent-fill` is a control's surface, and a row of eight
+ * of them would read as eight selected options.
+ */
+.facetBar {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: var(--facet-fill, 0%);
+  border-radius: var(--vx-radius-ctrl);
+  background: color-mix(in srgb, var(--vx-accent) 12%, transparent);
+  pointer-events: none;
+}
+
+/* Every painted child sits above the bar. `position: relative` is all that takes — they are in the
+ * same stacking context and come later in the DOM. */
+.facetLabel,
+.facetCount,
+.facetCheck {
+  position: relative;
+}
+
+.facetLabel {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--vx-text-sm);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.facetCount {
+  flex: none;
+  font-family: var(--basalt-font-mono);
+  font-size: var(--vx-text-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--vx-faint);
+}
+
+.facetCheck {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  color: var(--vx-accent);
+}
+
+/*
+ * The visible checkbox box a facet row draws when it carries no count/bar — the ONLY affordance an
+ * unselected, uncounted row had otherwise was none at all (`.facetCheck` above paints only once
+ * selected). Its own component (`Checkbox.Indicator`) reads `--checkbox-size-ctl` off the `size`
+ * prop, so no dimension is declared here; `flex: none` alone keeps it from being squeezed by the
+ * label's `flex: 1`.
+ */
+.facetCheckbox {
+  flex: none;
+}
+
+.facetInput {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* `Show N more` — the list's last row, same height and inset as an option so the column keeps its
+ * rhythm, but muted and mono-free because it is a disclosure and not a value. */
+.facetMore {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: calc(var(--vx-space-control-height-ctl, 1.875rem) * var(--mantine-scale, 1));
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  text-align: start;
+  font-size: var(--vx-text-xs);
+  color: var(--vx-faint);
+  cursor: pointer;
+}
+
+.facetMore:hover,
+.facetMore:focus-visible {
+  color: var(--vx-ink);
+}

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

@@ -18,18 +18,16 @@ declare const classes: {
   readonly sheetHeader: string
   readonly sheetTitle: string
   readonly sheetTitleText: string
-  readonly sheetField: string
-  readonly sheetList: string
-  readonly sheetOption: string
-  readonly sheetDisclosureBody: string
-  readonly sheetOptionInput: string
-  readonly sheetOptionLabel: string
-  readonly sheetOptionCheck: string
-  readonly sheetLabel: string
   readonly groupLabel: string
-  readonly sheetRow: string
-  readonly sheetRowBody: string
-  readonly sheetRowLabel: string
   readonly phoneSelect: string
+  readonly facetList: string
+  readonly facetOption: string
+  readonly facetBar: string
+  readonly facetLabel: string
+  readonly facetCount: string
+  readonly facetCheck: string
+  readonly facetCheckbox: string
+  readonly facetInput: string
+  readonly facetMore: string
 }
 export default classes

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { BasaltProps } from '../common/props.js';
 import type { FieldOption } from '../state.js';
 import type { FilterOption } from './select-filter.js';
 /**
@@ -16,7 +17,7 @@ export type ChoiceHandle<T extends string> = {
      * of the fallback back over it. See `useFilterRegistration`'s doc for why. */
     clear(): void;
 };
-export type EnumFilterProps<T extends string> = {
+export type EnumFilterProps<T extends string> = BasaltProps & {
     readonly field: ChoiceHandle<T>;
     readonly label: string;
     readonly icon?: ReactNode;
@@ -35,5 +36,5 @@ export type EnumFilterProps<T extends string> = {
      */
     readonly numeric?: boolean | undefined;
 };
-export declare function EnumFilter<T extends string>({ field, label, icon, clearable, numeric, options: optionsProp, }: EnumFilterProps<T>): ReactNode;
+export declare function EnumFilter<T extends string>({ field, label, icon, clearable, numeric, options: optionsProp, className, style, }: EnumFilterProps<T>): ReactNode;
 //# sourceMappingURL=enum-filter.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"enum-filter.d.ts","sourceRoot":"","sources":["../../src/controls/enum-filter.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAK3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI;IAC3C,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;IACpB,QAAQ,CAAC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAA;IACxC,GAAG,IAAI,SAAS,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,CAAA;IACtC,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,OAAO,CAAA;IACxB;kFAC8E;IAC9E,KAAK,IAAI,IAAI,CAAA;CACd,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,IAAI;IAC9C,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB,gGAAgG;IAChG,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,YAAY,EAAE,GAAG,SAAS,CAAA;IACtD;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CACvC,CAAA;AAED,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EAC3C,KAAK,EACL,KAAK,EACL,IAAI,EACJ,SAAS,EACT,OAAO,EACP,OAAO,EAAE,WAAW,GACrB,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,CAyFhC"}
+{"version":3,"file":"enum-filter.d.ts","sourceRoot":"","sources":["../../src/controls/enum-filter.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAM3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI;IAC3C,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;IACpB,QAAQ,CAAC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAA;IACxC,GAAG,IAAI,SAAS,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,CAAA;IACtC,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,OAAO,CAAA;IACxB;kFAC8E;IAC9E,KAAK,IAAI,IAAI,CAAA;CACd,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,IAAI,WAAW,GAAG;IAC5D,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB,gGAAgG;IAChG,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,YAAY,EAAE,GAAG,SAAS,CAAA;IACtD;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CACvC,CAAA;AAED,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EAC3C,KAAK,EACL,KAAK,EACL,IAAI,EACJ,SAAS,EACT,OAAO,EACP,OAAO,EAAE,WAAW,EACpB,SAAS,EACT,KAAK,GACN,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,CAqGhC"}

package/dist/controls/enum-filter.js

@@ -3,14 +3,17 @@ import { Button, Radio, Stack } from "@mantine/core";
 import classes from "./controls.module.css";
 import { useFilterRegistration, useFilterSurface } from "./filter-context.js";
 import { FilterPill } from "./filter-pill.js";
-import { SheetField, SheetOptionList, useControlName } from "./filter-sheet.js";
+import { useControlName } from "./filter-sheet.js";
+import { PanelChoice, PanelRow } from "./panel-row.js";
 function EnumFilter({
   field,
   label,
   icon,
   clearable,
   numeric,
-  options: optionsProp
+  options: optionsProp,
+  className,
+  style
 }) {
   const [value, setValue] = field.use();
   const surface = useFilterSurface();
@@ -21,20 +24,30 @@ function EnumFilter({
   const options = optionsProp ?? field.options;
   const selected = options.find((option) => option.value === value);
   const inSheet = surface === "sheet";
-  const { labelId } = useControlName(label, inSheet);
-  if (inSheet) {
-    return /* @__PURE__ */ jsx(SheetField, { label, labelId, children: /* @__PURE__ */ jsx(
-      SheetOptionList,
+  const inPanel = surface === "panel";
+  const { labelId, nameProps } = useControlName(label, inSheet || inPanel);
+  if (inSheet || inPanel) {
+    return /* @__PURE__ */ jsx(
+      PanelRow,
       {
-        mode: "single",
+        label,
         labelId,
-        selected: [value],
-        options,
-        onToggle: (next) => {
-          setValue(next);
-        }
+        ...className !== void 0 && { className },
+        ...style !== void 0 && { style },
+        children: /* @__PURE__ */ jsx(
+          PanelChoice,
+          {
+            nameProps,
+            value,
+            options,
+            ...numeric === true && { numeric: true },
+            onChange: (next) => {
+              setValue(next);
+            }
+          }
+        )
       }
-    ) });
+    );
   }
   const body = (
     // Mantine's OWN `label` prop, not an `aria-label`: `Radio.Group` overwrites both `aria-label`
@@ -84,6 +97,8 @@ function EnumFilter({
       active: !isDefault,
       ...numeric === true && { numeric: true },
       ...icon !== void 0 && { icon },
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style },
       children: /* @__PURE__ */ jsx("div", { className: classes.optionList, children: body })
     }
   );

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

@@ -1,12 +1,15 @@
 import type { ReactNode } from 'react';
-/** Which form a control renders. Provided by `FilterSet`; `'pill'` when there is no `FilterSet`. */
-export type FilterSurface = 'pill' | 'sheet';
+/**
+ * Which form a control renders. Provided by `FilterSet` (`'pill'` / `'sheet'`) and by `PageAside`
+ * (`'panel'`); `'pill'` when there is neither.
+ */
+export type FilterSurface = 'pill' | 'sheet' | 'panel';
 /**
  * The form this control should render — the ONE thing a control branches on.
  *
  * @example
  * const surface = useFilterSurface()
- * if (surface === 'sheet') return <SheetField label={label}>…</SheetField>
+ * if (surface === 'sheet' || surface === 'panel') return <PanelRow label={label}>…</PanelRow>
  */
 export declare function useFilterSurface(): FilterSurface;
 /** What one filter reports about itself, keyed internally by a `useId()` per mount. */
@@ -22,7 +25,8 @@ type FilterRegistry = {
 };
 export type FilterSetScopeProps = {
     readonly surface: FilterSurface;
-    /** `null` on a second copy of the same children (the fold dropdown, the sheet). */
+    /** `null` on a second copy of the same children (the fold dropdown, the sheet) and on a surface
+     * that owns no census at all (the aside panel — it has no `Filters (n)` and no `Reset all`). */
     readonly registry: FilterRegistry | null;
     readonly children: ReactNode;
 };

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":"AA4BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,oGAAoG;AACpG,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAA;AAI5C;;;;;;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,mFAAmF;IACnF,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;;;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-pill.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
-export type FilterPillProps = {
+import type { BasaltProps } from '../common/props.js';
+export type FilterPillProps = BasaltProps & {
     readonly label: string;
     readonly icon?: ReactNode;
     /** Non-default → accent-tinted border. Derived from `field.isDefault(value)`, never hand-set. */
@@ -18,11 +19,10 @@ export type FilterPillProps = {
      * where `aria-expanded` (which Mantine's `Popover.Target` supplies) is the correct state.
      */
     readonly pressed?: boolean;
-    readonly className?: string;
     /** Set by `FilterSet` on its own fold/sheet pills; a filter never passes either of these. */
     readonly hideGlyph?: boolean;
     /** `data-shown` — the CSS hook that reveals the `+N` fold pill once folding is needed. */
     readonly shown?: boolean;
 };
-export declare function FilterPill({ label, icon, active, numeric, children, onClick, ariaLabel, pressed, className, hideGlyph, shown, }: FilterPillProps): ReactNode;
+export declare function FilterPill({ label, icon, active, numeric, children, onClick, ariaLabel, pressed, className, style, hideGlyph, shown, }: FilterPillProps): ReactNode;
 //# sourceMappingURL=filter-pill.d.ts.map

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;AAKtC,MAAM,MAAM,eAAe,GAAG;IAC5B,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,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,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,SAAS,EACT,KAAK,GACN,EAAE,eAAe,GAAG,SAAS,CA2D7B"}
+{"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"}

package/dist/controls/filter-pill.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, Popover } from "@mantine/core";
 import { useState } from "react";
+import { cx } from "../common/props.js";
 import { IconSlot } from "../theme/icon-slot.js";
 import classes from "./controls.module.css";
 import { UpDownGlyph } from "./glyphs.js";
@@ -14,6 +15,7 @@ function FilterPill({
   ariaLabel,
   pressed,
   className,
+  style,
   hideGlyph,
   shown
 }) {
@@ -23,8 +25,9 @@ function FilterPill({
     {
       variant: "default",
       size: "ctl",
-      className: className === void 0 ? classes.pill : `${classes.pill} ${className}`,
+      className: cx(classes.pill, className),
       classNames: { label: classes.pillLabel },
+      ...style !== void 0 && { style },
       ...active === true && { "data-active": true },
       ...numeric === true && { "data-numeric": true },
       ...ariaLabel !== void 0 && { "aria-label": ariaLabel },

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

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
-export type FilterSetProps = {
+import type { BasaltProps, SlotStylesProps } from '../common/props.js';
+export type FilterSetProps = BasaltProps & SlotStylesProps<'root' | 'sheet'> & {
     readonly children: ReactNode;
     /**
      * How many children stay inline pills below `sm`. The rest are reachable only through the
@@ -9,5 +10,5 @@ export type FilterSetProps = {
      */
     readonly inline?: number;
 };
-export declare function FilterSet({ children, inline }: FilterSetProps): ReactNode;
+export declare function FilterSet({ children, inline, className, style, classNames, }: FilterSetProps): ReactNode;
 //# sourceMappingURL=filter-set.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"filter-set.d.ts","sourceRoot":"","sources":["../../src/controls/filter-set.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,OAAO,CAAA;AAYjD,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;IAC5B;;;;;OAKG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,MAAU,EAAE,EAAE,cAAc,GAAG,SAAS,CAoF7E"}
+{"version":3,"file":"filter-set.d.ts","sourceRoot":"","sources":["../../src/controls/filter-set.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAYnE,MAAM,MAAM,cAAc,GAAG,WAAW,GACtC,eAAe,CAAC,MAAM,GAAG,OAAO,CAAC,GAAG;IAClC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;IAC5B;;;;;OAKG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAEH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,MAAU,EACV,SAAS,EACT,KAAK,EACL,UAAU,GACX,EAAE,cAAc,GAAG,SAAS,CA8F5B"}