@vectoriox/iox-builder 4.6.0 → 4.8.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -218,7 +218,7 @@ class ComponentConfig {
     }
 }
 class TraitConfig {
-    constructor(name, label, type, options, defaultValue, inline, showWhen) {
+    constructor(name, label, type, options, defaultValue, inline, showWhen, responsive) {
         this.name = name;
         this.label = label;
         this.type = type;
@@ -226,6 +226,7 @@ class TraitConfig {
         this.default = defaultValue;
         this.inline = inline;
         this.showWhen = showWhen;
+        this.responsive = responsive;
     }
 }
 class GroupStyleConfig {
@@ -320,7 +321,7 @@ class LayoutGroupStyleConfig extends GroupStyleConfig {
                 { value: 'flex-start', label: 'Start', icon: 'ph-thin ph-align-left' },
                 { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-horizontal' },
                 { value: 'flex-end', label: 'End', icon: 'ph-thin ph-align-right' },
-                { value: 'space-between', label: 'Space Between', icon: 'ph-thin ph-distribute-horizontal' },
+                { value: 'space-between', label: 'Space Between', icon: 'ph-thin ph-arrows-out-line-horizontal' },
                 { value: 'space-around', label: 'Space Around', icon: 'ph-thin ph-dots-three' },
                 { value: 'space-evenly', label: 'Space Evenly', icon: 'ph-thin ph-dots-six' },
             ], 'flex-start', false, { trait: 'display', values: ['flex', 'grid'] }),
@@ -344,7 +345,7 @@ class LayoutGroupStyleConfig extends GroupStyleConfig {
                 { value: 'start', label: 'Start', icon: 'ph-thin ph-align-top' },
                 { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-vertical' },
                 { value: 'end', label: 'End', icon: 'ph-thin ph-align-bottom' },
-                { value: 'space-between', label: 'Space Between', icon: 'ph-thin ph-distribute-vertical' },
+                { value: 'space-between', label: 'Space Between', icon: 'ph-thin ph-arrows-out-line-vertical' },
                 { value: 'space-around', label: 'Space Around', icon: 'ph-thin ph-dots-three' },
                 { value: 'stretch', label: 'Stretch', icon: 'ph-thin ph-arrows-vertical' },
             ], 'stretch', false, { trait: 'display', values: 'grid' }),
@@ -4273,6 +4274,12 @@ class RenderDirective {
                 return;
             safeSetInput(componentRef, trait.name, trait.default);
         });
+        // Per-breakpoint TRAIT overrides — the same hand-off the SSR engine makes. A component that
+        // declares a `responsive` input (SliderContainer) converts it to its own width config, so the
+        // canvas and the live site agree without the canvas needing a resize listener. Dropped by
+        // safeSetInput for every component that does not declare it.
+        if (node.responsive)
+            safeSetInput(componentRef, 'responsive', node.responsive);
         // Build initial style map from styleTraits defaults.
         const initialStyle = {};
         if (node.styleTraits?.length) {
@@ -9153,8 +9160,18 @@ class CardComponentConfig extends ComponentConfig {
             new TraitConfig('description', 'Description', TraitInputType.Text, undefined, 'This is a default card description.')
         ];
         this.styleTraits = buildFullStyleTraits();
+        // DEPRECATED — removed from the Components panel (2026-09-22). A Card is a Container with a
+        // border, a radius and a background: every one of those is a style group on Container, so the
+        // component earned no place in the palette. It stays REGISTERED and renderable because saved
+        // pages may contain Card nodes — dropping the type would render those pages blank. Remove the
+        // type entirely only behind a migration that rewrites Card nodes to Container.
+        this.hidden = true;
         this.applyStyleDefaults({
-            width: '200px',
+            // Fluid up to the design width: a fixed 200px card overflows a narrow column and is
+            // the single most common `fixed-width` audit finding. Capping keeps the desktop look
+            // identical (parent wider than 200px → still 200px) while shrinking on a phone.
+            width: '100%',
+            maxWidth: '200px',
             height: 'auto',
             padding: '16px 16px 16px 16px',
             borderWidth: '1px 1px 1px 1px',
@@ -9292,7 +9309,10 @@ class BuilderImageComponentConfig extends ComponentConfig {
         ];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
-            width: '300px',
+            // Same reasoning as Card: 300px alone overflows a 320px viewport once the page has any
+            // side padding. Capped-fluid renders identically wherever there is room.
+            width: '100%',
+            maxWidth: '300px',
             aspectRatio: '1/1',
         });
     }
@@ -9449,6 +9469,14 @@ class RepeaterComponentConfig extends ComponentConfig {
                 label: 'Limit',
                 type: TraitInputType.Number,
                 default: 10,
+                // NOT marked `responsive` yet, deliberately. Row COUNT cannot be varied per width the
+                // way the slider's can: Swiper reads its own breakpoints map at runtime, but a
+                // repeater's count is decided when the markup is produced — and SSR has no viewport,
+                // so rendering N on the server and M in the browser is a hydration mismatch. The fix
+                // is to keep rendering every item and HIDE the surplus per width with a generated
+                // `:nth-child(n+X) { display: none }` rule (CSS-expressible, hydration-safe), which is
+                // a separate change. Marking it responsive now would ship a control that silently
+                // does nothing on the live site — exactly the `slidesPerGroup` bug this pass fixed.
             },
         ];
         this.styleTraits = buildFullStyleTraits();
@@ -9549,15 +9577,15 @@ class SliderContainerConfig extends ComponentConfig {
                 { label: '4', value: 4 },
                 { label: '5', value: 5 },
                 { label: '6', value: 6 },
-            ], 'auto'),
-            new TraitConfig('slidesPerGroup', 'Slides per group', TraitInputType.Scrub, undefined, 1),
+            ], 'auto', undefined, undefined, /* responsive */ true),
+            new TraitConfig('slidesPerGroup', 'Slides per group', TraitInputType.Scrub, undefined, 1, undefined, undefined, /* responsive */ true),
             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('spaceBetween', 'Space between (px)', TraitInputType.Scrub, undefined, 0, undefined, undefined, /* responsive */ true),
             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),