```
```scss
@use 'path/to/kb/scss' as kb;
@include kb.theme();
@include kb.fields();
```
Loading theme.css alone emits variables and scopes, with no reset or control styles. The consuming page owns Noto Sans loading. Use the theme's gradient/card roles documented in [theme usage](theme-usage.md); dark contrast depends on the actual composited backdrop.
Add `kb-field-control--modal` to the same control for the 10px variant. Primary field backdrop blur is 24px dark/0px light; modal controls override it to zero.
## Selects and Lucide caret
Wrap the native select in `.kb-select`, then add one `.kb-select-caret` SVG after it. It uses viewBox `0 0 24 24`, no fill, stroke currentColor, stroke-width 2, rounded caps/joins and path `m6 9 6 6 6-6` (Lucide ChevronDown). Set aria-hidden=true and focusable=false. The 16px icon sits 16px from inline end; select end padding is 44px. The icon cannot intercept pointer input. Disabled caret color follows disabled text. [License](../assets/licenses/lucide-LICENSE).
The empty option is a value, not a placeholder, so it uses value styling. Options receive explicit light/dark backgrounds where the browser permits styling; native menus remain platform-dependent. A plain select without the wrapper retains its native arrow. Forced colors hides the SVG and restores native appearance/padding. The custom caret is an intentional refinement over the wizard's native arrow, not source parity.
## State and semantic contract
| State | Required behavior |
|---|---|
| Default/hover | One contour; stable geometry and resting border on hover |
| Focus | Single 2px ring; select retains resting border unless modal; invalid retains error border |
| Invalid | Consumer sets aria-invalid=true and links explicit error text via aria-describedby; do not rely on red alone |
| Disabled | Native disabled, excluded from FormData and focus order; no focus shadow |
| Readonly | Native readonly for input/textarea; remains selectable, focusable and included in FormData |
| Select readonly | No native state; provide a text representation rather than silently dropping submission with disabled |
Labels must be associated with controls. Helper and error styles use the responsive description role (12/16 mobile, 14/20 above 640px), an explicit source difference. Do not mark pristine required fields invalid automatically. Consumer code owns validity and ARIA; CSS cannot supply them. The review demonstrates local required/email validation and reset with no network writes; it does not define a backend or device-domain validation rules.
Reduced motion removes transitions. Forced colors uses a system outline and differentiates invalid borders. Disabled fields have distinct styling; inactive contrast exemptions do not apply to readonly values.
## Verification and limitations
R013 verifies primary/modal default, focus, invalid and invalid-focus on actual light/dark cards at 1200/390px. Native keyboard/validation/recovery/reset, readonly FormData, disabled behavior, caret sizing and forced-colors fallback, reduced motion and 320px reflow are checked. Four Sass contracts and generated-CSS drift checks pass.
See [final checkpoint measurements](reference/field-final-contrast.json), [functional results](reference/field-final-functional.json), [caret results](reference/field-final-carets.json), and [contrast decision history](field-contrast-review.md). Ratios sample real screenshot pixels and composited foregrounds, not every pixel of every possible backdrop. This is not a global WCAG certification or verification of every browser, OS menu, screen reader, zoom level or consumer layout. Recheck contrast after integration.
Earlier source audits and proposals are preserved in [historical usage notes](fields-usage-history.md) and [wizard fidelity audit](wizard-field-audit.md). They do not override the current tokens. WSDMM Central/SignalView B remain unchanged; no application migrations or publishing are part of this checkpoint.