@vaadin/vaadin-form-layout 22.0.0-alpha6 → 22.0.0-beta1

package/package.json

@@ -1,10 +1,29 @@
 {
   "name": "@vaadin/vaadin-form-layout",
-  "version": "22.0.0-alpha6",
+  "version": "22.0.0-beta1",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "Web component providing configurable responsive layout for form elements",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/vaadin-form-layout"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/vaadin-form-layout/issues"
+  },
   "main": "vaadin-form-layout.js",
   "module": "vaadin-form-layout.js",
-  "repository": "vaadin/vaadin-form-layout",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js"
+  ],
   "keywords": [
     "Vaadin",
     "form-layout",
@@ -12,34 +31,8 @@
     "web-component",
     "polymer"
   ],
-  "author": "Vaadin Ltd",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/vaadin/vaadin-form-layout/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "vaadin-*.d.ts",
-    "vaadin-*.js",
-    "src",
-    "theme"
-  ],
   "dependencies": {
-    "@polymer/iron-resizable-behavior": "^3.0.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6"
-  },
-  "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.0",
-    "@vaadin/vaadin-text-field": "^22.0.0-alpha6",
-    "sinon": "^9.2.1"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@vaadin/form-layout": "22.0.0-beta1"
   },
-  "gitHead": "4b136b1c7da8942960e7255f40c27859125b3a45"
+  "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
 }

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

@@ -1,103 +1,18 @@
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { FormItem } from '@vaadin/form-layout/src/vaadin-form-item.js';
 
 /**
- * `<vaadin-form-item>` is a Web Component providing labelled form item wrapper
- * for using inside `<vaadin-form-layout>`.
- *
- * `<vaadin-form-item>` accepts any number of children as the input content,
- * and also has a separate named `label` slot:
- *
- * ```html
- * <vaadin-form-item>
- *   <label slot="label">Label aside</label>
- *   <input>
- * </vaadin-form-item>
- * ```
- *
- * Any content can be used. For instance, you can have multiple input elements
- * with surrounding text. The label can be an element of any type:
- *
- * ```html
- * <vaadin-form-item>
- *   <span slot="label">Date of Birth</span>
- *   <input placeholder="YYYY" size="4"> -
- *   <input placeholder="MM" size="2"> -
- *   <input placeholder="DD" size="2"><br>
- *   <em>Example: 1900-01-01</em>
- * </vaadin-form-item>
- * ```
- *
- * The label is optional and can be omitted:
- *
- * ```html
- * <vaadin-form-item>
- *   <input type="checkbox"> Subscribe to our Newsletter
- * </vaadin-form-item>
- * ```
- *
- * By default, the `label` slot content is displayed aside of the input content.
- * When `label-position="top"` is set, the `label` slot content is displayed on top:
- *
- * ```html
- * <vaadin-form-item label-position="top">
- *   <label slot="label">Label on top</label>
- *   <input>
- * </vaadin-form-item>
- * ```
- *
- * **Note:** Normally, `<vaadin-form-item>` is used as a child of
- * a `<vaadin-form-layout>` element. Setting `label-position` is unnecessary,
- * because the `label-position` attribute is triggered automatically by the parent
- * `<vaadin-form-layout>`, depending on its width and responsive behavior.
- *
- * ### Input Width
- *
- * By default, `<vaadin-form-item>` does not manipulate the width of the slotted
- * input elements. Optionally you can stretch the child input element to fill
- * the available width for the input content by adding the `full-width` class:
- *
- * ```html
- * <vaadin-form-item>
- *   <label slot="label">Label</label>
- *   <input class="full-width">
- * </vaadin-form-item>
- * ```
- *
- * ### Styling
- *
- * The `label-position` host attribute can be used to target the label on top state:
- *
- * ```
- * :host([label-position="top"]) {
- *   padding-top: 0.5rem;
- * }
- * ```
- *
- * The following shadow DOM parts are available for styling:
- *
- * Part name | Description
- * ---|---
- * label | The label slot container
- *
- * ### Custom CSS Properties Reference
- *
- * The following custom CSS properties are available on the `<vaadin-form-item>`
- * element:
- *
- * Custom CSS property | Description | Default
- * ---|---|---
- * `--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`
- *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * @deprecated Import `FormItem` from `@vaadin/form-layout/vaadin-form-item` instead.
  */
-declare class FormItemElement extends ThemableMixin(HTMLElement) {}
+export type FormItemElement = FormItem;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-form-item': FormItemElement;
-  }
-}
+/**
+ * @deprecated Import `FormItem` from `@vaadin/form-layout/vaadin-form-item` instead.
+ */
+export const FormItemElement: typeof FormItem;
 
-export { FormItemElement };
+export * from '@vaadin/form-layout/src/vaadin-form-item.js';

package/src/vaadin-form-item.js

@@ -3,181 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { FormItem } from '@vaadin/form-layout/src/vaadin-form-item.js';
 
 /**
- * `<vaadin-form-item>` is a Web Component providing labelled form item wrapper
- * for using inside `<vaadin-form-layout>`.
- *
- * `<vaadin-form-item>` accepts any number of children as the input content,
- * and also has a separate named `label` slot:
- *
- * ```html
- * <vaadin-form-item>
- *   <label slot="label">Label aside</label>
- *   <input>
- * </vaadin-form-item>
- * ```
- *
- * Any content can be used. For instance, you can have multiple input elements
- * with surrounding text. The label can be an element of any type:
- *
- * ```html
- * <vaadin-form-item>
- *   <span slot="label">Date of Birth</span>
- *   <input placeholder="YYYY" size="4"> -
- *   <input placeholder="MM" size="2"> -
- *   <input placeholder="DD" size="2"><br>
- *   <em>Example: 1900-01-01</em>
- * </vaadin-form-item>
- * ```
- *
- * The label is optional and can be omitted:
- *
- * ```html
- * <vaadin-form-item>
- *   <input type="checkbox"> Subscribe to our Newsletter
- * </vaadin-form-item>
- * ```
- *
- * By default, the `label` slot content is displayed aside of the input content.
- * When `label-position="top"` is set, the `label` slot content is displayed on top:
- *
- * ```html
- * <vaadin-form-item label-position="top">
- *   <label slot="label">Label on top</label>
- *   <input>
- * </vaadin-form-item>
- * ```
- *
- * **Note:** Normally, `<vaadin-form-item>` is used as a child of
- * a `<vaadin-form-layout>` element. Setting `label-position` is unnecessary,
- * because the `label-position` attribute is triggered automatically by the parent
- * `<vaadin-form-layout>`, depending on its width and responsive behavior.
- *
- * ### Input Width
- *
- * By default, `<vaadin-form-item>` does not manipulate the width of the slotted
- * input elements. Optionally you can stretch the child input element to fill
- * the available width for the input content by adding the `full-width` class:
- *
- * ```html
- * <vaadin-form-item>
- *   <label slot="label">Label</label>
- *   <input class="full-width">
- * </vaadin-form-item>
- * ```
- *
- * ### Styling
- *
- * The `label-position` host attribute can be used to target the label on top state:
- *
- * ```
- * :host([label-position="top"]) {
- *   padding-top: 0.5rem;
- * }
- * ```
- *
- * The following shadow DOM parts are available for styling:
- *
- * Part name | Description
- * ---|---
- * label | The label slot container
- *
- * ### Custom CSS Properties Reference
- *
- * The following custom CSS properties are available on the `<vaadin-form-item>`
- * element:
- *
- * Custom CSS property | Description | Default
- * ---|---|---
- * `--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`
- *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
- *
- * @extends HTMLElement
- * @mixes ThemableMixin
+ * @deprecated Import `FormItem` from `@vaadin/form-layout/vaadin-form-item` instead.
  */
-class FormItemElement extends ThemableMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: inline-flex;
-          flex-direction: row;
-          align-items: baseline;
+export const FormItemElement = FormItem;
 
-          /* CSS API for host */
-          --vaadin-form-item-label-width: 8em;
-          --vaadin-form-item-label-spacing: 1em;
-          --vaadin-form-item-row-spacing: 1em;
-
-          margin: calc(0.5 * var(--vaadin-form-item-row-spacing)) 0;
-        }
-
-        :host([label-position='top']) {
-          flex-direction: column;
-          align-items: stretch;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        #label {
-          width: var(--vaadin-form-item-label-width);
-          flex: 0 0 auto;
-        }
-
-        :host([label-position='top']) #label {
-          width: auto;
-        }
-
-        #spacing {
-          width: var(--vaadin-form-item-label-spacing);
-          flex: 0 0 auto;
-        }
-
-        #content {
-          flex: 1 1 auto;
-        }
-
-        #content ::slotted(.full-width) {
-          box-sizing: border-box;
-          width: 100%;
-          min-width: 0;
-        }
-      </style>
-      <div id="label" part="label" on-click="_onLabelClick">
-        <slot name="label" id="labelSlot"></slot>
-      </div>
-      <div id="spacing"></div>
-      <div id="content">
-        <slot id="contentSlot"></slot>
-      </div>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-form-item';
-  }
-
-  /** @private */
-  _onLabelClick() {
-    const firstContentElementChild = Array.prototype.find.call(
-      this.$.contentSlot.assignedNodes(),
-      (e) => e.nodeType === Node.ELEMENT_NODE
-    );
-    if (firstContentElementChild) {
-      firstContentElementChild.focus();
-      firstContentElementChild.click();
-    }
-  }
-}
-
-customElements.define(FormItemElement.is, FormItemElement);
-
-export { FormItemElement };
+export * from '@vaadin/form-layout/src/vaadin-form-item.js';

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

@@ -1,149 +1,18 @@
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-
-import { FormLayoutResponsiveStep } from './interfaces';
-
 /**
- * `<vaadin-form-layout>` is a Web Component providing configurable responsive
- * layout for form elements.
- *
- * ```html
- * <vaadin-form-layout>
- *
- *   <vaadin-form-item>
- *     <label slot="label">First Name</label>
- *     <input class="full-width" value="Jane">
- *   </vaadin-form-item>
- *
- *   <vaadin-form-item>
- *     <label slot="label">Last Name</label>
- *     <input class="full-width" value="Doe">
- *   </vaadin-form-item>
- *
- *   <vaadin-form-item>
- *     <label slot="label">Email</label>
- *     <input class="full-width" value="jane.doe@example.com">
- *   </vaadin-form-item>
- *
- * </vaadin-form-layout>
- * ```
- *
- * It supports any child elements as layout items.
- *
- * By default, it makes a layout of two columns if the element width is equal or
- * wider than 40em, and a single column layout otherwise.
- *
- * The number of columns and the responsive behavior are customizable with
- * the `responsiveSteps` property.
- *
- * ### Spanning Items on Multiple Columns
- *
- * You can use `colspan` attribute on the items.
- * In the example below, the first text field spans on two columns:
- *
- * ```html
- * <vaadin-form-layout>
- *
- *   <vaadin-form-item colspan="2">
- *     <label slot="label">Address</label>
- *     <input class="full-width">
- *   </vaadin-form-item>
- *
- *   <vaadin-form-item>
- *     <label slot="label">First Name</label>
- *     <input class="full-width" value="Jane">
- *   </vaadin-form-item>
- *
- *   <vaadin-form-item>
- *     <label slot="label">Last Name</label>
- *     <input class="full-width" value="Doe">
- *   </vaadin-form-item>
- *
- * </vaadin-form-layout>
- * ```
- *
- * ### Explicit New Row
- *
- * Use the `<br>` line break element to wrap the items on a new row:
- *
- * ```html
- * <vaadin-form-layout>
- *
- *   <vaadin-form-item>
- *     <label slot="label">Email</label>
- *     <input class="full-width">
- *   </vaadin-form-item>
- *
- *   <br>
- *
- *   <vaadin-form-item>
- *     <label slot="label">Confirm Email</label>
- *     <input class="full-width">
- *   </vaadin-form-item>
- *
- * </vaadin-form-layout>
- * ```
- *
- * ### CSS Properties Reference
- *
- * The following custom CSS properties are available on the `<vaadin-form-layout>`
- * element:
- *
- * Custom CSS property | Description | Default
- * ---|---|---
- * `--vaadin-form-layout-column-spacing` | Length of the spacing between columns | `2em`
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-declare class FormLayoutElement extends ElementMixin(ThemableMixin(HTMLElement)) {
-  /**
-   * Allows specifying a responsive behavior with the number of columns
-   * and the label position depending on the layout width.
-   *
-   * Format: array of objects, each object defines one responsive step
-   * with `minWidth` CSS length, `columns` number, and optional
-   * `labelsPosition` string of `"aside"` or `"top"`. At least one item is required.
-   *
-   * #### Examples
-   *
-   * ```javascript
-   * formLayout.responsiveSteps = [{columns: 1}];
-   * // The layout is always a single column, labels aside.
-   * ```
-   *
-   * ```javascript
-   * formLayout.responsiveSteps = [
-   *   {minWidth: 0, columns: 1},
-   *   {minWidth: '40em', columns: 2}
-   * ];
-   * // Sets two responsive steps:
-   * // 1. When the layout width is < 40em, one column, labels aside.
-   * // 2. Width >= 40em, two columns, labels aside.
-   * ```
-   *
-   * ```javascript
-   * formLayout.responsiveSteps = [
-   *   {minWidth: 0, columns: 1, labelsPosition: 'top'},
-   *   {minWidth: '20em', columns: 1},
-   *   {minWidth: '40em', columns: 2}
-   * ];
-   * // Default value. Three responsive steps:
-   * // 1. Width < 20em, one column, labels on top.
-   * // 2. 20em <= width < 40em, one column, labels aside.
-   * // 3. Width >= 40em, two columns, labels aside.
-   * ```
-   */
-  responsiveSteps: FormLayoutResponsiveStep[];
+import { FormLayout } from '@vaadin/form-layout/src/vaadin-form-layout.js';
 
-  /**
-   * Set custom CSS property values and update the layout.
-   */
-  updateStyles(properties?: { [key: string]: string }): void;
-}
+/**
+ * @deprecated Import `FormLayout` from `@vaadin/form-layout` instead.
+ */
+export type FormLayoutElement = FormLayout;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-form-layout': FormLayoutElement;
-  }
-}
+/**
+ * @deprecated Import `FormLayout` from `@vaadin/form-layout` instead.
+ */
+export const FormLayoutElement: typeof FormLayout;
 
-export { FormLayoutElement };
+export * from '@vaadin/form-layout/src/vaadin-form-layout.js';

package/src/vaadin-form-layout.js

@@ -3,527 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { beforeNextRender } from '@polymer/polymer/lib/utils/render-status.js';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
-import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
+import { FormLayout } from '@vaadin/form-layout/src/vaadin-form-layout.js';
 
 /**
- * `<vaadin-form-layout>` is a Web Component providing configurable responsive
- * layout for form elements.
- *
- * ```html
- * <vaadin-form-layout>
- *
- *   <vaadin-form-item>
- *     <label slot="label">First Name</label>
- *     <input class="full-width" value="Jane">
- *   </vaadin-form-item>
- *
- *   <vaadin-form-item>
- *     <label slot="label">Last Name</label>
- *     <input class="full-width" value="Doe">
- *   </vaadin-form-item>
- *
- *   <vaadin-form-item>
- *     <label slot="label">Email</label>
- *     <input class="full-width" value="jane.doe@example.com">
- *   </vaadin-form-item>
- *
- * </vaadin-form-layout>
- * ```
- *
- * It supports any child elements as layout items.
- *
- * By default, it makes a layout of two columns if the element width is equal or
- * wider than 40em, and a single column layout otherwise.
- *
- * The number of columns and the responsive behavior are customizable with
- * the `responsiveSteps` property.
- *
- * ### Spanning Items on Multiple Columns
- *
- * You can use `colspan` attribute on the items.
- * In the example below, the first text field spans on two columns:
- *
- * ```html
- * <vaadin-form-layout>
- *
- *   <vaadin-form-item colspan="2">
- *     <label slot="label">Address</label>
- *     <input class="full-width">
- *   </vaadin-form-item>
- *
- *   <vaadin-form-item>
- *     <label slot="label">First Name</label>
- *     <input class="full-width" value="Jane">
- *   </vaadin-form-item>
- *
- *   <vaadin-form-item>
- *     <label slot="label">Last Name</label>
- *     <input class="full-width" value="Doe">
- *   </vaadin-form-item>
- *
- * </vaadin-form-layout>
- * ```
- *
- * ### Explicit New Row
- *
- * Use the `<br>` line break element to wrap the items on a new row:
- *
- * ```html
- * <vaadin-form-layout>
- *
- *   <vaadin-form-item>
- *     <label slot="label">Email</label>
- *     <input class="full-width">
- *   </vaadin-form-item>
- *
- *   <br>
- *
- *   <vaadin-form-item>
- *     <label slot="label">Confirm Email</label>
- *     <input class="full-width">
- *   </vaadin-form-item>
- *
- * </vaadin-form-layout>
- * ```
- *
- * ### CSS Properties Reference
- *
- * The following custom CSS properties are available on the `<vaadin-form-layout>`
- * element:
- *
- * Custom CSS property | Description | Default
- * ---|---|---
- * `--vaadin-form-layout-column-spacing` | Length of the spacing between columns | `2em`
- *
- * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes ThemableMixin
+ * @deprecated Import `FormLayout` from `@vaadin/form-layout` instead.
  */
-class FormLayoutElement extends ElementMixin(ThemableMixin(mixinBehaviors([IronResizableBehavior], PolymerElement))) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-          max-width: 100%;
-          animation: 1ms vaadin-form-layout-appear;
-          /* CSS API for host */
-          --vaadin-form-layout-column-spacing: 2em; /* (default) */
-          align-self: stretch;
-        }
+export const FormLayoutElement = FormLayout;
 
-        @keyframes vaadin-form-layout-appear {
-          to {
-            opacity: 1 !important; /* stylelint-disable-line keyframe-declaration-no-important */
-          }
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        #layout {
-          display: flex;
-
-          align-items: baseline; /* default \`stretch\` is not appropriate */
-
-          flex-wrap: wrap; /* the items should wrap */
-        }
-
-        #layout ::slotted(*) {
-          /* Items should neither grow nor shrink. */
-          flex-grow: 0;
-          flex-shrink: 0;
-
-          /* Margins make spacing between the columns */
-          margin-left: calc(0.5 * var(--vaadin-form-layout-column-spacing));
-          margin-right: calc(0.5 * var(--vaadin-form-layout-column-spacing));
-        }
-
-        #layout ::slotted(br) {
-          display: none;
-        }
-      </style>
-      <div id="layout">
-        <slot id="slot"></slot>
-      </div>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-form-layout';
-  }
-
-  static get properties() {
-    return {
-      /**
-       * @typedef FormLayoutResponsiveStep
-       * @type {object}
-       * @property {string} minWidth - The threshold value for this step in CSS length units.
-       * @property {number} columns - Number of columns. Only natural numbers are valid.
-       * @property {string} labelsPosition - Labels position option, valid values: `"aside"` (default), `"top"`.
-       */
-
-      /**
-       * Allows specifying a responsive behavior with the number of columns
-       * and the label position depending on the layout width.
-       *
-       * Format: array of objects, each object defines one responsive step
-       * with `minWidth` CSS length, `columns` number, and optional
-       * `labelsPosition` string of `"aside"` or `"top"`. At least one item is required.
-       *
-       * #### Examples
-       *
-       * ```javascript
-       * formLayout.responsiveSteps = [{columns: 1}];
-       * // The layout is always a single column, labels aside.
-       * ```
-       *
-       * ```javascript
-       * formLayout.responsiveSteps = [
-       *   {minWidth: 0, columns: 1},
-       *   {minWidth: '40em', columns: 2}
-       * ];
-       * // Sets two responsive steps:
-       * // 1. When the layout width is < 40em, one column, labels aside.
-       * // 2. Width >= 40em, two columns, labels aside.
-       * ```
-       *
-       * ```javascript
-       * formLayout.responsiveSteps = [
-       *   {minWidth: 0, columns: 1, labelsPosition: 'top'},
-       *   {minWidth: '20em', columns: 1},
-       *   {minWidth: '40em', columns: 2}
-       * ];
-       * // Default value. Three responsive steps:
-       * // 1. Width < 20em, one column, labels on top.
-       * // 2. 20em <= width < 40em, one column, labels aside.
-       * // 3. Width >= 40em, two columns, labels aside.
-       * ```
-       *
-       * @type {!Array<!FormLayoutResponsiveStep>}
-       */
-      responsiveSteps: {
-        type: Array,
-        value: function () {
-          return [
-            { minWidth: 0, columns: 1, labelsPosition: 'top' },
-            { minWidth: '20em', columns: 1 },
-            { minWidth: '40em', columns: 2 }
-          ];
-        },
-        observer: '_responsiveStepsChanged'
-      },
-
-      /**
-       * Current number of columns in the layout
-       * @private
-       */
-      _columnCount: {
-        type: Number
-      },
-
-      /**
-       * Indicates that labels are on top
-       * @private
-       */
-      _labelsOnTop: {
-        type: Boolean
-      }
-    };
-  }
-
-  static get observers() {
-    return ['_invokeUpdateStyles(_columnCount, _labelsOnTop)'];
-  }
-
-  /** @protected */
-  ready() {
-    // Here we create and 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._styleElement = document.createElement('style');
-    this.root.appendChild(this._styleElement);
-    // Ensure there is a child text node in the style element
-    this._styleElement.textContent = ' ';
-
-    super.ready();
-
-    this.addEventListener('iron-resize', this._selectResponsiveStep);
-    this.addEventListener('animationend', this.__onAnimationEnd);
-  }
-
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-
-    beforeNextRender(this, this._selectResponsiveStep);
-    beforeNextRender(this, this.updateStyles);
-
-    this._observeChildrenColspanChange();
-  }
-
-  /** @protected */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.__mutationObserver.disconnect();
-    this.__childObserver.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 === 'hidden')
-        ) {
-          this.updateStyles();
-        }
-      });
-    });
-
-    this.__childObserver = new FlattenedNodesObserver(this, (info) => {
-      const addedNodes = this._getObservableNodes(info.addedNodes);
-      const removedNodes = this._getObservableNodes(info.removedNodes);
-
-      addedNodes.forEach((child) => {
-        this.__mutationObserver.observe(child, mutationObserverConfig);
-      });
-
-      if (addedNodes.length > 0 || removedNodes.length > 0) {
-        this.updateStyles();
-      }
-    });
-  }
-
-  /** @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
-    );
-  }
-
-  /** @private */
-  _naturalNumberOrOne(n) {
-    if (typeof n === 'number' && n >= 1 && n < Infinity) {
-      return Math.floor(n);
-    }
-    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 {
-      if (!Array.isArray(responsiveSteps)) {
-        throw new Error('Invalid "responsiveSteps" type, an Array is required.');
-      }
-
-      if (responsiveSteps.length < 1) {
-        throw new Error('Invalid empty "responsiveSteps" array, at least one item is required.');
-      }
-
-      responsiveSteps.forEach((step) => {
-        if (this._naturalNumberOrOne(step.columns) !== step.columns) {
-          throw new Error(`Invalid 'columns' value of ${step.columns}, a natural number is required.`);
-        }
-
-        if (step.minWidth !== undefined && !this._isValidCSSLength(step.minWidth)) {
-          throw new Error(`Invalid 'minWidth' value of ${step.minWidth}, a valid CSS length required.`);
-        }
-
-        if (step.labelsPosition !== undefined && ['aside', 'top'].indexOf(step.labelsPosition) === -1) {
-          throw new Error(
-            `Invalid 'labelsPosition' value of ${step.labelsPosition}, 'aside' or 'top' string is required.`
-          );
-        }
-      });
-    } catch (e) {
-      if (oldResponsiveSteps && oldResponsiveSteps !== responsiveSteps) {
-        console.warn(`${e.message} Using previously set 'responsiveSteps' instead.`);
-        this.responsiveSteps = oldResponsiveSteps;
-      } else {
-        console.warn(`${e.message} Using default 'responsiveSteps' instead.`);
-        this.responsiveSteps = [
-          { minWidth: 0, columns: 1, labelsPosition: 'top' },
-          { minWidth: '20em', columns: 1 },
-          { minWidth: '40em', columns: 2 }
-        ];
-      }
-    }
-
-    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
-    let selectedStep;
-    const tmpStyleProp = 'background-position';
-    this.responsiveSteps.forEach((step) => {
-      // Convert minWidth to px units for comparison
-      this.$.layout.style.setProperty(tmpStyleProp, step.minWidth);
-      const stepMinWidthPx = parseFloat(getComputedStyle(this.$.layout).getPropertyValue(tmpStyleProp));
-
-      // Compare step min-width with the host width, select the passed step
-      if (stepMinWidthPx <= this.offsetWidth) {
-        selectedStep = step;
-      }
-    });
-    this.$.layout.style.removeProperty(tmpStyleProp);
-
-    // Sometimes converting units is not possible, e.g, when element is
-    // not connected. Then the `selectedStep` stays `undefined`.
-    if (selectedStep) {
-      // Apply the chosen responsive step’s properties
-      this._columnCount = selectedStep.columns;
-      this._labelsOnTop = selectedStep.labelsPosition === 'top';
-    }
-  }
-
-  /** @private */
-  _invokeUpdateStyles() {
-    this.updateStyles();
-  }
-
-  /**
-   * Set custom CSS property values and update the layout.
-   * @param {Object<string, string>=} properties
-   * @protected
-   */
-  updateStyles(properties) {
-    super.updateStyles(properties);
-
-    /*
-      The item width formula:
-
-          itemWidth = colspan / columnCount * 100% - columnSpacing
-
-      We have to subtract columnSpacing, because the column spacing space is taken
-      by item margins of 1/2 * spacing on both sides
-    */
-
-    const style = getComputedStyle(this);
-    const columnSpacing = style.getPropertyValue('--vaadin-form-layout-column-spacing');
-
-    const direction = style.direction;
-    const marginStartProp = 'margin-' + (direction === 'ltr' ? 'left' : 'right');
-    const marginEndProp = 'margin-' + (direction === 'ltr' ? 'right' : 'left');
-
-    const containerWidth = this.offsetWidth;
-
-    let col = 0;
-    Array.from(this.children)
-      .filter((child) => child.localName === 'br' || getComputedStyle(child).display !== 'none')
-      .forEach((child, index, children) => {
-        if (child.localName === 'br') {
-          // Reset column count on line break
-          col = 0;
-          return;
-        }
-
-        let colspan;
-        colspan = this._naturalNumberOrOne(parseFloat(child.getAttribute('colspan')));
-
-        // Never span further than the number of columns
-        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})`;
-
-        if (col + colspan > this._columnCount) {
-          // Too big to fit on this row, let’s wrap it
-          col = 0;
-        }
-
-        // At the start edge
-        if (col === 0) {
-          child.style.setProperty(marginStartProp, '0px');
-        } else {
-          child.style.removeProperty(marginStartProp);
-        }
-
-        const nextIndex = index + 1;
-        const nextLineBreak = nextIndex < children.length && children[nextIndex].localName === 'br';
-
-        // At the end edge
-        if (col + colspan === this._columnCount) {
-          child.style.setProperty(marginEndProp, '0px');
-        } else if (nextLineBreak) {
-          const colspanRatio = (this._columnCount - col - colspan) / this._columnCount;
-          child.style.setProperty(
-            marginEndProp,
-            `calc(${colspanRatio * containerWidth}px + ${colspanRatio} * ${columnSpacing})`
-          );
-        } else {
-          child.style.removeProperty(marginEndProp);
-        }
-
-        // Move the column counter
-        col = (col + colspan) % this._columnCount;
-
-        if (child.localName === 'vaadin-form-item') {
-          if (this._labelsOnTop) {
-            child.setAttribute('label-position', 'top');
-          } else {
-            child.removeAttribute('label-position');
-          }
-        }
-      });
-  }
-}
-
-customElements.define(FormLayoutElement.is, FormLayoutElement);
-
-export { FormLayoutElement };
+export * from '@vaadin/form-layout/src/vaadin-form-layout.js';

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

@@ -1,2 +1 @@
-import './vaadin-form-item-styles.js';
-import '../../src/vaadin-form-item.js';
+import '@vaadin/form-layout/theme/lumo/vaadin-form-item.js';

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

@@ -1,2 +1 @@
-import './vaadin-form-layout-styles.js';
-import '../../src/vaadin-form-layout.js';
+import '@vaadin/form-layout/theme/lumo/vaadin-form-layout.js';

package/theme/material/vaadin-form-item.js

@@ -1,2 +1 @@
-import './vaadin-form-item-styles.js';
-import '../../src/vaadin-form-item.js';
+import '@vaadin/form-layout/theme/material/vaadin-form-item.js';

package/theme/material/vaadin-form-layout.js

@@ -1 +1 @@
-import '../../src/vaadin-form-layout.js';
+import '@vaadin/form-layout/theme/material/vaadin-form-layout.js';

package/vaadin-form-layout.d.ts

@@ -1,2 +1 @@
 export * from './src/vaadin-form-layout.js';
-export * from './src/interfaces';

package/src/interfaces.d.ts

@@ -1,7 +0,0 @@
-export type FormLayoutLabelsPosition = 'aside' | 'top';
-
-export type FormLayoutResponsiveStep = {
-  minWidth?: string | 0;
-  columns: number;
-  labelsPosition?: FormLayoutLabelsPosition;
-};

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

@@ -1,28 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-
-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);
-      font-family: var(--lumo-font-family);
-      font-size: var(--lumo-font-size-s);
-      font-weight: 500;
-      margin-top: var(--lumo-space-m);
-      margin-left: calc(var(--lumo-border-radius-m) / 4);
-      margin-bottom: var(--lumo-space-xs);
-      transition: color 0.4s;
-      line-height: 1.333;
-    }
-  `,
-  { moduleId: 'lumo-form-item' }
-);

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

@@ -1,12 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-
-registerStyles(
-  'vaadin-form-layout',
-  css`
-    :host {
-      --vaadin-form-layout-column-spacing: var(--lumo-space-l);
-    }
-  `,
-  { moduleId: 'lumo-form-layout' }
-);

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

@@ -1,19 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-
-registerStyles(
-  'vaadin-form-item',
-  css`
-    [part='label'] {
-      font-family: var(--material-font-family);
-      font-size: var(--material-small-font-size);
-      color: var(--material-secondary-text-color);
-      line-height: 16px;
-      font-weight: 400;
-      margin-top: 16px;
-      margin-bottom: 8px;
-    }
-  `,
-  { moduleId: 'material-form-item' }
-);