@vaadin/select 25.0.0-alpha15 → 25.0.0-alpha17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +16 -16
  2. package/src/styles/vaadin-select-overlay-base-styles.js +5 -1
  3. package/src/vaadin-select.d.ts +29 -23
  4. package/src/vaadin-select.js +29 -23
  5. package/web-types.json +2 -2
  6. package/web-types.lit.json +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/select",
3
- "version": "25.0.0-alpha15",
3
+ "version": "25.0.0-alpha17",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -36,28 +36,28 @@
36
36
  ],
37
37
  "dependencies": {
38
38
  "@open-wc/dedupe-mixin": "^1.3.0",
39
- "@vaadin/a11y-base": "25.0.0-alpha15",
40
- "@vaadin/button": "25.0.0-alpha15",
41
- "@vaadin/component-base": "25.0.0-alpha15",
42
- "@vaadin/field-base": "25.0.0-alpha15",
43
- "@vaadin/input-container": "25.0.0-alpha15",
44
- "@vaadin/item": "25.0.0-alpha15",
45
- "@vaadin/list-box": "25.0.0-alpha15",
46
- "@vaadin/lit-renderer": "25.0.0-alpha15",
47
- "@vaadin/overlay": "25.0.0-alpha15",
48
- "@vaadin/vaadin-themable-mixin": "25.0.0-alpha15",
39
+ "@vaadin/a11y-base": "25.0.0-alpha17",
40
+ "@vaadin/button": "25.0.0-alpha17",
41
+ "@vaadin/component-base": "25.0.0-alpha17",
42
+ "@vaadin/field-base": "25.0.0-alpha17",
43
+ "@vaadin/input-container": "25.0.0-alpha17",
44
+ "@vaadin/item": "25.0.0-alpha17",
45
+ "@vaadin/list-box": "25.0.0-alpha17",
46
+ "@vaadin/lit-renderer": "25.0.0-alpha17",
47
+ "@vaadin/overlay": "25.0.0-alpha17",
48
+ "@vaadin/vaadin-themable-mixin": "25.0.0-alpha17",
49
49
  "lit": "^3.0.0"
50
50
  },
51
51
  "devDependencies": {
52
- "@vaadin/chai-plugins": "25.0.0-alpha15",
53
- "@vaadin/test-runner-commands": "25.0.0-alpha15",
52
+ "@vaadin/chai-plugins": "25.0.0-alpha17",
53
+ "@vaadin/test-runner-commands": "25.0.0-alpha17",
54
54
  "@vaadin/testing-helpers": "^2.0.0",
55
- "@vaadin/vaadin-lumo-styles": "25.0.0-alpha15",
56
- "sinon": "^18.0.0"
55
+ "@vaadin/vaadin-lumo-styles": "25.0.0-alpha17",
56
+ "sinon": "^21.0.0"
57
57
  },
58
58
  "web-types": [
59
59
  "web-types.json",
60
60
  "web-types.lit.json"
61
61
  ],
62
- "gitHead": "1ad98437e7600769bf66f870929feefbeef16edf"
62
+ "gitHead": "8264c71309907be99368b09414f0f8d7f591e0b9"
63
63
  }
package/src/styles/vaadin-select-overlay-base-styles.js CHANGED
@@ -11,11 +11,15 @@ export const selectOverlayStyles = css`
11
11
  justify-content: flex-start;
12
12
  }
13
13
 
14
- :host(:not([phone])) [part='overlay'] {
14
+ [part='overlay'] {
15
15
  min-width: var(--vaadin-select-overlay-width, var(--_vaadin-select-overlay-default-width));
16
16
  }
17
17
 
18
18
  [part='content'] {
19
19
  padding: var(--vaadin-item-overlay-padding, 4px);
20
20
  }
21
+
22
+ [part='backdrop'] {
23
+ background: transparent;
24
+ }
21
25
  `;
package/src/vaadin-select.d.ts CHANGED
@@ -130,29 +130,35 @@ export interface SelectEventMap extends HTMLElementEventMap, SelectCustomEventMa
130
130
  * `--vaadin-field-default-width` | Default width of the field | `12em`
131
131
  * `--vaadin-select-overlay-width` | Width of the overlay |
132
132
  *
133
- * `<vaadin-select>` provides mostly the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
134
- * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
135
- *
136
- *
137
- * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
138
- *
139
- * Part name | Description
140
- * -----------------|----------------
141
- * `toggle-button` | The toggle button
142
- * `backdrop` | Backdrop of the overlay
143
- * `overlay` | The overlay container
144
- * `content` | The overlay content
145
- *
146
- * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
147
- *
148
- * Attribute | Description
149
- * ----------|-----------------------------
150
- * `opened` | Set when the select is open
151
- * `phone` | Set when the overlay is shown in phone mode
152
- *
153
- * There are two exceptions in terms of styling compared to `<vaadin-text-field>`:
154
- * - the `clear-button` shadow DOM part does not exist in `<vaadin-select>`.
155
- * - the `input-prevented` state attribute is not supported by `<vaadin-select>`.
133
+ * The following shadow DOM parts are available for styling:
134
+ *
135
+ * Part name | Description
136
+ * ---------------------|----------------
137
+ * `label` | The label element
138
+ * `input-field` | The element that wraps prefix, value and toggle button
139
+ * `error-message` | The error message element
140
+ * `helper-text` | The helper text element wrapper
141
+ * `required-indicator` | The `required` state indicator element
142
+ * `toggle-button` | The toggle button
143
+ * `backdrop` | Backdrop of the overlay
144
+ * `overlay` | The overlay container
145
+ * `content` | The overlay content
146
+ *
147
+ * The following state attributes are available for styling:
148
+ *
149
+ * Attribute | Description
150
+ * ---------------------|---------------------------------
151
+ * `disabled` | Set when the element is disabled
152
+ * `has-value` | Set when the element has a value
153
+ * `has-label` | Set when the element has a label
154
+ * `has-helper` | Set when the element has helper text or slot
155
+ * `has-error-message` | Set when the element has an error message
156
+ * `invalid` | Set when the element is invalid
157
+ * `focused` | Set when the element is focused
158
+ * `focus-ring` | Set when the element is keyboard focused
159
+ * `readonly` | Set when the element is readonly
160
+ * `opened` | Set when the overlay is opened
161
+ * `phone` | Set when the overlay is shown in phone mode
156
162
  *
157
163
  * ### Internal components
158
164
  *
package/src/vaadin-select.js CHANGED
@@ -85,29 +85,35 @@ import { SelectBaseMixin } from './vaadin-select-base-mixin.js';
85
85
  * `--vaadin-field-default-width` | Default width of the field | `12em`
86
86
  * `--vaadin-select-overlay-width` | Width of the overlay |
87
87
  *
88
- * `<vaadin-select>` provides mostly the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
89
- * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
90
- *
91
- *
92
- * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
93
- *
94
- * Part name | Description
95
- * -----------------|----------------
96
- * `toggle-button` | The toggle button
97
- * `backdrop` | Backdrop of the overlay
98
- * `overlay` | The overlay container
99
- * `content` | The overlay content
100
- *
101
- * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
102
- *
103
- * Attribute | Description
104
- * ----------|-----------------------------
105
- * `opened` | Set when the select is open
106
- * `phone` | Set when the overlay is shown in phone mode
107
- *
108
- * There are two exceptions in terms of styling compared to `<vaadin-text-field>`:
109
- * - the `clear-button` shadow DOM part does not exist in `<vaadin-select>`.
110
- * - the `input-prevented` state attribute is not supported by `<vaadin-select>`.
88
+ * The following shadow DOM parts are available for styling:
89
+ *
90
+ * Part name | Description
91
+ * ---------------------|----------------
92
+ * `label` | The label element
93
+ * `input-field` | The element that wraps prefix, value and toggle button
94
+ * `error-message` | The error message element
95
+ * `helper-text` | The helper text element wrapper
96
+ * `required-indicator` | The `required` state indicator element
97
+ * `toggle-button` | The toggle button
98
+ * `backdrop` | Backdrop of the overlay
99
+ * `overlay` | The overlay container
100
+ * `content` | The overlay content
101
+ *
102
+ * The following state attributes are available for styling:
103
+ *
104
+ * Attribute | Description
105
+ * ---------------------|---------------------------------
106
+ * `disabled` | Set when the element is disabled
107
+ * `has-value` | Set when the element has a value
108
+ * `has-label` | Set when the element has a label
109
+ * `has-helper` | Set when the element has helper text or slot
110
+ * `has-error-message` | Set when the element has an error message
111
+ * `invalid` | Set when the element is invalid
112
+ * `focused` | Set when the element is focused
113
+ * `focus-ring` | Set when the element is keyboard focused
114
+ * `readonly` | Set when the element is readonly
115
+ * `opened` | Set when the overlay is opened
116
+ * `phone` | Set when the overlay is shown in phone mode
111
117
  *
112
118
  * ### Internal components
113
119
  *
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/select",
4
- "version": "25.0.0-alpha15",
4
+ "version": "25.0.0-alpha17",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-select",
11
- "description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n---------------------------------|-----------------------------|--------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-select-overlay-width` | Width of the overlay |\n\n`<vaadin-select>` provides mostly the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha15/#/elements/vaadin-text-field) for the styling documentation.\n\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n-----------------|----------------\n`toggle-button` | The toggle button\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n----------|-----------------------------\n`opened` | Set when the select is open\n`phone` | Set when the overlay is shown in phone mode\n\nThere are two exceptions in terms of styling compared to `<vaadin-text-field>`:\n- the `clear-button` shadow DOM part does not exist in `<vaadin-select>`.\n- the `input-prevented` state attribute is not supported by `<vaadin-select>`.\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha15/#/elements/vaadin-button).\n- `<vaadin-select-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha15/#/elements/vaadin-list-box).\n- `<vaadin-select-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha15/#/elements/vaadin-item).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
11
+ "description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n---------------------------------|-----------------------------|--------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-select-overlay-width` | Width of the overlay |\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and toggle button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n`phone` | Set when the overlay is shown in phone mode\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha17/#/elements/vaadin-button).\n- `<vaadin-select-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha17/#/elements/vaadin-list-box).\n- `<vaadin-select-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha17/#/elements/vaadin-item).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "disabled",
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/select",
4
- "version": "25.0.0-alpha15",
4
+ "version": "25.0.0-alpha17",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,7 +16,7 @@
16
16
  "elements": [
17
17
  {
18
18
  "name": "vaadin-select",
19
- "description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n---------------------------------|-----------------------------|--------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-select-overlay-width` | Width of the overlay |\n\n`<vaadin-select>` provides mostly the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha15/#/elements/vaadin-text-field) for the styling documentation.\n\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n-----------------|----------------\n`toggle-button` | The toggle button\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n----------|-----------------------------\n`opened` | Set when the select is open\n`phone` | Set when the overlay is shown in phone mode\n\nThere are two exceptions in terms of styling compared to `<vaadin-text-field>`:\n- the `clear-button` shadow DOM part does not exist in `<vaadin-select>`.\n- the `input-prevented` state attribute is not supported by `<vaadin-select>`.\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha15/#/elements/vaadin-button).\n- `<vaadin-select-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha15/#/elements/vaadin-list-box).\n- `<vaadin-select-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha15/#/elements/vaadin-item).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
19
+ "description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n---------------------------------|-----------------------------|--------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-select-overlay-width` | Width of the overlay |\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and toggle button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n`phone` | Set when the overlay is shown in phone mode\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha17/#/elements/vaadin-button).\n- `<vaadin-select-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha17/#/elements/vaadin-list-box).\n- `<vaadin-select-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha17/#/elements/vaadin-item).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {