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

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-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() {
@@ -73,7 +73,7 @@ const FormatMixinImplementation = superclass =>
     /**
      * During format/parse, we sometimes need to know how the current viewValue the user
      * interacts with "came to be". Was it already formatted before for instance?
-     * If so, in case of an amount input, we might want to stick to the curent interpretation of separators.
+     * If so, in case of an amount input, we might want to stick to the current interpretation of separators.
      */
     #viewValueState = {
       didFormatterOutputSyncToView: false,
@@ -124,13 +124,19 @@ const FormatMixinImplementation = superclass =>
       }
     }
 
+    get _isEditingTextField() {
+      // For backward compatibility. Ideally we check whether the input is focused,
+      // like we do in "hybrid" (picker + textbox) components like datepicker
+      return this._isHandlingUserInput;
+    }
+
     /**
      * Preprocessors could be considered 'live formatters'. Their result is shown to the user
      * on keyup instead of after blurring the field. The biggest difference between preprocessors
      * and formatters is their moment of execution: preprocessors are run before modelValue is
      * computed (and work based on view value), whereas formatters are run after the parser (and
      * are based on modelValue)
-     * Automatically formats code while typing. It depends on a preprocessro that smartly
+     * Automatically formats code while typing. It depends on a preprocessor that smartly
      * updates the viewValue and caret position for best UX.
      * @example
      * ```js
@@ -138,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;
     }
 
@@ -176,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
      */
@@ -187,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;
@@ -208,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();
@@ -233,7 +240,7 @@ const FormatMixinImplementation = superclass =>
 
     /**
      * @param {string|undefined} value
-     * @return {?}
+     * @return {any}
      * @private
      */
     _callParser(value = this.formattedValue) {
@@ -283,15 +290,14 @@ const FormatMixinImplementation = superclass =>
       // - Why check for this.hasError?
       // We only want to format values that are considered valid. For best UX,
       // we only 'reward' valid inputs.
-      // - Why check for _isHandlingUserInput?
+      // - Why check for _isEditingTextField?
       // Downwards sync is prevented whenever we are in an `@user-input-changed` flow, [2].
       // If we are in a 'imperatively set `.modelValue`' flow, [1], we want to reflect back
       // the value, no matter what.
       // This means, whenever we are in hasError and modelValue is set
       // imperatively, we DO want to format a value (it is the only way to get meaningful
       // input into `._inputNode` with modelValue as input)
-
-      if (this._isHandlingUserInput && this.hasFeedbackFor?.includes('error') && this._inputNode) {
+      if (this._isEditingTextField && this.hasFeedbackFor?.includes('error') && this._inputNode) {
         return this.value;
       }
 
@@ -641,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

@@ -29,8 +29,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 +61,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 +80,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(() => {
@@ -343,6 +345,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 +389,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 +397,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 +411,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 +442,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 +597,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
    */