SSR / Pages that work without JavaScript

Both kinds of control, drawn on both sides

A dropdown or a sheet needs a script; a <select> does not. Draw both, and let the browser's scripting media feature pick. The browser's first render must be the server's page, so a control drawn on only one side, or inside <noscript>, would be rebuilt when the page is adopted.

import { Style, type Piece } from 'foldkit-mixins'

/** Where no script runs. */
export const NO_SCRIPT = '(scripting: none)'

/** Shown only where scripts run. Last in a slot's pieces, so it wins over a width's `display`. */
const scriptedOnly = Style.media(NO_SCRIPT, { display: 'none' })

/** Shown only where no script runs, as `display` when it is. */
const plainOnly = (display: string): Piece => [{ display: 'none' }, Style.media(NO_SCRIPT, { display })]

export const filterPieces = {
  dropdowns: [{ display: 'flex', gap: '6px' }, scriptedOnly],
  plainFilters: [plainOnly('flex'), { gap: '6px' }],
} satisfies Record<string, Piece>

These are ordinary Style pieces: they go in a slot of the page's Slots, and the rules land in the layer the slot's style is placed in. Put scriptedOnly after any media rule that sets display for a width, as the comment says.