@lion/ui 0.7.6 → 0.7.8

package/README.md

@@ -47,8 +47,7 @@ They provide an unopinionated, white-label layer that can be extended to your ow
 - **Modern Code:** Lion is distributes as pure es modules.
 - **Exposes functions/classes and Web Components:** Ships a functionality in it's most appropriate form.
 
-> Note: Our demos may look a little bland but that is on purpose. They only come with functional stylings.
-> This makes sense as the main use case is to extend those components and if you do you do not want to override existing stylings.
+> Note: Our demo examples might look simple and not very stylish. This is on purpose. They are designed to be basic so you can easily add your own styles to them to match your intended design, without dealing with styles that are already there.
 
 <p align="center">
   <a href="https://lion-web.netlify.app/guides/"><strong>Explore the Lion Guides&nbsp;&nbsp;▶</strong></a>

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

@@ -52,7 +52,9 @@ export function LionButtonSuite({ klass = LionButton } = {}) {
 
     describe('Active', () => {
       it('updates "active" attribute on host when mousedown/mouseup on button', async () => {
-        const el = /** @type {LionButton} */ (await fixture(html`<${tagButton}>foo</${tagButton}`));
+        const el = /** @type {LionButton} */ (
+          await fixture(html`<${tagButton}>foo</${tagButton}>`)
+        );
         el.dispatchEvent(new Event('mousedown'));
 
         expect(el.active).to.be.true;

package/components/calendar/src/LionCalendar.js

@@ -270,11 +270,6 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
 
     this.__connectedCallbackDone = true;
 
-    this.__calculateInitialCentralDate();
-
-    // setup data for initial render
-    this.__data = this.__createData();
-
     /**
      * This logic needs to happen on firstUpdated, but every time the DOM node is moved as well
      * since firstUpdated only runs once, this logic is moved here, but after updateComplete
@@ -305,6 +300,13 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     }
   }
 
+  firstUpdated() {
+    this.__calculateInitialCentralDate();
+
+    // setup data for initial render
+    this.__data = this.__createData();
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this.__contentWrapperElement) {
@@ -372,6 +374,8 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     if (this.centralDate === this.__today && this.selectedDate) {
       // initialized with selectedDate only if user didn't provide another one
       this.centralDate = this.selectedDate;
+    } else if (!this.__isEnabledDate(this.centralDate)) {
+      this.centralDate = this.findNearestEnabledDate(this.centralDate);
     }
     /** @type {Date} */
     this.__initialCentralDate = this.centralDate;

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

@@ -465,9 +465,8 @@ describe('<lion-calendar>', () => {
         `);
 
         clock.restore();
-        expect(isSameDate(el.centralDate, new Date('2019/06/03')), 'central date').to.be.true;
-        expect(isSameDate(elSetting.centralDate, new Date('2019/07/03')), 'central date').to.be
-          .true;
+        expect(isSameDate(el.centralDate, new Date('2019/07/03'))).to.be.true;
+        expect(isSameDate(elSetting.centralDate, new Date('2019/07/03'))).to.be.true;
       });
 
       describe('Normalization', () => {
@@ -573,7 +572,7 @@ describe('<lion-calendar>', () => {
               .disableDates="${/** @param {Date} d */ d => d.getDate() === 15}"
             ></lion-calendar>
           `);
-          el.focusDate(el.findNearestEnabledDate());
+          el.focusDate(el.findNearestEnabledDate(new Date()));
           await el.updateComplete;
 
           const elObj = new CalendarObject(el);
@@ -590,7 +589,7 @@ describe('<lion-calendar>', () => {
               .disableDates="${/** @param {Date} d */ d => d.getFullYear() > 1998}"
             ></lion-calendar>
           `);
-          el.focusDate(el.findNearestEnabledDate());
+          el.focusDate(el.findNearestEnabledDate(new Date()));
           await el.updateComplete;
 
           expect(el.centralDate.getFullYear()).to.equal(1998);
@@ -609,7 +608,7 @@ describe('<lion-calendar>', () => {
             ></lion-calendar>
           `);
 
-          el.focusDate(el.findNearestEnabledDate());
+          el.focusDate(el.findNearestEnabledDate(new Date()));
           await el.updateComplete;
 
           expect(el.centralDate.getFullYear()).to.equal(2002);
@@ -1262,6 +1261,34 @@ describe('<lion-calendar>', () => {
 
           clock.restore();
         });
+
+        it('is nearest to today if no selected date is available and today is disabled', async () => {
+          const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
+
+          const calWithMin = await fixture(
+            html`<lion-calendar .minDate=${new Date('2000/12/25')}></lion-calendar>`,
+          );
+          const calObjWithMin = new CalendarObject(calWithMin);
+          expect(calObjWithMin.centralDayObj?.monthday).to.equal(25);
+
+          const calWithMax = await fixture(
+            html`<lion-calendar .maxDate=${new Date('2000/12/05')}></lion-calendar>`,
+          );
+          const calObjWithMax = new CalendarObject(calWithMax);
+          expect(calObjWithMax.centralDayObj?.monthday).to.equal(5);
+
+          const calWithDisabled = await fixture(
+            html`<lion-calendar
+              .disableDates=${/** @param {Date} date */ date => date.getDate() === 15}
+            ></lion-calendar>`,
+          );
+          await calWithDisabled.updateComplete;
+
+          const calObjWithDisabled = new CalendarObject(calWithDisabled);
+          expect(calObjWithDisabled.centralDayObj?.monthday).to.equal(16);
+
+          clock.restore();
+        });
       });
 
       /**

package/components/combobox/src/LionCombobox.js

@@ -22,6 +22,7 @@ const matchA11ySpanReverseFns = new WeakMap();
  * @typedef {import('@lion/ui/types/form-core.js').ChoiceInputHost} ChoiceInputHost
  * @typedef {import('@lion/ui/types/form-core.js').FormControlHost} FormControlHost
  * @typedef {import('../types/SelectionDisplay.js').SelectionDisplay} SelectionDisplay
+ * @typedef {LionOption & { onFilterUnmatch?:function; onFilterMatch?:function }} OptionWithFilterFn
  */
 
 /**
@@ -201,8 +202,30 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
 
   reset() {
     super.reset();
-    // @ts-ignore _initialModelValue comes from ListboxMixin
-    this.value = this._initialModelValue;
+    if (!this.multipleChoice) {
+      // @ts-ignore _initialModelValue comes from ListboxMixin
+      this.value = this._initialModelValue;
+    }
+    this._resetListboxOptions();
+  }
+
+  /**
+   * @protected
+   */
+  _resetListboxOptions() {
+    this.formElements.forEach((/** @type {OptionWithFilterFn} */ option, idx) => {
+      this._unhighlightMatchedOption(option);
+      if (!this.showAllOnEmpty || !this.opened) {
+        // eslint-disable-next-line no-param-reassign
+        option.style.display = 'none';
+      } else {
+        // eslint-disable-next-line no-param-reassign
+        option.style.display = '';
+        option.setAttribute('aria-posinset', `${idx + 1}`);
+        option.setAttribute('aria-setsize', `${this.formElements.length}`);
+        option.removeAttribute('aria-hidden');
+      }
+    });
   }
 
   /**
@@ -704,11 +727,13 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    */
   _listboxOnClick(ev) {
     super._listboxOnClick(ev);
-
     this._inputNode.focus();
     if (!this.multipleChoice) {
       this.activeIndex = -1;
       this.opened = false;
+    } else {
+      this._inputNode.value = '';
+      this._resetListboxOptions();
     }
   }
 
@@ -897,7 +922,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
     const autoselect = this._autoSelectCondition();
     const noFilter = this.autocomplete === 'inline' || this.autocomplete === 'none';
 
-    /** @typedef {LionOption & { onFilterUnmatch?:function, onFilterMatch?:function }} OptionWithFilterFn */
     this.formElements.forEach((/** @type {OptionWithFilterFn} */ option, i) => {
       // [1]. Decide whether option should be shown
       const matches = this.matchCondition(option, curValue);
@@ -983,7 +1007,7 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
 
     // [8]. These values will help computing autofill intentions next autocomplete cycle
     this.__prevCboxValueNonSelected = curValue;
-    // See test 'computation of "user intends autofill" works correctly afer autofill'
+    // See test 'computation of "user intends autofill" works correctly after autofill'
     this.__prevCboxValue = this._inputNode.value;
     this.__hadSelectionLastAutofill =
       this._inputNode.value.length !== this._inputNode.selectionStart;
@@ -1120,16 +1144,16 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
           ev.preventDefault();
 
           this.modelValue = this.parser([...this.modelValue, this._inputNode.value]);
-
           this._inputNode.value = '';
           this.opened = false;
         } else {
           super._listboxOnKeyDown(ev);
-          // TODO: should we clear the input value here when allowCustomChoice is false?
-          // For now, we don't...
+          this._resetListboxOptions();
         }
         if (!this.multipleChoice) {
           this.opened = false;
+        } else {
+          this._inputNode.value = '';
         }
         break;
       default: {
@@ -1168,7 +1192,7 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
         .filter(option => diff.includes(option.choiceValue))
         .map(option => this._getTextboxValueFromOption(option))
         .join(' ');
-      this._setTextboxValue(newValue); // or last selected value?
+      this._setTextboxValue(newValue);
     }
   }
 

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

@@ -81,6 +81,54 @@ describe('lion-combobox', () => {
       await performChecks();
     });
 
+    it('hides all options on reset()', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo">
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      const options = el.formElements;
+      const visibleOptions = () => options.filter(o => o.style.display !== 'none');
+
+      mimicUserTyping(el, 'cha');
+      await el.updateComplete;
+      expect(visibleOptions().length).to.equal(1);
+      el.reset();
+      await el.updateComplete;
+      expect(visibleOptions().length).to.equal(0);
+    });
+
+    it('shows all options on reset() when showAllOnEmpty is set to true and overlay was open', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" show-all-on-empty>
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      const options = el.formElements;
+      const visibleOptions = () => options.filter(o => o.getAttribute('aria-hidden') !== 'true');
+
+      mimicUserTyping(el, 'cha');
+      await el.updateComplete;
+      expect(visibleOptions().length).to.equal(1);
+      expect(el.opened).to.be.true;
+
+      el.reset();
+      await el.updateComplete;
+      expect(visibleOptions().length).to.equal(4);
+    });
+
     it('hides listbox on click/enter (when multiple-choice is false)', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
@@ -467,13 +515,12 @@ describe('lion-combobox', () => {
       mimicUserTyping(el, 'a');
       await el.updateComplete;
 
-      const visibleOptions = options.filter(o => o.style.display !== 'none');
-      expect(visibleOptions.length).to.equal(3, 'after input');
+      const visibleOptions = () => options.filter(o => o.style.display !== 'none');
+      expect(visibleOptions().length).to.equal(3, 'after input');
 
       el.clear();
       await el.updateComplete;
-      const visibleOptions2 = options.filter(o => o.style.display !== 'none');
-      expect(visibleOptions2.length).to.equal(0, 'after clear');
+      expect(visibleOptions().length).to.equal(0, 'after clear');
     });
 
     it('resets modelValue and textbox value on reset()', async () => {
@@ -508,7 +555,7 @@ describe('lion-combobox', () => {
       el2.reset();
       expect(el2.modelValue).to.deep.equal(['Artichoke']);
       // @ts-ignore [allow-protected] in test
-      expect(el2._inputNode.value).to.equal('Artichoke');
+      expect(el2._inputNode.value).to.equal('');
     });
 
     it('syncs textbox to modelValue', async () => {
@@ -735,7 +782,7 @@ describe('lion-combobox', () => {
       await el.updateComplete;
     });
 
-    it('allows manyu custom selections when multi-choice when requireOptionMatch is false', async () => {
+    it('allows many custom selections when multi-choice when requireOptionMatch is false', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
           <lion-combobox
@@ -2088,7 +2135,7 @@ describe('lion-combobox', () => {
       });
     });
 
-    it('highlights first occcurence of matching option', async () => {
+    it('highlights first occurrence of matching option', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
           <lion-combobox name="foo" match-mode="all">
@@ -2170,6 +2217,28 @@ describe('lion-combobox', () => {
       );
     });
 
+    it('resets removes highlights on reset()', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" match-mode="all">
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+      const options = el.formElements;
+
+      mimicUserTyping(/** @type {LionCombobox} */ (el), 'c');
+
+      await el.updateComplete;
+      expect(options[0]).lightDom.to.equal(`<span aria-label="Artichoke">Arti<b>c</b>hoke</span>`);
+      el.reset();
+      await el.updateComplete;
+      expect(options[0]).lightDom.to.equal(`Artichoke`);
+    });
+
     it('synchronizes textbox when autocomplete is "inline" or "both"', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
@@ -3018,6 +3087,64 @@ describe('lion-combobox', () => {
       expect(el.opened).to.equal(true);
     });
 
+    it('clears textbox after selection of a new item on [enter]', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" multiple-choice>
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      const { _inputNode } = getComboboxMembers(el);
+      const options = el.formElements;
+
+      mimicUserTyping(el, 'art');
+      await el.updateComplete;
+
+      expect(el.opened).to.equal(true);
+      const visibleOptions = () => options.filter(o => o.style.display !== 'none');
+      expect(visibleOptions().length).to.equal(1);
+
+      // N.B. we do only trigger keydown here (and not mimicKeypress (both keyup and down)),
+      // because this closely mimics what happens in the browser
+      _inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+      expect(el.opened).to.equal(true);
+      expect(visibleOptions().length).to.equal(0);
+      expect(_inputNode.value).to.equal('');
+    });
+
+    it('clears textbox after selection of a new item on click', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" multiple-choice>
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      const { _inputNode } = getComboboxMembers(el);
+      const options = el.formElements;
+
+      mimicUserTyping(el, 'art');
+      await el.updateComplete;
+
+      expect(el.opened).to.equal(true);
+      const visibleOptions = () => options.filter(o => o.style.display !== 'none');
+      expect(visibleOptions().length).to.equal(1);
+
+      visibleOptions()[0].click();
+      expect(el.opened).to.equal(true);
+      expect(visibleOptions().length).to.equal(0);
+      expect(_inputNode.value).to.equal('');
+    });
+
     it('submits form on [Enter] when listbox is closed', async () => {
       const submitSpy = sinon.spy(e => e.preventDefault());
       const el = /** @type {HTMLFormElement}  */ (

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

@@ -1,5 +1,5 @@
 /* eslint-disable lit-a11y/no-autofocus */
-import { expect, fixture as _fixture, html, unsafeStatic } from '@open-wc/testing';
+import { expect, fixture as _fixture, html, unsafeStatic, aTimeout } from '@open-wc/testing';
 import { runOverlayMixinSuite } from '../../overlays/test-suites/OverlayMixin.suite.js';
 import '@lion/ui/define/lion-dialog.js';
 
@@ -127,5 +127,63 @@ describe('lion-dialog', () => {
       invokerNode.click();
       expect(document.activeElement).to.equal(invokerNode);
     });
+
+    it('opened-changed event should send detail object with opened state', async () => {
+      const el = /** @type {LionDialog} */ await fixture(html`
+        <lion-dialog .config=${{ trapsKeyboardFocus: false }}>
+          <button slot="invoker">invoker button</button>
+          <div slot="content">
+            <label for="myInput">Label</label>
+            <input id="myInput" autofocus />
+          </div>
+        </lion-dialog>
+      `);
+
+      el.setAttribute('opened', '');
+      expect(el.opened).to.be.true;
+
+      el.addEventListener('opened-changed', e => {
+        // @ts-expect-error [allow-detail-since-custom-event]
+        expect(e.detail.opened).to.be.false;
+      });
+      el.removeAttribute('opened');
+    });
+
+    it("opened-changed event's target should point to lion-dialog", async () => {
+      const el = /** @type {LionDialog} */ await fixture(html`
+        <lion-dialog .config=${{ trapsKeyboardFocus: false }}>
+          <button slot="invoker">invoker button</button>
+          <div slot="content">
+            <label for="myInput">Label</label>
+            <input id="myInput" autofocus />
+          </div>
+        </lion-dialog>
+      `);
+
+      el.addEventListener('opened-changed', e => {
+        expect(e.target).to.equal(el);
+      });
+      el.setAttribute('opened', '');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('does not add [aria-expanded] to invoker button', 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 invokerButton = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
+
+      expect(invokerButton.getAttribute('aria-expanded')).to.equal(null);
+      await invokerButton.click();
+      await aTimeout(0);
+      expect(invokerButton.getAttribute('aria-expanded')).to.equal(null);
+      await invokerButton.click();
+      await aTimeout(0);
+      expect(invokerButton.getAttribute('aria-expanded')).to.equal(null);
+    });
   });
 });

package/components/input-datepicker/src/LionInputDatepicker.js

@@ -102,23 +102,6 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     };
   }
 
-  _inputFormatter = new Intl.DateTimeFormat('en-US', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-  }).formatToParts;
-
-  /**
-   * @param {Date} date
-   */
-  // eslint-disable-next-line class-methods-use-this
-  _formatDate(date) {
-    const day = String(date.getDate()).padStart(2, '0');
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const year = String(date.getFullYear());
-    return `${day}/${month}/${year}`;
-  }
-
   get slots() {
     return {
       ...super.slots,
@@ -370,18 +353,15 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     if (this._syncOnUserSelect) {
       // Synchronize new selectedDate value to input
       this._isHandlingUserInput = true;
+      this._isHandlingCalendarUserInput = true;
 
       if (
         Array.isArray(this.__calendarDisableDates) &&
         this.__calendarDisableDates.includes(selectedDate)
       ) {
         // If the selected date is disabled, reset the values
-        this.value = '';
-        this.formattedValue = '';
         this.modelValue = undefined;
       } else {
-        this.formattedValue = this._formatDate(selectedDate);
-        this.value = this.formattedValue;
         this.modelValue = selectedDate;
       }
 

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

@@ -263,6 +263,33 @@ describe('<lion-input-datepicker>', () => {
       expect(el.value).to.equal('18/12/2019');
     });
 
+    describe('localization', () => {
+      /** @type {import('@lion/ui/localize.js').LocalizeManager} */ let localizeManager;
+
+      before(async () => {
+        const { getLocalizeManager } = await import('@lion/ui/localize-no-side-effects.js');
+        localizeManager = getLocalizeManager();
+      });
+
+      it('should update formatted value and value in accordance of localization upon model value update', async () => {
+        localizeManager.locale = 'nl-NL';
+
+        const el = await fixture(html`
+          <lion-input-datepicker .modelValue="${new Date('2022/12/30')}"></lion-input-datepicker>
+        `);
+
+        await el.updateComplete;
+
+        expect(el.formattedValue).to.equal('30-12-2022');
+        expect(el.value).to.equal('30-12-2022');
+      });
+
+      after(() => {
+        // @ts-ignore - using protected method to undo setting explict locale
+        localizeManager.locale = localizeManager._fallbackLocale;
+      });
+    });
+
     describe('Validators', () => {
       /**
        * Validators are the Application Developer facing API in <lion-input-datepicker>:
@@ -495,11 +522,11 @@ describe('<lion-input-datepicker>', () => {
       const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
       const elObj = new DatepickerInputObject(el);
 
-      expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal('false');
+      expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal(null);
       await elObj.openCalendar();
-      expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal('true');
+      expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal(null);
       await elObj.closeCalendar();
-      expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal('false');
+      expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal(null);
     });
 
     it('is accessible when closed', async () => {

package/components/input-file/src/FileHandle.js

@@ -53,7 +53,7 @@ export class FileHandle {
    */
   // eslint-disable-next-line class-methods-use-this
   _getFileNameExtension(fileName) {
-    return fileName.slice(fileName.lastIndexOf('.') + 1);
+    return fileName.slice(fileName.lastIndexOf('.'));
   }
 
   // TODO: seems to suggest upload is going on...

package/components/input-file/src/LionInputFile.js

@@ -232,7 +232,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     /** @type {string[]} */
     let allowedFileExtensions = [];
     if (this.accept) {
-      const acceptedFiles = this.accept.replace(/\s+/g, '').replace(/\.+/g, '').split(',');
+      const acceptedFiles = this.accept.replace(/\s+/g, '').split(',');
       allowedFileTypes = acceptedFiles.filter(acceptedFile => acceptedFile.includes('/'));
       allowedFileExtensions = acceptedFiles.filter(acceptedFile => !acceptedFile.includes('/'));
     }
@@ -692,8 +692,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
 
     if (allowedFileExtensions.length) {
       array = allowedFileExtensions;
-      // eslint-disable-next-line no-return-assign
-      array = array.map(item => (item = `.${item}`));
       lastItem = array.pop();
       arrayLength = array.length;
     } else if (allowedFileTypes.length) {

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

@@ -158,6 +158,17 @@ describe('lion-input-file', () => {
       })
     );
 
+    it('error should not be there when the file extensions are accepted', async () => {
+      const el = await fixture(html`
+        <lion-input-file label="Select" accept=".txt"></lion-input-file>
+      `);
+
+      mimicSelectFile(el, [fileWrongType]);
+      await el.updateComplete;
+
+      expect(el.hasFeedbackFor.length).to.equal(0);
+    });
+
     it('should not be added to the selected list', async () => {
       const el = await fixture(html`
         <lion-input-file label="Select" accept="text/plain"></lion-input-file>
@@ -343,20 +354,6 @@ describe('lion-input-file', () => {
         expect(error.message).to.equal('Please select a .jpg, .png or .pdf file with max 500MB.');
       });
     });
-
-    it('error message should add all file extensions to the validator message also works without dots "."', async () => {
-      const el = await fixture(html`
-        <lion-input-file label="Select" accept="jpg, png, pdf"></lion-input-file>
-      `);
-
-      mimicSelectFile(el, [fileWrongType]);
-      await el.updateComplete;
-
-      // @ts-expect-error [allow-protected-in-test]
-      el._selectedFilesMetaData[0].validationFeedback?.forEach(error => {
-        expect(error.message).to.equal('Please select a .jpg, .png or .pdf file with max 500MB.');
-      });
-    });
   });
 
   describe('invalid file sizes', async () => {