@themarioga/grid-editor 8.0.0-beta.3 → 8.1.0

package/src/js/{style → inline-style}/display.js

@@ -1,10 +1,10 @@
 /**
- * Display, a part of the style plugin: how a node is displayed per
+ * Display, a part of the inline-style plugin: how a node is displayed per
  * breakpoint, hidden included, with Bootstrap's d-{breakpoint}-* classes,
  * and the eye in the drawers that hides and shows it.
  *
  * Its families, and whatever it does on the canvas, as a function of the
- * handle and its options: grideditor.style.js puts them in its sections.
+ * handle and its options: grideditor.inline-style.js puts them in its sections.
  */
 import { GridEditor } from '../grideditor.js';
 import * as dom from '../dom.js';

package/src/js/{style → inline-style}/drawerflow.js

@@ -1,5 +1,5 @@
 /**
- * The drawer of a flex or grid node, a part of the style plugin.
+ * The drawer of a flex or grid node, a part of the inline-style plugin.
  *
  * A drawer is its node's first child, in the flow: in a row, which wraps,
  * it is a line of its own above the columns, but in anything else that

package/src/js/{style → inline-style}/fields.js

@@ -1,5 +1,5 @@
 /**
- * The style plugin's inline fields: one per css property, each writing the
+ * The inline-style plugin's inline fields: one per css property, each writing the
  * node's own style through ge.setHostStyle, never by hand, so the preview
  * of a breakpoint view neither shows in them nor eats what they write.
  *
@@ -40,7 +40,7 @@ function mark(input, ok, ge) {
     if (ok) {
         input.removeAttribute('title');
     } else {
-        input.setAttribute('title', ge.t('style.invalid'));
+        input.setAttribute('title', ge.t('inline_style.invalid'));
     }
 }
 
@@ -70,7 +70,7 @@ function pickable(value) {
 
 /** A picker and a text beside it, which takes what a picker cannot: rgba, var(), transparent. */
 function colorControl(onValue) {
-    var box = dom.element('div', { 'class': 'input-group input-group-sm ge-style-color' });
+    var box = dom.element('div', { 'class': 'input-group input-group-sm ge-inline-style-color' });
     var picker = box.appendChild(dom.element('input', { type: 'color', 'class': 'form-control form-control-color' }));
     var text = box.appendChild(textInput());
 
@@ -146,10 +146,10 @@ var LENGTH = /^-?(?:\d*\.)?\d+(?:[a-z%]+)?$/i;
 
 /** The lengths of a shadow, in the order css writes them; a text shadow has no spread. */
 var SHADOW_PARTS = [
-    { name: 'x', labelKey: 'style.shadow_x' },
-    { name: 'y', labelKey: 'style.shadow_y' },
-    { name: 'blur', labelKey: 'style.shadow_blur' },
-    { name: 'spread', labelKey: 'style.shadow_spread' },
+    { name: 'x', labelKey: 'inline_style.shadow_x' },
+    { name: 'y', labelKey: 'inline_style.shadow_y' },
+    { name: 'blur', labelKey: 'inline_style.shadow_blur' },
+    { name: 'spread', labelKey: 'inline_style.shadow_spread' },
 ];
 
 /**
@@ -206,7 +206,7 @@ function composeShadow(parts, box) {
  */
 function shadowControl(ge, node, property, changed) {
     var box = property === 'box-shadow';
-    var holder = dom.element('div', { 'class': 'ge-style-shadow' });
+    var holder = dom.element('div', { 'class': 'ge-inline-style-shadow' });
     var textMode = false;
 
     function writeValue(value, input) {
@@ -218,34 +218,34 @@ function shadowControl(ge, node, property, changed) {
 
     function builder(parts) {
         holder.innerHTML = '';
-        var grid = holder.appendChild(dom.element('div', { 'class': 'ge-style-shadow-builder' }));
+        var grid = holder.appendChild(dom.element('div', { 'class': 'ge-inline-style-shadow-builder' }));
         var names = box ? SHADOW_PARTS : SHADOW_PARTS.slice(0, 3);
         var inputs = names.map(function(part, i) {
-            var cell = grid.appendChild(dom.element('label', { 'class': 'ge-style-shadow-part' }));
-            cell.appendChild(dom.element('span', { 'class': 'ge-style-shadow-label' }, ge.t(part.labelKey)));
-            var input = cell.appendChild(textInput('ge-style-shadow-' + part.name));
+            var cell = grid.appendChild(dom.element('label', { 'class': 'ge-inline-style-shadow-part' }));
+            cell.appendChild(dom.element('span', { 'class': 'ge-inline-style-shadow-label' }, ge.t(part.labelKey)));
+            var input = cell.appendChild(textInput('ge-inline-style-shadow-' + part.name));
             input.value = parts.lengths[i] || '';
             return input;
         });
 
-        var colorCell = grid.appendChild(dom.element('label', { 'class': 'ge-style-shadow-part ge-style-shadow-color' }));
-        colorCell.appendChild(dom.element('span', { 'class': 'ge-style-shadow-label' }, ge.t('style.shadow_color')));
+        var colorCell = grid.appendChild(dom.element('label', { 'class': 'ge-inline-style-shadow-part ge-inline-style-shadow-color' }));
+        colorCell.appendChild(dom.element('span', { 'class': 'ge-inline-style-shadow-label' }, ge.t('inline_style.shadow_color')));
         var color = colorControl(function() { update(); });
         colorCell.appendChild(color.element);
         color.set(parts.color);
 
         var inset = null;
         if (box) {
-            var insetCell = grid.appendChild(dom.element('label', { 'class': 'form-check ge-style-shadow-inset' }));
+            var insetCell = grid.appendChild(dom.element('label', { 'class': 'form-check ge-inline-style-shadow-inset' }));
             inset = insetCell.appendChild(dom.element('input', { type: 'checkbox', 'class': 'form-check-input' }));
-            insetCell.appendChild(dom.element('span', { 'class': 'form-check-label' }, ge.t('style.shadow_inset')));
+            insetCell.appendChild(dom.element('span', { 'class': 'form-check-label' }, ge.t('inline_style.shadow_inset')));
             inset.checked = parts.inset;
             inset.addEventListener('change', function() { update(); });
         }
 
         inputs.forEach(function(input) { input.addEventListener('change', function() { update(); }); });
 
-        var toText = holder.appendChild(dom.element('a', { href: '#', 'class': 'ge-style-shadow-mode' }, ge.t('style.shadow_text_mode')));
+        var toText = holder.appendChild(dom.element('a', { href: '#', 'class': 'ge-inline-style-shadow-mode' }, ge.t('inline_style.shadow_text_mode')));
         toText.addEventListener('click', function(e) {
             e.preventDefault();
             textMode = true;
@@ -264,7 +264,7 @@ function shadowControl(ge, node, property, changed) {
 
     function text(value) {
         holder.innerHTML = '';
-        var input = holder.appendChild(textInput('ge-style-shadow-text'));
+        var input = holder.appendChild(textInput('ge-inline-style-shadow-text'));
         input.value = value;
         input.addEventListener('change', function() {
             if (input.value.trim() === '') {
@@ -276,6 +276,16 @@ function shadowControl(ge, node, property, changed) {
             }
             writeValue(input.value, input);
         });
+
+        // Back to the builder, when it can hold the value: one shadow, or none
+        if (parseShadow(value, box)) {
+            var toBuilder = holder.appendChild(dom.element('a', { href: '#', 'class': 'ge-inline-style-shadow-mode' }, ge.t('inline_style.shadow_builder_mode')));
+            toBuilder.addEventListener('click', function(e) {
+                e.preventDefault();
+                textMode = false;
+                render();
+            });
+        }
     }
 
     var shown = null; // The value the builder or the text was last built for
@@ -288,7 +298,7 @@ function shadowControl(ge, node, property, changed) {
 
         // Built again only when the value changed under it: building takes
         // the focus from whichever of its inputs the user moved on to
-        if (value === shown && holder.firstChild && textMode === !!holder.querySelector('.ge-style-shadow-text')) { return; }
+        if (value === shown && holder.firstChild && textMode === !!holder.querySelector('.ge-inline-style-shadow-text')) { return; }
         shown = value;
 
         if (textMode || !parts) {
@@ -308,8 +318,8 @@ function shadowControl(ge, node, property, changed) {
  * sections up to date.
  */
 export function createStyleField(ge, node, property, changed) {
-    var field = dom.element('div', { 'class': 'ge-style-field', 'data-ge-style-property': property.name });
-    var label = field.appendChild(dom.element('label', { 'class': 'ge-style-label' }, ge.t(property.labelKey)));
+    var field = dom.element('div', { 'class': 'ge-inline-style-field', 'data-ge-inline-style-property': property.name });
+    var label = field.appendChild(dom.element('label', { 'class': 'ge-inline-style-label' }, ge.t(property.labelKey)));
     var render;
 
     function current() {
@@ -355,19 +365,19 @@ export function createStyleField(ge, node, property, changed) {
 
     var control = field.querySelector('input, select');
     if (control) {
-        control.id = 'ge-style-field-' + (++fieldCounter);
+        control.id = 'ge-inline-style-field-' + (++fieldCounter);
         label.setAttribute('for', control.id);
     }
 
-    field.appendChild(dom.element('small', { 'class': 'ge-style-note ge-style-overridden' }));
+    field.appendChild(dom.element('small', { 'class': 'ge-inline-style-note ge-inline-style-overridden' }));
 
     renderers.set(field, function() {
         render();
 
         // A Bootstrap utility on the node wins over the value: every one is !important
         var winner = current() ? overriding(property.name, classesOf(node)) : null;
-        var note = dom.child(field, '.ge-style-overridden');
-        note.textContent = winner ? ge.t('style.overridden', { 'class': winner }) : '';
+        var note = dom.child(field, '.ge-inline-style-overridden');
+        note.textContent = winner ? ge.t('inline_style.overridden', { 'class': winner }) : '';
         dom.toggle(note, !!winner);
     });
     renderStyleField(field);

package/src/js/{style → inline-style}/flex.js

@@ -1,12 +1,12 @@
 /**
- * Flex, a part of the style plugin: a flex container's direction, wrap,
+ * Flex, a part of the inline-style plugin: a flex container's direction, wrap,
  * alignment and gaps, and how its children grow, shrink and fill, per
  * breakpoint, with Bootstrap's flex-{breakpoint}-*, justify-content-*,
  * align-items-*, align-content-*, gap-* and row-/column-gap-* classes.
  *
  * Its families, and whatever it does on the canvas, as a function of the
  * handle and the spacing options, whose scale the gaps share:
- * grideditor.style.js puts them in its Flex section.
+ * grideditor.inline-style.js puts them in its Flex section.
  */
 import { GridEditor } from '../grideditor.js';
 

package/src/js/{style → inline-style}/float.js

@@ -1,9 +1,9 @@
 /**
- * Float, a part of the style plugin: floating an element per breakpoint, with Bootstrap's
+ * Float, a part of the inline-style plugin: floating an element per breakpoint, with Bootstrap's
  * float-{breakpoint}-start, -end and -none classes.
  *
  * Its families, and whatever it does on the canvas, as a function of the
- * handle: grideditor.style.js puts them in its sections.
+ * handle: grideditor.inline-style.js puts them in its sections.
  */
 import { GridEditor } from '../grideditor.js';
 

package/src/js/{style → inline-style}/options.js

@@ -1,7 +1,7 @@
 /**
- * The style plugin's settings, `style` in the editor's options:
+ * The inline-style plugin's settings, `inline_style` in the editor's options:
  *
- *   style: {
+ *   inline_style: {
  *       sections: { border: { properties: [...], catalog: false }, position: false, … },
  *       spacing: { values, scale },   // the values offered, and what 0 to 5 come to
  *       visibility: { drawer },       // false leaves the eye out of the drawers
@@ -19,7 +19,7 @@ function resolveSections(ge, given) {
     var resolved = {};
 
     Object.keys(given || {}).forEach(function(key) {
-        if (!section(key)) { ge.warn('style.sections: there is no "' + key + '" section: ignored'); }
+        if (!section(key)) { ge.warn('inline_style.sections: there is no "' + key + '" section: ignored'); }
     });
 
     SECTIONS.forEach(function(each) {
@@ -34,7 +34,7 @@ function resolveSections(ge, given) {
             if (Array.isArray(option.properties)) {
                 option.properties.forEach(function(name) {
                     if (own.indexOf(name) === -1) {
-                        ge.warn('style.sections.' + each.key + ': "' + name + '" is not one of its properties: ignored');
+                        ge.warn('inline_style.sections.' + each.key + ': "' + name + '" is not one of its properties: ignored');
                     }
                 });
                 properties = option.properties.filter(function(name) { return own.indexOf(name) !== -1; })
@@ -50,7 +50,7 @@ function resolveSections(ge, given) {
 }
 
 export function resolveOptions(ge) {
-    var style = ge.settings.style || {};
+    var style = ge.settings.inline_style || {};
 
     return {
         sections: resolveSections(ge, style.sections),

package/src/js/{style → inline-style}/sections.js

@@ -1,5 +1,5 @@
 /**
- * What the style plugin's sections are made of: for each, its inline
+ * What the inline-style plugin's sections are made of: for each, its inline
  * properties and the field each one gets, the Bootstrap 5.3 classes its
  * catalog offers, and which of the merged utility parts it shows.
  *
@@ -48,14 +48,14 @@ var ONLY_ON_ELEMENT = ['element'];
 export var SECTIONS = [
     {
         key: 'size',
-        labelKey: 'style.section_size',
+        labelKey: 'inline_style.section_size',
         properties: [
-            prop('width', { labelKey: 'style.prop_width', notOn: NOT_ON_COLUMN }),
-            prop('height', { labelKey: 'style.prop_height', notOn: NOT_ON_COLUMN }),
-            prop('min-width', { labelKey: 'style.prop_min_width' }),
-            prop('min-height', { labelKey: 'style.prop_min_height' }),
-            prop('max-width', { labelKey: 'style.prop_max_width' }),
-            prop('max-height', { labelKey: 'style.prop_max_height' }),
+            prop('width', { labelKey: 'inline_style.prop_width', notOn: NOT_ON_COLUMN }),
+            prop('height', { labelKey: 'inline_style.prop_height', notOn: NOT_ON_COLUMN }),
+            prop('min-width', { labelKey: 'inline_style.prop_min_width' }),
+            prop('min-height', { labelKey: 'inline_style.prop_min_height' }),
+            prop('max-width', { labelKey: 'inline_style.prop_max_width' }),
+            prop('max-height', { labelKey: 'inline_style.prop_max_height' }),
         ],
         catalog: [
             group(each('w-', ['25', '50', '75', '100', 'auto']), true, NOT_ON_COLUMN),
@@ -68,23 +68,23 @@ export var SECTIONS = [
     },
     {
         key: 'spacing',
-        labelKey: 'style.section_spacing',
+        labelKey: 'inline_style.section_spacing',
         properties: [
-            prop('margin-top', { labelKey: 'style.prop_margin_top' }), prop('margin-right', { labelKey: 'style.prop_margin_right' }), prop('margin-bottom', { labelKey: 'style.prop_margin_bottom' }), prop('margin-left', { labelKey: 'style.prop_margin_left' }),
-            prop('padding-top', { labelKey: 'style.prop_padding_top' }), prop('padding-right', { labelKey: 'style.prop_padding_right' }), prop('padding-bottom', { labelKey: 'style.prop_padding_bottom' }), prop('padding-left', { labelKey: 'style.prop_padding_left' }),
+            prop('margin-top', { labelKey: 'inline_style.prop_margin_top' }), prop('margin-right', { labelKey: 'inline_style.prop_margin_right' }), prop('margin-bottom', { labelKey: 'inline_style.prop_margin_bottom' }), prop('margin-left', { labelKey: 'inline_style.prop_margin_left' }),
+            prop('padding-top', { labelKey: 'inline_style.prop_padding_top' }), prop('padding-right', { labelKey: 'inline_style.prop_padding_right' }), prop('padding-bottom', { labelKey: 'inline_style.prop_padding_bottom' }), prop('padding-left', { labelKey: 'inline_style.prop_padding_left' }),
         ],
         catalog: [],
         parts: ['spacing'],
     },
     {
         key: 'border',
-        labelKey: 'style.section_border',
+        labelKey: 'inline_style.section_border',
         properties: [
-            prop('border-width', { labelKey: 'style.prop_border_width' }),
-            prop('border-style', { labelKey: 'style.prop_border_style', type: 'select', values: ['none', 'solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inset', 'outset'] }),
-            prop('border-color', { labelKey: 'style.prop_border_color', type: 'color' }),
-            prop('border-radius', { labelKey: 'style.prop_border_radius' }),
-            prop('box-shadow', { labelKey: 'style.prop_box_shadow', type: 'shadow' }),
+            prop('border-width', { labelKey: 'inline_style.prop_border_width' }),
+            prop('border-style', { labelKey: 'inline_style.prop_border_style', type: 'select', values: ['none', 'solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inset', 'outset'] }),
+            prop('border-color', { labelKey: 'inline_style.prop_border_color', type: 'color' }),
+            prop('border-radius', { labelKey: 'inline_style.prop_border_radius' }),
+            prop('box-shadow', { labelKey: 'inline_style.prop_box_shadow', type: 'shadow' }),
         ],
         catalog: [
             group(['border', 'border-0'].concat(each('border-', SIDES), each('border-', SIDES, '-0')), false),
@@ -99,13 +99,13 @@ export var SECTIONS = [
     },
     {
         key: 'background',
-        labelKey: 'style.section_background',
+        labelKey: 'inline_style.section_background',
         properties: [
-            prop('background-color', { labelKey: 'style.prop_background_color', type: 'color' }),
-            prop('background-image', { labelKey: 'style.prop_background_image', type: 'url' }),
-            prop('background-size', { labelKey: 'style.prop_background_size' }),
-            prop('background-position', { labelKey: 'style.prop_background_position' }),
-            prop('background-repeat', { labelKey: 'style.prop_background_repeat', type: 'select', values: ['repeat', 'no-repeat', 'repeat-x', 'repeat-y', 'space', 'round'] }),
+            prop('background-color', { labelKey: 'inline_style.prop_background_color', type: 'color' }),
+            prop('background-image', { labelKey: 'inline_style.prop_background_image', type: 'url' }),
+            prop('background-size', { labelKey: 'inline_style.prop_background_size' }),
+            prop('background-position', { labelKey: 'inline_style.prop_background_position' }),
+            prop('background-repeat', { labelKey: 'inline_style.prop_background_repeat', type: 'select', values: ['repeat', 'no-repeat', 'repeat-x', 'repeat-y', 'space', 'round'] }),
         ],
         catalog: [
             group(each('bg-', COLORS.concat(['body', 'body-secondary', 'body-tertiary', 'white', 'black', 'transparent']))
@@ -117,12 +117,12 @@ export var SECTIONS = [
     },
     {
         key: 'text',
-        labelKey: 'style.section_text',
+        labelKey: 'inline_style.section_text',
         properties: [
-            prop('color', { labelKey: 'style.prop_color', type: 'color' }),
-            prop('font-size', { labelKey: 'style.prop_font_size' }),
-            prop('text-align', { labelKey: 'style.prop_text_align', type: 'select', values: ['start', 'center', 'end', 'left', 'right', 'justify'] }),
-            prop('text-shadow', { labelKey: 'style.prop_text_shadow', type: 'shadow' }),
+            prop('color', { labelKey: 'inline_style.prop_color', type: 'color' }),
+            prop('font-size', { labelKey: 'inline_style.prop_font_size' }),
+            prop('text-align', { labelKey: 'inline_style.prop_text_align', type: 'select', values: ['start', 'center', 'end', 'left', 'right', 'justify'] }),
+            prop('text-shadow', { labelKey: 'inline_style.prop_text_shadow', type: 'shadow' }),
         ],
         catalog: [
             group(each('text-', COLORS.concat(['body', 'body-secondary', 'body-tertiary', 'white', 'black']))
@@ -135,15 +135,15 @@ export var SECTIONS = [
     },
     {
         key: 'typography',
-        labelKey: 'style.section_typography',
+        labelKey: 'inline_style.section_typography',
         properties: [
-            prop('font-family', { labelKey: 'style.prop_font_family' }),
-            prop('font-weight', { labelKey: 'style.prop_font_weight', type: 'select', values: ['100', '200', '300', '400', '500', '600', '700', '800', '900', 'normal', 'bold', 'lighter', 'bolder'] }),
-            prop('font-style', { labelKey: 'style.prop_font_style', type: 'select', values: ['normal', 'italic', 'oblique'] }),
-            prop('line-height', { labelKey: 'style.prop_line_height' }),
-            prop('letter-spacing', { labelKey: 'style.prop_letter_spacing' }),
-            prop('text-transform', { labelKey: 'style.prop_text_transform', type: 'select', values: ['none', 'uppercase', 'lowercase', 'capitalize'] }),
-            prop('text-decoration', { labelKey: 'style.prop_text_decoration', type: 'select', values: ['none', 'underline', 'line-through', 'overline'] }),
+            prop('font-family', { labelKey: 'inline_style.prop_font_family' }),
+            prop('font-weight', { labelKey: 'inline_style.prop_font_weight', type: 'select', values: ['100', '200', '300', '400', '500', '600', '700', '800', '900', 'normal', 'bold', 'lighter', 'bolder'] }),
+            prop('font-style', { labelKey: 'inline_style.prop_font_style', type: 'select', values: ['normal', 'italic', 'oblique'] }),
+            prop('line-height', { labelKey: 'inline_style.prop_line_height' }),
+            prop('letter-spacing', { labelKey: 'inline_style.prop_letter_spacing' }),
+            prop('text-transform', { labelKey: 'inline_style.prop_text_transform', type: 'select', values: ['none', 'uppercase', 'lowercase', 'capitalize'] }),
+            prop('text-decoration', { labelKey: 'inline_style.prop_text_decoration', type: 'select', values: ['none', 'underline', 'line-through', 'overline'] }),
         ],
         catalog: [
             group(each('fw-', ['lighter', 'light', 'normal', 'medium', 'semibold', 'bold', 'bolder'])),
@@ -158,12 +158,12 @@ export var SECTIONS = [
     },
     {
         key: 'display',
-        labelKey: 'style.section_display',
+        labelKey: 'inline_style.section_display',
         properties: [
-            prop('display', { labelKey: 'style.prop_display', type: 'select', values: ['none', 'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline-grid'] }),
-            prop('opacity', { labelKey: 'style.prop_opacity' }),
-            prop('overflow', { labelKey: 'style.prop_overflow', type: 'select', values: ['visible', 'hidden', 'auto', 'scroll', 'clip'] }),
-            prop('visibility', { labelKey: 'style.prop_visibility', type: 'select', values: ['visible', 'hidden'] }),
+            prop('display', { labelKey: 'inline_style.prop_display', type: 'select', values: ['none', 'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline-grid'] }),
+            prop('opacity', { labelKey: 'inline_style.prop_opacity' }),
+            prop('overflow', { labelKey: 'inline_style.prop_overflow', type: 'select', values: ['visible', 'hidden', 'auto', 'scroll', 'clip'] }),
+            prop('visibility', { labelKey: 'inline_style.prop_visibility', type: 'select', values: ['visible', 'hidden'] }),
         ],
         catalog: [
             group(each('opacity-', ['0', '25', '50', '75', '100'])),
@@ -174,7 +174,7 @@ export var SECTIONS = [
     },
     {
         key: 'flex',
-        labelKey: 'style.section_flex',
+        labelKey: 'inline_style.section_flex',
         properties: [],
         catalog: [
             group(['vstack', 'hstack'], true, ['row']),
@@ -183,14 +183,14 @@ export var SECTIONS = [
     },
     {
         key: 'position',
-        labelKey: 'style.section_position',
+        labelKey: 'inline_style.section_position',
         properties: [
-            prop('position', { labelKey: 'style.prop_position', type: 'select', values: ['static', 'relative', 'absolute', 'fixed', 'sticky'] }),
-            prop('top', { labelKey: 'style.prop_top', notOn: NOT_ON_COLUMN }),
-            prop('right', { labelKey: 'style.prop_right', notOn: NOT_ON_COLUMN }),
-            prop('bottom', { labelKey: 'style.prop_bottom', notOn: NOT_ON_COLUMN }),
-            prop('left', { labelKey: 'style.prop_left', notOn: NOT_ON_COLUMN }),
-            prop('z-index', { labelKey: 'style.prop_z_index' }),
+            prop('position', { labelKey: 'inline_style.prop_position', type: 'select', values: ['static', 'relative', 'absolute', 'fixed', 'sticky'] }),
+            prop('top', { labelKey: 'inline_style.prop_top', notOn: NOT_ON_COLUMN }),
+            prop('right', { labelKey: 'inline_style.prop_right', notOn: NOT_ON_COLUMN }),
+            prop('bottom', { labelKey: 'inline_style.prop_bottom', notOn: NOT_ON_COLUMN }),
+            prop('left', { labelKey: 'inline_style.prop_left', notOn: NOT_ON_COLUMN }),
+            prop('z-index', { labelKey: 'inline_style.prop_z_index' }),
         ],
         catalog: [
             group(each('position-', ['static', 'relative', 'absolute', 'fixed', 'sticky'])),
@@ -206,7 +206,7 @@ export var SECTIONS = [
     },
     {
         key: 'custom',
-        labelKey: 'style.section_custom',
+        labelKey: 'inline_style.section_custom',
         properties: [],
         catalog: [],
         parts: [],

package/src/js/{style → inline-style}/spacing.js

@@ -1,9 +1,9 @@
 /**
- * Spacing, a part of the style plugin: padding and margin per breakpoint, with Bootstrap's p-{breakpoint}-*,
+ * Spacing, a part of the inline-style plugin: padding and margin per breakpoint, with Bootstrap's p-{breakpoint}-*,
  * pt-, px- … and m-{breakpoint}-*, mt-, mx- … classes.
  *
  * Its families, and whatever it does on the canvas, as a function of the
- * handle and its options: grideditor.style.js puts them in its sections.
+ * handle and its options: grideditor.inline-style.js puts them in its sections.
  */
 import { GridEditor } from '../grideditor.js';
 import * as dom from '../dom.js';

package/src/js/{style → inline-style}/sticky.js

@@ -1,10 +1,10 @@
 /**
- * Sticky, a part of the style plugin: sticking a node to the top or the
+ * Sticky, a part of the inline-style plugin: sticking a node to the top or the
  * bottom of the page as it scrolls, per breakpoint, with Bootstrap's
  * sticky-{breakpoint}-top and -bottom classes.
  *
  * Its families, and whatever it does on the canvas, as a function of the
- * handle: grideditor.style.js puts them in its sections.
+ * handle: grideditor.inline-style.js puts them in its sections.
  */
 import { GridEditor } from '../grideditor.js';
 

package/src/js/{style → inline-style}/textalign.js

@@ -1,9 +1,9 @@
 /**
- * Text alignment, a part of the style plugin: text alignment per breakpoint, with Bootstrap's text-{breakpoint}-start,
+ * Text alignment, a part of the inline-style plugin: text alignment per breakpoint, with Bootstrap's text-{breakpoint}-start,
  * -center and -end classes.
  *
  * Its families, and whatever it does on the canvas, as a function of the
- * handle: grideditor.style.js puts them in its sections.
+ * handle: grideditor.inline-style.js puts them in its sections.
  */
 import { GridEditor } from '../grideditor.js';