@vaadin/crud 23.1.0-alpha3 → 23.1.0-beta2

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@vaadin/crud",
-  "version": "23.1.0-alpha3",
+  "version": "23.1.0-beta2",
   "publishConfig": {
     "access": "public"
   },
   "description": "vaadin-crud",
   "license": "https://raw.githubusercontent.com/vaadin/web-components/master/packages/crud/LICENSE",
+  "cvdlName": "vaadin-crud",
   "repository": {
     "type": "git",
     "url": "https://github.com/vaadin/web-components.git",
@@ -35,22 +36,22 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "23.1.0-alpha3",
-    "@vaadin/component-base": "23.1.0-alpha3",
-    "@vaadin/confirm-dialog": "23.1.0-alpha3",
-    "@vaadin/dialog": "23.1.0-alpha3",
-    "@vaadin/form-layout": "23.1.0-alpha3",
-    "@vaadin/grid": "23.1.0-alpha3",
-    "@vaadin/text-field": "23.1.0-alpha3",
+    "@vaadin/button": "23.1.0-beta2",
+    "@vaadin/component-base": "23.1.0-beta2",
+    "@vaadin/confirm-dialog": "23.1.0-beta2",
+    "@vaadin/dialog": "23.1.0-beta2",
+    "@vaadin/form-layout": "23.1.0-beta2",
+    "@vaadin/grid": "23.1.0-beta2",
+    "@vaadin/text-field": "23.1.0-beta2",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha3"
+    "@vaadin/vaadin-lumo-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-material-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
+  "gitHead": "f11f9245a0b5e6bf912725a501c27c24b74e7c8d"
 }

package/src/vaadin-crud-dialog.js

@@ -15,25 +15,16 @@ registerStyles(
       min-width: 20em;
     }
 
-    [part='content'] {
-      display: flex;
-      flex-direction: column;
-      padding: 0;
-    }
-
-    [part='scroller'] {
-      display: flex;
-      flex-direction: column;
-      overflow: auto;
-      flex: auto;
-    }
-
     [part='footer'] {
-      display: flex;
-      flex: none;
+      justify-content: flex-start;
       flex-direction: row-reverse;
     }
 
+    /* Make buttons clickable */
+    [part='footer'] ::slotted(:not([disabled])) {
+      pointer-events: all;
+    }
+
     :host([fullscreen]) {
       top: 0;
       left: 0;
@@ -52,24 +43,15 @@ registerStyles(
       flex: 1;
     }
   `,
-  { moduleId: 'vaadin-crud-dialog-overlay-styles' }
+  { moduleId: 'vaadin-crud-dialog-overlay-styles' },
 );
 
 let memoizedTemplate;
 
-const editorTemplate = html`
-  <div part="scroller" role="group" aria-labelledby="header">
-    <div part="header" id="header">
-      <slot name="header"></slot>
-    </div>
-    <slot name="form"></slot>
-  </div>
-
-  <div part="footer" role="toolbar">
-    <slot name="save-button"></slot>
-    <slot name="cancel-button"></slot>
-    <slot name="delete-button"></slot>
-  </div>
+const footerTemplate = html`
+  <slot name="save-button"></slot>
+  <slot name="cancel-button"></slot>
+  <slot name="delete-button"></slot>
 `;
 
 class CrudDialogOverlay extends DialogOverlay {
@@ -80,13 +62,40 @@ class CrudDialogOverlay extends DialogOverlay {
   static get template() {
     if (!memoizedTemplate) {
       memoizedTemplate = super.template.cloneNode(true);
+
+      // Replace two header slots with a single one
+      const headerPart = memoizedTemplate.content.querySelector('[part="header"]');
+      headerPart.innerHTML = '';
+      const headerSlot = document.createElement('slot');
+      headerSlot.setAttribute('name', 'header');
+      headerPart.appendChild(headerSlot);
+
+      // Replace default slot with "form" named slot
       const contentPart = memoizedTemplate.content.querySelector('[part="content"]');
       const defaultSlot = contentPart.querySelector('slot:not([name])');
-      contentPart.removeChild(defaultSlot);
-      contentPart.appendChild(editorTemplate.content.cloneNode(true));
+      defaultSlot.setAttribute('name', 'form');
+
+      // Replace footer slot with button named slots
+      const footerPart = memoizedTemplate.content.querySelector('[part="footer"]');
+      footerPart.setAttribute('role', 'toolbar');
+      const footerSlot = footerPart.querySelector('slot');
+      footerPart.removeChild(footerSlot);
+      footerPart.appendChild(footerTemplate.content.cloneNode(true));
     }
     return memoizedTemplate;
   }
+
+  /**
+   * @protected
+   * @override
+   */
+  _headerFooterRendererChange(headerRenderer, footerRenderer, opened) {
+    super._headerFooterRendererChange(headerRenderer, footerRenderer, opened);
+
+    // CRUD has header and footer but does not use renderers
+    this.setAttribute('has-header', '');
+    this.setAttribute('has-footer', '');
+  }
 }
 
 customElements.define('vaadin-crud-dialog-overlay', CrudDialogOverlay);

package/src/vaadin-crud-edit-column.js

@@ -36,7 +36,7 @@ class CrudEditColumn extends GridColumn {
        */
       width: {
         type: String,
-        value: '4em'
+        value: '4em',
       },
 
       /**
@@ -45,11 +45,11 @@ class CrudEditColumn extends GridColumn {
        */
       flexGrow: {
         type: Number,
-        value: 0
+        value: 0,
       },
 
       /** The arial-label for the edit button */
-      ariaLabel: String
+      ariaLabel: String,
     };
   }
 

package/src/vaadin-crud-edit.js

@@ -44,7 +44,7 @@ class CrudEdit extends Button {
   __onClick(e) {
     const tr = e.target.parentElement.assignedSlot.parentElement.parentElement;
     tr.dispatchEvent(
-      new CustomEvent('edit', { detail: { item: tr._item, index: tr.index }, bubbles: true, composed: true })
+      new CustomEvent('edit', { detail: { item: tr._item, index: tr.index }, bubbles: true, composed: true }),
     );
   }
 

package/src/vaadin-crud-form.js

@@ -25,7 +25,7 @@ class CrudForm extends IncludedMixin(FormLayout) {
        * The item being edited.
        * @type {unknown}
        */
-      item: Object
+      item: Object,
     };
   }
 

package/src/vaadin-crud-grid.js

@@ -44,7 +44,7 @@ class CrudGrid extends IncludedMixin(Grid) {
       noHead: Boolean,
 
       /** @private */
-      __hideEditColumn: Boolean
+      __hideEditColumn: Boolean,
     };
   }
 
@@ -54,7 +54,7 @@ class CrudGrid extends IncludedMixin(Grid) {
 
   /** @private */
   __onItemsChange(items) {
-    if ((!this.dataProvider || this.dataProvider == this._arrayDataProvider) && !this.include && items && items[0]) {
+    if ((!this.dataProvider || this.dataProvider === this._arrayDataProvider) && !this.include && items && items[0]) {
       this._configure(items[0]);
     }
   }
@@ -70,7 +70,9 @@ class CrudGrid extends IncludedMixin(Grid) {
   __toggleEditColumn() {
     const el = this.querySelector('vaadin-crud-edit-column');
     if (this.hideEditColumn) {
-      el && this.removeChild(el);
+      if (el) {
+        this.removeChild(el);
+      }
     } else if (!el) {
       this.appendChild(document.createElement('vaadin-crud-edit-column'));
     }
@@ -79,7 +81,7 @@ class CrudGrid extends IncludedMixin(Grid) {
   /** @private */
   __dataProviderWrapper(params, callback) {
     this.__dataProvider(params, (items, size) => {
-      if (this.innerHTML == '' && !this.include && items[0]) {
+      if (this.innerHTML === '' && !this.include && items[0]) {
         this._configure(items[0]);
       }
       callback(items, size);
@@ -91,9 +93,9 @@ class CrudGrid extends IncludedMixin(Grid) {
    * @private
    */
   _dataProviderChanged(dataProvider, oldDataProvider) {
-    if (this._arrayDataProvider == dataProvider) {
+    if (this._arrayDataProvider === dataProvider) {
       super._dataProviderChanged(dataProvider, oldDataProvider);
-    } else if (this.__dataProviderWrapper != dataProvider) {
+    } else if (this.__dataProviderWrapper !== dataProvider) {
       this.innerHTML = '';
       this.__dataProvider = dataProvider;
       this.dataProvider = this.__dataProviderWrapper;
@@ -195,8 +197,10 @@ class CrudGrid extends IncludedMixin(Grid) {
           textField.setAttribute('slot', 'filter');
           textField.setAttribute('focus-target', true);
           textField.style.width = '100%';
-          this.noSort && (textField.placeholder = label);
-          textField.addEventListener('value-changed', function (event) {
+          if (this.noSort) {
+            textField.placeholder = label;
+          }
+          textField.addEventListener('value-changed', (event) => {
             filter.value = event.detail.value;
           });
 

package/src/vaadin-crud-include-mixin.js

@@ -22,7 +22,7 @@ export const IncludedMixin = (superClass) =>
          */
         exclude: {
           value: '^_',
-          observer: '__onExcludeChange'
+          observer: '__onExcludeChange',
         },
 
         /**
@@ -33,21 +33,21 @@ export const IncludedMixin = (superClass) =>
          * @type {string | !Array<string> | undefined}
          */
         include: {
-          observer: '__onIncludeChange'
-        }
+          observer: '__onIncludeChange',
+        },
       };
     }
 
     /** @private */
     __onExcludeChange(exclude) {
-      if (typeof exclude == 'string') {
+      if (typeof exclude === 'string') {
         this.exclude = exclude ? RegExp(exclude.replace(/, */g, '|'), 'i') : undefined;
       }
     }
 
     /** @private */
     __onIncludeChange(include) {
-      if (typeof include == 'string') {
+      if (typeof include === 'string') {
         this.include = include ? include.split(/, */) : undefined;
       } else if (!this._fields && Array.isArray(include)) {
         const item = {};

package/src/vaadin-crud.d.ts

@@ -383,13 +383,13 @@ declare class Crud<Item> extends ControllerMixin(ElementMixin(ThemableMixin(HTML
   addEventListener<K extends keyof CrudEventMap<Item>>(
     type: K,
     listener: (this: Crud<Item>, ev: CrudEventMap<Item>[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof CrudEventMap<Item>>(
     type: K,
     listener: (this: Crud<Item>, ev: CrudEventMap<Item>[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 }
 

package/src/vaadin-crud.js

@@ -310,6 +310,10 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     return 'vaadin-crud';
   }
 
+  static get cvdlName() {
+    return 'vaadin-crud';
+  }
+
   static get properties() {
     return {
       /**
@@ -318,7 +322,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       _grid: {
         type: HTMLElement,
-        observer: '__gridChanged'
+        observer: '__gridChanged',
       },
 
       /**
@@ -327,7 +331,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       _form: {
         type: HTMLElement,
-        observer: '__formChanged'
+        observer: '__formChanged',
       },
 
       /**
@@ -336,7 +340,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       _saveButton: {
         type: HTMLElement,
-        observer: '__saveButtonChanged'
+        observer: '__saveButtonChanged',
       },
 
       /**
@@ -345,7 +349,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       _deleteButton: {
         type: HTMLElement,
-        observer: '__deleteButtonChanged'
+        observer: '__deleteButtonChanged',
       },
 
       /**
@@ -354,7 +358,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       _cancelButton: {
         type: HTMLElement,
-        observer: '__cancelButtonChanged'
+        observer: '__cancelButtonChanged',
       },
 
       /**
@@ -362,7 +366,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        * @private
        */
       _headerNode: {
-        type: HTMLElement
+        type: HTMLElement,
       },
 
       /**
@@ -372,7 +376,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
       items: {
         type: Array,
         notify: true,
-        observer: '__itemsChanged'
+        observer: '__itemsChanged',
       },
 
       /**
@@ -382,7 +386,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
       editedItem: {
         type: Object,
         observer: '__editedItemChanged',
-        notify: true
+        notify: true,
       },
 
       /**
@@ -399,7 +403,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
         type: String,
         value: '',
         reflectToAttribute: true,
-        observer: '__editorPositionChanged'
+        observer: '__editorPositionChanged',
       },
 
       /**
@@ -410,7 +414,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       editOnClick: {
         type: Boolean,
-        value: false
+        value: false,
       },
 
       /**
@@ -428,7 +432,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       dataProvider: {
         type: Function,
-        observer: '__dataProviderChanged'
+        observer: '__dataProviderChanged',
       },
 
       /**
@@ -476,7 +480,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
         type: Boolean,
         reflectToAttribute: true,
         notify: true,
-        observer: '__editorOpenedChanged'
+        observer: '__editorOpenedChanged',
       },
 
       /**
@@ -486,7 +490,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
       size: {
         type: Number,
         readOnly: true,
-        notify: true
+        notify: true,
       },
 
       /**
@@ -497,7 +501,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
       noToolbar: {
         type: Boolean,
         value: false,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -541,7 +545,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       i18n: {
         type: Object,
-        value: function () {
+        value() {
           return {
             newItem: 'New item',
             editItem: 'Edit item',
@@ -555,20 +559,20 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
                 content: 'Are you sure you want to delete this item? This action cannot be undone.',
                 button: {
                   confirm: 'Delete',
-                  dismiss: 'Cancel'
-                }
+                  dismiss: 'Cancel',
+                },
               },
               cancel: {
                 title: 'Discard changes',
                 content: 'There are unsaved changes to this item.',
                 button: {
                   confirm: 'Discard',
-                  dismiss: 'Cancel'
-                }
-              }
-            }
+                  dismiss: 'Cancel',
+                },
+              },
+            },
           };
-        }
+        },
       },
 
       /** @private */
@@ -586,7 +590,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       _fullscreen: {
         type: Boolean,
-        observer: '__fullscreenChanged'
+        observer: '__fullscreenChanged',
       },
 
       /**
@@ -594,8 +598,8 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        * @protected
        */
       _fullscreenMediaQuery: {
-        value: '(max-width: 600px), (max-height: 600px)'
-      }
+        value: '(max-width: 600px), (max-height: 600px)',
+      },
     };
   }
 
@@ -607,7 +611,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
       '__editOnClickChanged(editOnClick, _grid)',
       '__saveButtonPropsChanged(_saveButton, i18n.saveItem, __isDirty)',
       '__cancelButtonPropsChanged(_cancelButton, i18n.cancel)',
-      '__deleteButtonPropsChanged(_deleteButton, i18n.deleteItem, __isNew)'
+      '__deleteButtonPropsChanged(_deleteButton, i18n.deleteItem, __isNew)',
     ];
   }
 
@@ -624,7 +628,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
 
   /** @private */
   static _isValidEditorPosition(editorPosition) {
-    return ['bottom', 'aside'].indexOf(editorPosition) != -1;
+    return ['bottom', 'aside'].includes(editorPosition);
   }
 
   /** @protected */
@@ -655,7 +659,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
         button.id = 'delete';
         button.setAttribute('theme', 'tertiary error');
         return button;
-      }
+      },
     };
   }
 
@@ -683,7 +687,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     this.addController(
       new MediaQueryController(this._fullscreenMediaQuery, (matches) => {
         this._fullscreen = matches;
-      })
+      }),
     );
   }
 
@@ -841,17 +845,17 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
           return;
         }
 
-        if (slotAttributeValue == 'grid') {
+        if (slotAttributeValue === 'grid') {
           // Force to remove listener on previous grid first
           this.__editOnClickChanged(false, this._grid);
           this._grid = node;
           this.__editOnClickChanged(this.editOnClick, this._grid);
-        } else if (slotAttributeValue == 'form') {
+        } else if (slotAttributeValue === 'form') {
           this._form = node;
         } else if (slotAttributeValue.indexOf('button') >= 0) {
           const [button] = slotAttributeValue.split('-');
           this[`_${button}Button`] = node;
-        } else if (slotAttributeValue == 'header') {
+        } else if (slotAttributeValue === 'header') {
           this._headerNode = node;
         }
       });
@@ -1061,7 +1065,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     ) {
       this.$.confirmCancel.opened = true;
       const listenOnce = (event) => {
-        event.preventDefault(); // prevent editor to get closed
+        event.preventDefault(); // Prevent editor to get closed
         if (item || keepOpened) {
           this.__edit(item);
           this.__clearItemAndKeepEditorOpened(item, keepOpened);
@@ -1125,14 +1129,16 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
         } else {
           console.warn(
             '<vaadin-crud> Unable to autoconfigure form because the data structure is unknown. ' +
-              'Either specify `include` or ensure at least one item is available beforehand.'
+              'Either specify `include` or ensure at least one item is available beforehand.',
           );
         }
       }
       this._form.item = item;
       this._fields.forEach((e) => {
         const path = e.path || e.getAttribute('path');
-        path && (e.value = this.get(path, item));
+        if (path) {
+          e.value = this.get(path, item);
+        }
       });
 
       this.__isNew = this.__isNew || (this.items && this.items.indexOf(item) < 0);
@@ -1177,7 +1183,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
   /** @private */
   __new(event) {
     // This allows listening to parent element and fire only when clicking on default or custom new-button.
-    if (event.composedPath().filter((e) => e.nodeType == 1 && e.hasAttribute('new-button'))[0]) {
+    if (event.composedPath().filter((e) => e.nodeType === 1 && e.hasAttribute('new-button'))[0]) {
       this.__confirmBeforeChangingEditedItem(null, true);
     }
   }
@@ -1196,7 +1202,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     this.__isDirty = false;
     this.__isNew = !item;
     const evt = this.dispatchEvent(
-      new CustomEvent(this.__isNew ? 'new' : 'edit', { detail: { item: item }, cancelable: true })
+      new CustomEvent(this.__isNew ? 'new' : 'edit', { detail: { item }, cancelable: true }),
     );
     if (evt) {
       this.editedItem = item || {};
@@ -1214,9 +1220,11 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     const item = { ...this.editedItem };
     this._fields.forEach((e) => {
       const path = e.path || e.getAttribute('path');
-      path && this.__set(path, e.value, item);
+      if (path) {
+        this.__set(path, e.value, item);
+      }
     });
-    const evt = this.dispatchEvent(new CustomEvent('save', { detail: { item: item }, cancelable: true }));
+    const evt = this.dispatchEvent(new CustomEvent('save', { detail: { item }, cancelable: true }));
     if (evt) {
       if (this.__isNew && !this.dataProvider) {
         if (!this.items) {

package/theme/lumo/vaadin-crud-styles.js

@@ -30,7 +30,7 @@ registerStyles(
       left: calc((var(--lumo-size-m) - var(--lumo-size-s)) / -2);
     }
   `,
-  { moduleId: 'lumo-crud-grid-edit' }
+  { moduleId: 'lumo-crud-grid-edit' },
 );
 
 /**
@@ -42,20 +42,6 @@ const editorStyles = css`
     margin-top: 0 !important;
   }
 
-  [part='scroller'] {
-    padding: var(--lumo-space-l);
-  }
-
-  [part='footer'] {
-    background-color: var(--lumo-contrast-5pct);
-    padding: var(--lumo-space-s);
-  }
-
-  [part='footer'] ::slotted(*) {
-    margin-left: var(--lumo-space-s);
-    margin-right: var(--lumo-space-s);
-  }
-
   :host(:not([dir='rtl'])) ::slotted([slot='delete-button']) {
     margin-right: auto;
   }
@@ -74,6 +60,10 @@ registerStyles(
         font-family: var(--lumo-font-family);
       }
 
+      [part='scroller'] {
+        padding: var(--lumo-space-l);
+      }
+
       [part='toolbar'] {
         padding: var(--lumo-space-s) var(--lumo-space-m);
         background-color: var(--lumo-contrast-5pct);
@@ -93,6 +83,16 @@ registerStyles(
         border: 0;
       }
 
+      [part='footer'] {
+        background-color: var(--lumo-contrast-5pct);
+        padding: var(--lumo-space-s);
+      }
+
+      [part='footer'] ::slotted(*) {
+        margin-left: var(--lumo-space-s);
+        margin-right: var(--lumo-space-s);
+      }
+
       [part='editor'] {
         background: var(--lumo-base-color);
         box-sizing: border-box;
@@ -121,11 +121,24 @@ registerStyles(
       vaadin-grid-cell-content {
         text-overflow: ellipsis;
       }
-    `
+    `,
   ],
-  { moduleId: 'lumo-crud' }
+  { moduleId: 'lumo-crud' },
 );
 
-registerStyles('vaadin-crud-dialog-overlay', editorStyles, {
-  moduleId: 'lumo-crud-dialog-overlay'
-});
+registerStyles(
+  'vaadin-crud-dialog-overlay',
+  [
+    editorStyles,
+    css`
+      [part='header'] ::slotted(h3) {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        margin-inline-start: var(--lumo-space-s);
+      }
+    `,
+  ],
+  {
+    moduleId: 'lumo-crud-dialog-overlay',
+  },
+);

package/theme/material/vaadin-crud-styles.js

@@ -37,7 +37,7 @@ registerStyles(
       left: 0;
     }
   `,
-  { moduleId: 'material-crud-grid-edit' }
+  { moduleId: 'material-crud-grid-edit' },
 );
 
 /**
@@ -45,19 +45,8 @@ registerStyles(
  * They are applied to both `vaadin-crud` and `vaadin-crud-dialog-overlay` components.
  */
 const editorStyles = css`
-  [part='scroller'] {
-    padding: 16px;
-    background: var(--material-background-color);
-  }
-
   [part='footer'] {
     background-color: var(--material-secondary-background-color);
-    padding: 8px 4px;
-  }
-
-  [part='footer'] ::slotted(*) {
-    margin-left: 4px;
-    margin-right: 4px;
   }
 
   :host(:not([dir='rtl'])) ::slotted([slot='delete-button']) {
@@ -78,11 +67,25 @@ registerStyles(
         font-family: var(--material-font-family);
       }
 
+      [part='scroller'] {
+        padding: 16px;
+        background: var(--material-background-color);
+      }
+
       [part='toolbar'] {
         padding: 8px;
         background-color: var(--material-secondary-background-color);
       }
 
+      [part='footer'] {
+        padding: 8px 4px;
+      }
+
+      [part='footer'] ::slotted(*) {
+        margin-left: 4px;
+        margin-right: 4px;
+      }
+
       :host(:not([editor-position=''])) [part='editor']:not([hidden]) {
         box-shadow: var(--material-shadow-elevation-12dp);
       }
@@ -101,9 +104,9 @@ registerStyles(
         margin: 0;
         padding: 0;
       }
-    `
+    `,
   ],
-  { moduleId: 'material-crud' }
+  { moduleId: 'material-crud' },
 );
 
 registerStyles(
@@ -125,7 +128,16 @@ registerStyles(
       :host([closing]) {
         animation: 0.25s material-overlay-dummy-animation;
       }
-    `
+
+      [part='header'] ::slotted(h3) {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+      }
+
+      [part='content'] {
+        padding: 0 16px 16px;
+      }
+    `,
   ],
-  { moduleId: 'material-crud-dialog-overlay' }
+  { moduleId: 'material-crud-dialog-overlay' },
 );