@vaadin/combo-box 25.3.0-alpha10 → 25.3.0-alpha12

package/custom-elements.json

@@ -453,6 +453,16 @@
           "description": "",
           "name": "ComboBoxItemsMixin",
           "members": [
+            {
+              "kind": "field",
+              "name": "autoFocusPartialMatch",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Controls whether an item whose label partially matches the typed\nfilter is automatically focused. The focused item is highlighted\nin the dropdown while typing and is selected when committing the\nvalue, for example on Enter press:\n\n- `none` (default): do not focus partial matches.\n- `first-match`: focus the first item in the filtered results.\n- `only-match`: focus the item when filtering narrows the results to a single item.\n\nAn item whose label matches the filter exactly is always focused,\nregardless of this property. Matching is case-insensitive. A partial\nmatch is not focused when `allowCustomValue` is enabled, or while\nthe dropdown is closed. For example, with `autoOpenDisabled`, typing\ndoes not focus or select a match until the dropdown is opened.",
+              "attribute": "auto-focus-partial-match"
+            },
             {
               "kind": "field",
               "name": "autoOpenDisabled",
@@ -612,6 +622,14 @@
             }
           ],
           "attributes": [
+            {
+              "name": "auto-focus-partial-match",
+              "type": {
+                "text": "string"
+              },
+              "description": "Controls whether an item whose label partially matches the typed\nfilter is automatically focused. The focused item is highlighted\nin the dropdown while typing and is selected when committing the\nvalue, for example on Enter press:\n\n- `none` (default): do not focus partial matches.\n- `first-match`: focus the first item in the filtered results.\n- `only-match`: focus the item when filtering narrows the results to a single item.\n\nAn item whose label matches the filter exactly is always focused,\nregardless of this property. Matching is case-insensitive. A partial\nmatch is not focused when `allowCustomValue` is enabled, or while\nthe dropdown is closed. For example, with `autoOpenDisabled`, typing\ndoes not focus or select a match until the dropdown is opened.",
+              "fieldName": "autoFocusPartialMatch"
+            },
             {
               "name": "auto-open-disabled",
               "type": {
@@ -740,6 +758,20 @@
               "description": "If `true`, the user can input a value that is not present in the items list.\n`value` property will be set to the input value in this case.\nAlso, when `value` is set programmatically, the input value will be set\nto reflect that value.",
               "attribute": "allow-custom-value"
             },
+            {
+              "kind": "field",
+              "name": "autoFocusPartialMatch",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Controls whether an item whose label partially matches the typed\nfilter is automatically focused. The focused item is highlighted\nin the dropdown while typing and is selected when committing the\nvalue, for example on Enter press:\n\n- `none` (default): do not focus partial matches.\n- `first-match`: focus the first item in the filtered results.\n- `only-match`: focus the item when filtering narrows the results to a single item.\n\nAn item whose label matches the filter exactly is always focused,\nregardless of this property. Matching is case-insensitive. A partial\nmatch is not focused when `allowCustomValue` is enabled, or while\nthe dropdown is closed. For example, with `autoOpenDisabled`, typing\ndoes not focus or select a match until the dropdown is opened.",
+              "attribute": "auto-focus-partial-match",
+              "inheritedFrom": {
+                "name": "ComboBoxItemsMixin",
+                "module": "src/vaadin-combo-box-items-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "autoOpenDisabled",
@@ -1091,6 +1123,18 @@
               "description": "If `true`, the user can input a value that is not present in the items list.\n`value` property will be set to the input value in this case.\nAlso, when `value` is set programmatically, the input value will be set\nto reflect that value.",
               "fieldName": "allowCustomValue"
             },
+            {
+              "name": "auto-focus-partial-match",
+              "type": {
+                "text": "string"
+              },
+              "description": "Controls whether an item whose label partially matches the typed\nfilter is automatically focused. The focused item is highlighted\nin the dropdown while typing and is selected when committing the\nvalue, for example on Enter press:\n\n- `none` (default): do not focus partial matches.\n- `first-match`: focus the first item in the filtered results.\n- `only-match`: focus the item when filtering narrows the results to a single item.\n\nAn item whose label matches the filter exactly is always focused,\nregardless of this property. Matching is case-insensitive. A partial\nmatch is not focused when `allowCustomValue` is enabled, or while\nthe dropdown is closed. For example, with `autoOpenDisabled`, typing\ndoes not focus or select a match until the dropdown is opened.",
+              "fieldName": "autoFocusPartialMatch",
+              "inheritedFrom": {
+                "name": "ComboBoxItemsMixin",
+                "module": "src/vaadin-combo-box-items-mixin.js"
+              }
+            },
             {
               "name": "auto-open-disabled",
               "type": {
@@ -1807,6 +1851,20 @@
                 "package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "autoFocusPartialMatch",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Controls whether an item whose label partially matches the typed\nfilter is automatically focused. The focused item is highlighted\nin the dropdown while typing and is selected when committing the\nvalue, for example on Enter press:\n\n- `none` (default): do not focus partial matches.\n- `first-match`: focus the first item in the filtered results.\n- `only-match`: focus the item when filtering narrows the results to a single item.\n\nAn item whose label matches the filter exactly is always focused,\nregardless of this property. Matching is case-insensitive. A partial\nmatch is not focused when `allowCustomValue` is enabled, or while\nthe dropdown is closed. For example, with `autoOpenDisabled`, typing\ndoes not focus or select a match until the dropdown is opened.",
+              "attribute": "auto-focus-partial-match",
+              "inheritedFrom": {
+                "name": "ComboBoxItemsMixin",
+                "module": "src/vaadin-combo-box-items-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "autoOpenDisabled",
@@ -2473,6 +2531,18 @@
                 "package": "@vaadin/field-base/src/input-control-mixin.js"
               }
             },
+            {
+              "name": "auto-focus-partial-match",
+              "type": {
+                "text": "string"
+              },
+              "description": "Controls whether an item whose label partially matches the typed\nfilter is automatically focused. The focused item is highlighted\nin the dropdown while typing and is selected when committing the\nvalue, for example on Enter press:\n\n- `none` (default): do not focus partial matches.\n- `first-match`: focus the first item in the filtered results.\n- `only-match`: focus the item when filtering narrows the results to a single item.\n\nAn item whose label matches the filter exactly is always focused,\nregardless of this property. Matching is case-insensitive. A partial\nmatch is not focused when `allowCustomValue` is enabled, or while\nthe dropdown is closed. For example, with `autoOpenDisabled`, typing\ndoes not focus or select a match until the dropdown is opened.",
+              "fieldName": "autoFocusPartialMatch",
+              "inheritedFrom": {
+                "name": "ComboBoxItemsMixin",
+                "module": "src/vaadin-combo-box-items-mixin.js"
+              }
+            },
             {
               "name": "auto-open-disabled",
               "type": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "25.3.0-alpha10",
+  "version": "25.3.0-alpha12",
   "publishConfig": {
     "access": "public"
   },
@@ -36,22 +36,22 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.3.0-alpha10",
-    "@vaadin/component-base": "25.3.0-alpha10",
-    "@vaadin/field-base": "25.3.0-alpha10",
-    "@vaadin/input-container": "25.3.0-alpha10",
-    "@vaadin/item": "25.3.0-alpha10",
-    "@vaadin/lit-renderer": "25.3.0-alpha10",
-    "@vaadin/overlay": "25.3.0-alpha10",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha10",
+    "@vaadin/a11y-base": "25.3.0-alpha12",
+    "@vaadin/component-base": "25.3.0-alpha12",
+    "@vaadin/field-base": "25.3.0-alpha12",
+    "@vaadin/input-container": "25.3.0-alpha12",
+    "@vaadin/item": "25.3.0-alpha12",
+    "@vaadin/lit-renderer": "25.3.0-alpha12",
+    "@vaadin/overlay": "25.3.0-alpha12",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha12",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.3.0-alpha10",
-    "@vaadin/chai-plugins": "25.3.0-alpha10",
-    "@vaadin/test-runner-commands": "25.3.0-alpha10",
+    "@vaadin/aura": "25.3.0-alpha12",
+    "@vaadin/chai-plugins": "25.3.0-alpha12",
+    "@vaadin/test-runner-commands": "25.3.0-alpha12",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha12",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -59,5 +59,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "f2833abdf9b613fa0d0ed216830e3f4de87b7dac"
+  "gitHead": "0f0337783efe38332f5dc6a8968f207d2982de4b"
 }

package/src/vaadin-combo-box-focus-index-mixin.js

@@ -24,6 +24,11 @@ export const ComboBoxFocusIndexMixin = (superClass) =>
         return;
       }
 
+      // Ignore while a filter is active, keep the dropdown at the first match.
+      if (this.filter) {
+        return;
+      }
+
       // Defer until the dropdown is open and the items array has been
       // populated. `_onOpened` and `__onDataProviderPageLoaded` re-fire
       // the queued call once those conditions hold.

package/src/vaadin-combo-box-items-mixin.d.ts

@@ -6,11 +6,33 @@
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { ComboBoxBaseMixinClass } from './vaadin-combo-box-base-mixin.js';
 
+export type ComboBoxAutoFocusPartialMatch = 'first-match' | 'none' | 'only-match';
+
 export declare function ComboBoxItemsMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<ComboBoxBaseMixinClass> & Constructor<ComboBoxItemsMixinClass<TItem>> & T;
 
 export declare class ComboBoxItemsMixinClass<TItem> {
+  /**
+   * Controls whether an item whose label partially matches the typed
+   * filter is automatically focused. The focused item is highlighted
+   * in the dropdown while typing and is selected when committing the
+   * value, for example on Enter press:
+   *
+   * - `none` (default): do not focus partial matches.
+   * - `first-match`: focus the first item in the filtered results.
+   * - `only-match`: focus the item when filtering narrows the results to a single item.
+   *
+   * An item whose label matches the filter exactly is always focused,
+   * regardless of this property. Matching is case-insensitive. A partial
+   * match is not focused when `allowCustomValue` is enabled, or while
+   * the dropdown is closed. For example, with `autoOpenDisabled`, typing
+   * does not focus or select a match until the dropdown is opened.
+   *
+   * @attr {none|first-match|only-match} auto-focus-partial-match
+   */
+  autoFocusPartialMatch: ComboBoxAutoFocusPartialMatch;
+
   /**
    * A full set of items to filter the visible options from.
    * The items can be of either `String` or `Object` type.

package/src/vaadin-combo-box-items-mixin.js

@@ -62,6 +62,29 @@ export const ComboBoxItemsMixin = (superClass) =>
           sync: true,
         },
 
+        /**
+         * Controls whether an item whose label partially matches the typed
+         * filter is automatically focused. The focused item is highlighted
+         * in the dropdown while typing and is selected when committing the
+         * value, for example on Enter press:
+         *
+         * - `none` (default): do not focus partial matches.
+         * - `first-match`: focus the first item in the filtered results.
+         * - `only-match`: focus the item when filtering narrows the results to a single item.
+         *
+         * An item whose label matches the filter exactly is always focused,
+         * regardless of this property. Matching is case-insensitive. A partial
+         * match is not focused when `allowCustomValue` is enabled, or while
+         * the dropdown is closed. For example, with `autoOpenDisabled`, typing
+         * does not focus or select a match until the dropdown is opened.
+         *
+         * @attr {none|first-match|only-match} auto-focus-partial-match
+         */
+        autoFocusPartialMatch: {
+          type: String,
+          value: 'none',
+        },
+
         /**
          * Filtering string the user has typed into the input field.
          */
@@ -161,6 +184,22 @@ export const ComboBoxItemsMixin = (superClass) =>
       this.setProperties(props);
     }
 
+    /**
+     * Override method from `ComboBoxBaseMixin` to focus the item matching
+     * the filter when the dropdown is opened after typing, which is possible
+     * when `autoOpenDisabled` is enabled.
+     *
+     * @protected
+     * @override
+     */
+    _onOpened() {
+      super._onOpened();
+
+      if (this.filter && this._focusedIndex === -1) {
+        this._focusedIndex = this.__getItemIndexByFilter(this._dropdownItems);
+      }
+    }
+
     /**
      * Override method from `ComboBoxBaseMixin` to handle item label path.
      * @protected
@@ -282,4 +321,28 @@ export const ComboBoxItemsMixin = (superClass) =>
         return this._getItemLabel(item).toString().toLowerCase() === label.toString().toLowerCase();
       });
     }
+
+    /** @private */
+    __getItemIndexByFilter(items) {
+      // An item whose label matches the filter exactly takes precedence.
+      const exactMatchIndex = this.__getItemIndexByLabel(items, this.filter);
+      if (exactMatchIndex > -1) {
+        return exactMatchIndex;
+      }
+
+      if (!this.opened || !items || items.length === 0 || !this.filter || this.allowCustomValue) {
+        return -1;
+      }
+
+      if (
+        this.autoFocusPartialMatch === 'first-match' ||
+        (this.autoFocusPartialMatch === 'only-match' && items.length === 1)
+      ) {
+        // Skip an item that is not yet loaded. Once the item is loaded,
+        // the focused index is updated again.
+        return items[0] instanceof ComboBoxPlaceholder ? -1 : 0;
+      }
+
+      return -1;
+    }
   };

package/src/vaadin-combo-box-mixin.js

@@ -281,6 +281,8 @@ export const ComboBoxMixin = (superClass) =>
      * @override
      */
     _onOpened() {
+      super._onOpened();
+
       this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-opened', { bubbles: true, composed: true }));
 
       // _detectAndDispatchChange() should not consider value changes done before opening
@@ -542,7 +544,7 @@ export const ComboBoxMixin = (superClass) =>
       } else {
         // When the user filled in something that is different from the current value = filtering is enabled,
         // set the focused index to the item that matches the filter query.
-        this._focusedIndex = this.__getItemIndexByLabel(newItems, this.filter);
+        this._focusedIndex = this.__getItemIndexByFilter(newItems);
       }
     }
 

package/src/vaadin-combo-box.d.ts

@@ -30,6 +30,7 @@ export {
   ComboBoxDataProviderCallback,
   ComboBoxDataProviderParams,
 } from './vaadin-combo-box-data-provider-mixin.js';
+export { ComboBoxAutoFocusPartialMatch } from './vaadin-combo-box-items-mixin.js';
 export { ComboBoxDefaultItem, ComboBoxItemModel, ComboBoxRenderer } from './vaadin-combo-box-mixin.js';
 
 /**

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/combo-box",
-  "version": "25.3.0-alpha10",
+  "version": "25.3.0-alpha12",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-combo-box",
-          "description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-combo-box#property-items) property on the element.\n\n```html\n<vaadin-combo-box id=\"combo-box\"></vaadin-combo-box>\n```\n```js\ndocument.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Item rendering\n\nTo customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use\n[`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-combo-box#property-renderer) property which accepts a function.\nThe renderer function is called with `root`, `comboBox`, and `model` as arguments.\n\nGenerate DOM content by using `model` object properties if needed, and append it to the `root`\nelement. The `comboBox` reference is provided to access the combo-box element state. Do not\nset combo-box properties in a `renderer` function.\n\n```js\nconst comboBox = document.querySelector('#combo-box');\ncomboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];\ncomboBox.renderer = (root, comboBox, model) => {\n  const item = model.item;\n  root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;\n};\n```\n\nRenderer is called on the opening of the combo-box and each time the related model is updated.\nBefore creating new content, it is recommended to check if there is already an existing DOM\nelement in `root` from a previous renderer call for reusing it. Even though combo-box uses\ninfinite scrolling, reducing DOM operations might improve performance.\n\nThe following properties are available in the `model` argument:\n\nProperty   | 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### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively use the\n[`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-combo-box#property-dataProvider) function property.\nThe `<vaadin-combo-box>` calls this function lazily, only when it needs more data\nto be displayed.\n\n__Note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```js\ncomboBox.dataProvider = async (params, callback) => {\n  const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';\n  const { filter, page, pageSize } = params;\n  const index = page * pageSize;\n\n  const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);\n  if (res.ok) {\n    const { result, size } = await res.json();\n    callback(result, size);\n  }\n};\n```\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-combo-box-overlay-width`      | Width of the overlay       | `auto`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`\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 buttons\n`field-button`       | Set on both clear and toggle buttons\n`clear-button`       | The clear 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`overlay`            | The overlay container\n`content`            | The overlay content\n`loader`             | The loading indicator shown while loading items\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`has-tooltip`        | Set when the element has a slotted tooltip\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`loading`            | Set when loading items from the data provider\n\n### Internal components\n\nIn addition to `<vaadin-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-item).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha12/#/elements/vaadin-combo-box#property-items) property on the element.\n\n```html\n<vaadin-combo-box id=\"combo-box\"></vaadin-combo-box>\n```\n```js\ndocument.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Item rendering\n\nTo customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use\n[`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha12/#/elements/vaadin-combo-box#property-renderer) property which accepts a function.\nThe renderer function is called with `root`, `comboBox`, and `model` as arguments.\n\nGenerate DOM content by using `model` object properties if needed, and append it to the `root`\nelement. The `comboBox` reference is provided to access the combo-box element state. Do not\nset combo-box properties in a `renderer` function.\n\n```js\nconst comboBox = document.querySelector('#combo-box');\ncomboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];\ncomboBox.renderer = (root, comboBox, model) => {\n  const item = model.item;\n  root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;\n};\n```\n\nRenderer is called on the opening of the combo-box and each time the related model is updated.\nBefore creating new content, it is recommended to check if there is already an existing DOM\nelement in `root` from a previous renderer call for reusing it. Even though combo-box uses\ninfinite scrolling, reducing DOM operations might improve performance.\n\nThe following properties are available in the `model` argument:\n\nProperty   | 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### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively use the\n[`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha12/#/elements/vaadin-combo-box#property-dataProvider) function property.\nThe `<vaadin-combo-box>` calls this function lazily, only when it needs more data\nto be displayed.\n\n__Note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```js\ncomboBox.dataProvider = async (params, callback) => {\n  const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';\n  const { filter, page, pageSize } = params;\n  const index = page * pageSize;\n\n  const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);\n  if (res.ok) {\n    const { result, size } = await res.json();\n    callback(result, size);\n  }\n};\n```\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-combo-box-overlay-width`      | Width of the overlay       | `auto`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`\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 buttons\n`field-button`       | Set on both clear and toggle buttons\n`clear-button`       | The clear 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`overlay`            | The overlay container\n`content`            | The overlay content\n`loader`             | The loading indicator shown while loading items\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`has-tooltip`        | Set when the element has a slotted tooltip\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`loading`            | Set when loading items from the data provider\n\n### Internal components\n\nIn addition to `<vaadin-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha12/#/elements/vaadin-item).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "accessible-description-ref",
@@ -55,6 +55,15 @@
                 ]
               }
             },
+            {
+              "name": "auto-focus-partial-match",
+              "description": "Controls whether an item whose label partially matches the typed\nfilter is automatically focused. The focused item is highlighted\nin the dropdown while typing and is selected when committing the\nvalue, for example on Enter press:\n\n- `none` (default): do not focus partial matches.\n- `first-match`: focus the first item in the filtered results.\n- `only-match`: focus the item when filtering narrows the results to a single item.\n\nAn item whose label matches the filter exactly is always focused,\nregardless of this property. Matching is case-insensitive. A partial\nmatch is not focused when `allowCustomValue` is enabled, or while\nthe dropdown is closed. For example, with `autoOpenDisabled`, typing\ndoes not focus or select a match until the dropdown is opened.",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
             {
               "name": "auto-open-disabled",
               "description": "Set true to prevent the overlay from opening automatically.",
@@ -346,6 +355,15 @@
                   ]
                 }
               },
+              {
+                "name": "autoFocusPartialMatch",
+                "description": "Controls whether an item whose label partially matches the typed\nfilter is automatically focused. The focused item is highlighted\nin the dropdown while typing and is selected when committing the\nvalue, for example on Enter press:\n\n- `none` (default): do not focus partial matches.\n- `first-match`: focus the first item in the filtered results.\n- `only-match`: focus the item when filtering narrows the results to a single item.\n\nAn item whose label matches the filter exactly is always focused,\nregardless of this property. Matching is case-insensitive. A partial\nmatch is not focused when `allowCustomValue` is enabled, or while\nthe dropdown is closed. For example, with `autoOpenDisabled`, typing\ndoes not focus or select a match until the dropdown is opened.",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
               {
                 "name": "autoOpenDisabled",
                 "description": "Set true to prevent the overlay from opening automatically.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/combo-box",
-  "version": "25.3.0-alpha10",
+  "version": "25.3.0-alpha12",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-combo-box",
-          "description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-combo-box#property-items) property on the element.\n\n```html\n<vaadin-combo-box id=\"combo-box\"></vaadin-combo-box>\n```\n```js\ndocument.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Item rendering\n\nTo customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use\n[`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-combo-box#property-renderer) property which accepts a function.\nThe renderer function is called with `root`, `comboBox`, and `model` as arguments.\n\nGenerate DOM content by using `model` object properties if needed, and append it to the `root`\nelement. The `comboBox` reference is provided to access the combo-box element state. Do not\nset combo-box properties in a `renderer` function.\n\n```js\nconst comboBox = document.querySelector('#combo-box');\ncomboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];\ncomboBox.renderer = (root, comboBox, model) => {\n  const item = model.item;\n  root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;\n};\n```\n\nRenderer is called on the opening of the combo-box and each time the related model is updated.\nBefore creating new content, it is recommended to check if there is already an existing DOM\nelement in `root` from a previous renderer call for reusing it. Even though combo-box uses\ninfinite scrolling, reducing DOM operations might improve performance.\n\nThe following properties are available in the `model` argument:\n\nProperty   | 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### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively use the\n[`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-combo-box#property-dataProvider) function property.\nThe `<vaadin-combo-box>` calls this function lazily, only when it needs more data\nto be displayed.\n\n__Note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```js\ncomboBox.dataProvider = async (params, callback) => {\n  const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';\n  const { filter, page, pageSize } = params;\n  const index = page * pageSize;\n\n  const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);\n  if (res.ok) {\n    const { result, size } = await res.json();\n    callback(result, size);\n  }\n};\n```\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-combo-box-overlay-width`      | Width of the overlay       | `auto`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`\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 buttons\n`field-button`       | Set on both clear and toggle buttons\n`clear-button`       | The clear 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`overlay`            | The overlay container\n`content`            | The overlay content\n`loader`             | The loading indicator shown while loading items\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`has-tooltip`        | Set when the element has a slotted tooltip\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`loading`            | Set when loading items from the data provider\n\n### Internal components\n\nIn addition to `<vaadin-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-item).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha12/#/elements/vaadin-combo-box#property-items) property on the element.\n\n```html\n<vaadin-combo-box id=\"combo-box\"></vaadin-combo-box>\n```\n```js\ndocument.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Item rendering\n\nTo customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use\n[`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha12/#/elements/vaadin-combo-box#property-renderer) property which accepts a function.\nThe renderer function is called with `root`, `comboBox`, and `model` as arguments.\n\nGenerate DOM content by using `model` object properties if needed, and append it to the `root`\nelement. The `comboBox` reference is provided to access the combo-box element state. Do not\nset combo-box properties in a `renderer` function.\n\n```js\nconst comboBox = document.querySelector('#combo-box');\ncomboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];\ncomboBox.renderer = (root, comboBox, model) => {\n  const item = model.item;\n  root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;\n};\n```\n\nRenderer is called on the opening of the combo-box and each time the related model is updated.\nBefore creating new content, it is recommended to check if there is already an existing DOM\nelement in `root` from a previous renderer call for reusing it. Even though combo-box uses\ninfinite scrolling, reducing DOM operations might improve performance.\n\nThe following properties are available in the `model` argument:\n\nProperty   | 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### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively use the\n[`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha12/#/elements/vaadin-combo-box#property-dataProvider) function property.\nThe `<vaadin-combo-box>` calls this function lazily, only when it needs more data\nto be displayed.\n\n__Note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```js\ncomboBox.dataProvider = async (params, callback) => {\n  const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';\n  const { filter, page, pageSize } = params;\n  const index = page * pageSize;\n\n  const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);\n  if (res.ok) {\n    const { result, size } = await res.json();\n    callback(result, size);\n  }\n};\n```\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-combo-box-overlay-width`      | Width of the overlay       | `auto`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`\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 buttons\n`field-button`       | Set on both clear and toggle buttons\n`clear-button`       | The clear 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`overlay`            | The overlay container\n`content`            | The overlay content\n`loader`             | The loading indicator shown while loading items\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`has-tooltip`        | Set when the element has a slotted tooltip\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`loading`            | Set when loading items from the data provider\n\n### Internal components\n\nIn addition to `<vaadin-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha12/#/elements/vaadin-item).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -61,6 +61,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".autoFocusPartialMatch",
+              "description": "Controls whether an item whose label partially matches the typed\nfilter is automatically focused. The focused item is highlighted\nin the dropdown while typing and is selected when committing the\nvalue, for example on Enter press:\n\n- `none` (default): do not focus partial matches.\n- `first-match`: focus the first item in the filtered results.\n- `only-match`: focus the item when filtering narrows the results to a single item.\n\nAn item whose label matches the filter exactly is always focused,\nregardless of this property. Matching is case-insensitive. A partial\nmatch is not focused when `allowCustomValue` is enabled, or while\nthe dropdown is closed. For example, with `autoOpenDisabled`, typing\ndoes not focus or select a match until the dropdown is opened.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "?autoOpenDisabled",
               "description": "Set true to prevent the overlay from opening automatically.",