@vectoriox/iox-ui 5.80.0 → 5.82.0

package/src/design-core/element-styles.ts

@@ -22,10 +22,18 @@ export enum ElementStyleState {
     /** A composite part that is ON — the active tab (CC4a "Active"): compiles to `[data-iox-on]`, the attribute every
      *  composite runtime writes. */
     On = 'on',
+    /** G4 — compile through the style compiler's COMPONENT_STATE_SELECTOR: `:disabled` / aria-disabled, aria-busy,
+     *  pressed / checked / selected, the page scrolled. */
+    Disabled = 'disabled',
+    Busy = 'busy',
+    Selected = 'selected',
+    Scrolled = 'scrolled',
 }
 
-export const ELEMENT_STYLE_STATES: ReadonlyArray<ElementStyleState> =
-    [ElementStyleState.Hover, ElementStyleState.Active, ElementStyleState.Focus, ElementStyleState.Current, ElementStyleState.On];
+export const ELEMENT_STYLE_STATES: ReadonlyArray<ElementStyleState> = [
+    ElementStyleState.Hover, ElementStyleState.Active, ElementStyleState.Focus, ElementStyleState.Current, ElementStyleState.On,
+    ElementStyleState.Disabled, ElementStyleState.Busy, ElementStyleState.Selected, ElementStyleState.Scrolled,
+];
 
 export interface ElementStyle {
     readonly id: string;
@@ -38,6 +46,10 @@ export interface ElementStyle {
     readonly focus?: Readonly<Record<string, string>>;
     readonly current?: Readonly<Record<string, string>>;
     readonly on?: Readonly<Record<string, string>>;
+    readonly disabled?: Readonly<Record<string, string>>;
+    readonly busy?: Readonly<Record<string, string>>;
+    readonly selected?: Readonly<Record<string, string>>;
+    readonly scrolled?: Readonly<Record<string, string>>;
 }
 
 export const ELEMENT_STYLES: ReadonlyArray<ElementStyle> = SPEC_ELEMENT_STYLES;

package/src/design-core/entrance-timing.ts

@@ -21,13 +21,24 @@ export interface StaggerSpec {
     readonly cap?: number;
 }
 
-/** The delay of the `index`-th item: `stagger` ms each, the last `cap` waiting no longer than the one before. */
+/** Each gap is this much of the one before (G8 — Emil 66: a uniform stagger is a metronome; the delays shrink). */
+export const STAGGER_SHRINK = 0.75;
+/** Only the first items stagger; the rest arrive with the sixth (Emil 67). */
+export const STAGGER_MAX_ITEMS = 6;
+
+/**
+ * The delay of the `index`-th item (G8): the first gap is `stagger` ms and every next one is `STAGGER_SHRINK` of the
+ * one before, so the group lands together instead of ticking; items from the `cap`-th on (never past the sixth) arrive
+ * with it. 80 ms → 0, 80, 140, 185, 219, 244. Static groups (their delays written at stamp time) and a Repeater's rows
+ * (`entranceDelay`) read the same curve.
+ */
 export function staggerDelay(spec: StaggerSpec, index = 0): number {
     const stagger = Number(spec.stagger ?? 0);
     if (!(stagger > 0)) return 0;
-    const cap = Math.max(1, Math.floor(Number(spec.cap ?? 1)) || 1);
+    const cap = Math.min(STAGGER_MAX_ITEMS, Math.max(1, Math.floor(Number(spec.cap ?? 1)) || 1));
     const i = Number.isFinite(index) ? Math.max(0, Math.floor(index)) : 0;
-    return Math.min(i, cap - 1) * stagger;
+    const steps = Math.min(i, cap - 1);
+    return Math.round(stagger * (1 - STAGGER_SHRINK ** steps) / (1 - STAGGER_SHRINK));
 }
 
 /** What an action carries, as both runtimes read it. */

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

@@ -1340,7 +1340,7 @@ export const SPEC_AXES = {
       "ease-spring": "cubic-bezier(0.2, 0, 0, 1)",
       "dur-spring": "140ms",
       "hover-lift": "-2px",
-      "press-scale": "1"
+      "press-scale": "0.97"
     },
     "standard": {
       "label": "Standard",
@@ -1362,7 +1362,7 @@ export const SPEC_AXES = {
       "ease-spring": "cubic-bezier(0.33, 0, 0.1, 1)",
       "dur-spring": "400ms",
       "hover-lift": "0px",
-      "press-scale": "1"
+      "press-scale": "0.98"
     },
     "lively": {
       "label": "Lively",
@@ -2618,7 +2618,13 @@ export const SPEC_A11Y = {
   "reducedTransparency": {
     "surface-glass": "var(--iox-surface)",
     "surface-glass-strong": "var(--iox-surface)",
-    "blur-surface": "none"
+    "blur-surface": "none",
+    "button-secondary-backdrop": "none",
+    "card-backdrop": "none",
+    "nav-backdrop": "none",
+    "dialog-backdrop": "none",
+    "tabbar-backdrop": "none",
+    "segmented-track-backdrop": "none"
   }
 } as const;
 
@@ -6558,7 +6564,7 @@ export const SPEC_FLAVOR_PACKS = [
         "tier": "semantic",
         "type": "number",
         "group": "motion",
-        "value": "1"
+        "value": "0.98"
       },
       {
         "name": "button-font",
@@ -13817,7 +13823,7 @@ export const SPEC_FLAVOR_PACKS = [
         "tier": "semantic",
         "type": "number",
         "group": "motion",
-        "value": "1"
+        "value": "0.97"
       },
       {
         "name": "button-font",
@@ -13957,7 +13963,7 @@ export const SPEC_FLAVOR_PACKS = [
         "tier": "component",
         "type": "number",
         "group": "components",
-        "value": "1",
+        "value": "0.97",
         "overridden": true
       },
       {

package/src/design-core/public-api.ts

@@ -12,6 +12,7 @@ export * from './flavor-spec.generated';
 export * from './design-token.model';
 export * from './css-names';
 export * from './token-css';
+export * from './theme-color';
 export * from './flavor';
 export * from './element-styles';
 export * from './adopt';

package/src/design-core/theme-color.ts

@@ -0,0 +1,41 @@
+import { DesignMode } from './design-token.model';
+import { DesignTokenLike } from './token-css';
+
+/** The token the browser's own chrome takes its colour from: the page's ground. */
+export const THEME_COLOR_TOKEN = 'bg';
+
+const VAR_REF = /^var\(\s*--iox-([\w-]+)\s*(?:,\s*([^()]+))?\)$/;
+/** A colour the browser's chrome can wear: opaque hex, rgb() or hsl() — never a gradient, a mix or a translucent one. */
+const SOLID_COLOUR = /^(#([0-9a-f]{3}|[0-9a-f]{6})|rgb\(\s*[\d.]+\s*,?\s*[\d.]+\s*,?\s*[\d.]+\s*\)|hsl\([^()/]+\))$/i;
+
+export interface ThemeColors {
+    light?: string;
+    dark?: string;
+}
+
+function resolveIn(map: ReadonlyMap<string, string>, value: string | undefined, depth = 0): string | undefined {
+    if (!value || depth > 12) return undefined;
+    const ref = VAR_REF.exec(value.trim());
+    if (!ref) return value.trim();
+    return resolveIn(map, map.get(ref[1]) ?? ref[2]?.trim(), depth + 1);
+}
+
+function colourFor(rows: ReadonlyArray<DesignTokenLike>, dark: boolean): string | undefined {
+    const map = new Map(rows.map(r => [r.name, dark ? (r.values?.dark ?? r.value) : r.value] as [string, string]));
+    const colour = resolveIn(map, map.get(THEME_COLOR_TOKEN));
+    return colour && SOLID_COLOUR.test(colour) ? colour : undefined;
+}
+
+/**
+ * The `theme-color` the browser's chrome takes per colour scheme (premium components G15 — mobile-native M10): the
+ * page's ground in each mode the site shows, resolved through the org's rows. A light or dark site answers its one
+ * mode; `auto` answers both (the engine writes them with `media="(prefers-color-scheme: …)"`). A value that is not a
+ * solid colour answers nothing — the browser keeps its own.
+ */
+export function themeColors(rows: ReadonlyArray<DesignTokenLike> | null | undefined, mode: DesignMode | string | null | undefined = 'auto'): ThemeColors {
+    const list = rows ?? [];
+    const out: ThemeColors = {};
+    if (mode !== 'dark') { const light = colourFor(list, false); if (light) out.light = light; }
+    if (mode !== 'light') { const dark = colourFor(list, true); if (dark) out.dark = dark; }
+    return out;
+}

package/src/forms-core/public-api.ts

@@ -18,5 +18,6 @@ export * from './options';
 export * from './runtime';
 export * from './rule-catalog';
 export * from './transport';
+export * from './submit-lifecycle';
 export * from './form-presets';
 export * from './nesting';

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

@@ -0,0 +1,128 @@
+/**
+ * The submit LIFECYCLE's decisions — what a form shows after the server answers, what it says when a
+ * submit fails, what a client needs to validate a form, and how its submit button follows its state.
+ *
+ * Two runtimes act on these and must agree: `IoxFormComponent` (the engine's component path) and the
+ * string-form runtime (every header / footer global and every string-rendered page —
+ * vectoriox/iox-client-engine#13). The builder canvas reads `submitButtonView` too, for its Sending state.
+ *
+ * ⚠️ Framework-free, like the rest of forms-core: no Angular, no DOM.
+ */
+
+import { FeedbackTiming, FieldSpec, FormSpec } from './form.model';
+import { SubmitResponse } from './transport';
+import { FieldError } from './validate';
+
+/** Which of the form's four states is showing — written on the form as `data-iox-state`. */
+export enum FormRenderState {
+    Idle = 'idle',
+    Submitting = 'submitting',
+    Success = 'success',
+    Error = 'error',
+}
+
+/** The attribute every renderer writes a form's state on (the canvas switcher, both live paths). */
+export const FORM_STATE_ATTRIBUTE = 'data-iox-state';
+
+/** What the form does once the server has answered. */
+export interface SubmitOutcome {
+    state: FormRenderState;
+    /** Per-field verdicts to put back on the fields (the form stays Idle so the visitor can fix them). */
+    errors?: Record<string, FieldError>;
+    /** A success clears the answers, so they cannot be sent twice. */
+    reset: boolean;
+    redirect?: string;
+}
+
+/**
+ * The server's answer → what the visitor sees. Only a confirmed success is Success; per-field verdicts
+ * land on the fields; anything else (a dropped network included) is the designed Error block.
+ */
+export function submitOutcome(response: SubmitResponse | null | undefined): SubmitOutcome {
+    if (response?.ok) return { state: FormRenderState.Success, reset: true, ...(response.redirect ? { redirect: response.redirect } : {}) };
+    if (response?.errors && Object.keys(response.errors).length) return { state: FormRenderState.Idle, errors: response.errors, reset: false };
+    return { state: FormRenderState.Error, reset: false };
+}
+
+/** What the live region says after a refused submit: how many fields need attention, or that it did not send. */
+export function failureAnnouncement(errors: Readonly<Record<string, unknown>> | null | undefined): string {
+    const count = errors ? Object.keys(errors).length : 0;
+    if (!count) return 'That did not send.';
+    return `${count} ${count === 1 ? 'field needs' : 'fields need'} attention.`;
+}
+
+/**
+ * The fields a CLIENT needs to validate a form: never its actions (where submissions go — an email
+ * address, a webhook) and never its anti-spam settings. A string-rendered form carries this on
+ * `FORM_FIELDS_ATTRIBUTE`, the way a string slider carries its inputs.
+ */
+export interface ClientFormSpec {
+    feedback: FeedbackTiming | string;
+    fields: FieldSpec[];
+}
+
+export const FORM_FIELDS_ATTRIBUTE = 'data-iox-form-fields';
+
+export function clientFormSpec(spec: Pick<FormSpec, 'feedback' | 'fields'>): ClientFormSpec {
+    return { feedback: spec.feedback ?? FeedbackTiming.Smart, fields: [...(spec.fields ?? [])] };
+}
+
+/** The attribute's value back into a spec, or null when it is missing or not one. */
+export function parseClientFormSpec(raw: string | null | undefined): ClientFormSpec | null {
+    if (!raw) return null;
+    try {
+        const parsed = JSON.parse(raw);
+        if (!parsed || !Array.isArray(parsed.fields)) return null;
+        return { feedback: typeof parsed.feedback === 'string' ? parsed.feedback : FeedbackTiming.Smart, fields: parsed.fields };
+    } catch {
+        return null;
+    }
+}
+
+/** How a submit button wears its form's state (vectoriox/iox-ui#42). */
+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`. */
+export function submitButtonView(state: FormRenderState | string | null | undefined, disableWhileSubmitting = true): SubmitButtonView {
+    const busy = state === FormRenderState.Submitting;
+    return { busy, disabled: busy && disableWhileSubmitting !== false };
+}
+
+/** On a submit button whose author turned "Disable while sending" off. */
+export const SUBMIT_KEEP_ENABLED_ATTRIBUTE = 'data-iox-keep-enabled';
+
+export enum SubmitLabelClass {
+    Labels = 'iox-submit__labels',
+    Idle = 'iox-submit__idle',
+    Busy = 'iox-submit__busy',
+}
+
+/**
+ * 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.
+ */
+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 const FORM_HONEYPOT_CLASS = 'iox-form__hp';
+export const FORM_ANNOUNCER_ATTRIBUTE = 'data-iox-form-announcer';
+
+/**
+ * The honeypot and the failure announcer every form holds, as markup — what `IoxFormComponent`'s template
+ * renders, for the string renderer. The honeypot is off-screen (some bots skip hidden inputs), out of the
+ * Tab order and the accessibility tree; the announcer is present from the start (a live region added at
+ * the moment it gains text is not reliably announced).
+ */
+export function formChromeHtml(honeypotField: string): string {
+    return `<div class="${FORM_HONEYPOT_CLASS}" aria-hidden="true"><input type="text" name="${honeypotField}" tabindex="-1" autocomplete="off"></div>` +
+        `<div class="${FORM_HONEYPOT_CLASS}" ${FORM_ANNOUNCER_ATTRIBUTE} role="status" aria-live="assertive" aria-atomic="true"></div>`;
+}