@lion/ui 0.23.0 → 0.25.0

package/components/combobox/test/validators.test.js

@@ -11,7 +11,8 @@ import { expect, fixture, html } from '@open-wc/testing';
 describe('MatchesOption validation', () => {
   it('is enabled when an invalid value is set', async () => {
     let isEnabled;
-    const el = /** @type {LionCombobox} */ (
+    const el =
+      /** @type {LionCombobox} */
       await fixture(html`
         <lion-combobox name="foo">
           <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -19,27 +20,22 @@ describe('MatchesOption validation', () => {
           <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
           <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
         </lion-combobox>
-      `)
-    );
+      `);
     const config = {};
     config.node = el;
     const validator = new MatchesOption();
-
     await mimicUserTyping(el, 'Artichoke');
     await el.updateComplete;
-
     isEnabled = validator.execute('Artichoke', undefined, config);
     expect(isEnabled).to.be.false;
-
     await mimicUserTyping(el, 'Foo');
     await el.updateComplete;
-
     isEnabled = validator.execute('Foo', undefined, config);
     expect(isEnabled).to.be.true;
   });
-
   it('is not enabled when empty is set', async () => {
-    const el = /** @type {LionCombobox} */ (
+    const el =
+      /** @type {LionCombobox} */
       await fixture(html`
         <lion-combobox name="foo">
           <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -47,15 +43,12 @@ describe('MatchesOption validation', () => {
           <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
           <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
         </lion-combobox>
-      `)
-    );
+      `);
     const config = {};
     config.node = el;
     const validator = new MatchesOption();
-
     el.modelValue = '';
     await el.updateComplete;
-
     const isEnabled = validator.execute('', undefined, config);
     expect(isEnabled).to.be.false;
   });

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

@@ -51,8 +51,16 @@ export async function mimicUserTyping(el, keys) {
  * @param {string} key
  */
 export function mimicKeyPress(el, key) {
-  el.dispatchEvent(new KeyboardEvent('keydown', { key }));
-  el.dispatchEvent(new KeyboardEvent('keyup', { key }));
+  el.dispatchEvent(
+    new KeyboardEvent('keydown', {
+      key,
+    }),
+  );
+  el.dispatchEvent(
+    new KeyboardEvent('keyup', {
+      key,
+    }),
+  );
 }
 
 /**
@@ -61,16 +69,18 @@ export function mimicKeyPress(el, key) {
  */
 export async function mimicUserTypingAdvanced(el, values) {
   const { _inputNode } = getComboboxMembers(el);
-  _inputNode.dispatchEvent(new Event('focusin', { bubbles: true }));
+  _inputNode.dispatchEvent(
+    new Event('focusin', {
+      bubbles: true,
+    }),
+  );
   let cursorPosition = _inputNode.selectionStart || 0;
-
   for (const key of values) {
     // eslint-disable-next-line no-await-in-loop, no-loop-func
-    await new Promise(resolve => {
+    await new Promise((resolve) => {
       const selectionStart = _inputNode.selectionStart || 0;
       const selectionEnd = _inputNode.selectionEnd || 0;
       const hasSelection = selectionStart !== selectionEnd;
-
       if (key === 'Backspace' || key === 'Delete') {
         if (hasSelection) {
           _inputNode.value =
@@ -93,10 +103,13 @@ export async function mimicUserTypingAdvanced(el, values) {
           _inputNode.value.slice(0, cursorPosition) + key + _inputNode.value.slice(cursorPosition);
         cursorPosition += 1;
       }
-
       mimicKeyPress(_inputNode, key);
-      _inputNode.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
-
+      _inputNode.dispatchEvent(
+        new Event('input', {
+          bubbles: true,
+          composed: true,
+        }),
+      );
       el.updateComplete.then(() => {
         // @ts-ignore
         resolve();
@@ -113,9 +126,9 @@ export function getFilteredOptionValues(el) {
   /**
    * @param {{ style: { display: string; }; }} option
    */
-  const filtered = options.filter(option => option.getAttribute('aria-hidden') !== 'true');
+  const filtered = options.filter((option) => option.getAttribute('aria-hidden') !== 'true');
   /**
    * @param {{ value: any; }} option
    */
-  return filtered.map(option => option.value);
+  return filtered.map((option) => option.value);
 }

package/components/core/src/DisabledMixin.js

@@ -9,78 +9,73 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
 // prettier-ignore
-const DisabledMixinImplementation = /** @type {DisabledMixin} */ (superclass =>
-  // eslint-disable-next-line no-shadow
-  class extends superclass {
-    static get properties() {
-      return {
-        disabled: {
-          type: Boolean,
-          reflect: true,
-        },
-      };
-    }
+const DisabledMixinImplementation = /** @type {DisabledMixin} */superclass =>
+// eslint-disable-next-line no-shadow
+class extends superclass {
+  static get properties() {
+    return {
+      disabled: {
+        type: Boolean,
+        reflect: true
+      }
+    };
+  }
 
-    /** @param {...any} args */
-    constructor(...args) {
-      super(...args);
-      /** @protected */
+  /** @param {...any} args */
+  constructor(...args) {
+    super(...args);
+    /** @protected */
+    this._requestedToBeDisabled = false;
+    /** @private */
+    this.__isUserSettingDisabled = true;
+    /** @private */
+    this.__restoreDisabledTo = false;
+    this.disabled = false;
+  }
+  makeRequestToBeDisabled() {
+    if (this._requestedToBeDisabled === false) {
+      this._requestedToBeDisabled = true;
+      this.__restoreDisabledTo = this.disabled;
+      this.__internalSetDisabled(true);
+    }
+  }
+  retractRequestToBeDisabled() {
+    if (this._requestedToBeDisabled === true) {
       this._requestedToBeDisabled = false;
-      /** @private */
-      this.__isUserSettingDisabled = true;
-      /** @private */
-      this.__restoreDisabledTo = false;
-      this.disabled = false;
+      this.__internalSetDisabled(this.__restoreDisabledTo);
     }
+  }
 
-    makeRequestToBeDisabled() {
-      if (this._requestedToBeDisabled === false) {
-        this._requestedToBeDisabled = true;
-        this.__restoreDisabledTo = this.disabled;
-        this.__internalSetDisabled(true);
-      }
-    }
+  /**
+   * @param {boolean} value
+   * @private
+   */
+  __internalSetDisabled(value) {
+    this.__isUserSettingDisabled = false;
+    this.disabled = value;
+    this.__isUserSettingDisabled = true;
+  }
 
-    retractRequestToBeDisabled() {
-      if (this._requestedToBeDisabled === true) {
-        this._requestedToBeDisabled = false;
-        this.__internalSetDisabled(this.__restoreDisabledTo);
+  /**
+   * @param {string} [name]
+   * @param {unknown} [oldValue]
+   * @param {import('lit').PropertyDeclaration} [options]
+   * @returns {void}
+   */
+  requestUpdate(name, oldValue, options) {
+    super.requestUpdate(name, oldValue, options);
+    if (name === 'disabled') {
+      if (this.__isUserSettingDisabled) {
+        this.__restoreDisabledTo = this.disabled;
       }
-    }
-
-    /**
-     * @param {boolean} value
-     * @private
-     */
-    __internalSetDisabled(value) {
-      this.__isUserSettingDisabled = false;
-      this.disabled = value;
-      this.__isUserSettingDisabled = true;
-    }
-
-    /**
-     * @param {string} [name]
-     * @param {unknown} [oldValue]
-     * @param {import('lit').PropertyDeclaration} [options]
-     * @returns {void}
-     */
-    requestUpdate(name, oldValue, options) {
-      super.requestUpdate(name, oldValue, options);
-      if (name === 'disabled') {
-        if (this.__isUserSettingDisabled) {
-          this.__restoreDisabledTo = this.disabled;
-        }
-        if (this.disabled === false && this._requestedToBeDisabled === true) {
-          this.__internalSetDisabled(true);
-        }
+      if (this.disabled === false && this._requestedToBeDisabled === true) {
+        this.__internalSetDisabled(true);
       }
     }
-
-    click() {
-      if (this.disabled) return;
-
-      super.click();
-    }
-  });
-
+  }
+  click() {
+    if (this.disabled) return;
+    super.click();
+  }
+};
 export const DisabledMixin = dedupeMixin(DisabledMixinImplementation);

package/components/core/src/DisabledWithTabIndexMixin.js

@@ -10,99 +10,92 @@ import { DisabledMixin } from './DisabledMixin.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
 // prettier-ignore
-const DisabledWithTabIndexMixinImplementation = /** @type {DisabledWithTabIndexMixin} */ (superclass =>
-  // eslint-disable-next-line no-shadow
-  class extends DisabledMixin(superclass) {
-    static get properties() {
-      return {
-        // we use a property here as if we use the native tabIndex we can not set a default value
-        // in the constructor as it synchronously sets the attribute which is not allowed in the
-        // constructor phase
-        tabIndex: {
-          type: Number,
-          reflect: true,
-          attribute: 'tabindex',
-        },
-      };
-    }
-
-    constructor() {
-      super();
-      /** @private */
-      this.__isUserSettingTabIndex = true;
-      /** @private */
-      this.__restoreTabIndexTo = 0;
-      this.__internalSetTabIndex(0);
-    }
-
-    makeRequestToBeDisabled() {
-      super.makeRequestToBeDisabled();
-      if (this._requestedToBeDisabled === false && this.tabIndex != null) {
-        this.__restoreTabIndexTo = this.tabIndex;
+const DisabledWithTabIndexMixinImplementation = /** @type {DisabledWithTabIndexMixin} */superclass =>
+// eslint-disable-next-line no-shadow
+class extends DisabledMixin(superclass) {
+  static get properties() {
+    return {
+      // we use a property here as if we use the native tabIndex we can not set a default value
+      // in the constructor as it synchronously sets the attribute which is not allowed in the
+      // constructor phase
+      tabIndex: {
+        type: Number,
+        reflect: true,
+        attribute: 'tabindex'
       }
+    };
+  }
+  constructor() {
+    super();
+    /** @private */
+    this.__isUserSettingTabIndex = true;
+    /** @private */
+    this.__restoreTabIndexTo = 0;
+    this.__internalSetTabIndex(0);
+  }
+  makeRequestToBeDisabled() {
+    super.makeRequestToBeDisabled();
+    if (this._requestedToBeDisabled === false && this.tabIndex != null) {
+      this.__restoreTabIndexTo = this.tabIndex;
     }
-
-    retractRequestToBeDisabled() {
-      super.retractRequestToBeDisabled();
-      if (this._requestedToBeDisabled === true) {
-        this.__internalSetTabIndex(this.__restoreTabIndexTo);
-      }
+  }
+  retractRequestToBeDisabled() {
+    super.retractRequestToBeDisabled();
+    if (this._requestedToBeDisabled === true) {
+      this.__internalSetTabIndex(this.__restoreTabIndexTo);
     }
+  }
 
-    /**
-     * // TODO: check if this is a false positive or if we can improve
-     * @configure ReactiveElement
-     */
-    // @ts-expect-error
-    static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
+  /**
+   * // TODO: check if this is a false positive or if we can improve
+   * @configure ReactiveElement
+   */
+  // @ts-expect-error
+  static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
 
-    /**
-     * @param {number} value
-     * @private
-     */
-    __internalSetTabIndex(value) {
-      this.__isUserSettingTabIndex = false;
-      this.tabIndex = value;
-      this.__isUserSettingTabIndex = true;
-    }
+  /**
+   * @param {number} value
+   * @private
+   */
+  __internalSetTabIndex(value) {
+    this.__isUserSettingTabIndex = false;
+    this.tabIndex = value;
+    this.__isUserSettingTabIndex = true;
+  }
 
-    /**
-     * @param {string} [name]
-     * @param {unknown} [oldValue]
-     * @param {import('lit').PropertyDeclaration} [options]
-     * @returns {void}
-     */
-    requestUpdate(name, oldValue, options) {
-      super.requestUpdate(name, oldValue, options);
-
-      if (name === 'disabled') {
-        if (this.disabled) {
-          this.__internalSetTabIndex(-1);
-        } else {
-          this.__internalSetTabIndex(this.__restoreTabIndexTo);
-        }
-      }
-
-      if (name === 'tabIndex') {
-        if (this.__isUserSettingTabIndex && this.tabIndex != null) {
-          this.__restoreTabIndexTo = this.tabIndex;
-        }
-
-        if (this.tabIndex !== -1 && this._requestedToBeDisabled === true) {
-          this.__internalSetTabIndex(-1);
-        }
+  /**
+   * @param {string} [name]
+   * @param {unknown} [oldValue]
+   * @param {import('lit').PropertyDeclaration} [options]
+   * @returns {void}
+   */
+  requestUpdate(name, oldValue, options) {
+    super.requestUpdate(name, oldValue, options);
+    if (name === 'disabled') {
+      if (this.disabled) {
+        this.__internalSetTabIndex(-1);
+      } else {
+        this.__internalSetTabIndex(this.__restoreTabIndexTo);
       }
     }
-
-    /** @param {import('lit').PropertyValues } changedProperties */
-    firstUpdated(changedProperties) {
-      super.firstUpdated(changedProperties);
-      // for ShadyDom the timing is a little different and we need to make sure
-      // the tabindex gets correctly updated here
-      if (this.disabled) {
+    if (name === 'tabIndex') {
+      if (this.__isUserSettingTabIndex && this.tabIndex != null) {
+        this.__restoreTabIndexTo = this.tabIndex;
+      }
+      if (this.tabIndex !== -1 && this._requestedToBeDisabled === true) {
         this.__internalSetTabIndex(-1);
       }
     }
-  });
+  }
 
+  /** @param {import('lit').PropertyValues } changedProperties */
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    // for ShadyDom the timing is a little different and we need to make sure
+    // the tabindex gets correctly updated here
+    if (this.disabled) {
+      this.__internalSetTabIndex(-1);
+    }
+  }
+};
 export const DisabledWithTabIndexMixin = dedupeMixin(DisabledWithTabIndexMixinImplementation);

package/components/core/src/EventTargetShim.js

@@ -22,12 +22,9 @@ export class EventTargetShim {
     /**
      * @param {Event|CustomEvent} event
      */
-    const delegatedDispatchEvent = event => delegate.dispatchEvent(event);
-
+    const delegatedDispatchEvent = (event) => delegate.dispatchEvent(event);
     this.addEventListener = delegatedAddEventListener;
-
     this.removeEventListener = delegatedRemoveEventListener;
-
     this.dispatchEvent = delegatedDispatchEvent;
   }
 }

package/components/core/src/ScopedElementsMixin.js

@@ -51,12 +51,11 @@ export function supportsScopedRegistry() {
  * @param {T} superclass
  * @return {T & ScopedElementsHostConstructor & ScopedElementsHostV2Constructor}
  */
-const ScopedElementsMixinImplementation = superclass =>
+const ScopedElementsMixinImplementation = (superclass) =>
   /** @type {ScopedElementsHost} */
   class ScopedElementsHost extends OpenWcLitScopedElementsMixin(superclass) {
     constructor() {
       super();
-
       if (isServer) {
         // We are on the server: this means we can't support scoped registries...
         // So we must treat it like the "no-polyfill scenario", that registers scoped
@@ -74,7 +73,6 @@ const ScopedElementsMixinImplementation = superclass =>
         }
       }
     }
-
     createScopedElement(/** @type {string} */ tagName) {
       const root = supportsScopedRegistry() ? this.shadowRoot : document;
       // @ts-expect-error polyfill to support createElement on shadowRoot is loaded
@@ -88,7 +86,7 @@ const ScopedElementsMixinImplementation = superclass =>
      * @param {typeof HTMLElement} classToBeRegistered
      */
     defineScopedElement(tagName, classToBeRegistered) {
-      const { registry } = /** @type {{ registry: CustomElementRegistry }} */ (this);
+      const { registry } = /** @type {{ registry: CustomElementRegistry }} */ this;
       const registeredClass = registry.get(tagName);
       const isNewClassWithSameName = registeredClass && registeredClass !== classToBeRegistered;
       if (!supportsScopedRegistry() && isNewClassWithSameName) {
@@ -116,8 +114,7 @@ const ScopedElementsMixinImplementation = superclass =>
      */
     attachShadow(options) {
       // @ts-expect-error
-      const { scopedElements } = /** @type {typeof ScopedElementsHost} */ (this.constructor);
-
+      const { scopedElements } = /** @type {typeof ScopedElementsHost} */ this.constructor;
       const shouldCreateRegistry =
         !this.registry ||
         // @ts-expect-error
@@ -136,7 +133,6 @@ const ScopedElementsMixinImplementation = superclass =>
           this.defineScopedElement(tagName, klass);
         }
       }
-
       return Element.prototype.attachShadow.call(this, {
         ...options,
         // The polyfill currently expects the registry to be passed as `customElements`
@@ -146,25 +142,18 @@ const ScopedElementsMixinImplementation = superclass =>
         registry: this.registry,
       });
     }
-
     createRenderRoot() {
-      const { shadowRootOptions, elementStyles } = /** @type {TypeofLitElement} */ (
-        this.constructor
-      );
-
+      const { shadowRootOptions, elementStyles } = /** @type {TypeofLitElement} */ this.constructor;
       const createdRoot = this.attachShadow(shadowRootOptions);
       if (supportsScopedRegistry()) {
         // @ts-expect-error
         this.renderOptions.creationScope = createdRoot;
       }
-
       if (createdRoot instanceof ShadowRoot) {
         adoptStyles(createdRoot, elementStyles);
         this.renderOptions.renderBefore = this.renderOptions.renderBefore || createdRoot.firstChild;
       }
-
       return createdRoot;
     }
   };
-
 export const ScopedElementsMixin = dedupeMixin(ScopedElementsMixinImplementation);

package/components/core/src/ScopedStylesController.js

@@ -26,7 +26,6 @@ export class ScopedStylesController {
     this.__styleTag = document.createElement('style');
     this.scopedClass = `${this.host.localName}-${Math.floor(Math.random() * 10000)}`;
   }
-
   hostConnected() {
     if (!this.#hasConnected) {
       this.host.classList.add(this.scopedClass);
@@ -34,15 +33,12 @@ export class ScopedStylesController {
       this.#hasConnected = true;
     }
   }
-
   __setupStyleTag() {
     // Make it win from other elements on the page.
     // TODO: consider adding an id here to always win, since we are simulating shadow dom
     // behavior here.
     const highSpecifictyScope = `${this.scopedClass}.${this.scopedClass}`;
-    this.__styleTag.textContent = /** @type {typeof ScopedStylesController} */ (
-      this.host.constructor
-    )
+    this.__styleTag.textContent = /** @type {typeof ScopedStylesController} */ this.host.constructor
       .scopedStyles(unsafeCSS(highSpecifictyScope))
       .toString();
     this.host.insertBefore(this.__styleTag, this.host.childNodes[0]);