@vectoriox/iox-ui 5.84.0 → 5.85.0

package/generation-core/index.d.ts

@@ -766,6 +766,10 @@ declare const SPEC_SITE_PATTERNS: {
         readonly label: "Navigation bar";
         readonly global: "before";
         readonly phoneMenu: "drawer";
+        readonly header: {
+            readonly behaviour: "hides";
+            readonly edge: "fade";
+        };
         readonly intent: "The brand on one side, the pages and one call to action on the other — the default header.";
         readonly node: {
             readonly t: "Container";
@@ -827,6 +831,10 @@ declare const SPEC_SITE_PATTERNS: {
         readonly label: "Navigation — the name centred";
         readonly global: "before";
         readonly phoneMenu: "drawer";
+        readonly header: {
+            readonly behaviour: "hides";
+            readonly edge: "fade";
+        };
         readonly intent: "The name centred above a centred row of pages — when the name is the brand.";
         readonly node: {
             readonly t: "Container";
@@ -5410,6 +5418,11 @@ interface SitePattern {
     readonly global?: `${PatternGlobalPosition}`;
     /** A navigation pattern's phone shape (CC1): `planNavShape` adds it after the pattern is stamped. */
     readonly phoneMenu?: 'drawer' | 'bar' | 'both';
+    /** A navigation pattern's behaviour as the page scrolls (premium M4, T2): design-core HeaderBehaviour / HeaderEdge. */
+    readonly header?: {
+        readonly behaviour: 'scrolls' | 'stays' | 'hides';
+        readonly edge?: 'fade' | 'line' | 'none';
+    };
     /** SC6: a Scene section — held while the page scrolls, moved by the scroll. Only at How animated Expressive, at
      *  most one per page and on at most two pages (`validateSitePlan`); it never takes the look's entrances. */
     readonly scene?: boolean;

package/index.d.ts

@@ -719,7 +719,8 @@ declare function planResponsiveRules(styleProps: StyleMap | null | undefined, st
  * 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.
  */
 declare class ClientSliderContainerComponent implements AfterViewInit, OnDestroy {
     private platformId;
@@ -764,6 +765,9 @@ declare class ClientSliderContainerComponent implements AfterViewInit, OnDestroy
     responsive: ResponsiveOverrides | null;
     /** The slider's controls are parts (set by the renderer from the node): Swiper draws none of its own. */
     controlParts: boolean;
+    /** 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. */
+    scrollPlays: boolean;
     childrenHost: ViewContainerRef;
     leadHost: ViewContainerRef;
     trailHost: ViewContainerRef;
@@ -786,7 +790,7 @@ declare class ClientSliderContainerComponent implements AfterViewInit, OnDestroy
     private boot;
     private inputs;
     static ɵfac: i0.ɵɵFactoryDeclaration<ClientSliderContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ClientSliderContainerComponent, "iox-slider-container", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "dir": { "alias": "dir"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "loop": { "alias": "loop"; "required": false; }; "slidesPerView": { "alias": "slidesPerView"; "required": false; }; "slidesPerGroup": { "alias": "slidesPerGroup"; "required": false; }; "spaceBetween": { "alias": "spaceBetween"; "required": false; }; "speed": { "alias": "speed"; "required": false; }; "effect": { "alias": "effect"; "required": false; }; "grabCursor": { "alias": "grabCursor"; "required": false; }; "centeredSlides": { "alias": "centeredSlides"; "required": false; }; "initialSlide": { "alias": "initialSlide"; "required": false; }; "autoHeight": { "alias": "autoHeight"; "required": false; }; "slideToClickedSlide": { "alias": "slideToClickedSlide"; "required": false; }; "freeMode": { "alias": "freeMode"; "required": false; }; "enableNavigation": { "alias": "enableNavigation"; "required": false; }; "enablePagination": { "alias": "enablePagination"; "required": false; }; "enableScrollbar": { "alias": "enableScrollbar"; "required": false; }; "enableAutoplay": { "alias": "enableAutoplay"; "required": false; }; "enableKeyboard": { "alias": "enableKeyboard"; "required": false; }; "enableMousewheel": { "alias": "enableMousewheel"; "required": false; }; "enableZoom": { "alias": "enableZoom"; "required": false; }; "enableGrid": { "alias": "enableGrid"; "required": false; }; "enableParallax": { "alias": "enableParallax"; "required": false; }; "autoplayDelay": { "alias": "autoplayDelay"; "required": false; }; "autoplayPauseOnMouseEnter": { "alias": "autoplayPauseOnMouseEnter"; "required": false; }; "autoplayDisableOnInteraction": { "alias": "autoplayDisableOnInteraction"; "required": false; }; "paginationType": { "alias": "paginationType"; "required": false; }; "paginationClickable": { "alias": "paginationClickable"; "required": false; }; "paginationDynamicBullets": { "alias": "paginationDynamicBullets"; "required": false; }; "navigationColor": { "alias": "navigationColor"; "required": false; }; "paginationColor": { "alias": "paginationColor"; "required": false; }; "gridRows": { "alias": "gridRows"; "required": false; }; "breakpoints": { "alias": "breakpoints"; "required": false; }; "responsive": { "alias": "responsive"; "required": false; }; "controlParts": { "alias": "controlParts"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClientSliderContainerComponent, "iox-slider-container", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "dir": { "alias": "dir"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "loop": { "alias": "loop"; "required": false; }; "slidesPerView": { "alias": "slidesPerView"; "required": false; }; "slidesPerGroup": { "alias": "slidesPerGroup"; "required": false; }; "spaceBetween": { "alias": "spaceBetween"; "required": false; }; "speed": { "alias": "speed"; "required": false; }; "effect": { "alias": "effect"; "required": false; }; "grabCursor": { "alias": "grabCursor"; "required": false; }; "centeredSlides": { "alias": "centeredSlides"; "required": false; }; "initialSlide": { "alias": "initialSlide"; "required": false; }; "autoHeight": { "alias": "autoHeight"; "required": false; }; "slideToClickedSlide": { "alias": "slideToClickedSlide"; "required": false; }; "freeMode": { "alias": "freeMode"; "required": false; }; "enableNavigation": { "alias": "enableNavigation"; "required": false; }; "enablePagination": { "alias": "enablePagination"; "required": false; }; "enableScrollbar": { "alias": "enableScrollbar"; "required": false; }; "enableAutoplay": { "alias": "enableAutoplay"; "required": false; }; "enableKeyboard": { "alias": "enableKeyboard"; "required": false; }; "enableMousewheel": { "alias": "enableMousewheel"; "required": false; }; "enableZoom": { "alias": "enableZoom"; "required": false; }; "enableGrid": { "alias": "enableGrid"; "required": false; }; "enableParallax": { "alias": "enableParallax"; "required": false; }; "autoplayDelay": { "alias": "autoplayDelay"; "required": false; }; "autoplayPauseOnMouseEnter": { "alias": "autoplayPauseOnMouseEnter"; "required": false; }; "autoplayDisableOnInteraction": { "alias": "autoplayDisableOnInteraction"; "required": false; }; "paginationType": { "alias": "paginationType"; "required": false; }; "paginationClickable": { "alias": "paginationClickable"; "required": false; }; "paginationDynamicBullets": { "alias": "paginationDynamicBullets"; "required": false; }; "navigationColor": { "alias": "navigationColor"; "required": false; }; "paginationColor": { "alias": "paginationColor"; "required": false; }; "gridRows": { "alias": "gridRows"; "required": false; }; "breakpoints": { "alias": "breakpoints"; "required": false; }; "responsive": { "alias": "responsive"; "required": false; }; "controlParts": { "alias": "controlParts"; "required": false; }; "scrollPlays": { "alias": "scrollPlays"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 /**
@@ -1728,6 +1732,8 @@ interface SliderInputs {
     gridRows?: number | string;
     breakpoints?: string;
     responsive?: ResponsiveOverrides | null;
+    /** Premium M4: the scroll plays it — held mid-screen, resting on each picture; no swipe, no loop, no autoplay. */
+    scrollPlays?: boolean;
 }
 /** The slider's controls, when they are PARTS (CC3) — the elements Swiper is handed. */
 interface SliderControlElements {
@@ -1759,6 +1765,17 @@ declare const LEGACY_SWIPER_CONTROLS: {
     readonly pagination: ".swiper-pagination";
     readonly 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).
+ */
+declare const SLIDER_FEEL: {
+    readonly resistanceRatio: 0.65;
+    readonly threshold: 6;
+};
+/** At or under this width one picture takes the full width (M1.3) unless the author said otherwise there. */
+declare const SLIDER_PHONE_BREAKPOINT = "mobile";
 /** 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. */
 declare const PART_PAGINATION_MODIFIER = "iox-slider-pagination-";
@@ -1767,6 +1784,12 @@ declare function swiperLoopOptions(loop: unknown): {
     loop: boolean;
     rewind: boolean;
 };
+/**
+ * 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).
+ */
+declare function withPhoneDefaults(inputs: SliderInputs): ResponsiveOverrides | null;
 declare function planSwiperOptions(inputs: SliderInputs, ctx: SwiperPlanContext): SwiperPlan;
 
 /**
@@ -1795,6 +1818,19 @@ declare function sliderControlElements(el: Element): {
 /** True when the rendered slider holds any control part (the model's `hasSliderParts`, read off the DOM). */
 declare function domHasSliderParts(el: Element): boolean;
 declare function bootSlider(el: HTMLElement, inputs: SliderInputs, options?: SliderBootOptions): Promise<any>;
+/** The element a slider the scroll plays is held in: its runway, the Scene root the ONE driver drives (premium M4). */
+declare const SLIDER_RUNWAY_CLASS = "iox-slider-runway";
+/** The runway's steps (slides − 1): how many half-screens of scroll it reserves (iox-design.css). */
+declare 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.
+ */
+declare function sliderRunwayHtml(inputs: SliderInputs | null | undefined, slideCount: number): {
+    open: string;
+    close: string;
+} | null;
 /** The inputs a string-path slider carries (`data-iox-slider`), or null. */
 declare function sliderInputsOf(el: Element): SliderInputs | null;
 /** The Swiper inputs of a saved SliderContainer node — what the string path serialises into `data-iox-slider`. */
@@ -1958,10 +1994,17 @@ type StateMaps = Record<string, Record<string, any> | undefined> | null | undefi
 declare function stateTransitionProperties(stateStyles: StateMaps, responsive?: Record<string, {
     stateStyles?: StateMaps;
 } | undefined> | null, type?: string | null): string[];
+/**
+ * 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.
+ */
+declare const ELEMENT_STYLE_TRANSITION_EXTRAS: Readonly<Record<string, ReadonlyArray<string>>>;
 /**
  * `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.
  */
 declare function withStateTransitions(styleProps: Record<string, any>, stateStyles: StateMaps, elementStyle?: string | null, responsive?: Record<string, {
     stateStyles?: StateMaps;
@@ -2301,6 +2344,98 @@ declare function normalizeAppPath(path: string | null | undefined, baseHref?: st
 /** Whether `href` points at the page at `currentPath` (both app-relative, or absolute under `baseHref`). */
 declare function isCurrentLink(href: string | null | undefined, currentPath: string | null | undefined, options?: CurrentLinkOptions): boolean;
 
+/**
+ * Reduced motion (CC1, R1 — complex-components plan §2d). The token sheet already collapses the
+ * motion tokens under `prefers-reduced-motion`; everything that moves through SCRIPT must ask the
+ * same question, and ask it HERE: the interaction engines (builder canvas + live site), the Slider's
+ * autoplay and the Gallery's crossfade loop. Publishable gate #6: reduced motion = motion dial 0.
+ */
+declare const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+/** Anything with `matchMedia` — a window, or a stub in a spec. */
+interface MatchMediaHost {
+    matchMedia?: (query: string) => {
+        matches: boolean;
+    };
+}
+/** True when the visitor asked their system for reduced motion. No `matchMedia` (SSR) → false. */
+declare function prefersReducedMotion(host?: MatchMediaHost | null | undefined): boolean;
+/** True when script may animate. The ONE question every runtime asks before moving anything. */
+declare function motionAllowed(host?: MatchMediaHost | null | undefined): boolean;
+
+/** How far the page has to move before it counts as scrolled — past a trackpad's rest jitter. */
+declare const SCROLLED_THRESHOLD_PX = 8;
+/** True once `offset` has passed the threshold. */
+declare function isScrolled(offset: number, threshold?: number): boolean;
+/** Anything that scrolls: a window (`scrollY`) or an element (`scrollTop`). */
+interface ScrollSource {
+    addEventListener(type: 'scroll', fn: () => void, options?: AddEventListenerOptions): void;
+    removeEventListener(type: 'scroll', fn: () => void): void;
+    scrollY?: number;
+    scrollTop?: number;
+}
+/**
+ * Keep `SCROLLED_ATTRIBUTE` on `target` while `source` has scrolled past the threshold — what the Scrolled state (G4)
+ * compiles against, on the live site (the window → the document element) and on the canvas (its scroller → the page).
+ * One passive listener, read once per frame, written only when it changes. Returns the stop.
+ */
+declare function watchScrolled(source: ScrollSource, target: Element, threshold?: number): () => void;
+
+/**
+ * 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. */
+declare const HEADER_SCROLL_HYSTERESIS_PX = 6;
+interface HeaderRuntimeOptions {
+    /** Where reduced motion is asked (the window; a stub in a spec). */
+    host?: MatchMediaHost | null;
+}
+/** `120ms` / `0.2s` → milliseconds; anything else → null. */
+declare function durationMs(value: string | null | undefined): number | 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.
+ */
+declare function headerShouldHide(offset: number, delta: number, headerHeight: number, held: boolean): boolean;
+declare class HeaderRuntime {
+    private readonly header;
+    private readonly options;
+    private lastOffset;
+    private hidden;
+    private height;
+    private anim;
+    private readonly resize;
+    private readonly onFocusIn;
+    constructor(header: HTMLElement, options?: HeaderRuntimeOptions);
+    /** True while the header has stepped aside. */
+    get isHidden(): boolean;
+    /** The page now stands at `offset` page px (layout px — the canvas divides out its zoom). */
+    update(offset: number): void;
+    /** Back in place now, with no motion (a page change, the runtime going away). */
+    reset(): void;
+    destroy(): void;
+    private held;
+    private setHidden;
+}
+/** 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'). */
+declare function hidingHeadersIn(root: ParentNode | Iterable<Element>): HTMLElement[];
+/**
+ * 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.
+ */
+declare function watchHeaders(source: ScrollSource, root: ParentNode | Iterable<Element>, options?: HeaderRuntimeOptions): () => void;
+
 /**
  * The content traits the accessibility attributes are read from (CC1). Import-free on purpose: the
  * builder's component configs declare these traits, and the node-baseline generator bundles those
@@ -2332,6 +2467,8 @@ declare const DIALOG_NODE_TYPE = "Dialog";
 declare const NAMED_GROUP_ROLES: ReadonlyArray<string>;
 /** Carries the min-width (px) at which an open dialog closes itself; the engine listens on it. */
 declare 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. */
+declare const SLIDE_CAPTION_ATTRIBUTE = "data-iox-caption";
 declare enum A11yAttribute {
     Label = "aria-label",
     Hidden = "aria-hidden",
@@ -2395,24 +2532,6 @@ declare function needsGroupName(node: (A11yNodeSource & {
     role?: string | null;
 }) | null | undefined): boolean;
 
-/**
- * Reduced motion (CC1, R1 — complex-components plan §2d). The token sheet already collapses the
- * motion tokens under `prefers-reduced-motion`; everything that moves through SCRIPT must ask the
- * same question, and ask it HERE: the interaction engines (builder canvas + live site), the Slider's
- * autoplay and the Gallery's crossfade loop. Publishable gate #6: reduced motion = motion dial 0.
- */
-declare const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
-/** Anything with `matchMedia` — a window, or a stub in a spec. */
-interface MatchMediaHost {
-    matchMedia?: (query: string) => {
-        matches: boolean;
-    };
-}
-/** True when the visitor asked their system for reduced motion. No `matchMedia` (SSR) → false. */
-declare function prefersReducedMotion(host?: MatchMediaHost | null | undefined): boolean;
-/** True when script may animate. The ONE question every runtime asks before moving anything. */
-declare function motionAllowed(host?: MatchMediaHost | null | undefined): boolean;
-
 /**
  * Scrolling (AI plan rev 3.1 §3p, MO-D1/MO-D7): the look's `scroll` choice → the options the ONE page
  * scroller starts Lenis with, or `null` for the browser's own scrolling. The table is the contract's
@@ -2644,24 +2763,6 @@ declare function splitPressFeedback<T extends PressAction>(actions: ReadonlyArra
     onClick: T[];
 };
 
-/** How far the page has to move before it counts as scrolled — past a trackpad's rest jitter. */
-declare const SCROLLED_THRESHOLD_PX = 8;
-/** True once `offset` has passed the threshold. */
-declare function isScrolled(offset: number, threshold?: number): boolean;
-/** Anything that scrolls: a window (`scrollY`) or an element (`scrollTop`). */
-interface ScrollSource {
-    addEventListener(type: 'scroll', fn: () => void, options?: AddEventListenerOptions): void;
-    removeEventListener(type: 'scroll', fn: () => void): void;
-    scrollY?: number;
-    scrollTop?: number;
-}
-/**
- * Keep `SCROLLED_ATTRIBUTE` on `target` while `source` has scrolled past the threshold — what the Scrolled state (G4)
- * compiles against, on the live site (the window → the document element) and on the canvas (its scroller → the page).
- * One passive listener, read once per frame, written only when it changes. Returns the stop.
- */
-declare function watchScrolled(source: ScrollSource, target: Element, threshold?: number): () => void;
-
 /**
  * page-style — the ONE compiler that turns a page's style settings into CSS.
  *
@@ -3842,5 +3943,5 @@ declare const FLOATING_MARGIN = 12;
 /** Where `panel` goes beside `anchor` inside `viewport`. */
 declare function placeFloating(anchor: FloatingRect, panel: FloatingSize, viewport: FloatingViewport, options?: FloatingOptions): FloatingPlacement;
 
-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 type { A11yNodeSource, AnimateActionOptions, BoundValueSpec, BreakpointDef, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, CurrentLinkOptions, DatePickerOptions, FloatingOptions, FloatingPlacement, FloatingRect, FloatingSize, FloatingViewport, FormMessageResolver, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, InteractionKeyframe, IoxContextSlot, IoxPipe, MatchMediaHost, NodeA11yContext, OverrideBreakpoint, PageScrollStart, PageStyleFieldState, PageStyleOptions, PageStyleSettings, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionContext, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, PlannedPageTransition, PressAction, RegisteredField, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, RouteAnimationLike, ScrollPlanContext, ScrollSource, SeoDerivedContent, SeoFieldSource, SeoFieldState, SeoResolveContext, SetContextParams, SettleOptions, SliderBootOptions, SliderControlElements, SliderInputs, StateRulePlan, StateScope, StateStyleMap, StringFormOptions, StyleMap, StyleTreeNode, SwiperBreakpointMap, SwiperModuleFlags, SwiperPlan, SwiperPlanContext, ToggleableAction, TransitionFeel, TransitionPhase, TransitionPreviewLayers, TransitionTimelineInput, TransitionViewport, ValueSource, VirtualTraitGroup };
+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 };
+export type { A11yNodeSource, AnimateActionOptions, BoundValueSpec, BreakpointDef, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, CurrentLinkOptions, DatePickerOptions, FloatingOptions, FloatingPlacement, FloatingRect, FloatingSize, FloatingViewport, FormMessageResolver, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, HeaderRuntimeOptions, IBuilderEventEmitter, InputMap, InteractionKeyframe, IoxContextSlot, IoxPipe, MatchMediaHost, NodeA11yContext, OverrideBreakpoint, PageScrollStart, PageStyleFieldState, PageStyleOptions, PageStyleSettings, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionContext, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, PlannedPageTransition, PressAction, RegisteredField, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, RouteAnimationLike, ScrollPlanContext, ScrollSource, SeoDerivedContent, SeoFieldSource, SeoFieldState, SeoResolveContext, SetContextParams, SettleOptions, SliderBootOptions, SliderControlElements, SliderInputs, StateRulePlan, StateScope, StateStyleMap, StringFormOptions, StyleMap, StyleTreeNode, SwiperBreakpointMap, SwiperModuleFlags, SwiperPlan, SwiperPlanContext, ToggleableAction, TransitionFeel, TransitionPhase, TransitionPreviewLayers, TransitionTimelineInput, TransitionViewport, ValueSource, VirtualTraitGroup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-ui",
-  "version": "5.84.0",
+  "version": "5.85.0",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",

package/scene-core/index.d.ts

@@ -70,8 +70,19 @@ interface SceneFrame {
 declare enum SceneAttribute {
     Root = "data-iox-scene",
     Tracks = "data-iox-tracks",
-    PhoneTracks = "data-iox-tracks-phone"
+    PhoneTracks = "data-iox-tracks-phone",
+    /** A root's stage that is not a Scene's `scene.stage` part: the slider a scroll plays (premium M4). */
+    Stage = "data-iox-scene-stage"
 }
+/**
+ * A SLIDER THE SCROLL PLAYS (premium components M4 — M1.3's held gallery). Its progress rests on each picture and changes
+ * only over the middle share of each step, so every picture arrives and stays a moment while the page holds it: `p` is
+ * the scroll's progress through the runway (0–1), `n` the slides; the answer is Swiper's progress (0–1).
+ */
+declare const SLIDER_HOLD_SHARE = 0.2;
+/** Page px of scroll per picture, as a share of the screen's height (the runway the renderers reserve). */
+declare const SLIDER_SCROLL_STEP_SCREENS = 0.55;
+declare function heldProgress(p: number, n: number): number;
 /** At or under this stage width a layer plays its phone tracks. The `mobile` breakpoint's width. */
 declare const SCENE_PHONE_MAX_WIDTH = 767;
 /**
@@ -287,6 +298,11 @@ declare function buildSceneRecipe(create: CompositeNodeFactory, words?: Partial<
  * - Reads come first in a frame and writes after, and a write only ever touches compositor properties.
  */
 declare const SCENE_DAMPING = 9;
+/**
+ * Dispatched (bubbling) by something the driver plays that arrived after the driver last looked — a Swiper booted on a
+ * slider's stage. Never a DOM `scroll`: nothing that follows the driver may dispatch one (SC2).
+ */
+declare const SCENE_WAKE_EVENT = "iox-scene-wake";
 /** One frame of the damping: frame-rate independent, so 60 Hz and 120 Hz settle in the same time. */
 declare function dampToward(current: number, target: number, seconds: number, rate?: number): number;
 /** Where a root stands: scrolled `local` page px into its `travel`. `zoom` undoes the canvas's scale. */
@@ -321,9 +337,12 @@ declare class ScrollDriver {
     private frame;
     private lastTime;
     private readonly wakeUp;
+    private readonly onWakeEvent;
     constructor(options?: ScrollDriverOptions);
-    /** Drive a Scene's root. Idempotent: adding a root again re-reads it. */
-    add(root: HTMLElement): void;
+    /** Drive a Scene's root. Idempotent: adding a root again re-reads it. False when another driver holds it. */
+    add(root: HTMLElement): boolean;
+    /** True when this driver holds `root`. */
+    holds(root: HTMLElement): boolean;
     remove(root: HTMLElement): void;
     /** Read a root's layers again now, keeping where it stands: an editor changed their tracks. */
     reread(root: HTMLElement): void;
@@ -366,6 +385,15 @@ declare class ScrollDriver {
 /** A page's Scenes, driven by one driver; null when it holds none, or when the visitor asked for less motion (the
  *  page's own CSS then lets each Scene flow). The live site's door. */
 declare function attachScenes(container: HTMLElement, options?: ScrollDriverOptions): ScrollDriver | null;
+/**
+ * The Scene roots that belong to `elements` (each, and what it holds) — what one runtime instance owns: the page's nodes,
+ * or the globals'. Never a whole container that also holds another instance's Scenes (premium M4: the globals' instance
+ * scanned the app root and drove the page's Scenes a second time).
+ */
+declare function sceneRootsIn(elements: Iterable<Element>): HTMLElement[];
+/** The live site's door for a runtime that owns some nodes: their Scenes on one driver (null when none, or under reduced
+ *  motion — the page's own CSS then lets each Scene flow). A root another driver holds stays with it. */
+declare function attachSceneRoots(roots: ReadonlyArray<HTMLElement>, options?: ScrollDriverOptions): ScrollDriver | null;
 
 /**
  * Text into pieces, in the browser only (premium sites SC3, Motion v2 §3c). A saved node keeps its plain text and the
@@ -416,5 +444,5 @@ declare function revealStagger(groups: number, by: TextRevealBy): number;
  */
 declare function playTextReveal(el: HTMLElement, by: TextRevealBy, timing: KeyframeAnimationOptions): Animation | null;
 
-export { LIGHT_UP_PIECE_CAP, REVEAL_PIECE_CAP, SCENE_BUDGET, SCENE_DAMPING, SCENE_FILM_SMOOTH, SCENE_FLOW_RULES, SCENE_LENGTH, SCENE_MAX_SCREENS, SCENE_MIN_SCREENS, SCENE_PHONE_LENGTH, SCENE_PHONE_MAX_WIDTH, SCENE_REDUCED_MOTION_CSS, SCENE_REVEAL_DEFAULT, SCENE_STAGE_HEIGHT, SCENE_TRACK_DEFS, SCENE_WORDS, SCENE_WORD_DIM, SceneAttribute, SceneProp, SceneRevealFrom, ScrollDriver, TextRevealBy, applySceneFirstFrame, attachScenes, buildSceneRecipe, colourAt, dampToward, lineIndexes, movedSceneKey, normalizeTracks, playTextReveal, revealClipPath, revealStagger, sceneBudget, sceneColourKeyAt, sceneDisplayValue, sceneFilmDensity, sceneFirstFrame, sceneFrame, sceneFrameDeclarations, sceneHasKeyAt, sceneHeightForScreens, sceneKeyPosition, sceneLayersOf, sceneNodeAttributes, scenePlayed, sceneRevealFromOf, sceneRootOnPath, sceneScreensOf, sceneScrollState, sceneTrackDef, sceneTrackSpan, sceneWordOpacity, sceneWordsLit, scenesIn, splitText, syncSceneAttributes, textPieces, valueAt, withSceneKey, withScenePlayback, withSceneRevealFrom, withoutSceneKey, withoutScenePlayback };
+export { LIGHT_UP_PIECE_CAP, REVEAL_PIECE_CAP, SCENE_BUDGET, SCENE_DAMPING, SCENE_FILM_SMOOTH, SCENE_FLOW_RULES, SCENE_LENGTH, SCENE_MAX_SCREENS, SCENE_MIN_SCREENS, SCENE_PHONE_LENGTH, SCENE_PHONE_MAX_WIDTH, SCENE_REDUCED_MOTION_CSS, SCENE_REVEAL_DEFAULT, SCENE_STAGE_HEIGHT, SCENE_TRACK_DEFS, SCENE_WAKE_EVENT, SCENE_WORDS, SCENE_WORD_DIM, SLIDER_HOLD_SHARE, SLIDER_SCROLL_STEP_SCREENS, SceneAttribute, SceneProp, SceneRevealFrom, ScrollDriver, TextRevealBy, applySceneFirstFrame, attachSceneRoots, attachScenes, buildSceneRecipe, colourAt, dampToward, heldProgress, lineIndexes, movedSceneKey, normalizeTracks, playTextReveal, revealClipPath, revealStagger, sceneBudget, sceneColourKeyAt, sceneDisplayValue, sceneFilmDensity, sceneFirstFrame, sceneFrame, sceneFrameDeclarations, sceneHasKeyAt, sceneHeightForScreens, sceneKeyPosition, sceneLayersOf, sceneNodeAttributes, scenePlayed, sceneRevealFromOf, sceneRootOnPath, sceneRootsIn, sceneScreensOf, sceneScrollState, sceneTrackDef, sceneTrackSpan, sceneWordOpacity, sceneWordsLit, scenesIn, splitText, syncSceneAttributes, textPieces, valueAt, withSceneKey, withScenePlayback, withSceneRevealFrom, withoutSceneKey, withoutScenePlayback };
 export type { SceneBudget, SceneFilmDensity, SceneFrame, SceneFrameOptions, SceneFrameState, SceneKey, SceneLayerNode, SceneNodeSource, SceneTrack, SceneTrackDef, SceneTreeNode, SceneWords, ScrollDriverOptions, SplitText, SplitTextOptions, TextPiece };

package/src/actions-core/dialog-motion.ts

@@ -103,3 +103,28 @@ export function closeDialogAnimated(el: DialogElementLike, options: ExitMotionOp
 export function dialogTogglesClosed(el: Pick<DialogElementLike, 'open' | 'hasAttribute'>): boolean {
     return el.open && !el.hasAttribute(DIALOG_CLOSING_ATTRIBUTE);
 }
+
+/** The element-style marker a styled dialog carries (design-core ELEMENT_STYLE_MARKER_CLASS — actions-core does not
+ *  import design-core). */
+const STYLED_DIALOG_CLASS = 'iox-es';
+
+export interface FocusableSheet {
+    classList: { contains(token: string): boolean };
+    querySelector(selector: string): unknown;
+    hasAttribute(name: string): boolean;
+    setAttribute(name: string, value: string): void;
+    focus(options?: FocusOptions): void;
+}
+
+/**
+ * A styled dialog a visitor just opened takes focus on its SHEET (premium components M4 — M1.1's carry-over). A bare
+ * `showModal()` focuses its first control, and a phone can ring it after a tap; the sheet never rings (iox-design.css) and
+ * the first Tab moves to that control, with its ring. A dialog with an author's `[autofocus]` keeps it; a dialog saved
+ * before element styles keeps the browser's behaviour. True when the sheet took focus.
+ */
+export function focusDialogSheet(dialog: FocusableSheet | null | undefined): boolean {
+    if (!dialog || !dialog.classList.contains(STYLED_DIALOG_CLASS) || dialog.querySelector('[autofocus]')) return false;
+    if (!dialog.hasAttribute('tabindex')) dialog.setAttribute('tabindex', '-1');
+    dialog.focus({ preventScroll: true });
+    return true;
+}

package/src/composite-core/header.ts

@@ -0,0 +1,25 @@
+import { HeaderBehaviour, HeaderEdge, headerBehaviourOf, headerEdgeOf, headerStaysAtTop, HeaderTrait } from '@vectoriox/iox-ui/design-core';
+
+import { CompositeNode, readProp, readStyle, writeProp, writeStyles } from './composite-node';
+
+/**
+ * Set how a header behaves as the page scrolls (premium components T2, M4) — ONE edit for the builder's Header section
+ * and the composer (generation-core), on either node shape. A header that stays at the top is the containing block of its
+ * edge: the live site makes it sticky (iox-design.css), and a header stored `static` becomes `relative` — what the canvas,
+ * which forces a node's own position, draws it with. Nothing else of the author's is touched.
+ */
+export function setHeaderBehaviour(node: CompositeNode, behaviour: HeaderBehaviour | `${HeaderBehaviour}`, edge: HeaderEdge | `${HeaderEdge}` | null): void {
+    const b = headerBehaviourOf(behaviour);
+    writeProp(node, HeaderTrait.Behaviour, b);
+    writeProp(node, HeaderTrait.Edge, headerEdgeOf(edge) ?? '');
+    const position = readStyle(node, 'position');
+    if (headerStaysAtTop(b) && (position === undefined || position === null || position === '' || position === 'static')) writeStyles(node, { position: 'relative' });
+}
+
+/** The header's behaviour and edge as stored (Scrolls / none for a header that never chose). */
+export function headerBehaviourOfNode(node: CompositeNode | null | undefined): { behaviour: HeaderBehaviour; edge: HeaderEdge | null } {
+    return {
+        behaviour: headerBehaviourOf(node ? readProp(node, HeaderTrait.Behaviour) : undefined),
+        edge: headerEdgeOf(node ? readProp(node, HeaderTrait.Edge) : undefined),
+    };
+}

package/src/composite-core/public-api.ts

@@ -24,3 +24,4 @@ export * from './segmented';
 export * from './exclusive';
 export * from './exclusive-runtime';
 export * from './composite-runtime';
+export * from './header';

package/src/composite-core/slider-runtime.ts

@@ -178,3 +178,85 @@ export function attachCarouselA11y(swiper: CarouselSwiper, options: CarouselA11y
     carouselOf(swiper.el)?.destroy();
     return new CarouselA11y(swiper, options);
 }
+
+// ── The bar's words (premium components M4, M1.3) ──────────────────────────────────────────────────────
+
+/** Where the Caption and the Count parts get their words: generated content (`attr()`), never the element's text — so
+ *  the canvas's Text component and the runtime never write the same node. */
+export const SLIDER_TEXT_ATTRIBUTE = 'data-iox-text';
+/** A slide's caption, written by every renderer (iox-ui `nodeA11yAttributes`, SLIDE_CAPTION_ATTRIBUTE). */
+const CAPTION_ATTRIBUTE = 'data-iox-caption';
+/** Held for a frame while the caption changes, so its new words fade in (iox-design.css). */
+export const SLIDER_SWAPPING_ATTRIBUTE = 'data-iox-swapping';
+const BAR_RUNTIME_KEY = '__ioxSliderBar';
+
+/** What the caption says for a slide: its own caption, else its picture's description, else nothing. */
+export function sliderCaptionOf(slide: Element | null | undefined): string {
+    if (!slide) return '';
+    const holder = slide.hasAttribute(CAPTION_ATTRIBUTE) ? slide : slide.querySelector(`[${CAPTION_ATTRIBUTE}]`);
+    const own = holder?.getAttribute(CAPTION_ATTRIBUTE)?.trim();
+    if (own) return own;
+    return slide.querySelector('img[alt]')?.getAttribute('alt')?.trim() ?? '';
+}
+
+/** "2 / 5" — the slide in view and how many there are; nothing for an empty slider. */
+export function sliderCountText(index: number, total: number): string {
+    if (!(total > 0)) return '';
+    const i = Math.min(total - 1, Math.max(0, Math.floor(Number.isFinite(index) ? index : 0)));
+    return `${i + 1} / ${total}`;
+}
+
+/** The parts of a running Swiper the bar's runtime reads. */
+export interface BarSwiper {
+    el: HTMLElement;
+    slides: HTMLElement[];
+    activeIndex: number;
+    realIndex?: number;
+    destroyed?: boolean;
+    on(event: string, handler: (...args: unknown[]) => void): void;
+    off(event: string, handler: (...args: unknown[]) => void): void;
+}
+
+/**
+ * Keep the bar's Caption and Count on the slide in view — the canvas, Preview and both engine paths (bootSlider). The
+ * caption changes behind a short fade (the first one does not); the count reads left to right in every language.
+ * Returns the stop; a slider with neither part gets a no-op.
+ */
+export function attachSliderBar(swiper: BarSwiper): () => void {
+    ((swiper.el as unknown as Record<string, () => void>)[BAR_RUNTIME_KEY])?.();
+    const caption = sliderPartElement(swiper.el, SliderRole.Caption);
+    const count = sliderPartElement(swiper.el, SliderRole.Count);
+    if (!caption && !count) return () => { /* nothing to keep */ };
+    const view = swiper.el.ownerDocument?.defaultView;
+    const raf = (fn: () => void) => (view?.requestAnimationFrame ? view.requestAnimationFrame(() => view.requestAnimationFrame(fn)) : setTimeout(fn, 32));
+    let first = true;
+    const sync = () => {
+        if (swiper.destroyed) return;
+        const slides = swiper.slides ?? [];
+        if (count) {
+            count.setAttribute('dir', 'ltr');
+            count.setAttribute(SLIDER_TEXT_ATTRIBUTE, sliderCountText(swiper.realIndex ?? swiper.activeIndex, slides.length));
+        }
+        if (caption) {
+            const words = sliderCaptionOf(slides[swiper.activeIndex]);
+            if (caption.getAttribute(SLIDER_TEXT_ATTRIBUTE) !== words) {
+                if (!first) {
+                    caption.setAttribute(SLIDER_SWAPPING_ATTRIBUTE, '');
+                    raf(() => caption.removeAttribute(SLIDER_SWAPPING_ATTRIBUTE));
+                }
+                caption.setAttribute(SLIDER_TEXT_ATTRIBUTE, words);
+            }
+        }
+        first = false;
+    };
+    swiper.on('slideChange', sync);
+    swiper.on('slidesLengthChange', sync);
+    sync();
+    const stop = () => {
+        swiper.off('slideChange', sync);
+        swiper.off('slidesLengthChange', sync);
+        delete (swiper.el as unknown as Record<string, unknown>)[BAR_RUNTIME_KEY];
+    };
+    (swiper.el as unknown as Record<string, () => void>)[BAR_RUNTIME_KEY] = stop;
+    return stop;
+}