@lion/ui 0.1.5 → 0.2.1

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

@@ -0,0 +1,125 @@
+import { getListboxMembers } from '@lion/ui/listbox-test-helpers.js';
+
+/**
+ * @typedef {import('@lion/ui/combobox.js').LionCombobox} LionCombobox
+ */
+
+/**
+ * @param { LionCombobox } el
+ */
+export function getComboboxMembers(el) {
+  const obj = getListboxMembers(el);
+  return {
+    ...obj,
+    ...{
+      // @ts-ignore [allow-protected] in test
+      _invokerNode: el._invokerNode,
+      // @ts-ignore [allow-protected] in test
+      _overlayCtrl: el._overlayCtrl,
+      // @ts-ignore [allow-protected] in test
+      _comboboxNode: el._comboboxNode,
+      // @ts-ignore [allow-protected] in test
+      _inputNode: el._inputNode,
+      // @ts-ignore [allow-protected] in test
+      _listboxNode: el._listboxNode,
+      // @ts-ignore [allow-protected] in test
+      _selectionDisplayNode: el._selectionDisplayNode,
+      // @ts-ignore [allow-protected] in test
+      _activeDescendantOwnerNode: el._activeDescendantOwnerNode,
+      // @ts-ignore [allow-protected] in test
+      _ariaVersion: el._ariaVersion,
+    },
+  };
+}
+
+/**
+ * @param {LionCombobox} el
+ * @param {string} value
+ */
+// TODO: add keys that actually make sense...
+export function mimicUserTyping(el, value) {
+  const { _inputNode } = getComboboxMembers(el);
+  _inputNode.dispatchEvent(new Event('focusin', { bubbles: true }));
+  // eslint-disable-next-line no-param-reassign
+  _inputNode.value = value;
+  _inputNode.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+  _inputNode.dispatchEvent(new KeyboardEvent('keyup', { key: value }));
+  _inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: value }));
+}
+
+/**
+ * @param {HTMLElement} el
+ * @param {string} key
+ */
+export function mimicKeyPress(el, key) {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key }));
+  el.dispatchEvent(new KeyboardEvent('keyup', { key }));
+}
+
+/**
+ * @param {LionCombobox} el
+ * @param {string[]} values
+ */
+export async function mimicUserTypingAdvanced(el, values) {
+  const { _inputNode } = getComboboxMembers(el);
+  _inputNode.dispatchEvent(new Event('focusin', { bubbles: true }));
+
+  for (const key of values) {
+    // eslint-disable-next-line no-await-in-loop, no-loop-func
+    await new Promise(resolve => {
+      const hasSelection = _inputNode.selectionStart !== _inputNode.selectionEnd;
+
+      if (key === 'Backspace') {
+        if (hasSelection) {
+          _inputNode.value =
+            _inputNode.value.slice(
+              0,
+              _inputNode.selectionStart ? _inputNode.selectionStart : undefined,
+            ) +
+            _inputNode.value.slice(
+              _inputNode.selectionEnd ? _inputNode.selectionEnd : undefined,
+              _inputNode.value.length,
+            );
+        } else {
+          _inputNode.value = _inputNode.value.slice(0, -1);
+        }
+      } else if (hasSelection) {
+        _inputNode.value =
+          _inputNode.value.slice(
+            0,
+            _inputNode.selectionStart ? _inputNode.selectionStart : undefined,
+          ) +
+          key +
+          _inputNode.value.slice(
+            _inputNode.selectionEnd ? _inputNode.selectionEnd : undefined,
+            _inputNode.value.length,
+          );
+      } else {
+        _inputNode.value += key;
+      }
+
+      mimicKeyPress(_inputNode, key);
+      _inputNode.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+
+      el.updateComplete.then(() => {
+        // @ts-ignore
+        resolve();
+      });
+    });
+  }
+}
+
+/**
+ * @param {LionCombobox} el
+ */
+export function getFilteredOptionValues(el) {
+  const options = el.formElements;
+  /**
+   * @param {{ style: { display: string; }; }} option
+   */
+  const filtered = options.filter(option => option.getAttribute('aria-hidden') !== 'true');
+  /**
+   * @param {{ value: any; }} option
+   */
+  return filtered.map(option => option.value);
+}

package/components/form-core/types/choice-group/ChoiceGroupMixinTypes.ts

@@ -1,9 +1,10 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 import { LitElement } from 'lit';
-import { FormControlHost } from '../FormControlMixinTypes.js';
 import { FormControl } from '../form-group/FormGroupMixinTypes.js';
-import { FormRegistrarHost } from '../registration/FormRegistrarMixinTypes.js';
+import { FormControlHost } from '../FormControlMixinTypes.js';
 import { InteractionStateHost } from '../InteractionStateMixinTypes.js';
+import { FormRegistrarHost } from '../registration/FormRegistrarMixinTypes.js';
+import { ChoiceInputHost } from './ChoiceInputMixinTypes.js';
 
 export declare class ChoiceGroupHost {
   multipleChoice: boolean;
@@ -26,7 +27,7 @@ export declare class ChoiceGroupHost {
   protected _throwWhenInvalidChildModelValue(child: FormControlHost): void;
   protected _isEmpty(): void;
   protected _checkSingleChoiceElements(ev: Event): void;
-  protected _getCheckedElements(): void;
+  protected _getCheckedElements(): ChoiceInputHost[];
   protected _setCheckedElements(value: any, check: boolean): void;
   protected _onBeforeRepropagateChildrenValues(ev: Event): void;
 

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

@@ -279,11 +279,19 @@ export class LionInputDatepicker extends ScopedElementsMixin(
         aria-label="${this.msgLit('lion-input-datepicker:openDatepickerLabel')}"
         title="${this.msgLit('lion-input-datepicker:openDatepickerLabel')}"
       >
-        📅
+        ${this._invokerIconTemplate()}
       </button>
     `;
   }
 
+  /**
+   * Subclassers can replace this with their custom extension invoker icon
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _invokerIconTemplate() {
+    return html`📅`;
+  }
+
   _setupOverlayCtrl() {
     super._setupOverlayCtrl();
 

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

@@ -1,6 +1,6 @@
 export default {
   error: {
-    IsIBAN: 'Geben Sie ein gültiges {fieldName} ein.',
+    IsIBAN: 'Geben Sie eine gültige {fieldName} ein.',
     IsCountryIBAN:
       'Geben Sie eine gültige {params, select,\n' +
       'AT {Österreichisch}\n' +

package/components/listbox/src/ListboxMixin.js

@@ -635,6 +635,9 @@ const ListboxMixinImplementation = superclass =>
           }
           break;
         case 'ArrowLeft':
+          if (this._listboxReceivesNoFocus) {
+            return;
+          }
           ev.preventDefault();
           if (this.orientation === 'horizontal') {
             this.activeIndex = this._getPreviousEnabledOption(this.activeIndex);
@@ -647,6 +650,9 @@ const ListboxMixinImplementation = superclass =>
           }
           break;
         case 'ArrowRight':
+          if (this._listboxReceivesNoFocus) {
+            return;
+          }
           ev.preventDefault();
           if (this.orientation === 'horizontal') {
             this.activeIndex = this._getNextEnabledOption(this.activeIndex);

package/components/listbox/test-suites/ListboxMixin.suite.js

@@ -393,7 +393,7 @@ export function runListboxMixinSuite(customConfig = {}) {
         `);
         await el.updateComplete;
         await el.updateComplete; // need 2 awaits as overlay.show is an async function
-
+        // for more info about why we need the ignoreRules, see: https://lion-web.netlify.app/fundamentals/systems/overlays/rationale/#considerations
         await expect(el).to.be.accessible({ ignoredRules: ['aria-allowed-role'] });
       });
 
@@ -405,6 +405,7 @@ export function runListboxMixinSuite(customConfig = {}) {
             <${optionTag} .choiceValue=${20}>Item 2</${optionTag}>
           </${tag}>
         `);
+        // for more info about why we need the ignoreRules, see: https://lion-web.netlify.app/fundamentals/systems/overlays/rationale/#considerations
         await expect(el).to.be.accessible({ ignoredRules: ['aria-allowed-role'] });
       });
 
@@ -861,6 +862,7 @@ export function runListboxMixinSuite(customConfig = {}) {
           mimicKeyPress(_listboxNode, 'End');
           expect(el.activeIndex).to.equal(3);
         });
+
         it('navigates through open lists with [ArrowDown] [ArrowUp] keys activates the option', async () => {
           const el = /** @type {LionListbox} */ (
             await fixture(html`
@@ -936,7 +938,7 @@ export function runListboxMixinSuite(customConfig = {}) {
         it('uses [ArrowLeft] and [ArrowRight] keys when "horizontal"', async () => {
           const el = /** @type {LionListbox} */ (
             await fixture(html`
-            <${tag} opened name="foo" orientation="horizontal" autocomplete="none" show-all-on-empty>
+            <${tag} ._listboxReceivesNoFocus="${false}" opened name="foo" orientation="horizontal" autocomplete="none" show-all-on-empty>
               <${optionTag} .choiceValue="${'Artichoke'}">Artichoke</${optionTag}>
               <${optionTag} .choiceValue="${'Chard'}">Chard</${optionTag}>
             </${tag}>
@@ -948,15 +950,12 @@ export function runListboxMixinSuite(customConfig = {}) {
 
           // Normalize for suite tests
           el.activeIndex = 0;
-
           await el.updateComplete;
 
           mimicKeyPress(_listboxNode, 'ArrowRight');
-
           expect(el.activeIndex).to.equal(1);
 
           mimicKeyPress(_listboxNode, 'ArrowLeft');
-
           expect(el.activeIndex).to.equal(0);
 
           // No response to vertical arrows...
@@ -965,7 +964,14 @@ export function runListboxMixinSuite(customConfig = {}) {
 
           el.activeIndex = 1;
           mimicKeyPress(_listboxNode, 'ArrowUp');
+          expect(el.activeIndex).to.equal(1);
 
+          // @ts-ignore allow protected member access in test
+          el._listboxReceivesNoFocus = true;
+          mimicKeyPress(_listboxNode, 'ArrowLeft');
+          expect(el.activeIndex).to.equal(1);
+
+          mimicKeyPress(_listboxNode, 'ArrowRight');
           expect(el.activeIndex).to.equal(1);
         });
 
@@ -1141,6 +1147,7 @@ export function runListboxMixinSuite(customConfig = {}) {
           expect(el.checkedIndex).to.equal(0);
           expectOnlyGivenOneOptionToBeChecked(options, 0);
         });
+
         it('navigates through list with [ArrowLeft] [ArrowRight] keys when horizontal: activates and checks the option', async () => {
           /**
            * @param {LionOption[]} options
@@ -1157,7 +1164,7 @@ export function runListboxMixinSuite(customConfig = {}) {
           }
           const el = /** @type {LionListbox} */ (
             await fixture(html`
-              <${tag} opened selection-follows-focus orientation="horizontal" autocomplete="none" show-all-on-empty>
+              <${tag} ._listboxReceivesNoFocus="${false}" opened selection-follows-focus orientation="horizontal" autocomplete="none" show-all-on-empty>
                   <${optionTag} .choiceValue=${10}>Item 1</${optionTag}>
                   <${optionTag} .choiceValue=${20}>Item 2</${optionTag}>
                   <${optionTag} .choiceValue=${30}>Item 3</${optionTag}>
@@ -1453,7 +1460,7 @@ export function runListboxMixinSuite(customConfig = {}) {
             )}
           </${tag}>
         `);
-        el.checkedIndex = 0;
+        el.setCheckedIndex(0);
         expect(el.modelValue).to.deep.equal({
           type: 'mastercard',
           label: 'Master Card',
@@ -1461,7 +1468,7 @@ export function runListboxMixinSuite(customConfig = {}) {
           active: true,
         });
 
-        el.checkedIndex = 1;
+        el.setCheckedIndex(1);
         expect(el.modelValue).to.deep.equal({
           type: 'visacard',
           label: 'Visa Card',

package/components/overlays/src/OverlayController.js

@@ -124,6 +124,9 @@ export class OverlayController extends EventTarget {
     /** @private */
     this.__sharedConfig = config;
 
+    /** @private */
+    this.__activeElementRightBeforeHide = null;
+
     /** @type {OverlayConfig} */
     this.config = {};
 
@@ -570,12 +573,18 @@ export class OverlayController extends EventTarget {
     // We use a dialog for its visual capabilities: it renders to the top layer.
     // A11y will depend on the type of overlay and is arranged on contentNode level.
     // Also see: https://www.scottohara.me/blog/2019/03/05/open-dialog.html
+    //
+    // The role="dialog" is set on the contentNode (or another role), so role="none"
+    // is valid here, although AXE complains about this setup.
+    // For now we need to add `ignoredRules: ['aria-allowed-role']` in your AXE tests.
+    // see: https://lion-web.netlify.app/fundamentals/systems/overlays/rationale/#considerations
     wrappingDialogElement.setAttribute('role', 'none');
     wrappingDialogElement.setAttribute('data-overlay-outer-wrapper', '');
     // N.B. position: fixed is needed to escape out of 'overflow: hidden'
     // We give a high z-index for non-modal dialogs, so that we at least win from all siblings of our
     // parent stacking context
-    wrappingDialogElement.style.cssText = `display:none; z-index: ${this.config.zIndex};`;
+    // padding reset so we don't get a weird dialog visual square showing up
+    wrappingDialogElement.style.cssText = `display:none; z-index: ${this.config.zIndex}; padding: 0;`;
     this.__wrappingDialogNode = wrappingDialogElement;
 
     /**
@@ -722,7 +731,7 @@ export class OverlayController extends EventTarget {
     const event = new CustomEvent('before-show', { cancelable: true });
     this.dispatchEvent(event);
     if (!event.defaultPrevented) {
-      if (this.__wrappingDialogNode instanceof HTMLDialogElement) {
+      if ('HTMLDialogElement' in window && this.__wrappingDialogNode instanceof HTMLDialogElement) {
         this.__wrappingDialogNode.open = true;
       }
       // @ts-ignore
@@ -827,6 +836,14 @@ export class OverlayController extends EventTarget {
       this._hideResolve = resolve;
     });
 
+    // save the current activeElement so we know if the user set focus to another element than the invoker of the dialog
+    // while the dialog was open.
+    // We need this in the _restoreFocus method to determine if we should focus this.elementToFocusAfterHide when the
+    // dialog is closed or keep focus on the element that the user deliberately gave focus
+    this.__activeElementRightBeforeHide = /** @type {ShadowRoot} */ (
+      this.contentNode.getRootNode()
+    ).activeElement;
+
     if (this.manager) {
       this.manager.hide(this);
     }
@@ -844,9 +861,10 @@ export class OverlayController extends EventTarget {
         contentNode: this.contentNode,
       });
 
-      if (this.__wrappingDialogNode instanceof HTMLDialogElement) {
+      if ('HTMLDialogElement' in window && this.__wrappingDialogNode instanceof HTMLDialogElement) {
         this.__wrappingDialogNode.close();
       }
+
       // @ts-ignore
       this.__wrappingDialogNode.style.display = 'none';
       this._handleFeatures({ phase: 'hide' });
@@ -906,18 +924,20 @@ export class OverlayController extends EventTarget {
   /** @protected */
   _restoreFocus() {
     // We only are allowed to move focus if we (still) 'own' the active element.
-    // Otherwise we assume the 'outside world' has purposefully taken over
-    const { activeElement } = /** @type {ShadowRoot} */ (this.contentNode.getRootNode());
+    // Otherwise, we assume the 'outside world' has purposefully taken over
     const weStillOwnActiveElement =
-      activeElement instanceof HTMLElement && this.contentNode.contains(activeElement);
+      this.__activeElementRightBeforeHide instanceof HTMLElement &&
+      this.contentNode.contains(this.__activeElementRightBeforeHide);
+
     if (!weStillOwnActiveElement) {
       return;
     }
 
     if (this.elementToFocusAfterHide) {
       this.elementToFocusAfterHide.focus();
+      this.elementToFocusAfterHide.scrollIntoView({ block: 'center' });
     } else {
-      activeElement.blur();
+      /** @type {HTMLElement} */ (this.__activeElementRightBeforeHide).blur();
     }
   }
 

package/components/overlays/test/OverlayController.test.js

@@ -21,7 +21,7 @@ import { createShadowHost } from '../test-helpers/createShadowHost.js';
  * @typedef {import('../types/OverlayConfig.js').ViewportPlacement} ViewportPlacement
  */
 
-const wrappingDialogNodeStyle = 'display: none; z-index: 9999;';
+const wrappingDialogNodeStyle = 'display: none; z-index: 9999; padding: 0px;';
 
 /**
  * Make sure that all browsers serialize html in a similar way
@@ -46,6 +46,19 @@ function getProtectedMembers(overlayControllerEl) {
   };
 }
 
+/**
+ * @param {HTMLElement} element
+ * */
+const isInViewport = element => {
+  const rect = element.getBoundingClientRect();
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
+};
+
 const withGlobalTestConfig = () =>
   /** @type {OverlayConfig} */ ({
     placementMode: 'global',
@@ -905,9 +918,10 @@ describe('OverlayController', () => {
 
         await ctrl.hide();
         expect(document.activeElement).to.equal(input);
+        expect(isInViewport(input)).to.be.true;
       });
 
-      it('supports elementToFocusAfterHide option when shadowRoot involved involved', async () => {
+      it('supports elementToFocusAfterHide option when shadowRoot involved', async () => {
         const input = /** @type {HTMLElement} */ (await fixture('<input />'));
         const contentNode = /** @type {HTMLElement} */ (
           await fixture('<div><textarea></textarea></div>')

package/components/switch/src/LionSwitch.js

@@ -80,9 +80,6 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
 
   connectedCallback() {
     super.connectedCallback();
-    if (!this.role) {
-      this.role = 'switch';
-    }
     this.addEventListener('checked-changed', this.__handleButtonSwitchCheckedChanged);
     if (this._labelNode) {
       this._labelNode.addEventListener('click', this._toggleChecked);

package/components/switch/src/LionSwitchButton.js

@@ -78,6 +78,7 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
 
     this.role = 'switch';
     this.checked = false;
+    this.__initialized = false;
     /** @protected */
     this._toggleChecked = this._toggleChecked.bind(this);
     /** @private */
@@ -158,8 +159,20 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
    */
   requestUpdate(name, oldValue, options) {
     super.requestUpdate(name, oldValue, options);
-    if (this.isConnected && name === 'checked' && this.checked !== oldValue && !this.disabled) {
+    if (
+      this.__initialized &&
+      this.isConnected &&
+      name === 'checked' &&
+      this.checked !== oldValue &&
+      !this.disabled
+    ) {
       this.__checkedStateChange();
     }
   }
+
+  /** @param {import('lit').PropertyValues } changedProperties */
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    this.__initialized = true;
+  }
 }

package/components/switch/test/lion-switch-button.test.js

@@ -1,4 +1,4 @@
-import { expect, fixture as _fixture } from '@open-wc/testing';
+import { expect, fixture as _fixture, fixtureSync, elementUpdated } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 import sinon from 'sinon';
 import '@lion/ui/define/lion-switch-button.js';
@@ -126,6 +126,20 @@ describe('lion-switch-button', () => {
     expect(handlerSpy.called).to.be.false;
   });
 
+  it('should not dispatch "checked-changed" event if not initialized on update', async () => {
+    const handlerSpy = sinon.spy();
+    const elSync = /** @type {LionSwitchButton} */ (
+      fixtureSync(html`<lion-switch-button @checked-changed="${handlerSpy}" .checked=${true} />`)
+    );
+    expect(elSync.__initialized).to.be.false;
+    await elementUpdated(elSync);
+    expect(elSync.__initialized).to.be.true;
+    expect(handlerSpy.called).to.be.false;
+    elSync.checked = !elSync.checked;
+    await elementUpdated(elSync);
+    expect(handlerSpy.called).to.be.true;
+  });
+
   describe('a11y', () => {
     it('should manage "aria-checked"', async () => {
       expect(el.hasAttribute('aria-checked')).to.be.true;

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

@@ -10,7 +10,7 @@ import '@lion/ui/define/lion-switch.js';
 /**
  * @typedef {import('../src/LionSwitchButton.js').LionSwitchButton} LionSwitchButton
  * @typedef {import('lit').TemplateResult} TemplateResult
- * @typedef {import('../../form-core/types/FormControlMixinTypes.js').FormControlHost} FormControlHost
+ * @typedef {import('@lion/ui/types/form-core.js').FormControlHost} FormControlHost
  */
 
 const IsTrue = class extends Validator {
@@ -215,10 +215,25 @@ describe('lion-switch', () => {
     expect(el.showsFeedbackFor).to.eql(['info']);
   });
 
-  it('should not cause error by setting an attribute in the constructor', async () => {
-    const div = await fixture(html`<div></div>`);
-    const el = /** @type {LionSwitch} */ (document.createElement('lion-switch'));
-    div.appendChild(el);
-    expect(el.role).to.equal('switch');
+  describe('Accessibility', () => {
+    it('passes axe a11y audit', async () => {
+      const el = await fixture(html`<lion-switch name="hi" label="My label"></lion-switch>`);
+      await expect(el).to.be.accessible();
+
+      el.checked = true;
+      await el.updateComplete;
+      await expect(el).to.be.accessible();
+    });
+
+    it('passes axe a11y audit when disabled', async () => {
+      const el = await fixture(
+        html`<lion-switch name="hi" label="My label" disabled></lion-switch>`,
+      );
+      await expect(el).to.be.accessible();
+
+      el.checked = true;
+      await el.updateComplete;
+      await expect(el).to.be.accessible();
+    });
   });
 });

package/components/validate-messages/src/loadDefaultFeedbackMessagesNoSideEffects.js

@@ -1,22 +1,23 @@
 /* eslint-disable import/no-extraneous-dependencies */
+import { MatchesOption } from '@lion/ui/combobox.js';
 import {
   DefaultSuccess,
+  EqualsLength,
   IsDate,
   IsDateDisabled,
+  IsEmail,
+  IsNumber,
   MaxDate,
+  MaxLength,
+  MaxNumber,
   MinDate,
+  MinLength,
   MinMaxDate,
-  IsNumber,
-  MaxNumber,
+  MinMaxLength,
   MinMaxNumber,
   MinNumber,
-  Required,
-  EqualsLength,
-  IsEmail,
-  MaxLength,
-  MinLength,
-  MinMaxLength,
   Pattern,
+  Required,
 } from '@lion/ui/form-core.js';
 import { PhoneNumber } from '@lion/ui/input-tel.js';
 
@@ -162,6 +163,8 @@ export function loadDefaultFeedbackMessagesNoSideEffects({ localize }) {
   MinMaxDate.getMessage = async data => getLocalizedMessage(data);
   /** @param {FeedbackMessageData} data */
   IsDateDisabled.getMessage = async data => getLocalizedMessage(data);
+  /** @param {FeedbackMessageData} data */
+  MatchesOption.getMessage = async data => getLocalizedMessage(data);
 
   DefaultSuccess.getMessage = async data => {
     await forMessagesToBeReady();

package/components/validate-messages/translations/bg.js

@@ -17,6 +17,8 @@ export default {
       'Моля, въведете {fieldName} между {params.min, date, YYYYMMDD} и {params.max, date, YYYYMMDD}.',
     IsDateDisabled: 'Тази дата не е на разположение, моля, изберете друга.',
     IsEmail: 'Моля, въведете валиден {fieldName} с формат "name@example.com".',
+    MatchesOption:
+      'Не са открити съответстващи резултати. Моля, опитайте с друга ключова дума или категория.',
   },
   warning: {
     Required: 'Моля, въведете също {fieldName}.',
@@ -35,6 +37,8 @@ export default {
       'Моля, въведете {fieldName} между {params.min, date, YYYYMMDD} и {params.max, date, YYYYMMDD}.',
     IsDateDisabled: 'Тази дата не е на разположение, моля, изберете друга.',
     IsEmail: 'Моля, въведете валиден {fieldName} с формат "name@example.com".',
+    MatchesOption:
+      'Не са открити съответстващи резултати. Моля, опитайте с друга ключова дума или категория.',
   },
   success: {
     DefaultOk: 'Добре',

package/components/validate-messages/translations/cs.js

@@ -17,6 +17,7 @@ export default {
       'Zadejte {fieldName} od {params.min, date, YYYYMMDD} do {params.max, date, YYYYMMDD}.',
     IsDateDisabled: 'Toto datum je nedostupné, vyberte jiné.',
     IsEmail: 'Zadejte platný {fieldName} ve formátu "name@example.com".',
+    MatchesOption: 'Žádné odpovídající výsledky. Zkuste jiné klíčové slovo nebo kategorii.',
   },
   warning: {
     Required: 'Zadejte rovněž {fieldName}.',
@@ -35,6 +36,7 @@ export default {
       'Zadejte {fieldName} od {params.min, date, YYYYMMDD} do {params.max, date, YYYYMMDD}.',
     IsDateDisabled: 'Toto datum je nedostupné, vyberte jiné.',
     IsEmail: 'Zadejte platný {fieldName} ve formátu "name@example.com".',
+    MatchesOption: 'Žádné odpovídající výsledky. Zkuste jiné klíčové slovo nebo kategorii.',
   },
   success: {
     DefaultOk: 'Dobře',

package/components/validate-messages/translations/de.js

@@ -18,6 +18,8 @@ export default {
       'Geben Sie für {fieldName} einen Wert zwischen {params.min, date, YYYYMMDD} und {params.max, date, YYYYMMDD} ein.',
     IsDateDisabled: 'Dieses Datum ist nicht verfügbar, bitte wählen Sie ein anderes Datum.',
     IsEmail: 'Geben Sie einen gültige {fieldName} im Format „name@example.com“ ein.',
+    MatchesOption:
+      'Keine übereinstimmenden Ergebnisse. Bitte versuchen Sie es mit einem anderen Schlüsselbegriff oder einer anderen Kategorie.',
   },
   warning: {
     Required: '{fieldName} sollte ausgefüllt werden.',
@@ -37,6 +39,8 @@ export default {
       'Geben Sie für {fieldName} einen Wert zwischen {params.min, date, YYYYMMDD} und {params.max, date, YYYYMMDD} ein.',
     IsDateDisabled: 'Dieses Datum ist nicht verfügbar, bitte wählen Sie ein anderes Datum.',
     IsEmail: 'Geben Sie einen gültige {fieldName} im Format „name@example.com“ ein.',
+    MatchesOption:
+      'Keine übereinstimmenden Ergebnisse. Bitte versuchen Sie es mit einem anderen Schlüsselbegriff oder einer anderen Kategorie.',
   },
   success: {
     DefaultOk: 'OK',

package/components/validate-messages/translations/en.js

@@ -18,6 +18,7 @@ export default {
       'Please enter a {fieldName} between {params.min, date, YYYYMMDD} and {params.max, date, YYYYMMDD}.',
     IsDateDisabled: 'This date is unavailable, please choose another one.',
     IsEmail: 'Please enter a valid {fieldName} in the format "name@example.com".',
+    MatchesOption: 'No matching results. Please try a different keyword or category.',
   },
   warning: {
     Required: 'Please enter a(n) {fieldName}.',
@@ -37,6 +38,7 @@ export default {
       'Please enter a {fieldName} between {params.min, date, YYYYMMDD} and {params.max, date, YYYYMMDD}.',
     IsDateDisabled: 'This date is unavailable, please choose another one.',
     IsEmail: 'Please enter a valid {fieldName} in the format "name@example.com".',
+    MatchesOption: 'No matching results. Please try a different keyword or category.',
   },
   success: {
     DefaultOk: 'Okay',

package/components/validate-messages/translations/es.js

@@ -18,6 +18,8 @@ export default {
       'Introduzca un/a {fieldName} entre {params.min, date, YYYYMMDD} y {params.max, date, YYYYMMDD}.',
     IsDateDisabled: 'Esta fecha no está disponible. Elija otra.',
     IsEmail: 'Introduzca un/a {fieldName} válido/a con el formato "nombre@ejemplo.com".',
+    MatchesOption:
+      'No hay resultados que coincidan. Pruebe con una palabra clave o categoría diferente.',
   },
   warning: {
     Required: 'Introduzca también un/a {fieldName}.',
@@ -37,6 +39,8 @@ export default {
       'Introduzca un/a {fieldName} entre {params.min, date, YYYYMMDD} y {params.max, date, YYYYMMDD}.',
     IsDateDisabled: 'Esta fecha no está disponible. Elija otra.',
     IsEmail: 'Introduzca un/a {fieldName} válido/a con el formato "nombre@ejemplo.com".',
+    MatchesOption:
+      'No hay resultados que coincidan. Pruebe con una palabra clave o categoría diferente.',
   },
   success: {
     DefaultOk: 'Vale',