@lion/ui 0.21.0 → 0.21.1-menu-system.0

package/README.md

@@ -37,7 +37,7 @@
   <a href="https://lion.js.org/blog/">Blog</a>
 </p>
 
-**Lion is a set of highly performant, accessible and flexible Web Components.!**
+**Lion is a set of highly performant, accessible and flexible Web Components!**
 
 They provide an unopinionated, white-label layer that can be extended to your own layer of components.
 

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/src/LionButton.js

@@ -220,4 +220,8 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
       this.click();
     }
   }
+
+  // we want to be able to identify LionButtons w/o instanceof (for perf (loose dep) and dual version support),
+  // so we use a static property for that that doesn't get renamed by minifiers
+  static ['_$isLionButton$'] = true;
 }

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,9 +4,9 @@ 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();
 
@@ -413,6 +413,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 +485,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 +496,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 +927,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 +1039,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'

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`
@@ -2607,8 +2735,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 +2787,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 +2837,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 +2887,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 +2937,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 +3355,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);

package/components/core/src/ScopedElementsMixin.js

@@ -66,7 +66,7 @@ const ScopedElementsMixinImplementation = superclass =>
         // with the same name. (like multiple versions of lion extension layers).
         // If we want to support this, we must re-introduce the shim-behavior of ScopedElementsMixin v1
         // to make this work with ssr as well.
-        // @ts-expect-error
+        // @ts-ignore [registry is provided by the scoped-elements polyfill]
         this.registry = customElements;
         // @ts-expect-error
         for (const [name, klass] of Object.entries(this.constructor.scopedElements || {})) {
@@ -88,7 +88,8 @@ const ScopedElementsMixinImplementation = superclass =>
      * @param {typeof HTMLElement} classToBeRegistered
      */
     defineScopedElement(tagName, classToBeRegistered) {
-      const registeredClass = this.registry.get(tagName);
+      const { registry } = /** @type {{ registry: CustomElementRegistry }} */ (this);
+      const registeredClass = registry.get(tagName);
       const isNewClassWithSameName = registeredClass && registeredClass !== classToBeRegistered;
       if (!supportsScopedRegistry() && isNewClassWithSameName) {
         // eslint-disable-next-line no-console
@@ -104,9 +105,9 @@ const ScopedElementsMixinImplementation = superclass =>
         );
       }
       if (!registeredClass) {
-        return this.registry.define(tagName, classToBeRegistered);
+        return registry.define(tagName, classToBeRegistered);
       }
-      return this.registry.get(tagName);
+      return registry.get(tagName);
     }
 
     /**

package/components/core/src/SlotMixin.js

@@ -96,8 +96,8 @@ function determineSlotFunctionResultType(slotFunctionResult) {
  * @type {SlotMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<LitElement>} superclass
  */
-const SlotMixinImplementation = superclass =>
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+// prettier-ignore
+const SlotMixinImplementation = /** @type {SlotMixin} */ (superclass =>
   class SlotMixin extends superclass {
     /**
      * @return {SlotsMap}
@@ -106,8 +106,9 @@ const SlotMixinImplementation = superclass =>
       return {};
     }
 
-    constructor() {
-      super();
+    /** @param {...any} args */
+    constructor(...args) {
+      super(...args);
 
       /**
        * The roots that are used to do a rerender in.
@@ -160,7 +161,7 @@ const SlotMixinImplementation = superclass =>
 
     /**
      * Here we rerender slots defined with a `SlotRerenderObject`
-     * @param {import('lit-element').PropertyValues } changedProperties
+     * @param {import('lit').PropertyValues } changedProperties
      */
     update(changedProperties) {
       super.update(changedProperties);
@@ -360,6 +361,6 @@ const SlotMixinImplementation = superclass =>
     _isPrivateSlot(slotName) {
       return this.__privateSlots.has(slotName);
     }
-  };
+  });
 
 export const SlotMixin = dedupeMixin(SlotMixinImplementation);

package/components/core/src/browserDetection.js

@@ -25,7 +25,7 @@ function checkChrome(flavor = 'google-chrome') {
   const winNav = globalThis.navigator;
   const vendorName = winNav?.vendor;
   const isOpera =
-    typeof (/** @type {window & { opr?: boolean}} */ (globalThis).opr) !== 'undefined';
+    typeof (/** @type {typeof window & { opr?: boolean}} */ (globalThis).opr) !== 'undefined';
   // @ts-ignore
   const isIEedge = globalThis.userAgent?.indexOf('Edge') > -1;
   // @ts-ignore