@vectoriox/iox-ui 5.82.2 → 5.83.1

package/fesm2022/vectoriox-iox-ui.mjs

@@ -3757,6 +3757,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";
@@ -3778,7 +3783,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) {
@@ -3819,8 +3837,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.
 //
@@ -3851,6 +3882,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
@@ -3896,8 +3947,266 @@ 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`.
 //
 // Client-side validation is UX; server-side validation is truth. Because both call this function,
@@ -3914,14 +4223,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,
@@ -3936,16 +4245,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 ?? [])
@@ -3974,8 +4300,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)
@@ -3988,15 +4360,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:
@@ -4140,6 +4521,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.
  *
@@ -4150,13 +4593,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',
@@ -4187,31 +4626,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))
@@ -4340,8 +4754,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',
@@ -4528,12 +4943,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';
@@ -4542,17 +4961,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 = {}));
-/**
- * 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.
- */
-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>`;
+/** 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 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(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';
@@ -4580,7 +5012,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
@@ -4636,7 +5075,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' },
         ],
@@ -4644,6 +5084,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) {
@@ -4724,6 +5185,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.
  *
@@ -4758,7 +5435,7 @@ const defaultMessageResolver = (key, params) => {
  */
 class FormRuntimeService {
     constructor() {
-        /** Registered fields, in DOM order — the order the spec and focus-first-invalid depend on. */
+        /** Registered fields, in DOM order — the order the spec, the unique names and focus-first-invalid depend on. */
         this.fields = [];
         this._state = INITIAL_FORM_STATE;
         this._spec = null;
@@ -4784,19 +5461,29 @@ class FormRuntimeService {
                 this.fields.splice(index, 1);
         };
     }
+    /** Every registered field's submitted name, in order — unique within the form (iox-ui#43). */
+    names() {
+        return uniqueFieldNames(this.fields.map(f => (f.baseName ? f.baseName() : f.spec('').name)));
+    }
+    /** The name the form gives one registered field, or null when it is not this form's. */
+    nameOf(field) {
+        const index = this.fields.indexOf(field);
+        return index < 0 ? null : this.names()[index];
+    }
     /** The live spec, derived from what is registered right now. */
     specNow() {
         const base = this._spec ?? {
             formId: '', name: '', feedback: FeedbackTiming.Smart,
             fields: [], actions: [], antiSpam: { honeypot: true, minFillMs: 1200 },
         };
-        return { ...base, fields: this.fields.map(f => f.spec()) };
+        const names = this.names();
+        return { ...base, fields: this.fields.map((f, i) => ({ ...f.spec(names[i]), name: names[i] })) };
     }
     /** Current values, keyed by submitted field name. */
     values() {
         const out = {};
-        for (const field of this.fields)
-            out[field.spec().name] = field.getValue();
+        const names = this.names();
+        this.fields.forEach((field, i) => { out[names[i]] = field.getValue(); });
         return out;
     }
     onChange(name) {
@@ -4829,8 +5516,7 @@ class FormRuntimeService {
     }
     /** The first invalid field in registration (DOM) order — what submit should focus. */
     firstInvalidName() {
-        for (const field of this.fields) {
-            const name = field.spec().name;
+        for (const name of this.names()) {
             if (this._state.errors[name])
                 return name;
         }
@@ -4843,6 +5529,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             type: Injectable
         }] });
 
+/**
+ * The shake a failing field gives after a refused submit (premium components N2) — Emil 134: the named effect for
+ * rejected input. ONE function for the component path, the string path and the canvas (a field put in its error state
+ * on the canvas shakes once, so the author sees the motion they are designing).
+ *
+ * WAAPI, `composite: 'add'`, so it moves the field from wherever its own transform puts it. A second refused submit
+ * CANCELS the running shake and starts clean — never two stacked (Emil 52/62). Under reduced motion there is no shake:
+ * focus and the message still happen (Emil 192 — the meaning survives without the movement).
+ */
+/** ±6 → ±4 → rest: a decaying side-to-side (the prototype's, Doron-approved). */
+const SHAKE_KEYFRAMES = Object.freeze([
+    { transform: 'translateX(0px)' },
+    { transform: 'translateX(-6px)' },
+    { transform: 'translateX(6px)' },
+    { transform: 'translateX(-4px)' },
+    { transform: 'translateX(4px)' },
+    { transform: 'translateX(0px)' },
+]);
+/** Under Emil's UI budget (28) and long enough to read as "no" (134). */
+const SHAKE_DURATION_MS = 320;
+/** Emil 18 — the strong ease-out. */
+const SHAKE_EASING = 'cubic-bezier(0.23, 1, 0.32, 1)';
+const RUNNING = '__ioxShake';
+/** Shake `el` once; returns the animation, or null when nothing plays (no element, no WAAPI, reduced motion). */
+function shakeElement(el, reducedMotion = prefersReducedMotion()) {
+    if (!el)
+        return null;
+    const host = el;
+    host[RUNNING]?.cancel();
+    delete host[RUNNING];
+    if (reducedMotion || typeof el.animate !== 'function')
+        return null;
+    const animation = el.animate(SHAKE_KEYFRAMES, { duration: SHAKE_DURATION_MS, easing: SHAKE_EASING, composite: 'add' });
+    host[RUNNING] = animation;
+    animation.onfinish = () => { if (host[RUNNING] === animation)
+        delete host[RUNNING]; };
+    return animation;
+}
+
 const SUBMIT_BUTTON_SELECTOR = '.iox-submit';
 const FORM_SELECTOR = 'form, .iox-form';
 /**
@@ -4963,6 +5688,9 @@ class IoxFormComponent {
         // Never let the browser navigate: a full page POST would lose the designed Success state
         // and every value the visitor typed.
         event.preventDefault();
+        // Sent is final (premium N2): the button reads "Sent" and is disabled — an Enter in a field sends nothing twice.
+        if (this.renderState === FormRenderState.Success)
+            return;
         this.runtime.configure(this.runtime.specNow(), this.feedback);
         if (!this.runtime.validateAll()) {
             this.announce(this.runtime.state.errors);
@@ -5051,6 +5779,7 @@ class IoxFormComponent {
         // A microtask is enough for the empty value to be committed before the new one lands.
         Promise.resolve().then(() => { this.announcement = next; });
     }
+    /** Focus the first field that failed and shake it once (premium N2 — Emil 134; none under reduced motion). */
     focusFirstInvalid() {
         const name = this.runtime.firstInvalidName();
         if (!name)
@@ -5063,6 +5792,7 @@ class IoxFormComponent {
             if (element.getAttribute('data-iox-field') !== name)
                 continue;
             element.querySelector('.iox-field__control')?.focus();
+            shakeElement(element);
             return;
         }
     }
@@ -5138,6 +5868,449 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 args: ['childrenHost', { read: ViewContainerRef, static: true }]
             }] } });
 
+/**
+ * placeFloating — where a panel anchored to a control goes (premium components N8, reused by M5's tooltip and popover).
+ *
+ * ONE pure decision for every floating panel: under its anchor, aligned to the anchor's reading start (the left edge in
+ * LTR, the right in RTL); above it when there is no room below and more above; held inside the viewport with a margin;
+ * and the transform-origin AT the anchor, so the panel grows from the control that opened it (Emil 47) — even when the
+ * clamp moved it sideways.
+ *
+ * Lives in the main entry: nothing server-side places a panel, and the date picker (now) and the floating family (M5)
+ * are DOM runtimes of the main entry. Pure — no DOM read here: the caller measures, this decides, the caller writes.
+ */
+var FloatingSide;
+(function (FloatingSide) {
+    FloatingSide["Below"] = "below";
+    FloatingSide["Above"] = "above";
+})(FloatingSide || (FloatingSide = {}));
+/** Emil's popover spacing: close enough to read as the control's, clear of its focus ring. */
+const FLOATING_GAP = 8;
+/** The viewport margin — a panel never touches the screen's edge. */
+const FLOATING_MARGIN = 12;
+const clamp = (value, min, max) => Math.min(Math.max(value, min), Math.max(min, max));
+/** Where `panel` goes beside `anchor` inside `viewport`. */
+function placeFloating(anchor, panel, viewport, options = {}) {
+    const gap = options.gap ?? FLOATING_GAP;
+    const margin = options.margin ?? FLOATING_MARGIN;
+    const anchorBottom = anchor.top + anchor.height;
+    const roomBelow = viewport.height - anchorBottom - gap - margin;
+    const roomAbove = anchor.top - gap - margin;
+    // Below is the default; above only when below is too short AND above is roomier (a field near the screen's foot).
+    const side = roomBelow >= panel.height || roomBelow >= roomAbove ? FloatingSide.Below : FloatingSide.Above;
+    const wantTop = side === FloatingSide.Below ? anchorBottom + gap : anchor.top - gap - panel.height;
+    const top = clamp(wantTop, margin, viewport.height - margin - panel.height);
+    const start = options.rtl ? anchor.left + anchor.width : anchor.left;
+    const wantLeft = options.rtl ? start - panel.width : start;
+    const left = clamp(wantLeft, margin, viewport.width - margin - panel.width);
+    // The origin is the anchor's start corner, in the panel's own coordinates, kept on the panel's box.
+    const originX = Math.round(clamp(start - left, 0, panel.width));
+    const originY = side === FloatingSide.Below ? 0 : Math.round(panel.height);
+    return { top: Math.round(top), left: Math.round(left), side, origin: `${originX}px ${originY}px` };
+}
+
+var CalendarClass;
+(function (CalendarClass) {
+    CalendarClass["Panel"] = "iox-cal";
+    CalendarClass["Grab"] = "iox-cal__grab";
+    CalendarClass["Head"] = "iox-cal__head";
+    CalendarClass["Title"] = "iox-cal__title";
+    CalendarClass["Nav"] = "iox-cal__nav";
+    CalendarClass["Prev"] = "iox-cal__prev";
+    CalendarClass["Next"] = "iox-cal__next";
+    CalendarClass["Grid"] = "iox-cal__grid";
+    CalendarClass["Weekday"] = "iox-cal__weekday";
+    CalendarClass["Cell"] = "iox-cal__cell";
+    CalendarClass["Day"] = "iox-cal__day";
+})(CalendarClass || (CalendarClass = {}));
+/** On the panel while it leaves (the shared CSS plays the exit on it). */
+const CALENDAR_CLOSING_ATTRIBUTE = 'data-iox-closing';
+/** On a panel opened from the KEYBOARD: it appears and goes with no motion (Emil 2 — keyboard actions never animate). */
+const CALENDAR_INSTANT_ATTRIBUTE = 'data-iox-instant';
+/** On the panel the builder canvas draws for its design-time Open state (in the flow, inert). */
+const CALENDAR_DESIGN_ATTRIBUTE = 'data-iox-cal-design';
+/** A phone gets the sheet (the drawer curve, the scrim) — the same width the shared CSS keys on. */
+const CALENDAR_SHEET_QUERY = '(max-width: 767px)';
+const RUNTIME = '__ioxDatePicker';
+const ISO_ATTRIBUTE = 'data-iox-iso';
+const CHEVRON_BACK = 'M15 18l-6-6 6-6';
+const CHEVRON_AHEAD = 'M9 18l6-6-6-6';
+/** An 1 Feb 2026 is a Sunday: day `i` of the week is `SUNDAY + i`. */
+const A_SUNDAY = new Date(2026, 1, 1);
+let calendarSeq = 0;
+const chevron = (doc, d) => {
+    const svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('width', '18');
+    svg.setAttribute('height', '18');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.setAttribute('focusable', 'false');
+    const path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', d);
+    path.setAttribute('fill', 'none');
+    path.setAttribute('stroke', 'currentColor');
+    path.setAttribute('stroke-width', '2');
+    path.setAttribute('stroke-linecap', 'round');
+    path.setAttribute('stroke-linejoin', 'round');
+    svg.appendChild(path);
+    return svg;
+};
+const el = (doc, tag, cls, attrs = {}) => {
+    const node = doc.createElement(tag);
+    if (cls)
+        node.className = cls;
+    for (const [k, v] of Object.entries(attrs))
+        node.setAttribute(k, v);
+    return node;
+};
+/** The language the field speaks: the host's, the nearest `[lang]`, the document's. */
+function fieldLanguage(field, lang) {
+    return lang || field.closest('[lang]')?.getAttribute('lang') || field.ownerDocument?.documentElement?.lang || 'en';
+}
+/** The ms a transition list takes, the longest entry (duration + delay) — how long an exit plays. */
+function transitionMs(node) {
+    const style = node.ownerDocument?.defaultView?.getComputedStyle(node);
+    if (!style)
+        return 0;
+    const parse = (list) => list.split(',').map(t => (t.trim().endsWith('ms') ? parseFloat(t) : parseFloat(t) * 1000) || 0);
+    const durations = parse(style.transitionDuration);
+    const delays = parse(style.transitionDelay);
+    return Math.max(0, ...durations.map((d, i) => d + (delays[i % delays.length] ?? 0)));
+}
+/** The panel's skeleton: grab handle, the month and its arrows, the weekday row. The body is `paintMonth`'s. */
+function buildPanel(doc, tag, words, locale, weekdays, rtl) {
+    const id = `iox-cal-${++calendarSeq}`;
+    const panel = el(doc, tag, CalendarClass.Panel, { 'aria-label': words.choose, dir: rtl ? 'rtl' : 'ltr', 'data-lenis-prevent': '' });
+    panel.appendChild(el(doc, 'span', CalendarClass.Grab, { 'aria-hidden': 'true' }));
+    const head = el(doc, 'div', CalendarClass.Head);
+    const title = el(doc, 'h2', CalendarClass.Title, { id: `${id}-title`, 'aria-live': 'polite' });
+    const nav = el(doc, 'div', CalendarClass.Nav);
+    const prev = el(doc, 'button', CalendarClass.Prev, { type: 'button', 'aria-label': words.previousMonth, title: words.previousMonth });
+    const next = el(doc, 'button', CalendarClass.Next, { type: 'button', 'aria-label': words.nextMonth, title: words.nextMonth });
+    prev.appendChild(chevron(doc, CHEVRON_BACK));
+    next.appendChild(chevron(doc, CHEVRON_AHEAD));
+    nav.append(prev, next);
+    head.append(title, nav);
+    const table = el(doc, 'table', CalendarClass.Grid, { role: 'grid', 'aria-labelledby': `${id}-title` });
+    const row = el(doc, 'tr');
+    const short = new Intl.DateTimeFormat(locale, { weekday: 'narrow' });
+    const long = new Intl.DateTimeFormat(locale, { weekday: 'long' });
+    for (const dow of weekdays) {
+        const day = new Date(A_SUNDAY.getFullYear(), A_SUNDAY.getMonth(), A_SUNDAY.getDate() + dow);
+        const th = el(doc, 'th', CalendarClass.Weekday, { scope: 'col', abbr: long.format(day) });
+        th.textContent = short.format(day);
+        row.appendChild(th);
+    }
+    const thead = el(doc, 'thead');
+    thead.appendChild(row);
+    table.append(thead, el(doc, 'tbody'));
+    panel.append(head, table);
+    return panel;
+}
+/** Draw one month into the panel: its title, its six rows, which arrows can move. */
+function paintMonth(panel, model, locale) {
+    const doc = panel.ownerDocument;
+    const title = panel.querySelector(`.${CalendarClass.Title}`);
+    if (title)
+        title.textContent = new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(new Date(model.year, model.month, 1));
+    const full = new Intl.DateTimeFormat(locale, { dateStyle: 'full' });
+    const body = panel.querySelector('tbody');
+    body.textContent = '';
+    for (const week of model.weeks) {
+        const tr = el(doc, 'tr');
+        for (const day of week) {
+            const td = el(doc, 'td', CalendarClass.Cell, { role: 'gridcell' });
+            if (day) {
+                const button = el(doc, 'button', CalendarClass.Day, { type: 'button', tabindex: day.focus ? '0' : '-1', [ISO_ATTRIBUTE]: day.iso });
+                button.setAttribute('aria-label', full.format(new Date(model.year, model.month, day.day)));
+                button.textContent = String(day.day);
+                if (day.today)
+                    button.setAttribute('aria-current', 'date');
+                if (day.disabled)
+                    button.setAttribute('aria-disabled', 'true');
+                if (day.selected)
+                    td.setAttribute('aria-selected', 'true');
+                td.appendChild(button);
+            }
+            tr.appendChild(td);
+        }
+        body.appendChild(tr);
+    }
+    panel.querySelector(`.${CalendarClass.Prev}`)?.toggleAttribute('disabled', !model.canPrev);
+    panel.querySelector(`.${CalendarClass.Next}`)?.toggleAttribute('disabled', !model.canNext);
+}
+/** The date field's parts. */
+function partsOf(field) {
+    return {
+        button: field.querySelector(`button.${FieldClass.DateButton}`),
+        input: field.querySelector(`input.${FieldClass.DateInput}`),
+        words: field.querySelector(`.${FieldClass.DateValue}`),
+    };
+}
+/** Write a day (or nothing) into a date field: the hidden input carries it, the button says it in words. */
+function setDateFieldValue(field, iso, options = {}) {
+    const { input, words } = partsOf(field);
+    const day = isIsoDate(iso) ? iso : '';
+    if (input)
+        input.value = day;
+    if (!words)
+        return;
+    const lang = fieldLanguage(field, options.lang);
+    if (day) {
+        words.textContent = formatDateInWords(day, lang, options.today ?? todayIso());
+        words.removeAttribute(DATE_EMPTY_ATTRIBUTE);
+    }
+    else {
+        words.textContent = options.placeholder ?? words.getAttribute('data-iox-placeholder') ?? datePickerWords(lang).choose;
+        words.setAttribute(DATE_EMPTY_ATTRIBUTE, '');
+    }
+}
+/** The days a field accepts today, from the raw Earliest / Latest its button carries. */
+function rangeOf(button, today) {
+    const bound = (attr) => resolveDateBound(parseDateBound(button.getAttribute(attr) ?? ''), today);
+    return { min: bound(DATE_MIN_ATTRIBUTE), max: bound(DATE_MAX_ATTRIBUTE) };
+}
+/** One live date field. Built by `attachDatePicker`; idempotent per field. */
+class DatePickerRuntime {
+    constructor(field, options = {}) {
+        this.field = field;
+        this.options = options;
+        this.panel = null;
+        this.focusIso = '';
+        this.closing = false;
+        this.listeners = [];
+        const { button, words } = partsOf(field);
+        if (words && !words.hasAttribute('data-iox-placeholder') && words.hasAttribute(DATE_EMPTY_ATTRIBUTE)) {
+            words.setAttribute('data-iox-placeholder', words.textContent ?? '');
+        }
+        // A click the keyboard made (Enter / Space on the button) has no pointer: `detail` 0.
+        if (button)
+            this.listen(button, 'click', e => this.open(e.detail === 0));
+        // A successful submit resets the form: a hidden input keeps its value through `form.reset()` (its value IS its
+        // attribute), so the field clears itself. A host that renders the field (`onPick` — the component path) owns
+        // its words and its value: the runtime never writes over what the host's view tracks.
+        const form = field.closest('form');
+        if (form && !options.onPick)
+            this.listen(form, 'reset', () => setDateFieldValue(field, '', { lang: this.lang() }));
+        field[RUNTIME] = this;
+    }
+    get isOpen() { return !!this.panel; }
+    value() { return partsOf(this.field).input?.value ?? ''; }
+    destroy() {
+        this.dismiss(true);
+        for (const [target, type, fn] of this.listeners)
+            target.removeEventListener(type, fn);
+        this.listeners.length = 0;
+        delete this.field[RUNTIME];
+    }
+    /** Open the calendar; `instant` (opened from the keyboard) skips the entrance and, later, the exit. */
+    open(instant = false) {
+        const { button } = partsOf(this.field);
+        if (!button || this.panel || button.disabled)
+            return;
+        const doc = this.field.ownerDocument;
+        const lang = this.lang();
+        const rtl = this.rtl();
+        const today = this.today();
+        const { min, max } = rangeOf(button, today);
+        const selected = this.value();
+        this.focusIso = clampIso(isIsoDate(selected) ? selected : today, min, max);
+        const weekStart = weekStartFor(lang);
+        const model = () => calendarMonth(this.focusIso, { weekStart, today, min, max, selected: this.value() || null });
+        const panel = buildPanel(doc, 'dialog', this.words(lang), lang, model().weekdays, rtl);
+        const sheet = !!doc.defaultView?.matchMedia?.(CALENDAR_SHEET_QUERY).matches;
+        paintMonth(panel, model(), lang);
+        if (instant)
+            panel.setAttribute(CALENDAR_INSTANT_ATTRIBUTE, '');
+        this.field.appendChild(panel);
+        this.panel = panel;
+        this.closing = false;
+        const repaint = (focusDay) => {
+            paintMonth(panel, model(), lang);
+            if (focusDay)
+                this.focusDay();
+        };
+        const pickable = (b) => !!b && b.getAttribute('aria-disabled') !== 'true';
+        this.listen(panel, 'click', e => {
+            const target = e.target;
+            const day = target.closest?.(`.${CalendarClass.Day}`);
+            // Enter / Space on a day is a click with no pointer: the calendar goes at once (Emil 2).
+            if (day) {
+                if (pickable(day))
+                    this.pick(day.getAttribute(ISO_ATTRIBUTE), e.detail === 0);
+                return;
+            }
+            if (target.closest?.(`.${CalendarClass.Prev}`)) {
+                this.focusIso = clampIso(addMonthsIso(this.focusIso, -1), min, max);
+                repaint(false);
+                return;
+            }
+            if (target.closest?.(`.${CalendarClass.Next}`)) {
+                this.focusIso = clampIso(addMonthsIso(this.focusIso, 1), min, max);
+                repaint(false);
+                return;
+            }
+            // A modal dialog hears clicks on its backdrop as its own: outside the panel's box closes it.
+            const r = panel.getBoundingClientRect();
+            const { clientX: x, clientY: y } = e;
+            if (x < r.left || x > r.right || y < r.top || y > r.bottom)
+                this.close();
+        });
+        this.listen(panel, 'keydown', e => {
+            const key = e;
+            if (!key.target?.closest?.(`.${CalendarClass.Day}`))
+                return;
+            const next = calendarKeyTarget(key.key, this.focusIso, { weekStart, rtl, shift: key.shiftKey, min, max });
+            if (!next)
+                return;
+            key.preventDefault();
+            this.focusIso = next;
+            repaint(true);
+        });
+        // Esc: the dialog's own cancel — a keyboard action, so it goes at once (Emil 2), focus back on the button.
+        this.listen(panel, 'cancel', e => { e.preventDefault(); this.close(true); });
+        if (sheet)
+            panel.setAttribute('data-iox-cal-sheet', '');
+        panel.showModal();
+        if (!sheet)
+            this.place(rtl);
+        this.focusDay();
+        button.setAttribute('aria-expanded', 'true');
+        this.options.lockScroll?.();
+    }
+    /** Close with the exit the shared CSS plays (faster than the entrance — Emil 30), then give focus back; `instant`
+     *  (a keyboard close — Esc, Enter on a day) or a panel opened from the keyboard goes at once (Emil 2). */
+    close(instant = false) {
+        if (!this.panel || this.closing)
+            return;
+        this.closing = true;
+        const panel = this.panel;
+        partsOf(this.field).button?.setAttribute('aria-expanded', 'false');
+        if (instant || panel.hasAttribute(CALENDAR_INSTANT_ATTRIBUTE)) {
+            this.dismiss(false);
+            return;
+        }
+        panel.setAttribute(CALENDAR_CLOSING_ATTRIBUTE, '');
+        const ms = transitionMs(panel);
+        if (ms <= 0) {
+            this.dismiss(false);
+            return;
+        }
+        setTimeout(() => this.dismiss(false), ms);
+    }
+    pick(iso, instant = false) {
+        const { button } = partsOf(this.field);
+        if (this.options.onPick)
+            this.options.onPick(iso);
+        else
+            setDateFieldValue(this.field, iso, { lang: this.lang(), today: this.today() });
+        // The form's runtime hears the change on the control it knows (the button carries `iox-field__control`).
+        button?.dispatchEvent(new Event('input', { bubbles: true }));
+        button?.dispatchEvent(new Event('change', { bubbles: true }));
+        this.close(instant);
+    }
+    dismiss(silent) {
+        const panel = this.panel;
+        if (!panel)
+            return;
+        this.panel = null;
+        this.closing = false;
+        if (panel.open)
+            panel.close();
+        panel.remove();
+        this.options.unlockScroll?.();
+        const { button } = partsOf(this.field);
+        button?.setAttribute('aria-expanded', 'false');
+        if (!silent)
+            button?.focus({ preventScroll: true });
+    }
+    focusDay() {
+        const day = this.panel?.querySelector(`.${CalendarClass.Day}[${ISO_ATTRIBUTE}="${this.focusIso}"]`);
+        day?.focus({ preventScroll: true });
+    }
+    /** Under the field, aligned to its reading start; above when there is no room — the ONE `placeFloating`. */
+    place(rtl) {
+        const panel = this.panel;
+        const { button } = partsOf(this.field);
+        const view = this.field.ownerDocument.defaultView;
+        if (!panel || !button || !view)
+            return;
+        const anchor = button.getBoundingClientRect();
+        const spot = placeFloating({ top: anchor.top, left: anchor.left, width: anchor.width, height: anchor.height }, { width: panel.offsetWidth, height: panel.offsetHeight }, { width: view.innerWidth, height: view.innerHeight }, { rtl });
+        panel.style.top = `${spot.top}px`;
+        panel.style.left = `${spot.left}px`;
+        panel.style.transformOrigin = spot.origin;
+        panel.setAttribute('data-iox-side', spot.side);
+    }
+    lang() { return fieldLanguage(this.field, this.options.lang); }
+    rtl() {
+        if (typeof this.options.rtl === 'boolean')
+            return this.options.rtl;
+        return this.field.ownerDocument.defaultView?.getComputedStyle(this.field).direction === 'rtl';
+    }
+    today() { return this.options.today?.() ?? todayIso(); }
+    words(lang) { return { ...datePickerWords(lang), ...(this.options.words ?? {}) }; }
+    listen(target, type, fn) {
+        target.addEventListener(type, fn);
+        this.listeners.push([target, type, fn]);
+    }
+}
+/** The runtime already running a field, if any. */
+function datePickerOf(field) {
+    return field?.[RUNTIME] ?? null;
+}
+/** Run a date field — once: a field already running is returned as is. Null when `field` holds no date button. */
+function attachDatePicker(field, options = {}) {
+    if (!field || !partsOf(field).button)
+        return null;
+    return datePickerOf(field) ?? new DatePickerRuntime(field, options);
+}
+/** Run every date field under `root` (the string path: a page's or a global's markup). */
+function attachDatePickers(root, options = {}) {
+    if (!root?.querySelectorAll)
+        return [];
+    const out = [];
+    root.querySelectorAll(`.${FieldClass.Root}`).forEach(field => {
+        const runtime = attachDatePicker(field, options);
+        if (runtime)
+            out.push(runtime);
+    });
+    return out;
+}
+/**
+ * The builder canvas's design-time Open state: the SAME panel, drawn in the flow under the date button (a modal in the
+ * top layer would escape the canvas's zoom and cover the builder), inert — the author selects the Field and styles
+ * its Calendar parts; nothing in it takes focus or a click. `false` removes it.
+ */
+function showCalendarDesign(field, show, options = {}) {
+    if (!field)
+        return;
+    const existing = field.querySelector(`:scope > [${CALENDAR_DESIGN_ATTRIBUTE}]`);
+    if (!show) {
+        existing?.remove();
+        return;
+    }
+    if (existing)
+        return;
+    const { button } = partsOf(field);
+    if (!button)
+        return;
+    const lang = fieldLanguage(field, options.lang);
+    const today = options.today ?? todayIso();
+    const { min, max } = rangeOf(button, today);
+    const selected = (partsOf(field).input?.value || '') || null;
+    const focus = clampIso(selected ?? today, min, max);
+    const model = calendarMonth(focus, { weekStart: weekStartFor(lang), today, min, max, selected });
+    const rtl = typeof options.rtl === 'boolean' ? options.rtl : field.ownerDocument.defaultView?.getComputedStyle(field).direction === 'rtl';
+    const panel = buildPanel(field.ownerDocument, 'div', datePickerWords(lang), lang, model.weekdays, rtl);
+    panel.setAttribute(CALENDAR_DESIGN_ATTRIBUTE, '');
+    panel.setAttribute('inert', '');
+    panel.setAttribute('aria-hidden', 'true');
+    paintMonth(panel, model, lang);
+    const after = partsOf(field).input ?? button;
+    after.insertAdjacentElement('afterend', panel);
+}
+
 let fieldSeq = 0;
 /**
  * The compound Field: label + control + help + error + required mark, as ONE node (decision D2).
@@ -5153,8 +6326,22 @@ let fieldSeq = 0;
  *
  * ⚠️ Control type is a TRAIT, not a component per type (decision D4) — one component, one config,
  * and choosing `email` also chooses email validation.
+ *
+ * The markup is forms-core `fieldHtml`'s, element for element (the engine's string path writes it): Choices is a
+ * fieldset of chips or rows (premium N1), Date is a button + a hidden ISO input that opens the look's calendar (N8).
+ * The submitted name is the FORM's unique name for this field (forms-core `uniqueFieldNames`, vectoriox/iox-ui#43).
  */
 class IoxFieldComponent {
+    set control(value) {
+        this._control = value || ControlType.Text;
+        this.syncDate();
+    }
+    get control() { return this._control; }
+    /** Choices (N1): `chips` (the default) or `list` — the look's radio / checkbox rows. */
+    set appearance(value) {
+        this._appearance = choiceAppearanceOf({ appearance: value });
+    }
+    get appearance() { return this._appearance; }
     /** Explicit choices (bound data, a hand-built node). Wins over `optionsText`. */
     set options(value) {
         this._options = Array.isArray(value) ? value : [];
@@ -5168,22 +6355,45 @@ class IoxFieldComponent {
         this.refreshChoices();
     }
     get optionsText() { return this._optionsText; }
+    /**
+     * Forces the error appearance without a real failure — how the builder lets an author DESIGN
+     * the error state (decision D5). At runtime the state comes from the runtime service instead.
+     * Turning it on shakes the field once, so the author sees the motion they are designing (N2).
+     */
+    set forceInvalid(value) {
+        const was = this._forceInvalid;
+        this._forceInvalid = !!value;
+        if (this._forceInvalid && !was && this.viewReady)
+            shakeElement(this.host?.nativeElement);
+    }
+    get forceInvalid() { return this._forceInvalid; }
+    /** The builder canvas's design-time Open state for a Date (N8): the calendar drawn under the field, inert. */
+    set designOpen(value) {
+        this._designOpen = !!value;
+        this.syncDesignCalendar();
+    }
+    get designOpen() { return this._designOpen; }
     /**
      * Classic constructor injection, not `inject()`: this library's specs construct components
      * directly (its vitest setup cannot run `TestBed.createComponent`), and a field initializer
      * calling `inject()` throws NG0203 outside an injection context.
      *
      * `runtime` is optional because a Field dropped OUTSIDE any Form must still render — it simply
-     * has nothing to submit to. That is the same ancestry rule from the other side.
+     * has nothing to submit to. That is the same ancestry rule from the other side. `isPreview` says the field is
+     * LIVE (the engine, the admin's Preview): only then does its date button open a calendar — on the editing canvas
+     * a click selects the field, and the calendar is the design-time Open state.
      */
-    constructor(runtime, resolveMessage) {
+    constructor(runtime, resolveMessage, host, isPreview, pageScroll) {
         this.runtime = runtime;
         this.resolveMessage = resolveMessage;
+        this.host = host;
+        this.isPreview = isPreview;
+        this.pageScroll = pageScroll;
         this.nodeId = '';
         /** The submitted key. Blank means "derive it from the label" — authors never invent keys. */
         this.name = '';
         this.label = '';
-        this.control = ControlType.Text;
+        this._control = ControlType.Text;
         this.placeholder = '';
         this.help = '';
         this.required = false;
@@ -5195,6 +6405,12 @@ class IoxFieldComponent {
         this.rangeMax = 100;
         this.rangeStep = 1;
         this.accept = '';
+        /** Choices (N1): several answers (checkboxes) or one (radios). */
+        this.multiple = false;
+        this._appearance = ChoiceAppearance.Chips;
+        /** Date (N8): the first and last day it takes — '' any · N days from today · an ISO day (forms-core `dates.ts`). */
+        this.earliest = '';
+        this.latest = '';
         /** What the radio group / dropdown renders: the shared forms-core reading of the two inputs above. */
         this.choices = [];
         this._options = [];
@@ -5202,33 +6418,42 @@ class IoxFieldComponent {
         this.value = '';
         /** Rules beyond `required` — carried on the node, interpreted by forms-core. */
         this.rules = [];
-        /**
-         * Forces the error appearance without a real failure — how the builder lets an author DESIGN
-         * the error state (decision D5). At runtime the state comes from the runtime service instead.
-         */
-        this.forceInvalid = false;
+        this._forceInvalid = false;
         /** Placeholder shown while designing the error state, so the block has something to style. */
         this.designErrorText = 'Please check this field';
         /** Only after a successful check — never on an untouched field. */
         this.showValid = false;
+        this._designOpen = false;
         this.valueChange = new EventEmitter();
         this.touched = new EventEmitter();
         /** Stable per instance so `for`/`id` and `aria-describedby` always pair up. */
         this.controlId = `iox-field-${++fieldSeq}`;
+        this.registration = null;
+        this.picker = null;
+        this.viewReady = false;
     }
     ngOnInit() {
-        this.unregister = this.runtime?.register({
+        this.registration = {
             // Functions, not values: a trait edited on the canvas takes effect with no re-register.
-            spec: () => this.toSpec(),
+            baseName: () => baseFieldName({ name: this.name, label: this.label }),
+            spec: (name) => this.toSpec(name),
             getValue: () => this.value,
-        });
+        };
+        this.unregister = this.runtime?.register(this.registration);
+    }
+    ngAfterViewInit() {
+        this.viewReady = true;
+        this.syncDate();
+        this.syncDesignCalendar();
     }
     ngOnDestroy() {
         this.unregister?.();
+        this.picker?.destroy();
+        this.picker = null;
     }
-    /** The submitted key: the author's override, else derived from the label. */
+    /** The submitted key: the form's unique name for this field (iox-ui#43), else the field's own base name. */
     get fieldName() {
-        return this.name || deriveFieldName(this.label);
+        return (this.registration && this.runtime?.nameOf(this.registration)) || baseFieldName({ name: this.name, label: this.label });
     }
     /** Failing AND allowed to say so — or forced, while an author designs the state. */
     get invalid() {
@@ -5243,27 +6468,55 @@ class IoxFieldComponent {
         const error = this.runtime?.errorFor(this.fieldName);
         return error ? this.resolveMessage(error.messageKey, error.params) : '';
     }
-    toSpec() {
-        const spec = {
-            name: this.fieldName,
-            control: this.control ?? ControlType.Text,
-            label: this.label,
-        };
-        if (this.required)
-            spec.required = true;
-        if (this.rules?.length)
-            spec.rules = this.rules;
-        if (this.choices.length)
-            spec.options = this.choices;
-        return spec;
+    /** The field's spec under the name its form gave it — forms-core `fieldSpecOf`, the reading the saved spec uses. */
+    toSpec(name) {
+        return fieldSpecOf({
+            control: this.control, label: this.label, required: this.required, rules: this.rules, options: this.choices,
+            multiple: this.multiple, earliest: this.earliest, latest: this.latest,
+        }, name);
     }
     refreshChoices() {
         this.choices = fieldOptionsOf({ options: this._options, optionsText: this._optionsText });
     }
-    /** `file`, `date`, `number`… map straight through; everything else is a text input. */
+    /** `file`, `number`… map straight through; everything else is a text input (forms-core `inputTypeOf`). */
     get inputType() {
-        const passthrough = ['email', 'tel', 'url', 'number', 'password', 'date', 'time', 'file', 'hidden'];
-        return passthrough.includes(String(this.control)) ? String(this.control) : 'text';
+        return inputTypeOf(String(this.control));
+    }
+    /** A Date's chosen day (the hidden input's value) — '' while none is. */
+    get dateIso() {
+        return isIsoDate(this.value) ? String(this.value) : '';
+    }
+    /** A Date's chosen day in words, in the field's language — '' while none is. */
+    get dateWords() {
+        const iso = this.dateIso;
+        if (!iso)
+            return '';
+        const lang = this.host?.nativeElement ? fieldLanguage(this.host.nativeElement) : 'en';
+        return formatDateInWords(iso, lang, todayIso());
+    }
+    /** What an unpicked Date says: the author's hint, else "Choose a date" in the field's language. */
+    get datePlaceholder() {
+        if (this.placeholder)
+            return this.placeholder;
+        return datePickerWords(this.host?.nativeElement ? fieldLanguage(this.host.nativeElement) : null).choose;
+    }
+    /** Whether a Choices option is chosen — one answer, or one of several. */
+    isChosen(optionValue) {
+        if (isMultiValueField({ control: this.control, multiple: this.multiple })) {
+            return Array.isArray(this.value) && this.value.includes(optionValue);
+        }
+        return this.value === optionValue;
+    }
+    /** A Choices option ticked or unticked: the answer becomes the list of ticked ones, or the one picked. */
+    toggle(optionValue, checked) {
+        if (!isMultiValueField({ control: this.control, multiple: this.multiple })) {
+            this.emit(optionValue);
+            return;
+        }
+        const current = Array.isArray(this.value) ? this.value : [];
+        const next = checked ? [...current.filter(v => v !== optionValue), optionValue] : current.filter(v => v !== optionValue);
+        // In the options' order, whatever order they were ticked in.
+        this.emit(this.choices.map(c => c.value).filter(v => next.includes(v)));
     }
     /** Help and error are BOTH announced, in that order, when both are present. */
     get describedBy() {
@@ -5279,23 +6532,79 @@ class IoxFieldComponent {
         this.runtime?.onChange(this.fieldName);
         this.valueChange.emit(value);
     }
-    touch() {
+    touch(event) {
+        // Leaving one chip for the next, or the date button for its own calendar, is not leaving the FIELD.
+        const next = event?.relatedTarget;
+        if (next && this.host?.nativeElement?.contains?.(next))
+            return;
         // Blur is what lets Smart timing start speaking for this field.
         this.runtime?.onBlur(this.fieldName);
         this.touched.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFieldComponent, deps: [{ token: FormRuntimeService, optional: true }, { token: IOX_FORM_MESSAGES }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: IoxFieldComponent, isStandalone: false, selector: "div[iox-field]", inputs: { nodeId: "nodeId", name: "name", label: "label", control: "control", placeholder: "placeholder", help: "help", required: "required", disabled: "disabled", labelHidden: "labelHidden", requiredMark: "requiredMark", rows: "rows", rangeMin: "rangeMin", rangeMax: "rangeMax", rangeStep: "rangeStep", accept: "accept", options: "options", optionsText: "optionsText", value: "value", rules: "rules", forceInvalid: "forceInvalid", designErrorText: "designErrorText", showValid: "showValid" }, outputs: { valueChange: "valueChange", touched: "touched" }, host: { properties: { "class": "'iox-field iox-node-' + nodeId", "class.iox-invalid": "invalid", "class.iox-valid": "showValid", "attr.data-iox-field": "fieldName || null", "hidden": "control === 'hidden' ? true : null" } }, ngImport: i0, template: `
-        <label class="iox-field__label"
-               [class.iox-field__label--hidden]="labelHidden"
-               [attr.for]="controlId">
-            {{ label }}
-            @if (required) {
-                <span class="iox-field__required" aria-hidden="true">{{ requiredMark }}</span>
+    /** A live Date runs the ONE date picker; any other control (or the canvas) runs none. */
+    syncDate() {
+        const element = this.host?.nativeElement;
+        if (!this.viewReady || !element)
+            return;
+        const live = this.control === ControlType.Date && this.isPreview === true && typeof window !== 'undefined';
+        if (!live) {
+            this.picker?.destroy();
+            this.picker = null;
+            return;
+        }
+        // The view may not have rendered the button yet after a control change: attach on the next frame's DOM.
+        queueMicrotask(() => {
+            if (this.picker || this.control !== ControlType.Date)
+                return;
+            this.picker = attachDatePicker(element, {
+                onPick: iso => this.emit(iso),
+                lockScroll: () => this.pageScroll?.stop(),
+                unlockScroll: () => this.pageScroll?.start(),
+            });
+        });
+    }
+    /** The canvas's Open state: the calendar drawn under the field (never on a live page). */
+    syncDesignCalendar() {
+        const element = this.host?.nativeElement;
+        if (!this.viewReady || !element || this.isPreview === true)
+            return;
+        queueMicrotask(() => showCalendarDesign(element, this._designOpen && this.control === ControlType.Date));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFieldComponent, deps: [{ token: FormRuntimeService, optional: true }, { token: IOX_FORM_MESSAGES }, { token: i0.ElementRef, optional: true }, { token: IS_PREVIEW, optional: true }, { token: PageScrollProvider, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: IoxFieldComponent, isStandalone: false, selector: "div[iox-field]", inputs: { nodeId: "nodeId", name: "name", label: "label", control: "control", placeholder: "placeholder", help: "help", required: "required", disabled: "disabled", labelHidden: "labelHidden", requiredMark: "requiredMark", rows: "rows", rangeMin: "rangeMin", rangeMax: "rangeMax", rangeStep: "rangeStep", accept: "accept", multiple: "multiple", appearance: "appearance", earliest: "earliest", latest: "latest", options: "options", optionsText: "optionsText", value: "value", rules: "rules", forceInvalid: "forceInvalid", designErrorText: "designErrorText", showValid: "showValid", designOpen: "designOpen" }, outputs: { valueChange: "valueChange", touched: "touched" }, host: { properties: { "class": "'iox-field iox-node-' + nodeId", "class.iox-invalid": "invalid", "class.iox-valid": "showValid", "attr.data-iox-field": "fieldName || null", "hidden": "control === 'hidden' ? true : null" } }, ngImport: i0, template: `
+        @switch (control) {
+            @case ('choices') {
+                <fieldset [class]="'iox-field__choices ' + (appearance === 'list' ? 'iox-field__choices--list' : 'iox-field__choices--chips')"
+                          [attr.aria-describedby]="describedBy">
+                    <legend class="iox-field__label" [class.iox-field__label--hidden]="labelHidden" [id]="controlId + '-label'">{{ label }}@if (required) {<span class="iox-field__required" aria-hidden="true">{{ requiredMark }}</span>}</legend>
+                    <div [class]="appearance === 'list' ? 'iox-field__group' : 'iox-field__chips'">
+                        @for (option of choices; track option.value) {
+                            <label [class]="appearance === 'list' ? 'iox-field__option' : 'iox-field__chip'">
+                                <input [class]="appearance === 'list' ? 'iox-field__control' : 'iox-field__control iox-field__control--chip'"
+                                       [type]="multiple ? 'checkbox' : 'radio'"
+                                       [name]="fieldName"
+                                       [value]="option.value"
+                                       [checked]="isChosen(option.value)"
+                                       [attr.aria-invalid]="invalid ? 'true' : null"
+                                       [attr.disabled]="disabled ? '' : null"
+                                       (change)="toggle(option.value, $any($event.target).checked)"
+                                       (blur)="touch($event)">
+                                <span>{{ option.label }}</span>
+                            </label>
+                        }
+                    </div>
+                </fieldset>
             }
-        </label>
+            @default {
+                <label class="iox-field__label"
+                       [class.iox-field__label--hidden]="labelHidden"
+                       [id]="controlId + '-label'"
+                       [attr.for]="controlId">{{ label }}@if (required) {<span class="iox-field__required" aria-hidden="true">{{ requiredMark }}</span>}</label>
+            }
+        }
 
         @switch (control) {
+            @case ('choices') {}
             @case ('textarea') {
                 <textarea class="iox-field__control"
                           [id]="controlId"
@@ -5308,7 +6617,7 @@ class IoxFieldComponent {
                           [attr.disabled]="disabled ? '' : null"
                           [value]="value ?? ''"
                           (input)="emit($any($event.target).value)"
-                          (blur)="touch()"></textarea>
+                          (blur)="touch($event)"></textarea>
             }
             @case ('select') {
                 <select class="iox-field__control"
@@ -5319,7 +6628,7 @@ class IoxFieldComponent {
                         [attr.aria-describedby]="describedBy"
                         [attr.disabled]="disabled ? '' : null"
                         (change)="emit($any($event.target).value)"
-                        (blur)="touch()">
+                        (blur)="touch($event)">
                     <option value="" [selected]="!value">{{ placeholder || '' }}</option>
                     @for (option of choices; track option.value) {
                         <option [value]="option.value" [selected]="option.value === value">{{ option.label }}</option>
@@ -5337,7 +6646,7 @@ class IoxFieldComponent {
                        [attr.disabled]="disabled ? '' : null"
                        [checked]="value === true"
                        (change)="emit($any($event.target).checked)"
-                       (blur)="touch()">
+                       (blur)="touch($event)">
             }
             @case ('range') {
                 <input class="iox-field__control iox-field__control--range"
@@ -5351,7 +6660,7 @@ class IoxFieldComponent {
                        [attr.disabled]="disabled ? '' : null"
                        [value]="value ?? rangeMin"
                        (input)="emit(+$any($event.target).value)"
-                       (blur)="touch()">
+                       (blur)="touch($event)">
             }
             @case ('checkbox') {
                 <input class="iox-field__control iox-field__control--checkbox"
@@ -5364,7 +6673,7 @@ class IoxFieldComponent {
                        [attr.disabled]="disabled ? '' : null"
                        [checked]="value === true"
                        (change)="emit($any($event.target).checked)"
-                       (blur)="touch()">
+                       (blur)="touch($event)">
             }
             @case ('radio') {
                 <div class="iox-field__group" role="radiogroup" [attr.aria-labelledby]="controlId + '-label'">
@@ -5377,12 +6686,27 @@ class IoxFieldComponent {
                                    [checked]="option.value === value"
                                    [attr.disabled]="disabled ? '' : null"
                                    (change)="emit(option.value)"
-                                   (blur)="touch()">
+                                   (blur)="touch($event)">
                             <span>{{ option.label }}</span>
                         </label>
                     }
                 </div>
             }
+            @case ('date') {
+                <button type="button"
+                        class="iox-field__control iox-field__control--date"
+                        [id]="controlId"
+                        aria-haspopup="dialog"
+                        [attr.aria-expanded]="designOpen ? 'true' : 'false'"
+                        [attr.aria-labelledby]="controlId + '-label ' + controlId + '-value'"
+                        [attr.aria-invalid]="invalid ? 'true' : null"
+                        [attr.aria-describedby]="describedBy"
+                        [attr.disabled]="disabled ? '' : null"
+                        [attr.data-iox-date-min]="earliest || null"
+                        [attr.data-iox-date-max]="latest || null"
+                        (blur)="touch($event)"><span class="iox-field__date-value" [id]="controlId + '-value'" [attr.data-iox-empty]="dateWords ? null : ''">{{ dateWords || datePlaceholder }}</span><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></button>
+                <input type="hidden" class="iox-field__date-input" [name]="fieldName" [value]="dateIso">
+            }
             @default {
                 <input class="iox-field__control"
                        [id]="controlId"
@@ -5396,7 +6720,7 @@ class IoxFieldComponent {
                        [attr.accept]="control === 'file' ? (accept || null) : null"
                        [value]="control === 'file' ? '' : (value ?? '')"
                        (input)="emit($any($event.target).value)"
-                       (blur)="touch()">
+                       (blur)="touch($event)">
             }
         }
 
@@ -5411,16 +6735,39 @@ class IoxFieldComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[iox-field]', template: `
-        <label class="iox-field__label"
-               [class.iox-field__label--hidden]="labelHidden"
-               [attr.for]="controlId">
-            {{ label }}
-            @if (required) {
-                <span class="iox-field__required" aria-hidden="true">{{ requiredMark }}</span>
+        @switch (control) {
+            @case ('choices') {
+                <fieldset [class]="'iox-field__choices ' + (appearance === 'list' ? 'iox-field__choices--list' : 'iox-field__choices--chips')"
+                          [attr.aria-describedby]="describedBy">
+                    <legend class="iox-field__label" [class.iox-field__label--hidden]="labelHidden" [id]="controlId + '-label'">{{ label }}@if (required) {<span class="iox-field__required" aria-hidden="true">{{ requiredMark }}</span>}</legend>
+                    <div [class]="appearance === 'list' ? 'iox-field__group' : 'iox-field__chips'">
+                        @for (option of choices; track option.value) {
+                            <label [class]="appearance === 'list' ? 'iox-field__option' : 'iox-field__chip'">
+                                <input [class]="appearance === 'list' ? 'iox-field__control' : 'iox-field__control iox-field__control--chip'"
+                                       [type]="multiple ? 'checkbox' : 'radio'"
+                                       [name]="fieldName"
+                                       [value]="option.value"
+                                       [checked]="isChosen(option.value)"
+                                       [attr.aria-invalid]="invalid ? 'true' : null"
+                                       [attr.disabled]="disabled ? '' : null"
+                                       (change)="toggle(option.value, $any($event.target).checked)"
+                                       (blur)="touch($event)">
+                                <span>{{ option.label }}</span>
+                            </label>
+                        }
+                    </div>
+                </fieldset>
             }
-        </label>
+            @default {
+                <label class="iox-field__label"
+                       [class.iox-field__label--hidden]="labelHidden"
+                       [id]="controlId + '-label'"
+                       [attr.for]="controlId">{{ label }}@if (required) {<span class="iox-field__required" aria-hidden="true">{{ requiredMark }}</span>}</label>
+            }
+        }
 
         @switch (control) {
+            @case ('choices') {}
             @case ('textarea') {
                 <textarea class="iox-field__control"
                           [id]="controlId"
@@ -5433,7 +6780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                           [attr.disabled]="disabled ? '' : null"
                           [value]="value ?? ''"
                           (input)="emit($any($event.target).value)"
-                          (blur)="touch()"></textarea>
+                          (blur)="touch($event)"></textarea>
             }
             @case ('select') {
                 <select class="iox-field__control"
@@ -5444,7 +6791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                         [attr.aria-describedby]="describedBy"
                         [attr.disabled]="disabled ? '' : null"
                         (change)="emit($any($event.target).value)"
-                        (blur)="touch()">
+                        (blur)="touch($event)">
                     <option value="" [selected]="!value">{{ placeholder || '' }}</option>
                     @for (option of choices; track option.value) {
                         <option [value]="option.value" [selected]="option.value === value">{{ option.label }}</option>
@@ -5462,7 +6809,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                        [attr.disabled]="disabled ? '' : null"
                        [checked]="value === true"
                        (change)="emit($any($event.target).checked)"
-                       (blur)="touch()">
+                       (blur)="touch($event)">
             }
             @case ('range') {
                 <input class="iox-field__control iox-field__control--range"
@@ -5476,7 +6823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                        [attr.disabled]="disabled ? '' : null"
                        [value]="value ?? rangeMin"
                        (input)="emit(+$any($event.target).value)"
-                       (blur)="touch()">
+                       (blur)="touch($event)">
             }
             @case ('checkbox') {
                 <input class="iox-field__control iox-field__control--checkbox"
@@ -5489,7 +6836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                        [attr.disabled]="disabled ? '' : null"
                        [checked]="value === true"
                        (change)="emit($any($event.target).checked)"
-                       (blur)="touch()">
+                       (blur)="touch($event)">
             }
             @case ('radio') {
                 <div class="iox-field__group" role="radiogroup" [attr.aria-labelledby]="controlId + '-label'">
@@ -5502,12 +6849,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                                    [checked]="option.value === value"
                                    [attr.disabled]="disabled ? '' : null"
                                    (change)="emit(option.value)"
-                                   (blur)="touch()">
+                                   (blur)="touch($event)">
                             <span>{{ option.label }}</span>
                         </label>
                     }
                 </div>
             }
+            @case ('date') {
+                <button type="button"
+                        class="iox-field__control iox-field__control--date"
+                        [id]="controlId"
+                        aria-haspopup="dialog"
+                        [attr.aria-expanded]="designOpen ? 'true' : 'false'"
+                        [attr.aria-labelledby]="controlId + '-label ' + controlId + '-value'"
+                        [attr.aria-invalid]="invalid ? 'true' : null"
+                        [attr.aria-describedby]="describedBy"
+                        [attr.disabled]="disabled ? '' : null"
+                        [attr.data-iox-date-min]="earliest || null"
+                        [attr.data-iox-date-max]="latest || null"
+                        (blur)="touch($event)"><span class="iox-field__date-value" [id]="controlId + '-value'" [attr.data-iox-empty]="dateWords ? null : ''">{{ dateWords || datePlaceholder }}</span><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></button>
+                <input type="hidden" class="iox-field__date-input" [name]="fieldName" [value]="dateIso">
+            }
             @default {
                 <input class="iox-field__control"
                        [id]="controlId"
@@ -5521,7 +6883,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                        [attr.accept]="control === 'file' ? (accept || null) : null"
                        [value]="control === 'file' ? '' : (value ?? '')"
                        (input)="emit($any($event.target).value)"
-                       (blur)="touch()">
+                       (blur)="touch($event)">
             }
         }
 
@@ -5543,6 +6905,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [IOX_FORM_MESSAGES]
+                }] }, { type: i0.ElementRef, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IS_PREVIEW]
+                }] }, { type: PageScrollProvider, decorators: [{
+                    type: Optional
                 }] }], propDecorators: { nodeId: [{
                 type: Input
             }], name: [{
@@ -5573,6 +6944,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Input
             }], accept: [{
                 type: Input
+            }], multiple: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], earliest: [{
+                type: Input
+            }], latest: [{
+                type: Input
             }], options: [{
                 type: Input
             }], optionsText: [{
@@ -5587,6 +6966,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Input
             }], showValid: [{
                 type: Input
+            }], designOpen: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], touched: [{
@@ -5600,36 +6981,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
  * action list on the FORM (decision D9), so there is nothing here to wire and nothing to get out of
  * sync. The button owns only its own appearance.
  *
- * It follows its FORM's state (vectoriox/iox-ui#42): its two labels are both in the markup and the shared
- * iox-forms.css shows "While sending" while the form's `data-iox-state` is submitting — on the canvas's Sending
- * state, the component path and the string path alike; busy and disabled are written by the ONE applier
- * (`syncSubmitButtons`) the form's runtimes call. Before, the button switched only on a `submitting` input
- * nothing ever wrote. The string renderer writes the same markup (forms-core `submitButtonLabelsHtml`).
+ * It follows its FORM's state (vectoriox/iox-ui#42, premium N2): its three labels — at rest, "While sending", "Sent"
+ * with a check — are all in the markup, stacked in one cell, and the shared iox-forms.css shows the one the form's
+ * `data-iox-state` names, swapped in place behind a 2px blur (Emil 87/139); the check draws once on Sent. Busy and
+ * disabled are written by the ONE applier (`syncSubmitButtons`) the form's runtimes and the canvas call. The string
+ * renderer writes the same markup (forms-core `submitButtonLabelsHtml`).
  */
 class IoxSubmitButtonComponent {
-    constructor() {
+    constructor(resolveMessage = null, host = null) {
+        this.resolveMessage = resolveMessage;
+        this.host = host;
         this.nodeId = '';
         this.label = 'Submit';
         this.loadingLabel = 'Sending…';
+        /** What it says once its form has sent (N2). Empty: the catalog's "Sent", in the host's language. */
+        this.sentLabel = '';
         this.disableWhileSubmitting = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxSubmitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: IoxSubmitButtonComponent, isStandalone: false, selector: "button[iox-submit]", inputs: { nodeId: "nodeId", label: "label", loadingLabel: "loadingLabel", disableWhileSubmitting: "disableWhileSubmitting" }, host: { properties: { "class": "'iox-submit iox-node-' + nodeId", "attr.type": "'submit'", "attr.data-iox-keep-enabled": "disableWhileSubmitting === false ? \"\" : null" } }, ngImport: i0, template: `@if (loadingLabel) {<span class="iox-submit__labels"><span class="iox-submit__idle">{{ label }}</span><span class="iox-submit__busy">{{ loadingLabel }}</span></span>} @else {<ng-container>{{ label }}</ng-container>}`, isInline: true, styles: [":host{box-sizing:border-box;cursor:pointer}\n"] }); }
+    /** The author's Sent words; else the host's translation of the catalog's; else "Sent" in the page's language. */
+    get sentWords() {
+        if (this.sentLabel)
+            return this.sentLabel;
+        const key = SUBMIT_MESSAGE_KEYS.Sent;
+        const translated = (this.resolveMessage ?? defaultMessageResolver)(key);
+        if (translated && translated !== key && translated !== DEFAULT_EN_MESSAGES[key])
+            return translated;
+        const element = this.host?.nativeElement;
+        return sentWord(element?.closest?.('[lang]')?.getAttribute('lang') ?? element?.ownerDocument?.documentElement?.lang);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxSubmitButtonComponent, deps: [{ token: IOX_FORM_MESSAGES, optional: true }, { token: i0.ElementRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: IoxSubmitButtonComponent, isStandalone: false, selector: "button[iox-submit]", inputs: { nodeId: "nodeId", label: "label", loadingLabel: "loadingLabel", sentLabel: "sentLabel", disableWhileSubmitting: "disableWhileSubmitting" }, host: { properties: { "class": "'iox-submit iox-node-' + nodeId", "attr.type": "'submit'", "attr.data-iox-keep-enabled": "disableWhileSubmitting === false ? \"\" : null" } }, ngImport: i0, template: `<span class="iox-submit__labels"><span class="iox-submit__idle">{{ label }}</span><span class="iox-submit__busy">{{ loadingLabel || label }}</span><span class="iox-submit__sent"><svg class="iox-submit__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><span>{{ sentWords }}</span></span></span>`, isInline: true, styles: [":host{box-sizing:border-box;cursor:pointer}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxSubmitButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[iox-submit]', template: `@if (loadingLabel) {<span class="iox-submit__labels"><span class="iox-submit__idle">{{ label }}</span><span class="iox-submit__busy">{{ loadingLabel }}</span></span>} @else {<ng-container>{{ label }}</ng-container>}`, host: {
+            args: [{ selector: 'button[iox-submit]', template: `<span class="iox-submit__labels"><span class="iox-submit__idle">{{ label }}</span><span class="iox-submit__busy">{{ loadingLabel || label }}</span><span class="iox-submit__sent"><svg class="iox-submit__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><span>{{ sentWords }}</span></span></span>`, host: {
                         '[class]': "'iox-submit iox-node-' + nodeId",
                         '[attr.type]': "'submit'",
                         // forms-core SUBMIT_KEEP_ENABLED_ATTRIBUTE — read by `syncSubmitButtons`.
                         '[attr.data-iox-keep-enabled]': 'disableWhileSubmitting === false ? "" : null',
                     }, standalone: false, styles: [":host{box-sizing:border-box;cursor:pointer}\n"] }]
-        }], propDecorators: { nodeId: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IOX_FORM_MESSAGES]
+                }] }, { type: i0.ElementRef, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { nodeId: [{
                 type: Input
             }], label: [{
                 type: Input
             }], loadingLabel: [{
                 type: Input
+            }], sentLabel: [{
+                type: Input
             }], disableWhileSubmitting: [{
                 type: Input
             }] } });
@@ -6220,6 +7625,11 @@ const PART_CLASS_NAMES = {
         help: 'iox-field__help',
         error: 'iox-field__error',
         required: 'iox-field__required',
+        // Premium M3: a Choices field's chip (N1), a Date's calendar and each of its days (N8) — the classes forms-core
+        // `fieldHtml` and the date picker runtime render.
+        chip: 'iox-field__chip',
+        calendar: 'iox-cal',
+        calendarDay: 'iox-cal__day',
     },
 };
 /** The class a declared part compiles against, e.g. ('Field', 'error') -> 'iox-field__error'.
@@ -8772,13 +10182,19 @@ class StringFormRuntime {
         const name = this.fieldNameOf(event);
         if (!name)
             return;
+        // Leaving one chip for the next, or the date button for its own calendar, is not leaving the FIELD: Smart timing
+        // must not say "Choose a date" while the visitor is choosing one.
+        const next = event.relatedTarget;
+        if (next && this.fieldElement(name)?.contains(next))
+            return;
         this.state = onFieldBlur(this.state, name, this.values(), this.fullSpec());
         this.render();
     }
     onSubmit(event) {
         // Never the browser's own submission: it would reload the page with the answers in the address and send nothing.
         event.preventDefault();
-        if (this.inFlight)
+        // Sent is final (premium N2): the button reads "Sent" and is disabled — nothing sends twice.
+        if (this.inFlight || this.form.getAttribute(FORM_STATE_ATTRIBUTE) === FormRenderState.Success)
             return;
         const values = this.values();
         this.state = onSubmitAttempt(this.state, values, this.fullSpec());
@@ -8856,10 +10272,16 @@ class StringFormRuntime {
         const el = this.fieldElement(spec.name);
         if (!el)
             return undefined;
+        // A Date's answer is the ISO day its hidden input carries (N8) — never the button's words.
+        if (spec.control === ControlType.Date)
+            return el.querySelector(`input.${FieldClass.DateInput}`)?.value ?? '';
         const controls = this.controlsOf(el);
         const first = controls[0];
         if (!first)
             return undefined;
+        // Several answers (Choices, N1): the ticked options' values, in the options' order — forms-core decides.
+        if (isMultiValueField(spec))
+            return controls.filter(c => c.checked).map(c => c.value);
         if (first.type === 'radio')
             return controls.find(c => c.checked)?.value ?? '';
         if (first.type === 'checkbox')
@@ -8920,12 +10342,14 @@ class StringFormRuntime {
         const next = failureAnnouncement(errors);
         Promise.resolve().then(() => { region.textContent = next; });
     }
+    /** Focus the first field that failed and shake it once (premium N2 — the ONE `shakeElement`). */
     focusFirstInvalid() {
         for (const field of this.spec.fields) {
             if (!this.state.errors[field.name])
                 continue;
             const el = this.fieldElement(field.name);
             this.controlsOf(el ?? this.form)[0]?.focus();
+            shakeElement(el);
             return;
         }
     }
@@ -8959,5 +10383,5 @@ function attachStringForm(form, options = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { A11yAttribute, A11yTrait, ACCESSIBLE_NAME_TYPES, AOSService, ARIA_CURRENT_PAGE, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, COMPONENT_STATE_SELECTOR, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CURRENT_LINK_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ComponentState, ContainerComponent, ContextStore, DECORATIVE_TYPES, DEFAULT_GALLERY_SCHEDULER, DEFAULT_INTERACTION_EASING, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DIALOG_CLOSE_ABOVE_ATTRIBUTE, DIALOG_NODE_TYPE, DeclarationContext, EASING_KEYWORDS, EASING_TOKENS, ENTRANCE_ACTION_TYPES, ENTRANCE_FALLBACK_CSS, ENTRANCE_NOSCRIPT_CSS, ENTRANCE_PRESTATE_ATTRIBUTE, EXIT_ACTION_TYPES, EasingKeyword, EasingToken, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION_TRAITS, HOVER_MEDIA_QUERY, HOVER_STATES, INTERACTION_ANIMATION_ID, INTERACTION_HIDDEN_ATTRIBUTE, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxDialogComponent, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, IoxVideoComponent, LAST_EMITTED_STATES, LEGACY_DIRECTION_KEY, LEGACY_HOVER_TRANSITION_TRAITS, LEGACY_SWIPER_CONTROLS, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, NAMED_GROUP_ROLES, NO_PAGE_TRANSITION, ON_STATE_ROLES, OUTER_STYLE_PROPS, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PART_PAGINATION_MODIFIER, PHONE_TRANSITION_QUERY, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, PointerKind, REDUCED_MOTION_QUERY, RELATIONAL_STATE_PSEUDO, RevealActionType, SCROLLED_ATTRIBUTE, SCROLLED_STATE_ROLE, SCROLLED_THRESHOLD_PX, SCROLL_EASINGS, SELF_PLAYING_TRIGGERS, SLIDER_INPUTS_ATTRIBUTE, SLIDER_INPUT_NAMES, STATE_PSEUDO_CLASS, STRUCTURAL_STATES, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SWIPER_TRIGGER_EVENTS, ScrollEasing, SectionComponent, SettleMode, StringFormRuntime, SwiperModuleName, TARGETED_STATE_SUFFIX, TEXT_ALIGN_KEY, TEXT_DIRECTION_KEY, TRANSITION_FEELS, TRANSITION_PROPERTY_KEY, TextAlign, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, VisibilityActionType, activeActions, animateAction, applyBindingPipes, applyFeel, attachStringForm, bootSlider, breakpointDef, breakpointForWidth, breakpointQueryFor, buildInteractionKeyframes, buildPartSelector, buildSwiperBreakpoints, buildTargetedStateSelector, buildTargetedSuffixSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, closeAboveMediaQuery, collectContextSlotKeys, compileDeclarations, compilePageStyle, componentStatesFor, composeVirtualTraits, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, declaredInputNames, decomposeBackdropFilter, defaultHoverTransitionTraits, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, domHasSliderParts, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, entranceStartsHidden, feelFor, finalKeyframe, framesFromLiveValue, gateHoverRule, getSeoValue, hasHoverState, hasOwnPageTransition, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isCubicBezier, isCurrentLink, isEasingToken, isExternalOrFragment, isGradientPaint, isHoverPointer, isHoverState, isInputOverriddenAt, isInteractionEasing, isLastEmittedStateKey, isOverriddenAt, isPressFeedback, isScrolled, isStructuralState, isValidSlotKey, isWholeBackdropSet, keyframePropertyName, keyframeStyleEntries, legacyEnterToTransition, mediaQueryFor, mergeSwiperBreakpoints, migrateLegacyDirection, migrateLegacyTextAlign, motionAllowed, nearestCommonAncestorId, needsAccessibleName, needsGroupName, nodeA11yAttributes, nodeCssId, nodeTraitValue, nodeUsesContext, normalizeAppPath, normalizeGalleryImage, normalizeIconClass, orderStatesForEmit, pageTransitionOf, parentBreakpoint, parseUrlList, partClassName, planPartRule, planResponsiveRules, planScroll, planStateRule, planSwiperOptions, playDualLayerTransition, playInteraction, prefersReducedMotion, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolveInteractionEasing, resolvePageTransition, resolvePath, resolveSeo, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, settleInteraction, settleModeFor, sliderControlElements, sliderInputsFromProps, sliderInputsOf, splitOuterProps, splitPressFeedback, stateNamesIn, statePseudoClass, stateSelectorSuffix, stateTransitionProperties, stringFormRuntimeOf, stripSuppressedProps, swiperAutoplayAllowed, swiperLoopOptions, swiperModuleNames, syncNodeA11yAttributes, syncSubmitButtons, targetedStateSelector, transitionPropertyList, viewportTransitionContext, watchScrolled, withContextSlots, withStateTransitions, wrapInBreakpointQuery, wrapInMediaQuery };
+export { A11yAttribute, A11yTrait, ACCESSIBLE_NAME_TYPES, AOSService, ARIA_CURRENT_PAGE, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CALENDAR_CLOSING_ATTRIBUTE, CALENDAR_DESIGN_ATTRIBUTE, CALENDAR_INSTANT_ATTRIBUTE, CALENDAR_SHEET_QUERY, COMPONENT_STATE_SELECTOR, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CURRENT_LINK_TYPES, CalendarClass, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ComponentState, ContainerComponent, ContextStore, DECORATIVE_TYPES, DEFAULT_GALLERY_SCHEDULER, DEFAULT_INTERACTION_EASING, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DIALOG_CLOSE_ABOVE_ATTRIBUTE, DIALOG_NODE_TYPE, DatePickerRuntime, DeclarationContext, EASING_KEYWORDS, EASING_TOKENS, ENTRANCE_ACTION_TYPES, ENTRANCE_FALLBACK_CSS, ENTRANCE_NOSCRIPT_CSS, ENTRANCE_PRESTATE_ATTRIBUTE, EXIT_ACTION_TYPES, EasingKeyword, EasingToken, FLOATING_GAP, FLOATING_MARGIN, FloatingSide, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION_TRAITS, HOVER_MEDIA_QUERY, HOVER_STATES, INTERACTION_ANIMATION_ID, INTERACTION_HIDDEN_ATTRIBUTE, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxDialogComponent, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, IoxVideoComponent, LAST_EMITTED_STATES, LEGACY_DIRECTION_KEY, LEGACY_HOVER_TRANSITION_TRAITS, LEGACY_SWIPER_CONTROLS, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, NAMED_GROUP_ROLES, NO_PAGE_TRANSITION, ON_STATE_ROLES, OUTER_STYLE_PROPS, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PART_PAGINATION_MODIFIER, PHONE_TRANSITION_QUERY, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, PointerKind, REDUCED_MOTION_QUERY, RELATIONAL_STATE_PSEUDO, RevealActionType, SCROLLED_ATTRIBUTE, SCROLLED_STATE_ROLE, SCROLLED_THRESHOLD_PX, SCROLL_EASINGS, SELF_PLAYING_TRIGGERS, SHAKE_DURATION_MS, SHAKE_EASING, SHAKE_KEYFRAMES, SLIDER_INPUTS_ATTRIBUTE, SLIDER_INPUT_NAMES, STATE_PSEUDO_CLASS, STRUCTURAL_STATES, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SWIPER_TRIGGER_EVENTS, ScrollEasing, SectionComponent, SettleMode, StringFormRuntime, SwiperModuleName, TARGETED_STATE_SUFFIX, TEXT_ALIGN_KEY, TEXT_DIRECTION_KEY, TRANSITION_FEELS, TRANSITION_PROPERTY_KEY, TextAlign, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, VisibilityActionType, activeActions, animateAction, applyBindingPipes, applyFeel, attachDatePicker, attachDatePickers, attachStringForm, bootSlider, breakpointDef, breakpointForWidth, breakpointQueryFor, buildInteractionKeyframes, buildPartSelector, buildSwiperBreakpoints, buildTargetedStateSelector, buildTargetedSuffixSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, closeAboveMediaQuery, collectContextSlotKeys, compileDeclarations, compilePageStyle, componentStatesFor, composeVirtualTraits, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, datePickerOf, declaredInputNames, decomposeBackdropFilter, defaultHoverTransitionTraits, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, domHasSliderParts, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, entranceStartsHidden, feelFor, fieldLanguage, finalKeyframe, framesFromLiveValue, gateHoverRule, getSeoValue, hasHoverState, hasOwnPageTransition, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isCubicBezier, isCurrentLink, isEasingToken, isExternalOrFragment, isGradientPaint, isHoverPointer, isHoverState, isInputOverriddenAt, isInteractionEasing, isLastEmittedStateKey, isOverriddenAt, isPressFeedback, isScrolled, isStructuralState, isValidSlotKey, isWholeBackdropSet, keyframePropertyName, keyframeStyleEntries, legacyEnterToTransition, mediaQueryFor, mergeSwiperBreakpoints, migrateLegacyDirection, migrateLegacyTextAlign, motionAllowed, nearestCommonAncestorId, needsAccessibleName, needsGroupName, nodeA11yAttributes, nodeCssId, nodeTraitValue, nodeUsesContext, normalizeAppPath, normalizeGalleryImage, normalizeIconClass, orderStatesForEmit, pageTransitionOf, parentBreakpoint, parseUrlList, partClassName, placeFloating, planPartRule, planResponsiveRules, planScroll, planStateRule, planSwiperOptions, playDualLayerTransition, playInteraction, prefersReducedMotion, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolveInteractionEasing, resolvePageTransition, resolvePath, resolveSeo, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setDateFieldValue, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, settleInteraction, settleModeFor, shakeElement, showCalendarDesign, sliderControlElements, sliderInputsFromProps, sliderInputsOf, splitOuterProps, splitPressFeedback, stateNamesIn, statePseudoClass, stateSelectorSuffix, stateTransitionProperties, stringFormRuntimeOf, stripSuppressedProps, swiperAutoplayAllowed, swiperLoopOptions, swiperModuleNames, syncNodeA11yAttributes, syncSubmitButtons, targetedStateSelector, transitionPropertyList, viewportTransitionContext, watchScrolled, withContextSlots, withStateTransitions, wrapInBreakpointQuery, wrapInMediaQuery };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map