@lion/ui 0.9.0 → 0.10.0

package/components/input-amount/src/parsers.js

@@ -1,7 +1,7 @@
 import { parseNumber, getFractionDigits } from '@lion/ui/localize-no-side-effects.js';
 
 /**
- * @typedef {import('../../localize/types/LocalizeMixinTypes.js').FormatNumberOptions} FormatOptions
+ * @typedef {import('../../localize/types/LocalizeMixinTypes.js').FormatNumberOptions} FormatNumberOptions
  */
 
 /**
@@ -28,7 +28,7 @@ function round(value, decimals) {
  * parseAmount('1,234.56', {currency: 'JOD'}); => 1234.560
  *
  * @param {string} value Number to be parsed
- * @param {FormatOptions} [givenOptions] Locale Options
+ * @param {FormatNumberOptions} [givenOptions] Locale Options
  */
 export function parseAmount(value, givenOptions) {
   const unmatchedInput = value.match(/[^0-9,.\- ]/g);
@@ -44,7 +44,7 @@ export function parseAmount(value, givenOptions) {
     return undefined;
   }
 
-  /** @type {FormatOptions} */
+  /** @type {FormatNumberOptions} */
   const options = {
     ...givenOptions,
   };

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

@@ -1,10 +1,11 @@
 import { aTimeout, expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
-import { localize } from '@lion/ui/localize.js';
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 import { getInputMembers } from '@lion/ui/input-test-helpers.js';
 import { LionInputAmount, formatAmount, parseAmount } from '@lion/ui/input-amount.js';
-
+import { mimicUserInput } from '@lion/ui/form-core-test-helpers.js';
+import sinon from 'sinon';
 import '@lion/ui/define/lion-input-amount.js';
 
 /**
@@ -12,6 +13,8 @@ import '@lion/ui/define/lion-input-amount.js';
  */
 
 describe('<lion-input-amount>', () => {
+  const localize = getLocalizeManager();
+
   beforeEach(() => {
     localizeTearDown();
   });
@@ -128,6 +131,37 @@ describe('<lion-input-amount>', () => {
     expect(_inputNode.value).to.equal('100.12');
   });
 
+  it('adjusts formats with locale when formatOptions.mode is "user-edited"', async () => {
+    const el = /** @type {LionInputAmount} */ (
+      await fixture(
+        html`<lion-input-amount
+          .modelValue=${123456.78}
+          currency="EUR"
+          .formatOptions="${{ locale: 'nl-NL' }}"
+        ></lion-input-amount>`,
+      )
+    );
+    const parserSpy = sinon.spy(el, 'parser');
+    const formatterSpy = sinon.spy(el, 'formatter');
+
+    // @ts-expect-error [allow-protected] in test
+    expect(el._inputNode.value).to.equal('123.456,78');
+
+    // When editing an already existing value, we interpet the separators as they are
+    mimicUserInput(el, '123.456');
+    expect(parserSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+    expect(formatterSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+    expect(el.modelValue).to.equal(123456);
+    expect(el.formattedValue).to.equal('123.456,00');
+
+    // Formatting should only affect values that should be formatted / parsed as a consequence of user input.
+    // When a user finished editing, the default should be restored.
+    // (think of a programmatically set modelValue, that should behave idempotent, regardless of when it is set)
+    el.modelValue = 1234;
+    expect(el.formattedValue).to.equal('1.234,00');
+    expect(formatterSpy.lastCall.args[1]?.mode).to.equal('auto');
+  });
+
   it('sets inputmode attribute to decimal', async () => {
     const el = /** @type {LionInputAmount} */ (
       await fixture(`<lion-input-amount></lion-input-amount>`)

package/components/input-amount/test/parsers.test.js

@@ -60,4 +60,15 @@ describe('parseAmount()', async () => {
     expect(parseAmount('foo1', { mode: 'pasted' })).to.equal(1);
     expect(parseAmount('EUR 1,50', { mode: 'pasted' })).to.equal(1.5);
   });
+
+  it('parses based on locale when "user-edited" mode used combined with viewValueStates "formatted"', async () => {
+    expect(parseAmount('123,456.78', { mode: 'auto' })).to.equal(123456.78);
+    expect(
+      parseAmount('123,456.78', { mode: 'user-edited', viewValueStates: ['formatted'] }),
+    ).to.equal(123456.78);
+    expect(parseAmount('123.456,78', { mode: 'auto' })).to.equal(123456.78);
+    expect(
+      parseAmount('123.456,78', { mode: 'user-edited', viewValueStates: ['formatted'] }),
+    ).to.equal(123.45678);
+  });
 });

package/components/input-datepicker/translations/es.js

@@ -1,3 +1,3 @@
 export default {
-  openDatepickerLabel: 'Selector de fecha abierta',
+  openDatepickerLabel: 'Abrir selector de fecha',
 };

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

@@ -21,6 +21,19 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
         .input-group__container > .input-group__input ::slotted(.form-control) {
           text-align: center;
         }
+
+        .input-stepper__value {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          overflow: hidden;
+          clip-path: inset(100%);
+          clip: rect(1px, 1px, 1px, 1px);
+          white-space: nowrap;
+          border: 0;
+          margin: 0;
+          padding: 0;
+        }
       `,
     ];
   }
@@ -83,7 +96,8 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
 
     this.__increment = this.__increment.bind(this);
     this.__decrement = this.__decrement.bind(this);
-    this.__boundOnLeaveButton = this._onLeaveButton.bind(this);
+    this._onEnterButton = this._onEnterButton.bind(this);
+    this._onLeaveButton = this._onLeaveButton.bind(this);
   }
 
   connectedCallback() {
@@ -93,11 +107,12 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
       min: this.min,
       step: this.step,
     };
-
-    this.role = 'spinbutton';
+    if (this._inputNode) {
+      this._inputNode.role = 'spinbutton';
+      this._inputNode.setAttribute('inputmode', 'decimal');
+      this._inputNode.setAttribute('autocomplete', 'off');
+    }
     this.addEventListener('keydown', this.__keyDownHandler);
-    this._inputNode.setAttribute('inputmode', 'decimal');
-    this._inputNode.setAttribute('autocomplete', 'off');
     this.__setDefaultValidators();
     this.__toggleSpinnerButtonsState();
   }
@@ -119,9 +134,9 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
       this._inputNode.min = `${this.min}`;
       this.values.min = this.min;
       if (this.min !== Infinity) {
-        this.setAttribute('aria-valuemin', `${this.min}`);
+        this._inputNode.setAttribute('aria-valuemin', `${this.min}`);
       } else {
-        this.removeAttribute('aria-valuemin');
+        this._inputNode.removeAttribute('aria-valuemin');
       }
       this.__toggleSpinnerButtonsState();
     }
@@ -130,9 +145,9 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
       this._inputNode.max = `${this.max}`;
       this.values.max = this.max;
       if (this.max !== Infinity) {
-        this.setAttribute('aria-valuemax', `${this.max}`);
+        this._inputNode.setAttribute('aria-valuemax', `${this.max}`);
       } else {
-        this.removeAttribute('aria-valuemax');
+        this._inputNode.removeAttribute('aria-valuemax');
       }
       this.__toggleSpinnerButtonsState();
     }
@@ -145,14 +160,6 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
       this._inputNode.step = `${this.step}`;
       this.values.step = this.step;
     }
-
-    if (changedProperties.has('_ariaLabelledNodes')) {
-      this.__reflectAriaAttrToSpinButton('aria-labelledby', this._ariaLabelledNodes);
-    }
-
-    if (changedProperties.has('_ariaDescribedNodes')) {
-      this.__reflectAriaAttrToSpinButton('aria-describedby', this._ariaDescribedNodes);
-    }
   }
 
   get slots() {
@@ -163,22 +170,6 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
     };
   }
 
-  /**
-   * Based on FormControlMixin __reflectAriaAttr()
-   *
-   * Will handle help text, validation feedback and character counter,
-   * prefix/suffix/before/after (if they contain data-description flag attr).
-   * Also, contents of id references that will be put in the <lion-field>._ariaDescribedby property
-   * from an external context, will be read by a screen reader.
-   * @param {string} attrName
-   * @param {Element[]} nodes
-   * @private
-   */
-  __reflectAriaAttrToSpinButton(attrName, nodes) {
-    const string = nodes.map(n => n.id).join(' ');
-    this.setAttribute(attrName, string);
-  }
-
   /**
    * Set aria labels and apply validators
    * @private
@@ -227,7 +218,6 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
     }
     decrementButton[disableDecrementor ? 'setAttribute' : 'removeAttribute']('disabled', 'true');
     incrementButton[disableIncrementor ? 'setAttribute' : 'removeAttribute']('disabled', 'true');
-
     this._updateAriaAttributes();
   }
 
@@ -237,21 +227,22 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
   _updateAriaAttributes() {
     const displayValue = this._inputNode.value;
     if (displayValue) {
-      this.setAttribute('aria-valuenow', `${displayValue}`);
+      this._inputNode.setAttribute('aria-valuenow', `${displayValue}`);
       if (
         Object.keys(this.valueTextMapping).length !== 0 &&
         Object.keys(this.valueTextMapping).find(key => Number(key) === this.currentValue)
       ) {
-        this.setAttribute('aria-valuetext', `${this.valueTextMapping[this.currentValue]}`);
+        this.__valueText = this.valueTextMapping[this.currentValue];
       } else {
         // VoiceOver announces percentages once the valuemin or valuemax are used.
         // This can be fixed by setting valuetext to the same value as valuenow
         // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow
-        this.setAttribute('aria-valuetext', `${displayValue}`);
+        this.__valueText = displayValue;
       }
+      this._inputNode.setAttribute('aria-valuetext', `${this.__valueText}`);
     } else {
-      this.removeAttribute('aria-valuenow');
-      this.removeAttribute('aria-valuetext');
+      this._inputNode.removeAttribute('aria-valuenow');
+      this._inputNode.removeAttribute('aria-valuetext');
     }
   }
 
@@ -373,7 +364,8 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
       <button
         ?disabled=${this.disabled || this.readOnly}
         @click=${this.__decrement}
-        @blur=${this.__boundOnLeaveButton}
+        @focus=${this._onEnterButton}
+        @blur=${this._onLeaveButton}
         type="button"
         aria-label="${this.msgLit('lion-input-stepper:decrease')}"
       >
@@ -392,7 +384,8 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
       <button
         ?disabled=${this.disabled || this.readOnly}
         @click=${this.__increment}
-        @blur=${this.__boundOnLeaveButton}
+        @focus=${this._onEnterButton}
+        @blur=${this._onLeaveButton}
         type="button"
         aria-label="${this.msgLit('lion-input-stepper:increase')}"
       >
@@ -401,6 +394,33 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
     `;
   }
 
+  /** @protected */
+  _inputGroupTemplate() {
+    return html`
+      <div class="input-stepper__value">${this.__valueText}</div>
+      <div class="input-group">
+        ${this._inputGroupBeforeTemplate()}
+        <div class="input-group__container">
+          ${this._inputGroupPrefixTemplate()} ${this._inputGroupInputTemplate()}
+          ${this._inputGroupSuffixTemplate()}
+        </div>
+        ${this._inputGroupAfterTemplate()}
+      </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.
@@ -410,8 +430,16 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
    *
    * Interacting with the buttons is "user interactions"
    * the same way as focusing + blurring the field (native input)
+   *
+   * @protected
+   * @param {Event} ev
    */
-  _onLeaveButton() {
+  // 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

@@ -278,17 +278,23 @@ describe('<lion-input-stepper>', () => {
       await expect(el).to.be.accessible();
     });
 
+    it('has role="spinbutton"', async () => {
+      const el = await fixture(defaultInputStepper);
+      expect(el._inputNode.hasAttribute('role')).to.be.true;
+      expect(el._inputNode.getAttribute('role')).to.equal('spinbutton');
+    });
+
     it('updates aria-valuenow when stepper is changed', async () => {
       const el = await fixture(defaultInputStepper);
       el.modelValue = 1;
 
       await el.updateComplete;
-      expect(el.hasAttribute('aria-valuenow')).to.be.true;
-      expect(el.getAttribute('aria-valuenow')).to.equal('1');
+      expect(el._inputNode.hasAttribute('aria-valuenow')).to.be.true;
+      expect(el._inputNode.getAttribute('aria-valuenow')).to.equal('1');
 
       el.modelValue = '';
       await el.updateComplete;
-      expect(el.hasAttribute('aria-valuenow')).to.be.false;
+      expect(el._inputNode.hasAttribute('aria-valuenow')).to.be.false;
     });
 
     it('updates aria-valuetext when stepper is changed', async () => {
@@ -299,12 +305,12 @@ describe('<lion-input-stepper>', () => {
       el.modelValue = 1;
       await el.updateComplete;
 
-      expect(el.hasAttribute('aria-valuetext')).to.be.true;
-      expect(el.getAttribute('aria-valuetext')).to.equal('1');
+      expect(el._inputNode.hasAttribute('aria-valuetext')).to.be.true;
+      expect(el._inputNode.getAttribute('aria-valuetext')).to.equal('1');
 
       el.modelValue = '';
       await el.updateComplete;
-      expect(el.hasAttribute('aria-valuetext')).to.be.false;
+      expect(el._inputNode.hasAttribute('aria-valuetext')).to.be.false;
     });
 
     it('can give aria-valuetext to override default value as a human-readable text alternative', async () => {
@@ -318,30 +324,60 @@ describe('<lion-input-stepper>', () => {
       `);
       el.modelValue = 1;
       await el.updateComplete;
-      expect(el.hasAttribute('aria-valuetext')).to.be.true;
-      expect(el.getAttribute('aria-valuetext')).to.equal('first');
+      expect(el._inputNode.hasAttribute('aria-valuetext')).to.be.true;
+      expect(el._inputNode.getAttribute('aria-valuetext')).to.equal('first');
     });
 
     it('updates aria-valuemin when stepper is changed', async () => {
       const el = await fixture(inputStepperWithAttrs);
       const incrementButton = el.querySelector('[slot=suffix]');
       incrementButton?.dispatchEvent(new Event('click'));
-      expect(el).to.have.attribute('aria-valuemin', '100');
+      expect(el._inputNode.hasAttribute('aria-valuemin')).to.be.true;
+      expect(el._inputNode.getAttribute('aria-valuemin')).to.equal('100');
 
       el.min = 0;
       await el.updateComplete;
-      expect(el).to.have.attribute('aria-valuemin', '0');
+      expect(el._inputNode.hasAttribute('aria-valuemin')).to.be.true;
+      expect(el._inputNode.getAttribute('aria-valuemin')).to.equal('0');
     });
 
     it('updates aria-valuemax when stepper is changed', async () => {
       const el = await fixture(inputStepperWithAttrs);
       const incrementButton = el.querySelector('[slot=suffix]');
       incrementButton?.dispatchEvent(new Event('click'));
-      expect(el).to.have.attribute('aria-valuemax', '200');
+      expect(el._inputNode.hasAttribute('aria-valuemax')).to.be.true;
+      expect(el._inputNode.getAttribute('aria-valuemax')).to.equal('200');
 
       el.max = 1000;
       await el.updateComplete;
-      expect(el).to.have.attribute('aria-valuemax', '1000');
+      expect(el._inputNode.hasAttribute('aria-valuemax')).to.be.true;
+      expect(el._inputNode.getAttribute('aria-valuemax')).to.equal('1000');
+    });
+
+    it('when decrease button gets focus, it sets aria-live to input-stepper__value', 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;
+    });
+
+    it('when increase button gets focus, it sets aria-live to input-stepper__value', 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;
     });
   });
 });

package/components/input-tel-dropdown/src/LionInputTelDropdown.js

@@ -158,11 +158,11 @@ export class LionInputTelDropdown extends LionInputTel {
     super.styles,
     css`
       /**
-           * We need to align the height of the dropdown with the height of the text field.
-           * We target the HTMLDivElement (render wrapper from SlotMixin) here. Its child,
-           * [data-ref=dropdown], recieves a 100% height as well via inline styles (since we
-           * can't target from shadow styles).
-           */
+       * We need to align the height of the dropdown with the height of the text field.
+       * We target the HTMLDivElement (render wrapper from SlotMixin) here. Its child,
+       * [data-ref=dropdown], receives a 100% height as well via inline styles (since we
+       * can't target from shadow styles).
+       */
       ::slotted([slot='prefix']) {
         height: 100%;
       }
@@ -301,7 +301,8 @@ export class LionInputTelDropdown extends LionInputTel {
       } else {
         this.__initializedRegionCode = `+${countryCode}`;
       }
-      this.modelValue = this.__initializedRegionCode;
+      // on init we set the value to the _inputNode and not the modelValue to prevent validation
+      this._inputNode.value = this.__initializedRegionCode;
       this._initialModelValue = this.__initializedRegionCode;
       this.initInteractionState();
     }

package/components/input-tel-dropdown/test/LionInputTelDropdown.test.js

@@ -9,8 +9,10 @@ import { LionOption } from '@lion/ui/listbox.js';
 import { ref } from 'lit/directives/ref.js';
 import { html } from 'lit';
 
+import { mockPhoneUtilManager, restorePhoneUtilManager } from '@lion/ui/input-tel-test-helpers.js';
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
+import '@lion/ui/define/lion-input-tel-dropdown.js';
 
 /**
  * @typedef {import('../types/index.js').TemplateDataForDropdownInputTel} TemplateDataForDropdownInputTel
@@ -67,6 +69,18 @@ describe('WithFormControlInputTelDropdown', () => {
   // Runs it for LionSelectRich, which uses .modelValue/@model-value-changed instead of .value/@change
   runInputTelDropdownSuite({ klass: WithFormControlInputTelDropdown });
 
+  it("it doesn't set the country as modelValue, only as viewValue", async () => {
+    const el = /** @type {LionInputTelDropdown} */ (
+      await fixture(html`
+        <lion-input-tel-dropdown .allowedRegions="${['NL']}"></lion-input-tel-dropdown>
+      `)
+    );
+
+    // @ts-expect-error [allow-protected-in-tests]
+    expect(el._inputNode.value).to.equal('+31');
+    expect(el.modelValue).to.equal('');
+  });
+
   it('focuses the textbox right after selection if selected via opened dropdown if interaction-mode is mac', async () => {
     class InputTelDropdownMac extends LionInputTelDropdown {
       static templates = {
@@ -172,4 +186,40 @@ describe('WithFormControlInputTelDropdown', () => {
       expect(isActiveElement(el._inputNode)).to.be.false;
     }
   });
+
+  describe('defaultValidators', () => {
+    /** @type {(value:any) => void} */
+    let resolveLoaded;
+    beforeEach(() => {
+      ({ resolveLoaded } = mockPhoneUtilManager());
+    });
+
+    afterEach(() => {
+      restorePhoneUtilManager();
+    });
+
+    it('without interaction are not called', async () => {
+      const el = /** @type {LionInputTelDropdown} */ (
+        await fixture(html`
+          <lion-input-tel-dropdown .allowedRegions="${['NL']}"></lion-input-tel-dropdown>
+        `)
+      );
+      resolveLoaded(undefined);
+      await aTimeout(0);
+      expect(el.hasFeedbackFor).to.deep.equal([]);
+    });
+
+    it('with interaction are called', async () => {
+      const el = /** @type {LionInputTelDropdown} */ (
+        await fixture(html`
+          <lion-input-tel-dropdown .allowedRegions="${['NL']}"></lion-input-tel-dropdown>
+        `)
+      );
+      el.modelValue = '+31 6';
+
+      resolveLoaded(undefined);
+      await aTimeout(0);
+      expect(el.hasFeedbackFor).to.deep.equal(['error']);
+    });
+  });
 });

package/components/localize/src/number/getDecimalSeparator.js

@@ -8,7 +8,7 @@ import { getLocale } from '../utils/getLocale.js';
  * @returns {string} The separator
  */
 export function getDecimalSeparator(locale, options) {
-  if (options && options.decimalSeparator) {
+  if (options?.decimalSeparator) {
     return options.decimalSeparator;
   }
   const computedLocale = getLocale(locale);

package/components/localize/src/number/parseNumber.js

@@ -16,14 +16,18 @@ import { getDecimalSeparator } from './getDecimalSeparator.js';
  * parseNumber('1,234.56'); // method: heuristic => 1234.56
  *
  * @param {string} value Clean number (only [0-9 ,.]) to be parsed
- * @param {object} options
- * @param {string?} [options.mode] auto|pasted
+ * @param {{mode?:'auto'|'pasted'|'user-edited'; viewValueStates?:string[]}} options
  * @return {string} unparseable|withLocale|heuristic
  */
-function getParseMode(value, { mode = 'auto' } = {}) {
+function getParseMode(value, { mode = 'auto', viewValueStates } = {}) {
   const separators = value.match(/[., ]/g);
 
-  if (!separators) {
+  // When a user edits an existing value, we already formatted it with a certain locale.
+  // For best UX, we stick with this locale
+  const shouldAlignWithExistingSeparators =
+    viewValueStates?.includes('formatted') && mode === 'user-edited';
+
+  if (!separators || shouldAlignWithExistingSeparators) {
     return 'withLocale';
   }
   if (mode === 'auto' && separators.length === 1) {
@@ -52,8 +56,7 @@ function getParseMode(value, { mode = 'auto' } = {}) {
  * @param {import('../../types/LocalizeMixinTypes.js').FormatNumberOptions} options Locale Options
  */
 function parseWithLocale(value, options) {
-  const locale = options && options.locale ? options.locale : undefined;
-  const separator = getDecimalSeparator(locale, options);
+  const separator = getDecimalSeparator(options?.locale, options);
   const regexNumberAndLocaleSeparator = new RegExp(`[0-9${separator}-]`, 'g');
   let numberAndLocaleSeparator = value.match(regexNumberAndLocaleSeparator)?.join('');
   if (separator === ',') {

package/components/localize/test/number/parseNumber.test.js

@@ -74,6 +74,17 @@ describe('parseNumber()', () => {
     expect(parseNumber('123456.78', { mode: 'pasted' })).to.equal(123456.78);
   });
 
+  it('detects separators withLocale when "user-edited" mode combined with viewValueStates "formatted" used e.g. 123.456,78', async () => {
+    expect(parseNumber('123,456.78', { mode: 'auto' })).to.equal(123456.78);
+    expect(
+      parseNumber('123,456.78', { mode: 'user-edited', viewValueStates: ['formatted'] }),
+    ).to.equal(123456.78);
+    expect(parseNumber('123.456,78', { mode: 'auto' })).to.equal(123456.78);
+    expect(
+      parseNumber('123.456,78', { mode: 'user-edited', viewValueStates: ['formatted'] }),
+    ).to.equal(123.45678);
+  });
+
   it('detects separators unparseable when there are 2 same ones e.g. 1.234.56', () => {
     expect(parseNumber('1.234.56')).to.equal(123456);
     expect(parseNumber('1,234,56')).to.equal(123456);

package/components/localize/types/LocalizeMixinTypes.ts

@@ -21,7 +21,7 @@ export declare interface FormatDateOptions extends Intl.DateTimeFormatOptions {
 
   roundMode?: string;
   returnIfNaN?: string;
-  mode?: 'pasted' | 'auto';
+  mode?: 'pasted' | 'auto' | 'user-edited';
 
   postProcessors?: Map<string, DatePostProcessor>;
 }
@@ -41,8 +41,8 @@ export declare interface FormatNumberOptions extends Intl.NumberFormatOptions {
   // https://en.wikipedia.org/wiki/Decimal_separator#Digit_grouping
   // note the half space in there as well
   groupSeparator?: ',' | '.' | ' ' | '_' | ' ' | "'";
-  mode?: 'pasted' | 'auto';
-
+  mode?: 'pasted' | 'auto' | 'user-edited';
+  viewValueStates?: 'formatted'[];
   postProcessors?: Map<string, NumberPostProcessor>;
 }
 

package/components/overlays/src/OverlayController.js

@@ -1191,9 +1191,8 @@ export class OverlayController extends EventTarget {
     const hasPressedInside =
       event.composedPath().includes(this.contentNode) ||
       deepContains(this.contentNode, /** @type {HTMLElement|ShadowRoot} */ (event.target));
-    if (!hasPressedInside) {
-      this.hide();
-    }
+    if (hasPressedInside) return;
+    this.hide();
   };
 
   /**
@@ -1206,7 +1205,7 @@ export class OverlayController extends EventTarget {
       if (this.invokerNode) {
         this.invokerNode.addEventListener('keyup', this.__escKeyHandler);
       }
-    } else if (phase === 'hide') {
+    } else if (phase === 'hide' || phase === 'teardown') {
       this.contentNode.removeEventListener('keyup', this.__escKeyHandler);
       if (this.invokerNode) {
         this.invokerNode.removeEventListener('keyup', this.__escKeyHandler);
@@ -1221,7 +1220,7 @@ export class OverlayController extends EventTarget {
   _handleHidesOnOutsideEsc({ phase }) {
     if (phase === 'show') {
       document.addEventListener('keyup', this.#outsideEscKeyHandler);
-    } else if (phase === 'hide') {
+    } else if (phase === 'hide' || phase === 'teardown') {
       document.removeEventListener('keyup', this.#outsideEscKeyHandler);
     }
   }