@lion/ui 0.21.1 → 0.22.0

package/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js

@@ -12,6 +12,7 @@ import {
   expect,
   html,
 } from '@open-wc/testing';
+import { nothing } from 'lit/html.js';
 
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 
@@ -40,10 +41,12 @@ function getDropdownValue(dropdownEl) {
 }
 
 /**
- * @param {{ klass:LionInputTelDropdown }} config
+ * @param {{ klass:LionInputTelDropdown, hasParentheses?: boolean }} config
  */
-// @ts-expect-error
-export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdown }) {
+export function runInputTelDropdownSuite(
+  // @ts-expect-error
+  { klass, hasParentheses } = { klass: LionInputTelDropdown, hasParentheses: false },
+) {
   // @ts-ignore
   const tagName = defineCE(/** @type {* & HTMLElement} */ (class extends klass {}));
   const tag = unsafeStatic(tagName);
@@ -55,33 +58,43 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
     });
 
     it('syncs value of dropdown on init if input has no value', async () => {
-      const el = await fixture(html` <${tag}></${tag}> `);
+      const el = await fixture(
+        html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}" ></${tag}> `,
+      );
       expect(el.activeRegion).to.equal('GB');
-      expect(el.value).to.equal('+44');
+      const expectedNumber = hasParentheses ? '(+44)' : '+44';
+      expect(el.value).to.equal(expectedNumber);
       expect(getDropdownValue(/** @type {DropdownElement} */ (el.refs.dropdown.value))).to.equal(
         'GB',
       );
     });
 
     it('syncs value of dropdown on reset if input has no value', async () => {
-      const el = await fixture(html` <${tag}></${tag}> `);
+      const el = await fixture(
+        html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}" ></${tag}> `,
+      );
       el.modelValue = '+31612345678';
       await el.updateComplete;
       expect(el.activeRegion).to.equal('NL');
       el.reset();
       await el.updateComplete;
       expect(el.activeRegion).to.equal('GB');
-      expect(el.value).to.equal('+44');
+      const expectedNumber = hasParentheses ? '(+44)' : '+44';
+      expect(el.value).to.equal(expectedNumber);
     });
 
     it('syncs value of dropdown on init if input has no value does not influence interaction states', async () => {
-      const el = await fixture(html` <${tag}></${tag}> `);
+      const el = await fixture(
+        html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}" ></${tag}> `,
+      );
       expect(el.dirty).to.be.false;
       expect(el.prefilled).to.be.false;
     });
 
     it('syncs value of dropdown on reset also resets interaction states', async () => {
-      const el = await fixture(html` <${tag}></${tag}> `);
+      const el = await fixture(
+        html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}" ></${tag}> `,
+      );
       el.modelValue = '+31612345678';
       await el.updateComplete;
 
@@ -94,14 +107,17 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
     });
 
     it('sets correct interaction states on init if input has a value', async () => {
-      const el = await fixture(html` <${tag} .modelValue="${'+31612345678'}"></${tag}> `);
+      const el = await fixture(
+        html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .modelValue="${'+31612345678'}"></${tag}> `,
+      );
       expect(el.dirty).to.be.false;
       expect(el.prefilled).to.be.true;
     });
 
     describe('Dropdown display', () => {
       it('calls `templates.dropdown` with TemplateDataForDropdownInputTel object', async () => {
-        const el = fixtureSync(html` <${tag}
+        const el =
+          fixtureSync(html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}" 
           .modelValue="${'+31612345678'}"
           .allowedRegions="${['NL', 'PH']}"
           .preferredRegions="${['PH']}"
@@ -163,7 +179,8 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
       });
 
       it('can override "all-countries-label"', async () => {
-        const el = fixtureSync(html` <${tag}
+        const el =
+          fixtureSync(html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}" 
           .preferredRegions="${['PH']}"
           ></${tag}> `);
         const spy = sinon.spy(
@@ -182,7 +199,8 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
       });
 
       it('can override "preferred-countries-label"', async () => {
-        const el = fixtureSync(html` <${tag}
+        const el =
+          fixtureSync(html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}" 
           .preferredRegions="${['PH']}"
           ></${tag}> `);
         const spy = sinon.spy(
@@ -200,26 +218,34 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
       });
 
       it('syncs dropdown value initially from activeRegion', async () => {
-        const el = await fixture(html` <${tag} .allowedRegions="${['DE']}"></${tag}> `);
+        const el = await fixture(
+          html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .allowedRegions="${['DE']}"></${tag}> `,
+        );
         expect(getDropdownValue(/** @type {DropdownElement} */ (el.refs.dropdown.value))).to.equal(
           'DE',
         );
       });
 
       it('syncs disabled attribute to dropdown', async () => {
-        const el = await fixture(html` <${tag} disabled></${tag}> `);
+        const el = await fixture(
+          html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  disabled></${tag}> `,
+        );
         expect(/** @type {HTMLElement} */ (el.refs.dropdown.value)?.hasAttribute('disabled')).to.be
           .true;
       });
 
       it('disables dropdown on readonly', async () => {
-        const el = await fixture(html` <${tag} readonly></${tag}> `);
+        const el = await fixture(
+          html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  readonly></${tag}> `,
+        );
         expect(/** @type {HTMLElement} */ (el.refs.dropdown.value)?.hasAttribute('disabled')).to.be
           .true;
       });
 
       it('renders to prefix slot in light dom', async () => {
-        const el = await fixture(html` <${tag} .allowedRegions="${['DE']}"></${tag}> `);
+        const el = await fixture(
+          html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .allowedRegions="${['DE']}"></${tag}> `,
+        );
         const prefixSlot = /** @type {HTMLElement} */ (
           /** @type {HTMLElement} */ (el.refs.dropdown.value)
         );
@@ -230,7 +256,9 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
 
       it('rerenders light dom when PhoneUtil loaded', async () => {
         const { resolveLoaded } = mockPhoneUtilManager();
-        const el = await fixture(html` <${tag} .allowedRegions="${['DE']}"></${tag}> `);
+        const el = await fixture(
+          html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .allowedRegions="${['DE']}"></${tag}> `,
+        );
         // @ts-ignore
         const spy = sinon.spy(el, '__rerenderSlot');
         resolveLoaded(undefined);
@@ -241,7 +269,8 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
       });
 
       it('has the correct nameForLocale, based on browser language', async () => {
-        const el = fixtureSync(html` <${tag}
+        const el =
+          fixtureSync(html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}" 
           .modelValue="${'+31612345678'}"
           .allowedRegions="${['NL', 'PH']}"
           .preferredRegions="${['PH']}"
@@ -312,7 +341,7 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
     describe('On dropdown value change', () => {
       it('changes the currently active country code in the textbox', async () => {
         const el = await fixture(html`
-          <${tag}
+          <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}" 
             .allowedRegions="${['NL', 'BE']}"
             .modelValue="${'+31612345678'}"
           ></${tag}>
@@ -321,24 +350,29 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
         mimicUserChangingDropdown(el.refs.dropdown.value, 'BE');
         await el.updateComplete;
         expect(el.activeRegion).to.equal('BE');
-        expect(el.modelValue).to.equal('+32612345678');
+        const expectedModelValue = '+32612345678';
+        const expectedNumber = hasParentheses ? '(+32)612345678' : expectedModelValue;
+        expect(el.modelValue).to.equal(expectedModelValue);
         await el.updateComplete;
-        expect(el.value).to.equal('+32612345678');
+        expect(el.value).to.equal(expectedNumber);
       });
 
       it('changes the currently active country code in the textbox when empty', async () => {
-        const el = await fixture(html` <${tag} .allowedRegions="${['NL', 'BE']}"></${tag}> `);
+        const el = await fixture(
+          html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .allowedRegions="${['NL', 'BE']}"></${tag}> `,
+        );
         el.value = '';
         // @ts-ignore
         mimicUserChangingDropdown(el.refs.dropdown.value, 'BE');
         await el.updateComplete;
         await el.updateComplete;
-        expect(el.value).to.equal('+32');
+        const expectedNumber = hasParentheses ? '(+32)' : '+32';
+        expect(el.value).to.equal(expectedNumber);
       });
 
       it('changes the currently active country code in the textbox when empty with parentheses', async () => {
         const el = await fixture(
-          html` <${tag} format-country-code-style="parentheses" .allowedRegions="${[
+          html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  format-country-code-style="parentheses" .allowedRegions="${[
             'NL',
             'BE',
           ]}"></${tag}> `,
@@ -352,49 +386,60 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
       });
 
       it('changes the currently active country code in the textbox when invalid', async () => {
-        const el = await fixture(html` <${tag} .allowedRegions="${['NL', 'BE']}"></${tag}> `);
+        const el = await fixture(
+          html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .allowedRegions="${['NL', 'BE']}"></${tag}> `,
+        );
         el.value = '+3';
         // @ts-ignore
         mimicUserChangingDropdown(el.refs.dropdown.value, 'BE');
         await el.updateComplete;
         await el.updateComplete;
-        expect(el.value).to.equal('+32');
+        const expectedNumber = hasParentheses ? '(+32)' : '+32';
+        expect(el.value).to.equal(expectedNumber);
       });
 
       it('changes the currently active country code in the textbox when invalid and small part of phone number', async () => {
-        const el = await fixture(html` <${tag} .allowedRegions="${['NL', 'BE']}"></${tag}> `);
+        const el = await fixture(
+          html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .allowedRegions="${['NL', 'BE']}"></${tag}> `,
+        );
         el.value = '+3 2';
         // @ts-ignore
         mimicUserChangingDropdown(el.refs.dropdown.value, 'BE');
         await el.updateComplete;
         await el.updateComplete;
-        expect(el.value).to.equal('+32 2');
+        const expectedNumber = hasParentheses ? '(+32) 2' : '+32 2';
+        expect(el.value).to.equal(expectedNumber);
       });
 
       it('changes the currently active country code in the textbox when invalid and bigger part of phone number', async () => {
-        const el = await fixture(html` <${tag} .allowedRegions="${['NL', 'BE']}"></${tag}> `);
+        const el = await fixture(
+          html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .allowedRegions="${['NL', 'BE']}"></${tag}> `,
+        );
         el.value = '+3 612345678';
         // @ts-ignore
         mimicUserChangingDropdown(el.refs.dropdown.value, 'BE');
         await el.updateComplete;
         await el.updateComplete;
-
-        expect(el.value).to.equal('+32 612345678');
+        const expectedNumber = hasParentheses ? '(+32)612345678' : '+32612345678';
+        expect(el.value).to.equal(expectedNumber);
       });
 
       it('changes the currently phonenumber completely in the textbox when not sure what to replace', async () => {
-        const el = await fixture(html` <${tag} .allowedRegions="${['NL', 'BE']}""></${tag}> `);
+        const el = await fixture(
+          html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .allowedRegions="${['NL', 'BE']}""></${tag}> `,
+        );
         el.value = '+9912345678';
         // @ts-ignore
         mimicUserChangingDropdown(el.refs.dropdown.value, 'BE');
         await el.updateComplete;
         await el.updateComplete;
-        expect(el.value).to.equal('+32');
+        const expectedNumber = hasParentheses ? '(+32)' : '+32';
+        expect(el.value).to.equal(expectedNumber);
       });
 
       it('keeps focus on dropdownElement after selection if selected via unopened dropdown', async () => {
         const el = await fixture(
-          html` <${tag} .allowedRegions="${[
+          html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .allowedRegions="${[
             'NL',
             'BE',
           ]}" .modelValue="${'+31612345678'}"></${tag}> `,
@@ -410,7 +455,9 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
 
     describe('On activeRegion change', () => {
       it('updates dropdown value ', async () => {
-        const el = await fixture(html` <${tag} .modelValue="${'+31612345678'}"></${tag}> `);
+        const el = await fixture(
+          html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .modelValue="${'+31612345678'}"></${tag}> `,
+        );
         expect(el.activeRegion).to.equal('NL');
         // @ts-expect-error [allow protected]
         el._setActiveRegion('BE');
@@ -421,7 +468,9 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
       });
 
       it('keeps dropdown value if countryCode is the same', async () => {
-        const el = await fixture(html` <${tag} .modelValue="${'+12345678901'}"></${tag}> `);
+        const el = await fixture(
+          html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .modelValue="${'+12345678901'}"></${tag}> `,
+        );
         expect(el.activeRegion).to.equal('US');
         // @ts-expect-error [allow-protected-in test]
         el._setActiveRegion('AG'); // Also +1
@@ -434,13 +483,17 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
 
     describe('is empthy', () => {
       it('ignores initial countrycode', async () => {
-        const el = await fixture(html` <${tag}></${tag}> `);
+        const el = await fixture(
+          html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}" ></${tag}> `,
+        );
         // @ts-ignore
         expect(el._isEmpty()).to.be.true;
       });
 
       it('ignores initial countrycode with parentheses', async () => {
-        const el = await fixture(html` <${tag} format-country-code-style="parentheses"></${tag}> `);
+        const el = await fixture(
+          html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  format-country-code-style="parentheses"></${tag}> `,
+        );
         // @ts-ignore
         expect(el._isEmpty()).to.be.true;
       });

package/components/listbox/src/LionListbox.js

@@ -22,6 +22,8 @@ export class LionListbox extends ListboxMixin(
 
   /**
    * @configure FocusMixin
+   * @protected
+   * @returns {HTMLElement}
    */
   get _focusableNode() {
     return this._inputNode;

package/components/listbox/src/LionOption.js

@@ -140,6 +140,7 @@ export class LionOption extends DisabledMixin(
     const parentForm = /** @type {unknown} */ (this._parentFormGroup);
     this._isHandlingUserInput = true;
     if (parentForm && /** @type {ChoiceGroupHost} */ (parentForm).multipleChoice) {
+      // @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.checked = !this.checked;
       this.active = !this.active;
     } else {

package/components/listbox/src/ListboxMixin.js

@@ -26,8 +26,8 @@ import { moveUserProvidedDefaultSlottablesToTarget } from '../../core/src/SlotMi
  * @type {ListboxMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
-const ListboxMixinImplementation = superclass =>
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+// prettier-ignore
+const ListboxMixinImplementation = /** @type {ListboxMixin} */ (superclass =>
   class ListboxMixin extends FormControlMixin(
     ScopedElementsMixin(ChoiceGroupMixin(SlotMixin(FormRegistrarMixin(superclass)))),
   ) {
@@ -56,6 +56,7 @@ const ListboxMixinImplementation = 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 {
@@ -931,6 +932,6 @@ const ListboxMixinImplementation = superclass =>
     __initInteractionStates() {
       this.initInteractionState();
     }
-  };
+  });
 
 export const ListboxMixin = dedupeMixin(ListboxMixinImplementation);

package/components/localize/src/LocalizeManager.js

@@ -135,7 +135,6 @@ export class LocalizeManager extends EventTarget {
   }
 
   /**
-   * @readonly
    * @returns {Promise<Object|void>}
    */
   get loadingComplete() {
@@ -147,6 +146,18 @@ export class LocalizeManager extends EventTarget {
       : Promise.all(Object.values(this.__namespaceLoaderPromisesCache[this.locale]));
   }
 
+  /** @private */
+  __allowOverridesForExistingNamespaces;
+
+  /** @protected */
+  _autoLoadOnLocaleChange;
+
+  /** @protected */
+  _showKeyAsFallback;
+
+  /** @protected */
+  _fallbackLocale;
+
   constructor({
     allowOverridesForExistingNamespaces = false,
     autoLoadOnLocaleChange = false,
@@ -155,13 +166,9 @@ export class LocalizeManager extends EventTarget {
   } = {}) {
     super();
 
-    /** @private */
     this.__allowOverridesForExistingNamespaces = allowOverridesForExistingNamespaces;
-    /** @protected */
     this._autoLoadOnLocaleChange = !!autoLoadOnLocaleChange;
-    /** @protected */
     this._showKeyAsFallback = showKeyAsFallback;
-    /** @protected */
     this._fallbackLocale = fallbackLocale;
 
     const localeProvidedViaDataLangAttr = documentElement.getAttribute('data-localize-lang');
@@ -258,7 +265,7 @@ export class LocalizeManager extends EventTarget {
 
   /**
    * @param {string | string[]} keys
-   * @param {Object<string,?>} [vars]
+   * @param {Object<string,any>} [vars]
    * @param {Object} [opts]
    * @param {string} [opts.locale]
    * @returns {string}

package/components/localize/src/LocalizeMixin.js

@@ -14,8 +14,8 @@ import { getLocalizeManager } from './getLocalizeManager.js';
  * @type {LocalizeMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
-const LocalizeMixinImplementation = superclass =>
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+// prettier-ignore
+const LocalizeMixinImplementation = /** @type {LocalizeMixin} */ (superclass =>
   class LocalizeMixin extends superclass {
     /**
      * @returns {NamespaceObject[]}
@@ -31,8 +31,9 @@ const LocalizeMixinImplementation = superclass =>
       return true;
     }
 
-    constructor() {
-      super();
+    /** @param {...any} restArgs */
+    constructor(...restArgs) {
+      super(...restArgs);
 
       this._localizeManager = getLocalizeManager();
 
@@ -97,7 +98,7 @@ const LocalizeMixinImplementation = superclass =>
 
     /**
      * @param {string | string[]} keys
-     * @param {Object.<string,?>} [variables]
+     * @param {Object.<string,any>} [variables]
      * @param {Object} [options]
      * @param {string} [options.locale]
      * @returns {string | DirectiveResult}
@@ -176,6 +177,6 @@ const LocalizeMixinImplementation = superclass =>
 
     // eslint-disable-next-line class-methods-use-this
     onLocaleUpdated() {}
-  };
+  });
 
 export const LocalizeMixin = dedupeMixin(LocalizeMixinImplementation);

package/components/localize/src/date/utils/pad.js

@@ -7,5 +7,5 @@
 export function pad(n) {
   const digitRegex = /^\d+$/;
   const v = digitRegex.test(String(n)) ? Math.abs(Number(n)) : n;
-  return String(v < 10 ? `0${v}` : v);
+  return String(Number(v) < 10 ? `0${v}` : v);
 }

package/components/localize/test/LocalizeManager.test.js

@@ -724,7 +724,7 @@ describe('When supporting external translation tools like Google Translate', ()
   }
 
   /**
-   *  @param {...*} [cfg]
+   *  @param {*} [cfg]
    *  @returns {LocalizeManager}
    */
   function getInstance(cfg) {

package/components/localize/test/date/formatDate.test.js

@@ -210,6 +210,7 @@ describe('formatDate', () => {
           locale,
         };
         const parsedDate = /** @type {Date} */ (parseDate('12.10.2019'));
+        // @ts-ignore [dynamic-key-access-in-test]
         expect(formatDate(parsedDate, options)).to.equal(LOCALE_FORMATTED_DATE_MAP[locale]);
       });
     });

package/components/localize/test/number/formatNumber.test.js

@@ -2,12 +2,20 @@ import { expect } from '@open-wc/testing';
 import { getLocalizeManager, formatNumber } from '@lion/ui/localize-no-side-effects.js';
 import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 
-const currencyCode = /** @param {string} currency */ currency => ({
+/**
+ * @param {string} currency
+ * @returns {Intl.NumberFormatOptions}
+ */
+const currencyCode = currency => ({
   style: 'currency',
   currencyDisplay: 'code',
   currency,
 });
-const currencySymbol = /** @param {string} currency */ currency => ({
+/**
+ * @param {string} currency
+ * @returns {Intl.NumberFormatOptions}
+ */
+const currencySymbol = currency => ({
   style: 'currency',
   currencyDisplay: 'symbol',
   currency,

package/components/localize/test/number/formatNumberToParts.test.js

@@ -98,7 +98,7 @@ describe('formatNumberToParts', () => {
 
   describe("style: 'decimal'", () => {
     describe('no minimumFractionDigits', () => {
-      /** @type {Array.<Array.<?>>} */
+      /** @type {Array.<Array.<any>>} */
       const specs = [
         ['en-GB', 3500, [i('3'), g(','), i('500')]],
         ['en-GB', -3500, [m, i('3'), g(','), i('500')]],
@@ -127,7 +127,7 @@ describe('formatNumberToParts', () => {
     });
 
     describe('minimumFractionDigits: 2', () => {
-      /** @type {Array.<Array.<?>>} */
+      /** @type {Array.<Array.<any>>} */
       const specs = [
         ['en-GB', 3500, [i('3'), g(','), i('500'), d('.'), f('00')]],
         ['en-GB', -3500, [m, i('3'), g(','), i('500'), d('.'), f('00')]],

package/components/overlays/src/ArrowMixin.js

@@ -14,8 +14,8 @@ import { OverlayMixin } from './OverlayMixin.js';
  * @type {ArrowMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
-export const ArrowMixinImplementation = superclass =>
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+// prettier-ignore
+export const ArrowMixinImplementation = /** @type {ArrowMixin} */ (superclass =>
   class ArrowMixin extends OverlayMixin(superclass) {
     static get properties() {
       return {
@@ -29,6 +29,7 @@ export const ArrowMixinImplementation = 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
         .../** @type {CSSResultArray} */ (super.styles || []),
         css`
           :host {
@@ -219,6 +220,6 @@ export const ArrowMixinImplementation = superclass =>
         this.__setupRepositionCompletePromise();
       }
     }
-  };
+  });
 
 export const ArrowMixin = dedupeMixin(ArrowMixinImplementation);