Variant information is written to the analyzer.

flow-components-parent/flow-generated-components/json_metadata/vaadin-button.json

@@ -35,5 +35,20 @@
     "Vaadin.ThemableMixin",
     "Polymer.GestureEventListeners"
   ],
+  "variants": {
+    "lumo": [
+      [
+        "small",
+        "large",
+        "tertiary",
+        "tertiary-inline",
+        "primary",
+        "success",
+        "error",
+        "contrast",
+        "icon"
+      ]
+    ]
+  },
   "description": "`<vaadin-button>` is a Polymer 2 element providing an accessible and customizable button.\n\n```html\n<vaadin-button>\n</vaadin-button>\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n----------------|----------------\n`label` | The label (text) inside the button\n`prefix` | A slot for e.g. an icon before the label\n`suffix` | A slot for e.g. an icon after the label\n\n\nThe following attributes are exposed for styling:\n\nAttribute | Description\n--------- | -----------\n`active` | Set when the button is pressed down, either with mouse, touch or the keyboard.\n`disabled` | Set when the button is disabled.\n`focus-ring` | Set when the button is focused using the keyboard.\n`focused` | Set when the button is focused.\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)"
 }

flow-components-parent/flow-generated-components/json_metadata/vaadin-checkbox.json

@@ -83,5 +83,6 @@
     "Vaadin.ThemableMixin",
     "Polymer.GestureEventListeners"
   ],
+  "variants": {},
   "description": "`<vaadin-checkbox>` is a Polymer 2 element for customized checkboxes.\n\n```html\n<vaadin-checkbox>\n  Make my profile visible\n</vaadin-checkbox>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name         | Description\n------------------|----------------\n`checkbox`        | The checkbox element\n`label`           | The label content element\n\nThe following state attributes are available for styling:\n\nAttribute    | Description\n-------------|------------\n`active`     | Set when the checkbox is pressed down, either with mouse, touch or the keyboard.\n`disabled`   | Set when the checkbox is disabled.\n`focus-ring` | Set when the checkbox is focused using the keyboard.\n`focused`    | Set when the checkbox is focused.\n`indeterminate` | Set when the checkbox is in indeterminate mode.\n`checked` | Set when the checkbox is checked.\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)"
 }

flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-dropdown-wrapper.json

@@ -91,5 +91,6 @@
   "slots": [],
   "behaviors": [],
   "mixins": [],
+  "variants": {},
   "description": "Element for internal use only."
 }

flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-dropdown.json

@@ -94,5 +94,6 @@
   ],
   "behaviors": [],
   "mixins": [],
+  "variants": {},
   "description": "Element for internal use only."
 }

flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-item.json

@@ -60,5 +60,6 @@
   "mixins": [
     "Vaadin.ThemableMixin"
   ],
+  "variants": {},
   "description": "The default element used for items in the vaadin-combo-box.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---|---\n`content` | The element that wraps the item label or template content\n\nThe following state attributes are exposed for styling:\n\nAttribute    | Description | Part name\n-------------|-------------|------------\n`selected` | Set when the item is selected | :host\n`focused` | Set when the item is focused | :host\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)"
 }

flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-light.json

@@ -257,5 +257,6 @@
     "Vaadin.ComboBoxMixin",
     "Vaadin.ThemableMixin"
   ],
+  "variants": {},
   "description": "`<vaadin-combo-box-light>` is a customizable version of the `<vaadin-combo-box>` providing\nonly the dropdown functionality and leaving the input field definition to the user.\n\nThe element has the same API as `<vaadin-combo-box>`.\n\nTo create a custom input field, you need to add a child element which has a two-way\ndata-bindable property representing the input value. The property name is expected\nto be `value` by default. See the example below for a simplest possible example\nusing a `<vaadin-text-field>` element.\n\n```html\n<vaadin-combo-box-light>\n  <vaadin-text-field>\n  </vaadin-text-field>\n</vaadin-combo-box-light>\n```\n\nIf you are using other custom input fields like `<iron-input>`, you\nneed to define the name of the bindable property with the `attrForValue` attribute.\n\n```html\n<vaadin-combo-box-light attr-for-value=\"bind-value\">\n  <iron-input>\n    <input>\n  </iron-input>\n</vaadin-combo-box-light>\n```\n\nIn the next example you can see how to create a custom input field based\non a `<paper-input>` decorated with a custom `<iron-icon>` and\ntwo `<paper-button>`s to act as the clear and toggle controls.\n\n```html\n<vaadin-combo-box-light>\n  <paper-input label=\"Elements\" class=\"input\">\n    <iron-icon icon=\"toll\" slot=\"prefix\"></iron-icon>\n    <paper-button slot=\"suffix\" class=\"clear-button\">Clear</paper-button>\n    <paper-button slot=\"suffix\" class=\"toggle-button\">Toggle</paper-button>\n  </paper-input>\n</vaadin-combo-box-light>\n```"
 }

flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-overlay.json

@@ -133,5 +133,6 @@
   "slots": [],
   "behaviors": [],
   "mixins": [],
+  "variants": {},
   "description": "The overlay element.\n\n### Styling\n\nSee [`<vaadin-overlay>` documentation](https://github.com/vaadin/vaadin-overlay/blob/master/src/vaadin-overlay.html)\nfor `<vaadin-combo-box-overlay>` parts.\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)"
 }

flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box.json

@@ -298,5 +298,6 @@
     "Vaadin.ComboBoxMixin",
     "Vaadin.ThemableMixin"
   ],
+  "variants": {},
   "description": "`<vaadin-combo-box>` is a combo box element combining a dropdown list with an\ninput field for filtering the list of items. If you want to replace the default\ninput field with a custom implementation, you should use the\n[`<vaadin-combo-box-light>`](#/elements/vaadin-combo-box-light) element.\n\nItems in the dropdown list must be provided as a list of `String` values.\nDefining the items is done using the `items` property, which can be assigned\nwith data-binding, using an attribute or directly with the JavaScript property.\n\n```html\n<vaadin-combo-box\n    label=\"Fruit\"\n    items=\"[[data]]\">\n</vaadin-combo-box>\n```\n\n```js\ncombobox.items = ['apple', 'orange', 'banana'];\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\nThis element can be used within an `iron-form`.\n\n### Item Template\n\n`<vaadin-combo-box>` supports using custom item template provided in the light\nDOM:\n\n```html\n<vaadin-combo-box items='[{\"label\": \"Hydrogen\", \"value\": \"H\"}]'>\n  <template>\n    [[index]]: [[item.label]] <b>[[item.value]</b>\n  </template>\n</vaadin-combo-box>\n```\n\nThe following properties are available for item template bindings:\n\nProperty name | Type | Description\n--------------|------|------------\n`index`| Number | Index of the item in the `items` array\n`item` | String or Object | The item reference\n`selected` | Boolean | True when item is selected\n`focused` | Boolean | True when item is focused\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------|-------------|-------------\n`--vaadin-combo-box-overlay-max-height` | Property that determines the max height of overlay | `65vh`\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`text-field` | The text field\n`clear-button` | The clear button\n`toggle-button` | The toggle button\n\nSee [`<vaadin-overlay>` documentation](https://github.com/vaadin/vaadin-overlay/blob/master/src/vaadin-overlay.html)\nfor `<vaadin-combo-box-overlay>` parts.\n\nSee [`<vaadin-text-field>` documentation](https://vaadin.com/components/vaadin-text-field/html-api/elements/Vaadin.TextFieldElement)\nfor the text field parts.\n\nThe following state attributes are available for styling:\n\nAttribute    | Description | Part name\n-------------|-------------|------------\n`opened` | Set when the combo box dropdown is open | :host\n`disabled` | Set to a disabled combo box | :host\n`readonly` | Set to a read only combo box | :host\n`has-value` | Set when the element has a value | :host\n`invalid` | Set when the element is invalid | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`loading` | Set when new items are expected | :host\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)"
 }

flow-components-parent/flow-generated-components/json_metadata/vaadin-date-picker-light.json

@@ -148,5 +148,6 @@
     "Vaadin.ThemableMixin",
     "Vaadin.DatePickerMixin"
   ],
+  "variants": {},
   "description": "`<vaadin-date-picker-light>` is a customizable version of the `<vaadin-date-picker>` providing\nonly the scrollable month calendar view and leaving the input field definition to the user.\n\nTo create a custom input field, you need to add a child element which has a two-way\ndata-bindable property representing the input value. The property name is expected\nto be `bindValue` by default. See the example below for a simplest possible example\nusing an `<input>` element extended with `iron-input`.\n\n```html\n<vaadin-date-picker-light>\n  <iron-input>\n    <input/>\n  </iron-input>\n</vaadin-date-picker-light>\n```\n\nIf you are using other custom input fields like `<paper-input>`, you\nneed to define the name of value property using the `attrForValue` property.\n\n```html\n<vaadin-date-picker-light attr-for-value=\"value\">\n  <paper-input label=\"Birthday\">\n  </paper-input>\n</vaadin-date-picker-light>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description | Theme for Element\n----------------|----------------|----------------\n`overlay-content` | The overlay element | vaadin-date-picker-light\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)"
 }

flow-components-parent/flow-generated-components/json_metadata/vaadin-date-picker-overlay-content.json

@@ -166,5 +166,6 @@
   "slots": [],
   "behaviors": [],
   "mixins": [],
+  "variants": {},
   "description": ""
 }

flow-components-parent/flow-generated-components/json_metadata/vaadin-date-picker-overlay.json

@@ -133,5 +133,6 @@
   "slots": [],
   "behaviors": [],
   "mixins": [],
+  "variants": {},
   "description": "The overlay element.\n\n### Styling\n\nSee [`<vaadin-overlay>` documentation](https://github.com/vaadin/vaadin-overlay/blob/master/src/vaadin-overlay.html)\nfor `<vaadin-date-picker-overlay>` parts.\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)"
 }

flow-components-parent/flow-generated-components/json_metadata/vaadin-date-picker.json

@@ -198,5 +198,6 @@
     "Vaadin.DatePickerMixin",
     "Polymer.GestureEventListeners"
   ],
+  "variants": {},
   "description": "`<vaadin-date-picker>` is a date selection field which includes a scrollable\nmonth calendar view.\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description | Theme for Element\n----------------|----------------|----------------\n`text-field` | Input element | vaadin-date-picker\n`clear-button` | Clear button | vaadin-date-picker\n`toggle-button` | Toggle button | vaadin-date-picker\n`overlay-content` | The overlay element | vaadin-date-picker\n`overlay-header` | Fullscreen mode header | vaadin-date-picker-overlay-content\n`label` | Fullscreen mode value/label | vaadin-date-picker-overlay-content\n`clear-button` | Fullscreen mode clear button | vaadin-date-picker-overlay-content\n`toggle-button` | Fullscreen mode toggle button | vaadin-date-picker-overlay-content\n`years-toggle-button` | Fullscreen mode years scroller toggle | vaadin-date-picker-overlay-content\n`months` | Months scroller | vaadin-date-picker-overlay-content\n`years` | Years scroller | vaadin-date-picker-overlay-content\n`toolbar` | Footer bar with buttons | vaadin-date-picker-overlay-content\n`today-button` | Today button | vaadin-date-picker-overlay-content\n`cancel-button` | Cancel button | vaadin-date-picker-overlay-content\n`month` | Month calendar | vaadin-date-picker-overlay-content\n`year-number` | Year number | vaadin-date-picker-overlay-content\n`year-separator` | Year separator | vaadin-date-picker-overlay-content\n`month-header` | Month title | vaadin-month-calendar\n`weekdays` | Weekday container | vaadin-month-calendar\n`weekday` | Weekday element | vaadin-month-calendar\n`week-numbers` | Week numbers container | vaadin-month-calendar\n`week-number` | Week number element | vaadin-month-calendar\n`date` | Date element | vaadin-month-calendar\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)\n\nThe following state attributes are available for styling:\n\nAttribute    | Description | Part name\n-------------|-------------|------------\n`invalid` | Set when the element is invalid | :host\n`opened` | Set when the date selector overlay is opened | :host\n`readonly` | Set when the element is readonly | :host\n`disabled` | Set when the element is disabled | :host\n`today` | Set on the date corresponding to the current day | date\n`focused` | Set on the focused date | date\n`disabled` | Set on the date out of the allowed range | date\n`selected` | Set on the selected date | date\n\nIf you want to replace the default input field with a custom implementation, you should use the\n[`<vaadin-date-picker-light>`](#vaadin-date-picker-light) element."
 }

flow-components-parent/flow-generated-components/json_metadata/vaadin-dialog-overlay.json

@@ -133,5 +133,6 @@
   "slots": [],
   "behaviors": [],
   "mixins": [],
+  "variants": {},
   "description": "The overlay element.\n\n### Styling\n\nSee [`<vaadin-overlay>` documentation](https://github.com/vaadin/vaadin-overlay/blob/master/src/vaadin-overlay.html)\nfor `<vaadin-dialog-overlay>` parts."
 }

flow-components-parent/flow-generated-components/json_metadata/vaadin-dialog.json

@@ -49,5 +49,6 @@
   "mixins": [
     "Vaadin.ElementMixin"
   ],
+  "variants": {},
   "description": "`<vaadin-dialog>` is a Polymer 2 element for customized modal dialogs.\n\n```html\n<vaadin-dialog opened>\n  <template>\n    Sample dialog\n  </template>\n</vaadin-dialog>\n```\n\n### Styling\n\nSee [`<vaadin-overlay>` documentation](https://github.com/vaadin/vaadin-overlay/blob/master/src/vaadin-overlay.html)\nfor `<vaadin-dialog-overlay>` parts.\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)"
 }

flow-components-parent/flow-generated-components/json_metadata/vaadin-form-item.json

@@ -14,5 +14,6 @@
   "mixins": [
     "Vaadin.ThemableMixin"
   ],
+  "variants": {},
   "description": "`<vaadin-form-item>` is a Polymer 2 element providing labelled form item wrapper\nfor using inside `<vaadin-form-layout>`.\n\n`<vaadin-form-item>` accepts any number of children 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\nAny content can be used. For instance, you can have multiple input elements\nwith surrounding text. The label can be an element of any type:\n\n```html\n<vaadin-form-item>\n  <span slot=\"label\">Date of Birth</span>\n  <input placeholder=\"YYYY\" size=\"4\"> -\n  <input placeholder=\"MM\" size=\"2\"> -\n  <input placeholder=\"DD\" size=\"2\"><br>\n  <em>Example: 1900-01-01</em>\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 elements. 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<pre><code>\n&lt;dom-module id=\"my-form-item-theme\" theme-for=\"vaadin-form-item\"&gt;\n  &lt;template&gt;\n    &lt;style&gt;\n      :host {\n        /&#42; default state styles, label aside &#42;/\n      }\n\n      :host([label-position=\"top\"]) {\n        /&#42; label on top state styles &#42;/\n      }\n    &lt;/style&gt;\n  &lt;/template&gt;\n&lt;/dom-module&gt;\n</code></pre>\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 [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)"
 }

flow-components-parent/flow-generated-components/json_metadata/vaadin-form-layout.json

@@ -45,5 +45,6 @@
     "Vaadin.ElementMixin",
     "Vaadin.ThemableMixin"
   ],
+  "variants": {},
   "description": "`<vaadin-form-layout>` is a Polymer 2 element 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=\"[email protected]\">\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` 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`"
 }

flow-components-parent/flow-generated-components/json_metadata/vaadin-infinite-scroller.json

@@ -438,5 +438,6 @@
   "slots": [],
   "behaviors": [],
   "mixins": [],
+  "variants": {},
   "description": ""
 }