@lion/ui 0.15.1 → 0.15.3

package/components/input-amount-dropdown/translations/fr.js

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Toutes les devises',
+  selectCurrency: 'Sélectionner une devise',
+  suggestedCurrencies: 'Devises préférées',
+};

package/components/input-amount-dropdown/translations/hu.js

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Minden pénznem',
+  selectCurrency: 'Pénznem kiválasztása',
+  suggestedCurrencies: 'Előnyben részesített pénznemek',
+};

package/components/input-amount-dropdown/translations/id.js

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Semua mata uang',
+  selectCurrency: 'Pilih mata uang',
+  suggestedCurrencies: 'Mata uang pilihan',
+};

package/components/input-amount-dropdown/translations/it.js

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Tutte le valute',
+  selectCurrency: 'Seleziona valuta',
+  suggestedCurrencies: 'Valute preferite',
+};

package/components/input-amount-dropdown/translations/nl.js

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: "Alle valuta's",
+  selectCurrency: 'Selecteer valuta',
+  suggestedCurrencies: "Voorkeurs valuta's",
+};

package/components/input-amount-dropdown/translations/pl.js

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Wszystkie waluty',
+  selectCurrency: 'Wybierz walutę',
+  suggestedCurrencies: 'Preferowane waluty',
+};

package/components/input-amount-dropdown/translations/ro.js

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Toate valutele',
+  selectCurrency: 'Selectare valută',
+  suggestedCurrencies: 'Valute preferate',
+};

package/components/input-amount-dropdown/translations/ru.js

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Все валюты',
+  selectCurrency: 'Выбрать валюту',
+  suggestedCurrencies: 'Предпочтительные валюты',
+};

package/components/input-amount-dropdown/translations/sk.js

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Všetky meny',
+  selectCurrency: 'Zvoliť menu',
+  suggestedCurrencies: 'Uprednostňované meny',
+};

package/components/input-amount-dropdown/translations/uk.js

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Усі валюти',
+  selectCurrency: 'Вибрати валюту',
+  suggestedCurrencies: 'Обрані валюти',
+};

package/components/input-amount-dropdown/translations/zh.js

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: '所有货币',
+  selectCurrency: '选择货币',
+  suggestedCurrencies: '首选货币',
+};

package/components/input-stepper/src/LionInputStepper.js

@@ -1,4 +1,4 @@
-import { html, css, render } from 'lit';
+import { html, css, render, nothing } from 'lit';
 import { formatNumber, LocalizeMixin, parseNumber } from '@lion/ui/localize-no-side-effects.js';
 import { LionInput } from '@lion/ui/input.js';
 import { IsNumber, MinNumber, MaxNumber } from '@lion/ui/form-core.js';
@@ -96,8 +96,6 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
 
     this._increment = this._increment.bind(this);
     this._decrement = this._decrement.bind(this);
-    this._onEnterButton = this._onEnterButton.bind(this);
-    this._onLeaveButton = this._onLeaveButton.bind(this);
   }
 
   connectedCallback() {
@@ -244,6 +242,26 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
       this._inputNode.removeAttribute('aria-valuenow');
       this._inputNode.removeAttribute('aria-valuetext');
     }
+    this._destroyOutputContent();
+  }
+
+  _destroyOutputContent() {
+    const outputElement = /** @type {HTMLElement} */ (
+      this.shadowRoot?.querySelector('.input-stepper__value')
+    );
+
+    const timeoutValue = outputElement?.dataset?.selfDestruct
+      ? Number(outputElement.dataset.selfDestruct)
+      : 2000;
+    clearTimeout(this.timer);
+    if (outputElement) {
+      this.timer = setTimeout(() => {
+        if (outputElement.parentNode) {
+          this.__valueText = nothing;
+          this.requestUpdate();
+        }
+      }, timeoutValue);
+    }
   }
 
   /**
@@ -267,12 +285,19 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
   _increment() {
     const { step, min, max } = this.values;
     const stepMin = min !== Infinity ? min : 0;
+    const epsilon = 1e-10; // Tolerance for floating-point comparison
 
-    let newValue = this.currentValue + step;
+    let newValue;
 
-    if ((this.currentValue + stepMin) % step !== 0) {
-      // If the value is not aligned to step, align it to the nearest step
-      newValue = Math.floor(this.currentValue / step) * step + step + (stepMin % step);
+    const remainder = (this.currentValue - stepMin) % step;
+    const isAligned = Math.abs(remainder) < epsilon || Math.abs(remainder - step) < epsilon;
+
+    if (!isAligned) {
+      // If the value is not aligned to step, align it to the next valid step
+      newValue = Math.ceil((this.currentValue - stepMin) / step) * step + stepMin;
+    } else {
+      // If the value is aligned, just add the step
+      newValue = this.currentValue + step;
     }
 
     if (newValue <= max || max === Infinity) {
@@ -289,12 +314,19 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
   _decrement() {
     const { step, max, min } = this.values;
     const stepMin = min !== Infinity ? min : 0;
+    const epsilon = 1e-10; // Tolerance for floating-point comparison
+
+    let newValue;
 
-    let newValue = this.currentValue - step;
+    const remainder = (this.currentValue - stepMin) % step;
+    const isAligned = Math.abs(remainder) < epsilon || Math.abs(remainder - step) < epsilon;
 
-    if ((this.currentValue + stepMin) % step !== 0) {
-      // If the value is not aligned to step, align it to the nearest step
-      newValue = Math.floor(this.currentValue / step) * step + (stepMin % step);
+    if (!isAligned) {
+      // If the value is not aligned to step, align it to the previous valid step
+      newValue = Math.floor((this.currentValue - stepMin) / step) * step + stepMin;
+    } else {
+      // If the value is aligned, just subtract the step
+      newValue = this.currentValue - step;
     }
 
     if (newValue >= min || min === Infinity) {
@@ -380,10 +412,8 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
       <button
         ?disabled=${this.disabled || this.readOnly}
         @click=${this._decrement}
-        @focus=${this._onEnterButton}
-        @blur=${this._onLeaveButton}
         type="button"
-        aria-label="${this.msgLit('lion-input-stepper:decrease')}"
+        aria-label="${this.msgLit('lion-input-stepper:decrease')} ${this.fieldName}"
       >
         ${this._decrementorSignTemplate()}
       </button>
@@ -400,10 +430,8 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
       <button
         ?disabled=${this.disabled || this.readOnly}
         @click=${this._increment}
-        @focus=${this._onEnterButton}
-        @blur=${this._onLeaveButton}
         type="button"
-        aria-label="${this.msgLit('lion-input-stepper:increase')}"
+        aria-label="${this.msgLit('lion-input-stepper:increase')} ${this.fieldName}"
       >
         ${this._incrementorSignTemplate()}
       </button>
@@ -413,7 +441,9 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
   /** @protected */
   _inputGroupTemplate() {
     return html`
-      <div class="input-stepper__value">${this.__valueText}</div>
+      <output for="${this._inputId}" data-self-destruct="2000" class="input-stepper__value"
+        >${this.__valueText}</output
+      >
       <div class="input-group">
         ${this._inputGroupBeforeTemplate()}
         <div class="input-group__container">
@@ -424,38 +454,4 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
       </div>
     `;
   }
-
-  /**
-   * @protected
-   * @param {Event} ev
-   */
-  // eslint-disable-next-line no-unused-vars
-  _onEnterButton(ev) {
-    const valueNode = /** @type {HTMLElement} */ (
-      this.shadowRoot?.querySelector('.input-stepper__value')
-    );
-    valueNode.setAttribute('aria-live', 'assertive');
-  }
-
-  /**
-   * Redispatch leave event on host when catching leave event
-   * on the incrementor and decrementor button.
-   *
-   * This redispatched leave event will be caught by
-   * InteractionStateMixin to set "touched" state to true.
-   *
-   * Interacting with the buttons is "user interactions"
-   * the same way as focusing + blurring the field (native input)
-   *
-   * @protected
-   * @param {Event} ev
-   */
-  // eslint-disable-next-line no-unused-vars
-  _onLeaveButton(ev) {
-    const valueNode = /** @type {HTMLElement} */ (
-      this.shadowRoot?.querySelector('.input-stepper__value')
-    );
-    valueNode.removeAttribute('aria-live');
-    this.dispatchEvent(new Event(this._leaveEvent));
-  }
 }

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

@@ -1,4 +1,5 @@
 import { expect, fixture as _fixture, nextFrame } from '@open-wc/testing';
+import { nothing } from 'lit';
 import { html } from 'lit/static-html.js';
 import sinon from 'sinon';
 import { formatNumber } from '@lion/ui/localize-no-side-effects.js';
@@ -17,6 +18,7 @@ const inputStepperWithAttrs = html`<lion-input-stepper
   step="10"
   min="100"
   max="200"
+  label="Label"
 ></lion-input-stepper>`;
 
 describe('<lion-input-stepper>', () => {
@@ -177,31 +179,6 @@ describe('<lion-input-stepper>', () => {
       expect(counter).to.equal(1);
     });
 
-    it('fires a leave event ("blur") on button clicks', async () => {
-      const blurSpy = sinon.spy();
-      const el = await fixture(html`
-        <lion-input-stepper @blur=${blurSpy} name="year" label="Years"></lion-input-stepper>
-      `);
-
-      expect(el.value).to.equal('');
-      const decrementButton = el.querySelector('[slot=prefix]');
-      decrementButton?.dispatchEvent(new Event('focus'));
-      decrementButton?.dispatchEvent(new Event('click'));
-      decrementButton?.dispatchEvent(new Event('blur'));
-      expect(el.value).to.equal('−1');
-      expect(blurSpy.calledOnce).to.be.true;
-      expect(el.touched).to.be.true;
-
-      el.touched = false;
-      const incrementButton = el.querySelector('[slot=suffix]');
-      incrementButton?.dispatchEvent(new Event('focus'));
-      incrementButton?.dispatchEvent(new Event('click'));
-      incrementButton?.dispatchEvent(new Event('blur'));
-      expect(el.value).to.equal('0');
-      expect(blurSpy.calledTwice).to.be.true;
-      expect(el.touched).to.be.true;
-    });
-
     it('should update min and max attributes when min and max property change', async () => {
       const el = await fixture(inputStepperWithAttrs);
       el.min = 100;
@@ -358,6 +335,251 @@ describe('<lion-input-stepper>', () => {
         await el.updateComplete;
         expect(el.modelValue).to.equal(-13, 'Fail - : (-23 > 100 by 10; val 55)'); // -23 > -13 > -3 > 7
       });
+
+      it('handles decimal step values correctly', async () => {
+        // Test with decimal step 0.1
+        let el = await fixture(
+          html`<lion-input-stepper step="0.1" min="0" max="9" value="5.55"></lion-input-stepper>`,
+        );
+
+        // Test increment with decimal step
+        let incrementButton = el.querySelector('[slot=suffix]');
+        incrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(5.6, 'Fail + : (0 > 9 by 0.1; val 5.55)');
+
+        // Test decrement with decimal step
+        let decrementButton = el.querySelector('[slot=prefix]');
+        decrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(5.5, 'Fail - : (0 > 9 by 0.1; val 5.6)');
+
+        // Test with value that needs alignment
+        el = await fixture(
+          html`<lion-input-stepper step="0.1" min="0" max="9" value="3.27"></lion-input-stepper>`,
+        );
+
+        // Should align to next step when incrementing
+        incrementButton = el.querySelector('[slot=suffix]');
+        incrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(3.3, 'Fail + alignment: (0 > 9 by 0.1; val 3.27)');
+
+        // Reset and test decrement alignment
+        el = await fixture(
+          html`<lion-input-stepper step="0.1" min="0" max="9" value="3.27"></lion-input-stepper>`,
+        );
+
+        // Should align to previous step when decrementing
+        decrementButton = el.querySelector('[slot=prefix]');
+        decrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(3.2, 'Fail - alignment: (0 > 9 by 0.1; val 3.27)');
+      });
+    });
+  });
+
+  describe('_destroyOutputContent method', () => {
+    beforeEach(() => {
+      // Ensure clean state for each test
+      sinon.restore();
+    });
+
+    it('should clear existing timer before setting a new one', async () => {
+      const el = await fixture(defaultInputStepper);
+      const clearTimeoutSpy = sinon.spy(window, 'clearTimeout');
+
+      // Set an initial timer
+      el.timer = setTimeout(() => {}, 1000);
+      const initialTimer = el.timer;
+
+      // Call _destroyOutputContent
+      el._destroyOutputContent();
+
+      expect(clearTimeoutSpy.calledWith(initialTimer)).to.be.true;
+      clearTimeoutSpy.restore();
+    });
+
+    it('should set __valueText to nothing and request update after timeout', async () => {
+      const el = await fixture(defaultInputStepper);
+      const requestUpdateSpy = sinon.spy(el, 'requestUpdate');
+      const clock = sinon.useFakeTimers();
+
+      // Set initial value text
+      el.__valueText = 'test value';
+
+      // Call _destroyOutputContent
+      el._destroyOutputContent();
+
+      // Fast forward time by 2000ms (default timeout)
+      clock.tick(2000);
+
+      await expect(el.__valueText).to.equal(nothing);
+      expect(requestUpdateSpy.calledOnce).to.be.true;
+
+      clock.restore();
+      requestUpdateSpy.restore();
+    });
+
+    it('should use custom timeout from data-self-destruct attribute', async () => {
+      const el = await fixture(html`
+        <lion-input-stepper name="test" label="Test"> </lion-input-stepper>
+      `);
+
+      await el.updateComplete;
+
+      // Get the output element and set custom self-destruct value
+      const outputElement = /** @type {HTMLElement} */ (
+        el.shadowRoot?.querySelector('.input-stepper__value')
+      );
+      if (outputElement) {
+        outputElement.dataset.selfDestruct = '5000';
+      }
+
+      const clock = sinon.useFakeTimers();
+      const requestUpdateSpy = sinon.spy(el, 'requestUpdate');
+
+      el.__valueText = 'test value';
+      el._destroyOutputContent();
+
+      // Should not trigger after default 2000ms
+      clock.tick(2000);
+      await expect(el.__valueText).to.equal('test value');
+      expect(requestUpdateSpy.called).to.be.false;
+
+      // Should trigger after custom 5000ms
+      clock.tick(3000); // Total 5000ms
+      await expect(el.__valueText).to.equal(nothing);
+      expect(requestUpdateSpy.calledOnce).to.be.true;
+
+      clock.restore();
+      requestUpdateSpy.restore();
+    });
+
+    it('should handle invalid data-self-destruct value by using default timeout', async () => {
+      const el = await fixture(html`
+        <lion-input-stepper name="test" label="Test"> </lion-input-stepper>
+      `);
+
+      await el.updateComplete;
+
+      // Get the output element and set invalid self-destruct value
+      const outputElement = /** @type {HTMLElement} */ (
+        el.shadowRoot?.querySelector('.input-stepper__value')
+      );
+      if (outputElement) {
+        outputElement.dataset.selfDestruct = 'invalid';
+      }
+
+      const clock = sinon.useFakeTimers();
+      const requestUpdateSpy = sinon.spy(el, 'requestUpdate');
+
+      el.__valueText = 'test value';
+      el._destroyOutputContent();
+
+      // Should use default 2000ms when invalid value is provided
+      clock.tick(2000);
+      await expect(el.__valueText).to.equal(nothing);
+      expect(requestUpdateSpy.calledOnce).to.be.true;
+
+      clock.restore();
+      requestUpdateSpy.restore();
+    });
+
+    it('should not set timeout if output element does not exist', async () => {
+      const el = await fixture(defaultInputStepper);
+      const setTimeoutSpy = sinon.spy(window, 'setTimeout');
+
+      // Mock shadowRoot to return null for querySelector
+      const originalQuerySelector = el.shadowRoot?.querySelector;
+      if (el.shadowRoot) {
+        el.shadowRoot.querySelector = () => null;
+      }
+
+      el._destroyOutputContent();
+
+      expect(setTimeoutSpy.called).to.be.false;
+
+      // Restore original querySelector
+      if (el.shadowRoot && originalQuerySelector) {
+        el.shadowRoot.querySelector = originalQuerySelector;
+      }
+      setTimeoutSpy.restore();
+    });
+
+    it('should only execute timeout callback if output element still has parent', async () => {
+      const el = await fixture(defaultInputStepper);
+      const clock = sinon.useFakeTimers();
+      const requestUpdateSpy = sinon.spy(el, 'requestUpdate');
+
+      el.__valueText = 'test value';
+      el._destroyOutputContent();
+
+      // Remove the output element from DOM before timeout
+      const outputElement = el.shadowRoot?.querySelector('.input-stepper__value');
+      if (outputElement && outputElement.parentNode) {
+        outputElement.parentNode.removeChild(outputElement);
+      }
+
+      // Fast forward time
+      clock.tick(2000);
+
+      // Should not have updated since element was removed
+      expect(requestUpdateSpy.called).to.be.false;
+      expect(el.__valueText).to.equal('test value');
+
+      clock.restore();
+      requestUpdateSpy.restore();
+    });
+
+    it('should be called when increment button is clicked', async () => {
+      const el = await fixture(defaultInputStepper);
+      const destroyOutputSpy = sinon.spy(el, '_destroyOutputContent');
+
+      const incrementButton = el.querySelector('[slot=suffix]');
+      incrementButton?.dispatchEvent(new Event('click'));
+
+      expect(destroyOutputSpy.calledOnce).to.be.true;
+      destroyOutputSpy.restore();
+    });
+
+    it('should be called when decrement button is clicked', async () => {
+      const el = await fixture(defaultInputStepper);
+      const destroyOutputSpy = sinon.spy(el, '_destroyOutputContent');
+
+      const decrementButton = el.querySelector('[slot=prefix]');
+      decrementButton?.dispatchEvent(new Event('click'));
+
+      expect(destroyOutputSpy.calledOnce).to.be.true;
+      destroyOutputSpy.restore();
+    });
+
+    it('should handle multiple rapid calls by clearing previous timers', async () => {
+      const el = await fixture(defaultInputStepper);
+      const clock = sinon.useFakeTimers();
+      const requestUpdateSpy = sinon.spy(el, 'requestUpdate');
+
+      el.__valueText = 'test value';
+
+      // Call _destroyOutputContent multiple times rapidly
+      el._destroyOutputContent();
+      clock.tick(1000); // 1 second
+
+      el._destroyOutputContent(); // This should clear the previous timer
+      clock.tick(1000); // Total 2 seconds from first call, 1 second from second call
+
+      // Should not have triggered yet since second call reset the timer
+      expect(el.__valueText).to.equal('test value');
+      expect(requestUpdateSpy.called).to.be.false;
+
+      clock.tick(1000); // Total 2 seconds from second call
+
+      // Should trigger now
+      await expect(el.__valueText).to.equal(nothing);
+      expect(requestUpdateSpy.calledOnce).to.be.true;
+
+      clock.restore();
+      requestUpdateSpy.restore();
     });
   });
 
@@ -448,30 +670,20 @@ describe('<lion-input-stepper>', () => {
       expect(el._inputNode.getAttribute('aria-valuemax')).to.equal('1000');
     });
 
-    it('when decrease button gets focus, it sets aria-live to input-stepper__value', async () => {
+    it('decrease button should have aria-label with the component label', async () => {
       const el = await fixture(inputStepperWithAttrs);
-      const stepperValue = el.shadowRoot?.querySelector('.input-stepper__value');
       const decrementButton = el.querySelector('[slot=prefix]');
 
-      decrementButton?.dispatchEvent(new Event('focus'));
-      expect(stepperValue?.hasAttribute('aria-live')).to.be.true;
-      expect(stepperValue?.getAttribute('aria-live')).to.equal('assertive');
-
-      decrementButton?.dispatchEvent(new Event('blur'));
-      expect(stepperValue?.hasAttribute('aria-live')).to.be.false;
+      expect(decrementButton?.hasAttribute('aria-label')).to.be.true;
+      expect(decrementButton?.getAttribute('aria-label')).to.equal('Decrease Label');
     });
 
-    it('when increase button gets focus, it sets aria-live to input-stepper__value', async () => {
+    it('increase button should have aria-label with the component label', async () => {
       const el = await fixture(inputStepperWithAttrs);
-      const stepperValue = el.shadowRoot?.querySelector('.input-stepper__value');
       const incrementButton = el.querySelector('[slot=suffix]');
 
-      incrementButton?.dispatchEvent(new Event('focus'));
-      expect(stepperValue?.hasAttribute('aria-live')).to.be.true;
-      expect(stepperValue?.getAttribute('aria-live')).to.equal('assertive');
-
-      incrementButton?.dispatchEvent(new Event('blur'));
-      expect(stepperValue?.hasAttribute('aria-live')).to.be.false;
+      expect(incrementButton?.hasAttribute('aria-label')).to.be.true;
+      expect(incrementButton?.getAttribute('aria-label')).to.equal('Increase Label');
     });
   });
 });

package/components/overlays/src/OverlayController.js

@@ -197,15 +197,24 @@ export class OverlayController extends EventTarget {
     this._contentId = `overlay-content--${Math.random().toString(36).slice(2, 10)}`;
     /** @private */
     this.__originalAttrs = new Map();
+    /** @private */
+    this.__escKeyHandler = this.__escKeyHandler.bind(this);
     this.updateConfig(config);
     /** @private */
     this.__hasActiveTrapsKeyboardFocus = false;
     /** @private */
     this.__hasActiveBackdrop = true;
     /** @private */
-    this.__escKeyHandler = this.__escKeyHandler.bind(this);
-    /** @private */
     this.__cancelHandler = this.__cancelHandler.bind(this);
+    /**
+     * The property is used to skip `__escKeyHandler` handler for overlays that have been closed
+     * by `__escKeyHandlerCalled` previously.
+     * `__escKeyHandlerCalled` is set to `false` right before overlay show up
+     * `__escKeyHandlerCalled` is set to `true` when `__escKeyHandler` is called at least one time
+     * after each 'show' phase
+     * @private
+     */
+    this.__escKeyHandlerCalled = false;
   }
 
   /**
@@ -1211,13 +1220,21 @@ export class OverlayController extends EventTarget {
    * @returns {void}
    */
   __escKeyHandler(event) {
-    if (event.key !== 'Escape' || childDialogsClosedInEventLoopWeakmap.has(event)) return;
+    if (
+      event.key !== 'Escape' ||
+      childDialogsClosedInEventLoopWeakmap.has(event) ||
+      (!this.isShown && this.__escKeyHandlerCalled)
+    ) {
+      return;
+    }
 
     const hasPressedInside =
       event.composedPath().includes(this.contentNode) ||
+      (this.invokerNode && event.composedPath().includes(this.invokerNode)) ||
       deepContains(this.contentNode, /** @type {HTMLElement|ShadowRoot} */ (event.target));
 
     if (hasPressedInside) {
+      this.__escKeyHandlerCalled = true;
       this.hide();
       // We could do event.stopPropagation() here, but we don't want to hide info for
       // the outside world about user interactions. Instead, we store the event in a WeakMap
@@ -1245,12 +1262,21 @@ export class OverlayController extends EventTarget {
    * @protected
    */
   _handleHidesOnEsc({ phase }) {
-    if (phase === 'show') {
+    if (phase === 'init') {
+      // we remove previously added (if any) event listener to guarantee
+      // there is only one Escape handler added here.
+      // Note `init` phase triggered on every `updateConfig` call and that
+      // could happen multiple times during the component life cycle
+      this.contentNode.removeEventListener('keyup', this.__escKeyHandler);
       this.contentNode.addEventListener('keyup', this.__escKeyHandler);
       if (this.invokerNode) {
         this.invokerNode.addEventListener('keyup', this.__escKeyHandler);
       }
-    } else if (phase === 'hide' || phase === 'teardown') {
+    }
+    if (phase === 'show') {
+      this.__escKeyHandlerCalled = false;
+    }
+    if (phase === 'teardown') {
       this.contentNode.removeEventListener('keyup', this.__escKeyHandler);
       if (this.invokerNode) {
         this.invokerNode.removeEventListener('keyup', this.__escKeyHandler);
@@ -1263,9 +1289,10 @@ export class OverlayController extends EventTarget {
    * @protected
    */
   _handleHidesOnOutsideEsc({ phase }) {
-    if (phase === 'show') {
+    if (phase === 'init') {
+      document.removeEventListener('keyup', this.#outsideEscKeyHandler);
       document.addEventListener('keyup', this.#outsideEscKeyHandler);
-    } else if (phase === 'hide' || phase === 'teardown') {
+    } else if (phase === 'teardown') {
       document.removeEventListener('keyup', this.#outsideEscKeyHandler);
     }
   }

package/components/overlays/test/OverlayMixin.test.js

@@ -7,9 +7,9 @@ const tagString = defineCE(
   class extends OverlayMixin(LitElement) {
     render() {
       return html`
-        <button slot="invoker">invoker button</button>
+        <slot name="invoker"></slot>
         <div id="overlay-content-node-wrapper">
-          <div slot="content">content of the overlay</div>
+          <slot name="content"></slot>
         </div>
       `;
     }