@lion/ui 0.15.0 → 0.15.1

package/README.md

@@ -26,33 +26,59 @@
 </p>
 
 <p align="center">
-  <a href="https://lion.js.org">Website</a>
+  <a href="https://lion-web.netlify.app">Website</a>
   ·
-  <a href="https://lion.js.org/fundamentals/">Fundamentals</a>
+  <a href="https://lion-web.netlify.app/fundamentals/">Fundamentals</a>
   ·
-  <a href="https://lion.js.org/guides/">Guides</a>
+  <a href="https://lion-web.netlify.app/guides/">Guides</a>
   ·
-  <a href="https://lion.js.org/components/">Components</a>
+  <a href="https://lion-web.netlify.app/components/">Components</a>
   ·
-  <a href="https://lion.js.org/blog/">Blog</a>
+  <a href="https://lion-web.netlify.app/blog/">Blog</a>
 </p>
 
-**Lion is a set of highly performant, accessible, and flexible Web Components.**
+**Lion is a set of highly performant, accessible and flexible Web Components.!**
 
 They provide an unopinionated, white-label layer that can be extended to your own layer of components.
 
 - **High Performance:** Focused on great performance in all relevant browsers with a minimal number of dependencies.
 - **Accessibility:** Aimed at compliance with the WCAG 2.2 AA standard to create components that are accessible for everybody.
 - **Flexibility:** Provides solutions through Web Components and JavaScript classes which can be used, adopted and extended to fit all needs.
-- **Modern Code:** Lion is distributed as pure ES modules.
-- **Exposes functions/classes and Web Components:** Ships a functionality in its most appropriate form.
+- **Modern Code:** Lion is distributes as pure es modules.
+- **Exposes functions/classes and Web Components:** Ships a functionality in it's most appropriate form.
 
-> Note: Our demo examples might look simple and not very stylish. This is on purpose. They are designed to be basic so you can easily add your own styles to them to match your intended design, without dealing with styles that are already there.
+> Note: Our demos may look a little bland but that is on purpose. They only come with functional stylings.
+> This makes sense as the main use case is to extend those components and if you do you do not want to override existing stylings.
 
 <p align="center">
-  <a href="https://lion.js.org/guides/"><strong>Explore the Lion Guides&nbsp;&nbsp;▶</strong></a>
+  <a href="https://lion-web.netlify.app/guides/"><strong>Explore the Lion Guides&nbsp;&nbsp;▶</strong></a>
 </p>
 
+## Astro migration
+
+- Keep using `/docs` on the root level as we used it in the `master` branch. The documentation is copied into Astro related directories on `npm run start` and when when anything in `/docs` is updated.
+- Replace manually all references to assets in all `md` files so that we imply that the path is produced from the directory where the md file is located. F.e. `new URL('../src/wa-combobox/assets/obama.jpeg', import.meta.url).href;` should `new URL('./src/wa-combobox/assets/obama.jpeg', import.meta.url).href;`. Note double dot is replaced with one dot. See [this PR](https://github.com/ing-bank/lion/pull/2125/files#diff-403b1e0ab54d51dcfe54248e847498e492da00383d8b33a4087994ab9035a22c) for the reference.
+- Rename all `*.mjs` files to `*.js` ones if they are used by `mdjs` examples
+
+### Astro how to
+
+- To start in dev mode run `nmm run start`
+- To start in production mode:
+  - Run `npm run build`
+  - Run `npm run preview`
+
+### Issues which are not caused by the migration (not to be fixed now)
+
+- There is a browser console error on [collapsible page](http://localhost:4321/components/collapsible):
+
+  ```
+  __mdjs-stories--use-cases.js:40 Uncaught TypeError: shadowRoot.getElementById is not a function
+  ```
+
+  Note. There is the same error on master. This issue is not caused by the migration
+
+### TODO
+
 ## How to install
 
 ```bash
@@ -113,7 +139,7 @@ You can also use the lion elements directly, although this is likely not a commo
 
 ## Issues
 
-If you encounter an issue with any of the packages we are offering please open a [new bug issue](https://github.com/ing-bank/lion/issues/new?assignees=&labels=&template=bug_report.md&title=). Be sure to include a description of the expected and the current behavior - additionally adding a [reproduction](https://webcomponents.dev/edit/kpZmz1CJN580OaXsk56f?pm=1) always helps.
+If you encounter an issue with any of the packages we are offering please open a [new bug issue](https://github.com/ing-bank/lion/issues/new?assignees=&labels=&template=bug_report.md&title=). Be sure to include a description of the expected and the current behavior - additional adding a [reproduction](https://webcomponents.dev/edit/kpZmz1CJN580OaXsk56f?pm=1) always helps.
 
 ## Feature requests
 
@@ -158,7 +184,7 @@ This means you only have to apply your own Design System: by delivering styles,
 
 ## Coding guidelines
 
-Check out our [coding guidelines](https://lion.js.org/guides/principles/definitions-and-terms/) for more detailed information.
+Check out our [coding guidelines](https://lion-web.netlify.app/guides/principles/definitions-and-terms/) for more detailed information.
 
 ## How to contribute
 

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

@@ -2,11 +2,11 @@ import { defineCE, expect, fixture, html, unsafeStatic, waitUntil } from '@open-
 import { Required, Unparseable } from '@lion/ui/form-core.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { LionCombobox } from '@lion/ui/combobox.js';
-import { browserDetection } from '@lion/ui/core.js';
+import { browserDetection, SlotMixin } from '@lion/ui/core.js';
 import '@lion/ui/define/lion-combobox.js';
 import '@lion/ui/define/lion-listbox.js';
 import '@lion/ui/define/lion-option.js';
-import { LitElement } from 'lit';
+import { LitElement, nothing } from 'lit';
 import sinon from 'sinon';
 import {
   getFilteredOptionValues,
@@ -413,6 +413,54 @@ describe('lion-combobox', () => {
       expect(el.validationStates).to.have.property('error');
       expect(el.validationStates.error).to.have.property('MatchesOption');
     });
+
+    it('keeps slottable provided in `slots` getter as direct host child', async () => {
+      class MyEl extends SlotMixin(LionCombobox) {
+        // @ts-ignore
+        get slots() {
+          return {
+            ...super.slots,
+            _lazyRenderedSlot: () => ({
+              template: this.renderSlot
+                ? html`<span id="lazyRenderedSlotId">(Optional)</span>`
+                : html`${nothing}`,
+              renderAsDirectHostChild: true,
+            }),
+          };
+        }
+
+        _labelTemplate() {
+          return html`
+            <div class="form-field__label">
+              <slot name="label"></slot>
+              <slot name="_lazyRenderedSlot"></slot>
+              <slot></slot>
+            </div>
+          `;
+        }
+
+        constructor() {
+          super();
+          this.renderSlot = false;
+        }
+      }
+      const tagName = defineCE(MyEl);
+      const wrappingTag = unsafeStatic(tagName);
+
+      const el = /** @type {MyEl} */ (
+        await fixture(html`
+          <${wrappingTag} label="my label">
+            <lion-option .choiceValue="${'1'}">${'one'}</lion-option>
+          </${wrappingTag}>
+        `)
+      );
+      await el.registrationComplete;
+
+      el.renderSlot = true;
+      await el.updateComplete;
+      const lazyRenderedSlot = el.querySelector('#lazyRenderedSlotId');
+      expect(lazyRenderedSlot?.parentElement === el).to.be.true;
+    });
   });
 
   describe('Values', () => {

package/components/core/src/SlotMixin.js

@@ -12,6 +12,58 @@ import { render } from 'lit';
  * @typedef {import('lit').LitElement} LitElement
  */
 
+/**
+ * Sometimes, we want to provide best DX (direct slottables) and be accessible
+ * at the same time.
+ * In the first example below, we need to wrap our options in light dom in an element with
+ * [role=listbox]. We could achieve this via the second example, but it would affect our
+ * public api negatively. not allowing us to be forward compatible with the AOM spec:
+ * https://wicg.github.io/aom/explainer.html
+ * With this method, it's possible to watch elements in the default slot and move them
+ * to the desired target (the element with [role=listbox]) in light dom.
+ *
+ * @example
+ * # desired api
+ * <sel-ect>
+ *  <opt-ion></opt-ion>
+ * </sel-ect>
+ * # desired end state
+ * <sel-ect>
+ *  <div role="listbox" slot="lisbox">
+ *    <opt-ion></opt-ion>
+ *  </div>
+ * </sel-ect>
+ *
+ * Note, the function does not move the nodes specified by a subclasser in the `slots` getter
+ * @param {HTMLElement} source host of ShadowRoot with default <slot>
+ * @param {HTMLElement} target the desired target in light dom
+ */
+export function moveUserProvidedDefaultSlottablesToTarget(source, target) {
+  /**
+   * Nodes injected via `slots` getter are going to be added as host's children
+   * starting by a comment node like <!--_start_slot_*-->
+   * and ending by a comment node like <!--_end_slot_*-->
+   * So we ignore everything that comes between those `start_slot` and `end_slot` comments
+   */
+  let isInsideSlotSection = false;
+  Array.from(source.childNodes).forEach((/** @type {* & Element} */ c) => {
+    const isNamedSlottable = c.hasAttribute && c.hasAttribute('slot');
+    const isComment = c.nodeType === Node.COMMENT_NODE;
+    if (isComment && !isInsideSlotSection) {
+      isInsideSlotSection = c.textContent.includes('_start_slot_');
+    }
+    if (isInsideSlotSection) {
+      if (c.textContent.includes('_end_slot_')) {
+        isInsideSlotSection = false;
+      }
+      return;
+    }
+    if (!isNamedSlottable) {
+      target.appendChild(c);
+    }
+  });
+}
+
 /**
  * @param {SlotFunctionResult} slotFunctionResult
  * @returns {'template-result'|'node'|'slot-rerender-object'|null}

package/components/core/test/SlotMixin.test.js

@@ -2,6 +2,7 @@ import { defineCE, expect, fixture, fixtureSync, unsafeStatic, html } from '@ope
 import { SlotMixin } from '@lion/ui/core.js';
 import { LitElement } from 'lit';
 import sinon from 'sinon';
+import { moveUserProvidedDefaultSlottablesToTarget } from '../src/SlotMixin.js';
 
 import { ScopedElementsMixin, supportsScopedRegistry } from '../src/ScopedElementsMixin.js';
 import { isActiveElement } from '../test-helpers/isActiveElement.js';
@@ -134,6 +135,90 @@ describe('SlotMixin', () => {
     expect(elNoSlot.didCreateConditionalSlot()).to.be.false;
   });
 
+  it('should move default slots to target', async () => {
+    const target = document.createElement('div');
+    const source = document.createElement('div');
+    /**
+     * Exmple of usage:
+     * get slots() {
+     *   return {
+     *     _nothing: () => ({
+     *       template: html`${nothing}`,
+     *       renderAsDirectHostChild: true,
+     *     }),
+     *   }
+     * }
+     */
+    const variableNothing = `
+      <!--_start_slot_lit-el-->
+      <!-- {lit-el} -->
+      <!--_end_slot_lit-el-->`;
+
+    /**
+     * Exmple of usage:
+     * get slots() {
+     *   return {
+     *     '': () => ({
+     *       template: html`<div>text<div>`,
+     *       renderAsDirectHostChild: true,
+     *     }),
+     *   }
+     * }
+     */
+    const defaultSlottableProvidedViaSlotsGetter = `
+      <!--_start_slot_-->
+      <div>text</div>
+      <!--_end_slot_-->
+    `;
+
+    /**
+     * Exmple of usage:
+     * get slots() {
+     *   return {
+     *     label: () => ({
+     *       template: html`<div>text<div>`,
+     *       renderAsDirectHostChild: true,
+     *     }),
+     *   }
+     * }
+     */
+    const namedSlottable = `
+      <!--_start_slot_label-->
+      <div slot="label">text</div>
+      <!--_end_slot_label-->
+    `;
+
+    /**
+     * Here we assume .test1, .test2 and .test3 are the ones provided as content projection f.e.:
+     * <my-comp>
+     *  <div class="test1"><div>
+     *  <div class="test2"><div>
+     *  <div class="test3"><div>
+     * </my-comp>
+     *
+     * And the rest of content is added via `slots` getter by SlotMixin
+     * The function should move only content projection and ignore the rest
+     * */
+
+    source.innerHTML = `
+      <div class="test1"></div>
+      ${variableNothing}
+      <div class="test2"></div>
+      ${defaultSlottableProvidedViaSlotsGetter}
+      <div class="test3"></div>
+      ${namedSlottable}
+    `;
+
+    moveUserProvidedDefaultSlottablesToTarget(source, target);
+    expect(target.children.length).to.equal(3);
+    const test1Element = target.querySelector('.test1');
+    const test2Element = target.querySelector('.test2');
+    const test3Element = target.querySelector('.test3');
+    expect(test1Element?.parentElement === target).to.equal(true);
+    expect(test2Element?.parentElement === target).to.equal(true);
+    expect(test3Element?.parentElement === target).to.equal(true);
+  });
+
   describe('Rerender', () => {
     it('supports rerender when SlotRerenderObject provided', async () => {
       const tag = defineCE(

package/components/listbox/src/ListboxMixin.js

@@ -4,6 +4,7 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { ChoiceGroupMixin, FormControlMixin, FormRegistrarMixin } from '@lion/ui/form-core.js';
 import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
 import { LionOptions } from './LionOptions.js';
+import { moveUserProvidedDefaultSlottablesToTarget } from '../../core/src/SlotMixin.js';
 
 // TODO: extract ListNavigationWithActiveDescendantMixin that can be reused in [role="menu"]
 // having children with [role="menuitem|menuitemcheckbox|menuitemradio|option"] and
@@ -21,39 +22,6 @@ import { LionOptions } from './LionOptions.js';
 
 // TODO: consider adding methods below to @lion/helpers
 
-/**
- * Sometimes, we want to provide best DX (direct slottables) and be accessible
- * at the same time.
- * In the first example below, we need to wrap our options in light dom in an element with
- * [role=listbox]. We could achieve this via the second example, but it would affect our
- * public api negatively. not allowing us to be forward compatible with the AOM spec:
- * https://wicg.github.io/aom/explainer.html
- * With this method, it's possible to watch elements in the default slot and move them
- * to the desired target (the element with [role=listbox]) in light dom.
- *
- * @example
- * # desired api
- * <sel-ect>
- *  <opt-ion></opt-ion>
- * </sel-ect>
- * # desired end state
- * <sel-ect>
- *  <div role="listbox" slot="lisbox">
- *    <opt-ion></opt-ion>
- *  </div>
- * </sel-ect>
- * @param {HTMLElement} source host of ShadowRoot with default <slot>
- * @param {HTMLElement} target the desired target in light dom
- */
-function moveDefaultSlottablesToTarget(source, target) {
-  Array.from(source.childNodes).forEach((/** @type {* & Element} */ c) => {
-    const isNamedSlottable = c.hasAttribute && c.hasAttribute('slot');
-    if (!isNamedSlottable) {
-      target.appendChild(c);
-    }
-  });
-}
-
 /**
  * @type {ListboxMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
@@ -899,9 +867,9 @@ const ListboxMixinImplementation = superclass =>
       );
 
       if (slot) {
-        moveDefaultSlottablesToTarget(this, this._listboxNode);
+        moveUserProvidedDefaultSlottablesToTarget(this, this._listboxNode);
         slot.addEventListener('slotchange', () => {
-          moveDefaultSlottablesToTarget(this, this._listboxNode);
+          moveUserProvidedDefaultSlottablesToTarget(this, this._listboxNode);
         });
       }
     }

package/components/overlays/src/ArrowMixin.js

@@ -64,8 +64,11 @@ export const ArrowMixinImplementation = superclass =>
 
           [data-popper-placement^='left'] .arrow {
             right: calc(
-              -1 * (var(--tooltip-arrow-height) +
-                    (var(--tooltip-arrow-width) - var(--tooltip-arrow-height)) / 2)
+              -1 *
+                (
+                  var(--tooltip-arrow-height) +
+                    (var(--tooltip-arrow-width) - var(--tooltip-arrow-height)) / 2
+                )
             );
           }
 
@@ -75,8 +78,11 @@ export const ArrowMixinImplementation = superclass =>
 
           [data-popper-placement^='right'] .arrow {
             left: calc(
-              -1 * (var(--tooltip-arrow-height) +
-                    (var(--tooltip-arrow-width) - var(--tooltip-arrow-height)) / 2)
+              -1 *
+                (
+                  var(--tooltip-arrow-height) +
+                    (var(--tooltip-arrow-width) - var(--tooltip-arrow-height)) / 2
+                )
             );
           }
 

package/components/overlays/test/OverlayController.test.js

@@ -799,6 +799,9 @@ describe('OverlayController', () => {
           const { parentOverlay, childOverlay } = await createNestedEscControllers(parentContent);
           await mimicEscapePress(childOverlay.contentNode);
 
+          // without this line, the test is unstable on FF sometimes
+          await aTimeout(0);
+
           expect(parentOverlay.isShown).to.be.false;
           expect(childOverlay.isShown).to.be.true;
 
@@ -1040,7 +1043,7 @@ describe('OverlayController', () => {
         // Don't hide on inside shadowDom click
         /** @type {ShadowRoot} */
         // @ts-expect-error
-        (ctrl.contentNode.querySelector(tagString).shadowRoot).querySelector('button').click();
+        ctrl.contentNode.querySelector(tagString).shadowRoot.querySelector('button').click();
 
         await aTimeout(0);
         expect(ctrl.isShown).to.be.true;