@vaadin/crud 23.1.0-alpha2 → 23.1.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/crud",
-  "version": "23.1.0-alpha2",
+  "version": "23.1.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -35,22 +35,22 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "23.1.0-alpha2",
-    "@vaadin/component-base": "23.1.0-alpha2",
-    "@vaadin/confirm-dialog": "23.1.0-alpha2",
-    "@vaadin/dialog": "23.1.0-alpha2",
-    "@vaadin/form-layout": "23.1.0-alpha2",
-    "@vaadin/grid": "23.1.0-alpha2",
-    "@vaadin/text-field": "23.1.0-alpha2",
+    "@vaadin/button": "23.1.0-beta1",
+    "@vaadin/component-base": "23.1.0-beta1",
+    "@vaadin/confirm-dialog": "23.1.0-beta1",
+    "@vaadin/dialog": "23.1.0-beta1",
+    "@vaadin/form-layout": "23.1.0-beta1",
+    "@vaadin/grid": "23.1.0-beta1",
+    "@vaadin/text-field": "23.1.0-beta1",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha2",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha2"
+    "@vaadin/vaadin-lumo-styles": "23.1.0-beta1",
+    "@vaadin/vaadin-material-styles": "23.1.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
-    "sinon": "^9.2.1"
+    "sinon": "^13.0.2"
   },
-  "gitHead": "6842dcb8b163d4512fae8d3d12a6559077a4aee6"
+  "gitHead": "8be43cf83102a6b9ccf309687446e590ce0164e8"
 }

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

@@ -19,12 +19,6 @@ import { MediaQueryController } from '@vaadin/component-base/src/media-query-con
 import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-const HOST_PROPS = {
-  save: [{ attr: 'disabled', prop: '__isDirty', parseProp: '__isSaveBtnDisabled' }, { prop: 'i18n.saveItem' }],
-  cancel: [{ prop: 'i18n.cancel' }],
-  delete: [{ attr: 'hidden', prop: '__isNew', parseProp: (prop) => prop }, { prop: 'i18n.deleteItem' }]
-};
-
 /**
  * `<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.
  *
@@ -324,7 +318,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       _grid: {
         type: HTMLElement,
-        observer: '__onGridChange'
+        observer: '__gridChanged',
       },
 
       /**
@@ -333,7 +327,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       _form: {
         type: HTMLElement,
-        observer: '__onFormChange'
+        observer: '__formChanged',
       },
 
       /**
@@ -342,7 +336,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       _saveButton: {
         type: HTMLElement,
-        observer: '__onSaveButtonChange'
+        observer: '__saveButtonChanged',
       },
 
       /**
@@ -351,7 +345,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       _deleteButton: {
         type: HTMLElement,
-        observer: '__onDeleteButtonChange'
+        observer: '__deleteButtonChanged',
       },
 
       /**
@@ -360,7 +354,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       _cancelButton: {
         type: HTMLElement,
-        observer: '__onCancelButtonChange'
+        observer: '__cancelButtonChanged',
       },
 
       /**
@@ -368,7 +362,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        * @private
        */
       _headerNode: {
-        type: HTMLElement
+        type: HTMLElement,
       },
 
       /**
@@ -378,7 +372,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
       items: {
         type: Array,
         notify: true,
-        observer: '__onItemsChange'
+        observer: '__itemsChanged',
       },
 
       /**
@@ -387,8 +381,8 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       editedItem: {
         type: Object,
-        observer: '__onItemChange',
-        notify: true
+        observer: '__editedItemChanged',
+        notify: true,
       },
 
       /**
@@ -405,7 +399,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
         type: String,
         value: '',
         reflectToAttribute: true,
-        observer: '__onEditorPositionChange'
+        observer: '__editorPositionChanged',
       },
 
       /**
@@ -416,7 +410,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       editOnClick: {
         type: Boolean,
-        value: false
+        value: false,
       },
 
       /**
@@ -434,7 +428,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       dataProvider: {
         type: Function,
-        observer: '__onDataProviderChange'
+        observer: '__dataProviderChanged',
       },
 
       /**
@@ -482,7 +476,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
         type: Boolean,
         reflectToAttribute: true,
         notify: true,
-        observer: '__onOpenedChanged'
+        observer: '__editorOpenedChanged',
       },
 
       /**
@@ -492,7 +486,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
       size: {
         type: Number,
         readOnly: true,
-        notify: true
+        notify: true,
       },
 
       /**
@@ -503,7 +497,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
       noToolbar: {
         type: Boolean,
         value: false,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -561,20 +555,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 */
@@ -592,7 +586,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       _fullscreen: {
         type: Boolean,
-        observer: '__fullscreenChanged'
+        observer: '__fullscreenChanged',
       },
 
       /**
@@ -600,24 +594,20 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        * @protected
        */
       _fullscreenMediaQuery: {
-        value: '(max-width: 600px), (max-height: 600px)'
-      }
+        value: '(max-width: 600px), (max-height: 600px)',
+      },
     };
   }
 
   static get observers() {
     return [
-      '__headerNodeChanged(_headerNode, __isNew, i18n.newItem, i18n.editItem)',
-      '__formChanged(_form, _theme, include, exclude)',
-      '__onI18Change(i18n, _grid)',
-      '__onEditOnClickChange(editOnClick, _grid)',
-      '__hostPropsChanged(' +
-        HOST_PROPS.save.map(({ prop }) => prop).join(',') +
-        ',' +
-        HOST_PROPS.cancel.map(({ prop }) => prop).join(',') +
-        ',' +
-        HOST_PROPS.delete.map(({ prop }) => prop).join(',') +
-        ')'
+      '__headerPropsChanged(_headerNode, __isNew, i18n.newItem, i18n.editItem)',
+      '__formPropsChanged(_form, _theme, include, exclude)',
+      '__i18nChanged(i18n, _grid)',
+      '__editOnClickChanged(editOnClick, _grid)',
+      '__saveButtonPropsChanged(_saveButton, i18n.saveItem, __isDirty)',
+      '__cancelButtonPropsChanged(_cancelButton, i18n.cancel)',
+      '__deleteButtonPropsChanged(_deleteButton, i18n.deleteItem, __isNew)',
     ];
   }
 
@@ -632,6 +622,11 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     }
   }
 
+  /** @private */
+  static _isValidEditorPosition(editorPosition) {
+    return ['bottom', 'aside'].includes(editorPosition);
+  }
+
   /** @protected */
   get slots() {
     // NOTE: order in which the toolbar buttons are listed matters.
@@ -660,7 +655,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
         button.id = 'delete';
         button.setAttribute('theme', 'tertiary error');
         return button;
-      }
+      },
     };
   }
 
@@ -674,51 +669,53 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
   /** @protected */
   ready() {
     super.ready();
-    this.__editListener = (e) => this.__onCrudGridEdit(e);
-    this.__changeListener = (e) => this.__onFormChanges(e);
-    this.__saveBound = this.__save.bind(this);
-    this.__cancelBound = this.__cancel.bind(this);
-    this.__deleteBound = this.__delete.bind(this);
-    this.__gridSizeListener = this.__onGridSizeChanges.bind(this);
-    this.__boundEditOnClickListener = this.__editOnClickListener.bind(this);
+    this.__save = this.__save.bind(this);
+    this.__cancel = this.__cancel.bind(this);
+    this.__delete = this.__delete.bind(this);
+    this.__onFormChange = this.__onFormChange.bind(this);
+    this.__onGridEdit = this.__onGridEdit.bind(this);
+    this.__onGridSizeChanged = this.__onGridSizeChanged.bind(this);
+    this.__onGridActiveItemChanged = this.__onGridActiveItemChanged.bind(this);
     this._grid = this.$.grid;
-    this.$.dialog.$.overlay.addEventListener('vaadin-overlay-outside-click', this.__cancelBound);
-    this.$.dialog.$.overlay.addEventListener('vaadin-overlay-escape-press', this.__cancelBound);
-    // Initialize the default buttons
-    this.__propagateHostAttributes();
+    this.$.dialog.$.overlay.addEventListener('vaadin-overlay-outside-click', this.__cancel);
+    this.$.dialog.$.overlay.addEventListener('vaadin-overlay-escape-press', this.__cancel);
 
     this.addController(
       new MediaQueryController(this._fullscreenMediaQuery, (matches) => {
         this._fullscreen = matches;
-      })
+      }),
     );
   }
 
-  /** @private */
+  /**
+   * @param {boolean} isDirty
+   * @private
+   */
   __isSaveBtnDisabled(isDirty) {
     // Used instead of isDirty property binding in order to enable overriding of the behavior
     // by overriding the method (i.e. from Flow component)
     return !isDirty;
   }
 
-  /** @private */
-  __headerNodeChanged(headerNode, isNew, newItem, editItem) {
+  /**
+   * @param {HTMLElement | undefined} headerNode
+   * @param {boolean} isNew
+   * @param {string} i18nNewItem
+   * @param {string} i18nEditItem
+   * @private
+   */
+  __headerPropsChanged(headerNode, isNew, i18nNewItem, i18nEditItem) {
     if (headerNode) {
-      headerNode.textContent = isNew ? newItem : editItem;
+      headerNode.textContent = isNew ? i18nNewItem : i18nEditItem;
     }
   }
 
-  /** @private */
-  __formChanged(form, theme, include, exclude) {
-    if (form) {
-      form.include = include;
-      form.exclude = exclude;
-      form.setAttribute('theme', theme);
-    }
-  }
-
-  /** @private */
-  __onI18Change(i18n, grid) {
+  /**
+   * @param {CrudI18n} i18n
+   * @param {CrudGrid | Grid} grid
+   * @private
+   */
+  __i18nChanged(i18n, grid) {
     if (!grid) {
       return;
     }
@@ -731,7 +728,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
   }
 
   /** @private */
-  __onEditorPositionChange(editorPosition) {
+  __editorPositionChanged(editorPosition) {
     if (Crud._isValidEditorPosition(editorPosition)) {
       return;
     }
@@ -739,16 +736,11 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
   }
 
   /** @private */
-  static _isValidEditorPosition(editorPosition) {
-    return ['bottom', 'aside'].indexOf(editorPosition) != -1;
-  }
-
-  /** @private */
-  __onOpenedChanged(opened, old) {
-    if (!opened && old) {
+  __editorOpenedChanged(opened, oldOpened) {
+    if (!opened && oldOpened) {
       this.__closeEditor();
     } else {
-      this.__onFormChange(this._form);
+      this.__formChanged(this._form);
     }
 
     if (opened) {
@@ -849,169 +841,205 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
           return;
         }
 
-        if (slotAttributeValue == 'grid') {
+        if (slotAttributeValue === 'grid') {
           // Force to remove listener on previous grid first
-          this.__onEditOnClickChange(false, this._grid);
+          this.__editOnClickChanged(false, this._grid);
           this._grid = node;
-          this.__onEditOnClickChange(this.editOnClick, this._grid);
-        } else if (slotAttributeValue == 'form') {
+          this.__editOnClickChanged(this.editOnClick, this._grid);
+        } 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;
         }
       });
+
+    if (this.editorOpened) {
+      this.__ensureChildren();
+    }
   }
 
   /** @private */
-  __onCrudGridEdit(e) {
-    e.stopPropagation();
-    this.__confirmBeforeChangingEditedItem(e.detail.item);
+  __onGridEdit(event) {
+    event.stopPropagation();
+    this.__confirmBeforeChangingEditedItem(event.detail.item);
   }
 
   /** @private */
-  __onFormChanges() {
+  __onFormChange() {
     this.__isDirty = true;
   }
 
   /** @private */
-  __onGridSizeChanges() {
+  __onGridSizeChanged() {
     this._setSize(this._grid.size);
   }
 
-  /** @private */
-  __onGridChange(grid, old) {
-    if (old) {
-      old.removeEventListener('edit', this.__editListener);
-      old.removeEventListener('size-changed', this.__gridSizeListener);
+  /**
+   * @param {CrudGrid | Grid} grid
+   * @param {CrudGrid | Grid | undefined} oldGrid
+   * @private
+   */
+  __gridChanged(grid, oldGrid) {
+    if (oldGrid) {
+      oldGrid.removeEventListener('edit', this.__onGridEdit);
+      oldGrid.removeEventListener('size-changed', this.__onGridSizeChanged);
     }
     if (this.dataProvider) {
-      this.__onDataProviderChange(this.dataProvider);
+      this.__dataProviderChanged(this.dataProvider);
     }
     if (this.items) {
-      this.__onItemsChange(this.items);
+      this.__itemsChanged(this.items);
     }
     if (this.editedItem) {
-      this.__onItemChange(this.editedItem);
+      this.__editedItemChanged(this.editedItem);
     }
-    grid.addEventListener('edit', this.__editListener);
-    grid.addEventListener('size-changed', this.__gridSizeListener);
-    this.__onGridSizeChanges();
+    grid.addEventListener('edit', this.__onGridEdit);
+    grid.addEventListener('size-changed', this.__onGridSizeChanged);
+    this.__onGridSizeChanged();
   }
 
-  /** @private */
-  __onFormChange(form, old) {
-    if (old && old.parentElement) {
-      old.parentElement && old.parentElement.removeChild(old);
-      old.removeEventListener('change', this.__changeListener);
-      old.removeEventListener('input', this.__changeListener);
+  /**
+   * @param {HTMLElement | undefined | null} form
+   * @param {HTMLElement | undefined | null} oldForm
+   * @private
+   */
+  __formChanged(form, oldForm) {
+    if (oldForm && oldForm.parentElement) {
+      oldForm.parentElement.removeChild(oldForm);
+      oldForm.removeEventListener('change', this.__onFormChange);
+      oldForm.removeEventListener('input', this.__onFormChange);
     }
     if (!form) {
       return;
     }
     if (this.items) {
-      this.__onItemsChange(this.items);
+      this.__itemsChanged(this.items);
     }
     if (this.editedItem) {
-      this.__onItemChange(this.editedItem);
+      this.__editedItemChanged(this.editedItem);
     }
-    form.addEventListener('change', this.__changeListener);
-    form.addEventListener('input', this.__changeListener);
+    form.addEventListener('change', this.__onFormChange);
+    form.addEventListener('input', this.__onFormChange);
   }
 
-  /** @private */
-  __onSaveButtonChange(save, old) {
-    this.__setupSlottedButton(save, old, this.__saveBound);
-  }
-
-  /** @private */
-  __onDeleteButtonChange(deleteButton, old) {
-    this.__setupSlottedButton(deleteButton, old, this.__deleteBound);
+  /**
+   * @param {HTMLElement | undefined} form
+   * @param {string} theme
+   * @param {string | string[] | undefined} include
+   * @param {string | RegExp} exclude
+   * @private
+   */
+  __formPropsChanged(form, theme, include, exclude) {
+    if (form) {
+      form.include = include;
+      form.exclude = exclude;
+      form.setAttribute('theme', theme);
+    }
   }
 
-  /** @private */
-  __onCancelButtonChange(cancel, old) {
-    this.__setupSlottedButton(cancel, old, this.__cancelBound);
+  /**
+   * @param {HTMLElement} saveButton
+   * @param {HTMLElement | undefined} oldSaveButton
+   * @private
+   */
+  __saveButtonChanged(saveButton, oldSaveButton) {
+    this.__setupSlottedButton(saveButton, oldSaveButton, this.__save);
   }
 
-  /** @private */
-  __setupSlottedButton(slottedButton, currentButton, clickListener) {
-    if (currentButton && currentButton.parentElement) {
-      currentButton.parentElement.removeChild(currentButton);
+  /**
+   * @param {HTMLElement | undefined} saveButton
+   * @param {string} i18nLabel
+   * @param {boolean} isDirty
+   * @private
+   */
+  __saveButtonPropsChanged(saveButton, i18nLabel, isDirty) {
+    if (saveButton) {
+      saveButton.toggleAttribute('disabled', this.__isSaveBtnDisabled(isDirty));
+      saveButton.textContent = i18nLabel;
     }
-
-    slottedButton.addEventListener('click', clickListener);
   }
 
-  /** @private */
-  __hostPropsChanged() {
-    this.__propagateHostAttributes();
+  /**
+   * @param {HTMLElement} deleteButton
+   * @param {HTMLElement | undefined} oldDeleteButton
+   * @private
+   */
+  __deleteButtonChanged(deleteButton, oldDeleteButton) {
+    this.__setupSlottedButton(deleteButton, oldDeleteButton, this.__delete);
   }
 
-  /** @private */
-  __propagateHostAttributes() {
-    this.__propagateHostAttributesToButton(this._saveButton, HOST_PROPS.save);
-    this.__propagateHostAttributesToButton(this._cancelButton, HOST_PROPS.cancel);
-    this.__propagateHostAttributesToButton(this._deleteButton, HOST_PROPS.delete);
+  /**
+   * @param {HTMLElement | undefined} deleteButton
+   * @param {string} i18nLabel
+   * @param {boolean} isNew
+   * @private
+   */
+  __deleteButtonPropsChanged(deleteButton, i18nLabel, isNew) {
+    if (deleteButton) {
+      deleteButton.textContent = i18nLabel;
+      deleteButton.toggleAttribute('hidden', isNew);
+    }
   }
 
-  /** @private */
-  __propagateHostAttributesToButton(button, props) {
-    // Ensure the slotted button element is present in the DOM.
-    // This is needed because the observer runs before `ready`.
-    if (button) {
-      props.forEach(({ attr, prop, parseProp }) => {
-        if (prop.indexOf('i18n') >= 0) {
-          button.textContent = this.i18n[prop.split('.')[1]];
-        } else {
-          if (typeof parseProp === 'string') {
-            this._setOrToggleAttribute(attr, this[parseProp](this[prop]), button);
-            return;
-          }
+  /**
+   * @param {HTMLElement} cancelButton
+   * @param {HTMLElement | undefined} oldCancelButton
+   * @private
+   */
+  __cancelButtonChanged(cancelButton, oldCancelButton) {
+    this.__setupSlottedButton(cancelButton, oldCancelButton, this.__cancel);
+  }
 
-          this._setOrToggleAttribute(attr, parseProp(this[prop]), button);
-        }
-      });
+  /**
+   * @param {HTMLElement | undefined} saveButton
+   * @param {string} i18nLabel
+   * @private
+   */
+  __cancelButtonPropsChanged(cancelButton, i18nLabel) {
+    if (cancelButton) {
+      cancelButton.textContent = i18nLabel;
     }
   }
 
-  /** @private */
-  _setOrToggleAttribute(name, value, node) {
-    if (!name || !node) {
-      return;
+  /**
+   * @param {HTMLElement} newButton
+   * @param {HTMLElement | undefined | null} oldButton
+   * @param {Function} clickListener
+   * @private
+   */
+  __setupSlottedButton(newButton, oldButton, clickListener) {
+    if (oldButton && oldButton.parentElement) {
+      oldButton.parentElement.removeChild(oldButton);
     }
 
-    if (value) {
-      node.setAttribute(name, typeof value === 'boolean' ? '' : value);
-    } else {
-      node.removeAttribute(name);
-    }
+    newButton.addEventListener('click', clickListener);
   }
 
   /** @private */
-  __onDataProviderChange(dataProvider) {
+  __dataProviderChanged(dataProvider) {
     if (this._grid) {
       this._grid.dataProvider = this.__createDataProviderProxy(dataProvider);
     }
   }
 
   /** @private */
-  __onEditOnClickChange(rowToEditChange, _grid) {
+  __editOnClickChanged(editOnClick, _grid) {
     if (!_grid) {
       return;
     }
 
-    if (rowToEditChange) {
-      _grid.addEventListener('active-item-changed', this.__boundEditOnClickListener);
+    if (editOnClick) {
+      _grid.addEventListener('active-item-changed', this.__onGridActiveItemChanged);
     } else {
-      _grid.removeEventListener('active-item-changed', this.__boundEditOnClickListener);
+      _grid.removeEventListener('active-item-changed', this.__onGridActiveItemChanged);
     }
   }
 
   /** @private */
-  __editOnClickListener(event) {
+  __onGridActiveItemChanged(event) {
     const item = event.detail.value;
     if (this.editorOpened && this.__isDirty) {
       this.__confirmBeforeChangingEditedItem(item);
@@ -1075,7 +1103,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
   }
 
   /** @private */
-  __onItemsChange(items) {
+  __itemsChanged(items) {
     if (this.items && this.items[0]) {
       this.__model = items[0];
     }
@@ -1086,7 +1114,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
   }
 
   /** @private */
-  __onItemChange(item) {
+  __editedItemChanged(item) {
     if (!this._form) {
       return;
     }
@@ -1097,14 +1125,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);
@@ -1149,7 +1179,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);
     }
   }
@@ -1168,7 +1198,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: item }, cancelable: true }),
     );
     if (evt) {
       this.editedItem = item || {};
@@ -1186,7 +1216,9 @@ 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 }));
     if (evt) {

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' },
 );