From d66189b76221c1aef3968c5e28fdcc0f252346f5 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Fri, 13 Dec 2024 17:09:09 +0200
Subject: [PATCH 1/7] experiment: add LitElement based version of vaadin-crud

---
 packages/crud/src/vaadin-crud-edit-column.js  |  18 +--
 packages/crud/src/vaadin-crud-form.js         |  26 +---
 packages/crud/src/vaadin-crud-grid-mixin.js   |   1 +
 packages/crud/src/vaadin-crud-helpers.js      |  44 ++++++
 .../crud/src/vaadin-crud-include-mixin.js     |   2 +
 packages/crud/src/vaadin-crud-mixin.js        |  16 ++-
 packages/crud/src/vaadin-lit-crud-dialog.d.ts |  11 ++
 packages/crud/src/vaadin-lit-crud-dialog.js   | 126 ++++++++++++++++++
 .../crud/src/vaadin-lit-crud-edit-column.d.ts |  11 ++
 .../crud/src/vaadin-lit-crud-edit-column.js   |  65 +++++++++
 packages/crud/src/vaadin-lit-crud-edit.d.ts   |  11 ++
 packages/crud/src/vaadin-lit-crud-edit.js     |  81 +++++++++++
 packages/crud/src/vaadin-lit-crud-form.d.ts   |  11 ++
 packages/crud/src/vaadin-lit-crud-form.js     |  77 +++++++++++
 packages/crud/src/vaadin-lit-crud-grid.d.ts   |  11 ++
 packages/crud/src/vaadin-lit-crud-grid.js     |  29 ++++
 packages/crud/src/vaadin-lit-crud.js          | 115 ++++++++++++++++
 packages/crud/test/a11y-lit.test.js           |   2 +
 packages/crud/test/a11y-polymer.test.js       |   2 +
 .../test/{a11y.test.js => a11y.common.js}     |   1 -
 packages/crud/test/crud-buttons-lit.test.js   |   2 +
 .../crud/test/crud-buttons-polymer.test.js    |   2 +
 ...buttons.test.js => crud-buttons.common.js} |   3 +-
 packages/crud/test/crud-editor-lit.test.js    |   2 +
 .../crud/test/crud-editor-polymer.test.js     |   2 +
 ...d-editor.test.js => crud-editor.common.js} |   3 +-
 packages/crud/test/crud-form-lit.test.js      |   2 +
 packages/crud/test/crud-form-polymer.test.js  |   2 +
 ...{crud-form.test.js => crud-form.common.js} |   1 -
 packages/crud/test/crud-grid-lit.test.js      |   2 +
 packages/crud/test/crud-grid-polymer.test.js  |   2 +
 .../test/crud-grid-properties-lit.test.js     |   2 +
 .../test/crud-grid-properties-polymer.test.js |   2 +
 ...test.js => crud-grid-properties.common.js} |   1 -
 ...{crud-grid.test.js => crud-grid.common.js} |   1 -
 packages/crud/test/crud-lit.test.js           |   2 +
 packages/crud/test/crud-polymer.test.js       |   2 +
 .../test/{crud.test.js => crud.common.js}     |   4 +-
 packages/crud/theme/lumo/vaadin-lit-crud.js   |   8 ++
 .../crud/theme/material/vaadin-lit-crud.js    |   8 ++
 packages/crud/vaadin-lit-crud-edit .js        |   1 +
 packages/crud/vaadin-lit-crud-edit-column.js  |   1 +
 packages/crud/vaadin-lit-crud.js              |   2 +
 43 files changed, 669 insertions(+), 48 deletions(-)
 create mode 100644 packages/crud/src/vaadin-lit-crud-dialog.d.ts
 create mode 100644 packages/crud/src/vaadin-lit-crud-dialog.js
 create mode 100644 packages/crud/src/vaadin-lit-crud-edit-column.d.ts
 create mode 100644 packages/crud/src/vaadin-lit-crud-edit-column.js
 create mode 100644 packages/crud/src/vaadin-lit-crud-edit.d.ts
 create mode 100644 packages/crud/src/vaadin-lit-crud-edit.js
 create mode 100644 packages/crud/src/vaadin-lit-crud-form.d.ts
 create mode 100644 packages/crud/src/vaadin-lit-crud-form.js
 create mode 100644 packages/crud/src/vaadin-lit-crud-grid.d.ts
 create mode 100644 packages/crud/src/vaadin-lit-crud-grid.js
 create mode 100644 packages/crud/src/vaadin-lit-crud.js
 create mode 100644 packages/crud/test/a11y-lit.test.js
 create mode 100644 packages/crud/test/a11y-polymer.test.js
 rename packages/crud/test/{a11y.test.js => a11y.common.js} (99%)
 create mode 100644 packages/crud/test/crud-buttons-lit.test.js
 create mode 100644 packages/crud/test/crud-buttons-polymer.test.js
 rename packages/crud/test/{crud-buttons.test.js => crud-buttons.common.js} (99%)
 create mode 100644 packages/crud/test/crud-editor-lit.test.js
 create mode 100644 packages/crud/test/crud-editor-polymer.test.js
 rename packages/crud/test/{crud-editor.test.js => crud-editor.common.js} (98%)
 create mode 100644 packages/crud/test/crud-form-lit.test.js
 create mode 100644 packages/crud/test/crud-form-polymer.test.js
 rename packages/crud/test/{crud-form.test.js => crud-form.common.js} (99%)
 create mode 100644 packages/crud/test/crud-grid-lit.test.js
 create mode 100644 packages/crud/test/crud-grid-polymer.test.js
 create mode 100644 packages/crud/test/crud-grid-properties-lit.test.js
 create mode 100644 packages/crud/test/crud-grid-properties-polymer.test.js
 rename packages/crud/test/{crud-grid-properties.test.js => crud-grid-properties.common.js} (99%)
 rename packages/crud/test/{crud-grid.test.js => crud-grid.common.js} (99%)
 create mode 100644 packages/crud/test/crud-lit.test.js
 create mode 100644 packages/crud/test/crud-polymer.test.js
 rename packages/crud/test/{crud.test.js => crud.common.js} (99%)
 create mode 100644 packages/crud/theme/lumo/vaadin-lit-crud.js
 create mode 100644 packages/crud/theme/material/vaadin-lit-crud.js
 create mode 100644 packages/crud/vaadin-lit-crud-edit .js
 create mode 100644 packages/crud/vaadin-lit-crud-edit-column.js
 create mode 100644 packages/crud/vaadin-lit-crud.js

diff --git a/packages/crud/src/vaadin-crud-edit-column.js b/packages/crud/src/vaadin-crud-edit-column.js
index 9110084fd73..498dbe8b83c 100644
--- a/packages/crud/src/vaadin-crud-edit-column.js
+++ b/packages/crud/src/vaadin-crud-edit-column.js
@@ -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);
   }
 }
 
diff --git a/packages/crud/src/vaadin-crud-form.js b/packages/crud/src/vaadin-crud-form.js
index 161f14d46df..0f352610272 100644
--- a/packages/crud/src/vaadin-crud-form.js
+++ b/packages/crud/src/vaadin-crud-form.js
@@ -11,7 +11,8 @@
 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 } from './vaadin-crud-helpers.js';
+import { createFields } from './vaadin-crud-helpers.js';
 import { IncludedMixin } from './vaadin-crud-include-mixin.js';
 
 /**
@@ -64,31 +65,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);
   }
 }
 
diff --git a/packages/crud/src/vaadin-crud-grid-mixin.js b/packages/crud/src/vaadin-crud-grid-mixin.js
index 0bd1c34d881..2bc42a04b08 100644
--- a/packages/crud/src/vaadin-crud-grid-mixin.js
+++ b/packages/crud/src/vaadin-crud-grid-mixin.js
@@ -45,6 +45,7 @@ export const CrudGridMixin = (superClass) =>
          */
         hideEditColumn: {
           type: Boolean,
+          sync: true,
         },
       };
     }
diff --git a/packages/crud/src/vaadin-crud-helpers.js b/packages/crud/src/vaadin-crud-helpers.js
index 068090e5587..a4a063c3957 100644
--- a/packages/crud/src/vaadin-crud-helpers.js
+++ b/packages/crud/src/vaadin-crud-helpers.js
@@ -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') {
+      crudForm.__createFields(parent, object[prop], newPath);
+    } else {
+      crudForm.__createField(parent, newPath);
+    }
+  });
+  if (!crudForm._fields.length) {
+    crudForm._fields = undefined;
+  }
+}
diff --git a/packages/crud/src/vaadin-crud-include-mixin.js b/packages/crud/src/vaadin-crud-include-mixin.js
index d5ef67e0156..923b60dafc0 100644
--- a/packages/crud/src/vaadin-crud-include-mixin.js
+++ b/packages/crud/src/vaadin-crud-include-mixin.js
@@ -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,
         },
       };
     }
diff --git a/packages/crud/src/vaadin-crud-mixin.js b/packages/crud/src/vaadin-crud-mixin.js
index 899d46f7d06..3ac598136a5 100644
--- a/packages/crud/src/vaadin-crud-mixin.js
+++ b/packages/crud/src/vaadin-crud-mixin.js
@@ -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,
         },
 
         /**
@@ -369,6 +379,10 @@ export const CrudMixin = (superClass) =>
     ready() {
       super.ready();
 
+      if (this.$.dialog.performUpdate) {
+        this.$.dialog.performUpdate();
+      }
+
       this.$.dialog.$.overlay.addEventListener('vaadin-overlay-outside-click', this.__cancel);
       this.$.dialog.$.overlay.addEventListener('vaadin-overlay-escape-press', this.__cancel);
 
diff --git a/packages/crud/src/vaadin-lit-crud-dialog.d.ts b/packages/crud/src/vaadin-lit-crud-dialog.d.ts
new file mode 100644
index 00000000000..58f73793621
--- /dev/null
+++ b/packages/crud/src/vaadin-lit-crud-dialog.d.ts
@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 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';
diff --git a/packages/crud/src/vaadin-lit-crud-dialog.js b/packages/crud/src/vaadin-lit-crud-dialog.js
new file mode 100644
index 00000000000..bd239adf76b
--- /dev/null
+++ b/packages/crud/src/vaadin-lit-crud-dialog.js
@@ -0,0 +1,126 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 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 { 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.
+ *
+ * @customElement
+ * @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];
+  }
+
+  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,
+      },
+    };
+  }
+
+  render() {
+    return html`
+      <vaadin-crud-dialog-overlay
+        id="overlay"
+        .opened="${this.opened}"
+        .ariaLabel="${this.ariaLabel}"
+        @opened-changed="${this._onOverlayOpened}"
+        @mousedown="${this._bringOverlayToFront}"
+        @touchstart="${this._bringOverlayToFront}"
+        theme="${this._theme} || ''"
+        .modeless="${this.modeless}"
+        .withBackdrop="${!this.modeless}"
+        .resizable="${this.resizable}"
+        .fullscreen="${this.fullscreen}"
+        role="dialog"
+        focus-trap
+      ></vaadin-crud-dialog-overlay>
+    `;
+  }
+}
+
+defineCustomElement(CrudDialog);
diff --git a/packages/crud/src/vaadin-lit-crud-edit-column.d.ts b/packages/crud/src/vaadin-lit-crud-edit-column.d.ts
new file mode 100644
index 00000000000..ed14b3934e1
--- /dev/null
+++ b/packages/crud/src/vaadin-lit-crud-edit-column.d.ts
@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 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';
diff --git a/packages/crud/src/vaadin-lit-crud-edit-column.js b/packages/crud/src/vaadin-lit-crud-edit-column.js
new file mode 100644
index 00000000000..40aa95a45ef
--- /dev/null
+++ b/packages/crud/src/vaadin-lit-crud-edit-column.js
@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 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';
+
+/**
+ *
+ */
+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 };
diff --git a/packages/crud/src/vaadin-lit-crud-edit.d.ts b/packages/crud/src/vaadin-lit-crud-edit.d.ts
new file mode 100644
index 00000000000..be0c5bf9118
--- /dev/null
+++ b/packages/crud/src/vaadin-lit-crud-edit.d.ts
@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 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';
diff --git a/packages/crud/src/vaadin-lit-crud-edit.js b/packages/crud/src/vaadin-lit-crud-edit.js
new file mode 100644
index 00000000000..a0181df84bb
--- /dev/null
+++ b/packages/crud/src/vaadin-lit-crud-edit.js
@@ -0,0 +1,81 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 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, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * Use registerStyles instead of the `<style>` tag to make sure
+ * that this CSS will override core styles of `vaadin-button`.
+ */
+registerStyles(
+  'vaadin-crud-edit',
+  css`
+    :host {
+      display: block;
+    }
+  `,
+  { moduleId: 'vaadin-crud-edit-styles' },
+);
+
+/**
+ * `<vaadin-crud-edit>` is a helper element for `<vaadin-grid-column>` that provides
+ * an easily themable button that fires an `edit` event with the row item as detail
+ * when clicked.
+ *
+ * Typical usage is in a `<vaadin-grid-column>` of a custom `<vaadin-grid>` inside
+ * a `<vaadin-crud>` to enable editing.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes ThemableMixin
+ */
+class CrudEdit extends Button {
+  static get is() {
+    return 'vaadin-crud-edit';
+  }
+
+  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 };
diff --git a/packages/crud/src/vaadin-lit-crud-form.d.ts b/packages/crud/src/vaadin-lit-crud-form.d.ts
new file mode 100644
index 00000000000..c5d89d5e322
--- /dev/null
+++ b/packages/crud/src/vaadin-lit-crud-form.d.ts
@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 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';
diff --git a/packages/crud/src/vaadin-lit-crud-form.js b/packages/crud/src/vaadin-lit-crud-form.js
new file mode 100644
index 00000000000..9ef884c744b
--- /dev/null
+++ b/packages/crud/src/vaadin-lit-crud-form.js
@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 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';
+
+/**
+ *
+ * @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 };
diff --git a/packages/crud/src/vaadin-lit-crud-grid.d.ts b/packages/crud/src/vaadin-lit-crud-grid.d.ts
new file mode 100644
index 00000000000..9869db5c419
--- /dev/null
+++ b/packages/crud/src/vaadin-lit-crud-grid.d.ts
@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 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';
diff --git a/packages/crud/src/vaadin-lit-crud-grid.js b/packages/crud/src/vaadin-lit-crud-grid.js
new file mode 100644
index 00000000000..c7415444e4f
--- /dev/null
+++ b/packages/crud/src/vaadin-lit-crud-grid.js
@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 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';
+
+/**
+ *
+ */
+class CrudGrid extends CrudGridMixin(Grid) {
+  static get is() {
+    return 'vaadin-crud-grid';
+  }
+}
+defineCustomElement(CrudGrid);
+export { CrudGrid };
diff --git a/packages/crud/src/vaadin-lit-crud.js b/packages/crud/src/vaadin-lit-crud.js
new file mode 100644
index 00000000000..63e3d95f8fc
--- /dev/null
+++ b/packages/crud/src/vaadin-lit-crud.js
@@ -0,0 +1,115 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 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 { 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';
+
+/**
+ *
+ */
+class Crud extends ControllerMixin(ElementMixin(ThemableMixin(CrudMixin(PolylitMixin(LitElement))))) {
+  static get styles() {
+    return crudStyles;
+  }
+
+  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="${this._theme || ''}"
+        @opened-changed="${this.__onDialogOpened}"
+      ></vaadin-crud-dialog>
+
+      <vaadin-confirm-dialog
+        theme="${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="${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 };
diff --git a/packages/crud/test/a11y-lit.test.js b/packages/crud/test/a11y-lit.test.js
new file mode 100644
index 00000000000..c8ac3e97911
--- /dev/null
+++ b/packages/crud/test/a11y-lit.test.js
@@ -0,0 +1,2 @@
+import '../src/vaadin-lit-crud.js';
+import './a11y.common.js';
diff --git a/packages/crud/test/a11y-polymer.test.js b/packages/crud/test/a11y-polymer.test.js
new file mode 100644
index 00000000000..0f630b6cfba
--- /dev/null
+++ b/packages/crud/test/a11y-polymer.test.js
@@ -0,0 +1,2 @@
+import '../src/vaadin-crud.js';
+import './a11y.common.js';
diff --git a/packages/crud/test/a11y.test.js b/packages/crud/test/a11y.common.js
similarity index 99%
rename from packages/crud/test/a11y.test.js
rename to packages/crud/test/a11y.common.js
index d0fe0615e19..afdb283bbaf 100644
--- a/packages/crud/test/a11y.test.js
+++ b/packages/crud/test/a11y.common.js
@@ -2,7 +2,6 @@ import { expect } from '@vaadin/chai-plugins';
 import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
 import { setViewport } from '@web/test-runner-commands';
 import { sendKeys } from '@web/test-runner-commands';
-import '../src/vaadin-crud.js';
 import { getDeepActiveElement } from '@vaadin/a11y-base/src/focus-utils.js';
 import { getVisibleRows } from './helpers.js';
 
diff --git a/packages/crud/test/crud-buttons-lit.test.js b/packages/crud/test/crud-buttons-lit.test.js
new file mode 100644
index 00000000000..af05002c48e
--- /dev/null
+++ b/packages/crud/test/crud-buttons-lit.test.js
@@ -0,0 +1,2 @@
+import '../src/vaadin-lit-crud.js';
+import './crud-buttons.common.js';
diff --git a/packages/crud/test/crud-buttons-polymer.test.js b/packages/crud/test/crud-buttons-polymer.test.js
new file mode 100644
index 00000000000..ca6272a4e30
--- /dev/null
+++ b/packages/crud/test/crud-buttons-polymer.test.js
@@ -0,0 +1,2 @@
+import '../src/vaadin-crud.js';
+import './crud-buttons.common.js';
diff --git a/packages/crud/test/crud-buttons.test.js b/packages/crud/test/crud-buttons.common.js
similarity index 99%
rename from packages/crud/test/crud-buttons.test.js
rename to packages/crud/test/crud-buttons.common.js
index d3d9c24c05a..dc35afff0c5 100644
--- a/packages/crud/test/crud-buttons.test.js
+++ b/packages/crud/test/crud-buttons.common.js
@@ -2,7 +2,6 @@ import { expect } from '@vaadin/chai-plugins';
 import { aTimeout, change, fire, fixtureSync, listenOnce, nextRender, oneEvent } from '@vaadin/testing-helpers';
 import { setViewport } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import '../src/vaadin-crud.js';
 import { flushGrid } from './helpers.js';
 
 describe('crud buttons', () => {
@@ -419,7 +418,7 @@ describe('crud buttons', () => {
             confirmCancelOverlay = confirmCancelDialog.$.dialog.$.overlay;
             await nextRender(crud);
             flushGrid(crud._grid);
-            crud.set('items', [{ foo: 'bar' }, { foo: 'baz' }]);
+            crud.items = [{ foo: 'bar' }, { foo: 'baz' }];
           });
 
           afterEach(() => {
diff --git a/packages/crud/test/crud-editor-lit.test.js b/packages/crud/test/crud-editor-lit.test.js
new file mode 100644
index 00000000000..e7aa52bc0e8
--- /dev/null
+++ b/packages/crud/test/crud-editor-lit.test.js
@@ -0,0 +1,2 @@
+import '../vaadin-lit-crud.js';
+import './crud-editor.common.js';
diff --git a/packages/crud/test/crud-editor-polymer.test.js b/packages/crud/test/crud-editor-polymer.test.js
new file mode 100644
index 00000000000..cba4aeb10df
--- /dev/null
+++ b/packages/crud/test/crud-editor-polymer.test.js
@@ -0,0 +1,2 @@
+import '../vaadin-crud.js';
+import './crud-editor.common.js';
diff --git a/packages/crud/test/crud-editor.test.js b/packages/crud/test/crud-editor.common.js
similarity index 98%
rename from packages/crud/test/crud-editor.test.js
rename to packages/crud/test/crud-editor.common.js
index b0fa4995ae1..a08ab6c9172 100644
--- a/packages/crud/test/crud-editor.test.js
+++ b/packages/crud/test/crud-editor.common.js
@@ -1,7 +1,6 @@
 import { expect } from '@vaadin/chai-plugins';
 import { aTimeout, fixtureSync, nextRender } from '@vaadin/testing-helpers';
 import { setViewport } from '@web/test-runner-commands';
-import '../vaadin-crud.js';
 import { flushGrid } from './helpers.js';
 
 describe('crud editor', () => {
@@ -69,7 +68,7 @@ describe('crud editor', () => {
         await nextRender(crud);
         flushGrid(crud._grid);
 
-        crud.set('items', [{ foo: 'bar' }, { foo: 'baz' }]);
+        crud.items = [{ foo: 'bar' }, { foo: 'baz' }];
         dialog = crud.$.dialog;
         overlay = dialog.$.overlay;
         form = crud.querySelector('[slot=form]');
diff --git a/packages/crud/test/crud-form-lit.test.js b/packages/crud/test/crud-form-lit.test.js
new file mode 100644
index 00000000000..e4882794f6a
--- /dev/null
+++ b/packages/crud/test/crud-form-lit.test.js
@@ -0,0 +1,2 @@
+import '../src/vaadin-lit-crud-form.js';
+import './crud-form.common.js';
diff --git a/packages/crud/test/crud-form-polymer.test.js b/packages/crud/test/crud-form-polymer.test.js
new file mode 100644
index 00000000000..4b3167ff1c4
--- /dev/null
+++ b/packages/crud/test/crud-form-polymer.test.js
@@ -0,0 +1,2 @@
+import '../src/vaadin-crud-form.js';
+import './crud-form.common.js';
diff --git a/packages/crud/test/crud-form.test.js b/packages/crud/test/crud-form.common.js
similarity index 99%
rename from packages/crud/test/crud-form.test.js
rename to packages/crud/test/crud-form.common.js
index 90aba12ecb4..54314540f9f 100644
--- a/packages/crud/test/crud-form.test.js
+++ b/packages/crud/test/crud-form.common.js
@@ -1,6 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
 import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
-import '../src/vaadin-crud-form.js';
 
 describe('crud form', () => {
   let crudForm;
diff --git a/packages/crud/test/crud-grid-lit.test.js b/packages/crud/test/crud-grid-lit.test.js
new file mode 100644
index 00000000000..3c353ee8c35
--- /dev/null
+++ b/packages/crud/test/crud-grid-lit.test.js
@@ -0,0 +1,2 @@
+import '../src/vaadin-lit-crud-grid.js';
+import './crud-grid.common.js';
diff --git a/packages/crud/test/crud-grid-polymer.test.js b/packages/crud/test/crud-grid-polymer.test.js
new file mode 100644
index 00000000000..e323477b84c
--- /dev/null
+++ b/packages/crud/test/crud-grid-polymer.test.js
@@ -0,0 +1,2 @@
+import '../src/vaadin-crud-grid.js';
+import './crud-grid.common.js';
diff --git a/packages/crud/test/crud-grid-properties-lit.test.js b/packages/crud/test/crud-grid-properties-lit.test.js
new file mode 100644
index 00000000000..a27e888e88a
--- /dev/null
+++ b/packages/crud/test/crud-grid-properties-lit.test.js
@@ -0,0 +1,2 @@
+import '../src/vaadin-lit-crud.js';
+import './crud-grid-properties.common.js';
diff --git a/packages/crud/test/crud-grid-properties-polymer.test.js b/packages/crud/test/crud-grid-properties-polymer.test.js
new file mode 100644
index 00000000000..62e3596b363
--- /dev/null
+++ b/packages/crud/test/crud-grid-properties-polymer.test.js
@@ -0,0 +1,2 @@
+import '../src/vaadin-crud.js';
+import './crud-grid-properties.common.js';
diff --git a/packages/crud/test/crud-grid-properties.test.js b/packages/crud/test/crud-grid-properties.common.js
similarity index 99%
rename from packages/crud/test/crud-grid-properties.test.js
rename to packages/crud/test/crud-grid-properties.common.js
index 7068355087b..60bd5ea00f1 100644
--- a/packages/crud/test/crud-grid-properties.test.js
+++ b/packages/crud/test/crud-grid-properties.common.js
@@ -1,6 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
 import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
-import '../src/vaadin-crud.js';
 import { getHeaderCellContent } from './helpers.js';
 
 const ITEMS = [{ name: 'John' }, { name: 'Anna' }];
diff --git a/packages/crud/test/crud-grid.test.js b/packages/crud/test/crud-grid.common.js
similarity index 99%
rename from packages/crud/test/crud-grid.test.js
rename to packages/crud/test/crud-grid.common.js
index 64f9ed5aa27..80e6eae469c 100644
--- a/packages/crud/test/crud-grid.test.js
+++ b/packages/crud/test/crud-grid.common.js
@@ -1,6 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
 import { aTimeout, fixtureSync, listenOnce, nextRender } from '@vaadin/testing-helpers';
-import '../src/vaadin-crud-grid.js';
 import { flushGrid, getBodyCellContent, getHeaderCellContent } from './helpers.js';
 
 describe('crud grid', () => {
diff --git a/packages/crud/test/crud-lit.test.js b/packages/crud/test/crud-lit.test.js
new file mode 100644
index 00000000000..edff7bbfdbf
--- /dev/null
+++ b/packages/crud/test/crud-lit.test.js
@@ -0,0 +1,2 @@
+import '../src/vaadin-lit-crud.js';
+import './crud.common.js';
diff --git a/packages/crud/test/crud-polymer.test.js b/packages/crud/test/crud-polymer.test.js
new file mode 100644
index 00000000000..db9923dd2fc
--- /dev/null
+++ b/packages/crud/test/crud-polymer.test.js
@@ -0,0 +1,2 @@
+import '../src/vaadin-crud.js';
+import './crud.common.js';
diff --git a/packages/crud/test/crud.test.js b/packages/crud/test/crud.common.js
similarity index 99%
rename from packages/crud/test/crud.test.js
rename to packages/crud/test/crud.common.js
index 6acd298a7f0..26bfcf7f8d6 100644
--- a/packages/crud/test/crud.test.js
+++ b/packages/crud/test/crud.common.js
@@ -2,7 +2,6 @@ import { expect } from '@vaadin/chai-plugins';
 import { aTimeout, change, fire, fixtureSync, nextRender, oneEvent } from '@vaadin/testing-helpers';
 import { setViewport } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import '../src/vaadin-crud.js';
 import { capitalize, getProperty, setProperty } from '../src/vaadin-crud-helpers.js';
 import { flushGrid, getBodyCellContent } from './helpers.js';
 
@@ -71,8 +70,9 @@ describe('crud', () => {
       expect(crud._grid.querySelector('vaadin-crud-edit').getAttribute('aria-label')).to.be.equal('Editar entidad');
     });
 
-    it('should propagate theme to internal themable components', () => {
+    it('should propagate theme to internal themable components', async () => {
       crud.setAttribute('theme', 'foo');
+      await nextRender();
       [
         crud,
         crud._grid,
diff --git a/packages/crud/theme/lumo/vaadin-lit-crud.js b/packages/crud/theme/lumo/vaadin-lit-crud.js
new file mode 100644
index 00000000000..fea88cf245e
--- /dev/null
+++ b/packages/crud/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';
diff --git a/packages/crud/theme/material/vaadin-lit-crud.js b/packages/crud/theme/material/vaadin-lit-crud.js
new file mode 100644
index 00000000000..f2cf2254c0e
--- /dev/null
+++ b/packages/crud/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';
diff --git a/packages/crud/vaadin-lit-crud-edit .js b/packages/crud/vaadin-lit-crud-edit .js
new file mode 100644
index 00000000000..94c40f5565c
--- /dev/null
+++ b/packages/crud/vaadin-lit-crud-edit .js	
@@ -0,0 +1 @@
+export * from './src/vaadin-lit-crud-edit.js';
diff --git a/packages/crud/vaadin-lit-crud-edit-column.js b/packages/crud/vaadin-lit-crud-edit-column.js
new file mode 100644
index 00000000000..dd0a317a059
--- /dev/null
+++ b/packages/crud/vaadin-lit-crud-edit-column.js
@@ -0,0 +1 @@
+export * from './src/vaadin-lit-crud-edit-column.js';
diff --git a/packages/crud/vaadin-lit-crud.js b/packages/crud/vaadin-lit-crud.js
new file mode 100644
index 00000000000..329388384a4
--- /dev/null
+++ b/packages/crud/vaadin-lit-crud.js
@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-lit-crud.js';
+export * from './src/vaadin-lit-crud.js';

From 5ce170ce506b98ab1087a808f648b5dbd2acaf54 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Wed, 18 Dec 2024 13:59:03 +0200
Subject: [PATCH 2/7] refactor: prepare lit-based components

---
 packages/crud/src/vaadin-lit-crud-dialog.js   |  9 +++--
 .../crud/src/vaadin-lit-crud-edit-column.js   |  5 +++
 packages/crud/src/vaadin-lit-crud-edit.js     | 37 +++++++------------
 packages/crud/src/vaadin-lit-crud-form.js     |  3 ++
 packages/crud/src/vaadin-lit-crud-grid.js     |  6 +++
 packages/crud/src/vaadin-lit-crud.js          | 13 +++++--
 6 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/packages/crud/src/vaadin-lit-crud-dialog.js b/packages/crud/src/vaadin-lit-crud-dialog.js
index bd239adf76b..d7aa675b91a 100644
--- a/packages/crud/src/vaadin-lit-crud-dialog.js
+++ b/packages/crud/src/vaadin-lit-crud-dialog.js
@@ -9,6 +9,7 @@
  * 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';
@@ -20,10 +21,10 @@ 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.
  *
- * @customElement
  * @extends HTMLElement
  * @mixes DirMixin
  * @mixes OverlayMixin
@@ -39,6 +40,7 @@ class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin
     return [overlayStyles, dialogOverlay, resizableOverlay, crudDialogOverlayStyles];
   }
 
+  /** @protected */
   render() {
     return html`
       <div part="backdrop" id="backdrop" .hidden="${!this.withBackdrop}"></div>
@@ -111,11 +113,10 @@ class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(Po
         @opened-changed="${this._onOverlayOpened}"
         @mousedown="${this._bringOverlayToFront}"
         @touchstart="${this._bringOverlayToFront}"
-        theme="${this._theme} || ''"
+        theme="${ifDefined(this._theme)}"
         .modeless="${this.modeless}"
         .withBackdrop="${!this.modeless}"
-        .resizable="${this.resizable}"
-        .fullscreen="${this.fullscreen}"
+        ?fullscreen="${this.fullscreen}"
         role="dialog"
         focus-trap
       ></vaadin-crud-dialog-overlay>
diff --git a/packages/crud/src/vaadin-lit-crud-edit-column.js b/packages/crud/src/vaadin-lit-crud-edit-column.js
index 40aa95a45ef..bce40d974be 100644
--- a/packages/crud/src/vaadin-lit-crud-edit-column.js
+++ b/packages/crud/src/vaadin-lit-crud-edit-column.js
@@ -14,7 +14,12 @@ 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() {
diff --git a/packages/crud/src/vaadin-lit-crud-edit.js b/packages/crud/src/vaadin-lit-crud-edit.js
index a0181df84bb..97412c50cdf 100644
--- a/packages/crud/src/vaadin-lit-crud-edit.js
+++ b/packages/crud/src/vaadin-lit-crud-edit.js
@@ -12,39 +12,30 @@
 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, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
- * Use registerStyles instead of the `<style>` tag to make sure
- * that this CSS will override core styles of `vaadin-button`.
- */
-registerStyles(
-  'vaadin-crud-edit',
-  css`
-    :host {
-      display: block;
-    }
-  `,
-  { moduleId: 'vaadin-crud-edit-styles' },
-);
-
-/**
- * `<vaadin-crud-edit>` is a helper element for `<vaadin-grid-column>` that provides
- * an easily themable button that fires an `edit` event with the row item as detail
- * when clicked.
+ * LitElement based version of `<vaadin-crud-edit>` web component.
  *
- * Typical usage is in a `<vaadin-grid-column>` of a custom `<vaadin-grid>` inside
- * a `<vaadin-crud>` to enable editing.
+ * ## Disclaimer
  *
- * @customElement
- * @extends HTMLElement
- * @mixes ThemableMixin
+ * 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 css`
+      :host {
+        display: block;
+      }
+    `;
+  }
+
+  /** @protected */
   render() {
     return html`
       <div part="icon"></div>
diff --git a/packages/crud/src/vaadin-lit-crud-form.js b/packages/crud/src/vaadin-lit-crud-form.js
index 9ef884c744b..4eaab6f00a5 100644
--- a/packages/crud/src/vaadin-lit-crud-form.js
+++ b/packages/crud/src/vaadin-lit-crud-form.js
@@ -15,7 +15,10 @@ 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) {
diff --git a/packages/crud/src/vaadin-lit-crud-grid.js b/packages/crud/src/vaadin-lit-crud-grid.js
index c7415444e4f..49ad7c6008e 100644
--- a/packages/crud/src/vaadin-lit-crud-grid.js
+++ b/packages/crud/src/vaadin-lit-crud-grid.js
@@ -18,12 +18,18 @@ 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 };
diff --git a/packages/crud/src/vaadin-lit-crud.js b/packages/crud/src/vaadin-lit-crud.js
index 63e3d95f8fc..c24597e6175 100644
--- a/packages/crud/src/vaadin-lit-crud.js
+++ b/packages/crud/src/vaadin-lit-crud.js
@@ -14,6 +14,7 @@ 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-html/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';
@@ -23,13 +24,19 @@ 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">
@@ -71,12 +78,12 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(CrudMixin(PolylitM
         .ariaLabel="${this.__dialogAriaLabel}"
         .noCloseOnOutsideClick="${this.__isDirty}"
         .noCloseOnEsc="${this.__isDirty}"
-        theme="${this._theme || ''}"
+        theme="${ifDefined(this._theme)}"
         @opened-changed="${this.__onDialogOpened}"
       ></vaadin-crud-dialog>
 
       <vaadin-confirm-dialog
-        theme="${this._theme || ''}"
+        theme="${ifDefined(this._theme)}"
         id="confirmCancel"
         @confirm="${this.__confirmCancel}"
         cancel-button-visible
@@ -88,7 +95,7 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(CrudMixin(PolylitM
       ></vaadin-confirm-dialog>
 
       <vaadin-confirm-dialog
-        theme="${this._theme || ''}"
+        theme="${ifDefined(this._theme)}"
         id="confirmDelete"
         @confirm="${this.__confirmDelete}"
         cancel-button-visible

From 5a07d10a4dc50938966757426beb1a979be86294 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Wed, 18 Dec 2024 14:33:27 +0200
Subject: [PATCH 3/7] browser-specific fixes

---
 packages/crud/src/vaadin-lit-crud-dialog.js | 2 +-
 packages/crud/test/crud-buttons.common.js   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/crud/src/vaadin-lit-crud-dialog.js b/packages/crud/src/vaadin-lit-crud-dialog.js
index d7aa675b91a..32c8143bbd2 100644
--- a/packages/crud/src/vaadin-lit-crud-dialog.js
+++ b/packages/crud/src/vaadin-lit-crud-dialog.js
@@ -109,7 +109,7 @@ class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(Po
       <vaadin-crud-dialog-overlay
         id="overlay"
         .opened="${this.opened}"
-        .ariaLabel="${this.ariaLabel}"
+        aria-label="${ifDefined(this.ariaLabel)}"
         @opened-changed="${this._onOverlayOpened}"
         @mousedown="${this._bringOverlayToFront}"
         @touchstart="${this._bringOverlayToFront}"
diff --git a/packages/crud/test/crud-buttons.common.js b/packages/crud/test/crud-buttons.common.js
index dc35afff0c5..495682cb2bd 100644
--- a/packages/crud/test/crud-buttons.common.js
+++ b/packages/crud/test/crud-buttons.common.js
@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { aTimeout, change, fire, fixtureSync, listenOnce, nextRender, oneEvent } from '@vaadin/testing-helpers';
+import { aTimeout, change, click, fire, fixtureSync, listenOnce, nextRender, oneEvent } from '@vaadin/testing-helpers';
 import { setViewport } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import { flushGrid } from './helpers.js';
@@ -124,7 +124,7 @@ describe('crud buttons', () => {
           await nextRender();
           crud._form._fields[0].value = 'baz';
           change(crud._form);
-          saveButton.click();
+          click(saveButton);
           expect(crud.items[1].foo).to.be.equal('baz');
         });
 

From 540c6da76a7ecc45bdc2deff3607135b39240406 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Wed, 18 Dec 2024 14:47:39 +0200
Subject: [PATCH 4/7] ignore sonar in a test setup

---
 packages/crud/test/crud-grid.common.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/crud/test/crud-grid.common.js b/packages/crud/test/crud-grid.common.js
index 80e6eae469c..4952b97a20a 100644
--- a/packages/crud/test/crud-grid.common.js
+++ b/packages/crud/test/crud-grid.common.js
@@ -12,7 +12,7 @@ describe('crud grid', () => {
         first: 'Grant',
         last: 'Andrews',
       },
-      password: 'lorem',
+      password: 'lorem', // NOSONAR
       role: 'operator',
     },
   ];

From d7bd9524c584f2350e642daf2fe2c532432be8f6 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Wed, 18 Dec 2024 15:08:21 +0200
Subject: [PATCH 5/7] remove a no longer needed change

---
 packages/crud/src/vaadin-crud-mixin.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/crud/src/vaadin-crud-mixin.js b/packages/crud/src/vaadin-crud-mixin.js
index 3ac598136a5..b43db9986ac 100644
--- a/packages/crud/src/vaadin-crud-mixin.js
+++ b/packages/crud/src/vaadin-crud-mixin.js
@@ -379,10 +379,6 @@ export const CrudMixin = (superClass) =>
     ready() {
       super.ready();
 
-      if (this.$.dialog.performUpdate) {
-        this.$.dialog.performUpdate();
-      }
-
       this.$.dialog.$.overlay.addEventListener('vaadin-overlay-outside-click', this.__cancel);
       this.$.dialog.$.overlay.addEventListener('vaadin-overlay-escape-press', this.__cancel);
 

From a527c14b6151600f9769e8410c88ff911a7de6fb Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Thu, 19 Dec 2024 17:28:16 +0200
Subject: [PATCH 6/7] address review comments

---
 packages/crud/src/vaadin-crud-form.js     |  3 +--
 packages/crud/src/vaadin-crud-helpers.js  |  4 ++--
 packages/crud/src/vaadin-lit-crud-edit.js | 13 ++++++++-----
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/crud/src/vaadin-crud-form.js b/packages/crud/src/vaadin-crud-form.js
index 0f352610272..0aff6f99ef1 100644
--- a/packages/crud/src/vaadin-crud-form.js
+++ b/packages/crud/src/vaadin-crud-form.js
@@ -11,8 +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 { createField } from './vaadin-crud-helpers.js';
-import { createFields } from './vaadin-crud-helpers.js';
+import { createField, createFields } from './vaadin-crud-helpers.js';
 import { IncludedMixin } from './vaadin-crud-include-mixin.js';
 
 /**
diff --git a/packages/crud/src/vaadin-crud-helpers.js b/packages/crud/src/vaadin-crud-helpers.js
index a4a063c3957..e945d9c8f13 100644
--- a/packages/crud/src/vaadin-crud-helpers.js
+++ b/packages/crud/src/vaadin-crud-helpers.js
@@ -101,9 +101,9 @@ export function createFields(crudForm, parent, object, path) {
     }
     const newPath = (path ? `${path}.` : '') + prop;
     if (object[prop] && typeof object[prop] === 'object') {
-      crudForm.__createFields(parent, object[prop], newPath);
+      createFields(crudForm, parent, object[prop], newPath);
     } else {
-      crudForm.__createField(parent, newPath);
+      createField(crudForm, parent, newPath);
     }
   });
   if (!crudForm._fields.length) {
diff --git a/packages/crud/src/vaadin-lit-crud-edit.js b/packages/crud/src/vaadin-lit-crud-edit.js
index 97412c50cdf..04a63a81f4f 100644
--- a/packages/crud/src/vaadin-lit-crud-edit.js
+++ b/packages/crud/src/vaadin-lit-crud-edit.js
@@ -28,11 +28,14 @@ class CrudEdit extends Button {
   }
 
   static get styles() {
-    return css`
-      :host {
-        display: block;
-      }
-    `;
+    return [
+      super.styles,
+      css`
+        :host {
+          display: block;
+        }
+      `,
+    ];
   }
 
   /** @protected */

From 71d8e0cc2cfb8bd3fe970ff46210e5a326882a53 Mon Sep 17 00:00:00 2001
From: Serhii Kulykov <iamkulykov@gmail.com>
Date: Fri, 20 Dec 2024 10:30:49 +0200
Subject: [PATCH 7/7] Apply suggestions from code review

---
 packages/crud/src/vaadin-lit-crud-dialog.js | 3 ++-
 packages/crud/src/vaadin-lit-crud.js        | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/crud/src/vaadin-lit-crud-dialog.js b/packages/crud/src/vaadin-lit-crud-dialog.js
index 32c8143bbd2..5fda8242934 100644
--- a/packages/crud/src/vaadin-lit-crud-dialog.js
+++ b/packages/crud/src/vaadin-lit-crud-dialog.js
@@ -43,7 +43,7 @@ class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin
   /** @protected */
   render() {
     return html`
-      <div part="backdrop" id="backdrop" .hidden="${!this.withBackdrop}"></div>
+      <div part="backdrop" id="backdrop" ?hidden="${!this.withBackdrop}"></div>
       <div part="overlay" id="overlay" tabindex="0">
         <section id="resizerContainer" class="resizer-container">
           <header part="header"><slot name="header"></slot></header>
@@ -104,6 +104,7 @@ class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(Po
     };
   }
 
+  /** @protected */
   render() {
     return html`
       <vaadin-crud-dialog-overlay
diff --git a/packages/crud/src/vaadin-lit-crud.js b/packages/crud/src/vaadin-lit-crud.js
index c24597e6175..470b3719109 100644
--- a/packages/crud/src/vaadin-lit-crud.js
+++ b/packages/crud/src/vaadin-lit-crud.js
@@ -14,7 +14,7 @@ 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-html/directives/if-defined.js';
+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';
@@ -54,7 +54,7 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(CrudMixin(PolylitM
           id="editor"
           role="group"
           aria-labelledby="header"
-          .hidden="${this.__computeEditorHidden(this.editorOpened, this._fullscreen, this.editorPosition)}"
+          ?hidden="${this.__computeEditorHidden(this.editorOpened, this._fullscreen, this.editorPosition)}"
         >
           <div part="scroller" id="scroller">
             <div part="header" id="header">