@vectoriox/iox-ui 5.84.0 → 5.86.0

package/fesm2022/vectoriox-iox-ui-composite-core.mjs

@@ -1,4 +1,4 @@
-import { readOwnedTrait, writeOwnedTrait, ROW_INDEX_ATTRIBUTE, elementStyleById, switchElementStyle, LinkType, setColorScheme, COLOR_SCHEME_TRAIT, repeatedRowIndex, roleClass } from '@vectoriox/iox-ui/design-core';
+import { readOwnedTrait, writeOwnedTrait, ROW_INDEX_ATTRIBUTE, elementStyleById, switchElementStyle, LinkType, setColorScheme, COLOR_SCHEME_TRAIT, repeatedRowIndex, roleClass, headerBehaviourOf, HeaderTrait, headerEdgeOf, headerStaysAtTop } from '@vectoriox/iox-ui/design-core';
 export { ROW_INDEX_ATTRIBUTE } from '@vectoriox/iox-ui/design-core';
 
 /** What a recipe asks its consumer to create: a NEW node of `type`, the way that consumer creates one
@@ -1990,9 +1990,35 @@ var SliderRole;
     SliderRole["Prev"] = "slider.prev";
     SliderRole["Next"] = "slider.next";
     SliderRole["Pagination"] = "slider.pagination";
+    /** Premium M4 (M1.3): the bar UNDER the picture that holds the controls — caption · count · arrows. */
+    SliderRole["Bar"] = "slider.bar";
+    /** The caption of the slide in view (its `caption`, else its picture's description) — drawn by the runtime. */
+    SliderRole["Caption"] = "slider.caption";
+    /** "1 / 3", drawn by the runtime, left to right in every language. */
+    SliderRole["Count"] = "slider.count";
 })(SliderRole || (SliderRole = {}));
 /** Parts in the order they are stamped: the pause control first (APG: the first focus stop), the dots last. */
-const SLIDER_PART_ROLES = [SliderRole.Pause, SliderRole.Prev, SliderRole.Next, SliderRole.Pagination];
+const SLIDER_PART_ROLES = [
+    SliderRole.Pause, SliderRole.Prev, SliderRole.Next, SliderRole.Pagination, SliderRole.Bar, SliderRole.Caption, SliderRole.Count,
+];
+/** Where the controls sit (premium M4): over the picture (CC3, every slider saved before M4) or in the bar under it. */
+var SliderPlacement;
+(function (SliderPlacement) {
+    SliderPlacement["Over"] = "over";
+    SliderPlacement["Under"] = "under";
+})(SliderPlacement || (SliderPlacement = {}));
+const SLIDER_PLACEMENT_TRAIT = 'controlsPlacement';
+/** The bar's parts in reading order: the pause control, the caption at the reading start, the count, the dots, the
+ *  arrows at the end (M1.3). */
+const SLIDER_BAR_ORDER = [
+    SliderRole.Pause, SliderRole.Caption, SliderRole.Count, SliderRole.Pagination, SliderRole.Prev, SliderRole.Next,
+];
+/** Parts that exist only in the bar. */
+const BAR_ONLY = [SliderRole.Caption, SliderRole.Count];
+/** Premium M4: the trait that has the SCROLL play the slider (held mid-screen, resting on each picture). */
+const SLIDER_SCROLL_PLAYS_TRAIT = 'scrollPlays';
+/** Premium M4: a slide's caption (SliderSlide ▸ Caption) — the bar's Caption part shows the one in view. */
+const SLIDE_CAPTION_TRAIT = 'caption';
 const SLIDER_TYPE = 'SliderContainer';
 const SLIDE_TYPE = 'SliderSlide';
 /** The Bindings switches that own the parts. */
@@ -2001,11 +2027,17 @@ var SliderFlag;
     SliderFlag["Navigation"] = "enableNavigation";
     SliderFlag["Pagination"] = "enablePagination";
     SliderFlag["Autoplay"] = "enableAutoplay";
+    /** Premium M4: a caption under the picture (the bar only). */
+    SliderFlag["Caption"] = "enableCaption";
+    /** Premium M4: "1 / 3" under the picture (the bar only). */
+    SliderFlag["Count"] = "enableCount";
 })(SliderFlag || (SliderFlag = {}));
 const FLAG_PARTS = [
     [SliderFlag.Autoplay, [SliderRole.Pause]],
     [SliderFlag.Navigation, [SliderRole.Prev, SliderRole.Next]],
     [SliderFlag.Pagination, [SliderRole.Pagination]],
+    [SliderFlag.Caption, [SliderRole.Caption]],
+    [SliderFlag.Count, [SliderRole.Count]],
 ];
 /** The trait that names the carousel (Slider ▸ Accessibility ▸ Carousel name) — the A11y trait every named part uses. */
 const SLIDER_NAME_TRAIT = 'ariaLabel';
@@ -2015,9 +2047,28 @@ function isSliderPart(node) {
 function isSlider(node) {
     return node?.type === SLIDER_TYPE;
 }
-/** The slider's own part playing `role` (a direct child), or undefined. */
+/** The slider's own part playing `role` — a direct child, or one in its bar — or undefined. */
 function sliderPart(slider, role) {
-    return (slider.children ?? []).find(c => c?.role === role);
+    const direct = (slider.children ?? []).find(c => c?.role === role);
+    if (direct)
+        return direct;
+    const bar = (slider.children ?? []).find(c => c?.role === SliderRole.Bar);
+    return (bar?.children ?? []).find(c => c?.role === role);
+}
+/**
+ * Where the slider's controls sit. The STRUCTURE decides once there are controls — a bar means under the picture, a
+ * control of its own means over it (every slider saved before M4) — so a stored trait can never disagree with what is
+ * drawn. A slider with no controls yet takes its `controlsPlacement` (the builder's new Slider: under the picture).
+ */
+function sliderPlacementOf(slider) {
+    if (!slider)
+        return SliderPlacement.Over;
+    const children = slider.children ?? [];
+    if (children.some(c => c?.role === SliderRole.Bar))
+        return SliderPlacement.Under;
+    if (children.some(isSliderPart))
+        return SliderPlacement.Over;
+    return readProp(slider, SLIDER_PLACEMENT_TRAIT) === SliderPlacement.Under ? SliderPlacement.Under : SliderPlacement.Over;
 }
 /** True when the slider's controls are parts (it was created or migrated in CC3) — Swiper then draws none of its own. */
 function hasSliderParts(slider) {
@@ -2047,11 +2098,14 @@ var Type$2;
     Type["ButtonBlock"] = "ButtonBlock";
     Type["Icon"] = "Icon";
     Type["Container"] = "Container";
+    Type["Text"] = "Text";
 })(Type$2 || (Type$2 = {}));
 var Style$2;
 (function (Style) {
     Style["Control"] = "button-secondary";
     Style["Icon"] = "icon";
+    /** The caption and the count read as small print. */
+    Style["Words"] = "small";
 })(Style$2 || (Style$2 = {}));
 /** Each part's glyph (Phosphor) and its default accessible name. */
 const SLIDER_PART_GLYPH = {
@@ -2065,8 +2119,29 @@ const PART_LABEL = {
     [SliderRole.Prev]: 'Previous',
     [SliderRole.Next]: 'Next',
     [SliderRole.Pagination]: 'Pagination',
+    [SliderRole.Bar]: 'Controls',
+    [SliderRole.Caption]: 'Caption',
+    [SliderRole.Count]: 'Count',
 };
 const ZERO$1 = '0px 0px 0px 0px';
+/** A control in the bar: in flow, its own size, no offsets (the bar spaces its parts). */
+const BAR_PART_LAYOUT = { position: 'static', top: 'auto', margin: ZERO$1 };
+/**
+ * The bar (M1.3): a row under the picture. Its inline padding keeps the PAGE's margin when the slider bleeds to the
+ * screen's edge — the gutter less however far the slider is already inset from the screen (`100%` is the slider's
+ * width, the bar's containing block) — so in a padded section it is 0 and at full bleed it is the gutter.
+ */
+const BAR_INLINE_PAD = 'max(0px, calc(var(--iox-space-gutter, 24px) - (100vw - 100%) / 2))';
+const BAR_BASE = {
+    position: 'relative', display: 'flex', flexDirection: 'row', flexWrap: 'nowrap', alignItems: 'center', justifyContent: 'flex-start',
+    gap: '12px', width: '100%', height: 'auto', minHeight: '44px', margin: ZERO$1, padding: `12px ${BAR_INLINE_PAD} 0px ${BAR_INLINE_PAD}`, zIndex: '10',
+};
+/** The caption takes the room the controls leave; its words end in an ellipsis rather than push them off. */
+const CAPTION_BASE$1 = {
+    flexGrow: '1', flexShrink: '1', flexBasis: '0%', minWidth: '0px', width: 'auto', minHeight: 'auto', margin: ZERO$1, padding: ZERO$1,
+    overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+};
+const COUNT_BASE = { flexGrow: '0', flexShrink: '0', width: 'auto', minHeight: 'auto', margin: ZERO$1, padding: ZERO$1 };
 /** A round 44px control (board 6 `.st-ctl`), over the slides (z above `.swiper-wrapper`). The PLACE (which edge) is the
  *  shared CSS's, in logical insets, so a carousel reads the same way in RTL. */
 const CONTROL_BASE = {
@@ -2093,6 +2168,16 @@ function legacyLookOf(slider) {
 }
 /** One part, from the recipe (board 6: `button-secondary` controls, token dots) or in a migrated slider's legacy look. */
 function buildSliderPart(create, role, legacy) {
+    if (role === SliderRole.Bar) {
+        const bar = makeCompositePart(create, { key: 'bar', type: Type$2.Container, props: {}, elementStyle: NO_ELEMENT_STYLE }, role, PART_LABEL[role], BAR_BASE);
+        bar.children = [];
+        return bar;
+    }
+    if (role === SliderRole.Caption || role === SliderRole.Count) {
+        // Their words are the runtime's (the slide in view), drawn as the part's generated content: the node's own
+        // content stays empty, so no renderer ever fights the runtime over the element's text.
+        return makeCompositePart(create, { key: role.split('.')[1], type: Type$2.Text, props: { content: '', tag: 'p' }, elementStyle: Style$2.Words }, role, PART_LABEL[role], role === SliderRole.Caption ? CAPTION_BASE$1 : COUNT_BASE);
+    }
     if (role === SliderRole.Pagination) {
         const dots = makeCompositePart(create, { key: 'pagination', type: Type$2.Container, props: {}, elementStyle: NO_ELEMENT_STYLE }, role, PART_LABEL[role], legacy?.paginationColor ? { ...PAGINATION_BASE, color: legacy.paginationColor } : PAGINATION_BASE);
         dots.children = [];
@@ -2117,49 +2202,133 @@ function buildSliderPart(create, role, legacy) {
     return button;
 }
 const truthy = (v) => v === true || v === 'true';
-/** The parts the slider's switches call for, in stamping order. */
-function wantedSliderParts(slider) {
-    return FLAG_PARTS.filter(([flag]) => truthy(readProp(slider, flag))).flatMap(([, roles]) => roles);
-}
+/** The parts the slider's switches call for, in stamping order — and its bar, while the controls sit under the
+ *  picture. A caption and a count live in the bar only. */
+function wantedSliderParts(slider, placement = sliderPlacementOf(slider)) {
+    const under = placement === SliderPlacement.Under;
+    const roles = FLAG_PARTS.filter(([flag]) => truthy(readProp(slider, flag))).flatMap(([, r]) => r).filter(r => under || !BAR_ONLY.includes(r));
+    // The bar exists while it holds something: an empty band under the picture is never drawn.
+    return under && roles.length ? [...roles, SliderRole.Bar] : roles;
+}
+/** The slider's parts wherever they are: its direct children and those in its bar. */
+function allSliderParts(slider) {
+    const direct = (slider.children ?? []).filter(isSliderPart);
+    const bar = direct.find(c => c.role === SliderRole.Bar);
+    return [...direct, ...(bar?.children ?? []).filter(isSliderPart)];
+}
+const barIndex = (role) => SLIDER_BAR_ORDER.indexOf(role);
 /**
- * Make the slider's parts match its switches — ONE edit (a palette switch, the migration, the composer). Missing
- * parts are stamped from the recipe (or, `legacy`, in the migrated look) at their place: the pause control, Previous
- * and Next before the first slide, the pagination after the last; parts whose switch is off are removed. Everything
- * else (the slides, the author's edits to an existing part) is kept.
+ * Make the slider's parts match its switches — ONE edit (a palette switch, the migration, the composer, a change of
+ * placement). Missing parts are stamped from the recipe (or, `legacy`, in the migrated look) at their place: over the
+ * picture, the pause control, Previous and Next before the first slide and the pagination after the last; under it
+ * (premium M4), every control in the bar in its reading order, the bar after the slides. Parts whose switch is off are
+ * removed wherever they are. Everything else (the slides, the author's edits to an existing part) is kept.
  */
 function syncSliderParts(slider, create, legacy) {
-    const wanted = new Set(wantedSliderParts(slider));
-    const children = [...(slider.children ?? [])];
-    const removed = children.filter(c => isSliderPart(c) && !wanted.has(c.role));
-    const kept = children.filter(c => !removed.includes(c));
+    // A migrated slider keeps the place Swiper drew its controls in: over the picture.
+    const wanted = new Set(wantedSliderParts(slider, legacy ? SliderPlacement.Over : sliderPlacementOf(slider)));
+    const under = wanted.has(SliderRole.Bar);
+    const removed = allSliderParts(slider).filter(c => !wanted.has(c.role));
     const added = [];
+    let kept = [...(slider.children ?? [])].filter(c => !removed.includes(c));
+    let bar = kept.find(c => c.role === SliderRole.Bar) ?? null;
+    if (bar)
+        bar.children = (bar.children ?? []).filter(c => !removed.includes(c));
+    if (under && !bar) {
+        bar = buildSliderPart(create, SliderRole.Bar);
+        added.push(bar);
+        kept.push(bar);
+    }
     for (const role of SLIDER_PART_ROLES) {
-        if (!wanted.has(role) || kept.some(c => c.role === role))
+        if (role === SliderRole.Bar || !wanted.has(role) || allSliderPartsOf(kept, bar).some(c => c.role === role))
             continue;
         const part = buildSliderPart(create, role, legacy);
         added.push(part);
-        if (role === SliderRole.Pagination) {
+        if (under && bar) {
+            if (role !== SliderRole.Caption && role !== SliderRole.Count)
+                writeStyles(part, BAR_PART_LAYOUT);
+            placeInBar(bar, part);
+        }
+        else if (role === SliderRole.Pagination) {
             kept.push(part);
         }
         else {
-            // Before the first slide, after the parts that come before it in stamping order.
-            const order = SLIDER_PART_ROLES.indexOf(role);
-            const firstSlide = kept.findIndex(c => !isSliderPart(c));
-            let at = firstSlide < 0 ? kept.length : firstSlide;
-            for (let i = 0; i < kept.length; i++) {
-                const r = kept[i].role;
-                if (isSliderPart(kept[i]) && SLIDER_PART_ROLES.indexOf(r) > order && i < at) {
-                    at = i;
-                    break;
-                }
-            }
-            kept.splice(at, 0, part);
+            kept = placeBeforeSlides(kept, part, role);
         }
     }
     if (added.length || removed.length)
         slider.children = kept;
     return { added, removed };
 }
+function allSliderPartsOf(children, bar) {
+    return [...children.filter(isSliderPart), ...(bar?.children ?? []).filter(isSliderPart)];
+}
+/** Into the bar at its reading-order place (after the parts that come before it). */
+function placeInBar(bar, part) {
+    const children = [...(bar.children ?? [])];
+    const order = barIndex(part.role);
+    const at = children.findIndex(c => barIndex(c.role) > order);
+    children.splice(at < 0 ? children.length : at, 0, part);
+    bar.children = children;
+}
+/** Before the first slide, after the parts that come before it in stamping order. */
+function placeBeforeSlides(kept, part, role) {
+    const out = [...kept];
+    const order = SLIDER_PART_ROLES.indexOf(role);
+    const firstSlide = out.findIndex(c => !isSliderPart(c));
+    let at = firstSlide < 0 ? out.length : firstSlide;
+    for (let i = 0; i < out.length; i++) {
+        const r = out[i].role;
+        if (isSliderPart(out[i]) && SLIDER_PART_ROLES.indexOf(r) > order && i < at) {
+            at = i;
+            break;
+        }
+    }
+    out.splice(at, 0, part);
+    return out;
+}
+/** The layout a control has over the picture (its recipe's place: absolute, the arrows at the vertical middle). */
+function overLayoutFor(role) {
+    if (role === SliderRole.Pagination)
+        return { position: 'absolute', margin: ZERO$1 };
+    return role === SliderRole.Pause ? { position: 'absolute', top: 'auto', margin: ZERO$1 } : { position: 'absolute', top: ARROW_TOP, margin: ZERO$1 };
+}
+/**
+ * Move the controls over the picture or into the bar under it (premium M4, M1.3 — Slider ▸ Controls) — ONE edit and
+ * one undo step. The parts keep their identity and the author's edits; only their place changes (in flow in the bar,
+ * absolute over the picture). A caption and a count exist only in the bar. True when anything changed.
+ */
+function setSliderPlacement(slider, placement, create) {
+    const was = sliderPlacementOf(slider);
+    writeProp(slider, SLIDER_PLACEMENT_TRAIT, placement);
+    if (was === placement)
+        return false;
+    const children = [...(slider.children ?? [])];
+    const bar = children.find(c => c.role === SliderRole.Bar) ?? null;
+    if (placement === SliderPlacement.Under) {
+        const controls = children.filter(c => isSliderPart(c) && c.role !== SliderRole.Bar);
+        const rest = children.filter(c => !controls.includes(c));
+        const target = bar ?? buildSliderPart(create, SliderRole.Bar);
+        for (const part of controls) {
+            writeStyles(part, BAR_PART_LAYOUT);
+            placeInBar(target, part);
+        }
+        slider.children = bar ? rest : [...rest, target];
+    }
+    else {
+        const inBar = (bar?.children ?? []).filter(isSliderPart);
+        let rest = children.filter(c => c !== bar);
+        for (const part of inBar) {
+            if (BAR_ONLY.includes(part.role))
+                continue;
+            writeStyles(part, overLayoutFor(part.role));
+            rest = part.role === SliderRole.Pagination ? [...rest, part] : placeBeforeSlides(rest, part, part.role);
+        }
+        slider.children = rest;
+    }
+    syncSliderParts(slider, create);
+    return true;
+}
 /** True when a saved slider still relies on Swiper-drawn controls: a switch is on and no part exists yet. */
 function needsSliderMigration(slider) {
     return !!slider && isSlider(slider) && !hasSliderParts(slider) && wantedSliderParts(slider).length > 0;
@@ -2248,6 +2417,8 @@ function buildCarouselRecipe(create, options = {}) {
         // Rewind: Previous and Next are always there to press (board 6) — neither greys out at an end.
         slidesPerView: 1, spaceBetween: 0, loop: 'rewind', enableNavigation: true, enablePagination: true, enableAutoplay: true, autoplayDelay: 5000,
         autoplayPauseOnMouseEnter: true, autoHeight: true, [SLIDER_NAME_TRAIT]: options.name ?? 'What clients say',
+        // Board 6 draws its controls in a row above the quotes — its own place, not the M4 bar under a picture.
+        [SLIDER_PLACEMENT_TRAIT]: SliderPlacement.Over,
     }))
         writeProp(slider, name, value);
     slider.children = (options.quotes ?? CAROUSEL_QUOTES).map((q, i) => {
@@ -2312,13 +2483,17 @@ const COMPOSITE_ROLE_SPECS = {
     // A Scene always keeps its stage: everything it pins and clips lives there.
     [SceneRole.Scene]: { parent: null },
     [SceneRole.Stage]: { parent: SceneRole.Scene, locked: true },
-    // CC3 — a Slider's controls are its own direct children (Swiper is handed them). The pause control stays while
-    // Autoplay is on (WCAG 2.2.2): the Autoplay switch removes it, never Delete. The arrows and the dots follow
-    // their switches and may be deleted.
-    [SliderRole.Pause]: { parent: null, parentType: SLIDER_TYPE, locked: true },
-    [SliderRole.Prev]: { parent: null, parentType: SLIDER_TYPE, pinned: true },
-    [SliderRole.Next]: { parent: null, parentType: SLIDER_TYPE, pinned: true },
-    [SliderRole.Pagination]: { parent: null, parentType: SLIDER_TYPE, pinned: true },
+    // CC3 — a Slider's controls are its own direct children (Swiper is handed them) — or, premium M4, children of its
+    // bar under the picture. The pause control stays while Autoplay is on (WCAG 2.2.2): the Autoplay switch removes it,
+    // never Delete. The arrows, the dots, the caption and the count follow their switches and may be deleted; the bar
+    // follows Slider ▸ Controls.
+    [SliderRole.Pause]: { parent: SliderRole.Bar, parentType: SLIDER_TYPE, locked: true },
+    [SliderRole.Prev]: { parent: SliderRole.Bar, parentType: SLIDER_TYPE, pinned: true },
+    [SliderRole.Next]: { parent: SliderRole.Bar, parentType: SLIDER_TYPE, pinned: true },
+    [SliderRole.Pagination]: { parent: SliderRole.Bar, parentType: SLIDER_TYPE, pinned: true },
+    [SliderRole.Bar]: { parent: null, parentType: SLIDER_TYPE, pinned: true },
+    [SliderRole.Caption]: { parent: SliderRole.Bar, pinned: true },
+    [SliderRole.Count]: { parent: SliderRole.Bar, pinned: true },
 };
 var StructureEdit;
 (function (StructureEdit) {
@@ -2348,7 +2523,7 @@ function structureRefusal(node, edit, ancestors = []) {
         return null;
     if (edit === StructureEdit.Delete)
         return spec.locked ? StructureRefusal.LockedPart : null;
-    const placed = spec.parentType ? parent?.type === spec.parentType : parent?.role === spec.parent;
+    const placed = (!!spec.parentType && parent?.type === spec.parentType) || (spec.parent !== null && parent?.role === spec.parent);
     return placed ? null : StructureRefusal.LockedPlacement;
 }
 /** True when `node` is a locked part (shown with a lock and no delete in the layer tree). Deleting a whole
@@ -2508,6 +2683,77 @@ function attachCarouselA11y(swiper, options = {}) {
     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. */
+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). */
+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. */
+function sliderCaptionOf(slide) {
+    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. */
+function sliderCountText(index, total) {
+    if (!(total > 0))
+        return '';
+    const i = Math.min(total - 1, Math.max(0, Math.floor(Number.isFinite(index) ? index : 0)));
+    return `${i + 1} / ${total}`;
+}
+/**
+ * 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.
+ */
+function attachSliderBar(swiper) {
+    (swiper.el[BAR_RUNTIME_KEY])?.();
+    const caption = sliderPartElement(swiper.el, SliderRole.Caption);
+    const count = sliderPartElement(swiper.el, SliderRole.Count);
+    if (!caption && !count)
+        return () => { };
+    const view = swiper.el.ownerDocument?.defaultView;
+    const raf = (fn) => (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[BAR_RUNTIME_KEY];
+    };
+    swiper.el[BAR_RUNTIME_KEY] = stop;
+    return stop;
+}
 
 /**
  * THE LIGHTBOX (CC3 — complex-components plan §7d, board 6). Not a component: a Dialog holding a Slider bound to the
@@ -3931,6 +4177,28 @@ function runCompositeItemAction(el, action) {
     return runtime ? runtime.run(action, runtime.keyOf(item.el)) : null;
 }
 
+/**
+ * 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.
+ */
+function setHeaderBehaviour(node, behaviour, edge) {
+    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). */
+function headerBehaviourOfNode(node) {
+    return {
+        behaviour: headerBehaviourOf(node ? readProp(node, HeaderTrait.Behaviour) : undefined),
+        edge: headerEdgeOf(node ? readProp(node, HeaderTrait.Edge) : undefined),
+    };
+}
+
 /**
  * @vectoriox/iox-ui/composite-core — composites built from the builder's own parts (composite-components
  * plan §3a). FRAMEWORK-FREE: the builder, the SSR engine and iox-cms (generation-core's composer, the site
@@ -3946,5 +4214,5 @@ function runCompositeItemAction(el, action) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACCORDION_BIND_PROP, ACCORDION_CONTENT_LIMIT, ACCORDION_DEFAULT_ONS, ACCORDION_ICONS, ACCORDION_ICON_GLYPH, ACCORDION_NEW_ITEM_WORDS, ACCORDION_WORDS, ACTIVATE_ON_ATTRIBUTE, AccordionClass, AccordionDefaultOn, AccordionEditRefusal, AccordionIcon, AccordionKeyAction, AccordionRole, AccordionRuntime, BADGE_TONES, BADGE_TONE_ICONS, BadgeTone, CARD_LAYOUTS, CARD_LAYOUT_CUSTOM, CARD_PARTS, CARD_PART_ROLE, CARD_STACK_BREAKPOINT, CARD_WORDS, CAROUSEL_QUOTES, CHIP_ICON, CHIP_STYLE, COMPOSITE_ATTRIBUTE, COMPOSITE_KIND_ROLES, COMPOSITE_ROLE_SPECS, CardLayout, CardPart, CardRole, CarouselA11y, CompositeBehaviourTrait, CompositeItemAction, CompositeKind, DEFAULT_ON_ATTRIBUTE, DISCLOSURE_ITEM_KEY, DISCLOSURE_WORDS, DisclosureRole, EXCLUSIVE_KIND_ROLES, ExclusiveRuntime, ITEM_KEY_ATTRIBUTE, ITEM_OFF_EVENT, ITEM_ON_EVENT, ITEM_OPEN_STATE, LIGHTBOX_ARROWS_HIDE_AT, LIGHTBOX_LABEL, MULTIPLE_ATTRIBUTE, NO_ELEMENT_STYLE, ON_ATTRIBUTE, ON_STATE, ORIENTATION_ATTRIBUTE, PILL_LABEL_STYLE, SCOPE_ATTRIBUTE, SEGMENTED_BADGE_TONE, SEGMENTED_BADGE_WORDS, SEGMENTED_BEHAVIOUR, SEGMENTED_MAX_OPTIONS, SEGMENTED_MIN_OPTIONS, SEGMENTED_NAME, SEGMENTED_NEW_OPTION_WORDS, SEGMENTED_WORDS, SLIDER_NAME_TRAIT, SLIDER_PART_GLYPH, SLIDER_PART_ROLES, SLIDER_PLAY_GLYPH, SLIDER_TYPE, SLIDER_WORDS, SLIDE_TO_ROW, SLIDE_TYPE, SWIPER_THEME_COLOR, SceneRole, SegmentedEditRefusal, SegmentedRole, SegmentedTrait, SliderFlag, SliderRole, StructureEdit, StructureRefusal, TABS_ACTIVATE_ONS, TABS_CONTENT_LIMIT, TABS_IMAGE_BIND_PROP, TABS_LABEL_BIND_PROP, TABS_NEW_TAB_WORDS, TABS_ORIENTATIONS, TABS_STACK_BREAKPOINT, TABS_TEXT_BIND_PROP, TABS_WORDS, TabsActivateOn, TabsBehaviourTrait, TabsEditRefusal, TabsOrientation, TabsRole, UNTIL_FOUND, acceptsRefusal, accordionAnswerOf, accordionBehaviour, accordionDomIds, accordionFocusIndex, accordionHeadingLevel, accordionItemAttributes, accordionItemLabel, accordionItemOf, accordionItemState, accordionItems, accordionKeyAction, accordionPanelAttributes, accordionPanelOf, accordionPartStyle, accordionQuestionOf, accordionRegionAttributes, accordionRemovalRefusal, accordionRootAttributes, accordionRootOf, accordionRootOfItem, accordionRuntimeOf, accordionScope, accordionToContent, accordionToManual, accordionTrackAttributes, accordionTriggerAttributes, accordionTriggerOf, addAccordionItem, addSegmentedOption, addTabPair, applyCardLayout, attachAccordionAt, attachAccordions, attachCarouselA11y, attachCompositeAt, attachExclusiveAt, badgeStyleId, badgeToneOf, buildAccordionItem, buildAccordionRecipe, buildBadge, buildCardRecipe, buildCarouselRecipe, buildChip, buildCompositeIcon, buildDisclosureRecipe, buildLightboxRecipe, buildSegmentedOption, buildSegmentedRecipe, buildSliderPart, buildTabPair, buildTabsRecipe, canOpenAtClickedItem, cardPartsOf, cardRootOf, cardTitleOf, carouselOf, clearLayerStyles, closeAccordionItem, closestAccordion, closestAccordionItem, closestExclusive, closestExclusiveItemPart, compositeItemOf, compositeItems, compositeKindOfRole, compositeRootOf, compositeRowKeys, compositeScopeId, detachAccordion, detectAccordionIcon, detectCardLayout, disclosureOpenByDefault, domSafeKey, exclusiveBehaviourOf, exclusiveDefaultOf, exclusiveItemLabel, exclusiveItemPartOf, exclusiveKindHasPanels, exclusiveKindOf, exclusiveLabelOf, exclusivePartAttributes, exclusiveRootAttributesOf, exclusiveRootHoldsTriggers, exclusiveRootOf, exclusiveRuntimeOf, exclusiveScopeFor, findByRole, hasLabelledRegion, hasSliderParts, initialAccordionOpen, isAccordionFromContent, isAccordionItemOn, isAccordionPart, isAccordionRoot, isAnyCompositeRoot, isCardLinked, isCardRoot, isCompositeItem, isCompositeItemOn, isCompositePanel, isCompositeRoot, isCompositeTrigger, isDisclosurePart, isDisclosureRoot, isExclusiveItemOn, isExclusiveItemPart, isExclusiveKind, isExclusiveList, isExclusivePanel, isExclusivePanels, isExclusiveRoot, isExclusiveTrigger, isLockedPart, isPartOfExclusiveScope, isPillNode, isSegmentedPart, isSegmentedRoot, isSlider, isSliderPart, isTabsFromContent, isTabsPart, isTabsRoot, isToggleKind, itemOpenTriggerIds, lightboxSliderOf, makeCompositePart, manualTabKeys, migrateSliderControls, moveAccordionItem, moveSegmentedOption, moveTabPair, needsSliderMigration, nextAccordionState, nextItemKey, nextSegmentedKey, nextTabKey, onAccordionItemState, onCompositeItemState, onExclusiveItemState, openAccordionItem, parentInComposite, pickAccordionAutoBinds, pickTabsAutoBinds, readLayerStyle, readProp, readStyle, removeFromComposite, removeSegmentedOption, removeTabPair, renameAccordionItem, renameSegmentedOption, renameTab, repeatSourceOf, rowIndexOf, rowItemKey, rowSourceOf, runCompositeItemAction, sameRepeatSource, segmentedAddRefusal, segmentedBadgeOf, segmentedDefaultOn, segmentedItemTriggerIds, segmentedKeyAction, segmentedKeys, segmentedLabel, segmentedOptionAttributes, segmentedOptionKey, segmentedOptionLabel, segmentedOptionLabelNodeOf, segmentedOptions, segmentedPartAttributes, segmentedRemovalRefusal, segmentedRootAttributes, segmentedRootAttributesOf, segmentedScopeFor, serializeDomAttributes, setAccordionBehaviour, setAccordionIcon, setBadgeTone, setCardLinked, setCardPart, setSegmentedBadge, setSegmentedBehaviour, setSliderFlag, setTabsBehaviour, shouldScrollToItem, slideIndexForRow, sliderLiveRegion, sliderPart, sliderPartElement, sliderPauseAttributes, sliderPauseGlyph, sliderSlides, sliderWords, splitSliderChildren, structureRefusal, syncSliderParts, tabLabel, tabLabelNodeOf, tabListAttributes, tabPanelAttributes, tabPanelImageOf, tabPanelOf, tabPanelTextOf, tabPartKey, tabTriggerAttributes, tabTriggerOf, tabsBehaviour, tabsItemState, tabsItemTriggerIds, tabsKeyAction, tabsLabel, tabsListOf, tabsPanels, tabsPanelsOf, tabsPartAttributes, tabsPartnerOf, tabsRemovalRefusal, tabsRootAttributes, tabsScope, tabsScopeFor, tabsToContent, tabsToManual, tabsTriggers, walkComposite, wantedSliderParts, writeLayerStyles, writeProp, writeStyles };
+export { ACCORDION_BIND_PROP, ACCORDION_CONTENT_LIMIT, ACCORDION_DEFAULT_ONS, ACCORDION_ICONS, ACCORDION_ICON_GLYPH, ACCORDION_NEW_ITEM_WORDS, ACCORDION_WORDS, ACTIVATE_ON_ATTRIBUTE, AccordionClass, AccordionDefaultOn, AccordionEditRefusal, AccordionIcon, AccordionKeyAction, AccordionRole, AccordionRuntime, BADGE_TONES, BADGE_TONE_ICONS, BadgeTone, CARD_LAYOUTS, CARD_LAYOUT_CUSTOM, CARD_PARTS, CARD_PART_ROLE, CARD_STACK_BREAKPOINT, CARD_WORDS, CAROUSEL_QUOTES, CHIP_ICON, CHIP_STYLE, COMPOSITE_ATTRIBUTE, COMPOSITE_KIND_ROLES, COMPOSITE_ROLE_SPECS, CardLayout, CardPart, CardRole, CarouselA11y, CompositeBehaviourTrait, CompositeItemAction, CompositeKind, DEFAULT_ON_ATTRIBUTE, DISCLOSURE_ITEM_KEY, DISCLOSURE_WORDS, DisclosureRole, EXCLUSIVE_KIND_ROLES, ExclusiveRuntime, ITEM_KEY_ATTRIBUTE, ITEM_OFF_EVENT, ITEM_ON_EVENT, ITEM_OPEN_STATE, LIGHTBOX_ARROWS_HIDE_AT, LIGHTBOX_LABEL, MULTIPLE_ATTRIBUTE, NO_ELEMENT_STYLE, ON_ATTRIBUTE, ON_STATE, ORIENTATION_ATTRIBUTE, PILL_LABEL_STYLE, SCOPE_ATTRIBUTE, SEGMENTED_BADGE_TONE, SEGMENTED_BADGE_WORDS, SEGMENTED_BEHAVIOUR, SEGMENTED_MAX_OPTIONS, SEGMENTED_MIN_OPTIONS, SEGMENTED_NAME, SEGMENTED_NEW_OPTION_WORDS, SEGMENTED_WORDS, SLIDER_BAR_ORDER, SLIDER_NAME_TRAIT, SLIDER_PART_GLYPH, SLIDER_PART_ROLES, SLIDER_PLACEMENT_TRAIT, SLIDER_PLAY_GLYPH, SLIDER_SCROLL_PLAYS_TRAIT, SLIDER_SWAPPING_ATTRIBUTE, SLIDER_TEXT_ATTRIBUTE, SLIDER_TYPE, SLIDER_WORDS, SLIDE_CAPTION_TRAIT, SLIDE_TO_ROW, SLIDE_TYPE, SWIPER_THEME_COLOR, SceneRole, SegmentedEditRefusal, SegmentedRole, SegmentedTrait, SliderFlag, SliderPlacement, SliderRole, StructureEdit, StructureRefusal, TABS_ACTIVATE_ONS, TABS_CONTENT_LIMIT, TABS_IMAGE_BIND_PROP, TABS_LABEL_BIND_PROP, TABS_NEW_TAB_WORDS, TABS_ORIENTATIONS, TABS_STACK_BREAKPOINT, TABS_TEXT_BIND_PROP, TABS_WORDS, TabsActivateOn, TabsBehaviourTrait, TabsEditRefusal, TabsOrientation, TabsRole, UNTIL_FOUND, acceptsRefusal, accordionAnswerOf, accordionBehaviour, accordionDomIds, accordionFocusIndex, accordionHeadingLevel, accordionItemAttributes, accordionItemLabel, accordionItemOf, accordionItemState, accordionItems, accordionKeyAction, accordionPanelAttributes, accordionPanelOf, accordionPartStyle, accordionQuestionOf, accordionRegionAttributes, accordionRemovalRefusal, accordionRootAttributes, accordionRootOf, accordionRootOfItem, accordionRuntimeOf, accordionScope, accordionToContent, accordionToManual, accordionTrackAttributes, accordionTriggerAttributes, accordionTriggerOf, addAccordionItem, addSegmentedOption, addTabPair, applyCardLayout, attachAccordionAt, attachAccordions, attachCarouselA11y, attachCompositeAt, attachExclusiveAt, attachSliderBar, badgeStyleId, badgeToneOf, buildAccordionItem, buildAccordionRecipe, buildBadge, buildCardRecipe, buildCarouselRecipe, buildChip, buildCompositeIcon, buildDisclosureRecipe, buildLightboxRecipe, buildSegmentedOption, buildSegmentedRecipe, buildSliderPart, buildTabPair, buildTabsRecipe, canOpenAtClickedItem, cardPartsOf, cardRootOf, cardTitleOf, carouselOf, clearLayerStyles, closeAccordionItem, closestAccordion, closestAccordionItem, closestExclusive, closestExclusiveItemPart, compositeItemOf, compositeItems, compositeKindOfRole, compositeRootOf, compositeRowKeys, compositeScopeId, detachAccordion, detectAccordionIcon, detectCardLayout, disclosureOpenByDefault, domSafeKey, exclusiveBehaviourOf, exclusiveDefaultOf, exclusiveItemLabel, exclusiveItemPartOf, exclusiveKindHasPanels, exclusiveKindOf, exclusiveLabelOf, exclusivePartAttributes, exclusiveRootAttributesOf, exclusiveRootHoldsTriggers, exclusiveRootOf, exclusiveRuntimeOf, exclusiveScopeFor, findByRole, hasLabelledRegion, hasSliderParts, headerBehaviourOfNode, initialAccordionOpen, isAccordionFromContent, isAccordionItemOn, isAccordionPart, isAccordionRoot, isAnyCompositeRoot, isCardLinked, isCardRoot, isCompositeItem, isCompositeItemOn, isCompositePanel, isCompositeRoot, isCompositeTrigger, isDisclosurePart, isDisclosureRoot, isExclusiveItemOn, isExclusiveItemPart, isExclusiveKind, isExclusiveList, isExclusivePanel, isExclusivePanels, isExclusiveRoot, isExclusiveTrigger, isLockedPart, isPartOfExclusiveScope, isPillNode, isSegmentedPart, isSegmentedRoot, isSlider, isSliderPart, isTabsFromContent, isTabsPart, isTabsRoot, isToggleKind, itemOpenTriggerIds, lightboxSliderOf, makeCompositePart, manualTabKeys, migrateSliderControls, moveAccordionItem, moveSegmentedOption, moveTabPair, needsSliderMigration, nextAccordionState, nextItemKey, nextSegmentedKey, nextTabKey, onAccordionItemState, onCompositeItemState, onExclusiveItemState, openAccordionItem, parentInComposite, pickAccordionAutoBinds, pickTabsAutoBinds, readLayerStyle, readProp, readStyle, removeFromComposite, removeSegmentedOption, removeTabPair, renameAccordionItem, renameSegmentedOption, renameTab, repeatSourceOf, rowIndexOf, rowItemKey, rowSourceOf, runCompositeItemAction, sameRepeatSource, segmentedAddRefusal, segmentedBadgeOf, segmentedDefaultOn, segmentedItemTriggerIds, segmentedKeyAction, segmentedKeys, segmentedLabel, segmentedOptionAttributes, segmentedOptionKey, segmentedOptionLabel, segmentedOptionLabelNodeOf, segmentedOptions, segmentedPartAttributes, segmentedRemovalRefusal, segmentedRootAttributes, segmentedRootAttributesOf, segmentedScopeFor, serializeDomAttributes, setAccordionBehaviour, setAccordionIcon, setBadgeTone, setCardLinked, setCardPart, setHeaderBehaviour, setSegmentedBadge, setSegmentedBehaviour, setSliderFlag, setSliderPlacement, setTabsBehaviour, shouldScrollToItem, slideIndexForRow, sliderCaptionOf, sliderCountText, sliderLiveRegion, sliderPart, sliderPartElement, sliderPauseAttributes, sliderPauseGlyph, sliderPlacementOf, sliderSlides, sliderWords, splitSliderChildren, structureRefusal, syncSliderParts, tabLabel, tabLabelNodeOf, tabListAttributes, tabPanelAttributes, tabPanelImageOf, tabPanelOf, tabPanelTextOf, tabPartKey, tabTriggerAttributes, tabTriggerOf, tabsBehaviour, tabsItemState, tabsItemTriggerIds, tabsKeyAction, tabsLabel, tabsListOf, tabsPanels, tabsPanelsOf, tabsPartAttributes, tabsPartnerOf, tabsRemovalRefusal, tabsRootAttributes, tabsScope, tabsScopeFor, tabsToContent, tabsToManual, tabsTriggers, walkComposite, wantedSliderParts, writeLayerStyles, writeProp, writeStyles };
 //# sourceMappingURL=vectoriox-iox-ui-composite-core.mjs.map