@vaadin/crud 24.8.0-alpha9 → 25.0.0-alpha2

package/README.md

@@ -28,29 +28,6 @@ Once installed, import the component in your application:
 import '@vaadin/crud';
 ```
 
-## Themes
-
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
-The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/crud/vaadin-crud.js) of the package uses the Lumo theme.
-
-To use the Material theme, import the component from the `theme/material` folder:
-
-```js
-import '@vaadin/crud/theme/material/vaadin-crud.js';
-```
-
-You can also import the Lumo version of the component explicitly:
-
-```js
-import '@vaadin/crud/theme/lumo/vaadin-crud.js';
-```
-
-Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/crud/src/vaadin-crud.js';
-```
-
 ## Contributing
 
 Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/crud",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -31,30 +31,27 @@
     "Vaadin",
     "vaadin-crud",
     "web-components",
-    "web-component",
-    "polymer"
+    "web-component"
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.8.0-alpha9",
-    "@vaadin/button": "24.8.0-alpha9",
-    "@vaadin/component-base": "24.8.0-alpha9",
-    "@vaadin/confirm-dialog": "24.8.0-alpha9",
-    "@vaadin/dialog": "24.8.0-alpha9",
-    "@vaadin/form-layout": "24.8.0-alpha9",
-    "@vaadin/grid": "24.8.0-alpha9",
-    "@vaadin/overlay": "24.8.0-alpha9",
-    "@vaadin/text-field": "24.8.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha9",
+    "@vaadin/a11y-base": "25.0.0-alpha2",
+    "@vaadin/button": "25.0.0-alpha2",
+    "@vaadin/component-base": "25.0.0-alpha2",
+    "@vaadin/confirm-dialog": "25.0.0-alpha2",
+    "@vaadin/dialog": "25.0.0-alpha2",
+    "@vaadin/form-layout": "25.0.0-alpha2",
+    "@vaadin/grid": "25.0.0-alpha2",
+    "@vaadin/overlay": "25.0.0-alpha2",
+    "@vaadin/text-field": "25.0.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha9",
-    "@vaadin/test-runner-commands": "24.8.0-alpha9",
-    "@vaadin/testing-helpers": "^1.1.0",
+    "@vaadin/chai-plugins": "25.0.0-alpha2",
+    "@vaadin/test-runner-commands": "25.0.0-alpha2",
+    "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
   "cvdlName": "vaadin-crud",
@@ -62,5 +59,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770"
+  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
 }

package/src/vaadin-crud-dialog.js

@@ -8,26 +8,20 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js';
 import { dialogOverlay, resizableOverlay } from '@vaadin/dialog/src/vaadin-dialog-styles.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import { crudDialogOverlayStyles } from './vaadin-crud-styles.js';
 
-registerStyles(
-  'vaadin-crud-dialog-overlay',
-  [overlayStyles, dialogOverlay, resizableOverlay, crudDialogOverlayStyles],
-  {
-    moduleId: 'vaadin-crud-dialog-overlay-styles',
-  },
-);
-
 /**
  * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
  *
@@ -38,14 +32,19 @@ registerStyles(
  * @mixes ThemableMixin
  * @private
  */
-class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
+class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-crud-dialog-overlay';
   }
 
-  static get template() {
+  static get styles() {
+    return [overlayStyles, dialogOverlay, resizableOverlay, crudDialogOverlayStyles];
+  }
+
+  /** @protected */
+  render() {
     return html`
-      <div part="backdrop" id="backdrop" hidden$="[[!withBackdrop]]"></div>
+      <div part="backdrop" id="backdrop" ?hidden="${!this.withBackdrop}"></div>
       <div part="overlay" id="overlay" tabindex="0">
         <section id="resizerContainer" class="resizer-container">
           <header part="header"><slot name="header"></slot></header>
@@ -81,11 +80,19 @@ defineCustomElement(CrudDialogOverlay);
  * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
  * @private
  */
-class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolymerElement))) {
+class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-crud-dialog';
   }
 
+  static get styles() {
+    return css`
+      :host {
+        display: none;
+      }
+    `;
+  }
+
   static get properties() {
     return {
       ariaLabel: {
@@ -98,26 +105,20 @@ class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(Po
     };
   }
 
-  static get template() {
+  /** @protected */
+  render() {
     return html`
-      <style>
-        :host {
-          display: none;
-        }
-      </style>
-
       <vaadin-crud-dialog-overlay
         id="overlay"
-        opened="[[opened]]"
-        aria-label$="[[ariaLabel]]"
-        on-opened-changed="_onOverlayOpened"
-        on-mousedown="_bringOverlayToFront"
-        on-touchstart="_bringOverlayToFront"
-        theme$="[[_theme]]"
-        modeless="[[modeless]]"
-        with-backdrop="[[!modeless]]"
-        resizable$="[[resizable]]"
-        fullscreen$="[[fullscreen]]"
+        .opened="${this.opened}"
+        aria-label="${ifDefined(this.ariaLabel)}"
+        @opened-changed="${this._onOverlayOpened}"
+        @mousedown="${this._bringOverlayToFront}"
+        @touchstart="${this._bringOverlayToFront}"
+        theme="${ifDefined(this._theme)}"
+        .modeless="${this.modeless}"
+        .withBackdrop="${!this.modeless}"
+        ?fullscreen="${this.fullscreen}"
         role="dialog"
         focus-trap
       ></vaadin-crud-dialog-overlay>

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

@@ -18,7 +18,7 @@ import { GridColumn } from '@vaadin/grid/src/vaadin-grid-column.js';
  *
  * #### Example:
  * ```html
- * <vaadin-grid items="[[items]]">
+ * <vaadin-grid>
  *  <vaadin-crud-edit-column></vaadin-crud-edit-column>
  *
  *  <vaadin-grid-column>

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

@@ -21,7 +21,7 @@ import { editColumnDefaultRenderer } from './vaadin-crud-helpers.js';
  *
  * #### Example:
  * ```html
- * <vaadin-grid items="[[items]]">
+ * <vaadin-grid>
  *  <vaadin-crud-edit-column></vaadin-crud-edit-column>
  *
  *  <vaadin-grid-column>

package/src/vaadin-crud-edit.js

@@ -8,24 +8,9 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import { html } from '@polymer/polymer/polymer-element.js';
+import { css, html } from 'lit';
 import { Button } from '@vaadin/button/src/vaadin-button.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-/**
- * Use registerStyles instead of the `<style>` tag to make sure
- * that this CSS will override core styles of `vaadin-button`.
- */
-registerStyles(
-  'vaadin-crud-edit',
-  css`
-    :host {
-      display: block;
-    }
-  `,
-  { moduleId: 'vaadin-crud-edit-styles' },
-);
 
 /**
  * `<vaadin-crud-edit>` is a helper element for `<vaadin-grid-column>` that provides
@@ -40,17 +25,29 @@ registerStyles(
  * @mixes ThemableMixin
  */
 class CrudEdit extends Button {
-  static get template() {
+  static get is() {
+    return 'vaadin-crud-edit';
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          display: block;
+        }
+      `,
+    ];
+  }
+
+  /** @protected */
+  render() {
     return html`
       <div part="icon"></div>
       <slot name="tooltip"></slot>
     `;
   }
 
-  static get is() {
-    return 'vaadin-crud-edit';
-  }
-
   /** @protected */
   ready() {
     super.ready();

package/src/vaadin-crud-form.js

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

package/src/vaadin-crud-helpers.js

@@ -8,7 +8,7 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import { get, set } from '@polymer/polymer/lib/utils/path.js';
+import { get, set } from '@vaadin/component-base/src/path-utils.js';
 
 /**
  * Convenience utility for capitalizing a string, with
@@ -33,7 +33,7 @@ export function capitalize(path) {
  * @return {*}
  */
 export function getProperty(path, obj) {
-  return get(obj, path);
+  return get(path, obj);
 }
 
 /**
@@ -59,7 +59,7 @@ export function setProperty(path, value, obj) {
         return o[p];
       }, obj);
 
-    set(obj, path, value);
+    set(path, value, obj);
   }
 }
 

package/src/vaadin-crud-mixin.js

@@ -8,7 +8,6 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { FocusRestorationController } from '@vaadin/a11y-base/src/focus-restoration-controller.js';
 import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
@@ -119,6 +118,7 @@ export const CrudMixin = (superClass) =>
           type: Array,
           notify: true,
           observer: '__itemsChanged',
+          sync: true,
         },
 
         /**
@@ -384,6 +384,13 @@ export const CrudMixin = (superClass) =>
       this.$.dialog.$.overlay.addEventListener('vaadin-overlay-outside-click', this.__cancel);
       this.$.dialog.$.overlay.addEventListener('vaadin-overlay-escape-press', this.__cancel);
 
+      this._gridController = new GridSlotController(this);
+      this.addController(this._gridController);
+
+      // Init button controllers in `ready()` (not constructor) so that Flow can set `_noDefaultButtons`
+      this._newButtonController = new ButtonSlotController(this, 'new', 'primary', this._noDefaultButtons);
+      this.addController(this._newButtonController);
+
       this._headerController = new SlotController(this, 'header', 'h3', {
         initializer: (node) => {
           this._defaultHeader = node;
@@ -391,19 +398,12 @@ export const CrudMixin = (superClass) =>
       });
       this.addController(this._headerController);
 
-      this._gridController = new GridSlotController(this);
-      this.addController(this._gridController);
-
       this.addController(new FormSlotController(this));
 
-      // Init controllers in `ready()` (not constructor) so that Flow can set `_noDefaultButtons`
-      this._newButtonController = new ButtonSlotController(this, 'new', 'primary', this._noDefaultButtons);
       this._saveButtonController = new ButtonSlotController(this, 'save', 'primary', this._noDefaultButtons);
       this._cancelButtonController = new ButtonSlotController(this, 'cancel', 'tertiary', this._noDefaultButtons);
       this._deleteButtonController = new ButtonSlotController(this, 'delete', 'tertiary error', this._noDefaultButtons);
 
-      this.addController(this._newButtonController);
-
       // NOTE: order in which buttons are added should match the order of slots in template
       this.addController(this._saveButtonController);
       this.addController(this._cancelButtonController);
@@ -450,7 +450,7 @@ export const CrudMixin = (superClass) =>
         return;
       }
 
-      afterNextRender(grid, () => {
+      queueMicrotask(() => {
         Array.from(grid.querySelectorAll('vaadin-crud-edit-column')).forEach((column) => {
           column.ariaLabel = effectiveI18n.editLabel;
         });
@@ -484,6 +484,9 @@ export const CrudMixin = (superClass) =>
         } else {
           this.$.editor.removeAttribute('tabindex');
         }
+      } else if (oldOpened) {
+        // Teleport form and buttons back to light DOM when closing overlay
+        this.__moveChildNodes(this);
       }
 
       this.__toggleToolbar();
@@ -522,7 +525,10 @@ export const CrudMixin = (superClass) =>
       // Teleport header node, form, and the buttons to corresponding slots.
       // NOTE: order in which buttons are moved matches the order of slots.
       [...nodes, ...buttons].forEach((node) => {
-        target.appendChild(node);
+        // Do not move nodes if the editor position has not changed
+        if (node.parentNode !== target) {
+          target.appendChild(node);
+        }
       });
 
       // Wait to set label until slotted element has been moved.

package/src/vaadin-crud.d.ts

@@ -8,7 +8,6 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
 import type { GridDefaultItem } from '@vaadin/grid/src/vaadin-grid.js';
 import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -172,11 +171,7 @@ declare class Crud<Item = GridDefaultItem> extends HTMLElement {
   ): void;
 }
 
-interface Crud<Item = GridDefaultItem>
-  extends ElementMixinClass,
-    ThemableMixinClass,
-    ControllerMixinClass,
-    CrudMixinClass<Item> {}
+interface Crud<Item = GridDefaultItem> extends ElementMixinClass, ThemableMixinClass, CrudMixinClass<Item> {}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/vaadin-crud.js

@@ -13,16 +13,15 @@ import '@vaadin/confirm-dialog/src/vaadin-confirm-dialog.js';
 import './vaadin-crud-dialog.js';
 import './vaadin-crud-grid.js';
 import './vaadin-crud-form.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { CrudMixin } from './vaadin-crud-mixin.js';
 import { crudStyles } from './vaadin-crud-styles.js';
 
-registerStyles('vaadin-crud', crudStyles, { moduleId: 'vaadin-crud-styles' });
-
 /**
  * `<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.
  *
@@ -167,13 +166,17 @@ registerStyles('vaadin-crud', crudStyles, { moduleId: 'vaadin-crud-styles' });
  *
  * @customElement
  * @extends HTMLElement
- * @mixes ControllerMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  * @mixes CrudMixin
  */
-class Crud extends CrudMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
-  static get template() {
+class Crud extends CrudMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get styles() {
+    return crudStyles;
+  }
+
+  /** @protected */
+  render() {
     return html`
       <div id="container">
         <div id="main">
@@ -190,7 +193,7 @@ class Crud extends CrudMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
           id="editor"
           role="group"
           aria-labelledby="header"
-          hidden$="[[__computeEditorHidden(editorOpened, _fullscreen, editorPosition)]]"
+          ?hidden="${this.__computeEditorHidden(this.editorOpened, this._fullscreen, this.editorPosition)}"
         >
           <div part="scroller" id="scroller">
             <div part="header" id="header">
@@ -209,36 +212,36 @@ class Crud extends CrudMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
 
       <vaadin-crud-dialog
         id="dialog"
-        opened="[[__computeDialogOpened(editorOpened, _fullscreen, editorPosition)]]"
-        fullscreen="[[_fullscreen]]"
-        aria-label="[[__dialogAriaLabel]]"
-        no-close-on-outside-click="[[__isDirty]]"
-        no-close-on-esc="[[__isDirty]]"
-        theme$="[[_theme]]"
-        on-opened-changed="__onDialogOpened"
+        .opened="${this.__computeDialogOpened(this.editorOpened, this._fullscreen, this.editorPosition)}"
+        .fullscreen="${this._fullscreen}"
+        .ariaLabel="${this.__dialogAriaLabel}"
+        .noCloseOnOutsideClick="${this.__isDirty}"
+        .noCloseOnEsc="${this.__isDirty}"
+        theme="${ifDefined(this._theme)}"
+        @opened-changed="${this.__onDialogOpened}"
       ></vaadin-crud-dialog>
 
       <vaadin-confirm-dialog
-        theme$="[[_theme]]"
+        theme="${ifDefined(this._theme)}"
         id="confirmCancel"
-        on-confirm="__confirmCancel"
+        @confirm="${this.__confirmCancel}"
         cancel-button-visible
-        confirm-text="[[__effectiveI18n.confirm.cancel.button.confirm]]"
-        cancel-text="[[__effectiveI18n.confirm.cancel.button.dismiss]]"
-        header="[[__effectiveI18n.confirm.cancel.title]]"
-        message="[[__effectiveI18n.confirm.cancel.content]]"
+        .confirmText="${this.__effectiveI18n.confirm.cancel.button.confirm}"
+        .cancelText="${this.__effectiveI18n.confirm.cancel.button.dismiss}"
+        .header="${this.__effectiveI18n.confirm.cancel.title}"
+        .message="${this.__effectiveI18n.confirm.cancel.content}"
         confirm-theme="primary"
       ></vaadin-confirm-dialog>
 
       <vaadin-confirm-dialog
-        theme$="[[_theme]]"
+        theme="${ifDefined(this._theme)}"
         id="confirmDelete"
-        on-confirm="__confirmDelete"
+        @confirm="${this.__confirmDelete}"
         cancel-button-visible
-        confirm-text="[[__effectiveI18n.confirm.delete.button.confirm]]"
-        cancel-text="[[__effectiveI18n.confirm.delete.button.dismiss]]"
-        header="[[__effectiveI18n.confirm.delete.title]]"
-        message="[[__effectiveI18n.confirm.delete.content]]"
+        .confirmText="${this.__effectiveI18n.confirm.delete.button.confirm}"
+        .cancelText="${this.__effectiveI18n.confirm.delete.button.dismiss}"
+        .header="${this.__effectiveI18n.confirm.delete.title}"
+        .message="${this.__effectiveI18n.confirm.delete.content}"
         confirm-theme="primary error"
       ></vaadin-confirm-dialog>
     `;

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/crud",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -34,7 +34,7 @@
         },
         {
           "name": "vaadin-crud-edit-column",
-          "description": "`<vaadin-crud-edit-column>` is a helper element for the `<vaadin-grid>`\nthat provides a clickable and themable edit icon.\n\nTypical usage is in a custom `<vaadin-grid>` inside a `<vaadin-crud>`.\n\n#### Example:\n```html\n<vaadin-grid items=\"[[items]]\">\n <vaadin-crud-edit-column></vaadin-crud-edit-column>\n\n <vaadin-grid-column>\n   ...\n```",
+          "description": "`<vaadin-crud-edit-column>` is a helper element for the `<vaadin-grid>`\nthat provides a clickable and themable edit icon.\n\nTypical usage is in a custom `<vaadin-grid>` inside a `<vaadin-crud>`.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-crud-edit-column></vaadin-crud-edit-column>\n\n <vaadin-grid-column>\n   ...\n```",
           "attributes": [
             {
               "name": "resizable",
@@ -357,7 +357,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/24.8.0-alpha9/#/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.8.0-alpha9/#/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.8.0-alpha9/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/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/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/25.0.0-alpha2/#/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/25.0.0-alpha2/#/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/25.0.0-alpha2/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha2/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha2/#/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/styling-components) documentation.",
           "attributes": [
             {
               "name": "i18n",
@@ -421,7 +421,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/24.8.0-alpha9/#/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/25.0.0-alpha2/#/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",
@@ -432,7 +432,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/24.8.0-alpha9/#/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/25.0.0-alpha2/#/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",
@@ -568,7 +568,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/24.8.0-alpha9/#/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/25.0.0-alpha2/#/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",
@@ -579,7 +579,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/24.8.0-alpha9/#/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/25.0.0-alpha2/#/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",