@vaadin/combo-box 22.0.0-beta1 → 22.0.1

package/README.md

@@ -1,13 +1,10 @@
-# <vaadin-combo-box>
+# @vaadin/combo-box
 
-[Live Demo ↗](https://vaadin.com/components/vaadin-combo-box/html-examples)
-|
-[API documentation ↗](https://vaadin.com/components/vaadin-combo-box/html-api)
+A web component for choosing a value from a filterable list of options presented in an overlay.
 
-[<vaadin-combo-box>](https://vaadin.com/components/vaadin-combo-box) is a Web Component combining a dropdown list with an input field for filtering the list of items, part of the [Vaadin components](https://vaadin.com/components).
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/combo-box)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/combo-box)](https://www.npmjs.com/package/@vaadin/combo-box)
-[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-combo-box)
 [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
@@ -27,45 +24,44 @@
 </script>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/vaadin-combo-box/master/screenshot.png" width="208" alt="Screenshot of vaadin-combo-box" />](https://vaadin.com/components/vaadin-combo-box)
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/combo-box/screenshot.png" width="208" alt="Screenshot of vaadin-combo-box">](https://vaadin.com/docs/latest/ds/components/combo-box)
 
 ## Installation
 
-Install `vaadin-combo-box`:
+Install the component:
 
 ```sh
-npm i @vaadin/combo-box --save
+npm i @vaadin/combo-box
 ```
 
-Once installed, import it in your application:
+Once installed, import the component in your application:
 
 ```js
-import '@vaadin/combo-box/vaadin-combo-box.js';
+import '@vaadin/combo-box';
 ```
 
-## Getting Started
+## Themes
 
-Vaadin components use the Lumo theme by default.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/combo-box/vaadin-combo-box.js) of the package uses the Lumo theme.
 
-To use the Material theme, import the correspondent file from the `theme/material` folder.
+To use the Material theme, import the component from the `theme/material` folder:
 
-## Entry points
-
-- The components with the Lumo theme:
-
-  `theme/lumo/vaadin-combo-box.js`
-  `theme/lumo/vaadin-combo-box-light.js`
+```js
+import '@vaadin/combo-box/theme/material/vaadin-combo-box.js';
+```
 
-- The components with the Material theme:
+You can also import the Lumo version of the component explicitly:
 
-  `theme/material/vaadin-combo-box.js`
-  `theme/material/vaadin-combo-box-light.js`
+```js
+import '@vaadin/combo-box/theme/lumo/vaadin-combo-box.js';
+```
 
-- Alias for `theme/lumo/vaadin-combo-box.js`
-  `theme/lumo/vaadin-combo-box-light.js`
+Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
 
-  `vaadin-combo-box.js`
-  `vaadin-combo-box-light.js`
+```js
+import '@vaadin/combo-box/src/vaadin-combo-box.js';
+```
 
 ## Contributing
 
@@ -75,4 +71,5 @@ Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/
 
 Apache License 2.0
 
-Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
+Vaadin collects usage statistics at development time to improve this product.
+For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "22.0.0-beta1",
+  "version": "22.0.1",
   "publishConfig": {
     "access": "public"
   },
@@ -31,25 +31,26 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "22.0.0-beta1",
-    "@vaadin/field-base": "22.0.0-beta1",
-    "@vaadin/input-container": "22.0.0-beta1",
-    "@vaadin/item": "22.0.0-beta1",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-beta1",
-    "@vaadin/vaadin-material-styles": "22.0.0-beta1",
-    "@vaadin/vaadin-overlay": "22.0.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-beta1"
+    "@vaadin/component-base": "^22.0.1",
+    "@vaadin/field-base": "^22.0.1",
+    "@vaadin/input-container": "^22.0.1",
+    "@vaadin/item": "^22.0.1",
+    "@vaadin/vaadin-lumo-styles": "^22.0.1",
+    "@vaadin/vaadin-material-styles": "^22.0.1",
+    "@vaadin/vaadin-overlay": "^22.0.1",
+    "@vaadin/vaadin-themable-mixin": "^22.0.1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/dialog": "22.0.0-beta1",
-    "@vaadin/polymer-legacy-adapter": "22.0.0-beta1",
-    "@vaadin/testing-helpers": "^0.3.0",
-    "@vaadin/text-field": "22.0.0-beta1",
+    "@vaadin/dialog": "^22.0.1",
+    "@vaadin/polymer-legacy-adapter": "^22.0.1",
+    "@vaadin/testing-helpers": "^0.3.2",
+    "@vaadin/text-field": "^22.0.1",
     "lit": "^2.0.0",
     "sinon": "^9.2.0"
   },
-  "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
+  "gitHead": "2b0a2bff0369d6020f7cc33ad35506aa2d1f6f68"
 }

package/src/vaadin-combo-box-data-provider-mixin.d.ts

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { Constructor } from '@open-wc/dedupe-mixin';
 
 export type ComboBoxDataProviderCallback<TItem> = (items: Array<TItem>, size: number) => void;
 
@@ -17,15 +18,11 @@ export type ComboBoxDataProvider<TItem> = (
   callback: ComboBoxDataProviderCallback<TItem>
 ) => void;
 
-declare function ComboBoxDataProviderMixin<TItem, T extends new (...args: any[]) => {}>(
+export declare function ComboBoxDataProviderMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T
-): T & ComboBoxDataProviderMixinConstructor<TItem>;
+): T & Constructor<ComboBoxDataProviderMixinClass<TItem>>;
 
-interface ComboBoxDataProviderMixinConstructor<TItem> {
-  new (...args: any[]): ComboBoxDataProviderMixin<TItem>;
-}
-
-interface ComboBoxDataProviderMixin<TItem> {
+export declare class ComboBoxDataProviderMixinClass<TItem> {
   /**
    * Number of items fetched at a time from the dataprovider.
    * @attr {number} page-size
@@ -57,5 +54,3 @@ interface ComboBoxDataProviderMixin<TItem> {
    */
   clearCache(): void;
 }
-
-export { ComboBoxDataProviderMixin, ComboBoxDataProviderMixinConstructor };

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

@@ -3,21 +3,12 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
 import './vaadin-combo-box-item.js';
 import './vaadin-combo-box-overlay.js';
 import './vaadin-combo-box-scroller.js';
-
-const TOUCH_DEVICE = (() => {
-  try {
-    document.createEvent('TouchEvent');
-    return true;
-  } catch (e) {
-    return false;
-  }
-})();
+import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
+import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 /**
  * Element for internal use only.
@@ -47,13 +38,9 @@ export class ComboBoxDropdown extends mixinBehaviors(IronResizableBehavior, Poly
   static get properties() {
     return {
       /**
-       * True if the device supports touch events.
+       * True if the combo-box has been activate by the user.
+       * The actual opened state depends on whether the dropdown has items.
        */
-      touchDevice: {
-        type: Boolean,
-        value: TOUCH_DEVICE
-      },
-
       opened: Boolean,
 
       /**

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 

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

@@ -3,9 +3,12 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
-import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js';
+import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
+import { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ComboBoxDataProviderMixinClass } from './vaadin-combo-box-data-provider-mixin.js';
+import { ComboBoxMixinClass } from './vaadin-combo-box-mixin.js';
 import { ComboBoxDefaultItem } from './vaadin-combo-box-mixin.js';
 export {
   ComboBoxDataProvider,
@@ -125,9 +128,12 @@ declare class ComboBoxLight<TItem = ComboBoxDefaultItem> extends HTMLElement {
 }
 
 interface ComboBoxLight<TItem = ComboBoxDefaultItem>
-  extends ComboBoxDataProviderMixin<TItem>,
-    ComboBoxMixin<TItem>,
-    ThemableMixin {}
+  extends ComboBoxDataProviderMixinClass<TItem>,
+    ComboBoxMixinClass<TItem>,
+    KeyboardMixinClass,
+    InputMixinClass,
+    DisabledMixinClass,
+    ThemableMixinClass {}
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -3,12 +3,12 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import './vaadin-combo-box-dropdown.js';
 import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
 import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js';
-import './vaadin-combo-box-dropdown.js';
+import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
 
 /**
  * `<vaadin-combo-box-light>` is a customizable version of the `<vaadin-combo-box>` providing

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

@@ -3,9 +3,10 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
-import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { InputMixin } from '@vaadin/field-base/src/input-mixin.js';
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 import { ComboBox } from './vaadin-combo-box.js';
 
 export type ComboBoxDefaultItem = any;
@@ -21,16 +22,22 @@ export type ComboBoxRenderer<TItem> = (
   model: ComboBoxItemModel<TItem>
 ) => void;
 
-declare function ComboBoxMixin<TItem, T extends new (...args: any[]) => {}>(
+export declare function ComboBoxMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T
-): T & ComboBoxMixinConstructor<TItem>;
+): T &
+  Constructor<ComboBoxMixinClass<TItem>> &
+  Constructor<DisabledMixinClass> &
+  Constructor<InputMixinClass> &
+  Constructor<KeyboardMixinClass>;
 
-interface ComboBoxMixinConstructor<TItem> {
-  new (...args: any[]): ComboBoxMixin<TItem>;
-}
+export declare class ComboBoxMixinClass<TItem> {
+  protected readonly _propertyForValue: string;
+
+  protected _inputElementValue: string | undefined;
 
-interface ComboBoxMixin<TItem> extends DisabledMixin, InputMixin, KeyboardMixin {
-  readonly _propertyForValue: string;
+  protected _revertInputValue(): void;
+
+  protected _getItemElements(): HTMLElement[];
 
   /**
    * True if the dropdown is open, false otherwise.
@@ -173,5 +180,3 @@ interface ComboBoxMixin<TItem> extends DisabledMixin, InputMixin, KeyboardMixin
    */
   checkValidity(): boolean;
 }
-
-export { ComboBoxMixin, ComboBoxMixinConstructor };

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

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
 import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
@@ -360,7 +361,7 @@ export const ComboBoxMixin = (subclass) =>
         this._openedWithFocusRing = this.hasAttribute('focus-ring');
         // For touch devices, we don't want to popup virtual keyboard
         // unless input element is explicitly focused by the user.
-        if (!this.hasAttribute('focused') && !this.$.dropdown.touchDevice) {
+        if (!this.hasAttribute('focused') && !isTouch) {
           this.focus();
         }
       } else {
@@ -569,11 +570,14 @@ export const ComboBoxMixin = (subclass) =>
     _onEscape(e) {
       if (this.autoOpenDisabled) {
         // Auto-open is disabled
-        if (this.value !== this._inputElementValue) {
+        if (this.opened || (this.value !== this._inputElementValue && this._inputElementValue.length > 0)) {
+          // The overlay is open or
           // The input value has changed but the change hasn't been committed, so cancel it.
+          e.stopPropagation();
           this._focusedIndex = -1;
           this.cancel();
-        } else if (this.clearButtonVisible && !this.opened) {
+        } else if (this.clearButtonVisible && !this.opened && !!this.value) {
+          e.stopPropagation();
           // The clear button is visible and the overlay is closed, so clear the value.
           this._clear();
         }
@@ -591,7 +595,8 @@ export const ComboBoxMixin = (subclass) =>
             // No item is focused, cancel the change and close the overlay
             this.cancel();
           }
-        } else if (this.clearButtonVisible) {
+        } else if (this.clearButtonVisible && !!this.value) {
+          e.stopPropagation();
           // The clear button is visible and the overlay is closed, so clear the value.
           this._clear();
         }
@@ -605,7 +610,7 @@ export const ComboBoxMixin = (subclass) =>
         toggleElement.addEventListener('mousedown', (e) => e.preventDefault());
         // Unfocus previously focused element if focus is not inside combo box (on touch devices)
         toggleElement.addEventListener('click', () => {
-          if (this.$.dropdown.touchDevice && !this.hasAttribute('focused')) {
+          if (isTouch && !this.hasAttribute('focused')) {
             document.activeElement.blur();
           }
         });
@@ -930,6 +935,14 @@ export const ComboBoxMixin = (subclass) =>
           this.opened || this.autoOpenDisabled
             ? this.$.dropdown.indexOfLabel(this.filter)
             : this._indexOfValue(this.value, this.filteredItems);
+
+        // see https://github.com/vaadin/web-components/issues/2615
+        if (this.selectedItem === null && this._focusedIndex >= 0) {
+          const filteredItem = this.filteredItems[this._focusedIndex];
+          if (this._getItemValue(filteredItem) === this.value) {
+            this._selectItemForValue(this.value);
+          }
+        }
       }
     }
 

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

@@ -4,8 +4,8 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import { PositionMixin } from '@vaadin/vaadin-overlay/src/vaadin-overlay-position-mixin.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-combo-box-overlay',

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';
 import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
 

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

@@ -3,12 +3,23 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
-import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js';
-import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
+import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
+import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
+import { DelegateStateMixinClass } from '@vaadin/field-base/src/delegate-state-mixin.js';
+import { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
+import { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
+import { InputControlMixinClass } from '@vaadin/field-base/src/input-control-mixin.js';
+import { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
+import { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
+import { PatternMixinClass } from '@vaadin/field-base/src/pattern-mixin.js';
+import { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
+import { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ComboBoxDataProviderMixinClass } from './vaadin-combo-box-data-provider-mixin.js';
+import { ComboBoxMixinClass } from './vaadin-combo-box-mixin.js';
 import { ComboBoxDefaultItem } from './vaadin-combo-box-mixin.js';
 export {
   ComboBoxDataProvider,
@@ -62,77 +73,60 @@ export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
 }
 
 /**
- * `<vaadin-combo-box>` is a combo box element combining a dropdown list with an
- * input field for filtering the list of items. If you want to replace the default
- * input field with a custom implementation, you should use the
- * [`<vaadin-combo-box-light>`](#/elements/vaadin-combo-box-light) element.
- *
- * Items in the dropdown list must be provided as a list of `String` values.
- * Defining the items is done using the `items` property, which can be assigned
- * with data-binding, using an attribute or directly with the JavaScript property.
+ * `<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options
+ * presented in a dropdown overlay. The options can be provided as a list of strings or objects
+ * by setting [`items`](#/elements/vaadin-combo-box#property-items) property on the element.
  *
  * ```html
- * <vaadin-combo-box
- *     label="Fruit"
- *     items="[[data]]">
- * </vaadin-combo-box>
+ * <vaadin-combo-box id="combo-box"></vaadin-combo-box>
  * ```
  *
  * ```js
- * combobox.items = ['apple', 'orange', 'banana'];
+ * document.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];
  * ```
  *
  * When the selected `value` is changed, a `value-changed` event is triggered.
  *
  * ### Item rendering
  *
- * `<vaadin-combo-box>` supports using custom renderer callback function for defining the
- * content of `<vaadin-combo-box-item>`.
+ * To customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use
+ * [`renderer`](#/elements/vaadin-combo-box#property-renderer) property which accepts a function.
+ * The renderer function is called with `root`, `comboBox`, and `model` as arguments.
  *
- * The renderer function provides `root`, `comboBox`, `model` arguments when applicable.
- * Generate DOM content by using `model` object properties if needed, append it to the `root`
- * element and control the state of the host element by accessing `comboBox`. Before generating new
- * content, users are able to check if there is already content in `root` for reusing it.
+ * Generate DOM content by using `model` object properties if needed, and append it to the `root`
+ * element. The `comboBox` reference is provided to access the combo-box element state. Do not
+ * set combo-box properties in a `renderer` function.
  *
- * ```html
- * <vaadin-combo-box id="combo-box"></vaadin-combo-box>
- * ```
  * ```js
  * const comboBox = document.querySelector('#combo-box');
  * comboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];
- * comboBox.renderer = function(root, comboBox, model) {
- *   root.innerHTML = model.index + ': ' +
- *                    model.item.label + ' ' +
- *                    '<b>' + model.item.value + '</b>';
+ * comboBox.renderer = (root, comboBox, model) => {
+ *   const item = model.item;
+ *   root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;
  * };
  * ```
  *
  * Renderer is called on the opening of the combo-box and each time the related model is updated.
- * DOM generated during the renderer call can be reused
- * in the next renderer call and will be provided with the `root` argument.
- * On first call it will be empty.
+ * Before creating new content, it is recommended to check if there is already an existing DOM
+ * element in `root` from a previous renderer call for reusing it. Even though combo-box uses
+ * infinite scrolling, reducing DOM operations might improve performance.
  *
  * The following properties are available in the `model` argument:
  *
- * Property name | Type | Description
- * --------------|------|------------
- * `index`| Number | Index of the item in the `items` array
- * `item` | String or Object | The item reference
- * `selected` | Boolean | True when item is selected
- * `focused` | Boolean | True when item is focused
+ * Property   | Type             | Description
+ * -----------|------------------|-------------
+ * `index`    | Number           | Index of the item in the `items` array
+ * `item`     | String or Object | The item reference
+ * `selected` | Boolean          | True when item is selected
+ * `focused`  | Boolean          | True when item is focused
  *
  * ### Lazy Loading with Function Data Provider
  *
- * In addition to assigning an array to the items property, you can alternatively
- * provide the `<vaadin-combo-box>` data through the
+ * In addition to assigning an array to the items property, you can alternatively use the
  * [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) function property.
  * The `<vaadin-combo-box>` calls this function lazily, only when it needs more data
  * to be displayed.
  *
- * See the [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) in
- * the API reference below for the detailed data provider arguments description,
- * and the “Lazy Loading“ example on “Basics” page in the demos.
- *
  * __Note that when using function data providers, the total number of items
  * needs to be set manually. The total number of items can be returned
  * in the second argument of the data provider callback:__
@@ -220,12 +214,23 @@ declare class ComboBox<TItem = ComboBoxDefaultItem> extends HTMLElement {
 }
 
 interface ComboBox<TItem = ComboBoxDefaultItem>
-  extends ComboBoxDataProviderMixin<TItem>,
-    ComboBoxMixin<TItem>,
-    PatternMixin,
-    InputControlMixin,
-    ThemableMixin,
-    ElementMixin {}
+  extends ComboBoxDataProviderMixinClass<TItem>,
+    ComboBoxMixinClass<TItem>,
+    ValidateMixinClass,
+    PatternMixinClass,
+    LabelMixinClass,
+    KeyboardMixinClass,
+    InputMixinClass,
+    InputControlMixinClass,
+    InputConstraintsMixinClass,
+    FocusMixinClass,
+    FieldMixinClass,
+    DisabledMixinClass,
+    DelegateStateMixinClass,
+    DelegateFocusMixinClass,
+    ThemableMixinClass,
+    ElementMixinClass,
+    ControllerMixinClass {}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/vaadin-combo-box.js

@@ -3,94 +3,76 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import '@vaadin/input-container/src/vaadin-input-container.js';
+import './vaadin-combo-box-dropdown.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { AriaLabelController } from '@vaadin/field-base/src/aria-label-controller.js';
-import { InputController } from '@vaadin/field-base/src/input-controller.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
+import { InputController } from '@vaadin/field-base/src/input-controller.js';
+import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/input-container/src/vaadin-input-container.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js';
 import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
-import './vaadin-combo-box-dropdown.js';
 
 registerStyles('vaadin-combo-box', inputFieldShared, { moduleId: 'vaadin-combo-box-styles' });
 
 /**
- * `<vaadin-combo-box>` is a combo box element combining a dropdown list with an
- * input field for filtering the list of items. If you want to replace the default
- * input field with a custom implementation, you should use the
- * [`<vaadin-combo-box-light>`](#/elements/vaadin-combo-box-light) element.
- *
- * Items in the dropdown list must be provided as a list of `String` values.
- * Defining the items is done using the `items` property, which can be assigned
- * with data-binding, using an attribute or directly with the JavaScript property.
+ * `<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options
+ * presented in a dropdown overlay. The options can be provided as a list of strings or objects
+ * by setting [`items`](#/elements/vaadin-combo-box#property-items) property on the element.
  *
  * ```html
- * <vaadin-combo-box
- *     label="Fruit"
- *     items="[[data]]">
- * </vaadin-combo-box>
+ * <vaadin-combo-box id="combo-box"></vaadin-combo-box>
  * ```
  *
  * ```js
- * combobox.items = ['apple', 'orange', 'banana'];
+ * document.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];
  * ```
  *
  * When the selected `value` is changed, a `value-changed` event is triggered.
  *
  * ### Item rendering
  *
- * `<vaadin-combo-box>` supports using custom renderer callback function for defining the
- * content of `<vaadin-combo-box-item>`.
+ * To customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use
+ * [`renderer`](#/elements/vaadin-combo-box#property-renderer) property which accepts a function.
+ * The renderer function is called with `root`, `comboBox`, and `model` as arguments.
  *
- * The renderer function provides `root`, `comboBox`, `model` arguments when applicable.
- * Generate DOM content by using `model` object properties if needed, append it to the `root`
- * element and control the state of the host element by accessing `comboBox`. Before generating new
- * content, users are able to check if there is already content in `root` for reusing it.
+ * Generate DOM content by using `model` object properties if needed, and append it to the `root`
+ * element. The `comboBox` reference is provided to access the combo-box element state. Do not
+ * set combo-box properties in a `renderer` function.
  *
- * ```html
- * <vaadin-combo-box id="combo-box"></vaadin-combo-box>
- * ```
  * ```js
  * const comboBox = document.querySelector('#combo-box');
  * comboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];
- * comboBox.renderer = function(root, comboBox, model) {
- *   root.innerHTML = model.index + ': ' +
- *                    model.item.label + ' ' +
- *                    '<b>' + model.item.value + '</b>';
+ * comboBox.renderer = (root, comboBox, model) => {
+ *   const item = model.item;
+ *   root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;
  * };
  * ```
  *
  * Renderer is called on the opening of the combo-box and each time the related model is updated.
- * DOM generated during the renderer call can be reused
- * in the next renderer call and will be provided with the `root` argument.
- * On first call it will be empty.
+ * Before creating new content, it is recommended to check if there is already an existing DOM
+ * element in `root` from a previous renderer call for reusing it. Even though combo-box uses
+ * infinite scrolling, reducing DOM operations might improve performance.
  *
  * The following properties are available in the `model` argument:
  *
- * Property name | Type | Description
- * --------------|------|------------
- * `index`| Number | Index of the item in the `items` array
- * `item` | String or Object | The item reference
- * `selected` | Boolean | True when item is selected
- * `focused` | Boolean | True when item is focused
+ * Property   | Type             | Description
+ * -----------|------------------|-------------
+ * `index`    | Number           | Index of the item in the `items` array
+ * `item`     | String or Object | The item reference
+ * `selected` | Boolean          | True when item is selected
+ * `focused`  | Boolean          | True when item is focused
  *
  * ### Lazy Loading with Function Data Provider
  *
- * In addition to assigning an array to the items property, you can alternatively
- * provide the `<vaadin-combo-box>` data through the
+ * In addition to assigning an array to the items property, you can alternatively use the
  * [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) function property.
  * The `<vaadin-combo-box>` calls this function lazily, only when it needs more data
  * to be displayed.
  *
- * See the [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) in
- * the API reference below for the detailed data provider arguments description,
- * and the “Lazy Loading“ example on “Basics” page in the demos.
- *
  * __Note that when using function data providers, the total number of items
  * needs to be set manually. The total number of items can be returned
  * in the second argument of the data provider callback:__
@@ -260,7 +242,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
         this.ariaTarget = input;
       })
     );
-    this.addController(new AriaLabelController(this, this.inputElement, this._labelNode));
+    this.addController(new LabelledInputController(this.inputElement, this._labelNode));
     this._positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
     this._toggleElement = this.$.toggleButton;
   }

package/theme/lumo/vaadin-combo-box-dropdown-styles.js

@@ -1,10 +1,10 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
-import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
 import '@vaadin/vaadin-overlay/theme/lumo/vaadin-overlay.js';
 import { menuOverlayCore } from '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
+import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const comboBoxOverlay = css`
   [part='content'] {

package/theme/lumo/vaadin-combo-box-item-styles.js

@@ -1,45 +1,21 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import { item } from '@vaadin/item/theme/lumo/vaadin-item-styles.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
+import { item } from '@vaadin/item/theme/lumo/vaadin-item-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-/* TODO partly duplicated from vaadin-list-box styles. Should find a way to make it DRY */
 const comboBoxItem = css`
   :host {
-    cursor: default;
-    -webkit-tap-highlight-color: var(--lumo-primary-color-10pct);
-    padding-left: calc(var(--lumo-border-radius-m) / 4);
-    padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
     transition: background-color 100ms;
-    border-radius: var(--lumo-border-radius-m);
     overflow: hidden;
     --_lumo-item-selected-icon-display: block;
   }
 
-  :host(:hover) {
-    background-color: var(--lumo-primary-color-10pct);
-  }
-
-  :host([focused]:not([disabled])) {
-    box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
-  }
-
-  @media (pointer: coarse) {
-    :host(:hover) {
-      background-color: transparent;
-    }
-
+  @media (any-hover: hover) {
     :host([focused]:not([disabled])) {
-      box-shadow: none;
+      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
     }
   }
-
-  /* RTL specific styles */
-  :host([dir='rtl']) {
-    padding-right: calc(var(--lumo-border-radius-m) / 4);
-    padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
-  }
 `;
 
 registerStyles('vaadin-combo-box-item', [item, comboBoxItem], {

package/theme/lumo/vaadin-combo-box-styles.js

@@ -1,6 +1,6 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const comboBox = css`
   :host {

package/theme/material/vaadin-combo-box-dropdown-styles.js

@@ -1,6 +1,6 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const comboBoxOverlay = css`
   :host {

package/theme/material/vaadin-combo-box-item-styles.js

@@ -1,33 +1,16 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/font-icons.js';
 import '@vaadin/vaadin-material-styles/typography.js';
 import { item } from '@vaadin/item/theme/material/vaadin-item-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const comboBoxItem = css`
   :host {
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
     padding: 4px 10px;
-    min-height: 36px;
-    font-size: var(--material-small-font-size);
     --_material-item-selected-icon-display: block;
   }
-
-  :host(:hover) {
-    background-color: var(--material-secondary-background-color);
-  }
-
-  :host([focused]) {
-    background-color: var(--material-divider-color);
-  }
-
-  @media (pointer: coarse) {
-    :host(:hover),
-    :host([focused]) {
-      background-color: transparent;
-    }
-  }
 `;
 
 registerStyles('vaadin-combo-box-item', [item, comboBoxItem], {

package/theme/material/vaadin-combo-box-styles.js

@@ -1,7 +1,7 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/font-icons.js';
 import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const comboBox = css`
   :host {