@lion/ui 0.16.1 → 0.17.0-menu-system.0

package/collapsible.js

@@ -1 +1,2 @@
 export { LionCollapsible } from './components/collapsible/src/LionCollapsible.js';
+// export { DisclosureMixin } from '../components/collapsible/src/DisclosureMixin.js';

package/components/button/src/LionButton.js

@@ -52,6 +52,7 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
           vertical-align: middle;
           line-height: 24px;
           background-color: #eee; /* minimal styling to make it recognizable as btn */
+          color: black; /* if we set background, we should set color as well, like a native button */
           padding: 8px; /* padding to fix with min-height */
           outline: none; /* focus style handled below */
           cursor: default; /* we should always see the default arrow, never a caret */
@@ -219,4 +220,8 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
       this.click();
     }
   }
+
+  // we want to be able to identify LionButtons w/o instanceof (for perf (loose dep) and dual version support),
+  // so we use a static property for that that doesn't get renamed by minifiers
+  static ['_$isLionButton$'] = true;
 }

package/components/button/test-suites/LionButton.suite.js

@@ -279,6 +279,7 @@ export function LionButtonSuite({ klass = LionButton } = {}) {
 
         sameProperties.forEach(property => {
           it(`has same value of the property "${property}" as in native button event`, () => {
+            // @ts-ignore - dynamic property access
             expect(lionButtonEvent[property]).to.equal(nativeButtonEvent[property]);
           });
         });

package/components/calendar/src/LionCalendar.js

@@ -928,6 +928,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     if (type !== 'Date') {
       tmpDate.setDate(1);
     }
+    // @ts-ignore - dynamic method access
     tmpDate[`set${type}`](tmpDate[`get${type}`]() + modify);
     // if we've reset the day count,
     // restore day count as best we can
@@ -935,6 +936,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
       const maxDays = new Date(tmpDate.getFullYear(), tmpDate.getMonth() + 1, 0).getDate();
       tmpDate.setDate(Math.min(this.centralDate.getDate(), maxDays));
     }
+    // @ts-ignore - dynamic property access
     this[dateType] = tmpDate;
   }
 

package/components/collapsible/src/DisclosureMixin.js

@@ -0,0 +1,313 @@
+/**
+ * @typedef {import('../types/DisclosureMixinTypes.js').DisclosureHost} DisclosureHost
+ * @typedef {import('../types/DisclosureMixinTypes.js').DisclosureMixin} DisclosureMixin
+ */
+
+// /**
+//  * @type {DisclosureMixin}
+//  */
+// const DisclosureMixinImplementation = superclass =>
+//   // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+//   class DisclosureMixin extends superclass {
+//     /** @type {any} */
+//     static get properties() {
+//       return {
+//         opened: { type: Boolean, reflect: true },
+//         handleFocus: { type: Boolean, attribute: 'handle-focus' },
+//         invokerInteraction: { type: String, attribute: 'invoker-interaction' },
+//       };
+//     }
+
+//     /**
+//      * @param {Element} focusableElOrWrapper
+//      * @returns {Element|null}
+//      */
+//     static _getFocusableInvokerEl(focusableElOrWrapper) {
+//       // return focusableElOrWrapper;
+//       return (
+//         focusableElOrWrapper &&
+//         (focusableElOrWrapper.hasAttribute('tabindex') || focusableElOrWrapper.tagName === 'BUTTON'
+//           ? focusableElOrWrapper
+//           : focusableElOrWrapper.querySelector('[role=button], button'))
+//       );
+//     }
+
+//     get _invokerNode() {
+//       const ctor = this.constructor;
+//       if (!this.__invokerNode) {
+//         const slottedNode = Array.from(this.children).find(child => child.slot === 'invoker');
+//         if (slottedNode) {
+//           this.__invokerNode = ctor._getFocusableInvokerEl(slottedNode);
+//         } else {
+//           this.__invokerNode =
+//             this.previousElementSibling?.hasAttribute('data-invoker') &&
+//             ctor._getFocusableInvokerEl(this.previousElementSibling);
+//         }
+//       }
+//       return this.__invokerNode;
+//     }
+
+//     get _contentNode() {
+//       if (!this._cachedOverlayContentNode) {
+//         this._cachedOverlayContentNode = Array.from(this.children).find(
+//           child => child.slot === 'content',
+//         );
+//       }
+//       return this._cachedOverlayContentNode;
+//     }
+
+//     constructor() {
+//       super();
+//       this.opened = false;
+//       /**
+//        * @type {'click'|'hover'}
+//        */
+//       this.invokerInteraction = 'click';
+//       /**
+//        * Puts focus on `_contentNode` on open and on `_invokerNode` on close.
+//        * @type {Boolean}
+//        */
+//       this.handleFocus = false;
+//       this.__disclosureNeedsSetup = true;
+
+//       this.toggle = this.toggle.bind(this);
+//       this.open = this.open.bind(this);
+//       this.close = this.close.bind(this);
+
+//       this.__handleAnimateComplete = this.__handleAnimateComplete.bind(this);
+
+//       this.__onInvokerMouseenter = this.__onInvokerMouseenter.bind(this);
+//       this.__onContentMouseenter = this.__onContentMouseenter.bind(this);
+//       this.__onInvokerMouseleave = this.__onInvokerMouseleave.bind(this);
+//       this.__onContentMouseleave = this.__onContentMouseleave.bind(this);
+//     }
+
+//     connectedCallback() {
+//       super.connectedCallback();
+//       // we do a setup after every connectedCallback as firstUpdated will only be called once
+//       this.__disclosureNeedsSetup = true;
+//       this.updateComplete.then(() => {
+//         if (this.__disclosureNeedsSetup) {
+//           this._setupDisclosure();
+//         }
+//         this.__disclosureNeedsSetup = false;
+//       });
+//       this.__setupAnimation();
+//     }
+
+//     disconnectedCallback() {
+//       super.disconnectedCallback();
+//       this._teardownDisclosure();
+//       this.__teardownAnimation();
+//     }
+
+//     /**
+//      * @overridable
+//      */
+//     _setupDisclosure() {
+//       console.log('_setupDisclosure', this.level);
+
+//       this._setupOpenCloseListeners();
+//     }
+
+//     /**
+//      * @overridable
+//      */
+//     _teardownDisclosure() {
+//       this._teardownOpenCloseListeners();
+//     }
+
+//     /**
+//      * @overridable
+//      */
+//     _setupOpenCloseListeners() {
+//       console.log('setup listeners', this.level);
+//       if (!this._invokerNode) {
+//         return;
+//       }
+
+//       const interactions = this.invokerInteraction.split(' ');
+
+//       if (interactions.includes('hover')) {
+//         this._invokerNode.addEventListener('mouseenter', this.__onInvokerMouseenter);
+//         this._contentNode?.addEventListener('mouseenter', this.__onContentMouseenter);
+//         this._invokerNode.addEventListener('mouseleave', this.__onInvokerMouseleave);
+//         this._contentNode?.addEventListener('mouseleave', this.__onContentMouseleave);
+//       }
+//       if (interactions.includes('click')) {
+//         this._invokerNode.addEventListener('click', this.toggle);
+//       }
+//     }
+
+//     __onInvokerMouseenter() {
+//       this.__invokerHover = true;
+//       this.open();
+//     }
+
+//     __onContentMouseenter() {
+//       this.__contentHover = true;
+//       console.log('this.__contentHover', this.__contentHover);
+//       this.open();
+//     }
+
+//     __onInvokerMouseleave() {
+//       setTimeout(() => {
+//         if (!this.__contentHover) {
+//           this.close();
+//         }
+//       });
+//       this.__invokerHover = false;
+//     }
+
+//     __onContentMouseleave() {
+//       setTimeout(() => {
+//         if (!this.__invokerHover) {
+//           this.close();
+//         }
+//       });
+//       this.__contentHover = false;
+//     }
+
+//     /**
+//      * @overridable
+//      */
+//     _teardownOpenCloseListeners() {
+//       if (!this._invokerNode) {
+//         return;
+//       }
+
+//       this._invokerNode.removeEventListener('mouseenter', this.open);
+//       this._invokerNode.removeEventListener('mouseleave', this.close);
+//       this._contentNode?.removeEventListener('mouseenter', this.open);
+//       this._contentNode?.removeEventListener('mouseleave', this.close);
+
+//       // console.log(this, 'removetCLick');
+
+//       this._invokerNode.removeEventListener('click', this.toggle);
+//     }
+
+//     // TODO: fire event on updated?
+//     /**
+//      * @override
+//      * @param {string} name
+//      * @param {any} oldValue
+//      */
+//     requestUpdate(name, oldValue) {
+//       super.requestUpdate(name, oldValue);
+//       if (name === 'opened') {
+//         this.dispatchEvent(new Event('opened-changed'));
+//       }
+//     }
+
+//     /**
+//      * @param {import('lit-element').PropertyValues } changedProperties
+//      */
+//     updated(changedProperties) {
+//       super.updated(changedProperties);
+
+//       if (changedProperties.has('opened')) {
+//         this._onOpenedChanged();
+//       }
+//     }
+
+//     /**
+//      * @param {import('lit-element').PropertyValues } changedProperties
+//      */
+//     firstUpdated(changedProperties) {
+//       super.firstUpdated(changedProperties);
+//       this._onOpenedChanged();
+
+//       if (this.handleFocus && !this._contentNode?.hasAttribute('tabindex')) {
+//         this._contentNode?.setAttribute('tabindex', '-1');
+//       }
+//     }
+
+//     /**
+//      * @overridable
+//      */
+//     async _onOpenedChanged() {
+//       this._invokerNode.setAttribute('aria-expanded', `${this.opened}`);
+
+//       if (this.opened) {
+//         this._contentNode.style.setProperty('display', '');
+//         await this._showAnimation({ contentNode: this._contentNode });
+//         this._onDisclosureShow();
+//       } else {
+//         this._onDisclosureHide();
+//         await this._hideAnimation({ contentNode: this._contentNode });
+//         this._contentNode.style.setProperty('display', 'none');
+//       }
+//     }
+
+//     _onDisclosureShow() {
+//       // if (this.checkedIndex != null) {
+//       //   this.activeIndex = this.checkedIndex;
+//       // }
+
+//       if (this.handleFocus) {
+//         this._contentNode.focus();
+//       }
+//     }
+
+//     _onDisclosureHide() {
+//       if (this.handleFocus) {
+//         this._invokerNode.focus();
+//       }
+//     }
+
+//     /**
+//      * Show animation implementation in sub-classer.
+//      * @param {{ contentNode: HTMLElement; }} cfg
+//      */
+//     // eslint-disable-next-line class-methods-use-this, no-empty-function
+//     async _showAnimation(cfg) {
+//       this._refreshAnimateCompletePromise();
+//     }
+
+//     /**
+//      * Hide animation implementation in sub-classer.
+//      * @param {{ contentNode: HTMLElement; }} cfg
+//      */
+//     // eslint-disable-next-line class-methods-use-this, no-empty-function
+//     async _hideAnimation(cfg) {
+//       this._refreshAnimateCompletePromise();
+//     }
+
+//     _refreshAnimateCompletePromise() {
+//       this._animateComplete = new Promise(resolve => {
+//         // Note that when a lib like GSAP is used, neither 'transitionend' or 'animationend' will be called.
+//         // In such a case, a subclasser needs to resolve this pending promise by calling this method
+//         this._resolveAnimateComplete = resolve;
+//       });
+//     }
+
+//     __setupAnimation() {
+//       this._contentNode.addEventListener('transitionend', this.__handleAnimateComplete);
+//       this._contentNode.addEventListener('animationend', this.__handleAnimateComplete);
+//     }
+
+//     __teardownAnimation() {
+//       this._contentNode.removeEventListener('transitionend', this.__handleAnimateComplete);
+//       this._contentNode.removeEventListener('animationend', this.__handleAnimateComplete);
+//     }
+
+//     __handleAnimateComplete() {
+//       if (typeof this._resolveAnimateComplete === 'function') {
+//         this._resolveAnimateComplete();
+//       }
+//     }
+
+//     toggle() {
+//       // console.log('toggul', this);
+//       this.opened = !this.opened;
+//     }
+
+//     open() {
+//       this.opened = true;
+//     }
+
+//     close() {
+//       this.opened = false;
+//     }
+//   };
+// export const DisclosureMixin = dedupeMixin(DisclosureMixinImplementation);

package/components/collapsible/types/DisclosureMixinTypes.ts

@@ -0,0 +1,48 @@
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { LitElement } from 'lit';
+
+export declare class DisclosureHost {
+  public opened: Boolean;
+
+  protected get _invokerNode(): HTMLElement;
+
+  protected get _contentNode(): HTMLElement;
+
+  public toggle(): void;
+
+  public open(): void;
+
+  public close(): void;
+
+  protected _onOpenedChanged(): Promise<void>;
+
+  protected _onDisclosureShow(): void;
+
+  protected _onDisclosureHide(): void;
+
+  protected _showAnimation(cfg: object): Promise<void>;
+
+  protected _hideAnimation(cfg: object): Promise<void>;
+
+  protected _refreshAnimateCompletePromise(): void;
+
+  protected _setupOpenCloseListeners(): void;
+
+  protected _teardownOpenCloseListeners(): void;
+
+  private __setupAnimation(): void;
+
+  private __teardownAnimation(): void;
+
+  private __handleAnimateComplete(): void;
+}
+
+export declare function DisclosureImplementation<T extends Constructor<LitElement>>(
+  superclass: T,
+): T &
+  Constructor<DisclosureHost> &
+  DisclosureHost &
+  Pick<typeof DisclosureHost, keyof typeof DisclosureHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
+
+export type DisclosureMixin = typeof DisclosureImplementation;

package/components/combobox/src/utils/makeMatchingTextBold.js

@@ -9,7 +9,9 @@ export function makeMatchingTextBold(root, matchingString) {
     if (childNode.nodeName === '#text') {
       // check for match based on nodeValue
 
-      const re = new RegExp(`^(.*?)(${matchingString})(.*)$`, 'i');
+      // Escape special regex characters in matchingString
+      const escapedString = matchingString.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      const re = new RegExp(`^(.*?)(${escapedString})(.*)$`, 'i');
       // @ts-ignore
       const match = childNode.nodeValue.match(re);
 

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

@@ -3227,6 +3227,7 @@ describe('lion-combobox', () => {
         const [el, options] = await fruitFixture({ autocomplete: 'both', matchMode: 'all' });
         await mimicUserTyping(/** @type {LionCombobox} */ (el), 'choke');
         await el.updateComplete;
+        // @ts-ignore - array index access
         const labelledElement = options[0].querySelector('span[aria-label="Artichoke"]');
         expect(labelledElement).to.not.be.null;
         expect(labelledElement.innerText).to.equal('Artichoke');
@@ -3648,4 +3649,108 @@ describe('lion-combobox', () => {
       expect(el.opened).to.be.true;
     });
   });
+
+  describe('Special Characters in Search', () => {
+    it('correctly escapes all regex special characters in search queries', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox label="Search" name="foo">
+            <lion-option .choiceValue="${'test.com'}">test.com</lion-option>
+            <lion-option .choiceValue="${'func(arg)'}">func(arg)</lion-option>
+            <lion-option .choiceValue="${'array[0]'}">array[0]</lion-option>
+            <lion-option .choiceValue="${'C++'}">C++</lion-option>
+            <lion-option .choiceValue="${'a * b'}">a * b</lion-option>
+            <lion-option .choiceValue="${'What?'}">What?</lion-option>
+            <lion-option .choiceValue="${'$100'}">$100</lion-option>
+            <lion-option .choiceValue="${'x^2'}">x^2</lion-option>
+            <lion-option .choiceValue="${'a | b'}">a | b</lion-option>
+            <lion-option .choiceValue="${'path\\file'}">path\\file</lion-option>
+            <lion-option .choiceValue="${'{name}'}">{name}</lion-option>
+            <lion-option .choiceValue="${'user+tag@example.com'}">user+tag@example.com</lion-option>
+            <lion-option .choiceValue="${'(a+b)*c^2$'}">>(a+b)*c^2$</lion-option>
+            <lion-option .choiceValue="${'test|value?[x]'}">test|value?[x]</lion-option>
+            <lion-option .choiceValue="${'file.{txt|md}\\n'}">file.{txt|md}\\n</lion-option>
+            <lion-option .choiceValue="${'testXcom'}">testXcom</lion-option>
+            <lion-option .choiceValue="${'funcXargX'}">funcXargX</lion-option>
+            <lion-option .choiceValue="${'arrayX0X'}">arrayX0X</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      // Test dot - should not act as wildcard
+      await mimicUserTyping(el, 'test.com');
+      await el.updateComplete;
+      expect(getFilteredOptionValues(el)).to.eql(['test.com']);
+
+      // Test parentheses
+      await mimicUserTyping(el, '(arg)');
+      await el.updateComplete;
+      expect(getFilteredOptionValues(el)).to.eql(['func(arg)']);
+
+      // Test square brackets
+      await mimicUserTyping(el, '[0]');
+      await el.updateComplete;
+      expect(getFilteredOptionValues(el)).to.eql(['array[0]']);
+
+      // Test plus sign
+      await mimicUserTyping(el, '+');
+      await el.updateComplete;
+      expect(getFilteredOptionValues(el)).to.eql(['C++', 'user+tag@example.com', '(a+b)*c^2$']);
+
+      // Test asterisk
+      await mimicUserTyping(el, '*');
+      await el.updateComplete;
+      expect(getFilteredOptionValues(el)).to.eql(['a * b', '(a+b)*c^2$']);
+
+      // Test question mark
+      await mimicUserTyping(el, '?');
+      await el.updateComplete;
+      expect(getFilteredOptionValues(el)).to.eql(['What?', 'test|value?[x]']);
+
+      // Test dollar sign
+      await mimicUserTyping(el, '$');
+      await el.updateComplete;
+      expect(getFilteredOptionValues(el)).to.eql(['$100', '(a+b)*c^2$']);
+
+      // Test caret
+      await mimicUserTyping(el, '^2');
+      await el.updateComplete;
+      expect(getFilteredOptionValues(el)).to.eql(['x^2', '(a+b)*c^2$']);
+
+      // Test pipe
+      await mimicUserTyping(el, '|');
+      await el.updateComplete;
+      expect(getFilteredOptionValues(el)).to.eql(['a | b', 'test|value?[x]', 'file.{txt|md}\\n']);
+
+      // Test backslash
+      await mimicUserTyping(el, '\\');
+      await el.updateComplete;
+      expect(getFilteredOptionValues(el)).to.eql(['path\\file', 'file.{txt|md}\\n']);
+
+      // Test curly braces
+      await mimicUserTyping(el, '{name}');
+      await el.updateComplete;
+      expect(getFilteredOptionValues(el)).to.eql(['{name}']);
+
+      // Test complex combination with multiple special characters
+      await mimicUserTyping(el, '(a+b)*c');
+      await el.updateComplete;
+      expect(getFilteredOptionValues(el)).to.eql(['(a+b)*c^2$']);
+
+      // Test email with plus and dot
+      await mimicUserTyping(el, 'user+tag@example.com');
+      await el.updateComplete;
+      expect(getFilteredOptionValues(el)).to.eql(['user+tag@example.com']);
+
+      // Test combination with brackets, pipe and question mark
+      await mimicUserTyping(el, 'value?[x]');
+      await el.updateComplete;
+      expect(getFilteredOptionValues(el)).to.eql(['test|value?[x]']);
+
+      // Test combination with dot, curly braces, pipe and backslash
+      await mimicUserTyping(el, '.{txt|md}');
+      await el.updateComplete;
+      expect(getFilteredOptionValues(el)).to.eql(['file.{txt|md}\\n']);
+    });
+  });
 });

package/components/form-core/src/form-group/FormGroupMixin.js

@@ -352,11 +352,14 @@ const FormGroupMixinImplementation = superclass =>
       this.formElements._keys().forEach(name => {
         const elem = this.formElements[name];
         if (elem instanceof FormControlsCollection) {
+          // @ts-ignore - dynamic property access
           result[name] = elem.filter(el => _filterFn(el, property)).map(el => el[property]);
         } else if (_filterFn(elem, property)) {
           if (typeof elem._getFromAllFormElements === 'function') {
+            // @ts-ignore - dynamic property access
             result[name] = elem._getFromAllFormElements(property);
           } else {
+            // @ts-ignore - dynamic property access
             result[name] = elem[property];
           }
         }
@@ -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];

package/components/form-core/src/registration/FormRegistrarMixin.js

@@ -162,15 +162,21 @@ const FormRegistrarMixinImplementation = superclass =>
         }
 
         if (name.substr(-2) === '[]') {
+          // @ts-ignore - dynamic named access to form elements
           if (!Array.isArray(this.formElements[name])) {
+            // @ts-ignore
             this.formElements[name] = new FormControlsCollection();
           }
           if (indexToInsertAt > 0) {
+            // @ts-ignore
             this.formElements[name].splice(indexToInsertAt, 0, child);
           } else {
+            // @ts-ignore
             this.formElements[name].push(child);
           }
+          // @ts-ignore
         } else if (!this.formElements[name]) {
+          // @ts-ignore
           this.formElements[name] = child;
         } else {
           console.info('Error Node:', child); // eslint-disable-line no-console
@@ -194,12 +200,17 @@ const FormRegistrarMixinImplementation = superclass =>
       // 2. Handle name based object keys
       if (this._isFormOrFieldset) {
         const { name } = child; // FIXME: <-- ElementWithParentFormGroup should become LionFieldWithParentFormGroup so that "name" exists
+        // @ts-ignore - dynamic named access to form elements
         if (name.substr(-2) === '[]' && this.formElements[name]) {
+          // @ts-ignore
           const idx = this.formElements[name].indexOf(child);
           if (idx > -1) {
+            // @ts-ignore
             this.formElements[name].splice(idx, 1);
           }
+          // @ts-ignore
         } else if (this.formElements[name]) {
+          // @ts-ignore
           delete this.formElements[name];
         }
       }

package/components/form-core/test/FormControlMixin.test.js

@@ -153,6 +153,7 @@ describe('FormControlMixin', () => {
         el.shadowRoot?.querySelector('.form-field__label'),
       );
       Object.entries(expectedValues).forEach(([key, val]) => {
+        // @ts-ignore - dynamic style property access
         expect(labelStyle[key]).to.equal(val);
       });
     });

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

@@ -191,7 +191,9 @@ describe('Validator', () => {
   it('adds static ["_$isValidator$"] property as a marker to identify the Validator class across different lion versions (as instanceof cannot be used)', async () => {
     const myValidator = new Validator();
 
+    // @ts-ignore - static property access
     expect(myValidator.constructor['_$isValidator$']).to.exist;
+    // @ts-ignore - static property access
     expect(myValidator.constructor['_$isValidator$']).to.be.true;
   });
 

package/components/form-core/test-suites/ValidateMixin.suite.js

@@ -1554,11 +1554,13 @@ export function runValidateMixinSuite(customConfig) {
           // eslint-disable-next-line no-restricted-syntax
           for (const state of ['dirty', 'touched', 'prefilled', 'submitted']) {
             counter += 1;
+            // @ts-ignore - test property access
             el[state] = false;
             // eslint-disable-next-line no-await-in-loop
             await el.updateComplete;
             expect(spy.callCount).to.equal(counter);
             counter += 1;
+            // @ts-ignore - test property access
             el[state] = true;
             // eslint-disable-next-line no-await-in-loop
             await el.updateComplete;

package/components/form-core/test-suites/ValidateMixinFeedbackPart.suite.js

@@ -714,6 +714,7 @@ export function runValidateMixinFeedbackPart() {
             const results = {
               'a-string-instead-of-bool': 'Msg based on enum output',
             };
+            // @ts-ignore - test data structure
             return results[/** @type {string} */ (outcome)];
           }
         }