@vectoriox/iox-ui 5.31.2 → 5.32.1

package/fesm2022/vectoriox-iox-ui.mjs

@@ -7,7 +7,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import Lenis from 'lenis';
-import '@vectoriox/iox-ui/actions-core';
+import { dialogOpenerAttributes, dialogDomId } from '@vectoriox/iox-ui/actions-core';
 export * from '@vectoriox/iox-ui/design-core';
 
 class ViewPositionDirective {
@@ -2117,6 +2117,79 @@ 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:
+ * it gives the container `aria-roledescription="carousel"`, every slide "slide" and an "n of m" label, and
+ * keeps the live region quiet while it rotates. Autoplay never boots under reduced motion (Publishable
+ * gate #6). The rotation pause control and the slider parts as nodes are CC3.
+ */
+var SwiperModuleName;
+(function (SwiperModuleName) {
+    SwiperModuleName["A11y"] = "A11y";
+    SwiperModuleName["Navigation"] = "Navigation";
+    SwiperModuleName["Pagination"] = "Pagination";
+    SwiperModuleName["Scrollbar"] = "Scrollbar";
+    SwiperModuleName["Autoplay"] = "Autoplay";
+    SwiperModuleName["Keyboard"] = "Keyboard";
+    SwiperModuleName["Mousewheel"] = "Mousewheel";
+    SwiperModuleName["Zoom"] = "Zoom";
+    SwiperModuleName["Grid"] = "Grid";
+    SwiperModuleName["Parallax"] = "Parallax";
+})(SwiperModuleName || (SwiperModuleName = {}));
+const FLAGGED = [
+    ['enableNavigation', SwiperModuleName.Navigation],
+    ['enablePagination', SwiperModuleName.Pagination],
+    ['enableScrollbar', SwiperModuleName.Scrollbar],
+    ['enableAutoplay', SwiperModuleName.Autoplay],
+    ['enableKeyboard', SwiperModuleName.Keyboard],
+    ['enableMousewheel', SwiperModuleName.Mousewheel],
+    ['enableZoom', SwiperModuleName.Zoom],
+    ['enableGrid', SwiperModuleName.Grid],
+    ['enableParallax', SwiperModuleName.Parallax],
+];
+/** True when the Slider's autoplay may start: on, and the visitor has not asked for reduced motion. */
+function swiperAutoplayAllowed(enableAutoplay, motionAllowed) {
+    return !!enableAutoplay && motionAllowed;
+}
+/** The modules to load, A11y first. */
+function swiperModuleNames(flags, motionAllowed) {
+    return [SwiperModuleName.A11y, ...FLAGGED
+            .filter(([flag, name]) => flags[flag] && (name !== SwiperModuleName.Autoplay || swiperAutoplayAllowed(flags.enableAutoplay, motionAllowed)))
+            .map(([, name]) => name)];
+}
+/** Swiper's A11y options: carousel / slide role descriptions and an "n of m" slide label. */
+const SWIPER_A11Y_OPTIONS = {
+    enabled: true,
+    containerRoleDescriptionMessage: 'carousel',
+    itemRoleDescriptionMessage: 'slide',
+    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. */
@@ -2197,26 +2270,10 @@ class ClientSliderContainerComponent {
             import('swiper'),
             import('swiper/modules'),
         ]);
-        const { Navigation, Pagination, Scrollbar, Autoplay, Keyboard, Mousewheel, Zoom, Grid, Parallax, EffectFade, EffectCube, EffectFlip, EffectCoverflow, EffectCards, EffectCreative, } = swiperModules;
-        const modules = [];
-        if (this.enableNavigation)
-            modules.push(Navigation);
-        if (this.enablePagination)
-            modules.push(Pagination);
-        if (this.enableScrollbar)
-            modules.push(Scrollbar);
-        if (this.enableAutoplay)
-            modules.push(Autoplay);
-        if (this.enableKeyboard)
-            modules.push(Keyboard);
-        if (this.enableMousewheel)
-            modules.push(Mousewheel);
-        if (this.enableZoom)
-            modules.push(Zoom);
-        if (this.enableGrid)
-            modules.push(Grid);
-        if (this.enableParallax)
-            modules.push(Parallax);
+        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,
@@ -2246,7 +2303,8 @@ class ClientSliderContainerComponent {
             config['pagination'] = { el: '.swiper-pagination', type: this.paginationType, clickable: this.paginationClickable };
         if (this.enableScrollbar)
             config['scrollbar'] = { el: '.swiper-scrollbar', draggable: true };
-        if (this.enableAutoplay)
+        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 };
@@ -2877,6 +2935,7 @@ class GalleryLoop {
         this.showMs = opts.showMs;
         this.fadeMs = opts.fadeMs;
         this.onChange = opts.onChange;
+        this.motionAllowed = opts.motionAllowed !== false;
     }
     get state() {
         return {
@@ -2905,7 +2964,7 @@ class GalleryLoop {
                 return;
             this.firstCycleActive = true;
             this.emit();
-            if (this.count > 1)
+            if (this.count > 1 && this.motionAllowed)
                 this.scheduleCycle(token);
         });
     }
@@ -3041,6 +3100,8 @@ class ClientGalleryComponent {
         this.loop = new GalleryLoop({
             showMs: this.showDuration,
             fadeMs: this.fadeDuration,
+            // Reduced motion (CC1 R1): the first image, standing still.
+            motionAllowed: motionAllowed(),
             onChange: state => {
                 this.currentIndex = state.currentIndex;
                 this.fadingOutIndex = state.fadingOutIndex;
@@ -5166,6 +5227,23 @@ function styleKeyToKebab(key) {
     return key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
 }
 
+/**
+ * The content traits the accessibility attributes are read from (CC1). Import-free on purpose: the
+ * builder's component configs declare these traits, and the node-baseline generator bundles those
+ * configs against this file directly.
+ */
+var A11yTrait;
+(function (A11yTrait) {
+    /** "Accessibility ▸ Accessible name" — the name of an icon-only control (and of a Dialog). */
+    A11yTrait["AccessibleName"] = "ariaLabel";
+    /** A Dialog's "Close when wider than": a breakpoint id, or empty = never. */
+    A11yTrait["CloseAbove"] = "closeAbove";
+})(A11yTrait || (A11yTrait = {}));
+/** The types that carry an Accessible name trait. */
+const ACCESSIBLE_NAME_TYPES = ['ButtonBlock', 'LinkedContainer', 'Link', 'Dialog'];
+/** The types that link to a page and can therefore be the current page's link. */
+const CURRENT_LINK_TYPES = ['Link', 'LinkedContainer', 'ButtonBlock'];
+
 /**
  * style-compiler — the SINGLE source of truth for turning a node's style map into
  * CSS declarations. Framework-agnostic (no Angular): consumed by both renderers.
@@ -5318,6 +5396,31 @@ const STATE_PSEUDO_CLASS = { focus: 'focus-visible' };
 function statePseudoClass(state) {
     return STATE_PSEUDO_CLASS[state] ?? state;
 }
+/**
+ * Component states (CC1 N2; composite plan T12): states a node is IN because of what it is, not where
+ * the pointer is — so they compile to an ATTRIBUTE the renderers write, never a pseudo-class. `current`
+ * is the link to the page the visitor is on (`aria-current="page"`, written by `nodeA11yAttributes`),
+ * so the look and the announcement are one fact.
+ */
+var ComponentState;
+(function (ComponentState) {
+    ComponentState["Current"] = "current";
+})(ComponentState || (ComponentState = {}));
+/** The attribute selector each component state compiles to. */
+const COMPONENT_STATE_SELECTOR = {
+    [ComponentState.Current]: '[aria-current="page"]',
+};
+/** The component states a type offers in the Style panel's "Component state" group. */
+function componentStatesFor(type) {
+    return type && CURRENT_LINK_TYPES.includes(type) ? [ComponentState.Current] : [];
+}
+/**
+ * What follows `.iox-node-<id>` in a stored state's rule: `:hover`, `:focus-visible`, or a component
+ * state's attribute selector (`[aria-current="page"]`). Shared by the builder canvas and both engine paths.
+ */
+function stateSelectorSuffix(state) {
+    return COMPONENT_STATE_SELECTOR[state] ?? `:${statePseudoClass(state)}`;
+}
 /** The states driven by a pointer hovering something — each earns the default hover transition. */
 const HOVER_STATES = ['hover', 'parent-hover', 'trigger-hover'];
 /** True when the node restyles on hover (its own, its parent's or a chosen trigger's). */
@@ -5599,6 +5702,244 @@ function partClassName(type, partKey) {
     return PART_CLASS_NAMES[type]?.[partKey];
 }
 
+/**
+ * "This link is the page you're on" (CC1, N2). ONE decision for the builder canvas and both engine
+ * paths: a link whose target is the current page renders `aria-current="page"` — in the raw SSR too —
+ * and the `current` style state compiles to that attribute (`[aria-current="page"]`), so the look and
+ * the announcement can never disagree.
+ *
+ * Paths are compared APP-relative: the engine's string path writes base-relative hrefs (`work`, `./`
+ * for home), the canvas writes the route (`/work`), and a browser hands back an absolute pathname
+ * under the tenant's `<base href="/<org>/">` — `baseHref` strips that.
+ */
+/** The value a current link carries. */
+const ARIA_CURRENT_PAGE = 'page';
+const EXTERNAL = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
+/** True for an href that leaves the site (a scheme, protocol-relative) or stays on the page (`#…`, empty). */
+function isExternalOrFragment(href) {
+    const h = String(href ?? '').trim();
+    return !h || h.startsWith('#') || EXTERNAL.test(h);
+}
+/**
+ * An app path in one comparable form: no query or hash, no base, no leading `./` or slashes, no
+ * trailing slash. Home is `''`.
+ */
+function normalizeAppPath(path, baseHref) {
+    let p = String(path ?? '').trim().replace(/[?#].*$/, '');
+    const base = String(baseHref ?? '').trim().replace(/\/+$/, '');
+    if (base && base !== '/' && (p === base || p.startsWith(`${base}/`)))
+        p = p.slice(base.length);
+    p = p.replace(/^(?:\.\/)+/, '').replace(/\/{2,}/g, '/').replace(/^\/+/, '').replace(/\/+$/, '');
+    return p === '.' ? '' : p;
+}
+/** Whether `href` points at the page at `currentPath` (both app-relative, or absolute under `baseHref`). */
+function isCurrentLink(href, currentPath, options = {}) {
+    if (currentPath == null || isExternalOrFragment(href))
+        return false;
+    const target = normalizeAppPath(href, options.baseHref);
+    const here = normalizeAppPath(currentPath, options.baseHref);
+    if (target === here)
+        return true;
+    return !!options.prefix && target !== '' && here.startsWith(`${target}/`);
+}
+
+/**
+ * The accessibility attributes a node renders (CC1: N2 current page, N3 dialog openers, N4 a drawer
+ * that closes when the window widens, N6 accessible names). ONE function decides them and every
+ * renderer applies the answer with its own transport: the engine's string path serialises it, the
+ * engine's component path and the builder canvas set it on the node's element. A node that wants
+ * none of it gets `{}` and renders exactly as before.
+ */
+/** 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';
+/** 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;
+(function (A11yAttribute) {
+    A11yAttribute["Label"] = "aria-label";
+    A11yAttribute["Hidden"] = "aria-hidden";
+    A11yAttribute["Current"] = "aria-current";
+    A11yAttribute["Id"] = "id";
+})(A11yAttribute || (A11yAttribute = {}));
+/** Every attribute this module may set — what `syncNodeA11yAttributes` owns on an element. */
+const MANAGED_A11Y_ATTRIBUTES = [
+    A11yAttribute.Label, A11yAttribute.Hidden, A11yAttribute.Current, A11yAttribute.Id,
+    'aria-haspopup', 'aria-expanded', 'aria-controls', DIALOG_CLOSE_ABOVE_ATTRIBUTE,
+];
+/** A content trait's value from `props` (serialized) or `traits[]` (builder). */
+function nodeTraitValue(node, name) {
+    if (!node)
+        return undefined;
+    if (node.props && name in node.props)
+        return node.props[name];
+    const traits = node.traits ? (Array.isArray(node.traits) ? node.traits : Object.values(node.traits)) : [];
+    return traits.find(t => t?.name === name)?.default;
+}
+/** The min-width (CSS px) above a breakpoint — where a dialog set to "close when wider than" it closes. */
+function dialogCloseAboveMinWidth(breakpoint) {
+    const max = typeof breakpoint === 'string' ? breakpointDef(breakpoint)?.maxWidth : null;
+    return max == null ? null : max + 1;
+}
+/** `(min-width: 768px)` for a min-width carried in `data-iox-dialog-close-above`. */
+function closeAboveMediaQuery(minWidth) {
+    return `(min-width: ${Number(minWidth)}px)`;
+}
+function trimmed$1(v) {
+    return typeof v === 'string' ? v.trim() : '';
+}
+/** The attributes a node renders. */
+function nodeA11yAttributes(node, ctx = {}) {
+    if (!node?.type)
+        return {};
+    const out = {};
+    const name = ACCESSIBLE_NAME_TYPES.includes(node.type) ? trimmed$1(nodeTraitValue(node, A11yTrait.AccessibleName)) : '';
+    if (name)
+        out[A11yAttribute.Label] = name;
+    if (DECORATIVE_TYPES.includes(node.type))
+        out[A11yAttribute.Hidden] = 'true';
+    if (CURRENT_LINK_TYPES.includes(node.type) && isCurrentLink(ctx.href, ctx.currentPath, ctx.currentLink)) {
+        out[A11yAttribute.Current] = ARIA_CURRENT_PAGE;
+    }
+    Object.assign(out, dialogOpenerAttributes(node));
+    if (node.type === DIALOG_NODE_TYPE) {
+        const id = node.styleId ?? node.id;
+        if (id)
+            out[A11yAttribute.Id] = dialogDomId(id);
+        const minWidth = dialogCloseAboveMinWidth(nodeTraitValue(node, A11yTrait.CloseAbove));
+        if (minWidth !== null)
+            out[DIALOG_CLOSE_ABOVE_ATTRIBUTE] = String(minWidth);
+    }
+    return out;
+}
+/** The attributes as an HTML string fragment (` name="value"`…) for a string renderer. */
+function serializeA11yAttributes(attrs, escape) {
+    return Object.entries(attrs).map(([k, v]) => ` ${k}="${escape(v)}"`).join('');
+}
+const applied = new WeakMap();
+/**
+ * Make an element's managed attributes match `attrs` — set what is there, remove what this function
+ * set before and is gone now. An attribute it never set (a component's own `aria-*`) is left alone.
+ */
+function syncNodeA11yAttributes(el, attrs) {
+    if (!el)
+        return;
+    for (const name of applied.get(el) ?? [])
+        if (!(name in attrs))
+            el.removeAttribute(name);
+    for (const [name, value] of Object.entries(attrs))
+        el.setAttribute(name, value);
+    applied.set(el, Object.keys(attrs).filter(n => MANAGED_A11Y_ATTRIBUTES.includes(n)));
+}
+/** The types whose words are the node's own (`content` / `label`), not its children's. */
+const OWN_WORDS = { Text: 'content', Heading: 'content', Link: 'label', SubmitButton: 'label' };
+const ICON_TYPE = 'Icon';
+function scanNames(node, acc) {
+    const prop = node.type ? OWN_WORDS[node.type] : undefined;
+    if (prop && trimmed$1(nodeTraitValue(node, prop)))
+        acc.words = true;
+    if (node.type === ICON_TYPE)
+        acc.icon = true;
+    for (const child of (node.children ?? []))
+        scanNames(child, acc);
+}
+/**
+ * True for a control that shows ONLY an icon and has no Accessible name — announced as an unnamed
+ * 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)
+        return false;
+    if (trimmed$1(nodeTraitValue(node, A11yTrait.AccessibleName)))
+        return false;
+    const acc = { words: false, icon: false };
+    scanNames(node, acc);
+    return acc.icon && !acc.words;
+}
+
+/**
+ * THE interaction keyframes (composite plan T2 · CC1 N5). Both runtimes — the builder's
+ * InteractionEngineService and the live site's ClientInteractionService — animate an element action
+ * from this ONE table. Before it, each kept its own copy and they drifted: `show`/`hide` animated
+ * `visibility` on the canvas and not on the site, and `toggleVisibility` ran 0→1 on the canvas and
+ * 1→0 on the site, so the same hamburger opened on one and closed on the other.
+ *
+ * `toggleVisibility` is stateful: it HIDES a visible element and SHOWS a hidden one
+ * (`resolveToggleVisibility`), and its frames are then exactly `hide`'s or `show`'s. Hidden ends at
+ * `visibility: hidden`, so a hidden element leaves the tab order and the accessibility tree too.
+ * It is still visual-only — the element keeps its box — which is why the actions picker says so and
+ * why the mobile-nav pattern uses a Dialog instead (D9).
+ */
+/** The attribute a runtime puts on an element an interaction has hidden (and removes on reveal). */
+const INTERACTION_HIDDEN_ATTRIBUTE = 'data-iox-hidden';
+var VisibilityActionType;
+(function (VisibilityActionType) {
+    VisibilityActionType["Show"] = "show";
+    VisibilityActionType["Hide"] = "hide";
+    VisibilityActionType["Toggle"] = "toggleVisibility";
+})(VisibilityActionType || (VisibilityActionType = {}));
+/** Actions that reveal an element (hidden → visible). Their FIRST frame is the pre-state. */
+const ENTRANCE_ACTION_TYPES = new Set(['fadeIn', 'moveUp', 'moveDown', 'moveLeft', 'moveRight', 'scaleIn', VisibilityActionType.Show]);
+/** Actions that hide an element (visible → hidden). */
+const EXIT_ACTION_TYPES = new Set(['fadeOut', 'scaleOut', VisibilityActionType.Hide]);
+const DEFAULT_DISTANCE = 20;
+const DEFAULT_DEGREES = 360;
+const SHOWN = { opacity: 1, visibility: 'visible' };
+const HIDDEN = { opacity: 0, visibility: 'hidden' };
+/** What `toggleVisibility` does to an element: show it when hidden, hide it when visible. */
+function resolveToggleVisibility(isHidden) {
+    return isHidden ? VisibilityActionType.Show : VisibilityActionType.Hide;
+}
+/** The action a runtime actually plays: `toggleVisibility` resolved against the element's state. */
+function effectiveActionType(type, isHidden) {
+    return type === VisibilityActionType.Toggle ? resolveToggleVisibility(isHidden) : type;
+}
+/**
+ * The keyframes of an animation action, or null for a type that is not an animation (dialogs,
+ * context, navigation…). `toggleVisibility` must be resolved first (`effectiveActionType`); asked
+ * directly it answers with `hide`'s frames, the toggle of an element that starts visible.
+ */
+function buildInteractionKeyframes(type, params) {
+    const dist = Number(params?.['distance'] ?? DEFAULT_DISTANCE);
+    const deg = Number(params?.['degrees'] ?? DEFAULT_DEGREES);
+    switch (type) {
+        case 'fadeIn': return [{ opacity: 0 }, { opacity: 1 }];
+        case 'fadeOut': return [{ opacity: 1 }, { opacity: 0 }];
+        case 'moveUp': return [{ opacity: 0, transform: `translateY(${dist}px)` }, { opacity: 1, transform: 'translateY(0)' }];
+        case 'moveDown': return [{ opacity: 0, transform: `translateY(-${dist}px)` }, { opacity: 1, transform: 'translateY(0)' }];
+        case 'moveLeft': return [{ opacity: 0, transform: `translateX(${dist}px)` }, { opacity: 1, transform: 'translateX(0)' }];
+        case 'moveRight': return [{ opacity: 0, transform: `translateX(-${dist}px)` }, { opacity: 1, transform: 'translateX(0)' }];
+        case 'scaleIn': return [{ opacity: 0, transform: 'scale(0.8)' }, { opacity: 1, transform: 'scale(1)' }];
+        case 'scaleOut': return [{ opacity: 1, transform: 'scale(1)' }, { opacity: 0, transform: 'scale(0.8)' }];
+        case 'rotate': return [{ transform: 'rotate(0deg)' }, { transform: `rotate(${deg}deg)` }];
+        case VisibilityActionType.Show: return [HIDDEN, SHOWN];
+        case VisibilityActionType.Hide:
+        case VisibilityActionType.Toggle: return [SHOWN, HIDDEN];
+        default: return null;
+    }
+}
+/** `translateX` → `translate-x`, `opacity` → `opacity`: the CSS property name of a keyframe key. */
+function keyframePropertyName(key) {
+    return key.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+/** A keyframe as `[css-property, value]` pairs — what a runtime writes inline. */
+function keyframeStyleEntries(frame) {
+    return Object.entries(frame ?? {}).map(([k, v]) => [keyframePropertyName(k), String(v)]);
+}
+/**
+ * The inline pre-state an ENTRANCE action puts on its element before it plays — its first frame as
+ * CSS — so the server render ships it already hidden (no visible→hidden flash). `{}` for anything else.
+ */
+function entrancePreStateStyle(type, params) {
+    if (!ENTRANCE_ACTION_TYPES.has(type))
+        return {};
+    return Object.fromEntries(keyframeStyleEntries(buildInteractionKeyframes(type, params)?.[0]));
+}
+/** The frame an animation comes to rest on (what reduced motion applies at once). */
+function finalKeyframe(frames) {
+    return frames?.length ? frames[frames.length - 1] : null;
+}
+
 /**
  * page-style — the ONE compiler that turns a page's style settings into CSS.
  *
@@ -7523,5 +7864,5 @@ function effectiveTransitionId(anim) {
  * Generated bundle index. Do not edit.
  */
 
-export { AOSService, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ContainerComponent, ContextStore, 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, DeclarationContext, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, 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_HOVER_TRANSITION, LinkedContainerComponent, MAX_LINES_KEY, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, RESERVED_ALIAS_PREFIX, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, composeVirtualTraits, computeRelative, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, decomposeBackdropFilter, defaultHoverTransition, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, effectiveTransitionId, excludeSelf, feelFor, getByPath, getSeoValue, hasHoverState, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isGradientPaint, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, isWholeBackdropSet, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, parentBreakpoint, parseUrlList, partClassName, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, stateNamesIn, statePseudoClass, stripSuppressedProps, 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, 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_HOVER_TRANSITION, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, 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, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SectionComponent, SwiperModuleName, TRANSITION_FEELS, 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, 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, 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, stateNamesIn, statePseudoClass, stateSelectorSuffix, stripSuppressedProps, swiperAutoplayAllowed, swiperModuleNames, syncNodeA11yAttributes, variableAliases, variableItemsFrom, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map