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

package/docs/locale-keys.md

@@ -76,6 +76,7 @@ title. `{kind}` is one of the `panel.kind_*` keys, or a container's own label.
 | `panel.done` | Done | The modal's button that closes it |
 | `panel.id` | Id | Label of the id field |
 | `panel.classes` | Classes | Label of the classes field |
+| `panel.section_general` | Id and classes | Heading of the panel's section with the id, the classes and the preset toggles |
 | `panel.editor` | Editor | Label of a text's settings field that says which editor edits it |
 | `panel.kind_row` | Row | `{kind}` for a row |
 | `panel.kind_column` | Column | For a column |
@@ -96,7 +97,7 @@ The containers: tabs, accordions and popups, and the panes inside them.
 | `container.add_tabs` | Tabs | Toolbar button that adds a tabs container |
 | `container.add_tab` | Add tab | Container drawer, adds a pane |
 | `container.tab_label` | Tab {number} | Label of a new tab. `{number}` is its position |
-| `container.tabs_section` | Tabs | The tabs container's section of its settings panel |
+| `container.tabs_section` | Tabs | Heading of the tabs container's section of its settings panel |
 | `container.tabs_style` | Style | Its strip's style select |
 | `container.tabs_style_tabs` | Tabs | Its choice for `nav-tabs` |
 | `container.tabs_style_pills` | Pills | Its choice for `nav-pills` |
@@ -239,7 +240,7 @@ utility.*
 ---------
 
 The Responsive section of a settings panel, which the utility plugins fill,
-and the per breakpoint fields of the style plugin's sections. The labels of
+and the per breakpoint fields of the inline-style plugin's sections. The labels of
 each utility and its values are the plugins' own keys.
 
 | Key | English | Where |
@@ -253,9 +254,9 @@ each utility and its values are the plugins' own keys.
 | `utility.default` | Default | The empty choice of a field when nothing below the view sets the utility, and always in the all view |
 | `utility.inherit` | Inherit: {value} (from {breakpoint}) | The empty choice in a breakpoint view when a smaller breakpoint sets the utility. `{breakpoint}` is its key, `sm` |
 | `utility.varies` | Changes at {breakpoints}; choosing here replaces that | Note under a field in the all view when breakpoints set their own value. `{breakpoints}` is a list of keys |
-| `utility.display` | Display | Label of the display field, `d-*`, in the style plugin's Display section. Its other choices are the values themselves |
+| `utility.display` | Display | Label of the display field, `d-*`, in the inline-style plugin's Display section. Its other choices are the values themselves |
 | `utility.visibility_hidden` | Hidden | Its choice for `d-*-none` |
-| `tool.hide_in_view` | Hide in this view | The style plugin's eye, on a node shown in the view being edited |
+| `tool.hide_in_view` | Hide in this view | The inline-style plugin's eye, on a node shown in the view being edited |
 | `tool.show_in_view` | Show in this view | The same eye, on a node hidden there |
 | `utility.order` | Order | Label of the order plugin's field |
 | `utility.order_first` | First | Its choice for `order-*-first` |
@@ -266,7 +267,7 @@ each utility and its values are the plugins' own keys.
 | `utility.gutters` | Gutters | The gutters plugin's `g-*` field, on a row |
 | `utility.gutters_x` | Horizontal gutters | Its `gx-*` field |
 | `utility.gutters_y` | Vertical gutters | Its `gy-*` field |
-| `utility.padding` | Padding | The padding group, in the style plugin's Spacing section |
+| `utility.padding` | Padding | The padding group, in the inline-style plugin's Spacing section |
 | `utility.margin` | Margin | Its margin group |
 | `utility.side_all` | All sides | The side of `p-*` and `m-*` in a group's side choice |
 | `utility.side_x` | Left and right | The side of `px-*` and `mx-*` |
@@ -275,11 +276,11 @@ each utility and its values are the plugins' own keys.
 | `utility.side_b` | Bottom | The side of `pb-*` and `mb-*` |
 | `utility.side_s` | Start | The side of `ps-*` and `ms-*` |
 | `utility.side_e` | End | The side of `pe-*` and `me-*` |
-| `utility.text_align` | Text alignment | Label of the text alignment field, in the style plugin's Text section |
+| `utility.text_align` | Text alignment | Label of the text alignment field, in the inline-style plugin's Text section |
 | `utility.text_start` | Start | Its choice for `text-*-start` |
 | `utility.text_center` | Center | Its choice for `text-*-center` |
 | `utility.text_end` | End | Its choice for `text-*-end` |
-| `utility.flex_direction` | Direction | The `flex-*-row` / `-column` field, in the style plugin's Flex section |
+| `utility.flex_direction` | Direction | The `flex-*-row` / `-column` field, in the inline-style plugin's Flex section |
 | `utility.flex_wrap` | Wrap | Its `flex-*-wrap` / `-nowrap` field |
 | `utility.justify_content` | Justify columns | Its `justify-content-*` field |
 | `utility.align_items` | Align columns | Its `align-items-*` field |
@@ -290,89 +291,89 @@ each utility and its values are the plugins' own keys.
 | `utility.flex_fill` | Fill | Its `flex-*-fill` field, on anything but a row |
 | `utility.flex_grow` | Grow | Its `flex-*-grow-*` field |
 | `utility.flex_shrink` | Shrink | Its `flex-*-shrink-*` field |
-| `utility.sticky` | Sticky | The `sticky-*-top` / `-bottom` field, in the style plugin's Position section |
-| `utility.float` | Float | Label of the float field, in the style plugin's Position section, on an element |
+| `utility.sticky` | Sticky | The `sticky-*-top` / `-bottom` field, in the inline-style plugin's Position section |
+| `utility.float` | Float | Label of the float field, in the inline-style plugin's Position section, on an element |
 | `utility.float_start` | Start | Its choice for `float-*-start` |
 | `utility.float_end` | End | Its choice for `float-*-end` |
 | `utility.float_none` | None | Its choice for `float-*-none` |
 | `utility.spacing_gutter` | A column's side padding is its gutter: changing it changes the gutter | Note in a column's spacing group while it carries side padding |
 
 
-style.*
--------
+inline_style.*
+--------------
 
-The style plugin's accordion, in a node's settings panel or in the dialog.
+The inline-style plugin's accordion, in a node's settings panel or in the dialog.
 
 | Key | English | Where |
 | --- | --- | --- |
-| `style.section_title` | Style | The style plugin's accordion, and the button that opens it in the dialog when `settings_panel` is `popover` or `inline` |
-| `style.dialog_title` | Style: {kind} | Title of that dialog. `{kind}` is what the panel's title calls the node |
-| `style.section_size` | Size | The accordion's section header |
-| `style.section_spacing` | Spacing | The accordion's section header |
-| `style.section_border` | Border | The accordion's section header |
-| `style.section_background` | Background | The accordion's section header |
-| `style.section_text` | Text | The accordion's section header |
-| `style.section_typography` | Typography | The accordion's section header |
-| `style.section_display` | Display | The accordion's section header |
-| `style.section_flex` | Flex | The accordion's section header |
-| `style.section_position` | Position | The accordion's section header |
-| `style.section_custom` | Custom css | The accordion's section header |
-| `style.all_sizes` | Applies to every size | Note over a section's inline fields in a breakpoint view: the style attribute is not responsive |
-| `style.overridden` | The class {class} takes priority over this value | Note under an inline field whose property a Bootstrap utility on the node also sets. `{class}` is that class |
-| `style.invalid` | Not a value this property takes | Tooltip of an inline field holding a value the browser refused |
-| `style.catalog` | Bootstrap classes | Heading of a section's Bootstrap class chips |
-| `style.shadow_x` | X | A part of the shadow builder |
-| `style.shadow_y` | Y | A part of the shadow builder |
-| `style.shadow_blur` | Blur | A part of the shadow builder |
-| `style.shadow_spread` | Spread | A part of the shadow builder |
-| `style.shadow_color` | Color | A part of the shadow builder |
-| `style.shadow_inset` | Inset | The shadow builder's inset checkbox |
-| `style.shadow_text_mode` | Edit as text | Link under the shadow builder that edits the value as text |
-| `style.prop_width` | Width | Label of the `width` field |
-| `style.prop_height` | Height | Label of the `height` field |
-| `style.prop_min_width` | Min width | Label of the `min-width` field |
-| `style.prop_min_height` | Min height | Label of the `min-height` field |
-| `style.prop_max_width` | Max width | Label of the `max-width` field |
-| `style.prop_max_height` | Max height | Label of the `max-height` field |
-| `style.prop_margin_top` | Margin top | Label of the `margin-top` field |
-| `style.prop_margin_right` | Margin right | Label of the `margin-right` field |
-| `style.prop_margin_bottom` | Margin bottom | Label of the `margin-bottom` field |
-| `style.prop_margin_left` | Margin left | Label of the `margin-left` field |
-| `style.prop_padding_top` | Padding top | Label of the `padding-top` field |
-| `style.prop_padding_right` | Padding right | Label of the `padding-right` field |
-| `style.prop_padding_bottom` | Padding bottom | Label of the `padding-bottom` field |
-| `style.prop_padding_left` | Padding left | Label of the `padding-left` field |
-| `style.prop_border_width` | Border width | Label of the `border-width` field |
-| `style.prop_border_style` | Border style | Label of the `border-style` field |
-| `style.prop_border_color` | Border color | Label of the `border-color` field |
-| `style.prop_border_radius` | Border radius | Label of the `border-radius` field |
-| `style.prop_box_shadow` | Shadow | Label of the `box-shadow` field |
-| `style.prop_background_color` | Background color | Label of the `background-color` field |
-| `style.prop_background_image` | Background image | Label of the `background-image` field |
-| `style.prop_background_size` | Background size | Label of the `background-size` field |
-| `style.prop_background_position` | Background position | Label of the `background-position` field |
-| `style.prop_background_repeat` | Background repeat | Label of the `background-repeat` field |
-| `style.prop_color` | Color | Label of the `color` field |
-| `style.prop_font_size` | Font size | Label of the `font-size` field |
-| `style.prop_text_align` | Text align | Label of the `text-align` field |
-| `style.prop_text_shadow` | Text shadow | Label of the `text-shadow` field |
-| `style.prop_font_family` | Font family | Label of the `font-family` field |
-| `style.prop_font_weight` | Font weight | Label of the `font-weight` field |
-| `style.prop_font_style` | Font style | Label of the `font-style` field |
-| `style.prop_line_height` | Line height | Label of the `line-height` field |
-| `style.prop_letter_spacing` | Letter spacing | Label of the `letter-spacing` field |
-| `style.prop_text_transform` | Text transform | Label of the `text-transform` field |
-| `style.prop_text_decoration` | Text decoration | Label of the `text-decoration` field |
-| `style.prop_display` | Display | Label of the `display` field |
-| `style.prop_opacity` | Opacity | Label of the `opacity` field |
-| `style.prop_overflow` | Overflow | Label of the `overflow` field |
-| `style.prop_visibility` | Visibility | Label of the `visibility` field |
-| `style.prop_position` | Position | Label of the `position` field |
-| `style.prop_top` | Top | Label of the `top` field |
-| `style.prop_right` | Right | Label of the `right` field |
-| `style.prop_bottom` | Bottom | Label of the `bottom` field |
-| `style.prop_left` | Left | Label of the `left` field |
-| `style.prop_z_index` | Z-index | Label of the `z-index` field |
+| `inline_style.section_title` | Style | Heading of the inline-style plugin's section of the panel, and the button that opens it in the dialog when `settings_panel` is `popover` or `inline` |
+| `inline_style.dialog_title` | Style: {kind} | Title of that dialog. `{kind}` is what the panel's title calls the node |
+| `inline_style.section_size` | Size | The accordion's section header |
+| `inline_style.section_spacing` | Spacing | The accordion's section header |
+| `inline_style.section_border` | Border | The accordion's section header |
+| `inline_style.section_background` | Background | The accordion's section header |
+| `inline_style.section_text` | Text | The accordion's section header |
+| `inline_style.section_typography` | Typography | The accordion's section header |
+| `inline_style.section_display` | Display | The accordion's section header |
+| `inline_style.section_flex` | Flex | The accordion's section header |
+| `inline_style.section_position` | Position | The accordion's section header |
+| `inline_style.section_custom` | Custom css | The accordion's section header |
+| `inline_style.all_sizes` | Applies to every size | Note over a section's inline fields in a breakpoint view: the style attribute is not responsive |
+| `inline_style.overridden` | The class {class} takes priority over this value | Note under an inline field whose property a Bootstrap utility on the node also sets. `{class}` is that class |
+| `inline_style.invalid` | Not a value this property takes | Tooltip of an inline field holding a value the browser refused |
+| `inline_style.catalog` | Bootstrap classes | Heading of a section's Bootstrap class chips |
+| `inline_style.shadow_x` | X | A part of the shadow builder |
+| `inline_style.shadow_y` | Y | A part of the shadow builder |
+| `inline_style.shadow_blur` | Blur | A part of the shadow builder |
+| `inline_style.shadow_spread` | Spread | A part of the shadow builder |
+| `inline_style.shadow_color` | Color | A part of the shadow builder |
+| `inline_style.shadow_inset` | Inset | The shadow builder's inset checkbox |
+| `inline_style.shadow_text_mode` | Edit as text | Link under the shadow builder that edits the value as text |
+| `inline_style.prop_width` | Width | Label of the `width` field |
+| `inline_style.prop_height` | Height | Label of the `height` field |
+| `inline_style.prop_min_width` | Min width | Label of the `min-width` field |
+| `inline_style.prop_min_height` | Min height | Label of the `min-height` field |
+| `inline_style.prop_max_width` | Max width | Label of the `max-width` field |
+| `inline_style.prop_max_height` | Max height | Label of the `max-height` field |
+| `inline_style.prop_margin_top` | Margin top | Label of the `margin-top` field |
+| `inline_style.prop_margin_right` | Margin right | Label of the `margin-right` field |
+| `inline_style.prop_margin_bottom` | Margin bottom | Label of the `margin-bottom` field |
+| `inline_style.prop_margin_left` | Margin left | Label of the `margin-left` field |
+| `inline_style.prop_padding_top` | Padding top | Label of the `padding-top` field |
+| `inline_style.prop_padding_right` | Padding right | Label of the `padding-right` field |
+| `inline_style.prop_padding_bottom` | Padding bottom | Label of the `padding-bottom` field |
+| `inline_style.prop_padding_left` | Padding left | Label of the `padding-left` field |
+| `inline_style.prop_border_width` | Border width | Label of the `border-width` field |
+| `inline_style.prop_border_style` | Border style | Label of the `border-style` field |
+| `inline_style.prop_border_color` | Border color | Label of the `border-color` field |
+| `inline_style.prop_border_radius` | Border radius | Label of the `border-radius` field |
+| `inline_style.prop_box_shadow` | Shadow | Label of the `box-shadow` field |
+| `inline_style.prop_background_color` | Background color | Label of the `background-color` field |
+| `inline_style.prop_background_image` | Background image | Label of the `background-image` field |
+| `inline_style.prop_background_size` | Background size | Label of the `background-size` field |
+| `inline_style.prop_background_position` | Background position | Label of the `background-position` field |
+| `inline_style.prop_background_repeat` | Background repeat | Label of the `background-repeat` field |
+| `inline_style.prop_color` | Color | Label of the `color` field |
+| `inline_style.prop_font_size` | Font size | Label of the `font-size` field |
+| `inline_style.prop_text_align` | Text align | Label of the `text-align` field |
+| `inline_style.prop_text_shadow` | Text shadow | Label of the `text-shadow` field |
+| `inline_style.prop_font_family` | Font family | Label of the `font-family` field |
+| `inline_style.prop_font_weight` | Font weight | Label of the `font-weight` field |
+| `inline_style.prop_font_style` | Font style | Label of the `font-style` field |
+| `inline_style.prop_line_height` | Line height | Label of the `line-height` field |
+| `inline_style.prop_letter_spacing` | Letter spacing | Label of the `letter-spacing` field |
+| `inline_style.prop_text_transform` | Text transform | Label of the `text-transform` field |
+| `inline_style.prop_text_decoration` | Text decoration | Label of the `text-decoration` field |
+| `inline_style.prop_display` | Display | Label of the `display` field |
+| `inline_style.prop_opacity` | Opacity | Label of the `opacity` field |
+| `inline_style.prop_overflow` | Overflow | Label of the `overflow` field |
+| `inline_style.prop_visibility` | Visibility | Label of the `visibility` field |
+| `inline_style.prop_position` | Position | Label of the `position` field |
+| `inline_style.prop_top` | Top | Label of the `top` field |
+| `inline_style.prop_right` | Right | Label of the `right` field |
+| `inline_style.prop_bottom` | Bottom | Label of the `bottom` field |
+| `inline_style.prop_left` | Left | Label of the `left` field |
+| `inline_style.prop_z_index` | Z-index | Label of the `z-index` field |
 
 
 badge.*

package/docs/plugins.md

@@ -241,7 +241,7 @@ so `ge.detailsOf(node)` finds what is in it.
 
 A field made with `ge.utilityField` in a section follows the view and the
 classes field as the Responsive section's do, wherever the section is at the
-time. The style plugin's accordion is a section, and what the spacing,
+time. The inline-style plugin's accordion is a section, and what the spacing,
 textalign, display, flex, sticky and float fields are in: its families are
 `panel: false`, and it makes their fields itself.
 
@@ -497,14 +497,14 @@ tool does not belong. A tool writes with `ge.setUtility(node, family, value,
 `onRefresh(scope)` runs whenever the preview is redrawn — on `init`, on a view
 change, after a write, after the user types in a classes field — with the node
 whose utilities changed, or the canvas. It is for what a plugin marks the canvas
-with beyond inline styles: the style plugin's display keeps hidden nodes on the
+with beyond inline styles: the inline-style plugin's display keeps hidden nodes on the
 canvas and fades them there, and takes the drawer of a flex node out of the
 flow. Whatever it adds, `onDeinit` takes away.
 
 ### A panel of your own
 
 A field per family is the right panel for most plugins and the wrong one for
-some: spacing, part of the style plugin, has fourteen families, and fourteen
+some: spacing, part of the inline-style plugin, has fourteen families, and fourteen
 fields. Such a plugin marks
 its families `panel: false` and returns its own element from
 `panel(node, kind)` — or null where it does not apply — and the editor puts it
@@ -532,7 +532,7 @@ with a warning.
 
 Plugin options live in the `utilities` setting, under the plugin's name:
 `utilities: { gutters: { scale: [...] } }`. The editor passes the
-setting through as it is; each plugin fills in its own defaults. The style
-plugin's are the `style` setting, since most of them are about its inline
+setting through as it is; each plugin fills in its own defaults. The
+inline-style plugin's are the `inline_style` setting, since most of them are about its inline
 css.
 

package/example/index.html

@@ -49,10 +49,10 @@
             <a href="utilities.html">Responsive utilities</a>.
         </p>
         <p class="text-body-secondary">
-            New in 7.3: the style plugin, inline css by section with
+            New in 7.3: the inline-style plugin, inline css by section with
             Bootstrap's classes as chips, which also carries display,
             spacing, text alignment and float. See
-            <a href="style.html">Style</a>. In 8.0: flex, sticky and
+            <a href="inline-style.html">Inline style</a>. In 8.0: flex, sticky and
             Bootstrap 5.3's colors.
         </p>
 
@@ -138,12 +138,12 @@
                 <span class="text-body-secondary">Bootstrap's utility classes edited per breakpoint: display, flex, column order, alignment, gutters, spacing, text alignment and float</span>
             </a>
 
-            <a class="list-group-item list-group-item-action" href="style.html">
+            <a class="list-group-item list-group-item-action" href="inline-style.html">
                 <div class="d-flex justify-content-between">
-                    <strong>Style</strong>
-                    <code class="text-body-secondary">style.html</code>
+                    <strong>Inline style</strong>
+                    <code class="text-body-secondary">inline-style.html</code>
                 </div>
-                <span class="text-body-secondary">The style plugin: inline css for rows, columns, containers and elements, by section, with Bootstrap's classes for each as chips</span>
+                <span class="text-body-secondary">The inline-style plugin: inline css for rows, columns, containers and elements, by section, with Bootstrap's classes for each as chips</span>
             </a>
 
             <a class="list-group-item list-group-item-action" href="locale.html">

package/example/{style.html → inline-style.html}

@@ -14,12 +14,12 @@
     <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
 
     <!-- The editor, the elements and tabs plugins so there is one of each
-         kind of node, and the style plugin. -->
+         kind of node, and the inline-style plugin. -->
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
     <script src="../dist/grideditor.min.js"></script>
     <script src="../dist/plugins/grideditor.elements.min.js"></script>
     <script src="../dist/plugins/grideditor.tabs.min.js"></script>
-    <script src="../dist/plugins/grideditor.style.min.js"></script>
+    <script src="../dist/plugins/grideditor.inline-style.min.js"></script>
 
     <script>
         document.addEventListener('DOMContentLoaded', function() {
@@ -40,7 +40,7 @@
                     // Every section, unless the host says otherwise: this
                     // leaves out position and keeps the border section to
                     // three fields with no chips
-                    style: narrow.checked ? {
+                    inline_style: narrow.checked ? {
                         sections: {
                             position: false,
                             border: { properties: ['border-width', 'border-style', 'border-color'], catalog: false },
@@ -66,7 +66,7 @@
         });
     </script>
 
-    <title>Grid Editor style example</title>
+    <title>Grid Editor inline style example</title>
 </head>
 <body>
     <!-- Back to the demo index -->
@@ -78,7 +78,7 @@
 
         <div class="row my-3">
             <div class="col-lg-8">
-                <h1 class="h4">Style</h1>
+                <h1 class="h4">Inline style</h1>
                 <p class="form-text">
                     The gear of a row, a column, a container, a tab, an element
                     or a section has a <strong>Style</strong> accordion: size,

package/example/utilities.html

@@ -14,8 +14,8 @@
     <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
 
     <!-- The editor, and the utility plugins. Each is a file of its own, and
-         loading it is what puts its fields in the settings panels. The style
-         plugin carries display, flex, spacing, text alignment, sticky and
+         loading it is what puts its fields in the settings panels. The
+         inline-style plugin carries display, flex, spacing, text alignment, sticky and
          float, and edits them in its Style accordion - a row's justify and
          align among them, in Flex; order, a column's align-self and gutters
          are the grid's, and stay in the Responsive section. -->
@@ -26,7 +26,7 @@
     <script src="../dist/plugins/grideditor.gutters.min.js"></script>
     <!-- Float works on elements, so the elements plugin comes first -->
     <script src="../dist/plugins/grideditor.elements.min.js"></script>
-    <script src="../dist/plugins/grideditor.style.min.js"></script>
+    <script src="../dist/plugins/grideditor.inline-style.min.js"></script>
 
     <script>
         document.addEventListener('DOMContentLoaded', function() {

package/package.json

@@ -33,7 +33,7 @@
     "comment": "A scoped package publishes restricted unless it is told otherwise.",
     "access": "public"
   },
-  "version": "8.0.0-beta.3",
+  "version": "8.0.0",
   "main": "dist/grideditor.js",
   "module": "dist/grideditor.esm.js",
   "types": "dist/grideditor.d.ts",

package/src/js/grideditor.js

@@ -3206,6 +3206,7 @@ function build(instance, baseElem, optionsOrMethod) {
 
         function createDetails(container, cssClasses) {
             var detailsDiv = dom.element('div', { 'class': 'ge-details' });
+            detailsDiv.appendChild(sectionTitle(t('panel.section_general')));
             var general = detailsDiv.appendChild(dom.element('div', { 'class': 'ge-details-general' }));
             var field = function(label) {
                 var holder = dom.element('label', { 'class': 'ge-field' });
@@ -3272,6 +3273,11 @@ function build(instance, baseElem, optionsOrMethod) {
             return detailsDiv;
         }
 
+        /** The heading of one of a panel's sections. */
+        function sectionTitle(text) {
+            return dom.element('h6', { 'class': 'ge-section-title' }, text);
+        }
+
         /**
          * What plugins add to a node's panel, between its general fields and
          * the Responsive section: each plugin's panelSection(node, kind), in
@@ -3294,6 +3300,7 @@ function build(instance, baseElem, optionsOrMethod) {
                     var holder = dom.element('div', { 'class': 'ge-panel-section', 'data-ge-plugin': name });
 
                     if (mode === 'offcanvas' || mode === 'modal') {
+                        holder.appendChild(sectionTitle(t(section.labelKey)));
                         holder.appendChild(section.body);
                     } else {
                         var label = t(section.labelKey);
@@ -5302,6 +5309,7 @@ GridEditor.locales = {
         'panel.done': 'Done',
         'panel.id': 'Id',
         'panel.classes': 'Classes',
+        'panel.section_general': 'Id and classes',
         'panel.kind_row': 'Row',
         'panel.kind_column': 'Column',
         'panel.kind_element': 'Element',

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

@@ -1,5 +1,5 @@
 /**
- * The style plugin's accordion for one node: a section per group of
+ * The inline-style plugin's accordion for one node: a section per group of
  * properties, each with the merged utilities' per breakpoint fields, the
  * inline fields and the catalog - as far as each applies to the node.
  *
@@ -46,7 +46,7 @@ function partContent(ge, part, node, kind) {
 
     if (fields.length < 2) { return fields[0] || null; }
 
-    var box = dom.element('div', { 'class': 'ge-style-part-fields' });
+    var box = dom.element('div', { 'class': 'ge-inline-style-part-fields' });
     fields.forEach(function(field) { box.appendChild(field); });
 
     return box;
@@ -59,7 +59,7 @@ function partContent(ge, part, node, kind) {
  */
 export function createAccordion(ge, node, kind, context) {
     var inline = takesInlineStyle(node, kind);
-    var accordion = dom.element('div', { 'class': 'accordion ge-style' });
+    var accordion = dom.element('div', { 'class': 'accordion ge-inline-style' });
     var fields = [];
     var catalogs = [];
     var notes = [];
@@ -68,7 +68,7 @@ export function createAccordion(ge, node, kind, context) {
     var changed = function() { render(); };
 
     function item(key, labelKey) {
-        var entry = accordion.appendChild(dom.element('div', { 'class': 'accordion-item', 'data-ge-style-section': key }));
+        var entry = accordion.appendChild(dom.element('div', { 'class': 'accordion-item', 'data-ge-inline-style-section': key }));
         var header = entry.appendChild(dom.element('h2', { 'class': 'accordion-header' }));
         var button = header.appendChild(dom.element('button', {
             type: 'button',
@@ -114,13 +114,13 @@ export function createAccordion(ge, node, kind, context) {
         if (!parts.length && !properties.length && !catalog) { return; }
 
         var body = item(key, section.labelKey).body;
-        parts.forEach(function(part) { body.appendChild(dom.addClass(part, 'ge-style-part')); });
+        parts.forEach(function(part) { body.appendChild(dom.addClass(part, 'ge-inline-style-part')); });
 
         if (properties.length) {
-            var note = body.appendChild(dom.element('small', { 'class': 'ge-style-note ge-style-all-sizes' }, ge.t('style.all_sizes')));
+            var note = body.appendChild(dom.element('small', { 'class': 'ge-inline-style-note ge-inline-style-all-sizes' }, ge.t('inline_style.all_sizes')));
             notes.push(note);
 
-            var grid = body.appendChild(dom.element('div', { 'class': 'ge-style-fields' }));
+            var grid = body.appendChild(dom.element('div', { 'class': 'ge-inline-style-fields' }));
             properties.forEach(function(property) {
                 var field = createStyleField(ge, node, property, changed);
                 fields.push(field);
@@ -137,7 +137,7 @@ export function createAccordion(ge, node, kind, context) {
     // Last, since it shows what the fields made above do not
     if (customItem) {
         custom = createCustom(ge, node, fields.map(function(field) {
-            return field.getAttribute('data-ge-style-property');
+            return field.getAttribute('data-ge-inline-style-property');
         }), changed);
         customItem.body.appendChild(custom.element);
         accordion.appendChild(customItem.entry);
@@ -148,7 +148,7 @@ export function createAccordion(ge, node, kind, context) {
     /** Open this section and no other; null closes them all. */
     function open(key) {
         dom.all(accordion, '.accordion-item').forEach(function(entry) {
-            toggle(entry, entry.getAttribute('data-ge-style-section') === key);
+            toggle(entry, entry.getAttribute('data-ge-inline-style-section') === key);
         });
     }
 

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

@@ -1,5 +1,5 @@
 /**
- * The style plugin's catalog: Bootstrap's classes for what a section
+ * The inline-style plugin's catalog: Bootstrap's classes for what a section
  * styles, as chips that put a class on the node or take it off.
  *
  * A chip never touches the node itself. It writes the panel's classes
@@ -41,16 +41,16 @@ export function createCatalog(ge, node, kind, groups) {
     var offered = groups.filter(function(group) { return offeredOn(group, kind); });
     if (!offered.length) { return null; }
 
-    var box = dom.element('div', { 'class': 'ge-style-catalog' });
-    box.appendChild(dom.element('span', { 'class': 'ge-style-label' }, ge.t('style.catalog')));
+    var box = dom.element('div', { 'class': 'ge-inline-style-catalog' });
+    box.appendChild(dom.element('span', { 'class': 'ge-inline-style-label' }, ge.t('inline_style.catalog')));
 
     offered.forEach(function(group) {
-        var row = box.appendChild(dom.element('div', { 'class': 'ge-style-chips' }));
+        var row = box.appendChild(dom.element('div', { 'class': 'ge-inline-style-chips' }));
 
         group.classes.forEach(function(name) {
             var chip = row.appendChild(dom.element('button', {
                 type: 'button',
-                'class': 'btn btn-sm btn-outline-secondary ge-style-chip',
+                'class': 'btn btn-sm btn-outline-secondary ge-inline-style-chip',
                 'data-ge-class': name,
                 'aria-pressed': 'false',
             }, name));
@@ -68,7 +68,7 @@ export function createCatalog(ge, node, kind, groups) {
 export function renderCatalog(box, node) {
     var classes = classesOf(node);
 
-    dom.all(box, '.ge-style-chip').forEach(function(chip) {
+    dom.all(box, '.ge-inline-style-chip').forEach(function(chip) {
         var on = classes.indexOf(chip.getAttribute('data-ge-class')) !== -1;
         dom.toggleClass(chip, 'active', on);
         chip.setAttribute('aria-pressed', on ? 'true' : 'false');

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

@@ -1,5 +1,5 @@
 /**
- * The style plugin's free css: a textarea with every declaration of the
+ * The inline-style plugin's free css: a textarea with every declaration of the
  * node's own style that no field on show stands for - whatever the host
  * wrote that the sections have no field for, and what a section the host
  * turned off or narrowed would have shown.
@@ -36,12 +36,12 @@ export function createCustom(ge, node, properties, changed) {
         longhands(property).forEach(function(longhand) { covered[longhand] = true; });
     });
 
-    var box = dom.element('div', { 'class': 'ge-style-custom' });
+    var box = dom.element('div', { 'class': 'ge-inline-style-custom' });
     var textarea = box.appendChild(dom.element('textarea', {
-        'class': 'form-control form-control-sm font-monospace ge-style-custom-css',
+        'class': 'form-control form-control-sm font-monospace ge-inline-style-custom-css',
         rows: '4',
         spellcheck: 'false',
-        'aria-label': ge.t('style.section_custom'),
+        'aria-label': ge.t('inline_style.section_custom'),
     }));
 
     /** The declarations of the host's style no field stands for. */

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