@vectoriox/iox-ui 5.83.1 → 5.85.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 { 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) {
@@ -2140,10 +2140,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 +2160,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 +2852,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 +2884,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 +2916,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 +2958,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 +3016,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 +3070,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 +3129,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 +3146,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 +3193,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 +3244,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 +3263,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 +3283,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 +3360,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 }]
@@ -7771,6 +7870,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
@@ -7789,6 +8052,8 @@ const SLIDER_PAUSE_ROLE = 'slider.pause';
 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 +8065,7 @@ 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,
 ];
 /** A content trait's value from `props` (serialized) or `traits[]` (builder). */
 function nodeTraitValue(node, name) {
@@ -7844,6 +8110,13 @@ 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 attributes as an HTML string fragment (` name="value"`…) for a string renderer. */
@@ -10383,5 +10656,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_MARGIN, 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, 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_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, 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, durationMs, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, entranceStartsHidden, feelFor, fieldLanguage, finalKeyframe, framesFromLiveValue, gateHoverRule, getSeoValue, hasHoverState, hasOwnPageTransition, hasOwnTransition, headerShouldHide, hidingHeadersIn, 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, sliderRunwayHtml, splitOuterProps, splitPressFeedback, stateNamesIn, statePseudoClass, stateSelectorSuffix, stateTransitionProperties, stringFormRuntimeOf, stripSuppressedProps, swiperAutoplayAllowed, swiperLoopOptions, swiperModuleNames, syncNodeA11yAttributes, syncSubmitButtons, targetedStateSelector, transitionPropertyList, viewportTransitionContext, watchHeaders, watchScrolled, withContextSlots, withPhoneDefaults, withStateTransitions, wrapInBreakpointQuery, wrapInMediaQuery };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map