@vaadin/select - npm Package Compare versions

Comparing version 24.3.12 to 24.3.13

package.json

 {
   "name": "@vaadin/select",
-  "version": "24.3.12",
+  "version": "24.3.13",
   "publishConfig": {
@@ -42,14 +42,14 @@ "access": "public"
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/a11y-base": "~24.3.12",
-    "@vaadin/button": "~24.3.12",
-    "@vaadin/component-base": "~24.3.12",
-    "@vaadin/field-base": "~24.3.12",
-    "@vaadin/input-container": "~24.3.12",
-    "@vaadin/item": "~24.3.12",
-    "@vaadin/list-box": "~24.3.12",
-    "@vaadin/lit-renderer": "~24.3.12",
-    "@vaadin/overlay": "~24.3.12",
-    "@vaadin/vaadin-lumo-styles": "~24.3.12",
-    "@vaadin/vaadin-material-styles": "~24.3.12",
-    "@vaadin/vaadin-themable-mixin": "~24.3.12"
+    "@vaadin/a11y-base": "~24.3.13",
+    "@vaadin/button": "~24.3.13",
+    "@vaadin/component-base": "~24.3.13",
+    "@vaadin/field-base": "~24.3.13",
+    "@vaadin/input-container": "~24.3.13",
+    "@vaadin/item": "~24.3.13",
+    "@vaadin/list-box": "~24.3.13",
+    "@vaadin/lit-renderer": "~24.3.13",
+    "@vaadin/overlay": "~24.3.13",
+    "@vaadin/vaadin-lumo-styles": "~24.3.13",
+    "@vaadin/vaadin-material-styles": "~24.3.13",
+    "@vaadin/vaadin-themable-mixin": "~24.3.13"
   },
@@ -66,3 +66,3 @@ "devDependencies": {
   ],
-  "gitHead": "280d0a3d666df88b3ccaf7496e5561f45dbbbd61"
+  "gitHead": "a9551e4fcc8b6f2695a2d3099670a9d0729f2c62"
 }

web-types.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/select",
-  "version": "24.3.12",
+  "version": "24.3.13",
   "description-markup": "markdown",
@@ -11,3 +11,3 @@ "contributions": {
           "name": "vaadin-select",
-          "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                  | Target element          | Default\n-----------------------------------|------------------------------|----------------------------------\n`--vaadin-field-default-width`     | Default width of the field   | :host                   | `12em`\n`--vaadin-select-text-field-width` | Effective width of the field | `vaadin-select-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/24.3.12/#/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\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description                 | Part name\n----------|-----------------------------|-----------\n`opened`  | Set when the select is open | :host\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-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.3.12/#/elements/vaadin-overlay).\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.3.12/#/elements/vaadin-button).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.3.12/#/elements/vaadin-input-container) - an internal element wrapping the button.\n\nNote: the `theme` attribute value set on `<vaadin-select>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "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                  | Target element          | Default\n-----------------------------------|------------------------------|----------------------------------\n`--vaadin-field-default-width`     | Default width of the field   | :host                   | `12em`\n`--vaadin-select-text-field-width` | Effective width of the field | `vaadin-select-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/24.3.13/#/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\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description                 | Part name\n----------|-----------------------------|-----------\n`opened`  | Set when the select is open | :host\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-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.3.13/#/elements/vaadin-overlay).\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.3.13/#/elements/vaadin-button).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.3.13/#/elements/vaadin-input-container) - an internal element wrapping the button.\n\nNote: the `theme` attribute value set on `<vaadin-select>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
@@ -14,0 +14,0 @@ {

web-types.lit.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/select",
-  "version": "24.3.12",
+  "version": "24.3.13",
   "description-markup": "markdown",
@@ -19,3 +19,3 @@ "framework": "lit",
           "name": "vaadin-select",
-          "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                  | Target element          | Default\n-----------------------------------|------------------------------|----------------------------------\n`--vaadin-field-default-width`     | Default width of the field   | :host                   | `12em`\n`--vaadin-select-text-field-width` | Effective width of the field | `vaadin-select-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/24.3.12/#/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\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description                 | Part name\n----------|-----------------------------|-----------\n`opened`  | Set when the select is open | :host\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-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.3.12/#/elements/vaadin-overlay).\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.3.12/#/elements/vaadin-button).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.3.12/#/elements/vaadin-input-container) - an internal element wrapping the button.\n\nNote: the `theme` attribute value set on `<vaadin-select>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "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                  | Target element          | Default\n-----------------------------------|------------------------------|----------------------------------\n`--vaadin-field-default-width`     | Default width of the field   | :host                   | `12em`\n`--vaadin-select-text-field-width` | Effective width of the field | `vaadin-select-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/24.3.13/#/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\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description                 | Part name\n----------|-----------------------------|-----------\n`opened`  | Set when the select is open | :host\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-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.3.13/#/elements/vaadin-overlay).\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.3.13/#/elements/vaadin-button).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.3.13/#/elements/vaadin-input-container) - an internal element wrapping the button.\n\nNote: the `theme` attribute value set on `<vaadin-select>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
@@ -22,0 +22,0 @@ "attributes": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No metric changes

Dependency changes

• Updated@vaadin/a11y-base@~24.3.13

• Updated@vaadin/button@~24.3.13

• Updated@vaadin/component-base@~24.3.13

• Updated@vaadin/field-base@~24.3.13

• Updated@vaadin/input-container@~24.3.13

• Updated@vaadin/item@~24.3.13

• Updated@vaadin/list-box@~24.3.13

• Updated@vaadin/lit-renderer@~24.3.13

• Updated@vaadin/overlay@~24.3.13

• Updated@vaadin/vaadin-lumo-styles@~24.3.13

• Updated@vaadin/vaadin-material-styles@~24.3.13

• Updated@vaadin/vaadin-themable-mixin@~24.3.13