Add template parameters to reset of mixins and common.d.ts

components/paging/pageable-mixin.js

@@ -2,6 +2,10 @@ import { CollectionMixin } from '../../mixins/collection/collection-mixin.js';
 import { html } from 'lit';
 import { SubscriberRegistryController } from '../../controllers/subscriber/subscriberControllers.js';
 
+/**
+ * @template {LitElementClassType} S
+ * @param {S} superclass
+ */
 export const PageableMixin = superclass => class extends CollectionMixin(superclass) {
 
 	static get properties() {
@@ -10,8 +14,8 @@ export const PageableMixin = superclass => class extends CollectionMixin(supercl
 		};
 	}
 
-	constructor() {
-		super();
+	constructor(...args) {
+		super(...args);
 
 		this._itemShowingCount = 0;
 		this._pageableSubscriberRegistry = new SubscriberRegistryController(this, 'pageable', {

components/paging/pageable-subscriber-mixin.js

@@ -1,5 +1,9 @@
 import { EventSubscriberController, IdSubscriberController } from '../../controllers/subscriber/subscriberControllers.js';
 
+/**
+ * @template {ReactiveElementClassType} S
+ * @param {S} superclass
+ */
 export const PageableSubscriberMixin = superclass => class extends superclass {
 
 	static get properties() {
@@ -13,8 +17,8 @@ export const PageableSubscriberMixin = superclass => class extends superclass {
 		};
 	}
 
-	constructor() {
-		super();
+	constructor(...args) {
+		super(...args);
 
 		this._pageableInfo = null;
 		this._pageableEventSubscriber = new EventSubscriberController(this, 'pageable');

components/selection/selection-action-mixin.js

@@ -1,6 +1,10 @@
 import { SelectionInfo } from './selection-mixin.js';
 import { SelectionObserverMixin } from './selection-observer-mixin.js';
 
+/**
+ * @template {ReactiveElementClassType} S
+ * @param {S} superclass
+ */
 export const SelectionActionMixin = superclass => class extends SelectionObserverMixin(superclass) {
 
 	static get properties() {
@@ -13,8 +17,8 @@ export const SelectionActionMixin = superclass => class extends SelectionObserve
 		};
 	}
 
-	constructor() {
-		super();
+	constructor(...args) {
+		super(...args);
 		this.requiresSelection = false;
 	}
 

components/selection/selection-mixin.js

@@ -44,6 +44,10 @@ export class SelectionInfo {
 
 }
 
+/**
+ * @template {ReactiveElementClassType} S
+ * @param {S} superclass
+ */
 export const SelectionMixin = superclass => class extends RtlMixin(CollectionMixin(superclass)) {
 
 	static get properties() {
@@ -60,8 +64,8 @@ export const SelectionMixin = superclass => class extends RtlMixin(CollectionMix
 		};
 	}
 
-	constructor() {
-		super();
+	constructor(...args) {
+		super(...args);
 		this.selectionNoInputArrowKeyBehaviour = false;
 		this.selectionSingle = false;
 		this._selectAllPages = false;

components/selection/selection-observer-mixin.js

@@ -1,6 +1,10 @@
 import { cssEscape } from '../../helpers/dom.js';
 import { SelectionInfo } from './selection-mixin.js';
 
+/**
+ * @template {ReactiveElementClassType} S
+ * @param {S} superclass
+ */
 export const SelectionObserverMixin = superclass => class extends superclass {
 
 	static get properties() {
@@ -20,8 +24,8 @@ export const SelectionObserverMixin = superclass => class extends superclass {
 		};
 	}
 
-	constructor() {
-		super();
+	constructor(...args) {
+		super(...args);
 		this.selectionInfo = new SelectionInfo();
 		this._provider = null;
 	}

components/skeleton/skeleton-group-mixin.js

@@ -2,16 +2,20 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { SkeletonMixin } from './skeleton-mixin.js';
 import { SubscriberRegistryController } from '../../controllers/subscriber/subscriberControllers.js';
 
-export const SkeletonGroupMixin = dedupeMixin(superclass => class extends SkeletonMixin(superclass) {
+/**
+ * @template {ReactiveElementClassType} S
+ * @param {S} superclass
+ */
+const InternalSkeletonGroupMixin = superclass => class extends SkeletonMixin(superclass) {
 
 	static get properties() {
 		return {
 			_anySubscribersWithSkeletonActive : { state: true },
 		};
 	}
 
-	constructor() {
-		super();
+	constructor(...args) {
+		super(...args);
 		this._anySubscribersWithSkeletonActive = false;
 		this._skeletonSubscribers = new SubscriberRegistryController(this, 'skeleton', {
 			onSubscribe: this.onSubscriberChange.bind(this),
@@ -46,4 +50,6 @@ export const SkeletonGroupMixin = dedupeMixin(superclass => class extends Skelet
 		this._parentSkeleton?.registry?.onSubscriberChange();
 	}
 
-});
+};
+
+export const SkeletonGroupMixin = dedupeMixin(InternalSkeletonGroupMixin);

components/skeleton/skeleton-mixin.js

@@ -148,7 +148,11 @@ export const skeletonStyles = css`
 	}
 `;
 
-export const SkeletonMixin = dedupeMixin(superclass => class extends RtlMixin(superclass) {
+/**
+ * @template {ReactiveElementClassType} S
+ * @param {S} superclass
+ */
+const InternalSkeletonMixin = superclass => class extends RtlMixin(superclass) {
 
 	static get properties() {
 		return {
@@ -166,8 +170,8 @@ export const SkeletonMixin = dedupeMixin(superclass => class extends RtlMixin(su
 		return styles;
 	}
 
-	constructor() {
-		super();
+	constructor(...args) {
+		super(...args);
 		this._skeletonSetByParent = false;
 		this._skeletonSetExplicitly = false;
 		this._skeletonActive = false;
@@ -217,4 +221,6 @@ export const SkeletonMixin = dedupeMixin(superclass => class extends RtlMixin(su
 		this.requestUpdate('skeleton', this._skeletonSetExplicitly);
 	}
 
-});
+};
+
+export const SkeletonMixin = dedupeMixin(InternalSkeletonMixin);

helpers/localize-core-element.js

@@ -1,5 +1,9 @@
 import { LocalizeMixin } from '../mixins/localize/localize-mixin.js';
 
+/**
+ * @template {LitElementConstructor} S
+ * @param {S} superclass
+ */
 export const LocalizeCoreElement = superclass => class extends LocalizeMixin(superclass) {
 
 	static get localizeConfig() {

mixins/arrow-keys/arrow-keys-mixin.js

@@ -9,6 +9,10 @@ const keyCodes = Object.freeze({
 	DOWN: 40,
 });
 
+/**
+ * @template {LitElementClassType} S
+ * @param {S} superclass
+ */
 export const ArrowKeysMixin = superclass => class extends superclass {
 
 	static get properties() {
@@ -24,8 +28,8 @@ export const ArrowKeysMixin = superclass => class extends superclass {
 		};
 	}
 
-	constructor() {
-		super();
+	constructor(...args) {
+		super(...args);
 		this.arrowKeysDirection = 'leftright';
 		this.arrowKeysNoWrap = false;
 	}

mixins/async-container/async-container-mixin.js

@@ -5,6 +5,10 @@ export const asyncStates = {
 	complete: 'complete'
 };
 
+/**
+ * @template {ReactiveElementClassType} S
+ * @param {S} superclass
+ */
 export const AsyncContainerMixin = superclass => class extends superclass {
 
 	static get properties() {
@@ -20,8 +24,8 @@ export const AsyncContainerMixin = superclass => class extends superclass {
 		};
 	}
 
-	constructor() {
-		super();
+	constructor(...args) {
+		super(...args);
 		this._initializeAsyncState();
 		this.asyncPendingDelay = 0;
 		this._handleAsyncItemState = this._handleAsyncItemState.bind(this);

mixins/collection/collection-mixin.js

@@ -1,3 +1,7 @@
+/**
+ * @template {ReactiveElementClassType} S
+ * @param {S} superclass
+ */
 export const CollectionMixin = superclass => class extends superclass {
 
 	static get properties() {
@@ -10,8 +14,8 @@ export const CollectionMixin = superclass => class extends superclass {
 		};
 	}
 
-	constructor() {
-		super();
+	constructor(...args) {
+		super(...args);
 		this.itemCount = null;
 	}
 

mixins/focus/focus-mixin.js

@@ -1,9 +1,13 @@
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 
-export const FocusMixin = dedupeMixin(superclass => class extends superclass {
-
-	constructor() {
-		super();
+/**
+ * @template {ReactiveElementConstructor} S
+ * @param {S} superclass
+ */
+export const InternalFocusMixin = superclass => class extends superclass {
+
+	constructor(...args) {
+		super(...args);
 		this._focusOnFirstRender = false;
 	}
 
@@ -40,4 +44,6 @@ export const FocusMixin = dedupeMixin(superclass => class extends superclass {
 
 	}
 
-});
+};
+
+export const FocusMixin = dedupeMixin(InternalFocusMixin);

mixins/interactive/interactive-mixin.js

@@ -15,6 +15,10 @@ export function isInteractiveDescendant(node) {
 	});
 }
 
+/**
+ * @template {LitElementClassType} S
+ * @param {S} superclass
+ */
 export const InteractiveMixin = superclass => class extends LocalizeCoreElement(RtlMixin(superclass)) {
 
 	static get properties() {
@@ -35,8 +39,8 @@ export const InteractiveMixin = superclass => class extends LocalizeCoreElement(
 		`];
 	}
 
-	constructor() {
-		super();
+	constructor(...args) {
+		super(...args);
 		this._dismissibleId = null;
 		this._focusingToggle = false;
 		this._hasInteractiveAncestor = false;

mixins/labelled/labelled-mixin.js

@@ -46,6 +46,10 @@ const waitForElement = async(contextElement, selector, timeout) => {
 	});
 };
 
+/**
+ * @template {ReactiveElementClassType} S
+ * @param {S} superclass
+ */
 export const LabelMixin = superclass => class extends superclass {
 
 	static get properties() {
@@ -75,6 +79,10 @@ export const LabelMixin = superclass => class extends superclass {
 
 };
 
+/**
+ * @template {ReactiveElementClassType} S
+ * @param {S} superclass
+ */
 export const LabelledMixin = superclass => class extends PropertyRequiredMixin(superclass) {
 
 	static get properties() {
@@ -105,8 +113,8 @@ export const LabelledMixin = superclass => class extends PropertyRequiredMixin(s
 		};
 	}
 
-	constructor() {
-		super();
+	constructor(...args) {
+		super(...args);
 		this.labelRequired = true;
 		this._labelElem = null;
 		this._missingLabelErrorHasBeenThrown = false;

mixins/loading-complete/loading-complete-mixin.js

@@ -1,6 +1,10 @@
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 
-export const LoadingCompleteMixin = dedupeMixin((superclass) => class extends superclass {
+/**
+ * @template {ReactiveElementConstructor & (new (...args: any[]) => { getLoadingComplete?(): Promise<any> })} S
+ * @param {S} superclass
+ */
+export const InternalLoadingCompleteMixin = (superclass) => class extends superclass {
 	get loadingComplete() {
 		return this.getLoadingComplete();
 	}
@@ -25,4 +29,6 @@ export const LoadingCompleteMixin = dedupeMixin((superclass) => class extends su
 		? new Promise(resolve => this.#loadingCompleteResolve = resolve)
 		: Promise.resolve();
 
-});
+};
+
+export const LoadingCompleteMixin = dedupeMixin(InternalLoadingCompleteMixin);

mixins/localize/localize-mixin.js

@@ -3,10 +3,14 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
-export const _LocalizeMixinBase = dedupeMixin(superclass => class LocalizeMixinBaseClass extends getLocalizeClass(superclass) {
-
-	constructor() {
-		super();
+/**
+ * @template {LitElementConstructor} S
+ * @param {S} superclass
+ */
+const _InternalLocalizeMixinBase = superclass => class LocalizeMixinBaseClass extends getLocalizeClass(superclass) {
+
+	constructor(...args) {
+		super(...args);
 		super.constructor.setLocalizeMarkup(localizeMarkup);
 	}
 
@@ -63,8 +67,14 @@ export const _LocalizeMixinBase = dedupeMixin(superclass => class LocalizeMixinB
 
 	#updatedProperties = new Map();
 
-});
+};
+
+export const _LocalizeMixinBase = dedupeMixin(_InternalLocalizeMixinBase);
 
+/**
+ * @template {LitElementConstructor} S
+ * @param {S} superclass
+ */
 export const LocalizeMixin = superclass => class extends _LocalizeMixinBase(superclass) {
 
 	static getLocalizeResources() {