@vectoriox/iox-ui 5.26.0 → 5.28.0

package/generation-core/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/vectoriox-iox-ui-generation-core.mjs"
+}

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.26.0",
+  "version": "5.28.0",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",
@@ -35,6 +35,10 @@
       "types": "./forms-core/index.d.ts",
       "default": "./fesm2022/vectoriox-iox-ui-forms-core.mjs"
     },
+    "./generation-core": {
+      "types": "./generation-core/index.d.ts",
+      "default": "./fesm2022/vectoriox-iox-ui-generation-core.mjs"
+    },
     "./seo-core": {
       "types": "./seo-core/index.d.ts",
       "default": "./fesm2022/vectoriox-iox-ui-seo-core.mjs"

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`;
 }
 
 /**