@vectoriox/iox-builder 11.12.1 → 11.14.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -17,12 +17,13 @@ import { TooltipModule } from 'primeng/tooltip';
 import * as i20 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i1$1 from '@vectoriox/iox-ui';
-import { nodeCssId, needsGroupName, resolveBoundValue, STRUCTURAL_STATES as STRUCTURAL_STATES$1, 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, planPartRule, gateHoverRule, planResponsiveRules, resolveStyleProps, planStateRule, splitOuterProps, OUTER_STYLE_PROPS, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, isLastEmittedStateKey, wrapInBreakpointQuery, BreakpointQueryKind, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, ContextStore, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, ComponentInstanceRegistryService, entranceStartsHidden, isActionEnabled, splitPressFeedback, isHoverPointer, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, motionAllowed, settleInteraction, settleModeFor, playInteraction, resolveInteractionEasing, entranceDelay, repeatedRowIndex, entrancePreStateStyle, buildInteractionKeyframes, cascadeChain, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, safeSetInput, colorSchemeOf, withStateTransitions, composeVirtualTraits, stateNamesIn, partClassName, switchElementStyle, releaseElementStyle, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, isScrolled, SCROLLED_ATTRIBUTE, syncSubmitButtons, IS_PREVIEW, buttonBlockHref, bootSlider, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
+import { nodeCssId, needsGroupName, resolveBoundValue, STRUCTURAL_STATES as STRUCTURAL_STATES$1, 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, planPartRule, gateHoverRule, planResponsiveRules, resolveStyleProps, planStateRule, splitOuterProps, OUTER_STYLE_PROPS, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, isLastEmittedStateKey, wrapInBreakpointQuery, BreakpointQueryKind, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, ContextStore, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, ComponentInstanceRegistryService, entranceStartsHidden, isActionEnabled, splitPressFeedback, isHoverPointer, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, motionAllowed, settleInteraction, settleModeFor, playInteraction, resolveInteractionEasing, entranceDelay, repeatedRowIndex, entrancePreStateStyle, buildInteractionKeyframes, cascadeChain, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, safeSetInput, colorSchemeOf, withStateTransitions, composeVirtualTraits, stateNamesIn, partClassName, switchElementStyle, releaseElementStyle, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, hidingHeadersIn, HeaderRuntime, isScrolled, SCROLLED_ATTRIBUTE, syncSubmitButtons, 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 { StructureEdit, isAccordionPart, isDisclosurePart, isSliderPart, isTabsPart, isSegmentedPart, structureRefusal, StructureRefusal, SegmentedRole, SEGMENTED_MAX_OPTIONS, AccordionRole, SEGMENTED_MIN_OPTIONS, isExclusiveItemPart, TabsRole, ITEM_OPEN_STATE, readStyle, isSegmentedRoot, segmentedDefaultOn, segmentedOptions, isTabsRoot, isTabsFromContent, tabsTriggers, isAccordionRoot, isAccordionFromContent, accordionItems, initialAccordionOpen, accordionBehaviour, exclusiveItemLabel, exclusiveRootOf, tabTriggerOf, tabLabel, removeTabPair, tabPanelOf, tabsListOf, tabsPanelsOf, nextTabKey, CompositeBehaviourTrait, ACCORDION_DEFAULT_ONS, TabsBehaviourTrait, TABS_ACTIVATE_ONS, TABS_ORIENTATIONS, onCompositeItemState, isCompositeItemOn, runCompositeItemAction, shouldScrollToItem, rowIndexOf as rowIndexOf$1, slideIndexForRow, DisclosureRole, isExclusiveTrigger, compositeScopeId, compositeRowKeys, isExclusiveRoot, ExclusiveRuntime, exclusiveDefaultOf, exclusiveLabelOf, exclusiveBehaviourOf, exclusiveKindOf, compositeKindOfRole, AccordionRuntime, isToggleKind, closestAccordionItem, isAnyCompositeRoot, SceneRole, isExclusiveList, buildCardRecipe, buildBadge, buildChip, buildAccordionRecipe, buildDisclosureRecipe, buildTabsRecipe, buildSegmentedRecipe, buildLightboxRecipe, NO_ELEMENT_STYLE, CompositeKind, SliderRole, accordionItemLabel, segmentedOptionLabel, isExclusivePanels, isLockedPart, accordionRootOf, accordionItemOf, addAccordionItem, addTabPair, segmentedAddRefusal, addSegmentedOption, isCompositeItem, accordionHeadingLevel, isCompositePanel, isCompositeTrigger, splitSliderChildren, hasSliderParts } from '@vectoriox/iox-ui/composite-core';
-import { formContentInHost, isInteractiveHost, findFormContentInHosts } from '@vectoriox/iox-ui/forms-core';
+import { StructureEdit, isAccordionPart, isDisclosurePart, isSliderPart, isTabsPart, isSegmentedPart, structureRefusal, StructureRefusal, SegmentedRole, SEGMENTED_MAX_OPTIONS, AccordionRole, SEGMENTED_MIN_OPTIONS, isExclusiveItemPart, TabsRole, ITEM_OPEN_STATE, readStyle, isSegmentedRoot, segmentedDefaultOn, segmentedOptions, isTabsRoot, isTabsFromContent, tabsTriggers, isAccordionRoot, isAccordionFromContent, accordionItems, initialAccordionOpen, accordionBehaviour, exclusiveItemLabel, exclusiveRootOf, tabTriggerOf, tabLabel, removeTabPair, tabPanelOf, tabsListOf, tabsPanelsOf, nextTabKey, CompositeBehaviourTrait, ACCORDION_DEFAULT_ONS, TabsBehaviourTrait, TABS_ACTIVATE_ONS, TABS_ORIENTATIONS, onCompositeItemState, isCompositeItemOn, runCompositeItemAction, shouldScrollToItem, rowIndexOf as rowIndexOf$1, slideIndexForRow, DisclosureRole, isExclusiveTrigger, compositeScopeId, compositeRowKeys, isExclusiveRoot, ExclusiveRuntime, exclusiveDefaultOf, exclusiveLabelOf, exclusiveBehaviourOf, exclusiveKindOf, compositeKindOfRole, AccordionRuntime, isToggleKind, closestAccordionItem, isAnyCompositeRoot, SceneRole, isExclusiveList, buildCardRecipe, buildBadge, buildChip, buildAccordionRecipe, buildDisclosureRecipe, buildTabsRecipe, buildSegmentedRecipe, buildLightboxRecipe, NO_ELEMENT_STYLE, CompositeKind, SliderRole, accordionItemLabel, segmentedOptionLabel, isExclusivePanels, isLockedPart, accordionRootOf, accordionItemOf, addAccordionItem, addTabPair, segmentedAddRefusal, addSegmentedOption, isCompositeItem, accordionHeadingLevel, isCompositePanel, isCompositeTrigger, splitSliderChildren, hasSliderParts, SLIDE_CAPTION_TRAIT, SLIDER_SCROLL_PLAYS_TRAIT, SLIDER_PLACEMENT_TRAIT, SliderPlacement, SliderFlag } from '@vectoriox/iox-ui/composite-core';
+import { formContentInHost, isInteractiveHost, findFormContentInHosts, FORM_CHANNEL_ROLE, channelHref, channelOpensNewTab, FORM_ACTIONS_ROLE, SUBMIT_BUTTON_NODE_TYPE } from '@vectoriox/iox-ui/forms-core';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
 import interact from 'interactjs';
+import { HeaderTrait, HeaderBehaviour, HeaderEdge } from '@vectoriox/iox-ui/design-core';
 import { map, catchError } from 'rxjs/operators';
 import * as i1 from '@angular/common/http';
 import { itemActionOf, BEHAVIOUR_ACTION_TYPES, SERVER_ELEMENT_ACTION_TYPES, CONSENT_ACTION_TYPES, opensAtClickedItem, openedDialogId, DIALOG_CLOSING_ATTRIBUTE, cancelExit, runExitMotion } from '@vectoriox/iox-ui/actions-core';
@@ -1941,6 +1942,24 @@ function buildCompositeBehaviourTraits() {
         new TraitConfig(TabsBehaviourTrait.Label, 'Accessible name', TraitInputType.Text),
     ];
 }
+/**
+ * How a header behaves as the page scrolls (premium components T2, M4) — on the Navigation bar's root. No default: a
+ * plain Container saves none; edited in the Navigation bar's Header section, never as generic rows.
+ */
+function buildHeaderBehaviourTraits() {
+    return [
+        new TraitConfig(HeaderTrait.Behaviour, 'Header behaviour', TraitInputType.Select, [
+            { label: 'Scrolls away', value: HeaderBehaviour.Scrolls },
+            { label: 'Stays at the top', value: HeaderBehaviour.Stays },
+            { label: 'Hides while scrolling down', value: HeaderBehaviour.Hides },
+        ]),
+        new TraitConfig(HeaderTrait.Edge, 'Edge when scrolled', TraitInputType.Select, [
+            { label: 'Fade', value: HeaderEdge.Fade },
+            { label: 'Line', value: HeaderEdge.Line },
+            { label: 'None', value: HeaderEdge.None },
+        ]),
+    ];
+}
 const LINK_TARGETS = [
     { label: 'Same tab', value: '_self' },
     { label: 'New tab', value: '_blank' },
@@ -5412,6 +5431,8 @@ function syncNodeDesign(ref, node, emptyLabel) {
     syncEmptyImagePlaceholder(ref, node, emptyLabel);
 }
 
+/** The Field type, whose Date control has a design-time Open state on the canvas. */
+const FIELD_TYPE = 'Field';
 // Module-level counter — unique drop-list ID per Section instance across the whole app session.
 let dropListCounter = 0;
 /**
@@ -5685,6 +5706,12 @@ class RenderDirective {
         // safeSetInput for every component that does not declare it.
         if (node.responsive)
             safeSetInput(componentRef, 'responsive', node.responsive);
+        // A Date field's design-time Open state (premium N8): "Showing on canvas ▸ Open" draws its calendar under it so
+        // the author can style the Calendar parts — the R2 state every hidden-at-rest part reads (CC1.3 / CC2).
+        if (node.type === FIELD_TYPE && this.designState && node.id) {
+            const id = node.id;
+            this.childSubs.push(this.designState.state$.subscribe(() => safeSetInput(componentRef, 'designOpen', this.designState.isShown(id))));
+        }
         // Empty images (DS3): a MARKED Image shows the shared placeholder whenever its source is empty —
         // the "Add image" label on the editing canvas, the bare blank anywhere else (Preview), which is
         // what the live site shows. An unmarked Image gets null and renders exactly as before. Set from
@@ -9766,6 +9793,8 @@ class BuilderComponent {
             if (target?.closest?.('a[href]'))
                 event.preventDefault();
         };
+        /** The canvas's hiding headers (premium M4, T2) — the SAME runtime the live site runs, fed the canvas's scroll. */
+        this.headerRuntimes = new Map();
         this._scrollbarTimer = null;
     }
     ngOnInit() {
@@ -9966,6 +9995,9 @@ class BuilderComponent {
         this.moveableCanvas.destroy();
         this.selectoCanvas.destroy();
         this.destroyLenis();
+        for (const runtime of this.headerRuntimes.values())
+            runtime.destroy();
+        this.headerRuntimes.clear();
         this.canvasRo?.disconnect();
         this.previewFrameRo?.disconnect();
         this.beforeGlobalsRo?.disconnect();
@@ -10007,6 +10039,30 @@ class BuilderComponent {
         this.globalOverlayRef?.nativeElement?.style.setProperty('--preview-vw', vwVal);
         this.canvasFrameHeight = Math.round(frameH);
     }
+    /**
+     * A header that hides on the canvas steps aside as the author scrolls down and comes back on the way up, exactly as
+     * on the live site. The headers live in the global overlay (outside Lenis); Lenis's scroll is visual px, so it is
+     * divided by the zoom. A header that went (a re-render, its behaviour changed) has its runtime dropped.
+     */
+    syncHeaderRuntimes(visualOffset) {
+        const overlay = this.globalOverlayRef?.nativeElement;
+        const live = new Set(overlay ? hidingHeadersIn(overlay) : []);
+        for (const [el, runtime] of this.headerRuntimes) {
+            if (!live.has(el)) {
+                runtime.destroy();
+                this.headerRuntimes.delete(el);
+            }
+        }
+        const offset = visualOffset / (this.viewportService.getState().scale || 1);
+        for (const el of live) {
+            let runtime = this.headerRuntimes.get(el);
+            if (!runtime) {
+                runtime = new HeaderRuntime(el);
+                this.headerRuntimes.set(el, runtime);
+            }
+            runtime.update(offset);
+        }
+    }
     /** Keep the Scrolled attribute (iox-ui SCROLLED_ATTRIBUTE) on the canvas page and the header overlay — written only
      *  when it changes, so the overlay's mutation observers never wake for a scroll tick. */
     syncScrolled(offset) {
@@ -10032,6 +10088,7 @@ class BuilderComponent {
             this.sceneCanvas?.pinNow();
             // The Scrolled state (G4) on the canvas: the page and its header globals know the canvas has moved.
             this.syncScrolled(instance.scroll);
+            this.syncHeaderRuntimes(instance.scroll);
             const clientH = this.previewScrollRef.nativeElement.clientHeight;
             this.onPageScroll({
                 scrollTop: instance.scroll,
@@ -11956,12 +12013,28 @@ class SliderContainerComponent {
         // override the dir-driven direction with the generic Layout default → RTL wouldn't apply.
         // Rebuild cached objects so ngStyle only re-applies on real input changes (avoids MO spam).
         const { direction: _dropDirection, ...rest } = v || {};
-        this._previewStyle = rest;
-        this._editShellStyle = { ...rest, position: 'relative' };
+        this._restStyle = rest;
+        this.composeStageStyles();
+    }
+    /** A slider the scroll plays is a sticky stage (it never engages on the canvas, where the driver pins it, so its top
+     *  never offsets the shell; in Preview it holds the slider mid-screen). */
+    composeStageStyles() {
+        const stage = this.scrollPlays ? { position: 'sticky' } : null;
+        this._previewStyle = stage ? { ...this._restStyle, ...stage } : this._restStyle;
+        this._editShellStyle = { ...this._restStyle, position: stage ? 'sticky' : 'relative' };
     }
     get style() { return this._style; }
     get previewStyle() { return this._previewStyle; }
     get editShellStyle() { return this._editShellStyle; }
+    /** Premium M4: the page's scroll plays it (held mid-screen, resting on each picture). */
+    set scrollPlays(value) {
+        const on = value === true || value === 'true';
+        if (on === this._scrollPlays)
+            return;
+        this._scrollPlays = on;
+        this.composeStageStyles();
+    }
+    get scrollPlays() { return this._scrollPlays; }
     get source() { return this._source; }
     set source(value) {
         if (value === this._source)
@@ -12004,6 +12077,7 @@ class SliderContainerComponent {
         this._style = {};
         this._previewStyle = {};
         this._editShellStyle = { position: 'relative' };
+        this._restStyle = {};
         this.nodeId = '';
         this.dropListId = '';
         // ── Parameters ─────────────────────────────────────────────────────────────
@@ -12022,6 +12096,7 @@ class SliderContainerComponent {
         // ── Effects ────────────────────────────────────────────────────────────────
         this.effect = 'slide';
         this.speed = 300;
+        this._scrollPlays = false;
         // ── Navigation ─────────────────────────────────────────────────────────────
         this.enableNavigation = false;
         this.navigationColor = '';
@@ -12063,6 +12138,9 @@ class SliderContainerComponent {
         this.instanceRegistry = inject(ComponentInstanceRegistryService);
         this.interactionEngine = inject(InteractionEngineService);
         this.ngZone = inject(NgZone);
+        /** The canvas's (and Preview's) ONE scene driver — it plays a slider the scroll plays. */
+        this.sceneCanvas = inject(SceneCanvasService, { optional: true });
+        this.sceneAttached = null;
         this.isPreview = !!isPreview;
     }
     ngOnInit() {
@@ -12104,7 +12182,7 @@ class SliderContainerComponent {
             'enableScrollbar', 'enableAutoplay',
             'enableKeyboard', 'enableMousewheel', 'enableZoom', 'enableGrid', 'enableParallax',
             'autoplayDelay', 'autoplayPauseOnMouseEnter', 'autoplayDisableOnInteraction',
-            'gridRows',
+            'gridRows', 'scrollPlays',
         ]);
         // Edit mode also reinits when children change (new slide added or removed)
         const editKeys = new Set([...previewKeys, 'children']);
@@ -12120,8 +12198,21 @@ class SliderContainerComponent {
     ngOnDestroy() {
         cancelAnimationFrame(this._initRafId);
         this._destroySwiper();
+        this.syncSceneDriver(false);
         this._bindingSub?.unsubscribe();
     }
+    /** Hand the runway to the scene driver while the scroll plays the slider, and take it back when it stops. */
+    syncSceneDriver(on) {
+        const runway = this.runwayEl?.nativeElement ?? null;
+        if (this.sceneAttached && (!on || this.sceneAttached !== runway)) {
+            this.sceneCanvas?.detach(this.sceneAttached);
+            this.sceneAttached = null;
+        }
+        if (on && runway && !this.sceneAttached) {
+            this.sceneCanvas?.attach(runway, !this.isPreview, this.nodeId);
+            this.sceneAttached = runway;
+        }
+    }
     trackByNodeId(_index, node) {
         return node.id ?? String(_index);
     }
@@ -12218,6 +12309,7 @@ class SliderContainerComponent {
             return;
         this._swiper = swiper;
         this.instanceRegistry.register(this.nodeId, this._swiper);
+        this.syncSceneDriver(this.scrollPlays);
     }
     swiperInputs() {
         return {
@@ -12229,7 +12321,7 @@ class SliderContainerComponent {
             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,
+            gridRows: this.gridRows, breakpoints: this.breakpoints, scrollPlays: this.scrollPlays,
         };
     }
     _destroySwiper() {
@@ -12254,7 +12346,11 @@ class SliderContainerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SliderContainerComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }, { token: IS_PREVIEW, optional: true }, { token: OverlayService, optional: true }, { token: BuilderDataSourceService, optional: true }, { token: DataSourceRegistryService, optional: true }, { token: PanelEventService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: SliderContainerComponent, isStandalone: false, selector: "app-slider-container", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", dir: "dir", direction: "direction", slidesPerView: "slidesPerView", slidesPerGroup: "slidesPerGroup", loop: "loop", centeredSlides: "centeredSlides", spaceBetween: "spaceBetween", initialSlide: "initialSlide", autoHeight: "autoHeight", grabCursor: "grabCursor", slideToClickedSlide: "slideToClickedSlide", effect: "effect", speed: "speed", enableNavigation: "enableNavigation", navigationColor: "navigationColor", navigationSize: "navigationSize", enablePagination: "enablePagination", paginationColor: "paginationColor", paginationType: "paginationType", paginationClickable: "paginationClickable", paginationDynamicBullets: "paginationDynamicBullets", enableAutoplay: "enableAutoplay", autoplayDelay: "autoplayDelay", autoplayPauseOnMouseEnter: "autoplayPauseOnMouseEnter", autoplayDisableOnInteraction: "autoplayDisableOnInteraction", enableScrollbar: "enableScrollbar", freeMode: "freeMode", enableKeyboard: "enableKeyboard", enableMousewheel: "enableMousewheel", enableZoom: "enableZoom", enableParallax: "enableParallax", enableGrid: "enableGrid", gridRows: "gridRows", breakpoints: "breakpoints", source: "source", limit: "limit" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, viewQueries: [{ propertyName: "swiperEl", first: true, predicate: ["swiperEl"], descendants: true }, { propertyName: "editSwiperEl", first: true, predicate: ["editSwiperEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: SliderContainerComponent, isStandalone: false, selector: "app-slider-container", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", dir: "dir", direction: "direction", slidesPerView: "slidesPerView", slidesPerGroup: "slidesPerGroup", loop: "loop", centeredSlides: "centeredSlides", spaceBetween: "spaceBetween", initialSlide: "initialSlide", autoHeight: "autoHeight", grabCursor: "grabCursor", slideToClickedSlide: "slideToClickedSlide", effect: "effect", speed: "speed", scrollPlays: "scrollPlays", enableNavigation: "enableNavigation", navigationColor: "navigationColor", navigationSize: "navigationSize", enablePagination: "enablePagination", paginationColor: "paginationColor", paginationType: "paginationType", paginationClickable: "paginationClickable", paginationDynamicBullets: "paginationDynamicBullets", enableAutoplay: "enableAutoplay", autoplayDelay: "autoplayDelay", autoplayPauseOnMouseEnter: "autoplayPauseOnMouseEnter", autoplayDisableOnInteraction: "autoplayDisableOnInteraction", enableScrollbar: "enableScrollbar", freeMode: "freeMode", enableKeyboard: "enableKeyboard", enableMousewheel: "enableMousewheel", enableZoom: "enableZoom", enableParallax: "enableParallax", enableGrid: "enableGrid", gridRows: "gridRows", breakpoints: "breakpoints", source: "source", limit: "limit" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, viewQueries: [{ propertyName: "runwayEl", first: true, predicate: ["runwayEl"], descendants: true, static: true }, { propertyName: "swiperEl", first: true, predicate: ["swiperEl"], descendants: true }, { propertyName: "editSwiperEl", first: true, predicate: ["editSwiperEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        <!-- Premium M4: a slider the SCROLL plays sits in its runway — the Scene root the ONE scene driver drives (pinned
+             with translate on the canvas, sticky in Preview). Otherwise the wrapper is display: contents. -->
+        <div #runwayEl [class.iox-slider-runway]="scrollPlays" [attr.data-iox-scene]="scrollPlays ? '' : null"
+             [style.display]="scrollPlays ? null : 'contents'">
         <!-- EDIT MODE: shell wraps swiper + nav buttons so arrows position relative to slide area -->
         <div *ngIf="!isPreview"
              class="slider-edit-shell"
@@ -12424,11 +12520,16 @@ class SliderContainerComponent {
             <div *ngIf="legacyControls && enablePagination" class="swiper-pagination"></div>
             <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
         </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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SliderContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-slider-container', template: `
+        <!-- Premium M4: a slider the SCROLL plays sits in its runway — the Scene root the ONE scene driver drives (pinned
+             with translate on the canvas, sticky in Preview). Otherwise the wrapper is display: contents. -->
+        <div #runwayEl [class.iox-slider-runway]="scrollPlays" [attr.data-iox-scene]="scrollPlays ? '' : null"
+             [style.display]="scrollPlays ? null : 'contents'">
         <!-- EDIT MODE: shell wraps swiper + nav buttons so arrows position relative to slide area -->
         <div *ngIf="!isPreview"
              class="slider-edit-shell"
@@ -12598,6 +12699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             <div *ngIf="legacyControls && enablePagination" class="swiper-pagination"></div>
             <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
         </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"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
@@ -12646,6 +12748,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Input
             }], speed: [{
                 type: Input
+            }], scrollPlays: [{
+                type: Input
             }], enableNavigation: [{
                 type: Input
             }], navigationColor: [{
@@ -12698,6 +12802,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Output
             }], childMouseLeave: [{
                 type: Output
+            }], runwayEl: [{
+                type: ViewChild,
+                args: ['runwayEl', { static: true }]
             }], swiperEl: [{
                 type: ViewChild,
                 args: ['swiperEl', { static: false }]
@@ -13236,13 +13343,30 @@ function buildFormPreset(def, createConfig) {
             setTrait(field, 'optionsText', spec.optionsText);
         if (spec.rows)
             setTrait(field, 'rows', spec.rows);
+        if (spec.multiple)
+            setTrait(field, 'multiple', true);
+        if (spec.appearance)
+            setTrait(field, 'appearance', spec.appearance);
+        if (spec.earliest !== undefined)
+            setTrait(field, 'earliest', spec.earliest);
+        if (spec.latest !== undefined)
+            setTrait(field, 'latest', spec.latest);
         children.push(field);
     }
     const submit = createConfig('SubmitButton');
     if (!submit)
         return null;
     setTrait(submit, 'label', def.submitLabel);
-    children.push(submit);
+    if (def.channel) {
+        // Send and the second channel share ONE row (premium N2) — it stays on screen after the form has sent.
+        const row = buildFormActionsRow(submit, def.channel, '', createConfig);
+        if (!row)
+            return null;
+        children.push(row);
+    }
+    else {
+        children.push(submit);
+    }
     // Both state blocks, every time. They are not optional: a form without them is the silent-form
     // failure this design exists to prevent (decision D7).
     const success = createConfig('FormSuccess');
@@ -13272,6 +13396,14 @@ const FIELD_KIND_PRESETS = Object.freeze([
         label: 'Pick one',
         optionsText: 'First choice\nSecond choice\nThird choice',
     },
+    {
+        // Premium N1: chips — one or several of a few visible choices; tap to pick, the arrow keys move a one-answer row.
+        control: 'choices', name: 'Choice chips', icon: 'ph-thin ph-list-checks',
+        description: 'Pick one or several, as chips. The answer is the words picked.',
+        label: 'What do you need?',
+        optionsText: 'First choice\nSecond choice\nThird choice',
+        multiple: true,
+    },
     {
         control: 'select', name: 'Dropdown', icon: 'ph-thin ph-caret-circle-down',
         description: 'Pick one from a list that folds away.',
@@ -13303,8 +13435,118 @@ function buildFieldKindPreset(def, createConfig) {
     setTrait(field, 'control', def.control);
     if (def.optionsText)
         setTrait(field, 'optionsText', def.optionsText);
+    if (def.multiple)
+        setTrait(field, 'multiple', true);
     return field;
 }
+/** The element style a second channel wears: the quieter button beside Send. */
+const CHANNEL_STYLE = 'button-secondary';
+const BUTTON_LABEL_STYLE$1 = 'button-label';
+/**
+ * The second channel (premium N2): a ButtonBlock that links, wearing the secondary button, its words a Text wearing
+ * `button-label`, the role `form.channel`. Its address is the OWNER's — built from what they typed by forms-core
+ * `channelHref`, '' when they typed nothing (the Publishable gate then blocks publishing: never a made-up number).
+ */
+function buildFormChannel(channel, input, createConfig) {
+    const button = createConfig('ButtonBlock');
+    const words = textNode(channel.label, createConfig);
+    if (!button || !words)
+        return null;
+    button.role = FORM_CHANNEL_ROLE;
+    setTrait(button, 'tag', 'a');
+    setTrait(button, 'linkType', 'external');
+    setChannelAddress(button, channel.kind, input);
+    if (button.elementStyle !== CHANNEL_STYLE)
+        switchElementStyle(button, button.elementStyle, CHANNEL_STYLE);
+    if (words.elementStyle !== BUTTON_LABEL_STYLE$1)
+        switchElementStyle(words, words.elementStyle, BUTTON_LABEL_STYLE$1);
+    button.children = [words];
+    return button;
+}
+/** Point a channel at what the author typed — the address, and a new tab for WhatsApp and a web link. */
+function setChannelAddress(button, kind, input) {
+    setTrait(button, 'href', channelHref(kind, input));
+    setTrait(button, 'target', channelOpensNewTab(kind) ? '_blank' : '_self');
+}
+/**
+ * The form's actions row (role `form.actions`): Send, then the channel, side by side, wrapping on a narrow screen. A
+ * FieldGroup — the form's own layout row — so the shared form CSS keeps it on screen after a success.
+ */
+function buildFormActionsRow(submit, channel, input, createConfig) {
+    const row = createConfig('FieldGroup');
+    const link = buildFormChannel(channel, input, createConfig);
+    if (!row || !link)
+        return null;
+    row.role = FORM_ACTIONS_ROLE;
+    setStyle(row, 'flexWrap', 'wrap');
+    setStyle(row, 'alignItems', 'center');
+    setStyle(row, 'gap', '12px');
+    row.children = [submit, link];
+    return row;
+}
+/** The form's second channel node, if it has one (anywhere in its subtree, never inside a nested form). */
+function formChannelOf(form) {
+    const visit = (nodes) => {
+        for (const n of nodes ?? []) {
+            if (n.role === FORM_CHANNEL_ROLE)
+                return n;
+            if (n.type === 'Form')
+                continue;
+            const hit = visit(n.children);
+            if (hit)
+                return hit;
+        }
+        return null;
+    };
+    return visit(form?.children);
+}
+/**
+ * "Add a second way to reach you" on an existing form (premium N2): the channel goes beside the form's FIRST submit
+ * button — the submit moves into a new actions row in its place, or the channel joins the row it is already in. Null
+ * when the form already has one or has no submit button. Mutates the form's tree; the caller records the undo step.
+ */
+function addFormChannel(form, channel, input, createConfig) {
+    if (formChannelOf(form))
+        return null;
+    const found = findWithParent(form, n => n.type === SUBMIT_BUTTON_NODE_TYPE);
+    if (!found)
+        return null;
+    const { node: submit, parent } = found;
+    const siblings = parent.children;
+    if (parent.role === FORM_ACTIONS_ROLE) {
+        const link = buildFormChannel(channel, input, createConfig);
+        if (!link)
+            return null;
+        siblings.splice(siblings.indexOf(submit) + 1, 0, link);
+        return link;
+    }
+    const row = buildFormActionsRow(submit, channel, input, createConfig);
+    if (!row)
+        return null;
+    siblings.splice(siblings.indexOf(submit), 1, row);
+    return formChannelOf(row);
+}
+function findWithParent(root, match) {
+    for (const child of root.children ?? []) {
+        if (match(child))
+            return { node: child, parent: root };
+        if (child.type === 'Form')
+            continue;
+        const hit = findWithParent(child, match);
+        if (hit)
+            return hit;
+    }
+    return null;
+}
+function setStyle(node, prop, value) {
+    for (const group of (node.styleTraits ?? [])) {
+        const trait = group?.traits?.find((t) => t?.name === prop);
+        if (trait) {
+            trait.default = value;
+            return;
+        }
+    }
+}
 function textNode(content, createConfig) {
     const text = createConfig('Text');
     if (!text)
@@ -14013,6 +14255,7 @@ class BuilderContainerComponentConfig extends ComponentConfig {
             new TraitConfig('htmlTag', 'HTML Tag', TraitInputType.Select, ['div', 'section', 'article', 'header', 'footer', 'main', 'nav', 'ul', 'ol', 'li'], 'div'),
             buildColorSchemeTrait(),
             ...buildCompositeBehaviourTraits(),
+            ...buildHeaderBehaviourTraits(),
         ];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
@@ -14160,7 +14403,25 @@ const FIELD_PARTS = [
     { key: 'help', label: 'Note', className: PART_CLASS_NAMES['Field']['help'] },
     { key: 'error', label: 'Error message', className: PART_CLASS_NAMES['Field']['error'] },
     { key: 'required', label: 'Required mark', className: PART_CLASS_NAMES['Field']['required'] },
+    // Premium M3: a Choices field's chip (N1) and a Date's calendar and its days (N8 — shown on the canvas by
+    // "Showing on canvas ▸ Open"). Their look is the contract's `chip` / `calendar` / `calendar-day`; a part style
+    // here is this field's own.
+    { key: 'chip', label: 'Choice chip', className: PART_CLASS_NAMES['Field']['chip'] },
+    { key: 'calendar', label: 'Calendar', className: PART_CLASS_NAMES['Field']['calendar'] },
+    { key: 'calendarDay', label: 'Calendar day', className: PART_CLASS_NAMES['Field']['calendarDay'] },
 ];
+/** The Field traits the Bindings panel's Field section edits (premium M3) — never generic rows, so every word is a
+ *  translation key: a Choices field's appearance and "several", a Date's Earliest / Latest. */
+var FieldTrait;
+(function (FieldTrait) {
+    FieldTrait["Control"] = "control";
+    FieldTrait["Multiple"] = "multiple";
+    FieldTrait["Appearance"] = "appearance";
+    FieldTrait["Earliest"] = "earliest";
+    FieldTrait["Latest"] = "latest";
+})(FieldTrait || (FieldTrait = {}));
+/** The SubmitButton's "Sent" words (premium N2) — empty: the catalog's "Sent" in the page's language. */
+const SENT_LABEL_TRAIT = 'sentLabel';
 /** Every style group — the state blocks and field group are ordinary containers to style. */
 const fullStyles = () => buildFullStyleTraits();
 /** Layout-ish groups for a form shell: it arranges fields, it is not text. */
@@ -14264,6 +14525,8 @@ class FieldComponentConfig extends ComponentConfig {
                 { label: 'Checkbox', value: 'checkbox' },
                 { label: 'Switch', value: 'switch' },
                 { label: 'Radio group', value: 'radio' },
+                // Premium N1: one or several of a few visible choices, as chips (or the look's rows).
+                { label: 'Choices', value: 'choices' },
                 { label: 'Slider', value: 'range' },
                 { label: 'Date', value: 'date' },
                 { label: 'Time', value: 'time' },
@@ -14274,7 +14537,16 @@ class FieldComponentConfig extends ComponentConfig {
                 // enforcement nor the file. See forms-and-inputs-plan.md → Remaining work P0/1.
                 { label: 'Hidden', value: 'hidden' },
             ], 'text'),
-            new TraitConfig('placeholder', 'Hint inside the box', TraitInputType.Text, undefined, '', false, { trait: 'control', values: ['text', 'email', 'tel', 'url', 'number', 'password', 'textarea', 'select'] }),
+            new TraitConfig('placeholder', 'Hint inside the box', TraitInputType.Text, undefined, '', false, { trait: 'control', values: ['text', 'email', 'tel', 'url', 'number', 'password', 'textarea', 'select', 'date'] }),
+            // Choices (N1) and Date (N8): edited in the Bindings panel's own Field section (cms-client), whose words
+            // are translated — hidden from the generic rows there.
+            new TraitConfig(FieldTrait.Multiple, 'Several can be chosen', TraitInputType.Checkbox, undefined, false, false, { trait: 'control', values: 'choices' }),
+            new TraitConfig(FieldTrait.Appearance, 'Appearance', TraitInputType.Select, [
+                { label: 'Chips', value: 'chips' },
+                { label: 'List', value: 'list' },
+            ], 'chips', false, { trait: 'control', values: 'choices' }),
+            new TraitConfig(FieldTrait.Earliest, 'Earliest', TraitInputType.Text, undefined, '', false, { trait: 'control', values: 'date' }),
+            new TraitConfig(FieldTrait.Latest, 'Latest', TraitInputType.Text, undefined, '', false, { trait: 'control', values: 'date' }),
             new TraitConfig('help', 'Help text', TraitInputType.Text, undefined, ''),
             new TraitConfig('rows', 'Rows', TraitInputType.Number, undefined, 4, false, { trait: 'control', values: 'textarea' }),
             new TraitConfig('rangeMin', 'Min', TraitInputType.Number, undefined, 0, false, { trait: 'control', values: 'range' }),
@@ -14287,7 +14559,7 @@ class FieldComponentConfig extends ComponentConfig {
             new TraitConfig('__optionsLabel', 'Options', TraitInputType.SectionLabel),
             // One per line, `value|Label` or just the label. A richer editor arrives with bound
             // options in Phase 2; this keeps v1 to one control instead of a new trait type.
-            new TraitConfig('optionsText', 'Choices (one per line)', TraitInputType.Textarea, undefined, '', false, { trait: 'control', values: ['select', 'radio'] }),
+            new TraitConfig('optionsText', 'Choices (one per line)', TraitInputType.Textarea, undefined, '', false, { trait: 'control', values: ['select', 'radio', 'choices'] }),
             new TraitConfig('__validationLabel', 'What this field demands', TraitInputType.SectionLabel),
             new TraitConfig('required', 'They must fill it in', TraitInputType.Checkbox, undefined, false),
             // The additive rule list (minLength, pattern, matches, …). Unused rules are invisible
@@ -14323,6 +14595,8 @@ class SubmitButtonComponentConfig extends ComponentConfig {
         this.traits = [
             new TraitConfig('label', 'Label', TraitInputType.Text, undefined, 'Send'),
             new TraitConfig('loadingLabel', 'While sending', TraitInputType.Text, undefined, 'Sending…'),
+            // Premium N2: what it says once the form has sent, beside a check drawn once. Empty: "Sent".
+            new TraitConfig(SENT_LABEL_TRAIT, 'Once sent', TraitInputType.Text, undefined, ''),
             new TraitConfig('disableWhileSubmitting', 'Disable while sending', TraitInputType.Checkbox, undefined, true),
         ];
         this.styleTraits = fullStyles();
@@ -14641,7 +14915,10 @@ class SliderSlideConfig extends ComponentConfig {
             { value: 'swiperSlideActive', label: 'This Slide Becomes Active', icon: 'ph-thin ph-eye' },
             { value: 'swiperSlideInactive', label: 'This Slide Becomes Inactive', icon: 'ph-thin ph-eye-slash' },
         ];
-        this.traits = [];
+        // Premium M4 (M1.3): the words the Slider's Caption part shows while this slide is in view (bindable per row).
+        this.traits = [
+            new TraitConfig(SLIDE_CAPTION_TRAIT, 'Caption', TraitInputType.Text, undefined, ''),
+        ];
         this.styleTraits = [
             new PositionGroupStyleConfig(),
             new LayoutGroupStyleConfig(),
@@ -14732,8 +15009,16 @@ class SliderContainerConfig extends ComponentConfig {
                 { label: 'Creative', value: 'creative' },
             ], 'slide'),
             new TraitConfig('speed', 'Transition duration (ms)', TraitInputType.Scrub, undefined, 300),
+            // Premium M4: the page's scroll plays it — held mid-screen, resting on each picture (laptop and phone).
+            new TraitConfig(SLIDER_SCROLL_PLAYS_TRAIT, 'Scroll plays it', TraitInputType.Checkbox, undefined, false),
             // ── Navigation ────────────────────────────────────────────────────
             new TraitConfig('__navLabel', 'Navigation', TraitInputType.SectionLabel),
+            // Premium M4 (M1.3): where the controls sit — in a bar UNDER the picture (caption · count · arrows, the new
+            // Slider's default) or over it (every slider saved before M4). Once a slider has controls, its structure
+            // decides (composite-core sliderPlacementOf); changing it moves the same parts (setSliderPlacement).
+            new TraitConfig(SLIDER_PLACEMENT_TRAIT, 'Controls', TraitInputType.SelectButton, [{ label: 'Under the picture', value: SliderPlacement.Under }, { label: 'Over the picture', value: SliderPlacement.Over }], SliderPlacement.Under),
+            new TraitConfig(SliderFlag.Caption, 'Caption', TraitInputType.Checkbox, undefined, false, undefined, { trait: SLIDER_PLACEMENT_TRAIT, values: SliderPlacement.Under }),
+            new TraitConfig(SliderFlag.Count, 'Count (1 / 3)', TraitInputType.Checkbox, undefined, false, undefined, { trait: SLIDER_PLACEMENT_TRAIT, values: SliderPlacement.Under }),
             new TraitConfig('enableNavigation', 'Navigation arrows', TraitInputType.Checkbox, undefined, false),
             new TraitConfig('navigationColor', 'Color', TraitInputType.Color, undefined, '#ffffff', undefined, { trait: 'enableNavigation', values: 'true' }),
             new TraitConfig('navigationSize', 'Size (px)', TraitInputType.Scrub, undefined, 44, undefined, { trait: 'enableNavigation', values: 'true' }),
@@ -14807,5 +15092,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, BusinessSpecimenView, 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, 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, PAGE_TRANSITION_EASING_OPTIONS, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PhoneMenuOpenerAction, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, REPEATER_SOURCE_PROP, REPEATER_TYPE, REVEALED_WHILE_SELECTED_ROLES, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, SILENT_REFUSALS, STRUCTURAL_STATES, SUPPORTED_STATES, SceneCanvasService, 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, buildBusinessSpecimen, buildCompositePreset, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, builderCompositeFactory, canFluidise, canvasEmptyImageLabel, canvasHostDisplay, collapseColumnsProps, columnCountOf, compositeStructureFindings, defaultBuilderLabels, defaultPageSettings, deleteTabPair, displayTriggerOf, dropChildren, dropTargetLabel, duplicateTabPair, escapesRoot, essentialTraitsFor, findNodeByIdInEither, findNodeLocation, findParentOf, flattenLayerTree, flattenSchemaFields, fluidiseProps, generateNodeId, globalCanvasLayer, hiddenAtBase, hiddenUntilItemOn, inPhoneMenuContext, insertRefusal, insertRefusalLabel, interactionTargets, isHiddenAt, isHiddenAtRest, isPhoneMenuOpener, isPinnedGlobal, isSpecimen, itemsOnAtRest, markSpecimen, matchesControlSearch, nearestFormNode, neverShown, nodeAncestorPath, nodeAncestorPathInEither, nodeDescriptor, nodeStyleMap, overlayGlobals, pathToNode, phoneMenuOf, phoneMenuShowsAt, refreshSubtree, regenerateNodeIds, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, retypeNode, rootEscapeBand, rootZone, selectionRevealOf, setOverlayPreview, setStyleTrait, setTrait, shortDescriptor, shownBeforeControl, sourceContentType, sourceTypeLabel, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, tabPairLabel, tabsRootForPart, 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, BusinessSpecimenView, 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, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_STATE_BLOCK_TYPES, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FieldTrait, 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, PAGE_TRANSITION_EASING_OPTIONS, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PhoneMenuOpenerAction, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, REPEATER_SOURCE_PROP, REPEATER_TYPE, REVEALED_WHILE_SELECTED_ROLES, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, SENT_LABEL_TRAIT, SILENT_REFUSALS, STRUCTURAL_STATES, SUPPORTED_STATES, SceneCanvasService, 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, addFormChannel, arrayItemSchemaFields, arraySchemaFields, auditNodes, bindingLabel, bindingLabels, buildBusinessSpecimen, buildCompositePreset, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormActionsRow, buildFormChannel, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, builderCompositeFactory, canFluidise, canvasEmptyImageLabel, canvasHostDisplay, collapseColumnsProps, columnCountOf, compositeStructureFindings, defaultBuilderLabels, defaultPageSettings, deleteTabPair, displayTriggerOf, dropChildren, dropTargetLabel, duplicateTabPair, escapesRoot, essentialTraitsFor, findNodeByIdInEither, findNodeLocation, findParentOf, flattenLayerTree, flattenSchemaFields, fluidiseProps, formChannelOf, generateNodeId, globalCanvasLayer, hiddenAtBase, hiddenUntilItemOn, inPhoneMenuContext, insertRefusal, insertRefusalLabel, interactionTargets, isHiddenAt, isHiddenAtRest, isPhoneMenuOpener, isPinnedGlobal, isSpecimen, itemsOnAtRest, markSpecimen, matchesControlSearch, nearestFormNode, neverShown, nodeAncestorPath, nodeAncestorPathInEither, nodeDescriptor, nodeStyleMap, overlayGlobals, pathToNode, phoneMenuOf, phoneMenuShowsAt, refreshSubtree, regenerateNodeIds, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, retypeNode, rootEscapeBand, rootZone, selectionRevealOf, setChannelAddress, setOverlayPreview, setStyleTrait, setTrait, shortDescriptor, shownBeforeControl, sourceContentType, sourceTypeLabel, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, tabPairLabel, tabsRootForPart, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map