@vaadin/form-layout 25.0.0-alpha1 → 25.0.0-alpha11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/form-layout",
-  "version": "25.0.0-alpha1",
+  "version": "25.0.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -21,7 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -35,23 +34,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha1",
-    "@vaadin/component-base": "25.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
+    "@vaadin/a11y-base": "25.0.0-alpha11",
+    "@vaadin/component-base": "25.0.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha11",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha1",
-    "@vaadin/custom-field": "25.0.0-alpha1",
-    "@vaadin/test-runner-commands": "25.0.0-alpha1",
-    "@vaadin/testing-helpers": "^1.1.0",
-    "@vaadin/text-field": "25.0.0-alpha1",
+    "@vaadin/chai-plugins": "25.0.0-alpha11",
+    "@vaadin/custom-field": "25.0.0-alpha11",
+    "@vaadin/test-runner-commands": "25.0.0-alpha11",
+    "@vaadin/testing-helpers": "^2.0.0",
+    "@vaadin/text-field": "25.0.0-alpha11",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha11",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
+  "gitHead": "abfd315ba5a7484a613e0768635a4e8fe945a44b"
 }

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/styles/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/{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/{vaadin-form-layout-styles.js → styles/vaadin-form-layout-base-styles.js}

@@ -3,19 +3,20 @@
  * 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 '@vaadin/component-base/src/styles/style-props.js';
+import { css } from 'lit';
 
 export const formLayoutStyles = css`
   :host {
     /* Default values */
-    --vaadin-form-layout-row-spacing: 1em;
-    --vaadin-form-layout-column-spacing: 2em;
+    --vaadin-form-layout-label-spacing: var(--vaadin-gap-container-inline);
     --vaadin-form-layout-label-width: 8em;
-    --vaadin-form-layout-label-spacing: 1em;
+    --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%;
-    align-self: stretch;
   }
 
   :host([hidden]) {
@@ -23,10 +24,8 @@ export const formLayoutStyles = css`
   }
 
   :host(:not([auto-responsive])) #layout {
-    display: flex;
-
     align-items: baseline; /* default \`stretch\` is not appropriate */
-
+    display: flex;
     flex-wrap: wrap; /* the items should wrap */
   }
 
@@ -36,8 +35,7 @@ export const formLayoutStyles = css`
     flex-shrink: 0;
 
     /* Margins make spacing between the columns */
-    margin-left: calc(0.5 * var(--vaadin-form-layout-column-spacing));
-    margin-right: calc(0.5 * var(--vaadin-form-layout-column-spacing));
+    margin-inline: calc(0.5 * var(--vaadin-form-layout-column-spacing));
   }
 
   #layout ::slotted(br) {
@@ -80,7 +78,7 @@ export const formLayoutStyles = css`
     --_grid-repeat: var(--_grid-column-width);
 
     display: grid;
-    grid-template-columns: repeat(auto-fill, var(--_grid-repeat));
+    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.
@@ -89,8 +87,14 @@ export const formLayoutStyles = css`
     */
     grid-auto-columns: 0;
 
-    justify-items: start;
-    gap: var(--vaadin-form-layout-row-spacing) var(--vaadin-form-layout-column-spacing);
+    grid-template-columns: repeat(auto-fill, var(--_grid-repeat));
+    place-items: baseline 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,
@@ -105,12 +109,6 @@ export const formLayoutStyles = css`
       without a predefined width.
     */
     width: var(--_max-width);
-
-    /*
-      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);
   }
 
   :host([auto-responsive]) #layout::before {
@@ -124,6 +122,9 @@ export const formLayoutStyles = css`
 
     /* 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(*) {
@@ -162,87 +163,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;
-  }
-
-  #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/vaadin-form-item.js

@@ -6,9 +6,10 @@
 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 { 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-base-styles.js';
 import { FormItemMixin } from './vaadin-form-item-mixin.js';
-import { formItemStyles } from './vaadin-form-layout-styles.js';
 
 /**
  * `<vaadin-form-item>` is a Web Component providing labelled form item wrapper
@@ -102,7 +103,7 @@ import { formItemStyles } from './vaadin-form-layout-styles.js';
  * @mixes FormItemMixin
  * @mixes ThemableMixin
  */
-class FormItem extends FormItemMixin(ThemableMixin(PolylitMixin(LitElement))) {
+class FormItem extends FormItemMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))) {
   static get is() {
     return 'vaadin-form-item';
   }
@@ -111,6 +112,12 @@ class FormItem extends FormItemMixin(ThemableMixin(PolylitMixin(LitElement))) {
     return formItemStyles;
   }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   /** @protected */
   render() {
     return html`

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-base-styles.js';
 
 /**
  * @polymerMixin

package/src/vaadin-form-layout.js

@@ -7,9 +7,10 @@ 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 { 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-base-styles.js';
 import { FormLayoutMixin } from './vaadin-form-layout-mixin.js';
-import { formLayoutStyles } from './vaadin-form-layout-styles.js';
 
 /**
  * `<vaadin-form-layout>` is a Web Component providing configurable responsive
@@ -205,7 +206,7 @@ import { formLayoutStyles } from './vaadin-form-layout-styles.js';
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class FormLayout extends FormLayoutMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
+class FormLayout extends FormLayoutMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-form-layout';
   }
@@ -214,6 +215,12 @@ class FormLayout extends FormLayoutMixin(ThemableMixin(ElementMixin(PolylitMixin
     return formLayoutStyles;
   }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   /** @protected */
   render() {
     return html`

package/src/vaadin-form-row.js

@@ -7,7 +7,7 @@ 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';
+import { formRowStyles } from './styles/vaadin-form-row-base-styles.js';
 
 /**
  * `<vaadin-form-row>` is a web component for arranging fields into rows
@@ -30,6 +30,12 @@ class FormRow extends ThemableMixin(PolylitMixin(LitElement)) {
     return formRowStyles;
   }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   /** @protected */
   render() {
     return html`<slot></slot>`;

package/vaadin-form-item.js

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

package/vaadin-form-layout.js

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

package/vaadin-form-row.js

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

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/form-layout",
-  "version": "25.0.0-alpha1",
+  "version": "25.0.0-alpha11",
   "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/25.0.0-alpha1/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/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-alpha1/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/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-alpha1/#/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-alpha1/#/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-alpha1/#/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-alpha11/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha11/#/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-alpha11/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha11/#/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-alpha11/#/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-alpha11/#/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-alpha11/#/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": "25.0.0-alpha1",
+  "version": "25.0.0-alpha11",
   "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/25.0.0-alpha1/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/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-alpha1/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/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-alpha1/#/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-alpha1/#/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-alpha1/#/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-alpha11/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha11/#/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-alpha11/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha11/#/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-alpha11/#/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-alpha11/#/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-alpha11/#/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/theme/lumo/vaadin-form-item-styles.d.ts

@@ -1,4 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';

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

@@ -1,42 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-form-item',
-  css`
-    /* font-weight, margin-bottom, transition and line-height same as for part label in text-field */
-    [part='label'] {
-      color: var(--lumo-secondary-text-color);
-      font-family: var(--lumo-font-family);
-      font-size: var(--lumo-font-size-s);
-      font-weight: 500;
-      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;
-    }
-
-    [part='required-indicator']::after {
-      content: var(--lumo-required-field-indicator, '\\2022');
-      transition: opacity 0.2s;
-      opacity: 0;
-      color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
-      position: relative;
-      width: 1em;
-      text-align: center;
-    }
-
-    :host([required]) [part='required-indicator']::after {
-      opacity: 1;
-    }
-
-    :host([invalid]) [part='required-indicator']::after {
-      color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
-    }
-  `,
-  { moduleId: 'lumo-form-item' },
-);

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

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

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

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

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

@@ -1 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/spacing.js';

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

@@ -1,13 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-form-layout',
-  css`
-    :host {
-      --vaadin-form-layout-column-spacing: var(--lumo-space-l);
-      --vaadin-form-layout-row-spacing: 0;
-    }
-  `,
-  { moduleId: 'lumo-form-layout' },
-);

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

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

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

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

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

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

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

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