@vaadin/form-layout 24.7.0-alpha7 → 24.7.0-alpha9

package/package.json

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

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

@@ -6,6 +6,8 @@
 import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 
+let itemRowSpacingDeprecationNotified = false;
+
 /**
  * @polymerMixin
  */
@@ -42,6 +44,19 @@ export const FormItemMixin = (superClass) =>
       this.__fieldNode = null;
     }
 
+    connectedCallback() {
+      super.connectedCallback();
+      if (!itemRowSpacingDeprecationNotified) {
+        const spacing = getComputedStyle(this).getPropertyValue('--vaadin-form-item-row-spacing');
+        if (spacing !== '' && parseInt(spacing) !== 0) {
+          console.warn(
+            '`--vaadin-form-item-row-spacing` is deprecated since 24.7. Use `--vaadin-form-layout-row-spacing` on <vaadin-form-layout> instead.',
+          );
+          itemRowSpacingDeprecationNotified = true;
+        }
+      }
+    }
+
     /**
      * Returns a target element to add ARIA attributes to for a field.
      *

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

@@ -43,6 +43,10 @@ import { FormItemMixin } from './vaadin-form-item-mixin.js';
  * because the `label-position` attribute is triggered automatically by the parent
  * `<vaadin-form-layout>`, depending on its width and responsive behavior.
  *
+ * **Deprecation note:** The `label-position` attribute is deprecated since 24.7 and
+ * will be removed in Vaadin 25, when a new approach for setting the label position
+ * will be introduced.
+ *
  * ### Input Width
  *
  * By default, `<vaadin-form-item>` does not manipulate the width of the slotted
@@ -66,6 +70,10 @@ import { FormItemMixin } from './vaadin-form-item-mixin.js';
  * }
  * ```
  *
+ * **Deprecation note:** The `label-position` attribute is deprecated since 24.7 and
+ * will be removed in Vaadin 25, when a new approach to styling the form-item
+ * based on the label position will be introduced.
+ *
  * The following shadow DOM parts are available for styling:
  *
  * Part name | Description
@@ -81,7 +89,7 @@ import { FormItemMixin } from './vaadin-form-item-mixin.js';
  * ---|---|---
  * `--vaadin-form-item-label-width` | Width of the label column when the labels are aside | `8em`
  * `--vaadin-form-item-label-spacing` | Spacing between the label column and the input column when the labels are aside | `1em`
- * `--vaadin-form-item-row-spacing` | Height of the spacing between the form item elements | `1em`
+ * `--vaadin-form-item-row-spacing` | (DEPRECATED: Use `--vaadin-form-layout-row-spacing` on `<vaadin-form-layout>` instead) Height of the spacing between the form item elements | `1em`
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */

package/src/vaadin-form-item.js

@@ -48,6 +48,10 @@ registerStyles('vaadin-form-item', formItemStyles, { moduleId: 'vaadin-form-item
  * because the `label-position` attribute is triggered automatically by the parent
  * `<vaadin-form-layout>`, depending on its width and responsive behavior.
  *
+ * **Deprecation note:** The `label-position` attribute is deprecated since 24.7 and
+ * will be removed in Vaadin 25, when a new approach for setting the label position
+ * will be introduced.
+ *
  * ### Input Width
  *
  * By default, `<vaadin-form-item>` does not manipulate the width of the slotted
@@ -71,6 +75,10 @@ registerStyles('vaadin-form-item', formItemStyles, { moduleId: 'vaadin-form-item
  * }
  * ```
  *
+ * **Deprecation note:** The `label-position` attribute is deprecated since 24.7 and
+ * will be removed in Vaadin 25, when a new approach to styling the form-item
+ * based on the label position will be introduced.
+ *
  * The following shadow DOM parts are available for styling:
  *
  * Part name | Description
@@ -86,7 +94,7 @@ registerStyles('vaadin-form-item', formItemStyles, { moduleId: 'vaadin-form-item
  * ---|---|---
  * `--vaadin-form-item-label-width` | Width of the label column when the labels are aside | `8em`
  * `--vaadin-form-item-label-spacing` | Spacing between the label column and the input column when the labels are aside | `1em`
- * `--vaadin-form-item-row-spacing` | Height of the spacing between the form item elements | `1em`
+ * `--vaadin-form-item-row-spacing` | (DEPRECATED: Use `--vaadin-form-layout-row-spacing` on `<vaadin-form-layout>` instead) Height of the spacing between the form item elements | `1em`
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

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

@@ -6,6 +6,13 @@
 import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 
+function isValidCSSLength(value) {
+  // Check if the value is a valid CSS length and not `inherit` or `normal`,
+  // which are also valid values for `word-spacing`, see:
+  // https://drafts.csswg.org/css-text-3/#word-spacing-property
+  return CSS.supports('word-spacing', value) && !['inherit', 'normal'].includes(value);
+}
+
 /**
  * @polymerMixin
  * @mixes ResizeMixin
@@ -91,11 +98,6 @@ export const FormLayoutMixin = (superClass) =>
           type: Boolean,
           sync: true,
         },
-
-        /** @private */
-        __isVisible: {
-          type: Boolean,
-        },
       };
     }
 
@@ -104,110 +106,35 @@ export const FormLayoutMixin = (superClass) =>
     }
 
     /** @protected */
-    ready() {
-      // Here we attach a style element that we use for validating
-      // CSS values in `responsiveSteps`. We can't add this to the `<template>`,
-      // because Polymer will throw it away. We need to create this before
-      // `super.ready()`, because `super.ready()` invokes property observers,
-      // and the observer for `responsiveSteps` does CSS value validation.
-      this.appendChild(this._styleElement);
-
-      super.ready();
-
-      this.addEventListener('animationend', this.__onAnimationEnd);
-    }
-
-    constructor() {
-      super();
+    connectedCallback() {
+      super.connectedCallback();
 
-      this._styleElement = document.createElement('style');
-      // Ensure there is a child text node in the style element
-      this._styleElement.textContent = ' ';
+      // Set up an observer to update layout when new children are added or removed.
+      this.__childrenObserver = new MutationObserver(() => this._updateLayout());
+      this.__childrenObserver.observe(this, { childList: true });
 
-      this.__intersectionObserver = new IntersectionObserver(([entry]) => {
-        if (!entry.isIntersecting) {
-          // Prevent possible jump when layout becomes visible
-          this.$.layout.style.opacity = 0;
-        }
-        if (!this.__isVisible && entry.isIntersecting) {
+      // Set up an observer to update layout when children's attributes change.
+      this.__childrenAttributesObserver = new MutationObserver((mutations) => {
+        if (mutations.some((mutation) => mutation.target.parentElement === this)) {
           this._updateLayout();
-          this.$.layout.style.opacity = '';
         }
-        this.__isVisible = entry.isIntersecting;
       });
-    }
-
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
+      this.__childrenAttributesObserver.observe(this, {
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['colspan', 'data-colspan', 'hidden'],
+      });
 
       requestAnimationFrame(() => this._selectResponsiveStep());
       requestAnimationFrame(() => this._updateLayout());
-
-      this._observeChildrenColspanChange();
-      this.__intersectionObserver.observe(this.$.layout);
     }
 
     /** @protected */
     disconnectedCallback() {
       super.disconnectedCallback();
 
-      this.__mutationObserver.disconnect();
-      this.__childObserver.disconnect();
-      this.__intersectionObserver.disconnect();
-    }
-
-    /** @private */
-    _observeChildrenColspanChange() {
-      // Observe changes in form items' `colspan` attribute and update styles
-      const mutationObserverConfig = { attributes: true };
-
-      this.__mutationObserver = new MutationObserver((mutationRecord) => {
-        mutationRecord.forEach((mutation) => {
-          if (
-            mutation.type === 'attributes' &&
-            (mutation.attributeName === 'colspan' ||
-              mutation.attributeName === 'data-colspan' ||
-              mutation.attributeName === 'hidden')
-          ) {
-            this._updateLayout();
-          }
-        });
-      });
-
-      // Observe changes to initial children
-      [...this.children].forEach((child) => {
-        this.__mutationObserver.observe(child, mutationObserverConfig);
-      });
-
-      // Observe changes to lazily added nodes
-      this.__childObserver = new MutationObserver((mutations) => {
-        const addedNodes = [];
-        const removedNodes = [];
-
-        mutations.forEach((mutation) => {
-          addedNodes.push(...this._getObservableNodes(mutation.addedNodes));
-          removedNodes.push(...this._getObservableNodes(mutation.removedNodes));
-        });
-
-        addedNodes.forEach((child) => {
-          this.__mutationObserver.observe(child, mutationObserverConfig);
-        });
-
-        if (addedNodes.length > 0 || removedNodes.length > 0) {
-          this._updateLayout();
-        }
-      });
-
-      this.__childObserver.observe(this, { childList: true });
-    }
-
-    /** @private */
-    _getObservableNodes(nodeList) {
-      const ignore = ['template', 'style', 'dom-repeat', 'dom-if'];
-      return Array.from(nodeList).filter(
-        (node) => node.nodeType === Node.ELEMENT_NODE && ignore.indexOf(node.localName.toLowerCase()) === -1,
-      );
+      this.__childrenObserver.disconnect();
+      this.__childrenAttributesObserver.disconnect();
     }
 
     /** @private */
@@ -218,34 +145,6 @@ export const FormLayoutMixin = (superClass) =>
       return 1;
     }
 
-    /** @private */
-    _isValidCSSLength(value) {
-      // Let us choose a CSS property for validating CSS <length> values:
-      // - `border-spacing` accepts `<length> | inherit`, it's the best! But
-      //   it does not disallow invalid values at all in MSIE :-(
-      // - `letter-spacing` and `word-spacing` accept
-      //   `<length> | normal | inherit`, and disallows everything else, like
-      //   `<percentage>`, `auto` and such, good enough.
-      // - `word-spacing` is used since its shorter.
-
-      // Disallow known keywords allowed as the `word-spacing` value
-      if (value === 'inherit' || value === 'normal') {
-        return false;
-      }
-
-      // Use the value in a stylesheet and check the parsed value. Invalid
-      // input value results in empty parsed value.
-      this._styleElement.firstChild.nodeValue = `#styleElement { word-spacing: ${value}; }`;
-
-      if (!this._styleElement.sheet) {
-        // Stylesheet is not ready, probably not attached to the document yet.
-        return true;
-      }
-
-      // Safari 9 sets invalid CSS rules' value to `null`
-      return ['', null].indexOf(this._styleElement.sheet.cssRules[0].style.getPropertyValue('word-spacing')) < 0;
-    }
-
     /** @private */
     _responsiveStepsChanged(responsiveSteps, oldResponsiveSteps) {
       try {
@@ -262,7 +161,7 @@ export const FormLayoutMixin = (superClass) =>
             throw new Error(`Invalid 'columns' value of ${step.columns}, a natural number is required.`);
           }
 
-          if (step.minWidth !== undefined && !this._isValidCSSLength(step.minWidth)) {
+          if (step.minWidth !== undefined && !isValidCSSLength(step.minWidth)) {
             throw new Error(`Invalid 'minWidth' value of ${step.minWidth}, a valid CSS length required.`);
           }
 
@@ -289,13 +188,6 @@ export const FormLayoutMixin = (superClass) =>
       this._selectResponsiveStep();
     }
 
-    /** @private */
-    __onAnimationEnd(e) {
-      if (e.animationName.indexOf('vaadin-form-layout-appear') === 0) {
-        this._selectResponsiveStep();
-      }
-    }
-
     /** @private */
     _selectResponsiveStep() {
       // Iterate through responsiveSteps and choose the step
@@ -373,10 +265,7 @@ export const FormLayoutMixin = (superClass) =>
           colspan = Math.min(colspan, this._columnCount);
 
           const childRatio = colspan / this._columnCount;
-
-          // Note: using 99.9% for 100% fixes rounding errors in MS Edge
-          // (< v16), otherwise the items might wrap, resizing is wobbly.
-          child.style.width = `calc(${childRatio * 99.9}% - ${1 - childRatio} * ${columnSpacing})`;
+          child.style.width = `calc(${childRatio * 100}% - ${1 - childRatio} * ${columnSpacing})`;
 
           if (col + colspan > this._columnCount) {
             // Too big to fit on this row, let's wrap it
@@ -427,7 +316,15 @@ export const FormLayoutMixin = (superClass) =>
      * @protected
      * @override
      */
-    _onResize() {
+    _onResize(contentRect) {
+      if (contentRect.width === 0 && contentRect.height === 0) {
+        this.$.layout.style.opacity = '0';
+        return;
+      }
+
       this._selectResponsiveStep();
+      this._updateLayout();
+
+      this.$.layout.style.opacity = '';
     }
   };

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

@@ -9,21 +9,14 @@ export const formLayoutStyles = css`
   :host {
     display: block;
     max-width: 100%;
-    animation: 1ms vaadin-form-layout-appear;
     /* CSS API for host */
     --vaadin-form-item-label-width: 8em;
     --vaadin-form-item-label-spacing: 1em;
-    --vaadin-form-item-row-spacing: 1em;
+    --vaadin-form-layout-row-spacing: 1em;
     --vaadin-form-layout-column-spacing: 2em; /* (default) */
     align-self: stretch;
   }
 
-  @keyframes vaadin-form-layout-appear {
-    to {
-      opacity: 1 !important; /* stylelint-disable-line keyframe-declaration-no-important */
-    }
-  }
-
   :host([hidden]) {
     display: none !important;
   }
@@ -56,7 +49,7 @@ export const formItemStyles = css`
     display: inline-flex;
     flex-direction: row;
     align-items: baseline;
-    margin: calc(0.5 * var(--vaadin-form-item-row-spacing, 1em)) 0;
+    margin: calc(0.5 * var(--vaadin-form-item-row-spacing, var(--vaadin-form-layout-row-spacing, 1em))) 0;
   }
 
   :host([label-position='top']) {

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

@@ -98,6 +98,7 @@ export * from './vaadin-form-layout-mixin.js';
  * Custom CSS property | Description | Default
  * ---|---|---
  * `--vaadin-form-layout-column-spacing` | Length of the spacing between columns | `2em`
+ * `--vaadin-form-layout-row-spacing` | Length of the spacing between rows | `1em`
  */
 declare class FormLayout extends FormLayoutMixin(ElementMixin(ThemableMixin(HTMLElement))) {}
 

package/src/vaadin-form-layout.js

@@ -101,6 +101,7 @@ registerStyles('vaadin-form-layout', formLayoutStyles, { moduleId: 'vaadin-form-
  * Custom CSS property | Description | Default
  * ---|---|---
  * `--vaadin-form-layout-column-spacing` | Length of the spacing between columns | `2em`
+ * `--vaadin-form-layout-row-spacing` | Length of the spacing between rows | 1em`
  *
  * @customElement
  * @extends HTMLElement

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

@@ -7,10 +7,6 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-form-item',
   css`
-    :host {
-      --vaadin-form-item-row-spacing: 0;
-    }
-
     /* font-weight, margin-bottom, transition and line-height same as for part label in text-field */
     [part='label'] {
       color: var(--lumo-secondary-text-color);

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

@@ -6,6 +6,7 @@ registerStyles(
   css`
     :host {
       --vaadin-form-layout-column-spacing: var(--lumo-space-l);
+      --vaadin-form-layout-row-spacing: 0;
     }
   `,
   { moduleId: 'lumo-form-layout' },

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/form-layout",
-  "version": "24.7.0-alpha7",
+  "version": "24.7.0-alpha9",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-form-item",
-          "description": "`<vaadin-form-item>` is a Web Component providing labelled form item wrapper\nfor using inside `<vaadin-form-layout>`.\n\n`<vaadin-form-item>` accepts a single child as the input content,\nand also has a separate named `label` slot:\n\n```html\n<vaadin-form-item>\n  <label slot=\"label\">Label aside</label>\n  <input>\n</vaadin-form-item>\n```\n\nThe label is optional and can be omitted:\n\n```html\n<vaadin-form-item>\n  <input type=\"checkbox\"> Subscribe to our Newsletter\n</vaadin-form-item>\n```\n\nBy default, the `label` slot content is displayed aside of the input content.\nWhen `label-position=\"top\"` is set, the `label` slot content is displayed on top:\n\n```html\n<vaadin-form-item label-position=\"top\">\n  <label slot=\"label\">Label on top</label>\n  <input>\n</vaadin-form-item>\n```\n\n**Note:** Normally, `<vaadin-form-item>` is used as a child of\na `<vaadin-form-layout>` element. Setting `label-position` is unnecessary,\nbecause the `label-position` attribute is triggered automatically by the parent\n`<vaadin-form-layout>`, depending on its width and responsive behavior.\n\n### Input Width\n\nBy default, `<vaadin-form-item>` does not manipulate the width of the slotted\ninput element. Optionally you can stretch the child input element to fill\nthe available width for the input content by adding the `full-width` class:\n\n```html\n<vaadin-form-item>\n  <label slot=\"label\">Label</label>\n  <input class=\"full-width\">\n</vaadin-form-item>\n```\n\n### Styling\n\nThe `label-position` host attribute can be used to target the label on top state:\n\n```\n:host([label-position=\"top\"]) {\n  padding-top: 0.5rem;\n}\n```\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---|---\nlabel | The label slot container\n\n### Custom CSS Properties Reference\n\nThe following custom CSS properties are available on the `<vaadin-form-item>`\nelement:\n\nCustom CSS property | Description | Default\n---|---|---\n`--vaadin-form-item-label-width` | Width of the label column when the labels are aside | `8em`\n`--vaadin-form-item-label-spacing` | Spacing between the label column and the input column when the labels are aside | `1em`\n`--vaadin-form-item-row-spacing` | Height of the spacing between the form item elements | `1em`\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-form-item>` is a Web Component providing labelled form item wrapper\nfor using inside `<vaadin-form-layout>`.\n\n`<vaadin-form-item>` accepts a single child as the input content,\nand also has a separate named `label` slot:\n\n```html\n<vaadin-form-item>\n  <label slot=\"label\">Label aside</label>\n  <input>\n</vaadin-form-item>\n```\n\nThe label is optional and can be omitted:\n\n```html\n<vaadin-form-item>\n  <input type=\"checkbox\"> Subscribe to our Newsletter\n</vaadin-form-item>\n```\n\nBy default, the `label` slot content is displayed aside of the input content.\nWhen `label-position=\"top\"` is set, the `label` slot content is displayed on top:\n\n```html\n<vaadin-form-item label-position=\"top\">\n  <label slot=\"label\">Label on top</label>\n  <input>\n</vaadin-form-item>\n```\n\n**Note:** Normally, `<vaadin-form-item>` is used as a child of\na `<vaadin-form-layout>` element. Setting `label-position` is unnecessary,\nbecause the `label-position` attribute is triggered automatically by the parent\n`<vaadin-form-layout>`, depending on its width and responsive behavior.\n\n**Deprecation note:** The `label-position` attribute is deprecated since 24.7 and\nwill be removed in Vaadin 25, when a new approach for setting the label position\nwill be introduced.\n\n### Input Width\n\nBy default, `<vaadin-form-item>` does not manipulate the width of the slotted\ninput element. Optionally you can stretch the child input element to fill\nthe available width for the input content by adding the `full-width` class:\n\n```html\n<vaadin-form-item>\n  <label slot=\"label\">Label</label>\n  <input class=\"full-width\">\n</vaadin-form-item>\n```\n\n### Styling\n\nThe `label-position` host attribute can be used to target the label on top state:\n\n```\n:host([label-position=\"top\"]) {\n  padding-top: 0.5rem;\n}\n```\n\n**Deprecation note:** The `label-position` attribute is deprecated since 24.7 and\nwill be removed in Vaadin 25, when a new approach to styling the form-item\nbased on the label position will be introduced.\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---|---\nlabel | The label slot container\n\n### Custom CSS Properties Reference\n\nThe following custom CSS properties are available on the `<vaadin-form-item>`\nelement:\n\nCustom CSS property | Description | Default\n---|---|---\n`--vaadin-form-item-label-width` | Width of the label column when the labels are aside | `8em`\n`--vaadin-form-item-label-spacing` | Spacing between the label column and the input column when the labels are aside | `1em`\n`--vaadin-form-item-row-spacing` | (DEPRECATED: Use `--vaadin-form-layout-row-spacing` on `<vaadin-form-layout>` instead) Height of the spacing between the form item elements | `1em`\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "theme",
@@ -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### 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`",
+          "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### 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`",
           "attributes": [
             {
               "name": "theme",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/form-layout",
-  "version": "24.7.0-alpha7",
+  "version": "24.7.0-alpha9",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,13 +16,13 @@
       "elements": [
         {
           "name": "vaadin-form-item",
-          "description": "`<vaadin-form-item>` is a Web Component providing labelled form item wrapper\nfor using inside `<vaadin-form-layout>`.\n\n`<vaadin-form-item>` accepts a single child as the input content,\nand also has a separate named `label` slot:\n\n```html\n<vaadin-form-item>\n  <label slot=\"label\">Label aside</label>\n  <input>\n</vaadin-form-item>\n```\n\nThe label is optional and can be omitted:\n\n```html\n<vaadin-form-item>\n  <input type=\"checkbox\"> Subscribe to our Newsletter\n</vaadin-form-item>\n```\n\nBy default, the `label` slot content is displayed aside of the input content.\nWhen `label-position=\"top\"` is set, the `label` slot content is displayed on top:\n\n```html\n<vaadin-form-item label-position=\"top\">\n  <label slot=\"label\">Label on top</label>\n  <input>\n</vaadin-form-item>\n```\n\n**Note:** Normally, `<vaadin-form-item>` is used as a child of\na `<vaadin-form-layout>` element. Setting `label-position` is unnecessary,\nbecause the `label-position` attribute is triggered automatically by the parent\n`<vaadin-form-layout>`, depending on its width and responsive behavior.\n\n### Input Width\n\nBy default, `<vaadin-form-item>` does not manipulate the width of the slotted\ninput element. Optionally you can stretch the child input element to fill\nthe available width for the input content by adding the `full-width` class:\n\n```html\n<vaadin-form-item>\n  <label slot=\"label\">Label</label>\n  <input class=\"full-width\">\n</vaadin-form-item>\n```\n\n### Styling\n\nThe `label-position` host attribute can be used to target the label on top state:\n\n```\n:host([label-position=\"top\"]) {\n  padding-top: 0.5rem;\n}\n```\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---|---\nlabel | The label slot container\n\n### Custom CSS Properties Reference\n\nThe following custom CSS properties are available on the `<vaadin-form-item>`\nelement:\n\nCustom CSS property | Description | Default\n---|---|---\n`--vaadin-form-item-label-width` | Width of the label column when the labels are aside | `8em`\n`--vaadin-form-item-label-spacing` | Spacing between the label column and the input column when the labels are aside | `1em`\n`--vaadin-form-item-row-spacing` | Height of the spacing between the form item elements | `1em`\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-form-item>` is a Web Component providing labelled form item wrapper\nfor using inside `<vaadin-form-layout>`.\n\n`<vaadin-form-item>` accepts a single child as the input content,\nand also has a separate named `label` slot:\n\n```html\n<vaadin-form-item>\n  <label slot=\"label\">Label aside</label>\n  <input>\n</vaadin-form-item>\n```\n\nThe label is optional and can be omitted:\n\n```html\n<vaadin-form-item>\n  <input type=\"checkbox\"> Subscribe to our Newsletter\n</vaadin-form-item>\n```\n\nBy default, the `label` slot content is displayed aside of the input content.\nWhen `label-position=\"top\"` is set, the `label` slot content is displayed on top:\n\n```html\n<vaadin-form-item label-position=\"top\">\n  <label slot=\"label\">Label on top</label>\n  <input>\n</vaadin-form-item>\n```\n\n**Note:** Normally, `<vaadin-form-item>` is used as a child of\na `<vaadin-form-layout>` element. Setting `label-position` is unnecessary,\nbecause the `label-position` attribute is triggered automatically by the parent\n`<vaadin-form-layout>`, depending on its width and responsive behavior.\n\n**Deprecation note:** The `label-position` attribute is deprecated since 24.7 and\nwill be removed in Vaadin 25, when a new approach for setting the label position\nwill be introduced.\n\n### Input Width\n\nBy default, `<vaadin-form-item>` does not manipulate the width of the slotted\ninput element. Optionally you can stretch the child input element to fill\nthe available width for the input content by adding the `full-width` class:\n\n```html\n<vaadin-form-item>\n  <label slot=\"label\">Label</label>\n  <input class=\"full-width\">\n</vaadin-form-item>\n```\n\n### Styling\n\nThe `label-position` host attribute can be used to target the label on top state:\n\n```\n:host([label-position=\"top\"]) {\n  padding-top: 0.5rem;\n}\n```\n\n**Deprecation note:** The `label-position` attribute is deprecated since 24.7 and\nwill be removed in Vaadin 25, when a new approach to styling the form-item\nbased on the label position will be introduced.\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---|---\nlabel | The label slot container\n\n### Custom CSS Properties Reference\n\nThe following custom CSS properties are available on the `<vaadin-form-item>`\nelement:\n\nCustom CSS property | Description | Default\n---|---|---\n`--vaadin-form-item-label-width` | Width of the label column when the labels are aside | `8em`\n`--vaadin-form-item-label-spacing` | Spacing between the label column and the input column when the labels are aside | `1em`\n`--vaadin-form-item-row-spacing` | (DEPRECATED: Use `--vaadin-form-layout-row-spacing` on `<vaadin-form-layout>` instead) Height of the spacing between the form item elements | `1em`\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": []
         },
         {
           "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### 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`",
+          "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### 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`",
           "extension": true,
           "attributes": [
             {