@vectoriox/iox-ui 5.27.0 → 5.28.0

package/forms-core/index.d.ts

@@ -208,6 +208,18 @@ declare function collectFormSpec(node: FormNodeLike | null | undefined): FormSpe
 /** Every Field in this subtree, in document order, not descending into a nested Form. */
 declare function collectFieldNodes(nodes: readonly FormNodeLike[]): FormNodeLike[];
 
+/**
+ * A Field's `optionsText` trait — the author's choices, one per line — as options. ONE parser for the
+ * builder canvas, both engine paths and iox-cms: until 2026-10-19 nothing parsed the trait, so a Radio
+ * group or a Dropdown from the tray rendered no choices at all on the canvas and on the live site.
+ */
+declare function parseFieldOptions(text: unknown): FieldOption[];
+/** The choices a saved Field offers: an explicit `options` list wins, else its `optionsText` parsed. */
+declare function fieldOptionsOf(props: {
+    options?: unknown;
+    optionsText?: unknown;
+} | null | undefined): FieldOption[];
+
 /** Everything the runtime needs to remember. Immutable — each transition returns a new state. */
 interface FormRuntimeState {
     /** Field names the visitor has left (blurred) at least once. */
@@ -343,7 +355,11 @@ type FormTransport = (request: SubmitRequest) => Promise<SubmitResponse>;
  * The public submit path. Built here rather than interpolated at each call site, so the engine and
  * any future host cannot disagree about it — and so changing it is one edit.
  *
- * Deliberately relative and WITHOUT a leading slash: the engine mounts under a per-org base href.
+ * ⚠️ ROOT-relative (leading slash), never base-relative. A live site is served under a per-org
+ * `<base href="/<label>/">`, so a relative `api/…` resolved to `/<label>/api/…` — a path the reverse
+ * proxy (`/api` → iox-cms, everything else → the engine) hands to the ENGINE, which answers a POST with
+ * 404: no visitor submission ever reached iox-cms from an org path (found 2026-10-19 by
+ * e2e:forminsert:real). The org is already in the path segment after `site/`.
  */
 declare function submitEndpointPath(orgId: string, formId: string): string;
 /**
@@ -363,5 +379,5 @@ declare function withAntiSpamFields(values: Record<string, any>, renderedAt: num
  */
 declare function interpretSubmitResponse(body: any): SubmitResponse;
 
-export { ControlType, DEFAULT_EN_MESSAGES, FIELD_NODE_TYPE, FORM_ERROR_KEYS, FORM_NODE_TYPE, FeedbackTiming, HONEYPOT_FIELD, IMPLIED_PATTERN, INITIAL_FORM_STATE, MESSAGE_NAMESPACE, MULTI_VALUE_CONTROLS, PATTERN_MESSAGE_KEYS, PATTERN_PRESETS, PATTERN_PRESET_OPTIONS, PatternPreset, RENDERED_AT_FIELD, RULE_DESCRIPTORS, RULE_MESSAGE_KEYS, RuleName, RuleParamKind, STORE_ACTION, addableRules, applyServerErrors, collectFieldNodes, collectFormSpec, deriveFieldName, firstInvalidField, interpretSubmitResponse, onFieldBlur, onFieldChange, onSubmitAttempt, resetFormState, rulesFor, shouldShowError, submitEndpointPath, uniqueFieldName, validateField, validateForm, withAntiSpamFields };
+export { ControlType, DEFAULT_EN_MESSAGES, FIELD_NODE_TYPE, FORM_ERROR_KEYS, FORM_NODE_TYPE, FeedbackTiming, HONEYPOT_FIELD, IMPLIED_PATTERN, INITIAL_FORM_STATE, MESSAGE_NAMESPACE, MULTI_VALUE_CONTROLS, PATTERN_MESSAGE_KEYS, PATTERN_PRESETS, PATTERN_PRESET_OPTIONS, PatternPreset, RENDERED_AT_FIELD, RULE_DESCRIPTORS, RULE_MESSAGE_KEYS, RuleName, RuleParamKind, STORE_ACTION, addableRules, applyServerErrors, collectFieldNodes, collectFormSpec, deriveFieldName, fieldOptionsOf, firstInvalidField, interpretSubmitResponse, onFieldBlur, onFieldChange, onSubmitAttempt, parseFieldOptions, resetFormState, rulesFor, shouldShowError, submitEndpointPath, uniqueFieldName, validateField, validateForm, withAntiSpamFields };
 export type { FieldError, FieldOption, FieldOptionSource, FieldResult, FieldSpec, FormNodeLike, FormResult, FormRuntimeState, FormSpec, FormTransport, RuleDescriptor, SubmitAction, SubmitRequest, SubmitResponse, ValidationRule };

package/index.d.ts

@@ -1189,7 +1189,17 @@ declare class IoxFieldComponent implements OnInit, OnDestroy {
     rangeMax: number | string;
     rangeStep: number | string;
     accept: string;
-    options: FieldOption[];
+    /** Explicit choices (bound data, a hand-built node). Wins over `optionsText`. */
+    set options(value: FieldOption[] | null | undefined);
+    get options(): FieldOption[];
+    /** The author's choices, one per line (`value|Label`) — the Field's trait. A SETTER: the builder
+     *  assigns traits directly, with no ngOnChanges. */
+    set optionsText(value: string | null | undefined);
+    get optionsText(): string;
+    /** What the radio group / dropdown renders: the shared forms-core reading of the two inputs above. */
+    choices: FieldOption[];
+    private _options;
+    private _optionsText;
     value: any;
     /** Rules beyond `required` — carried on the node, interpreted by forms-core. */
     rules: ValidationRule[];
@@ -1225,6 +1235,7 @@ declare class IoxFieldComponent implements OnInit, OnDestroy {
     /** The message a visitor reads. Translation is the consumer's, via IOX_FORM_MESSAGES. */
     get errorText(): string;
     private toSpec;
+    private refreshChoices;
     /** `file`, `date`, `number`… map straight through; everything else is a text input. */
     get inputType(): string;
     /** Help and error are BOTH announced, in that order, when both are present. */
@@ -1232,7 +1243,7 @@ declare class IoxFieldComponent implements OnInit, OnDestroy {
     emit(value: any): void;
     touch(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<IoxFieldComponent, [{ optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IoxFieldComponent, "div[iox-field]", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "control": { "alias": "control"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "help": { "alias": "help"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "requiredMark": { "alias": "requiredMark"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "rangeMin": { "alias": "rangeMin"; "required": false; }; "rangeMax": { "alias": "rangeMax"; "required": false; }; "rangeStep": { "alias": "rangeStep"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "options": { "alias": "options"; "required": false; }; "value": { "alias": "value"; "required": false; }; "rules": { "alias": "rules"; "required": false; }; "forceInvalid": { "alias": "forceInvalid"; "required": false; }; "designErrorText": { "alias": "designErrorText"; "required": false; }; "showValid": { "alias": "showValid"; "required": false; }; }, { "valueChange": "valueChange"; "touched": "touched"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IoxFieldComponent, "div[iox-field]", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "control": { "alias": "control"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "help": { "alias": "help"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "requiredMark": { "alias": "requiredMark"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "rangeMin": { "alias": "rangeMin"; "required": false; }; "rangeMax": { "alias": "rangeMax"; "required": false; }; "rangeStep": { "alias": "rangeStep"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "options": { "alias": "options"; "required": false; }; "optionsText": { "alias": "optionsText"; "required": false; }; "value": { "alias": "value"; "required": false; }; "rules": { "alias": "rules"; "required": false; }; "forceInvalid": { "alias": "forceInvalid"; "required": false; }; "designErrorText": { "alias": "designErrorText"; "required": false; }; "showValid": { "alias": "showValid"; "required": false; }; }, { "valueChange": "valueChange"; "touched": "touched"; }, never, never, false, never>;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-ui",
-  "version": "5.27.0",
+  "version": "5.28.0",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",

package/src/design-core/flavor-spec.generated.ts

@@ -1811,7 +1811,8 @@ export const SPEC_FIELD_CLASS_BASELINE = {
   ".iox-es-field .iox-field__control:focus-visible": {
     "border-color": "var(--iox-accent-text)",
     "box-shadow": "var(--iox-field-focus)",
-    "outline": "none"
+    "outline": "2px solid transparent",
+    "outline-offset": "2px"
   },
   ".iox-es-field .iox-field__label": {
     "font-family": "var(--iox-font-body)",
@@ -1819,6 +1820,12 @@ export const SPEC_FIELD_CLASS_BASELINE = {
     "font-weight": "var(--iox-field-label-weight)",
     "color": "var(--iox-text)"
   },
+  ".iox-es-field .iox-field__option": {
+    "font-family": "var(--iox-font-body)",
+    "font-size": "var(--iox-size-body)",
+    "color": "var(--iox-text)",
+    "cursor": "pointer"
+  },
   ".iox-es-field .iox-field__help": {
     "font-size": "var(--iox-size-small)",
     "color": "var(--iox-text-muted)"
@@ -1834,11 +1841,121 @@ export const SPEC_FIELD_CLASS_BASELINE = {
     "color": "var(--iox-text-muted)",
     "opacity": "1"
   },
-  ".iox-es-field .iox-field__control:where([type='checkbox'], [type='radio'], [type='range'])": {
+  ".iox-es-field .iox-field__control:disabled": {
+    "opacity": "0.55",
+    "cursor": "not-allowed"
+  },
+  ".iox-es-field .iox-field__control:where(.iox-field__control--switch, [type='range'])": {
     "border": "none",
     "padding": "0",
-    "background": "transparent",
-    "accent-color": "var(--iox-accent-text)"
+    "background": "transparent"
+  },
+  ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio'])": {
+    "appearance": "none",
+    "-webkit-appearance": "none",
+    "display": "inline-grid",
+    "place-content": "center",
+    "flex-shrink": "0",
+    "margin": "0",
+    "padding": "0",
+    "inline-size": "1.25em",
+    "block-size": "1.25em",
+    "vertical-align": "middle",
+    "cursor": "pointer",
+    "background": "var(--iox-surface)",
+    "border-color": "var(--iox-line-strong)",
+    "border-radius": "var(--iox-radius-xs)",
+    "transition": "background var(--iox-dur-fast) var(--iox-ease-standard), border-color var(--iox-dur-fast) var(--iox-ease-standard), box-shadow var(--iox-dur-fast) var(--iox-ease-standard)"
+  },
+  ".iox-es-field .iox-field__control[type='radio']": {
+    "border-radius": "50%"
+  },
+  ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio'])::before": {
+    "content": "''",
+    "inline-size": "0.28em",
+    "block-size": "0.56em",
+    "border-style": "solid",
+    "border-color": "var(--iox-accent-ink)",
+    "border-width": "0 0.14em 0.14em 0",
+    "transform": "translateY(-0.08em) rotate(45deg) scale(0)",
+    "transition": "transform var(--iox-dur-fast) var(--iox-ease-standard)"
+  },
+  ".iox-es-field .iox-field__control[type='radio']::before": {
+    "inline-size": "0",
+    "block-size": "0",
+    "border-width": "0.25em",
+    "border-radius": "50%",
+    "transform": "scale(0)"
+  },
+  ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):hover": {
+    "border-color": "var(--iox-accent-text)"
+  },
+  ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):checked": {
+    "background": "var(--iox-accent)",
+    "border-color": "var(--iox-accent-text)"
+  },
+  ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):checked:hover": {
+    "background": "var(--iox-accent-hover)"
+  },
+  ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):checked::before": {
+    "transform": "translateY(-0.08em) rotate(45deg) scale(1)"
+  },
+  ".iox-es-field .iox-field__control[type='radio']:checked::before": {
+    "transform": "scale(1)"
+  },
+  ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):focus-visible": {
+    "box-shadow": "var(--iox-focus-ring)"
+  },
+  ".iox-es-field .iox-field__control:where([type='range'])": {
+    "appearance": "none",
+    "-webkit-appearance": "none",
+    "inline-size": "100%",
+    "block-size": "1.25em",
+    "cursor": "pointer"
+  },
+  ".iox-es-field .iox-field__control:where([type='range'])::-webkit-slider-runnable-track": {
+    "block-size": "0.25em",
+    "border-radius": "var(--iox-radius-pill)",
+    "background": "var(--iox-line-strong)",
+    "outline": "1px solid transparent"
+  },
+  ".iox-es-field .iox-field__control:where([type='range'])::-moz-range-track": {
+    "block-size": "0.25em",
+    "border-radius": "var(--iox-radius-pill)",
+    "background": "var(--iox-line-strong)",
+    "outline": "1px solid transparent"
+  },
+  ".iox-es-field .iox-field__control:where([type='range'])::-webkit-slider-thumb": {
+    "appearance": "none",
+    "-webkit-appearance": "none",
+    "inline-size": "1.25em",
+    "block-size": "1.25em",
+    "border-radius": "50%",
+    "background": "var(--iox-accent-text)",
+    "border": "2px solid var(--iox-bg)",
+    "box-sizing": "border-box",
+    "cursor": "pointer",
+    "margin-block-start": "-0.5em"
+  },
+  ".iox-es-field .iox-field__control:where([type='range'])::-moz-range-thumb": {
+    "appearance": "none",
+    "-webkit-appearance": "none",
+    "inline-size": "1.25em",
+    "block-size": "1.25em",
+    "border-radius": "50%",
+    "background": "var(--iox-accent-text)",
+    "border": "2px solid var(--iox-bg)",
+    "box-sizing": "border-box",
+    "cursor": "pointer"
+  },
+  ".iox-es-field .iox-field__control:where([type='range']):focus-visible": {
+    "box-shadow": "none"
+  },
+  ".iox-es-field .iox-field__control:where([type='range']):focus-visible::-webkit-slider-thumb": {
+    "box-shadow": "var(--iox-focus-ring)"
+  },
+  ".iox-es-field .iox-field__control:where([type='range']):focus-visible::-moz-range-thumb": {
+    "box-shadow": "var(--iox-focus-ring)"
   },
   ".iox-es-field .iox-field__control--switch": {
     "background": "var(--iox-text-muted)",
@@ -2044,9 +2161,40 @@ export const SPEC_CONTRAST_AUDIT = {
       "min": 3
     },
     {
-      "part": "checkbox · radio · range",
+      "part": "checkbox · radio edge",
+      "fg": "var(--iox-line-strong)",
+      "min": 3
+    },
+    {
+      "part": "checkbox · radio edge on its fill",
+      "fg": "var(--iox-line-strong)",
+      "on": "var(--iox-surface)",
+      "min": 3
+    },
+    {
+      "part": "checkbox · radio checked",
+      "fg": [
+        "var(--iox-accent-text)",
+        "var(--iox-accent)"
+      ],
+      "any": true,
+      "min": 3
+    },
+    {
+      "part": "check mark · radio dot",
+      "fg": "var(--iox-accent-ink)",
+      "on": "var(--iox-accent)",
+      "min": 3
+    },
+    {
+      "part": "hover edge · range thumb",
       "fg": "var(--iox-accent-text)",
       "min": 3
+    },
+    {
+      "part": "range track",
+      "fg": "var(--iox-line-strong)",
+      "min": 3
     }
   ]
 } as const;

package/src/forms-core/collect.ts

@@ -15,6 +15,7 @@ import {
     SubmitAction,
     ValidationRule,
 } from './form.model';
+import { fieldOptionsOf } from './options';
 
 /** The minimum a node must look like. Structural on purpose: this file knows no renderer. */
 export interface FormNodeLike {
@@ -117,7 +118,8 @@ function toFieldSpec(node: FormNodeLike, taken: ReadonlySet<string>): FieldSpec
     if (props['required']) spec.required = true;
     const rules = normaliseRules(props['rules']);
     if (rules.length) spec.rules = rules;
-    if (Array.isArray(props['options']) && props['options'].length) spec.options = props['options'];
+    const options = fieldOptionsOf(props);
+    if (options.length) spec.options = options;
     if (props['optionsSource']) spec.optionsSource = props['optionsSource'];
     if (props['defaultValue'] !== undefined && props['defaultValue'] !== '') {
         spec.defaultValue = props['defaultValue'];

package/src/forms-core/options.ts

@@ -0,0 +1,29 @@
+import { FieldOption } from './form.model';
+
+/** `value|Label` separates a submitted value from what the visitor reads; a bare line is both. */
+const OPTION_SEPARATOR = '|';
+
+/**
+ * A Field's `optionsText` trait — the author's choices, one per line — as options. ONE parser for the
+ * builder canvas, both engine paths and iox-cms: until 2026-10-19 nothing parsed the trait, so a Radio
+ * group or a Dropdown from the tray rendered no choices at all on the canvas and on the live site.
+ */
+export function parseFieldOptions(text: unknown): FieldOption[] {
+    if (typeof text !== 'string') return [];
+    const out: FieldOption[] = [];
+    for (const line of text.split(/\r?\n/)) {
+        const raw = line.trim();
+        if (!raw) continue;
+        const at = raw.indexOf(OPTION_SEPARATOR);
+        const value = (at === -1 ? raw : raw.slice(0, at)).trim();
+        const label = (at === -1 ? raw : raw.slice(at + 1)).trim() || value;
+        if (value) out.push({ value, label });
+    }
+    return out;
+}
+
+/** The choices a saved Field offers: an explicit `options` list wins, else its `optionsText` parsed. */
+export function fieldOptionsOf(props: { options?: unknown; optionsText?: unknown } | null | undefined): FieldOption[] {
+    if (Array.isArray(props?.options) && props!.options.length) return props!.options as FieldOption[];
+    return parseFieldOptions(props?.optionsText);
+}

package/src/forms-core/public-api.ts

@@ -14,6 +14,7 @@ export * from './form.model';
 export * from './messages';
 export * from './validate';
 export * from './collect';
+export * from './options';
 export * from './runtime';
 export * from './rule-catalog';
 export * from './transport';

package/src/forms-core/transport.ts

@@ -49,10 +49,14 @@ export type FormTransport = (request: SubmitRequest) => Promise<SubmitResponse>;
  * The public submit path. Built here rather than interpolated at each call site, so the engine and
  * any future host cannot disagree about it — and so changing it is one edit.
  *
- * Deliberately relative and WITHOUT a leading slash: the engine mounts under a per-org base href.
+ * ⚠️ ROOT-relative (leading slash), never base-relative. A live site is served under a per-org
+ * `<base href="/<label>/">`, so a relative `api/…` resolved to `/<label>/api/…` — a path the reverse
+ * proxy (`/api` → iox-cms, everything else → the engine) hands to the ENGINE, which answers a POST with
+ * 404: no visitor submission ever reached iox-cms from an org path (found 2026-10-19 by
+ * e2e:forminsert:real). The org is already in the path segment after `site/`.
  */
 export function submitEndpointPath(orgId: string, formId: string): string {
-    return `api/site/${encodeURIComponent(orgId)}/forms/${encodeURIComponent(formId)}/submit`;
+    return `/api/site/${encodeURIComponent(orgId)}/forms/${encodeURIComponent(formId)}/submit`;
 }
 
 /**

package/styles/iox-forms.css

@@ -119,7 +119,8 @@
 .iox-es-field .iox-field__control:focus-visible {
   border-color: var(--iox-accent-text);
   box-shadow: var(--iox-field-focus);
-  outline: none;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 .iox-es-field .iox-field__label {
   font-family: var(--iox-font-body);
@@ -127,6 +128,13 @@
   font-weight: var(--iox-field-label-weight);
   color: var(--iox-text);
 }
+/* A radio's choice reads like the label beside it: the look's body type in the look's text. */
+.iox-es-field .iox-field__option {
+  font-family: var(--iox-font-body);
+  font-size: var(--iox-size-body);
+  color: var(--iox-text);
+  cursor: pointer;
+}
 .iox-es-field .iox-field__help {
   font-size: var(--iox-size-small);
   color: var(--iox-text-muted);
@@ -139,21 +147,141 @@
   border-color: var(--iox-danger);
 }
 /* DS9 (contrast audit): the placeholder is themed (the UA's #757575 read 1:1 in a Brand section); the
-   native controls, the focus edge and the switch read `accent-text` — the accent GATED as text on every
+   focus edge, the switch and the range thumb read `accent-text` — the accent GATED as text on every
    ground — never the `accent` fill (Pop's orange on its yellow panel: 2.13:1); the off track is
-   `text-muted` under a `bg` thumb (the decorative `line` it wore read 1.06:1). WCAG 1.4.11: 3:1. */
+   `text-muted` under a `bg` thumb (the decorative `line` it wore read 1.06:1). WCAG 1.4.11: 3:1.
+   Focus: the transparent outline is what forced-colors mode paints once it drops the box-shadow ring. */
 .iox-es-field .iox-field__control::placeholder {
   color: var(--iox-text-muted);
   opacity: 1;
 }
-/* Native-appearance controls (checkbox, radio, range — and the switch, a checkbox) draw themselves:
-   the box baseline must not frame them. `:where()` keeps this at the baseline's specificity, so the
-   switch rules below still paint the track. */
-.iox-es-field .iox-field__control:where([type='checkbox'], [type='radio'], [type='range']) {
+.iox-es-field .iox-field__control:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+/* The switch and the range draw themselves: the box baseline must not frame them. `:where()` keeps this
+   at the baseline's specificity, so the switch rules below still paint the track. */
+.iox-es-field .iox-field__control:where(.iox-field__control--switch, [type='range']) {
   border: none;
   padding: 0;
   background: transparent;
-  accent-color: var(--iox-accent-text);
+}
+/* Checkbox and radio, drawn by the look (2026-10-19 — `accent-color` only TINTED the browser's own box,
+   so every flavor showed a browser default). 1.25em of the control's own size (the body step) · the
+   field's edge width in `line-strong` (≥ 3:1 on every ground) · the surface fill · `radius-xs` (a radio
+   is round) · checked: the `accent` fill, an `accent-text` edge and a mark in `accent-ink` (≥ 4.5:1 on
+   the fill). The mark is a BORDER — a rotated corner, a radio's dot a zero-size circle of border — so
+   forced-colors mode repaints it in the system ink (a background mark would vanish). Not mirrored in
+   RTL: a check mark is not a direction. Every motion reads dur-fast, which reduced motion sets to 0ms. */
+.iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']) {
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-grid;
+  place-content: center;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  inline-size: 1.25em;
+  block-size: 1.25em;
+  vertical-align: middle;
+  cursor: pointer;
+  background: var(--iox-surface);
+  border-color: var(--iox-line-strong);
+  border-radius: var(--iox-radius-xs);
+  transition: background var(--iox-dur-fast) var(--iox-ease-standard), border-color var(--iox-dur-fast) var(--iox-ease-standard), box-shadow var(--iox-dur-fast) var(--iox-ease-standard);
+}
+.iox-es-field .iox-field__control[type='radio'] {
+  border-radius: 50%;
+}
+.iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio'])::before {
+  content: '';
+  inline-size: 0.28em;
+  block-size: 0.56em;
+  border-style: solid;
+  border-color: var(--iox-accent-ink);
+  border-width: 0 0.14em 0.14em 0;
+  transform: translateY(-0.08em) rotate(45deg) scale(0);
+  transition: transform var(--iox-dur-fast) var(--iox-ease-standard);
+}
+.iox-es-field .iox-field__control[type='radio']::before {
+  inline-size: 0;
+  block-size: 0;
+  border-width: 0.25em;
+  border-radius: 50%;
+  transform: scale(0);
+}
+.iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):hover {
+  border-color: var(--iox-accent-text);
+}
+.iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):checked {
+  background: var(--iox-accent);
+  border-color: var(--iox-accent-text);
+}
+.iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):checked:hover {
+  background: var(--iox-accent-hover);
+}
+.iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):checked::before {
+  transform: translateY(-0.08em) rotate(45deg) scale(1);
+}
+.iox-es-field .iox-field__control[type='radio']:checked::before {
+  transform: scale(1);
+}
+.iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):focus-visible {
+  box-shadow: var(--iox-focus-ring);
+}
+/* Range: the track is `line-strong`, the thumb `accent-text` on a `bg` ring, the focus ring on the THUMB.
+   One rule per vendor pseudo-element — a selector list mixing -webkit- and -moz- is dropped whole by
+   the engine that does not know the other. */
+.iox-es-field .iox-field__control:where([type='range']) {
+  appearance: none;
+  -webkit-appearance: none;
+  inline-size: 100%;
+  block-size: 1.25em;
+  cursor: pointer;
+}
+.iox-es-field .iox-field__control:where([type='range'])::-webkit-slider-runnable-track {
+  block-size: 0.25em;
+  border-radius: var(--iox-radius-pill);
+  background: var(--iox-line-strong);
+  outline: 1px solid transparent;
+}
+.iox-es-field .iox-field__control:where([type='range'])::-moz-range-track {
+  block-size: 0.25em;
+  border-radius: var(--iox-radius-pill);
+  background: var(--iox-line-strong);
+  outline: 1px solid transparent;
+}
+.iox-es-field .iox-field__control:where([type='range'])::-webkit-slider-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  inline-size: 1.25em;
+  block-size: 1.25em;
+  border-radius: 50%;
+  background: var(--iox-accent-text);
+  border: 2px solid var(--iox-bg);
+  box-sizing: border-box;
+  cursor: pointer;
+  margin-block-start: -0.5em;
+}
+.iox-es-field .iox-field__control:where([type='range'])::-moz-range-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  inline-size: 1.25em;
+  block-size: 1.25em;
+  border-radius: 50%;
+  background: var(--iox-accent-text);
+  border: 2px solid var(--iox-bg);
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.iox-es-field .iox-field__control:where([type='range']):focus-visible {
+  box-shadow: none;
+}
+.iox-es-field .iox-field__control:where([type='range']):focus-visible::-webkit-slider-thumb {
+  box-shadow: var(--iox-focus-ring);
+}
+.iox-es-field .iox-field__control:where([type='range']):focus-visible::-moz-range-thumb {
+  box-shadow: var(--iox-focus-ring);
 }
 .iox-es-field .iox-field__control--switch {
   background: var(--iox-text-muted);