@vectoriox/iox-ui 5.85.0 → 5.86.0

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

@@ -24,6 +24,27 @@ export enum FormRenderState {
 /** 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 a form shows once it has sent (premium M5, N3) — the Form's "After sending" choice:
+ * - `message`: the success in place (M3): the fields leave, the Success block shows, Send reads "Sent" and stays so;
+ * - `toast`: the fields STAY, cleared for the next answer, and a toast says the form's Sent words — a newsletter in a
+ *   footer, a form someone may send again.
+ */
+export enum FormAfterSend {
+    Message = 'message',
+    Toast = 'toast',
+}
+
+/** The Form trait holding the choice. */
+export const FORM_AFTER_SEND_TRAIT = 'afterSend';
+/** The attribute every renderer writes it on (only when it is `toast` — `message` is what a form always did). */
+export const FORM_AFTER_SEND_ATTRIBUTE = 'data-iox-after-send';
+
+/** The choice a stored value names (`message` unless it says `toast`). */
+export function formAfterSend(value: unknown): FormAfterSend {
+    return value === FormAfterSend.Toast ? FormAfterSend.Toast : FormAfterSend.Message;
+}
+
 /** What the form does once the server has answered. */
 export interface SubmitOutcome {
     state: FormRenderState;
@@ -32,13 +53,19 @@ export interface SubmitOutcome {
     /** A success clears the answers, so they cannot be sent twice. */
     reset: boolean;
     redirect?: string;
+    /** Say it in a toast (the form keeps its fields and goes back to Idle). */
+    toast?: boolean;
 }
 
 /**
- * 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.
+ * The server's answer → what the visitor sees. Only a confirmed success is Success (or, for a form that keeps its
+ * fields, Idle again with a toast); 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 {
+export function submitOutcome(response: SubmitResponse | null | undefined, afterSend: FormAfterSend | string | null = FormAfterSend.Message): SubmitOutcome {
+    if (response?.ok && formAfterSend(afterSend) === FormAfterSend.Toast) {
+        return { state: FormRenderState.Idle, reset: true, toast: true, ...(response.redirect ? { redirect: response.redirect } : {}) };
+    }
     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 };

package/src/generation-core/baseline-roles.ts

@@ -61,6 +61,7 @@ export const BASELINE_ROLES: Readonly<Record<string, Readonly<Record<string, Bas
     FormSuccess: { width: Behaviour, color: Look, padding: Look, borderRadius: Look, backgroundColor: Look },
     FormError: { width: Behaviour, color: Look, padding: Look, borderRadius: Look, backgroundColor: Look },
     Dialog: { width: Behaviour, padding: Look, borderRadius: Look, backgroundColor: Look, boxShadow: Look },
+    Popover: { width: Behaviour, padding: Look, borderRadius: Look, backgroundColor: Look, boxShadow: Look },
     // CC3: a Video fills its column at 16 / 9 — the shape the poster and the player take.
     Video: { width: Behaviour, aspectRatio: Behaviour },
 };

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

@@ -206,7 +206,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "pageRoute": "",
       "target": "_self",
       "type": "button",
-      "ariaLabel": ""
+      "ariaLabel": "",
+      "tooltip": "",
+      "tooltipPlacement": "above"
     },
     "styleProps": {
       "position": "static",
@@ -302,7 +304,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "target",
       "type",
       "__accessibilityLabel",
-      "ariaLabel"
+      "ariaLabel",
+      "tooltip",
+      "tooltipPlacement"
     ],
     "styleTraits": [
       "position",
@@ -1383,7 +1387,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "url": "https://",
       "pageRoute": "",
       "target": "_self",
-      "ariaLabel": ""
+      "ariaLabel": "",
+      "tooltip": "",
+      "tooltipPlacement": "above"
     },
     "styleProps": {
       "position": "static",
@@ -1478,7 +1484,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "pageRoute",
       "target",
       "__accessibilityLabel",
-      "ariaLabel"
+      "ariaLabel",
+      "tooltip",
+      "tooltipPlacement"
     ],
     "styleTraits": [
       "position",
@@ -1583,7 +1591,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "pageRoute": "",
       "target": "_self",
       "colorScheme": "default",
-      "ariaLabel": ""
+      "ariaLabel": "",
+      "tooltip": "",
+      "tooltipPlacement": "above"
     },
     "styleProps": {
       "position": "static",
@@ -1678,7 +1688,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "target",
       "colorScheme",
       "__accessibilityLabel",
-      "ariaLabel"
+      "ariaLabel",
+      "tooltip",
+      "tooltipPlacement"
     ],
     "styleTraits": [
       "position",
@@ -3649,7 +3661,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "name": "Contact form",
       "formId": "",
       "feedback": "smart",
-      "resetAfterSubmit": false,
+      "afterSend": "message",
       "focusFirstProblem": true,
       "announceFailure": true,
       "honeypot": true,
@@ -3745,7 +3757,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "name",
       "formId",
       "feedback",
-      "resetAfterSubmit",
+      "afterSend",
       "focusFirstProblem",
       "announceFailure",
       "__spamLabel",
@@ -5035,6 +5047,200 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
     ],
     "container": true
   },
+  "Popover": {
+    "props": {
+      "placement": "below",
+      "ariaLabel": "",
+      "colorScheme": "default"
+    },
+    "styleProps": {
+      "position": "static",
+      "top": "auto",
+      "right": "auto",
+      "bottom": "auto",
+      "left": "auto",
+      "zIndex": "0",
+      "display": "block",
+      "flexDirection": "row",
+      "flexWrap": "nowrap",
+      "justifyContent": "flex-start",
+      "alignItems": "stretch",
+      "gap": "0px",
+      "gridTemplateColumns": "1fr",
+      "gridTemplateRows": "auto",
+      "justifyItems": "stretch",
+      "alignContent": "stretch",
+      "alignSelf": "auto",
+      "order": "0",
+      "flexGrow": "0",
+      "flexShrink": "1",
+      "flexBasis": "auto",
+      "justifySelf": "auto",
+      "gridColumn": "auto",
+      "gridRow": "auto",
+      "width": "320px",
+      "height": "auto",
+      "minWidth": "auto",
+      "minHeight": "auto",
+      "maxWidth": "auto",
+      "maxHeight": "auto",
+      "aspectRatio": "auto",
+      "objectFit": "cover",
+      "overflow": "visible",
+      "fontFamily": "Poppins, sans-serif",
+      "fontSize": "16px",
+      "fontWeight": "400",
+      "color": "#000000",
+      "lineHeight": "1.5",
+      "letterSpacing": "0px",
+      "textTransform": "none",
+      "textAlign": "start",
+      "fontStyle": "normal",
+      "textDecoration": "none",
+      "fontVariantNumeric": "normal",
+      "WebkitTextStrokeWidth": "0px",
+      "WebkitTextStrokeColor": "transparent",
+      "margin": "0px 0px 0px 0px",
+      "padding": "16px",
+      "borderWidth": "0px",
+      "borderStyle": "solid",
+      "borderColor": "#CCCCCC",
+      "borderRadius": "12px",
+      "backgroundColor": "#ffffff",
+      "opacity": "1",
+      "mixBlendMode": "normal",
+      "cursor": "auto",
+      "boxShadow": "0 12px 32px rgba(0, 0, 0, 0.18)",
+      "textShadow": "",
+      "translateX": "0px",
+      "translateY": "0px",
+      "scaleX": "1",
+      "scaleY": "1",
+      "rotate": "0deg",
+      "skewX": "0deg",
+      "skewY": "0deg",
+      "transformOrigin": "center",
+      "filterBlur": "0px",
+      "filterHueRotate": "0deg",
+      "filterBrightness": "1",
+      "filterContrast": "1",
+      "filterSaturate": "1",
+      "filterGrayscale": "0",
+      "filterSepia": "0",
+      "filterInvert": "0",
+      "backdropFilter": "none",
+      "backdropBlur": "0px",
+      "backdropBrightness": "1",
+      "backdropContrast": "1",
+      "backdropSaturate": "1",
+      "clipPath": "none",
+      "transitionProperty": "",
+      "transitionDuration": "0ms",
+      "transitionDelay": "0ms",
+      "transitionTimingFunction": "ease"
+    },
+    "traits": [
+      "placement",
+      "__accessibilityLabel",
+      "ariaLabel",
+      "colorScheme"
+    ],
+    "styleTraits": [
+      "position",
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "zIndex",
+      "display",
+      "flexDirection",
+      "flexWrap",
+      "justifyContent",
+      "alignItems",
+      "gap",
+      "gridTemplateColumns",
+      "gridTemplateRows",
+      "justifyItems",
+      "alignContent",
+      "textDirection",
+      "alignSelf",
+      "order",
+      "flexGrow",
+      "flexShrink",
+      "flexBasis",
+      "justifySelf",
+      "gridColumn",
+      "gridRow",
+      "width",
+      "height",
+      "minWidth",
+      "minHeight",
+      "maxWidth",
+      "maxHeight",
+      "aspectRatio",
+      "objectFit",
+      "overflow",
+      "fontFamily",
+      "fontSize",
+      "fontWeight",
+      "color",
+      "lineHeight",
+      "letterSpacing",
+      "textTransform",
+      "textAlign",
+      "fontStyle",
+      "textDecoration",
+      "fontVariantNumeric",
+      "_sep_stroke",
+      "WebkitTextStrokeWidth",
+      "WebkitTextStrokeColor",
+      "margin",
+      "padding",
+      "borderWidth",
+      "borderStyle",
+      "borderColor",
+      "borderRadius",
+      "backgroundColor",
+      "opacity",
+      "mixBlendMode",
+      "cursor",
+      "_sep_shadow",
+      "boxShadow",
+      "textShadow",
+      "_sep_transform",
+      "translateX",
+      "translateY",
+      "scaleX",
+      "scaleY",
+      "rotate",
+      "skewX",
+      "skewY",
+      "transformOrigin",
+      "_sep_filter",
+      "filterBlur",
+      "filterHueRotate",
+      "filterBrightness",
+      "filterContrast",
+      "filterSaturate",
+      "filterGrayscale",
+      "filterSepia",
+      "filterInvert",
+      "_sep_backdrop",
+      "backdropFilter",
+      "backdropBlur",
+      "backdropBrightness",
+      "backdropContrast",
+      "backdropSaturate",
+      "_sep_clip",
+      "clipPath",
+      "_sep_transition",
+      "transitionProperty",
+      "transitionDuration",
+      "transitionDelay",
+      "transitionTimingFunction"
+    ],
+    "container": true
+  },
   "Video": {
     "props": {
       "videoSource": "youtube",

package/styles/iox-design.css

@@ -705,3 +705,202 @@ span.iox-video__play { pointer-events: none; }
     }
 }
 
+/* ── The floating family (premium components M5 — N3 toast · N4 tooltip and popover) ──────────────────────────────
+   ONE motion grammar for all three: they come FROM where they belong — a tooltip and a popover grow from their trigger
+   (the transform-origin placeFloating writes, Emil 47), a toast slides from its edge and back to it (Emil 129–130) —
+   and leave faster than they came (Emil 30). A neighbour tooltip, a keyboard open and Esc have no motion at all
+   (`data-iox-instant`, Emil 2/125). On a page that wears the design system the look's tokens time them (a look whose
+   motion is Off: 0ms); under reduced motion they keep the fade and drop the movement (Emil 192). The element styles'
+   colours and type are the contract's floating baseline, verbatim (`.iox-es-tooltip` / `.iox-es-toast`, pinned by the
+   token-names spec); a legacy page keeps the neutral literals of the unmarked rules. */
+
+/* The layer they are placed in: the viewport on the site (a top-layer popover, so a fixed header, a slider's clip or a
+   nav's backdrop-filter cannot hold them), the page frame on the canvas (fixed inside the zoomed frame). */
+.iox-float-layer {
+    position: fixed;
+    inset: 0;
+    width: auto;
+    height: auto;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    overflow: visible;
+    pointer-events: none;
+    z-index: 60;
+}
+.iox-float-layer[popover]:not(:popover-open) { display: none; }
+
+/* The tooltip. */
+.iox-tooltip {
+    --tip-scale: 0.97;
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    max-width: min(280px, calc(100% - 24px));
+    padding: 6px 10px;
+    font: 500 13px/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif;
+    background-color: #1f2328;
+    color: #ffffff;
+    border-radius: 6px;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
+    overflow-wrap: anywhere;
+    text-align: start;
+    pointer-events: auto;
+    transition: opacity 125ms cubic-bezier(0.23, 1, 0.32, 1), scale 125ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.iox-tooltip[hidden] { display: none; }
+@starting-style { .iox-tooltip:not([hidden]) { opacity: 0; scale: var(--tip-scale); } }
+.iox-tooltip[data-iox-closing] { opacity: 0; scale: var(--tip-scale); transition-duration: 80ms; }
+.iox-es-tooltip {
+    background-color: var(--iox-tooltip-bg);
+    color: var(--iox-tooltip-ink);
+    border-radius: var(--iox-tooltip-radius);
+    box-shadow: var(--iox-tooltip-shadow);
+    font-family: var(--iox-font-body);
+    font-size: var(--iox-tooltip-size);
+    font-weight: var(--iox-weight-strong);
+}
+.iox-tooltip.iox-es-tooltip {
+    --tip-scale: var(--iox-tooltip-scale);
+    transition: opacity var(--iox-tooltip-dur-in) var(--iox-tooltip-ease), scale var(--iox-tooltip-dur-in) var(--iox-tooltip-ease);
+}
+.iox-tooltip.iox-es-tooltip[data-iox-closing] { transition-duration: var(--iox-tooltip-dur-out); }
+.iox-tooltip[data-iox-instant],
+.iox-tooltip.iox-es-tooltip[data-iox-instant] { transition: none; }
+
+/* The toast stack, at its edge — above the home indicator (M7) and above a bottom tab bar (CC1's reserve). */
+.iox-toasts {
+    position: absolute;
+    inset-inline: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding-inline: 16px;
+    box-sizing: border-box;
+    pointer-events: none;
+}
+.iox-toasts[data-iox-edge='bottom'] { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
+.iox-toasts[data-iox-edge='top'] { top: calc(16px + env(safe-area-inset-top, 0px)); flex-direction: column-reverse; }
+html:has(.iox-bar-reserve) .iox-toasts[data-iox-edge='bottom'] { bottom: calc(16px + var(--iox-tabbar-height, 64px) + env(safe-area-inset-bottom, 0px)); }
+.iox-toast {
+    --toast-from: translateY(100%);
+    pointer-events: auto;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    max-width: min(440px, 100%);
+    padding-block: 10px;
+    padding-inline: 16px 6px;
+    font: 500 15px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif;
+    background-color: #1f2328;
+    color: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+    transition: transform 400ms ease, opacity 400ms ease;
+}
+.iox-toasts[data-iox-edge='top'] .iox-toast { --toast-from: translateY(-100%); }
+@starting-style { .iox-toast { opacity: 0; transform: var(--toast-from); } }
+.iox-toast[data-iox-closing] { opacity: 0; transform: var(--toast-from); transition-duration: 220ms; }
+.iox-es-toast {
+    background-color: var(--iox-toast-bg);
+    color: var(--iox-toast-ink);
+    border-radius: var(--iox-toast-radius);
+    box-shadow: var(--iox-toast-shadow);
+    font-family: var(--iox-font-body);
+    font-size: var(--iox-size-body);
+    font-weight: var(--iox-weight-strong);
+}
+.iox-toast.iox-es-toast { transition: transform var(--iox-toast-dur-in) var(--iox-toast-ease), opacity var(--iox-toast-dur-in) var(--iox-toast-ease); }
+.iox-toast.iox-es-toast[data-iox-closing] { transition-duration: var(--iox-toast-dur-out); }
+.iox-toast__text { margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
+/* The close control: a 44px target (M2) drawn in the toast's own ink, whatever the look — its ring too (currentColor
+   on the toast's fill is the pair the toast already clears). */
+.iox-toast__close {
+    flex: none;
+    display: inline-grid;
+    place-items: center;
+    inline-size: 44px;
+    block-size: 44px;
+    margin-block: -8px;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    opacity: 0.8;
+    touch-action: manipulation;
+    transition: opacity 150ms ease-out, background-color 150ms ease-out;
+}
+.iox-toast__close:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; opacity: 1; }
+@media (hover: hover) and (pointer: fine) {
+    .iox-toast__close:hover { opacity: 1; background-color: color-mix(in srgb, currentColor 14%, transparent); }
+}
+
+/* The popover — the node itself, in the top layer beside its opener (placeFloating writes top / left / the origin).
+   Closed it is the browser's hidden popover; the panel takes focus on open and draws no ring (its controls do). */
+[data-iox-popover] { box-sizing: border-box; }
+[data-iox-popover][popover] {
+    --pop-scale: 0.95;
+    position: fixed;
+    inset: auto;
+    margin: 0;
+    max-width: calc(100vw - 24px);
+    max-height: calc(100dvh - 24px);
+    overflow: auto;
+    overscroll-behavior: contain;
+    outline: none;
+    transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), scale 200ms cubic-bezier(0.23, 1, 0.32, 1), overlay 200ms allow-discrete, display 200ms allow-discrete;
+}
+@starting-style { [data-iox-popover][popover]:popover-open { opacity: 0; scale: var(--pop-scale); } }
+[data-iox-popover][popover][data-iox-closing] { opacity: 0; scale: var(--pop-scale); transition-duration: 140ms; }
+.iox-es-popover[data-iox-popover][popover] {
+    --pop-scale: var(--iox-popover-scale);
+    transition: opacity var(--iox-popover-dur-in) var(--iox-popover-ease), scale var(--iox-popover-dur-in) var(--iox-popover-ease),
+        overlay var(--iox-popover-dur-in) allow-discrete, display var(--iox-popover-dur-in) allow-discrete;
+}
+.iox-es-popover[data-iox-popover][popover][data-iox-closing] { transition-duration: var(--iox-popover-dur-out); }
+/* On a phone: a bottom sheet over the scrim, the safe area kept (the date picker's decision, FLOATING_SHEET_QUERY). */
+[data-iox-popover][popover][data-iox-sheet] {
+    inset: auto 0 0 0;
+    width: 100%;
+    max-width: none;
+    max-height: 85dvh;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
+    transition: translate 500ms cubic-bezier(0.32, 0.72, 0, 1), overlay 500ms allow-discrete, display 500ms allow-discrete;
+}
+@starting-style { [data-iox-popover][popover][data-iox-sheet]:popover-open { opacity: 1; scale: 1; translate: 0 100%; } }
+[data-iox-popover][popover][data-iox-sheet][data-iox-closing] { opacity: 1; scale: 1; translate: 0 100%; transition-duration: 280ms; }
+[data-iox-popover][popover][data-iox-sheet]::backdrop { background: rgba(0, 0, 0, 0.45); transition: opacity 500ms cubic-bezier(0.32, 0.72, 0, 1); }
+@starting-style { [data-iox-popover][popover][data-iox-sheet]:popover-open::backdrop { opacity: 0; } }
+[data-iox-popover][popover][data-iox-sheet][data-iox-closing]::backdrop { opacity: 0; transition-duration: 280ms; }
+.iox-es-popover[data-iox-popover][popover][data-iox-sheet] {
+    padding-bottom: calc(var(--iox-popover-pad) + env(safe-area-inset-bottom, 0px));
+    transition: translate var(--iox-sheet-dur-in) var(--iox-sheet-ease), overlay var(--iox-sheet-dur-in) allow-discrete, display var(--iox-sheet-dur-in) allow-discrete;
+}
+.iox-es-popover[data-iox-popover][popover][data-iox-sheet][data-iox-closing] { transition-duration: var(--iox-sheet-dur-out); }
+.iox-es-popover[data-iox-popover][popover][data-iox-sheet]::backdrop { background: var(--iox-scrim); transition: opacity var(--iox-sheet-dur-in) var(--iox-sheet-ease); }
+.iox-es-popover[data-iox-popover][popover][data-iox-sheet][data-iox-closing]::backdrop { transition-duration: var(--iox-sheet-dur-out); }
+.iox-es-popover[data-iox-popover][popover][data-iox-instant],
+.iox-es-popover[data-iox-popover][popover][data-iox-instant]::backdrop,
+[data-iox-popover][popover][data-iox-instant],
+[data-iox-popover][popover][data-iox-instant]::backdrop { transition: none; }
+
+/* Reduced motion: each of them fades — gentler, not zero; nothing scales or slides. */
+@media (prefers-reduced-motion: reduce) {
+    .iox-tooltip.iox-tooltip,
+    [data-iox-popover][popover][popover] { --tip-scale: 1; --pop-scale: 1; }
+    .iox-toasts[data-iox-edge] .iox-toast.iox-toast { --toast-from: none; }
+    [data-iox-popover][popover][data-iox-sheet][data-iox-sheet] { transition-property: opacity, overlay, display; }
+    @starting-style { [data-iox-popover][popover][data-iox-sheet][data-iox-sheet]:popover-open { opacity: 0; translate: none; } }
+    [data-iox-popover][popover][data-iox-sheet][data-iox-sheet][data-iox-closing] { opacity: 0; translate: none; }
+}

package/styles/iox-forms.css

@@ -36,8 +36,11 @@
    has to be able to fix and retry. The submit button STAYS (premium N2: it reads "Sent" with its check,
    disabled — the success in place), and so does the row holding it or the second channel (the WhatsApp
    button beside Send is how a visitor reaches you AFTER sending too). */
-.iox-form[data-iox-state="success"] .iox-field,
-.iox-form[data-iox-state="success"] .iox-field-group:not(:has(.iox-submit, .iox-role-form-channel)) { display: none !important; }
+.iox-form[data-iox-state="success"]:not([data-iox-after-send="toast"]) .iox-field,
+.iox-form[data-iox-state="success"]:not([data-iox-after-send="toast"]) .iox-field-group:not(:has(.iox-submit, .iox-role-form-channel)) { display: none !important; }
+/* A form that KEEPS its fields after sending (premium M5 — After sending ▸ "Keep the fields and show a toast") never
+   shows its Success block: a toast says the Sent words and the fields stay, cleared for the next answer. */
+.iox-form[data-iox-after-send="toast"] .iox-form-success { display: none !important; }
 
 /* The Success and Error blocks ENTER (premium N2 — Emil 139/30): opacity and a 4px rise over 200ms, out in 120ms,
    transitions (a fast retry interrupts from the live value, never a restart). `display` is discrete, so the exit
@@ -240,6 +243,25 @@ dialog.iox-cal::backdrop { background: transparent; }
     @starting-style { dialog.iox-cal[open] { opacity: 0; transform: none; } }
     dialog.iox-cal[data-iox-closing] { opacity: 0; transition-duration: 120ms; }
 }
+/* A Date field that wears the design system is timed by the LOOK (premium M5 — the calendar is a popover, and a sheet on
+   a phone): the popover tokens on a laptop, the sheet's on a phone, so a look whose motion is Off opens it with no motion
+   at all (vectoriox/iox-ui#44). Reduced motion keeps the fade (the tokens survive it) and drops the movement. */
+.iox-es-field dialog.iox-cal {
+    transition: opacity var(--iox-popover-dur-in) var(--iox-popover-ease), transform var(--iox-popover-dur-in) var(--iox-popover-ease);
+}
+@starting-style { .iox-es-field dialog.iox-cal[open] { transform: scale(var(--iox-popover-scale)); } }
+.iox-es-field dialog.iox-cal[data-iox-closing] { transform: scale(var(--iox-popover-scale)); transition-duration: var(--iox-popover-dur-out); }
+@media (max-width: 767px) {
+    .iox-es-field dialog.iox-cal { transform: none; transition: transform var(--iox-sheet-dur-in) var(--iox-sheet-ease); }
+    @starting-style { .iox-es-field dialog.iox-cal[open] { transform: translateY(100%); } }
+    .iox-es-field dialog.iox-cal[data-iox-closing] { transform: translateY(100%); transition-duration: var(--iox-sheet-dur-out); transition-timing-function: var(--iox-sheet-ease); }
+    .iox-es-field dialog.iox-cal::backdrop { transition: opacity var(--iox-sheet-dur-in) var(--iox-sheet-ease); }
+    .iox-es-field dialog.iox-cal[data-iox-closing]::backdrop { transition-duration: var(--iox-sheet-dur-out); }
+}
+@media (prefers-reduced-motion: reduce) {
+    .iox-es-field dialog.iox-cal, .iox-es-field dialog.iox-cal[data-iox-closing] { transform: none !important; transition: opacity var(--iox-popover-dur-in) var(--iox-popover-ease); }
+    .iox-es-field dialog.iox-cal[data-iox-closing] { transition-duration: var(--iox-popover-dur-out); }
+}
 /* Opened from the KEYBOARD (Enter / Space on the date button): it simply appears, and Esc or Enter on a day closes it
    at once — keyboard-initiated actions never animate (Emil 2). The pointer gets the motion above. */
 dialog.iox-cal[data-iox-instant],