@lion/ui 0.0.11 → 0.0.13

package/components/accordion/src/LionAccordion.js

@@ -44,21 +44,21 @@ export class LionAccordion extends LitElement {
           flex-direction: column;
         }
 
-        .accordion [slot='invoker'] {
+        .accordion ::slotted(.invoker) {
           margin: 0;
         }
 
-        .accordion [slot='invoker'][expanded] {
+        .accordion ::slotted(.invoker)[expanded] {
           font-weight: bold;
         }
 
-        .accordion [slot='content'] {
+        .accordion ::slotted(.content) {
           margin: 0;
           visibility: hidden;
           display: none;
         }
 
-        .accordion [slot='content'][expanded] {
+        .accordion ::slotted(.content[expanded]) {
           visibility: visible;
           display: block;
         }
@@ -159,9 +159,15 @@ export class LionAccordion extends LitElement {
    *  @private
    */
   __setupStore() {
-    const accordion = this.shadowRoot?.querySelector('slot[name=_accordion]');
-    const existingInvokers = accordion ? accordion.querySelectorAll('[slot=invoker]') : [];
-    const existingContent = accordion ? accordion.querySelectorAll('[slot=content]') : [];
+    const accordion = /** @type {HTMLSlotElement} */ (
+      this.shadowRoot?.querySelector('slot[name=_accordion]')
+    );
+    const existingInvokers = accordion
+      ? accordion.assignedElements().filter(child => child.classList.contains('invoker'))
+      : [];
+    const existingContent = accordion
+      ? accordion.assignedElements().filter(child => child.classList.contains('content'))
+      : [];
 
     const invokers = /** @type {HTMLElement[]} */ ([
       ...Array.from(existingInvokers),
@@ -212,14 +218,21 @@ export class LionAccordion extends LitElement {
     const invokers = /** @type {HTMLElement[]} */ (
       Array.from(this.children).filter(child => child.slot === 'invoker')
     );
+
     const contents = /** @type {HTMLElement[]} */ (
       Array.from(this.children).filter(child => child.slot === 'content')
     );
+
     const accordion = this.shadowRoot?.querySelector('slot[name=_accordion]');
+
     if (accordion) {
       invokers.forEach((invoker, index) => {
-        accordion.insertAdjacentElement('beforeend', invoker);
-        accordion.insertAdjacentElement('beforeend', contents[index]);
+        invoker.classList.add('invoker');
+        // eslint-disable-next-line no-param-reassign
+        invoker.slot = '_accordion';
+
+        contents[index].classList.add('content');
+        contents[index].slot = '_accordion';
       });
     }
   }

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

@@ -23,27 +23,27 @@ const basicAccordion = html`
  * @param {Element} el
  */
 function getAccordionChildren(el) {
-  const slot = el.shadowRoot?.querySelector('slot[name=_accordion]');
+  if (el.shadowRoot) {
+    const slot = el.shadowRoot?.querySelector('slot[name=_accordion]');
 
-  return slot ? slot.children : [];
+    return slot && slot instanceof HTMLSlotElement ? slot.assignedElements() : [];
+  }
+
+  return [];
 }
 
 /**
  * @param {Element} el
  */
 function getInvokers(el) {
-  const slot = el.shadowRoot?.querySelector('slot[name=_accordion]');
-
-  return slot ? slot.querySelectorAll('[slot=invoker]') : [];
+  return getAccordionChildren(el).filter(child => child.classList.contains('invoker'));
 }
 
 /**
  * @param {Element} el
  */
 function getContents(el) {
-  const slot = el.shadowRoot?.querySelector('slot[name=_accordion]');
-
-  return slot ? slot.querySelectorAll('[slot=content]') : [];
+  return getAccordionChildren(el).filter(child => child.classList.contains('content'));
 }
 
 describe('<lion-accordion>', () => {
@@ -68,14 +68,14 @@ describe('<lion-accordion>', () => {
 
       expect(
         Array.from(getAccordionChildren(el)).find(
-          child => child.slot === 'invoker' && child.hasAttribute('expanded'),
+          child => child.className === 'invoker' && child.hasAttribute('expanded'),
         )?.textContent,
       ).to.equal('invoker 2');
 
       el.expanded = [0];
       expect(
         Array.from(getAccordionChildren(el)).find(
-          child => child.slot === 'invoker' && child.hasAttribute('expanded'),
+          child => child.className === 'invoker' && child.hasAttribute('expanded'),
         )?.textContent,
       ).to.equal('invoker 1');
     });
@@ -146,17 +146,16 @@ describe('<lion-accordion>', () => {
         `)
       );
       expect(el.focusedIndex).to.equal(1);
+
       expect(
-        Array.from(getAccordionChildren(el)).find(
-          child => child.slot === 'invoker' && child.firstElementChild?.hasAttribute('focused'),
-        )?.textContent,
+        Array.from(getInvokers(el)).find(child => child.firstElementChild?.hasAttribute('focused'))
+          ?.textContent,
       ).to.equal('invoker 2');
 
       el.focusedIndex = 0;
       expect(
-        Array.from(getAccordionChildren(el)).find(
-          child => child.slot === 'invoker' && child.firstElementChild?.hasAttribute('focused'),
-        )?.textContent,
+        Array.from(getInvokers(el)).find(child => child.firstElementChild?.hasAttribute('focused'))
+          ?.textContent,
       ).to.equal('invoker 1');
     });
 
@@ -360,14 +359,10 @@ describe('<lion-accordion>', () => {
       await el.updateComplete;
 
       expect(
-        Array.from(getAccordionChildren(el)).find(
-          child => child.slot === 'invoker' && child.hasAttribute('expanded'),
-        )?.textContent,
+        Array.from(getInvokers(el)).find(child => child.hasAttribute('expanded'))?.textContent,
       ).to.equal('invoker 5');
       expect(
-        Array.from(getAccordionChildren(el)).find(
-          child => child.slot === 'content' && child.hasAttribute('expanded'),
-        )?.textContent,
+        Array.from(getContents(el)).find(child => child.hasAttribute('expanded'))?.textContent,
       ).to.equal('content 5');
     });
 
@@ -410,11 +405,13 @@ describe('<lion-accordion>', () => {
           <div slot="content">content 2</div>
         </lion-accordion>
       `);
+
+      // console.log(getAccordionChildren(el));
       expect(
-        Array.from(getAccordionChildren(el)).find(child => child.slot === 'content'),
+        Array.from(getAccordionChildren(el)).find(child => child.classList.contains('content')),
       ).to.not.have.attribute('tabindex');
       expect(
-        Array.from(getAccordionChildren(el)).find(child => child.slot === 'content'),
+        Array.from(getAccordionChildren(el)).find(child => child.classList.contains('content')),
       ).to.not.have.attribute('tabindex');
     });
 
@@ -445,10 +442,10 @@ describe('<lion-accordion>', () => {
             <div slot="content">content</div>
           </lion-accordion>
         `);
-        expect(
-          Array.from(getAccordionChildren(el)).find(child => child.slot === 'invoker')
-            ?.firstElementChild,
-        ).to.have.attribute('aria-expanded', 'false');
+        expect(Array.from(getInvokers(el))[0]?.firstElementChild).to.have.attribute(
+          'aria-expanded',
+          'false',
+        );
       });
 
       it('adds aria-expanded="true" to invoker when its content is expanded', async () => {
@@ -461,10 +458,10 @@ describe('<lion-accordion>', () => {
           `)
         );
         el.expanded = [0];
-        expect(
-          Array.from(getAccordionChildren(el)).find(child => child.slot === 'invoker')
-            ?.firstElementChild,
-        ).to.have.attribute('aria-expanded', 'true');
+        expect(Array.from(getInvokers(el))[0]?.firstElementChild).to.have.attribute(
+          'aria-expanded',
+          'true',
+        );
       });
     });
 

package/components/input-tel/translations/bg.js

@@ -1,4 +1,6 @@
 export default {
-  selectCountry: 'Избор на държава',
+  allCountries: 'Всички държави',
   phoneNumber: 'Телефонен номер',
+  selectCountry: 'Избор на държава',
+  suggestedCountries: 'Предложени държави',
 };

package/components/input-tel/translations/cs.js

@@ -1,4 +1,6 @@
 export default {
-  selectCountry: 'Vybrat zemi',
+  allCountries: 'Všechny země',
   phoneNumber: 'Telefonní číslo',
+  selectCountry: 'Vybrat zemi',
+  suggestedCountries: 'Navrhované země',
 };

package/components/input-tel/translations/de.js

@@ -1,4 +1,6 @@
 export default {
-  selectCountry: 'Land auswählen',
+  allCountries: 'Alle Länder',
   phoneNumber: 'Telefonnummer',
+  selectCountry: 'Land auswählen',
+  suggestedCountries: 'Vorgeschlagene Länder',
 };

package/components/input-tel/translations/en.js

@@ -1,4 +1,6 @@
 export default {
-  selectCountry: 'Select country',
+  allCountries: 'All countries',
   phoneNumber: 'Phone number',
+  selectCountry: 'Select country',
+  suggestedCountries: 'Suggested countries',
 };

package/components/input-tel/translations/es.js

@@ -1,4 +1,6 @@
 export default {
-  selectCountry: 'Seleccione país',
+  allCountries: 'Pays suggérés',
   phoneNumber: 'Número de teléfono',
+  selectCountry: 'Seleccione país',
+  suggestedCountries: 'Países sugeridos',
 };

package/components/input-tel/translations/fr.js

@@ -1,4 +1,6 @@
 export default {
-  selectCountry: 'Sélectionnez un pays',
+  allCountries: 'Tous les pays',
   phoneNumber: 'Numéro de téléphone',
+  selectCountry: 'Sélectionnez un pays',
+  suggestedCountries: 'Pays suggérés',
 };

package/components/input-tel/translations/hu.js

@@ -1,4 +1,6 @@
 export default {
-  selectCountry: 'Ország kiválasztása',
+  allCountries: 'Minden ország',
   phoneNumber: 'Telefonszám',
+  selectCountry: 'Ország kiválasztása',
+  suggestedCountries: 'Javasolt országok',
 };

package/components/input-tel/translations/it.js

@@ -1,4 +1,6 @@
 export default {
-  selectCountry: 'Selezionare il paese',
+  allCountries: 'Tutti i paesi',
   phoneNumber: 'Numero di telefono',
+  selectCountry: 'Selezionare il paese',
+  suggestedCountries: 'Paesi consigliati',
 };

package/components/input-tel/translations/nl.js

@@ -1,4 +1,6 @@
 export default {
-  selectCountry: 'Selecteer land',
+  allCountries: 'Alle landen',
   phoneNumber: 'Telefoonnummer',
+  selectCountry: 'Selecteer land',
+  suggestedCountries: 'Voor gestelde landen',
 };

package/components/input-tel/translations/pl.js

@@ -1,4 +1,6 @@
 export default {
-  selectCountry: 'Wybierz kraj',
+  allCountries: 'Wszystkie kraje',
   phoneNumber: 'Numer telefonu',
+  selectCountry: 'Wybierz kraj',
+  suggestedCountries: 'Sugerowane kraje',
 };

package/components/input-tel/translations/ro.js

@@ -1,4 +1,6 @@
 export default {
-  selectCountry: 'Selectare țară',
+  allCountries: 'Toate țările',
   phoneNumber: 'Număr de telefon',
+  selectCountry: 'Selectare țară',
+  suggestedCountries: 'Țări sugerate',
 };

package/components/input-tel/translations/ru.js

@@ -1,4 +1,6 @@
 export default {
-  selectCountry: 'Выбрать страну',
+  allCountries: 'Все страны',
   phoneNumber: 'Номер телефона',
+  selectCountry: 'Выбрать страну',
+  suggestedCountries: 'Предлагаемые страны',
 };

package/components/input-tel/translations/sk.js

@@ -1,4 +1,6 @@
 export default {
-  selectCountry: 'Zvoliť krajinu',
+  allCountries: 'Všetky krajiny',
   phoneNumber: 'Telefónne číslo',
+  selectCountry: 'Zvoliť krajinu',
+  suggestedCountries: 'Odporúčané krajiny',
 };

package/components/input-tel/translations/uk.js

@@ -1,4 +1,6 @@
 export default {
-  selectCountry: 'Вибрати країну',
+  allCountries: 'Усі країни',
   phoneNumber: 'Номер телефону',
+  selectCountry: 'Вибрати країну',
+  suggestedCountries: 'Запропоновані країни',
 };

package/components/input-tel/translations/zh.js

@@ -1,4 +1,6 @@
 export default {
-  selectCountry: '选择国家/地区',
+  allCountries: '所有国家/地区',
   phoneNumber: '电话号码',
+  selectCountry: '选择国家/地区',
+  suggestedCountries: '建议的国家/地区',
 };

package/components/input-tel-dropdown/src/LionInputTelDropdown.js

@@ -92,9 +92,9 @@ export class LionInputTelDropdown extends LionInputTel {
         },
         labels: {
           selectCountry: localize.msg('lion-input-tel:selectCountry'),
-          // TODO: add translations
-          allCountries: this._allCountriesLabel || 'All countries',
-          preferredCountries: this._preferredCountriesLabel || 'Suggested countries',
+          allCountries: this._allCountriesLabel || localize.msg('lion-input-tel:allCountries'),
+          preferredCountries:
+            this._preferredCountriesLabel || localize.msg('lion-input-tel:suggestedCountries'),
         },
       },
     };
@@ -125,10 +125,10 @@ export class LionInputTelDropdown extends LionInputTel {
         >
           ${data?.regionMetaListPreferred?.length
             ? html`
-                <optgroup label="${refs?.dropdown?.labels?._preferredCountries}">
+                <optgroup label="${refs?.dropdown?.labels?.preferredCountries}">
                   ${data.regionMetaListPreferred.map(renderOption)}
                 </optgroup>
-                <optgroup label="${refs?.dropdown?.labels?._allCountries}">
+                <optgroup label="${refs?.dropdown?.labels?.allCountries}">
                   ${data?.regionMetaList?.map(renderOption)}
                 </optgroup>
               `

package/components/listbox/src/ListboxMixin.js

@@ -384,10 +384,6 @@ const ListboxMixinImplementation = superclass =>
     updated(changedProperties) {
       super.updated(changedProperties);
 
-      if (this.formElements.length === 1) {
-        this.singleOption = true;
-      }
-
       if (changedProperties.has('disabled')) {
         if (this.disabled) {
           this.__requestOptionsToBeDisabled();

package/components/listbox/types/ListboxMixinTypes.ts

@@ -11,7 +11,7 @@ import { LionOption } from '../src/LionOption.js';
 export declare class ListboxHost {
   static get styles(): CSSResultArray;
   /**
-   * When true, will synchronize activedescendant and selected element on
+   * When true, will synchronize active descendant and selected element on
    * arrow key navigation.
    * This behavior can usually be seen on <select> on the Windows platform.
    * Note that this behavior cannot be used when multiple-choice is true.
@@ -31,9 +31,6 @@ export declare class ListboxHost {
 
   public hasNoDefaultSelected: boolean;
 
-  public singleOption: boolean;
-  // protected _invokerNode: HTMLElement;
-
   public checkedIndex: number | number[];
 
   public activeIndex: number;

package/components/overlays/src/OverlayController.js

@@ -1,8 +1,7 @@
-import { EventTargetShim } from '@lion/ui/core.js';
-import { adoptStyles } from 'lit';
 import { overlays } from './singleton.js';
 import { containFocus } from './utils/contain-focus.js';
 import { overlayShadowDomStyle } from './overlayShadowDomStyle.js';
+import { _adoptStyleUtils } from './utils/adopt-styles.js';
 
 /**
  * @typedef {import('@lion/ui/types/overlays.js').OverlayConfig} OverlayConfig
@@ -14,22 +13,6 @@ import { overlayShadowDomStyle } from './overlayShadowDomStyle.js';
  * @typedef {'setup'|'init'|'teardown'|'before-show'|'show'|'hide'|'add'|'remove'} OverlayPhase
  */
 
-const rootNodeStylesMap = new WeakSet();
-
-/**
- * Returns element that adopts stylesheet
- * @param {Element} shadowOrBodyEl
- * @returns {ShadowRoot}
- */
-function getRootNodeOrBodyElThatAdoptsStylesheet(shadowOrBodyEl) {
-  const rootNode = /** @type {* & DocumentOrShadowRoot} */ (shadowOrBodyEl.getRootNode());
-  if (rootNode === document) {
-    // @ts-ignore
-    return document.body;
-  }
-  return rootNode;
-}
-
 /**
  * From:
  * - wrappingDialogNodeL1: `<dialog role="none"/>`
@@ -129,7 +112,7 @@ const supportsCSSTypedObject = window.CSS?.number && document.body.attributeStyl
  * bottom/top/left/right sheets etc.
  *
  */
-export class OverlayController extends EventTargetShim {
+export class OverlayController extends EventTarget {
   /**
    * @constructor
    * @param {OverlayConfig} config initial config. Will be remembered as shared config
@@ -208,7 +191,7 @@ export class OverlayController extends EventTargetShim {
 
     this.manager.add(this);
     /** @protected */
-    this._contentId = `overlay-content--${Math.random().toString(36).substr(2, 10)}`;
+    this._contentId = `overlay-content--${Math.random().toString(36).slice(2, 10)}`;
     /** @private */
     this.__originalAttrs = new Map();
     this.updateConfig(config);
@@ -537,16 +520,20 @@ export class OverlayController extends EventTargetShim {
         OverlayController.popperModule = preloadPopper();
       }
     }
-    this.__initOverlayStyles();
+    this.__handleOverlayStyles({ phase: 'init' });
     this._handleFeatures({ phase: 'init' });
   }
 
-  __initOverlayStyles() {
-    const rootNode = getRootNodeOrBodyElThatAdoptsStylesheet(this.contentWrapperNode);
-    if (!rootNodeStylesMap.has(rootNode)) {
-      // TODO: ideally we should also support a teardown
-      adoptStyles(rootNode, [...(rootNode.adoptedStyleSheets || []), overlayShadowDomStyle]);
-      rootNodeStylesMap.add(rootNode);
+  /**
+   * @param {{ phase: OverlayPhase }} config
+   * @private
+   */
+  __handleOverlayStyles({ phase }) {
+    const rootNode = /** @type {ShadowRoot} */ (this.contentWrapperNode?.getRootNode());
+    if (phase === 'init') {
+      _adoptStyleUtils.adoptStyle(rootNode, overlayShadowDomStyle);
+    } else if (phase === 'teardown') {
+      _adoptStyleUtils.adoptStyle(rootNode, overlayShadowDomStyle, { teardown: true });
     }
   }
 
@@ -973,22 +960,24 @@ export class OverlayController extends EventTargetShim {
     if (this.inheritsReferenceWidth) {
       this._handleInheritsReferenceWidth();
     }
-
     if (this.visibilityTriggerFunction) {
-      this._handleUserInteraction({ phase });
+      this._handleVisibilityTriggers({ phase });
     }
   }
 
   /**
    * @param {{ phase: OverlayPhase }} config
    */
-  _handleUserInteraction({ phase }) {
+  _handleVisibilityTriggers({ phase }) {
     if (typeof this.visibilityTriggerFunction === 'function') {
       if (phase === 'init') {
-        this.__userInteractionHandler = this.visibilityTriggerFunction({ phase, controller: this });
+        this.__visibilityTriggerHandler = this.visibilityTriggerFunction({
+          phase,
+          controller: this,
+        });
       }
-      if (this.__userInteractionHandler[phase]) {
-        this.__userInteractionHandler[phase]();
+      if (this.__visibilityTriggerHandler[phase]) {
+        this.__visibilityTriggerHandler[phase]();
       }
     }
   }
@@ -1053,10 +1042,14 @@ export class OverlayController extends EventTargetShim {
         break;
       }
       case 'show':
-        this.backdropNode.classList.add(`overlays__backdrop--visible`);
+        if (this.config.hasBackdrop) {
+          this.backdropNode.classList.add(`overlays__backdrop--visible`);
+        }
         this.__hasActiveBackdrop = true;
         break;
       case 'hide':
+      case 'teardown':
+        this.backdropNode.classList.remove(`overlays__backdrop--visible`);
         this.__hasActiveBackdrop = false;
         break;
     }
@@ -1279,6 +1272,7 @@ export class OverlayController extends EventTargetShim {
   }
 
   teardown() {
+    this.__handleOverlayStyles({ phase: 'teardown' });
     this._handleFeatures({ phase: 'teardown' });
   }