@vectoriox/iox-ui 5.84.0 → 5.86.0

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

@@ -1,7 +1,7 @@
 import { SceneRole } from '@vectoriox/iox-ui/composite-core';
 import { FramePlayer, normalizeFrameSequence, VideoAttribute } from '@vectoriox/iox-ui/media-core';
 
-import { normalizeTracks, SCENE_PHONE_MAX_WIDTH, SceneAttribute, sceneFrame, SceneFrame, scenePlayed, sceneWordOpacity, sceneWordsLit, SceneTrack } from './scene';
+import { heldProgress, normalizeTracks, SCENE_PHONE_MAX_WIDTH, SceneAttribute, sceneFrame, SceneFrame, scenePlayed, sceneWordOpacity, sceneWordsLit, SceneTrack } from './scene';
 import { LIGHT_UP_PIECE_CAP, SplitText, splitText } from './split-text';
 
 /**
@@ -24,9 +24,32 @@ const SETTLED_PX = 0.25;
 const MAX_FRAME_SECONDS = 0.1;
 /** The first frame after a sleep has no previous one to measure from: it counts as one frame, or a scroll would lose it. */
 const WAKING_FRAME_SECONDS = 1 / 60;
-const STAGE_SELECTOR = `.iox-role-${SceneRole.Stage.replace(/\./g, '-')}`;
+const STAGE_SELECTOR = `.iox-role-${SceneRole.Stage.replace(/\./g, '-')}, [${SceneAttribute.Stage}]`;
 const TRANSFORM_WILL_CHANGE = 'transform, opacity';
 
+/**
+ * Dispatched (bubbling) by something the driver plays that arrived after the driver last looked — a Swiper booted on a
+ * slider's stage. Never a DOM `scroll`: nothing that follows the driver may dispatch one (SC2).
+ */
+export const SCENE_WAKE_EVENT = 'iox-scene-wake';
+
+/**
+ * ONE driver per root (premium M4 — §0 "To verify first"). The live site attaches a driver per runtime instance (the
+ * page's and the globals'); an instance that scanned a container holding the other's Scenes would drive them a second
+ * time, two damped values fighting over one layer. A root is held by the first driver that adds it until that driver
+ * lets it go.
+ */
+const HELD = new WeakMap<HTMLElement, ScrollDriver>();
+
+/** The slider a stage carries when the scroll plays it: a booted Swiper (it sets `el.swiper`), read by shape. */
+interface PlayedSlider { slides?: ArrayLike<unknown>; setProgress?: (progress: number, speed?: number) => void; destroyed?: boolean }
+function sliderOf(stage: HTMLElement | null): PlayedSlider | null {
+    // The stage is the runway's child: the `.swiper` itself (both engine paths), or the canvas's shell around it.
+    const holder = (stage?.classList.contains('swiper') ? stage : stage?.querySelector('.swiper')) as (HTMLElement & { swiper?: PlayedSlider }) | null | undefined;
+    const swiper = holder?.swiper;
+    return swiper && typeof swiper.setProgress === 'function' && !swiper.destroyed ? swiper : null;
+}
+
 /** One frame of the damping: frame-rate independent, so 60 Hz and 120 Hz settle in the same time. */
 export function dampToward(current: number, target: number, seconds: number, rate: number = SCENE_DAMPING): number {
     return current + (target - current) * (1 - Math.exp(-seconds * rate));
@@ -86,6 +109,8 @@ interface Scene {
     /** Page px and the stage's own width, measured when something resizes and never per frame. */
     height: number;
     travel: number;
+    /** Page px from the top of the screen at which the stage holds: 0 for a Scene, mid-screen for a played slider. */
+    stick: number;
     phone: boolean;
     inlineSign: 1 | -1;
     /** No frame written yet: the first one lands exactly where the scroll is, with no glide. */
@@ -105,20 +130,28 @@ export class ScrollDriver {
     private frame = 0;
     private lastTime = 0;
     private readonly wakeUp = (): void => this.wake();
+    private readonly onWakeEvent = (e: Event): void => {
+        const scene = [...this.scenes.values()].find(s => s.root.contains(e.target as Node));
+        if (scene) { scene.fresh = true; this.wake(); }
+    };
 
     constructor(private readonly options: ScrollDriverOptions = {}) {
         this.host = options.host ?? window;
         // In capture: a scroll does not bubble, and the canvas's Lenis scrolls an element, not the window.
         this.host.addEventListener('scroll', this.wakeUp, { capture: true, passive: true });
         this.host.addEventListener('resize', this.wakeUp, { passive: true });
+        this.host.addEventListener(SCENE_WAKE_EVENT, this.onWakeEvent, { capture: true });
         const Observer = (this.host as Window & { ResizeObserver?: typeof ResizeObserver }).ResizeObserver;
         this.resize = Observer ? new Observer(() => this.remeasureAll()) : null;
     }
 
-    /** Drive a Scene's root. Idempotent: adding a root again re-reads it. */
-    add(root: HTMLElement): void {
+    /** Drive a Scene's root. Idempotent: adding a root again re-reads it. False when another driver holds it. */
+    add(root: HTMLElement): boolean {
+        const holder = HELD.get(root);
+        if (holder && holder !== this) return false;
         this.remove(root);
-        const scene: Scene = { root, stage: null, layers: [], progress: 0, target: 0, height: 0, travel: 0, phone: false, inlineSign: 1, fresh: true, mutations: null };
+        HELD.set(root, this);
+        const scene: Scene = { root, stage: null, layers: [], progress: 0, target: 0, height: 0, travel: 0, stick: 0, phone: false, inlineSign: 1, fresh: true, mutations: null };
         this.scenes.set(root, scene);
         this.resize?.observe(root);
         if (this.options.observe) {
@@ -129,11 +162,18 @@ export class ScrollDriver {
             }
         }
         this.readScene(scene);
+        return true;
+    }
+
+    /** True when this driver holds `root`. */
+    holds(root: HTMLElement): boolean {
+        return this.scenes.has(root);
     }
 
     remove(root: HTMLElement): void {
         const scene = this.scenes.get(root);
         if (!scene) return;
+        if (HELD.get(root) === this) HELD.delete(root);
         scene.mutations?.disconnect();
         this.resize?.unobserve(root);
         if (scene.stage) scene.stage.style.removeProperty('translate');
@@ -198,6 +238,7 @@ export class ScrollDriver {
         this.frame = 0;
         this.host.removeEventListener('scroll', this.wakeUp, { capture: true });
         this.host.removeEventListener('resize', this.wakeUp);
+        this.host.removeEventListener(SCENE_WAKE_EVENT, this.onWakeEvent, { capture: true });
         for (const root of [...this.scenes.keys()]) this.remove(root);
         this.resize?.disconnect();
     }
@@ -250,6 +291,9 @@ export class ScrollDriver {
     private measure(scene: Scene): void {
         scene.height = scene.root.offsetHeight;
         scene.travel = Math.max(0, scene.height - (scene.stage?.offsetHeight ?? scene.height));
+        // Where the stage holds: its sticky top (a played slider holds mid-screen; a Scene's stage at 0). Read when
+        // something resizes, never per frame.
+        scene.stick = scene.stage ? (parseFloat(this.host.getComputedStyle(scene.stage).top) || 0) : 0;
         scene.phone = (scene.stage?.offsetWidth ?? Infinity) <= SCENE_PHONE_MAX_WIDTH;
         scene.inlineSign = scene.stage && this.host.getComputedStyle(scene.stage).direction === 'rtl' ? -1 : 1;
         for (const layer of scene.layers) layer.stale = true;
@@ -281,11 +325,14 @@ export class ScrollDriver {
         const rect = scene.root.getBoundingClientRect();
         const origin = this.options.originOf?.(scene.root)?.getBoundingClientRect().top ?? 0;
         const zoom = scene.height ? rect.height / scene.height : 1;
-        const { local, progress } = sceneScrollState(rect.top, origin, zoom, scene.travel);
+        const { local, progress } = sceneScrollState(rect.top, origin + scene.stick * zoom, zoom, scene.travel);
         return { scene, local, target: progress };
     }
 
     private write(scene: Scene): void {
+        // A slider the scroll plays (M4): the damped moment, held on each picture.
+        const slider = sliderOf(scene.stage);
+        if (slider) slider.setProgress!(heldProgress(scene.progress, slider.slides?.length ?? 0), 0);
         for (const layer of scene.layers) {
             const tracks = scene.phone && layer.phoneTracks.length ? layer.phoneTracks : layer.tracks;
             this.writeWords(layer, sceneWordsLit(tracks, scene.progress));
@@ -359,3 +406,33 @@ export function attachScenes(container: HTMLElement, options: ScrollDriverOption
     roots.forEach(root => driver.add(root));
     return driver;
 }
+
+/**
+ * The Scene roots that belong to `elements` (each, and what it holds) — what one runtime instance owns: the page's nodes,
+ * or the globals'. Never a whole container that also holds another instance's Scenes (premium M4: the globals' instance
+ * scanned the app root and drove the page's Scenes a second time).
+ */
+export function sceneRootsIn(elements: Iterable<Element>): HTMLElement[] {
+    const out = new Set<HTMLElement>();
+    for (const el of elements) {
+        if ((el as HTMLElement).hasAttribute?.(SceneAttribute.Root)) out.add(el as HTMLElement);
+        // A wrapper the node renders around itself (a played slider's runway around its `.swiper`) is the node's own.
+        const parent = el.parentElement;
+        if (parent?.hasAttribute(SceneAttribute.Root) && parent.children.length === 1) out.add(parent);
+        el.querySelectorAll?.<HTMLElement>(`[${SceneAttribute.Root}]`).forEach(root => out.add(root));
+    }
+    return [...out];
+}
+
+/** The live site's door for a runtime that owns some nodes: their Scenes on one driver (null when none, or under reduced
+ *  motion — the page's own CSS then lets each Scene flow). A root another driver holds stays with it. */
+export function attachSceneRoots(roots: ReadonlyArray<HTMLElement>, options: ScrollDriverOptions = {}): ScrollDriver | null {
+    if (!roots.length) return null;
+    const host = options.host ?? window;
+    if (host.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return null;
+    const driver = new ScrollDriver(options);
+    const held = roots.filter(root => driver.add(root));
+    if (held.length) return driver;
+    driver.destroy();
+    return null;
+}

package/styles/iox-design.css

@@ -142,13 +142,40 @@ 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-slow) var(--iox-ease-standard), scale var(--iox-dur-slow) var(--iox-ease-standard);
+    transition: transform var(--iox-dur-ui) var(--iox-ease-standard), scale var(--iox-dur-ui) 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 {
         scale: var(--card-media-zoom);
     }
 }
+/* M4 (the D3 follow-ups — Emil 144, 28, 74): a LINKED card's lift, its raised shadow and its picture's zoom are ONE
+   timing under 300ms (dur-ui; the card style's dur-base and the media's dur-slow ran past it in most looks). Its shadow
+   rises by fading a pseudo-element that wears card-shadow-raise — the card's own box-shadow no longer changes on hover
+   (every card's hover shadow is its rest shadow now; a non-linked card never rose). `translate: 0px` is identity: it
+   makes the card the pseudo's containing block and stacking context whatever position the card holds (the canvas
+   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);
+    translate: 0px;
+}
+:is(a.iox-es-card, .iox-es-card:has(> a.linked-container-root), .iox-es-card:has(.iox-card-link))::before {
+    content: '';
+    position: absolute;
+    inset: calc(var(--iox-card-border-width, 0px) * -1);
+    border-radius: inherit;
+    box-shadow: var(--iox-card-shadow-raise);
+    opacity: 0;
+    pointer-events: none;
+    z-index: -1;
+    transition: opacity var(--iox-dur-ui) 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 {
+        opacity: 1;
+    }
+}
 
 /* ── CC1: mobile navigation (complex-components plan §7a, R1; boards 1–2) ─────────────────────── */
 
@@ -226,6 +253,16 @@ dialog[data-iox-dialog].iox-es:is([data-iox-closing], :not([open]))::backdrop {
 @starting-style {
     dialog[data-iox-dialog].iox-es[open]::backdrop { opacity: 0; }
 }
+/* M4 (M1.1's carry-over — Emil 101): a styled dialog separates from the page behind it by a hairline edge in the look's
+   `dialog-edge` (its line colour) — on a DARK page under a dark scrim its shadow is swallowed and the phone drawer
+   vanished into the page. An outline, so the dialog's own box-shadow (the look's, or the author's) is untouched; drawn
+   inside its edge, following its radius. The sheet itself takes focus when it opens (the engine), so it never rings:
+   the first Tab moves to its Close, with the ring. */
+dialog[data-iox-dialog].iox-es {
+    outline: var(--iox-border-width, 1px) solid var(--iox-dialog-edge, transparent);
+    outline-offset: calc(var(--iox-border-width, 1px) * -1);
+}
+
 /* The drawer's pages arrive WITH it (decision D1 — Emil 64/65/110: one entrance per container, no menu-row stagger):
    the sheet slides in carrying its links, and they leave with it. */
 
@@ -240,6 +277,7 @@ dialog[data-iox-dialog] {
 .iox-role-nav-links,
 .iox-role-nav-drawer-links {
     --iox-link-decoration: none;
+    --iox-link-underline-rest: 0;
 }
 
 /* The BOTTOM BAR (board 2, "The CSS, exactly"): fixed to the bottom of the viewport (on the canvas, of the
@@ -474,3 +512,395 @@ span.iox-video__play { pointer-events: none; }
         background: var(--iox-scrim);
     }
 }
+
+/* ── Premium components M4 (T2): how a header behaves as the page scrolls ─────────────────────────────────────────
+   Keyed on the attributes every renderer writes from the header's two traits (design-core headerAttributes). A header
+   that STAYS or HIDES keeps to the top of the screen while the page scrolls under it; one that hides steps aside on the
+   way down, moved by the header runtime (`translate`, from the live value — HeaderRuntime). On the live site the
+   globals' wrapper is `display: contents`, so the header sticks to the whole page; on the builder canvas the header lives
+   in the frame-pinned overlay (global-elements.md) and the canvas keeps its own `position`. */
+:root [data-iox-header] {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 30;
+}
+/* Faded under reduced motion (the runtime): not clickable while it is away. */
+[data-iox-header][data-iox-header-hidden] {
+    pointer-events: none;
+}
+/* The EDGE (Emil 99): once the page has moved under it, a header shows a soft fade of its own ground — or a hairline —
+   instead of a divider drawn at all times. Its look's own bottom line gives way; the edge is a pseudo-element that only
+   fades in (no layout, no box-shadow). An eased gradient (Emil 174): no visible band where the fade ends. Only on a
+   header that stays at the top (one that scrolls away is gone by the time the page has moved); the header is its
+   containing block — sticky here, and `relative` as stored (the Header section writes it; the canvas forces a node's
+   own position, and a transform on the header would trap its drawer's stage). */
+[data-iox-header][data-iox-header-edge] {
+    --iox-nav-border-width: 0px;
+}
+[data-iox-header][data-iox-header-edge]::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 100%;
+    block-size: 16px;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity var(--iox-dur-ui) var(--iox-ease-standard);
+}
+[data-iox-header][data-iox-header-edge='fade']::after {
+    background: linear-gradient(to bottom,
+        color-mix(in srgb, var(--iox-nav-bg, transparent) 100%, transparent) 0%,
+        color-mix(in srgb, var(--iox-nav-bg, transparent) 74%, transparent) 19%,
+        color-mix(in srgb, var(--iox-nav-bg, transparent) 54%, transparent) 34%,
+        color-mix(in srgb, var(--iox-nav-bg, transparent) 34%, transparent) 50%,
+        color-mix(in srgb, var(--iox-nav-bg, transparent) 17%, transparent) 67%,
+        color-mix(in srgb, var(--iox-nav-bg, transparent) 6%, transparent) 83%,
+        transparent 100%);
+}
+[data-iox-header][data-iox-header-edge='line']::after {
+    block-size: var(--iox-border-width, 1px);
+    background: var(--iox-nav-border, currentColor);
+}
+[data-iox-scrolled] [data-iox-header][data-iox-header-edge]:not([data-iox-header-edge='none'])::after {
+    opacity: 1;
+}
+/* Emil 194/195: reduced transparency makes the bar solid (the token sheet clears its blur and its ground); more
+   contrast makes it near-solid with a defined, contrasting edge. A Brand-scheme bar keeps its own solid ground. */
+@media (prefers-contrast: more) {
+    .iox-es-nav:not([class*='iox-scheme-']) {
+        --iox-nav-bg: var(--iox-bg);
+    }
+    .iox-es-nav,
+    [data-iox-header][data-iox-header-edge] {
+        --iox-nav-backdrop: none;
+        --iox-nav-border: var(--iox-text);
+        --iox-nav-border-width: 0px 0px var(--iox-border-width, 1px) 0px;
+    }
+    .iox-es-bottom-bar {
+        --iox-tabbar-bg: var(--iox-bg);
+        --iox-tabbar-backdrop: none;
+        --iox-tabbar-border: var(--iox-text);
+    }
+}
+
+/* ── Premium components M4 (T3): a link's underline, drawn ──────────────────────────────────────────────────────────
+   An element-styled link draws its underline as a line in its own ink under its words, scaled along them from the
+   READING START (mirrored in RTL) — so it can grow on hover. `link-underline-rest` is how much shows at rest (1 in
+   running content; 0 in a navigation's lists, by their role): it grows on hover (hover devices only — G1), for keyboard
+   focus, and the current page's link holds its 2px accent line. The node's own text-decoration reads none here (the
+   two decoration tokens are re-declared), so a line is never drawn twice; a legacy link keeps its text-decoration.
+   A background line, so it follows the words onto a second line and needs no positioning (the canvas forces a node's
+   position); its growth is a background-size the shared compiler adds to the link's transition (withStateTransitions).
+   The colour and the line move on the hover timing — ≤150ms on `ease` (Emil 92). */
+.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);
+    background-image: linear-gradient(currentColor, currentColor);
+    background-repeat: no-repeat;
+    background-position: 0% calc(100% - var(--iox-link-underline-offset, 0px));
+    background-size: calc(var(--iox-link-underline-rest, 1) * 100%) var(--iox-link-underline-thickness, 1px);
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+}
+.iox-es-link:dir(rtl) {
+    background-position-x: 100%;
+}
+@media (hover: hover) and (pointer: fine) {
+    .iox-es-link:hover {
+        background-size: 100% var(--iox-link-underline-thickness, 1px);
+    }
+}
+.iox-es-link:focus-visible {
+    background-size: 100% var(--iox-link-underline-thickness, 1px);
+}
+.iox-es-link[aria-current='page'] {
+    background-image: linear-gradient(var(--iox-link-current-underline, currentColor), var(--iox-link-current-underline, currentColor));
+    background-size: 100% var(--iox-link-current-underline-thickness, 2px);
+}
+/* Reduced motion: the line appears and goes in place (it never travels); the colour still eases (Emil 192). */
+@media (prefers-reduced-motion: reduce) {
+    .iox-es.iox-es-link {
+        transition-property: color;
+    }
+}
+/* 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);
+}
+
+/* ── 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);
+}
+
+/* ── Premium components M4 (T3): the Slider's feel, its bar and the slider the scroll plays ─────────────────────────
+   One curve for the slides: the look's (Emil 18/21 — never Swiper's built-in `ease`). A horizontal carousel leaves
+   vertical panning to the page (M9). */
+:where(.swiper) {
+    --swiper-wrapper-transition-timing-function: var(--iox-slider-ease, ease);
+}
+:where(.swiper-horizontal) {
+    touch-action: pan-y;
+}
+/* The BAR under the picture (M1.3): the caption at the reading start, then the count and the arrows — in flow, never on
+   the picture (the bar node lays them out; these keep its words from pushing the arrows). The count reads "1 / 3" in
+   every language. */
+:where(.iox-role-slider-bar) .iox-role-slider-caption {
+    min-width: 0;
+}
+/* Their words are the slide in view's, written by the runtime as an attribute (composite-core attachSliderBar). */
+:is(.iox-role-slider-caption, .iox-role-slider-count)::before {
+    content: attr(data-iox-text);
+}
+.iox-role-slider-count {
+    direction: ltr;
+    unicode-bidi: isolate;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+/* 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);
+}
+.iox-role-slider-caption[data-iox-swapping] {
+    opacity: 0;
+    transition-duration: 0ms;
+}
+/* On a phone a "cards" stack stays a centred card with its neighbours peeking out (one picture the full width is
+   planSwiperOptions' default for every other effect). */
+@media (max-width: 767px) {
+    .swiper.swiper-cards {
+        width: 86%;
+        margin-inline: auto;
+    }
+}
+/* A Slider the SCROLL plays: its runway holds the slider mid-screen while the page scrolls past half a screen per
+   picture; the ONE scene driver moves it, resting on each picture (scene-core `heldProgress`). `--slider-steps` is
+   written by the renderers (no layout shift), `--slider-h` by the slider's boot. On the canvas the driver pins it
+   (its page never scrolls itself) and `--preview-vh` stands for the frame's height. Under reduced motion it is an
+   ordinary slider: no runway, swiped and pressed. */
+.iox-slider-runway {
+    position: relative;
+}
+.iox-slider-runway > :is(.swiper, .slider-edit-shell) {
+    position: sticky;
+    inset-block-start: max(0px, calc((var(--preview-vh, 1svh) * 100 - var(--slider-h, 0px)) / 2));
+}
+.iox-slider-runway::after {
+    content: '';
+    display: block;
+    block-size: calc(var(--slider-steps, 0) * var(--preview-vh, 1svh) * 55);
+}
+@media (prefers-reduced-motion: reduce) {
+    .iox-slider-runway::after {
+        display: none;
+    }
+    .iox-slider-runway > :is(.swiper, .slider-edit-shell) {
+        position: relative;
+        inset-block-start: 0;
+    }
+}
+
+/* ── 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; }
+}