@orkestrel/scaffold 0.0.58 → 0.0.60

package/dist/host/agents/skills/enterprise-bootstrap/SKILL.md

@@ -24,18 +24,22 @@ every claim about the result from what renders.
 Open the reference that owns a subject before writing markup. Never guess a class name: an invented
 utility (`.vw-50`, `.pointer-events-none`) has no rule in the shipped CSS and fails silently. Pick
 components from [components.md](references/components.md) → Choosing components, take their markup
-from the same file, and take fine layout from [utilities.md](references/utilities.md). Where
-Bootstrap ships no component for the need — combobox, date picker, tags input, data grid, tree —
-work the native-first ladder in [bootstrap-reference.md](references/bootstrap-reference.md) → When
-not to hand-roll before building one.
+from the same file, and take fine layout from [utilities.md](references/utilities.md). Pick an
+input's affordance from [inputs.md](references/inputs.md) by what the person is asked for, not by
+what a schema calls the field. Where Bootstrap ships no component for the need — combobox, date
+picker, tags input, data grid, tree — work the native-first ladder in
+[bootstrap-reference.md](references/bootstrap-reference.md) → When not to hand-roll before building
+one.
 
 | Layer          | File                                                        | Holds                                                                             |
 | -------------- | ----------------------------------------------------------- | --------------------------------------------------------------------------------- |
-| Operate        | `SKILL.md` (this file)                                      | Process, decision rules, checklist                                                |
+| Operate        | `SKILL.md`                                                  | Process, decision rules, checklist                                                |
 | Design craft   | [frontend-design.md](references/frontend-design.md)         | Aesthetic, typography, signature, interface copy, anti-defaults                   |
 | Components     | [components.md](references/components.md)                   | Bootstrap component markup + enterprise selection notes                           |
+| Inputs         | [inputs.md](references/inputs.md)                           | Affordance per input category, its alternates, its rung, its states               |
 | Utilities      | [utilities.md](references/utilities.md)                     | Class index, helpers, composition notes                                           |
 | Bootstrap deep | [bootstrap-reference.md](references/bootstrap-reference.md) | Color modes, theming/tokens, forms, JS lifecycle, a11y depth, enterprise patterns |
+| Instruments    | [inspection.md](references/inspection.md)                   | Property, population, reading, negative control, and coverage per instrument      |
 
 ---
 
@@ -43,20 +47,20 @@ not to hand-roll before building one.
 
 1. **Assume no stack.** Infer it from the workspace. Do not assume Vue, React, a skin library, a folder layout, or a named product.
 2. **Target Bootstrap 5.3.x** class names and behaviors. Hold a compatible skin that keeps `.btn`, `.card`, `.form-control`, and `data-bs-*` to the same contracts.
-3. **Follow the project's code law.** Its `AGENTS.md`, lint rules, and design system decide language, layout, and forbidden patterns. This package owns UI craft and Bootstrap usage, not language law.
+3. **Follow the project's code law.** Take language, layout, and forbidden patterns from its `AGENTS.md` file, its lint rules, and its design system. Take UI craft and Bootstrap usage from here, and never language law.
 4. **Write framework-neutral markup** — semantic HTML plus Bootstrap classes. Wire behavior with what the project already uses; in an SPA prefer the framework-native Bootstrap wrappers over raw `bootstrap.*` JS ([bootstrap-reference.md](references/bootstrap-reference.md) → JavaScript lifecycle).
 5. **Keep this folder intact** so the relative links between its files resolve. Install or vendor it wherever the tooling looks for skills; the paths are tooling-specific, the content is not.
 6. **Use the project's installed Bootstrap** when it has one; otherwise take the CDN snippet from [bootstrap-reference.md](references/bootstrap-reference.md) → Quick start (5.3.8).
-7. **Apply this package** to UI, Bootstrap, and visual-design work matching the description above. When the user points at it, treat it as authoritative for the visual pass.
+7. **Apply this package** to UI, Bootstrap, and visual-design work matching the frontmatter description. When the user points at it, treat it as authoritative for the visual pass.
 
 ---
 
 ## The mandate
 
 1. **Design direction** — take a point of view rooted in the _subject_ (audience, job-to-be-done, vernacular). Take one justified aesthetic risk, in one place.
-2. **Bootstrap execution** — components and utilities first; custom CSS only when the system cannot express the need; paint through `--bs-*` so light and dark both survive.
+2. **Bootstrap execution** — take components and utilities first, custom CSS only when the system cannot express the need, and paint through `--bs-*` so light and dark both survive.
 
-Match the density to the context: a marketing page may open with a thesis-hero, an authenticated
+Match the density to the context: a marketing page can open with a thesis-hero, an authenticated
 tool opens with clarity and scan paths. In product UI put the signature in the chrome, never in the
 data ([frontend-design.md](references/frontend-design.md) → Where the signature lives).
 
@@ -64,9 +68,9 @@ data ([frontend-design.md](references/frontend-design.md) → Where the signatur
 
 ## Process
 
-Design craft — subject grounding, hero and thesis, typography, structure, motion, restraint, and
-interface copy — lives in [frontend-design.md](references/frontend-design.md). Read it before
-setting a direction. The loop:
+Read [frontend-design.md](references/frontend-design.md) before setting a direction; it owns subject
+grounding, hero and thesis, typography, structure, motion, restraint, and interface copy. Then work
+this loop:
 
 1. **Ground** — name the subject, the audience, and the screen's single job, and state them. Use known user preferences and prior designs as hints, not templates.
 2. **Plan** — build a token system: **color** (4–6 named values), **type** (display / body / utility), **layout** (prose plus ASCII if useful), **signature** (one memorable element).
@@ -74,53 +78,51 @@ setting a direction. The loop:
 4. **Build** — compose Bootstrap components and utilities; map the plan's tokens onto theme variables or a thin skin, with no scattered one-off hex ([bootstrap-reference.md](references/bootstrap-reference.md) → Theming & design tokens). Watch selector specificity: a utility and a custom rule that cancel each other show up as padding and margin bugs.
 5. **Critique the render** — remove one accessory. Check contrast, focus, `prefers-reduced-motion`, mobile, and every data state. Critique what rendered, not the markup.
 
-Brainstorm privately; show a direction only once it satisfies the brief and the quality floor
-([frontend-design.md](references/frontend-design.md) → Process).
+Show a direction only after it satisfies the brief and the quality floor, and keep every earlier
+draft private ([frontend-design.md](references/frontend-design.md) → Process).
 
 **Rendered proof.** Settle every claim about a screen from a capture, never from source alone;
-`.agents/orchestration.md` owns this law where it is present. The review input here is captures at
-both viewports and both themes plus an accessibility snapshot; source only corroborates the
-mechanism. For a full review-round campaign built on that evidence, use the
+`.agents/orchestration.md` owns this law where it is present. Take captures at every viewport and
+every theme the surface declares, plus an accessibility snapshot, as the review input, and use source only to corroborate
+the mechanism. For a full review-round campaign built on that evidence, use the
 `orkestrel-polish-surface` skill instead of improvising one here.
 
-**Mechanical proof.** These instruments settle what a capture cannot. Pair each one with a negative
-control drawn from outside the population it covers, and treat an instrument whose control passes as
-broken; `.claude/rules/quality.md` owns this law where it is present:
-
-- **Contrast, composited.** Read every pairing through a reader that composites the painted layers, in both themes ([bootstrap-reference.md](references/bootstrap-reference.md) → Measuring the bars).
-- **Authored classes against the shipped cascade.** Extract every class authored in the templates and components, and fail the run on one that has no rule in the compiled CSS the page loads. Assert a population floor so an extractor that quietly matched nothing cannot pass, and control it with a class you know is absent.
-- **One glyph, one meaning.** Register each status glyph against the meaning it carries. No meaning takes more than one glyph, no glyph serves more than one meaning, and every registered glyph resolves in the icon set actually shipped.
+**Mechanical proof.** Run every instrument in [inspection.md](references/inspection.md) with the
+negative control it names, and treat an instrument whose negative control passes as broken;
+`.claude/rules/quality.md` owns that law where it is present. Those instruments settle what a capture
+cannot: composited contrast, authored classes against the shipped cascade, declared class
+combinations, style escapes, token discipline, a custom rule doing a utility's job, and one glyph per
+meaning. Hold every check the deliverable lists to that shape, whether or not inspection.md names
+it: each states its population, its negative control, and its coverage, and a check that cannot
+name a negative control is recorded as open rather than listed as a check.
 
 ---
 
 ## Bootstrap operating principles
 
-1. **Mobile first** — smallest screen first, then `sm` / `md` / `lg` / `xl` / `xxl`.
-2. **Semantic HTML** — `nav`, `main`, `section`, heading order.
-3. **Work down the styling ladder below** — component classes, then utilities, then Bootstrap's own extension points.
+1. **Mobile first** — build the smallest screen first, then `sm` / `md` / `lg` / `xl` / `xxl`.
+2. **Semantic HTML** — use `nav`, `main`, and `section`, and hold the heading order.
+3. **Work down the styling ladder that follows** — component classes, then utilities, then Bootstrap's own extension points.
 4. **Test every breakpoint you claim.**
 5. **Reach for Bootstrap's own transitions before writing custom animation**, spend one orchestrated moment at most, and wrap any custom animation in `prefers-reduced-motion: no-preference` ([bootstrap-reference.md](references/bootstrap-reference.md) → Reduced motion).
-6. **Resolve every treatment in the shipped cascade** — Bootstrap plus every skin and dependency stylesheet the page pulls in — never from docs memory. A class with no rule of its own may still inherit one, and a token pair that passes in stock Bootstrap can fail under a compatible skin. Measure the `*-subtle` / `*-emphasis` recipes too, once per theme, with a reader that composites the translucent layers ([bootstrap-reference.md](references/bootstrap-reference.md) → Measuring the bars).
+6. **Resolve every treatment in the shipped cascade** — Bootstrap plus every skin and dependency stylesheet the page pulls in — never from docs memory. A class with no rule of its own can still inherit one, and a token pair that passes in stock Bootstrap can fail under a compatible skin. Measure the `*-subtle` / `*-emphasis` recipes too, once per theme, with a reader that composites the translucent layers ([bootstrap-reference.md](references/bootstrap-reference.md) → Measuring the bars).
 
 ### The styling ladder
 
-Work down these rungs in order. Reach a lower rung only when the one above genuinely cannot express
-the need.
+Work down these rungs in order. Reach a rung only when the preceding one cannot express the need.
 
-1. **The component's own classes, in its documented structure.** Use the right elements, nesting, class names, and required ARIA: a card is `.card` wrapping `.card-body` wrapping `.card-title`, not a `div` with borrowed padding. Variants, states, color modes, and responsive behavior all hang off that structure.
+1. **The component's own classes, in its documented structure.** Use the right elements, nesting, class names, and required ARIA: a card is `.card` wrapping `.card-body` wrapping `.card-title`, not a `div` with borrowed padding. Modifier classes, affordance states, color modes, and responsive behavior all hang off that structure.
 2. **Bootstrap utilities, for refinement.** Spacing, flex, display, sizing, text, borders, color. Compose utilities rather than reaching past them, and use only classes that exist in [utilities.md](references/utilities.md).
 3. **Bootstrap's own extension points.** Component `--bs-{component}-*` variables and the utilities API, when a real gap remains after the component-class and utility tiers.
-4. **Anything beyond Bootstrap's conventions is the developer's call, not yours.** Stop at rung 3 and say plainly what rung 4 would require.
+4. **Leave anything beyond Bootstrap's conventions to the developer.** Stop at rung 3 and say plainly what rung 4 would require. Take rung 4 unasked only where [inspection.md](references/inspection.md) → When an authored rule is already earned opens it.
 
-Never open at rung 4. Specifically, do not reach first for:
+Never reach first for any of these, because each ends the cascade for that element and then survives
+no `--bs-*` retheming, no breakpoint change, and no color-mode change:
 
 - a `style="..."` attribute;
 - a `<style>` block in a page or component;
 - a new stylesheet rule for something a utility already does.
 
-Each ends the cascade for that element: it outranks the utilities, it ignores `--bs-*` retheming, and
-it does not change across breakpoints or color modes.
-
 ### Hierarchy & actions
 
 | Intent      | Typical choice                                                      |
@@ -131,61 +133,67 @@ it does not change across breakpoints or color modes.
 | Tertiary    | `btn-link` or text links                                            |
 | Status      | `badge` / `alert` / `*-emphasis` — **icon + color + word**          |
 
-**Outline buttons are the decorative tier.** They paint no background of their own, so they borrow
-whatever surface they sit on and their contrast is surface- and theme-dependent by construction:
-against stock Bootstrap the whole `btn-outline-*` family misses 4.5:1 across the dark theme and on
-light tinted surfaces — cards, subtle alerts. Give any action that carries information or
-consequence the solid variant. Solid variants paint their own background and measure identically on
-every surface, and the stock fills sit at the 4.5:1 bar with nothing to spare. Re-measure a solid
-variant whenever anything layers over it — an `opacity-*` utility, a translucent overlay, a skin's
-own tint.
+**Give any action that carries information or consequence a solid `btn-*` class, and keep outline
+buttons decorative.** Against stock Bootstrap the whole `btn-outline-*` family misses 4.5:1 across
+the dark theme and on light tinted surfaces — cards, subtle alerts — because an outline button
+paints no background of its own and borrows the surface it sits on.
 
-A status mark with **no text** is an icon glyph, never a `badge`
+**Re-measure a solid fill whenever anything layers over it** — an `opacity-*` utility, a translucent
+overlay, a skin's own tint — because the stock fills sit at the 4.5:1 bar with nothing to spare.
+
+Draw a status mark with **no text** as an icon glyph, never as a `badge`
 ([components.md](references/components.md) → Badge).
 
 ### Surfaces, color, contrast
 
-- **Contrast bars, measured in both themes:** **≥ 4.5:1** for anything information-bearing — `small`, captions, and meta text included — and **≥ 3:1** for textless marks, state indicators, and the hover/focus chrome that carries state. Verify Bootstrap's own palette too; the docs admit some defaults fall short. Read both themes — a pairing that passes light routinely fails dark.
-- **Information-bearing status text takes the `-emphasis` pair.** Plain `text-success` and `text-danger` miss the bar across the dark theme and on light tinted surfaces, and `text-warning` is theme-asymmetric — unreadable on light, comfortable on dark. Never make a plain semantic color the encoding; use it only as decoration beside an encoding that already passes.
-- `text-body-tertiary` carries no information anywhere: it measures under 4.5:1 on every surface in both themes. Tier text a user must read `text-body-secondary` or better, and keep tertiary for genuinely decorative marks.
-- **A subtle fill degrades everything inside it one notch.** Inside `alert-*` and the `*-subtle` backgrounds, outline buttons and plain semantic text fail even in light — so information-bearing text there is `-emphasis` and every button is solid.
-- **A primary fill destroys every semantic color.** On `.active`, `.bg-primary`, and `text-bg-*` surfaces every tone class measured lands under the bar in both themes, the `-emphasis` family included, because the fill supplies its own contrast color and the tone class overrides it with one tuned for a different background. Carry no tone class inside such a fill; let the surface's contrast color take the text, keep the status encoded by icon and word, and verify by capturing the selected state ([components.md](references/components.md) → Selection fills).
-- Disabled controls are exempt from the bars, but a disabled **destructive** control must not keep full danger saturation — at full strength it still reads as armed. Neutralize the variant while it is disabled and carry the reason on the control with `aria-describedby` (plus `title` for pointer users), never `title` alone.
+- **Measure these contrast bars in both themes:** **≥ 4.5:1** for anything information-bearing — `small`, captions, and meta text included — and **≥ 3:1** for textless marks, state indicators, and the hover/focus chrome that carries state. Verify Bootstrap's own palette too; the docs admit some defaults fall short. Read both themes — a pairing that passes light routinely fails dark.
+- **Take the `-emphasis` pair for information-bearing status text.** Plain `text-success` and `text-danger` miss the bar across the dark theme and on light tinted surfaces, and `text-warning` is theme-asymmetric — unreadable on light, comfortable on dark. Never make a plain semantic color the encoding; use it only as decoration beside an encoding that already passes.
+- **Tier text a person must read `text-body-secondary` or better**, and keep `text-body-tertiary` for decorative marks: tertiary measures under 4.5:1 on every surface in both themes, so it carries no information anywhere.
+- **Inside `alert-*` and the `*-subtle` backgrounds, take `-emphasis` for information-bearing text and a solid `btn-*` class for every button.** A subtle fill degrades everything inside it one notch, so outline buttons and plain semantic text fail there even in light.
+- **Carry no tone class inside a primary fill.** On `.active`, `.bg-primary`, and `text-bg-*` surfaces every tone class measured lands under the bar in both themes, the `-emphasis` family included, because the fill supplies its own contrast color and the tone class overrides it with one tuned for a different background. Let the surface's contrast color take the text, keep the status encoded by icon and word, and verify by capturing the selected state ([components.md](references/components.md) → Selection fills).
+- Exempt a disabled control from the bars, but never leave a disabled **destructive** control at full danger saturation — at full strength it still reads as armed. Neutralize the danger tone while the control is disabled and carry the reason on the control with `aria-describedby` (plus `title` for pointer users), never `title` alone.
 - Prefer `bg-body`, `bg-body-secondary`, `bg-body-tertiary` over raw `bg-white` / `bg-light`, and drive custom paint from `var(--bs-…)` — they track `data-bs-theme`, a hard-coded hex does not.
-- Pairings: `text-bg-*`, `*-subtle`, `*-emphasis`, `text-body` / `text-body-secondary`. `text-muted` is deprecated — use `text-body-secondary`.
-- On **dark surfaces**, scope `data-bs-theme="dark"` rather than the deprecated component variants `navbar-dark`, `dropdown-menu-dark`, `btn-close-white`, and `carousel-dark`; gray-on-dark outlines often fail contrast.
-- Support `data-bs-theme="light"` and `dark` when the product offers both. Mechanics: [bootstrap-reference.md](references/bootstrap-reference.md) → Color modes.
+- Take pairings from `text-bg-*`, `*-subtle`, `*-emphasis`, and `text-body` / `text-body-secondary`. `text-muted` is deprecated — use `text-body-secondary`.
+- On **dark surfaces**, scope `data-bs-theme="dark"` rather than the deprecated `*-dark` component classes `navbar-dark`, `dropdown-menu-dark`, `btn-close-white`, and `carousel-dark`; gray-on-dark outlines often fail contrast.
+- Support `data-bs-theme="light"` and `dark` when the product offers both, and take the mechanics from [bootstrap-reference.md](references/bootstrap-reference.md) → Color modes.
 
 ### Density, layout, responsive
 
-- Enterprise density: `table-sm`, `btn-sm` / `btn-group-sm`, compact toolbars — but keep every interactive target **≥ 24×24px**, measured on the rendered box rather than assumed from the class (WCAG 2.2); pad hit areas rather than shrinking them.
+- Take enterprise density from `table-sm`, `btn-sm` / `btn-group-sm`, and compact toolbars, but keep every interactive target **≥ 24×24px**, measured on the rendered box rather than assumed from the class (WCAG 2.2); pad hit areas rather than shrinking them.
 - Where information density is the screen's job, take the `-sm` family across a control row together — `btn-sm` with `form-control-sm`, `form-select-sm`, `input-group-sm` — so the row shares one height. Never mix control sizes within one row.
-- Cards earn their keep: `.card` when grouping helps; otherwise spacing and type.
+- Take `.card` where grouping earns it; otherwise carry the grouping with spacing and type.
 - Swap conditional chrome in place. A bulk-action bar or an alert that shoves the toolbar down shifts the layout mid-task.
-- App shell, dense tables, filter bars, and the ranked responsive strategies for wide data: [bootstrap-reference.md](references/bootstrap-reference.md) → Enterprise patterns. Spacing, toolbar, truncation, and print composition: [utilities.md](references/utilities.md) → Composition habits.
+- Take the app shell, dense tables, filter bars, and the ranked responsive strategies for wide data from [bootstrap-reference.md](references/bootstrap-reference.md) → Enterprise patterns, and spacing, toolbar, truncation, and print composition from [utilities.md](references/utilities.md) → Composition habits.
 
 ### States & feedback
 
-- **Every data surface ships these states:** ideal, empty, loading, partial, error. It is not done until every one exists. Loading thresholds, empty and error specifics, and the channel matrix for toast / inline alert / banner / modal: [bootstrap-reference.md](references/bootstrap-reference.md) → The data states, Feedback discipline.
+- **Ship every one of these states on every data surface:** ideal, empty, loading, partial, error. Treat the surface as unfinished until every one exists. Take loading thresholds, empty and error specifics, and the channel matrix for toast / inline alert / banner / modal from [bootstrap-reference.md](references/bootstrap-reference.md) → The data states, Feedback discipline.
 - **Build a blocking decision on the native `<dialog>`.** `showModal()` brings focus containment, Esc, an inert background, and top-layer stacking from the platform, with no instance to construct and none to leak on unmount. Dress it with Bootstrap chrome inside ([components.md](references/components.md) → Modal). Reach for `.modal` and its JS only when the project already drives its dialogs that way.
-- **Destructive actions:** prefer undoable over interrupting. Ladder and confirmation contracts: [bootstrap-reference.md](references/bootstrap-reference.md) → Destructive actions.
+- **Make a destructive action undoable rather than interrupting**, and take the ladder and the confirmation contracts from [bootstrap-reference.md](references/bootstrap-reference.md) → Destructive actions.
 
 ### Forms
 
+- Choose each field's affordance in [inputs.md](references/inputs.md) → The catalog by what the person is asked for, draw every state in that file's fixed set, and obey its cross-category rules — read-only chrome, the locked select, the chosen filter's accent tone, the non-drag path for a file drop.
 - Give every field a visible label (top-aligned by default) or `.form-floating` — never placeholder-only.
 - Validate on **blur**, re-validate error fields on input, re-check everything on submit, and keep submit **enabled**. Never disable submit as a validation strategy.
 - Pair a focusable error summary with inline `.invalid-feedback` per field (`aria-describedby`, `aria-invalid`).
-- Layout, validation mechanics and their assistive-tech limitation, input groups, autosave, and multi-step rules: [bootstrap-reference.md](references/bootstrap-reference.md) → Forms in production, Wizards & multi-step forms.
+- Take layout, validation mechanics and their assistive-technology limitation, input groups, autosave, and multi-step rules from [bootstrap-reference.md](references/bootstrap-reference.md) → Forms in production, Wizards & multi-step forms.
 
 ### When custom CSS is justified
 
-This is rung 4 of the styling ladder, so it is the developer's decision. Propose it, name what it
-buys, and do not take it unprompted. Exhaust rungs 1–3 first: correct component structure, then
-utilities, then the extension points — component `--bs-{component}-*` variables for restyling, the
-utilities API for missing utility steps ([bootstrap-reference.md](references/bootstrap-reference.md)
-→ Theming).
+Treat custom CSS as rung 4 and the developer's decision: propose it, name what it buys, and take it
+unprompted only under the exception that follows. Exhaust rungs 1–3 first — correct component
+structure, then utilities, then the extension points: component `--bs-{component}-*` variables for
+restyling, the utilities API for missing utility steps
+([bootstrap-reference.md](references/bootstrap-reference.md) → Theming).
+
+Take an authored rule without asking only where an instrument in
+[inspection.md](references/inspection.md) reports the vendor cascade failing a stated bar, the rule
+cites that reading, the rule restores the bar and does nothing else, and the rule is written over
+tokens. [inspection.md](references/inspection.md) → When an authored rule is already earned states
+the whole condition. Treat anything wider as a proposal.
 
-When the developer authorizes it:
+When the developer authorizes it, or that exception opens:
 
 - Name it in Bootstrap vocabulary.
 - Take colors from `var(--bs-…)` and theme tokens so light and dark both work.
@@ -197,20 +205,20 @@ When the developer authorizes it:
 
 ## Accessibility baseline
 
-- Skip link to main; landmarks; `h1` → `h2` order.
-- `aria-label` on icon-only controls; targets ≥ 24×24px.
-- `aria-current` / `aria-selected` on active nav and tabs — exactly one `aria-current` per selection.
-- `aria-expanded` / `aria-controls` for disclosure.
-- `aria-describedby` for help and errors; `aria-invalid` on failed fields.
-- Live regions match the message: an async status mark is `role="status"`; an alert-styled notice is `role="alert"`.
-- A form whose host already names the request associates with that name (`aria-labelledby`) instead of repeating the prompt as its own label.
-- Visible focus — keep the Bootstrap rings, use the `.focus-ring` helper for custom elements, and never write `outline: none`.
-- Focus not obscured by sticky chrome (`scroll-margin-top`); focus moved deliberately on SPA route change, failed submit, and row delete.
-- Meaning never by color alone; contrast verified.
-- Every drag interaction has a non-drag alternative.
-- Dialogs carry `aria-labelledby`; let the platform or Bootstrap trap and restore focus rather than scripting it; dispose Bootstrap instances in SPAs on unmount.
-
-WCAG 2.2 deltas, APG pattern contracts, reduced motion, and SPA focus recipes:
+- Give the page a skip link to main, landmarks, and `h1` → `h2` heading order.
+- Name every icon-only control with `aria-label`, and keep every target ≥ 24×24px.
+- Mark active nav and tabs with `aria-current` / `aria-selected` — exactly one `aria-current` per selection.
+- Wire every disclosure with `aria-expanded` and `aria-controls`.
+- Wire help and errors with `aria-describedby`, and mark a failed field `aria-invalid`.
+- Match the live region to the message: `role="status"` for an async status mark, `role="alert"` for an alert-styled notice.
+- Associate a form with the name its host already gives the request (`aria-labelledby`) rather than repeating the prompt as its own label.
+- Keep focus visible: keep the Bootstrap rings, use the `.focus-ring` helper for custom elements, and never write `outline: none`.
+- Keep focus clear of sticky chrome (`scroll-margin-top`), and move focus deliberately on SPA route change, failed submit, and row delete.
+- Never carry meaning by color alone, and verify the contrast.
+- Give every drag interaction a non-drag alternative.
+- Give every dialog `aria-labelledby`, let the platform or Bootstrap trap and restore focus rather than scripting it, and dispose Bootstrap instances in an SPA on unmount.
+
+Take WCAG 2.2 deltas, APG pattern contracts, reduced motion, and SPA focus recipes from
 [bootstrap-reference.md](references/bootstrap-reference.md) → Accessibility.
 
 ---
@@ -219,10 +227,12 @@ WCAG 2.2 deltas, APG pattern contracts, reduced motion, and SPA focus recipes:
 
 ```
 Progress:
+- [ ] Every check that follows, inspection.md instrument or not, reports its population, names the negative control that failed, and states its coverage; a check that can name no negative control is listed as open instead
 - [ ] Project code law followed; no wrong-stack assumptions
 - [ ] Subject, audience, single job stated
 - [ ] Design plan critiqued against the AI defaults: palette, type, layout, one signature
 - [ ] Shell from components.md, utilities from utilities.md; no invented class
+- [ ] Input affordances from inputs.md; every state in its fixed set drawn, per field
 - [ ] Styling ladder held: no `style` attribute, no `<style>` block, no custom rule doing a utility's job
 - [ ] Plan tokens mapped to theme / --bs-* (no hex scatter); light and dark both shipped where both are offered
 - [ ] Copy in user language, verbs consistent, empty/error/loading text useful
@@ -230,12 +240,11 @@ Progress:
 - [ ] Contrast composited and measured in both themes: ≥ 4.5:1 information-bearing (small included), ≥ 3:1 marks and state chrome; meaning not color-alone
 - [ ] Tiers held: `-emphasis` for information-bearing status, solid buttons for real actions, no tone class inside a filled surface
 - [ ] Every treatment resolved in the shipped cascade, not from docs memory
-- [ ] Authored classes checked against that cascade; one glyph per meaning; every instrument's control failed
 - [ ] Keyboard: focus visible, not obscured, targets ≥ 24px, icon controls named
 - [ ] Reduced motion respected; every drag has a non-drag path
 - [ ] Forms: labels visible, blur validation, error summary + inline, submit enabled
 - [ ] Claimed breakpoints spot-checked; RTL-safe (start/end only)
 - [ ] States present: hover / focus / disabled / invalid / active
 - [ ] SPA hygiene: JS instances disposed on unmount, or framework wrappers used
-- [ ] Rendered proof: captures at both viewports and both themes + an accessibility snapshot
+- [ ] Rendered proof: captures at every viewport and every theme the surface declares + an accessibility snapshot
 ```

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

@@ -81,7 +81,7 @@ CDN (5.3.8 is the current — and final — 5.3.x patch before 5.4):
 
 ## Color Modes (light / dark / custom)
 
-The 5.3 color-mode system replaces the old per-component dark variants.
+The 5.3 color-mode system replaces the old per-component `*-dark` classes.
 
 ### Mechanics
 
@@ -290,7 +290,7 @@ Client-side, the documented pattern:
 </div>
 ```
 
-Details: input groups with feedback need `.has-validation` on the group (border-radius fix). `.valid/invalid-tooltip` variants need a `position-relative` parent. Validation colors are mode-adaptive via `--bs-form-valid-color`, `--bs-form-valid-border-color`, `--bs-form-invalid-color`, `--bs-form-invalid-border-color`.
+Details: input groups with feedback need `.has-validation` on the group (border-radius fix). `.valid-tooltip` and `.invalid-tooltip` need a `position-relative` parent. Validation colors are mode-adaptive via `--bs-form-valid-color`, `--bs-form-valid-border-color`, `--bs-form-invalid-color`, `--bs-form-invalid-border-color`.
 
 ### Autosave vs explicit save
 
@@ -354,7 +354,7 @@ Hold the baseline in [SKILL.md](../SKILL.md) → Accessibility baseline. Its Boo
 - collects every painted layer from the element upward to the first opaque one, then composites them top over bottom (Porter-Duff `over`) onto that opaque base;
 - composites a translucent foreground over that result before taking the ratio, rather than reading the declared color;
 - measures both themes in one run, since the theme swap re-points the tokens under every layer;
-- carries a negative control drawn from outside the population it covers — a pairing known to fail — and voids the run if that control passes.
+- carries a negative control drawn from outside the population it covers — a pairing known to fail — and voids the run if that negative control passes.
 
 Wire the reader into the suite once it has settled a question.
 
@@ -485,7 +485,7 @@ The Bootstrap implementation — a responsive offcanvas that renders inline abov
 </div>
 ```
 
-Give header cells an **opaque background** (`bg-body-secondary` or a table variant) — table backgrounds are transparent by default, so rows show through a sticky header otherwise. Sticky chrome is the prime Focus-Not-Obscured offender: add `scroll-margin-top` on row focusables equal to the header height. Sticky first column only when row identity is lost on horizontal scroll — it costs paint and complexity.
+Give header cells an **opaque background** (`bg-body-secondary` or a `.table-*` tone class) — table backgrounds are transparent by default, so rows show through a sticky header otherwise. Sticky chrome is the prime Focus-Not-Obscured offender: add `scroll-margin-top` on row focusables equal to the header height. Sticky first column only when row identity is lost on horizontal scroll — it costs paint and complexity.
 
 - **Sorting:** the whole header is a button (not a bare caret), with a visible direction indicator, and `aria-sort="ascending|descending"` on the active `<th>` only:
 
@@ -551,7 +551,7 @@ Match friction to reversibility × blast radius:
 
 Do not type-gate a single-row delete; do not one-tap a tenant wipe. Confirm only where this ladder calls for it — a confirmation on every action gets clicked through.
 
-**Neutralize a disabled destructive control.** `btn-danger` at full saturation reads as armed whatever the `disabled` attribute says, and the contrast exemption for disabled controls does not excuse it. While the action is unavailable, drop to the neutral or outline variant (or let the disabled state mute the fill) so the color stops promising an action, and say _why_ it is unavailable in text the assistive layer reaches: `aria-describedby` pointing at the reason, with `title` only as the pointer-user convenience on top. Never use `title` alone — it never reaches a keyboard or screen-reader user, and it disappears on touch.
+**Neutralize a disabled destructive control.** `btn-danger` at full saturation reads as armed whatever the `disabled` attribute says, and the contrast exemption for disabled controls does not excuse it. While the action is unavailable, drop to the neutral or outline `btn-*` class (or let the disabled state mute the fill) so the color stops promising an action, and say _why_ it is unavailable in text the assistive layer reaches: `aria-describedby` pointing at the reason, with `title` only as the pointer-user convenience on top. Never use `title` alone — it never reaches a keyboard or screen-reader user, and it disappears on touch.
 
 ## RTL
 

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

@@ -24,7 +24,7 @@
 
 - Typography: `.h1`–`.h6`, `.display-1`–`.display-6`, `.lead`, `.small`
 - Images: `.img-fluid`, `.img-thumbnail`, `.figure`
-- Tables: `.table` + variants — see [Tables](#tables)
+- Tables: `.table` plus its `.table-*` tone classes — see [Tables](#tables)
 - Figures: `.figure`, `.figure-img`, `.figure-caption`
 
 ### Form Components
@@ -86,7 +86,7 @@ Full form patterns and validation JS: [bootstrap-reference.md](bootstrap-referen
 </div>
 ```
 
-Variants: `.accordion-flush` (edge-to-edge, no outer borders); omit `data-bs-parent` to allow multiple items open.
+Modifier classes: `.accordion-flush` (edge-to-edge, no outer borders); omit `data-bs-parent` to allow multiple items open.
 
 ### Alerts
 
@@ -188,7 +188,7 @@ The current page is `aria-current="page"` and not a link. Use breadcrumbs only f
 
 Icon-only buttons need `aria-label` and a ≥24×24 px target (WCAG 2.2) — `btn-sm` icon clusters in toolbars are the common violation; pad rather than shrink.
 
-Choose the variant by contrast rather than by taste ([SKILL.md](../SKILL.md) → Hierarchy & actions).
+Choose the `btn-*` class by contrast rather than by taste ([SKILL.md](../SKILL.md) → Hierarchy & actions).
 
 ### Button Group
 
@@ -525,7 +525,7 @@ Bootstrap's modal enforces focus, adds `role="dialog"`/`aria-modal="true"`, clos
 <ul class="nav nav-underline">
 	…
 </ul>
-<!-- 5.3: understated bottom-border variant -->
+<!-- 5.3: understated bottom-border style -->
 <ul class="nav nav-pills nav-fill">
 	…
 </ul>
@@ -858,13 +858,13 @@ Modifiers (combine freely):
 .table-active             /* highlight a row/cell */
 .table-group-divider      /* thicker rule between <tbody> groups */
 .caption-top              /* caption above the table */
-.table-primary … .table-dark   /* variants, on table/tr/td */
+.table-primary … .table-dark   /* tone classes, on table/tr/td */
 .align-middle             /* vertical alignment, on table/tr/td */
 ```
 
 - **Responsive:** wrap in `.table-responsive{-sm|-md|-lg|-xl|-xxl}` for horizontal scroll. Caveat: the wrapper clips overflowing content — dropdown menus inside a responsive table get cut off.
-- **Dark tables:** `data-bs-theme="dark"` on the `<table>` (the `.table-dark` variant approach is superseded).
-- **Theming:** variants set CSS variables, not fixed colors — `--bs-table-bg`, `--bs-table-color`, `--bs-table-striped-bg`, `--bs-table-hover-bg`, `--bs-table-active-bg`, `--bs-table-border-color`. `--bs-table-bg` is transparent by default so striping/hover layer through.
+- **Dark tables:** `data-bs-theme="dark"` on the `<table>` (the `.table-dark` class approach is superseded).
+- **Theming:** the `.table-*` tone classes set CSS variables, not fixed colors — `--bs-table-bg`, `--bs-table-color`, `--bs-table-striped-bg`, `--bs-table-hover-bg`, `--bs-table-active-bg`, `--bs-table-border-color`. `--bs-table-bg` is transparent by default so striping/hover layer through.
 - **Sticky headers are NOT built in.** Bootstrap ships no sticky-header feature; the pattern needs a few lines of custom CSS. That, plus selection columns, `aria-sort` sorting, bulk-action bars, and responsive strategies: [bootstrap-reference.md](bootstrap-reference.md) → Dense data tables.
 
 ### Toasts
@@ -881,7 +881,7 @@ Modifiers (combine freely):
 
 <div class="toast align-items-center text-bg-primary border-0" role="status" aria-live="polite">
 	<div class="d-flex">
-		<div class="toast-body">Color variant</div>
+		<div class="toast-body">Color tone</div>
 		<button
 			type="button"
 			class="btn-close me-2 m-auto"
@@ -1005,7 +1005,7 @@ The textless mark that survives both themes — dots, ticks, rings, pulses — i
 A selected row, pill, or filter chip repaints everything inside it — marks included. These traps stay invisible until the selected state is captured in both themes:
 
 - **A mark on an active fill of the same family disappears.** `.active` on a `list-group-item`, `nav-pill`, or `page-item` sets the item's own color, and a `text-bg-primary`-family mark inside it inherits or loses to that fill — present in the markup, gone on screen. Carry no tone class inside the fill ([SKILL.md](../SKILL.md) → Surfaces, color, contrast). Verify by capturing the selected row, not by reading the class list.
-- **`btn-check` filter labels invert in dark.** A `btn-outline-secondary` label reads as "chosen" in light and as "muted" in dark, because the checked fill and the surface swap relative weight. Give chosen filters an accent variant (a real theme color) rather than the neutral outline, so "chosen" reads the same way in both modes.
+- **`btn-check` filter labels invert in dark.** A `btn-outline-secondary` label reads as "chosen" in light and as "muted" in dark, because the checked fill and the surface swap relative weight. Give chosen filters an accent tone class (a real theme color) rather than the neutral outline, so "chosen" reads the same way in both modes.
 
 Exactly one item in a selection carries `aria-current` — the visual fill and the announced state must be the same item.
 
@@ -1017,5 +1017,5 @@ Exactly one item in a selection carries `aria-current` — the visual fill and t
 
 ### Theming
 
-- Components consume CSS variables — favor `text-bg-*`, `*-subtle`, and `data-bs-theme` over one-off colors; the deprecated `*-dark` component variants (`navbar-dark`, `dropdown-menu-dark`, `btn-close-white`, `carousel-dark`) all map to `data-bs-theme="dark"`.
+- Components consume CSS variables — favor `text-bg-*`, `*-subtle`, and `data-bs-theme` over one-off colors; the deprecated `*-dark` component classes (`navbar-dark`, `dropdown-menu-dark`, `btn-close-white`, `carousel-dark`) all map to `data-bs-theme="dark"`.
 - To restyle a component, override its `--bs-{component}-*` variables in your own scope instead of writing high-specificity rules — see [bootstrap-reference.md](bootstrap-reference.md) → Theming & design tokens.