@lion/ui 0.8.0 → 0.8.2

package/README.md

@@ -26,15 +26,15 @@
 </p>
 
 <p align="center">
-  <a href="https://lion-web.netlify.app">Website</a>
+  <a href="https://lion.js.org">Website</a>
   ·
-  <a href="https://lion-web.netlify.app/fundamentals/">Fundamentals</a>
+  <a href="https://lion.js.org/fundamentals/">Fundamentals</a>
   ·
-  <a href="https://lion-web.netlify.app/guides/">Guides</a>
+  <a href="https://lion.js.org/guides/">Guides</a>
   ·
-  <a href="https://lion-web.netlify.app/components/">Components</a>
+  <a href="https://lion.js.org/components/">Components</a>
   ·
-  <a href="https://lion-web.netlify.app/blog/">Blog</a>
+  <a href="https://lion.js.org/blog/">Blog</a>
 </p>
 
 **Lion is a set of highly performant, accessible and flexible Web Components.!**
@@ -50,7 +50,7 @@ They provide an unopinionated, white-label layer that can be extended to your ow
 > 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.
 
 <p align="center">
-  <a href="https://lion-web.netlify.app/guides/"><strong>Explore the Lion Guides&nbsp;&nbsp;▶</strong></a>
+  <a href="https://lion.js.org/guides/"><strong>Explore the Lion Guides&nbsp;&nbsp;▶</strong></a>
 </p>
 
 ## How to install
@@ -158,7 +158,7 @@ This means you only have to apply your own Design System: by delivering styles,
 
 ## Coding guidelines
 
-Check out our [coding guidelines](https://lion-web.netlify.app/guides/principles/definitions-and-terms/) for more detailed information.
+Check out our [coding guidelines](https://lion.js.org/guides/principles/definitions-and-terms/) for more detailed information.
 
 ## How to contribute
 

package/components/calendar/src/LionCalendar.js

@@ -369,6 +369,12 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     }
   }
 
+  /**
+   * // TODO: check if this is a false positive or if we can improve
+   * @configure ReactiveElement
+   */
+  static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
+
   /**
    * @private
    */

package/components/core/src/DisabledWithTabIndexMixin.js

@@ -49,6 +49,13 @@ const DisabledWithTabIndexMixinImplementation = superclass =>
       }
     }
 
+    /**
+     * // 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

package/components/core/src/ScopedElementsMixin.js

@@ -1,6 +1,31 @@
-/*
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
+import { adoptStyles, isServer } from 'lit';
+import { ScopedElementsMixin as OpenWcLitScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
+
+/**
+ * @typedef {import('../../form-core/types/validate/ValidateMixinTypes.js').ScopedElementsMap} ScopedElementsMap
+ * @typedef {import('@open-wc/dedupe-mixin').Constructor<ScopedElementsHost>} ScopedElementsHostConstructor
+ * @typedef {import('@open-wc/scoped-elements/lit-element.js').ScopedElementsHost} ScopedElementsHost
+ * @typedef {import('./types.js').ScopedElementsHostV2Constructor} ScopedElementsHostV2Constructor
+ * @typedef {import('@open-wc/dedupe-mixin').Constructor<LitElement>} LitElementConstructor
+ * @typedef {import('lit').CSSResultOrNative} CSSResultOrNative
+ * @typedef {typeof import('lit').LitElement} TypeofLitElement
+ * @typedef {import('lit').LitElement} LitElement
+ */
+
+export function supportsScopedRegistry() {
+  return Boolean(
+    // @ts-expect-error
+    globalThis.ShadowRoot?.prototype.createElement && globalThis.ShadowRoot?.prototype.importNode,
+  );
+}
+
+/**
  * This file is combination of '@open-wc/scoped-elements@v3/lit-element.js' and '@open-wc/scoped-elements@v3/html-element.js'.
  * Then on top of those, some code from '@open-wc/scoped-elements@v2' is brought to to make polyfill not mandatory.
+ * This can be a great help for ssr scenarios, allowing elements to be consumed without needing knowledge about internall
+ * consumption.
+ * (N.B. at this point in time, this is limited to the scenario where there's one version of lion on the page).
  *
  * ## Considerations
  * In its current state, the [scoped-custom-element-registry](https://github.com/webcomponents/polyfills/tree/master/packages/scoped-custom-element-registry) draft spec has uncertainties:
@@ -21,29 +46,7 @@
  * This can be beneficial for performance, bundle size, ease of use and SSR capabilities.
  *
  * We will keep a close eye on developments in spec and polyfill, and will re-evaluate the scoped-elements approach when the time is right.
- */
-
-import { dedupeMixin } from '@open-wc/dedupe-mixin';
-import { adoptStyles } from 'lit';
-import { ScopedElementsMixin as OpenWcLitScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
-
-/**
- * @typedef {import('@open-wc/scoped-elements/lit-element.js').ScopedElementsHost} ScopedElementsHost
- * @typedef {import('../../form-core/types/validate/ValidateMixinTypes.js').ScopedElementsMap} ScopedElementsMap
- * @typedef {import('lit').CSSResultOrNative} CSSResultOrNative
- * @typedef {import('lit').LitElement} LitElement
- * @typedef {typeof import('lit').LitElement} TypeofLitElement
- * @typedef {import('@open-wc/dedupe-mixin').Constructor<LitElement>} LitElementConstructor
- * @typedef {import('@open-wc/dedupe-mixin').Constructor<ScopedElementsHost>} ScopedElementsHostConstructor
- * @typedef {import('./types.js').ScopedElementsHostV2Constructor} ScopedElementsHostV2Constructor
- */
-
-const supportsScopedRegistry = Boolean(
-  // @ts-expect-error
-  ShadowRoot.prototype.createElement && ShadowRoot.prototype.importNode,
-);
-
-/**
+ *
  * @template {LitElementConstructor} T
  * @param {T} superclass
  * @return {T & ScopedElementsHostConstructor & ScopedElementsHostV2Constructor}
@@ -51,8 +54,29 @@ const supportsScopedRegistry = Boolean(
 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
+        // elements used for internal composition on the global registry.
+        // On the client that would happen in connectedCallback, so we do it here...
+        // N.B. keep in mind that this does not work when we have multiple element (versions)
+        // with the same name. (like multiple versions of lion extension layers).
+        // If we want to support this, we must re-introduce the shim-behavior of ScopedElementsMixin v1
+        // to make this work with ssr as well.
+        // @ts-expect-error
+        this.registry = customElements;
+        // @ts-expect-error
+        for (const [name, klass] of Object.entries(this.constructor.scopedElements || {})) {
+          this.defineScopedElement(name, klass);
+        }
+      }
+    }
+
     createScopedElement(/** @type {string} */ tagName) {
-      const root = supportsScopedRegistry ? this.shadowRoot : document;
+      const root = supportsScopedRegistry() ? this.shadowRoot : document;
       // @ts-expect-error polyfill to support createElement on shadowRoot is loaded
       return root.createElement(tagName);
     }
@@ -61,12 +85,12 @@ const ScopedElementsMixinImplementation = superclass =>
      * Defines a scoped element.
      *
      * @param {string} tagName
-     * @param {typeof HTMLElement} klass
+     * @param {typeof HTMLElement} classToBeRegistered
      */
-    defineScopedElement(tagName, klass) {
-      // @ts-ignore
+    defineScopedElement(tagName, classToBeRegistered) {
       const registeredClass = this.registry.get(tagName);
-      if (registeredClass && supportsScopedRegistry === false && registeredClass !== klass) {
+      const isAlreadyRegistered = registeredClass && registeredClass === classToBeRegistered;
+      if (isAlreadyRegistered && !supportsScopedRegistry()) {
         // eslint-disable-next-line no-console
         console.error(
           [
@@ -80,10 +104,8 @@ const ScopedElementsMixinImplementation = superclass =>
         );
       }
       if (!registeredClass) {
-        // @ts-ignore
-        return this.registry.define(tagName, klass);
+        return this.registry.define(tagName, classToBeRegistered);
       }
-      // @ts-ignore
       return this.registry.get(tagName);
     }
 
@@ -92,12 +114,12 @@ const ScopedElementsMixinImplementation = superclass =>
      * @returns {ShadowRoot}
      */
     attachShadow(options) {
-      // @ts-ignore
+      // @ts-expect-error
       const { scopedElements } = /** @type {typeof ScopedElementsHost} */ (this.constructor);
 
       const shouldCreateRegistry =
         !this.registry ||
-        // @ts-ignore
+        // @ts-expect-error
         (this.registry === this.constructor.__registry &&
           !Object.prototype.hasOwnProperty.call(this.constructor, '__registry'));
 
@@ -108,8 +130,7 @@ const ScopedElementsMixinImplementation = superclass =>
        * This is important specifically for superclasses/inheritance
        */
       if (shouldCreateRegistry) {
-        // @ts-ignore
-        this.registry = supportsScopedRegistry ? new CustomElementRegistry() : customElements;
+        this.registry = supportsScopedRegistry() ? new CustomElementRegistry() : customElements;
         for (const [tagName, klass] of Object.entries(scopedElements ?? {})) {
           this.defineScopedElement(tagName, klass);
         }
@@ -131,7 +152,7 @@ const ScopedElementsMixinImplementation = superclass =>
       );
 
       const createdRoot = this.attachShadow(shadowRootOptions);
-      if (supportsScopedRegistry) {
+      if (supportsScopedRegistry()) {
         // @ts-expect-error
         this.renderOptions.creationScope = createdRoot;
       }

package/components/core/test/ScopedElementsMixin.test.js

@@ -0,0 +1,131 @@
+import { expect, fixture } from '@open-wc/testing';
+import {
+  ssrNonHydratedFixture,
+  ssrHydratedFixture,
+  csrFixture,
+} from '@lit-labs/testing/fixtures.js';
+import { LitElement, html } from 'lit';
+import sinon from 'sinon';
+import { browserDetection } from '../src/browserDetection.js';
+
+import { ScopedElementsMixin, supportsScopedRegistry } from '../src/ScopedElementsMixin.js';
+
+const hasRealScopedRegistrySupport = supportsScopedRegistry();
+const originalShadowRootProps = {
+  // @ts-expect-error
+  createElement: globalThis.ShadowRoot?.prototype.createElement,
+  // @ts-expect-error
+  importNode: globalThis.ShadowRoot?.prototype.importNode,
+};
+
+// Even though the polyfill might be loaded in this test or we run it in a browser supporting these features,
+// we mock "no support", so that `supportsScopedRegistry()` returns false inside ScopedElementsMixin..
+function mockNoRegistrySupport() {
+  // Are we on a server or do we have no polyfill? Nothing to be done here...
+  if (!hasRealScopedRegistrySupport) return;
+
+  // This will be enough to make the `supportsScopedRegistry()` check fail inside ScopedElementsMixin and bypass scoped registries
+  globalThis.ShadowRoot = globalThis.ShadowRoot || { prototype: {} };
+  // @ts-expect-error
+  globalThis.ShadowRoot.prototype.createElement = null;
+}
+
+mockNoRegistrySupport.restore = () => {
+  // Are we on a server or do we have no polyfill? Nothing to be done here...
+  if (!hasRealScopedRegistrySupport) return;
+
+  // @ts-expect-error
+  globalThis.ShadowRoot.prototype.createElement = originalShadowRootProps.createElement;
+  // @ts-expect-error
+  globalThis.ShadowRoot.prototype.importNode = originalShadowRootProps.importNode;
+};
+
+class ScopedElementsChild extends LitElement {
+  render() {
+    return html`<span>I'm a child</span>`;
+  }
+}
+
+class ScopedElementsHost extends ScopedElementsMixin(LitElement) {
+  static scopedElements = { 'scoped-elements-child': ScopedElementsChild };
+
+  render() {
+    return html`<scoped-elements-child></scoped-elements-child>`;
+  }
+}
+customElements.define('scoped-elements-host', ScopedElementsHost);
+
+describe('ScopedElementsMixin', () => {
+  it('renders child elements correctly (that were not registered yet on global registry)', async () => {
+    // customElements.define('scoped-elements-child', ScopedElementsChild);
+    for (const _fixture of [csrFixture, ssrNonHydratedFixture, ssrHydratedFixture]) {
+      const el = await _fixture(html`<scoped-elements-host></scoped-elements-host>`, {
+        // we must provide modules atm
+        modules: ['./ssr-definitions/ScopedElementsHost.define.js'],
+      });
+
+      // Wait for FF support
+      if (!browserDetection.isFirefox) {
+        expect(
+          el.shadowRoot?.querySelector('scoped-elements-child')?.shadowRoot?.innerHTML,
+        ).to.contain("<span>I'm a child</span>");
+      }
+
+      // @ts-expect-error
+      expect(el.registry.get('scoped-elements-child')).to.not.be.undefined;
+    }
+  });
+
+  describe('When scoped registries are supported', () => {
+    it('registers elements on local registry', async () => {
+      const ceDefineSpy = sinon.spy(customElements, 'define');
+
+      const el = /** @type {ScopedElementsHost} */ (
+        await fixture(html`<scoped-elements-host></scoped-elements-host>`)
+      );
+
+      // @ts-expect-error
+      expect(el.registry.get('scoped-elements-child')).to.equal(ScopedElementsChild);
+      expect(el.registry).to.not.equal(customElements);
+      expect(ceDefineSpy.calledWith('scoped-elements-child')).to.be.false;
+
+      ceDefineSpy.restore();
+    });
+  });
+
+  describe('When scoped registries are not supported', () => {
+    class ScopedElementsChildNoReg extends LitElement {
+      render() {
+        return html`<span>I'm a child</span>`;
+      }
+    }
+
+    class ScopedElementsHostNoReg extends ScopedElementsMixin(LitElement) {
+      static scopedElements = { 'scoped-elements-child-no-reg': ScopedElementsChildNoReg };
+
+      render() {
+        return html`<scoped-elements-child-no-reg></scoped-elements-child-no-reg>`;
+      }
+    }
+    before(() => {
+      mockNoRegistrySupport();
+      customElements.define('scoped-elements-host-no-reg', ScopedElementsHostNoReg);
+    });
+
+    after(() => {
+      mockNoRegistrySupport.restore();
+    });
+
+    it('registers elements', async () => {
+      const ceDefineSpy = sinon.spy(customElements, 'define');
+
+      const el = /** @type {ScopedElementsHostNoReg} */ (
+        await fixture(html`<scoped-elements-host-no-reg></scoped-elements-host-no-reg>`)
+      );
+
+      expect(el.registry).to.equal(customElements);
+      expect(ceDefineSpy.calledWith('scoped-elements-child-no-reg')).to.be.true;
+      ceDefineSpy.restore();
+    });
+  });
+});

package/components/core/test/ssr-definitions/ScopedElementsHost.define.js

@@ -0,0 +1 @@
+// ... empty file needed for '@lit-labs/testing/fixtures.js'

package/components/form/src/LionForm.js

@@ -10,15 +10,6 @@ const throwFormNodeError = () => {
   );
 };
 
-/**
- * @param {FormRegistrarHost} formEl
- * @returns {boolean}
- */
-function hasFocusableChildren(formEl) {
-  // this implies all children have the same type (either all of them are focusable or none of them are)
-  return formEl.formElements?.some(child => child._focusableNode);
-}
-
 /**
  * LionForm: form wrapper providing extra features and integration with lion-field elements.
  *
@@ -104,10 +95,10 @@ export class LionForm extends LionFieldset {
       element.formElements.find(child => child.hasFeedbackFor.includes('error')) ||
       element.formElements[0];
 
-    if (hasFocusableChildren(firstFormElWithError)) {
-      this._setFocusOnFirstErroneousFormElement(firstFormElWithError);
-    } else {
+    if (firstFormElWithError._focusableNode) {
       firstFormElWithError._focusableNode.focus();
+    } else {
+      this._setFocusOnFirstErroneousFormElement(firstFormElWithError);
     }
   }
 

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

@@ -5,6 +5,10 @@ import '@lion/ui/define/lion-field.js';
 import '@lion/ui/define/lion-validation-feedback.js';
 import '@lion/ui/define/lion-listbox.js';
 import '@lion/ui/define/lion-option.js';
+import '@lion/ui/define/lion-checkbox-group.js';
+import '@lion/ui/define/lion-checkbox.js';
+import '@lion/ui/define/lion-radio-group.js';
+import '@lion/ui/define/lion-radio.js';
 import '@lion/ui/define/lion-form.js';
 import {
   aTimeout,
@@ -264,10 +268,31 @@ describe('<lion-form>', () => {
     button.click();
     expect(dispatchSpy.args[0][0].type).to.equal('submit');
     const fieldset = el.formElements[0];
-    // @ts-ignore [allow-protected] in test
     expect(document.activeElement).to.equal(fieldset.formElements[0]._inputNode);
   });
 
+  it('sets focus on submit to the first form element within a erroneous fieldset within another fieldset', async () => {
+    const el = await fixture(html`
+      <lion-form>
+        <form>
+          <lion-fieldset name="parentFieldset">
+            <lion-fieldset name="childFieldset" .validators="${[new Required()]}">
+              <${childTag} name="firstName"></${childTag}>
+            </lion-fieldset>
+          </lion-fieldset>
+
+          <button type="submit">submit</button>
+        </form>
+      </lion-form>
+    `);
+    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const parentFieldSetEl = el.formElements[0];
+    const childFieldsetEl = parentFieldSetEl.formElements[0];
+    const inputEl = childFieldsetEl.formElements[0];
+    button.click();
+    expect(document.activeElement).to.equal(inputEl._focusableNode);
+  });
+
   it('sets focus on submit to the first form element within a erroneous listbox', async () => {
     const el = await fixture(html`
       <lion-form>
@@ -285,4 +310,66 @@ describe('<lion-form>', () => {
     const listboxEl = el.formElements[0];
     expect(document.activeElement).to.equal(listboxEl._inputNode);
   });
+
+  it('sets focus on submit to the first form element within a erroneous listbox within a fieldset', async () => {
+    const el = await fixture(html`
+      <lion-form>
+        <form>
+          <lion-fieldset name="fieldset">
+            <lion-listbox name="name" .validators="${[new Required()]}">
+              <lion-option value="a">a</lion-option>
+              <lion-option value="b">b</lion-option>
+            </lion-listbox>
+          </lion-fieldset>
+          <button type="submit">submit</button>
+        </form>
+      </lion-form>
+    `);
+    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    button.click();
+    const fieldsetEl = el.formElements[0];
+    const listboxEl = fieldsetEl.formElements[0];
+    expect(document.activeElement).to.equal(listboxEl._inputNode);
+  });
+
+  it('sets focus on submit to the first form element within a erroneous checkbox-group', async () => {
+    const el = await fixture(html`
+      <lion-form>
+        <form>
+          <lion-checkbox-group name="name" .validators="${[new Required()]}">
+            <lion-checkbox .choiceValue=${'a'} label="a"></lion-checkbox>
+            <lion-checkbox .choiceValue=${'b'} label="b"></lion-checkbox>
+          </lion-checkbox-group>
+          <button type="submit">submit</button>
+        </form>
+      </lion-form>
+    `);
+    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const checkboxGroupEl = el.formElements[0];
+    const checkboxEl = checkboxGroupEl.formElements[0];
+    button.click();
+    expect(document.activeElement).to.equal(checkboxEl._focusableNode);
+  });
+
+  it('sets focus on submit to the first form element within a erroneous radio-group', async () => {
+    const el = await fixture(html`
+      <lion-form>
+        <form>
+            <lion-radio-group name="name" .validators="${[new Required()]}">
+              <lion-radio .choiceValue=${'a'} label="a"></lion-radio>
+              <lion-radio .choiceValue=${'b'} label="b"></lion-radio>
+            </lion-radio-group>
+          </lion-fieldset>
+
+          <button type="submit">submit</button>
+        </form>
+      </lion-form>
+    `);
+    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+
+    const radioGroupEl = el.formElements[0];
+    const radioEl = radioGroupEl.formElements[0];
+    button.click();
+    expect(document.activeElement).to.equal(radioEl._focusableNode);
+  });
 });

package/components/form-core/src/FormControlMixin.js

@@ -152,6 +152,12 @@ const FormControlMixinImplementation = superclass =>
       return /** @type {LionValidationFeedback} */ (this.__getDirectSlotChild('feedback'));
     }
 
+    /**
+     * TODO: check if this is a false positive or if we can improve
+     * @configure ReactiveElement
+     */
+    static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
+
     constructor() {
       super();
 

package/components/form-core/src/registration/FormRegisteringMixin.js

@@ -40,7 +40,7 @@ const FormRegisteringMixinImplementation = superclass =>
        * To encourage accessibility best practices, `form-element-register` events
        * do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
       Use this option if you know what you're doing. It will then be possible to nest FormControls
-      inside shadow dom. See https://lion-web.netlify.app/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility
+      inside shadow dom. See https://lion.js.org/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility
       */
       this.allowCrossRootRegistration = false;
     }

package/components/form-core/src/utils/SyncUpdatableMixin.js

@@ -56,6 +56,13 @@ const SyncUpdatableMixinImplementation = superclass =>
       this.__SyncUpdatableNamespace.connected = false;
     }
 
+    /**
+     * // 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') || [];
+
     /**
      * Makes the propertyAccessor.`hasChanged` compatible in synchronous updates
      * @param {string} name

package/components/form-core/src/validate/LionValidationFeedback.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
 import { localizeNamespaceLoader } from '../localizeNamespaceLoader.js';
 
@@ -90,7 +90,9 @@ export class LionValidationFeedback extends LocalizeMixin(LitElement) {
       this.feedbackData.map(
         ({ message, type, validator }) => html`
           <div class="validation-feedback__type">
-            ${this._localizeManager.msg(`lion-form-core:validation${capitalize(type)}`)}
+            ${message && type
+              ? this._localizeManager.msg(`lion-form-core:validation${capitalize(type)}`)
+              : nothing}
           </div>
           ${this._messageTemplate({ message, type, validator })}
         `,

package/components/form-core/test/validate/lion-validation-feedback.test.js

@@ -91,6 +91,18 @@ describe('lion-validation-feedback', () => {
     expect(validationFeedbackType?.textContent?.trim()).to.equal('Info');
   });
 
+  it('it does not share the type if there is no message', async () => {
+    const el = /** @type {LionValidationFeedback} */ (
+      await fixture(html`<lion-validation-feedback></lion-validation-feedback>`)
+    );
+
+    el.feedbackData = [{ message: '', type: 'error', validator: new AlwaysInvalid() }];
+    await el.updateComplete;
+
+    const validationFeedbackType = el.shadowRoot?.querySelector('.validation-feedback__type');
+    expect(validationFeedbackType?.textContent?.trim()).to.not.equal('Error');
+  });
+
   describe('accessibility', () => {
     it('passes a11y audit when with a message', async () => {
       const el = /** @type {LionValidationFeedback} */ (

package/components/form-core/types/registration/FormRegisteringMixinTypes.ts

@@ -16,7 +16,7 @@ export declare class FormRegisteringHost {
    * do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that
    * automatically allow the creation of accessible relationships in the same dom tree.
    * Use this option if you know what you're doing. It will then be possible to nest FormControls
-   * inside shadow dom. See https://lion-web.netlify.app/fundamentals/rationales/accessibility#shadow-roots-and-accessibility
+   * inside shadow dom. See https://lion.js.org/fundamentals/rationales/accessibility#shadow-roots-and-accessibility
    */
   allowCrossRootRegistration: boolean;
 

package/components/icon/src/LionIcon.js

@@ -102,6 +102,12 @@ export class LionIcon extends LitElement {
     this.__svg = nothing;
   }
 
+  /**
+   * TODO: check if this is a false positive or if we can improve
+   * @configure ReactiveElement
+   */
+  static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
+
   /** @param {import('lit').PropertyValues} changedProperties */
   update(changedProperties) {
     super.update(changedProperties);

package/components/listbox/test-suites/ListboxMixin.suite.js

@@ -400,7 +400,7 @@ export function runListboxMixinSuite(customConfig = {}) {
         `);
         await el.updateComplete;
         await el.updateComplete; // need 2 awaits as overlay.show is an async function
-        // for more info about why we need the ignoreRules, see: https://lion-web.netlify.app/fundamentals/systems/overlays/rationale/#considerations
+        // for more info about why we need the ignoreRules, see: https://lion.js.org/fundamentals/systems/overlays/rationale/#considerations
         await expect(el).to.be.accessible({ ignoredRules: ['aria-allowed-role'] });
       });
 
@@ -412,7 +412,7 @@ export function runListboxMixinSuite(customConfig = {}) {
             <${optionTag} .choiceValue=${20}>Item 2</${optionTag}>
           </${tag}>
         `);
-        // for more info about why we need the ignoreRules, see: https://lion-web.netlify.app/fundamentals/systems/overlays/rationale/#considerations
+        // for more info about why we need the ignoreRules, see: https://lion.js.org/fundamentals/systems/overlays/rationale/#considerations
         await expect(el).to.be.accessible({ ignoredRules: ['aria-allowed-role'] });
       });