@vectoriox/iox-ui 5.82.2 → 5.83.1

package/fesm2022/vectoriox-iox-ui-forms-core.mjs

@@ -23,6 +23,11 @@ var ControlType;
     /** A slider over a numeric range — min/max/step ride the field. */
     ControlType["Range"] = "range";
     ControlType["Radio"] = "radio";
+    /** One or several of a few visible choices — chips (the default) or a list of radios / checkboxes (premium N1).
+     *  Its `multiple` trait picks the value's shape: a string, or a list of strings. */
+    ControlType["Choices"] = "choices";
+    /** A date the visitor picks from the look's calendar (premium N8) — a button that reads the date in words and a
+     *  hidden input carrying the ISO `YYYY-MM-DD` value. Never the browser's own date box. */
     ControlType["Date"] = "date";
     ControlType["Time"] = "time";
     ControlType["File"] = "file";
@@ -44,7 +49,20 @@ var RuleName;
     RuleName["Accepted"] = "accepted";
     RuleName["FileType"] = "fileType";
     RuleName["FileSize"] = "fileSize";
+    /** IMPLIED, never authored: an answer of a Choices / Radio / Dropdown must be one of the field's own options
+     *  (premium N1) — a hand-crafted POST cannot file a value the form never offered. */
+    RuleName["OneOf"] = "oneOf";
+    /** IMPLIED, never authored: a Date's answer is a real `YYYY-MM-DD` day (premium N8). */
+    RuleName["ValidDate"] = "validDate";
 })(RuleName || (RuleName = {}));
+/** How a Choices field draws its options (premium N1). */
+var ChoiceAppearance;
+(function (ChoiceAppearance) {
+    /** Each option a chip — the label is the chip; the native input inside it is visually hidden. */
+    ChoiceAppearance["Chips"] = "chips";
+    /** The options as rows of the look's own radio / checkbox (DS9.1). */
+    ChoiceAppearance["List"] = "list";
+})(ChoiceAppearance || (ChoiceAppearance = {}));
 /** Named regexes so an author picks "Email" rather than writing one. */
 var PatternPreset;
 (function (PatternPreset) {
@@ -85,8 +103,21 @@ const IMPLIED_PATTERN = Object.freeze({
     [ControlType.Tel]: PatternPreset.Phone,
     [ControlType.Url]: PatternPreset.Url,
 });
-/** Controls whose value is a list rather than a scalar. */
-const MULTI_VALUE_CONTROLS = new Set([ControlType.File]);
+/**
+ * Whether this field's answer is a LIST rather than one value — a file list, or a Choices field that takes several
+ * (premium N1). Per FIELD, not per control: the same Choices control is single or multiple by its `multiple` trait.
+ * ONE reading for collect, validate, the runtimes' transport and the server (replaced the control-only
+ * `MULTI_VALUE_CONTROLS`, which nothing read).
+ */
+function isMultiValueField(field) {
+    if (!field)
+        return false;
+    if (field.control === ControlType.File)
+        return true;
+    return field.control === ControlType.Choices && field.multiple === true;
+}
+/** The controls whose answers must be one of the field's own options (the implied `oneOf` rule). */
+const OPTION_CONTROLS = new Set([ControlType.Choices, ControlType.Radio, ControlType.Select]);
 
 // The default message for every rule, as an i18n KEY — never a rendered string.
 //
@@ -117,6 +148,26 @@ const RULE_MESSAGE_KEYS = Object.freeze({
     [RuleName.Accepted]: `${MESSAGE_NAMESPACE}.accepted`,
     [RuleName.FileType]: `${MESSAGE_NAMESPACE}.fileType`,
     [RuleName.FileSize]: `${MESSAGE_NAMESPACE}.fileSize`,
+    [RuleName.OneOf]: `${MESSAGE_NAMESPACE}.oneOf`,
+    [RuleName.ValidDate]: `${MESSAGE_NAMESPACE}.validDate`,
+});
+/**
+ * What "required" says on a field you CHOOSE rather than type into (premium N1 / N8): "Choose an option", "Choose at
+ * least one", "Choose a date" — never "This field is required" beside a row of chips.
+ */
+const CHOICE_MESSAGE_KEYS = Object.freeze({
+    One: `${MESSAGE_NAMESPACE}.choose`,
+    Some: `${MESSAGE_NAMESPACE}.chooseSome`,
+    Date: `${MESSAGE_NAMESPACE}.chooseDate`,
+});
+/** A Date outside its Earliest / Latest. The calendar refuses those days, so this is a stale page or a hand POST. */
+const DATE_MESSAGE_KEYS = Object.freeze({
+    Min: `${MESSAGE_NAMESPACE}.dateMin`,
+    Max: `${MESSAGE_NAMESPACE}.dateMax`,
+});
+/** The submit button's own words (premium N2): what it says once its form has sent, when the author wrote none. */
+const SUBMIT_MESSAGE_KEYS = Object.freeze({
+    Sent: 'forms.submit.sent',
 });
 /**
  * A pattern failure deserves better than "Invalid format". Each preset gets its own key so the
@@ -162,7 +213,265 @@ const DEFAULT_EN_MESSAGES = Object.freeze({
     [FORM_ERROR_KEYS.Spam]: 'We couldn’t accept this submission',
     [FORM_ERROR_KEYS.RateLimited]: 'Too many attempts — please wait a moment and try again',
     [FORM_ERROR_KEYS.Server]: 'Something went wrong on our side — your answers are still here',
+    [RULE_MESSAGE_KEYS[RuleName.OneOf]]: 'Choose one of the options',
+    [RULE_MESSAGE_KEYS[RuleName.ValidDate]]: 'Choose a date from the calendar',
+    [CHOICE_MESSAGE_KEYS.One]: 'Choose an option',
+    [CHOICE_MESSAGE_KEYS.Some]: 'Choose at least one',
+    [CHOICE_MESSAGE_KEYS.Date]: 'Choose a date',
+    [DATE_MESSAGE_KEYS.Min]: 'Choose a later date',
+    [DATE_MESSAGE_KEYS.Max]: 'Choose an earlier date',
+    [SUBMIT_MESSAGE_KEYS.Sent]: 'Sent',
+});
+
+/**
+ * DATES — the date picker's pure half (premium components N8) and the date rules' one reading.
+ *
+ * A Date field's value is an ISO day, `YYYY-MM-DD`, compared as a string (the format sorts as the calendar does).
+ * Its `min` / `max` rules take an ISO day OR an offset in days from today (`{ offsetDays: 0 }` = today), so "from
+ * today on" stays true tomorrow without a re-save. ONE reading for the validator (client AND iox-cms), the calendar
+ * (which days it refuses) and the builder's Earliest / Latest controls.
+ *
+ * The calendar model (six rows of seven, roving focus, the APG keys) lives here too, so the DOM runtime only draws
+ * what this decides — the canvas, the engine's component path and its string path draw the SAME month.
+ *
+ * ⚠️ Framework-free, like the rest of forms-core. Local-time `Date` objects are used only to walk the calendar; a
+ * day leaves this file as an ISO string.
+ */
+const ISO_DAY = /^(\d{4})-(\d{2})-(\d{2})$/;
+const OFFSET = /^[+-]?\d+$/;
+const DAYS_IN_WEEK = 7;
+/** Always six rows, so the panel never changes size between months (APG; Emil 74 — one object, one size). */
+const CALENDAR_ROWS = 6;
+const pad = (n, width = 2) => String(n).padStart(width, '0');
+/** The ISO day of a local `Date`. */
+function isoOfDate(d) {
+    return `${pad(d.getFullYear(), 4)}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+/** A local `Date` at midnight for an ISO day, or null when it is not one (2026-02-30 is not). */
+function dateOfIso(iso) {
+    const m = typeof iso === 'string' ? ISO_DAY.exec(iso.trim()) : null;
+    if (!m)
+        return null;
+    const [y, mo, d] = [Number(m[1]), Number(m[2]), Number(m[3])];
+    const date = new Date(y, mo - 1, d);
+    date.setFullYear(y);
+    return date.getFullYear() === y && date.getMonth() === mo - 1 && date.getDate() === d ? date : null;
+}
+/** True for a real calendar day written `YYYY-MM-DD`. */
+function isIsoDate(value) {
+    return dateOfIso(value) !== null;
+}
+/** Today, as the device that runs this sees it (the visitor's local day in a browser; the server's on iox-cms). */
+function todayIso(now = new Date()) {
+    return isoOfDate(now);
+}
+/** `iso` moved by `days` (negative goes back). */
+function addDaysIso(iso, days) {
+    const d = dateOfIso(iso);
+    if (!d)
+        return iso;
+    return isoOfDate(new Date(d.getFullYear(), d.getMonth(), d.getDate() + days));
+}
+/** `iso` moved by `months`, its day clamped to the target month's last (31 Jan + 1 month = 28/29 Feb). */
+function addMonthsIso(iso, months) {
+    const d = dateOfIso(iso);
+    if (!d)
+        return iso;
+    const first = new Date(d.getFullYear(), d.getMonth() + months, 1);
+    const last = new Date(first.getFullYear(), first.getMonth() + 1, 0).getDate();
+    return isoOfDate(new Date(first.getFullYear(), first.getMonth(), Math.min(d.getDate(), last)));
+}
+/** `iso` held inside [min, max] (either may be absent). */
+function clampIso(iso, min, max) {
+    if (min && iso < min)
+        return min;
+    if (max && iso > max)
+        return max;
+    return iso;
+}
+/**
+ * A Field's `earliest` / `latest` trait → the rule parameter. The trait is one string so the panel and a saved page
+ * stay simple: `''` = any day · an integer = that many days from today (`'0'` = today, `'30'` = a month ahead) · an
+ * ISO day. Anything else reads as no bound.
+ */
+function parseDateBound(raw) {
+    if (typeof raw === 'number' && Number.isInteger(raw))
+        return { offsetDays: raw };
+    if (typeof raw !== 'string')
+        return null;
+    const text = raw.trim();
+    if (!text)
+        return null;
+    if (OFFSET.test(text))
+        return { offsetDays: Number(text) };
+    return isIsoDate(text) ? { date: text } : null;
+}
+/** The `min` / `max` rules a Date field's Earliest / Latest traits give it (none for "any"). */
+function dateBoundRules(earliest, latest) {
+    const rules = [];
+    const min = parseDateBound(earliest);
+    const max = parseDateBound(latest);
+    if (min)
+        rules.push({ name: RuleName.Min, params: { ...min } });
+    if (max)
+        rules.push({ name: RuleName.Max, params: { ...max } });
+    return rules;
+}
+/** True when a rule's params are a DATE bound (an ISO day or an offset), never a number bound. */
+function isDateBoundParams(params) {
+    return !!params && (typeof params['date'] === 'string' || Number.isInteger(params['offsetDays']));
+}
+/** The ISO day a bound names today, or null when it names none. */
+function resolveDateBound(params, today) {
+    if (!params)
+        return null;
+    if (typeof params['date'] === 'string' && isIsoDate(params['date']))
+        return params['date'];
+    if (Number.isInteger(params['offsetDays']))
+        return addDaysIso(today, params['offsetDays']);
+    return null;
+}
+/** The first and last day a Date field accepts today — the calendar's refused days and the validator's range. */
+function fieldDateRange(field, today) {
+    let min = null;
+    let max = null;
+    for (const rule of field?.rules ?? []) {
+        if (rule.name === RuleName.Min)
+            min = resolveDateBound(rule.params, today) ?? min;
+        if (rule.name === RuleName.Max)
+            max = resolveDateBound(rule.params, today) ?? max;
+    }
+    return { min, max };
+}
+/** True when the field is a date picker (the control that reads these rules as days). */
+function isDateField(field) {
+    return field?.control === ControlType.Date;
+}
+// ─── the week, the month, the keys ───────────────────────────────────────────
+/** Regions whose week starts on Sunday when the runtime cannot say (Intl.Locale#getWeekInfo is not everywhere). */
+const SUNDAY_REGIONS = new Set(['US', 'CA', 'IL', 'JP', 'BR', 'MX', 'PH', 'IN', 'KR', 'TW', 'ZA', 'AU']);
+const SUNDAY_LANGUAGES = new Set(['he', 'iw', 'ja', 'ko']);
+/**
+ * The first day of the week for a locale, 0 = Sunday … 6 = Saturday. `Intl.Locale(…).getWeekInfo()` (or the older
+ * `weekInfo` getter) when the runtime has it, else a small region table; a bare `en` reads as the US.
+ */
+function weekStartFor(locale) {
+    const tag = locale || 'en';
+    try {
+        const Ctor = Intl.Locale;
+        if (Ctor) {
+            const loc = new Ctor(tag);
+            const info = typeof loc.getWeekInfo === 'function' ? loc.getWeekInfo() : loc.weekInfo;
+            const first = Number(info?.firstDay);
+            if (first >= 1 && first <= 7)
+                return first % DAYS_IN_WEEK;
+        }
+    }
+    catch { /* an unknown tag falls through to the table */ }
+    const [language, region] = tag.split(/[-_]/);
+    if (region && SUNDAY_REGIONS.has(region.toUpperCase()))
+        return 0;
+    if (!region && (language === 'en' || SUNDAY_LANGUAGES.has(language)))
+        return 0;
+    return 1;
+}
+/** The month `focus` sits in, as six rows of seven — the ONE grid every renderer draws. */
+function calendarMonth(focus, options) {
+    const at = dateOfIso(focus) ?? dateOfIso(options.today) ?? new Date();
+    const year = at.getFullYear();
+    const month = at.getMonth();
+    const lead = (new Date(year, month, 1).getDay() - options.weekStart + DAYS_IN_WEEK) % DAYS_IN_WEEK;
+    const days = new Date(year, month + 1, 0).getDate();
+    const weeks = [];
+    for (let r = 0; r < CALENDAR_ROWS; r++) {
+        const row = [];
+        for (let c = 0; c < DAYS_IN_WEEK; c++) {
+            const n = r * DAYS_IN_WEEK + c - lead + 1;
+            if (n < 1 || n > days) {
+                row.push(null);
+                continue;
+            }
+            const iso = isoOfDate(new Date(year, month, n));
+            row.push({
+                iso, day: n,
+                today: iso === options.today,
+                selected: iso === options.selected,
+                disabled: (!!options.min && iso < options.min) || (!!options.max && iso > options.max),
+                focus: iso === focus,
+            });
+        }
+        weeks.push(row);
+    }
+    const monthKey = (iso) => (iso ? iso.slice(0, 7) : null);
+    const here = monthKey(isoOfDate(new Date(year, month, 1)));
+    const minMonth = monthKey(options.min);
+    const maxMonth = monthKey(options.max);
+    return {
+        year, month, weeks,
+        weekdays: Array.from({ length: DAYS_IN_WEEK }, (_, i) => (options.weekStart + i) % DAYS_IN_WEEK),
+        canPrev: !minMonth || here > minMonth,
+        canNext: !maxMonth || here < maxMonth,
+    };
+}
+/** The keys the grid answers (APG date picker dialog). */
+var CalendarKey;
+(function (CalendarKey) {
+    CalendarKey["Left"] = "ArrowLeft";
+    CalendarKey["Right"] = "ArrowRight";
+    CalendarKey["Up"] = "ArrowUp";
+    CalendarKey["Down"] = "ArrowDown";
+    CalendarKey["Home"] = "Home";
+    CalendarKey["End"] = "End";
+    CalendarKey["PageUp"] = "PageUp";
+    CalendarKey["PageDown"] = "PageDown";
+})(CalendarKey || (CalendarKey = {}));
+const KEY_MOVES = {
+    // The arrows follow the READING direction: in RTL "→" is a day back (APG; mirrored).
+    [CalendarKey.Right]: (iso, c) => addDaysIso(iso, c.ahead),
+    [CalendarKey.Left]: (iso, c) => addDaysIso(iso, -c.ahead),
+    [CalendarKey.Down]: iso => addDaysIso(iso, DAYS_IN_WEEK),
+    [CalendarKey.Up]: iso => addDaysIso(iso, -DAYS_IN_WEEK),
+    [CalendarKey.Home]: (iso, c) => addDaysIso(iso, -c.dow),
+    [CalendarKey.End]: (iso, c) => addDaysIso(iso, DAYS_IN_WEEK - 1 - c.dow),
+    // A month; with Shift, a year.
+    [CalendarKey.PageUp]: (iso, c) => addMonthsIso(iso, c.shift ? -12 : -1),
+    [CalendarKey.PageDown]: (iso, c) => addMonthsIso(iso, c.shift ? 12 : 1),
+};
+/**
+ * Where a key moves the focused day, held inside [min, max] — or null for a key the grid does not answer (Enter,
+ * Space and Escape are the runtime's: they pick or close, they never move).
+ */
+function calendarKeyTarget(key, focus, options) {
+    const move = KEY_MOVES[key];
+    const at = dateOfIso(focus);
+    if (!move || !at)
+        return null;
+    const dow = (at.getDay() - options.weekStart + DAYS_IN_WEEK) % DAYS_IN_WEEK;
+    return clampIso(move(focus, { ahead: options.rtl ? -1 : 1, dow, shift: !!options.shift }), options.min, options.max);
+}
+// ─── words ───────────────────────────────────────────────────────────────────
+/** The date in words, in the site's language: "Thu, 20 November" — the year only when it is not this year's. */
+function formatDateInWords(iso, locale, today) {
+    const d = dateOfIso(iso);
+    if (!d)
+        return '';
+    const sameYear = iso.slice(0, 4) === today.slice(0, 4);
+    try {
+        return new Intl.DateTimeFormat(locale || undefined, { weekday: 'short', day: 'numeric', month: 'long', ...(sameYear ? {} : { year: 'numeric' }) }).format(d);
+    }
+    catch {
+        return iso;
+    }
+}
+const DATE_PICKER_WORDS = Object.freeze({
+    en: { choose: 'Choose a date', previousMonth: 'Previous month', nextMonth: 'Next month', close: 'Close' },
+    he: { choose: 'בחרו תאריך', previousMonth: 'החודש הקודם', nextMonth: 'החודש הבא', close: 'סגירה' },
 });
+/** The words for a language tag (`he-IL` → Hebrew); English for anything else. */
+function datePickerWords(lang) {
+    const language = String(lang ?? '').toLowerCase().split(/[-_]/)[0];
+    return language === 'he' || language === 'iw' ? DATE_PICKER_WORDS.he : DATE_PICKER_WORDS.en;
+}
 
 // The validator. ONE implementation, run by the builder canvas, the SSR engine and `iox-cms`.
 //
@@ -180,14 +489,14 @@ const DEFAULT_EN_MESSAGES = Object.freeze({
  * number" at someone who simply left it blank — the single most common validation-UX bug.
  * The FIRST failure wins: a visitor fixes one thing at a time.
  */
-function validateField(value, spec, form = {}) {
+function validateField(value, spec, form = {}, options = {}) {
     const rules = effectiveRules(spec);
     const empty = isEmpty(value, spec.control);
     for (const rule of rules) {
         const appliesToEmpty = rule.name === RuleName.Required || rule.name === RuleName.Accepted;
         if (empty && !appliesToEmpty)
             continue;
-        const failure = check(rule, value, spec, form);
+        const failure = check(rule, value, spec, form, options);
         if (failure) {
             return {
                 valid: false,
@@ -202,16 +511,33 @@ function validateField(value, spec, form = {}) {
  * Validate a whole submission. Every field is checked (not short-circuited at the first bad one) so
  * the visitor sees every problem at once instead of fixing them one reload at a time.
  */
-function validateForm(values, spec) {
+function validateForm(values, spec, options = {}) {
     const errors = {};
     for (const field of spec.fields ?? []) {
-        const result = validateField(values?.[field.name], field, values ?? {});
+        const result = validateField(values?.[field.name], field, values ?? {}, options);
         if (!result.valid) {
             errors[field.name] = { messageKey: result.messageKey, params: result.params };
         }
     }
     return { valid: Object.keys(errors).length === 0, errors };
 }
+/**
+ * The answers in the shape each field takes (premium N1): a field that takes several answers gets a LIST (one answer
+ * posted on its own is a list of one; nothing is an empty list). ONE reading for a host's transport and the server,
+ * before validation — `isMultiValueField` decides. A single-answer field is left as posted: two answers to it is the
+ * validator's to refuse, never quietly cut to one.
+ */
+function normaliseAnswers(values, spec) {
+    const out = { ...(values ?? {}) };
+    for (const field of spec.fields ?? []) {
+        if (!isMultiValueField(field) || field.control === ControlType.File)
+            continue;
+        if (!(field.name in out))
+            continue;
+        out[field.name] = chosen(out[field.name]);
+    }
+    return out;
+}
 /** The name of the first field with an error, in spec order — what the browser should focus. */
 function firstInvalidField(spec, errors) {
     for (const field of spec.fields ?? [])
@@ -240,8 +566,54 @@ function effectiveRules(spec) {
     if (preset && !has(RuleName.Pattern)) {
         implied.push({ name: RuleName.Pattern, params: { preset } });
     }
+    // An answer to a field of CHOICES must be one the form offered (premium N1) — only when the options are the
+    // field's own: options from a data source are not known here, so they are not judged.
+    if (OPTION_CONTROLS.has(spec.control) && !spec.optionsSource && (spec.options ?? []).length) {
+        implied.push({ name: RuleName.OneOf });
+    }
+    // A Date's answer is a real day before any bound is asked about it (premium N8).
+    if (spec.control === ControlType.Date)
+        implied.push({ name: RuleName.ValidDate });
     return [...implied, ...declared];
 }
+/** "Required" in the words of the control: choose, not fill in. */
+function requiredMessageKey(spec) {
+    if (spec.control === ControlType.Date)
+        return CHOICE_MESSAGE_KEYS.Date;
+    if (isMultiValueField(spec) && spec.control === ControlType.Choices)
+        return CHOICE_MESSAGE_KEYS.Some;
+    if (OPTION_CONTROLS.has(spec.control))
+        return CHOICE_MESSAGE_KEYS.One;
+    return RULE_MESSAGE_KEYS[RuleName.Required];
+}
+/** The answers a field of choices gave, as a list — a single answer is a list of one, nothing is an empty list. */
+function chosen(value) {
+    if (Array.isArray(value))
+        return value;
+    return value === null || value === undefined || value === '' ? [] : [value];
+}
+/** The `oneOf` verdict: every answer is one of the options, and a single-answer field got at most one. */
+function isOneOf(value, spec) {
+    const offered = new Set((spec.options ?? []).map(o => String(o.value)));
+    const answers = chosen(value);
+    if (!isMultiValueField(spec) && answers.length > 1)
+        return false;
+    return answers.every(a => (typeof a === 'string' || typeof a === 'number') && offered.has(String(a)));
+}
+/** A Date bound, as a failure or null — the bound resolved against today, widened by the server's slack. */
+function dateBoundFailure(rule, value, options) {
+    const today = options.today ?? todayIso();
+    const slack = Math.max(0, Math.trunc(options.dateSlackDays ?? 0));
+    const bound = resolveDateBound(rule.params, today);
+    if (!bound || !isIsoDate(value))
+        return null;
+    const day = String(value);
+    if (rule.name === RuleName.Min && day < addDaysIso(bound, -slack))
+        return { messageKey: DATE_MESSAGE_KEYS.Min };
+    if (rule.name === RuleName.Max && day > addDaysIso(bound, slack))
+        return { messageKey: DATE_MESSAGE_KEYS.Max };
+    return null;
+}
 /** Empty means "the visitor gave us nothing" — per control type, not a blanket falsy check. */
 function isEmpty(value, control) {
     if (value === null || value === undefined)
@@ -254,15 +626,24 @@ function isEmpty(value, control) {
         return value.trim() === '';
     return false;
 }
-function check(rule, value, spec, form) {
+function check(rule, value, spec, form, options) {
     const fail = (messageKey, params) => ({ messageKey, params });
     const defaultKey = RULE_MESSAGE_KEYS[rule.name];
     const n = Number(rule.params?.['n']);
+    // A Date's min / max are DAYS (an ISO day or an offset from today), never a number to parseFloat — `2026-11-06`
+    // read as 2026 is what the numeric reading did.
+    if ((rule.name === RuleName.Min || rule.name === RuleName.Max) && spec.control === ControlType.Date && isDateBoundParams(rule.params)) {
+        return dateBoundFailure(rule, value, options);
+    }
     switch (rule.name) {
         case RuleName.Required:
-            return isEmpty(value, spec.control) ? fail(defaultKey) : null;
+            return isEmpty(value, spec.control) ? fail(requiredMessageKey(spec)) : null;
         case RuleName.Accepted:
             return value === true ? null : fail(defaultKey);
+        case RuleName.OneOf:
+            return isOneOf(value, spec) ? null : fail(defaultKey);
+        case RuleName.ValidDate:
+            return isIsoDate(value) ? null : fail(defaultKey);
         case RuleName.MinLength:
             return text(value).length < n ? fail(defaultKey, { n }) : null;
         case RuleName.MaxLength:
@@ -406,6 +787,68 @@ function uniqueFieldName(name, taken) {
         n++;
     return `${name}${n}`;
 }
+/** A Field's own key, before the form makes it unique: the author's override, else derived from the label. */
+function baseFieldName(props) {
+    const own = typeof props?.name === 'string' ? props.name : '';
+    return own || deriveFieldName(String(props?.label ?? ''));
+}
+/**
+ * THE naming rule (vectoriox/iox-ui#43): a form's fields, in document order, each its base name made unique against
+ * the names before it — `email`, `email2`. The spec (`collectFormSpec`), the component path's runtime and the engine's
+ * string renderer all name a field from here, so the input's `name` and the saved spec's key can never differ.
+ */
+function uniqueFieldNames(baseNames) {
+    const taken = new Set();
+    return baseNames.map(base => {
+        const name = uniqueFieldName(base, taken);
+        taken.add(name);
+        return name;
+    });
+}
+/** The submitted name of every Field of a Form, in document order — `uniqueFieldNames` over its fields. */
+function formFieldNames(node) {
+    if (!node || node.type !== FORM_NODE_TYPE)
+        return [];
+    return uniqueFieldNames(collectFieldNodes(node.children ?? []).map(f => baseFieldName(f.props)));
+}
+/** Each Field node of a Form → the name it submits under (`formFieldNames`, by node). */
+function formFieldNameMap(node) {
+    const out = new Map();
+    if (!node || node.type !== FORM_NODE_TYPE)
+        return out;
+    const fields = collectFieldNodes(node.children ?? []);
+    uniqueFieldNames(fields.map(f => baseFieldName(f.props))).forEach((name, i) => out.set(fields[i], name));
+    return out;
+}
+/**
+ * A Field's spec from its props and the name its form gave it — ONE reading for the saved spec and the component
+ * path's runtime (it was written twice: `IoxFieldComponent.toSpec` never carried the options source, the default or a
+ * Date's bounds). A Date's Earliest / Latest (`earliest` / `latest`) become its `min` / `max` rules (premium N8).
+ */
+function fieldSpecOf(props, name) {
+    const p = props ?? {};
+    const control = p['control'] || ControlType.Text;
+    const spec = { name, control, label: p['label'] ?? '' };
+    if (p['required'])
+        spec.required = true;
+    const declared = normaliseRules(p['rules']);
+    const bounds = control === ControlType.Date
+        ? dateBoundRules(p['earliest'], p['latest']).filter(b => !declared.some(r => r.name === b.name))
+        : [];
+    const rules = [...declared, ...bounds];
+    if (rules.length)
+        spec.rules = rules;
+    const options = fieldOptionsOf(p);
+    if (options.length)
+        spec.options = options;
+    if (p['optionsSource'])
+        spec.optionsSource = p['optionsSource'];
+    if (p['defaultValue'] !== undefined && p['defaultValue'] !== '')
+        spec.defaultValue = p['defaultValue'];
+    if (control === ControlType.Choices && p['multiple'] === true)
+        spec.multiple = true;
+    return spec;
+}
 /**
  * Walk a Form subtree and produce its spec.
  *
@@ -416,13 +859,9 @@ function collectFormSpec(node) {
     if (!node || node.type !== FORM_NODE_TYPE)
         return null;
     const props = node.props ?? {};
-    const fields = [];
-    const taken = new Set();
-    for (const fieldNode of collectFieldNodes(node.children ?? [])) {
-        const spec = toFieldSpec(fieldNode, taken);
-        taken.add(spec.name);
-        fields.push(spec);
-    }
+    const fieldNodes = collectFieldNodes(node.children ?? []);
+    const names = uniqueFieldNames(fieldNodes.map(f => baseFieldName(f.props)));
+    const fields = fieldNodes.map((f, i) => fieldSpecOf(f.props, names[i]));
     return {
         formId: props['formId'] ?? '',
         name: props['name'] ?? 'Form',
@@ -453,31 +892,6 @@ function collectFieldNodes(nodes) {
     }
     return out;
 }
-function toFieldSpec(node, taken) {
-    const props = node.props ?? {};
-    const label = props['label'] ?? '';
-    // The author's explicit override wins; otherwise derive from the label.
-    const name = uniqueFieldName(props['name'] || deriveFieldName(label), taken);
-    const spec = {
-        name,
-        control: props['control'] ?? ControlType.Text,
-        label,
-    };
-    if (props['required'])
-        spec.required = true;
-    const rules = normaliseRules(props['rules']);
-    if (rules.length)
-        spec.rules = rules;
-    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'];
-    }
-    return spec;
-}
 /** Drop anything that isn't a rule we know — a hand-edited page must not break validation. */
 function normaliseRules(raw) {
     if (!Array.isArray(raw))
@@ -606,8 +1020,9 @@ const TEXTUAL = [
     ControlType.Text, ControlType.Email, ControlType.Tel, ControlType.Url,
     ControlType.Password, ControlType.Textarea,
 ];
-/** Controls with a comparable magnitude. */
-const NUMERIC = [ControlType.Number, ControlType.Date, ControlType.Time, ControlType.Range];
+/** Controls with a comparable magnitude. A Date is not one of them: its bounds are DAYS (an ISO day or "N days from
+ *  today", `dates.ts`), set by the Field's own Earliest / Latest — a number box here read `2026-11-06` as 2026. */
+const NUMERIC = [ControlType.Number, ControlType.Time, ControlType.Range];
 const RULE_DESCRIPTORS = Object.freeze([
     {
         name: RuleName.MinLength, labelKey: 'forms.rules.minLength',
@@ -794,12 +1209,16 @@ function parseClientFormSpec(raw) {
         return null;
     }
 }
-/** While its form sends, a submit button is busy, and disabled unless its author turned that off — ONE rule for the
- *  canvas's Sending state, the component path and the string path. Its "Sending…" label is the shared CSS's, keyed on
- *  the same `data-iox-state`. */
+/**
+ * While its form sends, a submit button is busy, and disabled unless its author turned that off; once the form has
+ * SENT it stays disabled, reading "Sent" with its check — nothing sends a lead twice (premium N2, the success in place).
+ * ONE rule for the canvas's Sending / Success states, the component path and the string path. Its labels are the shared
+ * CSS's, keyed on the same `data-iox-state`.
+ */
 function submitButtonView(state, disableWhileSubmitting = true) {
     const busy = state === FormRenderState.Submitting;
-    return { busy, disabled: busy && disableWhileSubmitting !== false };
+    const sent = state === FormRenderState.Success;
+    return { busy, disabled: sent || (busy && disableWhileSubmitting !== false) };
 }
 /** On a submit button whose author turned "Disable while sending" off. */
 const SUBMIT_KEEP_ENABLED_ATTRIBUTE = 'data-iox-keep-enabled';
@@ -808,17 +1227,30 @@ var SubmitLabelClass;
     SubmitLabelClass["Labels"] = "iox-submit__labels";
     SubmitLabelClass["Idle"] = "iox-submit__idle";
     SubmitLabelClass["Busy"] = "iox-submit__busy";
+    SubmitLabelClass["Sent"] = "iox-submit__sent";
+    SubmitLabelClass["Check"] = "iox-submit__check";
 })(SubmitLabelClass || (SubmitLabelClass = {}));
+/** The check the Sent label draws once (premium N2 — the rare-tier beat, Emil 135/136): one stroke, `pathLength` 100 so
+ *  the shared CSS draws it by `stroke-dashoffset` whatever its real length. */
+const SUBMIT_CHECK_SVG = `<svg class="${SubmitLabelClass.Check}" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false">` +
+    '<path d="M5 12.5l4.5 4.5L19 7.5" pathLength="100" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+/** "Sent" in the site's language, for a button whose author wrote no Sent words (a string-rendered site has no
+ *  translation service — the document's `lang` picks, like the date picker's words). */
+const SENT_WORDS = Object.freeze({ en: 'Sent', he: 'נשלח' });
+function sentWord(lang) {
+    const language = String(lang ?? '').toLowerCase().split(/[-_]/)[0];
+    return SENT_WORDS[language === 'iw' ? 'he' : language] ?? SENT_WORDS['en'];
+}
 /**
- * A submit button's words, as markup: its label, or — when it has a "While sending" label — both, stacked in one
- * cell (the button keeps the longer one's width and never jumps). The string renderer's copy of
- * `IoxSubmitButtonComponent`'s template; `escape` is the renderer's.
+ * A submit button's words, as markup: its three labels stacked in one grid cell (the button keeps the longest one's
+ * width and never jumps), each shown by the form's state through the shared CSS — swapped in place behind a 2px blur
+ * (Emil 87/139). The string renderer's copy of `IoxSubmitButtonComponent`'s template; `escape` is the renderer's.
  */
-function submitButtonLabelsHtml(label, loadingLabel, escape) {
-    if (!loadingLabel)
-        return escape(label);
-    return `<span class="${SubmitLabelClass.Labels}"><span class="${SubmitLabelClass.Idle}">${escape(label)}</span>` +
-        `<span class="${SubmitLabelClass.Busy}">${escape(loadingLabel)}</span></span>`;
+function submitButtonLabelsHtml(labels, escape) {
+    const busy = labels.busy || labels.idle;
+    return `<span class="${SubmitLabelClass.Labels}"><span class="${SubmitLabelClass.Idle}">${escape(labels.idle)}</span>` +
+        `<span class="${SubmitLabelClass.Busy}">${escape(busy)}</span>` +
+        `<span class="${SubmitLabelClass.Sent}">${SUBMIT_CHECK_SVG}<span>${escape(labels.sent)}</span></span></span>`;
 }
 const FORM_HONEYPOT_CLASS = 'iox-form__hp';
 const FORM_ANNOUNCER_ATTRIBUTE = 'data-iox-form-announcer';
@@ -846,7 +1278,14 @@ var FormPresetId;
     FormPresetId["Newsletter"] = "newsletter";
     FormPresetId["Application"] = "application";
     FormPresetId["Booking"] = "booking";
+    /** Premium N2: modelled on Doron's iox.studio brief — name, a phone that is also WhatsApp, the business, what they
+     *  need and a budget as chips, Send with WhatsApp beside it. */
+    FormPresetId["Lead"] = "lead";
 })(FormPresetId || (FormPresetId = {}));
+/** The presets a generated plan may name (the plan wire's `form` enum) — every preset not held back by `inPlan`. */
+function planFormPresetIds() {
+    return FORM_PRESETS.filter(p => p.inPlan !== false).map(p => p.id);
+}
 // forms-core is imported by both renderers (the field runtime), and a renderer that never reads the presets
 
 // to it by form-presets.spec) — a read of `FormPresetId.X` counts as a side effect to a bundler and kept the
@@ -902,7 +1341,8 @@ const FORM_PRESETS = /* @__PURE__ */ Object.freeze([
         fields: [
             { label: 'Name', control: 'text', required: true },
             { label: 'Email', control: 'email', required: true },
-            { label: 'Date', control: 'date', required: true },
+            // The first day a booking may ask for is today (N8): the calendar refuses the past.
+            { label: 'Date', control: 'date', required: true, earliest: '0' },
             { label: 'People', control: 'number', required: true },
             { label: 'Notes', control: 'textarea', rows: 3, help: 'Allergies, access needs, anything useful' },
         ],
@@ -910,6 +1350,27 @@ const FORM_PRESETS = /* @__PURE__ */ Object.freeze([
         successText: 'Request received — we’ll confirm by email.',
         errorText: 'We couldn’t send your request. Please try again.',
     },
+    {
+        id: 'lead', name: 'Lead', icon: 'ph-thin ph-handshake',
+        description: 'Name, phone, the business and what they need, as chips. Stored, with WhatsApp beside Send.',
+        formName: 'Lead form',
+        fields: [
+            { label: 'Name', control: 'text', required: true },
+            { label: 'Phone / WhatsApp', control: 'tel', required: true },
+            { label: 'What is your business?', control: 'text' },
+            // The words ARE the values: what arrives in the inbox and the email reads as the visitor chose it.
+            { label: 'What do you need?', control: 'choices', multiple: true,
+                optionsText: 'Website\nBranding\nPhotos & video\nNot sure yet' },
+            // Neutral sizes the author renames — never a price or a currency a studio could be held to.
+            { label: 'Estimated budget', control: 'choices',
+                optionsText: 'Small project\nMedium\nLarge\nNot sure yet' },
+        ],
+        submitLabel: 'Send',
+        successText: 'Thanks — we’ll get back to you soon.',
+        errorText: 'We couldn’t send your details. Please try again — your answers are still here.',
+        channel: { kind: 'whatsapp', label: 'Message us on WhatsApp' },
+        inPlan: false,
+    },
 ]);
 /** The preset with this id, or undefined. */
 function formPresetById(id) {
@@ -990,6 +1451,222 @@ function findFormContentInHosts(roots) {
     return out;
 }
 
+/**
+ * THE SECOND CHANNEL (premium components N2) — "or message us on WhatsApp", the button a form keeps beside its submit,
+ * before AND after it sends.
+ *
+ * It is an ordinary node in the form's actions row (a ButtonBlock that links) carrying the ROLE `form.channel`, so the
+ * shared CSS keeps it on screen when the form succeeds and the Publishable gate can find it. Its address is the
+ * OWNER's fact: the builder builds it from what the author types (a number, an address, a link) and never invents one —
+ * inserted empty, it blocks publishing until it is filled (generation-core `auditSite`, `empty-channel`).
+ *
+ * Framework-free, like the rest of forms-core.
+ */
+/** The role the channel's node carries (`iox-role-form-channel`). */
+const FORM_CHANNEL_ROLE = 'form.channel';
+/** The role of the row that holds the submit button and the channel (`iox-role-form-actions`). */
+const FORM_ACTIONS_ROLE = 'form.actions';
+var ChannelKind;
+(function (ChannelKind) {
+    ChannelKind["WhatsApp"] = "whatsapp";
+    ChannelKind["Phone"] = "phone";
+    ChannelKind["Email"] = "email";
+    ChannelKind["Link"] = "link";
+})(ChannelKind || (ChannelKind = {}));
+const CHANNEL_KINDS = [ChannelKind.WhatsApp, ChannelKind.Phone, ChannelKind.Email, ChannelKind.Link];
+const WHATSAPP_PREFIX = 'https://wa.me/';
+const TEL_PREFIX = 'tel:';
+const MAILTO_PREFIX = 'mailto:';
+const HTTP = /^https?:\/\//i;
+const EMAIL = /^[^\s@]+@[^\s@.]+(\.[^\s@.]+)+$/;
+/** A phone number's own characters; anything else is typing noise (spaces, dashes, brackets). */
+const DIGITS = /\d/g;
+/** WhatsApp's click-to-chat wants the full international number: digits only, no `+`, no leading `00`. */
+const INTERNATIONAL_00 = /^00/;
+/** A number shorter than this is not a number anyone can be reached on. */
+const MIN_DIGITS = 6;
+/**
+ * The address a channel links to, built from what the author typed — or `''` when it gives nothing a visitor could
+ * use (no digits, not an email). Never a guess: a WhatsApp number keeps exactly the digits typed (the panel asks for
+ * the country code), a link without a scheme gets `https://`.
+ */
+function channelHref(kind, input) {
+    const raw = typeof input === 'string' ? input.trim() : '';
+    if (!raw)
+        return '';
+    switch (kind) {
+        case ChannelKind.WhatsApp: {
+            const digits = (raw.match(DIGITS) ?? []).join('').replace(INTERNATIONAL_00, '');
+            return digits.length >= MIN_DIGITS ? `${WHATSAPP_PREFIX}${digits}` : '';
+        }
+        case ChannelKind.Phone: {
+            const digits = (raw.match(DIGITS) ?? []).join('');
+            if (digits.length < MIN_DIGITS)
+                return '';
+            return `${TEL_PREFIX}${raw.startsWith('+') ? '+' : ''}${digits}`;
+        }
+        case ChannelKind.Email:
+            return EMAIL.test(raw) ? `${MAILTO_PREFIX}${raw}` : '';
+        case ChannelKind.Link:
+            return HTTP.test(raw) ? raw : `https://${raw.replace(/^\/+/, '')}`;
+        default:
+            return '';
+    }
+}
+/** A channel's address back into what the panel shows: its kind and the value the author typed. */
+function parseChannelHref(href) {
+    const text = typeof href === 'string' ? href.trim() : '';
+    if (text.toLowerCase().startsWith(WHATSAPP_PREFIX))
+        return { kind: ChannelKind.WhatsApp, value: text.slice(WHATSAPP_PREFIX.length).split(/[?#]/)[0] };
+    if (text.toLowerCase().startsWith(TEL_PREFIX))
+        return { kind: ChannelKind.Phone, value: text.slice(TEL_PREFIX.length) };
+    if (text.toLowerCase().startsWith(MAILTO_PREFIX))
+        return { kind: ChannelKind.Email, value: text.slice(MAILTO_PREFIX.length).split('?')[0] };
+    if (!text)
+        return { kind: ChannelKind.WhatsApp, value: '' };
+    return { kind: ChannelKind.Link, value: text };
+}
+/** True when the channel goes somewhere a visitor can use — the gate's "filled". */
+function isChannelFilled(href) {
+    const { kind, value } = parseChannelHref(href);
+    return !!value && channelHref(kind, value) !== '';
+}
+/** A WhatsApp or web channel opens in a new tab; a call or an email hands over to the device. */
+function channelOpensNewTab(kind) {
+    return kind === ChannelKind.WhatsApp || kind === ChannelKind.Link;
+}
+
+/**
+ * A Field as MARKUP — the string renderer's copy of `IoxFieldComponent`'s template, in ONE place (it lived in the
+ * engine's `layout-renderer.service.ts`, a second copy beside the component). The engine's string path writes it; the
+ * component mirrors it element for element, so hydration replaces like with like and the shared CSS (iox-forms.css,
+ * the contract's field baseline) reaches both.
+ *
+ * Choices (premium N1): a `<fieldset>` whose `<legend>` is the label, its options native radios (one answer — the
+ * arrow keys move and pick, with no script) or checkboxes (several), each inside a `<label>` that IS the chip; the
+ * input is visually hidden, never removed. Date (N8): a `<button>` that says the date in words and opens the look's
+ * calendar, with a hidden input carrying the ISO day — the raw SSR is the final markup (nothing shifts on hydrate).
+ *
+ * Framework-free, like the rest of forms-core: `escape` is the caller's.
+ */
+/** The classes the markup carries — the runtimes and the shared CSS key on these, never on a literal. */
+var FieldClass;
+(function (FieldClass) {
+    FieldClass["Root"] = "iox-field";
+    FieldClass["Label"] = "iox-field__label";
+    FieldClass["LabelHidden"] = "iox-field__label--hidden";
+    FieldClass["Required"] = "iox-field__required";
+    FieldClass["Control"] = "iox-field__control";
+    FieldClass["Help"] = "iox-field__help";
+    FieldClass["Error"] = "iox-field__error";
+    FieldClass["Group"] = "iox-field__group";
+    FieldClass["Option"] = "iox-field__option";
+    FieldClass["Choices"] = "iox-field__choices";
+    FieldClass["ChoicesChips"] = "iox-field__choices--chips";
+    FieldClass["ChoicesList"] = "iox-field__choices--list";
+    FieldClass["Chips"] = "iox-field__chips";
+    FieldClass["Chip"] = "iox-field__chip";
+    FieldClass["ChipInput"] = "iox-field__control--chip";
+    FieldClass["DateButton"] = "iox-field__control--date";
+    FieldClass["DateValue"] = "iox-field__date-value";
+    FieldClass["DateIcon"] = "iox-field__date-icon";
+    FieldClass["DateInput"] = "iox-field__date-input";
+})(FieldClass || (FieldClass = {}));
+/** On the date button: the raw Earliest / Latest (`'0'`, an ISO day), resolved by the visitor's own today. */
+const DATE_MIN_ATTRIBUTE = 'data-iox-date-min';
+const DATE_MAX_ATTRIBUTE = 'data-iox-date-max';
+/** On the date's words while no day is chosen (the placeholder's colour keys on it). */
+const DATE_EMPTY_ATTRIBUTE = 'data-iox-empty';
+/** The calendar glyph inside the date button: one path set, drawn in currentColor, never announced. */
+const DATE_ICON_SVG = '<svg class="iox-field__date-icon" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false">' +
+    '<rect x="3.5" y="5" width="17" height="15.5" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.6"/>' +
+    '<path d="M3.5 10h17M8 3v4M16 3v4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>';
+/** The controls that are a plain `<input type=…>`; anything else unknown is a text input. */
+const INPUT_TYPES = new Set(['email', 'tel', 'url', 'number', 'password', 'time', 'file', 'hidden']);
+/** The `<input type>` of a control that renders as a plain input. */
+function inputTypeOf(control) {
+    return INPUT_TYPES.has(control) ? control : 'text';
+}
+/** A Choices field's appearance; anything unknown reads as chips (the default). */
+function choiceAppearanceOf(props) {
+    return props?.['appearance'] === ChoiceAppearance.List ? ChoiceAppearance.List : ChoiceAppearance.Chips;
+}
+/** A Field's whole element, as the string renderer writes it. */
+function fieldHtml(props, options) {
+    const p = props ?? {};
+    const { name, id, escape: esc } = options;
+    const control = String(p['control'] ?? ControlType.Text);
+    const required = !!p['required'];
+    const help = p['help'] ? `<p class="${FieldClass.Help}" id="${id}-help">${esc(String(p['help']))}</p>` : '';
+    const describedBy = p['help'] ? ` aria-describedby="${id}-help"` : '';
+    const labelClass = p['labelHidden'] ? `${FieldClass.Label} ${FieldClass.LabelHidden}` : FieldClass.Label;
+    const mark = required ? `<span class="${FieldClass.Required}" aria-hidden="true">*</span>` : '';
+    const text = esc(String(p['label'] ?? ''));
+    const label = `<label class="${labelClass}" id="${id}-label" for="${id}">${text}${mark}</label>`;
+    const hidden = control === ControlType.Hidden ? ' hidden' : '';
+    const open = `<div class="${FieldClass.Root} ${options.cls}" data-iox-field="${esc(name)}"${hidden}${options.attrs ?? ''}>`;
+    if (control === ControlType.Choices) {
+        return `${open}${choicesHtml(p, options, `<legend class="${labelClass}" id="${id}-label">${text}${mark}</legend>`, describedBy)}${help}</div>`;
+    }
+    return `${open}${label}${controlHtml(p, control, options, describedBy)}${help}</div>`;
+}
+function controlHtml(p, control, options, describedBy) {
+    const { id, escape: esc } = options;
+    const name = esc(options.name);
+    const required = p['required'] ? ' required' : '';
+    const placeholder = p['placeholder'] ? ` placeholder="${esc(String(p['placeholder']))}"` : '';
+    const choices = fieldOptionsOf(p);
+    const option = (o) => `<option value="${esc(o.value)}">${esc(o.label)}</option>`;
+    const num = (v, d) => (Number.isFinite(Number(v)) && v !== '' && v !== null ? Number(v) : d);
+    switch (control) {
+        case ControlType.Textarea:
+            return `<textarea class="${FieldClass.Control}" id="${id}" name="${name}" rows="${num(p['rows'], 4)}"${placeholder}${required}${describedBy}></textarea>`;
+        case ControlType.Select:
+            return `<select class="${FieldClass.Control}" id="${id}" name="${name}"${required}${describedBy}>` +
+                `<option value="">${esc(String(p['placeholder'] ?? ''))}</option>${choices.map(option).join('')}</select>`;
+        case ControlType.Switch:
+            return `<input class="${FieldClass.Control} iox-field__control--switch" type="checkbox" role="switch" id="${id}" name="${name}"${describedBy}>`;
+        case ControlType.Range:
+            return `<input class="${FieldClass.Control} iox-field__control--range" type="range" id="${id}" name="${name}" ` +
+                `min="${num(p['rangeMin'], 0)}" max="${num(p['rangeMax'], 100)}" step="${num(p['rangeStep'], 1)}"${describedBy}>`;
+        case ControlType.Radio:
+            return `<div class="${FieldClass.Group}" role="radiogroup" aria-labelledby="${id}-label">` +
+                choices.map(o => `<label class="${FieldClass.Option}"><input class="${FieldClass.Control} iox-field__control--radio" type="radio" name="${name}" ` +
+                    `value="${esc(o.value)}"><span>${esc(o.label)}</span></label>`).join('') + `</div>`;
+        case ControlType.Checkbox:
+            return `<input class="${FieldClass.Control} iox-field__control--checkbox" type="checkbox" id="${id}" name="${name}"${required}${describedBy}>`;
+        case ControlType.Date:
+            return dateHtml(p, options, describedBy);
+        default:
+            return `<input class="${FieldClass.Control}" id="${id}" name="${name}" type="${inputTypeOf(control)}"${placeholder}${required}${describedBy}>`;
+    }
+}
+/** A Choices field's fieldset: the legend, then the options as chips or as a list. */
+function choicesHtml(p, options, legend, describedBy) {
+    const { escape: esc } = options;
+    const name = esc(options.name);
+    const multiple = p['multiple'] === true;
+    const type = multiple ? 'checkbox' : 'radio';
+    const chips = choiceAppearanceOf(p) === ChoiceAppearance.Chips;
+    const items = fieldOptionsOf(p).map(o => chips
+        ? `<label class="${FieldClass.Chip}"><input class="${FieldClass.Control} ${FieldClass.ChipInput}" type="${type}" name="${name}" value="${esc(o.value)}"><span>${esc(o.label)}</span></label>`
+        : `<label class="${FieldClass.Option}"><input class="${FieldClass.Control}" type="${type}" name="${name}" value="${esc(o.value)}"><span>${esc(o.label)}</span></label>`).join('');
+    const look = chips ? FieldClass.ChoicesChips : FieldClass.ChoicesList;
+    const row = chips ? FieldClass.Chips : FieldClass.Group;
+    return `<fieldset class="${FieldClass.Choices} ${look}"${describedBy}>${legend}<div class="${row}">${items}</div></fieldset>`;
+}
+/** The date picker's button + hidden input. The calendar itself is the runtime's, opened on press. */
+function dateHtml(p, options, describedBy) {
+    const { id, escape: esc } = options;
+    const words = datePickerWords(options.lang);
+    const empty = esc(String(p['placeholder'] || words.choose));
+    const bound = (attr, raw) => (typeof raw === 'string' && raw.trim() !== '') || typeof raw === 'number' ? ` ${attr}="${esc(String(raw).trim())}"` : '';
+    return `<button type="button" class="${FieldClass.Control} ${FieldClass.DateButton}" id="${id}" aria-haspopup="dialog" aria-expanded="false" ` +
+        `aria-labelledby="${id}-label ${id}-value"${describedBy}${bound(DATE_MIN_ATTRIBUTE, p['earliest'])}${bound(DATE_MAX_ATTRIBUTE, p['latest'])}>` +
+        `<span class="${FieldClass.DateValue}" id="${id}-value" ${DATE_EMPTY_ATTRIBUTE}>${empty}</span>${DATE_ICON_SVG}</button>` +
+        `<input type="hidden" class="${FieldClass.DateInput}" name="${esc(options.name)}" value="">`;
+}
+
 /*
  * @vectoriox/iox-ui/forms-core — the shared, FRAMEWORK-FREE core of the forms feature.
  *
@@ -1006,5 +1683,5 @@ function findFormContentInHosts(roots) {
  * Generated bundle index. Do not edit.
  */
 
-export { ControlType, DEFAULT_EN_MESSAGES, FIELD_GROUP_NODE_TYPE, FIELD_NODE_TYPE, FORM_ANNOUNCER_ATTRIBUTE, FORM_CONTENT_TYPES, FORM_ERROR_KEYS, FORM_FIELDS_ATTRIBUTE, FORM_HONEYPOT_CLASS, FORM_NODE_TYPE, FORM_PRESETS, FORM_STATE_ATTRIBUTE, FeedbackTiming, FormPresetId, FormRenderState, HONEYPOT_FIELD, IMPLIED_PATTERN, INITIAL_FORM_STATE, INTERACTIVE_HOST_TAGS, InteractiveTag, 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, SUBMIT_BUTTON_NODE_TYPE, SUBMIT_KEEP_ENABLED_ATTRIBUTE, SubmitLabelClass, addableRules, applyServerErrors, clientFormSpec, collectFieldNodes, collectFormSpec, deriveFieldName, failureAnnouncement, fieldOptionsOf, findFormContentInHosts, firstInvalidField, formChromeHtml, formContentInHost, formPresetById, interpretSubmitResponse, isFormContent, isInteractiveHost, onFieldBlur, onFieldChange, onSubmitAttempt, parseClientFormSpec, parseFieldOptions, resetFormState, rulesFor, shouldShowError, submitButtonLabelsHtml, submitButtonView, submitEndpointPath, submitOutcome, uniqueFieldName, validateField, validateForm, withAntiSpamFields };
+export { CALENDAR_ROWS, CHANNEL_KINDS, CHOICE_MESSAGE_KEYS, CalendarKey, ChannelKind, ChoiceAppearance, ControlType, DATE_EMPTY_ATTRIBUTE, DATE_ICON_SVG, DATE_MAX_ATTRIBUTE, DATE_MESSAGE_KEYS, DATE_MIN_ATTRIBUTE, DATE_PICKER_WORDS, DEFAULT_EN_MESSAGES, FIELD_GROUP_NODE_TYPE, FIELD_NODE_TYPE, FORM_ACTIONS_ROLE, FORM_ANNOUNCER_ATTRIBUTE, FORM_CHANNEL_ROLE, FORM_CONTENT_TYPES, FORM_ERROR_KEYS, FORM_FIELDS_ATTRIBUTE, FORM_HONEYPOT_CLASS, FORM_NODE_TYPE, FORM_PRESETS, FORM_STATE_ATTRIBUTE, FeedbackTiming, FieldClass, FormPresetId, FormRenderState, HONEYPOT_FIELD, IMPLIED_PATTERN, INITIAL_FORM_STATE, INTERACTIVE_HOST_TAGS, InteractiveTag, MESSAGE_NAMESPACE, OPTION_CONTROLS, PATTERN_MESSAGE_KEYS, PATTERN_PRESETS, PATTERN_PRESET_OPTIONS, PatternPreset, RENDERED_AT_FIELD, RULE_DESCRIPTORS, RULE_MESSAGE_KEYS, RuleName, RuleParamKind, STORE_ACTION, SUBMIT_BUTTON_NODE_TYPE, SUBMIT_CHECK_SVG, SUBMIT_KEEP_ENABLED_ATTRIBUTE, SUBMIT_MESSAGE_KEYS, SubmitLabelClass, addDaysIso, addMonthsIso, addableRules, applyServerErrors, baseFieldName, calendarKeyTarget, calendarMonth, channelHref, channelOpensNewTab, choiceAppearanceOf, clampIso, clientFormSpec, collectFieldNodes, collectFormSpec, dateBoundRules, dateOfIso, datePickerWords, deriveFieldName, failureAnnouncement, fieldDateRange, fieldHtml, fieldOptionsOf, fieldSpecOf, findFormContentInHosts, firstInvalidField, formChromeHtml, formContentInHost, formFieldNameMap, formFieldNames, formPresetById, formatDateInWords, inputTypeOf, interpretSubmitResponse, isChannelFilled, isDateBoundParams, isDateField, isFormContent, isInteractiveHost, isIsoDate, isMultiValueField, isoOfDate, normaliseAnswers, onFieldBlur, onFieldChange, onSubmitAttempt, parseChannelHref, parseClientFormSpec, parseDateBound, parseFieldOptions, planFormPresetIds, resetFormState, resolveDateBound, rulesFor, sentWord, shouldShowError, submitButtonLabelsHtml, submitButtonView, submitEndpointPath, submitOutcome, todayIso, uniqueFieldName, uniqueFieldNames, validateField, validateForm, weekStartFor, withAntiSpamFields };
 //# sourceMappingURL=vectoriox-iox-ui-forms-core.mjs.map