@vectoriox/iox-ui 5.36.0 → 5.38.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -7,7 +7,10 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import Lenis from 'lenis';
+import { SLIDER_WORDS, sliderPartElement, SliderRole, sliderWords, attachCarouselA11y, isSliderPart } from '@vectoriox/iox-ui/composite-core';
 import { dialogOpenerAttributes, dialogDomId } from '@vectoriox/iox-ui/actions-core';
+import { planVideo, videoRootAttributes, videoInnerHtml, videoWords, VideoAttribute, attachVideoAt, VideoClass } from '@vectoriox/iox-ui/media-core';
+import * as i1$1 from '@angular/platform-browser';
 export * from '@vectoriox/iox-ui/design-core';
 
 class ViewPositionDirective {
@@ -1397,6 +1400,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 args: ['childrenHost', { read: ViewContainerRef, static: true }]
             }] } });
 
+/**
+ * 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.
+ */
+const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';
+function defaultHost() {
+    return typeof window !== 'undefined' ? window : null;
+}
+/** True when the visitor asked their system for reduced motion. No `matchMedia` (SSR) → false. */
+function prefersReducedMotion(host = defaultHost()) {
+    try {
+        return !!host?.matchMedia?.(REDUCED_MOTION_QUERY)?.matches;
+    }
+    catch {
+        return false;
+    }
+}
+/** True when script may animate. The ONE question every runtime asks before moving anything. */
+function motionAllowed(host = defaultHost()) {
+    return !prefersReducedMotion(host);
+}
+
 // Virtual trait → composed CSS property helpers.
 //
 // Several style traits are "virtual" — they don't map 1:1 to a CSS property but
@@ -2197,30 +2224,6 @@ function sameValues(a, b) {
     return true;
 }
 
-/**
- * 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.
- */
-const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';
-function defaultHost() {
-    return typeof window !== 'undefined' ? window : null;
-}
-/** True when the visitor asked their system for reduced motion. No `matchMedia` (SSR) → false. */
-function prefersReducedMotion(host = defaultHost()) {
-    try {
-        return !!host?.matchMedia?.(REDUCED_MOTION_QUERY)?.matches;
-    }
-    catch {
-        return false;
-    }
-}
-/** True when script may animate. The ONE question every runtime asks before moving anything. */
-function motionAllowed(host = defaultHost()) {
-    return !prefersReducedMotion(host);
-}
-
 /**
  * Which Swiper modules a Slider loads, and how its autoplay boots — a pure decision, so the module list
  * is unit-tested (CC1 R1/R2 floor; complex-components plan §7c). Swiper's A11y module is ALWAYS loaded:
@@ -2240,6 +2243,7 @@ var SwiperModuleName;
     SwiperModuleName["Zoom"] = "Zoom";
     SwiperModuleName["Grid"] = "Grid";
     SwiperModuleName["Parallax"] = "Parallax";
+    SwiperModuleName["FreeMode"] = "FreeMode";
 })(SwiperModuleName || (SwiperModuleName = {}));
 const FLAGGED = [
     ['enableNavigation', SwiperModuleName.Navigation],
@@ -2270,33 +2274,242 @@ const SWIPER_A11Y_OPTIONS = {
     slideLabelMessage: '{{index}} of {{slidesLength}}',
 };
 
-class ClientSliderContainerComponent {
-    /** The base (Base-breakpoint) values of the traits Swiper reads per width. Read from the live
-     *  inputs rather than the node, so the builder's direct-assignment edits are picked up too. */
-    collectSwiperInputs() {
-        const all = {
-            slidesPerView: this.slidesPerView,
-            slidesPerGroup: this.slidesPerGroup,
-            spaceBetween: this.spaceBetween,
+/** The selectors Swiper's own (legacy) controls answer to inside `.swiper`. */
+const LEGACY_SWIPER_CONTROLS = {
+    prev: '.swiper-button-prev',
+    next: '.swiper-button-next',
+    pagination: '.swiper-pagination',
+    scrollbar: '.swiper-scrollbar',
+};
+/** The pagination part's classes — Swiper's own position CSS (`.swiper-pagination-bullets.swiper-pagination-horizontal`)
+ *  must not pin a PART: its place is its own styles'. The dots keep Swiper's bullet class. */
+const PART_PAGINATION_MODIFIER = 'iox-slider-pagination-';
+const EFFECT_MODULES = {
+    fade: 'EffectFade', cube: 'EffectCube', flip: 'EffectFlip', coverflow: 'EffectCoverflow', cards: 'EffectCards', creative: 'EffectCreative',
+};
+const num$1 = (v, fallback) => {
+    const n = typeof v === 'number' ? v : Number(v);
+    return Number.isFinite(n) ? n : fallback;
+};
+const on = (v) => v === true || v === 'true';
+/** The loop trait as Swiper's two booleans. `'off'` is a string — truthy — which made every saved slider loop. */
+function swiperLoopOptions(loop) {
+    return { loop: loop === true || loop === 'loop' || loop === 'true', rewind: loop === 'rewind' };
+}
+/** `slidesPerView` as Swiper reads it: a number, or `'auto'`. */
+function perView(v) {
+    if (v === 'auto' || v === undefined || v === null || v === '')
+        return 'auto';
+    const n = num$1(v, 1);
+    return n > 0 ? n : 'auto';
+}
+function collectResponsiveInputs(inputs) {
+    const all = { slidesPerView: inputs.slidesPerView, slidesPerGroup: inputs.slidesPerGroup, spaceBetween: inputs.spaceBetween };
+    const out = {};
+    for (const name of SWIPER_RESPONSIVE_TRAITS)
+        if (all[name] !== undefined)
+            out[name] = all[name];
+    return out;
+}
+function planSwiperOptions(inputs, ctx) {
+    const words = ctx.words ?? SLIDER_WORDS.en;
+    const parts = ctx.parts ?? null;
+    const edit = !!ctx.edit;
+    const hasNav = parts ? !!(parts.prev || parts.next) : on(inputs.enableNavigation);
+    const hasDots = parts ? !!parts.pagination : on(inputs.enablePagination);
+    const autoplay = !edit && on(inputs.enableAutoplay);
+    const flags = {
+        enableNavigation: hasNav,
+        enablePagination: hasDots,
+        enableScrollbar: on(inputs.enableScrollbar),
+        // The Autoplay module is LOADED whenever the switch is on, so a visitor under reduced motion can still start
+        // it from the pause control — it never BOOTS then (`autoplay.enabled`).
+        enableAutoplay: autoplay,
+        enableKeyboard: !edit && on(inputs.enableKeyboard),
+        enableMousewheel: !edit && on(inputs.enableMousewheel),
+        enableZoom: !edit && on(inputs.enableZoom),
+        enableGrid: !edit && on(inputs.enableGrid),
+        enableParallax: !edit && on(inputs.enableParallax),
+    };
+    const modules = swiperModuleNames(flags, true);
+    if (!edit && on(inputs.freeMode))
+        modules.push(SwiperModuleName.FreeMode);
+    const effect = edit ? 'slide' : (inputs.effect || 'slide');
+    const options = {
+        dir: inputs.dir === 'rtl' ? 'rtl' : 'ltr',
+        direction: inputs.direction === 'vertical' ? 'vertical' : 'horizontal',
+        slidesPerView: perView(inputs.slidesPerView),
+        slidesPerGroup: Math.max(1, num$1(inputs.slidesPerGroup, 1)),
+        spaceBetween: num$1(inputs.spaceBetween, 0),
+        speed: edit ? 300 : num$1(inputs.speed, 300),
+        effect,
+        centeredSlides: on(inputs.centeredSlides),
+        initialSlide: num$1(inputs.initialSlide, 0),
+        autoHeight: on(inputs.autoHeight),
+        // Swiper marks the slides in view (`swiper-slide-visible`) — the carousel runtime makes the others inert.
+        watchSlidesProgress: true,
+    };
+    if (edit) {
+        options['allowTouchMove'] = false;
+        options['simulateTouch'] = false;
+        // On the canvas Previous / Next are PARTS an author clicks to select (R2): rewinding keeps Swiper from
+        // disabling them at either end (a disabled <button> takes no click).
+        options['rewind'] = true;
+    }
+    else {
+        options['grabCursor'] = inputs.grabCursor !== false;
+        options['slideToClickedSlide'] = on(inputs.slideToClickedSlide);
+        Object.assign(options, swiperLoopOptions(inputs.loop));
+        if (on(inputs.freeMode))
+            options['freeMode'] = true;
+    }
+    if (hasNav) {
+        options['navigation'] = parts
+            ? { prevEl: parts.prev ?? null, nextEl: parts.next ?? null }
+            : { prevEl: LEGACY_SWIPER_CONTROLS.prev, nextEl: LEGACY_SWIPER_CONTROLS.next };
+    }
+    if (hasDots) {
+        const type = inputs.paginationType === 'fraction' || inputs.paginationType === 'progressbar' ? inputs.paginationType : 'bullets';
+        options['pagination'] = parts
+            ? { el: parts.pagination, type, clickable: inputs.paginationClickable !== false, dynamicBullets: on(inputs.paginationDynamicBullets),
+                modifierClass: PART_PAGINATION_MODIFIER, bulletElement: 'button' }
+            : { el: LEGACY_SWIPER_CONTROLS.pagination, type, clickable: inputs.paginationClickable !== false, dynamicBullets: on(inputs.paginationDynamicBullets) };
+    }
+    if (flags.enableScrollbar)
+        options['scrollbar'] = { el: LEGACY_SWIPER_CONTROLS.scrollbar, draggable: !edit };
+    if (autoplay) {
+        options['autoplay'] = {
+            enabled: ctx.motion,
+            delay: num$1(inputs.autoplayDelay, 3000),
+            pauseOnMouseEnter: inputs.autoplayPauseOnMouseEnter !== false,
+            disableOnInteraction: on(inputs.autoplayDisableOnInteraction),
         };
-        const out = {};
-        for (const name of SWIPER_RESPONSIVE_TRAITS)
-            if (all[name] !== undefined)
-                out[name] = all[name];
-        return out;
     }
+    if (flags.enableKeyboard)
+        options['keyboard'] = { enabled: true, onlyInViewport: true };
+    if (flags.enableMousewheel)
+        options['mousewheel'] = true;
+    if (flags.enableZoom)
+        options['zoom'] = true;
+    if (flags.enableParallax)
+        options['parallax'] = true;
+    if (flags.enableGrid && num$1(inputs.gridRows, 1) > 1)
+        options['grid'] = { rows: num$1(inputs.gridRows, 1) };
+    options['a11y'] = {
+        ...SWIPER_A11Y_OPTIONS,
+        prevSlideMessage: (parts?.prev?.getAttribute('aria-label')) || words.prev,
+        nextSlideMessage: (parts?.next?.getAttribute('aria-label')) || words.next,
+        paginationBulletMessage: words.goTo,
+        slideLabelMessage: words.slideLabel,
+        containerRoleDescriptionMessage: words.carousel,
+        itemRoleDescriptionMessage: words.slide,
+        // aria-roledescription needs a role to describe (axe): a named carousel is a region, an unnamed one a group.
+        containerRole: ctx.named ? 'region' : 'group',
+    };
+    if (!edit) {
+        const derived = buildSwiperBreakpoints(collectResponsiveInputs(inputs), inputs.responsive ?? null);
+        const map = mergeSwiperBreakpoints(derived, inputs.breakpoints ?? '');
+        if (map)
+            options['breakpoints'] = map;
+    }
+    return { modules, effectModule: effect !== 'slide' ? EFFECT_MODULES[effect] ?? null : null, options };
+}
+
+/**
+ * Boot a Swiper on a rendered slider — ONE path for the engine's component path, its string path (globals and the
+ * fallback renderer: `data-iox-slider` carries the inputs) and the admin's Preview (CC3). It hands Swiper the
+ * slider's control PARTS when it has them (else the legacy Swiper-drawn controls), plans the options through the
+ * shared `planSwiperOptions`, and attaches the accessible-carousel runtime (pause control, live region, inert
+ * slides). The builder's EDIT canvas boots with `edit: true` and no carousel runtime.
+ */
+/** The string path's slider: `data-iox-slider` holds its inputs as JSON. */
+const SLIDER_INPUTS_ATTRIBUTE = 'data-iox-slider';
+/** Swiper events a builder can replay as interaction triggers (`swiperSlideChange`…). */
+const SWIPER_TRIGGER_EVENTS = ['slideChange', 'reachBeginning', 'reachEnd', 'autoplayStart', 'autoplayStop'];
+/** The slider's own control parts in the DOM (never a nested slider's). */
+function sliderControlElements(el) {
+    return {
+        prev: sliderPartElement(el, SliderRole.Prev),
+        next: sliderPartElement(el, SliderRole.Next),
+        pagination: sliderPartElement(el, SliderRole.Pagination),
+        pause: sliderPartElement(el, SliderRole.Pause),
+    };
+}
+/** True when the rendered slider holds any control part (the model's `hasSliderParts`, read off the DOM). */
+function domHasSliderParts(el) {
+    const c = sliderControlElements(el);
+    return !!(c.prev || c.next || c.pagination || c.pause);
+}
+async function bootSlider(el, inputs, options = {}) {
+    const [{ default: Swiper }, swiperModules] = await Promise.all([import('swiper'), import('swiper/modules')]);
+    if (!el.isConnected)
+        return null;
+    const controls = sliderControlElements(el);
+    const parts = domHasSliderParts(el) ? controls : null;
+    const words = sliderWords(el.ownerDocument?.documentElement?.getAttribute('lang'));
+    const plan = planSwiperOptions(inputs, {
+        motion: motionAllowed(), edit: options.edit, parts, words, named: !!el.getAttribute('aria-label'),
+    });
+    const lib = swiperModules;
+    const modules = plan.modules.map(name => lib[name]).filter(Boolean);
+    if (plan.effectModule && lib[plan.effectModule])
+        modules.push(lib[plan.effectModule]);
+    const on = {};
+    if (options.onEvent)
+        for (const event of SWIPER_TRIGGER_EVENTS)
+            on[event] = (swiper) => options.onEvent(event, swiper);
+    const swiper = new Swiper(el, { ...plan.options, modules, on });
+    if (!options.edit)
+        attachCarouselA11y(swiper, { words });
+    return swiper;
+}
+/** The inputs a string-path slider carries (`data-iox-slider`), or null. */
+function sliderInputsOf(el) {
+    const raw = el.getAttribute(SLIDER_INPUTS_ATTRIBUTE);
+    if (!raw)
+        return null;
+    try {
+        const parsed = JSON.parse(raw);
+        return parsed && typeof parsed === 'object' ? parsed : null;
+    }
+    catch {
+        return null;
+    }
+}
+/** The Swiper inputs of a saved SliderContainer node — what the string path serialises into `data-iox-slider`. */
+const SLIDER_INPUT_NAMES = [
+    'dir', 'direction', 'slidesPerView', 'slidesPerGroup', 'spaceBetween', 'speed', 'effect', 'grabCursor', 'centeredSlides', 'initialSlide',
+    'autoHeight', 'slideToClickedSlide', 'freeMode', 'loop', 'enableNavigation', 'enablePagination', 'enableScrollbar', 'enableAutoplay',
+    'enableKeyboard', 'enableMousewheel', 'enableZoom', 'enableGrid', 'enableParallax', 'autoplayDelay', 'autoplayPauseOnMouseEnter',
+    'autoplayDisableOnInteraction', 'paginationType', 'paginationClickable', 'paginationDynamicBullets', 'gridRows', 'breakpoints',
+];
+function sliderInputsFromProps(props, responsive) {
+    const out = {};
+    for (const name of SLIDER_INPUT_NAMES)
+        if (props[name] !== undefined)
+            out[name] = props[name];
+    if (responsive)
+        out['responsive'] = responsive;
+    return out;
+}
+
+/**
+ * `iox-slider-container` — the Slider's engine twin (component path, and the admin's Preview through the builder twin's
+ * 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`.
+ */
+class ClientSliderContainerComponent {
     constructor(platformId) {
         this.platformId = platformId;
         this.nodeId = '';
-        /** Language (writing) direction. Rendered as the `dir` attribute so it survives SSR and drives
-         *  Swiper's RTL layout — must match the builder's app-slider-container, which had `dir` while
-         *  this engine-runtime component did not (RTL showed in the editor but never on the live site). */
+        /** Language (writing) direction — the `dir` attribute, so it survives SSR and drives Swiper's RTL layout. */
         this.dir = 'ltr';
         this.direction = 'horizontal';
-        this.loop = false;
+        /** `'off' | 'loop' | 'rewind'` (or a boolean from older saves). */
+        this.loop = 'off';
         this.slidesPerView = 1;
-        /** Declared by the config since the slider shipped, but never declared HERE — so `safeSetInput`
-         *  dropped it and the panel control did nothing on either renderer. */
         this.slidesPerGroup = 1;
         this.spaceBetween = 0;
         this.speed = 300;
@@ -2304,6 +2517,9 @@ class ClientSliderContainerComponent {
         this.grabCursor = true;
         this.centeredSlides = false;
         this.initialSlide = 0;
+        this.autoHeight = false;
+        this.slideToClickedSlide = false;
+        this.freeMode = false;
         this.enableNavigation = false;
         this.enablePagination = false;
         this.enableScrollbar = false;
@@ -2318,96 +2534,80 @@ class ClientSliderContainerComponent {
         this.autoplayDisableOnInteraction = false;
         this.paginationType = 'bullets';
         this.paginationClickable = true;
+        this.paginationDynamicBullets = false;
+        this.navigationColor = '';
+        this.paginationColor = '';
         this.gridRows = 1;
-        /** Advanced escape hatch: raw Swiper `breakpoints` JSON. Merged OVER the map derived from the
-         *  node's per-breakpoint traits, so an explicit hand-written value always wins. */
+        /** Advanced escape hatch: raw Swiper `breakpoints` JSON, merged OVER the per-breakpoint traits' map. */
         this.breakpoints = '';
-        /** The node's per-breakpoint overrides. Only its `inputs` layer is read here — the style layers
-         *  are compiled to CSS by the style engine, not handed to Swiper. */
+        /** The node's per-breakpoint overrides (only its `inputs` layer is read here). */
         this.responsive = null;
-        this._swiper = null;
+        /** The slider's controls are parts (set by the renderer from the node): Swiper draws none of its own. */
+        this.controlParts = false;
+        this.swiper = null;
+        this.slidesSeen = false;
         this.instanceRegistry = inject(ComponentInstanceRegistryService);
     }
-    ngOnInit() { }
+    /** Swiper draws its own arrows / dots only for a saved slider whose controls are not parts yet. */
+    get legacyControls() {
+        return !this.controlParts;
+    }
+    /** Where a child renders: a control part beside the wrapper (before it until the first slide, after it from
+     *  then on), a slide into the wrapper. The renderer asks in the children's order. */
+    childHostFor(child) {
+        if (!isSliderPart(child)) {
+            this.slidesSeen = true;
+            return this.childrenHost;
+        }
+        return this.slidesSeen ? this.trailHost : this.leadHost;
+    }
     ngAfterViewInit() {
         if (isPlatformBrowser(this.platformId)) {
-            // Defer so all child slides are rendered first
-            requestAnimationFrame(() => this._initSwiper());
+            // Defer so all child slides and parts are rendered first.
+            requestAnimationFrame(() => void this.boot());
         }
     }
     ngOnDestroy() {
-        if (this._swiper) {
-            this._swiper.destroy(true, true);
-            this._swiper = null;
+        if (this.swiper) {
+            this.swiper.destroy(true, true);
+            this.swiper = null;
             this.instanceRegistry.unregister(this.nodeId);
         }
     }
-    async _initSwiper() {
+    async boot() {
         const el = this.swiperEl?.nativeElement;
         if (!el)
             return;
-        const [{ default: Swiper }, swiperModules] = await Promise.all([
-            import('swiper'),
-            import('swiper/modules'),
-        ]);
-        const { EffectFade, EffectCube, EffectFlip, EffectCoverflow, EffectCards, EffectCreative, } = swiperModules;
-        // The module list is the shared, tested decision: A11y always; Autoplay never under reduced motion.
-        const motion = motionAllowed();
-        const modules = swiperModuleNames(this, motion).map(name => swiperModules[name]);
-        const effectMap = {
-            fade: EffectFade, cube: EffectCube, flip: EffectFlip,
-            coverflow: EffectCoverflow, cards: EffectCards, creative: EffectCreative,
-        };
-        if (this.effect !== 'slide' && effectMap[this.effect]) {
-            modules.push(effectMap[this.effect]);
-        }
-        const config = {
-            modules,
-            // Swiper reads the container's `dir` attribute, but pass it explicitly so RTL is applied
-            // on init regardless of attribute timing.
-            dir: this.dir,
-            direction: this.direction,
-            loop: this.loop,
-            slidesPerView: this.slidesPerView,
-            slidesPerGroup: this.slidesPerGroup,
-            spaceBetween: this.spaceBetween,
-            speed: this.speed,
-            effect: this.effect,
-            grabCursor: this.grabCursor,
-            centeredSlides: this.centeredSlides,
-            initialSlide: this.initialSlide,
+        this.swiper = await bootSlider(el, this.inputs());
+        if (this.swiper)
+            this.instanceRegistry.register(this.nodeId, this.swiper);
+    }
+    inputs() {
+        return {
+            dir: this.dir, direction: this.direction, loop: this.loop, slidesPerView: this.slidesPerView, slidesPerGroup: this.slidesPerGroup,
+            spaceBetween: this.spaceBetween, speed: this.speed, effect: this.effect, grabCursor: this.grabCursor, centeredSlides: this.centeredSlides,
+            initialSlide: this.initialSlide, autoHeight: this.autoHeight, slideToClickedSlide: this.slideToClickedSlide, freeMode: this.freeMode,
+            enableNavigation: this.enableNavigation, enablePagination: this.enablePagination, enableScrollbar: this.enableScrollbar,
+            enableAutoplay: this.enableAutoplay, enableKeyboard: this.enableKeyboard, enableMousewheel: this.enableMousewheel,
+            enableZoom: this.enableZoom, enableGrid: this.enableGrid, enableParallax: this.enableParallax, autoplayDelay: this.autoplayDelay,
+            autoplayPauseOnMouseEnter: this.autoplayPauseOnMouseEnter, autoplayDisableOnInteraction: this.autoplayDisableOnInteraction,
+            paginationType: this.paginationType, paginationClickable: this.paginationClickable, paginationDynamicBullets: this.paginationDynamicBullets,
+            gridRows: this.gridRows, breakpoints: this.breakpoints, responsive: this.responsive,
         };
-        if (this.enableNavigation)
-            config['navigation'] = { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' };
-        if (this.enablePagination)
-            config['pagination'] = { el: '.swiper-pagination', type: this.paginationType, clickable: this.paginationClickable };
-        if (this.enableScrollbar)
-            config['scrollbar'] = { el: '.swiper-scrollbar', draggable: true };
-        config['a11y'] = { ...SWIPER_A11Y_OPTIONS };
-        if (swiperAutoplayAllowed(this.enableAutoplay, motion))
-            config['autoplay'] = { delay: this.autoplayDelay, pauseOnMouseEnter: this.autoplayPauseOnMouseEnter, disableOnInteraction: this.autoplayDisableOnInteraction };
-        if (this.enableGrid && this.gridRows > 1)
-            config['grid'] = { rows: this.gridRows };
-        // Per-breakpoint traits (slidesPerView/slidesPerGroup/spaceBetween) become Swiper's own
-        // mobile-first `breakpoints` map via the SHARED converter — the desktop-first → mobile-first
-        // inversion lives there, tested, not at each call site. The hand-written `breakpoints` JSON
-        // stays as an advanced escape hatch and is merged OVER the derived map.
-        const derived = buildSwiperBreakpoints(this.collectSwiperInputs(), this.responsive);
-        const breakpointMap = mergeSwiperBreakpoints(derived, this.breakpoints);
-        if (breakpointMap)
-            config['breakpoints'] = breakpointMap;
-        this._swiper = new Swiper(el, config);
-        this.instanceRegistry.register(this.nodeId, this._swiper);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientSliderContainerComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: ClientSliderContainerComponent, isStandalone: false, selector: "iox-slider-container", inputs: { nodeId: "nodeId", dir: "dir", direction: "direction", loop: "loop", slidesPerView: "slidesPerView", slidesPerGroup: "slidesPerGroup", spaceBetween: "spaceBetween", speed: "speed", effect: "effect", grabCursor: "grabCursor", centeredSlides: "centeredSlides", initialSlide: "initialSlide", enableNavigation: "enableNavigation", enablePagination: "enablePagination", enableScrollbar: "enableScrollbar", enableAutoplay: "enableAutoplay", enableKeyboard: "enableKeyboard", enableMousewheel: "enableMousewheel", enableZoom: "enableZoom", enableGrid: "enableGrid", enableParallax: "enableParallax", autoplayDelay: "autoplayDelay", autoplayPauseOnMouseEnter: "autoplayPauseOnMouseEnter", autoplayDisableOnInteraction: "autoplayDisableOnInteraction", paginationType: "paginationType", paginationClickable: "paginationClickable", gridRows: "gridRows", breakpoints: "breakpoints", responsive: "responsive" }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "swiperEl", first: true, predicate: ["swiperEl"], descendants: true, static: true }], ngImport: i0, template: `
-        <div class="swiper" [class]="'iox-node-' + nodeId" [attr.dir]="dir" [style.direction]="dir" #swiperEl>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: ClientSliderContainerComponent, isStandalone: false, selector: "iox-slider-container", inputs: { nodeId: "nodeId", dir: "dir", direction: "direction", loop: "loop", slidesPerView: "slidesPerView", slidesPerGroup: "slidesPerGroup", spaceBetween: "spaceBetween", speed: "speed", effect: "effect", grabCursor: "grabCursor", centeredSlides: "centeredSlides", initialSlide: "initialSlide", autoHeight: "autoHeight", slideToClickedSlide: "slideToClickedSlide", freeMode: "freeMode", enableNavigation: "enableNavigation", enablePagination: "enablePagination", enableScrollbar: "enableScrollbar", enableAutoplay: "enableAutoplay", enableKeyboard: "enableKeyboard", enableMousewheel: "enableMousewheel", enableZoom: "enableZoom", enableGrid: "enableGrid", enableParallax: "enableParallax", autoplayDelay: "autoplayDelay", autoplayPauseOnMouseEnter: "autoplayPauseOnMouseEnter", autoplayDisableOnInteraction: "autoplayDisableOnInteraction", paginationType: "paginationType", paginationClickable: "paginationClickable", paginationDynamicBullets: "paginationDynamicBullets", navigationColor: "navigationColor", paginationColor: "paginationColor", gridRows: "gridRows", breakpoints: "breakpoints", responsive: "responsive", controlParts: "controlParts" }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "leadHost", first: true, predicate: ["leadHost"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "trailHost", first: true, predicate: ["trailHost"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "swiperEl", first: true, predicate: ["swiperEl"], descendants: true, static: true }], ngImport: i0, template: `
+        <div class="swiper" [class]="'swiper iox-node-' + nodeId" [attr.dir]="dir" [style.direction]="dir"
+             [style.--swiper-navigation-color]="legacyControls ? (navigationColor || null) : null"
+             [style.--swiper-pagination-color]="legacyControls ? (paginationColor || null) : null" #swiperEl>
+            <ng-container #leadHost></ng-container>
             <div class="swiper-wrapper">
                 <ng-container #childrenHost></ng-container>
             </div>
-            <div *ngIf="enableNavigation" class="swiper-button-prev"></div>
-            <div *ngIf="enableNavigation" class="swiper-button-next"></div>
-            <div *ngIf="enablePagination" class="swiper-pagination"></div>
+            <ng-container #trailHost></ng-container>
+            <div *ngIf="legacyControls && enableNavigation" class="swiper-button-prev"></div>
+            <div *ngIf="legacyControls && enableNavigation" class="swiper-button-next"></div>
+            <div *ngIf="legacyControls && enablePagination" class="swiper-pagination"></div>
             <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
         </div>
     `, isInline: true, styles: [".swiper{width:100%;height:100%;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
@@ -2415,13 +2615,17 @@ class ClientSliderContainerComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientSliderContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'iox-slider-container', template: `
-        <div class="swiper" [class]="'iox-node-' + nodeId" [attr.dir]="dir" [style.direction]="dir" #swiperEl>
+        <div class="swiper" [class]="'swiper iox-node-' + nodeId" [attr.dir]="dir" [style.direction]="dir"
+             [style.--swiper-navigation-color]="legacyControls ? (navigationColor || null) : null"
+             [style.--swiper-pagination-color]="legacyControls ? (paginationColor || null) : null" #swiperEl>
+            <ng-container #leadHost></ng-container>
             <div class="swiper-wrapper">
                 <ng-container #childrenHost></ng-container>
             </div>
-            <div *ngIf="enableNavigation" class="swiper-button-prev"></div>
-            <div *ngIf="enableNavigation" class="swiper-button-next"></div>
-            <div *ngIf="enablePagination" class="swiper-pagination"></div>
+            <ng-container #trailHost></ng-container>
+            <div *ngIf="legacyControls && enableNavigation" class="swiper-button-prev"></div>
+            <div *ngIf="legacyControls && enableNavigation" class="swiper-button-next"></div>
+            <div *ngIf="legacyControls && enablePagination" class="swiper-pagination"></div>
             <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
         </div>
     `, standalone: false, styles: [".swiper{width:100%;height:100%;box-sizing:border-box}\n"] }]
@@ -2452,6 +2656,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Input
             }], initialSlide: [{
                 type: Input
+            }], autoHeight: [{
+                type: Input
+            }], slideToClickedSlide: [{
+                type: Input
+            }], freeMode: [{
+                type: Input
             }], enableNavigation: [{
                 type: Input
             }], enablePagination: [{
@@ -2480,15 +2690,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Input
             }], paginationClickable: [{
                 type: Input
+            }], paginationDynamicBullets: [{
+                type: Input
+            }], navigationColor: [{
+                type: Input
+            }], paginationColor: [{
+                type: Input
             }], gridRows: [{
                 type: Input
             }], breakpoints: [{
                 type: Input
             }], responsive: [{
                 type: Input
+            }], controlParts: [{
+                type: Input
             }], childrenHost: [{
                 type: ViewChild,
                 args: ['childrenHost', { read: ViewContainerRef, static: true }]
+            }], leadHost: [{
+                type: ViewChild,
+                args: ['leadHost', { read: ViewContainerRef, static: true }]
+            }], trailHost: [{
+                type: ViewChild,
+                args: ['trailHost', { read: ViewContainerRef, static: true }]
             }], swiperEl: [{
                 type: ViewChild,
                 args: ['swiperEl', { static: true }]
@@ -5171,6 +5395,131 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 args: ['childrenHost', { read: ViewContainerRef, static: true }]
             }] } });
 
+const escapeHtml = (v) => v.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+/**
+ * `iox-video` — the Video's ONE component (CC3, board 5), like the Gallery's: the builder canvas, the admin's Preview
+ * and the engine's component path all render it; the engine's string path writes the same markup from the same
+ * `videoInnerHtml`. On the EDITING canvas (no `IS_PREVIEW`) it draws the poster ONLY — never a `<video>`, never a
+ * player: an iframe would eat the selection's clicks and would leak before consent. Live, it attaches the shared
+ * media-core runtime (the facade behind consent, the background video's pause button).
+ *
+ * Inputs recompute in SETTERS: the builder's trait panel assigns them directly (no ngOnChanges).
+ */
+class IoxVideoComponent {
+    set videoSource(v) { this.set('videoSource', v); }
+    get videoSource() { return this.values['videoSource']; }
+    set src(v) { this.set('src', v); }
+    get src() { return this.values['src']; }
+    set poster(v) { this.set('poster', v); }
+    get poster() { return this.values['poster']; }
+    set mode(v) { this.set('mode', v); }
+    get mode() { return this.values['mode']; }
+    set autoplay(v) { this.set('autoplay', v); }
+    get autoplay() { return this.values['autoplay']; }
+    set title(v) { this.set('title', v); }
+    get title() { return this.values['title']; }
+    set captions(v) { this.set('captions', v); }
+    get captions() { return this.values['captions']; }
+    set captionsLang(v) { this.set('captionsLang', v); }
+    get captionsLang() { return this.values['captionsLang']; }
+    set consentCategory(v) { this.set('consentCategory', v); }
+    get consentCategory() { return this.values['consentCategory']; }
+    constructor(sanitizer, platformId, isPreview) {
+        this.sanitizer = sanitizer;
+        this.nodeId = '';
+        this.values = {};
+        this.attrs = {};
+        this.html = '';
+        this.runtime = null;
+        this.viewReady = false;
+        this.browser = isPlatformBrowser(platformId);
+        this.live = !!isPreview;
+        this.render();
+    }
+    ngAfterViewInit() {
+        this.viewReady = true;
+        this.attach();
+    }
+    ngOnDestroy() {
+        this.runtime?.destroy();
+        this.runtime = null;
+    }
+    set(name, value) {
+        if (this.values[name] === value)
+            return;
+        this.values[name] = value;
+        this.render();
+    }
+    render() {
+        this.plan = planVideo({ props: this.values }, null);
+        this.attrs = videoRootAttributes(this.plan);
+        const lang = typeof document !== 'undefined' ? document.documentElement?.getAttribute('lang') : null;
+        this.html = this.sanitizer.bypassSecurityTrustHtml(videoInnerHtml(this.plan, { esc: escapeHtml, canvas: !this.live, words: videoWords(lang) }));
+        if (this.viewReady) {
+            // The new markup lands with this change detection; the runtime re-attaches to it after.
+            this.runtime?.destroy();
+            this.runtime = null;
+            queueMicrotask(() => this.attach());
+        }
+    }
+    attach() {
+        if (!this.browser || !this.live || this.runtime)
+            return;
+        const el = this.root?.nativeElement;
+        if (!el?.hasAttribute(VideoAttribute.Root))
+            return;
+        this.runtime = attachVideoAt(el);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxVideoComponent, deps: [{ token: i1$1.DomSanitizer }, { token: PLATFORM_ID }, { token: IS_PREVIEW, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: IoxVideoComponent, isStandalone: false, selector: "iox-video", inputs: { nodeId: "nodeId", videoSource: "videoSource", src: "src", poster: "poster", mode: "mode", autoplay: "autoplay", title: "title", captions: "captions", captionsLang: "captionsLang", consentCategory: "consentCategory" }, viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, static: true }], ngImport: i0, template: "<div #root\n        [class]=\"'iox-video iox-node-' + nodeId\"\n        [attr.data-iox-video]=\"attrs['data-iox-video'] ?? null\"\n        [attr.data-iox-video-source]=\"attrs['data-iox-video-source'] ?? null\"\n        [attr.data-iox-video-id]=\"attrs['data-iox-video-id'] ?? null\"\n        [attr.data-iox-video-hash]=\"attrs['data-iox-video-hash'] ?? null\"\n        [attr.data-iox-video-mode]=\"attrs['data-iox-video-mode'] ?? null\"\n        [attr.data-iox-video-autoplay]=\"attrs['data-iox-video-autoplay'] ?? null\"\n        [attr.data-iox-video-consent]=\"attrs['data-iox-video-consent'] ?? null\"\n        [attr.data-iox-video-title]=\"attrs['data-iox-video-title'] ?? null\"\n        [attr.data-iox-video-poster-empty]=\"attrs['data-iox-video-poster-empty'] ?? null\"\n        [innerHTML]=\"html\"></div>", isInline: true, styles: [":host{display:block;min-width:0;max-width:100%}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxVideoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'iox-video', template: `<div #root
+        [class]="'${VideoClass.Root} iox-node-' + nodeId"
+        [attr.data-iox-video]="attrs['${VideoAttribute.Root}'] ?? null"
+        [attr.data-iox-video-source]="attrs['${VideoAttribute.Source}'] ?? null"
+        [attr.data-iox-video-id]="attrs['${VideoAttribute.Id}'] ?? null"
+        [attr.data-iox-video-hash]="attrs['${VideoAttribute.Hash}'] ?? null"
+        [attr.data-iox-video-mode]="attrs['${VideoAttribute.Mode}'] ?? null"
+        [attr.data-iox-video-autoplay]="attrs['${VideoAttribute.Autoplay}'] ?? null"
+        [attr.data-iox-video-consent]="attrs['${VideoAttribute.Consent}'] ?? null"
+        [attr.data-iox-video-title]="attrs['${VideoAttribute.Title}'] ?? null"
+        [attr.data-iox-video-poster-empty]="attrs['${VideoAttribute.PosterEmpty}'] ?? null"
+        [innerHTML]="html"></div>`, standalone: false, styles: [":host{display:block;min-width:0;max-width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IS_PREVIEW]
+                }] }], propDecorators: { nodeId: [{
+                type: Input
+            }], videoSource: [{
+                type: Input
+            }], src: [{
+                type: Input
+            }], poster: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], autoplay: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], captions: [{
+                type: Input
+            }], captionsLang: [{
+                type: Input
+            }], consentCategory: [{
+                type: Input
+            }], root: [{
+                type: ViewChild,
+                args: ['root', { static: true }]
+            }] } });
+
 const COMPONENTS = [
     BuilderImageComponent,
     BuilderSpacerComponent,
@@ -5191,6 +5540,7 @@ const COMPONENTS = [
     ClientListComponent,
     ClientListItemComponent,
     ClientGalleryComponent,
+    IoxVideoComponent,
     IoxFormComponent,
     IoxFieldComponent,
     IoxSubmitButtonComponent,
@@ -5219,6 +5569,7 @@ class IoxBuilderComponentsModule {
             ClientListComponent,
             ClientListItemComponent,
             ClientGalleryComponent,
+            IoxVideoComponent,
             IoxFormComponent,
             IoxFieldComponent,
             IoxSubmitButtonComponent,
@@ -5243,6 +5594,7 @@ class IoxBuilderComponentsModule {
             ClientListComponent,
             ClientListItemComponent,
             ClientGalleryComponent,
+            IoxVideoComponent,
             IoxFormComponent,
             IoxFieldComponent,
             IoxSubmitButtonComponent,
@@ -5306,6 +5658,8 @@ class IoxComponentRegistryService {
             // Dialog (DS2) — the live <dialog> twin, so a page holding one no longer falls back to
             // the string renderer.
             ['Dialog', IoxDialogComponent],
+            // Video (CC3) — one component for the canvas (poster only), Preview and the live site.
+            ['Video', IoxVideoComponent],
         ]);
     }
     getComponent(type) {
@@ -5343,7 +5697,7 @@ var A11yTrait;
     A11yTrait["CloseAbove"] = "closeAbove";
 })(A11yTrait || (A11yTrait = {}));
 /** The types that carry an Accessible name trait. */
-const ACCESSIBLE_NAME_TYPES = ['ButtonBlock', 'LinkedContainer', 'Link', 'Dialog'];
+const ACCESSIBLE_NAME_TYPES = ['ButtonBlock', 'LinkedContainer', 'Link', 'Dialog', 'SliderContainer'];
 /** The types that link to a page and can therefore be the current page's link. */
 const CURRENT_LINK_TYPES = ['Link', 'LinkedContainer', 'ButtonBlock'];
 
@@ -5519,8 +5873,10 @@ const COMPONENT_STATE_SELECTOR = {
     [ComponentState.Current]: '[aria-current="page"]',
     [ComponentState.On]: '[data-iox-on]',
 };
-/** The composite roles that are themselves "on" when their item is open (they carry `data-iox-on`). */
-const ON_STATE_ROLES = ['accordion.item', 'accordion.trigger', 'accordion.panel'];
+/** The composite roles that are themselves "on" when their item is open (they carry `data-iox-on`): an accordion's
+ *  item, header and panel; a disclosure (its own item), its toggle and its panel (CC2.1). The main entry does not
+ *  import composite-core, so the roles are spelled here — `style-compiler.spec` pins them to its enums. */
+const ON_STATE_ROLES = ['accordion.item', 'accordion.trigger', 'accordion.panel', 'disclosure', 'disclosure.trigger', 'disclosure.panel'];
 /**
  * The component states a node offers in the Style panel's "Component state" group: Current page (a link),
  * Open (an accordion's item, header or panel), Item open (any other part inside an item — `insideItem`).
@@ -5897,6 +6253,9 @@ function isCurrentLink(href, currentPath, options = {}) {
 /** The types that are pure decoration to assistive technology (an Icon has no name of its own). */
 const DECORATIVE_TYPES = ['Icon'];
 const DIALOG_NODE_TYPE = 'Dialog';
+/** Named for assistive technology, but never an icon-only CONTROL the audit should flag: a Dialog, a carousel. */
+const NAME_NOT_REQUIRED_TYPES = [DIALOG_NODE_TYPE, 'SliderContainer'];
+const SLIDER_PAUSE_ROLE = 'slider.pause';
 /** Carries the min-width (px) at which an open dialog closes itself; the engine listens on it. */
 const DIALOG_CLOSE_ABOVE_ATTRIBUTE = 'data-iox-dialog-close-above';
 var A11yAttribute;
@@ -5992,7 +6351,10 @@ function scanNames(node, acc) {
  * button or link (WCAG 4.1.2, CC1 N6). The responsive audit flags it; an Icon on its own is decoration.
  */
 function needsAccessibleName(node) {
-    if (!node?.type || !ACCESSIBLE_NAME_TYPES.includes(node.type) || node.type === DIALOG_NODE_TYPE)
+    if (!node?.type || !ACCESSIBLE_NAME_TYPES.includes(node.type) || NAME_NOT_REQUIRED_TYPES.includes(node.type))
+        return false;
+    // A Slider's pause control is named by its runtime ("Stop / Start automatic slide show", CC3).
+    if (node.role === SLIDER_PAUSE_ROLE)
         return false;
     if (trimmed$1(nodeTraitValue(node, A11yTrait.AccessibleName)))
         return false;
@@ -8008,5 +8370,5 @@ function effectiveTransitionId(anim) {
  * Generated bundle index. Do not edit.
  */
 
-export { A11yAttribute, A11yTrait, ACCESSIBLE_NAME_TYPES, AOSService, ARIA_CURRENT_PAGE, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, COMPONENT_STATE_SELECTOR, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CURRENT_LINK_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ComponentState, ContainerComponent, ContextStore, DECORATIVE_TYPES, DEFAULT_GALLERY_SCHEDULER, 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, DataSourceSortDir, DeclarationContext, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, 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, LEGACY_DIRECTION_KEY, LEGACY_HOVER_TRANSITION, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, ON_STATE_ROLES, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, REDUCED_MOTION_QUERY, RESERVED_ALIAS_PREFIX, SORT_PARAM, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SectionComponent, SwiperModuleName, TARGETED_STATE_SUFFIX, TEXT_ALIGN_KEY, TEXT_DIRECTION_KEY, TRANSITION_FEELS, TextAlign, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, VisibilityActionType, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildInteractionKeyframes, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTargetedSuffixSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, closeAboveMediaQuery, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, componentStatesFor, composeVirtualTraits, computeRelative, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, decomposeBackdropFilter, defaultHoverTransition, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, excludeSelf, feelFor, finalKeyframe, getByPath, getSeoValue, hasHoverState, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isCurrentLink, isExternalOrFragment, isGradientPaint, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, isWholeBackdropSet, keyframePropertyName, keyframeStyleEntries, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, migrateLegacyDirection, migrateLegacyTextAlign, motionAllowed, nearestCommonAncestorId, needsAccessibleName, nodeA11yAttributes, nodeCssId, nodeTraitValue, nodeUsesContext, normalizeAppPath, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, parentBreakpoint, parseUrlList, partClassName, planDataSource, planResponsiveRules, prefersReducedMotion, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, sortParamValue, stateNamesIn, statePseudoClass, stateSelectorSuffix, stripSuppressedProps, swiperAutoplayAllowed, swiperModuleNames, syncNodeA11yAttributes, targetedStateSelector, variableAliases, variableItemsFrom, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
+export { A11yAttribute, A11yTrait, ACCESSIBLE_NAME_TYPES, AOSService, ARIA_CURRENT_PAGE, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, COMPONENT_STATE_SELECTOR, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CURRENT_LINK_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ComponentState, ContainerComponent, ContextStore, DECORATIVE_TYPES, DEFAULT_GALLERY_SCHEDULER, 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, DataSourceSortDir, DeclarationContext, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, 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, LEGACY_DIRECTION_KEY, LEGACY_HOVER_TRANSITION, LEGACY_SWIPER_CONTROLS, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, ON_STATE_ROLES, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PART_PAGINATION_MODIFIER, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, REDUCED_MOTION_QUERY, RESERVED_ALIAS_PREFIX, SLIDER_INPUTS_ATTRIBUTE, SLIDER_INPUT_NAMES, SORT_PARAM, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SWIPER_TRIGGER_EVENTS, SectionComponent, SwiperModuleName, TARGETED_STATE_SUFFIX, TEXT_ALIGN_KEY, TEXT_DIRECTION_KEY, TRANSITION_FEELS, TextAlign, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, VisibilityActionType, activeActions, applyBindingPipes, applyFeel, bootSlider, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildInteractionKeyframes, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTargetedSuffixSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, closeAboveMediaQuery, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, componentStatesFor, composeVirtualTraits, computeRelative, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, decomposeBackdropFilter, defaultHoverTransition, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, domHasSliderParts, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, excludeSelf, feelFor, finalKeyframe, getByPath, getSeoValue, hasHoverState, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isCurrentLink, isExternalOrFragment, isGradientPaint, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, isWholeBackdropSet, keyframePropertyName, keyframeStyleEntries, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, migrateLegacyDirection, migrateLegacyTextAlign, motionAllowed, nearestCommonAncestorId, needsAccessibleName, nodeA11yAttributes, nodeCssId, nodeTraitValue, nodeUsesContext, normalizeAppPath, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, parentBreakpoint, parseUrlList, partClassName, planDataSource, planResponsiveRules, planSwiperOptions, prefersReducedMotion, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, sliderControlElements, sliderInputsFromProps, sliderInputsOf, sortParamValue, stateNamesIn, statePseudoClass, stateSelectorSuffix, stripSuppressedProps, swiperAutoplayAllowed, swiperLoopOptions, swiperModuleNames, syncNodeA11yAttributes, targetedStateSelector, variableAliases, variableItemsFrom, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map