@vaadin/crud 23.3.3 → 24.0.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/crud",
-  "version": "23.3.3",
+  "version": "24.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -37,16 +37,16 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "~23.3.3",
-    "@vaadin/component-base": "~23.3.3",
-    "@vaadin/confirm-dialog": "~23.3.3",
-    "@vaadin/dialog": "~23.3.3",
-    "@vaadin/form-layout": "~23.3.3",
-    "@vaadin/grid": "~23.3.3",
-    "@vaadin/text-field": "~23.3.3",
-    "@vaadin/vaadin-lumo-styles": "~23.3.3",
-    "@vaadin/vaadin-material-styles": "~23.3.3",
-    "@vaadin/vaadin-themable-mixin": "~23.3.3"
+    "@vaadin/button": "24.0.0-alpha10",
+    "@vaadin/component-base": "24.0.0-alpha10",
+    "@vaadin/confirm-dialog": "24.0.0-alpha10",
+    "@vaadin/dialog": "24.0.0-alpha10",
+    "@vaadin/form-layout": "24.0.0-alpha10",
+    "@vaadin/grid": "24.0.0-alpha10",
+    "@vaadin/text-field": "24.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha10"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -58,5 +58,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "1529ed623e053d28a3c1c66af55ebe402743ddd0"
+  "gitHead": "2e04534d8b47bcd216f89b5f849bafef1a73b174"
 }

package/src/vaadin-crud-dialog.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-crud-edit-column.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -41,7 +41,7 @@ class CrudEditColumn extends GridColumn {
        */
       width: {
         type: String,
-        value: '4em',
+        value: '4rem',
       },
 
       /**

package/src/vaadin-crud-edit.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-crud-edit.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-crud-form.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-crud-form.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -10,6 +10,7 @@
  */
 import '@vaadin/text-field/src/vaadin-text-field.js';
 import { FormLayout } from '@vaadin/form-layout/src/vaadin-form-layout.js';
+import { capitalize } from './vaadin-crud-helpers.js';
 import { IncludedMixin } from './vaadin-crud-include-mixin.js';
 
 /**
@@ -62,7 +63,7 @@ class CrudForm extends IncludedMixin(FormLayout) {
   /** @private */
   __createField(parent, path) {
     const field = document.createElement('vaadin-text-field');
-    field.label = this.__capitalize(path);
+    field.label = capitalize(path);
     field.path = path;
     field.required = true;
     parent.appendChild(field);
@@ -87,29 +88,6 @@ class CrudForm extends IncludedMixin(FormLayout) {
       this._fields = undefined;
     }
   }
-
-  /** @private */
-  __capitalize(path) {
-    return path
-      .toLowerCase()
-      .replace(/([^\w]+)/g, ' ')
-      .trim()
-      .replace(/^./, (c) => c.toUpperCase());
-  }
-
-  /** @private */
-  __set(path, val, obj) {
-    if (obj && path) {
-      path
-        .split('.')
-        .slice(0, -1)
-        .reduce((o, p) => {
-          o[p] = o[p] || {};
-          return o[p];
-        }, obj);
-      this.set(path, val, obj);
-    }
-  }
 }
 
 customElements.define(CrudForm.is, CrudForm);

package/src/vaadin-crud-grid.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-crud-grid.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -14,6 +14,7 @@ import '@vaadin/grid/src/vaadin-grid-sorter.js';
 import '@vaadin/grid/src/vaadin-grid-filter.js';
 import './vaadin-crud-edit-column.js';
 import { Grid } from '@vaadin/grid/src/vaadin-grid.js';
+import { capitalize, getProperty } from './vaadin-crud-helpers.js';
 import { IncludedMixin } from './vaadin-crud-include-mixin.js';
 
 /**
@@ -73,13 +74,15 @@ class CrudGrid extends IncludedMixin(Grid) {
 
   /** @private */
   __toggleEditColumn() {
-    const el = this.querySelector('vaadin-crud-edit-column');
+    let editColumn = this.querySelector('vaadin-crud-edit-column');
     if (this.hideEditColumn) {
-      if (el) {
-        this.removeChild(el);
+      if (editColumn) {
+        this.removeChild(editColumn);
       }
-    } else if (!el) {
-      this.appendChild(document.createElement('vaadin-crud-edit-column'));
+    } else if (!editColumn) {
+      editColumn = document.createElement('vaadin-crud-edit-column');
+      editColumn.frozenToEnd = true;
+      this.appendChild(editColumn);
     }
   }
 
@@ -146,10 +149,10 @@ class CrudGrid extends IncludedMixin(Grid) {
   _generateHeader(path) {
     return path
       .substr(path.lastIndexOf('.') + 1)
-      .replace(/([A-Z])/g, '-$1')
+      .replace(/([A-Z])/gu, '-$1')
       .toLowerCase()
-      .replace(/-/g, ' ')
-      .replace(/^./, (match) => match.toUpperCase());
+      .replace(/-/gu, ' ')
+      .replace(/^./u, (match) => match.toUpperCase());
   }
 
   /** @private */
@@ -167,7 +170,7 @@ class CrudGrid extends IncludedMixin(Grid) {
       col = document.createElement('vaadin-grid-column');
       parent.appendChild(col);
       col.renderer = (root, _column, model) => {
-        root.textContent = path ? this.get(path, model.item) : model.item;
+        root.textContent = path ? getProperty(path, model.item) : model.item;
       };
     }
 
@@ -199,7 +202,6 @@ class CrudGrid extends IncludedMixin(Grid) {
 
           const textField = window.document.createElement('vaadin-text-field');
           textField.setAttribute('theme', 'small');
-          textField.setAttribute('slot', 'filter');
           textField.setAttribute('focus-target', true);
           textField.style.width = '100%';
           if (this.noSort) {
@@ -266,34 +268,11 @@ class CrudGrid extends IncludedMixin(Grid) {
   __createGroup(parent, header) {
     const grp = document.createElement('vaadin-grid-column-group');
     if (header) {
-      grp.header = this.__capitalize(header);
+      grp.header = capitalize(header);
     }
     parent.appendChild(grp);
     return grp;
   }
-
-  /** @private */
-  __capitalize(path) {
-    return path
-      .toLowerCase()
-      .replace(/([^\w]+)/g, ' ')
-      .trim()
-      .replace(/^./, (c) => c.toUpperCase());
-  }
-
-  /** @private */
-  __set(path, val, obj) {
-    if (obj && path) {
-      path
-        .split('.')
-        .slice(0, -1)
-        .reduce((o, p) => {
-          o[p] = o[p] || {};
-          return o[p];
-        }, obj);
-      this.set(path, val, obj);
-    }
-  }
 }
 
 customElements.define(CrudGrid.is, CrudGrid);

package/src/vaadin-crud-helpers.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+
+/**
+ * Convenience utility for capitalizing a string, with
+ * replacing non-alphanumeric characters with spaces.
+ */
+export function capitalize(path: string): string;
+
+/**
+ * Convenience method for reading a value from a path.
+ */
+export function getProperty(path: string, obj: Record<string, unknown>): unknown;
+
+/**
+ * Convenience utility for setting a value to a path.
+ *
+ * Note, if any part in the path is undefined, this
+ * function initializes it with an empty object.
+ */
+export function setProperty(path: string, value: unknown, obj: Record<string, unknown>): void;

package/src/vaadin-crud-helpers.js

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { get, set } from '@polymer/polymer/lib/utils/path.js';
+
+/**
+ * Convenience utility for capitalizing a string, with
+ * replacing non-alphanumeric characters with spaces.
+ *
+ * @param {string} path
+ * @return {string}
+ */
+export function capitalize(path) {
+  return path
+    .toLowerCase()
+    .replace(/([^\w]+)/gu, ' ')
+    .trim()
+    .replace(/^./u, (c) => c.toUpperCase());
+}
+
+/**
+ * Convenience utility for reading a value from a path.
+ *
+ * @param {string} path
+ * @param {Object} obj
+ * @return {*}
+ */
+export function getProperty(path, obj) {
+  return get(obj, path);
+}
+
+/**
+ * Convenience utility for setting a value to a path.
+ *
+ * Note, if any part in the path is undefined, this
+ * function initializes it with an empty object.
+ *
+ * @param {string} path
+ * @param {*} value
+ * @param {Object} obj
+ */
+export function setProperty(path, value, obj) {
+  if (obj && path) {
+    path
+      .split('.')
+      .slice(0, -1)
+      .reduce((o, p) => {
+        // Create an object
+        if (!o[p]) {
+          o[p] = {};
+        }
+        return o[p];
+      }, obj);
+
+    set(obj, path, value);
+  }
+}

package/src/vaadin-crud-include-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -8,6 +8,7 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
+import { setProperty } from './vaadin-crud-helpers.js';
 
 /**
  * @polymerMixin
@@ -46,17 +47,19 @@ export const IncludedMixin = (superClass) =>
     /** @private */
     __onExcludeChange(exclude) {
       if (typeof exclude === 'string') {
-        this.exclude = exclude ? RegExp(exclude.replace(/, */g, '|'), 'i') : undefined;
+        this.exclude = exclude ? RegExp(exclude.replace(/, */gu, '|'), 'iu') : undefined;
       }
     }
 
     /** @private */
     __onIncludeChange(include) {
       if (typeof include === 'string') {
-        this.include = include ? include.split(/, */) : undefined;
+        this.include = include ? include.split(/, */u) : undefined;
       } else if (!this._fields && Array.isArray(include)) {
         const item = {};
-        this.include.forEach((path) => this.__set(path, null, item));
+        this.include.forEach((path) => {
+          setProperty(path, null, item);
+        });
         this._configure(item);
       }
     }

package/src/vaadin-crud.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -176,7 +176,8 @@ export type CrudEventMap<T> = CrudCustomEventMap<T> & HTMLElementEventMap;
  * `save-button`  | To replace the "Save" button.
  * `cancel-button`| To replace the "Cancel" button.
  * `delete-button`| To replace the "Delete" button.
- * `toolbar`      | To replace the toolbar content. Add an element with the attribute `new-button` for the new item action.
+ * `toolbar`      | To provide the toolbar content (by default, it's empty).
+ * `new-button`   | To replace the "New item" button.
  *
  * #### Example:
  *
@@ -193,10 +194,8 @@ export type CrudEventMap<T> = CrudCustomEventMap<T> & HTMLElementEventMap;
  *     <vaadin-text-field label="Surname" path="surname"></vaadin-text-field>
  *   </vaadin-form-layout>
  *
- *   <div slot="toolbar">
- *     Total singers: [[size]]
- *     <button new-button>New singer</button>
- *   </div>
+ *   <div slot="toolbar">Total singers: 2</div>
+ *   <button slot="new-button">New singer</button>
  *
  *   <button slot="save-button">Save changes</button>
  *   <button slot="cancel-button">Discard changes</button>

package/src/vaadin-crud.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -20,8 +20,23 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
-import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { getProperty, setProperty } from './vaadin-crud-helpers.js';
+
+/**
+ * @private
+ * A to initialize slotted button.
+ */
+class ButtonSlotController extends SlotController {
+  constructor(host, type, theme) {
+    super(host, `${type}-button`, 'vaadin-button', {
+      initializer: (button) => {
+        button.setAttribute('theme', theme);
+      },
+    });
+  }
+}
 
 /**
  * `<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.
@@ -79,7 +94,8 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * `save-button`  | To replace the "Save" button.
  * `cancel-button`| To replace the "Cancel" button.
  * `delete-button`| To replace the "Delete" button.
- * `toolbar`      | To replace the toolbar content. Add an element with the attribute `new-button` for the new item action.
+ * `toolbar`      | To provide the toolbar content (by default, it's empty).
+ * `new-button`   | To replace the "New item" button.
  *
  * #### Example:
  *
@@ -96,10 +112,8 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *     <vaadin-text-field label="Surname" path="surname"></vaadin-text-field>
  *   </vaadin-form-layout>
  *
- *   <div slot="toolbar">
- *     Total singers: [[size]]
- *     <button new-button>New singer</button>
- *   </div>
+ *   <div slot="toolbar">Total singers: 2</div>
+ *   <button slot="new-button">New singer</button>
  *
  *   <button slot="save-button">Save changes</button>
  *   <button slot="cancel-button">Discard changes</button>
@@ -169,10 +183,9 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @extends HTMLElement
  * @mixes ControllerMixin
  * @mixes ElementMixin
- * @mixes SlotMixin
  * @mixes ThemableMixin
  */
-class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
+class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -258,23 +271,11 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
 
       <div id="container">
         <div id="main">
-          <slot name="grid">
-            <vaadin-crud-grid
-              theme$="[[_theme]]"
-              id="grid"
-              include="[[include]]"
-              exclude="[[exclude]]"
-              no-sort="[[noSort]]"
-              no-filter="[[noFilter]]"
-              no-head="[[noHead]]"
-              hide-edit-column="[[editOnClick]]"
-            ></vaadin-crud-grid>
-          </slot>
-
-          <div id="toolbar" part="toolbar" on-click="__new">
-            <slot name="toolbar">
-              <vaadin-button new-button="" id="new" theme="primary">[[i18n.newItem]]</vaadin-button>
-            </slot>
+          <slot name="grid"></slot>
+
+          <div id="toolbar" part="toolbar">
+            <slot name="toolbar"></slot>
+            <slot name="new-button"></slot>
           </div>
         </div>
 
@@ -308,7 +309,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
         theme$="[[_theme]]"
         id="confirmCancel"
         on-confirm="__confirmCancel"
-        cancel
+        cancel-button-visible
         confirm-text="[[i18n.confirm.cancel.button.confirm]]"
         cancel-text="[[i18n.confirm.cancel.button.dismiss]]"
         header="[[i18n.confirm.cancel.title]]"
@@ -320,7 +321,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
         theme$="[[_theme]]"
         id="confirmDelete"
         on-confirm="__confirmDelete"
-        cancel
+        cancel-button-visible
         confirm-text="[[i18n.confirm.delete.button.confirm]]"
         cancel-text="[[i18n.confirm.delete.button.dismiss]]"
         header="[[i18n.confirm.delete.title]]"
@@ -345,7 +346,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        * @private
        */
       _grid: {
-        type: HTMLElement,
+        type: Object,
         observer: '__gridChanged',
       },
 
@@ -354,7 +355,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        * @private
        */
       _form: {
-        type: HTMLElement,
+        type: Object,
         observer: '__formChanged',
       },
 
@@ -363,34 +364,39 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        * @private
        */
       _saveButton: {
-        type: HTMLElement,
-        observer: '__saveButtonChanged',
+        type: Object,
       },
 
       /**
-       * A reference to the save button which will be teleported to the dialog
+       * A reference to the delete button which will be teleported to the dialog
        * @private
        */
       _deleteButton: {
-        type: HTMLElement,
-        observer: '__deleteButtonChanged',
+        type: Object,
       },
 
       /**
-       * A reference to the save button which will be teleported to the dialog
+       * A reference to the cancel button which will be teleported to the dialog
        * @private
        */
       _cancelButton: {
-        type: HTMLElement,
-        observer: '__cancelButtonChanged',
+        type: Object,
       },
 
       /**
-       * A reference to the editor header element will be teleported to the dialog.
+       * A reference to the default editor header element created by the CRUD
        * @private
        */
-      _headerNode: {
-        type: HTMLElement,
+      _defaultHeader: {
+        type: Object,
+      },
+
+      /**
+       * A reference to the "New item" button
+       * @private
+       */
+      _newButton: {
+        type: Object,
       },
 
       /**
@@ -629,13 +635,15 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
 
   static get observers() {
     return [
-      '__headerPropsChanged(_headerNode, __isNew, i18n.newItem, i18n.editItem)',
+      '__headerPropsChanged(_defaultHeader, __isNew, i18n.newItem, i18n.editItem)',
       '__formPropsChanged(_form, _theme, include, exclude)',
+      '__gridPropsChanged(_grid, _theme, include, exclude, noFilter, noHead, noSort)',
       '__i18nChanged(i18n, _grid)',
       '__editOnClickChanged(editOnClick, _grid)',
       '__saveButtonPropsChanged(_saveButton, i18n.saveItem, __isDirty)',
       '__cancelButtonPropsChanged(_cancelButton, i18n.cancel)',
       '__deleteButtonPropsChanged(_deleteButton, i18n.deleteItem, __isNew)',
+      '__newButtonPropsChanged(_newButton, i18n.newItem)',
     ];
   }
 
@@ -644,59 +652,66 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     return ['bottom', 'aside'].includes(editorPosition);
   }
 
-  /** @protected */
-  get slots() {
-    // NOTE: order in which the toolbar buttons are listed matters.
-    return {
-      ...super.slots,
-      header: () => {
-        return document.createElement('h3');
-      },
-      form: () => {
-        return document.createElement('vaadin-crud-form');
-      },
-      'save-button': () => {
-        const button = document.createElement('vaadin-button');
-        button.id = 'save';
-        button.setAttribute('theme', 'primary');
-        return button;
-      },
-      'cancel-button': () => {
-        const button = document.createElement('vaadin-button');
-        button.id = 'cancel';
-        button.setAttribute('theme', 'tertiary');
-        return button;
-      },
-      'delete-button': () => {
-        const button = document.createElement('vaadin-button');
-        button.id = 'delete';
-        button.setAttribute('theme', 'tertiary error');
-        return button;
-      },
-    };
-  }
-
   constructor() {
     super();
+
+    this.__cancel = this.__cancel.bind(this);
+    this.__delete = this.__delete.bind(this);
+    this.__save = this.__save.bind(this);
+    this.__new = this.__new.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._observer = new FlattenedNodesObserver(this, (info) => {
       this.__onDomChange(info.addedNodes);
     });
   }
 
+  /** @protected */
+  get _headerNode() {
+    return this._headerController && this._headerController.node;
+  }
+
+  /**
+   * A reference to all fields inside the [`_form`](#/elements/vaadin-crud#property-_form) element
+   * @return {!Array<!HTMLElement>}
+   * @protected
+   */
+  get _fields() {
+    if (!this.__fields || !this.__fields.length) {
+      this.__fields = Array.from(this._form.querySelectorAll('*')).filter((e) => e.validate || e.checkValidity);
+    }
+    return this.__fields;
+  }
+
   /** @protected */
   ready() {
     super.ready();
-    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.__cancel);
     this.$.dialog.$.overlay.addEventListener('vaadin-overlay-escape-press', this.__cancel);
 
+    this._headerController = new SlotController(this, 'header', 'h3', {
+      initializer: (node) => {
+        this._defaultHeader = node;
+      },
+    });
+    this.addController(this._headerController);
+
+    this._gridController = new SlotController(this, 'grid', 'vaadin-crud-grid');
+    this.addController(this._gridController);
+
+    this.addController(new SlotController(this, 'form', 'vaadin-crud-form'));
+
+    this.addController(new ButtonSlotController(this, 'new', 'primary'));
+
+    // NOTE: order in which buttons are added should match the order of slots in template
+    this.addController(new ButtonSlotController(this, 'save', 'primary'));
+    this.addController(new ButtonSlotController(this, 'cancel', 'tertiary'));
+    this.addController(new ButtonSlotController(this, 'delete', 'tertiary error'));
+
     this.addController(
       new MediaQueryController(this._fullscreenMediaQuery, (matches) => {
         this._fullscreen = matches;
@@ -849,7 +864,8 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
   /** @private */
   __onDomChange(addedNodes) {
     // TODO: restore default button when a corresponding slotted button is removed.
-    // Consider creating a controller to reuse custom helper logic from FieldMixin.
+    // This would require us to detect where to insert a button after teleporting it,
+    // which happens after opening a dialog and closing it (default editor position).
     addedNodes
       .filter((node) => node.nodeType === Node.ELEMENT_NODE)
       .forEach((node) => {
@@ -867,9 +883,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
           this._form = node;
         } else if (slotAttributeValue.indexOf('button') >= 0) {
           const [button] = slotAttributeValue.split('-');
-          this[`_${button}Button`] = node;
-        } else if (slotAttributeValue === 'header') {
-          this._headerNode = node;
+          this.__setupSlottedButton(button, node);
         }
       });
 
@@ -963,12 +977,27 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
   }
 
   /**
-   * @param {HTMLElement} saveButton
-   * @param {HTMLElement | undefined} oldSaveButton
+   * @param {HTMLElement | undefined} form
+   * @param {string} theme
+   * @param {string | string[] | undefined} include
+   * @param {string | RegExp} exclude
    * @private
    */
-  __saveButtonChanged(saveButton, oldSaveButton) {
-    this.__setupSlottedButton(saveButton, oldSaveButton, this.__save);
+  // eslint-disable-next-line max-params
+  __gridPropsChanged(grid, theme, include, exclude, noFilter, noHead, noSort) {
+    if (grid && grid === this._gridController.defaultNode) {
+      grid.include = include;
+      grid.exclude = exclude;
+      grid.noFilter = noFilter;
+      grid.noHead = noHead;
+      grid.noSort = noSort;
+
+      if (theme) {
+        grid.setAttribute('theme', theme);
+      } else {
+        grid.removeAttribute('theme');
+      }
+    }
   }
 
   /**
@@ -984,15 +1013,6 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     }
   }
 
-  /**
-   * @param {HTMLElement} deleteButton
-   * @param {HTMLElement | undefined} oldDeleteButton
-   * @private
-   */
-  __deleteButtonChanged(deleteButton, oldDeleteButton) {
-    this.__setupSlottedButton(deleteButton, oldDeleteButton, this.__delete);
-  }
-
   /**
    * @param {HTMLElement | undefined} deleteButton
    * @param {string} i18nLabel
@@ -1006,15 +1026,6 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     }
   }
 
-  /**
-   * @param {HTMLElement} cancelButton
-   * @param {HTMLElement | undefined} oldCancelButton
-   * @private
-   */
-  __cancelButtonChanged(cancelButton, oldCancelButton) {
-    this.__setupSlottedButton(cancelButton, oldCancelButton, this.__cancel);
-  }
-
   /**
    * @param {HTMLElement | undefined} saveButton
    * @param {string} i18nLabel
@@ -1027,17 +1038,31 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
   }
 
   /**
+   * @param {HTMLElement | undefined} newButton
+   * @param {string} i18nNewItem
+   * @private
+   */
+  __newButtonPropsChanged(newButton, i18nNewItem) {
+    if (newButton) {
+      newButton.textContent = i18nNewItem;
+    }
+  }
+
+  /**
+   * @param {string} type
    * @param {HTMLElement} newButton
-   * @param {HTMLElement | undefined | null} oldButton
-   * @param {Function} clickListener
    * @private
    */
-  __setupSlottedButton(newButton, oldButton, clickListener) {
-    if (oldButton && oldButton.parentElement) {
-      oldButton.parentElement.removeChild(oldButton);
+  __setupSlottedButton(type, button) {
+    const property = `_${type}Button`;
+    const listener = `__${type}`;
+
+    if (this[property] && this[property] !== button) {
+      this[property].remove();
     }
 
-    newButton.addEventListener('click', clickListener);
+    button.addEventListener('click', this[listener]);
+    this[property] = button;
   }
 
   /** @private */
@@ -1048,15 +1073,17 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
   }
 
   /** @private */
-  __editOnClickChanged(editOnClick, _grid) {
-    if (!_grid) {
+  __editOnClickChanged(editOnClick, grid) {
+    if (!grid) {
       return;
     }
 
+    grid.hideEditColumn = editOnClick;
+
     if (editOnClick) {
-      _grid.addEventListener('active-item-changed', this.__onGridActiveItemChanged);
+      grid.addEventListener('active-item-changed', this.__onGridActiveItemChanged);
     } else {
-      _grid.removeEventListener('active-item-changed', this.__onGridActiveItemChanged);
+      grid.removeEventListener('active-item-changed', this.__onGridActiveItemChanged);
     }
   }
 
@@ -1157,7 +1184,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
       this._fields.forEach((e) => {
         const path = e.path || e.getAttribute('path');
         if (path) {
-          e.value = this.get(path, item);
+          e.value = getProperty(path, item);
         }
       });
 
@@ -1166,18 +1193,6 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     }
   }
 
-  /**
-   * A reference to all fields inside the [`_form`](#/elements/vaadin-crud#property-_form) element
-   * @return {!Array<!HTMLElement>}
-   * @protected
-   */
-  get _fields() {
-    if (!this.__fields || !this.__fields.length) {
-      this.__fields = Array.from(this._form.querySelectorAll('*')).filter((e) => e.validate || e.checkValidity);
-    }
-    return this.__fields;
-  }
-
   /** @private */
   __validate() {
     return this._fields.every((e) => (e.validate || e.checkValidity).call(e));
@@ -1185,7 +1200,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
 
   /** @private */
   __setHighlightedItem(item) {
-    if (this._grid === this.$.grid) {
+    if (this._grid === this._gridController.defaultNode) {
       this._grid.selectedItems = item ? [item] : [];
     }
   }
@@ -1201,11 +1216,8 @@ 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().some((e) => e.nodeType === 1 && e.hasAttribute('new-button'))) {
-      this.__confirmBeforeChangingEditedItem(null, true);
-    }
+  __new() {
+    this.__confirmBeforeChangingEditedItem(null, true);
   }
 
   /** @private */
@@ -1241,7 +1253,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     this._fields.forEach((e) => {
       const path = e.path || e.getAttribute('path');
       if (path) {
-        this.__set(path, e.value, item);
+        setProperty(path, e.value, item);
       }
     });
     const evt = this.dispatchEvent(new CustomEvent('save', { detail: { item }, cancelable: true }));
@@ -1253,7 +1265,9 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
           this.items.push(item);
         }
       } else {
-        this.editedItem = this.editedItem || {};
+        if (!this.editedItem) {
+          this.editedItem = {};
+        }
         Object.assign(this.editedItem, item);
       }
       this._grid.clearCache();
@@ -1295,23 +1309,6 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     }
   }
 
-  /**
-   * Utility method for setting nested values in JSON objects but initializing empty keys unless `Polymer.Base.set`
-   * @private
-   */
-  __set(path, val, obj) {
-    if (obj && path) {
-      path
-        .split('.')
-        .slice(0, -1)
-        .reduce((o, p) => {
-          o[p] = o[p] || {};
-          return o[p];
-        }, obj);
-      this.set(path, val, obj);
-    }
-  }
-
   /**
    * Fired when user wants to edit an existing item. If the default is prevented, then
    * a new item is not assigned to the form, giving that responsibility to the app, though

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

@@ -97,13 +97,6 @@ registerStyles(
       :host([dir='rtl']) [part='toolbar'] ::slotted(*:not(:first-child)) {
         margin-right: 0.5em;
       }
-
-      vaadin-text-field[theme~='small'] {
-        height: 24px;
-        font-size: var(--material-small-font-size);
-        margin: 0;
-        padding: 0;
-      }
     `,
   ],
   { moduleId: 'material-crud' },

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/crud",
-  "version": "23.3.3",
+  "version": "24.0.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -295,7 +295,7 @@
         },
         {
           "name": "vaadin-crud",
-          "description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-crud#property-items) property.\n\nA grid and an editor will be automatically generated and configured based on the data structure provided.\n\n```html\n<vaadin-crud></vaadin-crud>\n```\n```js\nconst crud = document.querySelector('vaadin-crud');\n\ncrud.items = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n```\n\n### Data Provider Function\n\nOtherwise, you can provide a [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-crud#property-dataProvider) function.\n\n```js\nconst crud = document.querySelector('vaadin-crud');\n\nconst users = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n\ncrud.dataProvider = (params, callback) => {\n  const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);\n  callback(chunk, people.length);\n};\n```\n\nNOTE: The auto-generated editor only supports string types. If you need to handle special cases\ncustomizing the editor is discussed below.\n\n### Customization\n\nAlternatively you can fully configure the component by using `slot` names.\n\nSlot name      | Description\n---------------|----------------\n`grid`         | To replace the auto-generated grid with a custom one.\n`form`         | To replace the auto-generated form.\n`save-button`  | To replace the \"Save\" button.\n`cancel-button`| To replace the \"Cancel\" button.\n`delete-button`| To replace the \"Delete\" button.\n`toolbar`      | To replace the toolbar content. Add an element with the attribute `new-button` for the new item action.\n\n#### Example:\n\n```html\n<vaadin-crud id=\"crud\">\n  <vaadin-grid slot=\"grid\">\n    <vaadin-crud-edit-column></vaadin-crud-edit-column>\n    <vaadin-grid-column id=\"column1\"></vaadin-grid-column>\n    <vaadin-grid-column id=\"column2\"></vaadin-grid-column>\n  </vaadin-grid>\n\n  <vaadin-form-layout slot=\"form\">\n    <vaadin-text-field label=\"First\" path=\"name\"></vaadin-text-field>\n    <vaadin-text-field label=\"Surname\" path=\"surname\"></vaadin-text-field>\n  </vaadin-form-layout>\n\n  <div slot=\"toolbar\">\n    Total singers: [[size]]\n    <button new-button>New singer</button>\n  </div>\n\n  <button slot=\"save-button\">Save changes</button>\n  <button slot=\"cancel-button\">Discard changes</button>\n  <button slot=\"delete-button\">Delete singer</button>\n</vaadin-crud>\n```\n```js\nconst crud = document.querySelector('#crud');\n\nconst column1 = document.querySelector('#column1');\ncolumn1.headerRenderer = (root, column) => {\n  root.textContent = 'Name';\n};\ncolumn1.renderer = (root, column, model) => {\n  root.textContent = model.item.name;\n};\n\nconst column2 = document.querySelector('#column2');\ncolumn2.headerRenderer = (root, column) => {\n  root.textContent = 'Surname';\n};\ncolumn2.renderer = (root, column, model) => {\n  root.textContent = model.item.surname;\n};\n\ncrud.items = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n```\n\n### Helpers\n\nThe following elements are used to auto-configure the grid and the editor\n- [`<vaadin-crud-edit-column>`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom. By default it contains the the `new` button\n\nThe following custom properties are available:\n\nCustom Property | Description | Default\n----------------|----------------\n--vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%\n--vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-crud#property-items) property.\n\nA grid and an editor will be automatically generated and configured based on the data structure provided.\n\n```html\n<vaadin-crud></vaadin-crud>\n```\n```js\nconst crud = document.querySelector('vaadin-crud');\n\ncrud.items = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n```\n\n### Data Provider Function\n\nOtherwise, you can provide a [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-crud#property-dataProvider) function.\n\n```js\nconst crud = document.querySelector('vaadin-crud');\n\nconst users = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n\ncrud.dataProvider = (params, callback) => {\n  const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);\n  callback(chunk, people.length);\n};\n```\n\nNOTE: The auto-generated editor only supports string types. If you need to handle special cases\ncustomizing the editor is discussed below.\n\n### Customization\n\nAlternatively you can fully configure the component by using `slot` names.\n\nSlot name      | Description\n---------------|----------------\n`grid`         | To replace the auto-generated grid with a custom one.\n`form`         | To replace the auto-generated form.\n`save-button`  | To replace the \"Save\" button.\n`cancel-button`| To replace the \"Cancel\" button.\n`delete-button`| To replace the \"Delete\" button.\n`toolbar`      | To provide the toolbar content (by default, it's empty).\n`new-button`   | To replace the \"New item\" button.\n\n#### Example:\n\n```html\n<vaadin-crud id=\"crud\">\n  <vaadin-grid slot=\"grid\">\n    <vaadin-crud-edit-column></vaadin-crud-edit-column>\n    <vaadin-grid-column id=\"column1\"></vaadin-grid-column>\n    <vaadin-grid-column id=\"column2\"></vaadin-grid-column>\n  </vaadin-grid>\n\n  <vaadin-form-layout slot=\"form\">\n    <vaadin-text-field label=\"First\" path=\"name\"></vaadin-text-field>\n    <vaadin-text-field label=\"Surname\" path=\"surname\"></vaadin-text-field>\n  </vaadin-form-layout>\n\n  <div slot=\"toolbar\">Total singers: 2</div>\n  <button slot=\"new-button\">New singer</button>\n\n  <button slot=\"save-button\">Save changes</button>\n  <button slot=\"cancel-button\">Discard changes</button>\n  <button slot=\"delete-button\">Delete singer</button>\n</vaadin-crud>\n```\n```js\nconst crud = document.querySelector('#crud');\n\nconst column1 = document.querySelector('#column1');\ncolumn1.headerRenderer = (root, column) => {\n  root.textContent = 'Name';\n};\ncolumn1.renderer = (root, column, model) => {\n  root.textContent = model.item.name;\n};\n\nconst column2 = document.querySelector('#column2');\ncolumn2.headerRenderer = (root, column) => {\n  root.textContent = 'Surname';\n};\ncolumn2.renderer = (root, column, model) => {\n  root.textContent = model.item.surname;\n};\n\ncrud.items = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n```\n\n### Helpers\n\nThe following elements are used to auto-configure the grid and the editor\n- [`<vaadin-crud-edit-column>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom. By default it contains the the `new` button\n\nThe following custom properties are available:\n\nCustom Property | Description | Default\n----------------|----------------\n--vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%\n--vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "attributes": [
             {
               "name": "editor-position",
@@ -350,7 +350,7 @@
             },
             {
               "name": "include",
-              "description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
+              "description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
               "value": {
                 "type": [
                   "string",
@@ -361,7 +361,7 @@
             },
             {
               "name": "exclude",
-              "description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
+              "description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
               "value": {
                 "type": [
                   "string",
@@ -488,7 +488,7 @@
               },
               {
                 "name": "include",
-                "description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
+                "description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
                 "value": {
                   "type": [
                     "string",
@@ -499,7 +499,7 @@
               },
               {
                 "name": "exclude",
-                "description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
+                "description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
                 "value": {
                   "type": [
                     "string",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/crud",
-  "version": "23.3.3",
+  "version": "24.0.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -121,7 +121,7 @@
         },
         {
           "name": "vaadin-crud",
-          "description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-crud#property-items) property.\n\nA grid and an editor will be automatically generated and configured based on the data structure provided.\n\n```html\n<vaadin-crud></vaadin-crud>\n```\n```js\nconst crud = document.querySelector('vaadin-crud');\n\ncrud.items = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n```\n\n### Data Provider Function\n\nOtherwise, you can provide a [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-crud#property-dataProvider) function.\n\n```js\nconst crud = document.querySelector('vaadin-crud');\n\nconst users = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n\ncrud.dataProvider = (params, callback) => {\n  const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);\n  callback(chunk, people.length);\n};\n```\n\nNOTE: The auto-generated editor only supports string types. If you need to handle special cases\ncustomizing the editor is discussed below.\n\n### Customization\n\nAlternatively you can fully configure the component by using `slot` names.\n\nSlot name      | Description\n---------------|----------------\n`grid`         | To replace the auto-generated grid with a custom one.\n`form`         | To replace the auto-generated form.\n`save-button`  | To replace the \"Save\" button.\n`cancel-button`| To replace the \"Cancel\" button.\n`delete-button`| To replace the \"Delete\" button.\n`toolbar`      | To replace the toolbar content. Add an element with the attribute `new-button` for the new item action.\n\n#### Example:\n\n```html\n<vaadin-crud id=\"crud\">\n  <vaadin-grid slot=\"grid\">\n    <vaadin-crud-edit-column></vaadin-crud-edit-column>\n    <vaadin-grid-column id=\"column1\"></vaadin-grid-column>\n    <vaadin-grid-column id=\"column2\"></vaadin-grid-column>\n  </vaadin-grid>\n\n  <vaadin-form-layout slot=\"form\">\n    <vaadin-text-field label=\"First\" path=\"name\"></vaadin-text-field>\n    <vaadin-text-field label=\"Surname\" path=\"surname\"></vaadin-text-field>\n  </vaadin-form-layout>\n\n  <div slot=\"toolbar\">\n    Total singers: [[size]]\n    <button new-button>New singer</button>\n  </div>\n\n  <button slot=\"save-button\">Save changes</button>\n  <button slot=\"cancel-button\">Discard changes</button>\n  <button slot=\"delete-button\">Delete singer</button>\n</vaadin-crud>\n```\n```js\nconst crud = document.querySelector('#crud');\n\nconst column1 = document.querySelector('#column1');\ncolumn1.headerRenderer = (root, column) => {\n  root.textContent = 'Name';\n};\ncolumn1.renderer = (root, column, model) => {\n  root.textContent = model.item.name;\n};\n\nconst column2 = document.querySelector('#column2');\ncolumn2.headerRenderer = (root, column) => {\n  root.textContent = 'Surname';\n};\ncolumn2.renderer = (root, column, model) => {\n  root.textContent = model.item.surname;\n};\n\ncrud.items = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n```\n\n### Helpers\n\nThe following elements are used to auto-configure the grid and the editor\n- [`<vaadin-crud-edit-column>`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom. By default it contains the the `new` button\n\nThe following custom properties are available:\n\nCustom Property | Description | Default\n----------------|----------------\n--vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%\n--vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-crud#property-items) property.\n\nA grid and an editor will be automatically generated and configured based on the data structure provided.\n\n```html\n<vaadin-crud></vaadin-crud>\n```\n```js\nconst crud = document.querySelector('vaadin-crud');\n\ncrud.items = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n```\n\n### Data Provider Function\n\nOtherwise, you can provide a [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-crud#property-dataProvider) function.\n\n```js\nconst crud = document.querySelector('vaadin-crud');\n\nconst users = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n\ncrud.dataProvider = (params, callback) => {\n  const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);\n  callback(chunk, people.length);\n};\n```\n\nNOTE: The auto-generated editor only supports string types. If you need to handle special cases\ncustomizing the editor is discussed below.\n\n### Customization\n\nAlternatively you can fully configure the component by using `slot` names.\n\nSlot name      | Description\n---------------|----------------\n`grid`         | To replace the auto-generated grid with a custom one.\n`form`         | To replace the auto-generated form.\n`save-button`  | To replace the \"Save\" button.\n`cancel-button`| To replace the \"Cancel\" button.\n`delete-button`| To replace the \"Delete\" button.\n`toolbar`      | To provide the toolbar content (by default, it's empty).\n`new-button`   | To replace the \"New item\" button.\n\n#### Example:\n\n```html\n<vaadin-crud id=\"crud\">\n  <vaadin-grid slot=\"grid\">\n    <vaadin-crud-edit-column></vaadin-crud-edit-column>\n    <vaadin-grid-column id=\"column1\"></vaadin-grid-column>\n    <vaadin-grid-column id=\"column2\"></vaadin-grid-column>\n  </vaadin-grid>\n\n  <vaadin-form-layout slot=\"form\">\n    <vaadin-text-field label=\"First\" path=\"name\"></vaadin-text-field>\n    <vaadin-text-field label=\"Surname\" path=\"surname\"></vaadin-text-field>\n  </vaadin-form-layout>\n\n  <div slot=\"toolbar\">Total singers: 2</div>\n  <button slot=\"new-button\">New singer</button>\n\n  <button slot=\"save-button\">Save changes</button>\n  <button slot=\"cancel-button\">Discard changes</button>\n  <button slot=\"delete-button\">Delete singer</button>\n</vaadin-crud>\n```\n```js\nconst crud = document.querySelector('#crud');\n\nconst column1 = document.querySelector('#column1');\ncolumn1.headerRenderer = (root, column) => {\n  root.textContent = 'Name';\n};\ncolumn1.renderer = (root, column, model) => {\n  root.textContent = model.item.name;\n};\n\nconst column2 = document.querySelector('#column2');\ncolumn2.headerRenderer = (root, column) => {\n  root.textContent = 'Surname';\n};\ncolumn2.renderer = (root, column, model) => {\n  root.textContent = model.item.surname;\n};\n\ncrud.items = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n```\n\n### Helpers\n\nThe following elements are used to auto-configure the grid and the editor\n- [`<vaadin-crud-edit-column>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom. By default it contains the the `new` button\n\nThe following custom properties are available:\n\nCustom Property | Description | Default\n----------------|----------------\n--vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%\n--vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -196,14 +196,14 @@
             },
             {
               "name": ".include",
-              "description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
+              "description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": ".exclude",
-              "description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
+              "description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
               "value": {
                 "kind": "expression"
               }