basalt-ui 1.27.0 → 1.29.0

package/dist/controls/filter-set.js

@@ -1,5 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children, isValidElement, useCallback, useEffect, useRef, useState } from "react";
+import { cx } from "../common/props.js";
 import classes from "./controls.module.css";
 import { FilterSetScope, useFilterCensus } from "./filter-context.js";
 import { FilterPill } from "./filter-pill.js";
@@ -7,7 +8,13 @@ import { FilterSheet } from "./filter-sheet.js";
 import { FunnelGlyph } from "./glyphs.js";
 const FOLD_PILL_WIDTH = 52;
 const FALLBACK_GAP = 6;
-function FilterSet({ children, inline = 1 }) {
+function FilterSet({
+  children,
+  inline = 1,
+  className,
+  style,
+  classNames
+}) {
   const items = Children.toArray(children);
   const { registry, activeCount, resetAll } = useFilterCensus();
   const [sheetOpened, setSheetOpened] = useState(false);
@@ -23,46 +30,64 @@ function FilterSet({ children, inline = 1 }) {
   const folded = items.slice(fit);
   const anyFoldedOnMobile = items.length > inline;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: classes.pillRow, ref: rowRef, "data-filter-row": true, children: [
-      /* @__PURE__ */ jsx(FilterSetScope, { surface: "pill", registry, children: items.map((child, index) => (
-        // `Children.toArray` already stamped a stable `.0`/`.1`-style key on every child, so
-        // the slot wrapper reuses it rather than inventing an array-index key.
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: classes.pillSlot,
-            "data-filter-slot": true,
-            ...index < inline && { "data-inline": true },
-            ...index >= fit && { "data-folded": true },
-            children: child
-          },
-          slotKey(child, index)
-        )
-      )) }),
-      /* @__PURE__ */ jsx(
-        FilterPill,
-        {
-          label: `+${folded.length}`,
-          ariaLabel: `${folded.length} more filters`,
-          className: classes.foldPill,
-          hideGlyph: true,
-          shown: folded.length > 0,
-          children: /* @__PURE__ */ jsx("div", { className: classes.optionList, children: /* @__PURE__ */ jsx(FilterSetScope, { surface: "sheet", registry: null, children: folded }) })
-        }
-      ),
-      anyFoldedOnMobile && /* @__PURE__ */ jsx(
-        FilterPill,
-        {
-          label: activeCount > 0 ? `Filters (${activeCount})` : "Filters",
-          active: activeCount > 0,
-          icon: /* @__PURE__ */ jsx(FunnelGlyph, {}),
-          className: classes.sheetPill,
-          hideGlyph: true,
-          onClick: openSheet
-        }
-      )
-    ] }),
-    anyFoldedOnMobile && /* @__PURE__ */ jsx(FilterSheet, { opened: sheetOpened, onClose: closeSheet, onResetAll: resetAll, children: /* @__PURE__ */ jsx(FilterSetScope, { surface: "sheet", registry: null, children: items }) })
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(classes.pillRow, classNames?.root, className),
+        ref: rowRef,
+        "data-filter-row": true,
+        ...style !== void 0 && { style },
+        children: [
+          /* @__PURE__ */ jsx(FilterSetScope, { surface: "pill", registry, children: items.map((child, index) => (
+            // `Children.toArray` already stamped a stable `.0`/`.1`-style key on every child, so
+            // the slot wrapper reuses it rather than inventing an array-index key.
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: classes.pillSlot,
+                "data-filter-slot": true,
+                ...index < inline && { "data-inline": true },
+                ...index >= fit && { "data-folded": true },
+                children: child
+              },
+              slotKey(child, index)
+            )
+          )) }),
+          /* @__PURE__ */ jsx(
+            FilterPill,
+            {
+              label: `+${folded.length}`,
+              ariaLabel: `${folded.length} more filters`,
+              className: classes.foldPill,
+              hideGlyph: true,
+              shown: folded.length > 0,
+              children: /* @__PURE__ */ jsx("div", { className: classes.optionList, children: /* @__PURE__ */ jsx(FilterSetScope, { surface: "sheet", registry: null, children: folded }) })
+            }
+          ),
+          anyFoldedOnMobile && /* @__PURE__ */ jsx(
+            FilterPill,
+            {
+              label: activeCount > 0 ? `Filters (${activeCount})` : "Filters",
+              active: activeCount > 0,
+              icon: /* @__PURE__ */ jsx(FunnelGlyph, {}),
+              className: classes.sheetPill,
+              hideGlyph: true,
+              onClick: openSheet
+            }
+          )
+        ]
+      }
+    ),
+    anyFoldedOnMobile && /* @__PURE__ */ jsx(
+      FilterSheet,
+      {
+        opened: sheetOpened,
+        onClose: closeSheet,
+        onResetAll: resetAll,
+        ...classNames?.sheet !== void 0 && { className: classNames.sheet },
+        children: /* @__PURE__ */ jsx(FilterSetScope, { surface: "sheet", registry: null, children: items })
+      }
+    )
   ] });
 }
 function useOverflowFit(rowRef, count) {

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

@@ -1,8 +1,14 @@
 import type { ReactNode } from 'react';
-export type FilterSheetProps = {
+import type { BasaltProps } from '../common/props.js';
+export type FilterSheetProps = BasaltProps & {
     readonly opened: boolean;
     readonly onClose: () => void;
-    readonly onResetAll: () => void;
+    /**
+     * Clears every registered filter. OMITTED on a sheet with no census behind it — the aside's
+     * mobile projection (`docs/ASIDE-SPEC.md` §0) mounts its children under a `null` registry, so
+     * there is nothing to reset and a button that resets nothing is worse than no button.
+     */
+    readonly onResetAll?: () => void;
     readonly title?: string;
     readonly children: ReactNode;
 };
@@ -15,82 +21,32 @@ export type FilterSheetProps = {
  * It also removes the sheet's last horizontal rule — a footer needs separating from the rows above
  * it, a header does not (`docs/CONTROLS-SPEC.md` §2.1: hairlines between OPTION rows only).
  */
-export declare function FilterSheet({ opened, onClose, onResetAll, title, children, }: FilterSheetProps): ReactNode;
-/** One row of a {@link SheetOptionList}. */
-export type SheetOption = {
-    readonly value: string;
-    readonly label: string;
-    readonly disabled?: boolean;
-};
-export type SheetOptionListProps = {
-    /** `single` renders radio semantics, `multi` checkbox semantics. */
-    readonly mode: 'single' | 'multi';
-    /** The selected value(s) — a one-element array in `single` mode. */
-    readonly selected: readonly string[];
-    readonly options: readonly SheetOption[];
-    readonly onToggle: (value: string) => void;
-    /** The `SheetField` heading this list is named by. */
-    readonly labelId: string;
-};
+export declare function FilterSheet({ opened, onClose, onResetAll, title, children, className, style, }: FilterSheetProps): ReactNode;
 /**
- * The sheet's ONE list form (`docs/CONTROLS-SPEC.md` §2.1): every option is a 44px full-width row,
- * label left, a check at the trailing edge when selected, a 1px hairline between rows and nowhere
- * else.
- *
- * **It replaced a `SegmentedControl` and a Mantine `Radio` list, for two different reasons.** The
- * range presets rendered as a `orientation="vertical"` SegmentedControl, which in a full-width sheet
- * is a stack of left-aligned labels inside a tinted track — it read as a broken control, not as a
- * choice, and it carried the track's own inset so it aligned with nothing else in the sheet. The
- * enum/multi filters rendered Mantine `Radio`/`Checkbox` rows, which put a 20px dot or box in the
- * leading position of every row; at six filters the sheet was a column of controls rather than a
- * column of options, and the leading marks pushed every label off the sheet's own text column.
- *
- * The semantics are a real native `<input>` inside the row's `<label>`, visually hidden — not
- * `role="radio"` on a div. A hidden native input keeps the arrow-key group behaviour, the
- * form-association and the announced state for free, and `<label>` wrapping it makes the whole 44px
- * box the hit target (C15) without a single `onClick` on a non-interactive element.
+ * The selected-row mark — 16px, drawn at the row's trailing edge (`docs/CONTROLS-SPEC.md` §2.1).
+ * Exported from the MODULE, not from `./index.ts`: the panel surface's facet list draws the same
+ * mark at the same edge, and two hand-drawn checks would drift.
  */
-export declare function SheetOptionList({ mode, selected, options, onToggle, labelId, }: SheetOptionListProps): ReactNode;
-export type SheetDisclosureProps = {
-    readonly label: string;
-    readonly expanded: boolean;
-    readonly onToggle: () => void;
-    readonly children: ReactNode;
-};
-/**
- * A 44px row that expands its own body inline — the sheet's answer to a control too large to sit in
- * the list unconditionally (`RangeFilter`'s custom date picker, which is a whole calendar). Same row
- * geometry as a {@link SheetOptionList} option, so the disclosure reads as the list's last entry
- * rather than as a different kind of thing.
- */
-export declare function SheetDisclosure({ label, expanded, onToggle, children, }: SheetDisclosureProps): ReactNode;
-export type SheetFieldProps = {
-    readonly label: string;
-    /** Stamped on the heading so a control can point `aria-labelledby` at it — see `useControlName`. */
-    readonly labelId?: string;
-    readonly children: ReactNode;
-};
-/** A labelled block inside the sheet — the sheet form's outer shell for every control. */
-export declare function SheetField({ label, labelId, children }: SheetFieldProps): ReactNode;
+export declare function CheckGlyph(): ReactNode;
 /**
  * Names a control that has no VISIBLE Mantine `label`, and does it differently per surface — which
  * is the whole reason this is one helper instead of an `aria-label` sprinkled per call site.
  *
- * In the SHEET the visible `SheetField` heading is right there, so the control points at it
- * (`aria-labelledby`) and the heading stops being decoration. In the PILL surface there is no
+ * In the SHEET and the PANEL the visible `PanelRow` heading is right there, so the control points
+ * at it (`aria-labelledby`) and the heading stops being decoration. In the PILL surface there is no
  * visible name to point at — the pill text is the VALUE (`EUR`, `30d`, `3 channels`) — so the
  * control carries the filter's own name instead. Either way the announced name is what is being
  * filtered, not what it currently holds.
  *
- * The id is generated by the CONTROL, not by `SheetField`, because the control renders its own
- * `SheetField`: an id published downward through context could never reach the sibling that needs it.
+ * The id is generated by the CONTROL, not by `PanelRow`, because the control renders its own
+ * `PanelRow`: an id published downward through context could never reach the sibling that needs it.
  *
  * @example
- * const { labelId, nameProps } = useControlName(label, inSheet)
+ * const { labelId, nameProps } = useControlName(label, inSheet || inPanel)
  * <Radio.Group {...nameProps} …/>
- * // and, in the sheet branch: <SheetField label={label} labelId={labelId}>…</SheetField>
+ * // and, in the sheet/panel branch: <PanelRow label={label} labelId={labelId}>…</PanelRow>
  */
-export declare function useControlName(label: string, inSheet: boolean): {
+export declare function useControlName(label: string, named: boolean): {
     labelId: string;
     nameProps: {
         'aria-labelledby': string;
@@ -98,20 +54,4 @@ export declare function useControlName(label: string, inSheet: boolean): {
         'aria-label': string;
     };
 };
-export type SheetRowProps = {
-    readonly children: ReactNode;
-};
-/** One 44px full-width row (`--vx-space-sheet-row-height`). */
-export declare function SheetRow({ children }: SheetRowProps): ReactNode;
-/** The class every sheet-form list item shares, for controls that render their own row element. */
-export declare const sheetRowClass: string;
-/**
- * `classNames` for a Radio/Checkbox/Switch rendered as a sheet row — stretches its `body` and
- * `<label>` across the full 44px so the whole row is the touch target, not the middle 20px of it.
- */
-export declare const sheetRowClassNames: {
-    readonly root: string;
-    readonly body: string;
-    readonly label: string;
-};
 //# sourceMappingURL=filter-sheet.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"filter-sheet.d.ts","sourceRoot":"","sources":["../../src/controls/filter-sheet.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"filter-sheet.d.ts","sourceRoot":"","sources":["../../src/controls/filter-sheet.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGlD,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAA;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;CAC7B,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,OAAO,EACP,UAAU,EACV,KAAiB,EACjB,QAAQ,EACR,SAAS,EACT,KAAK,GACN,EAAE,gBAAgB,GAAG,SAAS,CAwB9B;AAED;;;;GAIG;AACH,wBAAgB,UAAU,IAAI,SAAS,CAgBtC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,OAAO,GACb;IACD,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE;QAAE,iBAAiB,EAAE,MAAM,CAAA;KAAE,GAAG;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,CAAA;CACpE,CAMA"}

package/dist/controls/filter-sheet.js

@@ -7,7 +7,9 @@ function FilterSheet({
   onClose,
   onResetAll,
   title = "Filters",
-  children
+  children,
+  className,
+  style
 }) {
   return /* @__PURE__ */ jsx(
     Drawer,
@@ -17,9 +19,11 @@ function FilterSheet({
       position: "bottom",
       radius: "sm",
       classNames: { header: classes.sheetHeader, title: classes.sheetTitle },
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style },
       title: /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("span", { className: classes.sheetTitleText, children: title }),
-        /* @__PURE__ */ jsx(Button, { variant: "subtle", size: "ctl", onClick: onResetAll, children: "Reset all" })
+        onResetAll !== void 0 && /* @__PURE__ */ jsx(Button, { variant: "subtle", size: "ctl", onClick: onResetAll, children: "Reset all" })
       ] }),
       children: /* @__PURE__ */ jsx("div", { className: classes.sheetBody, children })
     }
@@ -42,105 +46,15 @@ function CheckGlyph() {
     }
   );
 }
-function SheetOptionList({
-  mode,
-  selected,
-  options,
-  onToggle,
-  labelId
-}) {
-  const name = useId();
-  return (
-    // A real `<fieldset>`, not `role="group"` on a div — the native element carries the grouping
-    // semantics and gets its own box reset in the module (`.sheetList`). `aria-labelledby` points at
-    // the `SheetField` heading rather than a `<legend>`: the heading is already visible above the
-    // list, and a legend would render it a second time.
-    /* @__PURE__ */ jsx("fieldset", { className: classes.sheetList, "aria-labelledby": labelId, children: options.map((option) => {
-      const isSelected = selected.includes(option.value);
-      return /* @__PURE__ */ jsxs(
-        "label",
-        {
-          className: classes.sheetOption,
-          ...isSelected && { "data-selected": true },
-          ...option.disabled === true && { "data-disabled": true },
-          children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                className: classes.sheetOptionInput,
-                type: mode === "single" ? "radio" : "checkbox",
-                name,
-                value: option.value,
-                checked: isSelected,
-                disabled: option.disabled === true,
-                "aria-label": option.label,
-                onChange: () => {
-                  onToggle(option.value);
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: classes.sheetOptionLabel, children: option.label }),
-            isSelected && /* @__PURE__ */ jsx("span", { className: classes.sheetOptionCheck, "aria-hidden": true, children: /* @__PURE__ */ jsx(CheckGlyph, {}) })
-          ]
-        },
-        option.value
-      );
-    }) })
-  );
-}
-function SheetDisclosure({
-  label,
-  expanded,
-  onToggle,
-  children
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: classes.sheetList, children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: classes.sheetOption,
-        "aria-expanded": expanded,
-        ...expanded && { "data-selected": true },
-        onClick: onToggle,
-        children: [
-          /* @__PURE__ */ jsx("span", { className: classes.sheetOptionLabel, children: label }),
-          expanded && /* @__PURE__ */ jsx("span", { className: classes.sheetOptionCheck, "aria-hidden": true, children: /* @__PURE__ */ jsx(CheckGlyph, {}) })
-        ]
-      }
-    ),
-    expanded && /* @__PURE__ */ jsx("div", { className: classes.sheetDisclosureBody, children })
-  ] });
-}
-function SheetField({ label, labelId, children }) {
-  return /* @__PURE__ */ jsxs("div", { className: classes.sheetField, children: [
-    /* @__PURE__ */ jsx("span", { className: classes.sheetLabel, ...labelId !== void 0 && { id: labelId }, children: label }),
-    children
-  ] });
-}
-function useControlName(label, inSheet) {
+function useControlName(label, named) {
   const labelId = useId();
   return {
     labelId,
-    nameProps: inSheet ? { "aria-labelledby": labelId } : { "aria-label": label }
+    nameProps: named ? { "aria-labelledby": labelId } : { "aria-label": label }
   };
 }
-function SheetRow({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: classes.sheetRow, children });
-}
-const sheetRowClass = classes.sheetRow;
-const sheetRowClassNames = {
-  root: classes.sheetRow,
-  body: classes.sheetRowBody,
-  label: classes.sheetRowLabel
-};
 export {
+  CheckGlyph,
   FilterSheet,
-  SheetDisclosure,
-  SheetField,
-  SheetOptionList,
-  SheetRow,
-  sheetRowClass,
-  sheetRowClassNames,
   useControlName
 };

package/dist/controls/index.d.ts

@@ -17,4 +17,6 @@ export { NumberFilter, type NumberFilterOption, type NumberFilterProps } from '.
 export { SearchFilter, type SearchFilterProps } from './search-filter.js';
 export { ToggleFilter, type ToggleFilterProps } from './toggle-filter.js';
 export { ViewTabs, type ViewTabsOption, type ViewTabsProps } from './view-tabs.js';
+export { PanelRow, type PanelRowProps } from './panel-row.js';
+export { SliderControl, type SliderControlProps } from './slider-control.js';
 //# sourceMappingURL=index.d.ts.map

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"}
+{"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"}

package/dist/controls/index.js

@@ -22,6 +22,8 @@ import { NumberFilter } from "./number-filter.js";
 import { SearchFilter } from "./search-filter.js";
 import { ToggleFilter } from "./toggle-filter.js";
 import { ViewTabs } from "./view-tabs.js";
+import { PanelRow } from "./panel-row.js";
+import { SliderControl } from "./slider-control.js";
 export {
   AGE_REFRESH_MS,
   ActionGroup,
@@ -34,9 +36,11 @@ export {
   MultiSelectFilter,
   NumberFilter,
   OverflowMenu,
+  PanelRow,
   RangeFilter,
   SearchFilter,
   SelectFilter,
+  SliderControl,
   SyncButton,
   ToggleFilter,
   ViewTabs,

package/dist/controls/multi-select-filter.d.ts

@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react';
+import type { BasaltProps } from '../common/props.js';
 import type { FieldHandle, MultiField } from '../state.js';
 import type { FilterOption } from './select-filter.js';
-export type MultiSelectFilterProps<T extends string> = {
+export type MultiSelectFilterProps<T extends string> = BasaltProps & {
     readonly field: FieldHandle<MultiField<T>>;
     readonly label: string;
     readonly icon?: ReactNode;
@@ -18,6 +19,21 @@ export type MultiSelectFilterProps<T extends string> = {
      * string-field shape to make it required.
      */
     readonly options?: readonly FilterOption[];
+    /**
+     * Per-option counts, rendered on the `panel` surface as a mono number plus a bar proportional to
+     * the LARGEST count in the map — the Foundry facet column (`docs/ASIDE-SPEC.md` §1). A missing
+     * key is a row with no count and no bar, not a zero.
+     *
+     * Ignored on the pill and sheet surfaces, where there is no room for a second data channel: put
+     * the number in the label there (`options`).
+     */
+    readonly counts?: Record<string, number>;
+    /**
+     * How many facet rows the `panel` surface shows before the rest fold behind a `Show N more` row.
+     *
+     * @default 6
+     */
+    readonly max?: number;
 };
-export declare function MultiSelectFilter<T extends string>({ field, label, icon, noun, options: optionsProp, }: MultiSelectFilterProps<T>): ReactNode;
+export declare function MultiSelectFilter<T extends string>(props: MultiSelectFilterProps<T>): ReactNode;
 //# sourceMappingURL=multi-select-filter.d.ts.map

package/dist/controls/multi-select-filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select-filter.d.ts","sourceRoot":"","sources":["../../src/controls/multi-select-filter.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAMnD,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,MAAM,IAAI;IACrD,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA;IAC1C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB;;;;OAIG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB;;;;;OAKG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;CAC3C,CAAA;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAAE,EAClD,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EAAE,WAAW,GACrB,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,SAAS,CAsFvC"}
+{"version":3,"file":"multi-select-filter.d.ts","sourceRoot":"","sources":["../../src/controls/multi-select-filter.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAElD,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAWnD,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,MAAM,IAAI,WAAW,GAAG;IACnE,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA;IAC1C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB;;;;OAIG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB;;;;;OAKG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;IAC1C;;;;;;;OAOG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxC;;;;OAIG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,SAAS,CAyG/F"}

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

@@ -1,16 +1,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 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 { FilterPill } from "./filter-pill.js";
-import { SheetField, SheetOptionList, useControlName } from "./filter-sheet.js";
-function MultiSelectFilter({
-  field,
-  label,
-  icon,
-  noun,
-  options: optionsProp
-}) {
+import { CheckGlyph, useControlName } from "./filter-sheet.js";
+import { PanelRow } from "./panel-row.js";
+const PANEL_FACET_MAX = 6;
+function MultiSelectFilter(props) {
+  assertRequiredProps("MultiSelectFilter", props, ["field"], {
+    field: "bind it to a store field (`store.field.<name>`), never a value/onChange pair."
+  });
+  const { field, label, icon, noun, counts, max, options: optionsProp, className, style } = props;
   const [value, setValue] = field.use();
   const surface = useFilterSurface();
   const isDefault = field.isDefault(value);
@@ -19,22 +21,34 @@ function MultiSelectFilter({
   });
   const options = optionsProp ?? field.options;
   const inSheet = surface === "sheet";
+  const inPanel = surface === "panel";
   const carriesInformation = value.length > 0 && value.length < options.length;
-  const { labelId } = useControlName(label, inSheet);
-  if (inSheet) {
-    return /* @__PURE__ */ jsx(SheetField, { label, labelId, children: /* @__PURE__ */ jsx(
-      SheetOptionList,
+  const { labelId } = useControlName(label, inSheet || inPanel);
+  const toggle = (next) => {
+    const has = value.includes(next);
+    setValue(has ? value.filter((v) => v !== next) : [...value, next]);
+  };
+  if (inSheet || inPanel) {
+    return /* @__PURE__ */ jsx(
+      PanelRow,
       {
-        mode: "multi",
+        label,
         labelId,
-        selected: value,
-        options,
-        onToggle: (next) => {
-          const has = value.includes(next);
-          setValue(has ? value.filter((v) => v !== next) : [...value, next]);
-        }
+        ...className !== void 0 && { className },
+        ...style !== void 0 && { style },
+        children: /* @__PURE__ */ jsx(
+          FacetList,
+          {
+            labelId,
+            options,
+            selected: value,
+            max: max ?? PANEL_FACET_MAX,
+            onToggle: toggle,
+            ...counts !== void 0 && { counts }
+          }
+        )
       }
-    ) });
+    );
   }
   const body = (
     // Mantine's own `label`, for the same reason `enum-filter.tsx` uses it — `Checkbox.Group`
@@ -80,10 +94,98 @@ function MultiSelectFilter({
       label: carriesInformation ? `${value.length} ${noun ?? label.toLowerCase()}` : label,
       active: !isDefault,
       ...icon !== void 0 && { icon },
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style },
       children: /* @__PURE__ */ jsx("div", { className: classes.optionList, children: body })
     }
   );
 }
+function FacetList({
+  labelId,
+  options,
+  selected,
+  counts,
+  max,
+  onToggle
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const shown = expanded ? options : options.slice(0, max);
+  const hidden = options.length - shown.length;
+  const peak = options.reduce((top, option) => Math.max(top, counts?.[option.value] ?? 0), 0);
+  return (
+    // A real `<fieldset>` named by the row's own label — the native element carries the grouping
+    // semantics, and the heading is already visible.
+    /* @__PURE__ */ jsxs("fieldset", { className: classes.facetList, "aria-labelledby": labelId, children: [
+      shown.map((option) => {
+        const isSelected = selected.includes(option.value);
+        const count = counts?.[option.value];
+        return /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: classes.facetOption,
+            ...isSelected && { "data-selected": true },
+            ...option.disabled === true && { "data-disabled": true },
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  className: classes.facetInput,
+                  type: "checkbox",
+                  value: option.value,
+                  checked: isSelected,
+                  disabled: option.disabled === true,
+                  "aria-label": option.label,
+                  onChange: () => {
+                    onToggle(option.value);
+                  }
+                }
+              ),
+              count === void 0 ? (
+                // No count/bar on this row — without a visible box, an unselected row was plain
+                // text with no affordance that it toggles at all (only a checkmark appeared, and
+                // only once selected). `size="ctl"` reads `--checkbox-size-ctl`
+                // (`theme/index.ts`'s `ctlSizeVars`), the same var every other home's `Checkbox`
+                // resolves through. Decorative — the real toggle semantics live on `.facetInput`.
+                /* @__PURE__ */ jsx(
+                  Checkbox.Indicator,
+                  {
+                    className: classes.facetCheckbox,
+                    size: "ctl",
+                    checked: isSelected,
+                    "aria-hidden": true,
+                    ...option.disabled === true && { disabled: true }
+                  }
+                )
+              ) : peak > 0 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: classes.facetBar,
+                  "aria-hidden": true,
+                  style: { "--facet-fill": `${count / peak * 100}%` }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: classes.facetLabel, children: option.label }),
+              count !== void 0 && /* @__PURE__ */ jsx("span", { className: classes.facetCount, children: count }),
+              count !== void 0 && isSelected && /* @__PURE__ */ jsx("span", { className: classes.facetCheck, "aria-hidden": true, children: /* @__PURE__ */ jsx(CheckGlyph, {}) })
+            ]
+          },
+          option.value
+        );
+      }),
+      hidden > 0 && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: classes.facetMore,
+          onClick: () => {
+            setExpanded(true);
+          },
+          children: `Show ${hidden} more`
+        }
+      )
+    ] })
+  );
+}
 export {
   MultiSelectFilter
 };