@vaadin/select 25.2.9 → 25.2.11
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.
- package/custom-elements.json +1 -1
- package/package.json +16 -16
- package/src/vaadin-select-value-button.js +1 -1
- package/src/vaadin-select.d.ts +41 -7
- package/src/vaadin-select.js +41 -7
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
package/custom-elements.json
CHANGED
|
@@ -1034,7 +1034,7 @@
|
|
|
1034
1034
|
"declarations": [
|
|
1035
1035
|
{
|
|
1036
1036
|
"kind": "class",
|
|
1037
|
-
"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
|
|
1037
|
+
"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 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`field-button` | Set on the 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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n| `--vaadin-item-overlay-padding` |\n| `--vaadin-select-overlay-width` |\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>`](#/elements/vaadin-button).\n- `<vaadin-select-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).\n- `<vaadin-select-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
1038
1038
|
"name": "Select",
|
|
1039
1039
|
"members": [
|
|
1040
1040
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/select",
|
|
3
|
-
"version": "25.2.
|
|
3
|
+
"version": "25.2.11",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,24 +37,24 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "~25.2.
|
|
41
|
-
"@vaadin/button": "~25.2.
|
|
42
|
-
"@vaadin/component-base": "~25.2.
|
|
43
|
-
"@vaadin/field-base": "~25.2.
|
|
44
|
-
"@vaadin/input-container": "~25.2.
|
|
45
|
-
"@vaadin/item": "~25.2.
|
|
46
|
-
"@vaadin/list-box": "~25.2.
|
|
47
|
-
"@vaadin/lit-renderer": "~25.2.
|
|
48
|
-
"@vaadin/overlay": "~25.2.
|
|
49
|
-
"@vaadin/vaadin-themable-mixin": "~25.2.
|
|
40
|
+
"@vaadin/a11y-base": "~25.2.11",
|
|
41
|
+
"@vaadin/button": "~25.2.11",
|
|
42
|
+
"@vaadin/component-base": "~25.2.11",
|
|
43
|
+
"@vaadin/field-base": "~25.2.11",
|
|
44
|
+
"@vaadin/input-container": "~25.2.11",
|
|
45
|
+
"@vaadin/item": "~25.2.11",
|
|
46
|
+
"@vaadin/list-box": "~25.2.11",
|
|
47
|
+
"@vaadin/lit-renderer": "~25.2.11",
|
|
48
|
+
"@vaadin/overlay": "~25.2.11",
|
|
49
|
+
"@vaadin/vaadin-themable-mixin": "~25.2.11",
|
|
50
50
|
"lit": "^3.0.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@vaadin/aura": "~25.2.
|
|
54
|
-
"@vaadin/chai-plugins": "~25.2.
|
|
55
|
-
"@vaadin/test-runner-commands": "~25.2.
|
|
53
|
+
"@vaadin/aura": "~25.2.11",
|
|
54
|
+
"@vaadin/chai-plugins": "~25.2.11",
|
|
55
|
+
"@vaadin/test-runner-commands": "~25.2.11",
|
|
56
56
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
57
|
-
"@vaadin/vaadin-lumo-styles": "~25.2.
|
|
57
|
+
"@vaadin/vaadin-lumo-styles": "~25.2.11",
|
|
58
58
|
"sinon": "^22.0.0"
|
|
59
59
|
},
|
|
60
60
|
"customElements": "custom-elements.json",
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"web-types.json",
|
|
63
63
|
"web-types.lit.json"
|
|
64
64
|
],
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "6b08306ffb11c5c7665b0af8050e4368e0c44a5a"
|
|
66
66
|
}
|
|
@@ -30,7 +30,7 @@ class SelectValueButton extends ButtonMixin(ThemableMixin(PolylitMixin(LumoInjec
|
|
|
30
30
|
/** @protected */
|
|
31
31
|
render() {
|
|
32
32
|
return html`
|
|
33
|
-
<div class="vaadin-button-container">
|
|
33
|
+
<div class="vaadin-button-container" role="presentation">
|
|
34
34
|
<span part="label">
|
|
35
35
|
<slot></slot>
|
|
36
36
|
</span>
|
package/src/vaadin-select.d.ts
CHANGED
|
@@ -123,13 +123,6 @@ export interface SelectEventMap extends HTMLElementEventMap, SelectCustomEventMa
|
|
|
123
123
|
*
|
|
124
124
|
* ### Styling
|
|
125
125
|
*
|
|
126
|
-
* The following custom properties are available for styling:
|
|
127
|
-
*
|
|
128
|
-
* Custom property | Description | Default
|
|
129
|
-
* ---------------------------------|-----------------------------|--------
|
|
130
|
-
* `--vaadin-field-default-width` | Default width of the field | `12em`
|
|
131
|
-
* `--vaadin-select-overlay-width` | Width of the overlay |
|
|
132
|
-
*
|
|
133
126
|
* The following shadow DOM parts are available for styling:
|
|
134
127
|
*
|
|
135
128
|
* Part name | Description
|
|
@@ -161,6 +154,47 @@ export interface SelectEventMap extends HTMLElementEventMap, SelectCustomEventMa
|
|
|
161
154
|
* `opened` | Set when the overlay is opened
|
|
162
155
|
* `phone` | Set when the overlay is shown in phone mode
|
|
163
156
|
*
|
|
157
|
+
* The following custom CSS properties are available for styling:
|
|
158
|
+
*
|
|
159
|
+
* Custom CSS property |
|
|
160
|
+
* :--------------------------------------------------|
|
|
161
|
+
* | `--vaadin-field-default-width` |
|
|
162
|
+
* | `--vaadin-input-field-background` |
|
|
163
|
+
* | `--vaadin-input-field-border-color` |
|
|
164
|
+
* | `--vaadin-input-field-border-radius` |
|
|
165
|
+
* | `--vaadin-input-field-border-width` |
|
|
166
|
+
* | `--vaadin-input-field-bottom-end-radius` |
|
|
167
|
+
* | `--vaadin-input-field-bottom-start-radius` |
|
|
168
|
+
* | `--vaadin-input-field-button-text-color` |
|
|
169
|
+
* | `--vaadin-input-field-container-gap` |
|
|
170
|
+
* | `--vaadin-input-field-disabled-background` |
|
|
171
|
+
* | `--vaadin-input-field-disabled-text-color` |
|
|
172
|
+
* | `--vaadin-input-field-error-color` |
|
|
173
|
+
* | `--vaadin-input-field-error-font-size` |
|
|
174
|
+
* | `--vaadin-input-field-error-font-weight` |
|
|
175
|
+
* | `--vaadin-input-field-error-line-height` |
|
|
176
|
+
* | `--vaadin-input-field-gap` |
|
|
177
|
+
* | `--vaadin-input-field-helper-color` |
|
|
178
|
+
* | `--vaadin-input-field-helper-font-size` |
|
|
179
|
+
* | `--vaadin-input-field-helper-font-weight` |
|
|
180
|
+
* | `--vaadin-input-field-helper-line-height` |
|
|
181
|
+
* | `--vaadin-input-field-label-color` |
|
|
182
|
+
* | `--vaadin-input-field-label-font-size` |
|
|
183
|
+
* | `--vaadin-input-field-label-font-weight` |
|
|
184
|
+
* | `--vaadin-input-field-label-line-height` |
|
|
185
|
+
* | `--vaadin-input-field-padding` |
|
|
186
|
+
* | `--vaadin-input-field-placeholder-color` |
|
|
187
|
+
* | `--vaadin-input-field-required-indicator` |
|
|
188
|
+
* | `--vaadin-input-field-required-indicator-color` |
|
|
189
|
+
* | `--vaadin-input-field-top-end-radius` |
|
|
190
|
+
* | `--vaadin-input-field-top-start-radius` |
|
|
191
|
+
* | `--vaadin-input-field-value-color` |
|
|
192
|
+
* | `--vaadin-input-field-value-font-size` |
|
|
193
|
+
* | `--vaadin-input-field-value-font-weight` |
|
|
194
|
+
* | `--vaadin-input-field-value-line-height` |
|
|
195
|
+
* | `--vaadin-item-overlay-padding` |
|
|
196
|
+
* | `--vaadin-select-overlay-width` |
|
|
197
|
+
*
|
|
164
198
|
* ### Internal components
|
|
165
199
|
*
|
|
166
200
|
* In addition to `<vaadin-select>` itself, the following internal
|
package/src/vaadin-select.js
CHANGED
|
@@ -79,13 +79,6 @@ import { SelectBaseMixin } from './vaadin-select-base-mixin.js';
|
|
|
79
79
|
*
|
|
80
80
|
* ### Styling
|
|
81
81
|
*
|
|
82
|
-
* The following custom properties are available for styling:
|
|
83
|
-
*
|
|
84
|
-
* Custom property | Description | Default
|
|
85
|
-
* ---------------------------------|-----------------------------|--------
|
|
86
|
-
* `--vaadin-field-default-width` | Default width of the field | `12em`
|
|
87
|
-
* `--vaadin-select-overlay-width` | Width of the overlay |
|
|
88
|
-
*
|
|
89
82
|
* The following shadow DOM parts are available for styling:
|
|
90
83
|
*
|
|
91
84
|
* Part name | Description
|
|
@@ -117,6 +110,47 @@ import { SelectBaseMixin } from './vaadin-select-base-mixin.js';
|
|
|
117
110
|
* `opened` | Set when the overlay is opened
|
|
118
111
|
* `phone` | Set when the overlay is shown in phone mode
|
|
119
112
|
*
|
|
113
|
+
* The following custom CSS properties are available for styling:
|
|
114
|
+
*
|
|
115
|
+
* Custom CSS property |
|
|
116
|
+
* :--------------------------------------------------|
|
|
117
|
+
* | `--vaadin-field-default-width` |
|
|
118
|
+
* | `--vaadin-input-field-background` |
|
|
119
|
+
* | `--vaadin-input-field-border-color` |
|
|
120
|
+
* | `--vaadin-input-field-border-radius` |
|
|
121
|
+
* | `--vaadin-input-field-border-width` |
|
|
122
|
+
* | `--vaadin-input-field-bottom-end-radius` |
|
|
123
|
+
* | `--vaadin-input-field-bottom-start-radius` |
|
|
124
|
+
* | `--vaadin-input-field-button-text-color` |
|
|
125
|
+
* | `--vaadin-input-field-container-gap` |
|
|
126
|
+
* | `--vaadin-input-field-disabled-background` |
|
|
127
|
+
* | `--vaadin-input-field-disabled-text-color` |
|
|
128
|
+
* | `--vaadin-input-field-error-color` |
|
|
129
|
+
* | `--vaadin-input-field-error-font-size` |
|
|
130
|
+
* | `--vaadin-input-field-error-font-weight` |
|
|
131
|
+
* | `--vaadin-input-field-error-line-height` |
|
|
132
|
+
* | `--vaadin-input-field-gap` |
|
|
133
|
+
* | `--vaadin-input-field-helper-color` |
|
|
134
|
+
* | `--vaadin-input-field-helper-font-size` |
|
|
135
|
+
* | `--vaadin-input-field-helper-font-weight` |
|
|
136
|
+
* | `--vaadin-input-field-helper-line-height` |
|
|
137
|
+
* | `--vaadin-input-field-label-color` |
|
|
138
|
+
* | `--vaadin-input-field-label-font-size` |
|
|
139
|
+
* | `--vaadin-input-field-label-font-weight` |
|
|
140
|
+
* | `--vaadin-input-field-label-line-height` |
|
|
141
|
+
* | `--vaadin-input-field-padding` |
|
|
142
|
+
* | `--vaadin-input-field-placeholder-color` |
|
|
143
|
+
* | `--vaadin-input-field-required-indicator` |
|
|
144
|
+
* | `--vaadin-input-field-required-indicator-color` |
|
|
145
|
+
* | `--vaadin-input-field-top-end-radius` |
|
|
146
|
+
* | `--vaadin-input-field-top-start-radius` |
|
|
147
|
+
* | `--vaadin-input-field-value-color` |
|
|
148
|
+
* | `--vaadin-input-field-value-font-size` |
|
|
149
|
+
* | `--vaadin-input-field-value-font-weight` |
|
|
150
|
+
* | `--vaadin-input-field-value-line-height` |
|
|
151
|
+
* | `--vaadin-item-overlay-padding` |
|
|
152
|
+
* | `--vaadin-select-overlay-width` |
|
|
153
|
+
*
|
|
120
154
|
* ### Internal components
|
|
121
155
|
*
|
|
122
156
|
* In addition to `<vaadin-select>` itself, the following internal
|
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.2.
|
|
4
|
+
"version": "25.2.11",
|
|
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
|
|
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 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`field-button` | Set on the 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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n| `--vaadin-item-overlay-padding` |\n| `--vaadin-select-overlay-width` |\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.2.11/#/elements/vaadin-button).\n- `<vaadin-select-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.2.11/#/elements/vaadin-list-box).\n- `<vaadin-select-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.2.11/#/elements/vaadin-item).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "accessible-name",
|
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.2.
|
|
4
|
+
"version": "25.2.11",
|
|
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
|
|
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 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`field-button` | Set on the 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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n| `--vaadin-item-overlay-padding` |\n| `--vaadin-select-overlay-width` |\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.2.11/#/elements/vaadin-button).\n- `<vaadin-select-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.2.11/#/elements/vaadin-list-box).\n- `<vaadin-select-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.2.11/#/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
|
{
|