@lion/ui 0.21.1 → 0.22.0

package/components/overlays/src/OverlayController.js

@@ -10,7 +10,7 @@ import { getFocusableElements } from './utils/get-focusable-elements.js';
  * @typedef {import('@lion/ui/types/overlays.js').OverlayConfig} OverlayConfig
  * @typedef {import('@popperjs/core').Options} PopperOptions
  * @typedef {import('@popperjs/core').Placement} Placement
- * @typedef {import('@popperjs/core').createPopper} Popper
+ * @typedef {typeof import('@popperjs/core').createPopper} Popper
  * @typedef {{ createPopper: Popper }} PopperModule
  */
 
@@ -113,11 +113,57 @@ const childDialogsClosedInEventLoopWeakmap = new WeakMap();
  *
  */
 export class OverlayController extends EventTarget {
+  /** @type {Promise<PopperModule> | undefined} */
+  static popperModule = undefined;
+
   /**
    * 'True' when Shift key is pressed, 'false' otherwise
    */
   #isShiftPressed = false;
 
+  /** @private */
+  __sharedConfig;
+
+  /** @type {Element | null} @private */
+  __activeElementRightBeforeHide;
+
+  /**
+   * @type {OverlayConfig}
+   * @protected
+   */
+  _defaultConfig;
+
+  /** @protected */
+  _contentId;
+
+  /** @private */
+  __originalAttrs;
+
+  /** @private */
+  __hasActiveBackdrop;
+
+  /**
+   * The property is used to skip `__escKeyHandler` handler for overlays that have been closed
+   * by `__escKeyHandlerCalled` previously.
+   * `__escKeyHandlerCalled` is set to `false` right before overlay show up
+   * `__escKeyHandlerCalled` is set to `true` when `__escKeyHandler` is called at least one time
+   * after each 'show' phase
+   * @private
+   */
+  __escKeyHandlerCalled;
+
+  /**
+   * @type {OverlayConfig | undefined}
+   * @private
+   */
+  __prevConfig = undefined;
+
+  /**
+   * @type {HTMLElement | undefined}
+   * @private
+   */
+  __elementToFocusAfterHide = undefined;
+
   /**
    * @constructor
    * @param {OverlayConfig} config initial config. Will be remembered as shared config
@@ -126,19 +172,13 @@ export class OverlayController extends EventTarget {
   constructor(config = {}, manager = overlays) {
     super();
     this.manager = manager;
-    /** @private */
     this.__sharedConfig = config;
 
-    /** @private */
     this.__activeElementRightBeforeHide = null;
 
     /** @type {OverlayConfig} */
     this.config = {};
 
-    /**
-     * @type {OverlayConfig}
-     * @protected
-     */
     this._defaultConfig = {
       placementMode: undefined,
       contentNode: config.contentNode,
@@ -198,25 +238,14 @@ export class OverlayController extends EventTarget {
       zIndex: 9999,
     };
 
-    /** @protected */
     this._contentId = `overlay-content--${Math.random().toString(36).slice(2, 10)}`;
-    /** @private */
     this.__originalAttrs = new Map();
     /** @private */
     this.__escKeyHandler = this.__escKeyHandler.bind(this);
     this.updateConfig(config);
-    /** @private */
     this.__hasActiveBackdrop = true;
     /** @private */
     this.__cancelHandler = this.__cancelHandler.bind(this);
-    /**
-     * The property is used to skip `__escKeyHandler` handler for overlays that have been closed
-     * by `__escKeyHandlerCalled` previously.
-     * `__escKeyHandlerCalled` is set to `false` right before overlay show up
-     * `__escKeyHandlerCalled` is set to `true` when `__escKeyHandler` is called at least one time
-     * after each 'show' phase
-     * @private
-     */
     this.__escKeyHandlerCalled = false;
   }
 
@@ -649,7 +678,7 @@ export class OverlayController extends EventTarget {
     // on the native dialog for all browsers: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby
     const hasClosedBySupport = HTMLDialogElement && 'closedBy' in HTMLDialogElement.prototype;
     if (hasClosedBySupport) {
-      // @ts-expect-error
+      // @ts-ignore [closedBy is feature-detected above]
       wrappingDialogElement.closedBy = 'none';
     } else {
       wrappingDialogElement.addEventListener(
@@ -742,6 +771,7 @@ export class OverlayController extends EventTarget {
    * @private
    */
   __storeOriginalAttrs(node, attrs) {
+    /** @type {Record<string, any>} */
     const attrMap = {};
     attrs.forEach(attrName => {
       attrMap[attrName] = node.getAttribute(attrName);
@@ -841,7 +871,7 @@ export class OverlayController extends EventTarget {
        * This is however necessary for initial placement.
        */
       await this.__createPopperInstance();
-      this._popper.forceUpdate();
+      /** @type {import('@popperjs/core').Instance} */ (this._popper).forceUpdate();
     }
   }
 
@@ -1384,7 +1414,8 @@ export class OverlayController extends EventTarget {
     this.contentWrapperNode[addOrRemoveListener](
       'mousedown',
       /** @type {EventListenerOrEventListenerObject} */
-      (this.__onInsideMouseDown),
+      // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; handler created inside a branch but read outside it: create the handlers unconditionally, moving the was*Inside locals with them
+      this.__onInsideMouseDown,
       true,
     );
     this.contentWrapperNode[addOrRemoveListener](
@@ -1399,7 +1430,8 @@ export class OverlayController extends EventTarget {
       this.invokerNode[addOrRemoveListener](
         'mousedown',
         /** @type {EventListenerOrEventListenerObject} */
-        (this.__onInsideMouseDown),
+        // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; handler created inside a branch but read outside it: create the handlers unconditionally, moving the was*Inside locals with them
+        this.__onInsideMouseDown,
         true,
       );
       this.invokerNode[addOrRemoveListener](
@@ -1412,13 +1444,15 @@ export class OverlayController extends EventTarget {
     document.documentElement[addOrRemoveListener](
       'mouseup',
       /** @type {EventListenerOrEventListenerObject} */
-      (this.__onDocumentMouseUp),
+      // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; handler created inside a branch but read outside it: create the handlers unconditionally, moving the was*Inside locals with them
+      this.__onDocumentMouseUp,
       true,
     );
     window[addOrRemoveListener](
       'blur',
       /** @type {EventListenerOrEventListenerObject} */
-      (this.__onWindowBlur),
+      // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; handler created inside a branch but read outside it: create the handlers unconditionally, moving the was*Inside locals with them
+      this.__onWindowBlur,
     );
   }
 
@@ -1456,9 +1490,13 @@ export class OverlayController extends EventTarget {
 
     if (OverlayController.popperModule !== undefined) {
       const { createPopper } = await OverlayController.popperModule;
-      this._popper = createPopper(this._referenceNode, this.contentWrapperNode, {
-        ...this.config?.popperConfig,
-      });
+      this._popper = createPopper(
+        /** @type {HTMLElement} */ (this._referenceNode),
+        this.contentWrapperNode,
+        {
+          ...this.config?.popperConfig,
+        },
+      );
     }
   }
 
@@ -1472,5 +1510,3 @@ export class OverlayController extends EventTarget {
     return false;
   }
 }
-/** @type {Promise<PopperModule> | undefined} */
-OverlayController.popperModule = undefined;

package/components/overlays/src/OverlayMixin.js

@@ -29,7 +29,6 @@ export function _addOverlayMixinPostProcessor(postProcessor) {
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
 export const OverlayMixinImplementation = superclass => {
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class OverlayMixin extends superclass {
     static get properties() {
       return {
@@ -267,6 +266,7 @@ export const OverlayMixinImplementation = superclass => {
         backdropNode: this._overlayBackdropNode,
       };
 
+      // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; assigned from another method: declare the field with an explicit `| undefined` in its JSDoc type
       if (this._overlayCtrl) {
         // when `lit` `cache` attaches node to the DOM, register the controller back in the OverlaysManager
         this._overlayCtrl.updateConfig(config);

package/components/overlays/src/OverlaysManager.js

@@ -12,6 +12,9 @@ import { overlayDocumentStyle } from './overlayDocumentStyle.js';
  * `OverlaysManager` which manages overlays which are rendered into the body
  */
 export class OverlaysManager {
+  /** @type {HTMLStyleElement | undefined} */
+  static __globalStyleNode = undefined;
+
   static __createGlobalStyleNode() {
     const styleTag = document.createElement('style');
     styleTag.setAttribute('data-overlays', '');
@@ -36,36 +39,46 @@ export class OverlaysManager {
     return this.__shownList;
   }
 
+  /**
+   * @type {OverlayController[]}
+   * @private
+   */
+  __list;
+
+  /**
+   * @type {OverlayController[]}
+   * @private
+   */
+  __shownList;
+
+  /** @protected */
+  _siblingsInert;
+
+  /**
+   * @type {WeakMap<OverlayController, OverlayController[]>}
+   * @private
+   */
+  __blockingMap;
+
+  /**
+   * @private
+   * @type {{
+   *   preventScrollCount: number;
+   *   clientWidth: number | undefined;
+   *   clientHeight: number | undefined;
+   *   marginRightInline: string | undefined;
+   *   marginBottomInline: string | undefined;
+   *   marginRight: number | undefined;
+   *   marginBottom: number | undefined;
+   * }}
+   */
+  __bodySizeVars;
+
   constructor() {
-    /**
-     * @type {OverlayController[]}
-     * @private
-     */
     this.__list = [];
-    /**
-     * @type {OverlayController[]}
-     * @private
-     */
     this.__shownList = [];
-    /** @protected */
     this._siblingsInert = false;
-    /**
-     * @type {WeakMap<OverlayController, OverlayController[]>}
-     * @private
-     */
     this.__blockingMap = new WeakMap();
-    /**
-     * @private
-     * @type {{
-     *   preventScrollCount: number;
-     *   clientWidth: number | undefined;
-     *   clientHeight: number | undefined;
-     *   marginRightInline: string | undefined;
-     *   marginBottomInline: string | undefined;
-     *   marginRight: number | undefined;
-     *   marginBottom: number | undefined;
-     * }}
-     */
     this.__bodySizeVars = {
       preventScrollCount: 0,
       clientWidth: undefined,
@@ -296,6 +309,3 @@ export class OverlaysManager {
     }
   }
 }
-
-/** @type {HTMLStyleElement | undefined} */
-OverlaysManager.__globalStyleNode = undefined;

package/components/overlays/src/utils/adopt-styles.js

@@ -56,7 +56,7 @@ function adoptStyleWhenAdoptedStylesheetsNotSupported(
     const styleEl = document.createElement('style');
     // keep notation, so it's not renamed in minification/build
     // eslint-disable-next-line dot-notation
-    const nonce = window['litNonce'];
+    const nonce = /** @type {{ litNonce?: string }} */ (window)['litNonce'];
     if (nonce !== undefined) {
       styleEl.setAttribute('nonce', nonce);
     }

package/components/overlays/src/utils/get-focusable-elements.js

@@ -10,18 +10,28 @@ import { sortByTabIndex } from './sort-by-tabindex.js';
 // IE11 supports matches as 'msMatchesSelector'
 const matchesFunc = 'matches' in Element.prototype ? 'matches' : 'msMatchesSelector';
 
+/**
+ * @param {HTMLElement} element
+ * @param {string} selector
+ * @returns {boolean}
+ */
+function elementMatches(element, selector) {
+  // @ts-ignore [dynamic-method-name]: 'matches', or its legacy 'msMatchesSelector' alias
+  return element[matchesFunc](selector);
+}
+
 /**
  * @param {HTMLElement} element
  * @returns {boolean} Whether the element matches
  */
 function isFocusable(element) {
   // Elements that cannot be focused if they have [disabled] attribute.
-  if (element[matchesFunc]('input, select, textarea, button, object')) {
-    return element[matchesFunc](':not([disabled])');
+  if (elementMatches(element, 'input, select, textarea, button, object')) {
+    return elementMatches(element, ':not([disabled])');
   }
 
   // Elements that can be focused even if they have [disabled] attribute.
-  return element[matchesFunc]('a[href], area[href], iframe, [tabindex], [contentEditable]');
+  return elementMatches(element, 'a[href], area[href], iframe, [tabindex], [contentEditable]');
 }
 
 /**

package/components/overlays/src/utils/is-equal-config.js

@@ -14,11 +14,13 @@ export function isEqualConfig(a, b) {
   if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) {
     return a === b;
   }
-  const aProps = Object.keys(a);
-  const bProps = Object.keys(b);
+  const aObj = /** @type {Record<string, any>} */ (a);
+  const bObj = /** @type {Record<string, any>} */ (b);
+  const aProps = Object.keys(aObj);
+  const bProps = Object.keys(bObj);
   if (aProps.length !== bProps.length) {
     return false;
   }
-  const isEqual = /** @param {string} prop */ prop => isEqualConfig(a[prop], b[prop]);
+  const isEqual = /** @param {string} prop */ prop => isEqualConfig(aObj[prop], bObj[prop]);
   return aProps.every(isEqual);
 }

package/components/overlays/test/ArrowMixin.test.js

@@ -27,6 +27,7 @@ describe('ArrowMixin', () => {
     }
 
     __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/overlays/test/local-positioning.test.js

@@ -61,8 +61,10 @@ describe('Local Positioning', () => {
         ...withLocalTestConfig(),
       });
       await ctrl.show();
+      // @ts-ignore [popper-instance-access-in-test]
       expect(ctrl._popper.state.modifiersData).to.exist;
       await ctrl.hide();
+      // @ts-ignore [popper-instance-access-in-test]
       expect(ctrl._popper.state.modifiersData).to.exist;
     });
 
@@ -203,6 +205,7 @@ describe('Local Positioning', () => {
       `);
 
       await ctrl.show();
+      // @ts-ignore [popper-instance-access-in-test]
       expect(ctrl._popper.state.modifiersData.offset.auto).to.eql({ x: 0, y: 16 });
     });
 
@@ -296,6 +299,7 @@ describe('Local Positioning', () => {
         },
       });
       await ctrl.show();
+      // @ts-ignore [popper-instance-access-in-test]
       expect(ctrl._popper.options.modifiers.offset.offset).to.equal('0, 20px');
       expect(normalizeTransformStyle(ctrl.contentWrapperNode.style.transform)).to.equal(
         'translate3d(10px, -40px, 0px)',

package/components/overlays/test-suites/OverlayMixin.suite.js

@@ -366,13 +366,16 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       `)
       );
       await OverlayController.popperModule;
+      // @ts-ignore [popper-instance-access-in-test]
       sinon.spy(el._overlayCtrl._popper, 'update');
       el.repositionOverlay();
+      // @ts-ignore [popper-instance-access-in-test]
       expect(el._overlayCtrl._popper.update).to.have.been.been.calledOnce;
 
       if (!el._overlayCtrl.isTooltip) {
         el.config = { ...el.config, placementMode: 'global' };
         el.repositionOverlay();
+        // @ts-ignore [popper-instance-access-in-test]
         expect(el._overlayCtrl._popper.update).to.have.been.been.calledOnce;
       }
     });
@@ -459,11 +462,11 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
 
       const dialogEl = /** @type {HTMLDialogElement} */ (el._overlayCtrl.__wrappingDialogNode);
 
-      // @ts-expect-error [allow-protected-in-tests]
+      // @ts-ignore [checkVisibility lives on the polyfilled dialog]
       expect(dialogEl.checkVisibility()).to.be.true;
       // @ts-expect-error [allow-protected-in-tests]
       await mimicEscapePress(el._overlayContentNode);
-      // @ts-expect-error [allow-protected-in-tests]
+      // @ts-ignore [checkVisibility lives on the polyfilled dialog]
       expect(dialogEl.checkVisibility()).to.be.true;
     });
 

package/components/overlays/types/ArrowMixinTypes.ts

@@ -26,7 +26,9 @@ export declare class ArrowHost {
 
   protected _defineOverlayConfig(): OverlayConfig;
 
-  protected _getPopperArrowConfig(popperConfigToExtendFrom: Partial<PopperOptions>): Partial<PopperOptions>;
+  protected _getPopperArrowConfig(
+    popperConfigToExtendFrom: Partial<PopperOptions>,
+  ): Partial<PopperOptions>;
 
   private __setupRepositionCompletePromise(): void;
 

package/components/pagination/src/LionPagination.js

@@ -116,9 +116,11 @@ export class LionPagination extends LocalizeMixin(LitElement) {
     return this.__current || 0;
   }
 
+  /** @private */
+  __visiblePages;
+
   constructor() {
     super();
-    /** @private */
     this.__visiblePages = 5;
     this.current = 1;
     this.count = 0;

package/components/progress-indicator/src/LionProgressIndicator.js

@@ -90,7 +90,6 @@ export class LionProgressIndicator extends LocalizeMixin(LitElement) {
   }
 
   /**
-   * @readonly
    * @type {boolean}
    */
   get indeterminate() {

package/components/select/src/LionSelect.js

@@ -98,7 +98,9 @@ export class LionSelect extends LionFieldWithSelect {
     }
 
     if (changedProperties.has('autocomplete')) {
-      this._inputNode.autocomplete = /** @type {string} */ (this.autocomplete);
+      // the DOM lib types `autocomplete` as `AutoFill` only in newer TypeScript;
+      // cast keeps this valid on both compilers without widening the public type
+      this._inputNode.autocomplete = /** @type {any} */ (this.autocomplete);
     }
   }
 

package/components/select-rich/src/LionSelectRich.js

@@ -28,6 +28,7 @@ function detectInteractionMode() {
 export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(LionListbox))) {
   static get scopedElements() {
     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.scopedElements,
       'lion-select-invoker': LionSelectInvoker,
     };
@@ -91,7 +92,6 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    * @protected
    * @configure FocusMixin
    */
-  // @ts-ignore
   get _focusableNode() {
     return this._invokerNode;
   }
@@ -108,6 +108,9 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
     );
   }
 
+  /** @protected */
+  _arrowWidth;
+
   constructor() {
     super();
 
@@ -125,7 +128,6 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
     this.interactionMode = 'auto';
 
     this.singleOption = false;
-    /** @protected */
     this._arrowWidth = 28;
 
     /** @private */
@@ -428,6 +430,10 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
   _teardownOverlayCtrl() {
     super._teardownOverlayCtrl();
 
+    if (!this._overlayCtrl) {
+      return;
+    }
+
     this._overlayCtrl.removeEventListener('show', this.__overlayOnShow);
     this._overlayCtrl.removeEventListener('before-show', this.__overlayBeforeShow);
     this._overlayCtrl.removeEventListener('hide', this.__overlayOnHide);
@@ -499,6 +505,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
       return;
     }
 
+    // @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.opened) {
       return;
     }

package/components/select-rich/test/lion-select-rich.test.js

@@ -832,6 +832,7 @@ describe('lion-select-rich', () => {
         await waitUntil(isSelectRichRendered);
         getInvoker()?.click();
         await waitUntil(isDialogVisible);
+        // @ts-ignore [dynamic-key-access-in-test]
         const optionBlue = /** @type { HTMLElement | undefined } */ (
           wrapperElementShadowRoot?.querySelectorAll('lion-option')
         )?.[1];
@@ -955,6 +956,7 @@ describe('lion-select-rich', () => {
         await waitUntil(isSelectRichRendered);
         getInvoker()?.click();
         await waitUntil(isDialogVisible);
+        // @ts-ignore [dynamic-key-access-in-test]
         const optionBlue = /** @type { HTMLElement | undefined } */ (
           wrapperElementShadowRoot?.querySelectorAll('lion-option')
         )?.[1];
@@ -1082,6 +1084,7 @@ describe('lion-select-rich', () => {
         await waitUntil(isSelectRichRendered);
         getInvoker()?.click();
         await waitUntil(isDialogVisible);
+        // @ts-ignore [dynamic-key-access-in-test]
         const optionBlue = /** @type { HTMLElement | undefined } */ (
           wrapperElementShadowRoot?.querySelectorAll('lion-option')
         )?.[1];
@@ -1100,6 +1103,13 @@ describe('lion-select-rich', () => {
   });
 
   describe('Teardown', () => {
+    it('does not throw when tearing down before the overlay controller is set up', () => {
+      const el = /** @type {LionSelectRich} */ (document.createElement('lion-select-rich'));
+
+      // @ts-expect-error [allow-private] in tests
+      expect(() => el._teardownOverlayCtrl()).not.to.throw();
+    });
+
     it('correctly removes event listeners when disconnected from dom', async () => {
       const el = await fixture(html`
         <lion-select-rich label="age">

package/components/steps/src/LionSteps.js

@@ -50,7 +50,7 @@ export class LionSteps extends LitElement {
 
   constructor() {
     super();
-    /** @type {{[key: string]: ?}} */
+    /** @type {{[key: string]: any}} */
     this.data = {};
     this._internalCurrentSync = true; // necessary for preventing side effects on initialization
     /** @type {number} */

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

@@ -8,7 +8,7 @@ import '@lion/ui/define/lion-steps.js';
  * @typedef {import('../src/LionSteps.js').LionSteps} LionSteps
  * @typedef {import('../src/LionStep.js').LionStep} LionStep
  * @typedef {import('lit').TemplateResult} TemplateResult
- * @typedef {{[key: string]: ?}} UnknownData
+ * @typedef {{[key: string]: any}} UnknownData
  */
 
 const fixture = /** @type {(arg: TemplateResult) => Promise<LionSteps>} */ (_fixture);

package/components/switch/src/LionSwitch.js

@@ -24,6 +24,7 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
 
   static get scopedElements() {
     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.scopedElements,
       'lion-switch-button': LionSwitchButton,
     };

package/components/switch/src/LionSwitchButton.js

@@ -73,6 +73,12 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
     `;
   }
 
+  /** @private */
+  __handleKeydown;
+
+  /** @private */
+  __handleKeyup;
+
   constructor() {
     super();
     // inputNode = this, which always requires a value prop
@@ -82,9 +88,7 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
     this.__initialized = false;
     /** @protected */
     this._toggleChecked = this._toggleChecked.bind(this);
-    /** @private */
     this.__handleKeydown = this._handleKeydown.bind(this);
-    /** @private */
     this.__handleKeyup = this._handleKeyup.bind(this);
   }
 

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

@@ -187,6 +187,7 @@ describe('lion-switch', () => {
         tagName,
         class CustomSwitch extends LionSwitch {
           static get validationTypes() {
+            // @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
             return [...super.validationTypes, 'info'];
           }
 

package/components/textarea/src/LionTextarea.js

@@ -85,7 +85,9 @@ export class LionTextarea extends NativeTextFieldMixin(LionFieldWithTextArea) {
     }
 
     if (changedProperties.has('autocomplete')) {
-      this._inputNode.autocomplete = /** @type {string} */ (this.autocomplete);
+      // the DOM lib types `autocomplete` as `AutoFill` only in newer TypeScript;
+      // cast keeps this valid on both compilers without widening the public type
+      this._inputNode.autocomplete = /** @type {any} */ (this.autocomplete);
     }
 
     if (changedProperties.has('disabled')) {