@everymatrix/general-registration 1.22.2 → 1.22.10

package/dist/cjs/checkbox-group-input_13.cjs.entry.js

@@ -113,7 +113,7 @@ class Lumo extends HTMLElement {
   }
 
   static get version() {
-    return '24.2.3';
+    return '24.2.5';
   }
 }
 
@@ -9298,7 +9298,7 @@ const registered = new Set();
 const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '24.2.3';
+      return '24.2.5';
     }
 
     /** @protected */
@@ -12188,12 +12188,6 @@ const CheckedMixin = dedupingMixin(
         const input = event.target;
 
         this._toggleChecked(input.checked);
-
-        // Clicking the checkbox or radio-button in Safari
-        // does not make it focused, so we do it manually.
-        if (!isElementFocused(input)) {
-          input.focus();
-        }
       }
 
       /** @protected */
@@ -12737,6 +12731,18 @@ const CheckboxMixin = (superclass) =>
           type: String,
           value: '',
         },
+
+        /**
+         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
+         *
+         * @override
+         * @protected
+         */
+        tabindex: {
+          type: Number,
+          value: 0,
+          reflectToAttribute: true,
+        },
       };
     }
 
@@ -30130,6 +30136,9 @@ const GeneralRegistration = class {
       this.autofilled = true;
     }
   }
+  addBtag() {
+    this.addBtagValue();
+  }
   checkInputsValidityHandler(event) {
     // Set isValid state of the input in the list.
     this.listOfInputValidity.find(input => input.name == event.detail.name).isValid = event.detail.valid;
@@ -30402,8 +30411,6 @@ const GeneralRegistration = class {
         return [inputElement];
       }
     });
-    if (this.btag)
-      this.addBtagValue();
     this.listOfInputValidity = this.listOfInputs.reduce((acc, field) => {
       var _a;
       // If the field is a togglecheckbox, add its subfields
@@ -30449,6 +30456,8 @@ const GeneralRegistration = class {
       }
       return acc;
     }, []);
+    if (this.btag)
+      this.addBtagValue();
     // Set the list of actions
     this.listOfActions = config.content.actions.map(action => action);
     this.registrationID = config.content.registrationID;
@@ -30498,6 +30507,10 @@ const GeneralRegistration = class {
     if (btagField) {
       btagField.defaultValue = this.btag;
     }
+    const btagValue = this.listOfInputValues.find(input => input.name.toLowerCase() === 'btag');
+    if (btagValue) {
+      btagValue.value = this.btag;
+    }
   }
   addTranslation(field) {
     if (TRANSLATIONS[this.language][field.name]) {
@@ -30554,7 +30567,8 @@ const GeneralRegistration = class {
   get host() { return index.getElement(this); }
   static get watchers() { return {
     "registrationStep": ["sendStep"],
-    "forms": ["setFormValidity"]
+    "forms": ["setFormValidity"],
+    "btag": ["addBtag"]
   }; }
 };
 GeneralRegistration.style = generalRegistrationCss;
@@ -33329,7 +33343,9 @@ class IronListAdapter {
       this.__preventElementUpdates = false;
     } else {
       // Already initialized, just update _virtualCount
+      this._updateScrollerSize();
       this._virtualCount = this.items.length;
+      this._render();
     }
 
     // When reducing size while invisible, iron-list does not update items, so
@@ -34878,6 +34894,14 @@ const ComboBoxMixin = (subclass) =>
           observer: '_toggleElementChanged',
         },
 
+        /**
+         * Set of items to be rendered in the dropdown.
+         * @protected
+         */
+        _dropdownItems: {
+          type: Array,
+        },
+
         /** @private */
         _closeOnBlurIsPrevented: Boolean,
 
@@ -34895,8 +34919,8 @@ const ComboBoxMixin = (subclass) =>
     static get observers() {
       return [
         '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)',
-        '_openedOrItemsChanged(opened, filteredItems, loading)',
-        '_updateScroller(_scroller, filteredItems, opened, loading, selectedItem, itemIdPath, _focusedIndex, renderer, theme)',
+        '_openedOrItemsChanged(opened, _dropdownItems, loading)',
+        '_updateScroller(_scroller, _dropdownItems, opened, loading, selectedItem, itemIdPath, _focusedIndex, renderer, theme)',
       ];
     }
 
@@ -35135,7 +35159,7 @@ const ComboBoxMixin = (subclass) =>
         this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-opened', { bubbles: true, composed: true }));
 
         this._onOpened();
-      } else if (wasOpened && this.filteredItems && this.filteredItems.length) {
+      } else if (wasOpened && this._dropdownItems && this._dropdownItems.length) {
         this.close();
 
         this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-closed', { bubbles: true, composed: true }));
@@ -35325,7 +35349,7 @@ const ComboBoxMixin = (subclass) =>
     /** @private */
     _onArrowDown() {
       if (this.opened) {
-        const items = this.filteredItems;
+        const items = this._dropdownItems;
         if (items) {
           this._focusedIndex = Math.min(items.length - 1, this._focusedIndex + 1);
           this._prefillFocusedItemLabel();
@@ -35341,7 +35365,7 @@ const ComboBoxMixin = (subclass) =>
         if (this._focusedIndex > -1) {
           this._focusedIndex = Math.max(0, this._focusedIndex - 1);
         } else {
-          const items = this.filteredItems;
+          const items = this._dropdownItems;
           if (items) {
             this._focusedIndex = items.length - 1;
           }
@@ -35356,7 +35380,7 @@ const ComboBoxMixin = (subclass) =>
     /** @private */
     _prefillFocusedItemLabel() {
       if (this._focusedIndex > -1) {
-        const focusedItem = this.filteredItems[this._focusedIndex];
+        const focusedItem = this._dropdownItems[this._focusedIndex];
         this._inputElementValue = this._getItemLabel(focusedItem);
         this._markAllSelectionRange();
       }
@@ -35529,7 +35553,7 @@ const ComboBoxMixin = (subclass) =>
     /** @private */
     _commitValue() {
       if (this._focusedIndex > -1) {
-        const focusedItem = this.filteredItems[this._focusedIndex];
+        const focusedItem = this._dropdownItems[this._focusedIndex];
         if (this.selectedItem !== focusedItem) {
           this.selectedItem = focusedItem;
         }
@@ -35544,7 +35568,7 @@ const ComboBoxMixin = (subclass) =>
         }
       } else {
         // Try to find an item which label matches the input value.
-        const items = [this.selectedItem, ...(this.filteredItems || [])];
+        const items = [this.selectedItem, ...(this._dropdownItems || [])];
         const itemMatchingInputValue = items[this.__getItemIndexByLabel(items, this._inputElementValue)];
 
         if (
@@ -35759,6 +35783,8 @@ const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _filteredItemsChanged(filteredItems, oldFilteredItems) {
+      this._setDropdownItems(filteredItems);
+
       // Store the currently focused item if any. The focused index preserves
       // in the case when more filtered items are loading but it is reset
       // when the user types in a filter query.
@@ -35819,6 +35845,16 @@ const ComboBoxMixin = (subclass) =>
       }
     }
 
+    /**
+     * Provide items to be rendered in the dropdown.
+     * Override this method to show custom items.
+     *
+     * @protected
+     */
+    _setDropdownItems(items) {
+      this._dropdownItems = items;
+    }
+
     /** @private */
     _getItemElements() {
       return Array.from(this._scroller.querySelectorAll(`${this._tagNamePrefix}-item`));

package/dist/cjs/index.cjs.js

@@ -8,7 +8,7 @@ function safeDecorator(fn) {
     }
     catch (error) {
       if (error instanceof DOMException &&
-        error.message.includes('has already been used with this registry')) {
+        error.message.includes('has already been used with this registry') || error.message.includes('Cannot define multiple custom elements with the same tag name')) {
         return false;
       }
       throw error;

package/dist/collection/components/general-registration/general-registration.js

@@ -68,6 +68,9 @@ export class GeneralRegistration {
       this.autofilled = true;
     }
   }
+  addBtag() {
+    this.addBtagValue();
+  }
   checkInputsValidityHandler(event) {
     // Set isValid state of the input in the list.
     this.listOfInputValidity.find(input => input.name == event.detail.name).isValid = event.detail.valid;
@@ -340,8 +343,6 @@ export class GeneralRegistration {
         return [inputElement];
       }
     });
-    if (this.btag)
-      this.addBtagValue();
     this.listOfInputValidity = this.listOfInputs.reduce((acc, field) => {
       var _a;
       // If the field is a togglecheckbox, add its subfields
@@ -387,6 +388,8 @@ export class GeneralRegistration {
       }
       return acc;
     }, []);
+    if (this.btag)
+      this.addBtagValue();
     // Set the list of actions
     this.listOfActions = config.content.actions.map(action => action);
     this.registrationID = config.content.registrationID;
@@ -437,6 +440,10 @@ export class GeneralRegistration {
     if (btagField) {
       btagField.defaultValue = this.btag;
     }
+    const btagValue = this.listOfInputValues.find(input => input.name.toLowerCase() === 'btag');
+    if (btagValue) {
+      btagValue.value = this.btag;
+    }
   }
   addTranslation(field) {
     if (TRANSLATIONS[this.language][field.name]) {
@@ -699,6 +706,9 @@ export class GeneralRegistration {
     }, {
       "propName": "forms",
       "methodName": "setFormValidity"
+    }, {
+      "propName": "btag",
+      "methodName": "addBtag"
     }]; }
   static get listeners() { return [{
       "name": "sendValidityState",

package/dist/collection/index.js

@@ -6,7 +6,7 @@ function safeDecorator(fn) {
     }
     catch (error) {
       if (error instanceof DOMException &&
-        error.message.includes('has already been used with this registry')) {
+        error.message.includes('has already been used with this registry') || error.message.includes('Cannot define multiple custom elements with the same tag name')) {
         return false;
       }
       throw error;

package/dist/components/active-mixin.js

@@ -1,4 +1,4 @@
-import { n as microTask, a as DisabledMixin, K as KeyboardMixin } from './field-mixin.js';
+import { m as microTask, a as DisabledMixin, K as KeyboardMixin } from './field-mixin.js';
 
 /**
 @license

package/dist/components/checkbox-group-input2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
-import { r as registerStyles, i, d as dedupingMixin, D as DelegateStateMixin, a as DisabledMixin, I as InputMixin, b as isElementFocused, L as LabelMixin, c as DelegateFocusMixin, e as InputController, f as LabelledInputController, h as html, T as TooltipController, g as defineCustomElement$1, E as ElementMixin, j as ThemableMixin, P as PolymerElement, k as requiredField, l as helper, F as FieldMixin, m as FocusMixin, S as SlotObserver } from './field-mixin.js';
+import { r as registerStyles, i, d as dedupingMixin, D as DelegateStateMixin, a as DisabledMixin, I as InputMixin, L as LabelMixin, b as DelegateFocusMixin, c as InputController, e as LabelledInputController, h as html, T as TooltipController, f as defineCustomElement$1, E as ElementMixin, g as ThemableMixin, P as PolymerElement, j as requiredField, k as helper, F as FieldMixin, l as FocusMixin, S as SlotObserver } from './field-mixin.js';
 import { A as ActiveMixin } from './active-mixin.js';
 
 registerStyles(
@@ -206,12 +206,6 @@ const CheckedMixin = dedupingMixin(
         const input = event.target;
 
         this._toggleChecked(input.checked);
-
-        // Clicking the checkbox or radio-button in Safari
-        // does not make it focused, so we do it manually.
-        if (!isElementFocused(input)) {
-          input.focus();
-        }
       }
 
       /** @protected */
@@ -265,6 +259,18 @@ const CheckboxMixin = (superclass) =>
           type: String,
           value: '',
         },
+
+        /**
+         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
+         *
+         * @override
+         * @protected
+         */
+        tabindex: {
+          type: Number,
+          value: 0,
+          reflectToAttribute: true,
+        },
       };
     }
 

package/dist/components/date-input2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate$1, a as tooltipIconSvg } from './tooltipIcon.js';
 import { i as inputFieldShared, a as isFirefox, I as InputConstraintsMixin, b as isIOS, c as InputControlMixin, d as inputFieldShared$1 } from './input-field-shared-styles.js';
-import { i, r as registerStyles, h as html, g as defineCustomElement$1, o as DirMixin, j as ThemableMixin, P as PolymerElement, p as Debouncer$1, t as timeOut, q as generateUniqueId, d as dedupingMixin, s as PropertyEffects, w as wrap, u as strictTemplatePolicy, v as legacyWarnings, x as legacyOptimizations, y as useShadow, z as suppressTemplateNotifications, A as timeOut$1, B as microTask, C as matches, G as translate, m as FocusMixin, H as SlotController, J as ControllerMixin, c as DelegateFocusMixin, K as KeyboardMixin, e as InputController, f as LabelledInputController, T as TooltipController, E as ElementMixin } from './field-mixin.js';
+import { i, r as registerStyles, h as html, f as defineCustomElement$1, n as DirMixin, g as ThemableMixin, P as PolymerElement, o as Debouncer$1, t as timeOut, p as generateUniqueId, d as dedupingMixin, q as PropertyEffects, w as wrap, s as strictTemplatePolicy, u as legacyWarnings, v as legacyOptimizations, x as useShadow, y as suppressTemplateNotifications, z as timeOut$1, A as microTask, B as matches, C as translate, l as FocusMixin, G as SlotController, H as ControllerMixin, b as DelegateFocusMixin, K as KeyboardMixin, c as InputController, e as LabelledInputController, T as TooltipController, E as ElementMixin } from './field-mixin.js';
 import { m as menuOverlay, P as PositionMixin, O as OverlayMixin, o as overlayStyles, a as afterNextRender, b as OverlayClassMixin, V as VirtualKeyboardController, h as hideOthers } from './virtual-keyboard-controller.js';
 import './vaadin-button.js';
 import { a as addListener, s as setTouchAction } from './active-mixin.js';

package/dist/components/field-mixin.js

@@ -38,7 +38,7 @@ class Lumo extends HTMLElement {
   }
 
   static get version() {
-    return '24.2.3';
+    return '24.2.5';
   }
 }
 
@@ -9065,7 +9065,7 @@ const registered = new Set();
 const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '24.2.3';
+      return '24.2.5';
     }
 
     /** @protected */
@@ -12423,4 +12423,4 @@ const FieldMixin = (superclass) =>
     }
   };
 
-export { timeOut$1 as A, microTask$1 as B, matches as C, DelegateStateMixin as D, ElementMixin as E, FieldMixin as F, translate as G, SlotController as H, InputMixin as I, ControllerMixin as J, KeyboardMixin as K, LabelMixin as L, getDeepActiveElement as M, getFocusableElements as N, getAncestorRootNodes as O, PolymerElement as P, TabindexMixin as Q, idlePeriod as R, SlotObserver as S, TooltipController as T, animationFrame as U, ValidateMixin as V, flush as W, enqueueDebouncer as X, DisabledMixin as a, isElementFocused as b, DelegateFocusMixin as c, dedupingMixin as d, InputController as e, LabelledInputController as f, defineCustomElement as g, html as h, i$1 as i, ThemableMixin as j, requiredField as k, helper as l, FocusMixin as m, microTask as n, DirMixin as o, Debouncer as p, generateUniqueId as q, registerStyles as r, PropertyEffects as s, timeOut as t, strictTemplatePolicy as u, legacyWarnings as v, wrap as w, legacyOptimizations as x, useShadow as y, suppressTemplateNotifications as z };
+export { microTask$1 as A, matches as B, translate as C, DelegateStateMixin as D, ElementMixin as E, FieldMixin as F, SlotController as G, ControllerMixin as H, InputMixin as I, getDeepActiveElement as J, KeyboardMixin as K, LabelMixin as L, getFocusableElements as M, isElementFocused as N, getAncestorRootNodes as O, PolymerElement as P, TabindexMixin as Q, idlePeriod as R, SlotObserver as S, TooltipController as T, animationFrame as U, ValidateMixin as V, flush as W, enqueueDebouncer as X, DisabledMixin as a, DelegateFocusMixin as b, InputController as c, dedupingMixin as d, LabelledInputController as e, defineCustomElement as f, ThemableMixin as g, html as h, i$1 as i, requiredField as j, helper as k, FocusMixin as l, microTask as m, DirMixin as n, Debouncer as o, generateUniqueId as p, PropertyEffects as q, registerStyles as r, strictTemplatePolicy as s, timeOut as t, legacyWarnings as u, legacyOptimizations as v, wrap as w, useShadow as x, suppressTemplateNotifications as y, timeOut$1 as z };

package/dist/components/general-registration.js

@@ -141,6 +141,9 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
       this.autofilled = true;
     }
   }
+  addBtag() {
+    this.addBtagValue();
+  }
   checkInputsValidityHandler(event) {
     // Set isValid state of the input in the list.
     this.listOfInputValidity.find(input => input.name == event.detail.name).isValid = event.detail.valid;
@@ -413,8 +416,6 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
         return [inputElement];
       }
     });
-    if (this.btag)
-      this.addBtagValue();
     this.listOfInputValidity = this.listOfInputs.reduce((acc, field) => {
       var _a;
       // If the field is a togglecheckbox, add its subfields
@@ -460,6 +461,8 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
       }
       return acc;
     }, []);
+    if (this.btag)
+      this.addBtagValue();
     // Set the list of actions
     this.listOfActions = config.content.actions.map(action => action);
     this.registrationID = config.content.registrationID;
@@ -509,6 +512,10 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     if (btagField) {
       btagField.defaultValue = this.btag;
     }
+    const btagValue = this.listOfInputValues.find(input => input.name.toLowerCase() === 'btag');
+    if (btagValue) {
+      btagValue.value = this.btag;
+    }
   }
   addTranslation(field) {
     if (TRANSLATIONS[this.language][field.name]) {
@@ -565,7 +572,8 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   get host() { return this; }
   static get watchers() { return {
     "registrationStep": ["sendStep"],
-    "forms": ["setFormValidity"]
+    "forms": ["setFormValidity"],
+    "btag": ["addBtag"]
   }; }
   static get style() { return generalRegistrationCss; }
 }, [1, "general-registration", {

package/dist/components/index.js

@@ -8,7 +8,7 @@ function safeDecorator(fn) {
     }
     catch (error) {
       if (error instanceof DOMException &&
-        error.message.includes('has already been used with this registry')) {
+        error.message.includes('has already been used with this registry') || error.message.includes('Cannot define multiple custom elements with the same tag name')) {
         return false;
       }
       throw error;

package/dist/components/input-field-shared-styles.js

@@ -1,4 +1,4 @@
-import { r as registerStyles, i, g as defineCustomElement, j as ThemableMixin, o as DirMixin, P as PolymerElement, h as html, k as requiredField, l as helper, d as dedupingMixin, I as InputMixin, K as KeyboardMixin, D as DelegateStateMixin, V as ValidateMixin, c as DelegateFocusMixin, F as FieldMixin, p as Debouncer, t as timeOut } from './field-mixin.js';
+import { r as registerStyles, i, f as defineCustomElement, g as ThemableMixin, n as DirMixin, P as PolymerElement, h as html, j as requiredField, k as helper, d as dedupingMixin, I as InputMixin, K as KeyboardMixin, D as DelegateStateMixin, V as ValidateMixin, b as DelegateFocusMixin, F as FieldMixin, o as Debouncer, t as timeOut } from './field-mixin.js';
 
 registerStyles(
   'vaadin-input-container',

package/dist/components/password-input2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
 import { i as inputFieldShared, c as InputControlMixin, d as inputFieldShared$1 } from './input-field-shared-styles.js';
-import { r as registerStyles, e as InputController, f as LabelledInputController, h as html, T as TooltipController, g as defineCustomElement$1, j as ThemableMixin, E as ElementMixin, P as PolymerElement, i, H as SlotController } from './field-mixin.js';
+import { r as registerStyles, c as InputController, e as LabelledInputController, h as html, T as TooltipController, f as defineCustomElement$1, g as ThemableMixin, E as ElementMixin, P as PolymerElement, i, G as SlotController } from './field-mixin.js';
 import { b as button, B as Button } from './vaadin-button.js';
 
 /**

package/dist/components/vaadin-button.js

@@ -1,4 +1,4 @@
-import { i, r as registerStyles, Q as TabindexMixin, m as FocusMixin, E as ElementMixin, j as ThemableMixin, J as ControllerMixin, P as PolymerElement, T as TooltipController, g as defineCustomElement, h as html } from './field-mixin.js';
+import { i, r as registerStyles, Q as TabindexMixin, l as FocusMixin, E as ElementMixin, g as ThemableMixin, H as ControllerMixin, P as PolymerElement, T as TooltipController, f as defineCustomElement, h as html } from './field-mixin.js';
 import { A as ActiveMixin } from './active-mixin.js';
 
 const button = i`

package/dist/components/vaadin-combo-box.js

@@ -1,4 +1,4 @@
-import { i, r as registerStyles, g as defineCustomElement, h as html, j as ThemableMixin, o as DirMixin, P as PolymerElement, n as microTask, R as idlePeriod, U as animationFrame, W as flush, p as Debouncer, X as enqueueDebouncer, t as timeOut, q as generateUniqueId, J as ControllerMixin, V as ValidateMixin, m as FocusMixin, K as KeyboardMixin, I as InputMixin, a as DisabledMixin, b as isElementFocused, e as InputController, f as LabelledInputController, T as TooltipController, E as ElementMixin } from './field-mixin.js';
+import { i, r as registerStyles, f as defineCustomElement, h as html, g as ThemableMixin, n as DirMixin, P as PolymerElement, m as microTask, R as idlePeriod, U as animationFrame, W as flush, o as Debouncer, X as enqueueDebouncer, t as timeOut, p as generateUniqueId, H as ControllerMixin, V as ValidateMixin, l as FocusMixin, K as KeyboardMixin, I as InputMixin, a as DisabledMixin, N as isElementFocused, c as InputController, e as LabelledInputController, T as TooltipController, E as ElementMixin } from './field-mixin.js';
 import { c as overlay, d as menuOverlayCore, P as PositionMixin, O as OverlayMixin, o as overlayStyles, b as OverlayClassMixin, V as VirtualKeyboardController } from './virtual-keyboard-controller.js';
 import { i as inputFieldShared, e as isSafari, I as InputConstraintsMixin, f as isTouch, c as InputControlMixin, d as inputFieldShared$1 } from './input-field-shared-styles.js';
 
@@ -1566,7 +1566,9 @@ class IronListAdapter {
       this.__preventElementUpdates = false;
     } else {
       // Already initialized, just update _virtualCount
+      this._updateScrollerSize();
       this._virtualCount = this.items.length;
+      this._render();
     }
 
     // When reducing size while invisible, iron-list does not update items, so
@@ -3115,6 +3117,14 @@ const ComboBoxMixin = (subclass) =>
           observer: '_toggleElementChanged',
         },
 
+        /**
+         * Set of items to be rendered in the dropdown.
+         * @protected
+         */
+        _dropdownItems: {
+          type: Array,
+        },
+
         /** @private */
         _closeOnBlurIsPrevented: Boolean,
 
@@ -3132,8 +3142,8 @@ const ComboBoxMixin = (subclass) =>
     static get observers() {
       return [
         '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)',
-        '_openedOrItemsChanged(opened, filteredItems, loading)',
-        '_updateScroller(_scroller, filteredItems, opened, loading, selectedItem, itemIdPath, _focusedIndex, renderer, theme)',
+        '_openedOrItemsChanged(opened, _dropdownItems, loading)',
+        '_updateScroller(_scroller, _dropdownItems, opened, loading, selectedItem, itemIdPath, _focusedIndex, renderer, theme)',
       ];
     }
 
@@ -3372,7 +3382,7 @@ const ComboBoxMixin = (subclass) =>
         this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-opened', { bubbles: true, composed: true }));
 
         this._onOpened();
-      } else if (wasOpened && this.filteredItems && this.filteredItems.length) {
+      } else if (wasOpened && this._dropdownItems && this._dropdownItems.length) {
         this.close();
 
         this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-closed', { bubbles: true, composed: true }));
@@ -3562,7 +3572,7 @@ const ComboBoxMixin = (subclass) =>
     /** @private */
     _onArrowDown() {
       if (this.opened) {
-        const items = this.filteredItems;
+        const items = this._dropdownItems;
         if (items) {
           this._focusedIndex = Math.min(items.length - 1, this._focusedIndex + 1);
           this._prefillFocusedItemLabel();
@@ -3578,7 +3588,7 @@ const ComboBoxMixin = (subclass) =>
         if (this._focusedIndex > -1) {
           this._focusedIndex = Math.max(0, this._focusedIndex - 1);
         } else {
-          const items = this.filteredItems;
+          const items = this._dropdownItems;
           if (items) {
             this._focusedIndex = items.length - 1;
           }
@@ -3593,7 +3603,7 @@ const ComboBoxMixin = (subclass) =>
     /** @private */
     _prefillFocusedItemLabel() {
       if (this._focusedIndex > -1) {
-        const focusedItem = this.filteredItems[this._focusedIndex];
+        const focusedItem = this._dropdownItems[this._focusedIndex];
         this._inputElementValue = this._getItemLabel(focusedItem);
         this._markAllSelectionRange();
       }
@@ -3766,7 +3776,7 @@ const ComboBoxMixin = (subclass) =>
     /** @private */
     _commitValue() {
       if (this._focusedIndex > -1) {
-        const focusedItem = this.filteredItems[this._focusedIndex];
+        const focusedItem = this._dropdownItems[this._focusedIndex];
         if (this.selectedItem !== focusedItem) {
           this.selectedItem = focusedItem;
         }
@@ -3781,7 +3791,7 @@ const ComboBoxMixin = (subclass) =>
         }
       } else {
         // Try to find an item which label matches the input value.
-        const items = [this.selectedItem, ...(this.filteredItems || [])];
+        const items = [this.selectedItem, ...(this._dropdownItems || [])];
         const itemMatchingInputValue = items[this.__getItemIndexByLabel(items, this._inputElementValue)];
 
         if (
@@ -3996,6 +4006,8 @@ const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _filteredItemsChanged(filteredItems, oldFilteredItems) {
+      this._setDropdownItems(filteredItems);
+
       // Store the currently focused item if any. The focused index preserves
       // in the case when more filtered items are loading but it is reset
       // when the user types in a filter query.
@@ -4056,6 +4068,16 @@ const ComboBoxMixin = (subclass) =>
       }
     }
 
+    /**
+     * Provide items to be rendered in the dropdown.
+     * Override this method to show custom items.
+     *
+     * @protected
+     */
+    _setDropdownItems(items) {
+      this._dropdownItems = items;
+    }
+
     /** @private */
     _getItemElements() {
       return Array.from(this._scroller.querySelectorAll(`${this._tagNamePrefix}-item`));

package/dist/components/virtual-keyboard-controller.js

@@ -1,4 +1,4 @@
-import { i, r as registerStyles, M as getDeepActiveElement, N as getFocusableElements, b as isElementFocused, J as ControllerMixin, O as getAncestorRootNodes } from './field-mixin.js';
+import { i, r as registerStyles, J as getDeepActiveElement, M as getFocusableElements, N as isElementFocused, H as ControllerMixin, O as getAncestorRootNodes } from './field-mixin.js';
 import { b as isIOS } from './input-field-shared-styles.js';
 
 /**