@vectoriox/iox-ui 5.85.0 → 5.86.1

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/src/generation-core/pictures.ts

@@ -351,14 +351,18 @@ export const SCRIM_LEVELS: ReadonlyArray<ScrimLevel> = [ScrimLevel.Soft, ScrimLe
 /** What each level writes on the scrim node (`backgroundColor`, token references only) — `null`: the style's own. */
 export const SCRIM_BACKGROUND: Readonly<Record<ScrimLevel, string | null>> = {
     [ScrimLevel.Soft]: null,
-    [ScrimLevel.Firm]: 'linear-gradient(180deg, transparent 0%, var(--iox-media-scrim) 18%)',
+    [ScrimLevel.Firm]: 'linear-gradient(180deg, color-mix(in srgb, var(--iox-media-scrim) 75%, transparent) 0%, var(--iox-media-scrim) 35%)',
     [ScrimLevel.Full]: 'var(--iox-media-scrim)',
 };
 
-/** The least share of the scrim's own strength under the first line of words, at each level (the gradient's ramp). */
+/**
+ * The least share of the scrim's own strength under the FIRST line of words, at each level — read from where the words
+ * start in the box (its top padding) against the gradient's ramp, on a phone (the tallest box): the element style's own
+ * ramp (`transparent 0%` → full at 45%) has only about a quarter of its strength there; Firm starts at three quarters.
+ */
 export const SCRIM_COVER: Readonly<Record<ScrimLevel, number>> = {
-    [ScrimLevel.Soft]: 0.5,
-    [ScrimLevel.Firm]: 0.85,
+    [ScrimLevel.Soft]: 0.25,
+    [ScrimLevel.Firm]: 0.75,
     [ScrimLevel.Full]: 1,
 };
 

package/src/scene-core/scroll-driver.ts

@@ -131,8 +131,9 @@ export class ScrollDriver {
     private lastTime = 0;
     private readonly wakeUp = (): void => this.wake();
     private readonly onWakeEvent = (e: Event): void => {
+        // What arrived may be the stage itself (a played slider marks its stage when it boots): read the root again.
         const scene = [...this.scenes.values()].find(s => s.root.contains(e.target as Node));
-        if (scene) { scene.fresh = true; this.wake(); }
+        if (scene) this.readScene(scene);
     };
 
     constructor(private readonly options: ScrollDriverOptions = {}) {

package/styles/iox-design.css

@@ -142,7 +142,7 @@ iox-gallery.iox-es-media[data-iox-empty] > .iox-gallery {
     --iox-image-hover-scale: 1;
 }
 .iox-es-card .iox-es-media {
-    transition: transform var(--iox-dur-ui) var(--iox-ease-standard), scale var(--iox-dur-ui) var(--iox-ease-standard);
+    transition: transform var(--iox-dur-ui, 200ms) var(--iox-ease-standard), scale var(--iox-dur-ui, 200ms) var(--iox-ease-standard);
 }
 @media (hover: hover) and (pointer: fine) {
     :is(a.iox-es-card, .iox-es-card:has(> a.linked-container-root), .iox-es-card:has(.iox-card-link)):hover .iox-es-media {
@@ -157,7 +157,7 @@ iox-gallery.iox-es-media[data-iox-empty] > .iox-gallery {
    forces its own), so the pseudo sits under the card's content and its shadow outside the card's edge. */
 :is(a.iox-es-card, .iox-es-card:has(> a.linked-container-root), .iox-es-card:has(.iox-card-link)) {
     --iox-card-shadow-hover: var(--iox-card-shadow);
-    --iox-dur-base: var(--iox-dur-ui);
+    --iox-dur-base: var(--iox-dur-ui, 200ms);
     translate: 0px;
 }
 :is(a.iox-es-card, .iox-es-card:has(> a.linked-container-root), .iox-es-card:has(.iox-card-link))::before {
@@ -165,11 +165,11 @@ iox-gallery.iox-es-media[data-iox-empty] > .iox-gallery {
     position: absolute;
     inset: calc(var(--iox-card-border-width, 0px) * -1);
     border-radius: inherit;
-    box-shadow: var(--iox-card-shadow-raise);
+    box-shadow: var(--iox-card-shadow-raise, var(--iox-shadow-md, none));
     opacity: 0;
     pointer-events: none;
     z-index: -1;
-    transition: opacity var(--iox-dur-ui) var(--iox-ease-standard);
+    transition: opacity var(--iox-dur-ui, 200ms) var(--iox-ease-standard);
 }
 @media (hover: hover) and (pointer: fine) {
     :is(a.iox-es-card, .iox-es-card:has(> a.linked-container-root), .iox-es-card:has(.iox-card-link)):hover::before {
@@ -495,12 +495,15 @@ span.iox-video__play { pointer-events: none; }
   display: inline-grid; place-items: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: var(--iox-radius-pill, 999px);
   background: none; opacity: 1; cursor: pointer; color: inherit;
 }
+/* The dot grows into the pill by its CLIP (premium M4 — Emil 41: never an animated width): the pill is always 26px wide,
+   clipped to an 8px dot at rest and opened whole when current — a compositor property, the dot's round ends kept. */
 .iox-role-slider-pagination .swiper-pagination-bullet::after {
-  content: ''; display: block; width: 8px; height: 8px; border-radius: var(--iox-radius-pill, 999px); background: var(--iox-line-strong);
-  transition: width var(--iox-dur-fast) var(--iox-ease-standard);
+  content: ''; display: block; width: 26px; height: 8px; border-radius: var(--iox-radius-pill, 999px); background: var(--iox-line-strong);
+  clip-path: inset(0 9px round var(--iox-radius-pill, 999px));
+  transition: clip-path var(--iox-dur-fast) var(--iox-ease-standard), background-color var(--iox-dur-fast) var(--iox-ease-standard);
 }
 .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-active::after { clip-path: inset(0 0 round var(--iox-radius-pill, 999px)); 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) ────────────────────────────────────────────────
@@ -545,7 +548,7 @@ span.iox-video__play { pointer-events: none; }
     block-size: 16px;
     pointer-events: none;
     opacity: 0;
-    transition: opacity var(--iox-dur-ui) var(--iox-ease-standard);
+    transition: opacity var(--iox-dur-ui, 200ms) var(--iox-ease-standard);
 }
 [data-iox-header][data-iox-header-edge='fade']::after {
     background: linear-gradient(to bottom,
@@ -595,8 +598,8 @@ span.iox-video__play { pointer-events: none; }
 .iox-es-link {
     --iox-link-decoration: none;
     --iox-link-current-decoration: none;
-    --iox-dur-fast: var(--iox-dur-hover);
-    --iox-ease-standard: var(--iox-ease-hover);
+    --iox-dur-fast: var(--iox-dur-hover, 150ms);
+    --iox-ease-standard: var(--iox-ease-hover, ease);
     background-image: linear-gradient(currentColor, currentColor);
     background-repeat: no-repeat;
     background-position: 0% calc(100% - var(--iox-link-underline-offset, 0px));
@@ -627,14 +630,14 @@ span.iox-video__play { pointer-events: none; }
 }
 /* A chip's colour moves on the hover timing too (Emil 92 — M3's review). */
 .iox-es-chip {
-    --iox-dur-fast: var(--iox-dur-hover);
-    --iox-ease-standard: var(--iox-ease-hover);
+    --iox-dur-fast: var(--iox-dur-hover, 150ms);
+    --iox-ease-standard: var(--iox-ease-hover, ease);
 }
 
 /* ── Premium components M4 (Emil 55/85): a press lands faster than its release ──────────────────────────────────────
    While pressed, every pressable's transition runs on dur-press; it releases on its own (slower) dur-fast. */
 :is(.iox-es-button-primary, .iox-es-button-secondary, .iox-es-button-ghost, .iox-es-bottom-bar-item):active {
-    transition-duration: var(--iox-dur-press);
+    transition-duration: var(--iox-dur-press, 100ms);
 }
 
 /* ── Premium components M4 (T3): the Slider's feel, its bar and the slider the scroll plays ─────────────────────────
@@ -664,7 +667,7 @@ span.iox-video__play { pointer-events: none; }
 }
 /* The caption follows the slide in view: it changes behind a short fade (the runtime holds it at 0 for a frame). */
 .iox-role-slider-caption {
-    transition: opacity var(--iox-dur-hover) var(--iox-ease-hover);
+    transition: opacity var(--iox-dur-hover, 150ms) var(--iox-ease-hover, ease);
 }
 .iox-role-slider-caption[data-iox-swapping] {
     opacity: 0;
@@ -705,3 +708,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; }
+}