@lion/ui 0.10.0 → 0.11.0

package/components/button/src/LionButton.js

@@ -149,7 +149,11 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
     super.updated(changedProperties);
 
     if (changedProperties.has('disabled')) {
-      this.setAttribute('aria-disabled', `${this.disabled}`); // create mixin if we need it in more places
+      if (this.disabled) {
+        this.setAttribute('aria-disabled', 'true');
+      } else if (this.getAttribute('aria-disabled') !== null) {
+        this.removeAttribute('aria-disabled');
+      }
     }
   }
 

package/components/button/test-suites/LionButton.suite.js

@@ -40,7 +40,7 @@ export function LionButtonSuite({ klass = LionButton } = {}) {
       el.disabled = false;
       await el.updateComplete;
       expect(el.getAttribute('tabindex')).to.equal('0');
-      expect(el.getAttribute('aria-disabled')).to.equal('false');
+      expect(el.getAttribute('aria-disabled')).to.not.exist;
       expect(el.hasAttribute('disabled')).to.equal(false);
 
       el.disabled = true;

package/components/calendar/src/LionCalendar.js

@@ -658,25 +658,16 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     day.ariaCurrent = day.today ? 'date' : undefined;
     day.disabledInfo = '';
 
+    if (day.disabled) {
+      day.disabledInfo = `${this.msgLit(`lion-calendar:defaultDisabledDate`)}`;
+    }
     if (this.minDate && normalizeDateTime(day.date) < normalizeDateTime(this.minDate)) {
       day.disabled = true;
-      // TODO: turn this into a translated string
-      day.disabledInfo = `This date is unavailable. Earliest date to select is ${
-        this.__getSelectableDateRange().earliestSelectableDate
-      }. Please select another date.`;
+      day.disabledInfo = `${this.msgLit(`lion-calendar:beforeDisabledDate`, { params: this.__getSelectableDateRange().earliestSelectableDate })}`;
     }
-
     if (this.maxDate && normalizeDateTime(day.date) > normalizeDateTime(this.maxDate)) {
       day.disabled = true;
-      // TODO: turn this into a translated string
-      day.disabledInfo = `This date is unavailable. Latest date to select is ${
-        this.__getSelectableDateRange().latestSelectableDate
-      }. Please select another date.`;
-    }
-
-    if (day.disabled) {
-      // TODO: turn this into a translated string
-      day.disabledInfo = `This date is unavailable. Please select another date`;
+      day.disabledInfo = `${this.msgLit(`lion-calendar:afterDisabledDate`, { params: this.__getSelectableDateRange().latestSelectableDate })}`;
     }
 
     return this.dayPreprocessor(day);

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

@@ -896,6 +896,94 @@ describe('<lion-calendar>', () => {
             'Next year, December 2001',
           );
         });
+
+        it('disables a date with disableDates function provide a correct message', async () => {
+          /** @param {Date} d */
+          const disable15th = d => d.getDate() === 15;
+          const el = await fixture(html`
+            <lion-calendar
+              .selectedDate="${new Date('2000/12/01')}"
+              .disableDates=${disable15th}
+            ></lion-calendar>
+          `);
+          const elObj = new CalendarObject(el);
+          expect(elObj.getDayObj(15).isDisabled).to.equal(true);
+          expect(elObj.getDayObj(15).el).dom.to.equal(`
+            <div
+              class="calendar__day-button"
+              aria-disabled="true"
+              role="button"
+              tabindex="-1"
+              aria-pressed="false"
+              past=""
+              current-month="">
+              <span class="calendar__day-button__text">
+                15
+              </span>
+              <span class="u-sr-only">
+                December 2000 Friday This date is unavailable. Please choose another date.
+              </span>
+            </div>
+          `);
+        });
+
+        it('disables days before "minDate" property provide a correct message', async () => {
+          const el = await fixture(html`
+            <lion-calendar
+              .selectedDate="${new Date('2000/12/31')}"
+              .minDate="${new Date('2000/12/09')}"
+            >
+            </lion-calendar>
+          `);
+          const elObj = new CalendarObject(el);
+          expect(elObj.getDayObj(1).isDisabled).to.equal(true);
+          expect(elObj.getDayObj(1).el).dom.to.equal(`
+            <div
+              class="calendar__day-button"
+              aria-disabled="true"
+              role="button"
+              tabindex="-1"
+              aria-pressed="false"
+              past=""
+              current-month="">
+              <span class="calendar__day-button__text">
+                1
+              </span>
+              <span class="u-sr-only">
+                December 2000 Friday This date is unavailable. Earliest available date is 9 December 2000. Please choose another date.
+              </span>
+            </div>
+          `);
+        });
+
+        it('disables days after "maxDate" property provide a correct message', async () => {
+          const el = await fixture(html`
+            <lion-calendar
+              .selectedDate="${new Date('2000/12/31')}"
+              .maxDate="${new Date('2000/12/09')}"
+            >
+            </lion-calendar>
+          `);
+          const elObj = new CalendarObject(el);
+          expect(elObj.getDayObj(30).isDisabled).to.equal(true);
+          expect(elObj.getDayObj(30).el).dom.to.equal(`
+            <div
+              class="calendar__day-button"
+              aria-disabled="true"
+              role="button"
+              tabindex="-1"
+              aria-pressed="false"
+              past=""
+              current-month="">
+              <span class="calendar__day-button__text">
+                30
+              </span>
+              <span class="u-sr-only">
+                December 2000 Saturday This date is unavailable. Latest available date is 9 December 2000. Please choose another date.
+              </span>
+            </div>
+          `);
+        });
       });
     });
   });

package/components/calendar/translations/bg.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Предишен месец',
   nextFullYear: 'Следващ година',
   previousFullYear: 'Предишен година',
+  defaultDisabledDate: 'Тази дата не е налична. Моля, изберете друга дата.',
+  beforeDisabledDate:
+    'Тази дата не е налична. Най-ранната налична да е {params}. Моля, изберете друга дата.',
+  afterDisabledDate:
+    'Тази дата не е налична. Най-късната налична дата е {params}. Моля, изберете друга дата.',
 };

package/components/calendar/translations/cs.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Předchozí měsíc',
   nextFullYear: 'Příští rok',
   previousFullYear: 'Předchozí rok',
+  defaultDisabledDate: 'Toto datum není k dispozici. Vyberte jiné datum.',
+  beforeDisabledDate:
+    'Toto datum není k dispozici. Nejbližší dostupné datum je {params}. Vyberte jiné datum.',
+  afterDisabledDate:
+    'Toto datum není k dispozici. Poslední dostupné datum je {params}. Vyberte jiné datum.',
 };

package/components/calendar/translations/de.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Vorheriger Monat',
   nextFullYear: 'Nächstes Jahr',
   previousFullYear: 'Vorheriges Jahr',
+  defaultDisabledDate: 'Dieses Datum ist nicht verfügbar. Bitte wählen Sie ein anderes Datum aus.',
+  beforeDisabledDate:
+    'Dieses Datum ist nicht verfügbar. Das früheste verfügbare Datum ist {params}. Bitte wählen Sie ein anderes Datum aus.',
+  afterDisabledDate:
+    'Dieses Datum ist nicht verfügbar. Das späteste verfügbare Datum ist {params}. Bitte wählen Sie ein anderes Datum aus.',
 };

package/components/calendar/translations/en.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Previous month',
   nextFullYear: 'Next year',
   previousFullYear: 'Previous year',
+  defaultDisabledDate: 'This date is unavailable. Please choose another date.',
+  beforeDisabledDate:
+    'This date is unavailable. Earliest available date is {params}. Please choose another date.',
+  afterDisabledDate:
+    'This date is unavailable. Latest available date is {params}. Please choose another date.',
 };

package/components/calendar/translations/es.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Mes anterior',
   nextFullYear: 'Año siguiente',
   previousFullYear: 'Año anterior',
+  defaultDisabledDate: 'Esta fecha no está disponible. Elija otra.',
+  beforeDisabledDate:
+    'Esta fecha no está disponible. La fecha más próxima disponible es {params}. Elija otra.',
+  afterDisabledDate:
+    'Esta fecha no está disponible. La fecha más lejana disponible es {params}. Elija otra.',
 };

package/components/calendar/translations/fr.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Mois précédent',
   nextFullYear: 'An prochain',
   previousFullYear: 'An précédent',
+  defaultDisabledDate: "Cette date n'est pas disponible. Veuillez choisir une autre date.",
+  beforeDisabledDate:
+    "Cette date n'est pas disponible. La prochaine date disponible est la suivante : {params}. Veuillez choisir une autre date.",
+  afterDisabledDate:
+    "Cette date n'est pas disponible. La dernière date disponible est la suivante : {params}. Veuillez choisir une autre date.",
 };

package/components/calendar/translations/hu.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Előző hónap',
   nextFullYear: 'Következő év',
   previousFullYear: 'Előző év',
+  defaultDisabledDate: 'Ez a dátum nem választható. Válasszon másik dátumot.',
+  beforeDisabledDate:
+    'Ez a dátum nem választható. A legkorábbi elérhető dátum {params}. Válasszon másik dátumot.',
+  afterDisabledDate:
+    'Ez a dátum nem választható. A legkésőbbi elérhető dátum {params}. Válasszon másik dátumot.',
 };

package/components/calendar/translations/it.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Mese precedente',
   nextFullYear: 'Anno successivo',
   previousFullYear: 'Anno precedente',
+  defaultDisabledDate: "Questa data non è disponibile. Scegline un'altra.",
+  beforeDisabledDate:
+    "Questa data non è disponibile. La prima data disponibile è {params}. Scegline un'altra.",
+  afterDisabledDate:
+    "Questa data non è disponibile. L'ultima data disponibile è {params}. Scegline un'altra.",
 };

package/components/calendar/translations/nl.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Vorige maand',
   nextFullYear: 'Volgend jaar',
   previousFullYear: 'Vorig jaar',
+  defaultDisabledDate: 'Deze datum is niet beschikbaar. Kies een andere datum.',
+  beforeDisabledDate:
+    'Deze datum is niet beschikbaar. Vroegste beschikbare datum is {params}. Kies een andere datum.',
+  afterDisabledDate:
+    'Deze datum is niet beschikbaar. Laatste beschikbare datum is {params}. Kies een andere datum.',
 };

package/components/calendar/translations/pl.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Poprzedni miesiąc',
   nextFullYear: 'Następny rok',
   previousFullYear: 'Poprzedni rok',
+  defaultDisabledDate: 'Ta data jest niedostępna. Wybierz inną datę.',
+  beforeDisabledDate:
+    'Ta data jest niedostępna. Najwcześniejsza dostępna data to {params}. Wybierz inną datę.',
+  afterDisabledDate:
+    'Ta data jest niedostępna. Najpóźniejsza dostępna data to {params}. Wybierz inną datę.',
 };

package/components/calendar/translations/ro.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Luna anterioară',
   nextFullYear: 'An viitoare',
   previousFullYear: 'An anterioară',
+  defaultDisabledDate: 'Această dată nu este disponibilă. Vă rugăm să alegeți altă dată.',
+  beforeDisabledDate:
+    'Această dată nu este disponibilă. Cea mai apropiată dată disponibilă este {params}. Vă rugăm să alegeți altă dată.',
+  afterDisabledDate:
+    'Această dată nu este disponibilă. Ultima dată disponibilă este {params}. Vă rugăm să alegeți altă dată.',
 };

package/components/calendar/translations/ru.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Предыдущий месяц',
   nextFullYear: 'Следующий год',
   previousFullYear: 'Предыдущий год',
+  defaultDisabledDate: 'Эта дата недоступна. Выберите другую дату.',
+  beforeDisabledDate:
+    'Эта дата недоступна. Самая ранняя доступная дата — {params}. Выберите другую дату.',
+  afterDisabledDate:
+    'Эта дата недоступна. Самая поздняя доступная дата — {params}. Выберите другую дату.',
 };

package/components/calendar/translations/sk.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Predchádzajúci mesiac',
   nextFullYear: 'Nasledujúci rok',
   previousFullYear: 'Predchádzajúci rok',
+  defaultDisabledDate: 'Tento dátum nie je k dispozícii. Vyberte iný dátum.',
+  beforeDisabledDate:
+    'Tento dátum nie je k dispozícii. Najbližší možný dátum je {params}. Vyberte iný dátum.',
+  afterDisabledDate:
+    'Tento dátum nie je k dispozícii. Posledný možný dátum je {params}. Vyberte iný dátum.',
 };

package/components/calendar/translations/uk.js

@@ -3,4 +3,7 @@ export default {
   previousMonth: 'Попередній місяць',
   nextFullYear: 'Наступний року',
   previousFullYear: 'Попередній року',
+  defaultDisabledDate: 'Ця дата недоступна. Виберіть іншу дату.',
+  beforeDisabledDate: 'Ця дата недоступна. Найближча доступна дата {params}. Виберіть іншу дату.',
+  afterDisabledDate: 'Ця дата недоступна. Остання доступна дата {params}. Виберіть іншу дату.',
 };

package/components/calendar/translations/zh.js

@@ -3,4 +3,7 @@ export default {
   previousMonth: '前一个月',
   nextFullYear: '明一年',
   previousFullYear: '前一年',
+  defaultDisabledDate: '此日期不可选。请选择另一个日期。',
+  beforeDisabledDate: '此日期不可选。最早可选日期为 {params}。请选择另一个日期。',
+  afterDisabledDate: '此日期不可选。最晚可选日期为 {params}。请选择另一个日期。',
 };

package/components/core/src/SlotMixin.js

@@ -182,6 +182,21 @@ const SlotMixinImplementation = superclass =>
       // Providing all options breaks Safari: we keep host and creationScope
       const { creationScope, host } = this.renderOptions;
       render(template, rerenderTarget, { creationScope, host, renderBefore });
+
+      // Assume we had this config:
+      // `'my-slot': () => ({ template: myBool ? html`<div id=a></div>` : html`<span id=b></span>`, renderAsDirectHostChild: true })`
+      // If myBool started as true, <div id=a></div> would be rendered in first render above, a slot would be applied,
+      // resulting in <div id=a slot=my-slot></div>
+      // However, when myBool changes to false, the <span id=b></span> would be rendered as root instead...
+      // We need to make sure that this "replaced root" gets the slot applied as well => <span id=b slot=my-slot></span>
+      const isRerenderingRootOfTemplate =
+        renderAsDirectHostChild &&
+        renderBefore.previousElementSibling &&
+        !renderBefore.previousElementSibling.slot;
+
+      if (isRerenderingRootOfTemplate) {
+        renderBefore.previousElementSibling.slot = slotName;
+      }
     }
 
     /**

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

@@ -345,6 +345,56 @@ describe('SlotMixin', () => {
       expect(isActiveElement(el._focusableNode._buttonNode, { deep: true })).to.be.true;
     });
 
+    it('allows for switching template root in slot as a direct child', async () => {
+      const tagName = defineCE(
+        // @ts-expect-error
+        class extends SlotMixin(LitElement) {
+          static properties = { isSwitched: Boolean };
+
+          constructor() {
+            super();
+            this.isSwitched = false;
+          }
+
+          get slots() {
+            return {
+              ...super.slots,
+              'my-root-switcher-node': () => ({
+                template: this.isSwitched
+                  ? html`<div id="is-switched"></div>`
+                  : html`<span id="is-not-switched"> </span> `,
+                renderAsDirectHostChild: true,
+              }),
+            };
+          }
+
+          render() {
+            return html`<slot name="my-root-switcher-node"></slot>`;
+          }
+
+          get _myRootSwitcherNode() {
+            return /** @type HTMLSpanElement */ (
+              Array.from(this.children).find(elm => elm.slot === 'my-root-switcher-node')
+            );
+          }
+        },
+      );
+      const el = /** @type {* & SlotHost} */ (await fixture(`<${tagName}></${tagName}>`));
+
+      expect(el._myRootSwitcherNode.id).to.equal('is-not-switched');
+      expect(el.innerHTML).to.equal(
+        `<!--_start_slot_my-root-switcher-node_--><!----><span id="is-not-switched" slot="my-root-switcher-node"> </span> <!--_end_slot_my-root-switcher-node_-->`,
+      );
+
+      el.isSwitched = true;
+      await el.updateComplete;
+
+      expect(el._myRootSwitcherNode.id).to.equal('is-switched');
+      expect(el.innerHTML).to.equal(
+        `<!--_start_slot_my-root-switcher-node_--><!----><div id="is-switched" slot="my-root-switcher-node"></div><!--_end_slot_my-root-switcher-node_-->`,
+      );
+    });
+
     describe('firstRenderOnConnected (for backwards compatibility)', () => {
       it('does render on connected when firstRenderOnConnected:true', async () => {
         // Start with elem that does not render on connectedCallback

package/components/dialog/src/LionDialog.js

@@ -2,6 +2,18 @@ import { html, LitElement } from 'lit';
 import { OverlayMixin, withModalDialogConfig } from '@lion/ui/overlays.js';
 
 export class LionDialog extends OverlayMixin(LitElement) {
+  /** @type {any} */
+  static get properties() {
+    return {
+      isAlertDialog: { type: Boolean, attribute: 'is-alert-dialog' },
+    };
+  }
+
+  constructor() {
+    super();
+    this.isAlertDialog = false;
+  }
+
   /**
    * @protected
    */
@@ -9,6 +21,7 @@ export class LionDialog extends OverlayMixin(LitElement) {
   _defineOverlayConfig() {
     return {
       ...withModalDialogConfig(),
+      isAlertDialog: this.isAlertDialog,
     };
   }
 

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

@@ -170,6 +170,27 @@ describe('lion-dialog', () => {
   });
 
   describe('Accessibility', () => {
+    it('passes a11y audit', async () => {
+      const el = await fixture(html`
+        <lion-dialog>
+          <button slot="invoker">Invoker</button>
+          <div slot="content" class="dialog" aria-label="Dialog">Hey there</div>
+        </lion-dialog>
+      `);
+      await expect(el).to.be.accessible();
+    });
+
+    it('passes a11y audit when opened', async () => {
+      const el = await fixture(html`
+        <lion-dialog opened>
+          <button slot="invoker">Invoker</button>
+          <div slot="content" class="dialog" aria-label="Dialog">Hey there</div>
+        </lion-dialog>
+      `);
+      // error expected since we put role="none" on the dialog itself, which is valid but not recognized by Axe
+      await expect(el).to.be.accessible({ ignoredRules: ['aria-allowed-role'] });
+    });
+
     it('does not add [aria-expanded] to invoker button', async () => {
       const el = await fixture(
         html` <lion-dialog>
@@ -187,6 +208,41 @@ describe('lion-dialog', () => {
       await aTimeout(0);
       expect(invokerButton.getAttribute('aria-expanded')).to.equal(null);
     });
+
+    it('has role="dialog" by default', async () => {
+      const el = await fixture(
+        html` <lion-dialog>
+          <div slot="content" class="dialog">Hey there</div>
+          <button slot="invoker">Popup button</button>
+        </lion-dialog>`,
+      );
+      const contentNode = /** @type {HTMLElement} */ (el.querySelector('[slot="content"]'));
+
+      expect(contentNode.getAttribute('role')).to.equal('dialog');
+    });
+
+    it('has role="alertdialog" by when "is-alert-dialog" is set', async () => {
+      const el = await fixture(
+        html` <lion-dialog is-alert-dialog>
+          <div slot="content" class="dialog">Hey there</div>
+          <button slot="invoker">Popup button</button>
+        </lion-dialog>`,
+      );
+      const contentNode = /** @type {HTMLElement} */ (el.querySelector('[slot="content"]'));
+
+      expect(contentNode.getAttribute('role')).to.equal('alertdialog');
+    });
+
+    it('passes a11y audit when opened and role="alertdialog"', async () => {
+      const el = await fixture(html`
+        <lion-dialog opened is-alert-dialog>
+          <button slot="invoker">Invoker</button>
+          <div slot="content" class="dialog" aria-label="Dialog">Hey there</div>
+        </lion-dialog>
+      `);
+      // error expected since we put role="none" on the dialog itself, which is valid but not recognized by Axe
+      await expect(el).to.be.accessible({ ignoredRules: ['aria-allowed-role'] });
+    });
   });
 
   describe('Edge cases', () => {

package/components/form-core/src/choice-group/ChoiceInputMixin.js

@@ -171,7 +171,9 @@ const ChoiceInputMixinImplementation = superclass =>
     render() {
       return html`
         <slot name="input"></slot>
-        <div class="choice-field__graphic-container">${this._choiceGraphicTemplate()}</div>
+        <div class="choice-field__graphic-container" aria-hidden="true">
+          ${this._choiceGraphicTemplate()}
+        </div>
         <div class="choice-field__label">
           <slot name="label"></slot>
         </div>

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

@@ -131,7 +131,7 @@ describe('<lion-input-amount>', () => {
     expect(_inputNode.value).to.equal('100.12');
   });
 
-  it('adjusts formats with locale when formatOptions.mode is "user-edited"', async () => {
+  it('formats with locale when formatOptions.mode is "user-edited" and value has three decimal places', async () => {
     const el = /** @type {LionInputAmount} */ (
       await fixture(
         html`<lion-input-amount
@@ -154,6 +154,14 @@ describe('<lion-input-amount>', () => {
     expect(el.modelValue).to.equal(123456);
     expect(el.formattedValue).to.equal('123.456,00');
 
+    // When editing an already existing value, we interpet the separators as they are.
+    // However, only when the decimal places are 3 or more.
+    mimicUserInput(el, '123.456.00');
+    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)
@@ -162,6 +170,45 @@ describe('<lion-input-amount>', () => {
     expect(formatterSpy.lastCall.args[1]?.mode).to.equal('auto');
   });
 
+  it('formats with heuristic when formatOptions.mode is "user-edited" and value has two decimal places', async () => {
+    const el = /** @type {LionInputAmount} */ (
+      await fixture(
+        html`<lion-input-amount
+          .modelValue=${64}
+          currency="EUR"
+          .formatOptions="${{ locale: 'en-GB' }}"
+        ></lion-input-amount>`,
+      )
+    );
+    const parserSpy = sinon.spy(el, 'parser');
+    const formatterSpy = sinon.spy(el, 'formatter');
+
+    expect(el.formattedValue).to.equal('64.00');
+    // @ts-expect-error [allow-protected] in test
+    expect(el._inputNode.value).to.equal('64.00');
+
+    // When editing an already existing value, we interpret the separators based on decimal places when there's 1 or
+    // less separator in total (otherwise we would accidentally multiply or divide by 1000)
+    mimicUserInput(el, '64,00');
+    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(64);
+    expect(el.formattedValue).to.equal('64.00');
+
+    mimicUserInput(el, '64,0');
+    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(64);
+    expect(el.formattedValue).to.equal('64.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

@@ -69,6 +69,6 @@ describe('parseAmount()', async () => {
     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);
+    ).to.equal(123456.78);
   });
 });

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

@@ -181,7 +181,7 @@ export class LionInputTelDropdown extends LionInputTel {
 
         return {
           template: templates.dropdown(this._templateDataDropdown),
-          renderAsDirectHostChild: Boolean,
+          renderAsDirectHostChild: true,
         };
       },
     };

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

@@ -20,25 +20,34 @@ import { getDecimalSeparator } from './getDecimalSeparator.js';
  * @return {string} unparseable|withLocale|heuristic
  */
 function getParseMode(value, { mode = 'auto', viewValueStates } = {}) {
-  const separators = value.match(/[., ]/g);
+  const separatorsRe = /[., ]/g;
+  const separators = value.match(separatorsRe) || [];
+  // @ts-expect-error [wait-for-platform-types]
+  const decimalPlaces = (value.split(separatorsRe) || []).at(-1).length;
+  const isCurViewFormattedAndUserIsEditing =
+    viewValueStates?.includes('formatted') && mode === 'user-edited';
 
   // 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';
+  // For best UX, we stick with this locale. However, we only do this when the user has
+  // entered at least 3 decimal places.
+  const shouldUseCurLocale = isCurViewFormattedAndUserIsEditing && decimalPlaces > 2;
 
-  if (!separators || shouldAlignWithExistingSeparators) {
+  const shouldUseLocale =
+    shouldUseCurLocale ||
+    !separators.length ||
+    (mode === 'auto' && separators.length === 1 && decimalPlaces >= 3);
+  if (shouldUseLocale) {
     return 'withLocale';
   }
-  if (mode === 'auto' && separators.length === 1) {
-    const decimalLength = value.split(`${separators}`)[1].length;
-    if (decimalLength >= 3) {
-      return 'withLocale';
-    }
-  }
-  if (separators.length === 1 || separators[0] !== separators[separators.length - 1]) {
+
+  const shouldUseHeuristic =
+    (isCurViewFormattedAndUserIsEditing && decimalPlaces <= 2) ||
+    separators.length === 1 ||
+    separators[0] !== separators[separators.length - 1];
+  if (shouldUseHeuristic) {
     return 'heuristic';
   }
+
   return 'unparseable';
 }
 

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

@@ -82,7 +82,7 @@ describe('parseNumber()', () => {
     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);
+    ).to.equal(123456.78);
   });
 
   it('detects separators unparseable when there are 2 same ones e.g. 1.234.56', () => {