@vaadin/crud 24.1.5 → 24.2.0-alpha10

package/LICENSE

@@ -14,7 +14,7 @@ AND DESTROY OR RETURN ALL COPIES OF THE PRODUCT.
 IF YOU ARE AGREEING TO THESE TERMS ON BEHALF OF YOURSELF IN YOUR INDIVIDUAL 
 CAPACITY, THEN YOU ARE THE CUSTOMER. IF YOU ARE AGREEING TO THESE TERMS ON 
 BEHALF OF YOUR COMPANY, THEN YOUR COMPANY IS THE CUSTOMER.
- 
+
 1. Definitions
 1.1. In these Commercial Terms, unless the context requires otherwise, the 
 following words and phrases shall have the following meanings:
@@ -219,11 +219,12 @@ License as set forth herein and in the applicable Order.
 
 4.3. Developer License
 4.3.1 General Provisions
-4.3.1.2 This Section 4.3 contains the terms and conditions of Vaadin’s 
+4.3.1.1 This Section 4.3 contains the terms and conditions of Vaadin’s 
 developer License (“Developer License”), under which Vaadin licenses 
 development components for use by a Developer.
-Vaadin grants to Customer, based on full payment of the Subscription fee, a 
-worldwide, royalty-free, non-exclusive, limited License to Use Licensed 
+
+4.3.1.2 Vaadin grants to Customer, based on full payment of the Subscription 
+fee, a worldwide, royalty-free, non-exclusive, limited License to Use Licensed 
 Software in Project(s). 
 
 4.3.1.3 Customer must procure the right to Use Licensed Software for each 
@@ -309,7 +310,7 @@ in the applicable Order.
 4.4.3. Customer may grant licenses, for free or based on a payment, to the 
 Authorized Application(s) including Licensed Software, whether regarded as 
 derivative works or not, as long as Customer has obtained from Vaadin a valid 
-Runtime License for and on behalf of Customer’s own Customers (that Use 
+Runtime License for and on behalf of Customer’s own customers (that Use 
 Licensed Software), or Customer clearly communicates that anyone Using Licensed 
 Software needs to obtain a valid Runtime License from Vaadin prior to 
 installation and use of the Authorized Application(s) including Licensed 
@@ -402,7 +403,7 @@ and components for the duration of the Subscription in accordance with the
 applicable license terms set for each tool and component. Unless otherwise set 
 out in the applicable license terms set for each tool or component, Customer’s 
 right of use shall expire without a separate notice when the Subscription is 
-terminated or expires. 
+terminated or expires.
 
 6.4. Expert Chat
 6.4.1. Customer is offered access to a chat service, where Vaadin’s expert team 
@@ -446,10 +447,6 @@ does not authorize the continuation of the service request at their expense.
 Software to be fixed. There can be only one open warranty request at a time per 
 Subscription. Vaadin reserves the right to choose, at its sole discretion, 
 which warranty requests will be fixed.
-During the Support Hours, the resolution of a support request will be started 
-within two (2) business days. If Vaadin fails to start the resolution as 
-agreed, Customer will be compensated with one (1) free Expert on Demand hour 
-that is added to the time balance.
 
 6.6.2. During the Support Hours, the resolution of a support request will be 
 started within two (2) business days. If Vaadin fails to start the resolution 
@@ -491,7 +488,8 @@ and corresponds with the deliverables and which product or service is offered
 for use to Customer by Vaadin without separate charge. The aforesaid indemnity 
 obligation of Vaadin shall, however, always be limited to an amount equal to 
 three times the yearly Subscription fee, and Vaadin’s liability for indemnified 
-claims shall be limited to this Section 6.9.
+claims shall be limited to this Section 6.8.
+
 
 6.9. Extended Maintenance for Vaadin
 6.9.1. The extended maintenance for Vaadin Service extends the coverage of the 
@@ -506,7 +504,7 @@ that the latest minor versions of Vaadin platform versions 10, 14, and 23+ are
 covered for the duration of the Subscription term.
 
 6.9.3. Any and all changes to the software covered by Extended Maintenance may 
-be published under commercial or non-commercial License and will be made 
+be published under a commercial or non-commercial License and will be made 
 available exclusively to Customers that have subscribed to the extended 
 maintenance for Vaadin Service.
 
@@ -531,6 +529,23 @@ that is added to the time balance.
 6.10.3. Vaadin will build a new version of the Custom Build on demand basis, 
 however, at most once a month.
 
+6.11. Technical Success Manager
+6.11.1 Technical Success Manager (“TSM”) is a technical expert allocated to 
+help Customer to use Vaadin’s products and services in a productive manner. 
+TSM's areas of expertise include, but are not limited to, answering technical 
+questions, disseminating best practices, and coordinating work between Customer 
+and Vaadin.
+
+6.11.2. Customer may request regular meetings with the TSM with a maximum 
+monthly total of four (4) hours of active meeting time. Preparation and 
+coordination time related to the meetings is not included in the above 
+mentioned monthly total.
+
+6.11.3. Software programming and project management are not included in the 
+scope of this TSM service referred to in this Section 6.11. Programming and 
+project management services are provided under Expert on Demand and Consulting 
+services.
+
 7. Consulting
 7.1. Delivery of Consulting
 7.1.1 The Parties may agree upon the delivery of Consulting in an Order, SOW, 
@@ -584,7 +599,7 @@ of this Section and is not to be interpreted as a penalty or punishment
 therefor.
 
 7.4. Sponsored Development
-The Parties may agree upon the delivery of Sponsored Development in an 
+7.4.1 The Parties may agree upon the delivery of Sponsored Development in an 
 Agreement. This Service is provided as Consulting in accordance with this 
 Section 7. Intellectual Property Rights to Sponsored Development results are 
 regulated by Section 11 below.
@@ -651,14 +666,20 @@ or other Agreement document. As regards Trial Licenses, no Subscription fee is
 charged.
 
 10.2. Consulting
-10.2.1. The applicable prices and hourly rates are detailed in the Agreement 
+10.2.1. All cost and effort estimates given by Vaadin to Customer are 
+indicative by nature and do not affect the calculation of the fees. If not 
+otherwise specified in the Agreement, the Services are provided on 
+time-and-material basis. The fee is determined by multiplying the hourly rates 
+set forth in the Agreement by the hours that Vaadin has worked on the Services.
+
+10.2.2. The applicable prices and hourly rates are detailed in the Agreement 
 and/or its appendices. If a price for a Service has not been agreed, the price 
 in Vaadin’s price list effective on the order date shall apply.
 
-10.2.2. Vaadin shall be entitled to adjust its prices with thirty (30) days’ 
+10.2.3. Vaadin shall be entitled to adjust its prices with thirty (30) days’ 
 notice to Customer.
 
-10.2.3. Vaadin shall, if pre-approved by Customer, be entitled to charge for 
+10.2.4. Vaadin shall, if pre-approved by Customer, be entitled to charge for 
 customary and reasonable travel and accommodation costs as well as other travel 
 costs relating to Services. Traveling time shall be charged as 50% of the 
 agreed hourly rates.
@@ -971,6 +992,7 @@ PURPOSE, ANY IMPLIED WARRANTY THAT ANY SOFTWARE, PRODUCT OR SERVICE WILL MEET
 ALL NEEDS AND EXPECTATIONS, BE ERROR-FREE, OR BE OF CERTAIN CONDITION, QUALITY 
 OR DURABILITY, OR FUNCTION OR PERFORM IN A CERTAIN WAY. ALL SUCH WARRANTIES, 
 CONDITIONS, UNDERTAKINGS AND TERMS ARE HEREBY EXCLUDED.
+
 23. Limitation of Liability
 23.1. VAADIN AND ITS AFFILIATES AND SUPPLIERS SHALL NOT BE LIABLE FOR ANY 
 INDIRECT, SPECIAL, INCIDENTAL, PUNITIVE OR CONSEQUENTIAL DAMAGES, INCLUDING BUT 
@@ -985,9 +1007,9 @@ A PARTY TOWARDS THE OTHER PARTY IN RELATION TO THE AGREEMENT IS LIMITED TO A
 MAXIMUM OF 50 % OF THE PRICE PAYABLE FOR THE AGREED SUBSCRIPTION, PRODUCT OR 
 SERVICE DIRECTLY RELATED TO THE CAUSE OF ACTION ASSERTED UNDER THE RELEVANT 
 AGREEMENT. IN CASE OF SUBSCRIPTIONS, THE AFOREMENTIONED 50 % LIMIT IS 
-CALCULATED BASED ON THE SUBSRPTION FEE FOR THE MOST RECENT SUBSCRIPTION TERM. 
-IN CASE OF CONSULTING CARRIED OUT OUTSIDE A SUBSCRIPTION, THE AFOREMENTIONED 
-50 % LIMIT IS CALCULATED BASED ON THE TOTAL VALUE OF THE CONSULTING UNDER THE 
+CALCULATED BASED ON THE SUBSCRIPTION FEE FOR THE MOST RECENT SUBSCRIPTION TERM. 
+IN CASE OF CONSULTING CARRIED OUT OUTSIDE A SUBSCRIPTION, THE AFOREMENTIONED 50 
+% LIMIT IS CALCULATED BASED ON THE TOTAL VALUE OF THE CONSULTING UNDER THE 
 RELEVANT SOW.
 
 23.3. THIS LIMITATION OF LIABILITY SHALL APPLY REGARDLESS OF THE CAUSE OF 
@@ -1083,13 +1105,13 @@ interpretation of the Commercial Terms or any provision hereof.
 
 27.6. Severability
 27.6.1. If any provision of the Agreement shall be held invalid, illegal or 
-unenforceable, the remaining provisions shall not be affected or impaired. 
+unenforceable, the remaining provisions shall not be affected or impaired.
 
 27.7. Export Control
 27.7.1. The Licensed Software may be subject to import and export controls in 
 other countries. Customer agrees to strictly comply with all applicable import 
 and export regulations and acknowledge that Customer has the responsibility to 
-obtain licenses to export, re-export, transfer or import Licensed Software.  
+obtain licenses to export, re-export, transfer or import Licensed Software.
 
 27.8. Assignment
 27.8.1. Neither Party shall have the right to assign the Agreement to a third 
@@ -1105,8 +1127,8 @@ Agreement.
 statements required hereby shall be in English.
 
 27.10. Changes to these Commercial Terms
-Vaadin may change these Commercial Terms at any time, upon thirty (30) days 
-prior written notice. The changed Commercial Terms shall apply to any new 
+27.10.1 Vaadin may change these Commercial Terms at any time, upon thirty (30) 
+days prior written notice. The changed Commercial Terms shall apply to any new 
 Orders and Agreements entered into after the effective date of the change. As 
 regards Subscriptions, the changed Commercial Terms shall apply from the 
 beginning of a renewed Subscription term, provided that Vaadin has notified 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/crud",
-  "version": "24.1.5",
+  "version": "24.2.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -37,20 +37,20 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "~24.1.5",
-    "@vaadin/component-base": "~24.1.5",
-    "@vaadin/confirm-dialog": "~24.1.5",
-    "@vaadin/dialog": "~24.1.5",
-    "@vaadin/form-layout": "~24.1.5",
-    "@vaadin/grid": "~24.1.5",
-    "@vaadin/text-field": "~24.1.5",
-    "@vaadin/vaadin-lumo-styles": "~24.1.5",
-    "@vaadin/vaadin-material-styles": "~24.1.5",
-    "@vaadin/vaadin-themable-mixin": "~24.1.5"
+    "@vaadin/button": "24.2.0-alpha10",
+    "@vaadin/component-base": "24.2.0-alpha10",
+    "@vaadin/confirm-dialog": "24.2.0-alpha10",
+    "@vaadin/dialog": "24.2.0-alpha10",
+    "@vaadin/form-layout": "24.2.0-alpha10",
+    "@vaadin/grid": "24.2.0-alpha10",
+    "@vaadin/text-field": "24.2.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.2.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha10"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.2",
+    "@vaadin/testing-helpers": "^0.5.0",
     "sinon": "^13.0.2"
   },
   "cvdlName": "vaadin-crud",
@@ -58,5 +58,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "2150f0696b9205ed3651033301927516b87cf88f"
+  "gitHead": "ca16b5f88b00ae05fb6d7c7e9874525048e389f0"
 }

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

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+
+/**
+ * A controller for initializing slotted button.
+ */
+export class ButtonSlotController extends SlotController {
+  constructor(host: HTMLElement);
+}
+
+/**
+ * A controller for initializing slotted form.
+ */
+export class FormSlotController extends SlotController {
+  constructor(host: HTMLElement);
+}
+
+/**
+ * A controller for initializing slotted grid.
+ */
+export class GridSlotController extends SlotController {
+  constructor(host: HTMLElement);
+}

package/src/vaadin-crud-controllers.js

@@ -0,0 +1,114 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+
+/**
+ * A controller for initializing slotted button.
+ * @protected
+ */
+export class ButtonSlotController extends SlotController {
+  constructor(host, type, theme) {
+    super(host, `${type}-button`, 'vaadin-button');
+
+    this.type = type;
+    this.theme = theme;
+  }
+
+  /**
+   * Override method inherited from `SlotController`
+   * to mark custom slotted button as the default.
+   *
+   * @param {Node} node
+   * @protected
+   * @override
+   */
+  initNode(node) {
+    // Needed by Flow counterpart to apply i18n to custom button
+    if (node._isDefault) {
+      this.defaultNode = node;
+    }
+
+    if (node === this.defaultNode) {
+      node.setAttribute('theme', this.theme);
+    }
+
+    const { host, type } = this;
+    const property = `_${type}Button`;
+    const listener = `__${type}`;
+
+    // TODO: restore default button when a corresponding slotted button is removed.
+    // This would require us to detect where to insert a button after teleporting it,
+    // which happens after opening a dialog and closing it (default editor position).
+    if (host[property] && host[property] !== node) {
+      host[property].remove();
+    }
+
+    node.addEventListener('click', host[listener]);
+    host[property] = node;
+  }
+}
+
+/**
+ * A controller for initializing slotted form.
+ * @protected
+ */
+export class FormSlotController extends SlotController {
+  constructor(host) {
+    super(host, 'form', 'vaadin-crud-form');
+  }
+
+  /**
+   * Override method inherited from `SlotController`
+   * to move slotted form to the overlay if needed.
+   *
+   * @param {Node} node
+   * @protected
+   * @override
+   */
+  initNode(node) {
+    this.host._form = node;
+
+    if (this.host.editorOpened) {
+      this.host.__ensureChildren();
+    }
+  }
+}
+
+/**
+ * A controller for initializing slotted grid.
+ * @protected
+ */
+export class GridSlotController extends SlotController {
+  constructor(host) {
+    super(host, 'grid', 'vaadin-crud-grid');
+  }
+
+  /**
+   * Override method inherited from `SlotController`
+   * to initialize `active-item-changed` listener.
+   *
+   * @param {Node} node
+   * @protected
+   * @override
+   */
+  initNode(node) {
+    const { host } = this;
+
+    // Wait for all the properties e.g. `noFilter` and `noSort`
+    // to be set, to ensure columns are configured correctly.
+    queueMicrotask(() => {
+      // Force to remove listener on previous grid first
+      host.__editOnClickChanged(false, host._grid);
+      host._grid = node;
+      host.__editOnClickChanged(host.editOnClick, host._grid);
+    });
+  }
+}

package/src/vaadin-crud-dialog.js

@@ -8,100 +8,91 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { Dialog } from '@vaadin/dialog/src/vaadin-dialog.js';
-import { DialogOverlay } from '@vaadin/dialog/src/vaadin-dialog-overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-crud-dialog-overlay',
-  css`
-    [part='overlay'] {
-      max-width: 54em;
-      min-width: 20em;
-    }
-
-    [part='footer'] {
-      justify-content: flex-start;
-      flex-direction: row-reverse;
-    }
-
-    /* Make buttons clickable */
-    [part='footer'] ::slotted(:not([disabled])) {
-      pointer-events: all;
-    }
-
-    :host([fullscreen]) {
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      padding: 0;
-    }
-
-    :host([fullscreen]) [part='overlay'] {
-      height: 100vh;
-      width: 100vw;
-      border-radius: 0 !important;
-    }
-
-    :host([fullscreen]) [part='content'] {
-      flex: 1;
-    }
-  `,
-  { moduleId: 'vaadin-crud-dialog-overlay-styles' },
-);
-
-let memoizedTemplate;
-
-const footerTemplate = html`
-  <slot name="save-button"></slot>
-  <slot name="cancel-button"></slot>
-  <slot name="delete-button"></slot>
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-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 { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
+
+const crudDialogOverlay = css`
+  [part='overlay'] {
+    max-width: 54em;
+    min-width: 20em;
+  }
+
+  [part='footer'] {
+    justify-content: flex-start;
+    flex-direction: row-reverse;
+  }
+
+  /* Make buttons clickable */
+  [part='footer'] ::slotted(:not([disabled])) {
+    pointer-events: all;
+  }
+
+  :host([fullscreen]) {
+    inset: 0;
+    padding: 0;
+  }
+
+  :host([fullscreen]) [part='overlay'] {
+    height: 100vh;
+    width: 100vw;
+    border-radius: 0 !important;
+  }
+
+  :host([fullscreen]) [part='content'] {
+    flex: 1;
+  }
 `;
 
+registerStyles('vaadin-crud-dialog-overlay', [overlayStyles, dialogOverlay, resizableOverlay, crudDialogOverlay], {
+  moduleId: 'vaadin-crud-dialog-overlay-styles',
+});
+
 /**
- * An extension of `<vaadin-dialog-overlay>` used internally by `<vaadin-crud>`.
- * Not intended to be used separately.
+ * 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 DialogOverlay {
+class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-crud-dialog-overlay';
   }
 
   static get template() {
-    if (!memoizedTemplate) {
-      memoizedTemplate = super.template.cloneNode(true);
-
-      // Replace two header slots with a single one
-      const headerPart = memoizedTemplate.content.querySelector('[part="header"]');
-      headerPart.innerHTML = '';
-      const headerSlot = document.createElement('slot');
-      headerSlot.setAttribute('name', 'header');
-      headerPart.appendChild(headerSlot);
-
-      // Replace default slot with "form" named slot
-      const contentPart = memoizedTemplate.content.querySelector('[part="content"]');
-      const defaultSlot = contentPart.querySelector('slot:not([name])');
-      defaultSlot.setAttribute('name', 'form');
-
-      // Replace footer slot with button named slots
-      const footerPart = memoizedTemplate.content.querySelector('[part="footer"]');
-      footerPart.setAttribute('role', 'toolbar');
-      const footerSlot = footerPart.querySelector('slot');
-      footerPart.removeChild(footerSlot);
-      footerPart.appendChild(footerTemplate.content.cloneNode(true));
-    }
-    return memoizedTemplate;
+    return html`
+      <div part="backdrop" id="backdrop" hidden$="[[!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
    */
-  _headerFooterRendererChange(headerRenderer, footerRenderer, opened) {
-    super._headerFooterRendererChange(headerRenderer, footerRenderer, opened);
+  ready() {
+    super.ready();
 
     // CRUD has header and footer but does not use renderers
     this.setAttribute('has-header', '');
@@ -109,17 +100,29 @@ class CrudDialogOverlay extends DialogOverlay {
   }
 }
 
-customElements.define('vaadin-crud-dialog-overlay', CrudDialogOverlay);
+customElements.define(CrudDialogOverlay.is, CrudDialogOverlay);
 
 /**
- * An extension of `<vaadin-dialog>` used internally by `<vaadin-crud>`.
- * Not intended to be used separately.
+ * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
  * @private
  */
-class CrudDialog extends Dialog {
-  /**
-   * Override template to provide custom overlay tag name.
-   */
+class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolymerElement))) {
+  static get is() {
+    return 'vaadin-crud-dialog';
+  }
+
+  static get properties() {
+    return {
+      ariaLabel: {
+        type: String,
+      },
+
+      fullscreen: {
+        type: Boolean,
+      },
+    };
+  }
+
   static get template() {
     return html`
       <style>
@@ -130,6 +133,8 @@ class CrudDialog extends Dialog {
 
       <vaadin-crud-dialog-overlay
         id="overlay"
+        opened="[[opened]]"
+        aria-label$="[[ariaLabel]]"
         on-opened-changed="_onOverlayOpened"
         on-mousedown="_bringOverlayToFront"
         on-touchstart="_bringOverlayToFront"
@@ -137,10 +142,11 @@ class CrudDialog extends Dialog {
         modeless="[[modeless]]"
         with-backdrop="[[!modeless]]"
         resizable$="[[resizable]]"
+        fullscreen$="[[fullscreen]]"
         focus-trap
       ></vaadin-crud-dialog-overlay>
     `;
   }
 }
 
-customElements.define('vaadin-crud-dialog', CrudDialog);
+customElements.define(CrudDialog.is, CrudDialog);

package/src/vaadin-crud.js

@@ -14,7 +14,6 @@ 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 { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { FocusRestorationController } from '@vaadin/a11y-base/src/focus-restoration-controller.js';
@@ -23,54 +22,9 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ButtonSlotController, FormSlotController, GridSlotController } from './vaadin-crud-controllers.js';
 import { getProperty, setProperty } from './vaadin-crud-helpers.js';
 
-/**
- * A controller for initializing slotted button.
- * @private
- */
-class ButtonSlotController extends SlotController {
-  constructor(host, type, theme) {
-    super(host, `${type}-button`, 'vaadin-button');
-
-    this.type = type;
-    this.theme = theme;
-  }
-
-  /**
-   * Override method inherited from `SlotController`
-   * to mark custom slotted button as the default.
-   *
-   * @param {Node} node
-   * @protected
-   * @override
-   */
-  initNode(node) {
-    // Needed by Flow counterpart to apply i18n to custom button
-    if (node._isDefault) {
-      this.defaultNode = node;
-    }
-
-    if (node === this.defaultNode) {
-      node.setAttribute('theme', this.theme);
-    }
-
-    const { host, type } = this;
-    const property = `_${type}Button`;
-    const listener = `__${type}`;
-
-    // TODO: restore default button when a corresponding slotted button is removed.
-    // This would require us to detect where to insert a button after teleporting it,
-    // which happens after opening a dialog and closing it (default editor position).
-    if (host[property] && host[property] !== node) {
-      host[property].remove();
-    }
-
-    node.addEventListener('click', host[listener]);
-    host[property] = node;
-  }
-}
-
 /**
  * `<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.
  *
@@ -338,6 +292,7 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
       <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]]"
@@ -710,10 +665,6 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
     this._deleteButtonController = new ButtonSlotController(this, 'delete', 'tertiary error');
 
     this.__focusRestorationController = new FocusRestorationController();
-
-    this._observer = new FlattenedNodesObserver(this, (info) => {
-      this.__onDomChange(info.addedNodes);
-    });
   }
 
   /** @protected */
@@ -747,10 +698,10 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
     });
     this.addController(this._headerController);
 
-    this._gridController = new SlotController(this, 'grid', 'vaadin-crud-grid');
+    this._gridController = new GridSlotController(this);
     this.addController(this._gridController);
 
-    this.addController(new SlotController(this, 'form', 'vaadin-crud-form'));
+    this.addController(new FormSlotController(this));
 
     this.addController(this._newButtonController);
 
@@ -851,7 +802,6 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
       this.__ensureChildren();
 
       this.toggleAttribute('fullscreen', fullscreen);
-      this.$.dialog.$.overlay.toggleAttribute('fullscreen', fullscreen);
     }
   }
 
@@ -919,31 +869,6 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
     this.editorOpened = event.detail.value;
   }
 
-  /** @private */
-  __onDomChange(addedNodes) {
-    addedNodes
-      .filter((node) => node.nodeType === Node.ELEMENT_NODE)
-      .forEach((node) => {
-        const slotAttributeValue = node.getAttribute('slot');
-        if (!slotAttributeValue) {
-          return;
-        }
-
-        if (slotAttributeValue === 'grid') {
-          // Force to remove listener on previous grid first
-          this.__editOnClickChanged(false, this._grid);
-          this._grid = node;
-          this.__editOnClickChanged(this.editOnClick, this._grid);
-        } else if (slotAttributeValue === 'form') {
-          this._form = node;
-        }
-      });
-
-    if (this.editorOpened) {
-      this.__ensureChildren();
-    }
-  }
-
   /** @private */
   __onGridEdit(event) {
     event.stopPropagation();
@@ -1273,16 +1198,21 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
     this.__openEditor('edit', item);
   }
 
+  /** @private */
+  __fireEvent(type, item) {
+    const event = new CustomEvent(type, { detail: { item }, cancelable: true });
+    this.dispatchEvent(event);
+    return event.defaultPrevented === false;
+  }
+
   /** @private */
   __openEditor(type, item) {
     this.__focusRestorationController.saveFocus();
 
     this.__isDirty = false;
     this.__isNew = !item;
-    const evt = this.dispatchEvent(
-      new CustomEvent(this.__isNew ? 'new' : 'edit', { detail: { item }, cancelable: true }),
-    );
-    if (evt) {
+    const result = this.__fireEvent(this.__isNew ? 'new' : 'edit', item);
+    if (result) {
       this.editedItem = item || {};
     } else {
       this.editorOpened = true;
@@ -1327,8 +1257,8 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
         setProperty(path, e.value, item);
       }
     });
-    const evt = this.dispatchEvent(new CustomEvent('save', { detail: { item }, cancelable: true }));
-    if (evt) {
+    const result = this.__fireEvent('save', item);
+    if (result) {
       if (this.__isNew && !this.dataProvider) {
         if (!this.items) {
           this.items = [item];
@@ -1359,8 +1289,8 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
 
   /** @private */
   __confirmCancel() {
-    const evt = this.dispatchEvent(new CustomEvent('cancel', { detail: { item: this.editedItem }, cancelable: true }));
-    if (evt) {
+    const result = this.__fireEvent('cancel', this.editedItem);
+    if (result) {
       this.__restoreFocusOnSaveOrCancel();
       this.__closeEditor();
     }
@@ -1373,8 +1303,8 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
 
   /** @private */
   __confirmDelete() {
-    const evt = this.dispatchEvent(new CustomEvent('delete', { detail: { item: this.editedItem }, cancelable: true }));
-    if (evt) {
+    const result = this.__fireEvent('delete', this.editedItem);
+    if (result) {
       if (this.items && this.items.indexOf(this.editedItem) >= 0) {
         this.items.splice(this.items.indexOf(this.editedItem), 1);
       }

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

@@ -2,6 +2,8 @@ import '@vaadin/vaadin-lumo-styles/typography.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
+import { dialogOverlay } from '@vaadin/dialog/theme/lumo/vaadin-dialog-styles.js';
+import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
@@ -133,6 +135,8 @@ registerStyles(
 registerStyles(
   'vaadin-crud-dialog-overlay',
   [
+    overlay,
+    dialogOverlay,
     editorStyles,
     css`
       [part='header'] ::slotted(h3) {

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

@@ -1,5 +1,7 @@
 import '@vaadin/vaadin-material-styles/typography.js';
 import '@vaadin/vaadin-material-styles/color.js';
+import { dialogOverlay } from '@vaadin/dialog/theme/material/vaadin-dialog-styles.js';
+import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
@@ -116,8 +118,15 @@ registerStyles(
 registerStyles(
   'vaadin-crud-dialog-overlay',
   [
+    overlay,
+    dialogOverlay,
     editorStyles,
     css`
+      [part='overlay'] {
+        max-width: 54em;
+        min-width: 20em;
+      }
+
       @keyframes material-overlay-dummy-animation {
         0% {
           opacity: 1;

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/crud",
-  "version": "24.1.5",
+  "version": "24.2.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -65,6 +65,15 @@
                 ]
               }
             },
+            {
+              "name": "row-header",
+              "description": "When true, the cells for this column will be rendered with the `role` attribute\nset as `rowheader`, instead of the `gridcell` role value used by default.\n\nWhen a column is set as row header, its cells will be announced by screen readers\nwhile navigating to help user identify the current row as uniquely as possible.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
             {
               "name": "hidden",
               "description": "When set to true, the cells for this column are hidden.",
@@ -192,6 +201,15 @@
                   ]
                 }
               },
+              {
+                "name": "rowHeader",
+                "description": "When true, the cells for this column will be rendered with the `role` attribute\nset as `rowheader`, instead of the `gridcell` role value used by default.\n\nWhen a column is set as row header, its cells will be announced by screen readers\nwhile navigating to help user identify the current row as uniquely as possible.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
               {
                 "name": "hidden",
                 "description": "When set to true, the cells for this column are hidden.",
@@ -295,7 +313,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.1.5/#/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.1.5/#/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.1.5/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.1.5/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.1.5/#/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.2.0-alpha10/#/elements/vaadin-crud#property-items) property.\n\nA grid and an editor will be automatically generated and configured based on the data structure provided.\n\n```html\n<vaadin-crud></vaadin-crud>\n```\n```js\nconst crud = document.querySelector('vaadin-crud');\n\ncrud.items = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n```\n\n### Data Provider Function\n\nOtherwise, you can provide a [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha10/#/elements/vaadin-crud#property-dataProvider) function.\n\n```js\nconst crud = document.querySelector('vaadin-crud');\n\nconst users = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n\ncrud.dataProvider = (params, callback) => {\n  const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);\n  callback(chunk, people.length);\n};\n```\n\nNOTE: The auto-generated editor only supports string types. If you need to handle special cases\ncustomizing the editor is discussed below.\n\n### Customization\n\nAlternatively you can fully configure the component by using `slot` names.\n\nSlot name      | Description\n---------------|----------------\n`grid`         | To replace the auto-generated grid with a custom one.\n`form`         | To replace the auto-generated form.\n`save-button`  | To replace the \"Save\" button.\n`cancel-button`| To replace the \"Cancel\" button.\n`delete-button`| To replace the \"Delete\" button.\n`toolbar`      | To provide the toolbar content (by default, it's empty).\n`new-button`   | To replace the \"New item\" button.\n\n#### Example:\n\n```html\n<vaadin-crud id=\"crud\">\n  <vaadin-grid slot=\"grid\">\n    <vaadin-crud-edit-column></vaadin-crud-edit-column>\n    <vaadin-grid-column id=\"column1\"></vaadin-grid-column>\n    <vaadin-grid-column id=\"column2\"></vaadin-grid-column>\n  </vaadin-grid>\n\n  <vaadin-form-layout slot=\"form\">\n    <vaadin-text-field label=\"First\" path=\"name\"></vaadin-text-field>\n    <vaadin-text-field label=\"Surname\" path=\"surname\"></vaadin-text-field>\n  </vaadin-form-layout>\n\n  <div slot=\"toolbar\">Total singers: 2</div>\n  <button slot=\"new-button\">New singer</button>\n\n  <button slot=\"save-button\">Save changes</button>\n  <button slot=\"cancel-button\">Discard changes</button>\n  <button slot=\"delete-button\">Delete singer</button>\n</vaadin-crud>\n```\n```js\nconst crud = document.querySelector('#crud');\n\nconst column1 = document.querySelector('#column1');\ncolumn1.headerRenderer = (root, column) => {\n  root.textContent = 'Name';\n};\ncolumn1.renderer = (root, column, model) => {\n  root.textContent = model.item.name;\n};\n\nconst column2 = document.querySelector('#column2');\ncolumn2.headerRenderer = (root, column) => {\n  root.textContent = 'Surname';\n};\ncolumn2.renderer = (root, column, model) => {\n  root.textContent = model.item.surname;\n};\n\ncrud.items = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n```\n\n### Helpers\n\nThe following elements are used to auto-configure the grid and the editor\n- [`<vaadin-crud-edit-column>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha10/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha10/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha10/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom. By default it contains the the `new` button\n\nThe following custom properties are available:\n\nCustom Property | Description | Default\n----------------|----------------\n--vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%\n--vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "editor-position",
@@ -350,7 +368,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.1.5/#/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.2.0-alpha10/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
               "value": {
                 "type": [
                   "string",
@@ -361,7 +379,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.1.5/#/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.2.0-alpha10/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
               "value": {
                 "type": [
                   "string",
@@ -488,7 +506,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.1.5/#/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.2.0-alpha10/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
                 "value": {
                   "type": [
                     "string",
@@ -499,7 +517,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.1.5/#/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.2.0-alpha10/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
                 "value": {
                   "type": [
                     "string",

package/web-types.lit.json

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