@vaadin/crud 24.7.0-alpha2 → 24.7.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/crud",
-  "version": "24.7.0-alpha2",
+  "version": "24.7.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -37,22 +37,22 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.7.0-alpha2",
-    "@vaadin/button": "24.7.0-alpha2",
-    "@vaadin/component-base": "24.7.0-alpha2",
-    "@vaadin/confirm-dialog": "24.7.0-alpha2",
-    "@vaadin/dialog": "24.7.0-alpha2",
-    "@vaadin/form-layout": "24.7.0-alpha2",
-    "@vaadin/grid": "24.7.0-alpha2",
-    "@vaadin/overlay": "24.7.0-alpha2",
-    "@vaadin/text-field": "24.7.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha2",
-    "@vaadin/vaadin-material-styles": "24.7.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha2"
+    "@vaadin/a11y-base": "24.7.0-alpha4",
+    "@vaadin/button": "24.7.0-alpha4",
+    "@vaadin/component-base": "24.7.0-alpha4",
+    "@vaadin/confirm-dialog": "24.7.0-alpha4",
+    "@vaadin/dialog": "24.7.0-alpha4",
+    "@vaadin/form-layout": "24.7.0-alpha4",
+    "@vaadin/grid": "24.7.0-alpha4",
+    "@vaadin/overlay": "24.7.0-alpha4",
+    "@vaadin/text-field": "24.7.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha4",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha4"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/chai-plugins": "24.7.0-alpha4",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
   "cvdlName": "vaadin-crud",
@@ -60,5 +60,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "e2523f9b4abc5a9586fb758166f823dc40c399dd"
+  "gitHead": "d7165cebf9dcf6a7e9e22f6353662d33404b4856"
 }

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

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

package/src/vaadin-crud-controllers.js

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

package/src/vaadin-crud-dialog.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 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 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 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 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -11,6 +11,7 @@
 import './vaadin-crud-edit.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { GridColumn } from '@vaadin/grid/src/vaadin-grid-column.js';
+import { editColumnDefaultRenderer } from './vaadin-crud-helpers.js';
 
 /**
  * `<vaadin-crud-edit-column>` is a helper element for the `<vaadin-grid>`
@@ -69,21 +70,8 @@ class CrudEditColumn extends GridColumn {
    *
    * @override
    */
-  _defaultRenderer(root, _column) {
-    let edit = root.firstElementChild;
-    if (!edit) {
-      edit = document.createElement('vaadin-crud-edit');
-      if (this.hasAttribute('theme')) {
-        edit.setAttribute('theme', this.getAttribute('theme'));
-      }
-      root.appendChild(edit);
-    }
-
-    if (this.ariaLabel) {
-      edit.setAttribute('aria-label', this.ariaLabel);
-    } else {
-      edit.removeAttribute('aria-label');
-    }
+  _defaultRenderer(root, column) {
+    editColumnDefaultRenderer(root, column);
   }
 }
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 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 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 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 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 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 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -11,7 +11,7 @@
 import '@vaadin/text-field/src/vaadin-text-field.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { FormLayout } from '@vaadin/form-layout/src/vaadin-form-layout.js';
-import { capitalize } from './vaadin-crud-helpers.js';
+import { createField, createFields } from './vaadin-crud-helpers.js';
 import { IncludedMixin } from './vaadin-crud-include-mixin.js';
 
 /**
@@ -64,31 +64,12 @@ class CrudForm extends IncludedMixin(FormLayout) {
 
   /** @private */
   __createField(parent, path) {
-    const field = document.createElement('vaadin-text-field');
-    field.label = capitalize(path);
-    field.path = path;
-    field.required = true;
-    parent.appendChild(field);
-    this._fields.push(field);
-    return field;
+    return createField(this, parent, path);
   }
 
   /** @private */
   __createFields(parent, object, path) {
-    Object.keys(object).forEach((prop) => {
-      if (!this.include && this.exclude && this.exclude.test(prop)) {
-        return;
-      }
-      const newPath = (path ? `${path}.` : '') + prop;
-      if (object[prop] && typeof object[prop] === 'object') {
-        this.__createFields(parent, object[prop], newPath);
-      } else {
-        this.__createField(parent, newPath);
-      }
-    });
-    if (!this._fields.length) {
-      this._fields = undefined;
-    }
+    return createFields(this, parent, object, path);
   }
 }
 

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

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

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -45,6 +45,7 @@ export const CrudGridMixin = (superClass) =>
          */
         hideEditColumn: {
           type: Boolean,
+          sync: true,
         },
       };
     }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 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 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

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

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

package/src/vaadin-crud-helpers.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -66,3 +66,47 @@ export function setProperty(path, value, obj) {
 export function isValidEditorPosition(editorPosition) {
   return ['bottom', 'aside'].includes(editorPosition);
 }
+
+export function editColumnDefaultRenderer(root, column) {
+  let edit = root.firstElementChild;
+  if (!edit) {
+    edit = document.createElement('vaadin-crud-edit');
+    if (column.hasAttribute('theme')) {
+      edit.setAttribute('theme', column.getAttribute('theme'));
+    }
+    root.appendChild(edit);
+  }
+
+  if (column.ariaLabel) {
+    edit.setAttribute('aria-label', column.ariaLabel);
+  } else {
+    edit.removeAttribute('aria-label');
+  }
+}
+
+export function createField(crudForm, parent, path) {
+  const field = document.createElement('vaadin-text-field');
+  field.label = capitalize(path);
+  field.path = path;
+  field.required = true;
+  parent.appendChild(field);
+  crudForm._fields.push(field);
+  return field;
+}
+
+export function createFields(crudForm, parent, object, path) {
+  Object.keys(object).forEach((prop) => {
+    if (!crudForm.include && crudForm.exclude && crudForm.exclude.test(prop)) {
+      return;
+    }
+    const newPath = (path ? `${path}.` : '') + prop;
+    if (object[prop] && typeof object[prop] === 'object') {
+      createFields(crudForm, parent, object[prop], newPath);
+    } else {
+      createField(crudForm, parent, newPath);
+    }
+  });
+  if (!crudForm._fields.length) {
+    crudForm._fields = undefined;
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 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 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -29,6 +29,7 @@ export const IncludedMixin = (superClass) =>
         exclude: {
           value: '^_',
           observer: '__onExcludeChange',
+          sync: true,
         },
 
         /**
@@ -40,6 +41,7 @@ export const IncludedMixin = (superClass) =>
          */
         include: {
           observer: '__onIncludeChange',
+          sync: true,
         },
       };
     }

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

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

package/src/vaadin-crud-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -100,6 +100,7 @@ export const CrudMixin = (superClass) =>
           type: Object,
           observer: '__editedItemChanged',
           notify: true,
+          sync: true,
         },
 
         /**
@@ -117,6 +118,7 @@ export const CrudMixin = (superClass) =>
           value: '',
           reflectToAttribute: true,
           observer: '__editorPositionChanged',
+          sync: true,
         },
 
         /**
@@ -128,6 +130,7 @@ export const CrudMixin = (superClass) =>
         editOnClick: {
           type: Boolean,
           value: false,
+          sync: true,
         },
 
         /**
@@ -194,6 +197,7 @@ export const CrudMixin = (superClass) =>
           reflectToAttribute: true,
           notify: true,
           observer: '__editorOpenedChanged',
+          sync: true,
         },
 
         /**
@@ -218,6 +222,7 @@ export const CrudMixin = (superClass) =>
           type: Boolean,
           value: false,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -261,6 +266,7 @@ export const CrudMixin = (superClass) =>
          */
         i18n: {
           type: Object,
+          sync: true,
           value() {
             return {
               newItem: 'New item',
@@ -295,7 +301,10 @@ export const CrudMixin = (superClass) =>
         __dialogAriaLabel: String,
 
         /** @private */
-        __isDirty: Boolean,
+        __isDirty: {
+          type: Boolean,
+          sync: true,
+        },
 
         /** @private */
         __isNew: Boolean,
@@ -307,6 +316,7 @@ export const CrudMixin = (superClass) =>
         _fullscreen: {
           type: Boolean,
           observer: '__fullscreenChanged',
+          sync: true,
         },
 
         /**
@@ -502,14 +512,15 @@ export const CrudMixin = (superClass) =>
 
     /** @private */
     __moveChildNodes(target) {
-      const nodes = [this._headerNode, this._form, this._saveButton, this._cancelButton, this._deleteButton];
+      const nodes = [this._headerNode, this._form];
+      const buttons = [this._saveButton, this._cancelButton, this._deleteButton].filter(Boolean);
       if (!nodes.every((node) => node instanceof HTMLElement)) {
         return;
       }
 
       // Teleport header node, form, and the buttons to corresponding slots.
       // NOTE: order in which buttons are moved matches the order of slots.
-      nodes.forEach((node) => {
+      [...nodes, ...buttons].forEach((node) => {
         target.appendChild(node);
       });
 

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

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

package/src/vaadin-crud-styles.js

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

package/src/vaadin-crud.d.ts

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

package/src/vaadin-crud.js

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

package/src/vaadin-lit-crud-dialog.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 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.
+ */
+export * from './vaadin-crud-dialog.js';

package/src/vaadin-lit-crud-dialog.js

@@ -0,0 +1,128 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 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 { 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 { 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';
+
+/**
+ * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
+ *
+ * @extends HTMLElement
+ * @mixes DirMixin
+ * @mixes OverlayMixin
+ * @mixes ThemableMixin
+ * @private
+ */
+class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-crud-dialog-overlay';
+  }
+
+  static get styles() {
+    return [overlayStyles, dialogOverlay, resizableOverlay, crudDialogOverlayStyles];
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <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>
+          <div part="content" id="content">
+            <slot name="form"></slot>
+          </div>
+          <footer part="footer" role="toolbar">
+            <slot name="save-button"></slot>
+            <slot name="cancel-button"></slot>
+            <slot name="delete-button"></slot>
+          </footer>
+        </section>
+      </div>
+    `;
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  ready() {
+    super.ready();
+
+    // CRUD has header and footer but does not use renderers
+    this.setAttribute('has-header', '');
+    this.setAttribute('has-footer', '');
+  }
+}
+
+defineCustomElement(CrudDialogOverlay);
+
+/**
+ * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
+ * @private
+ */
+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: {
+        type: String,
+      },
+
+      fullscreen: {
+        type: Boolean,
+      },
+    };
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <vaadin-crud-dialog-overlay
+        id="overlay"
+        .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>
+    `;
+  }
+}
+
+defineCustomElement(CrudDialog);

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 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.
+ */
+export * from './vaadin-crud-edit-column.js';

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

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 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 './vaadin-lit-crud-edit.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { GridColumn } from '@vaadin/grid/src/vaadin-lit-grid-column.js';
+import { editColumnDefaultRenderer } from './vaadin-crud-helpers.js';
+
+/**
+ * LitElement based version of `<vaadin-crud-edit-column>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ */
+class CrudEditColumn extends GridColumn {
+  static get is() {
+    return 'vaadin-crud-edit-column';
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Width of the cells for this column.
+       * @private
+       */
+      width: {
+        type: String,
+        value: '4rem',
+      },
+
+      /**
+       * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.
+       * @private
+       */
+      flexGrow: {
+        type: Number,
+        value: 0,
+      },
+
+      /** The arial-label for the edit button */
+      ariaLabel: String,
+    };
+  }
+
+  static get observers() {
+    return ['_onRendererOrBindingChanged(_renderer, _cells, _bodyContentHidden, _cells.*, path, ariaLabel)'];
+  }
+
+  /**
+   * Renders the crud edit element to the body cell.
+   *
+   * @override
+   */
+  _defaultRenderer(root, column) {
+    editColumnDefaultRenderer(root, column);
+  }
+}
+
+defineCustomElement(CrudEditColumn);
+
+export { CrudEditColumn };

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 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.
+ */
+export * from './vaadin-crud-edit.js';

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

@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 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 { html } from 'lit';
+import { Button } from '@vaadin/button/src/vaadin-lit-button.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-crud-edit>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ */
+class CrudEdit extends Button {
+  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>
+    `;
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+    this.addEventListener('click', this.__onClick);
+    this.setAttribute('aria-label', 'Edit');
+  }
+
+  /** @private */
+  __onClick(e) {
+    const tr = e.target.parentElement.assignedSlot.parentElement.parentElement;
+    tr.dispatchEvent(
+      new CustomEvent('edit', { detail: { item: tr._item, index: tr.index }, bubbles: true, composed: true }),
+    );
+  }
+
+  /**
+   * Fired when user on the icon.
+   *
+   * @event edit
+   * @param {Object} detail.item the item to edit
+   * @param {Object} detail.index the index of the item in the data set
+   */
+}
+
+defineCustomElement(CrudEdit);
+
+export { CrudEdit };

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 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.
+ */
+export * from './vaadin-crud-form.js';

package/src/vaadin-lit-crud-form.js

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 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 '@vaadin/text-field/src/vaadin-lit-text-field.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { FormLayout } from '@vaadin/form-layout/src/vaadin-lit-form-layout.js';
+import { createField, createFields } from './vaadin-crud-helpers.js';
+import { IncludedMixin } from './vaadin-crud-include-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
+ *
+ * @extends FormLayout
+ * @mixes IncludedMixin
+ * @private
+ */
+class CrudForm extends IncludedMixin(FormLayout) {
+  static get is() {
+    return 'vaadin-crud-form';
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The item being edited.
+       * @type {unknown}
+       */
+      item: {
+        type: Object,
+        sync: true,
+      },
+    };
+  }
+
+  static get observers() {
+    return ['__onItemChange(item)'];
+  }
+
+  /**
+   * Auto-generate form fields based on the JSON structure of the object provided.
+   *
+   * If not called, the method will be executed the first time an item is assigned.
+   * @param {unknown} object
+   * @protected
+   */
+  _configure(object) {
+    this.innerHTML = '';
+    this._fields = [];
+    this.__createFields(this, object);
+    this._updateLayout();
+  }
+
+  /** @private */
+  __onItemChange(item) {
+    if (!this._fields) {
+      this._configure(item);
+    }
+  }
+
+  /** @private */
+  __createField(parent, path) {
+    return createField(this, parent, path);
+  }
+
+  /** @private */
+  __createFields(parent, object, path) {
+    return createFields(this, parent, object, path);
+  }
+}
+
+defineCustomElement(CrudForm);
+
+export { CrudForm };

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 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.
+ */
+export * from './vaadin-crud-grid.js';

package/src/vaadin-lit-crud-grid.js

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 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 '@vaadin/grid/src/vaadin-lit-grid-column-group.js';
+import '@vaadin/grid/src/vaadin-lit-grid-column.js';
+import '@vaadin/grid/src/vaadin-lit-grid-filter.js';
+import '@vaadin/grid/src/vaadin-lit-grid-sorter.js';
+import './vaadin-lit-crud-edit-column.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { Grid } from '@vaadin/grid/src/vaadin-lit-grid.js';
+import { CrudGridMixin } from './vaadin-crud-grid-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
+ *
+ * @extends Grid
+ * @mixes CrudGridMixin
+ * @private
+ */
+class CrudGrid extends CrudGridMixin(Grid) {
+  static get is() {
+    return 'vaadin-crud-grid';
+  }
+}
+
+defineCustomElement(CrudGrid);
+
+export { CrudGrid };

package/src/vaadin-lit-crud.js

@@ -0,0 +1,122 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 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 '@vaadin/button/src/vaadin-lit-button.js';
+import '@vaadin/confirm-dialog/src/vaadin-lit-confirm-dialog.js';
+import './vaadin-lit-crud-dialog.js';
+import './vaadin-lit-crud-grid.js';
+import './vaadin-lit-crud-form.js';
+import { html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-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';
+
+/**
+ * LitElement based version of `<vaadin-crud>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ */
+class Crud extends ControllerMixin(ElementMixin(ThemableMixin(CrudMixin(PolylitMixin(LitElement))))) {
+  static get styles() {
+    return crudStyles;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div id="container">
+        <div id="main">
+          <slot name="grid"></slot>
+
+          <div id="toolbar" part="toolbar">
+            <slot name="toolbar"></slot>
+            <slot name="new-button"></slot>
+          </div>
+        </div>
+
+        <div
+          part="editor"
+          id="editor"
+          role="group"
+          aria-labelledby="header"
+          ?hidden="${this.__computeEditorHidden(this.editorOpened, this._fullscreen, this.editorPosition)}"
+        >
+          <div part="scroller" id="scroller">
+            <div part="header" id="header">
+              <slot name="header"></slot>
+            </div>
+            <slot name="form"></slot>
+          </div>
+
+          <div part="footer" role="toolbar">
+            <slot name="save-button"></slot>
+            <slot name="cancel-button"></slot>
+            <slot name="delete-button"></slot>
+          </div>
+        </div>
+      </div>
+
+      <vaadin-crud-dialog
+        id="dialog"
+        .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="${ifDefined(this._theme)}"
+        id="confirmCancel"
+        @confirm="${this.__confirmCancel}"
+        cancel-button-visible
+        .confirmText="${this.i18n.confirm.cancel.button.confirm}"
+        .cancelText="${this.i18n.confirm.cancel.button.dismiss}"
+        .header="${this.i18n.confirm.cancel.title}"
+        .message="${this.i18n.confirm.cancel.content}"
+        confirm-theme="primary"
+      ></vaadin-confirm-dialog>
+
+      <vaadin-confirm-dialog
+        theme="${ifDefined(this._theme)}"
+        id="confirmDelete"
+        @confirm="${this.__confirmDelete}"
+        cancel-button-visible
+        .confirmText="${this.i18n.confirm.delete.button.confirm}"
+        .cancelText="${this.i18n.confirm.delete.button.dismiss}"
+        .header="${this.i18n.confirm.delete.title}"
+        .message="${this.i18n.confirm.delete.content}"
+        confirm-theme="primary error"
+      ></vaadin-confirm-dialog>
+    `;
+  }
+
+  static get is() {
+    return 'vaadin-crud';
+  }
+
+  static get cvdlName() {
+    return 'vaadin-crud';
+  }
+}
+
+defineCustomElement(Crud);
+
+export { Crud };

package/theme/lumo/vaadin-lit-crud.d.ts

@@ -0,0 +1,8 @@
+import '@vaadin/button/theme/lumo/vaadin-lit-button.js';
+import '@vaadin/confirm-dialog/theme/lumo/vaadin-lit-confirm-dialog.js';
+import '@vaadin/form-layout/theme/lumo/vaadin-lit-form-layout.js';
+import '@vaadin/grid/theme/lumo/vaadin-lit-grid.js';
+import '@vaadin/grid/theme/lumo/vaadin-lit-grid-sorter.js';
+import '@vaadin/text-field/theme/lumo/vaadin-lit-text-field.js';
+import './vaadin-crud-styles.js';
+import '../../src/vaadin-lit-crud.js';

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

@@ -0,0 +1,8 @@
+import '@vaadin/button/theme/lumo/vaadin-lit-button.js';
+import '@vaadin/confirm-dialog/theme/lumo/vaadin-lit-confirm-dialog.js';
+import '@vaadin/form-layout/theme/lumo/vaadin-lit-form-layout.js';
+import '@vaadin/grid/theme/lumo/vaadin-lit-grid.js';
+import '@vaadin/grid/theme/lumo/vaadin-lit-grid-sorter.js';
+import '@vaadin/text-field/theme/lumo/vaadin-lit-text-field.js';
+import './vaadin-crud-styles.js';
+import '../../src/vaadin-lit-crud.js';

package/theme/material/vaadin-lit-crud.d.ts

@@ -0,0 +1,8 @@
+import '@vaadin/button/theme/material/vaadin-lit-button.js';
+import '@vaadin/confirm-dialog/theme/material/vaadin-lit-confirm-dialog.js';
+import '@vaadin/form-layout/theme/material/vaadin-lit-form-layout.js';
+import '@vaadin/grid/theme/material/vaadin-lit-grid.js';
+import '@vaadin/grid/theme/material/vaadin-lit-grid-sorter.js';
+import '@vaadin/text-field/theme/material/vaadin-lit-text-field.js';
+import './vaadin-crud-styles.js';
+import '../../src/vaadin-lit-crud.js';

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

@@ -0,0 +1,8 @@
+import '@vaadin/button/theme/material/vaadin-lit-button.js';
+import '@vaadin/confirm-dialog/theme/material/vaadin-lit-confirm-dialog.js';
+import '@vaadin/form-layout/theme/material/vaadin-lit-form-layout.js';
+import '@vaadin/grid/theme/material/vaadin-lit-grid.js';
+import '@vaadin/grid/theme/material/vaadin-lit-grid-sorter.js';
+import '@vaadin/text-field/theme/material/vaadin-lit-text-field.js';
+import './vaadin-crud-styles.js';
+import '../../src/vaadin-lit-crud.js';

package/vaadin-lit-crud-edit .js

@@ -0,0 +1 @@
+export * from './src/vaadin-lit-crud-edit.js';

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

@@ -0,0 +1 @@
+export * from './src/vaadin-lit-crud-edit-column.js';

package/vaadin-lit-crud.js

@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-lit-crud.js';
+export * from './src/vaadin-lit-crud.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/crud",
-  "version": "24.7.0-alpha2",
+  "version": "24.7.0-alpha4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -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.7.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/24.7.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/24.7.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/24.7.0-alpha2/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.7.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.",
+          "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.7.0-alpha4/#/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.7.0-alpha4/#/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.7.0-alpha4/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha4/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha4/#/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": "editor-position",
@@ -412,7 +412,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.7.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.",
+              "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.7.0-alpha4/#/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",
@@ -423,7 +423,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.7.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)",
+              "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.7.0-alpha4/#/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",
@@ -550,7 +550,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.7.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.",
+                "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.7.0-alpha4/#/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",
@@ -561,7 +561,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.7.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)",
+                "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.7.0-alpha4/#/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": "24.7.0-alpha2",
+  "version": "24.7.0-alpha4",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -142,7 +142,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.7.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/24.7.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/24.7.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/24.7.0-alpha2/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.7.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.",
+          "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.7.0-alpha4/#/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.7.0-alpha4/#/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.7.0-alpha4/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha4/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha4/#/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.",
           "extension": true,
           "attributes": [
             {
@@ -217,14 +217,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/24.7.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.",
+              "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.7.0-alpha4/#/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/24.7.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)",
+              "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.7.0-alpha4/#/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"
               }