basalt-ui 1.26.0 → 1.28.0

package/src/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/src/controls/enum-filter.tsx

@@ -28,11 +28,13 @@
  */
 import { Button, Radio, Stack } from '@mantine/core'
 import type { ReactNode } from 'react'
+import type { BasaltProps } from '../common/props'
 import type { FieldOption } from '../state'
 import classes from './controls.module.css'
 import { useFilterRegistration, useFilterSurface } from './filter-context'
 import { FilterPill } from './filter-pill'
-import { SheetField, SheetOptionList, useControlName } from './filter-sheet'
+import { useControlName } from './filter-sheet'
+import { PanelChoice, PanelRow } from './panel-row'
 import type { FilterOption } from './select-filter'
 
 /**
@@ -46,13 +48,16 @@ export type ChoiceHandle<T extends string> = {
   readonly options: readonly FieldOption[]
   use(): readonly [T, (next: T) => void]
   isDefault(v: T): boolean
+  /** Removes the value on whichever lane the field is on — what both reset paths call, never a write
+   * 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
-  /** Adds a `Clear` action that writes the field back to its fallback. */
+  /** Adds a `Clear` action that clears the field — the same `field.clear()` `Reset all` calls. */
   readonly clearable?: boolean
   /**
    * Overrides `field.options` at render — a runtime catalogue whose labels carry live data, or the
@@ -60,6 +65,12 @@ export type EnumFilterProps<T extends string> = {
    * into, and `exactOptionalPropertyTypes` rejects a possibly-undefined member on a bare optional.
    */
   readonly options?: readonly FilterOption[] | undefined
+  /**
+   * Mono pill label — forwarded to `FilterPill.numeric`. Set by `NumberFilter`, whose values ARE
+   * numbers (`1` / `2` / `7`), and by nothing else: the same law `[data-numeric]` applies to a
+   * numeric SegmentedControl label. A word-valued filter never sets it.
+   */
+  readonly numeric?: boolean | undefined
 }
 
 export function EnumFilter<T extends string>({
@@ -67,13 +78,16 @@ export function EnumFilter<T extends string>({
   label,
   icon,
   clearable,
+  numeric,
   options: optionsProp,
+  className,
+  style,
 }: EnumFilterProps<T>): ReactNode {
   const [value, setValue] = field.use()
   const surface = useFilterSurface()
   const isDefault = field.isDefault(value)
   useFilterRegistration(!isDefault, () => {
-    setValue(field.fallback)
+    field.clear()
   })
 
   // The prop wins whole, never merged: a catalogue that has dropped a value must be able to drop
@@ -81,26 +95,36 @@ export function EnumFilter<T extends string>({
   const options: readonly FilterOption[] = optionsProp ?? field.options
   const selected = options.find((option) => option.value === value)
   const inSheet = surface === 'sheet'
-  const { labelId } = useControlName(label, inSheet)
+  const inPanel = surface === 'panel'
+  // Both non-pill surfaces render a VISIBLE heading for the control to point at; only the pill has
+  // none, because its text is the value.
+  const { labelId, nameProps } = useControlName(label, inSheet || inPanel)
 
-  // The SHEET form is a `SheetOptionList` (44px rows, trailing check, hairline between rows), not
-  // the popover's `Radio.Group` — see `SheetOptionList`'s doc for why the leading radio dot had to
-  // go. Both still write through the same setter, so there is one behaviour and two surfaces.
-  if (inSheet) {
+  // The SHEET form is the PANEL form (`docs/CONTROLS-SPEC.md` §3: "sheet = panel rows inside a
+  // Drawer") — label above, control below, and the control is a full-width track while the set is
+  // small enough to read at ~300px, a `Select` past that. The sheet used to render a `SheetOptionList`
+  // (44px rows, a hairline between them), which did not scale: a filter with many options became a
+  // column of full-height rows as tall as the sheet itself, where a `PanelChoice` folds the same set
+  // behind a `Select` instead.
+  if (inSheet || inPanel) {
     return (
-      <SheetField label={label} labelId={labelId}>
-        <SheetOptionList
-          mode="single"
-          labelId={labelId}
-          selected={[value]}
+      <PanelRow
+        label={label}
+        labelId={labelId}
+        {...(className !== undefined && { className })}
+        {...(style !== undefined && { style })}
+      >
+        <PanelChoice
+          nameProps={nameProps}
+          value={value}
           options={options}
-          onToggle={(next) => {
-            // Rendered from `options` — the field's declared values, or the runtime catalogue
-            // standing in for them; the cast restores what the codec already guarantees.
+          {...(numeric === true && { numeric: true })}
+          onChange={(next) => {
+            // Rendered from `options` — the cast restores what the codec already guarantees.
             setValue(next as T)
           }}
         />
-      </SheetField>
+      </PanelRow>
     )
   }
 
@@ -138,7 +162,7 @@ export function EnumFilter<T extends string>({
           variant="subtle"
           size="ctl"
           onClick={() => {
-            setValue(field.fallback)
+            field.clear()
           }}
         >
           Clear
@@ -151,7 +175,10 @@ export function EnumFilter<T extends string>({
     <FilterPill
       label={selected?.label ?? label}
       active={!isDefault}
+      {...(numeric === true && { numeric: true })}
       {...(icon !== undefined && { icon })}
+      {...(className !== undefined && { className })}
+      {...(style !== undefined && { style })}
     >
       <div className={classes.optionList}>{body}</div>
     </FilterPill>

package/src/controls/filter-context.tsx

@@ -5,8 +5,12 @@
  *
  * **Surface** — `useFilterSurface()` is how a control decides its FORM, not a media query: `'pill'`
  * inside the bar row (and inside the desktop `+N` fold), `'sheet'` inside the mobile `Filters (n)`
- * Drawer. A control renders exactly one form per mount; the desktop/mobile swap WITHIN the pill
- * form is CSS (`visibleFrom`/`hiddenFrom`), never JS (C9).
+ * Drawer and `'panel'` inside a `PageAside` body render the IDENTICAL control body — a chip in a
+ * 300px column, or across a bottom drawer, reads as a stray button, so both resolve to the same
+ * inspector ROW archetype (`docs/ASIDE-SPEC.md` §1, `docs/CONTROLS-SPEC.md` §3: "sheet = panel rows
+ * inside a Drawer"); only the chrome around them differs. A control renders exactly one form per
+ * mount; the desktop/mobile swap WITHIN the pill form is CSS (`visibleFrom`/`hiddenFrom`), never JS
+ * (C9).
  *
  * **Registry** — `useFilterRegistration()` is what makes `Filters (n)` and `Reset all` derived
  * rather than hand-passed: each filter reports `{ isActive, reset }` for itself, so `FilterSet`
@@ -28,8 +32,11 @@ import {
 } from 'react'
 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'
 
 const FilterSurfaceContext = createContext<FilterSurface>('pill')
 
@@ -38,7 +45,7 @@ const FilterSurfaceContext = createContext<FilterSurface>('pill')
  *
  * @example
  * const surface = useFilterSurface()
- * if (surface === 'sheet') return <SheetField label={label}>…</SheetField>
+ * if (surface === 'sheet' || surface === 'panel') return <PanelRow label={label}>…</PanelRow>
  */
 export function useFilterSurface(): FilterSurface {
   return useContext(FilterSurfaceContext)
@@ -61,7 +68,8 @@ const FilterRegistryContext = createContext<FilterRegistry | null>(null)
 
 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
 }
@@ -80,9 +88,14 @@ export function FilterSetScope({ surface, registry, children }: FilterSetScopePr
  * it no-ops outside a registering scope (a bare filter with no `FilterSet`, the fold dropdown, the
  * sheet), which is what keeps it hook-safe in every control.
  *
+ * The reset is `field.clear()`, never `setValue(field.fallback)`: writing the fallback back is a
+ * WRITE, so it persists the default as if the user had chosen it — the URL keeps `?window=7d`, the
+ * localStorage mirror keeps its key, and a later change to the field's fallback no longer reaches
+ * either. `clear()` removes the value instead, on whichever lane the field is on.
+ *
  * @example
- * const [value, setValue] = field.use()
- * useFilterRegistration(!field.isDefault(value), () => setValue(field.fallback))
+ * const [value] = field.use()
+ * useFilterRegistration(!field.isDefault(value), () => field.clear())
  */
 export function useFilterRegistration(isActive: boolean, reset: () => void): void {
   const registry = useContext(FilterRegistryContext)

package/src/controls/filter-pill.tsx

@@ -16,11 +16,13 @@
 import { Button, Popover } from '@mantine/core'
 import { useState } from 'react'
 import type { ReactNode } from 'react'
+import { cx } from '../common/props'
+import type { BasaltProps } from '../common/props'
 import { IconSlot } from '../theme/icon-slot'
 import classes from './controls.module.css'
 import { UpDownGlyph } from './glyphs'
 
-export type FilterPillProps = {
+export type FilterPillProps = BasaltProps & {
   readonly label: string
   readonly icon?: ReactNode
   /** Non-default → accent-tinted border. Derived from `field.isDefault(value)`, never hand-set. */
@@ -39,7 +41,6 @@ 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. */
@@ -56,6 +57,7 @@ export function FilterPill({
   ariaLabel,
   pressed,
   className,
+  style,
   hideGlyph,
   shown,
 }: FilterPillProps): ReactNode {
@@ -68,8 +70,9 @@ export function FilterPill({
     <Button
       variant="default"
       size="ctl"
-      className={className === undefined ? classes.pill : `${classes.pill} ${className}`}
+      className={cx(classes.pill, className)}
       classNames={{ label: classes.pillLabel }}
+      {...(style !== undefined && { style })}
       {...(active === true && { 'data-active': true })}
       {...(numeric === true && { 'data-numeric': true })}
       {...(ariaLabel !== undefined && { 'aria-label': ariaLabel })}

package/src/controls/filter-set.tsx

@@ -33,6 +33,8 @@
  */
 import { Children, isValidElement, useCallback, useEffect, useRef, useState } from 'react'
 import type { ReactNode, RefObject } from 'react'
+import { cx } from '../common/props'
+import type { BasaltProps, SlotStylesProps } from '../common/props'
 import classes from './controls.module.css'
 import { FilterSetScope, useFilterCensus } from './filter-context'
 import { FilterPill } from './filter-pill'
@@ -44,18 +46,25 @@ const FOLD_PILL_WIDTH = 52
 /** `--vx-space-control-gap`'s level-0 value — the fallback when the row has no computed style. */
 const FALLBACK_GAP = 6
 
-export type FilterSetProps = {
-  readonly children: ReactNode
-  /**
-   * How many children stay inline pills below `sm`. The rest are reachable only through the
-   * `Filters (n)` sheet — which always holds every child, inline ones included.
-   *
-   * @default 1
-   */
-  readonly inline?: number
-}
+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
+     * `Filters (n)` sheet — which always holds every child, inline ones included.
+     *
+     * @default 1
+     */
+    readonly inline?: number
+  }
 
-export function FilterSet({ children, inline = 1 }: FilterSetProps): ReactNode {
+export function FilterSet({
+  children,
+  inline = 1,
+  className,
+  style,
+  classNames,
+}: FilterSetProps): ReactNode {
   const items = Children.toArray(children)
   const { registry, activeCount, resetAll } = useFilterCensus()
   const [sheetOpened, setSheetOpened] = useState(false)
@@ -81,7 +90,12 @@ export function FilterSet({ children, inline = 1 }: FilterSetProps): ReactNode {
 
   return (
     <>
-      <div className={classes.pillRow} ref={rowRef} data-filter-row>
+      <div
+        className={cx(classes.pillRow, classNames?.root, className)}
+        ref={rowRef}
+        data-filter-row
+        {...(style !== undefined && { style })}
+      >
         <FilterSetScope surface="pill" registry={registry}>
           {items.map((child, index) => (
             // `Children.toArray` already stamped a stable `.0`/`.1`-style key on every child, so
@@ -131,7 +145,12 @@ export function FilterSet({ children, inline = 1 }: FilterSetProps): ReactNode {
       </div>
 
       {anyFoldedOnMobile && (
-        <FilterSheet opened={sheetOpened} onClose={closeSheet} onResetAll={resetAll}>
+        <FilterSheet
+          opened={sheetOpened}
+          onClose={closeSheet}
+          onResetAll={resetAll}
+          {...(classNames?.sheet !== undefined && { className: classNames.sheet })}
+        >
           <FilterSetScope surface="sheet" registry={null}>
             {items}
           </FilterSetScope>

package/src/controls/filter-sheet.tsx

@@ -1,12 +1,18 @@
 /**
- * The mobile `Filters (n)` sheet and the two row primitives every control's sheet form composes
- * (`docs/CONTROLS-SPEC.md` §2.1/§3). A bottom `Drawer`: every child of the `FilterSet` renders its
- * full-width sheet form, edits APPLY IMMEDIATELY (there is no Apply button — the URL is the truth
- * and a filter write is already `history: 'replace'`), and one `Reset all` footer clears every
- * registered filter.
+ * The mobile `Filters (n)` sheet (`docs/CONTROLS-SPEC.md` §2.1/§3) — a bottom `Drawer` around the
+ * SAME `PanelRow` forms the aside's `panel` surface renders (`useFilterSurface` resolves `'sheet'`
+ * and `'panel'` to the identical control body; only the surrounding chrome differs). Every child of
+ * the `FilterSet` renders its full-width form inside it, edits APPLY IMMEDIATELY (there is no Apply
+ * button — the URL is the truth and a filter write is already `history: 'replace'`), and one
+ * `Reset all` (in the header, not a footer — see this module's doc below) clears every registered
+ * filter.
  *
- * 44px rows are the one sheet dimension C15 pins, so they come from
- * `--vx-space-sheet-row-height` — the density-tracking token, not a literal.
+ * This module used to also own the sheet's OWN row primitives — a `SheetOptionList` of 44px rows
+ * with a hairline between them, one per option. That did not scale (`docs/CONTROLS-SPEC.md` §3): a
+ * filter with many options became a sheet as tall as the set, where the panel's own `PanelChoice`
+ * (a track, or a `Select` past three) and `MultiSelectFilter`'s facet fold both already had an
+ * answer. Deleted with it: `SheetField`, `SheetOptionList`, `SheetDisclosure`, `SheetRow` and
+ * `sheetRowClassNames` (`MIGRATING.md`).
  *
  * INTERNAL, like `FilterPill`: `FilterSet` owns when the sheet opens, so a consumer mounting it by
  * hand would own a second, unregistered filter home (C1).
@@ -14,12 +20,18 @@
 import { Button, Drawer } from '@mantine/core'
 import { useId } from 'react'
 import type { ReactNode } from 'react'
+import type { BasaltProps } from '../common/props'
 import classes from './controls.module.css'
 
-export type FilterSheetProps = {
+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
 }
@@ -39,6 +51,8 @@ export function FilterSheet({
   onResetAll,
   title = 'Filters',
   children,
+  className,
+  style,
 }: FilterSheetProps): ReactNode {
   return (
     <Drawer
@@ -47,12 +61,16 @@ export function FilterSheet({
       position="bottom"
       radius="sm"
       classNames={{ header: classes.sheetHeader, title: classes.sheetTitle }}
+      {...(className !== undefined && { className })}
+      {...(style !== undefined && { style })}
       title={
         <>
           <span className={classes.sheetTitleText}>{title}</span>
-          <Button variant="subtle" size="ctl" onClick={onResetAll}>
-            Reset all
-          </Button>
+          {onResetAll !== undefined && (
+            <Button variant="subtle" size="ctl" onClick={onResetAll}>
+              Reset all
+            </Button>
+          )}
         </>
       }
     >
@@ -61,8 +79,12 @@ export function FilterSheet({
   )
 }
 
-/** The selected-row mark — 16px, drawn at the row's trailing edge (`docs/CONTROLS-SPEC.md` §2.1). */
-function CheckGlyph(): ReactNode {
+/**
+ * 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 function CheckGlyph(): ReactNode {
   return (
     <svg
       width={16}
@@ -80,177 +102,27 @@ function CheckGlyph(): 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
-}
-
-/**
- * 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.
- */
-export function SheetOptionList({
-  mode,
-  selected,
-  options,
-  onToggle,
-  labelId,
-}: SheetOptionListProps): ReactNode {
-  // ONE name per rendered list, so a sheet holding two range filters keeps two radio groups.
-  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.
-    <fieldset className={classes.sheetList} aria-labelledby={labelId}>
-      {options.map((option) => {
-        const isSelected = selected.includes(option.value)
-        return (
-          <label
-            key={option.value}
-            className={classes.sheetOption}
-            {...(isSelected && { 'data-selected': true })}
-            {...(option.disabled === true && { 'data-disabled': true })}
-          >
-            {/* theme-allow raw-form-control — the input is NEVER PAINTED. It is visually hidden
-                (`.sheetOptionInput`) and exists only to carry the row's semantics: the checked state,
-                the radio-group arrow keys, the announced name. The surface the reader sees and taps
-                is the `<label>` around it, which the theme's tokens style directly. A Mantine
-                `Radio` here would paint the 20px indicator this row form exists to remove — see
-                `SheetOptionList`'s doc. */}
-            <input
-              className={classes.sheetOptionInput}
-              type={mode === 'single' ? 'radio' : 'checkbox'}
-              name={name}
-              value={option.value}
-              checked={isSelected}
-              disabled={option.disabled === true}
-              aria-label={option.label}
-              onChange={() => {
-                onToggle(option.value)
-              }}
-            />
-            <span className={classes.sheetOptionLabel}>{option.label}</span>
-            {isSelected && (
-              <span className={classes.sheetOptionCheck} aria-hidden>
-                <CheckGlyph />
-              </span>
-            )}
-          </label>
-        )
-      })}
-    </fieldset>
-  )
-}
-
-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 function SheetDisclosure({
-  label,
-  expanded,
-  onToggle,
-  children,
-}: SheetDisclosureProps): ReactNode {
-  return (
-    <div className={classes.sheetList}>
-      <button
-        type="button"
-        className={classes.sheetOption}
-        aria-expanded={expanded}
-        {...(expanded && { 'data-selected': true })}
-        onClick={onToggle}
-      >
-        <span className={classes.sheetOptionLabel}>{label}</span>
-        {expanded && (
-          <span className={classes.sheetOptionCheck} aria-hidden>
-            <CheckGlyph />
-          </span>
-        )}
-      </button>
-      {expanded && <div className={classes.sheetDisclosureBody}>{children}</div>}
-    </div>
-  )
-}
-
-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 function SheetField({ label, labelId, children }: SheetFieldProps): ReactNode {
-  return (
-    <div className={classes.sheetField}>
-      <span className={classes.sheetLabel} {...(labelId !== undefined && { id: labelId })}>
-        {label}
-      </span>
-      {children}
-    </div>
-  )
-}
-
 /**
  * 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 function useControlName(
   label: string,
-  inSheet: boolean,
+  named: boolean,
 ): {
   labelId: string
   nameProps: { 'aria-labelledby': string } | { 'aria-label': string }
@@ -258,28 +130,6 @@ export function useControlName(
   const labelId = useId()
   return {
     labelId,
-    nameProps: inSheet ? { 'aria-labelledby': labelId } : { 'aria-label': label },
+    nameProps: named ? { 'aria-labelledby': labelId } : { 'aria-label': label },
   }
 }
-
-export type SheetRowProps = {
-  readonly children: ReactNode
-}
-
-/** One 44px full-width row (`--vx-space-sheet-row-height`). */
-export function SheetRow({ children }: SheetRowProps): ReactNode {
-  return <div className={classes.sheetRow}>{children}</div>
-}
-
-/** The class every sheet-form list item shares, for controls that render their own row element. */
-export const sheetRowClass = classes.sheetRow
-
-/**
- * `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 const sheetRowClassNames = {
-  root: classes.sheetRow,
-  body: classes.sheetRowBody,
-  label: classes.sheetRowLabel,
-} as const

package/src/controls/index.ts

@@ -43,6 +43,14 @@ export {
   type SelectFilterStringProps,
 } from './select-filter'
 export { MultiSelectFilter, type MultiSelectFilterProps } from './multi-select-filter'
+export { NumberFilter, type NumberFilterOption, type NumberFilterProps } from './number-filter'
 export { SearchFilter, type SearchFilterProps } from './search-filter'
 export { ToggleFilter, type ToggleFilterProps } from './toggle-filter'
 export { ViewTabs, type ViewTabsOption, type ViewTabsProps } from './view-tabs'
+
+// ── The `panel` surface (docs/ASIDE-SPEC.md wave 2) ───────────────────────────────────────────
+// The two row-level primitives an aside body needs. `PanelRow` is the home (it wraps its slots in
+// `CtlSlot`), and `SliderControl` is the one bound control that has no pill form at all — see their
+// docs. The filters above render their own panel forms; there is nothing extra to import for them.
+export { PanelRow, type PanelRowProps } from './panel-row'
+export { SliderControl, type SliderControlProps } from './slider-control'