Merge branch 'latest' into persistence

.eslintrc.json

@@ -9,6 +9,9 @@
     "ecmaVersion": 2021,
     "project": "./tsconfig.json"
   },
+  "plugins": [
+    "simple-import-sort"
+  ],
   "extends": [
     "vaadin/typescript-requiring-type-checking",
     "vaadin/lit",
@@ -34,6 +37,27 @@
     "prefer-destructuring": "off",
     "radix": "off",
     "require-unicode-regexp": "off",
-    "sort-keys": "off"
+    "sort-keys": "off",
+    "simple-import-sort/imports": [
+      "error",
+      {
+        "groups": [
+          [
+            // Side-effects group
+            "^\\u0000",
+            // External group
+            "^",
+            // Vaadin group
+            "^@vaadin",
+            // Frontend group
+            "^Frontend",
+            // Parent group
+            "^\\.\\.",
+            // Sibling group
+            "^\\."
+          ]
+        ]
+      }
+    ]
   }
 }

articles/flow/integrations/spring/configuration.adoc

@@ -78,7 +78,7 @@ After a server restart, the application refrains from opening a new browser tab
 
 The delay duration can be changed by configuring the `vaadin.launch-browser-delay` property to specify the number of minutes before initiating a new tab launch.
 
-To trigger the tab opening immediately, you can perform a project cleanup (e.g., `mvn clean` or `gradle clean`). Or you can delete the [filename]`tab.launch` file in the build directory (e.g., `target` for Maven, `build` for Gradle).
+To trigger the tab opening immediately, you can perform a project cleanup (e.g., `mvn clean` or `gradle clean`). Or you can delete the [filename]`tab.launch` file in the build directory (e.g., `target` for Maven, `build` for Gradle). Another option is to set `vaadin.launch-browser-delay=0` in [filename]`application.properties`.
 
 The example below shows how to set the duration, with the value in minutes:
 

frontend/demo/auth/routing.ts

@@ -1,8 +1,6 @@
 import { useMatches } from 'react-router-dom';
 
-type RouteMetadata = {
-  [key: string]: any;
-};
+type RouteMetadata = Record<string, any>;
 
 /**
  * Returns the `handle` object containing the metadata for the current route,

frontend/demo/component/accordion/accordion-basic.ts

@@ -1,10 +1,9 @@
 import 'Frontend/demo/init'; // hidden-source-line
-
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
 import '@vaadin/accordion';
 import '@vaadin/text-field';
 import '@vaadin/vertical-layout';
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { applyTheme } from 'Frontend/generated/theme';
 
 @customElement('accordion-basic')

frontend/demo/component/accordion/accordion-content.ts

@@ -1,10 +1,9 @@
 import 'Frontend/demo/init'; // hidden-source-line
-
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
 import '@vaadin/accordion';
 import '@vaadin/text-field';
 import '@vaadin/vertical-layout';
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { applyTheme } from 'Frontend/generated/theme';
 
 @customElement('accordion-content')

frontend/demo/component/accordion/accordion-disabled-panels.ts

@@ -1,10 +1,9 @@
 import 'Frontend/demo/init'; // hidden-source-line
-
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
 import '@vaadin/accordion';
 import '@vaadin/text-field';
 import '@vaadin/vertical-layout';
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { applyTheme } from 'Frontend/generated/theme';
 
 @customElement('accordion-disabled-panels')

frontend/demo/component/accordion/accordion-filled-panels.ts

@@ -1,10 +1,9 @@
 import 'Frontend/demo/init'; // hidden-source-line
-
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
 import '@vaadin/accordion';
 import '@vaadin/text-field';
 import '@vaadin/vertical-layout';
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { applyTheme } from 'Frontend/generated/theme';
 
 @customElement('accordion-filled-panels')

frontend/demo/component/accordion/accordion-reverse-panels.ts

@@ -1,10 +1,9 @@
 import 'Frontend/demo/init'; // hidden-source-line
-
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
 import '@vaadin/accordion';
 import '@vaadin/text-field';
 import '@vaadin/vertical-layout';
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { applyTheme } from 'Frontend/generated/theme';
 
 @customElement('accordion-reverse-panels')

frontend/demo/component/accordion/accordion-small-panels.ts

@@ -1,10 +1,9 @@
 import 'Frontend/demo/init'; // hidden-source-line
-
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
 import '@vaadin/accordion';
 import '@vaadin/text-field';
 import '@vaadin/vertical-layout';
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { applyTheme } from 'Frontend/generated/theme';
 
 @customElement('accordion-small-panels')

frontend/demo/component/accordion/accordion-summary.ts

@@ -1,7 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-
-import { html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
 import '@vaadin/accordion';
 import '@vaadin/button';
 import '@vaadin/combo-box';
@@ -10,13 +7,15 @@ import '@vaadin/form-layout';
 import '@vaadin/horizontal-layout';
 import '@vaadin/text-field';
 import '@vaadin/vertical-layout';
+import { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
 import type { AccordionOpenedChangedEvent } from '@vaadin/accordion';
 import type { FormLayoutResponsiveStep } from '@vaadin/form-layout';
-import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
-import { getCountries } from 'Frontend/demo/domain/DataService';
 import { Binder, field } from '@vaadin/hilla-lit-form';
-import PersonModel from 'Frontend/generated/com/vaadin/demo/domain/PersonModel';
+import { getCountries } from 'Frontend/demo/domain/DataService';
 import CardModel from 'Frontend/generated/com/vaadin/demo/domain/CardModel';
+import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
+import PersonModel from 'Frontend/generated/com/vaadin/demo/domain/PersonModel';
 import { applyTheme } from 'Frontend/generated/theme';
 
 const responsiveSteps: FormLayoutResponsiveStep[] = [

frontend/demo/component/app-layout/app-layout-basic.ts

@@ -1,14 +1,14 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
 import '@vaadin/app-layout';
 import '@vaadin/app-layout/vaadin-drawer-toggle';
 import '@vaadin/icon';
 import '@vaadin/icons';
 import '@vaadin/scroller';
 import '@vaadin/side-nav';
-import { applyTheme } from 'Frontend/generated/theme';
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { patchSideNavNavigation } from 'Frontend/demo/component/side-nav/side-nav-helper'; // hidden-source-line
+import { applyTheme } from 'Frontend/generated/theme';
 
 @customElement('app-layout-basic')
 export class Example extends LitElement {

frontend/demo/component/app-layout/app-layout-bottom-navbar.ts

@@ -1,11 +1,11 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
 import '@vaadin/app-layout';
 import '@vaadin/app-layout/vaadin-drawer-toggle';
+import '@vaadin/horizontal-layout';
 import '@vaadin/icon';
 import '@vaadin/icons';
-import '@vaadin/horizontal-layout';
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { applyTheme } from 'Frontend/generated/theme';
 import { patchAppLayoutNavigation } from './app-layout-helper'; // hidden-source-line
 

frontend/demo/component/app-layout/app-layout-drawer.ts

@@ -1,14 +1,14 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
 import '@vaadin/app-layout';
 import '@vaadin/app-layout/vaadin-drawer-toggle';
 import '@vaadin/icon';
 import '@vaadin/icons';
 import '@vaadin/scroller';
 import '@vaadin/side-nav';
-import { applyTheme } from 'Frontend/generated/theme';
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { patchSideNavNavigation } from 'Frontend/demo/component/side-nav/side-nav-helper'; // hidden-source-line
+import { applyTheme } from 'Frontend/generated/theme';
 
 @customElement('app-layout-drawer')
 export class Example extends LitElement {

frontend/demo/component/app-layout/app-layout-height-auto.ts

@@ -1,8 +1,8 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import { css, html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
 import '@vaadin/app-layout';
 import '@vaadin/grid';
+import { css, html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
 import { getPeople } from 'Frontend/demo/domain/DataService';
 import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
 import { applyTheme } from 'Frontend/generated/theme';

frontend/demo/component/app-layout/app-layout-height-full.ts

@@ -1,8 +1,8 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import { css, html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
 import '@vaadin/app-layout';
 import '@vaadin/grid';
+import { css, html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
 import { getPeople } from 'Frontend/demo/domain/DataService';
 import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
 import { applyTheme } from 'Frontend/generated/theme';

frontend/demo/component/app-layout/app-layout-navbar-placement-side.ts

@@ -1,14 +1,14 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
 import '@vaadin/app-layout';
 import '@vaadin/app-layout/vaadin-drawer-toggle';
 import '@vaadin/icon';
 import '@vaadin/icons';
 import '@vaadin/scroller';
 import '@vaadin/side-nav';
-import { applyTheme } from 'Frontend/generated/theme';
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { patchSideNavNavigation } from 'Frontend/demo/component/side-nav/side-nav-helper'; // hidden-source-line
+import { applyTheme } from 'Frontend/generated/theme';
 
 @customElement('app-layout-navbar-placement-side')
 export class Example extends LitElement {

frontend/demo/component/app-layout/app-layout-navbar-placement.ts

@@ -1,14 +1,14 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
 import '@vaadin/app-layout';
 import '@vaadin/app-layout/vaadin-drawer-toggle';
 import '@vaadin/icon';
 import '@vaadin/icons';
 import '@vaadin/scroller';
 import '@vaadin/side-nav';
-import { applyTheme } from 'Frontend/generated/theme';
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { patchSideNavNavigation } from 'Frontend/demo/component/side-nav/side-nav-helper'; // hidden-source-line
+import { applyTheme } from 'Frontend/generated/theme';
 
 @customElement('app-layout-navbar-placement')
 export class Example extends LitElement {

frontend/demo/component/app-layout/app-layout-navbar.ts

@@ -1,11 +1,11 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
 import '@vaadin/app-layout';
 import '@vaadin/app-layout/vaadin-drawer-toggle';
+import '@vaadin/horizontal-layout';
 import '@vaadin/icon';
 import '@vaadin/icons';
-import '@vaadin/horizontal-layout';
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { applyTheme } from 'Frontend/generated/theme';
 import { patchAppLayoutNavigation } from './app-layout-helper'; // hidden-source-line
 

frontend/demo/component/app-layout/app-layout-secondary-navigation.ts

@@ -1,6 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
 import '@vaadin/app-layout';
 import '@vaadin/app-layout/vaadin-drawer-toggle';
 import '@vaadin/horizontal-layout';
@@ -9,8 +7,10 @@ import '@vaadin/icons';
 import '@vaadin/scroller';
 import '@vaadin/side-nav';
 import '@vaadin/vertical-layout';
-import { applyTheme } from 'Frontend/generated/theme';
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { patchSideNavNavigation } from 'Frontend/demo/component/side-nav/side-nav-helper'; // hidden-source-line
+import { applyTheme } from 'Frontend/generated/theme';
 import { patchAppLayoutNavigation } from './app-layout-helper'; // hidden-source-line
 
 @customElement('app-layout-secondary-navigation')

frontend/demo/component/auto-grid/react/auto-grid-host-styles.ts

@@ -1,10 +1,10 @@
 import { css, unsafeCSS } from 'lit';
-// @ts-ignore
-import autoGridStyles from '@vaadin/hilla-react-crud/autogrid.obj.js';
-// @ts-ignore
-import autoFormStyles from '@vaadin/hilla-react-crud/autoform.obj.js';
-// @ts-ignore
+// @ts-expect-error
 import autoCrudStyles from '@vaadin/hilla-react-crud/autocrud.obj.js';
+// @ts-expect-error
+import autoFormStyles from '@vaadin/hilla-react-crud/autoform.obj.js';
+// @ts-expect-error
+import autoGridStyles from '@vaadin/hilla-react-crud/autogrid.obj.js';
 
 function extractCss(stylesheet: CSSStyleSheet): string {
   return Array.from(stylesheet.cssRules)

frontend/demo/component/avatar/avatar-abbreviation.ts

@@ -1,8 +1,8 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
 import '@vaadin/avatar';
 import '@vaadin/horizontal-layout';
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { applyTheme } from 'Frontend/generated/theme';
 
 @customElement('avatar-abbreviation')

frontend/demo/component/avatar/avatar-basic.ts

@@ -1,11 +1,11 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import { html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
 import '@vaadin/avatar';
 import '@vaadin/horizontal-layout';
-import { applyTheme } from 'Frontend/generated/theme';
+import { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
 import { getPeople } from 'Frontend/demo/domain/DataService';
 import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
+import { applyTheme } from 'Frontend/generated/theme';
 
 @customElement('avatar-basic')
 export class Example extends LitElement {

frontend/demo/component/avatar/avatar-group-basic.ts

@@ -1,10 +1,10 @@
 import 'Frontend/demo/init'; // hidden-source-line
+import '@vaadin/avatar-group';
 import { html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import '@vaadin/avatar-group';
-import { applyTheme } from 'Frontend/generated/theme';
 import { getPeople } from 'Frontend/demo/domain/DataService';
 import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
+import { applyTheme } from 'Frontend/generated/theme';
 
 @customElement('avatar-group-basic')
 export class Example extends LitElement {

frontend/demo/component/avatar/avatar-group-bg-color.ts

@@ -1,10 +1,10 @@
 import 'Frontend/demo/init'; // hidden-source-line
+import '@vaadin/avatar-group';
 import { html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import '@vaadin/avatar-group';
-import { applyTheme } from 'Frontend/generated/theme';
 import { getPeople } from 'Frontend/demo/domain/DataService';
 import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
+import { applyTheme } from 'Frontend/generated/theme';
 
 @customElement('avatar-group-bg-color')
 export class Example extends LitElement {

frontend/demo/component/avatar/avatar-group-internationalisation.ts

@@ -1,11 +1,11 @@
 import 'Frontend/demo/init'; // hidden-source-line
+import '@vaadin/avatar-group';
 import { html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import '@vaadin/avatar-group';
 import type { AvatarGroupI18n } from '@vaadin/avatar-group';
-import { applyTheme } from 'Frontend/generated/theme';
 import { getPeople } from 'Frontend/demo/domain/DataService';
 import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
+import { applyTheme } from 'Frontend/generated/theme';
 
 @customElement('avatar-group-internationalistion')
 export class Example extends LitElement {