Forms — the canon Fieldsets own structure, smalls carry STATE (not captions), everything fills the width, datastar carries the submit. If a product form doesn't look like these, the product form is wrong.
The canonical form h3 heading · legended fieldsets · label→small→control · full width · datastar submit (here it flips a local signal; a real form @posts with contentType: 'form').
The state grammar One field, four states — the SAME small slot, lit by aria-invalid on the control or a tone class on the label. No separate error divs, ever.
Rows, widths, files --row-width is a BARE NUMBER (a flex shorthand silently falls back to 1). A file input demands enctype="multipart/form-data" on the form — without it @post's form bundle drops the file (gf-52).
The single-row form For concise surfaces that must not hog space: ONE legend-less fieldset, BARE controls (aria-label + placeholder carry the name — no label grid, no state small), the submit hugging its own width. A chat composer, a compact search, a sign-in strip.A button beside labeled fields sits on the controls' line, not the labels'.The moment a field needs a visible name or a state slot, it has outgrown this pattern — use the full canon.
Dividers & disclosure An hr draws the seam between concerns inside one form; a details/summary folds the rarely-touched tail away — the fields inside follow the same canon.
Radios Two spellings, both real radios. PLAIN: the checkbox recipe (input→span→small) — for vertical lists with per-option state. SEGMENTED: the engine's .tabs groove (div role=group + .legend, NOT a fieldset) — for a short exclusive choice worn like a control.
The classic: log in / sign up The segmented groove as a mode switch, a title with its close button opposite, and the canon underneath. Even chips: two options split the groove exactly in half.
The locked form Not disabled — LOCKED: full-ink values with the field chrome stood down (data-ui-state=locked + readonly on the text controls). The state rides a signal, so a fat-morph re-lands it intact — the orgEdit precedent. Unlock to edit; Cancel re-locks.