@vaadin/crud 25.2.0-alpha1 → 25.2.0-alpha11

package/custom-elements.json

@@ -531,7 +531,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "When disabled, the button is rendered as \"dimmed\" and prevents all\nuser interactions (mouse and keyboard).\n\nSince disabled buttons are not focusable and cannot react to hover\nevents by default, it can cause accessibility issues by making them\nentirely invisible to assistive technologies, and prevents the use\nof Tooltips to explain why the action is not available. This can be\naddressed by enabling the feature flag `accessibleDisabledButtons`,\nwhich makes disabled buttons focusable and hoverable, while still\npreventing them from being triggered:\n\n```js\n// Set before any button is attached to the DOM.\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true\n```",
+              "description": "When disabled, the button is rendered as \"dimmed\".\n\nBy default, disabled buttons are not focusable and don't react to hover.\nAs a result, they are hidden from assistive technologies, and it's not\npossible to show a tooltip to explain why they are disabled. This can\nbe addressed by enabling the feature flag `accessibleDisabledButtons`,\nwhich makes disabled buttons focusable and hoverable, while still\npreventing them from being activated:\n\n```js\n// Set before any button is attached to the DOM.\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true\n```",
               "attribute": "disabled",
               "inheritedFrom": {
                 "name": "Button",
@@ -551,7 +551,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "When disabled, the button is rendered as \"dimmed\" and prevents all\nuser interactions (mouse and keyboard).\n\nSince disabled buttons are not focusable and cannot react to hover\nevents by default, it can cause accessibility issues by making them\nentirely invisible to assistive technologies, and prevents the use\nof Tooltips to explain why the action is not available. This can be\naddressed by enabling the feature flag `accessibleDisabledButtons`,\nwhich makes disabled buttons focusable and hoverable, while still\npreventing them from being triggered:\n\n```js\n// Set before any button is attached to the DOM.\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true\n```",
+              "description": "When disabled, the button is rendered as \"dimmed\".\n\nBy default, disabled buttons are not focusable and don't react to hover.\nAs a result, they are hidden from assistive technologies, and it's not\npossible to show a tooltip to explain why they are disabled. This can\nbe addressed by enabling the feature flag `accessibleDisabledButtons`,\nwhich makes disabled buttons focusable and hoverable, while still\npreventing them from being activated:\n\n```js\n// Set before any button is attached to the DOM.\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true\n```",
               "fieldName": "disabled",
               "inheritedFrom": {
                 "name": "Button",
@@ -1259,7 +1259,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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`](#/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\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`](#/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>`](#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling when the editor is rendered next to, or below, the grid:\n\nPart name | Description\n----------------|----------------\n`toolbar`  | Toolbar container at the bottom of the grid. By default, it contains the `new` button\n`editor`   | The editor container\n`scroller` | The wrapper for the header and the form\n`header`   | The header of the editor\n`footer`   | The footer of the editor\n\nThe following shadow DOM parts are available for styling when the editor renders as a dialog:\n\nPart name | Description\n----------------|----------------\n`toolbar`  | Toolbar container at the bottom of the grid. By default, it contains the `new` button\n`overlay`  | The dialog overlay\n`backdrop` | The dialog backdrop\n`header`   | The header of the dialog\n`footer`   | The footer of the dialog\n`content`  | The wrapper for the form\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`](#/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\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`](#/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>`](#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling when the editor is rendered next to, or below, the grid:\n\nPart name | Description\n----------------|----------------\n`toolbar`  | Toolbar container at the bottom of the grid. By default, it contains the `new` button\n`editor`   | The editor container\n`scroller` | The wrapper for the header and the form\n`header`   | The header of the editor\n`footer`   | The footer of the editor\n\nThe following shadow DOM parts are available for styling when the editor renders as a dialog:\n\nPart name | Description\n----------------|----------------\n`toolbar`  | Toolbar container at the bottom of the grid. By default, it contains the `new` button\n`overlay`  | The dialog overlay\n`backdrop` | The dialog backdrop\n`header`   | The header of the dialog\n`footer`   | The footer of the dialog\n`content`  | The wrapper for the form\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                    |\n:--------------------------------------|\n| `--vaadin-crud-background`           |\n| `--vaadin-crud-border-color`         |\n| `--vaadin-crud-border-radius`        |\n| `--vaadin-crud-border-width`         |\n| `--vaadin-crud-editor-max-height`    |\n| `--vaadin-crud-editor-max-width`     |\n| `--vaadin-crud-footer-background`    |\n| `--vaadin-crud-footer-gap`           |\n| `--vaadin-crud-footer-padding`       |\n| `--vaadin-crud-form-padding`         |\n| `--vaadin-crud-header-color`         |\n| `--vaadin-crud-header-font-size`     |\n| `--vaadin-crud-header-font-weight`   |\n| `--vaadin-crud-header-line-height`   |\n| `--vaadin-crud-header-padding`       |\n| `--vaadin-crud-toolbar-background`   |\n| `--vaadin-crud-toolbar-padding`      |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "name": "Crud",
           "members": [
             {
@@ -1465,28 +1465,28 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when user discards edition.",
+              "description": "Fired when user discards edition. If the default is prevented, no action is performed; the listener is responsible for closing the dialog and resetting the item and grid.",
               "name": "cancel"
             },
             {
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when user wants to delete item.",
+              "description": "Fired when user wants to delete item. If the default is prevented, no action is performed: the items array is not modified and the dialog is not closed.",
               "name": "delete"
             },
             {
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when user wants to edit an existing item.",
+              "description": "Fired when user wants to edit an existing item. If the default is prevented, a new item is not assigned to the form, but the dialog is still opened.",
               "name": "edit"
             },
             {
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when `editedItem` property changes.",
+              "description": "Fired when the `editedItem` property changes.",
               "name": "edited-item-changed"
             },
             {
@@ -1514,7 +1514,7 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when user wants to save a new or an existing item.",
+              "description": "Fired when user wants to save a new or an existing item. If the default is prevented, no action is performed: the items array is not modified and the dialog is not closed.",
               "name": "save"
             },
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/crud",
-  "version": "25.2.0-alpha1",
+  "version": "25.2.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -35,24 +35,24 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.2.0-alpha1",
-    "@vaadin/button": "25.2.0-alpha1",
-    "@vaadin/component-base": "25.2.0-alpha1",
-    "@vaadin/confirm-dialog": "25.2.0-alpha1",
-    "@vaadin/dialog": "25.2.0-alpha1",
-    "@vaadin/form-layout": "25.2.0-alpha1",
-    "@vaadin/grid": "25.2.0-alpha1",
-    "@vaadin/overlay": "25.2.0-alpha1",
-    "@vaadin/text-field": "25.2.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha1",
+    "@vaadin/a11y-base": "25.2.0-alpha11",
+    "@vaadin/button": "25.2.0-alpha11",
+    "@vaadin/component-base": "25.2.0-alpha11",
+    "@vaadin/confirm-dialog": "25.2.0-alpha11",
+    "@vaadin/dialog": "25.2.0-alpha11",
+    "@vaadin/form-layout": "25.2.0-alpha11",
+    "@vaadin/grid": "25.2.0-alpha11",
+    "@vaadin/overlay": "25.2.0-alpha11",
+    "@vaadin/text-field": "25.2.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha11",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.2.0-alpha1",
-    "@vaadin/chai-plugins": "25.2.0-alpha1",
-    "@vaadin/test-runner-commands": "25.2.0-alpha1",
+    "@vaadin/aura": "25.2.0-alpha11",
+    "@vaadin/chai-plugins": "25.2.0-alpha11",
+    "@vaadin/test-runner-commands": "25.2.0-alpha11",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha11",
     "sinon": "^21.0.2"
   },
   "cvdlName": "vaadin-crud",
@@ -61,5 +61,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "866f813f89655a351cbd25328eba1fcb317e267d"
+  "gitHead": "fdc37e932709f95491a027aeb2090911cb7528c6"
 }

package/src/vaadin-crud-dialog.js

@@ -4,7 +4,6 @@
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
- *
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
@@ -25,9 +24,6 @@ import { crudDialogOverlayStyles } from './styles/vaadin-crud-dialog-overlay-bas
  *
  * @customElement vaadin-crud-dialog
  * @extends HTMLElement
- * @mixes DirMixin
- * @mixes OverlayMixin
- * @mixes ThemableMixin
  * @private
  */
 class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {

package/src/vaadin-crud-edit.js

@@ -51,18 +51,11 @@ class CrudEdit extends Button {
   /** @private */
   __onClick(e) {
     const tr = e.target.parentElement.assignedSlot.parentElement.parentElement;
+    /** @internal to not document it in CEM */
     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);

package/src/vaadin-crud-form.js

@@ -4,7 +4,6 @@
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
- *
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
@@ -19,7 +18,6 @@ import { IncludedMixin } from './vaadin-crud-include-mixin.js';
  *
  * @customElement vaadin-crud-form
  * @extends FormLayout
- * @mixes IncludedMixin
  * @private
  */
 class CrudForm extends IncludedMixin(FormLayout) {

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

@@ -4,7 +4,6 @@
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
- *
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
@@ -13,9 +12,6 @@ import { IncludedMixin } from './vaadin-crud-include-mixin.js';
 
 /**
  * A mixin providing common crud-grid functionality.
- *
- * @polymerMixin
- * @mixes IncludedMixin
  */
 export const CrudGridMixin = (superClass) =>
   class extends IncludedMixin(superClass) {
@@ -62,7 +58,7 @@ export const CrudGridMixin = (superClass) =>
 
     /** @private */
     __onItemsChange(items) {
-      if ((!this.dataProvider || this.dataProvider === this._arrayDataProvider) && !this.include && items && items[0]) {
+      if ((!this.dataProvider || this.dataProvider === this._arrayDataProvider) && !this.include && items?.[0]) {
         this._configure(items[0]);
       }
     }

package/src/vaadin-crud-grid.js

@@ -4,7 +4,6 @@
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
- *
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
@@ -22,7 +21,6 @@ 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) {

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

@@ -4,15 +4,11 @@
  *
  * 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 { setProperty } from './vaadin-crud-helpers.js';
 
-/**
- * @polymerMixin
- */
 export const IncludedMixin = (superClass) =>
   class IncludedMixin extends superClass {
     static get properties() {

package/src/vaadin-crud-mixin.js

@@ -4,7 +4,6 @@
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
- *
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
@@ -44,12 +43,9 @@ const DEFAULT_I18N = {
 
 /**
  * A mixin providing common crud functionality.
- *
- * @polymerMixin
- * @mixes I18nMixin
  */
 export const CrudMixin = (superClass) =>
-  class extends I18nMixin(DEFAULT_I18N, superClass) {
+  class extends I18nMixin(superClass) {
     static get properties() {
       return {
         /**
@@ -304,6 +300,10 @@ export const CrudMixin = (superClass) =>
       ];
     }
 
+    static get defaultI18n() {
+      return DEFAULT_I18N;
+    }
+
     /**
      * The object used to localize this component. To change the default
      * localization, replace this with an object that provides all properties, or
@@ -793,7 +793,7 @@ export const CrudMixin = (superClass) =>
     __createDataProviderProxy(dataProvider) {
       return (params, callback) => {
         const callbackProxy = (chunk, size) => {
-          if (chunk && chunk[0]) {
+          if (chunk?.[0]) {
             this.__model = chunk[0];
           }
 
@@ -1003,45 +1003,4 @@ export const CrudMixin = (superClass) =>
         element.removeAttribute('aria-hidden');
       }
     }
-
-    /**
-     * Fired when user wants to edit an existing item. If the default is prevented, then
-     * a new item is not assigned to the form, giving that responsibility to the app, though
-     * dialog is always opened.
-     *
-     * @event edit
-     * @param {Object} detail.item the item to edit
-     */
-
-    /**
-     * Fired when user wants to create a new item.
-     *
-     * @event new
-     */
-
-    /**
-     * Fired when user wants to delete item. If the default is prevented, then
-     * no action is performed, items array is not modified nor dialog closed
-     *
-     * @event delete
-     * @param {Object} detail.item the item to delete
-     */
-
-    /**
-     * Fired when user discards edition. If the default is prevented, then
-     * no action is performed, user is responsible to close dialog and reset
-     * item and grid.
-     *
-     * @event cancel
-     * @param {Object} detail.item the item to delete
-     */
-
-    /**
-     * Fired when user wants to save a new or an existing item. If the default is prevented, then
-     * no action is performed, items array is not modified nor dialog closed
-     *
-     * @event save
-     * @param {Object} detail.item the item to save
-     * @param {Object} detail.new whether the item is a new one
-     */
   };

package/src/vaadin-crud.d.ts

@@ -153,24 +153,39 @@ export * from './vaadin-crud-mixin.js';
  * `footer`   | The footer of the dialog
  * `content`  | The wrapper for the form
  *
- * The following custom properties are available:
- *
- * Custom Property | Description | Default
- * ----------------|----------------
- * --vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%
- * --vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                    |
+ * :--------------------------------------|
+ * | `--vaadin-crud-background`           |
+ * | `--vaadin-crud-border-color`         |
+ * | `--vaadin-crud-border-radius`        |
+ * | `--vaadin-crud-border-width`         |
+ * | `--vaadin-crud-editor-max-height`    |
+ * | `--vaadin-crud-editor-max-width`     |
+ * | `--vaadin-crud-footer-background`    |
+ * | `--vaadin-crud-footer-gap`           |
+ * | `--vaadin-crud-footer-padding`       |
+ * | `--vaadin-crud-form-padding`         |
+ * | `--vaadin-crud-header-color`         |
+ * | `--vaadin-crud-header-font-size`     |
+ * | `--vaadin-crud-header-font-weight`   |
+ * | `--vaadin-crud-header-line-height`   |
+ * | `--vaadin-crud-header-padding`       |
+ * | `--vaadin-crud-toolbar-background`   |
+ * | `--vaadin-crud-toolbar-padding`      |
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} editor-opened-changed - Fired when the `editorOpened` property changes.
- * @fires {CustomEvent} edited-item-changed - Fired when `editedItem` property changes.
+ * @fires {CustomEvent} edited-item-changed - Fired when the `editedItem` property changes.
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
  * @fires {CustomEvent} size-changed - Fired when the `size` property changes.
  * @fires {CustomEvent} new - Fired when user wants to create a new item.
- * @fires {CustomEvent} edit - Fired when user wants to edit an existing item.
- * @fires {CustomEvent} delete - Fired when user wants to delete item.
- * @fires {CustomEvent} save - Fired when user wants to save a new or an existing item.
- * @fires {CustomEvent} cancel - Fired when user discards edition.
+ * @fires {CustomEvent} edit - Fired when user wants to edit an existing item. If the default is prevented, a new item is not assigned to the form, but the dialog is still opened.
+ * @fires {CustomEvent} delete - Fired when user wants to delete item. If the default is prevented, no action is performed: the items array is not modified and the dialog is not closed.
+ * @fires {CustomEvent} save - Fired when user wants to save a new or an existing item. If the default is prevented, no action is performed: the items array is not modified and the dialog is not closed.
+ * @fires {CustomEvent} cancel - Fired when user discards edition. If the default is prevented, no action is performed; the listener is responsible for closing the dialog and resetting the item and grid.
  */
 declare class Crud<Item = GridDefaultItem> extends HTMLElement {
   addEventListener<K extends keyof CrudEventMap<Item>>(

package/src/vaadin-crud.js

@@ -4,7 +4,6 @@
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
- *
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
@@ -161,30 +160,42 @@ import { CrudMixin } from './vaadin-crud-mixin.js';
  * `footer`   | The footer of the dialog
  * `content`  | The wrapper for the form
  *
- * The following custom properties are available:
- *
- * Custom Property | Description | Default
- * ----------------|----------------
- * --vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%
- * --vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                    |
+ * :--------------------------------------|
+ * | `--vaadin-crud-background`           |
+ * | `--vaadin-crud-border-color`         |
+ * | `--vaadin-crud-border-radius`        |
+ * | `--vaadin-crud-border-width`         |
+ * | `--vaadin-crud-editor-max-height`    |
+ * | `--vaadin-crud-editor-max-width`     |
+ * | `--vaadin-crud-footer-background`    |
+ * | `--vaadin-crud-footer-gap`           |
+ * | `--vaadin-crud-footer-padding`       |
+ * | `--vaadin-crud-form-padding`         |
+ * | `--vaadin-crud-header-color`         |
+ * | `--vaadin-crud-header-font-size`     |
+ * | `--vaadin-crud-header-font-weight`   |
+ * | `--vaadin-crud-header-line-height`   |
+ * | `--vaadin-crud-header-padding`       |
+ * | `--vaadin-crud-toolbar-background`   |
+ * | `--vaadin-crud-toolbar-padding`      |
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} editor-opened-changed - Fired when the `editorOpened` property changes.
- * @fires {CustomEvent} edited-item-changed - Fired when `editedItem` property changes.
+ * @fires {CustomEvent} edited-item-changed - Fired when the `editedItem` property changes.
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
  * @fires {CustomEvent} size-changed - Fired when the `size` property changes.
  * @fires {CustomEvent} new - Fired when user wants to create a new item.
- * @fires {CustomEvent} edit - Fired when user wants to edit an existing item.
- * @fires {CustomEvent} delete - Fired when user wants to delete item.
- * @fires {CustomEvent} save - Fired when user wants to save a new or an existing item.
- * @fires {CustomEvent} cancel - Fired when user discards edition.
+ * @fires {CustomEvent} edit - Fired when user wants to edit an existing item. If the default is prevented, a new item is not assigned to the form, but the dialog is still opened.
+ * @fires {CustomEvent} delete - Fired when user wants to delete item. If the default is prevented, no action is performed: the items array is not modified and the dialog is not closed.
+ * @fires {CustomEvent} save - Fired when user wants to save a new or an existing item. If the default is prevented, no action is performed: the items array is not modified and the dialog is not closed.
+ * @fires {CustomEvent} cancel - Fired when user discards edition. If the default is prevented, no action is performed; the listener is responsible for closing the dialog and resetting the item and grid.
  *
  * @customElement vaadin-crud
  * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes ThemableMixin
- * @mixes CrudMixin
  */
 class Crud extends CrudMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {