@lion/ui 0.21.1 → 0.23.0

package/README.md

@@ -112,6 +112,41 @@ They provide an unopinionated, white-label layer that can be extended to your ow
 npm i @lion/ui
 ```
 
+### Temporary phone-number metadata workaround
+
+We temporarily vendor `awesome-phonenumber@7.9.0-tlouisse.libphonenumber-9.0.41`,
+rebuilt from Google's **libphonenumber v9.0.41**, instead of the registry dependency.
+This includes updated phone-number metadata, such as the French Guiana premium-rate
+example `+594890123456`, which the previous `awesome-phonenumber@7.8.0` rejected.
+We keep this workaround until the next upstream awesome-phonenumber release
+incorporating the required metadata is available.
+
+The artifact lives in `packages/ui/vendor/awesome-phonenumber-7.9.0-tlouisse.libphonenumber-9.0.41.tgz`.
+`@lion/ui` uses a package-relative `file:vendor/...` dependency and bundles the
+installed `awesome-phonenumber` package when published. This preserves normal
+consumer installation and lazy imports without access to the Lion checkout.
+The private root also declares the same tarball as a development dependency so
+npm installs it during a clean workspace install rather than assuming the
+workspace already contains its bundled dependencies. The legacy docs dependency
+keeps its separate registry version.
+The temporary `prepack` helper verifies the checksum and installs only the tarball
+in an isolated temporary prefix using npm's offline mode (without running dependency
+scripts or writing a lockfile). It copies that installed package into the local
+bundle and removes the temporary prefix, because npm packing does not include
+hoisted workspace bundles. Other Lion dependencies remain unchanged.
+The original MIT license and Google's Apache-2.0 notices remain in the artifact
+and bundled package. See [vendor provenance](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/packages/ui/vendor/README.md) for the
+source commit, checksum, and reproducible packaging instructions.
+
+Once the next upstream awesome-phonenumber release includes the required
+metadata, restore the normal registry dependency in `packages/ui/package.json`,
+remove `awesome-phonenumber` from `bundledDependencies`, remove the vendor asset
+and its `files` entry, remove the root development dependency, and regenerate
+`package-lock.json`. Remove the temporary `prepack` lifecycle and
+`scripts/prepare-vendored-phone.js` helper as well. Keep the metadata
+regression test and rerun the phone tests, typechecks, and packed-consumer install
+check before removing this workaround documentation.
+
 ## How to use
 
 ### Extend a Web Component

package/components/accordion/src/LionAccordion.js

@@ -98,6 +98,24 @@ export class LionAccordion extends LitElement {
     return this.__expanded;
   }
 
+  /**
+   * @type {number}
+   * @private
+   */
+  __focusedIndex = -1;
+
+  /**
+   * @type {number[]}
+   * @private
+   */
+  __expanded = [];
+
+  /**
+   * @type {StoreEntry[]}
+   * @private
+   */
+  __store;
+
   constructor() {
     super();
     this.styles = {};
@@ -107,23 +125,7 @@ export class LionAccordion extends LitElement {
      */
     this.exclusive = false;
 
-    /**
-     * @type {StoreEntry[]}
-     * @private
-     */
     this.__store = [];
-
-    /**
-     * @type {number}
-     * @private
-     */
-    this.__focusedIndex = -1;
-
-    /**
-     * @type {number[]}
-     * @private
-     */
-    this.__expanded = [];
   }
 
   /** @param {import('lit').PropertyValues } changedProperties */

package/components/button/test-suites/LionButton.suite.js

@@ -279,6 +279,7 @@ export function LionButtonSuite({ klass = LionButton } = {}) {
 
         sameProperties.forEach(property => {
           it(`has same value of the property "${property}" as in native button event`, () => {
+            // @ts-ignore [dynamic-key-access-in-test]
             expect(lionButtonEvent[property]).to.equal(nativeButtonEvent[property]);
           });
         });

package/components/calendar/src/LionCalendar.js

@@ -169,6 +169,27 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     };
   }
 
+  /** @private */
+  __today;
+
+  /** @private */
+  __connectedCallbackDone;
+
+  /** @private */
+  __eventsAdded;
+
+  /** @private */
+  __boundKeyboardNavigationEvent;
+
+  /** @private */
+  __boundClickDateDelegation;
+
+  /** @private */
+  __boundFocusDateDelegation;
+
+  /** @private */
+  __boundBlurDateDelegation;
+
   constructor() {
     super();
     /** @type {{months: Month[]}}
@@ -187,7 +208,6 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
 
     this.firstDayOfWeek = 0;
     this.weekdayHeaderNotation = 'short';
-    /** @private */
     this.__today = normalizeDateTime(new Date());
     /** @type {Date} */
     this.centralDate = this.__today;
@@ -196,18 +216,12 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
      * @private
      */
     this.__focusedDate = null;
-    /** @private */
     this.__connectedCallbackDone = false;
-    /** @private */
     this.__eventsAdded = false;
     this.locale = '';
-    /** @private */
     this.__boundKeyboardNavigationEvent = this.__keyboardNavigationEvent.bind(this);
-    /** @private */
     this.__boundClickDateDelegation = this.__clickDateDelegation.bind(this);
-    /** @private */
     this.__boundFocusDateDelegation = this.__focusDateDelegation.bind(this);
-    /** @private */
     this.__boundBlurDateDelegation = this.__focusDateDelegation.bind(this);
   }
 
@@ -928,6 +942,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     if (type !== 'Date') {
       tmpDate.setDate(1);
     }
+    // @ts-ignore [dynamic-date-accessor]
     tmpDate[`set${type}`](tmpDate[`get${type}`]() + modify);
     // if we've reset the day count,
     // restore day count as best we can
@@ -935,6 +950,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
       const maxDays = new Date(tmpDate.getFullYear(), tmpDate.getMonth() + 1, 0).getDate();
       tmpDate.setDate(Math.min(this.centralDate.getDate(), maxDays));
     }
+    // @ts-ignore [dynamic-property-access]
     this[dateType] = tmpDate;
   }
 

package/components/checkbox-group/src/LionCheckboxIndeterminate.js

@@ -267,7 +267,7 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
     this.removeEventListener('form-element-register', this._onRequestToAddFormElement);
   }
 
-  /** @param {import('lit-element').PropertyValues } changedProperties */
+  /** @param {import('lit').PropertyValues } changedProperties */
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
     this._setOldState();
@@ -276,7 +276,7 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
     }
   }
 
-  /** @param {import('lit-element').PropertyValues } changedProperties */
+  /** @param {import('lit').PropertyValues } changedProperties */
   updated(changedProperties) {
     super.updated(changedProperties);
 

package/components/combobox/src/LionCombobox.js

@@ -4,15 +4,19 @@ import { LionListbox } from '@lion/ui/listbox.js';
 import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
 import { OverlayMixin, withDropdownConfig } from '@lion/ui/overlays.js';
 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';
-import { CustomChoiceGroupMixin } from '../../form-core/src/choice-group/CustomChoiceGroupMixin.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
@@ -413,6 +417,42 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
     this.allowCustomChoice = !value;
   }
 
+  /**
+   * For optimal support, we allow aria v1.1 on newer browsers
+   * @type {'1.1'|'1.0'}
+   * @protected
+   */
+  _ariaVersion;
+
+  /**
+   * @private
+   */
+  __prevCboxValueNonSelected;
+
+  /**
+   * @private
+   */
+  __prevCboxValue;
+
+  /**
+   * Tracks modelValue across autocompletion cycles so a manual model-value-changed event can be
+   * dispatched for custom (unmatched) values, independent of autocomplete mode.
+   * @private
+   */
+  __prevModelValueForCustomEvent;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  __hadUserIntendsInlineAutoFill;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  __listboxContentChanged;
+
   constructor() {
     super();
     /**
@@ -449,11 +489,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
      */
     this.selectionFollowsFocus = true;
     this.defaultValidators.push(new MatchesOption());
-    /**
-     * For optimal support, we allow aria v1.1 on newer browsers
-     * @type {'1.1'|'1.0'}
-     * @protected
-     */
     this._ariaVersion = browserDetection.isChromium ? '1.1' : '1.0';
     /**
      * @configure ListboxMixin
@@ -465,23 +500,10 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
      * @protected
      */
     this._noTypeAhead = true;
-    /**
-     * @private
-     */
     this.__prevCboxValueNonSelected = '';
-    /**
-     * @private
-     */
     this.__prevCboxValue = '';
-    /**
-     * @type {boolean}
-     * @private
-     */
+    this.__prevModelValueForCustomEvent = '';
     this.__hadUserIntendsInlineAutoFill = false;
-    /**
-     * @type {boolean}
-     * @private
-     */
     this.__listboxContentChanged = false;
 
     /** @type {EventListener}
@@ -909,6 +931,11 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    * @protected
    */
   _handleAutocompletion() {
+    // Captured before any mutation in this cycle, so we can detect check-state transitions
+    // (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;
@@ -1016,13 +1043,32 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
     // [7]. If no autofill took place, we are left with the previously matched option; correct this
     if (autoselect && !hasAutoFilled && !this.multipleChoice) {
       // This means there is no match for checkedIndex
-      this.setCheckedIndex(-1);
+      this.setCheckedIndex(-1); // This causes modelValue to update
       if (prevValue !== curValue) {
         this.activeIndex = -1;
       }
       this.modelValue = this.parser(inputValue);
     }
 
+    // [7b]. Fire model-value-changed for custom (unmatched) values, regardless of autocomplete mode.
+    // Only when checkedIndex stayed -1 throughout this cycle: a transition into -1 already fires an
+    // event via child repropagation, so we avoid dispatching a duplicate here.
+    if (
+      !this.multipleChoice &&
+      !this.requireOptionMatch &&
+      this.checkedIndex === -1 &&
+      prevCheckedIndexForCustomEvent === -1 &&
+      this.modelValue !== prevModelValueForCustomEvent
+    ) {
+      this.dispatchEvent(
+        new CustomEvent('model-value-changed', {
+          bubbles: true,
+          detail: { formPath: [this], isTriggeredByUser: true },
+        }),
+      );
+    }
+    this.__prevModelValueForCustomEvent = this.modelValue;
+
     // [8]. These values will help computing autofill intentions next autocomplete cycle
     this.__prevCboxValueNonSelected = curValue;
     // See test 'computation of "user intends autofill" works correctly after autofill'
@@ -1186,9 +1232,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
+    );
   }
 
   /**

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

@@ -1,20 +1,20 @@
-import { defineCE, expect, fixture, html, unsafeStatic, waitUntil } from '@open-wc/testing';
-import { Required, Unparseable } from '@lion/ui/form-core.js';
-import { sendKeys } from '@web/test-runner-commands';
+import {
+  getComboboxMembers,
+  getFilteredOptionValues,
+  mimicKeyPress,
+  mimicUserTyping,
+  mimicUserTypingAdvanced,
+} from '@lion/ui/combobox-test-helpers.js';
 import { LionCombobox } from '@lion/ui/combobox.js';
 import { browserDetection, SlotMixin } from '@lion/ui/core.js';
 import '@lion/ui/define/lion-combobox.js';
 import '@lion/ui/define/lion-listbox.js';
 import '@lion/ui/define/lion-option.js';
+import { Required, Unparseable } from '@lion/ui/form-core.js';
+import { defineCE, expect, fixture, html, unsafeStatic, waitUntil } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
 import { LitElement, nothing } from 'lit';
 import sinon from 'sinon';
-import {
-  getFilteredOptionValues,
-  mimicUserTypingAdvanced,
-  getComboboxMembers,
-  mimicUserTyping,
-  mimicKeyPress,
-} from '@lion/ui/combobox-test-helpers.js';
 
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 
@@ -812,6 +812,134 @@ describe('lion-combobox', () => {
       expect(_inputNode.value).to.equal('Foo');
     });
 
+    it('fires "model-value-changed" on every textbox change when requireOptionMatch is false and autocomplete is both', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" autocomplete="both" .requireOptionMatch="${false}">
+            <lion-option checked .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      const fake = sinon.fake(ev => ev.target.modelValue);
+      el.addEventListener('model-value-changed', fake);
+
+      await mimicUserTyping(el, 'Foo');
+      await el.updateComplete;
+      expect(fake).to.have.been.calledThrice;
+      expect(fake.firstCall.returnValue).to.equal('F');
+      expect(fake.secondCall.returnValue).to.equal('Fo');
+      expect(fake.thirdCall.returnValue).to.equal('Foo');
+      expect(el.modelValue).to.equal('Foo');
+    });
+
+    it('fires "model-value-changed" on every textbox change when requireOptionMatch is false and autocomplete is none', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" autocomplete="none" .requireOptionMatch="${false}">
+            <lion-option checked .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      const fake = sinon.fake(ev => ev.target.modelValue);
+      el.addEventListener('model-value-changed', fake);
+
+      await mimicUserTyping(el, 'Foo');
+      await el.updateComplete;
+      expect(fake.callCount).to.equal(4);
+      expect(fake.firstCall.returnValue).to.equal('');
+      expect(fake.secondCall.returnValue).to.equal('F');
+      expect(fake.thirdCall.returnValue).to.equal('Fo');
+      expect(fake.getCall(3).returnValue).to.equal('Foo');
+      expect(el.modelValue).to.equal('Foo');
+    });
+
+    it('does not fire "model-value-changed" when requireOptionMatch is false but the textbox value did not change', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" autocomplete="none" .requireOptionMatch="${false}">
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+      await mimicUserTyping(el, 'Foo');
+      await el.updateComplete;
+
+      const spy = sinon.spy();
+      el.addEventListener('model-value-changed', spy);
+
+      // Re-triggering autocompletion with the exact same textbox value should not dispatch again
+      el.__shouldAutocompleteNextUpdate = true;
+      await el.updateComplete;
+
+      expect(spy).to.not.have.been.called;
+    });
+
+    it('fires "model-value-changed" via checked option repropagation (not the manual dispatch) when requireOptionMatch is true', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" autocomplete="both">
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+      const spy = sinon.spy();
+      el.addEventListener('model-value-changed', spy);
+
+      await mimicUserTyping(el, 'cha');
+      await el.updateComplete;
+      expect(el.modelValue).to.equal('Chard');
+      expect(spy).to.have.been.calledOnce;
+
+      spy.resetHistory();
+      // No option matches "xyz", so checkedIndex stays -1 and requireOptionMatch is true:
+      // no event should be manually dispatched (normal Unparseable flow, no double event)
+      await mimicUserTyping(el, 'xyz');
+      await el.updateComplete;
+      expect(el.modelValue instanceof Unparseable).to.be.true;
+      expect(spy).to.have.been.calledOnce;
+    });
+
+    it('fires "model-value-changed" via checked option repropagation (not the manual dispatch) when requireOptionMatch is false and no option matches the input', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" autocomplete="both">
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      el.requireOptionMatch = false;
+      await el.updateComplete;
+
+      const spy = sinon.spy();
+      el.addEventListener('model-value-changed', spy);
+
+      // No option matches "Chards", so checkedIndex becomes -1 and requireOptionMatch is false:
+      // no event should be manually dispatched (normal Unparseable flow, no double event)
+      await mimicUserTyping(el, 'Chicorys');
+      await el.updateComplete;
+      expect(el.checkedIndex).to.equal(-1);
+      expect(spy.args.length).to.equal(3);
+      expect(spy.args[2][0].target.modelValue).to.equal('Chicorys');
+    });
+
     it("doesn't select any similar options after using delete when requireOptionMatch is false", async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
@@ -1264,6 +1392,37 @@ describe('lion-combobox', () => {
       expect(el.opened).to.equal(true);
     });
 
+    it('syncs a manually checked selection on overlay close while the input remains focused', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" autocomplete="list">
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+          </lion-combobox>
+        `)
+      );
+      const { _inputNode } = getComboboxMembers(el);
+
+      _inputNode.focus();
+      el.opened = true;
+      await el.updateComplete;
+      expect(el.opened).to.equal(true);
+      expect(isActiveElement(_inputNode)).to.be.true;
+
+      el.setCheckedIndex(0);
+      await el.updateComplete;
+
+      expect(el.modelValue).to.equal('Artichoke');
+      expect(el.checkedIndex).to.equal(0);
+      expect(_inputNode.value).to.equal('');
+
+      el.opened = false;
+      await el.updateComplete;
+
+      expect(_inputNode.value).to.equal('Artichoke');
+      expect(isActiveElement(_inputNode)).to.be.true;
+    });
+
     it('hides (and clears) overlay on [Escape]', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
@@ -2607,8 +2766,8 @@ describe('lion-combobox', () => {
           }
 
           /**
-           * @param {?} modelValue
-           * @param {?} oldModelValue
+           * @param {any} modelValue
+           * @param {any} oldModelValue
            */
           // eslint-disable-next-line no-unused-vars
           _syncToTextboxMultiple(modelValue, oldModelValue) {
@@ -2659,7 +2818,7 @@ describe('lion-combobox', () => {
             /**
              * Return the value to be used for the input value
              * @overridable
-             * @param {?} option
+             * @param {any} option
              * @returns {string}
              */
             // eslint-disable-next-line class-methods-use-this
@@ -2709,7 +2868,7 @@ describe('lion-combobox', () => {
             /**
              * Return the value to be used for the input value
              * @overridable
-             * @param {?} option
+             * @param {any} option
              * @returns {string}
              */
             // eslint-disable-next-line class-methods-use-this
@@ -2759,7 +2918,7 @@ describe('lion-combobox', () => {
             /**
              * Return the value to be used for the input value
              * @overridable
-             * @param {?} option
+             * @param {any} option
              * @returns {string}
              */
             // eslint-disable-next-line class-methods-use-this
@@ -2809,7 +2968,7 @@ describe('lion-combobox', () => {
             /**
              * Return the value to be used for the input value
              * @overridable
-             * @param {?} option
+             * @param {any} option
              * @returns {string}
              */
             // eslint-disable-next-line class-methods-use-this
@@ -3227,6 +3386,7 @@ describe('lion-combobox', () => {
         const [el, options] = await fruitFixture({ autocomplete: 'both', matchMode: 'all' });
         await mimicUserTyping(/** @type {LionCombobox} */ (el), 'choke');
         await el.updateComplete;
+        // @ts-ignore [dynamic-key-access-in-test]
         const labelledElement = options[0].querySelector('span[aria-label="Artichoke"]');
         expect(labelledElement).to.not.be.null;
         expect(labelledElement.innerText).to.equal('Artichoke');

package/components/core/src/DisabledMixin.js

@@ -8,9 +8,9 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
  * @type {DisabledMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
-const DisabledMixinImplementation = superclass =>
+// prettier-ignore
+const DisabledMixinImplementation = /** @type {DisabledMixin} */ (superclass =>
   // eslint-disable-next-line no-shadow
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class extends superclass {
     static get properties() {
       return {
@@ -21,8 +21,9 @@ const DisabledMixinImplementation = superclass =>
       };
     }
 
-    constructor() {
-      super();
+    /** @param {...any} args */
+    constructor(...args) {
+      super(...args);
       /** @protected */
       this._requestedToBeDisabled = false;
       /** @private */
@@ -80,6 +81,6 @@ const DisabledMixinImplementation = superclass =>
 
       super.click();
     }
-  };
+  });
 
 export const DisabledMixin = dedupeMixin(DisabledMixinImplementation);

package/components/core/src/DisabledWithTabIndexMixin.js

@@ -9,9 +9,9 @@ import { DisabledMixin } from './DisabledMixin.js';
  * @type {DisabledWithTabIndexMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
-const DisabledWithTabIndexMixinImplementation = superclass =>
+// prettier-ignore
+const DisabledWithTabIndexMixinImplementation = /** @type {DisabledWithTabIndexMixin} */ (superclass =>
   // eslint-disable-next-line no-shadow
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class extends DisabledMixin(superclass) {
     static get properties() {
       return {
@@ -94,7 +94,7 @@ const DisabledWithTabIndexMixinImplementation = superclass =>
       }
     }
 
-    /** @param {import('lit-element').PropertyValues } changedProperties */
+    /** @param {import('lit').PropertyValues } changedProperties */
     firstUpdated(changedProperties) {
       super.firstUpdated(changedProperties);
       // for ShadyDom the timing is a little different and we need to make sure
@@ -103,6 +103,6 @@ const DisabledWithTabIndexMixinImplementation = superclass =>
         this.__internalSetTabIndex(-1);
       }
     }
-  };
+  });
 
 export const DisabledWithTabIndexMixin = dedupeMixin(DisabledWithTabIndexMixinImplementation);