@vectoriox/iox-builder 1.4.83 → 1.4.84

package/fesm2022/vectoriox-iox-builder.mjs

@@ -5443,36 +5443,47 @@ class SliderContainerComponent {
         this.style = {};
         this.nodeId = '';
         this.dropListId = '';
-        // Swiper core config
+        // ── Parameters ─────────────────────────────────────────────────────────────
         this.direction = 'horizontal';
-        this.loop = false;
         this.slidesPerView = 'auto';
-        this.spaceBetween = 0;
-        this.speed = 300;
-        this.effect = 'slide';
-        this.grabCursor = true;
+        this.slidesPerGroup = 1;
+        /** 'off' | 'loop' | 'rewind' */
+        this.loop = 'off';
         this.centeredSlides = false;
+        this.spaceBetween = 0;
         this.initialSlide = 0;
-        // Module flags
+        this.autoHeight = false;
+        this.grabCursor = true;
+        this.slideToClickedSlide = false;
+        // ── Effects ────────────────────────────────────────────────────────────────
+        this.effect = 'slide';
+        this.speed = 300;
+        // ── Navigation ─────────────────────────────────────────────────────────────
         this.enableNavigation = false;
+        this.navigationColor = '';
+        this.navigationSize = 44;
+        // ── Pagination ─────────────────────────────────────────────────────────────
         this.enablePagination = false;
-        this.enableScrollbar = false;
+        this.paginationColor = '';
+        this.paginationType = 'bullets';
+        this.paginationClickable = true;
+        this.paginationDynamicBullets = false;
+        // ── Autoplay ───────────────────────────────────────────────────────────────
         this.enableAutoplay = false;
+        this.autoplayDelay = 3000;
+        this.autoplayPauseOnMouseEnter = true;
+        this.autoplayDisableOnInteraction = false;
+        // ── Modules ────────────────────────────────────────────────────────────────
+        this.enableScrollbar = false;
+        this.freeMode = false;
         this.enableKeyboard = false;
         this.enableMousewheel = false;
         this.enableZoom = false;
-        this.enableGrid = false;
         this.enableParallax = false;
-        // Autoplay sub-options
-        this.autoplayDelay = 3000;
-        this.autoplayPauseOnMouseEnter = true;
-        this.autoplayDisableOnInteraction = false;
-        // Pagination sub-options
-        this.paginationType = 'bullets';
-        this.paginationClickable = true;
-        // Grid sub-options
-        this.gridRows = 1;
-        // Responsive breakpoints (JSON string)
+        // ── Grid ───────────────────────────────────────────────────────────────────
+        this.enableGrid = false;
+        this.gridRows = 2;
+        // ── Responsive ─────────────────────────────────────────────────────────────
         this.breakpoints = '';
         this.childClick = new EventEmitter();
         this.childMouseEnter = new EventEmitter();
@@ -5487,14 +5498,16 @@ class SliderContainerComponent {
     ngOnChanges(changes) {
         if (!this.isPreview || !this._swiper)
             return;
-        // Re-init Swiper when config inputs change in preview mode
         const swiperKeys = new Set([
-            'direction', 'loop', 'slidesPerView', 'spaceBetween', 'speed',
-            'effect', 'grabCursor', 'centeredSlides', 'initialSlide', 'breakpoints',
-            'enableNavigation', 'enablePagination', 'enableScrollbar', 'enableAutoplay',
+            'direction', 'loop', 'slidesPerView', 'slidesPerGroup', 'spaceBetween', 'speed',
+            'effect', 'grabCursor', 'centeredSlides', 'initialSlide', 'autoHeight',
+            'slideToClickedSlide', 'freeMode', 'breakpoints',
+            'enableNavigation', 'navigationColor', 'navigationSize',
+            'enablePagination', 'paginationColor', 'paginationType', 'paginationClickable', 'paginationDynamicBullets',
+            'enableScrollbar', 'enableAutoplay',
             'enableKeyboard', 'enableMousewheel', 'enableZoom', 'enableGrid', 'enableParallax',
             'autoplayDelay', 'autoplayPauseOnMouseEnter', 'autoplayDisableOnInteraction',
-            'paginationType', 'paginationClickable', 'gridRows',
+            'gridRows',
         ]);
         const hasConfigChange = Object.keys(changes).some(k => swiperKeys.has(k));
         if (hasConfigChange) {
@@ -5522,7 +5535,7 @@ class SliderContainerComponent {
             import('swiper'),
             import('swiper/modules'),
         ]);
-        const { Navigation, Pagination, Scrollbar, Autoplay, Keyboard, Mousewheel, Zoom, Grid, Parallax, EffectFade, EffectCube, EffectFlip, EffectCoverflow, EffectCards, EffectCreative, } = swiperModules;
+        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);
@@ -5542,6 +5555,8 @@ class SliderContainerComponent {
             modules.push(Grid);
         if (this.enableParallax)
             modules.push(Parallax);
+        if (this.freeMode)
+            modules.push(FreeMode);
         const effectMap = {
             fade: EffectFade, cube: EffectCube, flip: EffectFlip,
             coverflow: EffectCoverflow, cards: EffectCards, creative: EffectCreative,
@@ -5552,20 +5567,33 @@ class SliderContainerComponent {
         const config = {
             modules,
             direction: this.direction,
-            loop: this.loop,
             slidesPerView: this.slidesPerView,
+            slidesPerGroup: this.slidesPerGroup > 1 ? this.slidesPerGroup : 1,
             spaceBetween: this.spaceBetween,
             speed: this.speed,
             effect: this.effect,
             grabCursor: this.grabCursor,
             centeredSlides: this.centeredSlides,
             initialSlide: this.initialSlide,
+            autoHeight: this.autoHeight,
+            slideToClickedSlide: this.slideToClickedSlide,
+            // loop / rewind mapping
+            loop: this.loop === 'loop',
+            rewind: this.loop === 'rewind',
         };
+        if (this.freeMode) {
+            config['freeMode'] = true;
+        }
         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 };
+            config['pagination'] = {
+                el: '.swiper-pagination',
+                type: this.paginationType,
+                clickable: this.paginationClickable,
+                dynamicBullets: this.paginationDynamicBullets,
+            };
         }
         if (this.enableScrollbar) {
             config['scrollbar'] = { el: '.swiper-scrollbar', draggable: true };
@@ -5617,7 +5645,7 @@ class SliderContainerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderContainerComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }, { token: IS_PREVIEW, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: SliderContainerComponent, isStandalone: false, selector: "app-slider-container", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", direction: "direction", loop: "loop", slidesPerView: "slidesPerView", spaceBetween: "spaceBetween", speed: "speed", effect: "effect", grabCursor: "grabCursor", centeredSlides: "centeredSlides", initialSlide: "initialSlide", enableNavigation: "enableNavigation", enablePagination: "enablePagination", enableScrollbar: "enableScrollbar", enableAutoplay: "enableAutoplay", enableKeyboard: "enableKeyboard", enableMousewheel: "enableMousewheel", enableZoom: "enableZoom", enableGrid: "enableGrid", enableParallax: "enableParallax", autoplayDelay: "autoplayDelay", autoplayPauseOnMouseEnter: "autoplayPauseOnMouseEnter", autoplayDisableOnInteraction: "autoplayDisableOnInteraction", paginationType: "paginationType", paginationClickable: "paginationClickable", gridRows: "gridRows", breakpoints: "breakpoints" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, viewQueries: [{ propertyName: "swiperEl", first: true, predicate: ["swiperEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: SliderContainerComponent, isStandalone: false, selector: "app-slider-container", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", 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" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, viewQueries: [{ propertyName: "swiperEl", first: true, predicate: ["swiperEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <!-- EDIT MODE: flat scrollable strip with drag-drop -->
         <div *ngIf="!isPreview"
              class="slider-edit-root"
@@ -5628,7 +5656,8 @@ class SliderContainerComponent {
              [ioxDropzoneData]="children"
              (ioxDrop)="onDrop($event)">
 
-            <div class="slider-edit-track">
+            <div class="slider-edit-track"
+                 [class.slider-edit-track--vertical]="direction === 'vertical'">
                 <div *ngFor="let child of children"
                      class="slider-edit-slide"
                      [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
@@ -5655,7 +5684,10 @@ class SliderContainerComponent {
              #swiperEl
              class="swiper"
              [ngClass]="['iox-node-' + nodeId]"
-             [ngStyle]="style">
+             [ngStyle]="style"
+             [style.--swiper-navigation-color]="navigationColor || null"
+             [style.--swiper-navigation-size.px]="navigationSize || null"
+             [style.--swiper-pagination-color]="paginationColor || null">
             <div class="swiper-wrapper">
                 <ng-container *ngFor="let child of children">
                     <ng-container
@@ -5671,7 +5703,7 @@ class SliderContainerComponent {
             <div *ngIf="enablePagination" class="swiper-pagination"></div>
             <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
         </div>
-    `, isInline: true, styles: [".slider-edit-root{position:relative;box-sizing:border-box;overflow:hidden}.slider-edit-track{display:flex;flex-direction:row;gap:8px;overflow-x:auto;padding:4px;scrollbar-width:thin;min-height:100px}.slider-edit-slide{flex:0 0 auto;min-width:120px;position:relative}.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}.swiper{width:100%;height:100%;box-sizing:border-box}\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"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+    `, isInline: true, styles: [".slider-edit-root{position:relative;box-sizing:border-box;overflow:hidden}.slider-edit-track{display:flex;flex-direction:row;gap:8px;overflow-x:auto;overflow-y:hidden;padding:4px;scrollbar-width:thin;min-height:100px}.slider-edit-track--vertical{flex-direction:column;overflow-x:hidden;overflow-y:auto;min-height:unset;min-width:100px}.slider-edit-slide{flex:0 0 auto;min-width:120px;position:relative}.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}.swiper{width:100%;height:100%;box-sizing:border-box}\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"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderContainerComponent, decorators: [{
             type: Component,
@@ -5686,7 +5718,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
              [ioxDropzoneData]="children"
              (ioxDrop)="onDrop($event)">
 
-            <div class="slider-edit-track">
+            <div class="slider-edit-track"
+                 [class.slider-edit-track--vertical]="direction === 'vertical'">
                 <div *ngFor="let child of children"
                      class="slider-edit-slide"
                      [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
@@ -5713,7 +5746,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
              #swiperEl
              class="swiper"
              [ngClass]="['iox-node-' + nodeId]"
-             [ngStyle]="style">
+             [ngStyle]="style"
+             [style.--swiper-navigation-color]="navigationColor || null"
+             [style.--swiper-navigation-size.px]="navigationSize || null"
+             [style.--swiper-pagination-color]="paginationColor || null">
             <div class="swiper-wrapper">
                 <ng-container *ngFor="let child of children">
                     <ng-container
@@ -5729,7 +5765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             <div *ngIf="enablePagination" class="swiper-pagination"></div>
             <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
         </div>
-    `, standalone: false, styles: [".slider-edit-root{position:relative;box-sizing:border-box;overflow:hidden}.slider-edit-track{display:flex;flex-direction:row;gap:8px;overflow-x:auto;padding:4px;scrollbar-width:thin;min-height:100px}.slider-edit-slide{flex:0 0 auto;min-width:120px;position:relative}.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}.swiper{width:100%;height:100%;box-sizing:border-box}\n"] }]
+    `, standalone: false, styles: [".slider-edit-root{position:relative;box-sizing:border-box;overflow:hidden}.slider-edit-track{display:flex;flex-direction:row;gap:8px;overflow-x:auto;overflow-y:hidden;padding:4px;scrollbar-width:thin;min-height:100px}.slider-edit-track--vertical{flex-direction:column;overflow-x:hidden;overflow-y:auto;min-height:unset;min-width:100px}.slider-edit-slide{flex:0 0 auto;min-width:120px;position:relative}.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}.swiper{width:100%;height:100%;box-sizing:border-box}\n"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -5745,39 +5781,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Input
             }], direction: [{
                 type: Input
+            }], slidesPerView: [{
+                type: Input
+            }], slidesPerGroup: [{
+                type: Input
             }], loop: [{
                 type: Input
-            }], slidesPerView: [{
+            }], centeredSlides: [{
                 type: Input
             }], spaceBetween: [{
                 type: Input
-            }], speed: [{
+            }], initialSlide: [{
                 type: Input
-            }], effect: [{
+            }], autoHeight: [{
                 type: Input
             }], grabCursor: [{
                 type: Input
-            }], centeredSlides: [{
+            }], slideToClickedSlide: [{
                 type: Input
-            }], initialSlide: [{
+            }], effect: [{
+                type: Input
+            }], speed: [{
                 type: Input
             }], enableNavigation: [{
                 type: Input
-            }], enablePagination: [{
+            }], navigationColor: [{
                 type: Input
-            }], enableScrollbar: [{
+            }], navigationSize: [{
                 type: Input
-            }], enableAutoplay: [{
+            }], enablePagination: [{
                 type: Input
-            }], enableKeyboard: [{
+            }], paginationColor: [{
                 type: Input
-            }], enableMousewheel: [{
+            }], paginationType: [{
                 type: Input
-            }], enableZoom: [{
+            }], paginationClickable: [{
                 type: Input
-            }], enableGrid: [{
+            }], paginationDynamicBullets: [{
                 type: Input
-            }], enableParallax: [{
+            }], enableAutoplay: [{
                 type: Input
             }], autoplayDelay: [{
                 type: Input
@@ -5785,9 +5827,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Input
             }], autoplayDisableOnInteraction: [{
                 type: Input
-            }], paginationType: [{
+            }], enableScrollbar: [{
                 type: Input
-            }], paginationClickable: [{
+            }], freeMode: [{
+                type: Input
+            }], enableKeyboard: [{
+                type: Input
+            }], enableMousewheel: [{
+                type: Input
+            }], enableZoom: [{
+                type: Input
+            }], enableParallax: [{
+                type: Input
+            }], enableGrid: [{
                 type: Input
             }], gridRows: [{
                 type: Input
@@ -6868,19 +6920,11 @@ class SliderContainerConfig extends ComponentConfig {
             { value: 'swiperAutoplayPause', label: 'Pause Autoplay' },
         ];
         this.traits = [
-            // ── Core ──────────────────────────────────────────
-            new TraitConfig('direction', 'Direction', TraitInputType.Select, [{ label: 'Horizontal', value: 'horizontal' }, { label: 'Vertical', value: 'vertical' }], 'horizontal'),
-            new TraitConfig('effect', 'Effect', TraitInputType.Select, [
-                { label: 'Slide', value: 'slide' },
-                { label: 'Fade', value: 'fade' },
-                { label: 'Cube', value: 'cube' },
-                { label: 'Coverflow', value: 'coverflow' },
-                { label: 'Flip', value: 'flip' },
-                { label: 'Cards', value: 'cards' },
-                { label: 'Creative', value: 'creative' },
-            ], 'slide'),
+            // ── Parameters ────────────────────────────────────────────────────
+            new TraitConfig('__paramsLabel', 'Parameters', TraitInputType.SectionLabel),
+            new TraitConfig('direction', 'Slide direction', TraitInputType.Select, [{ label: 'Horizontal', value: 'horizontal' }, { label: 'Vertical', value: 'vertical' }], 'horizontal'),
             new TraitConfig('slidesPerView', 'Slides per view', TraitInputType.Select, [
-                { label: 'Auto (use slide width)', value: 'auto' },
+                { label: 'Auto (slide width)', value: 'auto' },
                 { label: '1', value: 1 },
                 { label: '2', value: 2 },
                 { label: '3', value: 3 },
@@ -6888,42 +6932,66 @@ class SliderContainerConfig extends ComponentConfig {
                 { label: '5', value: 5 },
                 { label: '6', value: 6 },
             ], 'auto'),
-            new TraitConfig('spaceBetween', 'Space between (px)', TraitInputType.Number, undefined, 0),
-            new TraitConfig('speed', 'Transition speed (ms)', TraitInputType.Number, undefined, 300),
-            new TraitConfig('initialSlide', 'Initial slide', TraitInputType.Number, undefined, 0),
-            new TraitConfig('loop', 'Loop', TraitInputType.Checkbox, undefined, false),
+            new TraitConfig('slidesPerGroup', 'Slides per group', TraitInputType.Scrub, undefined, 1),
+            new TraitConfig('loop', 'Loop', TraitInputType.SelectButton, [
+                { label: 'Off', value: 'off' },
+                { label: 'Loop', value: 'loop' },
+                { label: 'Rewind', value: 'rewind' },
+            ], 'off'),
             new TraitConfig('centeredSlides', 'Centered slides', TraitInputType.Checkbox, undefined, false),
+            new TraitConfig('spaceBetween', 'Space between (px)', TraitInputType.Scrub, undefined, 0),
+            new TraitConfig('initialSlide', 'Initial slide', TraitInputType.Scrub, undefined, 0),
+            new TraitConfig('autoHeight', 'Auto height', TraitInputType.Checkbox, undefined, false),
             new TraitConfig('grabCursor', 'Grab cursor', TraitInputType.Checkbox, undefined, true),
-            // ── Section label ─────────────────────────────────
-            new TraitConfig('__modulesLabel', 'Modules', TraitInputType.SectionLabel),
-            // ── Modules ──────────────────────────────────────
+            new TraitConfig('slideToClickedSlide', 'Slide to clicked slide', TraitInputType.Checkbox, undefined, false),
+            // ── Effects ───────────────────────────────────────────────────────
+            new TraitConfig('__effectsLabel', 'Effects', TraitInputType.SectionLabel),
+            new TraitConfig('effect', 'Effect', TraitInputType.Select, [
+                { label: 'Slide', value: 'slide' },
+                { label: 'Fade', value: 'fade' },
+                { label: 'Cube', value: 'cube' },
+                { label: 'Coverflow', value: 'coverflow' },
+                { label: 'Flip', value: 'flip' },
+                { label: 'Cards', value: 'cards' },
+                { label: 'Creative', value: 'creative' },
+            ], 'slide'),
+            new TraitConfig('speed', 'Transition duration (ms)', TraitInputType.Scrub, undefined, 300),
+            // ── Navigation ────────────────────────────────────────────────────
+            new TraitConfig('__navLabel', 'Navigation', TraitInputType.SectionLabel),
             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' }),
+            // ── Pagination ────────────────────────────────────────────────────
+            new TraitConfig('__paginationLabel', 'Pagination', TraitInputType.SectionLabel),
             new TraitConfig('enablePagination', 'Pagination', TraitInputType.Checkbox, undefined, false),
-            new TraitConfig('enableScrollbar', 'Scrollbar', TraitInputType.Checkbox, undefined, false),
+            new TraitConfig('paginationColor', 'Color', TraitInputType.Color, undefined, '#ffffff', undefined, { trait: 'enablePagination', values: 'true' }),
+            new TraitConfig('paginationType', 'Type', TraitInputType.SelectButton, [
+                { label: '•••', value: 'bullets' },
+                { label: '—', value: 'progressbar' },
+                { label: '1/5', value: 'fraction' },
+            ], 'bullets', undefined, { trait: 'enablePagination', values: 'true' }),
+            new TraitConfig('paginationClickable', 'Clickable', TraitInputType.Checkbox, undefined, true, undefined, { trait: 'enablePagination', values: 'true' }),
+            new TraitConfig('paginationDynamicBullets', 'Dynamic bullets', TraitInputType.Checkbox, undefined, false, undefined, { trait: 'enablePagination', values: 'true' }),
+            // ── Autoplay ──────────────────────────────────────────────────────
+            new TraitConfig('__autoplayLabel', 'Autoplay', TraitInputType.SectionLabel),
             new TraitConfig('enableAutoplay', 'Autoplay', TraitInputType.Checkbox, undefined, false),
+            new TraitConfig('autoplayDelay', 'Delay (ms)', TraitInputType.Scrub, undefined, 3000, undefined, { trait: 'enableAutoplay', values: 'true' }),
+            new TraitConfig('autoplayPauseOnMouseEnter', 'Pause on hover', TraitInputType.Checkbox, undefined, true, undefined, { trait: 'enableAutoplay', values: 'true' }),
+            new TraitConfig('autoplayDisableOnInteraction', 'Disable on interact', TraitInputType.Checkbox, undefined, false, undefined, { trait: 'enableAutoplay', values: 'true' }),
+            // ── Modules ───────────────────────────────────────────────────────
+            new TraitConfig('__modulesLabel', 'Modules', TraitInputType.SectionLabel),
+            new TraitConfig('enableScrollbar', 'Scrollbar', TraitInputType.Checkbox, undefined, false),
+            new TraitConfig('freeMode', 'Free mode', TraitInputType.Checkbox, undefined, false),
             new TraitConfig('enableKeyboard', 'Keyboard control', TraitInputType.Checkbox, undefined, false),
-            new TraitConfig('enableMousewheel', 'Mousewheel control', TraitInputType.Checkbox, undefined, false),
+            new TraitConfig('enableMousewheel', 'Mousewheel', TraitInputType.Checkbox, undefined, false),
             new TraitConfig('enableZoom', 'Zoom', TraitInputType.Checkbox, undefined, false),
-            new TraitConfig('enableGrid', 'Grid (multi-row)', TraitInputType.Checkbox, undefined, false),
             new TraitConfig('enableParallax', 'Parallax', TraitInputType.Checkbox, undefined, false),
-            // ── Section label ─────────────────────────────────
-            new TraitConfig('__paginationLabel', 'Pagination options', TraitInputType.SectionLabel),
-            // ── Pagination sub-options ────────────────────────
-            new TraitConfig('paginationType', 'Type', TraitInputType.Select, [{ label: 'Bullets', value: 'bullets' }, { label: 'Fraction', value: 'fraction' }, { label: 'Progress bar', value: 'progressbar' }], 'bullets'),
-            new TraitConfig('paginationClickable', 'Clickable', TraitInputType.Checkbox, undefined, true),
-            // ── Section label ─────────────────────────────────
-            new TraitConfig('__autoplayLabel', 'Autoplay options', TraitInputType.SectionLabel),
-            // ── Autoplay sub-options ──────────────────────────
-            new TraitConfig('autoplayDelay', 'Delay (ms)', TraitInputType.Number, undefined, 3000),
-            new TraitConfig('autoplayPauseOnMouseEnter', 'Pause on hover', TraitInputType.Checkbox, undefined, true),
-            new TraitConfig('autoplayDisableOnInteraction', 'Disable on interact', TraitInputType.Checkbox, undefined, false),
-            // ── Section label ─────────────────────────────────
-            new TraitConfig('__gridLabel', 'Grid options', TraitInputType.SectionLabel),
-            // ── Grid sub-options ──────────────────────────────
-            new TraitConfig('gridRows', 'Rows', TraitInputType.Number, undefined, 1),
-            // ── Section label ─────────────────────────────────
-            new TraitConfig('__responsiveLabel', 'Responsive breakpoints', TraitInputType.SectionLabel),
-            // ── Responsive ────────────────────────────────────
+            // ── Grid ──────────────────────────────────────────────────────────
+            new TraitConfig('__gridLabel', 'Grid', TraitInputType.SectionLabel),
+            new TraitConfig('enableGrid', 'Grid (multi-row)', TraitInputType.Checkbox, undefined, false),
+            new TraitConfig('gridRows', 'Rows', TraitInputType.Scrub, undefined, 2, undefined, { trait: 'enableGrid', values: 'true' }),
+            // ── Responsive ────────────────────────────────────────────────────
+            new TraitConfig('__responsiveLabel', 'Responsive', TraitInputType.SectionLabel),
             new TraitConfig('breakpoints', 'Breakpoints (JSON)', TraitInputType.Textarea, undefined, ''),
         ];
         this.styleTraits = [