@lion/ui 0.21.1 → 0.23.0

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

package/components/drawer/src/LionDrawer.js

@@ -34,11 +34,14 @@ export class LionDrawer extends LionCollapsible {
     };
   }
 
+  /** @private */
+  __toggle;
+
   constructor() {
     super();
 
-    /** @private */
     this.__toggle = () => {
+      // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; Lit reactive property: read through a typed local instead (e.g. const next = this.x ?? DEFAULT) - a class field would shadow the accessor Lit creates from static properties
       this.opened = !this.opened;
     };
   }

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

@@ -222,10 +222,11 @@ describe('<lion-form>', () => {
         </form>
       </lion-form>
     `);
+    expect(el.getAttribute('aria-invalid')).to.equal('false');
     const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
     const dispatchSpy = spy(el, 'dispatchEvent');
     button.click();
-    expect(dispatchSpy.args[0][0].type).to.equal('submit');
+    expect(dispatchSpy.args.map(args => args[0].type)).to.contain('submit');
     // @ts-ignore [allow-protected] in test
     expect(isActiveElement(el.formElements[1]._inputNode)).to.be.true;
   });
@@ -247,7 +248,7 @@ describe('<lion-form>', () => {
     const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
     const dispatchSpy = spy(el, 'dispatchEvent');
     button.click();
-    expect(dispatchSpy.args[0][0].type).to.equal('submit');
+    expect(dispatchSpy.args.map(args => args[0].type)).to.contain('submit');
     const fieldset = el.formElements[0];
     // @ts-ignore [allow-protected] in test
     expect(isActiveElement(fieldset.formElements[1]._inputNode)).to.be.true;
@@ -268,7 +269,7 @@ describe('<lion-form>', () => {
     const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
     const dispatchSpy = spy(el, 'dispatchEvent');
     button.click();
-    expect(dispatchSpy.args[0][0].type).to.equal('submit');
+    expect(dispatchSpy.args.map(args => args[0].type)).to.contain('submit');
     const fieldset = el.formElements[0];
     expect(isActiveElement(fieldset.formElements[0]._inputNode)).to.be.true;
   });

package/components/form-core/src/FocusMixin.js

@@ -19,8 +19,8 @@ function applyFocusVisiblePolyfillWhenNeeded(node) {
  * @type {FocusMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
-const FocusMixinImplementation = superclass =>
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+// prettier-ignore
+const FocusMixinImplementation = /** @type {FocusMixin} */ (superclass =>
   class FocusMixin extends superclass {
     /** @type {any} */
     static get properties() {
@@ -32,8 +32,9 @@ const FocusMixinImplementation = superclass =>
       };
     }
 
-    constructor() {
-      super();
+    /** @param {...any} args */
+    constructor(...args) {
+      super(...args);
 
       /**
        * Whether the focusable element within (`._focusableNode`) is focused.
@@ -216,7 +217,7 @@ const FocusMixinImplementation = superclass =>
         /** @type {EventListenerOrEventListenerObject} */ (this.__redispatchFocusout),
       );
     }
-  };
+  });
 
 /**
  * For browsers that not support the [spec](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible),

package/components/form-core/src/FormControlMixin.js

@@ -37,9 +37,9 @@ import { FormRegisteringMixin } from './registration/FormRegisteringMixin.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  * @type {FormControlMixin}
  */
-const FormControlMixinImplementation = superclass =>
+// prettier-ignore
+const FormControlMixinImplementation = /** @type {FormControlMixin} */ (superclass =>
   // eslint-disable-next-line no-shadow, no-unused-vars
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class FormControlMixin extends FormRegisteringMixin(DisabledMixin(SlotMixin(superclass))) {
     /** @type {any} */
     static get properties() {
@@ -166,6 +166,7 @@ const FormControlMixinImplementation = superclass =>
      * TODO: check if this is a false positive or if we can improve
      * @configure ReactiveElement
      */
+    // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field). Dot form kept deliberately: bracket access is exempt from property mangling (terser keep_quoted), which could split this property into two names. Upstream fix: declare an accessor in the parent type
     static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
 
     // N.B. add these label/helpText props for types + ce manifest output
@@ -541,7 +542,7 @@ const FormControlMixinImplementation = superclass =>
     }
 
     /**
-     * @return {TemplateResult | nothing}
+     * @return {TemplateResult | typeof nothing}
      * @protected
      */
     _inputGroupPrefixTemplate() {
@@ -568,7 +569,7 @@ const FormControlMixinImplementation = superclass =>
     }
 
     /**
-     * @return {TemplateResult | nothing}
+     * @return {TemplateResult | typeof nothing}
      * @protected
      */
     _inputGroupSuffixTemplate() {
@@ -986,6 +987,6 @@ const FormControlMixinImplementation = superclass =>
      */
     // eslint-disable-next-line class-methods-use-this
     _onLabelClick() {}
-  };
+  });
 
 export const FormControlMixin = dedupeMixin(FormControlMixinImplementation);

package/components/form-core/src/FormatMixin.js

@@ -58,8 +58,8 @@ import { ValidateMixin } from './validate/ValidateMixin.js';
  * @type {FormatMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
-const FormatMixinImplementation = superclass =>
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+// prettier-ignore
+const FormatMixinImplementation = /** @type {FormatMixin} */ (superclass =>
   class FormatMixin extends ValidateMixin(FormControlMixin(superclass)) {
     /** @type {any} */
     static get properties() {
@@ -144,12 +144,12 @@ const FormatMixinImplementation = superclass =>
      *   // only use digits
      *   return viewValue.replace(/\D/g, '');
      * }
+     * ```
      * @param {string} v - the raw value from the <input> after keyUp/Down event
      * @param {FormatOptions & { prevViewValue: string; currentCaretIndex: number }} opts - the raw value from the <input> after keyUp/Down event
      * @returns {{ viewValue:string; caretIndex:number; }|string|undefined} preprocessedValue: the result of preprocessing for invalid input
      */
-    // eslint-disable-next-line no-unused-vars
-    preprocessor(v, opts) {
+    preprocessor(v, opts) { // eslint-disable-line no-unused-vars
       return undefined;
     }
 
@@ -182,7 +182,7 @@ const FormatMixinImplementation = superclass =>
     /**
      * Converts `.modelValue` to `.serializedValue`
      * For instance, a Date object to an iso formatted date string
-     * @param {?} v - modelValue: can be an Object, Number, String depending on the
+     * @param {any} v - modelValue: can be an Object, Number, String depending on the
      * input type(date, number, email etc)
      * @returns {string} serializedValue
      */
@@ -193,9 +193,9 @@ const FormatMixinImplementation = superclass =>
     /**
      * Converts `.serializedValue` to `.modelValue`
      * For instance, an iso formatted date string to a Date object
-     * @param {?} v - modelValue: can be an Object, Number, String depending on the
+     * @param {any} v - modelValue: can be an Object, Number, String depending on the
      * input type(date, number, email etc)
-     * @returns {?} modelValue
+     * @returns {any} modelValue
      */
     deserializer(v) {
       return v === undefined ? '' : v;
@@ -214,13 +214,14 @@ const FormatMixinImplementation = superclass =>
      * @protected
      */
     _calculateValues({ source } = { source: null }) {
+      // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; private field: hoist to a class field with an initializer (the fix proven on LionAccordion)
       if (this.__preventRecursiveTrigger) return; // prevent infinite loops
 
       /** @type {boolean} */
       this.__preventRecursiveTrigger = true;
       if (source !== 'model') {
         if (source === 'serialized') {
-          /** @type {?} */
+          /** @type {any} */
           this.modelValue = this.deserializer(this.serializedValue);
         } else if (source === 'formatted') {
           this.modelValue = this._callParser();
@@ -239,7 +240,7 @@ const FormatMixinImplementation = superclass =>
 
     /**
      * @param {string|undefined} value
-     * @return {?}
+     * @return {any}
      * @private
      */
     _callParser(value = this.formattedValue) {
@@ -646,6 +647,6 @@ const FormatMixinImplementation = superclass =>
       }
       return states;
     }
-  };
+  });
 
 export const FormatMixin = dedupeMixin(FormatMixinImplementation);

package/components/form-core/src/InteractionStateMixin.js

@@ -18,8 +18,8 @@ import { FormControlMixin } from './FormControlMixin.js';
  * @type {InteractionStateMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
-const InteractionStateMixinImplementation = superclass =>
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+// prettier-ignore
+const InteractionStateMixinImplementation = /** @type {InteractionStateMixin} */ (superclass =>
   class InteractionStateMixin extends FormControlMixin(superclass) {
     /** @type {any} */
     static get properties() {
@@ -233,6 +233,6 @@ const InteractionStateMixinImplementation = superclass =>
         prefilled: this.prefilled,
       };
     }
-  };
+  });
 
 export const InteractionStateMixin = dedupeMixin(InteractionStateMixinImplementation);

package/components/form-core/src/LionField.js

@@ -90,6 +90,7 @@ export class LionField extends FormControlMixin(
 
   /**
    * @configure FocusMixin
+   * @protected
    */
   get _focusableNode() {
     return this._inputNode;

package/components/form-core/src/NativeTextFieldMixin.js

@@ -8,8 +8,8 @@ import { FormatMixin } from './FormatMixin.js';
  * @type {NativeTextFieldMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass} superclass
  */
-const NativeTextFieldMixinImplementation = superclass =>
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+// prettier-ignore
+const NativeTextFieldMixinImplementation = /** @type {NativeTextFieldMixin} */ (superclass =>
   class NativeTextFieldMixin extends FormatMixin(FocusMixin(FormControlMixin(superclass))) {
     /** @type {any} */
     static get properties() {
@@ -145,6 +145,6 @@ const NativeTextFieldMixinImplementation = superclass =>
     get _focusableNode() {
       return this._inputNode;
     }
-  };
+  });
 
 export const NativeTextFieldMixin = dedupeMixin(NativeTextFieldMixinImplementation);

package/components/form-core/src/choice-group/ChoiceGroupMixin.js

@@ -22,14 +22,21 @@ import { ValidateMixin } from '../validate/ValidateMixin.js';
  * @type {ChoiceGroupMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
-const ChoiceGroupMixinImplementation = superclass =>
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+// prettier-ignore
+const ChoiceGroupMixinImplementation = /** @type {ChoiceGroupMixin} */ (superclass =>
   class ChoiceGroupMixin extends FormRegistrarMixin(
     ValidateMixin(InteractionStateMixin(superclass)),
   ) {
     /** @type {any} */
     static get properties() {
       return {
+        // TODO: rename to `multiple` (the platform name, `<select multiple>`) so it matches the
+        // vocabulary the menu's InteractiveListMixin uses. Must be non-breaking for the released
+        // components that inherit it (listbox/select-rich/combobox, radio-group/checkbox-group): add
+        // `multiple` with its own attribute, keep `multipleChoice`/`multiple-choice` as a deprecated
+        // alias that delegates to it (dev-only deprecation warning) for a release, mark it
+        // `@deprecated` only then and remove the alias in the next major. Coordinate with the TODOs in
+        // packages/ui/components/listbox/src/ListboxMixin.js and combobox/src/LionCombobox.js.
         multipleChoice: { type: Boolean, attribute: 'multiple-choice' },
       };
     }
@@ -234,7 +241,7 @@ const ChoiceGroupMixinImplementation = superclass =>
     }
 
     /**
-     * Implicit :( @override for FormGroupMixin, as choice fields "fieldsets"
+     * Implicit :( override for FormGroupMixin, as choice fields "fieldsets"
      * will always implement both mixins
      *
      * TODO: Consider making this explicit by extracting this method to its own mixin and
@@ -415,6 +422,6 @@ const ChoiceGroupMixinImplementation = superclass =>
         !target.checked
       );
     }
-  };
+  });
 
 export const ChoiceGroupMixin = dedupeMixin(ChoiceGroupMixinImplementation);

package/components/form-core/src/choice-group/ChoiceInputMixin.js

@@ -21,8 +21,8 @@ const hasChanged = (nw, old = {}) => nw.value !== old.value || nw.checked !== ol
  * @type {ChoiceInputMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
-const ChoiceInputMixinImplementation = superclass =>
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+// prettier-ignore
+const ChoiceInputMixinImplementation = /** @type {ChoiceInputMixin} */ (superclass =>
   class ChoiceInputMixin extends FormatMixin(superclass) {
     /** @type {any} */
     static get properties() {
@@ -45,8 +45,10 @@ const ChoiceInputMixinImplementation = superclass =>
 
     set choiceValue(value) {
       this.requestUpdate('choiceValue', this.choiceValue);
+      // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; Lit reactive property: read through a typed local instead (e.g. const next = this.x ?? DEFAULT) - a class field would shadow the accessor Lit creates from static properties
       if (this.modelValue.value !== value) {
         /** @type {ChoiceInputModelValue} */
+        // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; Lit reactive property: read through a typed local instead (e.g. const next = this.x ?? DEFAULT) - a class field would shadow the accessor Lit creates from static properties
         this.modelValue = { value, checked: this.modelValue.checked };
       }
     }
@@ -142,6 +144,7 @@ const ChoiceInputMixinImplementation = superclass =>
      */
     static get styles() {
       return [
+        // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field). Dot form kept deliberately: bracket access is exempt from property mangling (terser keep_quoted), which could split this property into two names. Upstream fix: declare an accessor in the parent type
         ...(super.styles || []),
         css`
           :host {
@@ -286,7 +289,7 @@ const ChoiceInputMixinImplementation = superclass =>
       // or at all (no reliance on platform construct, in case of [role=option])
       if (this._inputNode) {
         /** @type {HTMLInputElement} */
-        (this._inputNode).checked = this.checked;
+        (this._inputNode).checked = this.checked ?? false;
       }
     }
 
@@ -361,6 +364,6 @@ const ChoiceInputMixinImplementation = superclass =>
      * @protected
      */
     _syncValueUpwards() {}
-  };
+  });
 
 export const ChoiceInputMixin = dedupeMixin(ChoiceInputMixinImplementation);

package/components/form-core/src/choice-group/CustomChoiceGroupMixin.js

@@ -20,9 +20,12 @@ function ensureArray(value) {
  * @type {CustomChoiceGroupMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
-const CustomChoiceGroupMixinImplementation = superclass =>
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+// prettier-ignore
+const CustomChoiceGroupMixinImplementation = /** @type {CustomChoiceGroupMixin} */ (superclass =>
   class CustomChoiceGroupMixin extends ChoiceGroupMixin(superclass) {
+    /**
+     * @type {any}
+     */
     static get properties() {
       return {
         allowCustomChoice: {
@@ -168,6 +171,6 @@ const CustomChoiceGroupMixinImplementation = superclass =>
 
       return value;
     }
-  };
+  });
 
 export const CustomChoiceGroupMixin = dedupeMixin(CustomChoiceGroupMixinImplementation);

package/components/form-core/src/form-group/FormGroupMixin.js

@@ -15,6 +15,7 @@ import { FormElementsHaveNoError } from './FormElementsHaveNoError.js';
  * @typedef {import('../../types/FormControlMixinTypes.js').FormControlHost} FormControlHost
  * @typedef {import('../../types/registration/FormRegisteringMixinTypes.js').FormRegisteringHost} FormRegisteringHost
  * @typedef {import('../../types/registration/FormRegistrarMixinTypes.js').ElementWithParentFormGroup} ElementWithParentFormGroup
+ * @typedef {import('../../types/InteractionStateMixinTypes.js').InteractionStates} InteractionStates
  */
 
 /**
@@ -29,8 +30,8 @@ import { FormElementsHaveNoError } from './FormElementsHaveNoError.js';
  * @type {FormGroupMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
-const FormGroupMixinImplementation = superclass =>
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+// prettier-ignore
+const FormGroupMixinImplementation = /** @type {FormGroupMixin} */ (superclass =>
   class FormGroupMixin extends FormRegistrarMixin(
     FormControlMixin(ValidateMixin(DisabledMixin(SlotMixin(superclass)))),
   ) {
@@ -61,6 +62,7 @@ const FormGroupMixinImplementation = superclass =>
     }
 
     set modelValue(values) {
+      // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; private field: hoist to a class field with an initializer (the fix proven on LionAccordion)
       if (this.__isInitialModelValue) {
         this.__isInitialModelValue = false;
         this.registrationComplete.then(() => {
@@ -79,6 +81,7 @@ const FormGroupMixinImplementation = superclass =>
     }
 
     set serializedValue(values) {
+      // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; private field: hoist to a class field with an initializer (the fix proven on LionAccordion)
       if (this.__isInitialSerializedValue) {
         this.__isInitialSerializedValue = false;
         this.registrationComplete.then(() => {
@@ -320,6 +323,42 @@ const FormGroupMixinImplementation = superclass =>
       });
     }
 
+    /**
+     * @override ValidateMixin
+     * Show the validity feedback when one of the following conditions is met:
+     *
+     * - submitted
+     *   If the form is submitted, always show the error message.
+     *
+     * - prefilled
+     *   all form elements already had a value when the group was initially rendered.
+     *
+     * - touched && dirty
+     *   When a user has changed the value of (one of) the form elements (making it dirty)
+     *   and then leaves the group as a whole (making it touched), an error message should
+     *   be shown. Before that, the group is considered 'invalid, but not yet interacting'.
+     * @protected
+     * @param {string} type
+     * @param {InteractionStates} meta
+     */
+    // eslint-disable-next-line class-methods-use-this, no-unused-vars
+    _showFeedbackConditionFor(type, meta) {
+      return (meta.touched && meta.dirty) || meta.prefilled || meta.submitted;
+    }
+
+    /**
+     * @enhance ValidateMixin
+     */
+    get _feedbackConditionMeta() {
+      return {
+        ...super._feedbackConditionMeta,
+        submitted: this.submitted,
+        touched: this.touched,
+        dirty: this.dirty,
+        prefilled: this.prefilled,
+      };
+    }
+
     /**
      * A filter function which will exclude a form field when returning false
      * By default, exclude form fields which are disabled
@@ -343,6 +382,7 @@ const FormGroupMixinImplementation = superclass =>
      * @returns {{[name:string]: any}}
      */
     _getFromAllFormElements(property, filterFn) {
+      /** @type {{[name:string]: any}} */
       const result = {};
 
       // Prioritizes imperatively passed filter function over the protected method
@@ -386,6 +426,7 @@ const FormGroupMixinImplementation = superclass =>
           if (Array.isArray(this.formElements[name])) {
             this.formElements[name].forEach(
               (/** @type {FormControl} */ el, /** @type {number} */ index) => {
+                // @ts-ignore [dynamic-property-access]
                 el[property] = values[name][index]; // eslint-disable-line no-param-reassign
               },
             );
@@ -393,6 +434,7 @@ const FormGroupMixinImplementation = superclass =>
           if (this.formElements[name]) {
             this.formElements[name][property] = values[name];
           } else {
+            // @ts-ignore [dynamic-property-access]
             this.__pendingValues[property][name] = values[name];
           }
         });
@@ -406,6 +448,7 @@ const FormGroupMixinImplementation = superclass =>
     _anyFormElementHas(property) {
       return Object.keys(this.formElements).some(name => {
         if (Array.isArray(this.formElements[name])) {
+          // @ts-ignore [dynamic-property-access]
           return this.formElements[name].some((/** @type {FormControl} */ el) => !!el[property]);
         }
         return !!this.formElements[name][property];
@@ -436,6 +479,7 @@ const FormGroupMixinImplementation = superclass =>
     _everyFormElementHas(property) {
       return Object.keys(this.formElements).every(name => {
         if (Array.isArray(this.formElements[name])) {
+          // @ts-ignore [dynamic-property-access]
           return this.formElements[name].every((/** @type {FormControl} */ el) => !!el[property]);
         }
         return !!this.formElements[name][property];
@@ -590,6 +634,6 @@ const FormGroupMixinImplementation = superclass =>
     _isEmpty() {
       return this.formElements.every(el => el._isEmpty?.());
     }
-  };
+  });
 
 export const FormGroupMixin = dedupeMixin(FormGroupMixinImplementation);

package/components/form-core/src/registration/FormRegisteringMixin.js

@@ -17,11 +17,12 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
  * @type {FormRegisteringMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<LitElement>} superclass
  */
-const FormRegisteringMixinImplementation = superclass =>
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+// prettier-ignore
+const FormRegisteringMixinImplementation = /** @type {FormRegisteringMixin} */ (superclass =>
   class extends superclass {
-    constructor() {
-      super();
+    /** @param {...any} args */
+    constructor(...args) {
+      super(...args);
       /**
        * The name the element will be registered with to the .formElements collection
        * of the parent. Also, it serves as the key of key/value pairs in
@@ -96,6 +97,6 @@ const FormRegisteringMixinImplementation = superclass =>
         this._parentFormGroup.removeFormElement(/** @type {* & FormRegisteringHost} */ (this));
       }
     }
-  };
+  });
 
 export const FormRegisteringMixin = dedupeMixin(FormRegisteringMixinImplementation);

package/components/form-core/src/registration/FormRegistrarMixin.js

@@ -23,9 +23,9 @@ import { FormRegisteringMixin } from './FormRegisteringMixin.js';
  * @type {FormRegistrarMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
-const FormRegistrarMixinImplementation = superclass =>
+// prettier-ignore
+const FormRegistrarMixinImplementation = /** @type {FormRegistrarMixin} */ (superclass =>
   // eslint-disable-next-line no-shadow, no-unused-vars
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class extends FormRegisteringMixin(superclass) {
     /** @type {any} */
     static get properties() {
@@ -40,9 +40,9 @@ const FormRegistrarMixinImplementation = superclass =>
       /**
        * Closely mimics the natively supported HTMLFormControlsCollection. It can be accessed
        * both like an array and an object (based on control/element names).
-       * @type {FormControlsCollection}
+       * @type {FormControlsCollection & { [name: string]: any }}
        */
-      this.formElements = new FormControlsCollection();
+      this.formElements = /** @type {any} */ (new FormControlsCollection());
 
       /**
        * Flag that determines how ".formElements" should behave.
@@ -272,6 +272,6 @@ const FormRegistrarMixinImplementation = superclass =>
 
       this.removeFormElement(child);
     }
-  };
+  });
 
 export const FormRegistrarMixin = dedupeMixin(FormRegistrarMixinImplementation);

package/components/form-core/src/registration/FormRegistrarPortalMixin.js

@@ -19,12 +19,13 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
  * @type {FormRegistrarPortalMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<HTMLElement>} superclass
  */
-const FormRegistrarPortalMixinImplementation = superclass =>
+// prettier-ignore
+const FormRegistrarPortalMixinImplementation = /** @type {FormRegistrarPortalMixin} */ (superclass =>
   // eslint-disable-next-line no-shadow, no-unused-vars
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class extends superclass {
-    constructor() {
-      super();
+    /** @param {...any} args */
+    constructor(...args) {
+      super(...args);
 
       /**
        * Registration target: an element, usually in the body of the dom, that captures events
@@ -58,6 +59,6 @@ const FormRegistrarPortalMixinImplementation = superclass =>
         }),
       );
     }
-  };
+  });
 
 export const FormRegistrarPortalMixin = dedupeMixin(FormRegistrarPortalMixinImplementation);