@vectoriox/iox-builder 9.8.0 → 9.10.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -16,18 +16,20 @@ import { SelectModule } from 'primeng/select';
 import { TooltipModule } from 'primeng/tooltip';
 import { DialogModule } from 'primeng/dialog';
 import * as i1$1 from '@vectoriox/iox-ui';
-import { resolveBoundValue, VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, TEXT_DIRECTION_KEY, TEXT_ALIGN_KEY, TextAlign, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, LinkType, MAX_LINES_KEY, A11yTrait, BREAKPOINTS, Breakpoint, withSchemeInk, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, targetedStateSelector, stateSelectorSuffix, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, ContextStore, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, motionAllowed, finalKeyframe, keyframeStyleEntries, buildInteractionKeyframes, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, safeSetInput, colorSchemeOf, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, switchElementStyle, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, IS_PREVIEW, buttonBlockHref, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
+import { resolveBoundValue, VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, TEXT_DIRECTION_KEY, TEXT_ALIGN_KEY, TextAlign, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, LinkType, MAX_LINES_KEY, A11yTrait, BREAKPOINTS, Breakpoint, withSchemeInk, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, targetedStateSelector, stateSelectorSuffix, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, ContextStore, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, motionAllowed, finalKeyframe, keyframeStyleEntries, buildInteractionKeyframes, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, safeSetInput, colorSchemeOf, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, switchElementStyle, releaseElementStyle, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, IS_PREVIEW, buttonBlockHref, bootSlider, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
-import { structureRefusal, StructureEdit, isAccordionPart, AccordionRole, CompositeBehaviourTrait, ACCORDION_DEFAULT_ONS, onAccordionItemState, isAccordionItemOn, AccordionRuntime, accordionBehaviour, closestAccordionItem, isAccordionRoot, buildCardRecipe, buildBadge, buildChip, buildAccordionRecipe, accordionItemLabel, isLockedPart, accordionRootOf, isAccordionFromContent, accordionItemOf, addAccordionItem, accordionHeadingLevel } from '@vectoriox/iox-ui/composite-core';
+import { StructureEdit, isAccordionPart, isDisclosurePart, isSliderPart, structureRefusal, AccordionRole, CompositeBehaviourTrait, ACCORDION_DEFAULT_ONS, onAccordionItemState, isAccordionItemOn, runCompositeItemAction, shouldScrollToItem, rowIndexOf as rowIndexOf$1, slideIndexForRow, DisclosureRole, AccordionRuntime, accordionBehaviour, compositeScopeId, compositeRowKeys, compositeKindOfRole, closestAccordionItem, isCompositeRoot, isAccordionRoot, buildCardRecipe, buildBadge, buildChip, buildAccordionRecipe, buildDisclosureRecipe, buildLightboxRecipe, NO_ELEMENT_STYLE, CompositeKind, SliderRole, accordionItemLabel, isLockedPart, accordionRootOf, isAccordionFromContent, accordionItemOf, addAccordionItem, isCompositeItem, accordionHeadingLevel, isCompositePanel, isCompositeTrigger, splitSliderChildren, hasSliderParts } from '@vectoriox/iox-ui/composite-core';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
 import interact from 'interactjs';
 import { formContentInHost, isInteractiveHost, findFormContentInHosts } from '@vectoriox/iox-ui/forms-core';
 import { map, catchError } from 'rxjs/operators';
 import * as i1 from '@angular/common/http';
-import { BEHAVIOUR_ACTION_TYPES, SERVER_ELEMENT_ACTION_TYPES, CONSENT_ACTION_TYPES } from '@vectoriox/iox-ui/actions-core';
+import { itemActionOf, BEHAVIOUR_ACTION_TYPES, SERVER_ELEMENT_ACTION_TYPES, CONSENT_ACTION_TYPES, opensAtClickedItem } from '@vectoriox/iox-ui/actions-core';
 import Lenis from 'lenis';
 import Moveable from 'moveable';
 import Selecto from 'selecto';
+import { planVideo, VideoSource, VIDEO_PROVIDER_LABEL, VideoTrait, VideoMode } from '@vectoriox/iox-ui/media-core';
+import { ConsentCategory } from '@vectoriox/iox-ui/consent-core';
 
 var PanelEventTypes;
 (function (PanelEventTypes) {
@@ -176,6 +178,10 @@ const IOX_BUILDER_LABELS = new InjectionToken('IOX_BUILDER_LABELS', {
     providedIn: 'root',
     factory: () => defaultBuilderLabels,
 });
+const IOX_CONTENT_TYPE_LABELS = new InjectionToken('IOX_CONTENT_TYPE_LABELS', {
+    providedIn: 'root',
+    factory: () => () => null,
+});
 /** Standalone behaviour: the English text the library ships with. */
 const defaultBuilderLabels = (_key, fallback) => fallback;
 /**
@@ -207,11 +213,20 @@ const BUILDER_CHROME_EN = Object.freeze({
     'builder.chrome.compositeRole': 'Composite role',
     'builder.chrome.kindCard': 'Card',
     'builder.chrome.kindAccordion': 'Accordion',
+    'builder.chrome.kindDisclosure': 'Disclosure',
+    'builder.chrome.kindSlider': 'Slider',
+    'builder.chrome.kindVideo': 'Video',
+    'builder.chrome.videoPosterOnly': 'poster only',
+    'builder.chrome.videoFile': 'Uploaded file',
+    'builder.chrome.refuseLockedSliderPartMove': 'This control belongs to its slider — it can’t be moved out.',
+    'builder.chrome.refuseLockedSliderPause': 'The pause button stays while Autoplay is on — moving content must be pausable. Turn Autoplay off in the slider’s Bindings to remove it.',
+    'builder.chrome.refuseLockedDisclosurePart': 'A disclosure keeps its toggle and its panel. Delete the whole disclosure instead.',
+    'builder.chrome.refuseLockedDisclosurePartMove': 'This part belongs to its disclosure — it can’t be moved out.',
     'builder.chrome.refuseLockedItemPart': 'An item keeps its header and its panel. Delete the whole item, or the accordion.',
     'builder.chrome.refuseLockedItemPartMove': 'This part belongs to its item — it can’t be moved out.',
     'builder.chrome.refuseLastItem': 'An accordion keeps at least one item. Delete the whole accordion instead.',
     'builder.chrome.addItem': 'Add item',
-    'builder.chrome.fromContent': 'From {alias} · {count} rows',
+    'builder.chrome.fromContent': 'From {source} · {count} rows',
     'builder.chrome.emptySource': 'No rows in “{alias}”.',
     'builder.chrome.emptySourceHint': 'The {type} content type has no published items that match this source’s filters. Add items in Content ▸ {type}, or change the source.',
     'builder.chrome.fromRow': 'row {row} — every row wears this part',
@@ -244,6 +259,20 @@ const CANVAS_EMPTY_IMAGE_LABEL_EN = BUILDER_CHROME_EN[CANVAS_EMPTY_IMAGE_LABEL_K
  */
 const EDITOR_CHROME_ATTRIBUTE = 'data-iox-chrome';
 
+/** The content type a data source reads (`faqs`), or '' for a source that reads none (external, static). */
+function sourceContentType(ds) {
+    return ds?.request?.cms?.contentType || ds?.request?.shop?.contentType || '';
+}
+/**
+ * What the builder's chrome calls the list a source reads — the CONTENT TYPE's label ("From FAQ", board 3), as the
+ * host knows it (`IOX_CONTENT_TYPE_LABELS`), else the source's alias. ONE answer for the layer tree's
+ * "From FAQ · 3 rows", the Repeater's empty-source hint and the Items section's source options.
+ */
+function sourceTypeLabel(alias, ds, resolve) {
+    const type = sourceContentType(ds);
+    return (type && resolve(type)) || alias;
+}
+
 const freshId = () => Math.random().toString(36).substr(2, 9);
 /**
  * Assign fresh ids to a cloned ComponentNode subtree AND remap intra-subtree references to the
@@ -445,6 +474,14 @@ var InsertRefusal;
     InsertRefusal["LockedItemPart"] = "lockedItemPart";
     /** An accordion's LAST item (composite plan T11): it keeps at least one. */
     InsertRefusal["LastItem"] = "lastItem";
+    /** A disclosure's toggle or panel (CC2.1) moved out of it. */
+    InsertRefusal["LockedDisclosurePartMove"] = "lockedDisclosurePartMove";
+    /** A disclosure's toggle or panel (CC2.1) deleted on its own. */
+    InsertRefusal["LockedDisclosurePart"] = "lockedDisclosurePart";
+    /** A Slider's control (CC3) works only as its own direct child. */
+    InsertRefusal["LockedSliderPartMove"] = "lockedSliderPartMove";
+    /** The pause control stays while Autoplay is on (WCAG 2.2.2) — the Autoplay switch removes it. */
+    InsertRefusal["LockedSliderPause"] = "lockedSliderPause";
 })(InsertRefusal || (InsertRefusal = {}));
 const FORM_STATE_BLOCK_TYPES = new Set(['FormSuccess', 'FormError']);
 /** The builder-chrome label that says each refusal on screen (English in `BUILDER_CHROME_EN`). */
@@ -457,7 +494,22 @@ const INSERT_REFUSAL_LABEL_KEYS = Object.freeze({
     [InsertRefusal.LockedItemPartMove]: 'builder.chrome.refuseLockedItemPartMove',
     [InsertRefusal.LockedItemPart]: 'builder.chrome.refuseLockedItemPart',
     [InsertRefusal.LastItem]: 'builder.chrome.refuseLastItem',
+    [InsertRefusal.LockedDisclosurePartMove]: 'builder.chrome.refuseLockedDisclosurePartMove',
+    [InsertRefusal.LockedDisclosurePart]: 'builder.chrome.refuseLockedDisclosurePart',
+    [InsertRefusal.LockedSliderPartMove]: 'builder.chrome.refuseLockedSliderPartMove',
+    [InsertRefusal.LockedSliderPause]: 'builder.chrome.refuseLockedSliderPause',
 });
+/** Which refusal says a locked part's move / delete, by the composite it belongs to (a card's is the default). */
+function lockedRefusal(node, edit) {
+    const move = edit === StructureEdit.Move;
+    if (isAccordionPart(node))
+        return move ? InsertRefusal.LockedItemPartMove : InsertRefusal.LockedItemPart;
+    if (isDisclosurePart(node))
+        return move ? InsertRefusal.LockedDisclosurePartMove : InsertRefusal.LockedDisclosurePart;
+    if (isSliderPart(node))
+        return move ? InsertRefusal.LockedSliderPartMove : InsertRefusal.LockedSliderPause;
+    return move ? InsertRefusal.LockedPartMove : InsertRefusal.LockedPart;
+}
 /** The refusal in the host's language (the library's English when no host resolver is provided). */
 function insertRefusalLabel(reason, labels = defaultBuilderLabels) {
     const key = INSERT_REFUSAL_LABEL_KEYS[reason];
@@ -484,7 +536,7 @@ function insertRefusal(node, ancestors) {
     if (formContentInHost(node, ancestors.some(isInteractiveHost)))
         return InsertRefusal.FormInInteractive;
     if (structureRefusal(node, StructureEdit.Move, ancestors))
-        return isAccordionPart(node) ? InsertRefusal.LockedItemPartMove : InsertRefusal.LockedPartMove;
+        return lockedRefusal(node, StructureEdit.Move);
     return null;
 }
 /** Why `node` may not be REMOVED from where it is (deleted, cut, made global), or null when it may: a
@@ -492,7 +544,7 @@ function insertRefusal(node, ancestors) {
  *  accordion keeps its last item. `siblings` = the list `node` sits in (where the caller has it). */
 function removalRefusal(node, siblings) {
     if (structureRefusal(node, StructureEdit.Delete))
-        return isAccordionPart(node) ? InsertRefusal.LockedItemPart : InsertRefusal.LockedPart;
+        return lockedRefusal(node, StructureEdit.Delete);
     if (node?.role === AccordionRole.Item && siblings && siblings.filter(s => s?.role === AccordionRole.Item).length <= 1)
         return InsertRefusal.LastItem;
     return null;
@@ -600,6 +652,8 @@ const INVERSE_ACTION = {
     clearContext: 'setContext',
     openDialog: 'closeDialog',
     closeDialog: 'openDialog',
+    openItem: 'closeItem',
+    closeItem: 'openItem',
 };
 const TRIGGER_OPTIONS = [
     { value: 'pageLoad', label: 'Page load', icon: 'ph-thin ph-play' },
@@ -3679,8 +3733,11 @@ class InteractionEngineService {
                 this.runActions(node, ix.actions, element);
             }
         };
-        element.addEventListener('click', handler);
-        return () => element.removeEventListener('click', handler);
+        // CAPTURE, like the composite runtime: on the canvas every part's own listener stops the click to select
+        // that part, so a click on a button's LABEL never bubbled to the button's click interaction — the live
+        // site runs it (CC2.1: "Open an item" on a ButtonBlock did nothing on the canvas).
+        element.addEventListener('click', handler, true);
+        return () => element.removeEventListener('click', handler, true);
     }
     attachHover(node, ix, element) {
         const enterHandler = () => this.runActions(node, ix.actions, element);
@@ -3721,7 +3778,14 @@ class InteractionEngineService {
             // impossible. The canvas twin registered open/close/toggle under its nodeId, exactly
             // the Swiper-method pattern; a missing/mistargeted id is a silent no-op, never a throw.
             if (DIALOG_ACTION_TYPES.has(action.type)) {
-                this.executeDialogAction(action);
+                this.executeDialogAction(action, selfEl);
+                continue;
+            }
+            // Item actions (CC2.1 — composite T14): the canvas RUNS them on the target item's own runtime — the
+            // one the live site runs — and brings an item that opened out of view into it.
+            const itemAction = itemActionOf(action.type);
+            if (itemAction) {
+                this.executeItemAction(node, action, itemAction, selfEl);
                 continue;
             }
             // Tier-A behaviour (A1c). The canvas-is-live rules are catalog DATA
@@ -3819,6 +3883,14 @@ class InteractionEngineService {
             }
         }
     }
+    executeItemAction(node, action, itemAction, selfEl) {
+        const target = this.resolveTarget(node, action, selfEl);
+        const open = runCompositeItemAction(target, itemAction);
+        if (!open || !target)
+            return;
+        if (shouldScrollToItem(target.getBoundingClientRect().top, window.innerHeight))
+            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
     executeConsentAction(action) {
         if (action.type === 'openConsentPreferences') {
             const dialog = action.target && action.target !== 'self' ? this.instanceRegistry.get(action.target) : null;
@@ -3828,13 +3900,17 @@ class InteractionEngineService {
         const detail = { type: action.type, params: action.params ?? {}, target: action.target };
         window.dispatchEvent(new CustomEvent('iox-action-simulated', { detail }));
     }
-    executeDialogAction(action) {
+    executeDialogAction(action, selfEl) {
         const dialog = action.target && action.target !== 'self' ? this.instanceRegistry.get(action.target) : null;
         if (!dialog)
             return;
         switch (action.type) {
             case 'openDialog':
                 dialog.open?.();
+                // CC3 "Open at the clicked item": the lightbox's slider goes to the clicked row's slide — the same
+                // rule the live site runs (composite-core `slideIndexForRow`), once the canvas twin has rendered it.
+                if (opensAtClickedItem(action))
+                    this.slideDialogToRow(action.target, rowIndexOf$1(selfEl));
                 break;
             case 'closeDialog':
                 dialog.close?.();
@@ -3844,6 +3920,22 @@ class InteractionEngineService {
                 break;
         }
     }
+    /** The slider inside the opened dialog (its canvas twin renders on the next passes) → the row's slide. */
+    slideDialogToRow(dialogId, row) {
+        let tries = 0;
+        const attempt = () => {
+            const host = document.querySelector(`.iox-node-${CSS.escape(dialogId)}`);
+            const swiper = host?.querySelector('.swiper')?.swiper;
+            if (swiper?.slides?.length) {
+                swiper.update?.();
+                swiper.slideTo(slideIndexForRow(row, swiper.slides.length), 0);
+                return;
+            }
+            if (++tries < 40)
+                requestAnimationFrame(attempt);
+        };
+        requestAnimationFrame(attempt);
+    }
     executeSwiperAction(action) {
         // Target is the nodeId of the SliderContainer to control.
         const swiper = this.instanceRegistry.get(action.target);
@@ -4006,10 +4098,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
  * screen until something opens them, so on the canvas they show only while selected into or switched
  * open ("Showing on canvas"). The layer tree marks them with the eye-slash glyph. A Dialog (the mobile
  * menu's drawer, a consent banner) by its type; an Accordion's PANEL by its role (CC2 — closed until its
- * item opens). An inactive tab joins in CC4.
+ * item opens); a Disclosure's panel and its "Read less" word (CC2.1 — shown only while it is open). An inactive
+ * tab joins in CC4.
  */
 const HIDDEN_AT_REST_TYPES = ['Dialog'];
-const HIDDEN_AT_REST_ROLES = [AccordionRole.Panel];
+const HIDDEN_AT_REST_ROLES = [AccordionRole.Panel, DisclosureRole.Panel, DisclosureRole.Less];
 function isHiddenAtRest(node) {
     return (!!node?.type && HIDDEN_AT_REST_TYPES.includes(node.type)) || (!!node?.role && HIDDEN_AT_REST_ROLES.includes(node.role));
 }
@@ -4025,8 +4118,14 @@ var SelectionReveal;
     SelectionReveal["WhileSelected"] = "while-selected";
     SelectionReveal["UntilClosed"] = "until-closed";
 })(SelectionReveal || (SelectionReveal = {}));
+/**
+ * Parts hidden at rest that live in a composite's TOGGLE, not in its panel (CC2.1 follow-up, approved 2026-10-21): a
+ * click on one on the canvas toggles the composite live — selecting it never forces the reveal, so "Read less"
+ * closes the disclosure it was clicked in. Only a part inside a PANEL is revealed by the selection.
+ */
+const TOGGLE_PART_ROLES = [DisclosureRole.Less];
 function selectionRevealOf(node) {
-    if (!isHiddenAtRest(node))
+    if (!isHiddenAtRest(node) || (!!node?.role && TOGGLE_PART_ROLES.includes(node.role)))
         return null;
     return node?.role ? SelectionReveal.WhileSelected : SelectionReveal.UntilClosed;
 }
@@ -4145,10 +4244,17 @@ function sameSet(a, b) {
     return a.size === b.size && [...a].every(id => b.has(id));
 }
 
+/** The node whose "Showing on canvas" choice a rendered root follows: itself, or — a preview row's copy — its
+ *  template (a copy shares its template's style id). */
+function designIdOf(node) {
+    return node.__previewClone ? (node.styleId ?? node.id) : node.id;
+}
 /**
- * The composites' runtime ON THE CANVAS (CC2) — the canvas is a live runtime, so an Accordion opens and
- * closes on the canvas exactly as on the site: the SAME composite-core `AccordionRuntime` the live engine
- * attaches. On top of the live state it shows what the author is designing (R2, CC1's design state):
+ * The composites' runtime ON THE CANVAS (CC2) — the canvas is a live runtime, so an Accordion (and a Disclosure,
+ * CC2.1) opens and closes on the canvas exactly as on the site: the SAME composite-core `AccordionRuntime` the live
+ * engine attaches. A composite repeated in a Repeater's preview rows runs one per row, each with its own ARIA ids
+ * (its row folded into the scope id — vectoriox/iox-ui#20). On top of the live state it shows what the author is
+ * designing (R2, CC1's design state):
  * - selecting anything inside a CLOSED panel (canvas, tree, crumb, an Items row, SELECT_NODE) opens its item
  *   while it is selected, and deselecting closes it again;
  * - "Showing on canvas ▸ All open" opens every item; "As saved" goes back to the saved default.
@@ -4166,18 +4272,21 @@ class CompositeCanvasService {
         for (const id of [...this.attached.keys()])
             this.detach(id);
     }
-    /** An accordion root rendered on the canvas: run it. `element` is the root's rendered element. */
+    /** A composite root rendered on the canvas (the template, or a preview row's copy): run it. `element` is the
+     *  root's rendered element. Its ARIA ids are scoped by the preview rows it sits in. */
     attach(node, element) {
         if (!node.id)
             return;
         this.detach(node.id);
+        const cssId = node.styleId ?? node.id;
         const runtime = this.zone.runOutsideAngular(() => new AccordionRuntime(element, {
-            rootId: node.styleId ?? node.id,
+            kind: compositeKindOfRole(node.role) ?? undefined,
+            rootId: () => compositeScopeId(cssId, compositeRowKeys(element)),
             behaviour: accordionBehaviour(node),
             observe: true,
             forced: () => this.forcedFor(node, element),
         }));
-        this.attached.set(node.id, { node, runtime, shown: this.designState?.shownState(node.id) ?? CanvasShowState.Closed });
+        this.attached.set(node.id, { node, runtime, shown: this.designState?.shownState(designIdOf(node)) ?? CanvasShowState.Closed });
     }
     detach(nodeId) {
         if (!nodeId)
@@ -4195,8 +4304,8 @@ class CompositeCanvasService {
         return (nodeId && this.attached.get(nodeId)?.runtime) || null;
     }
     applyDesignState() {
-        for (const [id, entry] of this.attached) {
-            const shown = this.designState?.shownState(id) ?? CanvasShowState.Closed;
+        for (const entry of this.attached.values()) {
+            const shown = this.designState?.shownState(designIdOf(entry.node)) ?? CanvasShowState.Closed;
             // Back to "As saved": the saved default, whatever the author clicked open meanwhile (board 3).
             if (shown !== entry.shown && shown === CanvasShowState.Closed)
                 entry.runtime.resetLive();
@@ -4206,7 +4315,8 @@ class CompositeCanvasService {
         }
     }
     /** The keys the design state holds open: every item ("All open"), or the items whose hidden part the
-     *  selection sits in. A preview row shares its template's classes, so the template (row 1) answers. */
+     *  selection sits in. A preview row shares its template's classes, so the template (row 1) answers — and a
+     *  composite copied into a preview row follows its template's choice. */
     forcedFor(node, root) {
         const forced = new Set();
         const state = this.designState;
@@ -4214,7 +4324,7 @@ class CompositeCanvasService {
             return forced;
         const runtime = this.attached.get(node.id)?.runtime;
         const items = runtime?.items() ?? [];
-        if (state.shownState(node.id) === CanvasShowState.Open) {
+        if (state.shownState(designIdOf(node)) === CanvasShowState.Open) {
             for (const item of items)
                 forced.add(runtime.keyOf(item, items));
             return forced;
@@ -4735,8 +4845,10 @@ class RenderDirective {
                 this.overlayService.triggerContextMenu(event.clientX, event.clientY);
             });
         }
-        // A composite root runs its behaviour on the canvas — the live site's runtime (CC2).
-        if (nativeEl && !isPreviewClone && node.id && isAccordionRoot(node) && this.compositeCanvas) {
+        // A composite root runs its behaviour on the canvas — the live site's runtime (CC2; the Disclosure, CC2.1).
+        // A preview row's copy runs too, scoped by its row (vectoriox/iox-ui#20): its ids are its own and it shows
+        // the saved default, as every row does on the live site.
+        if (nativeEl && node.id && isCompositeRoot(node) && this.compositeCanvas) {
             this.compositeCanvas.attach(node, nativeEl);
             this.compositeRootId = node.id;
         }
@@ -4859,6 +4971,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 
 const EMPTY_SOURCE_KEY = 'builder.chrome.emptySource';
 const EMPTY_SOURCE_HINT_KEY = 'builder.chrome.emptySourceHint';
+const NO_TYPE_LABELS = () => null;
 class BuilderRepeaterComponent {
     get children() { return this._children; }
     /** RenderDirective sets `source` (→ fetchData) BEFORE `children`. With an async source the response
@@ -4880,8 +4993,9 @@ class BuilderRepeaterComponent {
     get emptySourceTitle() {
         return this.label(EMPTY_SOURCE_KEY).replace('{alias}', this._source);
     }
+    /** "The FAQ content type has no published items…" — the type's LABEL (board 4), else the alias. */
     get emptySourceHint() {
-        const type = this.dsRegistry.findByAlias(this._source)?.request?.cms?.contentType ?? this._source;
+        const type = sourceTypeLabel(this._source, this.dsRegistry.findByAlias(this._source), this.typeLabels ?? NO_TYPE_LABELS);
         return this.label(EMPTY_SOURCE_HINT_KEY).split('{type}').join(type);
     }
     label(key) {
@@ -4921,7 +5035,7 @@ class BuilderRepeaterComponent {
             this.fetchData();
         }
     }
-    constructor(dragEngine, overlayService, dataSourceService, dsRegistry, panelEventService, cdr, interactionEngine, labels) {
+    constructor(dragEngine, overlayService, dataSourceService, dsRegistry, panelEventService, cdr, interactionEngine, labels, typeLabels) {
         this.dragEngine = dragEngine;
         this.overlayService = overlayService;
         this.dataSourceService = dataSourceService;
@@ -4930,6 +5044,7 @@ class BuilderRepeaterComponent {
         this.cdr = cdr;
         this.interactionEngine = interactionEngine;
         this.labels = labels;
+        this.typeLabels = typeLabels;
         this._children = [];
         this.style = {};
         this.nodeId = '';
@@ -5070,7 +5185,7 @@ class BuilderRepeaterComponent {
         if (this.items.length)
             setTimeout(() => this.refreshPreviews());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderRepeaterComponent, deps: [{ token: DragEngineService }, { token: OverlayService }, { token: BuilderDataSourceService }, { token: DataSourceRegistryService }, { token: PanelEventService }, { token: i0.ChangeDetectorRef }, { token: InteractionEngineService }, { token: IOX_BUILDER_LABELS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderRepeaterComponent, deps: [{ token: DragEngineService }, { token: OverlayService }, { token: BuilderDataSourceService }, { token: DataSourceRegistryService }, { token: PanelEventService }, { token: i0.ChangeDetectorRef }, { token: InteractionEngineService }, { token: IOX_BUILDER_LABELS, optional: true }, { token: IOX_CONTENT_TYPE_LABELS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: BuilderRepeaterComponent, isStandalone: false, selector: "app-builder-repeater", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", source: "source", sourcePath: "sourcePath", limit: "limit" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
         <ng-template #badgeContent>
             <i class="ph-thin ph-repeat"></i>
@@ -5261,6 +5376,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 }, {
                     type: Inject,
                     args: [IOX_BUILDER_LABELS]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IOX_CONTENT_TYPE_LABELS]
                 }] }], propDecorators: { children: [{
                 type: Input
             }], style: [{
@@ -5294,9 +5414,11 @@ var CompositePresetId;
     CompositePresetId["Badge"] = "badge";
     CompositePresetId["Chip"] = "chip";
     CompositePresetId["Accordion"] = "accordion";
+    CompositePresetId["Disclosure"] = "disclosure";
+    CompositePresetId["Lightbox"] = "lightbox";
 })(CompositePresetId || (CompositePresetId = {}));
 /** Where a composite sits in the Components panel (composite plan §6d): content blocks, or the interactive
- *  composites (the Accordion — CC2; Tabs and the floating family later). */
+ *  composites (the Accordion — CC2, the Disclosure — CC2.1; Tabs and the floating family later). */
 var CompositePaletteGroup;
 (function (CompositePaletteGroup) {
     CompositePaletteGroup["ContentBlocks"] = "content-blocks";
@@ -5323,6 +5445,16 @@ const COMPOSITE_PRESETS = Object.freeze([
         description: 'Questions that open — three items, one open at a time. Every header, icon and panel is its own element.',
         build: create => buildAccordionRecipe(create),
     },
+    {
+        id: CompositePresetId.Disclosure, group: CompositePaletteGroup.Interactive, name: 'Disclosure', icon: 'ph-thin ph-caret-circle-down',
+        description: '"Read more" — a button that reveals the text below it and reads "Read less" while it is open.',
+        build: create => buildDisclosureRecipe(create),
+    },
+    {
+        id: CompositePresetId.Lightbox, group: CompositePaletteGroup.Interactive, name: 'Lightbox', icon: 'ph-thin ph-frame-corners',
+        description: 'A full-screen dialog with a slider — bind its slider to your gallery\'s source, and each thumbnail opens it at its own image.',
+        build: create => buildLightboxRecipe(create),
+    },
 ]);
 /**
  * The builder's node factory for composite-core recipes: a NEW node as the palette creates one
@@ -5342,6 +5474,11 @@ function builderCompositeFactory(createConfig, baselineStyles) {
         if (spec.elementStyle && spec.elementStyle !== node.elementStyle) {
             switchElementStyle(node, node.elementStyle, spec.elementStyle, baselineStyles(spec.type));
         }
+        else if (spec.elementStyle === NO_ELEMENT_STYLE && node.elementStyle) {
+            // NO_ELEMENT_STYLE asks for no style (undefined / null keep the type's default): a migrated slider's bare
+            // chevrons, a lightbox's slide (CC3).
+            releaseElementStyle(node, node.elementStyle, baselineStyles(spec.type));
+        }
         if (node.children)
             node.children = [];
         return node;
@@ -6768,13 +6905,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
  * breadcrumb and the tree row's sub-label share these, so the four surfaces never disagree (board 3: "The
  * four surfaces, all driven by the same selection").
  *
- * An accordion's parts are named by the part alone (`trigger`, "Accordion · trigger", board 3); a card keeps
- * its full role (`card.title`, "Card · card.title", board 8).
+ * An accordion's and a disclosure's parts are named by the part alone (`trigger`, "Accordion · trigger", board 3);
+ * a card keeps its full role (`card.title`, "Card · card.title", board 8).
  */
-const SHORT_ROLE_KINDS = new Set(['accordion']);
+const SHORT_ROLE_KINDS = new Set([CompositeKind.Accordion, CompositeKind.Disclosure]);
 /** A composite kind's glyph (Phosphor, weight-less): the badge, the root's crumb and its tree row carry it
  *  (board 3: "the composite root carrying its kind icon"). A card keeps the generic stack glyph. */
-const KIND_GLYPHS = { accordion: 'ph-rows' };
+const KIND_GLYPHS = { [CompositeKind.Accordion]: 'ph-rows', [CompositeKind.Disclosure]: 'ph-caret-circle-down', slider: 'ph-slideshow' };
 const DEFAULT_KIND_GLYPH = 'ph-stack';
 /** The tree icon of an accordion's structural parts (board 3): rows on the root, a stack on an item and a
  *  panel, a cursor on the header, a sparkle on the icon. Other parts keep their type's icon. */
@@ -6784,6 +6921,17 @@ const PART_ICONS = {
     [AccordionRole.Trigger]: 'ph-thin ph-cursor',
     [AccordionRole.Panel]: 'ph-thin ph-stack',
     [AccordionRole.Icon]: 'ph-thin ph-sparkle',
+    // CC2.1 — the disclosure follows the accordion's drawn conventions (board 3): its kind glyph on the root, a
+    // cursor on its toggle, a stack on its panel, a sparkle on its icon; its two words keep the Text icon.
+    [DisclosureRole.Disclosure]: 'ph-thin ph-caret-circle-down',
+    [DisclosureRole.Trigger]: 'ph-thin ph-cursor',
+    [DisclosureRole.Panel]: 'ph-thin ph-stack',
+    [DisclosureRole.Icon]: 'ph-thin ph-sparkle',
+    // CC3 — a Slider's controls (board 6): a cursor on the buttons, six dots on the pagination.
+    [SliderRole.Pause]: 'ph-thin ph-cursor',
+    [SliderRole.Prev]: 'ph-thin ph-cursor',
+    [SliderRole.Next]: 'ph-thin ph-cursor',
+    [SliderRole.Pagination]: 'ph-thin ph-dots-six',
 };
 /** The glyph of a role's composite kind (`ph-rows` for an accordion and its parts). */
 function compositeKindGlyph(role) {
@@ -6868,7 +7016,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 const FROM_ROW_KEY = 'builder.chrome.fromRow';
 const ADD_ITEM_KEY = 'builder.chrome.addItem';
 /** The kind label a composite part's selection badge shows (Card v2: "Card · card.title"). */
-const COMPOSITE_KIND_KEYS = { card: 'builder.chrome.kindCard', accordion: 'builder.chrome.kindAccordion' };
+const COMPOSITE_KIND_KEYS = { card: 'builder.chrome.kindCard', accordion: 'builder.chrome.kindAccordion', disclosure: 'builder.chrome.kindDisclosure', slider: 'builder.chrome.kindSlider' };
+const VIDEO_TYPE = 'Video';
+const VIDEO_KIND_KEY = 'builder.chrome.kindVideo';
+const VIDEO_POSTER_ONLY_KEY = 'builder.chrome.videoPosterOnly';
+const VIDEO_FILE_KEY = 'builder.chrome.videoFile';
 /** The parts that offer "Add item" on the selection toolbar (board 3: the "Add slide" pattern). */
 const ADD_ITEM_ROLES = new Set([AccordionRole.Accordion, AccordionRole.Item, AccordionRole.Trigger, AccordionRole.Panel]);
 class OverlayComponent {
@@ -7085,11 +7237,17 @@ class OverlayComponent {
     }
     /** The kind badge's glyph: the composite's kind icon (board 9: "kind icon + 'Accordion · trigger'"). */
     get selectedRoleIcon() {
+        if (this.selectEntry?.node?.type === VIDEO_TYPE && !this.selectEntry.node.role)
+            return 'ph-fill ph-film-strip';
         return `ph-fill ${compositeKindGlyph(this.selectEntry?.node?.role ?? '')}`;
     }
-    /** A composite part's kind + role under the selection (board 3/8 "Selection kind badge"), or null. */
+    /** A composite part's kind + role under the selection (board 3/8 "Selection kind badge"), or null. A Video says
+     *  where it plays from and that the canvas shows its poster only (board 5: "Video · YouTube · poster only"). */
     get selectedRoleBadge() {
-        const role = this.selectEntry?.node?.role;
+        const node = this.selectEntry?.node;
+        if (node?.type === VIDEO_TYPE && !node.role)
+            return this.videoBadge(node);
+        const role = node?.role;
         if (!role)
             return null;
         const prefix = role.split('.')[0];
@@ -7099,6 +7257,13 @@ class OverlayComponent {
         const row = this.overlayService.selectedRow;
         return row ? `${badge} · ${this.builderLabels(FROM_ROW_KEY, BUILDER_CHROME_EN[FROM_ROW_KEY]).replace('{row}', String(row))}` : badge;
     }
+    videoBadge(node) {
+        const plan = planVideo(node, null);
+        const where = plan.source === VideoSource.File
+            ? this.builderLabels(VIDEO_FILE_KEY, BUILDER_CHROME_EN[VIDEO_FILE_KEY])
+            : VIDEO_PROVIDER_LABEL[plan.source];
+        return `${this.builderLabels(VIDEO_KIND_KEY, BUILDER_CHROME_EN[VIDEO_KIND_KEY])} · ${where} · ${this.builderLabels(VIDEO_POSTER_ONLY_KEY, BUILDER_CHROME_EN[VIDEO_POSTER_ONLY_KEY])}`;
+    }
     /** The selection toolbar's name: the part's LAYER name (board 3 — "Header", "Accordion"), else its type. */
     get toolbarName() {
         return this.selectEntry?.node?.label || this.selectEntry?.componentName || '';
@@ -7737,7 +7902,7 @@ function walk(nodes, depth, out, ctx, inTemplate, templateOf) {
     }
 }
 
-/** An Accordion from content's root row (CC2, board 9): "From faqs · 6 rows". */
+/** An Accordion from content's root row (CC2, board 3 / 9): "From FAQ · 6 rows" — the content type's label. */
 const FROM_CONTENT_KEY = 'builder.chrome.fromContent';
 const LOCKED_PART_KEY = 'builder.chrome.lockedPart';
 const COMPOSITE_ROLE_KEY = 'builder.chrome.compositeRole';
@@ -7775,6 +7940,8 @@ class LayerTreeComponent {
         this.activeSection = 'page';
         this.labels = inject(IOX_BUILDER_LABELS);
         this.panelEvents = inject(PanelEventService);
+        this.typeLabels = inject(IOX_CONTENT_TYPE_LABELS);
+        this.dataSources = inject(DataSourceRegistryService, { optional: true });
         this.lockedPartTitle = this.labels(LOCKED_PART_KEY, BUILDER_CHROME_EN[LOCKED_PART_KEY]);
         this.roleTitle = this.labels(COMPOSITE_ROLE_KEY, BUILDER_CHROME_EN[COMPOSITE_ROLE_KEY]);
         this.templateLabel = this.labels(TEMPLATE_KEY, BUILDER_CHROME_EN[TEMPLATE_KEY]);
@@ -7946,7 +8113,9 @@ class LayerTreeComponent {
             isExpanded: (node) => (node.id ? (this.expandedState.get(node.id) ?? true) : true),
             repeaterRows: (node) => this.repeaterRows(node),
             fromContentLabel: (rows) => rows.alias
-                ? this.labels(FROM_CONTENT_KEY, BUILDER_CHROME_EN[FROM_CONTENT_KEY]).replace('{alias}', rows.alias).replace('{count}', String(rows.count))
+                ? this.labels(FROM_CONTENT_KEY, BUILDER_CHROME_EN[FROM_CONTENT_KEY])
+                    .replace('{source}', sourceTypeLabel(rows.alias, this.dataSources?.findByAlias(rows.alias), this.typeLabels))
+                    .replace('{count}', String(rows.count))
                 : null,
         };
         this.flatTree = flattenLayerTree(this.layout, ctx);
@@ -8019,7 +8188,7 @@ class BreadcrumbBarComponent {
             ...nodes.map((node, i) => ({
                 node,
                 label: crumbLabel(node),
-                icon: isAccordionRoot(node) ? `ph-thin ${compositeKindGlyph(node.role)}` : null,
+                icon: isCompositeRoot(node) ? `ph-thin ${compositeKindGlyph(node.role)}` : null,
                 isCurrent: i === last,
                 key: node,
             })),
@@ -9883,13 +10052,14 @@ const ACCORDION_TRACK_WRAPPER = 'track';
  * See moveable-migration.md.
  */
 class BuilderContainerComponent {
-    /** The wrapper a child renders in: an Accordion item's header → its heading level, its panel → the track. */
+    /** The wrapper a child renders in: an Accordion item's header → its heading level; an item's panel (either
+     *  kind) → the track. A disclosure's toggle has no heading — it is a button in the flow. */
     wrapperOf(child) {
-        if (this.node?.role !== AccordionRole.Item)
+        if (!isCompositeItem(this.node))
             return null;
-        if (child.role === AccordionRole.Trigger)
+        if (child.role === AccordionRole.Trigger && this.node?.role === AccordionRole.Item)
             return accordionHeadingLevel(child);
-        if (child.role === AccordionRole.Panel)
+        if (isCompositePanel(child))
             return ACCORDION_TRACK_WRAPPER;
         return null;
     }
@@ -9962,7 +10132,8 @@ class BuilderContainerComponent {
         </ng-template>
         <!-- An Accordion ITEM (CC2) wraps its parts in the markup every renderer writes: the header inside a
              heading of its question's level, the panel inside the track + region the ONE hiding rule collapses
-             (iox-design.css). Structural only — the runtime stamps their state. -->
+             (iox-design.css). A Disclosure (CC2.1) is its own item: its toggle stays a bare button, its panel
+             takes the same track. Structural only — the runtime stamps their state. -->
         @for (child of children; track child) {
             @switch (wrapperOf(child)) {
                 @case ('h2') { <h2 class="iox-accordion-heading"><ng-container *ngTemplateOutlet="childTpl; context: { $implicit: child }"></ng-container></h2> }
@@ -10003,7 +10174,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
         </ng-template>
         <!-- An Accordion ITEM (CC2) wraps its parts in the markup every renderer writes: the header inside a
              heading of its question's level, the panel inside the track + region the ONE hiding rule collapses
-             (iox-design.css). Structural only — the runtime stamps their state. -->
+             (iox-design.css). A Disclosure (CC2.1) is its own item: its toggle stays a bare button, its panel
+             takes the same track. Structural only — the runtime stamps their state. -->
         @for (child of children; track child) {
             @switch (wrapperOf(child)) {
                 @case ('h2') { <h2 class="iox-accordion-heading"><ng-container *ngTemplateOutlet="childTpl; context: { $implicit: child }"></ng-container></h2> }
@@ -10024,7 +10196,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                         '[attr.data-iox-state]': 'formClass === "iox-form" ? formState : null',
                         '[attr.start]': "htmlTag === 'ol' && start !== 1 ? start : null",
                         '[attr.reversed]': "htmlTag === 'ol' && reversed ? '' : null",
-                        // An accordion item's identity — the runtime pairs its header and panel ids from it (CC2).
+                        // An item's identity (an accordion item, or a disclosure) — the runtime pairs its header and panel ids from it.
                         '[attr.data-iox-item-key]': 'node?.itemKey ?? null',
                     }, standalone: false, styles: [":host{position:relative;box-sizing:border-box}.container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0;opacity:0;transition:opacity .15s}:host(:hover) .container-placeholder,:host(.iox-drag-over) .container-placeholder{opacity:1}.container-placeholder i{font-size:18px}:host ::ng-deep>[class*=iox-outer-]{min-width:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
@@ -10056,9 +10228,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 /** `click` covers plain and modified clicks; a middle click opens a tab through `auxclick` alone. */
 const NAVIGATING_CLICKS = ['click', 'auxclick'];
 class BuilderLinkedContainerComponent {
-    /** An Accordion's header renders a <button> (CC2). */
+    /** An Accordion's header (CC2) or a Disclosure's toggle (CC2.1) renders a <button>. */
     get isTrigger() {
-        return this.node?.role === AccordionRole.Trigger;
+        return isCompositeTrigger(this.node);
     }
     constructor(dragEngine, cdr, elRef, isPreview) {
         this.dragEngine = dragEngine;
@@ -10557,7 +10729,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Output
             }] } });
 
+/** Swiper's event → the interaction trigger it replays (componentEvents). */
+const SWIPER_TRIGGER = {
+    slideChange: 'swiperSlideChange', reachBeginning: 'swiperReachBeginning', reachEnd: 'swiperReachEnd',
+    autoplayStart: 'swiperAutoplayStart', autoplayStop: 'swiperAutoplayStop',
+};
 class SliderContainerComponent {
+    /** Every child — the slides AND the control parts (CC3). Split once per change, never in a getter. */
+    set children(value) {
+        this._children = value ?? [];
+        const { lead, slides, trail } = splitSliderChildren(this._children);
+        this.leadParts = lead;
+        this.slides = slides;
+        this.trailParts = trail;
+        this.controlParts = hasSliderParts({ children: this._children });
+    }
+    get children() { return this._children; }
+    /** A saved slider whose controls are not parts yet keeps Swiper-drawn ones. */
+    get legacyControls() { return !this.controlParts; }
     set style(v) {
         if (v === this._style)
             return;
@@ -10604,7 +10793,14 @@ class SliderContainerComponent {
         this.dataSourceService = dataSourceService;
         this.dsRegistry = dsRegistry;
         this.panelEventService = panelEventService;
-        this.children = [];
+        this._children = [];
+        /** The slides (into `.swiper-wrapper`); the template slide of a bound slider is `slides[0]`. */
+        this.slides = [];
+        /** Control parts before the first slide / after it — rendered beside the wrapper, inside `.swiper`. */
+        this.leadParts = [];
+        this.trailParts = [];
+        /** The controls are parts: Swiper draws none of its own. */
+        this.controlParts = false;
         this._style = {};
         this._previewStyle = {};
         this._editShellStyle = { position: 'relative' };
@@ -10755,7 +10951,7 @@ class SliderContainerComponent {
         });
     }
     refreshPreviews() {
-        if (!this.items.length || !this.children.length) {
+        if (!this.items.length || !this.slides.length) {
             this.previewSlides = [];
             this.cdr.markForCheck();
             this._scheduleReinit();
@@ -10763,16 +10959,16 @@ class SliderContainerComponent {
         }
         this.applyFirstItemToTemplate();
         // Each preview slide = one cloned SliderSlide node with item data resolved
-        this.previewSlides = this.items.slice(1).map(item => cloneNodesForItem([this.children[0]], item)[0]);
+        this.previewSlides = this.items.slice(1).map(item => cloneNodesForItem([this.slides[0]], item)[0]);
         this.cdr.markForCheck();
         this._scheduleReinit();
     }
     applyFirstItemToTemplate() {
         const item = this.items[0];
-        if (!item || !this.children.length || !this.overlayService)
+        if (!item || !this.slides.length || !this.overlayService)
             return;
         // Bindings live on leaf nodes inside the template slide, so recurse into the tree
-        this.applyItemToNodes([this.children[0]], item);
+        this.applyItemToNodes([this.slides[0]], item);
     }
     applyItemToNodes(nodes, item) {
         for (const node of nodes) {
@@ -10798,7 +10994,7 @@ class SliderContainerComponent {
     _isInTemplate(target) {
         const search = (nodes) => nodes.some(c => c === target || c.id === target.id ||
             (c.children?.length ? search(c.children) : false));
-        return this.children.length > 0 && search([this.children[0]]);
+        return this.slides.length > 0 && search([this.slides[0]]);
     }
     _scheduleReinit() {
         this._destroySwiper();
@@ -10811,123 +11007,31 @@ class SliderContainerComponent {
         const el = this.isPreview ? this.swiperEl?.nativeElement : this.editSwiperEl?.nativeElement;
         if (!el)
             return;
-        const [{ default: Swiper }, swiperModules] = await Promise.all([
-            import('swiper'),
-            import('swiper/modules'),
-        ]);
-        const { Navigation, Pagination, Scrollbar, Autoplay, Keyboard, Mousewheel, Zoom, Grid, Parallax, FreeMode, 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);
-        const config = {
-            modules,
-            direction: this.direction,
-            slidesPerView: this.slidesPerView,
-            slidesPerGroup: this.slidesPerGroup > 1 ? this.slidesPerGroup : 1,
-            spaceBetween: this.spaceBetween,
-            speed: this.isPreview ? this.speed : 300,
-            // Always slide effect in edit mode — fade/cube etc. hide all but active slide
-            effect: this.isPreview ? this.effect : 'slide',
-            centeredSlides: this.centeredSlides,
-            initialSlide: this.initialSlide,
-            autoHeight: this.autoHeight,
-        };
-        if (this.isPreview) {
-            // Full interactive config for preview
-            config['grabCursor'] = this.grabCursor;
-            config['slideToClickedSlide'] = this.slideToClickedSlide;
-            config['loop'] = this.loop === 'loop';
-            config['rewind'] = this.loop === 'rewind';
-            if (this.freeMode) {
-                modules.push(FreeMode);
-                config['freeMode'] = true;
-            }
-            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 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]);
-            }
-            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,
-                    dynamicBullets: this.paginationDynamicBullets,
-                };
-            }
-            if (this.enableScrollbar)
-                config['scrollbar'] = { el: '.swiper-scrollbar', draggable: true };
-            if (this.enableAutoplay) {
-                config['autoplay'] = {
-                    delay: this.autoplayDelay,
-                    pauseOnMouseEnter: this.autoplayPauseOnMouseEnter,
-                    disableOnInteraction: this.autoplayDisableOnInteraction,
-                };
-            }
-            if (this.enableGrid && this.gridRows > 1)
-                config['grid'] = { rows: this.gridRows };
-            if (this.breakpoints) {
-                try {
-                    config['breakpoints'] = JSON.parse(this.breakpoints);
-                }
-                catch { /* ignore */ }
-            }
-            config['on'] = {
-                slideChange: (swiper) => this._onSwiperEvent('swiperSlideChange', swiper),
-                reachBeginning: (swiper) => this._onSwiperEvent('swiperReachBeginning', swiper),
-                reachEnd: (swiper) => this._onSwiperEvent('swiperReachEnd', swiper),
-                autoplayStart: (swiper) => this._onSwiperEvent('swiperAutoplayStart', swiper),
-                autoplayStop: (swiper) => this._onSwiperEvent('swiperAutoplayStop', swiper),
-            };
-        }
-        else {
-            // Edit mode: disable touch/swipe so builder click handlers work normally
-            config['allowTouchMove'] = false;
-            config['simulateTouch'] = false;
-            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,
-                    dynamicBullets: this.paginationDynamicBullets,
-                };
-            }
-            if (this.enableScrollbar)
-                config['scrollbar'] = { el: '.swiper-scrollbar', draggable: false };
-        }
-        this._swiper = new Swiper(el, config);
+        // The ONE Swiper decision (iox-ui `bootSlider` → `planSwiperOptions`): the EDIT canvas is tamed (no touch,
+        // loop or autoplay; the parts still navigate); Preview is the live site's — the A11y module, the pause
+        // control, the live region (CC3; Preview used to build its own config and skipped A11y).
+        const swiper = await bootSlider(el, this.swiperInputs(), {
+            edit: !this.isPreview,
+            onEvent: this.isPreview ? (event, sw) => this._onSwiperEvent(SWIPER_TRIGGER[event] ?? event, sw) : undefined,
+        });
+        if (!swiper)
+            return;
+        this._swiper = swiper;
         this.instanceRegistry.register(this.nodeId, this._swiper);
     }
+    swiperInputs() {
+        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,
+        };
+    }
     _destroySwiper() {
         if (this._swiper) {
             this._swiper.destroy(true, true);
@@ -10940,7 +11044,7 @@ class SliderContainerComponent {
         if (eventName === 'swiperSlideChange') {
             const prevIdx = swiper.previousIndex;
             const activeIdx = swiper.activeIndex;
-            const allSlides = this._source ? [this.children[0], ...this.previewSlides] : this.children;
+            const allSlides = this._source ? [this.slides[0], ...this.previewSlides] : this.slides;
             if (prevIdx !== undefined && allSlides[prevIdx]) {
                 this.interactionEngine.replayTrigger(allSlides[prevIdx].id, 'swiperSlideInactive');
             }
@@ -10970,11 +11074,17 @@ class SliderContainerComponent {
             </div>
 
             <div #editSwiperEl class="swiper swiper-edit" [attr.dir]="dir" [style.direction]="dir">
+                <!-- CC3: the control PARTS (Pause, Previous, Next, Pagination) render inside .swiper, beside the
+                     wrapper (never in it — slider.md); selectable and styled on their own (R2). -->
+                <ng-container *ngFor="let part of leadParts; trackBy: trackByNodeId">
+                    <ng-container [ioxRender]="part" (onClick)="childClick.emit($event)"
+                        (onMouseEnter)="childMouseEnter.emit($event)" (onMouseLeave)="childMouseLeave.emit()"></ng-container>
+                </ng-container>
                 <div class="swiper-wrapper">
 
-                    <!-- NORMAL MODE: all children as draggable slides -->
+                    <!-- NORMAL MODE: all slides draggable -->
                     <ng-container *ngIf="!source">
-                        <div *ngFor="let child of children"
+                        <div *ngFor="let child of slides; trackBy: trackByNodeId"
                              class="swiper-slide"
                              [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
                              ioxDraggable
@@ -10992,22 +11102,24 @@ class SliderContainerComponent {
                     <!-- REPEAT MODE: template slide (item 0) + dimmed preview slides (items 1..N) -->
                     <ng-container *ngIf="source">
                         <!-- Template slide — draggable/editable, receives item[0] data -->
-                        <div *ngIf="children.length"
+                        <div *ngIf="slides.length"
                              class="swiper-slide"
-                             [ngClass]="['iox-outer-' + (children[0].styleId ?? children[0].id)]"
+                             [ngClass]="['iox-outer-' + (slides[0].styleId ?? slides[0].id)]"
+                             [attr.data-iox-row-idx]="0"
                              ioxDraggable
-                             [ioxDragData]="children[0]"
+                             [ioxDragData]="slides[0]"
                              [ioxDragSourceId]="dropListId">
                             <ng-container
-                                [ioxRender]="children[0]"
+                                [ioxRender]="slides[0]"
                                 (onClick)="childClick.emit($event)"
                                 (onMouseEnter)="childMouseEnter.emit($event)"
                                 (onMouseLeave)="childMouseLeave.emit()">
                             </ng-container>
                         </div>
                         <!-- Preview slides — dimmed, non-interactive, data resolved from items 1..N -->
-                        <div *ngFor="let slide of previewSlides; trackBy: trackByNodeId"
+                        <div *ngFor="let slide of previewSlides; let i = index; trackBy: trackByNodeId"
                              class="swiper-slide slider-preview-slide"
+                             [attr.data-iox-row-idx]="i + 1"
                              [ngClass]="['iox-outer-' + (slide.styleId ?? slide.id)]">
                             <ng-container
                                 [ioxRender]="slide"
@@ -11019,23 +11131,28 @@ class SliderContainerComponent {
                     </ng-container>
 
                 </div>
+                <ng-container *ngFor="let part of trailParts; trackBy: trackByNodeId">
+                    <ng-container [ioxRender]="part" (onClick)="childClick.emit($event)"
+                        (onMouseEnter)="childMouseEnter.emit($event)" (onMouseLeave)="childMouseLeave.emit()"></ng-container>
+                </ng-container>
 
-                <div *ngIf="!source && !children.length" class="slider-edit-placeholder" data-iox-chrome>
+                <div *ngIf="!source && !slides.length" class="slider-edit-placeholder" data-iox-chrome>
                     <i class="ph-thin ph-sliders-horizontal"></i>
                     <span>Click + in toolbar to add a slide</span>
                 </div>
 
-                <div *ngIf="enablePagination" class="swiper-pagination"></div>
+                <div *ngIf="legacyControls && enablePagination" class="swiper-pagination"></div>
                 <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
             </div>
 
-            <!-- Nav buttons live on the shell, not inside .swiper, so overflow:hidden never clips them
-                 and top:50%+transform always centers on the real slide height -->
-            <button *ngIf="enableNavigation" class="slider-edit-nav slider-edit-nav--prev" data-iox-chrome
+            <!-- Legacy (Swiper-drawn) nav buttons live on the shell, not inside .swiper, so overflow:hidden never
+                 clips them and top:50%+transform always centers on the real slide height. A slider whose controls
+                 are PARTS (CC3) draws none: the parts are the controls. -->
+            <button *ngIf="legacyControls && enableNavigation" class="slider-edit-nav slider-edit-nav--prev" data-iox-chrome
                     (click)="_swiper?.slidePrev()" type="button" title="Previous slide">
                 <i class="ph-thin ph-caret-left"></i>
             </button>
-            <button *ngIf="enableNavigation" class="slider-edit-nav slider-edit-nav--next" data-iox-chrome
+            <button *ngIf="legacyControls && enableNavigation" class="slider-edit-nav slider-edit-nav--next" data-iox-chrome
                     (click)="_swiper?.slideNext()" type="button" title="Next slide">
                 <i class="ph-thin ph-caret-right"></i>
             </button>
@@ -11052,12 +11169,16 @@ class SliderContainerComponent {
              [style.--swiper-navigation-color]="navigationColor || null"
              [style.--swiper-navigation-size.px]="navigationSize || null"
              [style.--swiper-pagination-color]="paginationColor || null">
+            <ng-container *ngFor="let part of leadParts; trackBy: trackByNodeId">
+                <ng-container [ioxRender]="part" (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)" (onMouseLeave)="childMouseLeave.emit()"></ng-container>
+            </ng-container>
             <div class="swiper-wrapper">
                 <!-- Swiper requires .swiper-slide as a DIRECT child of .swiper-wrapper.
                      Wrap each rendered slide in one (same structure as edit mode) so the
                      app-slider-slide host sits INSIDE the slide, not between it and the wrapper. -->
                 <ng-container *ngIf="!source">
-                    <div *ngFor="let child of children"
+                    <div *ngFor="let child of slides; trackBy: trackByNodeId"
                          class="swiper-slide"
                          [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]">
                         <ng-container
@@ -11068,20 +11189,22 @@ class SliderContainerComponent {
                         </ng-container>
                     </div>
                 </ng-container>
-                <!-- REPEAT: template slide + preview slides -->
+                <!-- REPEAT: template slide + preview slides; each is a row (a lightbox opens at the clicked one) -->
                 <ng-container *ngIf="source">
-                    <div *ngIf="children.length"
+                    <div *ngIf="slides.length"
                          class="swiper-slide"
-                         [ngClass]="['iox-outer-' + (children[0].styleId ?? children[0].id)]">
+                         [attr.data-iox-row-idx]="0"
+                         [ngClass]="['iox-outer-' + (slides[0].styleId ?? slides[0].id)]">
                         <ng-container
-                            [ioxRender]="children[0]"
+                            [ioxRender]="slides[0]"
                             (onClick)="childClick.emit($event)"
                             (onMouseEnter)="childMouseEnter.emit($event)"
                             (onMouseLeave)="childMouseLeave.emit()">
                         </ng-container>
                     </div>
-                    <div *ngFor="let slide of previewSlides; trackBy: trackByNodeId"
+                    <div *ngFor="let slide of previewSlides; let i = index; trackBy: trackByNodeId"
                          class="swiper-slide"
+                         [attr.data-iox-row-idx]="i + 1"
                          [ngClass]="['iox-outer-' + (slide.styleId ?? slide.id)]">
                         <ng-container
                             [ioxRender]="slide"
@@ -11092,9 +11215,13 @@ class SliderContainerComponent {
                     </div>
                 </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 *ngFor="let part of trailParts; trackBy: trackByNodeId">
+                <ng-container [ioxRender]="part" (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)" (onMouseLeave)="childMouseLeave.emit()"></ng-container>
+            </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: [":host{display:block}.swiper-wrapper{height:auto}.slider-edit-shell{position:relative;display:block}.swiper-edit{width:100%}.swiper-edit .swiper-slide{position:relative}.slider-edit-nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:#00000038;color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:background .15s}.slider-edit-nav:hover{background:#00000073}.slider-edit-nav--prev{left:8px}.slider-edit-nav--next{right:8px}.slider-edit-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.slider-edit-placeholder i{font-size:22px}.slider-repeat-badge{position:absolute;top:0;left:0;z-index:10;display:flex;align-items:center;gap:.4rem;padding:4px 8px;font-size:11px;color:#cb9090;background:#cb909014;border:1px solid rgba(203,144,144,.5);border-radius:0 0 4px;opacity:0;transition:opacity .15s;-webkit-user-select:none;user-select:none;pointer-events:none}.slider-edit-shell:hover .slider-repeat-badge{opacity:1}.slider-repeat-badge-count{font-weight:600}.slider-badge-spin{animation:slider-badge-spin 1s linear infinite}@keyframes slider-badge-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.slider-preview-slide{opacity:.55;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId", "ioxPhrasing"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId", "ioxDragDisabled"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
@@ -11121,11 +11248,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             </div>
 
             <div #editSwiperEl class="swiper swiper-edit" [attr.dir]="dir" [style.direction]="dir">
+                <!-- CC3: the control PARTS (Pause, Previous, Next, Pagination) render inside .swiper, beside the
+                     wrapper (never in it — slider.md); selectable and styled on their own (R2). -->
+                <ng-container *ngFor="let part of leadParts; trackBy: trackByNodeId">
+                    <ng-container [ioxRender]="part" (onClick)="childClick.emit($event)"
+                        (onMouseEnter)="childMouseEnter.emit($event)" (onMouseLeave)="childMouseLeave.emit()"></ng-container>
+                </ng-container>
                 <div class="swiper-wrapper">
 
-                    <!-- NORMAL MODE: all children as draggable slides -->
+                    <!-- NORMAL MODE: all slides draggable -->
                     <ng-container *ngIf="!source">
-                        <div *ngFor="let child of children"
+                        <div *ngFor="let child of slides; trackBy: trackByNodeId"
                              class="swiper-slide"
                              [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
                              ioxDraggable
@@ -11143,22 +11276,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                     <!-- REPEAT MODE: template slide (item 0) + dimmed preview slides (items 1..N) -->
                     <ng-container *ngIf="source">
                         <!-- Template slide — draggable/editable, receives item[0] data -->
-                        <div *ngIf="children.length"
+                        <div *ngIf="slides.length"
                              class="swiper-slide"
-                             [ngClass]="['iox-outer-' + (children[0].styleId ?? children[0].id)]"
+                             [ngClass]="['iox-outer-' + (slides[0].styleId ?? slides[0].id)]"
+                             [attr.data-iox-row-idx]="0"
                              ioxDraggable
-                             [ioxDragData]="children[0]"
+                             [ioxDragData]="slides[0]"
                              [ioxDragSourceId]="dropListId">
                             <ng-container
-                                [ioxRender]="children[0]"
+                                [ioxRender]="slides[0]"
                                 (onClick)="childClick.emit($event)"
                                 (onMouseEnter)="childMouseEnter.emit($event)"
                                 (onMouseLeave)="childMouseLeave.emit()">
                             </ng-container>
                         </div>
                         <!-- Preview slides — dimmed, non-interactive, data resolved from items 1..N -->
-                        <div *ngFor="let slide of previewSlides; trackBy: trackByNodeId"
+                        <div *ngFor="let slide of previewSlides; let i = index; trackBy: trackByNodeId"
                              class="swiper-slide slider-preview-slide"
+                             [attr.data-iox-row-idx]="i + 1"
                              [ngClass]="['iox-outer-' + (slide.styleId ?? slide.id)]">
                             <ng-container
                                 [ioxRender]="slide"
@@ -11170,23 +11305,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                     </ng-container>
 
                 </div>
+                <ng-container *ngFor="let part of trailParts; trackBy: trackByNodeId">
+                    <ng-container [ioxRender]="part" (onClick)="childClick.emit($event)"
+                        (onMouseEnter)="childMouseEnter.emit($event)" (onMouseLeave)="childMouseLeave.emit()"></ng-container>
+                </ng-container>
 
-                <div *ngIf="!source && !children.length" class="slider-edit-placeholder" data-iox-chrome>
+                <div *ngIf="!source && !slides.length" class="slider-edit-placeholder" data-iox-chrome>
                     <i class="ph-thin ph-sliders-horizontal"></i>
                     <span>Click + in toolbar to add a slide</span>
                 </div>
 
-                <div *ngIf="enablePagination" class="swiper-pagination"></div>
+                <div *ngIf="legacyControls && enablePagination" class="swiper-pagination"></div>
                 <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
             </div>
 
-            <!-- Nav buttons live on the shell, not inside .swiper, so overflow:hidden never clips them
-                 and top:50%+transform always centers on the real slide height -->
-            <button *ngIf="enableNavigation" class="slider-edit-nav slider-edit-nav--prev" data-iox-chrome
+            <!-- Legacy (Swiper-drawn) nav buttons live on the shell, not inside .swiper, so overflow:hidden never
+                 clips them and top:50%+transform always centers on the real slide height. A slider whose controls
+                 are PARTS (CC3) draws none: the parts are the controls. -->
+            <button *ngIf="legacyControls && enableNavigation" class="slider-edit-nav slider-edit-nav--prev" data-iox-chrome
                     (click)="_swiper?.slidePrev()" type="button" title="Previous slide">
                 <i class="ph-thin ph-caret-left"></i>
             </button>
-            <button *ngIf="enableNavigation" class="slider-edit-nav slider-edit-nav--next" data-iox-chrome
+            <button *ngIf="legacyControls && enableNavigation" class="slider-edit-nav slider-edit-nav--next" data-iox-chrome
                     (click)="_swiper?.slideNext()" type="button" title="Next slide">
                 <i class="ph-thin ph-caret-right"></i>
             </button>
@@ -11203,12 +11343,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
              [style.--swiper-navigation-color]="navigationColor || null"
              [style.--swiper-navigation-size.px]="navigationSize || null"
              [style.--swiper-pagination-color]="paginationColor || null">
+            <ng-container *ngFor="let part of leadParts; trackBy: trackByNodeId">
+                <ng-container [ioxRender]="part" (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)" (onMouseLeave)="childMouseLeave.emit()"></ng-container>
+            </ng-container>
             <div class="swiper-wrapper">
                 <!-- Swiper requires .swiper-slide as a DIRECT child of .swiper-wrapper.
                      Wrap each rendered slide in one (same structure as edit mode) so the
                      app-slider-slide host sits INSIDE the slide, not between it and the wrapper. -->
                 <ng-container *ngIf="!source">
-                    <div *ngFor="let child of children"
+                    <div *ngFor="let child of slides; trackBy: trackByNodeId"
                          class="swiper-slide"
                          [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]">
                         <ng-container
@@ -11219,20 +11363,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                         </ng-container>
                     </div>
                 </ng-container>
-                <!-- REPEAT: template slide + preview slides -->
+                <!-- REPEAT: template slide + preview slides; each is a row (a lightbox opens at the clicked one) -->
                 <ng-container *ngIf="source">
-                    <div *ngIf="children.length"
+                    <div *ngIf="slides.length"
                          class="swiper-slide"
-                         [ngClass]="['iox-outer-' + (children[0].styleId ?? children[0].id)]">
+                         [attr.data-iox-row-idx]="0"
+                         [ngClass]="['iox-outer-' + (slides[0].styleId ?? slides[0].id)]">
                         <ng-container
-                            [ioxRender]="children[0]"
+                            [ioxRender]="slides[0]"
                             (onClick)="childClick.emit($event)"
                             (onMouseEnter)="childMouseEnter.emit($event)"
                             (onMouseLeave)="childMouseLeave.emit()">
                         </ng-container>
                     </div>
-                    <div *ngFor="let slide of previewSlides; trackBy: trackByNodeId"
+                    <div *ngFor="let slide of previewSlides; let i = index; trackBy: trackByNodeId"
                          class="swiper-slide"
+                         [attr.data-iox-row-idx]="i + 1"
                          [ngClass]="['iox-outer-' + (slide.styleId ?? slide.id)]">
                         <ng-container
                             [ioxRender]="slide"
@@ -11243,9 +11389,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                     </div>
                 </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 *ngFor="let part of trailParts; trackBy: trackByNodeId">
+                <ng-container [ioxRender]="part" (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)" (onMouseLeave)="childMouseLeave.emit()"></ng-container>
+            </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: [":host{display:block}.swiper-wrapper{height:auto}.slider-edit-shell{position:relative;display:block}.swiper-edit{width:100%}.swiper-edit .swiper-slide{position:relative}.slider-edit-nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:#00000038;color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:background .15s}.slider-edit-nav:hover{background:#00000073}.slider-edit-nav--prev{left:8px}.slider-edit-nav--next{right:8px}.slider-edit-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.slider-edit-placeholder i{font-size:22px}.slider-repeat-badge{position:absolute;top:0;left:0;z-index:10;display:flex;align-items:center;gap:.4rem;padding:4px 8px;font-size:11px;color:#cb9090;background:#cb909014;border:1px solid rgba(203,144,144,.5);border-radius:0 0 4px;opacity:0;transition:opacity .15s;-webkit-user-select:none;user-select:none;pointer-events:none}.slider-edit-shell:hover .slider-repeat-badge{opacity:1}.slider-repeat-badge-count{font-weight:600}.slider-badge-spin{animation:slider-badge-spin 1s linear infinite}@keyframes slider-badge-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.slider-preview-slide{opacity:.55;pointer-events:none}\n"] }]
@@ -12404,6 +12554,7 @@ class DialogComponentConfig extends ComponentConfig {
             showCloseButton: 'checkbox',
             consentRole: 'checkbox',
             closeAbove: 'select',
+            colorScheme: 'select',
             ariaLabel: 'text',
         };
         this.traits = [
@@ -12416,6 +12567,8 @@ class DialogComponentConfig extends ComponentConfig {
             new TraitConfig('consentRole', 'Consent banner role', TraitInputType.Checkbox, undefined, false),
             ...buildDialogCloseAboveTraits(),
             ...buildAccessibleNameTraits(),
+            // CC3 (board 6): a dialog may wear a section colour scheme — the Lightbox is Inverse.
+            buildColorSchemeTrait(),
         ];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
@@ -12610,6 +12763,64 @@ class GalleryConfig extends ComponentConfig {
     }
 }
 
+/**
+ * Video (CC3 — complex-components plan §7b, board 5): a LEAF. The RENDER component is the shared `iox-video`
+ * (`IoxVideoComponent` in @vectoriox/iox-ui) — the canvas shows its poster only; Preview and the live site run the
+ * media-core runtime (the YouTube / Vimeo facade behind consent, the background video's pause button).
+ *
+ * Bindings ▸ Media · Behaviour · Accessibility · Privacy (boards 5 and 9). The address and the poster are bindable (a
+ * project's video field) and work inside a Repeater. Background mode and autoplay act on an uploaded file; a YouTube
+ * or Vimeo video is always the facade (D5) and plays on a click, after consent — the panel says so.
+ */
+class VideoConfig extends ComponentConfig {
+    constructor() {
+        super('Video', 'iox-video', 'ph-thin ph-film-strip', 'Media');
+        const embed = { trait: VideoTrait.Source, values: [VideoSource.YouTube, VideoSource.Vimeo] };
+        const file = { trait: VideoTrait.Source, values: VideoSource.File };
+        this.traits = [
+            // ── Media ─────────────────────────────────────────────────────
+            new TraitConfig('__mediaLabel', 'Media', TraitInputType.SectionLabel),
+            new TraitConfig(VideoTrait.Source, 'Source', TraitInputType.Select, [
+                { label: 'YouTube', value: VideoSource.YouTube },
+                { label: 'Vimeo', value: VideoSource.Vimeo },
+                { label: 'Uploaded file', value: VideoSource.File },
+            ], VideoSource.YouTube),
+            new TraitConfig(VideoTrait.Src, 'Video address', TraitInputType.Media, { mode: 'compact' }, ''),
+            new TraitConfig(VideoTrait.Poster, 'Poster', TraitInputType.Media, { mode: 'compact' }, ''),
+            // ── Behaviour ─────────────────────────────────────────────────
+            new TraitConfig('__behaviourLabel', 'Behaviour', TraitInputType.SectionLabel),
+            new TraitConfig(VideoTrait.Mode, 'Mode', TraitInputType.Select, [
+                { label: 'Inline · with controls', value: VideoMode.Inline },
+                { label: 'Background · muted loop', value: VideoMode.Background },
+            ], VideoMode.Inline),
+            new TraitConfig(VideoTrait.Autoplay, 'Autoplay (muted)', TraitInputType.Checkbox, undefined, false),
+            // ── Accessibility ─────────────────────────────────────────────
+            new TraitConfig('__accessibilityLabel', 'Accessibility', TraitInputType.SectionLabel),
+            new TraitConfig(VideoTrait.Title, 'Title (names the play button)', TraitInputType.Text, undefined, ''),
+            new TraitConfig(VideoTrait.Captions, 'Captions (.vtt)', TraitInputType.Media, { mode: 'compact' }, '', undefined, file),
+            new TraitConfig(VideoTrait.CaptionsLang, 'Captions language', TraitInputType.Text, undefined, 'en', undefined, file),
+            // ── Privacy ───────────────────────────────────────────────────
+            new TraitConfig('__privacyLabel', 'Privacy', TraitInputType.SectionLabel),
+            new TraitConfig(VideoTrait.Consent, 'Consent', TraitInputType.Select, [
+                { label: 'Marketing', value: ConsentCategory.Marketing },
+            ], ConsentCategory.Marketing, undefined, embed),
+        ];
+        // A media frame: size, spacing, border (radius), effects (the `media` style's transition and hover scale).
+        this.styleTraits = [
+            new PositionGroupStyleConfig(),
+            new SizeGroupStyleConfig(),
+            new SpacingGroupStyleConfig(),
+            new BorderGroupStyleConfig(),
+            new EffectsGroupStyleConfig(),
+        ];
+        // A 16 / 9 frame that fills its column — the size the poster and the player take.
+        this.applyStyleDefaults({
+            width: '100%',
+            aspectRatio: '16 / 9',
+        });
+    }
+}
+
 /**
  * Field's styleable sub-elements (board 7 — "the failure design"), for the Style panel's picker.
  * Class names come from the SHARED `PART_CLASS_NAMES` (`@vectoriox/iox-ui`) — the same map the
@@ -13232,6 +13443,11 @@ class SliderContainerConfig extends ComponentConfig {
             // ── Responsive ────────────────────────────────────────────────────
             new TraitConfig('__responsiveLabel', 'Responsive', TraitInputType.SectionLabel),
             new TraitConfig('breakpoints', 'Breakpoints (JSON)', TraitInputType.Textarea, undefined, ''),
+            // ── Accessibility (CC3, board 6) ──────────────────────────────────
+            // The carousel's name: a named carousel is a `region` landmark ("What clients say"). The pause control
+            // is a part added while Autoplay is on (WCAG 2.2.2) — the panel says so under this group.
+            new TraitConfig('__accessibilityLabel', 'Accessibility', TraitInputType.SectionLabel),
+            new TraitConfig(A11yTrait.AccessibleName, 'Carousel name', TraitInputType.Text, undefined, ''),
         ];
         this.styleTraits = [
             new PositionGroupStyleConfig(),
@@ -13265,5 +13481,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BOUND_ICON, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_FONT_LINK_ATTR, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CANVAS_EMPTY_IMAGE_LABEL_EN, CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_ROOT_RESET_CSS, COMPOSITE_PRESETS, CanvasDesignStateService, CanvasShowState, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, CompositeCanvasService, CompositePaletteGroup, CompositePresetId, DEFAULT_ESSENTIAL_TRAITS, DESCRIPTOR_MAX_LENGTH, DRAG_HANDLE_ATTR, DROP_REFUSED_CLASS, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_STATE_BLOCK_TYPES, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GLOBALS_AFTER_CLASS, GalleryConfig, GlobalCanvasLayer, GroupStyleConfig, HIDDEN_AT_REST_LABEL_KEY, HIDDEN_AT_REST_ROLES, HIDDEN_AT_REST_TYPES, INSERT_REFUSAL_LABEL_KEYS, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, InsertRefusal, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, REPEATER_SOURCE_PROP, REPEATER_TYPE, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SelectionReveal, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StructureFix, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, bindingLabel, bindingLabels, buildCompositePreset, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, builderCompositeFactory, canFluidise, canvasEmptyImageLabel, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropChildren, dropTargetLabel, escapesRoot, essentialTraitsFor, findNodeLocation, findParentOf, flattenLayerTree, flattenSchemaFields, fluidiseProps, generateNodeId, globalCanvasLayer, insertRefusal, insertRefusalLabel, isHiddenAt, isHiddenAtRest, isPinnedGlobal, isSpecimen, markSpecimen, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, nodeDescriptor, nodeStyleMap, overlayGlobals, pathToNode, refreshSubtree, regenerateNodeIds, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, retypeNode, rootEscapeBand, rootZone, selectionRevealOf, setStyleTrait, setTrait, shortDescriptor, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
+export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BOUND_ICON, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_FONT_LINK_ATTR, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CANVAS_EMPTY_IMAGE_LABEL_EN, CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_ROOT_RESET_CSS, COMPOSITE_PRESETS, CanvasDesignStateService, CanvasShowState, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, CompositeCanvasService, CompositePaletteGroup, CompositePresetId, DEFAULT_ESSENTIAL_TRAITS, DESCRIPTOR_MAX_LENGTH, DRAG_HANDLE_ATTR, DROP_REFUSED_CLASS, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_STATE_BLOCK_TYPES, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GLOBALS_AFTER_CLASS, GalleryConfig, GlobalCanvasLayer, GroupStyleConfig, HIDDEN_AT_REST_LABEL_KEY, HIDDEN_AT_REST_ROLES, HIDDEN_AT_REST_TYPES, INSERT_REFUSAL_LABEL_KEYS, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_CONTENT_TYPE_LABELS, IOX_DATA_SOURCE_ENDPOINTS, InsertRefusal, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, REPEATER_SOURCE_PROP, REPEATER_TYPE, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SelectionReveal, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StructureFix, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TOGGLE_PART_ROLES, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, VideoConfig, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, bindingLabel, bindingLabels, buildCompositePreset, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, builderCompositeFactory, canFluidise, canvasEmptyImageLabel, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropChildren, dropTargetLabel, escapesRoot, essentialTraitsFor, findNodeLocation, findParentOf, flattenLayerTree, flattenSchemaFields, fluidiseProps, generateNodeId, globalCanvasLayer, insertRefusal, insertRefusalLabel, isHiddenAt, isHiddenAtRest, isPinnedGlobal, isSpecimen, markSpecimen, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, nodeDescriptor, nodeStyleMap, overlayGlobals, pathToNode, refreshSubtree, regenerateNodeIds, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, retypeNode, rootEscapeBand, rootZone, selectionRevealOf, setStyleTrait, setTrait, shortDescriptor, sourceContentType, sourceTypeLabel, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map