@lion/ui 0.0.12 → 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,7 +1,7 @@
-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
@@ -13,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"/>`
@@ -207,7 +191,7 @@ export class OverlayController extends EventTarget {
 
     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);
@@ -536,16 +520,20 @@ export class OverlayController extends EventTarget {
         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 });
     }
   }
 
@@ -1284,6 +1272,7 @@ export class OverlayController extends EventTarget {
   }
 
   teardown() {
+    this.__handleOverlayStyles({ phase: 'teardown' });
     this._handleFeatures({ phase: 'teardown' });
   }
 

package/components/overlays/src/utils/adopt-styles.js

@@ -0,0 +1,136 @@
+// See: https://github.com/ing-bank/lion/issues/1880
+
+/**
+ * @typedef {import('lit').CSSResult|CSSStyleSheet} AdoptableStyle
+ * @typedef {(renderRoot:DocumentOrShadowRoot, style: AdoptableStyle, opts?: {teardown?: boolean}) => void} AdoptStyleFn
+ * @typedef {(renderRoot:DocumentOrShadowRoot, styles: AdoptableStyle[], opts?: {teardown?: boolean}) => void} AdoptStylesFn
+ */
+
+// Shared protected object that can be spied/mocked in tests
+export const _adoptStyleUtils = {
+  // Mocking Document.prototype.adoptedStyleSheets seemed impossible
+  supportsAdoptingStyleSheets:
+    window.ShadowRoot &&
+    // @ts-ignore
+    (window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&
+    'adoptedStyleSheets' in Document.prototype &&
+    'replace' in CSSStyleSheet.prototype,
+  /** @type {AdoptStyleFn} */
+  // @ts-ignore
+  adoptStyle: undefined,
+  /** @type {AdoptStylesFn} */
+  // @ts-ignore
+  adoptStyles: undefined,
+};
+
+const styleCache = new Map();
+
+/**
+ * @param {CSSStyleSheet} cssStyleSheet
+ */
+export function serializeConstructableStylesheet(cssStyleSheet) {
+  return Array.from(cssStyleSheet.cssRules)
+    .map(r => r.cssText)
+    .join('');
+}
+
+/**
+ * @param {DocumentOrShadowRoot} renderRoot
+ * @param {AdoptableStyle} style
+ * @param {{teardown?: boolean}} opts
+ */
+function adoptStyleWhenAdoptedStylesheetsNotSupported(
+  renderRoot,
+  style,
+  { teardown = false } = {},
+) {
+  const adoptRoot = /** @type {ShadowRoot|Document['body']} */ (
+    renderRoot === document ? document.body : renderRoot
+  );
+  // @ts-ignore
+  const styleText = style.cssText || serializeConstructableStylesheet(style);
+
+  if (!teardown) {
+    const styleEl = document.createElement('style');
+    // keep notation, so it's not renamed in minification/build
+    // eslint-disable-next-line dot-notation
+    const nonce = window['litNonce'];
+    if (nonce !== undefined) {
+      styleEl.setAttribute('nonce', nonce);
+    }
+    styleEl.textContent = styleText;
+    adoptRoot.appendChild(styleEl);
+  } else {
+    const foundStyleEls = Array.from(adoptRoot.querySelectorAll('style'));
+
+    for (const foundStyleEl of foundStyleEls) {
+      if (foundStyleEl.textContent === styleText) {
+        foundStyleEl.remove();
+        break;
+      }
+    }
+  }
+}
+
+/**
+ * @param {DocumentOrShadowRoot} renderRoot
+ * @param {AdoptableStyle} style
+ * @param {{teardown?: boolean}} opts
+ */
+function handleCache(renderRoot, style, { teardown = false } = {}) {
+  let haltFurtherExecution = false;
+  if (!styleCache.has(renderRoot)) {
+    styleCache.set(renderRoot, []);
+  }
+  const addedStylesForRoot = styleCache.get(renderRoot);
+  const foundStyle = addedStylesForRoot.find(
+    (/** @type {import("lit").CSSResultOrNative} */ addedStyle) => style === addedStyle,
+  );
+
+  if (foundStyle && teardown) {
+    addedStylesForRoot.splice(addedStylesForRoot.indexOf(style), 1);
+  } else if (!foundStyle && !teardown) {
+    addedStylesForRoot.push(style);
+  } else if ((foundStyle && !teardown) || (!foundStyle && teardown)) {
+    // Already removed or added. We're done
+    haltFurtherExecution = true;
+  }
+
+  return { haltFurtherExecution };
+}
+
+/** @type {AdoptStyleFn} */
+export function adoptStyle(renderRoot, style, { teardown = false } = {}) {
+  const { haltFurtherExecution } = handleCache(renderRoot, style, { teardown });
+  if (haltFurtherExecution) {
+    return;
+  }
+
+  if (!_adoptStyleUtils.supportsAdoptingStyleSheets) {
+    adoptStyleWhenAdoptedStylesheetsNotSupported(renderRoot, style, { teardown });
+    return;
+  }
+
+  const sheet = style instanceof CSSStyleSheet ? style : style.styleSheet;
+  if (!sheet) {
+    throw new Error(`Please provide a CSSResultOrNative style`);
+  }
+
+  if (!teardown) {
+    // @ts-ignore
+    // eslint-disable-next-line no-param-reassign
+    renderRoot.adoptedStyleSheets.push(sheet);
+  } else if (renderRoot.adoptedStyleSheets.includes(sheet)) {
+    renderRoot.adoptedStyleSheets.splice(renderRoot.adoptedStyleSheets.indexOf(sheet), 1);
+  }
+}
+
+/** @type {AdoptStylesFn} */
+export function adoptStyles(renderRoot, styles, { teardown = false } = {}) {
+  for (const style of styles) {
+    _adoptStyleUtils.adoptStyle(renderRoot, style, { teardown });
+  }
+}
+
+_adoptStyleUtils.adoptStyle = adoptStyle;
+_adoptStyleUtils.adoptStyles = adoptStyles;