@vectoriox/iox-ui 5.82.1 → 5.83.0

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

@@ -3402,7 +3402,23 @@ export const SPEC_ELEMENT_STYLES = [
       "padding": "var(--iox-badge-pad)",
       "fontFamily": "var(--iox-font-label)",
       "fontSize": "var(--iox-badge-size)",
-      "fontWeight": "var(--iox-weight-label)"
+      "fontWeight": "var(--iox-weight-label)",
+      "transitionDuration": "var(--iox-dur-fast)",
+      "transitionTimingFunction": "var(--iox-ease-standard)"
+    },
+    "hover": {
+      "borderColor": "var(--iox-text)"
+    },
+    "selected": {
+      "backgroundColor": "var(--iox-accent-text)",
+      "color": "var(--iox-bg)",
+      "borderColor": "var(--iox-accent-text)"
+    },
+    "focus": {
+      "boxShadow": "var(--iox-focus-ring)"
+    },
+    "disabled": {
+      "opacity": "0.55"
     }
   },
   {
@@ -3434,6 +3450,56 @@ export const SPEC_ELEMENT_STYLES = [
       "color": "var(--iox-media-scrim-ink)"
     }
   },
+  {
+    "id": "calendar",
+    "label": "Calendar",
+    "group": "Forms",
+    "appliesTo": [],
+    "base": {
+      "backgroundColor": "var(--iox-surface)",
+      "color": "var(--iox-text)",
+      "borderRadius": "var(--iox-dialog-radius)",
+      "boxShadow": "var(--iox-dialog-shadow)",
+      "fontFamily": "var(--iox-font-body)"
+    }
+  },
+  {
+    "id": "calendar-day",
+    "label": "Calendar day",
+    "group": "Forms",
+    "appliesTo": [],
+    "base": {
+      "backgroundColor": "transparent",
+      "color": "var(--iox-text)",
+      "borderStyle": "solid",
+      "borderWidth": "var(--iox-border-width)",
+      "borderColor": "transparent",
+      "borderRadius": "var(--iox-radius-pill)",
+      "fontFamily": "var(--iox-font-body)",
+      "fontSize": "var(--iox-size-body)",
+      "fontVariantNumeric": "tabular-nums",
+      "transitionDuration": "var(--iox-dur-fast)",
+      "transitionTimingFunction": "var(--iox-ease-standard)"
+    },
+    "hover": {
+      "backgroundColor": "var(--iox-surface-2)"
+    },
+    "current": {
+      "borderColor": "var(--iox-line-strong)"
+    },
+    "selected": {
+      "backgroundColor": "var(--iox-accent-text)",
+      "color": "var(--iox-bg)",
+      "borderColor": "var(--iox-accent-text)"
+    },
+    "focus": {
+      "boxShadow": "var(--iox-focus-ring)"
+    },
+    "disabled": {
+      "color": "var(--iox-text-muted)",
+      "opacity": "0.4"
+    }
+  },
   {
     "id": "notice-success",
     "label": "Success message",
@@ -3697,6 +3763,112 @@ export const SPEC_FIELD_CLASS_BASELINE = {
   },
   ".iox-es-field .iox-field__control--switch:checked": {
     "background": "var(--iox-accent-text)"
+  },
+  ".iox-es-field .iox-field__chip": {
+    "background-color": "transparent",
+    "color": "var(--iox-text)",
+    "border-style": "solid",
+    "border-width": "var(--iox-border-width)",
+    "border-color": "var(--iox-chip-border)",
+    "border-radius": "var(--iox-badge-radius)",
+    "padding": "var(--iox-badge-pad)",
+    "font-family": "var(--iox-font-label)",
+    "font-size": "var(--iox-badge-size)",
+    "font-weight": "var(--iox-weight-label)",
+    "transition": "border-color var(--iox-dur-fast) var(--iox-ease-standard), background-color var(--iox-dur-fast) var(--iox-ease-standard), color var(--iox-dur-fast) var(--iox-ease-standard), box-shadow var(--iox-dur-fast) var(--iox-ease-standard), opacity var(--iox-dur-fast) var(--iox-ease-standard), transform var(--iox-dur-fast) var(--iox-ease-standard)"
+  },
+  ".iox-es-field .iox-field__chip:active:not(:has(:disabled))": {
+    "transform": "scale(var(--iox-press-scale))"
+  },
+  ".iox-es-field .iox-field__chip:hover:not(:has(:disabled))": {
+    "border-color": "var(--iox-text)"
+  },
+  ".iox-es-field .iox-field__chip:has(:checked)": {
+    "background-color": "var(--iox-accent-text)",
+    "color": "var(--iox-bg)",
+    "border-color": "var(--iox-accent-text)"
+  },
+  ".iox-es-field .iox-field__chip:has(:focus-visible)": {
+    "box-shadow": "var(--iox-focus-ring)",
+    "outline": "2px solid transparent",
+    "outline-offset": "2px"
+  },
+  ".iox-es-field .iox-field__chip:has(:disabled)": {
+    "opacity": "0.55"
+  },
+  ".iox-es-field .iox-field__date-value[data-iox-empty]": {
+    "color": "var(--iox-text-muted)"
+  },
+  ".iox-es-field .iox-field__date-icon": {
+    "color": "var(--iox-text-muted)"
+  },
+  ".iox-es-field .iox-field__control--date[aria-expanded='true']": {
+    "border-color": "var(--iox-accent-text)",
+    "box-shadow": "var(--iox-field-focus)"
+  },
+  ".iox-es-field .iox-cal": {
+    "background-color": "var(--iox-surface)",
+    "color": "var(--iox-text)",
+    "border-radius": "var(--iox-dialog-radius)",
+    "box-shadow": "var(--iox-dialog-shadow), 0 0 0 var(--iox-border-width) var(--iox-line)",
+    "font-family": "var(--iox-font-body)"
+  },
+  ".iox-es-field .iox-cal .iox-cal__title": {
+    "font-family": "var(--iox-font-display)",
+    "font-weight": "var(--iox-weight-heading)",
+    "color": "var(--iox-text)"
+  },
+  ".iox-es-field .iox-cal .iox-cal__weekday": {
+    "font-family": "var(--iox-font-label)",
+    "font-size": "var(--iox-size-label)",
+    "font-weight": "var(--iox-weight-label)",
+    "color": "var(--iox-text-muted)"
+  },
+  ".iox-es-field .iox-cal .iox-cal__grab": {
+    "background": "var(--iox-line-strong)"
+  },
+  ".iox-es-field .iox-cal .iox-cal__nav button:hover:not(:disabled)": {
+    "background-color": "var(--iox-surface-2)"
+  },
+  ".iox-es-field .iox-cal .iox-cal__nav button:focus-visible": {
+    "box-shadow": "var(--iox-focus-ring)",
+    "outline": "2px solid transparent",
+    "outline-offset": "2px"
+  },
+  ".iox-es-field .iox-cal .iox-cal__day": {
+    "background-color": "transparent",
+    "color": "var(--iox-text)",
+    "border-style": "solid",
+    "border-width": "var(--iox-border-width)",
+    "border-color": "transparent",
+    "border-radius": "var(--iox-radius-pill)",
+    "font-family": "var(--iox-font-body)",
+    "font-size": "var(--iox-size-body)",
+    "font-variant-numeric": "tabular-nums",
+    "transition": "background-color var(--iox-dur-fast) var(--iox-ease-standard), color var(--iox-dur-fast) var(--iox-ease-standard), border-color var(--iox-dur-fast) var(--iox-ease-standard), box-shadow var(--iox-dur-fast) var(--iox-ease-standard), opacity var(--iox-dur-fast) var(--iox-ease-standard), transform var(--iox-dur-fast) var(--iox-ease-standard)"
+  },
+  ".iox-es-field .iox-cal .iox-cal__day:active:not([aria-disabled='true'])": {
+    "transform": "scale(var(--iox-press-scale))"
+  },
+  ".iox-es-field .iox-cal .iox-cal__day:hover:not([aria-disabled='true'])": {
+    "background-color": "var(--iox-surface-2)"
+  },
+  ".iox-es-field .iox-cal .iox-cal__day[aria-current='date']": {
+    "border-color": "var(--iox-line-strong)"
+  },
+  ".iox-es-field .iox-cal .iox-cal__cell[aria-selected='true'] > .iox-cal__day": {
+    "background-color": "var(--iox-accent-text)",
+    "color": "var(--iox-bg)",
+    "border-color": "var(--iox-accent-text)"
+  },
+  ".iox-es-field .iox-cal .iox-cal__day[aria-disabled='true']": {
+    "color": "var(--iox-text-muted)",
+    "opacity": "0.4"
+  },
+  ".iox-es-field .iox-cal .iox-cal__day:focus-visible": {
+    "box-shadow": "var(--iox-focus-ring)",
+    "outline": "2px solid transparent",
+    "outline-offset": "2px"
   }
 } as const;
 
@@ -3943,6 +4115,42 @@ export const SPEC_CONTRAST_AUDIT = {
       "on": "var(--iox-surface)",
       "min": 3
     },
+    {
+      "part": "calendar text",
+      "fg": "var(--iox-text)",
+      "on": "var(--iox-surface)",
+      "min": 4.5
+    },
+    {
+      "part": "calendar weekday",
+      "fg": "var(--iox-text-muted)",
+      "on": "var(--iox-surface)",
+      "min": 4.5
+    },
+    {
+      "part": "calendar today ring",
+      "fg": "var(--iox-line-strong)",
+      "on": "var(--iox-surface)",
+      "min": 3
+    },
+    {
+      "part": "calendar chosen day",
+      "fg": "var(--iox-accent-text)",
+      "on": "var(--iox-surface)",
+      "min": 3
+    },
+    {
+      "part": "calendar chosen day number",
+      "fg": "var(--iox-bg)",
+      "on": "var(--iox-accent-text)",
+      "min": 4.5
+    },
+    {
+      "part": "calendar day hover",
+      "fg": "var(--iox-text)",
+      "on": "var(--iox-surface-2)",
+      "min": 4.5
+    },
     {
       "part": "checkbox · radio checked",
       "fg": [

package/src/forms-core/channel.ts

@@ -0,0 +1,85 @@
+/**
+ * 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`). */
+export const FORM_CHANNEL_ROLE = 'form.channel';
+/** The role of the row that holds the submit button and the channel (`iox-role-form-actions`). */
+export const FORM_ACTIONS_ROLE = 'form.actions';
+
+export enum ChannelKind {
+    WhatsApp = 'whatsapp',
+    Phone = 'phone',
+    Email = 'email',
+    Link = 'link',
+}
+
+export const CHANNEL_KINDS: ReadonlyArray<ChannelKind> = [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://`.
+ */
+export function channelHref(kind: ChannelKind | string, input: unknown): string {
+    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. */
+export function parseChannelHref(href: unknown): { kind: ChannelKind; value: string } {
+    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". */
+export function isChannelFilled(href: unknown): boolean {
+    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. */
+export function channelOpensNewTab(kind: ChannelKind | string): boolean {
+    return kind === ChannelKind.WhatsApp || kind === ChannelKind.Link;
+}

package/src/forms-core/collect.ts

@@ -15,6 +15,7 @@ import {
     SubmitAction,
     ValidationRule,
 } from './form.model';
+import { dateBoundRules } from './dates';
 import { fieldOptionsOf } from './options';
 
 /** The minimum a node must look like. Structural on purpose: this file knows no renderer. */
@@ -59,6 +60,65 @@ export function uniqueFieldName(name: string, taken: ReadonlySet<string>): strin
     return `${name}${n}`;
 }
 
+/** A Field's own key, before the form makes it unique: the author's override, else derived from the label. */
+export function baseFieldName(props: { name?: unknown; label?: unknown } | null | undefined): string {
+    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.
+ */
+export function uniqueFieldNames(baseNames: ReadonlyArray<string>): string[] {
+    const taken = new Set<string>();
+    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. */
+export function formFieldNames(node: FormNodeLike | null | undefined): string[] {
+    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). */
+export function formFieldNameMap<N extends FormNodeLike>(node: N | null | undefined): Map<FormNodeLike, string> {
+    const out = new Map<FormNodeLike, string>();
+    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).
+ */
+export function fieldSpecOf(props: Record<string, any> | null | undefined, name: string): FieldSpec {
+    const p = props ?? {};
+    const control = (p['control'] as ControlType) || ControlType.Text;
+    const spec: FieldSpec = { 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.
  *
@@ -69,13 +129,9 @@ export function collectFormSpec(node: FormNodeLike | null | undefined): FormSpec
     if (!node || node.type !== FORM_NODE_TYPE) return null;
     const props = node.props ?? {};
 
-    const fields: FieldSpec[] = [];
-    const taken = new Set<string>();
-    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: FieldSpec[] = fieldNodes.map((f, i) => fieldSpecOf(f.props, names[i]));
 
     return {
         formId: props['formId'] ?? '',
@@ -104,29 +160,6 @@ export function collectFieldNodes(nodes: readonly FormNodeLike[]): FormNodeLike[
     return out;
 }
 
-function toFieldSpec(node: FormNodeLike, taken: ReadonlySet<string>): FieldSpec {
-    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: FieldSpec = {
-        name,
-        control: (props['control'] as ControlType) ?? 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: unknown): ValidationRule[] {
     if (!Array.isArray(raw)) return [];