@vaadin/form-layout 24.8.0-alpha2 → 24.8.0-alpha20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/form-layout",
-  "version": "24.8.0-alpha2",
+  "version": "24.8.0-alpha20",
   "publishConfig": {
     "access": "public"
   },
@@ -37,24 +37,24 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.8.0-alpha2",
-    "@vaadin/component-base": "24.8.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha2",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha2",
+    "@vaadin/a11y-base": "24.8.0-alpha20",
+    "@vaadin/component-base": "24.8.0-alpha20",
+    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha20",
+    "@vaadin/vaadin-material-styles": "24.8.0-alpha20",
+    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha20",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha2",
-    "@vaadin/custom-field": "24.8.0-alpha2",
-    "@vaadin/test-runner-commands": "24.8.0-alpha2",
+    "@vaadin/chai-plugins": "24.8.0-alpha20",
+    "@vaadin/custom-field": "24.8.0-alpha20",
+    "@vaadin/test-runner-commands": "24.8.0-alpha20",
     "@vaadin/testing-helpers": "^1.1.0",
-    "@vaadin/text-field": "24.8.0-alpha2",
+    "@vaadin/text-field": "24.8.0-alpha20",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "f48777a6e3dcf605b700305a7142145e197bb416"
+  "gitHead": "f091548b1f079f0c9de4be2a8ded77fb18671a2e"
 }

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils';
+import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils.js';
 import { AbstractLayout } from './abstract-layout.js';
 
 /**
@@ -124,8 +124,14 @@ export class AutoResponsiveLayout extends AbstractLayout {
       child.style.removeProperty('--_grid-colstart');
     });
 
-    host.style.setProperty('--_column-width', props.columnWidth);
-    host.style.setProperty('--_max-columns', Math.min(props.maxColumns, maxColumns));
+    if (props.columnWidth) {
+      host.style.setProperty('--_column-width', props.columnWidth);
+    } else {
+      host.style.removeProperty('--_column-width');
+    }
+
+    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);
@@ -165,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

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils';
+import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils.js';
 import { AbstractLayout } from './abstract-layout.js';
 
 function isValidCSSLength(value) {
@@ -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-mixin.js

@@ -17,7 +17,8 @@ export const FormItemMixin = (superClass) =>
   class extends superClass {
     constructor() {
       super();
-      this.__updateInvalidState = this.__updateInvalidState.bind(this);
+
+      this.__onFieldInteraction = this.__onFieldInteraction.bind(this);
 
       /**
        * An observer for a field node to reflect its `required` and `invalid` attributes to the component.
@@ -25,7 +26,7 @@ export const FormItemMixin = (superClass) =>
        * @type {MutationObserver}
        * @private
        */
-      this.__fieldNodeObserver = new MutationObserver(() => this.__updateRequiredState(this.__fieldNode.required));
+      this.__fieldNodeObserver = new MutationObserver(() => this.__synchronizeAttributes());
 
       /**
        * The first label node in the label slot.
@@ -44,6 +45,8 @@ export const FormItemMixin = (superClass) =>
        * @private
        */
       this.__fieldNode = null;
+
+      this.__isFieldDirty = false;
     }
 
     /** @protected */
@@ -122,11 +125,6 @@ export const FormItemMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __getValidateFunction(field) {
-      return field.validate || field.checkValidity;
-    }
-
     /**
      * A `slotchange` event handler for the label slot.
      *
@@ -178,9 +176,11 @@ export const FormItemMixin = (superClass) =>
       if (this.__fieldNode) {
         // Discard the old field
         this.__unlinkLabelFromField(this.__fieldNode);
-        this.__updateRequiredState(false);
         this.__fieldNodeObserver.disconnect();
+        this.__fieldNode.removeEventListener('blur', this.__onFieldInteraction);
+        this.__fieldNode.removeEventListener('change', this.__onFieldInteraction);
         this.__fieldNode = null;
+        this.__isFieldDirty = false;
       }
 
       const fieldNodes = this.$.contentSlot.assignedElements();
@@ -191,37 +191,43 @@ Please wrap fields with a <vaadin-custom-field> instead.`,
         );
       }
 
-      const newFieldNode = fieldNodes.find((field) => {
-        return !!this.__getValidateFunction(field);
-      });
+      const newFieldNode = fieldNodes.find((field) => field.validate || field.checkValidity);
       if (newFieldNode) {
         this.__fieldNode = newFieldNode;
-        this.__updateRequiredState(this.__fieldNode.required);
-        this.__fieldNodeObserver.observe(this.__fieldNode, { attributes: true, attributeFilter: ['required'] });
+        this.__fieldNode.addEventListener('blur', this.__onFieldInteraction);
+        this.__fieldNode.addEventListener('change', this.__onFieldInteraction);
+        this.__fieldNodeObserver.observe(this.__fieldNode, {
+          attributes: true,
+          attributeFilter: ['required', 'invalid'],
+        });
 
         if (this.__labelNode) {
           this.__linkLabelToField(this.__fieldNode);
         }
       }
+
+      this.__synchronizeAttributes();
     }
 
     /** @private */
-    __updateRequiredState(required) {
-      if (required) {
-        this.setAttribute('required', '');
-        this.__fieldNode.addEventListener('blur', this.__updateInvalidState);
-        this.__fieldNode.addEventListener('change', this.__updateInvalidState);
-      } else {
-        this.removeAttribute('invalid');
-        this.removeAttribute('required');
-        this.__fieldNode.removeEventListener('blur', this.__updateInvalidState);
-        this.__fieldNode.removeEventListener('change', this.__updateInvalidState);
-      }
+    __onFieldInteraction() {
+      this.__isFieldDirty = true;
+      this.__synchronizeAttributes();
     }
 
     /** @private */
-    __updateInvalidState() {
-      const isValid = this.__getValidateFunction(this.__fieldNode).call(this.__fieldNode);
-      this.toggleAttribute('invalid', isValid === false);
+    __synchronizeAttributes() {
+      const field = this.__fieldNode;
+      if (!field) {
+        this.removeAttribute('required');
+        this.removeAttribute('invalid');
+        return;
+      }
+
+      this.toggleAttribute('required', field.hasAttribute('required'));
+      this.toggleAttribute(
+        'invalid',
+        field.hasAttribute('invalid') || (field.matches(':invalid') && this.__isFieldDirty),
+      );
     }
   };

package/src/vaadin-form-layout-mixin.d.ts

@@ -30,6 +30,14 @@ export declare class FormLayoutMixinClass {
    * with `minWidth` CSS length, `columns` number, and optional
    * `labelsPosition` string of `"aside"` or `"top"`. At least one item is required.
    *
+   * NOTE: Responsive steps are ignored in auto-responsive mode, which may be
+   * enabled explicitly via the `autoResponsive` property or implicitly
+   * if the following feature flag is set:
+   *
+   * ```
+   * window.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true
+   * ```
+   *
    * #### Examples
    *
    * ```javascript
@@ -62,11 +70,11 @@ export declare class FormLayoutMixinClass {
   responsiveSteps: FormLayoutResponsiveStep[];
 
   /**
-   * Enables the auto responsive mode in which the component automatically creates and adjusts
-   * columns based on the container's width. Columns have a fixed width defined by `columnWidth`
-   * and their number increases up to the limit set by `maxColumns`. The component dynamically
-   * adjusts the number of columns as the container size changes. When this mode is enabled,
-   * the `responsiveSteps` are ignored.
+   * When set to `true`, the component automatically creates and adjusts columns based on
+   * the container's width. Columns have a fixed width defined by `columnWidth` and their
+   * number increases up to the limit set by `maxColumns`. The component dynamically adjusts
+   * the number of columns as the container size changes. When this mode is enabled,
+   * `responsiveSteps` are ignored.
    *
    * By default, each field is placed on a new row. To organize fields into rows, there are
    * two options:
@@ -76,14 +84,25 @@ export declare class FormLayoutMixinClass {
    * 2. Enable the `autoRows` property to automatically arrange fields in available columns,
    *    wrapping to a new row when necessary. `<br>` elements can be used to force a new row.
    *
+   * The auto-responsive mode is disabled by default. To enable it for an individual instance,
+   * use this property. Alternatively, if you want it to be enabled for all instances by default,
+   * enable the `defaultAutoResponsiveFormLayout` feature flag before `<vaadin-form-layout>`
+   * elements are added to the DOM:
+   *
+   * ```js
+   * window.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;
+   * ```
+   *
    * @attr {boolean} auto-responsive
    */
   autoResponsive: boolean;
 
   /**
    * When `autoResponsive` is enabled, defines the width of each column.
-   * The value must be defined in CSS length units, e.g., `100px` or `13em`.
-   * The default value is `13em`.
+   * The value must be defined in CSS length units, e.g. `100px`.
+   *
+   * If the column width isn't explicitly set, it defaults to `12em`
+   * or `--vaadin-field-default-width` if that CSS property is defined.
    *
    * @attr {string} column-width
    */
@@ -92,18 +111,33 @@ export declare class FormLayoutMixinClass {
   /**
    * When `autoResponsive` is enabled, defines the maximum number of columns
    * that the layout can create. The layout will create columns up to this
-   * limit based on the available container width. The default value is `10`.
+   * limit based on the available container width.
+   *
+   * The default value is `10`.
    *
    * @attr {number} max-columns
    */
   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
    * the next row when the current row is full. `<br>` elements can be
    * used to force a new row.
    *
+   * The default value is `false`.
+   *
    * @attr {boolean} auto-rows
    */
   autoRows: boolean;
@@ -111,7 +145,10 @@ export declare class FormLayoutMixinClass {
   /**
    * When enabled with `autoResponsive`, `<vaadin-form-item>` prefers positioning
    * labels beside the fields. If the layout is too narrow to fit a single column
-   * with side labels, they revert to their default position above the fields.
+   * with a side label, the component will automatically switch labels to their
+   * default position above the fields.
+   *
+   * The default value is `false`.
    *
    * To customize the label width and the gap between the label and the field,
    * use the following CSS properties:
@@ -125,9 +162,9 @@ export declare class FormLayoutMixinClass {
 
   /**
    * When `autoResponsive` is enabled, specifies whether the columns should expand
-   * in width to evenly fill any remaining space after the layout has created as
-   * many fixed-width (`columnWidth`) columns as possible within the `maxColumns`
-   * limit. The default value is `false`.
+   * in width to evenly fill any remaining space after all columns have been created.
+   *
+   * The default value is `false`.
    *
    * @attr {boolean} expand-columns
    */
@@ -136,7 +173,9 @@ export declare class FormLayoutMixinClass {
   /**
    * When `autoResponsive` is enabled, specifies whether fields should stretch
    * to take up all available space within columns. This setting also applies
-   * to fields inside `<vaadin-form-item>` elements. The default value is `false`.
+   * to fields inside `<vaadin-form-item>` elements.
+   *
+   * The default value is `false`.
    *
    * @attr {boolean} expand-fields
    */

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

@@ -32,6 +32,14 @@ export const FormLayoutMixin = (superClass) =>
          * with `minWidth` CSS length, `columns` number, and optional
          * `labelsPosition` string of `"aside"` or `"top"`. At least one item is required.
          *
+         * NOTE: Responsive steps are ignored in auto-responsive mode, which may be
+         * enabled explicitly via the `autoResponsive` property or implicitly
+         * if the following feature flag is set:
+         *
+         * ```
+         * window.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true
+         * ```
+         *
          * #### Examples
          *
          * ```javascript
@@ -77,11 +85,11 @@ export const FormLayoutMixin = (superClass) =>
         },
 
         /**
-         * Enables the auto responsive mode in which the component automatically creates and adjusts
-         * columns based on the container's width. Columns have a fixed width defined by `columnWidth`
-         * and their number increases up to the limit set by `maxColumns`. The component dynamically
-         * adjusts the number of columns as the container size changes. When this mode is enabled,
-         * the `responsiveSteps` are ignored.
+         * When set to `true`, the component automatically creates and adjusts columns based on
+         * the container's width. Columns have a fixed width defined by `columnWidth` and their
+         * number increases up to the limit set by `maxColumns`. The component dynamically adjusts
+         * the number of columns as the container size changes. When this mode is enabled,
+         * `responsiveSteps` are ignored.
          *
          * By default, each field is placed on a new row. To organize fields into rows, there are
          * two options:
@@ -91,32 +99,54 @@ export const FormLayoutMixin = (superClass) =>
          * 2. Enable the `autoRows` property to automatically arrange fields in available columns,
          *    wrapping to a new row when necessary. `<br>` elements can be used to force a new row.
          *
+         * The auto-responsive mode is disabled by default. To enable it for an individual instance,
+         * use this property. Alternatively, if you want it to be enabled for all instances by default,
+         * enable the `defaultAutoResponsiveFormLayout` feature flag before `<vaadin-form-layout>`
+         * elements are added to the DOM:
+         *
+         * ```js
+         * window.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;
+         * ```
+         *
          * @attr {boolean} auto-responsive
          */
         autoResponsive: {
           type: Boolean,
           sync: true,
-          value: false,
+          value: () => {
+            if (
+              window.Vaadin &&
+              window.Vaadin.featureFlags &&
+              window.Vaadin.featureFlags.defaultAutoResponsiveFormLayout
+            ) {
+              return true;
+            }
+
+            return false;
+          },
           reflectToAttribute: true,
         },
 
         /**
          * When `autoResponsive` is enabled, defines the width of each column.
-         * The value must be defined in CSS length units, e.g., `100px` or `13em`.
-         * The default value is `13em`.
+         * The value must be defined in CSS length units, e.g. `100px`.
+         *
+         * If the column width isn't explicitly set, it defaults to `12em`
+         * or `--vaadin-field-default-width` if that CSS property is defined.
          *
          * @attr {string} column-width
          */
         columnWidth: {
           type: String,
           sync: true,
-          value: '13em',
         },
 
         /**
          * When `autoResponsive` is enabled, defines the maximum number of columns
          * that the layout can create. The layout will create columns up to this
-         * limit based on the available container width. The default value is `10`.
+         * limit based on the available container width.
+         *
+         * The default value is `10`.
          *
          * @attr {number} max-columns
          */
@@ -126,12 +156,29 @@ 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
          * the next row when the current row is full. `<br>` elements can be
          * used to force a new row.
          *
+         * The default value is `false`.
+         *
          * @attr {boolean} auto-rows
          */
         autoRows: {
@@ -144,7 +191,10 @@ export const FormLayoutMixin = (superClass) =>
         /**
          * When enabled with `autoResponsive`, `<vaadin-form-item>` prefers positioning
          * labels beside the fields. If the layout is too narrow to fit a single column
-         * with side labels, they revert to their default position above the fields.
+         * with a side label, the component will automatically switch labels to their
+         * default position above the fields.
+         *
+         * The default value is `false`.
          *
          * To customize the label width and the gap between the label and the field,
          * use the following CSS properties:
@@ -163,9 +213,9 @@ export const FormLayoutMixin = (superClass) =>
 
         /**
          * When `autoResponsive` is enabled, specifies whether the columns should expand
-         * in width to evenly fill any remaining space after the layout has created as
-         * many fixed-width (`columnWidth`) columns as possible within the `maxColumns`
-         * limit. The default value is `false`.
+         * in width to evenly fill any remaining space after all columns have been created.
+         *
+         * The default value is `false`.
          *
          * @attr {boolean} expand-columns
          */
@@ -179,7 +229,9 @@ export const FormLayoutMixin = (superClass) =>
         /**
          * When `autoResponsive` is enabled, specifies whether fields should stretch
          * to take up all available space within columns. This setting also applies
-         * to fields inside `<vaadin-form-item>` elements. The default value is `false`.
+         * to fields inside `<vaadin-form-item>` elements.
+         *
+         * The default value is `false`.
          *
          * @attr {boolean} expand-fields
          */
@@ -194,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)',
       ];
     }
@@ -252,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,13 +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 {
@@ -60,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;
@@ -77,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,
@@ -91,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(*) {
@@ -117,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] {
@@ -137,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.d.ts

@@ -94,9 +94,15 @@ export * from './vaadin-form-layout-mixin.js';
  *
  * To avoid manually dealing with responsive breakpoints, Form Layout provides an auto-responsive mode
  * that automatically creates and adjusts fixed-width columns based on the container's available space.
+ *
  * The [`columnWidth`](#/elements/vaadin-form-layout#property-columnWidth) and
- * [`maxColumns`](#/elements/vaadin-form-layout#property-maxColumns) properties control the column width
- * (13em by default) and the maximum number of columns (10 by default) that the Form Layout can create.
+ * [`maxColumns`](#/elements/vaadin-form-layout#property-maxColumns) properties define the width of
+ * each column and the maximum number of columns that the component can create. By default, the component
+ * creates up to 10 columns, each with a width of `12em` or the value of the `--vaadin-field-default-width`
+ * CSS custom property, if defined.
+ *
+ * The auto-responsive mode is disabled by default. To enable it for an individual instance, set the
+ * `auto-responsive` attribute:
  *
  * ```html
  * <vaadin-form-layout auto-responsive>
@@ -106,6 +112,13 @@ export * from './vaadin-form-layout-mixin.js';
  * </vaadin-form-layout>
  * ```
  *
+ * You can also enable it for all instances by enabling the following feature flag
+ * before `<vaadin-form-layout>` elements are added to the DOM:
+ *
+ * ```js
+ * window.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;
+ * ```
+ *
  * #### Organizing Fields into Rows
  *
  * By default, each field is placed on a new row. To organize fields into rows, you can either:
@@ -181,6 +194,8 @@ export * from './vaadin-form-layout-mixin.js';
  * ---|---|---
  * `--vaadin-form-layout-column-spacing` | Length of the spacing between columns | `2em`
  * `--vaadin-form-layout-row-spacing` | Length of the spacing between rows | `1em`
+ * `--vaadin-form-layout-label-width` | Width of the label when labels are displayed aside | `8em`
+ * `--vaadin-form-layout-label-spacing` | Length of the spacing between the label and the input when labels are displayed aside | `1em`
  */
 declare class FormLayout extends FormLayoutMixin(ElementMixin(ThemableMixin(HTMLElement))) {}
 

package/src/vaadin-form-layout.js

@@ -97,9 +97,15 @@ registerStyles('vaadin-form-layout', formLayoutStyles, { moduleId: 'vaadin-form-
  *
  * To avoid manually dealing with responsive breakpoints, Form Layout provides an auto-responsive mode
  * that automatically creates and adjusts fixed-width columns based on the container's available space.
+ *
  * The [`columnWidth`](#/elements/vaadin-form-layout#property-columnWidth) and
- * [`maxColumns`](#/elements/vaadin-form-layout#property-maxColumns) properties control the column width
- * (13em by default) and the maximum number of columns (10 by default) that the Form Layout can create.
+ * [`maxColumns`](#/elements/vaadin-form-layout#property-maxColumns) properties define the width of
+ * each column and the maximum number of columns that the component can create. By default, the component
+ * creates up to 10 columns, each with a width of `12em` or the value of the `--vaadin-field-default-width`
+ * CSS custom property, if defined.
+ *
+ * The auto-responsive mode is disabled by default. To enable it for an individual instance, set the
+ * `auto-responsive` attribute:
  *
  * ```html
  * <vaadin-form-layout auto-responsive>
@@ -109,6 +115,13 @@ registerStyles('vaadin-form-layout', formLayoutStyles, { moduleId: 'vaadin-form-
  * </vaadin-form-layout>
  * ```
  *
+ * You can also enable it for all instances by enabling the following feature flag
+ * before `<vaadin-form-layout>` elements are added to the DOM:
+ *
+ * ```js
+ * window.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;
+ * ```
+ *
  * #### Organizing Fields into Rows
  *
  * By default, each field is placed on a new row. To organize fields into rows, you can either:

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/form-layout",
-  "version": "24.8.0-alpha2",
+  "version": "24.8.0-alpha20",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -29,11 +29,11 @@
         },
         {
           "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.\nThe [`columnWidth`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha2/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha2/#/elements/vaadin-form-layout#property-maxColumns) properties control the column width\n(13em by default) and the maximum number of columns (10 by default) that the Form Layout can create.\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\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-alpha2/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha2/#/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-alpha2/#/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-alpha2/#/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-alpha2/#/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/24.8.0-alpha20/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha20/#/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-alpha20/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha20/#/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-alpha20/#/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-alpha20/#/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-alpha20/#/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",
-              "description": "Enables the auto responsive mode in which the component automatically creates and adjusts\ncolumns based on the container's width. Columns have a fixed width defined by `columnWidth`\nand their number increases up to the limit set by `maxColumns`. The component dynamically\nadjusts the number of columns as the container size changes. When this mode is enabled,\nthe `responsiveSteps` are ignored.\n\nBy default, each field is placed on a new row. To organize fields into rows, there are\ntwo options:\n\n1. Use `<vaadin-form-row>` to explicitly group fields into rows.\n\n2. Enable the `autoRows` property to automatically arrange fields in available columns,\n   wrapping to a new row when necessary. `<br>` elements can be used to force a new row.",
+              "description": "When set to `true`, the component automatically creates and adjusts columns based on\nthe container's width. Columns have a fixed width defined by `columnWidth` and their\nnumber increases up to the limit set by `maxColumns`. The component dynamically adjusts\nthe number of columns as the container size changes. When this mode is enabled,\n`responsiveSteps` are ignored.\n\nBy default, each field is placed on a new row. To organize fields into rows, there are\ntwo options:\n\n1. Use `<vaadin-form-row>` to explicitly group fields into rows.\n\n2. Enable the `autoRows` property to automatically arrange fields in available columns,\n   wrapping to a new row when necessary. `<br>` elements can be used to force a new row.\n\nThe auto-responsive mode is disabled by default. To enable it for an individual instance,\nuse this property. Alternatively, if you want it to be enabled for all instances by default,\nenable the `defaultAutoResponsiveFormLayout` feature flag before `<vaadin-form-layout>`\nelements are added to the DOM:\n\n```js\nwindow.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;\n```",
               "value": {
                 "type": [
                   "boolean",
@@ -44,7 +44,7 @@
             },
             {
               "name": "column-width",
-              "description": "When `autoResponsive` is enabled, defines the width of each column.\nThe value must be defined in CSS length units, e.g., `100px` or `13em`.\nThe default value is `13em`.",
+              "description": "When `autoResponsive` is enabled, defines the width of each column.\nThe value must be defined in CSS length units, e.g. `100px`.\n\nIf the column width isn't explicitly set, it defaults to `12em`\nor `--vaadin-field-default-width` if that CSS property is defined.",
               "value": {
                 "type": [
                   "string",
@@ -55,7 +55,18 @@
             },
             {
               "name": "max-columns",
-              "description": "When `autoResponsive` is enabled, defines the maximum number of columns\nthat the layout can create. The layout will create columns up to this\nlimit based on the available container width. The default value is `10`.",
+              "description": "When `autoResponsive` is enabled, defines the maximum number of columns\nthat the layout can create. The layout will create columns up to this\nlimit based on the available container width.\n\nThe default value is `10`.",
+              "value": {
+                "type": [
+                  "number",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "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",
@@ -66,7 +77,7 @@
             },
             {
               "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.",
+              "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`.",
               "value": {
                 "type": [
                   "boolean",
@@ -77,7 +88,7 @@
             },
             {
               "name": "labels-aside",
-              "description": "When enabled with `autoResponsive`, `<vaadin-form-item>` prefers positioning\nlabels beside the fields. If the layout is too narrow to fit a single column\nwith side labels, they revert to their default position above the fields.\n\nTo customize the label width and the gap between the label and the field,\nuse the following CSS properties:\n\n- `--vaadin-form-layout-label-width`\n- `--vaadin-form-layout-label-spacing`",
+              "description": "When enabled with `autoResponsive`, `<vaadin-form-item>` prefers positioning\nlabels beside the fields. If the layout is too narrow to fit a single column\nwith a side label, the component will automatically switch labels to their\ndefault position above the fields.\n\nThe default value is `false`.\n\nTo customize the label width and the gap between the label and the field,\nuse the following CSS properties:\n\n- `--vaadin-form-layout-label-width`\n- `--vaadin-form-layout-label-spacing`",
               "value": {
                 "type": [
                   "boolean",
@@ -88,7 +99,7 @@
             },
             {
               "name": "expand-columns",
-              "description": "When `autoResponsive` is enabled, specifies whether the columns should expand\nin width to evenly fill any remaining space after the layout has created as\nmany fixed-width (`columnWidth`) columns as possible within the `maxColumns`\nlimit. The default value is `false`.",
+              "description": "When `autoResponsive` is enabled, specifies whether the columns should expand\nin width to evenly fill any remaining space after all columns have been created.\n\nThe default value is `false`.",
               "value": {
                 "type": [
                   "boolean",
@@ -99,7 +110,7 @@
             },
             {
               "name": "expand-fields",
-              "description": "When `autoResponsive` is enabled, specifies whether fields should stretch\nto take up all available space within columns. This setting also applies\nto fields inside `<vaadin-form-item>` elements. The default value is `false`.",
+              "description": "When `autoResponsive` is enabled, specifies whether fields should stretch\nto take up all available space within columns. This setting also applies\nto fields inside `<vaadin-form-item>` elements.\n\nThe default value is `false`.",
               "value": {
                 "type": [
                   "boolean",
@@ -124,7 +135,7 @@
             "properties": [
               {
                 "name": "responsiveSteps",
-                "description": "Allows specifying a responsive behavior with the number of columns\nand the label position depending on the layout width.\n\nFormat: array of objects, each object defines one responsive step\nwith `minWidth` CSS length, `columns` number, and optional\n`labelsPosition` string of `\"aside\"` or `\"top\"`. At least one item is required.\n\n#### Examples\n\n```javascript\nformLayout.responsiveSteps = [{columns: 1}];\n// The layout is always a single column, labels aside.\n```\n```javascript\nformLayout.responsiveSteps = [\n  {minWidth: 0, columns: 1},\n  {minWidth: '40em', columns: 2}\n];\n// Sets two responsive steps:\n// 1. When the layout width is < 40em, one column, labels aside.\n// 2. Width >= 40em, two columns, labels aside.\n```\n```javascript\nformLayout.responsiveSteps = [\n  {minWidth: 0, columns: 1, labelsPosition: 'top'},\n  {minWidth: '20em', columns: 1},\n  {minWidth: '40em', columns: 2}\n];\n// Default value. Three responsive steps:\n// 1. Width < 20em, one column, labels on top.\n// 2. 20em <= width < 40em, one column, labels aside.\n// 3. Width >= 40em, two columns, labels aside.\n```",
+                "description": "Allows specifying a responsive behavior with the number of columns\nand the label position depending on the layout width.\n\nFormat: array of objects, each object defines one responsive step\nwith `minWidth` CSS length, `columns` number, and optional\n`labelsPosition` string of `\"aside\"` or `\"top\"`. At least one item is required.\n\nNOTE: Responsive steps are ignored in auto-responsive mode, which may be\nenabled explicitly via the `autoResponsive` property or implicitly\nif the following feature flag is set:\n\n```\nwindow.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true\n```\n\n#### Examples\n\n```javascript\nformLayout.responsiveSteps = [{columns: 1}];\n// The layout is always a single column, labels aside.\n```\n```javascript\nformLayout.responsiveSteps = [\n  {minWidth: 0, columns: 1},\n  {minWidth: '40em', columns: 2}\n];\n// Sets two responsive steps:\n// 1. When the layout width is < 40em, one column, labels aside.\n// 2. Width >= 40em, two columns, labels aside.\n```\n```javascript\nformLayout.responsiveSteps = [\n  {minWidth: 0, columns: 1, labelsPosition: 'top'},\n  {minWidth: '20em', columns: 1},\n  {minWidth: '40em', columns: 2}\n];\n// Default value. Three responsive steps:\n// 1. Width < 20em, one column, labels on top.\n// 2. 20em <= width < 40em, one column, labels aside.\n// 3. Width >= 40em, two columns, labels aside.\n```",
                 "value": {
                   "type": [
                     "Array.<FormLayoutResponsiveStep>"
@@ -133,7 +144,7 @@
               },
               {
                 "name": "autoResponsive",
-                "description": "Enables the auto responsive mode in which the component automatically creates and adjusts\ncolumns based on the container's width. Columns have a fixed width defined by `columnWidth`\nand their number increases up to the limit set by `maxColumns`. The component dynamically\nadjusts the number of columns as the container size changes. When this mode is enabled,\nthe `responsiveSteps` are ignored.\n\nBy default, each field is placed on a new row. To organize fields into rows, there are\ntwo options:\n\n1. Use `<vaadin-form-row>` to explicitly group fields into rows.\n\n2. Enable the `autoRows` property to automatically arrange fields in available columns,\n   wrapping to a new row when necessary. `<br>` elements can be used to force a new row.",
+                "description": "When set to `true`, the component automatically creates and adjusts columns based on\nthe container's width. Columns have a fixed width defined by `columnWidth` and their\nnumber increases up to the limit set by `maxColumns`. The component dynamically adjusts\nthe number of columns as the container size changes. When this mode is enabled,\n`responsiveSteps` are ignored.\n\nBy default, each field is placed on a new row. To organize fields into rows, there are\ntwo options:\n\n1. Use `<vaadin-form-row>` to explicitly group fields into rows.\n\n2. Enable the `autoRows` property to automatically arrange fields in available columns,\n   wrapping to a new row when necessary. `<br>` elements can be used to force a new row.\n\nThe auto-responsive mode is disabled by default. To enable it for an individual instance,\nuse this property. Alternatively, if you want it to be enabled for all instances by default,\nenable the `defaultAutoResponsiveFormLayout` feature flag before `<vaadin-form-layout>`\nelements are added to the DOM:\n\n```js\nwindow.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;\n```",
                 "value": {
                   "type": [
                     "boolean",
@@ -144,7 +155,7 @@
               },
               {
                 "name": "columnWidth",
-                "description": "When `autoResponsive` is enabled, defines the width of each column.\nThe value must be defined in CSS length units, e.g., `100px` or `13em`.\nThe default value is `13em`.",
+                "description": "When `autoResponsive` is enabled, defines the width of each column.\nThe value must be defined in CSS length units, e.g. `100px`.\n\nIf the column width isn't explicitly set, it defaults to `12em`\nor `--vaadin-field-default-width` if that CSS property is defined.",
                 "value": {
                   "type": [
                     "string",
@@ -155,7 +166,18 @@
               },
               {
                 "name": "maxColumns",
-                "description": "When `autoResponsive` is enabled, defines the maximum number of columns\nthat the layout can create. The layout will create columns up to this\nlimit based on the available container width. The default value is `10`.",
+                "description": "When `autoResponsive` is enabled, defines the maximum number of columns\nthat the layout can create. The layout will create columns up to this\nlimit based on the available container width.\n\nThe default value is `10`.",
+                "value": {
+                  "type": [
+                    "number",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "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",
@@ -166,7 +188,7 @@
               },
               {
                 "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.",
+                "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`.",
                 "value": {
                   "type": [
                     "boolean",
@@ -177,7 +199,7 @@
               },
               {
                 "name": "labelsAside",
-                "description": "When enabled with `autoResponsive`, `<vaadin-form-item>` prefers positioning\nlabels beside the fields. If the layout is too narrow to fit a single column\nwith side labels, they revert to their default position above the fields.\n\nTo customize the label width and the gap between the label and the field,\nuse the following CSS properties:\n\n- `--vaadin-form-layout-label-width`\n- `--vaadin-form-layout-label-spacing`",
+                "description": "When enabled with `autoResponsive`, `<vaadin-form-item>` prefers positioning\nlabels beside the fields. If the layout is too narrow to fit a single column\nwith a side label, the component will automatically switch labels to their\ndefault position above the fields.\n\nThe default value is `false`.\n\nTo customize the label width and the gap between the label and the field,\nuse the following CSS properties:\n\n- `--vaadin-form-layout-label-width`\n- `--vaadin-form-layout-label-spacing`",
                 "value": {
                   "type": [
                     "boolean",
@@ -188,7 +210,7 @@
               },
               {
                 "name": "expandColumns",
-                "description": "When `autoResponsive` is enabled, specifies whether the columns should expand\nin width to evenly fill any remaining space after the layout has created as\nmany fixed-width (`columnWidth`) columns as possible within the `maxColumns`\nlimit. The default value is `false`.",
+                "description": "When `autoResponsive` is enabled, specifies whether the columns should expand\nin width to evenly fill any remaining space after all columns have been created.\n\nThe default value is `false`.",
                 "value": {
                   "type": [
                     "boolean",
@@ -199,7 +221,7 @@
               },
               {
                 "name": "expandFields",
-                "description": "When `autoResponsive` is enabled, specifies whether fields should stretch\nto take up all available space within columns. This setting also applies\nto fields inside `<vaadin-form-item>` elements. The default value is `false`.",
+                "description": "When `autoResponsive` is enabled, specifies whether fields should stretch\nto take up all available space within columns. This setting also applies\nto fields inside `<vaadin-form-item>` elements.\n\nThe default value is `false`.",
                 "value": {
                   "type": [
                     "boolean",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/form-layout",
-  "version": "24.8.0-alpha2",
+  "version": "24.8.0-alpha20",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -22,61 +22,68 @@
         },
         {
           "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.\nThe [`columnWidth`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha2/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha2/#/elements/vaadin-form-layout#property-maxColumns) properties control the column width\n(13em by default) and the maximum number of columns (10 by default) that the Form Layout can create.\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\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-alpha2/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha2/#/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-alpha2/#/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-alpha2/#/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-alpha2/#/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/24.8.0-alpha20/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha20/#/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-alpha20/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha20/#/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-alpha20/#/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-alpha20/#/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-alpha20/#/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": [
             {
               "name": "?autoResponsive",
-              "description": "Enables the auto responsive mode in which the component automatically creates and adjusts\ncolumns based on the container's width. Columns have a fixed width defined by `columnWidth`\nand their number increases up to the limit set by `maxColumns`. The component dynamically\nadjusts the number of columns as the container size changes. When this mode is enabled,\nthe `responsiveSteps` are ignored.\n\nBy default, each field is placed on a new row. To organize fields into rows, there are\ntwo options:\n\n1. Use `<vaadin-form-row>` to explicitly group fields into rows.\n\n2. Enable the `autoRows` property to automatically arrange fields in available columns,\n   wrapping to a new row when necessary. `<br>` elements can be used to force a new row.",
+              "description": "When set to `true`, the component automatically creates and adjusts columns based on\nthe container's width. Columns have a fixed width defined by `columnWidth` and their\nnumber increases up to the limit set by `maxColumns`. The component dynamically adjusts\nthe number of columns as the container size changes. When this mode is enabled,\n`responsiveSteps` are ignored.\n\nBy default, each field is placed on a new row. To organize fields into rows, there are\ntwo options:\n\n1. Use `<vaadin-form-row>` to explicitly group fields into rows.\n\n2. Enable the `autoRows` property to automatically arrange fields in available columns,\n   wrapping to a new row when necessary. `<br>` elements can be used to force a new row.\n\nThe auto-responsive mode is disabled by default. To enable it for an individual instance,\nuse this property. Alternatively, if you want it to be enabled for all instances by default,\nenable the `defaultAutoResponsiveFormLayout` feature flag before `<vaadin-form-layout>`\nelements are added to the DOM:\n\n```js\nwindow.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;\n```",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "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.",
+              "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`.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": "?labelsAside",
-              "description": "When enabled with `autoResponsive`, `<vaadin-form-item>` prefers positioning\nlabels beside the fields. If the layout is too narrow to fit a single column\nwith side labels, they revert to their default position above the fields.\n\nTo customize the label width and the gap between the label and the field,\nuse the following CSS properties:\n\n- `--vaadin-form-layout-label-width`\n- `--vaadin-form-layout-label-spacing`",
+              "description": "When enabled with `autoResponsive`, `<vaadin-form-item>` prefers positioning\nlabels beside the fields. If the layout is too narrow to fit a single column\nwith a side label, the component will automatically switch labels to their\ndefault position above the fields.\n\nThe default value is `false`.\n\nTo customize the label width and the gap between the label and the field,\nuse the following CSS properties:\n\n- `--vaadin-form-layout-label-width`\n- `--vaadin-form-layout-label-spacing`",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": "?expandColumns",
-              "description": "When `autoResponsive` is enabled, specifies whether the columns should expand\nin width to evenly fill any remaining space after the layout has created as\nmany fixed-width (`columnWidth`) columns as possible within the `maxColumns`\nlimit. The default value is `false`.",
+              "description": "When `autoResponsive` is enabled, specifies whether the columns should expand\nin width to evenly fill any remaining space after all columns have been created.\n\nThe default value is `false`.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": "?expandFields",
-              "description": "When `autoResponsive` is enabled, specifies whether fields should stretch\nto take up all available space within columns. This setting also applies\nto fields inside `<vaadin-form-item>` elements. The default value is `false`.",
+              "description": "When `autoResponsive` is enabled, specifies whether fields should stretch\nto take up all available space within columns. This setting also applies\nto fields inside `<vaadin-form-item>` elements.\n\nThe default value is `false`.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": ".responsiveSteps",
-              "description": "Allows specifying a responsive behavior with the number of columns\nand the label position depending on the layout width.\n\nFormat: array of objects, each object defines one responsive step\nwith `minWidth` CSS length, `columns` number, and optional\n`labelsPosition` string of `\"aside\"` or `\"top\"`. At least one item is required.\n\n#### Examples\n\n```javascript\nformLayout.responsiveSteps = [{columns: 1}];\n// The layout is always a single column, labels aside.\n```\n```javascript\nformLayout.responsiveSteps = [\n  {minWidth: 0, columns: 1},\n  {minWidth: '40em', columns: 2}\n];\n// Sets two responsive steps:\n// 1. When the layout width is < 40em, one column, labels aside.\n// 2. Width >= 40em, two columns, labels aside.\n```\n```javascript\nformLayout.responsiveSteps = [\n  {minWidth: 0, columns: 1, labelsPosition: 'top'},\n  {minWidth: '20em', columns: 1},\n  {minWidth: '40em', columns: 2}\n];\n// Default value. Three responsive steps:\n// 1. Width < 20em, one column, labels on top.\n// 2. 20em <= width < 40em, one column, labels aside.\n// 3. Width >= 40em, two columns, labels aside.\n```",
+              "description": "Allows specifying a responsive behavior with the number of columns\nand the label position depending on the layout width.\n\nFormat: array of objects, each object defines one responsive step\nwith `minWidth` CSS length, `columns` number, and optional\n`labelsPosition` string of `\"aside\"` or `\"top\"`. At least one item is required.\n\nNOTE: Responsive steps are ignored in auto-responsive mode, which may be\nenabled explicitly via the `autoResponsive` property or implicitly\nif the following feature flag is set:\n\n```\nwindow.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true\n```\n\n#### Examples\n\n```javascript\nformLayout.responsiveSteps = [{columns: 1}];\n// The layout is always a single column, labels aside.\n```\n```javascript\nformLayout.responsiveSteps = [\n  {minWidth: 0, columns: 1},\n  {minWidth: '40em', columns: 2}\n];\n// Sets two responsive steps:\n// 1. When the layout width is < 40em, one column, labels aside.\n// 2. Width >= 40em, two columns, labels aside.\n```\n```javascript\nformLayout.responsiveSteps = [\n  {minWidth: 0, columns: 1, labelsPosition: 'top'},\n  {minWidth: '20em', columns: 1},\n  {minWidth: '40em', columns: 2}\n];\n// Default value. Three responsive steps:\n// 1. Width < 20em, one column, labels on top.\n// 2. 20em <= width < 40em, one column, labels aside.\n// 3. Width >= 40em, two columns, labels aside.\n```",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": ".columnWidth",
-              "description": "When `autoResponsive` is enabled, defines the width of each column.\nThe value must be defined in CSS length units, e.g., `100px` or `13em`.\nThe default value is `13em`.",
+              "description": "When `autoResponsive` is enabled, defines the width of each column.\nThe value must be defined in CSS length units, e.g. `100px`.\n\nIf the column width isn't explicitly set, it defaults to `12em`\nor `--vaadin-field-default-width` if that CSS property is defined.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": ".maxColumns",
-              "description": "When `autoResponsive` is enabled, defines the maximum number of columns\nthat the layout can create. The layout will create columns up to this\nlimit based on the available container width. The default value is `10`.",
+              "description": "When `autoResponsive` is enabled, defines the maximum number of columns\nthat the layout can create. The layout will create columns up to this\nlimit based on the available container width.\n\nThe default value is `10`.",
+              "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-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-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';