@vectoriox/iox-ui 5.84.0 → 5.86.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -6,16 +6,16 @@ import { Subject, fromEvent } from 'rxjs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { SPEC_AXES, resolveDesignMotion } from '@vectoriox/iox-ui/design-core';
+import { SPEC_AXES, resolveDesignMotion, HeaderAttribute, HeaderBehaviour, headerAttributes, HeaderTrait } from '@vectoriox/iox-ui/design-core';
 export * from '@vectoriox/iox-ui/design-core';
 import Lenis from 'lenis';
-import { SLIDER_WORDS, sliderPartElement, SliderRole, sliderWords, attachCarouselA11y, isSliderPart } from '@vectoriox/iox-ui/composite-core';
+import { SLIDER_WORDS, sliderPartElement, SliderRole, sliderWords, attachCarouselA11y, attachSliderBar, isSliderPart, SLIDE_TYPE, SLIDE_CAPTION_TRAIT } from '@vectoriox/iox-ui/composite-core';
+import { SceneAttribute, SCENE_WAKE_EVENT, SCENE_REVEAL_DEFAULT, SceneRevealFrom, revealClipPath, TextRevealBy, playTextReveal } from '@vectoriox/iox-ui/scene-core';
 import { getByPath } from '@vectoriox/iox-ui/data-core';
 export * from '@vectoriox/iox-ui/data-core';
-import { dialogOpenerAttributes, dialogDomId } from '@vectoriox/iox-ui/actions-core';
+import { runExitMotion, isExiting, popoverOpenersSelector, OpenerAttribute, cancelExit, POPOVER_NODE_TYPE, dialogOpenerAttributes, popoverOpenerAttributes, popoverDomId, dialogDomId } from '@vectoriox/iox-ui/actions-core';
 import { VideoKind, planVideo, videoRootAttributes, videoInnerHtml, videoWords, VideoAttribute, attachVideoAt, VideoClass } from '@vectoriox/iox-ui/media-core';
 import * as i1$1 from '@angular/platform-browser';
-import { SCENE_REVEAL_DEFAULT, SceneRevealFrom, revealClipPath, TextRevealBy, playTextReveal } from '@vectoriox/iox-ui/scene-core';
 
 class ViewPositionDirective {
     constructor(_elr) {
@@ -1811,9 +1811,20 @@ var A11yTrait;
     A11yTrait["AccessibleName"] = "ariaLabel";
     /** A Dialog's "Close when wider than": a breakpoint id, or empty = never. */
     A11yTrait["CloseAbove"] = "closeAbove";
+    /** "Tooltip ▸ Words" (premium M5): words for a control that has none of its own. */
+    A11yTrait["Tooltip"] = "tooltip";
+    /** "Tooltip ▸ Side": above (default) · below · start · end. */
+    A11yTrait["TooltipPlacement"] = "tooltipPlacement";
 })(A11yTrait || (A11yTrait = {}));
 /** The types that carry an Accessible name trait. */
-const ACCESSIBLE_NAME_TYPES = ['ButtonBlock', 'LinkedContainer', 'Link', 'Dialog', 'SliderContainer'];
+const ACCESSIBLE_NAME_TYPES = ['ButtonBlock', 'LinkedContainer', 'Link', 'Dialog', 'Popover', 'SliderContainer'];
+/** The types that carry a Tooltip (premium M5): the controls — a button, a linked box, a link (a gallery's arrows are
+ *  ButtonBlocks). Not a Text or an Image: a tooltip on something that takes no focus is invisible to a keyboard. */
+const TOOLTIP_TYPES = ['ButtonBlock', 'LinkedContainer', 'Link'];
+/** The attribute a tooltip's words travel on (the raw SSR carries it; the tooltip runtime reads it). */
+const TOOLTIP_ATTRIBUTE = 'data-iox-tooltip';
+/** The side it asks for, when not the default (above). */
+const TOOLTIP_PLACEMENT_ATTRIBUTE = 'data-iox-tooltip-placement';
 /** The types that link to a page and can therefore be the current page's link. */
 const CURRENT_LINK_TYPES = ['Link', 'LinkedContainer', 'ButtonBlock'];
 
@@ -1895,6 +1906,12 @@ const NOOP_INITIAL_VALUES = {
  * `lineHeight: 1.5` followed by the forced `line-height: 1`), so callers strip them first via
  * {@link stripSuppressedProps} and let renderDefaultDeclarations supply the real value.
  */
+/** The positioning props an overlay's renderer owns (a Dialog's, a Popover's). */
+const PLACED_BY_RENDERER = [
+    'position', 'inset', 'top', 'right', 'bottom', 'left',
+    'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
+    'marginBlock', 'marginBlockStart', 'marginBlockEnd', 'marginInline', 'marginInlineStart', 'marginInlineEnd',
+];
 const SUPPRESSED_STYLE_PROPS_BY_TYPE = {
     // An icon's line box is structurally forced to 1 — see the Icon branch of renderDefaultDeclarations.
     Icon: ['lineHeight'],
@@ -1903,11 +1920,10 @@ const SUPPRESSED_STYLE_PROPS_BY_TYPE = {
     // the canvas twin a grid stage. Every node serialises the Spacing/Position traits, so a stored
     // `margin: 0px` (0,1,0) beat the reset and every dialog — the consent banner too — opened in the
     // top-left corner of the live site (DS2 verification). Placement is the `placement` trait's job.
-    Dialog: [
-        'position', 'inset', 'top', 'right', 'bottom', 'left',
-        'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
-        'marginBlock', 'marginBlockStart', 'marginBlockEnd', 'marginInline', 'marginInlineStart', 'marginInlineEnd',
-    ],
+    Dialog: PLACED_BY_RENDERER,
+    // A Popover (premium M5) likewise: the live twin is a top-layer panel placed beside its opener by `placeFloating`
+    // (inline top / left), the canvas twin a pin in its stage — a stored margin or position would move it off its opener.
+    Popover: PLACED_BY_RENDERER,
 };
 /** Remove the style props whose value a type's render-default always overrides. Returns the map
  *  unchanged (same reference) when the type suppresses nothing. */
@@ -2140,10 +2156,19 @@ function stateTransitionProperties(stateStyles, responsive, type) {
     }
     return out;
 }
+/**
+ * What an element style animates beyond the properties its states change (premium M4): a link's underline is DRAWN by
+ * the shared CSS (`iox-design.css`) as a background line that grows from the reading start on hover — its growth is a
+ * `background-size` the node's own transition must name, or it would jump.
+ */
+const ELEMENT_STYLE_TRANSITION_EXTRAS = {
+    link: ['background-size'],
+};
 /**
  * `styleProps` as a renderer compiles them: a hovering node with no timing of its own takes the default hover timing,
- * and a node whose transition names no properties gets the ones its states change. An author's own `transitionProperty`
- * (or a raw `transition`) always wins. Pure: the node's stored styles are never touched.
+ * and a node whose transition names no properties gets the ones its states change (and what its element style draws,
+ * `ELEMENT_STYLE_TRANSITION_EXTRAS`). An author's own `transitionProperty` (or a raw `transition`) always wins. Pure:
+ * the node's stored styles are never touched.
  */
 function withStateTransitions(styleProps, stateStyles, elementStyle, responsive, type) {
     let out = styleProps;
@@ -2151,6 +2176,9 @@ function withStateTransitions(styleProps, stateStyles, elementStyle, responsive,
         out = { ...out, ...defaultHoverTransitionTraits(elementStyle) };
     if (!isFilled(out['transitionProperty']) && !isFilled(out['transition'])) {
         const props = stateTransitionProperties(stateStyles, responsive, type);
+        for (const extra of (elementStyle ? ELEMENT_STYLE_TRANSITION_EXTRAS[elementStyle] : null) ?? [])
+            if (props.length && !props.includes(extra))
+                props.push(extra);
         if (props.length)
             out = { ...out, transitionProperty: props.join(', ') };
     }
@@ -2840,6 +2868,16 @@ const LEGACY_SWIPER_CONTROLS = {
     pagination: '.swiper-pagination',
     scrollbar: '.swiper-scrollbar',
 };
+/**
+ * The feel every live slider gets (premium M4, T3 — Emil 114/121): past either end a drag meets friction, not a wall
+ * (resistance), and a swipe commits only after a few px of travel, so a vertical scroll that drifts never moves a slide.
+ * The easing of the slides is the look's (`slider-ease`, iox-design.css).
+ */
+const SLIDER_FEEL = { resistanceRatio: 0.65, threshold: 6 };
+/** At or under this width one picture takes the full width (M1.3) unless the author said otherwise there. */
+const SLIDER_PHONE_BREAKPOINT = 'mobile';
+/** Effects that always show one slide (a stack, a turn): a phone keeps their own layout. */
+const ONE_SLIDE_EFFECTS = new Set(['fade', 'cube', 'flip', 'cards']);
 /** The pagination part's classes — Swiper's own position CSS (`.swiper-pagination-bullets.swiper-pagination-horizontal`)
  *  must not pin a PART: its place is its own styles'. The dots keep Swiper's bullet class. */
 const PART_PAGINATION_MODIFIER = 'iox-slider-pagination-';
@@ -2862,6 +2900,24 @@ function perView(v) {
     const n = num$1(v, 1);
     return n > 0 ? n : 'auto';
 }
+/**
+ * One picture the full width on a phone (M1.3) — the default the M1 prototype proved: a 1.15 "peek" left an empty strip
+ * beside the picture. Added as a phone layer only where the author set no slides-per-view at a phone width; an effect
+ * that shows one slide anyway keeps its own (a "cards" stack stays a centred card, iox-design.css).
+ */
+function withPhoneDefaults(inputs) {
+    const responsive = inputs.responsive ?? null;
+    if (ONE_SLIDE_EFFECTS.has(String(inputs.effect ?? 'slide')))
+        return responsive;
+    const authored = (bp) => {
+        const layer = responsive?.[bp];
+        return layer?.inputs?.['slidesPerView'] !== undefined;
+    };
+    if (authored('mobile') || authored('small'))
+        return responsive;
+    const phone = responsive?.[SLIDER_PHONE_BREAKPOINT];
+    return { ...(responsive ?? {}), [SLIDER_PHONE_BREAKPOINT]: { ...(phone ?? {}), inputs: { ...(phone?.inputs ?? {}), slidesPerView: 1 } } };
+}
 function collectResponsiveInputs(inputs) {
     const all = { slidesPerView: inputs.slidesPerView, slidesPerGroup: inputs.slidesPerGroup, spaceBetween: inputs.spaceBetween };
     const out = {};
@@ -2876,7 +2932,10 @@ function planSwiperOptions(inputs, ctx) {
     const edit = !!ctx.edit;
     const hasNav = parts ? !!(parts.prev || parts.next) : on(inputs.enableNavigation);
     const hasDots = parts ? !!parts.pagination : on(inputs.enablePagination);
-    const autoplay = !edit && on(inputs.enableAutoplay);
+    // M4: a slider the scroll plays is moved by the page's scroll only (and only while motion is allowed — under reduced
+    // motion it is an ordinary slider).
+    const played = !edit && on(inputs.scrollPlays) && ctx.motion;
+    const autoplay = !edit && !played && on(inputs.enableAutoplay);
     const flags = {
         enableNavigation: hasNav,
         enablePagination: hasDots,
@@ -2915,10 +2974,17 @@ function planSwiperOptions(inputs, ctx) {
         // disabling them at either end (a disabled <button> takes no click).
         options['rewind'] = true;
     }
+    else if (played) {
+        options['allowTouchMove'] = false;
+        options['simulateTouch'] = false;
+        options['grabCursor'] = false;
+        options['loop'] = false;
+        options['rewind'] = false;
+    }
     else {
         options['grabCursor'] = inputs.grabCursor !== false;
         options['slideToClickedSlide'] = on(inputs.slideToClickedSlide);
-        Object.assign(options, swiperLoopOptions(inputs.loop));
+        Object.assign(options, swiperLoopOptions(inputs.loop), SLIDER_FEEL);
         if (on(inputs.freeMode))
             options['freeMode'] = true;
     }
@@ -2966,7 +3032,7 @@ function planSwiperOptions(inputs, ctx) {
         containerRole: ctx.named ? 'region' : 'group',
     };
     if (!edit) {
-        const derived = buildSwiperBreakpoints(collectResponsiveInputs(inputs), inputs.responsive ?? null);
+        const derived = buildSwiperBreakpoints(collectResponsiveInputs(inputs), withPhoneDefaults(inputs));
         const map = mergeSwiperBreakpoints(derived, inputs.breakpoints ?? '');
         if (map)
             options['breakpoints'] = map;
@@ -3020,8 +3086,46 @@ async function bootSlider(el, inputs, options = {}) {
     const swiper = new Swiper(el, { ...plan.options, modules, on });
     if (!options.edit)
         attachCarouselA11y(swiper, { words });
+    attachSliderBar(swiper);
+    if (inputs.scrollPlays)
+        prepareScrollPlay(el, swiper);
     return swiper;
 }
+/** The element a slider the scroll plays is held in: its runway, the Scene root the ONE driver drives (premium M4). */
+const SLIDER_RUNWAY_CLASS = 'iox-slider-runway';
+/** The runway's steps (slides − 1): how many half-screens of scroll it reserves (iox-design.css). */
+const SLIDER_STEPS_PROPERTY = '--slider-steps';
+/**
+ * The runway a slider the scroll plays sits in — ONE answer for the string path (it writes this wrapper, steps known at
+ * render, so the page never shifts) and the component path (the same class and Scene root; its boot writes the steps).
+ * Null when the scroll does not play it.
+ */
+function sliderRunwayHtml(inputs, slideCount) {
+    if (!(inputs?.scrollPlays === true || inputs?.scrollPlays === 'true'))
+        return null;
+    const steps = Math.max(0, Math.floor(slideCount) - 1);
+    return { open: `<div class="${SLIDER_RUNWAY_CLASS}" ${SceneAttribute.Root}="" style="${SLIDER_STEPS_PROPERTY}: ${steps}">`, close: '</div>' };
+}
+/**
+ * Ready a slider the scroll plays: its runway learns how tall it is (it holds the slider mid-screen — iox-design.css) and
+ * how many steps it has, its stage is marked for the scene driver, and the driver is woken — the Swiper it plays has
+ * just arrived (an event, never a DOM scroll). Measured on resize, never per frame.
+ */
+function prepareScrollPlay(el, swiper) {
+    const runway = el.closest(`.${SLIDER_RUNWAY_CLASS}`);
+    // The stage is what the runway holds: the `.swiper` itself, or the canvas's shell around it.
+    const stage = runway ? Array.from(runway.children).find(c => c.contains(el)) : undefined;
+    if (!runway || !stage)
+        return;
+    stage.setAttribute(SceneAttribute.Stage, '');
+    runway.style.setProperty(SLIDER_STEPS_PROPERTY, String(Math.max(0, (swiper.slides?.length ?? 1) - 1)));
+    const measure = () => runway.style.setProperty('--slider-h', `${stage.offsetHeight}px`);
+    measure();
+    const Observer = stage.ownerDocument?.defaultView?.ResizeObserver;
+    if (Observer)
+        new Observer(measure).observe(stage);
+    el.dispatchEvent(new CustomEvent(SCENE_WAKE_EVENT, { bubbles: true }));
+}
 /** The inputs a string-path slider carries (`data-iox-slider`), or null. */
 function sliderInputsOf(el) {
     const raw = el.getAttribute(SLIDER_INPUTS_ATTRIBUTE);
@@ -3041,6 +3145,7 @@ const SLIDER_INPUT_NAMES = [
     'autoHeight', 'slideToClickedSlide', 'freeMode', 'loop', 'enableNavigation', 'enablePagination', 'enableScrollbar', 'enableAutoplay',
     'enableKeyboard', 'enableMousewheel', 'enableZoom', 'enableGrid', 'enableParallax', 'autoplayDelay', 'autoplayPauseOnMouseEnter',
     'autoplayDisableOnInteraction', 'paginationType', 'paginationClickable', 'paginationDynamicBullets', 'gridRows', 'breakpoints',
+    'scrollPlays',
 ];
 function sliderInputsFromProps(props, responsive) {
     const out = {};
@@ -3057,7 +3162,8 @@ function sliderInputsFromProps(props, responsive) {
  * shared boot). The slides render into `.swiper-wrapper` (`childrenHost` — the `.swiper-slide` direct-child invariant,
  * slider.md); the control PARTS (CC3: Previous, Next, Pause, Pagination — `childHostFor`) render beside it, inside
  * `.swiper`: those before the first slide before the wrapper, the rest after it. A saved slider with no parts keeps
- * Swiper-drawn controls (the legacy switches). Swiper is booted by the ONE shared `bootSlider`.
+ * Swiper-drawn controls (the legacy switches). Swiper is booted by the ONE shared `bootSlider`. A slider the scroll plays
+ * (premium M4) sits in its runway — the string path writes the same `iox-slider-runway` wrapper.
  */
 class ClientSliderContainerComponent {
     constructor(platformId) {
@@ -3103,6 +3209,9 @@ class ClientSliderContainerComponent {
         this.responsive = null;
         /** The slider's controls are parts (set by the renderer from the node): Swiper draws none of its own. */
         this.controlParts = false;
+        /** Premium M4: the scroll plays it — a runway (a Scene root the ONE driver drives) holds it mid-screen; otherwise the
+         *  wrapper is `display: contents` and the slider lays out exactly as before. */
+        this.scrollPlays = false;
         this.swiper = null;
         this.slidesSeen = false;
         this.instanceRegistry = inject(ComponentInstanceRegistryService);
@@ -3151,11 +3260,12 @@ class ClientSliderContainerComponent {
             enableZoom: this.enableZoom, enableGrid: this.enableGrid, enableParallax: this.enableParallax, autoplayDelay: this.autoplayDelay,
             autoplayPauseOnMouseEnter: this.autoplayPauseOnMouseEnter, autoplayDisableOnInteraction: this.autoplayDisableOnInteraction,
             paginationType: this.paginationType, paginationClickable: this.paginationClickable, paginationDynamicBullets: this.paginationDynamicBullets,
-            gridRows: this.gridRows, breakpoints: this.breakpoints, responsive: this.responsive,
+            gridRows: this.gridRows, breakpoints: this.breakpoints, responsive: this.responsive, scrollPlays: this.scrollPlays,
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientSliderContainerComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: ClientSliderContainerComponent, isStandalone: false, selector: "iox-slider-container", inputs: { nodeId: "nodeId", dir: "dir", direction: "direction", loop: "loop", slidesPerView: "slidesPerView", slidesPerGroup: "slidesPerGroup", spaceBetween: "spaceBetween", speed: "speed", effect: "effect", grabCursor: "grabCursor", centeredSlides: "centeredSlides", initialSlide: "initialSlide", autoHeight: "autoHeight", slideToClickedSlide: "slideToClickedSlide", freeMode: "freeMode", enableNavigation: "enableNavigation", enablePagination: "enablePagination", enableScrollbar: "enableScrollbar", enableAutoplay: "enableAutoplay", enableKeyboard: "enableKeyboard", enableMousewheel: "enableMousewheel", enableZoom: "enableZoom", enableGrid: "enableGrid", enableParallax: "enableParallax", autoplayDelay: "autoplayDelay", autoplayPauseOnMouseEnter: "autoplayPauseOnMouseEnter", autoplayDisableOnInteraction: "autoplayDisableOnInteraction", paginationType: "paginationType", paginationClickable: "paginationClickable", paginationDynamicBullets: "paginationDynamicBullets", navigationColor: "navigationColor", paginationColor: "paginationColor", gridRows: "gridRows", breakpoints: "breakpoints", responsive: "responsive", controlParts: "controlParts" }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "leadHost", first: true, predicate: ["leadHost"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "trailHost", first: true, predicate: ["trailHost"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "swiperEl", first: true, predicate: ["swiperEl"], descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: ClientSliderContainerComponent, isStandalone: false, selector: "iox-slider-container", inputs: { nodeId: "nodeId", dir: "dir", direction: "direction", loop: "loop", slidesPerView: "slidesPerView", slidesPerGroup: "slidesPerGroup", spaceBetween: "spaceBetween", speed: "speed", effect: "effect", grabCursor: "grabCursor", centeredSlides: "centeredSlides", initialSlide: "initialSlide", autoHeight: "autoHeight", slideToClickedSlide: "slideToClickedSlide", freeMode: "freeMode", enableNavigation: "enableNavigation", enablePagination: "enablePagination", enableScrollbar: "enableScrollbar", enableAutoplay: "enableAutoplay", enableKeyboard: "enableKeyboard", enableMousewheel: "enableMousewheel", enableZoom: "enableZoom", enableGrid: "enableGrid", enableParallax: "enableParallax", autoplayDelay: "autoplayDelay", autoplayPauseOnMouseEnter: "autoplayPauseOnMouseEnter", autoplayDisableOnInteraction: "autoplayDisableOnInteraction", paginationType: "paginationType", paginationClickable: "paginationClickable", paginationDynamicBullets: "paginationDynamicBullets", navigationColor: "navigationColor", paginationColor: "paginationColor", gridRows: "gridRows", breakpoints: "breakpoints", responsive: "responsive", controlParts: "controlParts", scrollPlays: "scrollPlays" }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "leadHost", first: true, predicate: ["leadHost"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "trailHost", first: true, predicate: ["trailHost"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "swiperEl", first: true, predicate: ["swiperEl"], descendants: true, static: true }], ngImport: i0, template: `
+        <div [class.iox-slider-runway]="scrollPlays" [attr.data-iox-scene]="scrollPlays ? '' : null" [style.display]="scrollPlays ? null : 'contents'">
         <div class="swiper" [class]="'swiper iox-node-' + nodeId" [attr.dir]="dir" [style.direction]="dir"
              [style.--swiper-navigation-color]="legacyControls ? (navigationColor || null) : null"
              [style.--swiper-pagination-color]="legacyControls ? (paginationColor || null) : null" #swiperEl>
@@ -3169,11 +3279,13 @@ class ClientSliderContainerComponent {
             <div *ngIf="legacyControls && enablePagination" class="swiper-pagination"></div>
             <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
         </div>
+        </div>
     `, isInline: true, styles: [".swiper{width:100%;height:100%;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientSliderContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'iox-slider-container', template: `
+        <div [class.iox-slider-runway]="scrollPlays" [attr.data-iox-scene]="scrollPlays ? '' : null" [style.display]="scrollPlays ? null : 'contents'">
         <div class="swiper" [class]="'swiper iox-node-' + nodeId" [attr.dir]="dir" [style.direction]="dir"
              [style.--swiper-navigation-color]="legacyControls ? (navigationColor || null) : null"
              [style.--swiper-pagination-color]="legacyControls ? (paginationColor || null) : null" #swiperEl>
@@ -3187,6 +3299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             <div *ngIf="legacyControls && enablePagination" class="swiper-pagination"></div>
             <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
         </div>
+        </div>
     `, standalone: false, styles: [".swiper{width:100%;height:100%;box-sizing:border-box}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -3263,6 +3376,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Input
             }], controlParts: [{
                 type: Input
+            }], scrollPlays: [{
+                type: Input
             }], childrenHost: [{
                 type: ViewChild,
                 args: ['childrenHost', { read: ViewContainerRef, static: true }]
@@ -4908,10 +5023,33 @@ var FormRenderState;
 /** The attribute every renderer writes a form's state on (the canvas switcher, both live paths). */
 const FORM_STATE_ATTRIBUTE = 'data-iox-state';
 /**
- * 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.
- */
-function submitOutcome(response) {
+ * 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.
+ */
+var FormAfterSend;
+(function (FormAfterSend) {
+    FormAfterSend["Message"] = "message";
+    FormAfterSend["Toast"] = "toast";
+})(FormAfterSend || (FormAfterSend = {}));
+/** The Form trait holding the choice. */
+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). */
+const FORM_AFTER_SEND_ATTRIBUTE = 'data-iox-after-send';
+/** The choice a stored value names (`message` unless it says `toast`). */
+function formAfterSend(value) {
+    return value === FormAfterSend.Toast ? FormAfterSend.Toast : FormAfterSend.Message;
+}
+/**
+ * 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.
+ */
+function submitOutcome(response, afterSend = FormAfterSend.Message) {
+    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)
@@ -5413,6 +5551,562 @@ function dateHtml(p, options, describedBy) {
  * disagree. See iox-ai-guidance `architecture/builder/forms-and-inputs-plan.md` §5.
  */
 
+/**
+ * placeFloating — where a panel anchored to a control goes (premium components N8; M5's tooltip and popover).
+ *
+ * ONE pure decision for every floating panel: on the side the caller prefers (under its anchor by default; a tooltip
+ * above), flipped to the opposite side when the preferred one has no room and the other has more; lined up with the
+ * anchor's reading start (the left edge in LTR, the right in RTL) or centred on it; held inside the viewport with a
+ * margin; and the transform-origin AT the anchor, so the panel grows from the control that opened it (Emil 47) — even
+ * when the clamp moved it sideways.
+ *
+ * Lives in the main entry: nothing server-side places a panel; the date picker, the tooltip and the popover are DOM
+ * runtimes of the main entry. Pure — no DOM read here: the caller measures, this decides, the caller writes.
+ */
+/** The side of the anchor the panel sits on. Start / End follow the reading direction (Start is the left in LTR). */
+var FloatingSide;
+(function (FloatingSide) {
+    FloatingSide["Below"] = "below";
+    FloatingSide["Above"] = "above";
+    FloatingSide["Start"] = "start";
+    FloatingSide["End"] = "end";
+})(FloatingSide || (FloatingSide = {}));
+/** How the panel lines up with its anchor across the side: at the anchor's reading start (top, for a Start / End
+ *  panel), or centred on it (a tooltip). */
+var FloatingAlign;
+(function (FloatingAlign) {
+    FloatingAlign["Start"] = "start";
+    FloatingAlign["Center"] = "center";
+})(FloatingAlign || (FloatingAlign = {}));
+/** Emil's popover spacing: close enough to read as the control's, clear of its focus ring. */
+const FLOATING_GAP = 8;
+/** The viewport margin — a panel never touches the screen's edge. */
+const FLOATING_MARGIN = 12;
+/**
+ * Where a floating panel stops being a panel and becomes a bottom sheet (the date picker's calendar, a popover): a
+ * phone. ONE decision, the width the shared CSS keys its sheets on.
+ */
+const FLOATING_SHEET_QUERY = '(max-width: 767px)';
+const OPPOSITE = {
+    [FloatingSide.Below]: FloatingSide.Above,
+    [FloatingSide.Above]: FloatingSide.Below,
+    [FloatingSide.Start]: FloatingSide.End,
+    [FloatingSide.End]: FloatingSide.Start,
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), Math.max(min, max));
+const isVertical = (side) => side === FloatingSide.Below || side === FloatingSide.Above;
+/** True when the side is the anchor's LEFT on screen (Start in LTR, End in RTL). */
+const isLeftOf = (side, rtl) => (side === FloatingSide.Start) !== rtl;
+/** Room on one side of the anchor, along its axis, once the gap and the margin are kept. */
+function roomOn(side, anchor, viewport, gap, margin, rtl) {
+    if (side === FloatingSide.Below)
+        return viewport.height - (anchor.top + anchor.height) - gap - margin;
+    if (side === FloatingSide.Above)
+        return anchor.top - gap - margin;
+    return isLeftOf(side, rtl) ? anchor.left - gap - margin : viewport.width - (anchor.left + anchor.width) - gap - margin;
+}
+/** The preferred side if the panel fits there, or if it is at least as roomy as the opposite; else the opposite. */
+function chooseSide(prefer, anchor, panel, viewport, gap, margin, rtl) {
+    const need = isVertical(prefer) ? panel.height : panel.width;
+    const here = roomOn(prefer, anchor, viewport, gap, margin, rtl);
+    const there = roomOn(OPPOSITE[prefer], anchor, viewport, gap, margin, rtl);
+    return here >= need || here >= there ? prefer : OPPOSITE[prefer];
+}
+/** Where `panel` goes beside `anchor` inside `viewport`. */
+function placeFloating(anchor, panel, viewport, options = {}) {
+    const gap = options.gap ?? FLOATING_GAP;
+    const margin = options.margin ?? FLOATING_MARGIN;
+    const rtl = !!options.rtl;
+    const centred = options.align === FloatingAlign.Center;
+    const side = chooseSide(options.side ?? FloatingSide.Below, anchor, panel, viewport, gap, margin, rtl);
+    const maxTop = viewport.height - margin - panel.height;
+    const maxLeft = viewport.width - margin - panel.width;
+    if (isVertical(side)) {
+        const wantTop = side === FloatingSide.Below ? anchor.top + anchor.height + gap : anchor.top - gap - panel.height;
+        const top = clamp(wantTop, margin, maxTop);
+        // The point on the anchor the panel answers to: its reading-start edge, or its middle.
+        const refX = centred ? anchor.left + anchor.width / 2 : (rtl ? anchor.left + anchor.width : anchor.left);
+        const wantLeft = centred ? refX - panel.width / 2 : (rtl ? refX - panel.width : refX);
+        const left = clamp(wantLeft, margin, maxLeft);
+        const originX = Math.round(clamp(refX - left, 0, panel.width));
+        const originY = side === FloatingSide.Below ? 0 : Math.round(panel.height);
+        return { top: Math.round(top), left: Math.round(left), side, origin: `${originX}px ${originY}px` };
+    }
+    const leftOf = isLeftOf(side, rtl);
+    const wantLeft = leftOf ? anchor.left - gap - panel.width : anchor.left + anchor.width + gap;
+    const left = clamp(wantLeft, margin, maxLeft);
+    const refY = centred ? anchor.top + anchor.height / 2 : anchor.top;
+    const wantTop = centred ? refY - panel.height / 2 : refY;
+    const top = clamp(wantTop, margin, maxTop);
+    const originX = leftOf ? Math.round(panel.width) : 0;
+    const originY = Math.round(clamp(refY - top, 0, panel.height));
+    return { top: Math.round(top), left: Math.round(left), side, origin: `${originX}px ${originY}px` };
+}
+/**
+ * A screen rect in the coordinates of a LAYER — a box that fills the viewport on the live site (scale 1, at 0,0) and
+ * the page frame on the builder canvas (offset, zoomed). The floating runtimes place inside a layer, so one placement
+ * serves both; `layerRect` is the layer's screen rect and `scale` its zoom (its screen width over its layout width).
+ */
+function toLayerRect(rect, layerRect, scale = 1) {
+    const s = scale > 0 && Number.isFinite(scale) ? scale : 1;
+    return {
+        top: (rect.top - layerRect.top) / s,
+        left: (rect.left - layerRect.left) / s,
+        width: rect.width / s,
+        height: rect.height / s,
+    };
+}
+
+/**
+ * THE FLOATING LAYER (premium components M5) — the one box tooltips and toasts are placed in.
+ *
+ * On the live site it is a `popover="manual"` element in the TOP LAYER, filling the viewport: above a fixed header, a
+ * slider's `overflow: hidden`, a nav's `backdrop-filter` (which would otherwise contain anything fixed inside it).
+ * Each SCOPE has its own layer — the document's body, or an open modal `<dialog>` (a tooltip on a lightbox's arrow, a
+ * toast raised from a drawer's form): a layer inside the dialog is shown after it, so it sits above it in the top
+ * layer, it is not inert behind it, and it inherits the dialog's tokens and scheme through the DOM.
+ * On the builder canvas it is a plain `position: fixed` box inside the transformed page frame, which CONTAINS it — so
+ * it fills the frame and zooms with it; nothing is drawn over the builder's own panels.
+ *
+ * Every placement is made in the layer's own px (`layerFrame` + `toLayerRect`), so the site and the canvas share it.
+ */
+const FLOATING_LAYER_CLASS = 'iox-float-layer';
+/** The selector of an open modal dialog — a floating element raised from inside one belongs to its layer. */
+const OPEN_MODAL = 'dialog[open]';
+/** True when the browser has the Popover API (jsdom and old engines do not — they open by `hidden`). */
+function canPopover(el) {
+    return typeof el.showPopover === 'function';
+}
+/** True while a `popover` element is shown in the top layer. */
+function isOpenPopover(el) {
+    try {
+        return el.matches(':popover-open');
+    }
+    catch {
+        return false;
+    }
+}
+/** Show a `popover` element in the top layer; an element without the API is un-hidden instead. */
+function showInTopLayer(el) {
+    if (!el.hasAttribute('popover') || !canPopover(el)) {
+        el.hidden = false;
+        return;
+    }
+    try {
+        if (!isOpenPopover(el))
+            el.showPopover();
+    }
+    catch { /* not connected */ }
+}
+/** Take a `popover` element out of the top layer (or hide it). */
+function hideFromTopLayer(el) {
+    if (!el.hasAttribute('popover') || !canPopover(el)) {
+        el.hidden = true;
+        return;
+    }
+    try {
+        if (isOpenPopover(el))
+            el.hidePopover();
+    }
+    catch { /* already hidden */ }
+}
+/** The scope a floating element raised from `from` belongs to: its closest open modal dialog, else the container. */
+function floatingScope(from, options = {}) {
+    const dialog = options.topLayer !== false ? from?.closest?.(OPEN_MODAL) ?? null : null;
+    if (dialog)
+        return dialog;
+    const container = typeof options.container === 'function' ? options.container(from ?? null) : options.container;
+    return container ?? from?.ownerDocument?.body ?? null;
+}
+/** The layer of a scope — created on first use, raised into the top layer when the site asks for it. */
+function floatingLayer(scope, options = {}) {
+    const doc = scope.ownerDocument;
+    let layer = Array.from(scope.children).find(c => c.classList.contains(FLOATING_LAYER_CLASS));
+    if (!layer) {
+        layer = doc.createElement('div');
+        layer.className = FLOATING_LAYER_CLASS;
+        // Display only — the tooltip names what it describes through aria-describedby, the toasts speak through their
+        // own live region; the layer itself is not a landmark.
+        layer.setAttribute('data-iox-chrome', '');
+        if (options.topLayer !== false && canPopover(layer))
+            layer.setAttribute('popover', 'manual');
+        scope.appendChild(layer);
+    }
+    raiseFloatingLayer(layer);
+    return layer;
+}
+/** Show a top-layer layer (again): a layer closed by a scope change, or one a later modal dialog now covers. */
+function raiseFloatingLayer(layer) {
+    if (!layer.hasAttribute('popover') || !canPopover(layer))
+        return;
+    showInTopLayer(layer);
+}
+/** The layer's frame. On the site: (0, 0), scale 1, the viewport. On the canvas: the frame's corner, its zoom, its px. */
+function layerFrame(layer) {
+    const r = layer.getBoundingClientRect();
+    const width = layer.offsetWidth || r.width;
+    const height = layer.offsetHeight || r.height;
+    const scale = width > 0 && r.width > 0 ? r.width / width : 1;
+    return { rect: { top: r.top, left: r.left }, scale, viewport: { width, height } };
+}
+/** An element's screen rect in the layer's px. */
+function rectInLayer(el, frame) {
+    const r = el.getBoundingClientRect();
+    return toLayerRect({ top: r.top, left: r.left, width: r.width, height: r.height }, frame.rect, frame.scale);
+}
+
+/**
+ * THE TOAST (premium components M5, N3) — a non-modal notice at an edge of the screen. ONE DOM runtime for the live site
+ * (the `showToast` action on both engine paths, and a form that keeps its fields after sending) and the builder canvas
+ * (the same action RUNS there; the design-time "Showing on canvas" state holds one up to style it).
+ *
+ * - Speaks through a polite live region that exists BEFORE the first notice lands (a region inserted with its words is
+ *   not announced); never takes focus.
+ * - Enters from its edge and leaves to the SAME edge (Emil 129–130), on the look's toast tokens (400ms `ease` in, a
+ *   faster exit); reduced motion keeps the fade and drops the slide (the shared CSS).
+ * - Its timer pauses while the tab is hidden, the pointer is on the stack or focus is inside it (Emil 132; WCAG 2.2.1),
+ *   and it has a close control.
+ * - At most `TOAST_MAX_VISIBLE` at once — the oldest leaves for a new one; the rest slide to their new places (FLIP on
+ *   `translate`, which composes with the entrance's `transform`), so nothing jumps.
+ * - Above the home indicator (`env(safe-area-inset-*)`) and above a bottom tab bar (the shared CSS).
+ */
+var ToastEdge;
+(function (ToastEdge) {
+    ToastEdge["Bottom"] = "bottom";
+    ToastEdge["Top"] = "top";
+})(ToastEdge || (ToastEdge = {}));
+var ToastClass;
+(function (ToastClass) {
+    ToastClass["Stack"] = "iox-toasts";
+    ToastClass["Toast"] = "iox-toast";
+    ToastClass["Text"] = "iox-toast__text";
+    ToastClass["Close"] = "iox-toast__close";
+    /** The element style's marker — set when the element it was raised from wears the design system. */
+    ToastClass["Marker"] = "iox-es-toast";
+})(ToastClass || (ToastClass = {}));
+const TOAST_EDGE_ATTRIBUTE = 'data-iox-edge';
+/** On the toast the builder canvas holds up for styling (no timer, never leaves on its own). */
+const TOAST_DESIGN_ATTRIBUTE = 'data-iox-toast-design';
+/** A stack created for a toast waits this long before the words land: a live region must exist before it changes. */
+const TOAST_FIRST_LANDS_MS = 80;
+/** The most toasts on screen at once (Emil 131: a short stack, never a wall). */
+const TOAST_MAX_VISIBLE = 3;
+/** A toast stays at least this long … */
+const TOAST_MIN_MS = 4000;
+/** … at most this long … */
+const TOAST_MAX_MS = 10000;
+/** … and this much longer per character it says (a reader's pace). */
+const TOAST_MS_PER_CHAR = 60;
+const DESIGN_MARKER$1 = '.iox-es';
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const CLOSE_PATH = 'M6 6l12 12M18 6L6 18';
+/** The close control's words in the page's language. */
+const TOAST_CLOSE_WORDS = Object.freeze({ en: 'Close', he: 'סגירה' });
+/** "Close" in `lang` (its base language), else English. */
+function toastCloseWord(lang) {
+    const base = String(lang ?? '').toLowerCase().split(/[-_]/)[0];
+    return TOAST_CLOSE_WORDS[base] ?? TOAST_CLOSE_WORDS['en'];
+}
+/** How long a toast stays: long enough to read, within bounds. Pure. */
+function toastDuration(text, override) {
+    if (typeof override === 'number' && Number.isFinite(override) && override > 0)
+        return override;
+    const want = TOAST_MIN_MS + Math.max(0, String(text ?? '').trim().length - 20) * TOAST_MS_PER_CHAR;
+    return Math.min(TOAST_MAX_MS, Math.max(TOAST_MIN_MS, want));
+}
+/** Which toasts leave so a new one fits: the oldest first, keeping `max - 1` beside the newcomer. Pure. */
+function toastsToEvict(shown, max = TOAST_MAX_VISIBLE) {
+    const over = shown.length - (max - 1);
+    return over > 0 ? shown.slice(0, over) : [];
+}
+/** The edge a value names (Bottom unless it says Top). */
+function toastEdge(value) {
+    return value === ToastEdge.Top ? ToastEdge.Top : ToastEdge.Bottom;
+}
+var PauseReason;
+(function (PauseReason) {
+    PauseReason["Hidden"] = "hidden";
+    PauseReason["Hover"] = "hover";
+    PauseReason["Focus"] = "focus";
+})(PauseReason || (PauseReason = {}));
+/**
+ * A countdown that stops while any reason holds it (the tab hidden, the pointer on the stack, focus inside) and runs
+ * on from what was left. Its clock and scheduler are injectable for a spec.
+ */
+class PausableTimer {
+    constructor(ms, onDone, now = () => Date.now()) {
+        this.onDone = onDone;
+        this.now = now;
+        this.startedAt = 0;
+        this.handle = null;
+        this.reasons = new Set();
+        this.done = false;
+        this.remaining = Math.max(0, ms);
+        this.run();
+    }
+    get paused() { return this.reasons.size > 0; }
+    /** What is left (ms), counting the time run since the last start. */
+    left() {
+        return this.handle ? Math.max(0, this.remaining - (this.now() - this.startedAt)) : this.remaining;
+    }
+    pause(reason) {
+        if (this.done)
+            return;
+        this.reasons.add(reason);
+        if (!this.handle)
+            return;
+        this.remaining = this.left();
+        clearTimeout(this.handle);
+        this.handle = null;
+    }
+    resume(reason) {
+        if (this.done)
+            return;
+        this.reasons.delete(reason);
+        if (!this.reasons.size && !this.handle)
+            this.run();
+    }
+    clear() {
+        this.done = true;
+        if (this.handle)
+            clearTimeout(this.handle);
+        this.handle = null;
+    }
+    run() {
+        this.startedAt = this.now();
+        this.handle = setTimeout(() => {
+            this.handle = null;
+            if (this.done)
+                return;
+            this.done = true;
+            this.onDone();
+        }, this.remaining);
+    }
+}
+const STACK = '__ioxToastStack';
+/** The live stack of one edge in one layer, with its listeners — created with the first toast at that edge. */
+class ToastStack {
+    constructor(layer, edge) {
+        this.toasts = [];
+        this.cleanups = [];
+        const doc = layer.ownerDocument;
+        this.el = doc.createElement('div');
+        this.el.className = ToastClass.Stack;
+        this.el.setAttribute(TOAST_EDGE_ATTRIBUTE, edge);
+        this.el.setAttribute('role', 'status');
+        this.el.setAttribute('aria-live', 'polite');
+        this.el.setAttribute('aria-atomic', 'false');
+        this.el.setAttribute('aria-relevant', 'additions text');
+        layer.appendChild(this.el);
+        const on = (target, type, fn) => {
+            target.addEventListener(type, fn);
+            this.cleanups.push(() => target.removeEventListener(type, fn));
+        };
+        on(this.el, 'pointerenter', () => this.each(t => t.timer?.pause(PauseReason.Hover)));
+        on(this.el, 'pointerleave', () => this.each(t => t.timer?.resume(PauseReason.Hover)));
+        on(this.el, 'focusin', () => this.each(t => t.timer?.pause(PauseReason.Focus)));
+        on(this.el, 'focusout', () => { if (!this.el.contains(doc.activeElement))
+            this.each(t => t.timer?.resume(PauseReason.Focus)); });
+        on(doc, 'visibilitychange', () => this.each(t => (doc.hidden ? t.timer?.pause(PauseReason.Hidden) : t.timer?.resume(PauseReason.Hidden))));
+        this.el[STACK] = this;
+    }
+    /** Add a toast: the oldest beyond the limit leave, the others slide up (or down) to make room. A stack that was
+     *  just created waits `TOAST_FIRST_LANDS_MS` before its first words land, so the live region is heard. */
+    add(text, options, design, fresh = false) {
+        const doc = this.el.ownerDocument;
+        for (const old of toastsToEvict(this.toasts.filter(t => !t.closing)))
+            this.close(old);
+        const el = doc.createElement('div');
+        el.className = ToastClass.Toast;
+        el.classList.toggle(ToastClass.Marker, !!options.from?.closest?.(DESIGN_MARKER$1));
+        if (design)
+            el.setAttribute(TOAST_DESIGN_ATTRIBUTE, '');
+        const p = doc.createElement('p');
+        p.className = ToastClass.Text;
+        p.textContent = text;
+        const close = doc.createElement('button');
+        close.type = 'button';
+        close.className = ToastClass.Close;
+        const name = toastCloseWord(options.lang ?? options.from?.closest?.('[lang]')?.getAttribute('lang') ?? doc.documentElement.lang);
+        close.setAttribute('aria-label', name);
+        close.title = name;
+        close.appendChild(closeIcon(doc));
+        el.append(p, close);
+        const live = { el, timer: null, closing: false };
+        close.addEventListener('click', () => this.close(live));
+        this.toasts.push(live);
+        const land = () => {
+            if (live.closing)
+                return;
+            this.withFlip(() => this.el.appendChild(el));
+            if (design)
+                return;
+            live.timer = new PausableTimer(toastDuration(text, options.durationMs), () => this.close(live), () => doc.defaultView?.performance?.now() ?? Date.now());
+            if (doc.hidden)
+                live.timer.pause(PauseReason.Hidden);
+            if (this.el.matches(':hover'))
+                live.timer.pause(PauseReason.Hover);
+            if (this.el.contains(doc.activeElement))
+                live.timer.pause(PauseReason.Focus);
+        };
+        if (fresh)
+            setTimeout(land, TOAST_FIRST_LANDS_MS);
+        else
+            land();
+        return { element: el, close: () => this.close(live) };
+    }
+    /** Leave to its edge (the shared CSS's exit), then the rest close the gap. */
+    close(t) {
+        if (t.closing)
+            return;
+        t.closing = true;
+        t.timer?.clear();
+        const animate = motionAllowed(this.el.ownerDocument.defaultView);
+        void runExitMotion(t.el, { animate }).then(() => {
+            const i = this.toasts.indexOf(t);
+            if (i >= 0)
+                this.toasts.splice(i, 1);
+            this.withFlip(() => t.el.remove());
+        });
+    }
+    /** Take the stack down (its layer is going — a spec, a page torn down). An empty stack otherwise stays, so its live
+     *  region is already there for the next toast. */
+    destroy() {
+        for (const t of this.toasts)
+            t.timer?.clear();
+        this.toasts.length = 0;
+        for (const c of this.cleanups)
+            c();
+        this.cleanups.length = 0;
+        this.el.remove();
+    }
+    each(fn) {
+        for (const t of this.toasts)
+            fn(t);
+    }
+    /** Move the stack with no jump: measure, change, then play each staying toast from where it was (FLIP). */
+    withFlip(change) {
+        const view = this.el.ownerDocument.defaultView;
+        const staying = this.toasts.filter(t => !t.closing && t.el.isConnected);
+        const before = new Map(staying.map(t => [t.el, t.el.getBoundingClientRect().top]));
+        change();
+        if (!motionAllowed(view))
+            return;
+        const duration = parseDuration(view?.getComputedStyle(this.el).getPropertyValue('--iox-toast-dur-in') ?? '');
+        if (!duration)
+            return;
+        for (const t of staying) {
+            const from = before.get(t.el);
+            if (from === undefined || !t.el.isConnected)
+                continue;
+            const dy = from - t.el.getBoundingClientRect().top;
+            if (!dy || typeof t.el.animate !== 'function')
+                continue;
+            t.el.animate([{ translate: `0 ${dy}px` }, { translate: '0 0' }], { duration, easing: 'ease' });
+        }
+    }
+}
+function closeIcon(doc) {
+    const svg = doc.createElementNS(SVG_NS, 'svg');
+    svg.setAttribute('width', '16');
+    svg.setAttribute('height', '16');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.setAttribute('focusable', 'false');
+    const path = doc.createElementNS(SVG_NS, 'path');
+    path.setAttribute('d', CLOSE_PATH);
+    path.setAttribute('fill', 'none');
+    path.setAttribute('stroke', 'currentColor');
+    path.setAttribute('stroke-width', '2');
+    path.setAttribute('stroke-linecap', 'round');
+    svg.appendChild(path);
+    return svg;
+}
+/** `400ms` / `0.4s` → 400; anything else → 0. */
+function parseDuration(value) {
+    const v = value.trim();
+    if (!v)
+        return 0;
+    const n = parseFloat(v);
+    if (!Number.isFinite(n))
+        return 0;
+    return v.endsWith('ms') ? n : n * 1000;
+}
+/** The stack at `edge` in a layer, created on first use (`fresh`). */
+function stackOf(layer, edge) {
+    const el = layer.querySelector(`:scope > .${ToastClass.Stack}[${TOAST_EDGE_ATTRIBUTE}="${edge}"]`);
+    const found = el?.[STACK];
+    return found ? { stack: found, fresh: false } : { stack: new ToastStack(layer, edge), fresh: true };
+}
+/** Take down every toast stack under `root` (a page torn down, a spec). */
+function clearToasts(root) {
+    root?.querySelectorAll?.(`.${ToastClass.Stack}`).forEach(el => el[STACK]?.destroy());
+}
+/** The layer a toast raised from `options.from` goes to: its open dialog's, else the container's (the body). */
+function layerFor(doc, options) {
+    const scope = floatingScope(options.from ?? null, options) ?? doc.body;
+    return scope ? floatingLayer(scope, options) : null;
+}
+/**
+ * Raise a toast. Null when there is nothing to say or nowhere to say it (no document).
+ * A first toast creates its live region and lands a frame later, so assistive technology hears it.
+ */
+function showToast(doc, text, options = {}) {
+    const words = String(text ?? '').trim();
+    if (!doc || !words)
+        return null;
+    const layer = layerFor(doc, options);
+    if (!layer)
+        return null;
+    const { stack, fresh } = stackOf(layer, toastEdge(options.edge));
+    return stack.add(words, options, false, fresh);
+}
+/**
+ * The builder canvas's design-time state: hold a toast up (no timer) so the author styles it, or take it down. One per
+ * layer; showing it again only changes its words.
+ */
+function showToastDesign(doc, text, show, options = {}) {
+    if (!doc)
+        return;
+    const layer = layerFor(doc, options);
+    if (!layer)
+        return;
+    const existing = layer.querySelector(`.${ToastClass.Toast}[${TOAST_DESIGN_ATTRIBUTE}]`);
+    if (!show) {
+        existing?.querySelector(`.${ToastClass.Close}`)?.click();
+        return;
+    }
+    if (existing) {
+        const p = existing.querySelector(`.${ToastClass.Text}`);
+        if (p)
+            p.textContent = text;
+        return;
+    }
+    stackOf(layer, toastEdge(options.edge)).stack.add(String(text ?? '').trim() || ' ', options, true);
+}
+
+/**
+ * A form that KEEPS its fields after sending says so in a toast (premium M5, N3 — the Form's After sending ▸ "Keep the
+ * fields and show a toast"). Its words are the form's own Sent words — the ones its submit button shows once it has sent
+ * (the author's "Once sent", else "Sent" in the page's language) — so the toast and the button never disagree. ONE
+ * helper for the component path and the string path.
+ */
+/** The Sent words a form says: its submit button's Sent label, else "Sent" in its language. */
+function formSentWords(form) {
+    const label = form.querySelector(`.${SubmitLabelClass.Sent}`)?.textContent?.trim();
+    if (label)
+        return label;
+    return sentWord(form.closest('[lang]')?.getAttribute('lang') ?? form.ownerDocument?.documentElement?.lang);
+}
+/** True when the rendered form keeps its fields and toasts (the attribute every renderer writes). */
+function formToastsOnSend(form) {
+    return form?.getAttribute(FORM_AFTER_SEND_ATTRIBUTE) === FormAfterSend.Toast;
+}
+/** Raise the form's Sent toast (from the form — its scope and its look). */
+function raiseFormToast(form) {
+    return showToast(form.ownerDocument, formSentWords(form), { from: form });
+}
+
 const IOX_FORM_MESSAGES = new InjectionToken('IOX_FORM_MESSAGES', {
     providedIn: 'root',
     factory: () => defaultMessageResolver,
@@ -5627,6 +6321,7 @@ class IoxFormComponent {
         syncSubmitButtons(this.host?.nativeElement, state);
     }
     get renderState() { return this._renderState; }
+    get keepsFields() { return formAfterSend(this.afterSend) === FormAfterSend.Toast; }
     /**
      * Constructor injection rather than `inject()`, for the same reason as Field: this library's
      * specs construct components directly. `runtime` is provided by THIS component (see
@@ -5644,6 +6339,8 @@ class IoxFormComponent {
         this.name = '';
         this._renderState = FormRenderState.Idle;
         this.feedback = FeedbackTiming.Smart;
+        /** After sending (premium M5): the success in place (`message`), or keep the fields and say it in a toast. */
+        this.afterSend = FormAfterSend.Message;
         /**
          * Move focus to the first field that failed, instead of leaving the visitor to hunt for red
          * text. On by default — the single most valuable thing a failed submit can do.
@@ -5734,7 +6431,7 @@ class IoxFormComponent {
     /** Turn the server's answer into what the visitor sees — the shared `submitOutcome`, which the string runtime
      *  applies too. Public so a host-owned transport can reuse it. */
     applyResponse(response) {
-        const outcome = submitOutcome(response);
+        const outcome = submitOutcome(response, this.afterSend);
         this.renderState = outcome.state;
         if (outcome.errors) {
             this.runtime.applyErrors(outcome.errors);
@@ -5751,6 +6448,8 @@ class IoxFormComponent {
         // the success message, and cannot resubmit them by pressing enter.
         this.runtime.reset();
         this.resetControls();
+        if (outcome.toast)
+            raiseFormToast(this.host.nativeElement);
         if (outcome.redirect && this.navigate)
             this.navigate(outcome.redirect);
     }
@@ -5797,7 +6496,7 @@ class IoxFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFormComponent, deps: [{ token: FormRuntimeService }, { token: i0.ElementRef }, { token: IOX_FORM_TRANSPORT, optional: true }, { token: IOX_FORM_NAVIGATOR, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: IoxFormComponent, isStandalone: false, selector: "form[iox-form]", inputs: { nodeId: "nodeId", formId: "formId", name: "name", renderState: "renderState", feedback: "feedback", focusFirstProblem: "focusFirstProblem", announceFailure: "announceFailure" }, outputs: { formSubmit: "formSubmit", validationFailed: "validationFailed" }, host: { listeners: { "submit": "onSubmit($event)" }, properties: { "class": "'iox-form iox-node-' + nodeId", "attr.novalidate": "''", "attr.data-iox-form": "formId || null", "attr.data-iox-state": "renderState", "attr.aria-busy": "renderState === 'submitting' ? 'true' : null" } }, providers: [FormRuntimeService], viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: IoxFormComponent, isStandalone: false, selector: "form[iox-form]", inputs: { nodeId: "nodeId", formId: "formId", name: "name", renderState: "renderState", feedback: "feedback", afterSend: "afterSend", focusFirstProblem: "focusFirstProblem", announceFailure: "announceFailure" }, outputs: { formSubmit: "formSubmit", validationFailed: "validationFailed" }, host: { listeners: { "submit": "onSubmit($event)" }, properties: { "class": "'iox-form iox-node-' + nodeId", "attr.novalidate": "''", "attr.data-iox-form": "formId || null", "attr.data-iox-state": "renderState", "attr.aria-busy": "renderState === 'submitting' ? 'true' : null", "attr.data-iox-after-send": "keepsFields ? 'toast' : null" } }, providers: [FormRuntimeService], viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <div class="iox-form__hp" aria-hidden="true">
             <input type="text" [attr.name]="honeypotField" tabindex="-1" autocomplete="off" />
         </div>
@@ -5833,6 +6532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                         '[attr.data-iox-form]': 'formId || null',
                         '[attr.data-iox-state]': 'renderState',
                         '[attr.aria-busy]': "renderState === 'submitting' ? 'true' : null",
+                        '[attr.data-iox-after-send]': "keepsFields ? 'toast' : null",
                         '(submit)': 'onSubmit($event)',
                     }, providers: [FormRuntimeService], standalone: false, styles: [":host{box-sizing:border-box}\n"] }]
         }], ctorParameters: () => [{ type: FormRuntimeService }, { type: i0.ElementRef }, { type: undefined, decorators: [{
@@ -5855,6 +6555,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Input
             }], feedback: [{
                 type: Input
+            }], afterSend: [{
+                type: Input
             }], focusFirstProblem: [{
                 type: Input
             }], announceFailure: [{
@@ -5868,47 +6570,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 args: ['childrenHost', { read: ViewContainerRef, static: true }]
             }] } });
 
-/**
- * placeFloating — where a panel anchored to a control goes (premium components N8, reused by M5's tooltip and popover).
- *
- * ONE pure decision for every floating panel: under its anchor, aligned to the anchor's reading start (the left edge in
- * LTR, the right in RTL); above it when there is no room below and more above; held inside the viewport with a margin;
- * and the transform-origin AT the anchor, so the panel grows from the control that opened it (Emil 47) — even when the
- * clamp moved it sideways.
- *
- * Lives in the main entry: nothing server-side places a panel, and the date picker (now) and the floating family (M5)
- * are DOM runtimes of the main entry. Pure — no DOM read here: the caller measures, this decides, the caller writes.
- */
-var FloatingSide;
-(function (FloatingSide) {
-    FloatingSide["Below"] = "below";
-    FloatingSide["Above"] = "above";
-})(FloatingSide || (FloatingSide = {}));
-/** Emil's popover spacing: close enough to read as the control's, clear of its focus ring. */
-const FLOATING_GAP = 8;
-/** The viewport margin — a panel never touches the screen's edge. */
-const FLOATING_MARGIN = 12;
-const clamp = (value, min, max) => Math.min(Math.max(value, min), Math.max(min, max));
-/** Where `panel` goes beside `anchor` inside `viewport`. */
-function placeFloating(anchor, panel, viewport, options = {}) {
-    const gap = options.gap ?? FLOATING_GAP;
-    const margin = options.margin ?? FLOATING_MARGIN;
-    const anchorBottom = anchor.top + anchor.height;
-    const roomBelow = viewport.height - anchorBottom - gap - margin;
-    const roomAbove = anchor.top - gap - margin;
-    // Below is the default; above only when below is too short AND above is roomier (a field near the screen's foot).
-    const side = roomBelow >= panel.height || roomBelow >= roomAbove ? FloatingSide.Below : FloatingSide.Above;
-    const wantTop = side === FloatingSide.Below ? anchorBottom + gap : anchor.top - gap - panel.height;
-    const top = clamp(wantTop, margin, viewport.height - margin - panel.height);
-    const start = options.rtl ? anchor.left + anchor.width : anchor.left;
-    const wantLeft = options.rtl ? start - panel.width : start;
-    const left = clamp(wantLeft, margin, viewport.width - margin - panel.width);
-    // The origin is the anchor's start corner, in the panel's own coordinates, kept on the panel's box.
-    const originX = Math.round(clamp(start - left, 0, panel.width));
-    const originY = side === FloatingSide.Below ? 0 : Math.round(panel.height);
-    return { top: Math.round(top), left: Math.round(left), side, origin: `${originX}px ${originY}px` };
-}
-
 var CalendarClass;
 (function (CalendarClass) {
     CalendarClass["Panel"] = "iox-cal";
@@ -5929,9 +6590,9 @@ const CALENDAR_CLOSING_ATTRIBUTE = 'data-iox-closing';
 const CALENDAR_INSTANT_ATTRIBUTE = 'data-iox-instant';
 /** On the panel the builder canvas draws for its design-time Open state (in the flow, inert). */
 const CALENDAR_DESIGN_ATTRIBUTE = 'data-iox-cal-design';
-/** A phone gets the sheet (the drawer curve, the scrim) — the same width the shared CSS keys on. */
-const CALENDAR_SHEET_QUERY = '(max-width: 767px)';
-const RUNTIME = '__ioxDatePicker';
+/** A phone gets the sheet (the drawer curve, the scrim) — the floating family's ONE decision (a popover too). */
+const CALENDAR_SHEET_QUERY = FLOATING_SHEET_QUERY;
+const RUNTIME$1 = '__ioxDatePicker';
 const ISO_ATTRIBUTE = 'data-iox-iso';
 const CHEVRON_BACK = 'M15 18l-6-6 6-6';
 const CHEVRON_AHEAD = 'M9 18l6-6-6-6';
@@ -6092,7 +6753,7 @@ class DatePickerRuntime {
         const form = field.closest('form');
         if (form && !options.onPick)
             this.listen(form, 'reset', () => setDateFieldValue(field, '', { lang: this.lang() }));
-        field[RUNTIME] = this;
+        field[RUNTIME$1] = this;
     }
     get isOpen() { return !!this.panel; }
     value() { return partsOf(this.field).input?.value ?? ''; }
@@ -6101,7 +6762,7 @@ class DatePickerRuntime {
         for (const [target, type, fn] of this.listeners)
             target.removeEventListener(type, fn);
         this.listeners.length = 0;
-        delete this.field[RUNTIME];
+        delete this.field[RUNTIME$1];
     }
     /** Open the calendar; `instant` (opened from the keyboard) skips the entrance and, later, the exit. */
     open(instant = false) {
@@ -6257,7 +6918,7 @@ class DatePickerRuntime {
 }
 /** The runtime already running a field, if any. */
 function datePickerOf(field) {
-    return field?.[RUNTIME] ?? null;
+    return field?.[RUNTIME$1] ?? null;
 }
 /** Run a date field — once: a field already running is returned as is. Null when `field` holds no date button. */
 function attachDatePicker(field, options = {}) {
@@ -7170,6 +7831,257 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 args: ['childrenHost', { read: ViewContainerRef, static: true }]
             }] } });
 
+/**
+ * THE POPOVER on the live site (premium components M5, N4) — an anchored, NON-modal panel of ordinary nodes, opened by
+ * its opener's `openPopover` / `togglePopover` action and closed by `closePopover`, Esc or a press outside it. ONE DOM
+ * runtime for both engine paths (the component path and the string path render the same element: `[data-iox-popover]`,
+ * `popover="manual"`, `role="dialog"`, `tabindex="-1"`, the node's own id); the builder canvas has its own twin that
+ * places itself with the same `placeFloating`.
+ *
+ * - In the TOP LAYER (`showPopover`): above a fixed header and a slider's clipping; it still inherits the section's tokens
+ *   and scheme through the DOM, where the node sits.
+ * - Placed beside its opener on the side the author picked (flipped at the viewport's edge, shifted inside it), lined up
+ *   with the opener's reading start, growing from it (Emil 47/123); placed again while the page scrolls or resizes.
+ * - On a phone (`FLOATING_SHEET_QUERY`, the date picker's decision) it is a bottom sheet over the look's scrim, and the
+ *   page holds still under it.
+ * - Focus moves INTO it on open (the panel itself: no ring after a tap), and back to the opener when Esc closes it, or
+ *   when a press outside closes it and focus had nowhere else to go. Focus leaving it (Tab) closes it.
+ * - A keyboard open (Enter / Space on the opener) and Esc have no motion (Emil 2); the exit is faster than the entrance
+ *   (the shared CSS, on the popover tokens).
+ */
+var PopoverAttribute;
+(function (PopoverAttribute) {
+    PopoverAttribute["Root"] = "data-iox-popover";
+    PopoverAttribute["Placement"] = "data-iox-popover-placement";
+    /** On the panel while it is a phone's bottom sheet. */
+    PopoverAttribute["Sheet"] = "data-iox-sheet";
+    /** The side it ended on (after a flip). */
+    PopoverAttribute["Side"] = "data-iox-side";
+    /** Opened from the keyboard: it appears and goes with no motion. */
+    PopoverAttribute["Instant"] = "data-iox-instant";
+    /** On the panel while it is open (the canvas twin reads the same name). */
+    PopoverAttribute["Open"] = "data-iox-open";
+})(PopoverAttribute || (PopoverAttribute = {}));
+const POPOVER_SELECTOR = `[${PopoverAttribute.Root}]`;
+const STATE = '__ioxPopover';
+const stateOf = (el) => el[STATE];
+/** True while the popover is open (an exit that is playing counts as closed). */
+function isPopoverOpen(el) {
+    return !!el && !!stateOf(el) && !isExiting(el);
+}
+/** The side a panel asks for (Below unless it names another). */
+function popoverSide(value) {
+    return Object.values(FloatingSide).includes(String(value)) ? value : FloatingSide.Below;
+}
+/** The opener a popover is anchored to: the one that opened it, else the first element announcing it. */
+function anchorOf(el, opener) {
+    if (opener?.isConnected)
+        return opener;
+    return el.id ? el.ownerDocument.querySelector(popoverOpenersSelector(el.id)) : null;
+}
+/** Every element announcing this popover says whether it is open (`aria-expanded`). */
+function syncOpeners(el, open) {
+    if (!el.id)
+        return;
+    el.ownerDocument.querySelectorAll(popoverOpenersSelector(el.id)).forEach(o => o.setAttribute(OpenerAttribute.Expanded, open ? 'true' : 'false'));
+}
+/** Beside its opener, inside the viewport, growing from it — the ONE `placeFloating`. A sheet is the shared CSS's. */
+function placePopover(el, opener) {
+    if (el.hasAttribute(PopoverAttribute.Sheet))
+        return;
+    const view = el.ownerDocument.defaultView;
+    if (!view)
+        return;
+    const anchor = opener?.getBoundingClientRect();
+    const rtl = view.getComputedStyle(opener ?? el).direction === 'rtl';
+    const size = { width: el.offsetWidth, height: el.offsetHeight };
+    const viewport = { width: view.innerWidth, height: view.innerHeight };
+    // No opener on the page (an action from elsewhere, an opener scrolled away): under the top of the viewport, centred.
+    const rect = anchor
+        ? { top: anchor.top, left: anchor.left, width: anchor.width, height: anchor.height }
+        : { top: 0, left: viewport.width / 2, width: 0, height: 0 };
+    const spot = placeFloating(rect, size, viewport, { side: popoverSide(el.getAttribute(PopoverAttribute.Placement)), align: anchor ? FloatingAlign.Start : FloatingAlign.Center, rtl });
+    el.style.top = `${spot.top}px`;
+    el.style.left = `${spot.left}px`;
+    el.style.transformOrigin = spot.origin;
+    el.setAttribute(PopoverAttribute.Side, spot.side);
+}
+/** Open the popover beside `options.opener`. Opening one that is leaving keeps it open. */
+function openPopover(el, options = {}) {
+    if (!el)
+        return;
+    const existing = stateOf(el);
+    if (existing) {
+        if (isExiting(el)) {
+            cancelExit(el);
+            existing.closing = null;
+        }
+        return;
+    }
+    const doc = el.ownerDocument;
+    const view = doc.defaultView;
+    const opener = anchorOf(el, options.opener);
+    const sheet = !!view?.matchMedia?.(FLOATING_SHEET_QUERY).matches;
+    const state = { opener, cleanups: [], closing: null };
+    el[STATE] = state;
+    el.toggleAttribute(PopoverAttribute.Sheet, sheet);
+    el.toggleAttribute(PopoverAttribute.Instant, !!options.instant);
+    el.setAttribute(PopoverAttribute.Open, '');
+    // A sheet sits on the bottom edge (the shared CSS); a placement left from a laptop-sized open must not move it.
+    if (sheet) {
+        el.style.removeProperty('top');
+        el.style.removeProperty('left');
+    }
+    showInTopLayer(el);
+    placePopover(el, opener);
+    el.focus({ preventScroll: true });
+    syncOpeners(el, true);
+    if (sheet && options.lockScroll) {
+        options.lockScroll();
+        state.unlockScroll = options.unlockScroll;
+    }
+    wire(el, state);
+}
+/** Close the popover with its exit (the shared CSS), then hand focus back as asked. */
+function closePopover(el, options = {}) {
+    if (!el)
+        return Promise.resolve();
+    const state = stateOf(el);
+    if (!state)
+        return Promise.resolve();
+    if (state.closing && isExiting(el))
+        return state.closing;
+    syncOpeners(el, false);
+    for (const c of state.cleanups)
+        c();
+    state.cleanups.length = 0;
+    const animate = !options.instant && !el.hasAttribute(PopoverAttribute.Instant) && motionAllowed(el.ownerDocument.defaultView);
+    const done = runExitMotion(el, { animate }).then(finish => {
+        if (!finish) {
+            wire(el, state);
+            syncOpeners(el, true);
+            return;
+        }
+        finishClose(el, state, options.returnFocus);
+    });
+    state.closing = done;
+    return done;
+}
+/** Toggle: close an open one, open a closed (or leaving) one. */
+function togglePopover(el, options = {}) {
+    if (!el)
+        return;
+    if (isPopoverOpen(el))
+        void closePopover(el, { instant: options.instant, returnFocus: options.instant ? true : 'if-lost' });
+    else
+        openPopover(el, options);
+}
+/** Close every open popover under `root` at once (a page leaving, a route change). */
+function closeAllPopovers(root) {
+    root?.querySelectorAll?.(POPOVER_SELECTOR).forEach(el => { if (stateOf(el))
+        void closePopover(el, { instant: true }); });
+}
+function finishClose(el, state, returnFocus) {
+    const doc = el.ownerDocument;
+    const active = doc.activeElement;
+    const lost = !active || active === doc.body || el.contains(active);
+    hideFromTopLayer(el);
+    el.removeAttribute(PopoverAttribute.Open);
+    el.removeAttribute(PopoverAttribute.Instant);
+    cancelExit(el);
+    state.unlockScroll?.();
+    delete el[STATE];
+    const opener = state.opener;
+    if (opener?.isConnected && (returnFocus === true || (returnFocus === 'if-lost' && lost)))
+        opener.focus({ preventScroll: true });
+}
+/** While open: Esc, a press outside, focus leaving, and the page moving under it. */
+function wire(el, state) {
+    const doc = el.ownerDocument;
+    const view = doc.defaultView;
+    const on = (target, type, fn, opts) => {
+        target.addEventListener(type, fn, opts);
+        state.cleanups.push(() => target.removeEventListener(type, fn, opts));
+    };
+    const insideOpener = (n) => !!n && !!el.id && !!n.closest?.(popoverOpenersSelector(el.id));
+    on(doc, 'keydown', e => {
+        if (e.key !== 'Escape')
+            return;
+        e.stopPropagation();
+        void closePopover(el, { instant: true, returnFocus: true });
+    });
+    on(doc, 'pointerdown', e => {
+        const target = e.target;
+        if (!target || el.contains(target) || insideOpener(target))
+            return;
+        void closePopover(el, { returnFocus: 'if-lost' });
+    }, true);
+    on(el, 'focusout', e => {
+        const next = e.relatedTarget;
+        if (!next || el.contains(next) || insideOpener(next))
+            return;
+        void closePopover(el, {});
+    });
+    if (view && !el.hasAttribute(PopoverAttribute.Sheet)) {
+        let frame = 0;
+        const follow = () => {
+            if (frame)
+                return;
+            frame = view.requestAnimationFrame(() => { frame = 0; placePopover(el, state.opener); });
+        };
+        on(view, 'scroll', follow, { capture: true, passive: true });
+        on(view, 'resize', follow, { passive: true });
+        state.cleanups.push(() => { if (frame)
+            view.cancelAnimationFrame(frame); });
+    }
+}
+
+/**
+ * The Popover's LIVE twin on the engine's component path (premium components M5, N4). Directive-host: the panel IS the
+ * host, carrying exactly the markup the string renderer writes — `data-iox-popover`, `popover="manual"` (closed in the
+ * raw SSR with no script: the browser hides a popover until it is shown), `role="dialog"`, `tabindex="-1"` (focus moves
+ * to the panel on open) and the side the author picked — so ONE runtime (`openPopover` / `closePopover`) treats both
+ * paths alike. Its id and accessible name are the shared `nodeA11yAttributes`, applied by the engine.
+ */
+class IoxPopoverComponent {
+    constructor() {
+        this.nodeId = '';
+        this.placement = 'below';
+    }
+    get side() { return popoverSide(this.placement); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: IoxPopoverComponent, isStandalone: false, selector: "div[iox-popover]", inputs: { nodeId: "nodeId", placement: "placement" }, host: { properties: { "class": "'iox-popover iox-node-' + nodeId", "attr.data-iox-popover": "''", "attr.popover": "'manual'", "attr.role": "'dialog'", "attr.tabindex": "'-1'", "attr.data-iox-popover-placement": "side" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{box-sizing:border-box}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[iox-popover]', template: `<ng-container #childrenHost></ng-container>`, host: {
+                        '[class]': "'iox-popover iox-node-' + nodeId",
+                        '[attr.data-iox-popover]': "''",
+                        '[attr.popover]': "'manual'",
+                        '[attr.role]': "'dialog'",
+                        '[attr.tabindex]': "'-1'",
+                        '[attr.data-iox-popover-placement]': 'side',
+                    }, standalone: false, styles: [":host{box-sizing:border-box}\n"] }]
+        }], propDecorators: { nodeId: [{
+                type: Input
+            }], placement: [{
+                type: Input
+            }], childrenHost: [{
+                type: ViewChild,
+                args: ['childrenHost', { read: ViewContainerRef, static: true }]
+            }] } });
+/** The attributes the string renderer writes on a Popover panel (beside its class, id and name) — the component's host
+ *  bindings, as data, so the two paths cannot drift. */
+function popoverPanelAttributes(placement) {
+    return {
+        [PopoverAttribute.Root]: '',
+        popover: 'manual',
+        role: 'dialog',
+        tabindex: '-1',
+        [PopoverAttribute.Placement]: popoverSide(typeof placement === 'string' ? placement : null),
+    };
+}
+
 const escapeHtml = (v) => v.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 /**
  * `iox-video` — the Video's ONE component (CC3, board 5), like the Gallery's: the builder canvas, the admin's Preview
@@ -7338,6 +8250,7 @@ const COMPONENTS = [
     IoxFormSuccessComponent,
     IoxFormErrorComponent,
     IoxDialogComponent,
+    IoxPopoverComponent,
 ];
 class IoxBuilderComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxBuilderComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -7366,7 +8279,8 @@ class IoxBuilderComponentsModule {
             IoxSubmitButtonComponent,
             IoxFormSuccessComponent,
             IoxFormErrorComponent,
-            IoxDialogComponent], imports: [CommonModule], exports: [BuilderImageComponent,
+            IoxDialogComponent,
+            IoxPopoverComponent], imports: [CommonModule], exports: [BuilderImageComponent,
             BuilderSpacerComponent,
             CardComponent,
             BuilderDividerComponent,
@@ -7391,7 +8305,8 @@ class IoxBuilderComponentsModule {
             IoxSubmitButtonComponent,
             IoxFormSuccessComponent,
             IoxFormErrorComponent,
-            IoxDialogComponent] }); }
+            IoxDialogComponent,
+            IoxPopoverComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxBuilderComponentsModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxBuilderComponentsModule, decorators: [{
@@ -7449,6 +8364,8 @@ class IoxComponentRegistryService {
             // Dialog (DS2) — the live <dialog> twin, so a page holding one no longer falls back to
             // the string renderer.
             ['Dialog', IoxDialogComponent],
+            // Popover (premium M5) — the anchored, non-modal panel; its runtime is the shared popover.runtime.
+            ['Popover', IoxPopoverComponent],
             // Video (CC3) — one component for the canvas (poster only), Preview and the live site.
             ['Video', IoxVideoComponent],
         ]);
@@ -7771,6 +8688,170 @@ function isCurrentLink(href, currentPath, options = {}) {
     return !!options.prefix && target !== '' && here.startsWith(`${target}/`);
 }
 
+/**
+ * A header that HIDES (premium components T2, M4): it steps aside while the page scrolls down and comes back the moment
+ * it scrolls up — ONE runtime for the live site (the window's scroll) and the builder canvas (its Lenis scroll, handed in
+ * through `update`). It never moves while the visitor is inside it: keyboard focus in the header, or its own drawer
+ * open, keeps it in place, and it is always there at the top of the page.
+ *
+ * Motion (Emil 30/41/52/59/192): `translate` only, from the live value (a run interrupted by a change of direction turns
+ * back from where it is — never stacked); the exit is faster than the return (dur-fast out, dur-ui back, on the look's
+ * standard easing — the tokens collapse with the look's motion); under reduced motion it fades in place (opacity, no
+ * movement — gentler, not zero), and is not clickable while faded. The return RELEASES (no inline frame is left), the
+ * hidden frame is held, as every exit in the product (M2's settle rule).
+ *
+ * A header that only STAYS needs no runtime: the shared CSS keeps it at the top (`iox-design.css`).
+ */
+/** Page px the scroll must travel in one direction before the header answers — past a trackpad's jitter. */
+const HEADER_SCROLL_HYSTERESIS_PX = 6;
+const FALLBACK_HIDE_MS = 150;
+const FALLBACK_SHOW_MS = 200;
+const FALLBACK_EASING = 'ease-out';
+const HIDE_DURATION_TOKEN = '--iox-dur-fast';
+const SHOW_DURATION_TOKEN = '--iox-dur-ui';
+const EASING_TOKEN = '--iox-ease-standard';
+const SUPPORTED_EASING = /^(linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier\(.+\)|linear\(.+\)|steps\(.+\))$/;
+const OPEN_DIALOG = 'dialog[open]';
+/** `120ms` / `0.2s` → milliseconds; anything else → null. */
+function durationMs(value) {
+    const m = /^(-?\d*\.?\d+)(ms|s)$/.exec(String(value ?? '').trim());
+    if (!m)
+        return null;
+    const n = Number(m[1]) * (m[2] === 's' ? 1000 : 1);
+    return Number.isFinite(n) && n >= 0 ? n : null;
+}
+/**
+ * Whether a hiding header should step aside now: the page moved DOWN past the header's own height, the header is not
+ * held (focus inside, its drawer open). Pure: the direction and the offsets come from the caller.
+ */
+function headerShouldHide(offset, delta, headerHeight, held) {
+    if (held || !(delta > 0))
+        return false;
+    return offset > Math.max(0, headerHeight);
+}
+class HeaderRuntime {
+    constructor(header, options = {}) {
+        this.header = header;
+        this.options = options;
+        this.lastOffset = 0;
+        this.hidden = false;
+        this.height = 0;
+        this.anim = null;
+        this.onFocusIn = () => this.setHidden(false);
+        const view = header.ownerDocument?.defaultView;
+        this.height = header.offsetHeight;
+        this.resize = view?.ResizeObserver ? new view.ResizeObserver(() => { this.height = this.header.offsetHeight; }) : null;
+        this.resize?.observe(header);
+        header.addEventListener('focusin', this.onFocusIn);
+    }
+    /** True while the header has stepped aside. */
+    get isHidden() {
+        return this.hidden;
+    }
+    /** The page now stands at `offset` page px (layout px — the canvas divides out its zoom). */
+    update(offset) {
+        if (!Number.isFinite(offset))
+            return;
+        const delta = offset - this.lastOffset;
+        if (offset <= this.height) {
+            // Its own height from the top: the header is where it belongs, whichever way the page moves.
+            this.lastOffset = offset;
+            this.setHidden(false);
+            return;
+        }
+        if (Math.abs(delta) < HEADER_SCROLL_HYSTERESIS_PX)
+            return;
+        this.lastOffset = offset;
+        this.setHidden(headerShouldHide(offset, delta, this.height, this.held()));
+    }
+    /** Back in place now, with no motion (a page change, the runtime going away). */
+    reset() {
+        this.anim?.cancel();
+        this.anim = null;
+        this.hidden = false;
+        this.header.removeAttribute(HeaderAttribute.Hidden);
+    }
+    destroy() {
+        this.reset();
+        this.resize?.disconnect();
+        this.header.removeEventListener('focusin', this.onFocusIn);
+    }
+    held() {
+        return this.header.matches(':focus-within') || !!this.header.querySelector(OPEN_DIALOG);
+    }
+    setHidden(hidden) {
+        if (hidden === this.hidden)
+            return;
+        this.hidden = hidden;
+        this.header.toggleAttribute(HeaderAttribute.Hidden, hidden);
+        const reduce = prefersReducedMotion(this.options.host ?? this.header.ownerDocument?.defaultView ?? null);
+        const prop = reduce ? 'opacity' : 'translate';
+        const shown = reduce ? '1' : '0px 0px';
+        const away = reduce ? '0' : '0px -100%';
+        const style = this.header.ownerDocument?.defaultView?.getComputedStyle(this.header);
+        // From the live value when a run is in flight (a change of direction mid-way turns back from where it is).
+        const from = this.anim ? (style?.getPropertyValue(prop) || (hidden ? shown : away)) : (hidden ? shown : away);
+        this.anim?.cancel();
+        this.anim = null;
+        if (typeof this.header.animate !== 'function')
+            return;
+        const duration = durationMs(style?.getPropertyValue(hidden ? HIDE_DURATION_TOKEN : SHOW_DURATION_TOKEN)) ?? (hidden ? FALLBACK_HIDE_MS : FALLBACK_SHOW_MS);
+        const easing = style?.getPropertyValue(EASING_TOKEN)?.trim() ?? '';
+        const anim = this.header.animate([{ [prop]: from }, { [prop]: hidden ? away : shown }], {
+            duration, easing: SUPPORTED_EASING.test(easing) ? easing : FALLBACK_EASING, fill: hidden ? 'forwards' : 'none',
+        });
+        this.anim = anim;
+        if (!hidden)
+            anim.finished?.then(() => { if (this.anim === anim) {
+                anim.cancel();
+                this.anim = null;
+            } }).catch(() => { });
+    }
+}
+const HIDING_SELECTOR = `[${HeaderAttribute.Behaviour}="${HeaderBehaviour.Hides}"]`;
+/** The headers that hide while the page scrolls down: in `root`, or among `elements` (each, and what it holds — what a
+ *  runtime instance owns: the page's nodes or the globals'). */
+function hidingHeadersIn(root) {
+    if (typeof root.querySelectorAll === 'function')
+        return Array.from(root.querySelectorAll(HIDING_SELECTOR));
+    const out = new Set();
+    for (const el of root) {
+        if (el.matches?.(HIDING_SELECTOR))
+            out.add(el);
+        el.querySelectorAll?.(HIDING_SELECTOR).forEach(h => out.add(h));
+    }
+    return [...out];
+}
+/**
+ * The live site's door: every hiding header in `root` (or among `elements`) follows `source` (the window), through ONE
+ * passive listener read once per frame. Returns the stop.
+ */
+function watchHeaders(source, root, options = {}) {
+    const runtimes = hidingHeadersIn(root).map(el => new HeaderRuntime(el, options));
+    if (!runtimes.length)
+        return () => { };
+    let frame = 0;
+    const raf = typeof requestAnimationFrame === 'function' ? requestAnimationFrame : (fn) => setTimeout(() => fn(0), 16);
+    const caf = typeof cancelAnimationFrame === 'function' ? cancelAnimationFrame : (id) => clearTimeout(id);
+    const sync = () => {
+        frame = 0;
+        const offset = source.scrollY ?? source.scrollTop ?? 0;
+        for (const r of runtimes)
+            r.update(offset);
+    };
+    const onScroll = () => { if (!frame)
+        frame = raf(sync); };
+    source.addEventListener('scroll', onScroll, { passive: true });
+    sync();
+    return () => {
+        source.removeEventListener('scroll', onScroll);
+        if (frame)
+            caf(frame);
+        for (const r of runtimes)
+            r.destroy();
+    };
+}
+
 /**
  * The accessibility attributes a node renders (CC1: N2 current page, N3 dialog openers, N4 a drawer
  * that closes when the window widens, N6 accessible names). ONE function decides them and every
@@ -7782,13 +8863,18 @@ function isCurrentLink(href, currentPath, options = {}) {
 const DECORATIVE_TYPES = ['Icon'];
 const DIALOG_NODE_TYPE = 'Dialog';
 /** Named for assistive technology, but never an icon-only CONTROL the audit should flag: a Dialog, a carousel. */
-const NAME_NOT_REQUIRED_TYPES = [DIALOG_NODE_TYPE, 'SliderContainer'];
+const NAME_NOT_REQUIRED_TYPES = [DIALOG_NODE_TYPE, POPOVER_NODE_TYPE, 'SliderContainer'];
+/** The side a tooltip takes when its node names none — written to nothing (the runtime's default). */
+const TOOLTIP_DEFAULT_SIDE = 'above';
+const TOOLTIP_SIDES = ['above', 'below', 'start', 'end'];
 const SLIDER_PAUSE_ROLE = 'slider.pause';
 /** A Segmented control's root (CC4b) is a radio group that must be named (board 10: an empty name is an audit
  *  finding). The main entry does not import composite-core, so the role is spelled here — a11y spec pins it. */
 const NAMED_GROUP_ROLES = ['segmented'];
 /** Carries the min-width (px) at which an open dialog closes itself; the engine listens on it. */
 const DIALOG_CLOSE_ABOVE_ATTRIBUTE = 'data-iox-dialog-close-above';
+/** A slide's caption (premium M4, T3): the Slider's Caption part shows the caption of the slide in view. */
+const SLIDE_CAPTION_ATTRIBUTE = 'data-iox-caption';
 var A11yAttribute;
 (function (A11yAttribute) {
     A11yAttribute["Label"] = "aria-label";
@@ -7800,6 +8886,8 @@ var A11yAttribute;
 const MANAGED_A11Y_ATTRIBUTES = [
     A11yAttribute.Label, A11yAttribute.Hidden, A11yAttribute.Current, A11yAttribute.Id,
     'aria-haspopup', 'aria-expanded', 'aria-controls', DIALOG_CLOSE_ABOVE_ATTRIBUTE,
+    HeaderAttribute.Behaviour, HeaderAttribute.Edge, SLIDE_CAPTION_ATTRIBUTE,
+    TOOLTIP_ATTRIBUTE, TOOLTIP_PLACEMENT_ATTRIBUTE,
 ];
 /** A content trait's value from `props` (serialized) or `traits[]` (builder). */
 function nodeTraitValue(node, name) {
@@ -7835,7 +8923,15 @@ function nodeA11yAttributes(node, ctx = {}) {
     if (CURRENT_LINK_TYPES.includes(node.type) && isCurrentLink(ctx.href, ctx.currentPath, ctx.currentLink)) {
         out[A11yAttribute.Current] = ARIA_CURRENT_PAGE;
     }
-    Object.assign(out, dialogOpenerAttributes(node));
+    // A dialog opener wins over a popover opener (one aria-controls); a node opening neither gets neither.
+    const opener = dialogOpenerAttributes(node);
+    Object.assign(out, Object.keys(opener).length ? opener : popoverOpenerAttributes(node));
+    Object.assign(out, tooltipAttributes(node, !!name));
+    if (node.type === POPOVER_NODE_TYPE) {
+        const id = node.styleId ?? node.id;
+        if (id)
+            out[A11yAttribute.Id] = popoverDomId(id);
+    }
     if (node.type === DIALOG_NODE_TYPE) {
         const id = node.styleId ?? node.id;
         if (id)
@@ -7844,6 +8940,35 @@ function nodeA11yAttributes(node, ctx = {}) {
         if (minWidth !== null)
             out[DIALOG_CLOSE_ABOVE_ATTRIBUTE] = String(minWidth);
     }
+    // T2 (M4): how a header behaves as the page scrolls — the shared CSS and the header runtime read these.
+    Object.assign(out, headerAttributes(nodeTraitValue(node, HeaderTrait.Behaviour), nodeTraitValue(node, HeaderTrait.Edge)));
+    if (node.type === SLIDE_TYPE) {
+        const caption = trimmed$1(nodeTraitValue(node, SLIDE_CAPTION_TRAIT));
+        if (caption)
+            out[SLIDE_CAPTION_ATTRIBUTE] = caption;
+    }
+    return out;
+}
+/** The node's tooltip words (premium M5), trimmed, or '' — only on the types that carry one. */
+function tooltipWords(node) {
+    return node?.type && TOOLTIP_TYPES.includes(node.type) ? trimmed$1(nodeTraitValue(node, A11yTrait.Tooltip)) : '';
+}
+/**
+ * A tooltip's attributes: its words and its side for the runtime, and — on a control that shows only an icon and has no
+ * Accessible name — the words as its `aria-label` too: the tooltip IS its name there (WCAG 4.1.2), and the runtime then
+ * skips the description so it is not read twice. A control with words of its own keeps them as its name (2.5.3) and is
+ * DESCRIBED by the tooltip.
+ */
+function tooltipAttributes(node, named) {
+    const words = tooltipWords(node);
+    if (!words)
+        return {};
+    const out = { [TOOLTIP_ATTRIBUTE]: words };
+    const side = trimmed$1(nodeTraitValue(node, A11yTrait.TooltipPlacement));
+    if (side && side !== TOOLTIP_DEFAULT_SIDE && TOOLTIP_SIDES.includes(side))
+        out[TOOLTIP_PLACEMENT_ATTRIBUTE] = side;
+    if (!named && iconOnly(node))
+        out[A11yAttribute.Label] = words;
     return out;
 }
 /** The attributes as an HTML string fragment (` name="value"`…) for a string renderer. */
@@ -7887,8 +9012,12 @@ function needsAccessibleName(node) {
     // A Slider's pause control is named by its runtime ("Stop / Start automatic slide show", CC3).
     if (node.role === SLIDER_PAUSE_ROLE)
         return false;
-    if (trimmed$1(nodeTraitValue(node, A11yTrait.AccessibleName)))
+    if (trimmed$1(nodeTraitValue(node, A11yTrait.AccessibleName)) || tooltipWords(node))
         return false;
+    return iconOnly(node);
+}
+/** True when the node shows an icon and no words of its own (scanning what it holds). */
+function iconOnly(node) {
     const acc = { words: false, icon: false };
     scanNames(node, acc);
     return acc.icon && !acc.words;
@@ -10226,7 +11355,7 @@ class StringFormRuntime {
         this.apply(response);
     }
     apply(response) {
-        const outcome = submitOutcome(response);
+        const outcome = submitOutcome(response, this.form.getAttribute(FORM_AFTER_SEND_ATTRIBUTE));
         this.setRenderState(outcome.state);
         if (outcome.errors) {
             this.state = { ...this.state, submitted: true, submitting: false, errors: { ...outcome.errors } };
@@ -10242,6 +11371,8 @@ class StringFormRuntime {
         this.form.reset();
         this.state = resetFormState();
         this.render();
+        if (outcome.toast)
+            raiseFormToast(this.form);
         if (outcome.redirect)
             this.options.navigate?.(outcome.redirect);
     }
@@ -10375,6 +11506,342 @@ function attachStringForm(form, options = {}) {
     return spec ? new StringFormRuntime(form, spec, options) : null;
 }
 
+/**
+ * THE TOOLTIP (premium components M5, N4) — words for a control that has none of its own (an icon button, a gallery
+ * arrow). ONE DOM runtime for the live site (both engine paths) and the builder canvas; the trigger carries what the
+ * shared `nodeA11yAttributes` rendered (`data-iox-tooltip`, `data-iox-tooltip-placement`), so the raw SSR already says it.
+ *
+ * - Shows on HOVER for a mouse or a pen (never a finger — a tap is not a hover) and on KEYBOARD focus
+ *   (`:focus-visible`), never on a tap. A press, Esc, a scroll or leaving hides it.
+ * - The first waits (`TOOLTIP_FIRST_DELAY_MS`); while one is open, or within `TOOLTIP_WARM_MS` of one closing, the next
+ *   opens AT ONCE with no motion (Emil 125). Keyboard focus opens at once, with no motion (Emil 2).
+ * - Grows from its trigger (the origin `placeFloating` gives, Emil 47/124); leaves faster than it came (Emil 30).
+ * - Hoverable and dismissible (WCAG 1.4.13): the pointer may move onto it; Esc hides it until the pointer or focus
+ *   leaves the trigger.
+ * - `aria-describedby` points at it while it is shown — unless the tooltip IS the control's name (an icon-only control:
+ *   `nodeA11yAttributes` already made the words its `aria-label`; describing it twice would read it twice).
+ */
+/** On the drawn tooltip while it appears or moves with no motion (a neighbour, keyboard focus). */
+const TOOLTIP_INSTANT_ATTRIBUTE = 'data-iox-instant';
+/** On a trigger whose tooltip the builder canvas holds open (the design-time "Showing on canvas" state). */
+const TOOLTIP_PINNED_ATTRIBUTE = 'data-iox-tooltip-pinned';
+/** The side the drawn tooltip ended on (after a flip) — the shared CSS reads it for nothing but the e2e reads it. */
+const TOOLTIP_SIDE_ATTRIBUTE = 'data-iox-side';
+var TooltipClass;
+(function (TooltipClass) {
+    TooltipClass["Tip"] = "iox-tooltip";
+    /** The element style's marker — set when the trigger wears the design system (a legacy page keeps the literals). */
+    TooltipClass["Marker"] = "iox-es-tooltip";
+})(TooltipClass || (TooltipClass = {}));
+/** The FIRST tooltip waits this long under a resting pointer (Emil 125: the first waits, the next does not). */
+const TOOLTIP_FIRST_DELAY_MS = 500;
+/** A tooltip opened within this window of another closing opens at once — moving along a row of icons. */
+const TOOLTIP_WARM_MS = 300;
+/** Leaving the trigger hides after this grace, so the pointer can cross onto the tooltip (WCAG 1.4.13 hoverable). */
+const TOOLTIP_HIDE_GRACE_MS = 100;
+/** The marker of a node wearing the design system (DS2.1): a floating element raised from it wears the look. */
+const DESIGN_MARKER = '.iox-es';
+/** How long before a tooltip shows, and whether it shows with no motion. Pure — the runtime asks it on every hover. */
+function tooltipTiming(state, now, firstDelayMs = TOOLTIP_FIRST_DELAY_MS, warmMs = TOOLTIP_WARM_MS) {
+    const warm = state.open || (state.lastClosedAt !== null && now - state.lastClosedAt <= warmMs);
+    return warm ? { delayMs: 0, instant: true } : { delayMs: firstDelayMs, instant: false };
+}
+/** The side a trigger asks for (Above when it names none, or names something else). */
+function tooltipSide(value) {
+    return Object.values(FloatingSide).includes(String(value)) ? value : FloatingSide.Above;
+}
+const RUNTIME = '__ioxTooltips';
+let tipSeq = 0;
+const words = (el) => (el?.getAttribute(TOOLTIP_ATTRIBUTE) ?? '').trim();
+/** Keyboard focus (`:focus-visible`); an engine that cannot answer is treated as keyboard focus — a tooltip too many
+ *  beats a keyboard user with none. */
+const focusVisible = (el) => {
+    try {
+        return el.matches(':focus-visible');
+    }
+    catch {
+        return true;
+    }
+};
+/** The runtime over one root (the document on the site, the page's frame on the canvas). Built by `attachTooltips`. */
+class TooltipRuntime {
+    constructor(root, options = {}) {
+        this.root = root;
+        this.options = options;
+        this.tip = null;
+        this.trigger = null;
+        this.pinned = null;
+        this.pinWatch = null;
+        this.suppressed = null;
+        this.showTimer = null;
+        this.hideTimer = null;
+        this.lastClosedAt = null;
+        this.exiting = false;
+        this.listeners = [];
+        const doc = this.doc;
+        this.listen(root, 'pointerover', e => this.onPointerOver(e));
+        this.listen(root, 'pointerout', e => this.onPointerOut(e));
+        this.listen(root, 'focusin', e => this.onFocusIn(e));
+        this.listen(root, 'focusout', e => this.onFocusOut(e));
+        this.listen(root, 'pointerdown', () => this.dismiss(), true);
+        this.listen(doc, 'keydown', e => { if (e.key === 'Escape')
+            this.escape(); });
+        if (doc.defaultView)
+            this.listen(doc.defaultView, 'scroll', () => this.onScroll(), { capture: true, passive: true });
+        root[RUNTIME] = this;
+    }
+    /** The trigger whose tooltip is shown, or null. */
+    get shownFor() { return this.tip && !this.tip.hidden && !this.exiting ? this.trigger : null; }
+    /** The drawn tooltip (created on first show). */
+    get element() { return this.tip; }
+    /** Show the trigger's tooltip now. `instant` skips the entrance (a neighbour, keyboard focus, the canvas pin). */
+    show(trigger, instant = false) {
+        const text = words(trigger);
+        if (!text)
+            return;
+        this.clearTimers();
+        const tip = this.ensureTip(trigger);
+        if (this.trigger && this.trigger !== trigger)
+            this.describe(this.trigger, false);
+        this.trigger = trigger;
+        if (this.exiting) {
+            this.exiting = false;
+            cancelExit(tip);
+        }
+        tip.textContent = text;
+        tip.classList.toggle(TooltipClass.Marker, !!trigger.closest(DESIGN_MARKER));
+        tip.toggleAttribute(TOOLTIP_INSTANT_ATTRIBUTE, instant);
+        tip.hidden = false;
+        this.place(trigger, tip);
+        this.describe(trigger, true);
+    }
+    /** Hide it — with its exit, or `immediate`ly (a press, Esc, a scroll, keyboard focus leaving). */
+    hide(immediate = false) {
+        this.clearTimers();
+        const tip = this.tip;
+        const trigger = this.trigger;
+        if (!tip || tip.hidden || this.exiting)
+            return;
+        if (trigger === this.pinned)
+            return;
+        if (trigger)
+            this.describe(trigger, false);
+        this.lastClosedAt = this.now();
+        const animate = !immediate && !tip.hasAttribute(TOOLTIP_INSTANT_ATTRIBUTE) && motionAllowed(this.doc.defaultView);
+        this.exiting = true;
+        void runExitMotion(tip, { animate }).then(done => {
+            if (!done || !this.exiting)
+                return;
+            this.exiting = false;
+            tip.hidden = true;
+            cancelExit(tip);
+            this.trigger = null;
+        });
+    }
+    /** The builder canvas's design-time state: hold the trigger's tooltip open (true) or let it go (false). */
+    pin(trigger, on) {
+        if (on) {
+            this.pinned = trigger;
+            trigger.setAttribute(TOOLTIP_PINNED_ATTRIBUTE, '');
+            this.show(trigger, true);
+            // The author edits its words or side while it is held up: it follows at once.
+            this.pinWatch?.disconnect();
+            const View = this.doc.defaultView;
+            if (View?.MutationObserver) {
+                this.pinWatch = new View.MutationObserver(() => { if (this.pinned === trigger)
+                    this.show(trigger, true); });
+                this.pinWatch.observe(trigger, { attributes: true, attributeFilter: [TOOLTIP_ATTRIBUTE, TOOLTIP_PLACEMENT_ATTRIBUTE] });
+            }
+            return;
+        }
+        trigger.removeAttribute(TOOLTIP_PINNED_ATTRIBUTE);
+        if (this.pinned === trigger) {
+            this.pinned = null;
+            this.pinWatch?.disconnect();
+            this.pinWatch = null;
+        }
+        if (this.trigger === trigger)
+            this.hide(true);
+    }
+    /** Place the shown tooltip again (the trigger moved — the canvas re-laid out). */
+    reposition() {
+        if (this.tip && this.trigger && !this.tip.hidden)
+            this.place(this.trigger, this.tip);
+    }
+    destroy() {
+        this.clearTimers();
+        this.pinWatch?.disconnect();
+        for (const [target, type, fn, opts] of this.listeners)
+            target.removeEventListener(type, fn, opts);
+        this.listeners.length = 0;
+        if (this.trigger)
+            this.describe(this.trigger, false);
+        this.tip?.remove();
+        this.tip = null;
+        delete this.root[RUNTIME];
+    }
+    get doc() {
+        return this.root.nodeType === 9 ? this.root : this.root.ownerDocument;
+    }
+    now() {
+        return this.options.now?.() ?? (this.doc.defaultView?.performance?.now() ?? Date.now());
+    }
+    triggerOf(target) {
+        const el = target?.closest?.(`[${TOOLTIP_ATTRIBUTE}]`);
+        return el && words(el) ? el : null;
+    }
+    onPointerOver(e) {
+        const trigger = this.triggerOf(e.target);
+        if (this.tip && e.target && this.tip.contains(e.target)) {
+            this.cancelHide();
+            return;
+        }
+        if (!trigger || !isHoverPointer(e) || trigger === this.suppressed)
+            return;
+        if (trigger === this.shownFor) {
+            this.cancelHide();
+            return;
+        }
+        const timing = tooltipTiming({ open: !!this.shownFor, lastClosedAt: this.lastClosedAt }, this.now());
+        this.clearTimers();
+        if (timing.delayMs <= 0) {
+            this.show(trigger, timing.instant);
+            return;
+        }
+        this.showTimer = setTimeout(() => { this.showTimer = null; this.show(trigger, timing.instant); }, timing.delayMs);
+    }
+    onPointerOut(e) {
+        const from = this.triggerOf(e.target) ?? (this.tip && this.tip.contains(e.target) ? this.trigger : null);
+        if (!from)
+            return;
+        const to = e.relatedTarget;
+        if (to && (from.contains(to) || this.tip?.contains(to)))
+            return;
+        if (from === this.suppressed)
+            this.suppressed = null;
+        if (this.showTimer) {
+            clearTimeout(this.showTimer);
+            this.showTimer = null;
+        }
+        if (this.shownFor !== from)
+            return;
+        this.cancelHide();
+        this.hideTimer = setTimeout(() => { this.hideTimer = null; this.hide(); }, TOOLTIP_HIDE_GRACE_MS);
+    }
+    onFocusIn(e) {
+        const trigger = this.triggerOf(e.target);
+        if (!trigger || trigger !== e.target || !focusVisible(trigger))
+            return;
+        this.show(trigger, true);
+    }
+    onFocusOut(e) {
+        const trigger = this.triggerOf(e.target);
+        if (!trigger)
+            return;
+        if (trigger === this.suppressed)
+            this.suppressed = null;
+        if (trigger === this.shownFor)
+            this.hide(true);
+    }
+    escape() {
+        if (!this.shownFor || this.shownFor === this.pinned)
+            return;
+        this.suppressed = this.shownFor;
+        this.hide(true);
+    }
+    /** A scroll hides a hover / focus tooltip (it would float away from its trigger); a pinned one follows it. */
+    onScroll() {
+        if (this.pinned && this.shownFor === this.pinned) {
+            this.reposition();
+            return;
+        }
+        this.dismiss();
+    }
+    /** A press, a scroll: gone at once (and a pending one never shows). */
+    dismiss() {
+        if (this.showTimer) {
+            clearTimeout(this.showTimer);
+            this.showTimer = null;
+        }
+        if (this.shownFor && this.shownFor !== this.pinned)
+            this.hide(true);
+    }
+    cancelHide() {
+        if (this.hideTimer) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+        }
+    }
+    clearTimers() {
+        if (this.showTimer) {
+            clearTimeout(this.showTimer);
+            this.showTimer = null;
+        }
+        this.cancelHide();
+    }
+    /** The drawn tooltip, in the layer of the trigger's scope (a lightbox's arrow → the lightbox's own layer). */
+    ensureTip(trigger) {
+        const scope = floatingScope(trigger, this.options);
+        const layer = scope ? floatingLayer(scope, this.options) : null;
+        if (!this.tip) {
+            const tip = this.doc.createElement('div');
+            tip.className = TooltipClass.Tip;
+            tip.id = `iox-tooltip-${++tipSeq}`;
+            tip.setAttribute('role', 'tooltip');
+            tip.hidden = true;
+            // The tooltip lives in the floating layer, outside the root the runtime listens on: crossing onto it and
+            // leaving it are heard on the tooltip itself (WCAG 1.4.13 hoverable).
+            this.listen(tip, 'pointerenter', () => this.cancelHide());
+            this.listen(tip, 'pointerleave', e => this.onPointerOut(e));
+            this.tip = tip;
+        }
+        if (layer && this.tip.parentElement !== layer)
+            layer.appendChild(this.tip);
+        return this.tip;
+    }
+    /** Where it goes: the side the trigger asks for (flipped when there is no room), centred on it, inside the layer. */
+    place(trigger, tip) {
+        const layer = tip.parentElement;
+        if (!layer)
+            return;
+        const frame = layerFrame(layer);
+        const rtl = this.doc.defaultView?.getComputedStyle(trigger).direction === 'rtl';
+        const spot = placeFloating(rectInLayer(trigger, frame), { width: tip.offsetWidth, height: tip.offsetHeight }, frame.viewport, { side: tooltipSide(trigger.getAttribute(TOOLTIP_PLACEMENT_ATTRIBUTE)), align: FloatingAlign.Center, rtl });
+        tip.style.top = `${spot.top}px`;
+        tip.style.left = `${spot.left}px`;
+        tip.style.transformOrigin = spot.origin;
+        tip.setAttribute(TOOLTIP_SIDE_ATTRIBUTE, spot.side);
+    }
+    /** Point the trigger's description at the tooltip — unless the tooltip is already its name. */
+    describe(trigger, on) {
+        const id = this.tip?.id;
+        if (!id)
+            return;
+        const ids = (trigger.getAttribute('aria-describedby') ?? '').split(/\s+/).filter(x => x && x !== id);
+        const isName = (trigger.getAttribute('aria-label') ?? '').trim() === words(trigger);
+        if (on && !isName)
+            ids.push(id);
+        if (ids.length)
+            trigger.setAttribute('aria-describedby', ids.join(' '));
+        else
+            trigger.removeAttribute('aria-describedby');
+    }
+    listen(target, type, fn, opts) {
+        target.addEventListener(type, fn, opts);
+        this.listeners.push([target, type, fn, opts]);
+    }
+}
+/** The runtime already running over `root`, if any. */
+function tooltipsOf(root) {
+    return root?.[RUNTIME] ?? null;
+}
+/** Run tooltips over `root` — once: a root already running is returned as is. */
+function attachTooltips(root, options = {}) {
+    if (!root)
+        return null;
+    return tooltipsOf(root) ?? new TooltipRuntime(root, options);
+}
+
 /*
  * Public API Surface of iox-ui
  */
@@ -10383,5 +11850,5 @@ function attachStringForm(form, options = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { A11yAttribute, A11yTrait, ACCESSIBLE_NAME_TYPES, AOSService, ARIA_CURRENT_PAGE, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CALENDAR_CLOSING_ATTRIBUTE, CALENDAR_DESIGN_ATTRIBUTE, CALENDAR_INSTANT_ATTRIBUTE, CALENDAR_SHEET_QUERY, COMPONENT_STATE_SELECTOR, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CURRENT_LINK_TYPES, CalendarClass, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ComponentState, ContainerComponent, ContextStore, DECORATIVE_TYPES, DEFAULT_GALLERY_SCHEDULER, DEFAULT_INTERACTION_EASING, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DIALOG_CLOSE_ABOVE_ATTRIBUTE, DIALOG_NODE_TYPE, DatePickerRuntime, DeclarationContext, EASING_KEYWORDS, EASING_TOKENS, ENTRANCE_ACTION_TYPES, ENTRANCE_FALLBACK_CSS, ENTRANCE_NOSCRIPT_CSS, ENTRANCE_PRESTATE_ATTRIBUTE, EXIT_ACTION_TYPES, EasingKeyword, EasingToken, FLOATING_GAP, FLOATING_MARGIN, FloatingSide, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION_TRAITS, HOVER_MEDIA_QUERY, HOVER_STATES, INTERACTION_ANIMATION_ID, INTERACTION_HIDDEN_ATTRIBUTE, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxDialogComponent, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, IoxVideoComponent, LAST_EMITTED_STATES, LEGACY_DIRECTION_KEY, LEGACY_HOVER_TRANSITION_TRAITS, LEGACY_SWIPER_CONTROLS, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, NAMED_GROUP_ROLES, NO_PAGE_TRANSITION, ON_STATE_ROLES, OUTER_STYLE_PROPS, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PART_PAGINATION_MODIFIER, PHONE_TRANSITION_QUERY, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, PointerKind, REDUCED_MOTION_QUERY, RELATIONAL_STATE_PSEUDO, RevealActionType, SCROLLED_ATTRIBUTE, SCROLLED_STATE_ROLE, SCROLLED_THRESHOLD_PX, SCROLL_EASINGS, SELF_PLAYING_TRIGGERS, SHAKE_DURATION_MS, SHAKE_EASING, SHAKE_KEYFRAMES, SLIDER_INPUTS_ATTRIBUTE, SLIDER_INPUT_NAMES, STATE_PSEUDO_CLASS, STRUCTURAL_STATES, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SWIPER_TRIGGER_EVENTS, ScrollEasing, SectionComponent, SettleMode, StringFormRuntime, SwiperModuleName, TARGETED_STATE_SUFFIX, TEXT_ALIGN_KEY, TEXT_DIRECTION_KEY, TRANSITION_FEELS, TRANSITION_PROPERTY_KEY, TextAlign, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, VisibilityActionType, activeActions, animateAction, applyBindingPipes, applyFeel, attachDatePicker, attachDatePickers, attachStringForm, bootSlider, breakpointDef, breakpointForWidth, breakpointQueryFor, buildInteractionKeyframes, buildPartSelector, buildSwiperBreakpoints, buildTargetedStateSelector, buildTargetedSuffixSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, closeAboveMediaQuery, collectContextSlotKeys, compileDeclarations, compilePageStyle, componentStatesFor, composeVirtualTraits, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, datePickerOf, declaredInputNames, decomposeBackdropFilter, defaultHoverTransitionTraits, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, domHasSliderParts, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, entranceStartsHidden, feelFor, fieldLanguage, finalKeyframe, framesFromLiveValue, gateHoverRule, getSeoValue, hasHoverState, hasOwnPageTransition, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isCubicBezier, isCurrentLink, isEasingToken, isExternalOrFragment, isGradientPaint, isHoverPointer, isHoverState, isInputOverriddenAt, isInteractionEasing, isLastEmittedStateKey, isOverriddenAt, isPressFeedback, isScrolled, isStructuralState, isValidSlotKey, isWholeBackdropSet, keyframePropertyName, keyframeStyleEntries, legacyEnterToTransition, mediaQueryFor, mergeSwiperBreakpoints, migrateLegacyDirection, migrateLegacyTextAlign, motionAllowed, nearestCommonAncestorId, needsAccessibleName, needsGroupName, nodeA11yAttributes, nodeCssId, nodeTraitValue, nodeUsesContext, normalizeAppPath, normalizeGalleryImage, normalizeIconClass, orderStatesForEmit, pageTransitionOf, parentBreakpoint, parseUrlList, partClassName, placeFloating, planPartRule, planResponsiveRules, planScroll, planStateRule, planSwiperOptions, playDualLayerTransition, playInteraction, prefersReducedMotion, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolveInteractionEasing, resolvePageTransition, resolvePath, resolveSeo, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setDateFieldValue, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, settleInteraction, settleModeFor, shakeElement, showCalendarDesign, sliderControlElements, sliderInputsFromProps, sliderInputsOf, splitOuterProps, splitPressFeedback, stateNamesIn, statePseudoClass, stateSelectorSuffix, stateTransitionProperties, stringFormRuntimeOf, stripSuppressedProps, swiperAutoplayAllowed, swiperLoopOptions, swiperModuleNames, syncNodeA11yAttributes, syncSubmitButtons, targetedStateSelector, transitionPropertyList, viewportTransitionContext, watchScrolled, withContextSlots, withStateTransitions, wrapInBreakpointQuery, wrapInMediaQuery };
+export { A11yAttribute, A11yTrait, ACCESSIBLE_NAME_TYPES, AOSService, ARIA_CURRENT_PAGE, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CALENDAR_CLOSING_ATTRIBUTE, CALENDAR_DESIGN_ATTRIBUTE, CALENDAR_INSTANT_ATTRIBUTE, CALENDAR_SHEET_QUERY, COMPONENT_STATE_SELECTOR, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CURRENT_LINK_TYPES, CalendarClass, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ComponentState, ContainerComponent, ContextStore, DECORATIVE_TYPES, DEFAULT_GALLERY_SCHEDULER, DEFAULT_INTERACTION_EASING, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DIALOG_CLOSE_ABOVE_ATTRIBUTE, DIALOG_NODE_TYPE, DatePickerRuntime, DeclarationContext, EASING_KEYWORDS, EASING_TOKENS, ELEMENT_STYLE_TRANSITION_EXTRAS, ENTRANCE_ACTION_TYPES, ENTRANCE_FALLBACK_CSS, ENTRANCE_NOSCRIPT_CSS, ENTRANCE_PRESTATE_ATTRIBUTE, EXIT_ACTION_TYPES, EasingKeyword, EasingToken, FLOATING_GAP, FLOATING_LAYER_CLASS, FLOATING_MARGIN, FLOATING_SHEET_QUERY, FloatingAlign, FloatingSide, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HEADER_SCROLL_HYSTERESIS_PX, HOVER_DEFAULT_TRANSITION_TRAITS, HOVER_MEDIA_QUERY, HOVER_STATES, HeaderRuntime, INTERACTION_ANIMATION_ID, INTERACTION_HIDDEN_ATTRIBUTE, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxDialogComponent, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxPopoverComponent, IoxSubmitButtonComponent, IoxUiModule, IoxVideoComponent, LAST_EMITTED_STATES, LEGACY_DIRECTION_KEY, LEGACY_HOVER_TRANSITION_TRAITS, LEGACY_SWIPER_CONTROLS, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, NAMED_GROUP_ROLES, NO_PAGE_TRANSITION, ON_STATE_ROLES, OUTER_STYLE_PROPS, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PART_PAGINATION_MODIFIER, PHONE_TRANSITION_QUERY, PIPE_DESCRIPTORS, PIPE_REGISTRY, POPOVER_SELECTOR, PageScrollProvider, PageStyleField, PageStyleSource, PausableTimer, PauseReason, PointerKind, PopoverAttribute, REDUCED_MOTION_QUERY, RELATIONAL_STATE_PSEUDO, RevealActionType, SCROLLED_ATTRIBUTE, SCROLLED_STATE_ROLE, SCROLLED_THRESHOLD_PX, SCROLL_EASINGS, SELF_PLAYING_TRIGGERS, SHAKE_DURATION_MS, SHAKE_EASING, SHAKE_KEYFRAMES, SLIDER_FEEL, SLIDER_INPUTS_ATTRIBUTE, SLIDER_INPUT_NAMES, SLIDER_PHONE_BREAKPOINT, SLIDER_RUNWAY_CLASS, SLIDER_STEPS_PROPERTY, SLIDE_CAPTION_ATTRIBUTE, STATE_PSEUDO_CLASS, STRUCTURAL_STATES, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SWIPER_TRIGGER_EVENTS, ScrollEasing, SectionComponent, SettleMode, StringFormRuntime, SwiperModuleName, TARGETED_STATE_SUFFIX, TEXT_ALIGN_KEY, TEXT_DIRECTION_KEY, TOAST_CLOSE_WORDS, TOAST_DESIGN_ATTRIBUTE, TOAST_EDGE_ATTRIBUTE, TOAST_FIRST_LANDS_MS, TOAST_MAX_MS, TOAST_MAX_VISIBLE, TOAST_MIN_MS, TOAST_MS_PER_CHAR, TOOLTIP_ATTRIBUTE, TOOLTIP_FIRST_DELAY_MS, TOOLTIP_HIDE_GRACE_MS, TOOLTIP_INSTANT_ATTRIBUTE, TOOLTIP_PINNED_ATTRIBUTE, TOOLTIP_PLACEMENT_ATTRIBUTE, TOOLTIP_SIDE_ATTRIBUTE, TOOLTIP_TYPES, TOOLTIP_WARM_MS, TRANSITION_FEELS, TRANSITION_PROPERTY_KEY, TextAlign, TextBlockComponent, ToastClass, ToastEdge, TooltipClass, TooltipRuntime, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, VisibilityActionType, activeActions, animateAction, applyBindingPipes, applyFeel, attachDatePicker, attachDatePickers, attachStringForm, attachTooltips, bootSlider, breakpointDef, breakpointForWidth, breakpointQueryFor, buildInteractionKeyframes, buildPartSelector, buildSwiperBreakpoints, buildTargetedStateSelector, buildTargetedSuffixSelector, buildTransitionTimeline, canPopover, cascadeChain, clearInputOverride, clearOverride, clearToasts, closeAboveMediaQuery, closeAllPopovers, closePopover, collectContextSlotKeys, compileDeclarations, compilePageStyle, componentStatesFor, composeVirtualTraits, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, datePickerOf, declaredInputNames, decomposeBackdropFilter, defaultHoverTransitionTraits, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, domHasSliderParts, durationMs, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, entranceStartsHidden, feelFor, fieldLanguage, finalKeyframe, floatingLayer, floatingScope, formSentWords, formToastsOnSend, framesFromLiveValue, gateHoverRule, getSeoValue, hasHoverState, hasOwnPageTransition, hasOwnTransition, headerShouldHide, hideFromTopLayer, hidingHeadersIn, initialSlotValues, isActionEnabled, isContextAction, isCubicBezier, isCurrentLink, isEasingToken, isExternalOrFragment, isGradientPaint, isHoverPointer, isHoverState, isInputOverriddenAt, isInteractionEasing, isLastEmittedStateKey, isOpenPopover, isOverriddenAt, isPopoverOpen, isPressFeedback, isScrolled, isStructuralState, isValidSlotKey, isWholeBackdropSet, keyframePropertyName, keyframeStyleEntries, layerFrame, legacyEnterToTransition, mediaQueryFor, mergeSwiperBreakpoints, migrateLegacyDirection, migrateLegacyTextAlign, motionAllowed, nearestCommonAncestorId, needsAccessibleName, needsGroupName, nodeA11yAttributes, nodeCssId, nodeTraitValue, nodeUsesContext, normalizeAppPath, normalizeGalleryImage, normalizeIconClass, openPopover, orderStatesForEmit, pageTransitionOf, parentBreakpoint, parseUrlList, partClassName, placeFloating, placePopover, planPartRule, planResponsiveRules, planScroll, planStateRule, planSwiperOptions, playDualLayerTransition, playInteraction, popoverPanelAttributes, popoverSide, prefersReducedMotion, raiseFloatingLayer, raiseFormToast, rectInLayer, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolveInteractionEasing, resolvePageTransition, resolvePath, resolveSeo, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setDateFieldValue, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, settleInteraction, settleModeFor, shakeElement, showCalendarDesign, showInTopLayer, showToast, showToastDesign, sliderControlElements, sliderInputsFromProps, sliderInputsOf, sliderRunwayHtml, splitOuterProps, splitPressFeedback, stateNamesIn, statePseudoClass, stateSelectorSuffix, stateTransitionProperties, stringFormRuntimeOf, stripSuppressedProps, swiperAutoplayAllowed, swiperLoopOptions, swiperModuleNames, syncNodeA11yAttributes, syncSubmitButtons, targetedStateSelector, toLayerRect, toastCloseWord, toastDuration, toastEdge, toastsToEvict, togglePopover, tooltipSide, tooltipTiming, tooltipWords, tooltipsOf, transitionPropertyList, viewportTransitionContext, watchHeaders, watchScrolled, withContextSlots, withPhoneDefaults, withStateTransitions, wrapInBreakpointQuery, wrapInMediaQuery };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map