@vaadin/form-layout 24.8.4 → 25.0.0-alpha10

package/README.md

@@ -30,29 +30,6 @@ Once installed, import the component in your application:
 import '@vaadin/form-layout';
 ```
 
-## Themes
-
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
-The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/form-layout/vaadin-form-layout.js) of the package uses the Lumo theme.
-
-To use the Material theme, import the component from the `theme/material` folder:
-
-```js
-import '@vaadin/form-layout/theme/material/vaadin-form-layout.js';
-```
-
-You can also import the Lumo version of the component explicitly:
-
-```js
-import '@vaadin/form-layout/theme/lumo/vaadin-form-layout.js';
-```
-
-Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/form-layout/src/vaadin-form-layout.js';
-```
-
 ## Contributing
 
 Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/form-layout",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/styles/*-base-styles.d.ts",
+    "!src/styles/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -31,30 +33,27 @@
     "Vaadin",
     "form-layout",
     "web-components",
-    "web-component",
-    "polymer"
+    "web-component"
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.8.4",
-    "@vaadin/component-base": "~24.8.4",
-    "@vaadin/vaadin-lumo-styles": "~24.8.4",
-    "@vaadin/vaadin-material-styles": "~24.8.4",
-    "@vaadin/vaadin-themable-mixin": "~24.8.4",
+    "@vaadin/a11y-base": "25.0.0-alpha10",
+    "@vaadin/component-base": "25.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~24.8.4",
-    "@vaadin/custom-field": "~24.8.4",
-    "@vaadin/test-runner-commands": "~24.8.4",
-    "@vaadin/testing-helpers": "^1.1.0",
-    "@vaadin/text-field": "~24.8.4",
+    "@vaadin/chai-plugins": "25.0.0-alpha10",
+    "@vaadin/custom-field": "25.0.0-alpha10",
+    "@vaadin/test-runner-commands": "25.0.0-alpha10",
+    "@vaadin/testing-helpers": "^2.0.0",
+    "@vaadin/text-field": "25.0.0-alpha10",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "849e54e967563080a685965e2dced02060b3ab23"
+  "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
 }

package/src/styles/vaadin-form-item-base-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const formItemStyles: CSSResult;

package/src/styles/vaadin-form-item-base-styles.js

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/style-props.js';
+import { css } from 'lit';
+
+export const formItemStyles = css`
+  :host {
+    /* By default, when auto-responsive mode is disabled, labels should be displayed beside the fields. */
+    --_form-item-labels-above: ' '; /* false */
+    --_form-item-labels-aside: initial; /* true */
+
+    align-items: var(--_form-item-labels-aside, baseline);
+    display: inline-flex;
+    flex-flow: var(--_form-item-labels-above, column) nowrap;
+    justify-self: stretch;
+    margin: calc(0.5 * var(--vaadin-form-item-row-spacing, var(--vaadin-form-layout-row-spacing, 1em))) 0;
+  }
+
+  :host([label-position='top']) {
+    --_form-item-labels-above: initial; /* true */
+    --_form-item-labels-aside: ' '; /* false */
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  [part='label'] {
+    color: var(--vaadin-form-item-label-color, var(--vaadin-color));
+    flex: 0 0 auto;
+    font-size: var(--vaadin-form-item-label-font-size, inherit);
+    font-weight: var(--vaadin-form-item-label-font-weight, 500);
+    line-height: var(--vaadin-form-item-label-line-height, inherit);
+    width: var(
+      --_form-item-labels-aside,
+      var(--vaadin-form-item-label-width, var(--vaadin-form-layout-label-width, 8em))
+    );
+    word-break: break-word;
+  }
+
+  #spacing {
+    flex: 0 0 auto;
+    width: var(--vaadin-form-item-label-spacing, var(--vaadin-form-layout-label-spacing, 1em));
+  }
+
+  #content {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  #content ::slotted(.full-width) {
+    box-sizing: border-box;
+    min-width: 0;
+    width: 100%;
+  }
+`;

package/src/styles/vaadin-form-item-core-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const formItemStyles: CSSResult;

package/src/styles/vaadin-form-item-core-styles.js

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const formItemStyles = css`
+  :host {
+    /* By default, when auto-responsive mode is disabled, labels should be displayed beside the fields. */
+    --_form-item-labels-above: ' '; /* false */
+    --_form-item-labels-aside: initial; /* true */
+
+    display: inline-flex;
+    align-items: var(--_form-item-labels-aside, baseline);
+    flex-flow: var(--_form-item-labels-above, column) nowrap;
+    justify-self: stretch;
+    margin: calc(0.5 * var(--vaadin-form-item-row-spacing, var(--vaadin-form-layout-row-spacing, 1em))) 0;
+  }
+
+  :host([label-position='top']) {
+    --_form-item-labels-above: initial; /* true */
+    --_form-item-labels-aside: ' '; /* false */
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  #label {
+    width: var(
+      --_form-item-labels-aside,
+      var(--vaadin-form-item-label-width, var(--vaadin-form-layout-label-width, 8em))
+    );
+    flex: 0 0 auto;
+  }
+
+  #spacing {
+    width: var(--vaadin-form-item-label-spacing, var(--vaadin-form-layout-label-spacing, 1em));
+    flex: 0 0 auto;
+  }
+
+  #content {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  #content ::slotted(.full-width) {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+  }
+`;

package/src/{vaadin-form-layout-styles.d.ts → styles/vaadin-form-layout-base-styles.d.ts}

@@ -6,5 +6,3 @@
 import type { CSSResult } from 'lit';
 
 export const formLayoutStyles: CSSResult;
-
-export const formItemStyles: CSSResult;

package/src/styles/vaadin-form-layout-base-styles.js

@@ -0,0 +1,181 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/style-props.js';
+import { css } from 'lit';
+
+export const formLayoutStyles = css`
+  :host {
+    /* Default values */
+    --vaadin-form-layout-label-spacing: var(--vaadin-gap-container-inline);
+    --vaadin-form-layout-label-width: 8em;
+    --vaadin-form-layout-column-spacing: calc(var(--vaadin-gap-container-inline) * 2);
+    --vaadin-form-layout-row-spacing: calc(var(--vaadin-gap-container-block) * 2);
+
+    align-self: stretch;
+    display: block;
+    max-width: 100%;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host(:not([auto-responsive])) #layout {
+    align-items: baseline; /* default \`stretch\` is not appropriate */
+    display: flex;
+    flex-wrap: wrap; /* the items should wrap */
+  }
+
+  :host(:not([auto-responsive])) #layout ::slotted(*) {
+    /* Items should neither grow nor shrink. */
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    /* Margins make spacing between the columns */
+    margin-inline: calc(0.5 * var(--vaadin-form-layout-column-spacing));
+  }
+
+  #layout ::slotted(br) {
+    display: none;
+  }
+
+  :host([auto-responsive]) {
+    /* Column width */
+    --_column-width: var(--vaadin-field-default-width, 12em);
+    --_column-width-labels-above: var(--_column-width);
+    --_column-width-labels-aside: calc(
+      var(--_column-width) + var(--vaadin-form-layout-label-width) + var(--vaadin-form-layout-label-spacing)
+    );
+
+    /* Column gap */
+    --_min-total-gap: calc((var(--_min-columns) - 1) * var(--vaadin-form-layout-column-spacing));
+    --_max-total-gap: calc((var(--_max-columns) - 1) * var(--vaadin-form-layout-column-spacing));
+
+    /* Minimum form layout width */
+    --_min-width-labels-above: calc(var(--_min-columns) * var(--_column-width-labels-above) + var(--_min-total-gap));
+    --_min-width-labels-aside: calc(var(--_min-columns) * var(--_column-width-labels-aside) + var(--_min-total-gap));
+    --_min-width: var(--_min-width-labels-above);
+
+    /* Maximum form layout width */
+    --_max-width-labels-above: calc(var(--_max-columns) * var(--_column-width-labels-above) + var(--_max-total-gap));
+    --_max-width-labels-aside: calc(var(--_max-columns) * var(--_column-width-labels-aside) + var(--_max-total-gap));
+    --_max-width: var(--_max-width-labels-above);
+
+    display: flex;
+    min-width: var(--_min-width);
+  }
+
+  :host([auto-responsive]) #layout {
+    /* By default, labels should be displayed above the fields */
+    --_form-item-labels-above: initial; /* true */
+    --_form-item-labels-aside: ' '; /* false */
+
+    /* CSS grid related properties */
+    --_grid-column-width: var(--_column-width-labels-above);
+    --_grid-repeat: var(--_grid-column-width);
+
+    display: grid;
+    gap: var(--vaadin-form-layout-row-spacing) var(--vaadin-form-layout-column-spacing);
+
+    /*
+      Auto-columns can be created when an item's colspan exceeds the rendered column count.
+      By setting auto-columns to 0, we exclude these columns from --_grid-rendered-column-count,
+      which is then used to cap the colspan.
+    */
+    grid-auto-columns: 0;
+
+    grid-template-columns: repeat(auto-fill, var(--_grid-repeat));
+    justify-items: start;
+
+    /*
+      Firefox requires min-width on both :host and #layout to allow the layout
+      to shrink below the value specified in the CSS width property above.
+    */
+    min-width: var(--_min-width);
+
+    /*
+      To prevent the layout from exceeding the column limit defined by --_max-columns,
+      its width needs to be constrained:
+
+      1. "width" is used instead of "max-width" because, together with the default "flex: 0 1 auto",
+      it allows the layout to shrink to its minimum width inside <vaadin-horizontal-layout>, which
+      wouldn't work otherwise.
+
+      2. "width" is used instead of "flex-basis" to make the layout expand to the maximum
+      number of columns inside <vaadin-overlay>, which creates a new stacking context
+      without a predefined width.
+    */
+    width: var(--_max-width);
+  }
+
+  :host([auto-responsive]) #layout::before {
+    background-position-y: var(--_min-width-labels-aside);
+  }
+
+  :host([auto-responsive]) #layout ::slotted(*) {
+    /* Make form items inherit label position from the layout */
+    --_form-item-labels-above: inherit;
+    --_form-item-labels-aside: inherit;
+
+    /* By default, place each child on a new row */
+    grid-column: 1 / span min(var(--_grid-colspan, 1), var(--_grid-rendered-column-count));
+
+    /* Form items do not need margins in auto-responsive mode */
+    margin: 0;
+  }
+
+  :host([auto-responsive][auto-rows]) #layout ::slotted(*) {
+    grid-column-start: var(--_grid-colstart, auto);
+  }
+
+  :host([auto-responsive][labels-aside]) {
+    --_max-width: var(--_max-width-labels-aside);
+  }
+
+  :host([auto-responsive][labels-aside]) #layout[fits-labels-aside] {
+    --_form-item-labels-above: ' '; /* false */
+    --_form-item-labels-aside: initial; /* true */
+    --_grid-column-width: var(--_column-width-labels-aside);
+  }
+
+  :host([auto-responsive][expand-columns]) #layout {
+    /*
+      The "min" value in minmax ensures that once "maxColumns" is reached, the grid stops adding
+      new columns and instead expands the existing ones evenly to fill the available space.
+
+      The "max" value in minmax allows CSS grid columns to grow and evenly distribute any space
+      that remains when there isn't room for an additional column and "maxColumns" hasn't been
+      reached yet.
+    */
+    --_grid-repeat: minmax(
+      max(var(--_grid-column-width), calc((100% - var(--_max-total-gap)) / var(--_max-columns))),
+      1fr
+    );
+
+    /* Allow the layout to take up full available width of the parent element. */
+    flex-grow: 1;
+  }
+`;
+
+export const formLayoutSlotStyles = css`
+  /* Using :where to ensure user styles always take precedence */
+  :where(
+    vaadin-form-layout[auto-responsive] > *,
+    vaadin-form-layout[auto-responsive] vaadin-form-row > *,
+    vaadin-form-layout[auto-responsive] vaadin-form-item > *
+  ) {
+    box-sizing: border-box;
+    max-width: 100%;
+  }
+
+  :where(
+    vaadin-form-layout[auto-responsive][expand-fields] > *,
+    vaadin-form-layout[auto-responsive][expand-fields] vaadin-form-row > *,
+    vaadin-form-layout[auto-responsive][expand-fields] vaadin-form-item > *
+  ) {
+    min-width: 100%;
+  }
+`;

package/src/styles/vaadin-form-layout-core-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const formLayoutStyles: CSSResult;

package/src/{vaadin-form-layout-styles.js → styles/vaadin-form-layout-core-styles.js}

@@ -3,7 +3,7 @@
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { css } from 'lit';
 
 export const formLayoutStyles = css`
   :host {
@@ -162,88 +162,19 @@ export const formLayoutStyles = css`
 export const formLayoutSlotStyles = css`
   /* Using :where to ensure user styles always take precedence */
   :where(
-      vaadin-form-layout[auto-responsive] > *,
-      vaadin-form-layout[auto-responsive] vaadin-form-row > *,
-      vaadin-form-layout[auto-responsive] vaadin-form-item > *
-    ) {
+    vaadin-form-layout[auto-responsive] > *,
+    vaadin-form-layout[auto-responsive] vaadin-form-row > *,
+    vaadin-form-layout[auto-responsive] vaadin-form-item > *
+  ) {
     box-sizing: border-box;
     max-width: 100%;
   }
 
   :where(
-      vaadin-form-layout[auto-responsive][expand-fields] > *,
-      vaadin-form-layout[auto-responsive][expand-fields] vaadin-form-row > *,
-      vaadin-form-layout[auto-responsive][expand-fields] vaadin-form-item > *
-    ) {
+    vaadin-form-layout[auto-responsive][expand-fields] > *,
+    vaadin-form-layout[auto-responsive][expand-fields] vaadin-form-row > *,
+    vaadin-form-layout[auto-responsive][expand-fields] vaadin-form-item > *
+  ) {
     min-width: 100%;
   }
 `;
-
-export const formRowStyles = css`
-  :host {
-    display: contents;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  ::slotted(*) {
-    /* Make form items inherit label position from the layout */
-    --_form-item-labels-above: inherit;
-    --_form-item-labels-aside: inherit;
-
-    grid-column: auto / span min(var(--_grid-colspan, 1), var(--_grid-rendered-column-count));
-  }
-
-  ::slotted(:first-child) {
-    grid-column-start: 1;
-  }
-`;
-
-export const formItemStyles = css`
-  :host {
-    /* By default, when auto-responsive mode is disabled, labels should be displayed beside the fields. */
-    --_form-item-labels-above: ' '; /* false */
-    --_form-item-labels-aside: initial; /* true */
-
-    display: inline-flex;
-    align-items: var(--_form-item-labels-aside, baseline);
-    flex-flow: var(--_form-item-labels-above, column) nowrap;
-    justify-self: stretch;
-    margin: calc(0.5 * var(--vaadin-form-item-row-spacing, var(--vaadin-form-layout-row-spacing, 1em))) 0;
-  }
-
-  :host([label-position='top']) {
-    --_form-item-labels-above: initial; /* true */
-    --_form-item-labels-aside: ' '; /* false */
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  #label {
-    width: var(
-      --_form-item-labels-aside,
-      var(--vaadin-form-item-label-width, var(--vaadin-form-layout-label-width, 8em))
-    );
-    flex: 0 0 auto;
-  }
-
-  #spacing {
-    width: var(--vaadin-form-item-label-spacing, var(--vaadin-form-layout-label-spacing, 1em));
-    flex: 0 0 auto;
-  }
-
-  #content {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-
-  #content ::slotted(.full-width) {
-    box-sizing: border-box;
-    width: 100%;
-    min-width: 0;
-  }
-`;

package/src/styles/vaadin-form-row-base-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const formRowStyles: CSSResult;

package/src/styles/vaadin-form-row-base-styles.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const formRowStyles = css`
+  :host {
+    display: contents;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  ::slotted(*) {
+    /* Make form items inherit label position from the layout */
+    --_form-item-labels-above: inherit;
+    --_form-item-labels-aside: inherit;
+
+    grid-column: auto / span min(var(--_grid-colspan, 1), var(--_grid-rendered-column-count));
+  }
+
+  ::slotted(:first-child) {
+    grid-column-start: 1;
+  }
+`;

package/src/styles/vaadin-form-row-core-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const formRowStyles: CSSResult;

package/src/styles/vaadin-form-row-core-styles.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const formRowStyles = css`
+  :host {
+    display: contents;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  ::slotted(*) {
+    /* Make form items inherit label position from the layout */
+    --_form-item-labels-above: inherit;
+    --_form-item-labels-aside: inherit;
+
+    grid-column: auto / span min(var(--_grid-colspan, 1), var(--_grid-rendered-column-count));
+  }
+
+  ::slotted(:first-child) {
+    grid-column-start: 1;
+  }
+`;

package/src/vaadin-form-item.js

@@ -3,13 +3,13 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { formItemStyles } from './styles/vaadin-form-item-core-styles.js';
 import { FormItemMixin } from './vaadin-form-item-mixin.js';
-import { formItemStyles } from './vaadin-form-layout-styles.js';
-
-registerStyles('vaadin-form-item', formItemStyles, { moduleId: 'vaadin-form-item-styles' });
 
 /**
  * `<vaadin-form-item>` is a Web Component providing labelled form item wrapper
@@ -103,20 +103,31 @@ registerStyles('vaadin-form-item', formItemStyles, { moduleId: 'vaadin-form-item
  * @mixes FormItemMixin
  * @mixes ThemableMixin
  */
-class FormItem extends FormItemMixin(ThemableMixin(PolymerElement)) {
+class FormItem extends FormItemMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))) {
   static get is() {
     return 'vaadin-form-item';
   }
 
-  static get template() {
+  static get styles() {
+    return formItemStyles;
+  }
+
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
+  /** @protected */
+  render() {
     return html`
-      <div id="label" part="label" on-click="__onLabelClick">
-        <slot name="label" id="labelSlot" on-slotchange="__onLabelSlotChange"></slot>
+      <div id="label" part="label" @click="${this.__onLabelClick}">
+        <slot name="label" id="labelSlot" @slotchange="${this.__onLabelSlotChange}"></slot>
         <span part="required-indicator" aria-hidden="true"></span>
       </div>
       <div id="spacing"></div>
       <div id="content">
-        <slot id="contentSlot" on-slotchange="__onContentSlotChange"></slot>
+        <slot id="contentSlot" @slotchange="${this.__onContentSlotChange}"></slot>
       </div>
     `;
   }

package/src/vaadin-form-layout-mixin.js

@@ -6,7 +6,7 @@
 import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import { AutoResponsiveLayout } from './layouts/auto-responsive-layout.js';
 import { ResponsiveStepsLayout } from './layouts/responsive-steps-layout.js';
-import { formLayoutSlotStyles } from './vaadin-form-layout-styles.js';
+import { formLayoutSlotStyles } from './styles/vaadin-form-layout-core-styles.js';
 
 /**
  * @polymerMixin

package/src/vaadin-form-layout.js

@@ -3,14 +3,14 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { formLayoutStyles } from './styles/vaadin-form-layout-core-styles.js';
 import { FormLayoutMixin } from './vaadin-form-layout-mixin.js';
-import { formLayoutStyles } from './vaadin-form-layout-styles.js';
-
-registerStyles('vaadin-form-layout', formLayoutStyles, { moduleId: 'vaadin-form-layout-styles' });
 
 /**
  * `<vaadin-form-layout>` is a Web Component providing configurable responsive
@@ -206,12 +206,23 @@ registerStyles('vaadin-form-layout', formLayoutStyles, { moduleId: 'vaadin-form-
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class FormLayout extends FormLayoutMixin(ThemableMixin(ElementMixin(PolymerElement))) {
+class FormLayout extends FormLayoutMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-form-layout';
   }
 
-  static get template() {
+  static get styles() {
+    return formLayoutStyles;
+  }
+
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
+  /** @protected */
+  render() {
     return html`
       <div id="layout">
         <slot id="slot"></slot>

package/src/vaadin-form-row.js

@@ -3,12 +3,11 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { formRowStyles } from './vaadin-form-layout-styles.js';
-
-registerStyles('vaadin-form-row', formRowStyles, { moduleId: 'vaadin-form-row-styles' });
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { formRowStyles } from './styles/vaadin-form-row-core-styles.js';
 
 /**
  * `<vaadin-form-row>` is a web component for arranging fields into rows
@@ -22,12 +21,23 @@ registerStyles('vaadin-form-row', formRowStyles, { moduleId: 'vaadin-form-row-st
  * @extends HTMLElement
  * @mixes ThemableMixin
  */
-class FormRow extends ThemableMixin(PolymerElement) {
+class FormRow extends ThemableMixin(PolylitMixin(LitElement)) {
   static get is() {
     return 'vaadin-form-row';
   }
 
-  static get template() {
+  static get styles() {
+    return formRowStyles;
+  }
+
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
+  /** @protected */
+  render() {
     return html`<slot></slot>`;
   }
 }

package/theme/lumo/vaadin-form-item-styles.js

@@ -16,7 +16,6 @@ registerStyles(
       margin-top: var(--lumo-space-m);
       margin-left: calc(var(--lumo-border-radius-m) / 4);
       margin-bottom: var(--lumo-space-xs);
-      transition: color 0.4s;
       line-height: 1.333;
     }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/form-layout",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -29,7 +29,7 @@
         },
         {
           "name": "vaadin-form-layout",
-          "description": "`<vaadin-form-layout>` is a Web Component providing configurable responsive\nlayout for form elements.\n\n```html\n<vaadin-form-layout>\n\n  <vaadin-form-item>\n    <label slot=\"label\">First Name</label>\n    <input class=\"full-width\" value=\"Jane\">\n  </vaadin-form-item>\n\n  <vaadin-form-item>\n    <label slot=\"label\">Last Name</label>\n    <input class=\"full-width\" value=\"Doe\">\n  </vaadin-form-item>\n\n  <vaadin-form-item>\n    <label slot=\"label\">Email</label>\n    <input class=\"full-width\" value=\"jane.doe@example.com\">\n  </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\nIt supports any child elements as layout items.\n\nBy default, it makes a layout of two columns if the element width is equal or\nwider than 40em, and a single column layout otherwise.\n\nThe number of columns and the responsive behavior are customizable with\nthe `responsiveSteps` property.\n\n### Spanning Items on Multiple Columns\n\nYou can use `colspan` or `data-colspan` attribute on the items.\nIn the example below, the first text field spans on two columns:\n\n```html\n<vaadin-form-layout>\n\n  <vaadin-form-item colspan=\"2\">\n    <label slot=\"label\">Address</label>\n    <input class=\"full-width\">\n  </vaadin-form-item>\n\n  <vaadin-form-item>\n    <label slot=\"label\">First Name</label>\n    <input class=\"full-width\" value=\"Jane\">\n  </vaadin-form-item>\n\n  <vaadin-form-item>\n    <label slot=\"label\">Last Name</label>\n    <input class=\"full-width\" value=\"Doe\">\n  </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Explicit New Row\n\nUse the `<br>` line break element to wrap the items on a new row:\n\n```html\n<vaadin-form-layout>\n\n  <vaadin-form-item>\n    <label slot=\"label\">Email</label>\n    <input class=\"full-width\">\n  </vaadin-form-item>\n\n  <br>\n\n  <vaadin-form-item>\n    <label slot=\"label\">Confirm Email</label>\n    <input class=\"full-width\">\n  </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Auto Responsive Mode\n\nTo avoid manually dealing with responsive breakpoints, Form Layout provides an auto-responsive mode\nthat automatically creates and adjusts fixed-width columns based on the container's available space.\n\nThe [`columnWidth`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/elements/vaadin-form-layout#property-maxColumns) properties define the width of\neach column and the maximum number of columns that the component can create. By default, the component\ncreates up to 10 columns, each with a width of `12em` or the value of the `--vaadin-field-default-width`\nCSS custom property, if defined.\n\nThe auto-responsive mode is disabled by default. To enable it for an individual instance, set the\n`auto-responsive` attribute:\n\n```html\n<vaadin-form-layout auto-responsive>\n  <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n  <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n  <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n</vaadin-form-layout>\n```\n\nYou can also enable it for all instances by enabling the following feature flag\nbefore `<vaadin-form-layout>` elements are added to the DOM:\n\n```js\nwindow.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;\n```\n\n#### Organizing Fields into Rows\n\nBy default, each field is placed on a new row. To organize fields into rows, you can either:\n\n1. Manually wrap fields into [`<vaadin-form-row>`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/elements/vaadin-form-layout#property-autoRows) property to\n   let Form Layout automatically arrange fields in available columns, wrapping to a new\n   row when necessary. `<br>` elements can be used to force a new row.\n\nHere is an example of using `<vaadin-form-row>`:\n\n```html\n<vaadin-form-layout auto-responsive>\n  <vaadin-form-row>\n    <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n    <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n  </vaadin-form-row>\n  <vaadin-form-row>\n    <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n  </vaadin-form-row>\n</vaadin-form-layout>\n```\n\n#### Expanding Columns and Fields\n\nYou can configure Form Layout to expand columns to evenly fill any remaining space after\nall fixed-width columns have been created.\nTo enable this, set the [`expandColumns`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/elements/vaadin-form-layout#property-expandColumns)\nproperty to `true`.\n\nAlso, Form Layout can stretch fields to make them take up all available space within columns.\nTo enable this, set the [`expandFields`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/elements/vaadin-form-layout#property-expandFields)\nproperty to `true`.\n\n#### Customizing Label Position\n\nBy default, Form Layout displays labels above the fields. To position labels beside fields, you\nneed to wrap each field in a `<vaadin-form-item>` element and define its labels on the wrapper.\nThen, you can enable the [`labelsAside`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/elements/vaadin-form-layout#property-labelsAside)\nproperty:\n\n```html\n<vaadin-form-layout auto-responsive labels-aside>\n  <vaadin-form-row>\n    <vaadin-form-item>\n      <label slot=\"label\">First Name</label>\n      <vaadin-text-field></vaadin-text-field>\n   </vaadin-form-item>\n   <vaadin-form-item>\n     <label slot=\"label\">Last Name</label>\n      <vaadin-text-field></vaadin-text-field>\n    </vaadin-form-item>\n  </vaadin-form-row>\n  <vaadin-form-row>\n    <vaadin-form-item colspan=\"2\">\n      <label slot=\"label\">Address</label>\n      <vaadin-text-area></vaadin-text-area>\n    </vaadin-form-item>\n  </vaadin-form-row>\n</vaadin-form-layout>\n```\n\nWith this, FormLayout will display labels beside fields, falling back to\nthe default position above the fields only when there isn't enough space.\n\n### CSS Properties Reference\n\nThe following custom CSS properties are available on the `<vaadin-form-layout>`\nelement:\n\nCustom CSS property | Description | Default\n---|---|---\n`--vaadin-form-layout-column-spacing` | Length of the spacing between columns | `2em`\n`--vaadin-form-layout-row-spacing` | Length of the spacing between rows | `1em`\n`--vaadin-form-layout-label-width` | Width of the label when labels are displayed aside | `8em`\n`--vaadin-form-layout-label-spacing` | Length of the spacing between the label and the input when labels are displayed aside | `1em`",
+          "description": "`<vaadin-form-layout>` is a Web Component providing configurable responsive\nlayout for form elements.\n\n```html\n<vaadin-form-layout>\n\n  <vaadin-form-item>\n    <label slot=\"label\">First Name</label>\n    <input class=\"full-width\" value=\"Jane\">\n  </vaadin-form-item>\n\n  <vaadin-form-item>\n    <label slot=\"label\">Last Name</label>\n    <input class=\"full-width\" value=\"Doe\">\n  </vaadin-form-item>\n\n  <vaadin-form-item>\n    <label slot=\"label\">Email</label>\n    <input class=\"full-width\" value=\"jane.doe@example.com\">\n  </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\nIt supports any child elements as layout items.\n\nBy default, it makes a layout of two columns if the element width is equal or\nwider than 40em, and a single column layout otherwise.\n\nThe number of columns and the responsive behavior are customizable with\nthe `responsiveSteps` property.\n\n### Spanning Items on Multiple Columns\n\nYou can use `colspan` or `data-colspan` attribute on the items.\nIn the example below, the first text field spans on two columns:\n\n```html\n<vaadin-form-layout>\n\n  <vaadin-form-item colspan=\"2\">\n    <label slot=\"label\">Address</label>\n    <input class=\"full-width\">\n  </vaadin-form-item>\n\n  <vaadin-form-item>\n    <label slot=\"label\">First Name</label>\n    <input class=\"full-width\" value=\"Jane\">\n  </vaadin-form-item>\n\n  <vaadin-form-item>\n    <label slot=\"label\">Last Name</label>\n    <input class=\"full-width\" value=\"Doe\">\n  </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Explicit New Row\n\nUse the `<br>` line break element to wrap the items on a new row:\n\n```html\n<vaadin-form-layout>\n\n  <vaadin-form-item>\n    <label slot=\"label\">Email</label>\n    <input class=\"full-width\">\n  </vaadin-form-item>\n\n  <br>\n\n  <vaadin-form-item>\n    <label slot=\"label\">Confirm Email</label>\n    <input class=\"full-width\">\n  </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Auto Responsive Mode\n\nTo avoid manually dealing with responsive breakpoints, Form Layout provides an auto-responsive mode\nthat automatically creates and adjusts fixed-width columns based on the container's available space.\n\nThe [`columnWidth`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-form-layout#property-maxColumns) properties define the width of\neach column and the maximum number of columns that the component can create. By default, the component\ncreates up to 10 columns, each with a width of `12em` or the value of the `--vaadin-field-default-width`\nCSS custom property, if defined.\n\nThe auto-responsive mode is disabled by default. To enable it for an individual instance, set the\n`auto-responsive` attribute:\n\n```html\n<vaadin-form-layout auto-responsive>\n  <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n  <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n  <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n</vaadin-form-layout>\n```\n\nYou can also enable it for all instances by enabling the following feature flag\nbefore `<vaadin-form-layout>` elements are added to the DOM:\n\n```js\nwindow.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;\n```\n\n#### Organizing Fields into Rows\n\nBy default, each field is placed on a new row. To organize fields into rows, you can either:\n\n1. Manually wrap fields into [`<vaadin-form-row>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-form-layout#property-autoRows) property to\n   let Form Layout automatically arrange fields in available columns, wrapping to a new\n   row when necessary. `<br>` elements can be used to force a new row.\n\nHere is an example of using `<vaadin-form-row>`:\n\n```html\n<vaadin-form-layout auto-responsive>\n  <vaadin-form-row>\n    <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n    <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n  </vaadin-form-row>\n  <vaadin-form-row>\n    <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n  </vaadin-form-row>\n</vaadin-form-layout>\n```\n\n#### Expanding Columns and Fields\n\nYou can configure Form Layout to expand columns to evenly fill any remaining space after\nall fixed-width columns have been created.\nTo enable this, set the [`expandColumns`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-form-layout#property-expandColumns)\nproperty to `true`.\n\nAlso, Form Layout can stretch fields to make them take up all available space within columns.\nTo enable this, set the [`expandFields`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-form-layout#property-expandFields)\nproperty to `true`.\n\n#### Customizing Label Position\n\nBy default, Form Layout displays labels above the fields. To position labels beside fields, you\nneed to wrap each field in a `<vaadin-form-item>` element and define its labels on the wrapper.\nThen, you can enable the [`labelsAside`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-form-layout#property-labelsAside)\nproperty:\n\n```html\n<vaadin-form-layout auto-responsive labels-aside>\n  <vaadin-form-row>\n    <vaadin-form-item>\n      <label slot=\"label\">First Name</label>\n      <vaadin-text-field></vaadin-text-field>\n   </vaadin-form-item>\n   <vaadin-form-item>\n     <label slot=\"label\">Last Name</label>\n      <vaadin-text-field></vaadin-text-field>\n    </vaadin-form-item>\n  </vaadin-form-row>\n  <vaadin-form-row>\n    <vaadin-form-item colspan=\"2\">\n      <label slot=\"label\">Address</label>\n      <vaadin-text-area></vaadin-text-area>\n    </vaadin-form-item>\n  </vaadin-form-row>\n</vaadin-form-layout>\n```\n\nWith this, FormLayout will display labels beside fields, falling back to\nthe default position above the fields only when there isn't enough space.\n\n### CSS Properties Reference\n\nThe following custom CSS properties are available on the `<vaadin-form-layout>`\nelement:\n\nCustom CSS property | Description | Default\n---|---|---\n`--vaadin-form-layout-column-spacing` | Length of the spacing between columns | `2em`\n`--vaadin-form-layout-row-spacing` | Length of the spacing between rows | `1em`\n`--vaadin-form-layout-label-width` | Width of the label when labels are displayed aside | `8em`\n`--vaadin-form-layout-label-spacing` | Length of the spacing between the label and the input when labels are displayed aside | `1em`",
           "attributes": [
             {
               "name": "auto-responsive",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/form-layout",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -22,7 +22,7 @@
         },
         {
           "name": "vaadin-form-layout",
-          "description": "`<vaadin-form-layout>` is a Web Component providing configurable responsive\nlayout for form elements.\n\n```html\n<vaadin-form-layout>\n\n  <vaadin-form-item>\n    <label slot=\"label\">First Name</label>\n    <input class=\"full-width\" value=\"Jane\">\n  </vaadin-form-item>\n\n  <vaadin-form-item>\n    <label slot=\"label\">Last Name</label>\n    <input class=\"full-width\" value=\"Doe\">\n  </vaadin-form-item>\n\n  <vaadin-form-item>\n    <label slot=\"label\">Email</label>\n    <input class=\"full-width\" value=\"jane.doe@example.com\">\n  </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\nIt supports any child elements as layout items.\n\nBy default, it makes a layout of two columns if the element width is equal or\nwider than 40em, and a single column layout otherwise.\n\nThe number of columns and the responsive behavior are customizable with\nthe `responsiveSteps` property.\n\n### Spanning Items on Multiple Columns\n\nYou can use `colspan` or `data-colspan` attribute on the items.\nIn the example below, the first text field spans on two columns:\n\n```html\n<vaadin-form-layout>\n\n  <vaadin-form-item colspan=\"2\">\n    <label slot=\"label\">Address</label>\n    <input class=\"full-width\">\n  </vaadin-form-item>\n\n  <vaadin-form-item>\n    <label slot=\"label\">First Name</label>\n    <input class=\"full-width\" value=\"Jane\">\n  </vaadin-form-item>\n\n  <vaadin-form-item>\n    <label slot=\"label\">Last Name</label>\n    <input class=\"full-width\" value=\"Doe\">\n  </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Explicit New Row\n\nUse the `<br>` line break element to wrap the items on a new row:\n\n```html\n<vaadin-form-layout>\n\n  <vaadin-form-item>\n    <label slot=\"label\">Email</label>\n    <input class=\"full-width\">\n  </vaadin-form-item>\n\n  <br>\n\n  <vaadin-form-item>\n    <label slot=\"label\">Confirm Email</label>\n    <input class=\"full-width\">\n  </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Auto Responsive Mode\n\nTo avoid manually dealing with responsive breakpoints, Form Layout provides an auto-responsive mode\nthat automatically creates and adjusts fixed-width columns based on the container's available space.\n\nThe [`columnWidth`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/elements/vaadin-form-layout#property-maxColumns) properties define the width of\neach column and the maximum number of columns that the component can create. By default, the component\ncreates up to 10 columns, each with a width of `12em` or the value of the `--vaadin-field-default-width`\nCSS custom property, if defined.\n\nThe auto-responsive mode is disabled by default. To enable it for an individual instance, set the\n`auto-responsive` attribute:\n\n```html\n<vaadin-form-layout auto-responsive>\n  <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n  <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n  <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n</vaadin-form-layout>\n```\n\nYou can also enable it for all instances by enabling the following feature flag\nbefore `<vaadin-form-layout>` elements are added to the DOM:\n\n```js\nwindow.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;\n```\n\n#### Organizing Fields into Rows\n\nBy default, each field is placed on a new row. To organize fields into rows, you can either:\n\n1. Manually wrap fields into [`<vaadin-form-row>`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/elements/vaadin-form-layout#property-autoRows) property to\n   let Form Layout automatically arrange fields in available columns, wrapping to a new\n   row when necessary. `<br>` elements can be used to force a new row.\n\nHere is an example of using `<vaadin-form-row>`:\n\n```html\n<vaadin-form-layout auto-responsive>\n  <vaadin-form-row>\n    <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n    <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n  </vaadin-form-row>\n  <vaadin-form-row>\n    <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n  </vaadin-form-row>\n</vaadin-form-layout>\n```\n\n#### Expanding Columns and Fields\n\nYou can configure Form Layout to expand columns to evenly fill any remaining space after\nall fixed-width columns have been created.\nTo enable this, set the [`expandColumns`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/elements/vaadin-form-layout#property-expandColumns)\nproperty to `true`.\n\nAlso, Form Layout can stretch fields to make them take up all available space within columns.\nTo enable this, set the [`expandFields`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/elements/vaadin-form-layout#property-expandFields)\nproperty to `true`.\n\n#### Customizing Label Position\n\nBy default, Form Layout displays labels above the fields. To position labels beside fields, you\nneed to wrap each field in a `<vaadin-form-item>` element and define its labels on the wrapper.\nThen, you can enable the [`labelsAside`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/elements/vaadin-form-layout#property-labelsAside)\nproperty:\n\n```html\n<vaadin-form-layout auto-responsive labels-aside>\n  <vaadin-form-row>\n    <vaadin-form-item>\n      <label slot=\"label\">First Name</label>\n      <vaadin-text-field></vaadin-text-field>\n   </vaadin-form-item>\n   <vaadin-form-item>\n     <label slot=\"label\">Last Name</label>\n      <vaadin-text-field></vaadin-text-field>\n    </vaadin-form-item>\n  </vaadin-form-row>\n  <vaadin-form-row>\n    <vaadin-form-item colspan=\"2\">\n      <label slot=\"label\">Address</label>\n      <vaadin-text-area></vaadin-text-area>\n    </vaadin-form-item>\n  </vaadin-form-row>\n</vaadin-form-layout>\n```\n\nWith this, FormLayout will display labels beside fields, falling back to\nthe default position above the fields only when there isn't enough space.\n\n### CSS Properties Reference\n\nThe following custom CSS properties are available on the `<vaadin-form-layout>`\nelement:\n\nCustom CSS property | Description | Default\n---|---|---\n`--vaadin-form-layout-column-spacing` | Length of the spacing between columns | `2em`\n`--vaadin-form-layout-row-spacing` | Length of the spacing between rows | `1em`\n`--vaadin-form-layout-label-width` | Width of the label when labels are displayed aside | `8em`\n`--vaadin-form-layout-label-spacing` | Length of the spacing between the label and the input when labels are displayed aside | `1em`",
+          "description": "`<vaadin-form-layout>` is a Web Component providing configurable responsive\nlayout for form elements.\n\n```html\n<vaadin-form-layout>\n\n  <vaadin-form-item>\n    <label slot=\"label\">First Name</label>\n    <input class=\"full-width\" value=\"Jane\">\n  </vaadin-form-item>\n\n  <vaadin-form-item>\n    <label slot=\"label\">Last Name</label>\n    <input class=\"full-width\" value=\"Doe\">\n  </vaadin-form-item>\n\n  <vaadin-form-item>\n    <label slot=\"label\">Email</label>\n    <input class=\"full-width\" value=\"jane.doe@example.com\">\n  </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\nIt supports any child elements as layout items.\n\nBy default, it makes a layout of two columns if the element width is equal or\nwider than 40em, and a single column layout otherwise.\n\nThe number of columns and the responsive behavior are customizable with\nthe `responsiveSteps` property.\n\n### Spanning Items on Multiple Columns\n\nYou can use `colspan` or `data-colspan` attribute on the items.\nIn the example below, the first text field spans on two columns:\n\n```html\n<vaadin-form-layout>\n\n  <vaadin-form-item colspan=\"2\">\n    <label slot=\"label\">Address</label>\n    <input class=\"full-width\">\n  </vaadin-form-item>\n\n  <vaadin-form-item>\n    <label slot=\"label\">First Name</label>\n    <input class=\"full-width\" value=\"Jane\">\n  </vaadin-form-item>\n\n  <vaadin-form-item>\n    <label slot=\"label\">Last Name</label>\n    <input class=\"full-width\" value=\"Doe\">\n  </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Explicit New Row\n\nUse the `<br>` line break element to wrap the items on a new row:\n\n```html\n<vaadin-form-layout>\n\n  <vaadin-form-item>\n    <label slot=\"label\">Email</label>\n    <input class=\"full-width\">\n  </vaadin-form-item>\n\n  <br>\n\n  <vaadin-form-item>\n    <label slot=\"label\">Confirm Email</label>\n    <input class=\"full-width\">\n  </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Auto Responsive Mode\n\nTo avoid manually dealing with responsive breakpoints, Form Layout provides an auto-responsive mode\nthat automatically creates and adjusts fixed-width columns based on the container's available space.\n\nThe [`columnWidth`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-form-layout#property-maxColumns) properties define the width of\neach column and the maximum number of columns that the component can create. By default, the component\ncreates up to 10 columns, each with a width of `12em` or the value of the `--vaadin-field-default-width`\nCSS custom property, if defined.\n\nThe auto-responsive mode is disabled by default. To enable it for an individual instance, set the\n`auto-responsive` attribute:\n\n```html\n<vaadin-form-layout auto-responsive>\n  <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n  <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n  <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n</vaadin-form-layout>\n```\n\nYou can also enable it for all instances by enabling the following feature flag\nbefore `<vaadin-form-layout>` elements are added to the DOM:\n\n```js\nwindow.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;\n```\n\n#### Organizing Fields into Rows\n\nBy default, each field is placed on a new row. To organize fields into rows, you can either:\n\n1. Manually wrap fields into [`<vaadin-form-row>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-form-layout#property-autoRows) property to\n   let Form Layout automatically arrange fields in available columns, wrapping to a new\n   row when necessary. `<br>` elements can be used to force a new row.\n\nHere is an example of using `<vaadin-form-row>`:\n\n```html\n<vaadin-form-layout auto-responsive>\n  <vaadin-form-row>\n    <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n    <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n  </vaadin-form-row>\n  <vaadin-form-row>\n    <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n  </vaadin-form-row>\n</vaadin-form-layout>\n```\n\n#### Expanding Columns and Fields\n\nYou can configure Form Layout to expand columns to evenly fill any remaining space after\nall fixed-width columns have been created.\nTo enable this, set the [`expandColumns`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-form-layout#property-expandColumns)\nproperty to `true`.\n\nAlso, Form Layout can stretch fields to make them take up all available space within columns.\nTo enable this, set the [`expandFields`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-form-layout#property-expandFields)\nproperty to `true`.\n\n#### Customizing Label Position\n\nBy default, Form Layout displays labels above the fields. To position labels beside fields, you\nneed to wrap each field in a `<vaadin-form-item>` element and define its labels on the wrapper.\nThen, you can enable the [`labelsAside`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-form-layout#property-labelsAside)\nproperty:\n\n```html\n<vaadin-form-layout auto-responsive labels-aside>\n  <vaadin-form-row>\n    <vaadin-form-item>\n      <label slot=\"label\">First Name</label>\n      <vaadin-text-field></vaadin-text-field>\n   </vaadin-form-item>\n   <vaadin-form-item>\n     <label slot=\"label\">Last Name</label>\n      <vaadin-text-field></vaadin-text-field>\n    </vaadin-form-item>\n  </vaadin-form-row>\n  <vaadin-form-row>\n    <vaadin-form-item colspan=\"2\">\n      <label slot=\"label\">Address</label>\n      <vaadin-text-area></vaadin-text-area>\n    </vaadin-form-item>\n  </vaadin-form-row>\n</vaadin-form-layout>\n```\n\nWith this, FormLayout will display labels beside fields, falling back to\nthe default position above the fields only when there isn't enough space.\n\n### CSS Properties Reference\n\nThe following custom CSS properties are available on the `<vaadin-form-layout>`\nelement:\n\nCustom CSS property | Description | Default\n---|---|---\n`--vaadin-form-layout-column-spacing` | Length of the spacing between columns | `2em`\n`--vaadin-form-layout-row-spacing` | Length of the spacing between rows | `1em`\n`--vaadin-form-layout-label-width` | Width of the label when labels are displayed aside | `8em`\n`--vaadin-form-layout-label-spacing` | Length of the spacing between the label and the input when labels are displayed aside | `1em`",
           "extension": true,
           "attributes": [
             {

package/src/vaadin-lit-form-item.js

@@ -1,48 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { html, LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { FormItemMixin } from './vaadin-form-item-mixin.js';
-import { formItemStyles } from './vaadin-form-layout-styles.js';
-
-/**
- * LitElement based version of `<vaadin-form-item>` 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.
- * Feel free to try this code in your apps as per Apache 2.0 license.
- */
-class FormItem extends FormItemMixin(ThemableMixin(PolylitMixin(LitElement))) {
-  static get is() {
-    return 'vaadin-form-item';
-  }
-
-  static get styles() {
-    return formItemStyles;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div id="label" part="label" @click="${this.__onLabelClick}">
-        <slot name="label" id="labelSlot" @slotchange="${this.__onLabelSlotChange}"></slot>
-        <span part="required-indicator" aria-hidden="true"></span>
-      </div>
-      <div id="spacing"></div>
-      <div id="content">
-        <slot id="contentSlot" @slotchange="${this.__onContentSlotChange}"></slot>
-      </div>
-    `;
-  }
-}
-
-defineCustomElement(FormItem);
-
-export { FormItem };

package/src/vaadin-lit-form-layout.js

@@ -1,44 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { html, LitElement } from 'lit';
-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 { FormLayoutMixin } from './vaadin-form-layout-mixin.js';
-import { formLayoutStyles } from './vaadin-form-layout-styles.js';
-
-/**
- * LitElement based version of `<vaadin-form-layout>` 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.
- * Feel free to try this code in your apps as per Apache 2.0 license.
- */
-class FormLayout extends FormLayoutMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-form-layout';
-  }
-
-  static get styles() {
-    return formLayoutStyles;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div id="layout">
-        <slot id="slot"></slot>
-      </div>
-    `;
-  }
-}
-
-defineCustomElement(FormLayout);
-
-export { FormLayout };

package/src/vaadin-lit-form-row.js

@@ -1,38 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { html, LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { formRowStyles } from './vaadin-form-layout-styles.js';
-
-/**
- * LitElement based version of `<vaadin-form-row>` 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.
- * Feel free to try this code in your apps as per Apache 2.0 license.
- */
-class FormRow extends ThemableMixin(PolylitMixin(LitElement)) {
-  static get is() {
-    return 'vaadin-form-row';
-  }
-
-  static get styles() {
-    return formRowStyles;
-  }
-
-  /** @protected */
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-defineCustomElement(FormRow);
-
-export { FormRow };

package/theme/lumo/vaadin-lit-form-item.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-form-item-styles.js';
-import '../../src/vaadin-lit-form-item.js';

package/theme/lumo/vaadin-lit-form-item.js

@@ -1,2 +0,0 @@
-import './vaadin-form-item-styles.js';
-import '../../src/vaadin-lit-form-item.js';

package/theme/lumo/vaadin-lit-form-layout.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-form-layout-styles.js';
-import '../../src/vaadin-lit-form-layout.js';

package/theme/lumo/vaadin-lit-form-layout.js

@@ -1,2 +0,0 @@
-import './vaadin-form-layout-styles.js';
-import '../../src/vaadin-lit-form-layout.js';

package/theme/lumo/vaadin-lit-form-row.d.ts

@@ -1 +0,0 @@
-import '../../src/vaadin-lit-form-row.js';

package/theme/lumo/vaadin-lit-form-row.js

@@ -1 +0,0 @@
-import '../../src/vaadin-lit-form-row.js';

package/theme/material/vaadin-form-item-styles.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';

package/theme/material/vaadin-form-item-styles.js

@@ -1,28 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-form-item',
-  css`
-    [part='label'] {
-      font-family: var(--material-font-family);
-      font-size: var(--material-small-font-size);
-      color: var(--material-secondary-text-color);
-      line-height: 16px;
-      font-weight: 400;
-      margin-top: 16px;
-      margin-bottom: 8px;
-    }
-
-    :host([required]) [part='required-indicator']::after {
-      content: ' *';
-      color: inherit;
-    }
-
-    :host([invalid]) [part='label'] {
-      color: var(--material-error-text-color);
-    }
-  `,
-  { moduleId: 'material-form-item' },
-);

package/theme/material/vaadin-form-item.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-form-item-styles.js';
-import '../../src/vaadin-form-item.js';

package/theme/material/vaadin-form-item.js

@@ -1,2 +0,0 @@
-import './vaadin-form-item-styles.js';
-import '../../src/vaadin-form-item.js';

package/theme/material/vaadin-form-layout.d.ts

@@ -1 +0,0 @@
-import '../../src/vaadin-form-layout.js';

package/theme/material/vaadin-form-layout.js

@@ -1 +0,0 @@
-import '../../src/vaadin-form-layout.js';

package/theme/material/vaadin-form-row.d.ts

@@ -1 +0,0 @@
-import '../../src/vaadin-form-row.js';

package/theme/material/vaadin-form-row.js

@@ -1 +0,0 @@
-import '../../src/vaadin-form-row.js';

package/theme/material/vaadin-lit-form-item.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-form-item-styles.js';
-import '../../src/vaadin-lit-form-item.js';

package/theme/material/vaadin-lit-form-item.js

@@ -1,2 +0,0 @@
-import './vaadin-form-item-styles.js';
-import '../../src/vaadin-lit-form-item.js';

package/theme/material/vaadin-lit-form-layout.d.ts

@@ -1 +0,0 @@
-import '../../src/vaadin-lit-form-layout.js';

package/theme/material/vaadin-lit-form-layout.js

@@ -1 +0,0 @@
-import '../../src/vaadin-lit-form-layout.js';

package/theme/material/vaadin-lit-form-row.d.ts

@@ -1 +0,0 @@
-import '../../src/vaadin-lit-form-row.js';

package/theme/material/vaadin-lit-form-row.js

@@ -1 +0,0 @@
-import '../../src/vaadin-lit-form-row.js';

package/vaadin-lit-form-item.d.ts

@@ -1 +0,0 @@
-export * from './vaadin-form-item.js';

package/vaadin-lit-form-item.js

@@ -1,2 +0,0 @@
-import './theme/lumo/vaadin-lit-form-item.js';
-export * from './src/vaadin-lit-form-item.js';

package/vaadin-lit-form-layout.d.ts

@@ -1 +0,0 @@
-export * from './vaadin-form-layout.js';

package/vaadin-lit-form-layout.js

@@ -1,2 +0,0 @@
-import './theme/lumo/vaadin-lit-form-layout.js';
-export * from './src/vaadin-lit-form-layout.js';

package/vaadin-lit-form-row.d.ts

@@ -1 +0,0 @@
-export * from './vaadin-form-row.js';

package/vaadin-lit-form-row.js

@@ -1,2 +0,0 @@
-import './theme/lumo/vaadin-lit-form-row.js';
-export * from './src/vaadin-lit-form-row.js';