@vectoriox/iox-ui 5.84.0 → 5.86.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-ui",
-  "version": "5.84.0",
+  "version": "5.86.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/action.model.ts

@@ -11,7 +11,7 @@ export type ActionKind = 'animated' | 'instant' | 'server';
 
 /** Picker grouping. Flat lists die at ~10 entries; the group is data, never a second list. */
 export type ActionGroup =
-    | 'motion' | 'visibility' | 'navigate' | 'dialog' | 'item' | 'form' | 'data' | 'consent' | 'service';
+    | 'motion' | 'visibility' | 'navigate' | 'dialog' | 'popover' | 'notice' | 'item' | 'form' | 'data' | 'consent' | 'service';
 
 /**
  * What a step does inside the live builder canvas (the canvas RUNS interactions):

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/actions-core/dialog-opener.ts

@@ -56,18 +56,24 @@ export interface OpenerNodeLike {
 
 const SELF = 'self';
 
-/** The Dialog node id the element's click opens (its first enabled opener action), or null. */
-export function openedDialogId(node: OpenerNodeLike | null | undefined): string | null {
+/** The node id the element's click opens through one of `openerTypes` (its first enabled such action), or null —
+ *  the ONE reading every opener kind shares (a dialog's, a popover's). */
+export function openedTargetId(node: OpenerNodeLike | null | undefined, openerTypes: ReadonlySet<string>): string | null {
     for (const ix of node?.interactions ?? []) {
         if (ix?.trigger !== DIALOG_OPENER_TRIGGER) continue;
         for (const action of ix.actions ?? []) {
-            if (!action || action.disabled === true || !DIALOG_OPENER_ACTION_TYPES.has(String(action.type))) continue;
+            if (!action || action.disabled === true || !openerTypes.has(String(action.type))) continue;
             if (action.target && action.target !== SELF) return action.target;
         }
     }
     return null;
 }
 
+/** The Dialog node id the element's click opens (its first enabled opener action), or null. */
+export function openedDialogId(node: OpenerNodeLike | null | undefined): string | null {
+    return openedTargetId(node, DIALOG_OPENER_ACTION_TYPES);
+}
+
 /**
  * The opener attributes for a node: `{}` when its click opens no dialog, else
  * `aria-haspopup="dialog"`, `aria-controls="iox-dialog-<id>"` and `aria-expanded` (`false` unless

package/src/actions-core/element-actions.ts

@@ -1,6 +1,7 @@
 import { AccordionRole, CompositeItemAction, DisclosureRole, SegmentedRole, SLIDE_TO_ROW, TabsRole } from '@vectoriox/iox-ui/composite-core';
 
 import { ActionDescriptor } from './action.model';
+import { POPOVER_NODE_TYPE } from './popover-opener';
 
 /** The items an item action may target: an accordion's item, or a disclosure (its own one item). */
 const ITEM_TARGET_ROLES = [AccordionRole.Item, DisclosureRole.Disclosure];
@@ -72,6 +73,26 @@ export const ELEMENT_ACTION_DESCRIPTORS: readonly ActionDescriptor[] = Object.fr
     { type: 'toggleDialog', labelKey: 'builder.actions.toggleDialog', kind: 'instant', group: 'dialog', builderBehaviour: 'run',
       target: { required: true, types: ['Dialog'] } },
 
+    // ── Popover (premium M5, N4): an anchored, NON-modal panel beside the element that opens it. The canvas RUNS them,
+    // like the dialog actions — a popover you cannot open from its button is a popover you cannot design.
+    { type: 'openPopover',   labelKey: 'builder.actions.openPopover',   kind: 'instant', group: 'popover', builderBehaviour: 'run',
+      target: { required: true, types: [POPOVER_NODE_TYPE] } },
+    { type: 'closePopover',  labelKey: 'builder.actions.closePopover',  kind: 'instant', group: 'popover', builderBehaviour: 'run',
+      target: { required: true, types: [POPOVER_NODE_TYPE] } },
+    { type: 'togglePopover', labelKey: 'builder.actions.togglePopover', kind: 'instant', group: 'popover', builderBehaviour: 'run',
+      target: { required: true, types: [POPOVER_NODE_TYPE] } },
+
+    // ── Notice (premium M5, N3): a toast at an edge of the screen — the author's words, never the visitor's. The canvas
+    // RUNS it inside the page's frame.
+    { type: 'showToast', labelKey: 'builder.actions.showToast', kind: 'instant', group: 'notice', builderBehaviour: 'run',
+      params: [
+          { name: 'text', type: 'string', label: 'builder.actions.params.toastText' },
+          { name: 'edge', type: 'string', label: 'builder.actions.params.toastEdge', options: [
+              { value: 'bottom', labelKey: 'builder.actions.params.toastBottom' },
+              { value: 'top', labelKey: 'builder.actions.params.toastTop' },
+          ] },
+      ] },
+
     // ── Item (CC2.1 — composite T14): drive an accordion item or a disclosure from anywhere ("See shipping"
     // opens FAQ item 3). The canvas RUNS them, like the dialog actions: it is the same runtime, and an item you
     // cannot open from the button is a button you cannot design.
@@ -147,6 +168,9 @@ export const SERVER_ELEMENT_ACTION_TYPES: ReadonlySet<string> =
 export const BEHAVIOUR_ACTION_TYPES: ReadonlySet<string> =
     new Set(['navigate', 'scrollTo', 'submitForm', 'copyToClipboard']);
 
+/** The toast action's dispatch set (premium M5) — the engines branch on it beside DIALOG / POPOVER. */
+export const TOAST_ACTION_TYPES: ReadonlySet<string> = new Set(['showToast']);
+
 /** The item actions' dispatch set (T14) and what each does to its item — the engines branch on it beside
  *  DIALOG/BEHAVIOUR, and composite-core `runCompositeItemAction` runs it on the target item's own runtime. */
 export const ITEM_ACTION_TYPES: Readonly<Record<string, CompositeItemAction>> = Object.freeze({
@@ -172,7 +196,7 @@ export const CONSENT_ACTION_TYPES: ReadonlySet<string> =
 
 /** Picker order — most-used groups first, services last (they are the shop window, not the shop). */
 export const ELEMENT_ACTION_GROUP_ORDER: readonly string[] =
-    Object.freeze(['motion', 'visibility', 'navigate', 'dialog', 'item', 'form', 'data', 'consent', 'service']);
+    Object.freeze(['motion', 'visibility', 'navigate', 'dialog', 'popover', 'notice', 'item', 'form', 'data', 'consent', 'service']);
 
 /** The catalog, grouped and ordered for the picker — one derivation, no hand-kept second list. */
 export function groupedElementActions(): ReadonlyArray<{ group: string; actions: ActionDescriptor[] }> {

package/src/actions-core/popover-opener.ts

@@ -0,0 +1,50 @@
+import { OpenerAttribute, OpenerNodeLike, openedTargetId } from './dialog-opener';
+
+/**
+ * What an element that OPENS a popover says about itself (premium components M5, N4 — the APG disclosure pattern over a
+ * non-modal dialog): `aria-haspopup="dialog"`, `aria-controls` = the popover's DOM id, and `aria-expanded` — `false` in
+ * the server render, kept in step by the runtime. ONE decision for every renderer, read the way a dialog opener is
+ * (`openedTargetId`); the popover's DOM id comes from `popoverDomId`, the one place that names it.
+ */
+
+/** The Popover node type. */
+export const POPOVER_NODE_TYPE = 'Popover';
+
+/** The actions that open a popover (close-only actions do not make an opener). */
+export const POPOVER_OPENER_ACTION_TYPES: ReadonlySet<string> = new Set(['openPopover', 'togglePopover']);
+
+/** Every action that opens, closes or toggles a popover — what the engines dispatch. */
+export const POPOVER_ACTION_TYPE_SET: ReadonlySet<string> = new Set(['openPopover', 'closePopover', 'togglePopover']);
+
+const POPOVER_ID_PREFIX = 'iox-popover-';
+
+/** The DOM id of a Popover node's panel — what an opener's `aria-controls` names. */
+export function popoverDomId(nodeId: string): string {
+    return `${POPOVER_ID_PREFIX}${nodeId}`;
+}
+
+/** The node id a popover DOM id names, or null. */
+export function nodeIdOfPopoverDomId(domId: string | null | undefined): string | null {
+    return domId && domId.startsWith(POPOVER_ID_PREFIX) ? domId.slice(POPOVER_ID_PREFIX.length) : null;
+}
+
+/** The Popover node id the element's click opens, or null. */
+export function openedPopoverId(node: OpenerNodeLike | null | undefined): string | null {
+    return openedTargetId(node, POPOVER_OPENER_ACTION_TYPES);
+}
+
+/** The opener attributes for a node: `{}` when its click opens no popover. */
+export function popoverOpenerAttributes(node: OpenerNodeLike | null | undefined, open = false): Record<string, string> {
+    const popoverId = openedPopoverId(node);
+    if (!popoverId) return {};
+    return {
+        [OpenerAttribute.HasPopup]: 'dialog',
+        [OpenerAttribute.Controls]: popoverDomId(popoverId),
+        [OpenerAttribute.Expanded]: open ? 'true' : 'false',
+    };
+}
+
+/** The selector of every opener of one popover (by its DOM id). */
+export function popoverOpenersSelector(popoverDomIdValue: string): string {
+    return `[${OpenerAttribute.Controls}="${popoverDomIdValue}"]`;
+}

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

@@ -12,4 +12,5 @@ export * from './action.model';
 export * from './availability';
 export * from './element-actions';
 export * from './dialog-opener';
+export * from './popover-opener';
 export * from './dialog-motion';

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;
+}