@lion/ui 0.21.1 → 0.22.0

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,8 +22,8 @@ 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)),
   ) {
@@ -234,7 +234,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 +415,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);

package/components/form-core/src/utils/SyncUpdatableMixin.js

@@ -23,11 +23,12 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
  * @type {SyncUpdatableMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
-const SyncUpdatableMixinImplementation = superclass =>
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+// prettier-ignore
+const SyncUpdatableMixinImplementation = /** @type {SyncUpdatableMixin} */ (superclass =>
   class extends superclass {
-    constructor() {
-      super();
+    /** @param {...any} args */
+    constructor(...args) {
+      super(...args);
 
       /**
        * Namespace for this mixin that guarantees naming clashes will not occur...
@@ -39,7 +40,7 @@ const SyncUpdatableMixinImplementation = superclass =>
     /**
      * Empty pending queue in order to guarantee order independence
      *
-     * @param {import('lit-element').PropertyValues } changedProperties
+     * @param {import('lit').PropertyValues } changedProperties
      */
     firstUpdated(changedProperties) {
       super.firstUpdated(changedProperties);
@@ -68,6 +69,7 @@ const SyncUpdatableMixinImplementation = superclass =>
      * @param {string} name
      * @param {*} newValue
      * @param {*} oldValue
+     * @returns {boolean}
      * @private
      */
     static __syncUpdatableHasChanged(name, newValue, oldValue) {
@@ -144,6 +146,6 @@ const SyncUpdatableMixinImplementation = superclass =>
      * @param {*} oldValue
      */
     updateSync(name, oldValue) {} // eslint-disable-line class-methods-use-this, no-unused-vars
-  };
+  });
 
 export const SyncUpdatableMixin = dedupeMixin(SyncUpdatableMixinImplementation);

package/components/form-core/src/validate/ValidateMixin.js

@@ -51,8 +51,8 @@ function getValueForValidators(modelValue) {
  * @type {ValidateMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
-export const ValidateMixinImplementation = superclass =>
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+// prettier-ignore
+export const ValidateMixinImplementation = /** @type {ValidateMixin} */ (superclass =>
   class extends FormControlMixin(
     SyncUpdatableMixin(DisabledMixin(SlotMixin(ScopedElementsMixin(superclass)))),
   ) {
@@ -64,6 +64,7 @@ export const ValidateMixinImplementation = superclass =>
       };
     }
 
+    /** @type {any} */
     static get properties() {
       return {
         validators: { attribute: false },
@@ -74,7 +75,8 @@ export const ValidateMixinImplementation = superclass =>
           attribute: 'shows-feedback-for',
           reflect: true,
           converter: {
-            fromAttribute: /** @param {string} value */ value => value.split(','),
+            fromAttribute: /** @param {string | null} value */ value =>
+              value ? value.split(',') : [],
             toAttribute: /** @param {[]} value */ value => value.join(','),
           },
         },
@@ -307,7 +309,7 @@ export const ValidateMixinImplementation = superclass =>
 
     /**
      * @param {string} name
-     * @param {?} oldValue
+     * @param {any} oldValue
      */
     updateSync(name, oldValue) {
       super.updateSync(name, oldValue);
@@ -564,7 +566,7 @@ export const ValidateMixinImplementation = superclass =>
     /**
      * step a3 (as explained in `validate()`), calls __finishValidationPass
      * @param {Validator[]} asyncValidators all Validators except required and MetaValidators
-     * @param {?} value
+     * @param {any} value
      * @private
      */
     async __executeAsyncValidators(asyncValidators, value) {
@@ -741,7 +743,7 @@ export const ValidateMixinImplementation = superclass =>
 
     /**
      * Helper method for the mutually exclusive Required Validator
-     * @param {?} v
+     * @param {any} v
      * @private
      */
     __isEmpty(v) {
@@ -1021,6 +1023,6 @@ export const ValidateMixinImplementation = superclass =>
         .sort((a, b) => types.indexOf(a.type) - types.indexOf(b.type));
       return res.slice(0, this._visibleMessagesAmount);
     }
-  };
+  });
 
 export const ValidateMixin = dedupeMixin(ValidateMixinImplementation);

package/components/form-core/src/validate/Validator.js

@@ -243,6 +243,7 @@ export class Validator extends EventTarget {
    *     inputNode.removeAttribute('aria-required');
    *   }
    * }
+   * ```
    * @configurable
    * @param {FormControlHost} formControl
    */