@lion/ui 0.18.0 → 0.19.1

package/components/calendar/src/LionCalendar.js

@@ -298,7 +298,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
       this.__contentWrapperElement.addEventListener('click', this.__boundClickDateDelegation);
       this.__contentWrapperElement.addEventListener('focus', this.__boundFocusDateDelegation);
       this.__contentWrapperElement.addEventListener('blur', this.__boundBlurDateDelegation);
-      this.__contentWrapperElement.addEventListener('keydown', this.__boundKeyboardNavigationEvent);
+      this.__contentWrapperElement.addEventListener('keyup', this.__boundKeyboardNavigationEvent);
       this.__eventsAdded = true;
     }
   }

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

@@ -4,8 +4,10 @@ import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 import { expect, fixture as _fixture } from '@open-wc/testing';
 import sinon from 'sinon';
 import '@lion/ui/define/lion-calendar.js';
+import { sendKeys } from '@web/test-runner-commands';
 import { isSameDate } from '@lion/ui/calendar.js';
 import { CalendarObject, DayObject } from '@lion/ui/calendar-test-helpers.js';
+import { runCalendarSuite } from '../test-suites/LionCalendar.suite.js';
 
 /**
  * @typedef {import('../src/LionCalendar.js').LionCalendar} LionCalendar
@@ -13,6 +15,16 @@ import { CalendarObject, DayObject } from '@lion/ui/calendar-test-helpers.js';
  */
 
 const fixture = /** @type {(arg: TemplateResult) => Promise<LionCalendar>} */ (_fixture);
+/**
+ * @param {HTMLElement} el
+ * @returns {HTMLElement | null | undefined}
+ */
+const getSelectedDateEl = el => el?.shadowRoot?.querySelector('.calendar__day-button[selected]');
+/**
+ * @param {HTMLElement} el
+ * @returns {void}
+ */
+const focusSelectedDate = el => getSelectedDateEl(el)?.focus();
 
 describe('<lion-calendar>', () => {
   const localizeManager = getLocalizeManager();
@@ -294,13 +306,14 @@ describe('<lion-calendar>', () => {
       `);
       const elObj = new CalendarObject(el);
 
-      el.__contentWrapperElement?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
+      focusSelectedDate(el);
+      await sendKeys({ press: 'ArrowLeft' });
       await el.updateComplete;
       expect(elObj.activeMonth).to.equal('October');
       expect(elObj.activeYear).to.equal('2000');
       expect(elObj.focusedDayObj?.monthday).to.equal(11);
 
-      el.__contentWrapperElement?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+      await sendKeys({ press: 'Enter' });
       await el.updateComplete;
       expect(isSameDate(/** @type {Date} */ (el.selectedDate), new Date('2000/10/12'))).to.be.true;
       expect(dateChangedSpy.called).to.equal(false);
@@ -1120,16 +1133,14 @@ describe('<lion-calendar>', () => {
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2001');
 
-          el.__contentWrapperElement?.dispatchEvent(
-            new KeyboardEvent('keydown', { key: 'PageUp' }),
-          );
+          focusSelectedDate(el);
+          await sendKeys({ press: 'PageUp' });
+
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('December');
           expect(elObj.activeYear).to.equal('2000');
 
-          el.__contentWrapperElement?.dispatchEvent(
-            new KeyboardEvent('keydown', { key: 'PageDown' }),
-          );
+          await sendKeys({ press: 'PageDown' });
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2001');
@@ -1139,20 +1150,36 @@ describe('<lion-calendar>', () => {
           const el = await fixture(html`
             <lion-calendar .selectedDate="${new Date('2001/01/02')}"></lion-calendar>
           `);
+          focusSelectedDate(el);
+
           const elObj = new CalendarObject(el);
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2001');
 
-          el.__contentWrapperElement?.dispatchEvent(
-            new KeyboardEvent('keydown', { key: 'PageDown', altKey: true }),
-          );
+          await sendKeys({
+            down: 'Alt',
+          });
+          await sendKeys({
+            press: 'PageDown',
+          });
+          await sendKeys({
+            up: 'Alt',
+          });
+
           await el.updateComplete;
+          focusSelectedDate(el);
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2002');
 
-          el.__contentWrapperElement?.dispatchEvent(
-            new KeyboardEvent('keydown', { key: 'PageUp', altKey: true }),
-          );
+          await sendKeys({
+            down: 'Alt',
+          });
+          await sendKeys({
+            press: 'PageUp',
+          });
+          await sendKeys({
+            up: 'Alt',
+          });
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2001');
@@ -1165,9 +1192,8 @@ describe('<lion-calendar>', () => {
             `);
             const elObj = new CalendarObject(el);
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowDown' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowDown' });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(2 + 7);
           });
@@ -1178,9 +1204,8 @@ describe('<lion-calendar>', () => {
             `);
             const elObj = new CalendarObject(el);
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowUp' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowUp' });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(26); // of month before
           });
@@ -1192,9 +1217,8 @@ describe('<lion-calendar>', () => {
             `);
             const elObj = new CalendarObject(el);
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowLeft' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowLeft' });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(12 - 1);
           });
@@ -1206,9 +1230,8 @@ describe('<lion-calendar>', () => {
             `);
             const elObj = new CalendarObject(el);
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowRight' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowRight' });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(12 + 1);
           });
@@ -1224,9 +1247,8 @@ describe('<lion-calendar>', () => {
             `);
             const elObj = new CalendarObject(el);
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowRight' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowRight' });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(3);
           });
@@ -1238,9 +1260,8 @@ describe('<lion-calendar>', () => {
             const elObj = new CalendarObject(el);
             expect(elObj.centralDayObj?.weekdayNameShort).to.equal('Sat');
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowRight' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowRight' });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(6);
             expect(elObj.focusedDayObj?.weekdayNameShort).to.equal('Sun');
@@ -1253,9 +1274,8 @@ describe('<lion-calendar>', () => {
             const elObj = new CalendarObject(el);
             expect(elObj.centralDayObj?.weekdayNameShort).to.equal('Sun');
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowLeft' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowLeft' });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(5);
             expect(elObj.focusedDayObj?.weekdayNameShort).to.equal('Sat');
@@ -1269,9 +1289,8 @@ describe('<lion-calendar>', () => {
             expect(elObj.activeMonth).to.equal('December');
             expect(elObj.activeYear).to.equal('2000');
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowRight' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowRight' });
             await el.updateComplete;
             expect(elObj.activeMonth).to.equal('January');
             expect(elObj.activeYear).to.equal('2001');
@@ -1286,9 +1305,8 @@ describe('<lion-calendar>', () => {
             expect(elObj.activeMonth).to.equal('January');
             expect(elObj.activeYear).to.equal('2001');
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowLeft' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowLeft' });
             await el.updateComplete;
             expect(elObj.activeMonth).to.equal('December');
             expect(elObj.activeYear).to.equal('2000');
@@ -1303,9 +1321,8 @@ describe('<lion-calendar>', () => {
             expect(elObj.activeMonth).to.equal('December');
             expect(elObj.activeYear).to.equal('2000');
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowDown' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowDown' });
             await el.updateComplete;
             expect(elObj.activeMonth).to.equal('January');
             expect(elObj.activeYear).to.equal('2001');
@@ -1320,9 +1337,8 @@ describe('<lion-calendar>', () => {
             expect(elObj.activeMonth).to.equal('January');
             expect(elObj.activeYear).to.equal('2001');
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowUp' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowUp' });
             await el.updateComplete;
             expect(elObj.activeMonth).to.equal('December');
             expect(elObj.activeYear).to.equal('2000');
@@ -1659,4 +1675,8 @@ describe('<lion-calendar>', () => {
       expect(el).not.to.be.displayed;
     });
   });
+
+  describe('Run suite', () => {
+    runCalendarSuite();
+  });
 });

package/components/calendar/test-suites/LionCalendar.suite.js

@@ -0,0 +1,79 @@
+import { LionCalendar } from '@lion/ui/calendar.js';
+import { expect, html, fixture, waitUntil, unsafeStatic, defineCE } from '@open-wc/testing';
+import sinon from 'sinon';
+import '@lion/ui/define/lion-calendar.js';
+import { sendKeys } from '@web/test-runner-commands';
+
+export function runCalendarSuite({ klass = LionCalendar } = {}) {
+  const tagStringCalendar = defineCE(class extends klass {});
+  const tagCalendar = unsafeStatic(tagStringCalendar);
+
+  it('should fire keyboard press events on keyup and not on keydown', async () => {
+    /**
+     * This test covers a corner case where `keydown`, `keyup`, and `focus` events happen across different elements.
+     *
+     * Setup:
+     * - There is a dialog invoker button that has a keyup handler.
+     * - The dialog invoker button gets focused (important!) and then opens the dialog on click.
+     * - The dialog contains lion-calendar.
+     * - When a date is selected, the dialog closes.
+     *
+     * Expected behavior:
+     * - The dialog invoker button's `keyup` handler should not run when a date is selected in the calendar.
+     *
+     * The problem:
+     * - Pressing Enter on a date is handled by `keydown` inside `lion-calendar`.
+     * - The dialog then closes on `user-selected-date-changed` event.
+     * - The browser automatically returns focus to the previously focused element (the dialog invoker button).
+     * - The keyup event then fires on the now-focused dialog invoker button, triggering its keyup
+     *     handler unexpectedly.
+     *
+     * Fix being verified:
+     * - Fire `user-selected-date-changed` on `keyup` instead of `keydown`.
+     * - This prevents the dialog invoker button from receiving and handling that `keyup` after the dialog closes.
+     */
+
+    /** @type {HTMLElement} */
+    let el;
+    const keyUpSpy = sinon.spy();
+    const getDialogEl = () => el.querySelector('dialog');
+    const openDialogButtonClickHandler = () => getDialogEl()?.showModal();
+    const userSelectedDateChangedHandler = () => getDialogEl()?.close();
+
+    el = await fixture(html`
+      <div>
+        <button 
+          @keyup="${keyUpSpy}" 
+          @click="${openDialogButtonClickHandler}"
+        >
+          Open Dialog
+        </button>
+        <dialog>
+          <${tagCalendar} 
+            .selectedDate="${new Date('2000/10/12')}" 
+            @user-selected-date-changed="${userSelectedDateChangedHandler}"
+          >
+          </${tagCalendar}>
+        </dialog>
+      </div>
+    `);
+
+    const openDialogButton = el.querySelector('button');
+    const calendarEl = /** @type {LionCalendar} */ (el.querySelector(tagStringCalendar));
+    await calendarEl?.updateComplete;
+
+    openDialogButton?.focus();
+    openDialogButton?.click();
+    /**
+     * @returns {HTMLElement | null | undefined}
+     */
+    const getSelectedDateEl = () =>
+      calendarEl?.shadowRoot?.querySelector('.calendar__day-button[selected]');
+    await waitUntil(getSelectedDateEl);
+    getSelectedDateEl()?.focus();
+    await sendKeys({ press: 'ArrowLeft' });
+    await sendKeys({ press: 'Enter' });
+
+    expect(keyUpSpy.called).to.equal(false);
+  });
+}

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

@@ -238,7 +238,7 @@ const ChoiceInputMixinImplementation = superclass =>
      */
     // eslint-disable-next-line no-unused-vars
     _toggleChecked(ev) {
-      if (this.disabled) {
+      if (this.disabled || this.readOnly) {
         return;
       }
       this._isHandlingUserInput = true;

package/components/input-amount-dropdown/src/LionInputAmountDropdown.js

@@ -398,14 +398,16 @@ export class LionInputAmountDropdown extends LionInputAmount {
 
   /**
    * Used for Required validation and computation of interaction states.
-   * We need to override this, because we prefill the input with the currency code, but for proper UX,
-   * we don't consider this as having interaction state `prefilled`
-   * @param {string} modelValue
+   * We only consider the amount part for emptiness checks.
+   * Missing, null, empty-string or NaN amount is considered empty.
    * @return {boolean}
    * @protected
    */
   _isEmpty(modelValue = this.modelValue) {
-    return super._isEmpty(modelValue) || this.currency === this.__initializedCurrencyCode;
+    const isNumberValue =
+      typeof modelValue?.amount === 'number' &&
+      (modelValue?.amount === 0 || Number.isNaN(modelValue?.amount));
+    return !modelValue?.amount && !isNumberValue;
   }
 
   /**

package/components/input-amount-dropdown/test/LionInputAmountDropdown.test.js

@@ -1,6 +1,7 @@
 import { mimicUserChangingDropdown } from '@lion/ui/input-amount-dropdown-test-helpers.js';
 import { runInputAmountDropdownSuite } from '@lion/ui/input-amount-dropdown-test-suites.js';
 import { LionInputAmountDropdown } from '@lion/ui/input-amount-dropdown.js';
+import { Required } from '@lion/ui/form-core.js';
 import { aTimeout, expect, fixture } from '@open-wc/testing';
 import { LionSelectRich } from '@lion/ui/select-rich.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -194,7 +195,25 @@ describe('WithFormControlInputAmountDropdown', () => {
       el.modelValue = { currency: 'EUR' };
       await aTimeout(0);
       el.modelValue = { currency: 'EUR', amount: '' };
-      expect(el.hasFeedbackFor).to.deep.equal(['error']);
+      expect(el.hasFeedbackFor).to.deep.equal([]);
     });
   });
+
+  it('includes error in showsFeedbackFor when required, empty, and touched & dirty', async () => {
+    const el = /** @type {LionInputAmountDropdown} */ (
+      await fixture(html`
+        <lion-input-amount-dropdown
+          .allowedCurrencies="${['GBP', 'EUR']}"
+          .validators="${[new Required()]}"
+        ></lion-input-amount-dropdown>
+      `)
+    );
+    await el.updateComplete;
+    el.touched = true;
+    el.dirty = true;
+    await el.updateComplete;
+    await el.feedbackComplete;
+    expect(el.hasFeedbackFor).to.include('error', 'hasFeedbackFor');
+    expect(el.showsFeedbackFor).to.include('error', 'showsFeedbackFor');
+  });
 });

package/components/input-amount-dropdown/test-suites/LionInputAmountDropdown.suite.js

@@ -317,5 +317,29 @@ export function runInputAmountDropdownSuite({ klass } = { klass: LionInputAmount
       // @ts-ignore
       expect(el._isEmpty(), 'empty').to.be.true;
     });
+
+    it('only checks modelValue.amount', async () => {
+      const el = await fixture(html` <${tag}></${tag}> `);
+
+      el.modelValue = { currency: 'GBP', amount: 1 };
+      await el.updateComplete;
+      // @ts-ignore
+      expect(el._isEmpty(), 'filled amount').to.be.false;
+
+      el.modelValue = { currency: 'EUR', amount: '' };
+      await el.updateComplete;
+      // @ts-ignore
+      expect(el._isEmpty(), 'empty amount').to.be.true;
+
+      el.modelValue = { currency: 'EUR' };
+      await el.updateComplete;
+      // @ts-ignore
+      expect(el._isEmpty(), 'missing amount property').to.be.true;
+
+      el.modelValue = null;
+      await el.updateComplete;
+      // @ts-ignore
+      expect(el._isEmpty(), 'null modelValue').to.be.true;
+    });
   });
 }

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

@@ -4,11 +4,12 @@ import { IsDateDisabled, MaxDate, MinDate, MinMaxDate } from '@lion/ui/form-core
 import { aTimeout, defineCE, expect, fixture as _fixture, nextFrame } from '@open-wc/testing';
 import { mimicClick } from '@lion/ui/overlays-test-helpers.js';
 import sinon from 'sinon';
-import { setViewport } from '@web/test-runner-commands';
+import { sendKeys, setViewport } from '@web/test-runner-commands';
 import { DatepickerInputObject } from '@lion/ui/input-datepicker-test-helpers.js';
 import { LionInputDatepicker } from '@lion/ui/input-datepicker.js';
 
 import '@lion/ui/define/lion-input-datepicker.js';
+import { runDatepickerSuite } from '../test-suites/LionInputDatepicker.suite.js';
 
 /**
  * @typedef {import('lit').TemplateResult} TemplateResult
@@ -479,10 +480,14 @@ describe('<lion-input-datepicker>', () => {
       // Open the calendar
       await elObj.openCalendar();
 
+      const selectedDateEl = calendarEl?.shadowRoot?.querySelector(
+        '.calendar__day-button[selected]',
+      );
+      // @ts-ignore
+      selectedDateEl?.focus();
+
       // Move focus to 18th of December
-      calendarEl.shadowRoot
-        ?.querySelector('#js-content-wrapper')
-        ?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+      await sendKeys({ press: 'ArrowRight' });
 
       expect(/** @type {Date} */ (calendarEl.focusedDate).getTime()).to.equal(
         new Date('December 18, 2020 03:24:00 GMT+0000').getTime(),
@@ -834,4 +839,8 @@ describe('<lion-input-datepicker>', () => {
       ).to.be.true;
     });
   });
+
+  describe('Run suite', () => {
+    runDatepickerSuite();
+  });
 });

package/components/input-datepicker/test-suites/LionInputDatepicker.suite.js

@@ -0,0 +1,35 @@
+import { expect, html, fixture, waitUntil, unsafeStatic } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+
+/** @typedef {import('@lion/ui/input-datepicker.js').LionInputDatepicker} LionInputDatepicker */
+
+export function runDatepickerSuite({
+  datepickerTagName = 'lion-input-datepicker',
+  calendarTagName = 'lion-calendar',
+} = {}) {
+  const tag = unsafeStatic(datepickerTagName);
+
+  it('should not reopen the datepicker popup when the date is selected by keyboard', async () => {
+    /** @type {LionInputDatepicker} */
+    const el = await fixture(html`<${tag} .modelValue="${new Date('2018/05/30')}"></${tag}>`);
+    await el.updateComplete;
+
+    // @ts-ignore
+    const openDatepickerButton = el._invokerNode;
+    openDatepickerButton?.focus();
+    openDatepickerButton?.click();
+    /**
+     * @returns {HTMLElement | null | undefined}
+     */
+    const getSelectedDateEl = () =>
+      el?.shadowRoot
+        ?.querySelector(calendarTagName)
+        ?.shadowRoot?.querySelector('.calendar__day-button[selected]');
+    await waitUntil(getSelectedDateEl);
+    getSelectedDateEl()?.focus();
+    await sendKeys({ press: 'ArrowLeft' });
+    await sendKeys({ press: 'Enter' });
+
+    expect(el.opened).to.be.false;
+  });
+}

package/components/input-email/src/LionInputEmail.js

@@ -10,6 +10,8 @@ import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
 export class LionInputEmail extends LocalizeMixin(LionInput) {
   constructor() {
     super();
+    this.autocomplete = 'email';
+
     // local-part@domain where the local part may be up to 64 characters long
     // and the domain may have a maximum of 255 characters.
     // @see https://www.wikiwand.com/en/Email_address

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

@@ -15,6 +15,12 @@ describe('<lion-input-email>', () => {
     expect(_inputNode.type).to.equal('text');
   });
 
+  it('sets autocomplete to "email"', async () => {
+    const el = await fixture(`<lion-input-email></lion-input-email>`);
+    // @ts-expect-error [allow-protected] inside tests
+    expect(el._inputNode.getAttribute('autocomplete')).to.equal('email');
+  });
+
   it('has validator "IsEmail" applied by default', async () => {
     // More elaborate tests can be found in lion-validate/test/StringValidators.test.js
     const el = await fixture(`<lion-input-email></lion-input-email>`);

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

@@ -2,13 +2,14 @@ import { Validator } from '@lion/ui/form-core.js';
 import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 
 /**
+ * @typedef {import('../../form-core/types/validate/index.js').FeedbackMessageData} FeedbackMessageData
  * @typedef {import('../../form-core/types/validate/validate.js').ValidatorConfig} ValidatorConfig
  * @typedef {import('../../form-core/types/validate/validate.js').ValidatorParam} ValidatorParam
  * @typedef {import('../../form-core/types/validate/validate.js').ValidatorOutcome} ValidatorOutcome
  * @typedef {import('../types/input-file.js').InputFile} InputFile
  */
 
-/* eslint max-classes-per-file: ["error", 2] */
+/* eslint max-classes-per-file: ["error", 3] */
 export class IsAcceptedFile extends Validator {
   static validatorName = 'IsAcceptedFile';
 
@@ -112,3 +113,32 @@ export class DuplicateFileNames extends Validator {
     return localizeManager.msg('lion-input-file:uploadTextDuplicateFileName');
   }
 }
+
+export class MaxFileCount extends Validator {
+  static get validatorName() {
+    return 'MaxFileCount';
+  }
+
+  /**
+   * @param {Partial<FeedbackMessageData>} [data]
+   * @returns {Promise<string|Element>}
+   */
+  static async getMessage(data) {
+    const localizeManager = getLocalizeManager();
+    if (!data?.params || typeof data.params !== 'number' || data.params <= 0) {
+      return 'Invalid MaxFileCount parameter. Please provide a valid number greater than 0.';
+    }
+    return localizeManager.msg('lion-input-file:maxFileCountExceeded', {
+      maxFileCount: data.params,
+    });
+  }
+
+  /**
+   * @param {File[]} value
+   * @param {number} maxFiles
+   * @returns {boolean}
+   */
+  execute(value, maxFiles = this.param || 0) {
+    return maxFiles > 0 && value.length > maxFiles;
+  }
+}

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

@@ -1,4 +1,5 @@
 import { expect } from '@open-wc/testing';
+import { MaxFileCount } from '@lion/ui/input-file.js';
 import { IsAcceptedFile } from '../src/validators.js';
 
 describe('lion-input-file: IsAcceptedFile', () => {
@@ -167,4 +168,34 @@ describe('lion-input-file: IsAcceptedFile', () => {
       expect(returnVal).to.be.true;
     });
   });
+
+  describe('Max File Count', () => {
+    /**
+     *
+     * @param {string} filename
+     * @returns {File}
+     */
+    const newFile = filename => new File([], filename);
+
+    it('Allow up to 2 files', () => {
+      const validator = new MaxFileCount(2);
+      expect(MaxFileCount.validatorName).to.equal('MaxFileCount');
+
+      let isEnabled = validator.execute([newFile('file1.txt'), newFile('file2.txt')]);
+      expect(isEnabled).to.be.false;
+
+      isEnabled = validator.execute([
+        newFile('file1.txt'),
+        newFile('file2.txt'),
+        newFile('file3.txt'),
+      ]);
+      expect(isEnabled).to.be.true;
+    });
+
+    it('Allow any number of files with empty param', () => {
+      const validator = new MaxFileCount();
+      const isEnabled = validator.execute([newFile('file1.txt'), newFile('file2.txt')]);
+      expect(isEnabled).to.be.false;
+    });
+  });
 });

package/components/input-file/translations/bg.js

@@ -17,4 +17,5 @@ export default {
   selectTextDuplicateFileName: 'Файл със същото име на файл вече е налице.',
   selectTextMultipleFile: 'Избор на файлове',
   selectTextSingleFile: 'Избор на файл',
+  maxFileCountExceeded: 'Броят на качените файлове не може да надвишава {maxFileCount}.',
 };

package/components/input-file/translations/cs.js

@@ -18,4 +18,5 @@ export default {
   selectTextDuplicateFileName: 'Soubor se stejným názvem byl již přítomen.',
   selectTextMultipleFile: 'Vybrat soubory',
   selectTextSingleFile: 'Vybrat soubor',
+  maxFileCountExceeded: 'Počet nahraných souborů nesmí překročit {maxFileCount}.',
 };

package/components/input-file/translations/de.js

@@ -17,4 +17,6 @@ export default {
   selectTextDuplicateFileName: 'Eine Datei mit demselben Dateinamen war bereits vorhanden.',
   selectTextMultipleFile: 'Dateien auswählen',
   selectTextSingleFile: 'Datei auswählen',
+  maxFileCountExceeded:
+    'Die Anzahl der hochgeladenen Dateien darf {maxFileCount} nicht überschreiten.',
 };

package/components/input-file/translations/en.js

@@ -16,4 +16,5 @@ export default {
   selectTextDuplicateFileName: 'A file with same filename was already present.',
   selectTextMultipleFile: 'Select files',
   selectTextSingleFile: 'Select file',
+  maxFileCountExceeded: 'The number of uploaded files must not exceed {maxFileCount}.',
 };

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

@@ -17,4 +17,5 @@ export default {
   selectTextDuplicateFileName: 'Ya había un archivo con el mismo nombre de archivo.',
   selectTextMultipleFile: 'Seleccionar archivos',
   selectTextSingleFile: 'Seleccionar archivo',
+  maxFileCountExceeded: 'El número de archivos cargados no puede superar {maxFileCount}.',
 };