@orkestrel/scaffold 0.0.64 → 0.0.66

package/dist/host/agents/skills/enterprise-bootstrap/references/inputs.md

@@ -3,6 +3,9 @@
 Pick an affordance from what the person is asked for, not from the name a schema gives the field.
 Where one category draws several ways, let the density and the list size decide.
 
+Each **Default** and **Alternate** names the styling rung it sits on. Take the rung names and their
+order from [SKILL.md](../SKILL.md) → The styling ladder.
+
 Read [The fixed state set](#the-fixed-state-set) before the catalog: every affordance handles that
 same set, and each category names only what it adds or changes. Take the data states a whole surface
 ships — ideal, empty, loading, partial, error — from
@@ -34,8 +37,8 @@ value is a set.
   `spinner-border spinner-border-sm` in the control's own chrome. Leave the control operable unless
   its value depends on the work.
 - **required** — state the requirement in the visible label and set the `required` attribute on the
-  control. A `text-danger` asterisk is decoration and carries `aria-hidden="true"`; the word in the
-  label is what a screen reader user gets.
+  control. An optional decorative asterisk inherits the label color and carries `aria-hidden="true"`;
+  keep the requirement in words rather than relying on the mark or a danger tint.
 - **with help** — a `.form-text` under the control, wired with `aria-describedby` beside the error
   message rather than in place of it.
 - **empty** — the set holds nothing. Say what an entry would be, not "nothing here".
@@ -44,15 +47,27 @@ value is a set.
 
 ## Rules that cross every category
 
+- **Start with one reading column.** Expand related fields only when their labels, errors, and
+  controls fit the actual container. Keep help/errors in natural flow and submit/cancel reachable
+  at 320 CSS px and enlarged text; take the layout contract from [responsive-layout.md](responsive-layout.md).
+- **Preserve input behavior on touch.** Use the correct `type`, `inputmode`, and `autocomplete`;
+  never disable zoom to keep a form still. Enlarge the effective label hit area for checkboxes and
+  switches without shrinking the text. Emulated viewport tests do not prove soft-keyboard behavior.
+
 - **Keep a read-only field on the same affordance the edit state uses.** Take `readonly`, or
-  `disabled` plus a carrier, and neutralize the chrome with one transparent combination declared
-  once by name — the combination is a class contract, so declare it and reuse it rather than
-  retyping the utilities. Never swap to `form-control-plaintext`: it drops the horizontal padding,
+  `disabled` plus a carrier, and neutralize the chrome with one transparent combination the project
+  declares by name in its own stylesheet and token layer. The project chooses that combination; this
+  skill prescribes none. Reuse the declared name rather than retyping the utilities at each site.
+  Never swap to `form-control-plaintext`: it drops the horizontal padding,
   so the read view and the edit view reflow against each other.
 - **Give a locked select `disabled` and a hidden input beside it.** A native select cannot be
   read-only, so `disabled` stops its value submitting and the hidden input carries that value.
-- **Give a chosen filter an accent tone class, not the neutral outline.** A `btn-outline-secondary`
-  label reads as chosen in light and as muted in dark, so one markup says opposite things.
+- **Verify a chosen filter in every declared theme.** Keep its native checked/pressed state and a
+  distinguishable visual treatment; take selection rules from [components.md](components.md) →
+  Selection fills. Do not prescribe an accent color as a substitute for that check.
+- **Keep native control foregrounds and states.** For quiet chip or group backgrounds, inherit
+  ordinary text and follow [color-modes.md](color-modes.md). Do not neutralize validation feedback
+  or recolor every label to match its background.
 - **Give each field one visible label**, per [bootstrap-reference.md](bootstrap-reference.md) →
   Forms in production. Take labels, validation timing, and the error summary from that section, and
   the affordance that carries them from [The catalog](#the-catalog).
@@ -67,7 +82,9 @@ value is a set.
 
 ### One line of text
 
-**Default.** An `input.form-control` under its own `label.form-label`, at rung 1.
+**Default.** An `input.form-control` under its own `label.form-label`, at the component rung.
+
+The stock control border is `var(--bs-border-color)` — 1.3:1 on the light body and 1.9:1 on the dark one — so it is decorative; the label, the field's fill against the page, and the focus ring carry recognition. Where the boundary is the only cue (a field on a same-color surface), set `--bs-border-color: var(--bs-secondary-color)` on the form scope — adaptive, about 5.6:1 light and 7:1 dark — and re-measure; never a fixed `border-dark`.
 
 ```html
 <label for="account-name" class="form-label">Account name</label>
@@ -86,7 +103,7 @@ declared transparent combination rather than dropping the control.
 ### Text over many lines
 
 **Default.** A `textarea.form-control` with a `rows` attribute sized to the expected answer, at
-rung 1.
+the component rung.
 
 ```html
 <label for="incident-notes" class="form-label">Notes</label>
@@ -103,7 +120,7 @@ count in the `.form-text`, and keep it out of a live region unless the cap is cl
 
 ### A secret
 
-**Default.** An `input[type=password].form-control` under a visible label, at rung 1.
+**Default.** An `input[type=password].form-control` under a visible label, at the component rung.
 
 ```html
 <label for="passphrase" class="form-label">Passphrase</label>
@@ -122,8 +139,8 @@ one-time code the person must read back.
 
 ### A number
 
-**Default.** An `input[type=number].form-control`, at rung 1. In a column of figures add
-`text-end font-monospace` so the digits align, at rung 2.
+**Default.** An `input[type=number].form-control`, at the component rung. In a column of figures add
+`text-end font-monospace` so the digits align, at the utility rung.
 
 ```html
 <label for="unit-count" class="form-label">Units</label>
@@ -138,7 +155,7 @@ than a quantity, take the one-line-of-text category instead.
 
 ### A number in a bounded range
 
-**Default.** An `input.form-range`, at rung 1, and only when a minimum, a maximum, and a step are all
+**Default.** An `input.form-range`, at the component rung, and only when a minimum, a maximum, and a step are all
 fixed.
 
 ```html
@@ -157,7 +174,7 @@ hand-roll: Bootstrap ships one thumb per input.
 
 ### A date
 
-**Default.** An `input[type=date].form-control`, at rung 1. Take the calendar, the keyboard model,
+**Default.** An `input[type=date].form-control`, at the component rung. Take the calendar, the keyboard model,
 and the locale format from the platform rather than authoring any of them.
 
 ```html
@@ -173,7 +190,7 @@ help text, because a native picker takes no per-day exclusion.
 
 ### A time
 
-**Default.** An `input[type=time].form-control`, at rung 1, with `step` set to the granularity the
+**Default.** An `input[type=time].form-control`, at the component rung, with `step` set to the granularity the
 value actually carries.
 
 ```html
@@ -189,7 +206,7 @@ select is the lighter control.
 
 ### A date and time
 
-**Default.** An `input[type=datetime-local].form-control`, at rung 1.
+**Default.** An `input[type=datetime-local].form-control`, at the component rung.
 
 ```html
 <label for="window-opens" class="form-label">Window opens</label>
@@ -204,7 +221,7 @@ stored in; a local datetime carries none.
 
 ### A color
 
-**Default.** An `input.form-control-color[type=color]`, at rung 1.
+**Default.** An `input.form-control-color[type=color]`, at the component rung.
 
 ```html
 <label for="brand-tint" class="form-label">Brand tint</label>
@@ -212,7 +229,8 @@ stored in; a local datetime carries none.
 ```
 
 **Alternates.** Pair the swatch with a text field when the value is copied, pasted, or read aloud
-between people. Keep the swatch at a 24×24px target or larger.
+between people. Hold the swatch to the target floor in
+[bootstrap-reference.md](bootstrap-reference.md) → WCAG 2.2 requirements for app UI.
 
 **States.** The fixed set. A color input has no empty value, so give the field a default and say what
 it is.
@@ -220,7 +238,7 @@ it is.
 ### One on/off answer
 
 **Default.** A `.form-check` holding one `input.form-check-input[type=checkbox]` and its
-`label.form-check-label`, at rung 1.
+`label.form-check-label`, at the component rung.
 
 ```html
 <div class="form-check">
@@ -239,7 +257,7 @@ flight, and reverts visibly when it fails.
 
 ### One of a few
 
-**Default.** A radio group: `fieldset` and `legend` around `.form-check` rows, at rung 1.
+**Default.** A radio group: `fieldset` and `legend` around `.form-check` rows, at the component rung.
 
 ```html
 <fieldset>
@@ -255,18 +273,18 @@ flight, and reverts visibly when it fails.
 </fieldset>
 ```
 
-**Alternates.** Take a segmented `.btn-group` of `.btn-check` radios, at rung 2, when the choice
+**Alternates.** Take a segmented `.btn-group` of `.btn-check` radios, at the utility rung, when the choice
 sits in a toolbar or a filter bar and every option fits on one row without wrapping; give the group
 `role="radiogroup"` and one accessible name. A radio group and a segmented group draw the same
-question, and the list size decides between them. Give a chosen filter an accent tone class rather
-than `btn-outline-secondary`.
+question, and the list size decides between them. Verify the chosen-state contract rather than
+requiring either a neutral or an accent hue.
 
 **States.** The fixed set, applied to the group rather than to one option. Mark the group invalid,
 name it in the message, and keep the error under the last row.
 
 ### One of many
 
-**Default.** A `select.form-select`, at rung 1.
+**Default.** A `select.form-select`, at the component rung.
 
 ```html
 <label for="territory" class="form-label">Territory</label>
@@ -286,7 +304,7 @@ hidden input. A select whose options are loading is `busy`.
 
 ### One of many with an unlisted value admitted
 
-**Default.** An `input.form-control` bound to a `<datalist>`, at rung 1. The list suggests; the
+**Default.** An `input.form-control` bound to a `<datalist>`, at the component rung. The list suggests; the
 person can still submit a value it does not hold.
 
 ```html
@@ -305,7 +323,7 @@ re-target every test and journey that finds this field by role.
 
 ### Any of a few
 
-**Default.** `fieldset` and `legend` around `.form-check` checkbox rows sharing one name, at rung 1.
+**Default.** `fieldset` and `legend` around `.form-check` checkbox rows sharing one name, at the component rung.
 
 ```html
 <fieldset>
@@ -327,7 +345,7 @@ text and validate it on the group.
 
 ### Any of many
 
-**Default.** A bounded, scrollable list of `.form-check` rows inside a bordered box, at rung 2, with
+**Default.** A bounded, scrollable list of `.form-check` rows inside a bordered box, at the utility rung, with
 a filter field preceding it so the person can narrow the list before choosing.
 
 ```html
@@ -351,7 +369,7 @@ one-action way to clear it.
 
 ### A value picked from a searched list
 
-**Default.** A combobox composed from shipped classes at rung 2, with the keyboard model
+**Default.** A combobox composed from shipped classes at the utility rung, with the keyboard model
 hand-rolled against the APG combobox pattern: an `input.form-control` carrying `role="combobox"`,
 `aria-expanded`, `aria-controls`, `aria-autocomplete="list"`, and `aria-activedescendant`, over a
 `ul.dropdown-menu[role=listbox]` of `.dropdown-item` buttons.
@@ -384,7 +402,7 @@ the input stays operable throughout.
 
 ### Files
 
-**Default.** An `input[type=file].form-control`, at rung 1.
+**Default.** An `input[type=file].form-control`, at the component rung.
 
 ```html
 <label for="statement" class="form-label">Statement</label>
@@ -402,8 +420,9 @@ toast.
 
 ### An ordered set of tags
 
-**Default.** Bootstrap ships no tags input. Compose one at rung 2 from a text field that commits on
-Enter plus a row of chips, each chip a `.badge` carrying a `btn-close` with its own accessible name.
+**Default.** Bootstrap ships no tags input. Compose one at the utility rung from a text field that commits on
+Enter plus a row of quiet chips, each carrying a `btn-close` with its own accessible name.
+Use a utility-composed span so text inherits and the close control retains its normal font size.
 
 ```html
 <label for="tag-entry" class="form-label">Tags</label>
@@ -411,19 +430,19 @@ Enter plus a row of chips, each chip a `.badge` carrying a `btn-close` with its
 <div id="tag-entry-help" class="form-text">Press Enter to add a tag.</div>
 <ul class="list-unstyled d-flex flex-wrap gap-2 mt-2">
 	<li>
-		<span class="badge text-bg-secondary d-inline-flex align-items-center gap-1">
+		<span class="d-inline-flex align-items-center gap-2 bg-secondary-subtle rounded-pill px-2 py-1">
 			Priority
-			<button
-				type="button"
-				class="btn-close"
-				data-bs-theme="dark"
-				aria-label="Remove Priority"
-			></button>
+			<button type="button" class="btn-close" aria-label="Remove Priority"></button>
 		</span>
 	</li>
 </ul>
 ```
 
+Keep tag text inherited and let the close icon follow the active mode. Measure the close button
+against the chip and its hit area against the target floor in
+[bootstrap-reference.md](bootstrap-reference.md) → WCAG 2.2 requirements for app UI. Take a retained `.badge`
+through [color-modes.md](color-modes.md) → Badges and removable tags.
+
 **Alternates.** Where the tags come from a fixed vocabulary, this is the any-of-many category and the
 list is the better control. Where order carries meaning, give the reorder a non-drag path — a move
 control per chip.
@@ -433,10 +452,10 @@ control per chip.
 
 ### A rating
 
-**Default.** Bootstrap ships no rating. Draw the interactive form as a radio group at rung 2 — one
+**Default.** Bootstrap ships no rating. Draw the interactive form as a radio group at the utility rung — one
 radio per value, restyled through `.btn-check` — so the keyboard model, the name, and the submitted
 value come from the platform. Star chrome over that structure is an authored class contract at
-rung 4.
+the authored rung.
 
 ```html
 <fieldset>
@@ -456,7 +475,7 @@ per [components.md](components.md) → Status glyph marks; it is not a control.
 
 ### A step in a sequence
 
-**Default.** Draw a step indicator from shipped parts at rung 1 — a `nav` or `.list-group-numbered`
+**Default.** Draw a step indicator from shipped parts at the component rung — a `nav` or `.list-group-numbered`
 whose current item carries `aria-current="step"`, with a `.progress` bar over a long sequence. A step
 indicator reports where the person is and holds no value, so it is not a field.