@lion/ui 0.22.0 → 0.24.0

package/components/collapsible/src/LionCollapsible.js

@@ -23,7 +23,6 @@ export class LionCollapsible extends LitElement {
       `,
     ];
   }
-
   static get properties() {
     return {
       opened: {
@@ -32,35 +31,28 @@ export class LionCollapsible extends LitElement {
       },
     };
   }
-
   render() {
     return html`
       <slot name="invoker"></slot>
       <slot name="content"></slot>
     `;
   }
-
   constructor() {
     super();
     this.opened = false;
     this.toggle = this.toggle.bind(this);
   }
-
   connectedCallback() {
     super.connectedCallback();
-
     const uid = uuid();
-
     if (this._invokerNode) {
       this._invokerNode.addEventListener('click', this.toggle);
       this._invokerNode.setAttribute('aria-expanded', `${this.opened}`);
       this._invokerNode.setAttribute('aria-controls', `collapsible-content-${uid}`);
     }
-
     if (this._contentNode) {
       this._contentNode.setAttribute('id', `collapsible-content-${uid}`);
     }
-
     this.__setDefaultState();
   }
 
@@ -74,7 +66,6 @@ export class LionCollapsible extends LitElement {
       this.__openedChanged();
     }
   }
-
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this._invokerNode) {
@@ -131,8 +122,8 @@ export class LionCollapsible extends LitElement {
    * @protected
    */
   get _invokerNode() {
-    return /** @type {HTMLElement[]} */ (Array.from(this.children)).find(
-      child => child.slot === 'invoker',
+    return /** @type {HTMLElement[]} */ Array.from(this.children).find(
+      (child) => child.slot === 'invoker',
     );
   }
 
@@ -140,8 +131,8 @@ export class LionCollapsible extends LitElement {
    * @protected
    */
   get _contentNode() {
-    return /** @type {HTMLElement[]} */ (Array.from(this.children)).find(
-      child => child.slot === 'content',
+    return /** @type {HTMLElement[]} */ Array.from(this.children).find(
+      (child) => child.slot === 'content',
     );
   }
 
@@ -173,9 +164,13 @@ export class LionCollapsible extends LitElement {
     if (this._contentNode) {
       if (this.opened) {
         this._contentNode.style.setProperty('display', '');
-        await this._showAnimation({ contentNode: this._contentNode });
+        await this._showAnimation({
+          contentNode: this._contentNode,
+        });
       } else {
-        await this._hideAnimation({ contentNode: this._contentNode });
+        await this._hideAnimation({
+          contentNode: this._contentNode,
+        });
         this._contentNode.style.setProperty('display', 'none');
       }
     }

package/components/collapsible/test/lion-collapsible.test.js

@@ -1,6 +1,5 @@
 import { expect, fixture as _fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
-
 import '@lion/ui/define/lion-collapsible.js';
 
 /**
@@ -8,8 +7,7 @@ import '@lion/ui/define/lion-collapsible.js';
  * @typedef {import('../src/LionCollapsible.js').LionCollapsible} LionCollapsible
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionCollapsible>} */ (_fixture);
-
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionCollapsible>} */ _fixture;
 const collapsibleTemplate = html`
   <button slot="invoker">More about cars</button>
   <div slot="content" style="font-size: 12px; line-height: 16px; font-family: Arial;">
@@ -19,15 +17,15 @@ const collapsibleTemplate = html`
 `;
 let isCollapsibleOpen = false;
 /** @param {boolean} state */
-const collapsibleToggle = state => {
+const collapsibleToggle = (state) => {
   isCollapsibleOpen = state;
 };
 const defaultCollapsible = html` <lion-collapsible>${collapsibleTemplate}</lion-collapsible> `;
 const collapsibleWithEvents = html`
   <lion-collapsible
     @opened-changed=${
-      /** @param {Event} e */ e =>
-        collapsibleToggle(/** @type {LionCollapsible} */ (e.target)?.opened)
+      /** @param {Event} e */ (e) =>
+        collapsibleToggle(/** @type {LionCollapsible} */ e.target?.opened)
     }
   >
     ${collapsibleTemplate}
@@ -43,21 +41,18 @@ function getProtectedMembers(el) {
     contentHeight: el._contentHeight,
   };
 }
-
 describe('<lion-collapsible>', () => {
   describe('Collapsible', () => {
     it('sets opened to false by default', async () => {
       const collapsible = await fixture(defaultCollapsible);
       expect(collapsible.opened).to.equal(false);
     });
-
     it('has [opened] on current expanded invoker which serves as styling hook', async () => {
       const collapsible = await fixture(defaultCollapsible);
       collapsible.opened = true;
       await collapsible.updateComplete;
       expect(collapsible).to.have.attribute('opened');
     });
-
     it('should return content node height before and after collapsing', async () => {
       const collapsible = await fixture(defaultCollapsible);
       const collHeight1 = getProtectedMembers(collapsible);
@@ -68,7 +63,6 @@ describe('<lion-collapsible>', () => {
       expect(collHeight2.contentHeight).to.equal('32px');
     });
   });
-
   describe('User interaction', () => {
     it('opens a invoker on click', async () => {
       const collapsible = await fixture(defaultCollapsible);
@@ -76,13 +70,11 @@ describe('<lion-collapsible>', () => {
       invoker?.dispatchEvent(new Event('click'));
       expect(collapsible.opened).to.equal(true);
     });
-
     it('should toggle the content using `toggle()`', async () => {
       const collapsible = await fixture(defaultCollapsible);
       collapsible.toggle();
       expect(collapsible.opened).to.equal(true);
     });
-
     it('should expand and collapse the content using `show()` and `hide()`', async () => {
       const collapsible = await fixture(defaultCollapsible);
       collapsible.show();
@@ -90,7 +82,6 @@ describe('<lion-collapsible>', () => {
       collapsible.hide();
       expect(collapsible.opened).to.equal(false);
     });
-
     it('should listen to the open and close state change', async () => {
       const collapsible = await fixture(collapsibleWithEvents);
       collapsible.show();
@@ -101,19 +92,16 @@ describe('<lion-collapsible>', () => {
       expect(isCollapsibleOpen).to.equal(false);
     });
   });
-
   describe('Accessibility', () => {
     it('[collapsed] is a11y AXE accessible', async () => {
       const collapsible = await fixture(defaultCollapsible);
       await expect(collapsible).to.be.accessible();
     });
-
     it('[expanded] is a11y AXE accessible', async () => {
       const collapsible = await fixture(defaultCollapsible);
       collapsible.show();
       await expect(collapsible).to.be.accessible();
     });
-
     describe('Invoker', () => {
       it('links id of content items to invoker via [aria-controls]', async () => {
         const collapsibleElement = await fixture(defaultCollapsible);
@@ -121,13 +109,11 @@ describe('<lion-collapsible>', () => {
         const content = collapsibleElement.querySelector('[slot=content]');
         expect(invoker?.getAttribute('aria-controls')).to.equal(content?.id);
       });
-
       it('adds aria-expanded="false" to invoker when its content is not expanded', async () => {
         const collapsibleElement = await fixture(defaultCollapsible);
         const invoker = collapsibleElement.querySelector('[slot=invoker]');
         expect(invoker).to.have.attribute('aria-expanded', 'false');
       });
-
       it('adds aria-expanded="true" to invoker when its content is expanded', async () => {
         const collapsibleElement = await fixture(defaultCollapsible);
         const invoker = collapsibleElement.querySelector('[slot=invoker]');

package/components/combobox/src/LionCombobox.js

@@ -7,12 +7,15 @@ import { css, html } from 'lit';
 import { CustomChoiceGroupMixin } from '../../form-core/src/choice-group/CustomChoiceGroupMixin.js';
 import { makeMatchingTextBold, unmakeMatchingTextBold } from './utils/makeMatchingTextBold.js';
 import { MatchesOption } from './validators.js';
-
 const matchA11ySpanReverseFns = new WeakMap();
 
 // TODO: make ListboxOverlayMixin that is shared between SelectRich and Combobox
 // TODO: extract option matching based on 'typed character cache' and share that logic
 // on Listbox or ListNavigationWithActiveDescendantMixin
+// TODO: this component inherits `multipleChoice` (ChoiceGroupMixin) and `rotateKeyboardNavigation`
+// (ListboxMixin) and reads both in many places. When those are renamed to `multiple` and `wrap`, move
+// these usages to the new names in the same release; the deprecated aliases only exist for consumers.
+// See the TODO at the top of ../../listbox/src/ListboxMixin.js.
 
 /**
  * @typedef {import('@lion/ui/listbox.js').LionOption} LionOption
@@ -38,7 +41,10 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
   /** @type {any} */
   static get properties() {
     return {
-      autocomplete: { type: String, reflect: true },
+      autocomplete: {
+        type: String,
+        reflect: true,
+      },
       matchMode: {
         type: String,
         attribute: 'match-mode',
@@ -57,7 +63,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
       __shouldAutocompleteNextUpdate: Boolean,
     };
   }
-
   static get styles() {
     return [
       ...super.styles,
@@ -91,11 +96,10 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
       `,
     ];
   }
-
   static get localizeNamespaces() {
     return [
       {
-        'lion-combobox': /** @param {string} locale */ locale => {
+        'lion-combobox': /** @param {string} locale */ (locale) => {
           switch (locale) {
             case 'bg-BG':
             case 'bg':
@@ -204,7 +208,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
       this.__value = value;
     }
   }
-
   reset() {
     super.reset();
     if (!this.multipleChoice) {
@@ -304,7 +307,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
           border-radius: inherit;
           box-sizing: border-box;
           padding: 0;`;
-
           combobox.appendChild(textbox);
           return combobox;
         }
@@ -330,7 +332,7 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    * @protected
    */
   get _comboboxNode() {
-    return /** @type {HTMLElement} */ (this.querySelector('[slot="input"]'));
+    return /** @type {HTMLElement} */ this.querySelector('[slot="input"]');
   }
 
   /**
@@ -349,11 +351,12 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    */
   get _inputNode() {
     if (this._ariaVersion === '1.1' && this._comboboxNode) {
-      return /** @type {HTMLInputElement} */ (
-        this._comboboxNode.querySelector('input') || this._comboboxNode
+      return (
+        /** @type {HTMLInputElement} */ this._comboboxNode.querySelector('input') ||
+        this._comboboxNode
       );
     }
-    return /** @type {HTMLInputElement} */ (this._comboboxNode);
+    return /** @type {HTMLInputElement} */ this._comboboxNode;
   }
 
   /**
@@ -369,7 +372,7 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    * @protected
    */
   get _overlayReferenceNode() {
-    return /** @type {ShadowRoot} */ (this.shadowRoot).querySelector('.input-group__container');
+    return /** @type {ShadowRoot} */ this.shadowRoot.querySelector('.input-group__container');
   }
 
   /**
@@ -385,9 +388,9 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    * @protected
    */
   get _listboxNode() {
-    return /** @type {LionOptions} */ (
-      (this._overlayCtrl && this._overlayCtrl.contentNode) ||
-        Array.from(this.children).find(child => child.slot === 'listbox')
+    return (
+      /** @type {LionOptions} */ (this._overlayCtrl && this._overlayCtrl.contentNode) ||
+      Array.from(this.children).find((child) => child.slot === 'listbox')
     );
   }
 
@@ -448,7 +451,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    * @private
    */
   __listboxContentChanged;
-
   constructor() {
     super();
     /**
@@ -519,13 +521,11 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
      */
     this._textboxOnKeydown = this._textboxOnKeydown.bind(this);
   }
-
   connectedCallback() {
     super.connectedCallback();
     if (this._selectionDisplayNode) {
       this._selectionDisplayNode.comboboxElement = this;
     }
-
     if (this.disabled || this.readOnly) {
       this.__setComboboxDisabledAndReadOnly();
     }
@@ -546,7 +546,7 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
       if (this._syncToTextboxCondition(this.modelValue, this._oldModelValue)) {
         if (!this.multipleChoice) {
           const textboxValue = this._getTextboxValueFromOption(
-            this.formElements[/** @type {number} */ (this.checkedIndex)],
+            this.formElements[/** @type {number} */ this.checkedIndex],
           );
           this._setTextboxValue(textboxValue);
         } else {
@@ -580,7 +580,7 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    */
   __unsyncCheckedIndexOnInputChange() {
     const autoselect = this._autoSelectCondition();
-    const checkedElement = this.formElements[/** @type {number} */ (this.checkedIndex)];
+    const checkedElement = this.formElements[/** @type {number} */ this.checkedIndex];
     if (!this.multipleChoice && !autoselect && checkedElement) {
       const textboxValue = this._getTextboxValueFromOption(checkedElement);
       if (!this._inputNode.value.startsWith(textboxValue)) {
@@ -594,20 +594,17 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    */
   updated(changedProperties) {
     super.updated(changedProperties);
-
     if (changedProperties.has('__shouldAutocompleteNextUpdate')) {
       // This check should take place before those below of 'opened' and
       // '__shouldAutocompleteNextUpdate', to avoid race conditions
       this.__unsyncCheckedIndexOnInputChange();
     }
-
     if (changedProperties.has('opened')) {
       if (this.opened) {
         // Note we always start with -1 as a 'fundament'
         // For [autocomplete="inline|both"] activeIndex might be changed by a match
         this.activeIndex = -1;
       }
-
       if (!this.opened && changedProperties.get('opened') !== undefined) {
         this.__onOverlayClose();
         this.activeIndex = -1;
@@ -628,7 +625,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
       this.__shouldAutocompleteNextUpdate = false;
       this.__listboxContentChanged = false;
     }
-
     if (typeof this._selectionDisplayNode?.onComboboxElementUpdated === 'function') {
       this._selectionDisplayNode.onComboboxElementUpdated(changedProperties);
     }
@@ -648,7 +644,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
     if (typeof inputValue === 'string' && typeof textboxValue === 'string') {
       idx = inputValue.toLowerCase().indexOf(textboxValue.toLowerCase());
     }
-
     if (this.matchMode === 'all') {
       return idx > -1; // matches part of word
     }
@@ -700,7 +695,7 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
       return true;
     }
     // when no keyboard action involved (on focused change), return current opened state
-    return /** @type {boolean} */ (this.opened);
+    return /** @type {boolean} */ this.opened;
   }
 
   /**
@@ -793,7 +788,7 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
         })
       ) {
         this._inputNode.value = this._getTextboxValueFromOption(
-          this.formElements[/** @type {number} */ (this.checkedIndex)],
+          this.formElements[/** @type {number} */ this.checkedIndex],
         );
       }
     } else {
@@ -816,7 +811,7 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    * @param {FormControlHost} target
    */
   _repropagationCondition(target) {
-    return super._repropagationCondition(target) || this.formElements.every(el => !el.checked);
+    return super._repropagationCondition(target) || this.formElements.every((el) => !el.checked);
   }
 
   /* eslint-disable no-param-reassign */
@@ -847,13 +842,12 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
     if (option.textContent) {
       const a11ySpan = document.createElement('span');
       a11ySpan.setAttribute('aria-label', option.textContent.replace(/\s+/g, ' '));
-      Array.from(option.childNodes).forEach(childNode => {
+      Array.from(option.childNodes).forEach((childNode) => {
         a11ySpan.appendChild(childNode);
       });
       option.appendChild(a11ySpan);
-
       matchA11ySpanReverseFns.set(option, () => {
-        Array.from(a11ySpan.childNodes).forEach(childNode => {
+        Array.from(a11ySpan.childNodes).forEach((childNode) => {
           option.appendChild(childNode);
         });
         if (option.contains(a11ySpan)) {
@@ -886,7 +880,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
   // eslint-disable-next-line class-methods-use-this
   _unhighlightMatchedOption(option) {
     unmakeMatchingTextBold(option);
-
     if (matchA11ySpanReverseFns.has(option)) {
       matchA11ySpanReverseFns.get(option)();
     }
@@ -931,16 +924,13 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
     // (which already fire an event via child repropagation) vs. a value change while staying unmatched.
     const prevCheckedIndexForCustomEvent = this.checkedIndex;
     const prevModelValueForCustomEvent = this.__prevModelValueForCustomEvent;
-
     const isSelectionEmpty = this._inputNode.selectionStart === this._inputNode.selectionEnd;
     const hasSelection =
       !isSelectionEmpty && this._inputNode.value.length !== this._inputNode.selectionStart;
-
     const inputValue = this._inputNode.value;
     const inputSelectionStart = this._inputNode.selectionStart;
     const curValue =
       hasSelection && inputSelectionStart ? inputValue.slice(0, inputSelectionStart) : inputValue;
-
     const prevValue =
       hasSelection || this.__hadSelectionLastAutofill
         ? this.__prevCboxValueNonSelected
@@ -954,12 +944,14 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
     const visibleOptions = [];
     /** Whether autofill (activeIndex/checkedIndex and ) has taken place in this 'cycle' */
     let hasAutoFilled = false;
-    const userIntendsInlineAutoFill = this.__computeUserIntendsAutoFill({ prevValue, curValue });
+    const userIntendsInlineAutoFill = this.__computeUserIntendsAutoFill({
+      prevValue,
+      curValue,
+    });
     const isInlineAutoFillCandidate =
       this.autocomplete === 'both' || this.autocomplete === 'inline';
     const autoselect = this._autoSelectCondition();
     const noFilter = this.autocomplete === 'inline' || this.autocomplete === 'none';
-
     this.formElements.forEach((/** @type {OptionWithFilterFn} */ option, i) => {
       // [1]. Decide whether option should be shown
       const matches = this.matchCondition(option, curValue);
@@ -979,7 +971,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
           }
           hasAutoFilled = true;
         };
-
         if (userIntendsInlineAutoFill) {
           // We should never directly select when removing chars or starting a new word
           // This leads to bad UX and unwanted syncing of modelValue (based on checkedIndex)
@@ -1059,7 +1050,10 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
       this.dispatchEvent(
         new CustomEvent('model-value-changed', {
           bubbles: true,
-          detail: { formPath: [this], isTriggeredByUser: true },
+          detail: {
+            formPath: [this],
+            isTriggeredByUser: true,
+          },
         }),
       );
     }
@@ -1121,12 +1115,12 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    */
   // eslint-disable-next-line class-methods-use-this
   _defineOverlayConfig() {
-    return /** @type {OverlayConfig} */ ({
+    return /** @type {OverlayConfig} */ {
       ...withDropdownConfig(),
       elementToFocusAfterHide: undefined,
       invokerNode: this._comboboxNode,
       visibilityTriggerFunction: undefined,
-    });
+    };
   }
 
   /**
@@ -1193,7 +1187,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
         if (this.opened) {
           ev.preventDefault();
         }
-
         if (
           !this.requireOptionMatch &&
           this.multipleChoice &&
@@ -1228,9 +1221,13 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    * @param {{phase?:string}} config
    * @protected
    */
-  // eslint-disable-next-line no-unused-vars
   _syncToTextboxCondition(modelValue, oldModelValue, { phase } = {}) {
-    return this.autocomplete === 'both' || this.autocomplete === 'inline' || !this.focused;
+    return (
+      phase === 'overlay-close' ||
+      this.autocomplete === 'both' ||
+      this.autocomplete === 'inline' ||
+      !this.focused
+    );
   }
 
   /**
@@ -1243,10 +1240,10 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
   // eslint-disable-next-line no-unused-vars
   _syncToTextboxMultiple(modelValue, oldModelValue = []) {
     if (this.requireOptionMatch) {
-      const diff = modelValue.filter(x => !oldModelValue.includes(x));
+      const diff = modelValue.filter((x) => !oldModelValue.includes(x));
       const newValue = this.formElements
-        .filter(option => diff.includes(option.choiceValue))
-        .map(option => this._getTextboxValueFromOption(option))
+        .filter((option) => diff.includes(option.choiceValue))
+        .map((option) => this._getTextboxValueFromOption(option))
         .join(' ');
       this._setTextboxValue(newValue);
     }
@@ -1256,7 +1253,7 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    * @override FormControlMixin - add form-control to [slot=input] instead of _inputNode
    */
   _enhanceLightDomClasses() {
-    const formControl = /** @type {HTMLInputElement} */ (this.querySelector('[slot=input]'));
+    const formControl = /** @type {HTMLInputElement} */ this.querySelector('[slot=input]');
     if (formControl) {
       formControl.classList.add('form-control');
     }
@@ -1274,13 +1271,11 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
       this._comboboxNode.toggleAttribute('readonly', this.readOnly);
       this._comboboxNode.setAttribute('aria-readonly', `${this.readOnly}`);
     }
-
     if (this._inputNode) {
       // N.B. in case ._inputNode === ._comboboxNode (we have <input role="combobox">)
       // this value has already been set above. This is fine, as a toggle with boolean flag is idempotent.
       this._inputNode.toggleAttribute('disabled', this.disabled);
       this._inputNode.toggleAttribute('readOnly', this.readOnly);
-
       this._inputNode.setAttribute('aria-readonly', `${this.readOnly}`);
       this._inputNode.tabIndex = this.disabled ? -1 : 0;
     }
@@ -1295,18 +1290,14 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
 
     this._comboboxNode.setAttribute('role', 'combobox');
     this._comboboxNode.setAttribute('aria-haspopup', 'listbox');
-
     this._inputNode.setAttribute('aria-autocomplete', this.autocomplete);
     this._comboboxNode.setAttribute('aria-controls', this._listboxNode.id);
-
     if (this._ariaVersion === '1.1') {
       this._comboboxNode.setAttribute('aria-owns', this._listboxNode.id);
     } else {
       this._inputNode.setAttribute('aria-owns', this._listboxNode.id);
     }
-
     this._listboxNode.setAttribute('aria-labelledby', this._labelNode.id);
-
     this._inputNode.addEventListener('keydown', this._listboxOnKeyDown);
     this._inputNode.addEventListener('input', this._textboxOnInput);
     this._inputNode.addEventListener('keydown', this._textboxOnKeydown);
@@ -1341,7 +1332,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
   _textboxOnClick(ev) {
     this.opened = this._showOverlayCondition({});
   }
-
   clear() {
     this.value = '';
     super.clear();

package/components/combobox/src/utils/makeMatchingTextBold.js

@@ -5,7 +5,7 @@ const matchReverseFns = new WeakMap();
  * @param {string} matchingString
  */
 export function makeMatchingTextBold(root, matchingString) {
-  Array.from(root.childNodes).forEach(childNode => {
+  Array.from(root.childNodes).forEach((childNode) => {
     if (childNode.nodeName === '#text') {
       // check for match based on nodeValue
 
@@ -14,7 +14,6 @@ export function makeMatchingTextBold(root, matchingString) {
       const re = new RegExp(`^(.*?)(${escapedString})(.*)$`, 'i');
       // @ts-ignore
       const match = childNode.nodeValue.match(re);
-
       if (match) {
         // 1. textContent before match
         const textBefore = document.createTextNode(match[1]);
@@ -29,9 +28,7 @@ export function makeMatchingTextBold(root, matchingString) {
         // 3. textContent after match
         const textAfter = document.createTextNode(match[3]);
         root.appendChild(textAfter);
-
         root.removeChild(childNode);
-
         matchReverseFns.set(root, () => {
           root.appendChild(childNode);
           if (root.contains(textBefore) && textBefore.parentNode !== null) {
@@ -58,7 +55,7 @@ export function unmakeMatchingTextBold(root) {
   if (matchReverseFns.has(root)) {
     matchReverseFns.get(root)();
   }
-  Array.from(root.childNodes).forEach(childNode => {
+  Array.from(root.childNodes).forEach((childNode) => {
     if (childNode.nodeName === '#text') {
       if (matchReverseFns.has(childNode)) {
         matchReverseFns.get(childNode)();

package/components/combobox/src/validators.js

@@ -1,6 +1,5 @@
 /* eslint-disable max-classes-per-file */
 import { Unparseable, Validator } from '@lion/ui/form-core.js';
-
 export class MatchesOption extends Validator {
   static get validatorName() {
     return 'MatchesOption';

package/components/combobox/test/lion-combobox-integrations.test.js

@@ -4,8 +4,9 @@ import '@lion/ui/define/lion-combobox.js';
 import { runCustomChoiceGroupMixinSuite } from '../../form-core/test-suites/choice-group/CustomChoiceGroupMixin.suite.js';
 import { LionCombobox } from '../src/LionCombobox.js';
 import { ScopedStylesController } from '../../core/src/ScopedStylesController.js';
-
-runListboxMixinSuite({ tagString: 'lion-combobox' });
+runListboxMixinSuite({
+  tagString: 'lion-combobox',
+});
 runCustomChoiceGroupMixinSuite({
   parentTagString: 'lion-combobox',
   childTagString: 'lion-option',
@@ -20,13 +21,12 @@ class ComboboxWithScopedStyles extends LionCombobox {
       }
     `;
   }
-
   constructor() {
     super();
     this.scopedStylesController = new ScopedStylesController(this);
   }
 }
-
 customElements.define('combobox-with-scoped-styles', ComboboxWithScopedStyles);
-
-runListboxMixinSuite({ tagString: 'combobox-with-scoped-styles' });
+runListboxMixinSuite({
+  tagString: 'combobox-with-scoped-styles',
+});