basalt-ui 1.27.0 → 1.29.0

package/src/controls/actions.tsx

@@ -13,9 +13,10 @@
  * media query, so there is no first-paint flash and no hook that re-renders on resize.
  */
 import { ActionIcon, Button, Group, Menu } from '@mantine/core'
-import { createContext, useContext, useEffect } from 'react'
+import { createContext, isValidElement, useContext, useEffect } from 'react'
 import type { ReactNode } from 'react'
-import type { NavAnchor } from '../nav/types'
+import type { BasaltProps } from '../common/props'
+import type { NavAnchor } from '../shell/nav-types'
 import type { AnyNavLink } from '../router-tanstack/nav'
 import { IconSlot } from '../theme/icon-slot'
 import { ControlGroup } from './control-group'
@@ -75,7 +76,7 @@ export type BarAction = BarActionItem | BarActionMenu | BarActionCustom
  * A home's `actions` slot. `primary` is SINGULAR by type — that is the whole enforcement of law
  * C6's "exactly one primary"; there is no runtime check because a second one cannot be written.
  */
-export type ActionGroupProps = {
+export type ActionGroupProps = BasaltProps & {
   primary?: BarAction
   secondary?: BarAction[]
 }
@@ -309,7 +310,7 @@ function menuRows(actions: readonly BarAction[]): ReactNode[] {
   })
 }
 
-export type OverflowMenuProps = {
+export type OverflowMenuProps = BasaltProps & {
   actions: readonly BarAction[]
   /**
    * `more` — the labelled desktop `More` button. `kebab` — the mobile ⋯ icon button.
@@ -329,6 +330,8 @@ export function OverflowMenu({
   actions,
   trigger = 'more',
   label = 'More',
+  className,
+  style,
 }: OverflowMenuProps): ReactNode {
   if (actions.length === 0) return null
   return (
@@ -352,7 +355,13 @@ export function OverflowMenu({
           // `size="ctl"` explicitly, not inherited: the kebab is rendered by `HeaderGlobalActions`
           // too, which is shell chrome rather than a home's slot, so there is no `CtlSlot` above it
           // there. 28px beside 30px buttons is the mismatch the header read as.
-          <ActionIcon variant="subtle" size="ctl" aria-label={label}>
+          <ActionIcon
+            variant="subtle"
+            size="ctl"
+            aria-label={label}
+            {...(className !== undefined && { className })}
+            {...(style !== undefined && { style })}
+          >
             <IconSlot className={classes.kebabIcon}>
               <DotsGlyph />
             </IconSlot>
@@ -365,6 +374,8 @@ export function OverflowMenu({
                 <ChevronGlyph />
               </IconSlot>
             }
+            {...(className !== undefined && { className })}
+            {...(style !== undefined && { style })}
           >
             {label}
           </Button>
@@ -390,8 +401,9 @@ type BarActionRowProps = ActionGroupProps & {
   host: 'page' | 'slot'
   /**
    * `desktop` renders the desktop variant only — `PageBar` row 2, whose items live in the row-1
-   * kebab below `sm` (spec §2.1: mobile row 2 is tabs + the first pill + `Filters (n)`, nothing
-   * else). @default 'both'
+   * kebab below `sm` (`docs/CONTROLS-SPEC.md` §2.1: mobile row 2 is two lines — tabs, then the
+   * first pill + `Filters (n)` + the aside's `Panel` pill; `docs/CONTROLS-SPEC.md` §2.1 still
+   * describes the pre-aside one-line form). @default 'both'
    */
   viewport?: 'both' | 'desktop'
   /**
@@ -461,6 +473,8 @@ export function BarActionRow({
   viewport = 'both',
   mobileOnly = [],
   syncNode,
+  className,
+  style,
 }: BarActionRowProps): ReactNode {
   const context = useContext(BarExtrasContext)
   // Read unconditionally (hook order), scoped afterwards — see this type's doc.
@@ -517,10 +531,20 @@ export function BarActionRow({
 
   const desktopLead = inline.length > 0 || desktopOverflow.length > 0 || syncNode === undefined
 
+  // The caller's `className`/`style` land on the ONE desktop group and the ONE mobile group. A
+  // `syncNode` splits the desktop row in two, and with nothing to lead with (no inline actions, no
+  // overflow) the lead group does not render at all — the primary-only group beside the sync button
+  // IS the desktop row then, so it takes them instead of dropping them. Never both groups: two nodes
+  // carrying one `style` is a layout the caller did not write.
+  const rootProps = {
+    ...(className !== undefined && { className }),
+    ...(style !== undefined && { style }),
+  }
+
   return (
     <>
       {hasDesktop && desktopLead && (
-        <Group gap={BAR_GAP} wrap="nowrap" visibleFrom="sm">
+        <Group gap={BAR_GAP} wrap="nowrap" visibleFrom="sm" {...rootProps}>
           {joinRuns(inline, { viewport: 'desktop' }).map((run) =>
             run.length === 1 ? (
               <BarEntry key={run[0]!.key} action={run[0]!} emphasis="secondary" />
@@ -538,12 +562,12 @@ export function BarActionRow({
       )}
       {syncNode}
       {syncNode !== undefined && desktopPrimary !== null && (
-        <Group gap={BAR_GAP} wrap="nowrap" visibleFrom="sm">
+        <Group gap={BAR_GAP} wrap="nowrap" visibleFrom="sm" {...(!desktopLead && rootProps)}>
           {desktopPrimary}
         </Group>
       )}
       {hasMobile && (
-        <Group gap={BAR_GAP} wrap="nowrap" hiddenFrom="sm">
+        <Group gap={BAR_GAP} wrap="nowrap" hiddenFrom="sm" {...rootProps}>
           {joinRuns(mobileBar, { viewport: 'mobile', excludeKey: primary?.key }).map((run) =>
             run.length === 1 ? (
               <BarEntry
@@ -592,6 +616,62 @@ export function ActionGroup(props: ActionGroupProps): ReactNode {
   return <BarActionRow {...props} host="slot" />
 }
 
+/**
+ * A home's `actions` slot in the two forms it accepts (law C15): typed `BarAction[]` DATA, or an
+ * opaque `ReactNode` row the caller drew itself.
+ *
+ * Three homes took a bare `ReactNode` (`Section`, `BasaltDataTable`, `StatCard`) while `PageBar` and
+ * the shell took typed data, so only half the framework got the C6 budget and the C7 overflow fold —
+ * the `ReactNode` half was clipped on a phone with no kebab to fold into. Widening those slots to
+ * this union is what puts the fold back in basalt's hands without moving any existing call site: a
+ * node still renders verbatim.
+ */
+export type SlotActions = BarAction[] | ReactNode
+
+/**
+ * Which arm of {@link SlotActions} a value is, at runtime — the union has no discriminant, and a
+ * `ReactNode` can itself be an array (a fragment list), so "is it an array" is not the test.
+ *
+ * A `BarAction` is a plain object carrying a STRING `key`; a React element carries `key` too (often
+ * `null`) but answers `isValidElement`, which is what separates the two. An EMPTY array takes the
+ * DATA arm: `[]` is what a caller's `.filter()` returns when nothing survived it, and the data path
+ * renders exactly nothing for it (`BarActionRow` bails on an empty row) — so both arms paint the
+ * same pixels and the typed one keeps `Section`'s ≤3 count and every other reader on one branch,
+ * instead of re-deciding per emptiness.
+ */
+export function isBarActionList(actions: SlotActions): actions is BarAction[] {
+  return (
+    Array.isArray(actions) &&
+    actions.every(
+      (entry) =>
+        typeof entry === 'object' &&
+        entry !== null &&
+        !isValidElement(entry) &&
+        typeof (entry as { key?: unknown }).key === 'string',
+    )
+  )
+}
+
+/**
+ * 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.
+ *
+ * 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
+ * that wants a filled action passes a node, or an `ActionGroup` of its own.
+ *
+ * `host="slot"`, never `'page'` — only `PageBar` row 1 may read the shell's global actions and claim
+ * the single mobile kebab (see {@link BarActionRowProps}).
+ *
+ * @example
+ * <Section title="Runs" actions={[{ key: 'export', label: 'Export', onClick: exportCsv }]} />
+ */
+export function BarActionSlot({ actions }: { actions: SlotActions }): ReactNode {
+  if (!isBarActionList(actions)) return actions
+  return <BarActionRow secondary={actions} host="slot" />
+}
+
 /**
  * One bar entry, resolved by kind: a custom node renders itself, a menu group folds to `More`.
  *

package/src/controls/compare-filter.tsx

@@ -8,6 +8,8 @@
  * <CompareFilter field={analytics.field.compare} />
  */
 import type { ReactNode } from 'react'
+import type { BasaltProps } from '../common/props'
+import { assertRequiredProps } from '../common/validate'
 import type { EnumField, FieldHandle } from '../state'
 import { EnumFilter } from './enum-filter'
 import { SwapGlyph } from './glyphs'
@@ -39,7 +41,7 @@ export const COMPARE_LABELS: Readonly<Record<CompareValue, string>> = {
   year: 'Same period last year',
 }
 
-export type CompareFilterProps = {
+export type CompareFilterProps = BasaltProps & {
   readonly field: FieldHandle<EnumField<CompareValue>>
   /** @default 'Compare' */
   readonly label?: string
@@ -48,7 +50,13 @@ export type CompareFilterProps = {
   readonly icon?: ReactNode
 }
 
-export function CompareFilter({ field, label = 'Compare', icon }: CompareFilterProps): ReactNode {
+export function CompareFilter(props: CompareFilterProps): ReactNode {
+  // F-ERR-1 — without this a missing `field` surfaces from inside `EnumFilter` as
+  // `undefined is not an object (evaluating 'field.use')`, caught by `BasaltErrorBoundary`.
+  assertRequiredProps('CompareFilter', props, ['field'], {
+    field: 'bind it to a store field (`store.field.<name>`), never a value/onChange pair.',
+  })
+  const { field, label = 'Compare', icon, className, style } = props
   // Read through the handle's own options so a consumer's `labels()` and its option ORDER both
   // survive; only an UNLABELLED row (label === value) takes basalt's default string.
   const options = field.options.map((option) =>
@@ -56,7 +64,16 @@ export function CompareFilter({ field, label = 'Compare', icon }: CompareFilterP
       ? { value: option.value, label: COMPARE_LABELS[option.value] }
       : option,
   )
-  return <EnumFilter field={field} label={label} icon={icon ?? <SwapGlyph />} options={options} />
+  return (
+    <EnumFilter
+      field={field}
+      label={label}
+      icon={icon ?? <SwapGlyph />}
+      options={options}
+      {...(className !== undefined && { className })}
+      {...(style !== undefined && { style })}
+    />
+  )
 }
 
 function isCompareValue(value: string): value is CompareValue {

package/src/controls/control-group.tsx

@@ -30,9 +30,11 @@
  */
 import { Box } from '@mantine/core'
 import type { ReactNode } from 'react'
+import { cx } from '../common/props'
+import type { BasaltProps } from '../common/props'
 import classes from './controls.module.css'
 
-export type ControlGroupProps = {
+export type ControlGroupProps = BasaltProps & {
   readonly children: ReactNode
   /**
    * `none` (the default) JOINS the children: no gap, one shared hairline between each pair, and the
@@ -46,16 +48,21 @@ export type ControlGroupProps = {
    * @default 'none'
    */
   readonly gap?: 'none' | 'tight'
-  readonly className?: string
 }
 
-export function ControlGroup({ children, gap = 'none', className }: ControlGroupProps): ReactNode {
+export function ControlGroup({
+  children,
+  gap = 'none',
+  className,
+  style,
+}: ControlGroupProps): ReactNode {
   return (
     // A Mantine `Box`, not a raw `<div>` — `basalt/raw-html-layout` flags layout styling on a bare
     // HTML tag, the same reason `CtlSlot` uses one.
     <Box
-      className={className === undefined ? classes.group : `${classes.group} ${className}`}
+      className={cx(classes.group, className)}
       data-gap={gap}
+      {...(style !== undefined && { style })}
     >
       {children}
     </Box>

package/src/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);
+}