@vectoriox/iox-builder 4.24.0 → 4.25.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -345,19 +345,19 @@ class PositionGroupStyleConfig extends GroupStyleConfig {
 class LayoutGroupStyleConfig extends GroupStyleConfig {
     constructor() {
         super(StyleCategory.Layout, [
-            new TraitConfig('display', 'Display', TraitInputType.Select, ['block', 'inline', 'inline-block', 'flex', 'grid'], 'block'),
+            new TraitConfig('display', 'Display', TraitInputType.Select, ['block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid'], 'block'),
             // ── Flex-only ─────────────────────────────────────────────────────
             new TraitConfig('flexDirection', 'Direction', TraitInputType.SelectButton, [
                 { value: 'row', label: 'Horizontal', icon: 'ph-thin ph-arrow-right' },
                 { value: 'row-reverse', label: 'Horizontal Reversed', icon: 'ph-thin ph-arrow-left' },
                 { value: 'column', label: 'Vertical', icon: 'ph-thin ph-arrow-down' },
                 { value: 'column-reverse', label: 'Vertical Reversed', icon: 'ph-thin ph-arrow-up' },
-            ], 'row', false, { trait: 'display', values: 'flex' }),
+            ], 'row', false, { trait: 'display', values: ['flex', 'inline-flex'] }),
             new TraitConfig('flexWrap', 'Flex Wrap', TraitInputType.SelectButton, [
                 { value: 'nowrap', label: 'No Wrap', icon: 'ph-thin ph-minus' },
                 { value: 'wrap', label: 'Wrap', icon: 'ph-thin ph-arrow-elbow-down-right' },
                 { value: 'wrap-reverse', label: 'Wrap Reversed', icon: 'ph-thin ph-arrow-elbow-up-right' },
-            ], 'nowrap', false, { trait: 'display', values: 'flex' }),
+            ], 'nowrap', false, { trait: 'display', values: ['flex', 'inline-flex'] }),
             // ── Shared flex + grid ────────────────────────────────────────────
             new TraitConfig('justifyContent', 'Justify', TraitInputType.SelectButton, [
                 { value: 'flex-start', label: 'Start', icon: 'ph-thin ph-align-left' },
@@ -366,14 +366,14 @@ class LayoutGroupStyleConfig extends GroupStyleConfig {
                 { 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'] }),
+            ], 'flex-start', false, { trait: 'display', values: ['flex', 'inline-flex', 'grid'] }),
             new TraitConfig('alignItems', 'Align Items', TraitInputType.SelectButton, [
                 { value: 'stretch', label: 'Stretch', icon: 'ph-thin ph-arrows-vertical' },
                 { 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' },
-            ], 'stretch', false, { trait: 'display', values: ['flex', 'grid'] }),
-            new TraitConfig('gap', 'Gap', TraitInputType.Scrub, { min: 0, max: 200, step: 1, units: UNITS_FIXED }, '0px', false, { trait: 'display', values: ['flex', 'grid'] }),
+            ], 'stretch', false, { trait: 'display', values: ['flex', 'inline-flex', 'grid'] }),
+            new TraitConfig('gap', 'Gap', TraitInputType.Scrub, { min: 0, max: 200, step: 1, units: UNITS_FIXED }, '0px', false, { trait: 'display', values: ['flex', 'inline-flex', 'grid'] }),
             // ── Grid-only ─────────────────────────────────────────────────────
             new TraitConfig('gridTemplateColumns', 'Columns', TraitInputType.GridTemplate, undefined, '1fr', false, { trait: 'display', values: 'grid' }),
             new TraitConfig('gridTemplateRows', 'Rows', TraitInputType.GridTemplate, undefined, 'auto', false, { trait: 'display', values: 'grid' }),
@@ -410,8 +410,11 @@ class LayoutGroupStyleConfig extends GroupStyleConfig {
 // is hidden and the style panel drops the whole (now-empty) group. `align-self`/`order`
 // apply to both flex and grid items; `justify-self`/`grid-column`/`grid-row` are grid-only;
 // `flex-grow`/`flex-shrink`/`flex-basis` are flex-only.
-const PARENT_FLEX_OR_GRID = { trait: 'display', values: ['flex', 'grid'], scope: 'parent' };
-const PARENT_FLEX = { trait: 'display', values: 'flex', scope: 'parent' };
+// 'inline-flex' IS flex for every layout question asked here — ButtonBlock has shipped it as a
+// constructor default forever, which made Layout badge "4" with three of the four controls hidden
+// and the Display select blank (no option for its own value). The families, not the keywords.
+const PARENT_FLEX_OR_GRID = { trait: 'display', values: ['flex', 'inline-flex', 'grid'], scope: 'parent' };
+const PARENT_FLEX = { trait: 'display', values: ['flex', 'inline-flex'], scope: 'parent' };
 const PARENT_GRID = { trait: 'display', values: 'grid', scope: 'parent' };
 class ChildLayoutGroupStyleConfig extends GroupStyleConfig {
     constructor() {