@lion/ui 0.8.5 → 0.8.7

package/components/calendar/src/LionCalendar.js

@@ -364,7 +364,11 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     if (this.selectedDate) {
       this.focusSelectedDate();
     } else {
-      this.centralDate = /** @type {Date} */ (this.__initialCentralDate);
+      if (!this.__isEnabledDate(/** @type {Date} */ (this.__initialCentralDate))) {
+        this.centralDate = this.findNearestEnabledDate(this.__initialCentralDate);
+      } else {
+        this.centralDate = /** @type {Date} */ (this.__initialCentralDate);
+      }
       this.focusCentralDate();
     }
   }

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

@@ -1,20 +1,22 @@
-import {
-  getComboboxMembers,
-  getFilteredOptionValues,
-  mimicKeyPress,
-  mimicUserTyping,
-  mimicUserTypingAdvanced,
-} from '@lion/ui/combobox-test-helpers.js';
+import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
+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 '@lion/ui/define/lion-combobox.js';
 import '@lion/ui/define/lion-listbox.js';
 import '@lion/ui/define/lion-option.js';
-import { Required, Unparseable } from '@lion/ui/form-core.js';
-import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
 import { LitElement } from 'lit';
 import sinon from 'sinon';
+import {
+  getFilteredOptionValues,
+  mimicUserTypingAdvanced,
+  getComboboxMembers,
+  mimicUserTyping,
+  mimicKeyPress,
+} from '@lion/ui/combobox-test-helpers.js';
+
+import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 
 /**
  * @typedef {import('../types/SelectionDisplay.js').SelectionDisplay} SelectionDisplay
@@ -986,7 +988,7 @@ describe('lion-combobox', () => {
       options[0].click();
       await el.updateComplete;
       expect(el.opened).to.equal(false);
-      expect(document.activeElement).to.equal(_inputNode);
+      expect(isActiveElement(_inputNode)).to.be.true;
 
       // step [4]
       await el.updateComplete;

package/components/core/src/ScopedElementsMixin.js

@@ -89,8 +89,8 @@ const ScopedElementsMixinImplementation = superclass =>
      */
     defineScopedElement(tagName, classToBeRegistered) {
       const registeredClass = this.registry.get(tagName);
-      const isAlreadyRegistered = registeredClass && registeredClass === classToBeRegistered;
-      if (isAlreadyRegistered && !supportsScopedRegistry()) {
+      const isNewClassWithSameName = registeredClass && registeredClass !== classToBeRegistered;
+      if (!supportsScopedRegistry() && isNewClassWithSameName) {
         // eslint-disable-next-line no-console
         console.error(
           [

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

@@ -6,9 +6,9 @@ import {
 } 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';
+import { browserDetection } from '../src/browserDetection.js';
 
 const hasRealScopedRegistrySupport = supportsScopedRegistry();
 const originalShadowRootProps = {
@@ -78,6 +78,8 @@ describe('ScopedElementsMixin', () => {
 
   describe('When scoped registries are supported', () => {
     it('registers elements on local registry', async () => {
+      if (!hasRealScopedRegistrySupport) return;
+
       const ceDefineSpy = sinon.spy(customElements, 'define');
 
       const el = /** @type {ScopedElementsHost} */ (
@@ -127,5 +129,36 @@ describe('ScopedElementsMixin', () => {
       expect(ceDefineSpy.calledWith('scoped-elements-child-no-reg')).to.be.true;
       ceDefineSpy.restore();
     });
+
+    it('fails when different classes are registered under different name', async () => {
+      class ScopedElementsHostNoReg2 extends ScopedElementsMixin(LitElement) {
+        static scopedElements = { 'scoped-elements-child-no-reg': class extends HTMLElement {} };
+
+        render() {
+          return html`<scoped-elements-child-no-reg></scoped-elements-child-no-reg>`;
+        }
+      }
+      customElements.define('scoped-elements-host-no-reg-2', ScopedElementsHostNoReg2);
+
+      const errorSpy = sinon.spy(console, 'error');
+      /** @type {ScopedElementsHostNoReg2} */ (
+        await fixture(html`<scoped-elements-host-no-reg></scoped-elements-host-no-reg>`)
+      );
+      /** @type {ScopedElementsHostNoReg2} */ (
+        await fixture(html`<scoped-elements-host-no-reg-2></scoped-elements-host-no-reg-2>`)
+      );
+
+      expect(errorSpy.args[0][0]).to.equal(
+        [
+          'You are trying to re-register the "scoped-elements-child-no-reg" custom element with a different class via ScopedElementsMixin.',
+          'This is only possible with a CustomElementRegistry.',
+          'Your browser does not support this feature so you will need to load a polyfill for it.',
+          'Load "@webcomponents/scoped-custom-element-registry" before you register ANY web component to the global customElements registry.',
+          'e.g. add "<script src="/node_modules/@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js"></script>" as your first script tag.',
+          'For more details you can visit https://open-wc.org/docs/development/scoped-elements/',
+        ].join('\n'),
+      );
+      errorSpy.restore();
+    });
   });
 });

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

@@ -1,31 +1,15 @@
-import sinon from 'sinon';
 import { defineCE, expect, fixture, fixtureSync, unsafeStatic, html } from '@open-wc/testing';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { SlotMixin } from '@lion/ui/core.js';
 import { LitElement } from 'lit';
+import sinon from 'sinon';
+
+import { ScopedElementsMixin, supportsScopedRegistry } from '../src/ScopedElementsMixin.js';
+import { isActiveElement } from '../test-helpers/isActiveElement.js';
 
 /**
  * @typedef {import('../types/SlotMixinTypes.js').SlotHost} SlotHost
  */
 
-// @ts-ignore
-const createElementNative = ShadowRoot.prototype.createElement;
-function mockScopedRegistry() {
-  const outputObj = { createElementCallCount: 0 };
-  // @ts-expect-error wait for browser support
-  ShadowRoot.prototype.createElement = (tagName, options) => {
-    outputObj.createElementCallCount += 1;
-    // Return an element that lit can use as render target
-    return createElementNative(tagName, options);
-  };
-  return outputObj;
-}
-
-function unMockScopedRegistry() {
-  // @ts-expect-error wait for browser support
-  ShadowRoot.prototype.createElement = createElementNative;
-}
-
 describe('SlotMixin', () => {
   it('inserts provided element into light dom and sets slot', async () => {
     const tag = defineCE(
@@ -227,12 +211,12 @@ describe('SlotMixin', () => {
       );
       const el = /** @type {* & SlotHost} */ (await fixture(`<${tag}></${tag}>`));
       el._focusableNode.focus();
-      expect(document.activeElement).to.equal(el._focusableNode);
+      expect(isActiveElement(el._focusableNode)).to.be.true;
 
       el.currentValue = 1;
       await el.updateComplete;
 
-      expect(document.activeElement).to.equal(el._focusableNode);
+      expect(isActiveElement(el._focusableNode)).to.be.true;
     });
 
     it('keeps focus after rerendering complex shadow root into slot', async () => {
@@ -294,7 +278,7 @@ describe('SlotMixin', () => {
       el.currentValue = 1;
       await el.updateComplete;
 
-      expect(document.activeElement).to.equal(el._focusableNode);
+      expect(isActiveElement(el._focusableNode)).to.be.true;
       expect(el._focusableNode.shadowRoot.activeElement).to.equal(el._focusableNode._buttonNode);
     });
 
@@ -352,12 +336,12 @@ describe('SlotMixin', () => {
 
       el._focusableNode._buttonNode.focus();
 
-      expect(el._focusableNode.shadowRoot.activeElement).to.equal(el._focusableNode._buttonNode);
+      expect(isActiveElement(el._focusableNode._buttonNode, { deep: true })).to.be.true;
 
       el.currentValue = 1;
       await el.updateComplete;
 
-      expect(document.activeElement).to.equal(el._focusableNode);
+      expect(isActiveElement(el._focusableNode)).to.be.true;
       expect(el._focusableNode.shadowRoot.activeElement).to.equal(el._focusableNode._buttonNode);
     });
 
@@ -568,8 +552,11 @@ describe('SlotMixin', () => {
   });
 
   describe('Scoped Registries', () => {
-    it('supports scoped elements when polyfill loaded', async () => {
-      const outputObj = mockScopedRegistry();
+    it('supports scoped elements when scoped registries supported (or polyfill loaded)', async () => {
+      if (!supportsScopedRegistry()) return;
+
+      // @ts-expect-error
+      const createElSpy = sinon.spy(ShadowRoot.prototype, 'createElement');
 
       class ScopedEl extends LitElement {}
 
@@ -600,14 +587,14 @@ describe('SlotMixin', () => {
       const tag = unsafeStatic(tagName);
       await fixture(html`<${tag}></${tag}>`);
 
-      expect(outputObj.createElementCallCount).to.equal(1);
+      expect(createElSpy.callCount).to.equal(1);
 
-      unMockScopedRegistry();
+      createElSpy.restore();
     });
 
-    it('does not scope elements when polyfill not loaded', async () => {
-      // @ts-expect-error
-      ShadowRoot.prototype.createElement = null;
+    it('does not scope elements when scoped registries not supported (or polyfill not loaded)', async () => {
+      if (supportsScopedRegistry()) return;
+
       class ScopedEl extends LitElement {}
 
       const tagName = defineCE(
@@ -645,7 +632,6 @@ describe('SlotMixin', () => {
 
       document.body.removeChild(renderTarget);
       docSpy.restore();
-      unMockScopedRegistry();
     });
   });
 });

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

@@ -0,0 +1,14 @@
+import { getDeepActiveElement } from '../src/getDeepActiveElement.js';
+/**
+ * Readable alternative for `expect(el).to.equal(document.activeElement);`.
+ * While this is readable by itself, it makes Web Test Runner hang completely in many occasions.
+ * Therefore it's better to write:
+ * `expect(isActiveElement(el)).to.be.true;`
+ * @param {Element} el
+ * @param {{deep?: boolean}} opts
+ * @returns {boolean}
+ */
+export function isActiveElement(el, { deep = false } = {}) {
+  const activeEl = deep ? getDeepActiveElement() : document.activeElement;
+  return el === activeEl;
+}

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

@@ -1,6 +1,7 @@
 /* eslint-disable lit-a11y/no-autofocus */
 import { expect, fixture as _fixture, html, unsafeStatic, aTimeout } from '@open-wc/testing';
 import { runOverlayMixinSuite } from '../../overlays/test-suites/OverlayMixin.suite.js';
+import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 import '@lion/ui/define/lion-dialog.js';
 
 /**
@@ -89,8 +90,8 @@ describe('lion-dialog', () => {
       const invokerNode = el._overlayInvokerNode;
       invokerNode.focus();
       invokerNode.click();
-      const contentNode = el.querySelector('[slot="content"]');
-      expect(document.activeElement).to.equal(contentNode);
+      const contentNode = /** @type {Element} */ (el.querySelector('[slot="content"]'));
+      expect(isActiveElement(contentNode)).to.be.true;
     });
 
     it('sets focus on autofocused element', async () => {
@@ -107,8 +108,8 @@ describe('lion-dialog', () => {
       const invokerNode = el._overlayInvokerNode;
       invokerNode.focus();
       invokerNode.click();
-      const input = el.querySelector('input');
-      expect(document.activeElement).to.equal(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 () => {
@@ -125,7 +126,7 @@ describe('lion-dialog', () => {
       const invokerNode = el._overlayInvokerNode;
       invokerNode.focus();
       invokerNode.click();
-      expect(document.activeElement).to.equal(invokerNode);
+      expect(isActiveElement(invokerNode)).to.be.true;
     });
 
     it('opened-changed event should send detail object with opened state', async () => {

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

@@ -1,25 +1,27 @@
-import { LionFieldset } from '@lion/ui/fieldset.js';
-import '@lion/ui/define/lion-fieldset.js';
 import { LionField, Required } from '@lion/ui/form-core.js';
-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 { LionFieldset } from '@lion/ui/fieldset.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-fieldset.js';
+import '@lion/ui/define/lion-checkbox.js';
+import '@lion/ui/define/lion-listbox.js';
+import '@lion/ui/define/lion-option.js';
+import '@lion/ui/define/lion-field.js';
 import '@lion/ui/define/lion-radio.js';
 import '@lion/ui/define/lion-form.js';
+import { spy } from 'sinon';
 import {
+  fixture as _fixture,
+  unsafeStatic,
   aTimeout,
   defineCE,
+  oneEvent,
   expect,
-  fixture as _fixture,
   html,
-  oneEvent,
-  unsafeStatic,
 } from '@open-wc/testing';
-import { spy } from 'sinon';
+
+import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 
 /**
  * @typedef {import('../src/LionForm.js').LionForm} LionForm
@@ -225,7 +227,7 @@ describe('<lion-form>', () => {
     button.click();
     expect(dispatchSpy.args[0][0].type).to.equal('submit');
     // @ts-ignore [allow-protected] in test
-    expect(document.activeElement).to.equal(el.formElements[1]._inputNode);
+    expect(isActiveElement(el.formElements[1]._inputNode)).to.be.true;
   });
 
   it('sets focus on submit to the first erroneous form element within a fieldset', async () => {
@@ -248,7 +250,7 @@ describe('<lion-form>', () => {
     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[1]._inputNode);
+    expect(isActiveElement(fieldset.formElements[1]._inputNode)).to.be.true;
   });
 
   it('sets focus on submit to the first form element within a erroneous fieldset', async () => {
@@ -268,7 +270,7 @@ describe('<lion-form>', () => {
     button.click();
     expect(dispatchSpy.args[0][0].type).to.equal('submit');
     const fieldset = el.formElements[0];
-    expect(document.activeElement).to.equal(fieldset.formElements[0]._inputNode);
+    expect(isActiveElement(fieldset.formElements[0]._inputNode)).to.be.true;
   });
 
   it('sets focus on submit to the first form element within a erroneous fieldset within another fieldset', async () => {
@@ -290,7 +292,7 @@ describe('<lion-form>', () => {
     const childFieldsetEl = parentFieldSetEl.formElements[0];
     const inputEl = childFieldsetEl.formElements[0];
     button.click();
-    expect(document.activeElement).to.equal(inputEl._focusableNode);
+    expect(isActiveElement(inputEl._focusableNode)).to.be.true;
   });
 
   it('sets focus on submit to the first form element within a erroneous listbox', async () => {
@@ -308,7 +310,7 @@ describe('<lion-form>', () => {
     const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
     button.click();
     const listboxEl = el.formElements[0];
-    expect(document.activeElement).to.equal(listboxEl._inputNode);
+    expect(isActiveElement(listboxEl._inputNode)).to.be.true;
   });
 
   it('sets focus on submit to the first form element within a erroneous listbox within a fieldset', async () => {
@@ -329,7 +331,7 @@ describe('<lion-form>', () => {
     button.click();
     const fieldsetEl = el.formElements[0];
     const listboxEl = fieldsetEl.formElements[0];
-    expect(document.activeElement).to.equal(listboxEl._inputNode);
+    expect(isActiveElement(listboxEl._inputNode)).to.be.true;
   });
 
   it('sets focus on submit to the first form element within a erroneous checkbox-group', async () => {
@@ -348,7 +350,7 @@ describe('<lion-form>', () => {
     const checkboxGroupEl = el.formElements[0];
     const checkboxEl = checkboxGroupEl.formElements[0];
     button.click();
-    expect(document.activeElement).to.equal(checkboxEl._focusableNode);
+    expect(isActiveElement(checkboxEl._focusableNode)).to.be.true;
   });
 
   it('sets focus on submit to the first form element within a erroneous radio-group', async () => {
@@ -370,6 +372,6 @@ describe('<lion-form>', () => {
     const radioGroupEl = el.formElements[0];
     const radioEl = radioGroupEl.formElements[0];
     button.click();
-    expect(document.activeElement).to.equal(radioEl._focusableNode);
+    expect(isActiveElement(radioEl._focusableNode)).to.be.true;
   });
 });

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

@@ -1,27 +1,28 @@
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { Required, Validator } from '@lion/ui/form-core.js';
-import '@lion/ui/define/lion-field.js';
 import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js';
 import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
+import { Required, Validator } from '@lion/ui/form-core.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import '@lion/ui/define/lion-field.js';
+import sinon from 'sinon';
 import {
-  expect,
-  fixture,
-  html,
-  triggerBlurFor,
   triggerFocusFor,
+  triggerBlurFor,
   unsafeStatic,
+  fixture,
+  expect,
+  html,
 } from '@open-wc/testing';
-import sinon from 'sinon';
+
+import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 
 /**
- * @typedef {import('../src/LionField.js').LionField} LionField
- * @typedef {import('../types/FormControlMixinTypes.js').FormControlHost} FormControlHost
  * @typedef {FormControlHost & HTMLElement & {_parentFormGroup?:HTMLElement, checked?:boolean}} FormControl
+ * @typedef {HTMLElement & {shadowRoot: HTMLElement, assignedNodes: Function}} ShadowHTMLElement
+ * @typedef {import('../types/FormControlMixinTypes.js').FormControlHost} FormControlHost
+ * @typedef {import('../src/LionField.js').LionField} LionField
  */
 
-/** @typedef {HTMLElement & {shadowRoot: HTMLElement, assignedNodes: Function}} ShadowHTMLElement */
-
 const tagString = 'lion-field';
 const tag = unsafeStatic(tagString);
 const inputSlotString = '<input slot="input" />';
@@ -106,7 +107,7 @@ describe('<lion-field>', () => {
 
     await triggerFocusFor(el);
 
-    expect(document.activeElement).to.equal(_inputNode);
+    expect(isActiveElement(_inputNode)).to.be.true;
     expect(cbFocusHost.callCount).to.equal(1);
     expect(cbFocusNativeInput.callCount).to.equal(1);
     expect(cbBlurHost.callCount).to.equal(0);
@@ -117,7 +118,7 @@ describe('<lion-field>', () => {
     expect(cbBlurNativeInput.callCount).to.equal(1);
 
     await triggerFocusFor(el);
-    expect(document.activeElement).to.equal(_inputNode);
+    expect(isActiveElement(_inputNode)).to.be.true;
     expect(cbFocusHost.callCount).to.equal(2);
     expect(cbFocusNativeInput.callCount).to.equal(2);
 

package/components/form-core/test-suites/NativeTextFieldMixin.suite.js

@@ -1,14 +1,16 @@
-import { LitElement } from 'lit';
-import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js';
 import { defineCE, expect, fixture, html, triggerFocusFor, unsafeStatic } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-import { spy } from 'sinon';
+import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js';
 import { NativeTextFieldMixin } from '@lion/ui/form-core.js';
+import { sendKeys } from '@web/test-runner-commands';
 import { browserDetection } from '@lion/ui/core.js';
+import { LitElement } from 'lit';
+import { spy } from 'sinon';
+
+import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 
 /**
- * @typedef {import('../types/FormControlMixinTypes.js').FormControlHost} FormControlHost
  * @typedef {ArrayConstructor | ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | DateConstructor | 'iban' | 'email'} modelValueType
+ * @typedef {import('../types/FormControlMixinTypes.js').FormControlHost} FormControlHost
  */
 
 /**
@@ -56,7 +58,7 @@ export function runNativeTextFieldMixinSuite(customConfig) {
       const { _inputNode } = getFormControlMembers(el);
       await triggerFocusFor(el);
       await el.updateComplete;
-      expect(document.activeElement).to.equal(_inputNode);
+      expect(isActiveElement(_inputNode)).to.be.true;
       await sendKeys({
         press: 'h',
       });

package/components/form-core/test-suites/ValidateMixin.suite.js

@@ -2,25 +2,25 @@ import { LitElement } from 'lit';
 import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 import {
   getFormControlMembers,
-  AlwaysInvalid,
-  AlwaysValid,
   AsyncAlwaysInvalid,
   AsyncAlwaysValid,
+  AlwaysInvalid,
+  AlwaysValid,
 } from '@lion/ui/form-core-test-helpers.js';
 import sinon from 'sinon';
 import {
+  ResultValidator,
+  ValidateMixin,
   EqualsLength,
+  Unparseable,
   MaxLength,
   MinLength,
-  Required,
-  ResultValidator,
-  Unparseable,
-  ValidateMixin,
   Validator,
+  Required,
 } from '@lion/ui/form-core.js';
 
-import '@lion/ui/define/lion-field.js';
 import '@lion/ui/define/lion-validation-feedback.js';
+import '@lion/ui/define/lion-field.js';
 
 /**
  * @typedef {import('@lion/ui/form-core.js').LionField} LionField

package/components/form-integrations/test/dialog-integrations.test.js

@@ -1,13 +1,14 @@
 /* eslint-disable lit-a11y/no-autofocus */
 import { expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-import { getAllTagNames } from './helpers/helpers.js';
-import './helpers/umbrella-form.js';
-import '@lion/ui/define/lion-dialog.js';
 import '@lion/ui/define/lion-checkbox.js';
+import '@lion/ui/define/lion-dialog.js';
 import '@lion/ui/define/lion-option.js';
 import '@lion/ui/define/lion-radio.js';
+import { html } from 'lit';
 
+import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
+import { getAllTagNames } from './helpers/helpers.js';
+import './helpers/umbrella-form.js';
 /**
  * @typedef {import('./helpers/umbrella-form.js').UmbrellaForm} UmbrellaForm
  * @typedef {import('../../dialog/src/LionDialog.js').LionDialog} LionDialog
@@ -89,6 +90,6 @@ describe('Form inside dialog Integrations', () => {
     el._overlayInvokerNode.click();
     const lionInput = el.querySelector('[name="input"]');
     // @ts-expect-error [allow-protected-in-tests]
-    expect(document.activeElement).to.equal(lionInput._focusableNode);
+    expect(isActiveElement(lionInput._focusableNode)).to.be.true;
   });
 });

package/components/input-datepicker/test/lion-input-datepicker.test.js

@@ -19,9 +19,10 @@ import '@lion/ui/define/lion-input-datepicker.js';
  */
 function getProtectedMembersDatepicker(datepickerEl) {
   // @ts-ignore
-  const { __invokerId: invokerId } = datepickerEl;
+  const { __invokerId: invokerId, _calendarNode: calendarNode } = datepickerEl;
   return {
     invokerId,
+    calendarNode,
   };
 }
 
@@ -410,6 +411,29 @@ describe('<lion-input-datepicker>', () => {
         expect(el.__calendarMaxDate.toString()).to.equal(new Date('2019/07/15').toString());
       });
 
+      it('should update the central date of Calendar if updated validator made the current central date disabled', async () => {
+        const initialValidators = [new MaxDate(new Date('2000/01/01'))];
+        const updatedValidators = [new MaxDate(new Date('2020/01/01'))];
+
+        const el = await fixture(html`
+          <lion-input-datepicker .validators="${initialValidators}"></lion-input-datepicker>
+        `);
+        const obj = new DatepickerInputObject(el);
+        await obj.openCalendar();
+
+        expect(getProtectedMembersDatepicker(el).calendarNode.centralDate.toString()).to.equal(
+          new Date('2000/01/01').toString(),
+        );
+
+        await obj.closeCalendar();
+        el.validators = updatedValidators;
+        await obj.openCalendar();
+
+        expect(getProtectedMembersDatepicker(el).calendarNode.centralDate.toString()).to.equal(
+          new Date('2020/01/01').toString(),
+        );
+      });
+
       it('should show error on invalid date passed to modelValue', async () => {
         const myDate = new Date('foo');
         const el = await fixture(html`

package/components/overlays/src/OverlayController.js

@@ -192,7 +192,6 @@ export class OverlayController extends EventTarget {
       zIndex: 9999,
     };
 
-    this.manager.add(this);
     /** @protected */
     this._contentId = `overlay-content--${Math.random().toString(36).slice(2, 10)}`;
     /** @private */
@@ -475,6 +474,14 @@ export class OverlayController extends EventTarget {
     this._init();
     /** @private */
     this.__elementToFocusAfterHide = undefined;
+
+    if (!this.#isRegisteredOnManager()) {
+      this.manager.add(this);
+    }
+  }
+
+  #isRegisteredOnManager() {
+    return Boolean(this.manager.list.find(ctrl => this === ctrl));
   }
 
   /**
@@ -1285,6 +1292,14 @@ export class OverlayController extends EventTarget {
           wasMouseUpInside = false;
         });
       };
+
+      /** @type {EventListenerOrEventListenerObject} */
+      this.__onWindowBlur = () => {
+        // When the current window loses the focus (clicking outside iframe) the overlay gets hidden
+        setTimeout(() => {
+          this.hide();
+        });
+      };
     }
 
     this.contentWrapperNode[addOrRemoveListener](
@@ -1321,6 +1336,11 @@ export class OverlayController extends EventTarget {
       (this.__onDocumentMouseUp),
       true,
     );
+    window[addOrRemoveListener](
+      'blur',
+      /** @type {EventListenerOrEventListenerObject} */
+      (this.__onWindowBlur),
+    );
   }
 
   /**
@@ -1341,6 +1361,10 @@ export class OverlayController extends EventTarget {
     this.__handleOverlayStyles({ phase: 'teardown' });
     this._handleFeatures({ phase: 'teardown' });
     this.__wrappingDialogNode?.removeEventListener('cancel', this.__cancelHandler);
+
+    if (this.#isRegisteredOnManager()) {
+      this.manager.remove(this);
+    }
   }
 
   /** @private */