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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/form-layout",
-  "version": "24.7.0-alpha7",
+  "version": "24.7.0-alpha8",
   "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-alpha8",
+    "@vaadin/component-base": "24.7.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha8",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha8",
+    "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-alpha8",
+    "@vaadin/custom-field": "24.7.0-alpha8",
+    "@vaadin/test-runner-commands": "24.7.0-alpha8",
     "@vaadin/testing-helpers": "^1.1.0",
-    "@vaadin/text-field": "24.7.0-alpha7",
+    "@vaadin/text-field": "24.7.0-alpha8",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "5f48d7024caa02773aff3aa53091326a42d1eeb1"
+  "gitHead": "d015035192480fcc8cc9df5d00a950f177b83c32"
 }

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

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

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

@@ -124,7 +124,12 @@ export const FormLayoutMixin = (superClass) =>
       // Ensure there is a child text node in the style element
       this._styleElement.textContent = ' ';
 
-      this.__intersectionObserver = new IntersectionObserver(([entry]) => {
+      this.__intersectionObserver = new IntersectionObserver((entries) => {
+        // If the browser is busy (e.g. due to slow rendering), multiple entries can
+        // be queued and then passed to the callback invocation at once. Make sure we
+        // use the most recent entry to detect whether the layout is visible or not.
+        // See https://github.com/vaadin/web-components/issues/8564
+        const entry = [...entries].pop();
         if (!entry.isIntersecting) {
           // Prevent possible jump when layout becomes visible
           this.$.layout.style.opacity = 0;

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-alpha8",
   "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` | 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",

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-alpha8",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "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` | 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": []
         },