@vectoriox/iox-ui 5.82.2 → 5.83.0

package/src/forms-core/rule-catalog.ts

@@ -39,8 +39,9 @@ const TEXTUAL: readonly ControlType[] = [
     ControlType.Password, ControlType.Textarea,
 ];
 
-/** Controls with a comparable magnitude. */
-const NUMERIC: readonly ControlType[] = [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: readonly ControlType[] = [ControlType.Number, ControlType.Time, ControlType.Range];
 
 export const RULE_DESCRIPTORS: readonly RuleDescriptor[] = Object.freeze([
     {

package/src/forms-core/submit-lifecycle.ts

@@ -79,18 +79,22 @@ export function parseClientFormSpec(raw: string | null | undefined): ClientFormS
     }
 }
 
-/** How a submit button wears its form's state (vectoriox/iox-ui#42). */
+/** How a submit button wears its form's state (vectoriox/iox-ui#42, premium N2). */
 export interface SubmitButtonView {
     busy: boolean;
     disabled: boolean;
 }
 
-/** 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`.
+ */
 export function submitButtonView(state: FormRenderState | string | null | undefined, disableWhileSubmitting = true): SubmitButtonView {
     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. */
@@ -100,17 +104,43 @@ export enum SubmitLabelClass {
     Labels = 'iox-submit__labels',
     Idle = 'iox-submit__idle',
     Busy = 'iox-submit__busy',
+    Sent = 'iox-submit__sent',
+    Check = 'iox-submit__check',
+}
+
+/** 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. */
+export 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: Readonly<Record<string, string>> = Object.freeze({ en: 'Sent', he: 'נשלח' });
+
+export function sentWord(lang: string | null | undefined): string {
+    const language = String(lang ?? '').toLowerCase().split(/[-_]/)[0];
+    return SENT_WORDS[language === 'iw' ? 'he' : language] ?? SENT_WORDS['en'];
+}
+
+/** A submit button's three labels: what it says at rest, while its form sends, and once it has sent. */
+export interface SubmitLabels {
+    idle: string;
+    /** "While sending" — none: the button keeps its idle words while sending. */
+    busy?: string | null;
+    /** "Sent" — none: the catalog's word, translated by the host (`SUBMIT_MESSAGE_KEYS.Sent`). */
+    sent: string;
 }
 
 /**
- * A submit button's words, as markup: its label, or — when it has a "While sending" label — both, stacked in one
- * cell (the button keeps the longer one's width and never jumps). The string renderer's copy of
- * `IoxSubmitButtonComponent`'s template; `escape` is the renderer's.
+ * A submit button's words, as markup: its three labels stacked in one grid cell (the button keeps the longest one's
+ * width and never jumps), each shown by the form's state through the shared CSS — swapped in place behind a 2px blur
+ * (Emil 87/139). The string renderer's copy of `IoxSubmitButtonComponent`'s template; `escape` is the renderer's.
  */
-export function submitButtonLabelsHtml(label: string, loadingLabel: string | null | undefined, escape: (v: string) => string): string {
-    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>`;
+export function submitButtonLabelsHtml(labels: SubmitLabels, escape: (v: string) => string): string {
+    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>`;
 }
 
 export const FORM_HONEYPOT_CLASS = 'iox-form__hp';

package/src/forms-core/validate.ts

@@ -9,12 +9,15 @@ import {
     FieldSpec,
     FormSpec,
     IMPLIED_PATTERN,
+    isMultiValueField,
+    OPTION_CONTROLS,
     PATTERN_PRESETS,
     PatternPreset,
     RuleName,
     ValidationRule,
 } from './form.model';
-import { PATTERN_MESSAGE_KEYS, RULE_MESSAGE_KEYS } from './messages';
+import { addDaysIso, isDateBoundParams, isIsoDate, resolveDateBound, todayIso } from './dates';
+import { CHOICE_MESSAGE_KEYS, DATE_MESSAGE_KEYS, PATTERN_MESSAGE_KEYS, RULE_MESSAGE_KEYS } from './messages';
 
 export interface FieldError {
     /** i18n key, or the author's own override string when they set one. */
@@ -33,6 +36,16 @@ export interface FormResult {
     errors: Record<string, FieldError>;
 }
 
+/**
+ * When "today" is, for a Date's relative bounds (premium N8). A browser leaves it out: its own local day is the
+ * visitor's. The SERVER passes `dateSlackDays: 1` — it cannot know the visitor's time zone, so a day either side of
+ * its own today is still accepted.
+ */
+export interface ValidateOptions {
+    today?: string;
+    dateSlackDays?: number;
+}
+
 /** A file, as either runtime hands it over. Kept structural so this file imports no DOM types. */
 interface FileLike {
     name?: string;
@@ -55,6 +68,7 @@ export function validateField(
     value: unknown,
     spec: FieldSpec,
     form: Record<string, unknown> = {},
+    options: ValidateOptions = {},
 ): FieldResult {
     const rules = effectiveRules(spec);
     const empty = isEmpty(value, spec.control);
@@ -63,7 +77,7 @@ export function validateField(
         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,
@@ -82,10 +96,11 @@ export function validateField(
 export function validateForm(
     values: Record<string, unknown>,
     spec: FormSpec,
+    options: ValidateOptions = {},
 ): FormResult {
     const errors: Record<string, FieldError> = {};
     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 };
         }
@@ -93,6 +108,22 @@ export function validateForm(
     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.
+ */
+export function normaliseAnswers(values: Record<string, unknown> | null | undefined, spec: Pick<FormSpec, 'fields'>): Record<string, unknown> {
+    const out: Record<string, unknown> = { ...(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. */
 export function firstInvalidField(spec: FormSpec, errors: Record<string, FieldError>): string | null {
     for (const field of spec.fields ?? []) if (errors[field.name]) return field.name;
@@ -124,9 +155,51 @@ function effectiveRules(spec: FieldSpec): ValidationRule[] {
         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: FieldSpec): string {
+    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: unknown): unknown[] {
+    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: unknown, spec: FieldSpec): boolean {
+    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: ValidationRule, value: unknown, options: ValidateOptions): FieldError | null {
+    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: unknown, control: ControlType): boolean {
     if (value === null || value === undefined) return true;
@@ -141,18 +214,31 @@ function check(
     value: unknown,
     spec: FieldSpec,
     form: Record<string, unknown>,
+    options: ValidateOptions,
 ): FieldError | null {
     const fail = (messageKey: string, params?: Record<string, any>): FieldError => ({ 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;
 

package/src/generation-core/audit-site.ts

@@ -1,6 +1,6 @@
 import { ELEMENT_ACTION_DESCRIPTORS, resolveActionAvailability } from '@vectoriox/iox-ui/actions-core';
 import { auditDesignContrast, DesignTokenLike } from '@vectoriox/iox-ui/design-core';
-import { collectFormSpec, ControlType, FIELD_NODE_TYPE, FORM_NODE_TYPE } from '@vectoriox/iox-ui/forms-core';
+import { collectFormSpec, ControlType, FIELD_NODE_TYPE, FORM_CHANNEL_ROLE, FORM_NODE_TYPE, isChannelFilled } from '@vectoriox/iox-ui/forms-core';
 
 import { blocksPublish, ComposedPlaceholder, PlaceholderKind } from './compose-site';
 import { navShapeOf } from './nav-shape';
@@ -40,6 +40,9 @@ export enum SiteFindingCode {
     NoHeader = 'no-header',
     NoPhoneMenu = 'no-phone-menu',
     FormWithoutId = 'form-without-id',
+    /** Premium N2: a form's second way to reach you (WhatsApp, a phone, an email) has no address yet — the studio's own
+     *  fact, never written for it. */
+    EmptyChannel = 'empty-channel',
     EmailNeedsMailer = 'email-needs-mailer',
     TrackerWithoutBanner = 'tracker-without-banner',
     NoTitle = 'no-title',
@@ -64,6 +67,7 @@ export const FINDING_SEVERITY: Readonly<Record<SiteFindingCode, CheckSeverity>>
     [SiteFindingCode.NoHeader]: CheckSeverity.Warn,
     [SiteFindingCode.NoPhoneMenu]: CheckSeverity.Warn,
     [SiteFindingCode.FormWithoutId]: CheckSeverity.Block,
+    [SiteFindingCode.EmptyChannel]: CheckSeverity.Block,
     [SiteFindingCode.EmailNeedsMailer]: CheckSeverity.Warn,
     [SiteFindingCode.TrackerWithoutBanner]: CheckSeverity.Warn,
     [SiteFindingCode.NoTitle]: CheckSeverity.Warn,
@@ -87,6 +91,7 @@ const CHECK_OF: Readonly<Record<SiteFindingCode, SiteCheckId>> = {
     [SiteFindingCode.NoHeader]: SiteCheckId.Navigation,
     [SiteFindingCode.NoPhoneMenu]: SiteCheckId.Navigation,
     [SiteFindingCode.FormWithoutId]: SiteCheckId.Forms,
+    [SiteFindingCode.EmptyChannel]: SiteCheckId.Forms,
     [SiteFindingCode.EmailNeedsMailer]: SiteCheckId.Forms,
     [SiteFindingCode.TrackerWithoutBanner]: SiteCheckId.Consent,
     [SiteFindingCode.NoTitle]: SiteCheckId.Seo,
@@ -243,6 +248,9 @@ function checkForms(ctx: Ctx, snapshot: SiteAuditSnapshot, pages: ReadonlyArray<
         }
         walkSerialized(n.children ?? [], f => {
             if (f.type === FIELD_NODE_TYPE && PERSONAL_CONTROLS.has(String(f.props['control'] ?? ControlType.Text))) personal = true;
+            if (f.role === FORM_CHANNEL_ROLE && !isChannelFilled(f.props['href'])) {
+                add(ctx, SiteFindingCode.EmptyChannel, 'A form\'s second way to reach you has no number or address yet — only you can fill it in.', { ...where, nodeId: f.id });
+            }
         });
     });
     return personal;

package/src/generation-core/compose-site.ts

@@ -1,6 +1,6 @@
 import { AnimateId, COLOR_SCHEMES, DesignChoices, LinkType, resolveDesignChoices, setColorScheme } from '@vectoriox/iox-ui/design-core';
 import { SEO_DESCRIPTION_MAX, SEO_TITLE_MAX, SeoRawDoc } from '@vectoriox/iox-ui/seo-core';
-import { FormPresetDef, FormPresetField, formPresetById } from '@vectoriox/iox-ui/forms-core';
+import { channelOpensNewTab, FORM_ACTIONS_ROLE, FORM_CHANNEL_ROLE, FormPresetChannel, FormPresetDef, FormPresetField, formPresetById } from '@vectoriox/iox-ui/forms-core';
 import {
     ACCORDION_BIND_PROP, ACCORDION_CONTENT_LIMIT, ACCORDION_WORDS, accordionAnswerOf, accordionItems, accordionQuestionOf, AccordionRole,
     buildAccordionRecipe, buildCardRecipe, buildCarouselRecipe, buildLightboxRecipe, CardLayout, CardPart, CardRole, CARD_LAYOUTS, CARD_PARTS, CompositeNode,
@@ -215,7 +215,10 @@ const FORM_SUCCESS = 'FormSuccess';
 const FORM_ERROR = 'FormError';
 const FORM_STATE_BLOCKS = [FORM_SUCCESS, FORM_ERROR];
 /** The Field traits a preset field fills, 1:1 (`FormPresetField`). */
-const PRESET_FIELD_PROPS: ReadonlyArray<keyof FormPresetField> = ['label', 'control', 'required', 'help', 'placeholder', 'optionsText', 'rows'];
+const PRESET_FIELD_PROPS: ReadonlyArray<keyof FormPresetField> = ['label', 'control', 'required', 'help', 'placeholder', 'optionsText', 'rows', 'multiple', 'appearance', 'earliest', 'latest'];
+const FIELD_GROUP = 'FieldGroup';
+/** The second channel beside Send (premium N2): the quieter button. */
+const CHANNEL_STYLE = 'button-secondary';
 const LABEL_TAG = 'span';
 const TEXT = 'Text';
 /** A button's label reads the button's own type and ink (contract element style, W1.1 Q6). */
@@ -494,7 +497,23 @@ function presetChildren(preset: FormPresetDef, id: string): SerializedNode[] {
         block.children = [create(`${id}-${n + 1 + i}-0`, TEXT, { content: words })];
         return block;
     });
-    return [...fields, submit, ...blocks];
+    return [...fields, preset.channel ? actionsRow(submit, preset.channel, `${id}-${n}`) : submit, ...blocks];
+}
+
+/**
+ * Send and the second channel in ONE row (premium N2), the way the builder's tray builds it (iox-builder
+ * `buildFormActionsRow`): the channel's address is the studio's own fact and starts EMPTY — the Publishable gate
+ * blocks publishing until it is filled (`auditSite`, empty-channel). Never a number written for it.
+ */
+function actionsRow(submit: SerializedNode, channel: FormPresetChannel, id: string): SerializedNode {
+    const row = create(`${id}-row`, FIELD_GROUP);
+    row.role = FORM_ACTIONS_ROLE;
+    Object.assign(row.styleProps, { flexWrap: 'wrap', alignItems: 'center', gap: '12px' });
+    const button = create(`${id}-channel`, BUTTON_BLOCK, { tag: 'a', linkType: LinkType.External, href: '', target: channelOpensNewTab(channel.kind) ? '_blank' : '_self' }, CHANNEL_STYLE);
+    button.role = FORM_CHANNEL_ROLE;
+    button.children = [create(`${id}-channel-0`, TEXT, { content: channel.label }, BUTTON_LABEL_STYLE)];
+    row.children = [submit, button];
+    return row;
 }
 
 /** A Form: its stable id, its preset's name and children (or the pattern's own children), and both state

package/src/generation-core/node-baselines.generated.ts

@@ -3835,6 +3835,10 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "label": "Label",
       "control": "text",
       "placeholder": "",
+      "multiple": false,
+      "appearance": "chips",
+      "earliest": "",
+      "latest": "",
       "help": "",
       "rows": 4,
       "rangeMin": 0,
@@ -3938,6 +3942,10 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "label",
       "control",
       "placeholder",
+      "multiple",
+      "appearance",
+      "earliest",
+      "latest",
       "help",
       "rows",
       "rangeMin",
@@ -4241,6 +4249,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
     "props": {
       "label": "Send",
       "loadingLabel": "Sending…",
+      "sentLabel": "",
       "disableWhileSubmitting": true
     },
     "styleProps": {
@@ -4332,6 +4341,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
     "traits": [
       "label",
       "loadingLabel",
+      "sentLabel",
       "disableWhileSubmitting"
     ],
     "styleTraits": [

package/src/generation-core/plan-wire.ts

@@ -1,5 +1,5 @@
 import { ANIMATE_IDS, DesignChoices } from '@vectoriox/iox-ui/design-core';
-import { FORM_PRESETS } from '@vectoriox/iox-ui/forms-core';
+import { planFormPresetIds } from '@vectoriox/iox-ui/forms-core';
 
 import { describeShapeKey, jsonAnyOf, jsonBoolean, jsonInteger, jsonListOf, jsonOneOf, JsonSchema, jsonShapedObject, jsonText } from './json-schema';
 import { patternLinkSlots, patternOptionalParts, patternSlots, PatternGlobalPosition, SITE_PATTERNS } from './patterns';
@@ -320,7 +320,7 @@ export function wireSectionJsonSchema(): JsonSchema {
         links: jsonListOf(shaped(PlanWireEntry.SlotLink, { slot: closedOrText(unique(patterns.flatMap(patternLinkSlots))), route: jsonText() })),
         binding: jsonText(),
         without: jsonListOf(closedOrText(unique(patterns.flatMap(patternOptionalParts)))),
-        form: orNone(FORM_PRESETS.map(p => p.id)),
+        form: orNone(planFormPresetIds()),
         enter: orNone(ANIMATE_IDS),
     });
 }

package/styles/iox-design.css

@@ -464,3 +464,13 @@ span.iox-video__play { pointer-events: none; }
 .iox-role-slider-pagination .swiper-pagination-bullet-active { width: 34px; }
 .iox-role-slider-pagination .swiper-pagination-bullet-active::after { width: 26px; background: currentColor; }
 .iox-role-slider-pagination .swiper-pagination-bullet:focus-visible { outline: none; box-shadow: var(--iox-focus-ring); }
+
+/* ── The date picker's sheet (premium components N8) ────────────────────────────────────────────────
+   On a phone the calendar is a bottom sheet over the page, dimmed by the look's own scrim (a dialog's — Emil 108:
+   a modal task dims to focus). Its colours are the contract's `calendar` / `calendar-day` (iox-forms.css, under the
+   field marker); its placement and motion are iox-forms.css's too — this is the one token the sheet reads. */
+@media (max-width: 767px) {
+    .iox-es-field dialog.iox-cal::backdrop {
+        background: var(--iox-scrim);
+    }
+}