@vaadin/form-layout 24.7.0-alpha1 → 24.7.0-alpha10

package/vaadin-lit-form-layout.js

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

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/form-layout",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha10",
   "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` | (DEPRECATED: Use `--vaadin-form-layout-label-width` on `<vaadin-form-layout>` instead) Width of the label column when the labels are aside | `8em`\n`--vaadin-form-item-label-spacing` | (DEPRECATED: Use `--vaadin-form-layout-label-spacing` on `<vaadin-form-layout>` instead) 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`\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": "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-alpha1",
+  "version": "24.7.0-alpha10",
   "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` | (DEPRECATED: Use `--vaadin-form-layout-label-width` on `<vaadin-form-layout>` instead) Width of the label column when the labels are aside | `8em`\n`--vaadin-form-item-label-spacing` | (DEPRECATED: Use `--vaadin-form-layout-label-spacing` on `<vaadin-form-layout>` instead) 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`\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": [
             {