@vaadin/form-layout 24.8.0-alpha8 → 25.0.0-alpha1

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.0-alpha8",
+  "version": "25.0.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -31,30 +31,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.0-alpha8",
-    "@vaadin/component-base": "24.8.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha8",
+    "@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",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha8",
-    "@vaadin/custom-field": "24.8.0-alpha8",
-    "@vaadin/test-runner-commands": "24.8.0-alpha8",
+    "@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": "24.8.0-alpha8",
+    "@vaadin/text-field": "25.0.0-alpha1",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "d914bb8f669d7e3d1981feb8eac05688ab9870b4"
+  "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
 }

package/src/layouts/auto-responsive-layout.js

@@ -130,7 +130,8 @@ export class AutoResponsiveLayout extends AbstractLayout {
       host.style.removeProperty('--_column-width');
     }
 
-    host.style.setProperty('--_max-columns', Math.min(props.maxColumns, maxColumns));
+    host.style.setProperty('--_min-columns', props.minColumns);
+    host.style.setProperty('--_max-columns', Math.min(Math.max(props.minColumns, props.maxColumns), maxColumns));
 
     host.$.layout.toggleAttribute('fits-labels-aside', this.props.labelsAside && this.__fitsLabelsAside);
     host.$.layout.style.setProperty('--_grid-rendered-column-count', this.__renderedColumnCount);
@@ -170,13 +171,13 @@ export class AutoResponsiveLayout extends AbstractLayout {
   }
 
   /** @private */
-  get __columnWidthWithLabelsAside() {
+  get __minWidthLabelsAside() {
     const { backgroundPositionY } = getComputedStyle(this.host.$.layout, '::before');
     return parseFloat(backgroundPositionY);
   }
 
   /** @private */
   get __fitsLabelsAside() {
-    return this.host.offsetWidth >= this.__columnWidthWithLabelsAside;
+    return this.host.offsetWidth >= this.__minWidthLabelsAside;
   }
 }

package/src/layouts/responsive-steps-layout.js

@@ -53,6 +53,24 @@ export class ResponsiveStepsLayout extends AbstractLayout {
     requestAnimationFrame(() => this.updateLayout());
   }
 
+  /** @override */
+  disconnect() {
+    if (!this.isConnected) {
+      return;
+    }
+
+    super.disconnect();
+
+    const { host } = this;
+    host.$.layout.style.removeProperty('opacity');
+    [...host.children].forEach((child) => {
+      child.style.removeProperty('width');
+      child.style.removeProperty('margin-left');
+      child.style.removeProperty('margin-right');
+      child.removeAttribute('label-position');
+    });
+  }
+
   /** @override */
   setProps(props) {
     const { responsiveSteps } = props;
@@ -206,6 +224,10 @@ export class ResponsiveStepsLayout extends AbstractLayout {
 
   /** @private */
   __selectResponsiveStep() {
+    if (!this.isConnected) {
+      return;
+    }
+
     const { host, props } = this;
     // Iterate through responsiveSteps and choose the step
     let selectedStep;

package/src/vaadin-form-item.js

@@ -3,14 +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 { 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';
 
-registerStyles('vaadin-form-item', formItemStyles, { moduleId: 'vaadin-form-item-styles' });
-
 /**
  * `<vaadin-form-item>` is a Web Component providing labelled form item wrapper
  * for using inside `<vaadin-form-layout>`.
@@ -103,20 +102,25 @@ 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(LitElement))) {
   static get is() {
     return 'vaadin-form-item';
   }
 
-  static get template() {
+  static get styles() {
+    return formItemStyles;
+  }
+
+  /** @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.d.ts

@@ -119,6 +119,17 @@ export declare class FormLayoutMixinClass {
    */
   maxColumns: number;
 
+  /**
+   * When `autoResponsive` is enabled, defines the minimum number of columns
+   * that the layout can create. The layout will create columns at least up
+   * to this limit provided the container width allows it.
+   *
+   * The default value is `1`.
+   *
+   * @attr {number} min-columns
+   */
+  minColumns: number;
+
   /**
    * When enabled with `autoResponsive`, distributes fields across columns
    * by placing each field in the next available column and wrapping to

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

@@ -156,6 +156,21 @@ export const FormLayoutMixin = (superClass) =>
           value: 10,
         },
 
+        /**
+         * When `autoResponsive` is enabled, defines the minimum number of columns
+         * that the layout can create. The layout will create columns at least up
+         * to this limit.
+         *
+         * The default value is `1`.
+         *
+         * @attr {number} min-columns
+         */
+        minColumns: {
+          type: Number,
+          sync: true,
+          value: 1,
+        },
+
         /**
          * When enabled with `autoResponsive`, distributes fields across columns
          * by placing each field in the next available column and wrapping to
@@ -231,7 +246,7 @@ export const FormLayoutMixin = (superClass) =>
 
     static get observers() {
       return [
-        '__autoResponsiveLayoutPropsChanged(columnWidth, maxColumns, autoRows, labelsAside, expandColumns, expandFields)',
+        '__autoResponsiveLayoutPropsChanged(columnWidth, maxColumns, minColumns, autoRows, labelsAside, expandColumns, expandFields)',
         '__autoResponsiveChanged(autoResponsive)',
       ];
     }
@@ -289,10 +304,19 @@ export const FormLayoutMixin = (superClass) =>
 
     /** @private */
     // eslint-disable-next-line @typescript-eslint/max-params
-    __autoResponsiveLayoutPropsChanged(columnWidth, maxColumns, autoRows, labelsAside, expandColumns, expandFields) {
+    __autoResponsiveLayoutPropsChanged(
+      columnWidth,
+      maxColumns,
+      minColumns,
+      autoRows,
+      labelsAside,
+      expandColumns,
+      expandFields,
+    ) {
       this.__autoResponsiveLayout.setProps({
         columnWidth,
         maxColumns,
+        minColumns,
         autoRows,
         labelsAside,
         expandColumns,

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

@@ -45,14 +45,29 @@ export const formLayoutStyles = css`
   }
 
   :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(--_column-width-labels-above);
+    min-width: var(--_min-width);
   }
 
   :host([auto-responsive]) #layout {
@@ -61,10 +76,7 @@ export const formLayoutStyles = css`
     --_form-item-labels-aside: ' '; /* false */
 
     /* CSS grid related properties */
-    --_grid-column-gap: var(--vaadin-form-layout-column-spacing);
     --_grid-column-width: var(--_column-width-labels-above);
-    --_grid-column-max-total-gap: calc((var(--_max-columns) - 1) * var(--_grid-column-gap));
-    --_grid-column-max-total-width: calc(var(--_max-columns) * var(--_column-width-labels-above));
     --_grid-repeat: var(--_grid-column-width);
 
     display: grid;
@@ -78,7 +90,7 @@ export const formLayoutStyles = css`
     grid-auto-columns: 0;
 
     justify-items: start;
-    gap: var(--vaadin-form-layout-row-spacing) var(--_grid-column-gap);
+    gap: var(--vaadin-form-layout-row-spacing) var(--vaadin-form-layout-column-spacing);
 
     /*
       To prevent the layout from exceeding the column limit defined by --_max-columns,
@@ -92,17 +104,17 @@ export const formLayoutStyles = css`
       number of columns inside <vaadin-overlay>, which creates a new stacking context
       without a predefined width.
     */
-    width: calc(var(--_grid-column-max-total-width) + var(--_grid-column-max-total-gap));
+    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: inherit;
+    min-width: var(--_min-width);
   }
 
   :host([auto-responsive]) #layout::before {
-    background-position-y: var(--_column-width-labels-aside);
+    background-position-y: var(--_min-width-labels-aside);
   }
 
   :host([auto-responsive]) #layout ::slotted(*) {
@@ -118,8 +130,8 @@ export const formLayoutStyles = css`
     grid-column-start: var(--_grid-colstart, auto);
   }
 
-  :host([auto-responsive][labels-aside]) #layout {
-    --_grid-column-max-total-width: calc(var(--_max-columns) * var(--_column-width-labels-aside));
+  :host([auto-responsive][labels-aside]) {
+    --_max-width: var(--_max-width-labels-aside);
   }
 
   :host([auto-responsive][labels-aside]) #layout[fits-labels-aside] {
@@ -138,7 +150,7 @@ export const formLayoutStyles = css`
       reached yet.
     */
     --_grid-repeat: minmax(
-      max(var(--_grid-column-width), calc((100% - var(--_grid-column-max-total-gap)) / var(--_max-columns))),
+      max(var(--_grid-column-width), calc((100% - var(--_max-total-gap)) / var(--_max-columns))),
       1fr
     );
 

package/src/vaadin-form-layout.js

@@ -3,15 +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 { 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';
 
-registerStyles('vaadin-form-layout', formLayoutStyles, { moduleId: 'vaadin-form-layout-styles' });
-
 /**
  * `<vaadin-form-layout>` is a Web Component providing configurable responsive
  * layout for form elements.
@@ -206,12 +205,17 @@ 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(LitElement)))) {
   static get is() {
     return 'vaadin-form-layout';
   }
 
-  static get template() {
+  static get styles() {
+    return formLayoutStyles;
+  }
+
+  /** @protected */
+  render() {
     return html`
       <div id="layout">
         <slot id="slot"></slot>

package/src/vaadin-form-row.js

@@ -3,13 +3,12 @@
  * 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 { 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' });
-
 /**
  * `<vaadin-form-row>` is a web component for arranging fields into rows
  * inside a `<vaadin-form-layout>` that is set to autoResponsive mode.
@@ -22,12 +21,17 @@ 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;
+  }
+
+  /** @protected */
+  render() {
     return html`<slot></slot>`;
   }
 }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/form-layout",
-  "version": "24.8.0-alpha8",
+  "version": "25.0.0-alpha1",
   "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.0-alpha8/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha8/#/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.0-alpha8/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha8/#/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.0-alpha8/#/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.0-alpha8/#/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.0-alpha8/#/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-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`",
           "attributes": [
             {
               "name": "auto-responsive",
@@ -64,6 +64,17 @@
                 ]
               }
             },
+            {
+              "name": "min-columns",
+              "description": "When `autoResponsive` is enabled, defines the minimum number of columns\nthat the layout can create. The layout will create columns at least up\nto this limit.\n\nThe default value is `1`.",
+              "value": {
+                "type": [
+                  "number",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "auto-rows",
               "description": "When enabled with `autoResponsive`, distributes fields across columns\nby placing each field in the next available column and wrapping to\nthe next row when the current row is full. `<br>` elements can be\nused to force a new row.\n\nThe default value is `false`.",
@@ -164,6 +175,17 @@
                   ]
                 }
               },
+              {
+                "name": "minColumns",
+                "description": "When `autoResponsive` is enabled, defines the minimum number of columns\nthat the layout can create. The layout will create columns at least up\nto this limit.\n\nThe default value is `1`.",
+                "value": {
+                  "type": [
+                    "number",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "autoRows",
                 "description": "When enabled with `autoResponsive`, distributes fields across columns\nby placing each field in the next available column and wrapping to\nthe next row when the current row is full. `<br>` elements can be\nused to force a new row.\n\nThe default value is `false`.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/form-layout",
-  "version": "24.8.0-alpha8",
+  "version": "25.0.0-alpha1",
   "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.0-alpha8/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha8/#/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.0-alpha8/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha8/#/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.0-alpha8/#/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.0-alpha8/#/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.0-alpha8/#/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-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`",
           "extension": true,
           "attributes": [
             {
@@ -80,6 +80,13 @@
               "value": {
                 "kind": "expression"
               }
+            },
+            {
+              "name": ".minColumns",
+              "description": "When `autoResponsive` is enabled, defines the minimum number of columns\nthat the layout can create. The layout will create columns at least up\nto this limit.\n\nThe default value is `1`.",
+              "value": {
+                "kind": "expression"
+              }
             }
           ]
         },

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

@@ -1,6 +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/
- */
-export * from './vaadin-form-item.js';

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.d.ts

@@ -1,6 +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/
- */
-export * from './vaadin-form-layout.js';

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.d.ts

@@ -1,6 +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/
- */
-export * from './vaadin-form-row.js';

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';