@vectoriox/iox-builder 11.13.0 → 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 { 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' },
@@ -9774,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() {
@@ -9974,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();
@@ -10015,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) {
@@ -10040,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,
@@ -11964,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)
@@ -12012,6 +12077,7 @@ class SliderContainerComponent {
         this._style = {};
         this._previewStyle = {};
         this._editShellStyle = { position: 'relative' };
+        this._restStyle = {};
         this.nodeId = '';
         this.dropListId = '';
         // ── Parameters ─────────────────────────────────────────────────────────────
@@ -12030,6 +12096,7 @@ class SliderContainerComponent {
         // ── Effects ────────────────────────────────────────────────────────────────
         this.effect = 'slide';
         this.speed = 300;
+        this._scrollPlays = false;
         // ── Navigation ─────────────────────────────────────────────────────────────
         this.enableNavigation = false;
         this.navigationColor = '';
@@ -12071,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() {
@@ -12112,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']);
@@ -12128,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);
     }
@@ -12226,6 +12309,7 @@ class SliderContainerComponent {
             return;
         this._swiper = swiper;
         this.instanceRegistry.register(this.nodeId, this._swiper);
+        this.syncSceneDriver(this.scrollPlays);
     }
     swiperInputs() {
         return {
@@ -12237,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() {
@@ -12262,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"
@@ -12432,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"
@@ -12606,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
@@ -12654,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: [{
@@ -12706,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 }]
@@ -14156,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({
@@ -14815,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(),
@@ -14906,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' }),