Make every setting a field type declares reachable from the builder (#2)

A field type says what it supports; the inspector decides what to draw.
Nothing joined those two, and the result was not a bug anybody could see:
thirty-two supported settings had no control anywhere. The heading level on
a heading. The markup in an HTML block. The file types a file field accepts.
How many rows a repeater allows. The words on the ends of a scale. The
button at the bottom of a page break — which is where this started, because
a multi-page form in any language other than English shipped a button
saying "Next" and there was nothing to be done about it.

Every one of them worked perfectly once set, which is exactly why nobody
noticed: the renderer honoured them, the schema stored them, the tests
passed, and the only way to set one was to export the form as JSON, edit it
by hand, and import it back.

The join is now a table — one line per setting — and a test that reads the
PHP registrations and fails when a flag has no control and no stated reason
to lack one. A hand-kept list here would have agreed with itself forever
while disagreeing with the plugin.

On the canvas, the settings that are visible parts of the field are edited
where they appear: the hint under any control that offers one, the page
break's own Next and Back buttons, the repeater's Add button, the name of
the step. Both panes stay in step by naming the property they edit rather
than by two hand-kept lists of keys, which is one list fewer to forget.

Also fixed, all found while doing the above:

- `prevLabel` never rendered. A page's Back button read the break that
  *closes* that page, but the wording belongs to the break that opened it —
  the same one whose Next brought the visitor there. On a two-page form the
  setting was unreachable by construction.
- The form title sat outside `.atf-form`, where the theme's tokens are
  scoped, so every `var( --atf-* )` on it was invalid — taking its font,
  size, colour and bottom margin with them. It had been wearing the site
  theme's `h2` and sitting flush against the step indicator. The tokens are
  now scoped to the wrapper, which is what the instance id is on anyway.
- A switch rendered as a tick box. It now draws a switch, and the preview
  tells the two apart the same way the front end does.
- A toggle drew its label twice, once as the field label and once beside
  the control.
- The hint sat above the control on the canvas and below it on the page.
- `calc`, `confirm`, `counter`, `searchable`, `disabledays`,
  `defaultcountry`, `explanation` and a rating `icon` were declared and
  read by nothing. Removed rather than given controls that would do
  nothing.

Likert statements are edited as one per line, and a row's key is what its
answers are stored against — so keys survive rewording. Correcting a typo
in a statement must not detach every answer already given to it.


Claude-Session: https://claude.ai/code/session_0119U4sRRWGcTQdwYreTwpAp

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: AllTerrainDeveloper

assets/css/builder.css

@@ -2246,6 +2246,70 @@ os-checkbox-label.atfb-check {
 	background: var( --atfb-accent-soft );
 }
 
+/* A control and the chrome that belongs to it — a repeater and its add button,
+   a page break and its navigation — kept together as one block. */
+.atfb-preview__stack {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+/* The hint keeps `.atf-hint` from the front end, so its size and colour are the
+   theme's. This only stops an empty one collapsing: an editable with nothing in
+   it still has to be a target you can click, and the placeholder inside it is
+   what invites the first hint anybody writes. */
+.atfb-preview__hint {
+	margin: 4px 0 0;
+}
+
+.atfb-preview__hint .atfb-editable {
+	display: block;
+	min-block-size: 1lh;
+}
+
+/* A button whose words are the editable part. `.atf-button` gives it the
+   theme's real fill, radius and padding; it is a `<span>` rather than a
+   `<button>` because a button element cannot hold a caret. */
+.atfb-preview__button {
+	display: inline-flex;
+	align-items: center;
+	/* The stack is a column flex container, so without this the button grows to
+	   the full width of the card and stops reading as a button at all. */
+	align-self: flex-start;
+	cursor: text;
+}
+
+/* Inherited rather than themed: the text sits on the button's own colour, and
+   the editing outline has to be visible against a filled accent as well as
+   against a pale secondary. */
+.atfb-preview__button-text {
+	color: inherit;
+	font: inherit;
+}
+
+.atfb-preview__button-text:focus {
+	background: none;
+	outline-color: currentcolor;
+}
+
+.atfb-preview__button-text:hover {
+	outline-color: currentcolor;
+}
+
+/* The page break's own navigation, drawn small: it is a preview of the buttons
+   that close the page, not a call to action on the canvas. */
+.atfb-preview__nav {
+	display: flex;
+	gap: 8px;
+	margin: 0;
+}
+
+/* The step's name, which is what the progress indicator shows. */
+.atfb-progress-name {
+	margin: 0;
+	font-weight: 600;
+}
+
 /* What an elaborate control says instead of pretending to be itself. */
 .atfb-preview__summary {
 	margin: 0;

assets/css/form.css

@@ -923,6 +923,49 @@
 	justify-content: space-between;
 }
 
+/* Every button in a form, reset against the site's theme.
+ *
+ * A form is dropped into somebody else's theme, and themes style bare `button`
+ * elements — Astra's inline CSS sets `padding: 15px 30px`, a box-shadow and a
+ * background on `.menu-toggle, button, .ast-button, …`. Ours declared `border`
+ * and `background` and left everything else, so the repeater's 28px × turned
+ * into a 60×30 slab with a drop shadow hanging over the row's corner.
+ *
+ * Declaring only the properties we happen to care about is what loses these
+ * fights. A form has to look the same on any theme, so every button starts from
+ * the same place and the rules below paint from there. `.atf-form button` weighs
+ * (0,1,1), which beats the bare `button` in a theme's selector list.
+ *
+ * Wrapped in `:where()`, which contributes nothing to specificity — so this
+ * weighs (0,1,0): enough to beat a theme's bare `button`, and low enough that
+ * every `.atf-button` rule below still wins on source order. Written plainly as
+ * `.atf-form button` it weighed (0,1,1) and beat our own components instead,
+ * which stripped the submit button and the repeater's "Add another" back to
+ * bare text — a reset that resets the wrong side of the fight.
+ *
+ * Anything a theme commonly sets belongs in this list; if a control starts
+ * looking wrong on one theme and right on another, this is the first place to
+ * look. */
+.atf-form :where( button ) {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	border-radius: 0;
+	background: none;
+	box-shadow: none;
+	color: inherit;
+	font: inherit;
+	line-height: var( --atf-line-height );
+	letter-spacing: inherit;
+	text-transform: none;
+	text-decoration: none;
+	min-inline-size: 0;
+	block-size: auto;
+	inline-size: auto;
+	appearance: none;
+}
+
+
 .atf-button {
 	display: inline-flex;
 	align-items: center;
@@ -1254,3 +1297,74 @@
 		background-color: Highlight;
 	}
 }
+
+/* --- The Toggle, drawn as a switch -----------------------------------------
+ *
+ * `switch` and `consent` are the same control underneath — one checkbox — and
+ * they should not look the same. A switch says "this setting is on"; consent
+ * says "I have agreed", which is a statement a tick box makes and a switch does
+ * not. A field type called Toggle that rendered a checkbox was the name lying
+ * about the control.
+ *
+ * Sized in `em` from the field's own font, so it scales with a theme's type
+ * rather than needing tokens of its own — a theme that sets a bigger base size
+ * gets a bigger switch without touching anything. */
+.atf-form .atf-toggle--switch .atf-toggle__input {
+	inline-size: 2.2em;
+	block-size: 1.25em;
+	border-radius: 1em;
+	/* The track, not a box: the switch's own shape overrides the tick box's
+	   radius token, which is the one place a theme's `radius-check` must not
+	   apply. */
+	padding: 0;
+	flex: 0 0 auto;
+	position: relative;
+	transition: background-color var( --atf-transition-duration ) var( --atf-transition-easing );
+}
+
+/* The knob. `::before` is the tick box's mark, reused — so the checked state
+   moves the knob rather than drawing a tick. */
+.atf-form .atf-toggle--switch .atf-toggle__input::before {
+	content: "";
+	position: absolute;
+	inset-block-start: 50%;
+	inset-inline-start: 0.12em;
+	inline-size: 0.95em;
+	block-size: 0.95em;
+	border-radius: 50%;
+	background-color: var( --atf-border );
+	transform: translateY( -50% ) scale( 1 );
+	clip-path: none;
+	transition: inset-inline-start var( --atf-transition-duration ) var( --atf-transition-easing ),
+		background-color var( --atf-transition-duration ) var( --atf-transition-easing );
+}
+
+.atf-form .atf-toggle--switch .atf-toggle__input:checked::before {
+	inset-inline-start: calc( 100% - 1.07em );
+	background-color: var( --atf-accent-text );
+	transform: translateY( -50% ) scale( 1 );
+}
+
+/* The track fills with the accent when on, which is what the tick box does too
+   — the state reads the same across every control in the form. */
+.atf-form .atf-toggle--switch .atf-toggle__input:checked {
+	background-color: var( --atf-accent );
+	border-color: var( --atf-accent );
+}
+
+/* A switch is a control, not a word: it sits on the line with its label rather
+   than being nudged onto the first line of a paragraph like a tick box. */
+.atf-form .atf-toggle--switch {
+	align-items: center;
+}
+
+.atf-form .atf-toggle--switch .atf-toggle__label {
+	margin-block-start: 0;
+}
+
+@media ( prefers-reduced-motion: reduce ) {
+	.atf-form .atf-toggle--switch .atf-toggle__input,
+	.atf-form .atf-toggle--switch .atf-toggle__input::before {
+		transition: none;
+	}
+}