Merge branch 'main' into upgrade-playwright-version

.github/workflows/coverage.yml

@@ -12,7 +12,7 @@ permissions:
 jobs:
   tests:
     name: Unit tests
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4
         with:

.github/workflows/unit-tests.yml

@@ -8,7 +8,7 @@ permissions:
 jobs:
   chrome:
     name: Chrome
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4
         with:
@@ -27,7 +27,7 @@ jobs:
         run: yarn test
   firefox:
     name: Firefox
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4
         with:
@@ -49,7 +49,7 @@ jobs:
         run: yarn test:firefox
   webkit:
     name: WebKit
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4
         with:

.github/workflows/verify.yml

@@ -8,7 +8,7 @@ permissions:
 jobs:
   lint:
     name: Lint
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4
 
@@ -31,7 +31,7 @@ jobs:
         run: yarn lint:types
   snapshots:
     name: Snapshot tests
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4
         with:
@@ -50,7 +50,7 @@ jobs:
         run: yarn test:snapshots
   integration:
     name: Integration tests
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4
         with:

.github/workflows/visual-tests.yml

@@ -8,7 +8,7 @@ permissions:
 jobs:
   lumo:
     name: Lumo
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     if: github.repository_owner == 'vaadin'
 
     steps:
@@ -45,7 +45,7 @@ jobs:
             packages/vaadin-lumo-styles/test/visual/screenshots/failed/*.png
   material:
     name: Material
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     if: github.repository_owner == 'vaadin'
 
     steps:

package.json

@@ -35,7 +35,7 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@types/mocha": "^10.0.7",
     "@types/sinon": "^17.0.3",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/testing-helpers": "^1.1.0",
     "@web/dev-server": "^0.4.3",
     "@web/dev-server-esbuild": "^1.0.2",
     "@web/rollup-plugin-html": "^2.0.0",

packages/a11y-base/package.json

@@ -37,7 +37,7 @@
   },
   "devDependencies": {
     "@vaadin/chai-plugins": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   }
 }

packages/accordion/package.json

@@ -47,7 +47,7 @@
   },
   "devDependencies": {
     "@vaadin/chai-plugins": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
   "web-types": [

packages/app-layout/package.json

@@ -47,7 +47,7 @@
   },
   "devDependencies": {
     "@vaadin/chai-plugins": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
   "web-types": [

packages/avatar-group/package.json

@@ -51,7 +51,7 @@
   },
   "devDependencies": {
     "@vaadin/chai-plugins": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
   "web-types": [

packages/avatar/package.json

@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "@vaadin/chai-plugins": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
   "web-types": [

packages/board/package.json

@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@vaadin/chai-plugins": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
   "cvdlName": "vaadin-board",

packages/button/package.json

@@ -46,7 +46,7 @@
   "devDependencies": {
     "@vaadin/chai-plugins": "24.7.0-alpha2",
     "@vaadin/icon": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
   "web-types": [

packages/card/package.json

@@ -42,7 +42,7 @@
   },
   "devDependencies": {
     "@vaadin/chai-plugins": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
   "web-types": [

packages/charts/package.json

@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@vaadin/chai-plugins": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
   "cvdlName": "vaadin-chart",

packages/checkbox-group/package.json

@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "@vaadin/chai-plugins": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
   "web-types": [

packages/checkbox/package.json

@@ -47,7 +47,7 @@
   },
   "devDependencies": {
     "@vaadin/chai-plugins": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
   "web-types": [

packages/combo-box/package.json

@@ -52,7 +52,7 @@
   },
   "devDependencies": {
     "@vaadin/chai-plugins": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/testing-helpers": "^1.1.0",
     "@vaadin/text-field": "24.7.0-alpha2",
     "sinon": "^18.0.0"
   },

packages/component-base/package.json

@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "@vaadin/chai-plugins": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   }
 }

packages/confirm-dialog/package.json

@@ -49,7 +49,7 @@
   "devDependencies": {
     "@vaadin/a11y-base": "24.7.0-alpha2",
     "@vaadin/chai-plugins": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
   "web-types": [

packages/context-menu/package.json

@@ -52,7 +52,7 @@
   },
   "devDependencies": {
     "@vaadin/chai-plugins": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
   "web-types": [

packages/cookie-consent/package.json

@@ -43,7 +43,7 @@
   },
   "devDependencies": {
     "@vaadin/chai-plugins": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0"
+    "@vaadin/testing-helpers": "^1.1.0"
   },
   "cvdlName": "vaadin-cookie-consent",
   "web-types": [

packages/crud/package.json

@@ -52,7 +52,7 @@
   },
   "devDependencies": {
     "@vaadin/chai-plugins": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
   "cvdlName": "vaadin-crud",

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);
   }
 }
 

packages/crud/src/vaadin-crud-form.js

@@ -11,7 +11,7 @@
 import '@vaadin/text-field/src/vaadin-text-field.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { FormLayout } from '@vaadin/form-layout/src/vaadin-form-layout.js';
-import { capitalize } from './vaadin-crud-helpers.js';
+import { createField, createFields } from './vaadin-crud-helpers.js';
 import { IncludedMixin } from './vaadin-crud-include-mixin.js';
 
 /**
@@ -64,31 +64,12 @@ class CrudForm extends IncludedMixin(FormLayout) {
 
   /** @private */
   __createField(parent, path) {
-    const field = document.createElement('vaadin-text-field');
-    field.label = capitalize(path);
-    field.path = path;
-    field.required = true;
-    parent.appendChild(field);
-    this._fields.push(field);
-    return field;
+    return createField(this, parent, path);
   }
 
   /** @private */
   __createFields(parent, object, path) {
-    Object.keys(object).forEach((prop) => {
-      if (!this.include && this.exclude && this.exclude.test(prop)) {
-        return;
-      }
-      const newPath = (path ? `${path}.` : '') + prop;
-      if (object[prop] && typeof object[prop] === 'object') {
-        this.__createFields(parent, object[prop], newPath);
-      } else {
-        this.__createField(parent, newPath);
-      }
-    });
-    if (!this._fields.length) {
-      this._fields = undefined;
-    }
+    return createFields(this, parent, object, path);
   }
 }
 

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

@@ -45,6 +45,7 @@ export const CrudGridMixin = (superClass) =>
          */
         hideEditColumn: {
           type: Boolean,
+          sync: true,
         },
       };
     }

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') {
+      createFields(crudForm, parent, object[prop], newPath);
+    } else {
+      createField(crudForm, parent, newPath);
+    }
+  });
+  if (!crudForm._fields.length) {
+    crudForm._fields = undefined;
+  }
+}

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,
         },
       };
     }