@lion/ui 0.22.0 → 0.24.0

package/components/core/test-helpers/getCachedFixture.js

@@ -14,38 +14,32 @@ export async function getCachedFixture(
 ) {
   class CachingWrapper extends LitElement {
     static properties = {
-      _show: { type: Boolean },
+      _show: {
+        type: Boolean,
+      },
     };
-
     constructor() {
       super();
       this._show = true;
       this.ref = createRef();
     }
-
     async show() {
       this._show = true;
       return this.updateComplete;
     }
-
     async hide() {
       this._show = false;
       return this.updateComplete;
     }
-
     render() {
       return html`${cache(this._show ? render(this.ref) : nothing)}`;
     }
   }
-
   const customElementName = defineCE(CachingWrapper);
   const customTag = unsafeStatic(customElementName);
-
   const wrapper =
-    /** @type {LitElement & { ref: import('lit/directives/ref.js').Ref<any>, show(): Promise<void>, hide(): Promise<void> }} */ (
-      await fixture(html`<${customTag}></${customTag}>`)
-    );
-
+    /** @type {LitElement & { ref: import('lit/directives/ref.js').Ref<any>, show(): Promise<void>, hide(): Promise<void> }} */
+    await fixture(html`<${customTag}></${customTag}>`);
   return {
     wrapper,
     el: wrapper.ref.value,

package/components/core/types/SlotMixinTypes.ts

@@ -65,6 +65,7 @@ export declare class SlotHost {
  * `SlotMixin`, when attached to the DOM it creates content for defined slots in the Light DOM.
  * The content element is created using a factory function and is assigned a slot name from the key.
  * Existing slot content is not overridden.
+ * Reapplying the deduped mixin preserves the superclass type, including overridden accessors.
  *
  * The purpose is to have the default content in the Light DOM rather than hidden in Shadow DOM
  * like default slot content works natively.
@@ -78,11 +79,15 @@ export declare class SlotHost {
  *   };
  * }
  */
+declare function SlotMixinImplementation<T extends Constructor<LitElement & SlotHost>>(
+  superclass: T,
+): T;
 declare function SlotMixinImplementation<T extends Constructor<LitElement>>(
   superclass: T,
 ): T &
-  Constructor<SlotHost> &
-  Pick<typeof SlotHost, keyof typeof SlotHost> &
-  Pick<typeof LitElement, keyof typeof LitElement>;
+  Constructor<SlotHost> & { prototype: LitElement & SlotHost } & Pick<
+    typeof LitElement,
+    Exclude<keyof typeof LitElement, 'prototype'>
+  >;
 
 export type SlotMixin = typeof SlotMixinImplementation;

package/components/dialog/src/LionDialog.js

@@ -8,10 +8,12 @@ export class LionDialog extends OverlayMixin(LitElement) {
   /** @type {any} */
   static get properties() {
     return {
-      isAlertDialog: { type: Boolean, attribute: 'is-alert-dialog' },
+      isAlertDialog: {
+        type: Boolean,
+        attribute: 'is-alert-dialog',
+      },
     };
   }
-
   constructor() {
     super();
     this.isAlertDialog = false;
@@ -27,7 +29,6 @@ export class LionDialog extends OverlayMixin(LitElement) {
       isAlertDialog: this.isAlertDialog,
     };
   }
-
   render() {
     return html`
       <slot name="invoker"></slot>

package/components/dialog/test/lion-dialog.integration.test.js

@@ -1,14 +1,12 @@
 /* eslint-disable lit-a11y/no-autofocus */
 import { expect, fixture as _fixture, html, waitUntil } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
-
 import '@lion/ui/define/lion-button.js';
 import '@lion/ui/define/lion-combobox.js';
 import '@lion/ui/define/lion-select-rich.js';
 import '@lion/ui/define/lion-option.js';
 import '@lion/ui/define/lion-dialog.js';
 import '@lion/ui/define/lion-tooltip.js';
-
 import { mimicUserTyping } from '@lion/ui/combobox-test-helpers.js';
 import sinon from 'sinon';
 
@@ -16,10 +14,8 @@ import sinon from 'sinon';
  * @typedef {import('../src/LionDialog.js').LionDialog} LionDialog
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionDialog>} */ (_fixture);
-
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionDialog>} */ _fixture;
 const dropDownEntries = ['Apple', 'Banana'];
-
 describe('lion-dialog', () => {
   describe('lion-combobox integration', () => {
     it('should close lion-combobox dropdown on Escape and should not close the parent lion-dialog', async () => {
@@ -37,16 +33,16 @@ describe('lion-dialog', () => {
           </div>
         </lion-dialog>
       `);
-      const dialogInvoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
+      const dialogInvoker = /** @type {HTMLElement} */ el.querySelector('[slot="invoker"]');
       dialogInvoker.click();
       const combobox = /** @type {HTMLElement} */ el.querySelector('lion-combobox');
       const isComboboxRendered = () => !!combobox?.shadowRoot?.childNodes.length;
       await waitUntil(isComboboxRendered);
       // @ts-ignore
       await mimicUserTyping(combobox, 'a');
-      const firstOption = /** @type { HTMLElement | undefined } */ (
-        el.querySelectorAll('lion-option')?.[0]
-      );
+      const firstOption =
+        /** @type { HTMLElement | undefined } */
+        el.querySelectorAll('lion-option')?.[0];
       // @ts-ignore
       const isComboboxFirstOptionInDropdownVisible = () => firstOption?.checkVisibility();
       await waitUntil(isComboboxFirstOptionInDropdownVisible);
@@ -68,7 +64,6 @@ describe('lion-dialog', () => {
       expect(isDialogVisible()).to.equal(true);
     });
   });
-
   describe('lion-select-rich integration', () => {
     it('should close lion-select-rich dropdown on Escape and should not close the parent lion-dialog', async () => {
       const el = await fixture(html`
@@ -85,11 +80,9 @@ describe('lion-dialog', () => {
           </div>
         </lion-dialog>
       `);
-      const dialogInvoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
+      const dialogInvoker = /** @type {HTMLElement} */ el.querySelector('[slot="invoker"]');
       dialogInvoker.click();
-      const selectRichInvoker = /** @type {HTMLElement} */ (
-        el.querySelector('lion-select-invoker')
-      );
+      const selectRichInvoker = /** @type {HTMLElement} */ el.querySelector('lion-select-invoker');
       const isSelectRichInvokerRendered = () => !!selectRichInvoker?.shadowRoot?.childNodes.length;
       await waitUntil(isSelectRichInvokerRendered);
       const selectRich = el?.querySelector('lion-select-rich');
@@ -97,7 +90,6 @@ describe('lion-dialog', () => {
       // Note, do not remove `console.log` down below. There is a bug in test engine.
       // Referring dialog.close from the test environement fixes the bug
       console.log(selectRichDialog?.close);
-
       selectRichInvoker?.click();
       const dropdownDialog = el
         ?.querySelector('lion-select-rich')
@@ -111,7 +103,7 @@ describe('lion-dialog', () => {
           // @ts-ignore
           ?.checkVisibility();
       await waitUntil(isDropdownVisible);
-      const lionOptions = /** @type {HTMLElement} */ (el.querySelector('lion-options'));
+      const lionOptions = /** @type {HTMLElement} */ el.querySelector('lion-options');
       lionOptions?.focus();
       await sendKeys({
         press: 'Escape',
@@ -122,7 +114,6 @@ describe('lion-dialog', () => {
       expect(isDialogVisible()).to.equal(true);
     });
   });
-
   describe('lion-tooltip integration', () => {
     it('should close lion-tooltip on first Escape and should close the parent lion-dialog on the second Escape', async () => {
       const el = await fixture(html`
@@ -137,14 +128,13 @@ describe('lion-dialog', () => {
           </div>
         </lion-dialog>
       `);
-
       await el.updateComplete;
-      const dialogInvoker = /** @type {HTMLElement} */ (el.querySelector('.dialog-invoker'));
+      const dialogInvoker = /** @type {HTMLElement} */ el.querySelector('.dialog-invoker');
       dialogInvoker.click();
       const tooltip = /** @type {HTMLElement} */ el.querySelector('lion-tooltip');
       const isTooltipRendered = () => !!tooltip?.shadowRoot?.childNodes.length;
       await waitUntil(isTooltipRendered);
-      const tooltipButton = /** @type {HTMLElement} */ (el.querySelector('.demo-tooltip-invoker'));
+      const tooltipButton = /** @type {HTMLElement} */ el.querySelector('.demo-tooltip-invoker');
       tooltipButton?.focus();
       const getTooltipContent = () =>
         el

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

@@ -20,8 +20,7 @@ import '@lion/ui/define/lion-tabs.js';
  * @typedef {import('../src/LionDialog.js').LionDialog} LionDialog
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionDialog>} */ (_fixture);
-
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionDialog>} */ _fixture;
 describe('lion-dialog', () => {
   // For some reason, globalRootNode is not cleared properly on disconnectedCallback from previous overlay test fixtures...
   // Not sure why this "bug" happens...
@@ -31,18 +30,15 @@ describe('lion-dialog', () => {
       globalRootNode.innerHTML = '';
     }
   });
-
   describe('Integration tests', () => {
     const tagString = 'lion-dialog';
     const tag = unsafeStatic(tagString);
-
     runOverlayMixinSuite({
       tagString,
       tag,
       suffix: ' for lion-dialog',
     });
   });
-
   describe('Basic', () => {
     it('should show content on invoker click', async () => {
       const el = await fixture(html`
@@ -51,13 +47,12 @@ describe('lion-dialog', () => {
           <button slot="invoker">Popup button</button>
         </lion-dialog>
       `);
-      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
+      const invoker = /** @type {HTMLElement} */ el.querySelector('[slot="invoker"]');
       invoker.click();
       // @ts-expect-error [allow-protected-in-tests]
       await el._overlayCtrl._showComplete;
       expect(el.opened).to.be.true;
     });
-
     it('supports nested overlays', async () => {
       const el = await fixture(html`
         <lion-dialog>
@@ -77,8 +72,7 @@ describe('lion-dialog', () => {
       // @ts-expect-error [allow-protected-in-tests]
       await el._overlayCtrl._showComplete;
       expect(el.opened).to.be.true;
-
-      const nestedDialogEl = /** @type {LionDialog} */ (el.querySelector('lion-dialog'));
+      const nestedDialogEl = /** @type {LionDialog} */ el.querySelector('lion-dialog');
       // @ts-expect-error you're not allowed to call protected _overlayInvokerNode in public context, but for testing it's okay
       nestedDialogEl?._overlayInvokerNode.click();
       // @ts-expect-error [allow-protected-in-tests]
@@ -86,7 +80,6 @@ describe('lion-dialog', () => {
       expect(nestedDialogEl.opened).to.be.true;
     });
   });
-
   describe('focus', () => {
     it('sets focus on contentSlot by default', async () => {
       const el = await fixture(html`
@@ -102,10 +95,9 @@ describe('lion-dialog', () => {
       const invokerNode = el._overlayInvokerNode;
       invokerNode.focus();
       invokerNode.click();
-      const contentNode = /** @type {Element} */ (el.querySelector('[slot="content"]'));
+      const contentNode = /** @type {Element} */ el.querySelector('[slot="content"]');
       expect(isActiveElement(contentNode)).to.be.true;
     });
-
     it('sets focus on autofocused element', async () => {
       const el = await fixture(html`
         <lion-dialog>
@@ -120,13 +112,16 @@ describe('lion-dialog', () => {
       const invokerNode = el._overlayInvokerNode;
       invokerNode.focus();
       invokerNode.click();
-      const input = /** @type {Element} */ (el.querySelector('input'));
+      const input = /** @type {Element} */ el.querySelector('input');
       expect(isActiveElement(input)).to.be.true;
     });
-
     it('with trapsKeyboardFocus set to false the focus stays on the invoker', async () => {
       const el = /** @type {LionDialog} */ await fixture(html`
-        <lion-dialog .config=${{ trapsKeyboardFocus: false }}>
+        <lion-dialog
+          .config=${{
+            trapsKeyboardFocus: false,
+          }}
+        >
           <button slot="invoker">invoker button</button>
           <div slot="content">
             <label for="myInput">Label</label>
@@ -140,10 +135,13 @@ describe('lion-dialog', () => {
       invokerNode.click();
       expect(isActiveElement(invokerNode)).to.be.true;
     });
-
     it('opened-changed event should send detail object with opened state', async () => {
       const el = /** @type {LionDialog} */ await fixture(html`
-        <lion-dialog .config=${{ trapsKeyboardFocus: false }}>
+        <lion-dialog
+          .config=${{
+            trapsKeyboardFocus: false,
+          }}
+        >
           <button slot="invoker">invoker button</button>
           <div slot="content">
             <label for="myInput">Label</label>
@@ -151,20 +149,21 @@ describe('lion-dialog', () => {
           </div>
         </lion-dialog>
       `);
-
       el.setAttribute('opened', '');
       expect(el.opened).to.be.true;
-
-      el.addEventListener('opened-changed', e => {
+      el.addEventListener('opened-changed', (e) => {
         // @ts-expect-error [allow-detail-since-custom-event]
         expect(e.detail.opened).to.be.false;
       });
       el.removeAttribute('opened');
     });
-
     it("opened-changed event's target should point to lion-dialog", async () => {
       const el = /** @type {LionDialog} */ await fixture(html`
-        <lion-dialog .config=${{ trapsKeyboardFocus: false }}>
+        <lion-dialog
+          .config=${{
+            trapsKeyboardFocus: false,
+          }}
+        >
           <button slot="invoker">invoker button</button>
           <div slot="content">
             <label for="myInput">Label</label>
@@ -172,14 +171,12 @@ describe('lion-dialog', () => {
           </div>
         </lion-dialog>
       `);
-
-      el.addEventListener('opened-changed', e => {
+      el.addEventListener('opened-changed', (e) => {
         expect(e.target).to.equal(el);
       });
       el.setAttribute('opened', '');
     });
   });
-
   describe('Accessibility', () => {
     it('passes a11y audit', async () => {
       const el = await fixture(html`
@@ -190,7 +187,6 @@ describe('lion-dialog', () => {
       `);
       await expect(el).to.be.accessible();
     });
-
     it('passes a11y audit when opened', async () => {
       const el = await fixture(html`
         <lion-dialog opened>
@@ -199,9 +195,10 @@ describe('lion-dialog', () => {
         </lion-dialog>
       `);
       // error expected since we put role="none" on the dialog itself, which is valid but not recognized by Axe
-      await expect(el).to.be.accessible({ ignoredRules: ['aria-allowed-role'] });
+      await expect(el).to.be.accessible({
+        ignoredRules: ['aria-allowed-role'],
+      });
     });
-
     it('does not add [aria-expanded] to invoker button', async () => {
       const el = await fixture(
         html` <lion-dialog>
@@ -209,8 +206,7 @@ describe('lion-dialog', () => {
           <button slot="invoker">Popup button</button>
         </lion-dialog>`,
       );
-      const invokerButton = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
-
+      const invokerButton = /** @type {HTMLElement} */ el.querySelector('[slot="invoker"]');
       expect(invokerButton.getAttribute('aria-expanded')).to.equal(null);
       await invokerButton.click();
       await aTimeout(0);
@@ -219,7 +215,6 @@ describe('lion-dialog', () => {
       await aTimeout(0);
       expect(invokerButton.getAttribute('aria-expanded')).to.equal(null);
     });
-
     it('has role="dialog" by default', async () => {
       const el = await fixture(
         html` <lion-dialog>
@@ -227,11 +222,9 @@ describe('lion-dialog', () => {
           <button slot="invoker">Popup button</button>
         </lion-dialog>`,
       );
-      const contentNode = /** @type {HTMLElement} */ (el.querySelector('[slot="content"]'));
-
+      const contentNode = /** @type {HTMLElement} */ el.querySelector('[slot="content"]');
       expect(contentNode.getAttribute('role')).to.equal('dialog');
     });
-
     it('has role="alertdialog" by when "is-alert-dialog" is set', async () => {
       const el = await fixture(
         html` <lion-dialog is-alert-dialog>
@@ -239,11 +232,9 @@ describe('lion-dialog', () => {
           <button slot="invoker">Popup button</button>
         </lion-dialog>`,
       );
-      const contentNode = /** @type {HTMLElement} */ (el.querySelector('[slot="content"]'));
-
+      const contentNode = /** @type {HTMLElement} */ el.querySelector('[slot="content"]');
       expect(contentNode.getAttribute('role')).to.equal('alertdialog');
     });
-
     it('passes a11y audit when opened and role="alertdialog"', async () => {
       const el = await fixture(html`
         <lion-dialog opened is-alert-dialog>
@@ -252,10 +243,11 @@ describe('lion-dialog', () => {
         </lion-dialog>
       `);
       // error expected since we put role="none" on the dialog itself, which is valid but not recognized by Axe
-      await expect(el).to.be.accessible({ ignoredRules: ['aria-allowed-role'] });
+      await expect(el).to.be.accessible({
+        ignoredRules: ['aria-allowed-role'],
+      });
     });
   });
-
   describe('Edge cases', () => {
     it('does not lose click event handler when was detached and reattached', async () => {
       const el = await fixture(html`
@@ -272,34 +264,26 @@ describe('lion-dialog', () => {
           path="a"
         ></test-router>
       `);
-
-      const getDialog = () =>
-        /** @type {LionDialog} */ (el.shadowRoot?.querySelector('lion-dialog'));
+      const getDialog = () => /** @type {LionDialog} */ el.shadowRoot?.querySelector('lion-dialog');
       const getInvoker = () =>
-        /** @type {HTMLElement} */ (getDialog().querySelector('[slot="invoker"]'));
-
+        /** @type {HTMLElement} */ getDialog().querySelector('[slot="invoker"]');
       getInvoker().click();
       const dialog = getDialog();
       // @ts-expect-error [allow-protected-in-tests]
       await dialog._overlayCtrl._showComplete;
       expect(dialog.opened).to.be.true;
-
       dialog.close();
       // @ts-expect-error [allow-protected-in-tests]
       await dialog._overlayCtrl._hideComplete;
       expect(dialog.opened).to.be.false;
-
-      const buttonA = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('#path-a'));
-      const buttonB = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('#path-b'));
-
+      const buttonA = /** @type {HTMLElement} */ el.shadowRoot?.querySelector('#path-a');
+      const buttonB = /** @type {HTMLElement} */ el.shadowRoot?.querySelector('#path-b');
       buttonB.click();
       await el.updateComplete;
       buttonA.click();
       await el.updateComplete;
       await el.updateComplete;
-
       getInvoker().click();
-
       const dialogAfterRouteChange = getDialog();
       // @ts-expect-error [allow-protected-in-tests]
       expect(dialogAfterRouteChange._overlayCtrl).not.to.be.undefined;
@@ -307,15 +291,18 @@ describe('lion-dialog', () => {
       await dialogAfterRouteChange._overlayCtrl._showComplete;
       expect(dialogAfterRouteChange.opened).to.be.true;
     });
-
     it('should close the popup dialog after rendered from cache', async () => {
       /**
        *
        * @param {Event} e
        * @returns
        */
-      const closeButtonHandler = e =>
-        e.target?.dispatchEvent(new Event('close-overlay', { bubbles: true }));
+      const closeButtonHandler = (e) =>
+        e.target?.dispatchEvent(
+          new Event('close-overlay', {
+            bubbles: true,
+          }),
+        );
       const dialog = html` <lion-dialog>
         <button slot="invoker" class="invoker-button">Click me to open dialog</button>
         <div slot="content" class="demo-dialog-content">
@@ -330,9 +317,10 @@ describe('lion-dialog', () => {
       class Wrapper extends LitElement {
         static properties = {
           ...super.properties,
-          activeTabIndex: { type: Number },
+          activeTabIndex: {
+            type: Number,
+          },
         };
-
         constructor() {
           super();
           this.activeTabIndex = 0;
@@ -344,7 +332,6 @@ describe('lion-dialog', () => {
         changeActiveTabIndex(index) {
           this.activeTabIndex = index;
         }
-
         render() {
           const changeActiveTabIndexRef = this.changeActiveTabIndex.bind(this);
           return html`
@@ -361,13 +348,12 @@ describe('lion-dialog', () => {
           `;
         }
       }
-
-      const wrapperFixture = /** @type {(arg: TemplateResult) => Promise<Wrapper>} */ (_fixture);
+      const wrapperFixture = /** @type {(arg: TemplateResult) => Promise<Wrapper>} */ _fixture;
       const tagString = defineCE(Wrapper);
       const wrapperTag = unsafeStatic(tagString);
-      const wrapperElement = /** @type {Wrapper} */ (
-        await wrapperFixture(html`<${wrapperTag}></${wrapperTag}>`)
-      );
+      const wrapperElement =
+        /** @type {Wrapper} */
+        await wrapperFixture(html`<${wrapperTag}></${wrapperTag}>`);
       await wrapperElement.updateComplete;
       const wrapperElementShadowRoot = wrapperElement.shadowRoot;
       /**

package/components/dialog/test-helpers/test-router.js

@@ -1,14 +1,14 @@
 import { html, LitElement } from 'lit';
-
 class TestRouter extends LitElement {
   static properties = {
     routingMap: {
       type: Object,
       attribute: false,
     },
-    path: { type: String },
+    path: {
+      type: String,
+    },
   };
-
   constructor() {
     super();
 
@@ -17,13 +17,12 @@ class TestRouter extends LitElement {
     /** @type {string} */
     this.path = '';
   }
-
   render() {
     return html`
       <div>
         <div id="selector">
           ${Object.keys(this.routingMap).map(
-            path =>
+            (path) =>
               html`<button
                 id="path-${path}"
                 @click="${() => {
@@ -39,5 +38,4 @@ class TestRouter extends LitElement {
     `;
   }
 }
-
 customElements.define('test-router', TestRouter);