@lion/ui 0.1.5 → 0.2.0

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

@@ -861,6 +861,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 +937,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 +949,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 +963,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 +1146,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 +1163,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 +1459,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 +1467,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

@@ -575,7 +575,8 @@ export class OverlayController extends EventTarget {
     // 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;
 
     /**

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

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',

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

@@ -19,6 +19,8 @@ export default {
       'Veuillez indiquer un(e) {fieldName} entre {params.min, date, YYYYMMDD} et {params.max, date, YYYYMMDD}.',
     IsDateDisabled: "Cette date n'est pas disponible, veuillez en choisir une autre.",
     IsEmail: 'Veuillez indiquer un(e) {fieldName} au format "nom@exemple.com".',
+    MatchesOption:
+      'Aucun résultat correspondant. Veuillez essayer un autre mot-clé ou une autre catégorie.',
   },
   warning: {
     Required: 'Veuillez également indiquer un(e) {fieldName}.',
@@ -39,6 +41,8 @@ export default {
       'Veuillez indiquer un(e) {fieldName} entre {params.min, date, YYYYMMDD} et {params.max, date, YYYYMMDD}.',
     IsDateDisabled: "Cette date n'est pas disponible, veuillez en choisir une autre.",
     IsEmail: 'Veuillez indiquer un(e) {fieldName} au format "nom@exemple.com".',
+    MatchesOption:
+      'Aucun résultat correspondant. Veuillez essayer un autre mot-clé ou une autre catégorie.',
   },
   success: {
     DefaultOk: 'Ok',

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

@@ -19,6 +19,7 @@ export default {
     IsDateDisabled: 'Ez a dátum nem áll rendelkezésre, válasszon egy másikat.',
     IsEmail:
       'Adjon meg egy érvényes {fieldName} értéket, a következő formátumban: „név@példa.com”.',
+    MatchesOption: 'Nincs egyező találat. Próbálkozzon másik kulcsszóval vagy kategóriával.',
   },
   warning: {
     Required: 'Továbbá adjon meg egy {fieldName} értéket.',
@@ -39,6 +40,7 @@ export default {
     IsDateDisabled: 'Ez a dátum nem áll rendelkezésre, válasszon egy másikat.',
     IsEmail:
       'Adjon meg egy érvényes {fieldName} értéket, a következő formátumban: „név@példa.com”.',
+    MatchesOption: 'Nincs egyező találat. Próbálkozzon másik kulcsszóval vagy kategóriával.',
   },
   success: {
     DefaultOk: 'Rendben',

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

@@ -18,6 +18,8 @@ export default {
       'Inserire un(a) {fieldName} tra {params.min, date, YYYYMMDD} e {params.max, date, YYYYMMDD}.',
     IsDateDisabled: "ТQuesta data non è disponibile, sceglierne un'altra.",
     IsEmail: 'Inserire un valore valido per {fieldName} nel formato "name@example.com".',
+    MatchesOption:
+      'Nessun risultato corrispondente. Provare con una parola chiave o una categoria diversa.',
   },
   warning: {
     Required: 'Inserire anche un(a) {fieldName}.',
@@ -37,6 +39,8 @@ export default {
       'Inserire un(a) {fieldName} tra {params.min, date, YYYYMMDD} e {params.max, date, YYYYMMDD}.',
     IsDateDisabled: "ТQuesta data non è disponibile, sceglierne un'altra.",
     IsEmail: 'Inserire un valore valido per {fieldName} nel formato "name@example.com".',
+    MatchesOption:
+      'Nessun risultato corrispondente. Provare con una parola chiave o una categoria diversa.',
   },
   success: {
     DefaultOk: 'OK',

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

@@ -17,6 +17,8 @@ export default {
       'Vul een {fieldName} in tussen {params.min, date, YYYYMMDD} en {params.max, date, YYYYMMDD}.',
     IsDateDisabled: 'Deze datum is niet mogelijk, kies een andere.',
     IsEmail: 'Vul een {fieldName} in formaat "name@example.com".',
+    MatchesOption:
+      'Geen overeenkomende resultaten. Probeer een ander trefwoord of een andere categorie.',
   },
   warning: {
     Required: 'Vul een {fieldName} in.',
@@ -35,6 +37,8 @@ export default {
       'Vul een {fieldName} in tussen {params.min, date, YYYYMMDD} en {params.max, date, YYYYMMDD}.',
     IsDateDisabled: 'Deze datum is niet mogelijk, kies een andere.',
     IsEmail: 'Vul een {fieldName} in formaat "name@example.com".',
+    MatchesOption:
+      'Geen overeenkomende resultaten. Probeer een ander trefwoord of een andere categorie.',
   },
   success: {
     DefaultOk: 'Okee',

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

@@ -18,6 +18,7 @@ export default {
       'Proszę podać wartość {fieldName} między {params.min, date, YYYYMMDD} a {params.max, date, YYYYMMDD}.',
     IsDateDisabled: 'Ta data jest niedostępna, wybierz inną.',
     IsEmail: 'Proszę podać prawidłowy {fieldName} w formacie „nazwa@example.com”.',
+    MatchesOption: 'Brak pasujących wyników. Spróbuj użyć innego słowa kluczowego lub kategorii.',
   },
   warning: {
     Required: 'Proszę również podać wartość {fieldName}.',
@@ -37,6 +38,7 @@ export default {
       'Proszę podać wartość {fieldName} między {params.min, date, YYYYMMDD} a {params.max, date, YYYYMMDD}.',
     IsDateDisabled: 'Ta data jest niedostępna, wybierz inną.',
     IsEmail: 'Proszę podać prawidłowy {fieldName} w formacie „nazwa@example.com”.',
+    MatchesOption: 'Brak pasujących wyników. Spróbuj użyć innego słowa kluczowego lub kategorii.',
   },
   success: {
     DefaultOk: 'Ok',

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

@@ -18,6 +18,8 @@ export default {
       'Introduceți un/o {fieldName} cuprins(ă) între {params.min, date, YYYYMMDD} și {params.max, date, YYYYMMDD}.',
     IsDateDisabled: 'Această dată nu este disponibilă, alegeți alta.',
     IsEmail: 'Introduceți un/o {fieldName} valid(ă) în formatul „nume@exemplu.com”.',
+    MatchesOption:
+      'Niciun rezultat corespunzător. Încercaţi un cuvânt cheie sau o categorie diferită.',
   },
   warning: {
     Required: 'Introduceți un/o {fieldName}.',
@@ -37,6 +39,8 @@ export default {
       'Introduceți un/o {fieldName} cuprins(ă) între {params.min, date, YYYYMMDD} și {params.max, date, YYYYMMDD}.',
     IsDateDisabled: 'Această dată nu este disponibilă, alegeți alta.',
     IsEmail: 'Introduceți un/o {fieldName} valid(ă) în formatul „nume@exemplu.com”.',
+    MatchesOption:
+      'Niciun rezultat corespunzător. Încercaţi un cuvânt cheie sau o categorie diferită.',
   },
   success: {
     DefaultOk: 'În regulă',