@lion/ui 0.2.1 → 0.3.0

package/docs/components/combobox/src/wa-combobox/wa-combobox.js

@@ -15,164 +15,162 @@ class WaOption extends LionOption {
     };
   }
 
-  static get styles() {
-    return [
-      ...super.styles,
-      css`
-        :host {
-          --background-default: white;
-          --background-default-active: gray;
-          --secondary: #777;
-          --secondary-lighter: #aaa;
-          --chatlist-icon: #aaa;
-          background-color: var(--background-default);
-          cursor: pointer;
-          color: rgb(74, 74, 74);
-          padding: 0;
-          transition: max-height 0.4s ease, opacity 0.3s ease;
-          max-height: 500px;
-        }
-
-        :host([checked]) {
-          background-color: #eee;
-        }
-
-        :host(:hover) {
-          background-color: #f6f6f6;
-        }
-
-        .wa-option {
-          position: relative;
-          display: flex;
-          flex-direction: row;
-          height: 72px;
-          pointer-events: all;
-        }
-
-        .wa-option__image {
-          display: flex;
-          flex: none;
-          align-items: center;
-          margin-top: -1px;
-          padding: 0 15px 0 13px;
-        }
-
-        .wa-option__image-inner {
-          position: relative;
-          overflow: hidden;
-          background-color: var(--avatar-background);
-          border-radius: 50%;
-          height: 49px;
-          width: 49px;
-        }
-
-        .wa-option__image-inner img,
-        .wa-option__image-inner svg {
-          width: 100%;
-          height: 100%;
-        }
-
-        .wa-option__image-inner-inner {
-          position: absolute;
-          top: 0;
-          z-index: 1;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 100%;
-          height: 100%;
-        }
-
-        .wa-option__content {
-          display: flex;
-          flex-basis: auto;
-          flex-direction: column;
-          flex-grow: 1;
-          justify-content: center;
-          min-width: 0;
-          border-bottom: 1px solid #eee;
-          padding-right: 15px;
-        }
-
-        .wa-option__content-row1 {
-          display: flex;
-          align-items: center;
-          line-height: normal;
-          text-align: left;
-        }
-
-        .wa-option__content-row1-title {
-          display: flex;
-          flex-grow: 1;
-          overflow: hidden;
-          color: var(--primary-strong);
-          font-weight: 400;
-          font-size: 17px;
-          line-height: 21px;
-        }
-
-        .wa-option__content-row1-time {
-          line-height: 14px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          margin-left: 6px;
-          margin-top: 3px;
-
-          flex: none;
-          max-width: 100%;
-          color: var(--secondary-lighter);
-          font-size: 12px;
-          line-height: 20px;
-        }
-
-        .wa-option__content-row2 {
-          display: flex;
-          align-items: center;
-          min-height: 20px;
-          color: var(--secondary);
-          font-size: 13px;
-          line-height: 20px;
-          margin-top: 2px;
-          /* color: var(--secondary-stronger); */
-        }
-
-        .wa-option__content-row2-text {
-          flex-grow: 1;
-          overflow: hidden;
-          font-weight: 400;
-          font-size: 14px;
-          line-height: 20px;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-
-        .wa-option__content-row2-text-inner {
-          display: flex;
-          align-items: flex-start;
-        }
-
-        .wa-option__content-row2-text-inner-icon {
-          display: none;
-          flex: none;
-          color: var(--chatlist-icon);
-          vertical-align: top;
-          margin-right: 2px;
-        }
-
-        :host([is-user-text]) .wa-option__content-row2-text-inner-icon {
-          display: inline-block;
-        }
-
-        :host([is-user-text-read]) .wa-option__content-row2-text-inner-icon {
-          color: lightblue;
-        }
-        /*
+  static styles = [
+    ...super.styles,
+    css`
+      :host {
+        --background-default: white;
+        --background-default-active: gray;
+        --secondary: #777;
+        --secondary-lighter: #aaa;
+        --chatlist-icon: #aaa;
+        background-color: var(--background-default);
+        cursor: pointer;
+        color: rgb(74, 74, 74);
+        padding: 0;
+        transition: max-height 0.4s ease, opacity 0.3s ease;
+        max-height: 500px;
+      }
+
+      :host([checked]) {
+        background-color: #eee;
+      }
+
+      :host(:hover) {
+        background-color: #f6f6f6;
+      }
+
+      .wa-option {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        height: 72px;
+        pointer-events: all;
+      }
+
+      .wa-option__image {
+        display: flex;
+        flex: none;
+        align-items: center;
+        margin-top: -1px;
+        padding: 0 15px 0 13px;
+      }
+
+      .wa-option__image-inner {
+        position: relative;
+        overflow: hidden;
+        background-color: var(--avatar-background);
+        border-radius: 50%;
+        height: 49px;
+        width: 49px;
+      }
+
+      .wa-option__image-inner img,
+      .wa-option__image-inner svg {
+        width: 100%;
+        height: 100%;
+      }
+
+      .wa-option__image-inner-inner {
+        position: absolute;
+        top: 0;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+      }
+
+      .wa-option__content {
+        display: flex;
+        flex-basis: auto;
+        flex-direction: column;
+        flex-grow: 1;
+        justify-content: center;
+        min-width: 0;
+        border-bottom: 1px solid #eee;
+        padding-right: 15px;
+      }
+
+      .wa-option__content-row1 {
+        display: flex;
+        align-items: center;
+        line-height: normal;
+        text-align: left;
+      }
+
+      .wa-option__content-row1-title {
+        display: flex;
+        flex-grow: 1;
+        overflow: hidden;
+        color: var(--primary-strong);
+        font-weight: 400;
+        font-size: 17px;
+        line-height: 21px;
+      }
+
+      .wa-option__content-row1-time {
+        line-height: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin-left: 6px;
+        margin-top: 3px;
+
+        flex: none;
+        max-width: 100%;
+        color: var(--secondary-lighter);
+        font-size: 12px;
+        line-height: 20px;
+      }
+
+      .wa-option__content-row2 {
+        display: flex;
+        align-items: center;
+        min-height: 20px;
+        color: var(--secondary);
+        font-size: 13px;
+        line-height: 20px;
+        margin-top: 2px;
+        /* color: var(--secondary-stronger); */
+      }
+
+      .wa-option__content-row2-text {
+        flex-grow: 1;
+        overflow: hidden;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .wa-option__content-row2-text-inner {
+        display: flex;
+        align-items: flex-start;
+      }
+
+      .wa-option__content-row2-text-inner-icon {
+        display: none;
+        flex: none;
+        color: var(--chatlist-icon);
+        vertical-align: top;
+        margin-right: 2px;
+      }
+
+      :host([is-user-text]) .wa-option__content-row2-text-inner-icon {
+        display: inline-block;
+      }
+
+      :host([is-user-text-read]) .wa-option__content-row2-text-inner-icon {
+        color: lightblue;
+      }
+      /*
       .wa-option__content-row2-menu {
       } */
-      `,
-    ];
-  }
+    `,
+  ];
 
   render() {
     return html`<div class="wa-option">
@@ -285,59 +283,56 @@ class WaOption extends LionOption {
 customElements.define('wa-option', WaOption);
 
 class WaCombobox extends LionCombobox {
-  static get styles() {
-    return [
-      ...super.styles,
-      css`
-        :host {
-          font-family: SF Pro Text, SF Pro Icons, system, -apple-system, system-ui,
-            BlinkMacSystemFont, Helvetica Neue, Helvetica, Lucida Grande, Kohinoor Devanagari,
-            sans-serif;
-        }
-
-        .input-group__container {
-          display: flex;
-          border-bottom: none;
-        }
-
-        * > ::slotted([role='listbox']) {
-          max-height: none;
-        }
-
-        * > ::slotted([slot='input']) {
-          font-size: 14px;
-        }
-
-        .input-group {
-          padding: 15px;
-          background: #f6f6f6;
-        }
-
-        .input-group__prefix {
-          margin-right: 20px;
-          color: #999;
-          display: flex;
-        }
-
-        .input-group__container {
-          border-radius: 18px;
-          background: white;
-          padding: 7px;
-          padding-left: 16px;
-        }
-
-        /** Undo Popper */
-        #overlay-content-node-wrapper {
-          position: static !important;
-          width: auto !important;
-          transform: none !important;
-
-          /* height: 300px;
+  static styles = [
+    ...super.styles,
+    css`
+      :host {
+        font-family: SF Pro Text, SF Pro Icons, system, -apple-system, system-ui, BlinkMacSystemFont,
+          Helvetica Neue, Helvetica, Lucida Grande, Kohinoor Devanagari, sans-serif;
+      }
+
+      .input-group__container {
+        display: flex;
+        border-bottom: none;
+      }
+
+      * > ::slotted([role='listbox']) {
+        max-height: none;
+      }
+
+      * > ::slotted([slot='input']) {
+        font-size: 14px;
+      }
+
+      .input-group {
+        padding: 15px;
+        background: #f6f6f6;
+      }
+
+      .input-group__prefix {
+        margin-right: 20px;
+        color: #999;
+        display: flex;
+      }
+
+      .input-group__container {
+        border-radius: 18px;
+        background: white;
+        padding: 7px;
+        padding-left: 16px;
+      }
+
+      /** Undo Popper */
+      #overlay-content-node-wrapper {
+        position: static !important;
+        width: auto !important;
+        transform: none !important;
+
+        /* height: 300px;
           overflow: scroll; */
-        }
-      `,
-    ];
-  }
+      }
+    `,
+  ];
 
   get slots() {
     return {
@@ -360,7 +355,7 @@ class WaCombobox extends LionCombobox {
     /** @configure OverlayMixin */
     this.opened = true;
     /** @configure LionCombobox */
-    this.showAllOnEmpty = true;
+    this.showAllOnEmpty = false;
     /** @configure LionCombobox */
     this.rotateKeyboardNavigation = false;
   }

package/docs/components/combobox/use-cases.md

@@ -433,4 +433,4 @@ export const complexObjectChoiceValue = () => html` <complex-object-combobox
 ## Listbox compatibility
 
 All configurations that can be applied to `lion-listbox`, can be applied to `lion-combobox` as well.
-See the [listbox documentation](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/components/listbox/overview.md) for more information.
+See the [listbox documentation](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/listbox/overview.md) for more information.

package/docs/components/dialog/overview.md

@@ -54,6 +54,6 @@ import '@lion/ui/define/lion-dialog.js';
 ## Changing the configuration
 
 You can use the `.config` property on the dialog to change the configuration.
-The documentation of the full config object can be found in the `overlays` folder or here in [Overlay System - Configuration](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/fundamentals/systems/overlays/configuration.md).
+The documentation of the full config object can be found in the `overlays` folder or here in [Overlay System - Configuration](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/overlays/configuration.md).
 
 The `config` property uses a setter to merge the passed configuration with the current, so you only **overwrite what you pass** when updating `config`.

package/docs/components/fieldset/overview.md

@@ -20,9 +20,9 @@ export const main = () => html`
 
 We have three specific fieldset implementations:
 
-- [form](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/components/form/overview.md)
-- [checkbox-group](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/components/checkbox-group/overview.md)
-- [radio-group](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/components/radio-group/overview.md)
+- [form](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/form/overview.md)
+- [checkbox-group](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/checkbox-group/overview.md)
+- [radio-group](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/radio-group/overview.md)
 
 A native fieldset element should always have a legend-element for a11y purposes.
 However, our fieldset element is not native and should not have a legend-element.
@@ -31,8 +31,8 @@ Our fieldset instead has a label attribute or you can add a label with a div- or
 ## Features
 
 - Easy retrieval of form data based on field names
-- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/fundamentals/systems/form/interaction-states.md)
-- Can have [validate](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/form/interaction-states.md)
+- Can have [validate](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
 - Can disable input fields on fieldset level
 - Accessible out of the box
 

package/docs/components/form/overview.md

@@ -8,7 +8,7 @@ import '@lion/ui/define/lion-form.js';
 ```
 
 A web component that enhances the functionality of the native `form` component.
-It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/fundamentals/systems/form/overview.md).
+It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/form/overview.md).
 
 ```js preview-story
 export const main = () => html`
@@ -26,11 +26,11 @@ export const main = () => html`
 - Data synchronization with models
 - Easy retrieval of form data based on field names
 - Advanced validation possibilities
-- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/fundamentals/systems/form/interaction-states.md)
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/form/interaction-states.md)
 - Registration mechanism for form controls
 - Accessible out of the box
 
-For more information about fields that are designed for our `form`, please read [form system](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/fundamentals/systems/form/overview.md).
+For more information about fields that are designed for our `form`, please read [form system](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/form/overview.md).
 
 ## Installation
 

package/docs/components/icon/use-cases.md

@@ -26,7 +26,7 @@ icons.addIconResolver('lion', (iconset, name) => {
 ## Icon sets
 
 Icons are displayed using icon sets. These are collections of icons, lazily loaded on demand for performance.
-See the [system documentation](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
+See the [system documentation](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
 
 ```js preview-story
 export const iconSets = () => html`

package/docs/components/input/overview.md

@@ -23,7 +23,7 @@ export const main = () => html`<lion-input label="First Name"></lion-input>`;
   - **before**: does not have an active use case yet, but the option is in place.
   - **after**: can be used to show a currency or percentage.
 - Delegates attributes like `type`, `disabled`, `placeholder` and `readonly` to the native input.
-- Can make use of [validation](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/fundamentals/systems/form/validate.md).
+- Can make use of [validation](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/form/validate.md).
 
 ## Installation
 

package/docs/components/input-amount/overview.md

@@ -24,13 +24,13 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/components/input/overview.md)
-- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input/overview.md)
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
 - Option to show currency as a suffix
 - Option to override locale to change the formatting and parsing
 - Option to provide additional format options overrides
 - Default label in different languages
-- Can make use of number specific [validators](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Can make use of number specific [validators](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsNumber (default)
   - MinNumber
   - MaxNumber

package/docs/components/input-amount/use-cases.md

@@ -20,9 +20,9 @@ export const negativeNumber = () => html`
 `;
 ```
 
-## Set currency suffix
+## Set currency label
 
-You can optionally set a currency suffix with the `currency` attribute.
+You can optionally set a currency label with the `currency` attribute, which is visible in the after slot by default.
 
 ```js preview-story
 export const currencySuffix = () => html`
@@ -30,6 +30,8 @@ export const currencySuffix = () => html`
 `;
 ```
 
+> The slot of the currency label can be overwritten by changing the `_currencyDisplayNodeSlot` protected property, it can be prefix, suffix, before and after.
+
 ## Force locale
 
 Locale can be forced for a specific `lion-input-amount`. It will format the amount according to this locale.

package/docs/components/input-date/overview.md

@@ -16,11 +16,11 @@ export const main = () => html` <lion-input-date label="Date"></lion-input-date>
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/components/input/overview.md)
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input/overview.md)
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
 - Option to override locale to change the formatting and parsing
 - Default label in different languages
-- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate

package/docs/components/input-datepicker/overview.md

@@ -2,7 +2,7 @@
 
 A web component based on the date text input field. Its purpose is to provide a way for users to fill in a date with a datepicker.
 For an input field with a big range, such as `birthday-input`, a datepicker is not the best choice due to the high variance between possible inputs.
-We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/components/input-date/overview.md) for this.
+We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input-date/overview.md) for this.
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -18,11 +18,11 @@ export const main = () => {
 ## Features
 
 - Input field with a datepicker to help to choose a date
-- Based on our [input-date](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/components/input-date/overview.md)
-- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/components/calendar/overview.md) inside the datepicker
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
+- Based on our [input-date](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input-date/overview.md)
+- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/calendar/overview.md) inside the datepicker
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
 - Option to overwrite locale to change the formatting and parsing
-- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate

package/docs/components/input-datepicker/use-cases.md

@@ -76,3 +76,14 @@ export const readOnly = () => html`
   </lion-input-datepicker>
 `;
 ```
+
+## Faulty prefilled
+
+Faulty prefilled input will be cleared
+
+```js preview-story
+export const faultyPrefilled = () => html`
+  <lion-input-datepicker label="Faulty prefiiled" .modelValue="${new Date('30/01/2022')}">
+  </lion-input-datepicker>
+`;
+```

package/docs/components/input-email/overview.md

@@ -15,8 +15,8 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/components/input/overview.md)
-- Makes use of email [validators](https://github.com/ing-bank/lion/blob/7b2a234c6c05397bc2e2e944c5efbdea08d09d2b/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Based on our [input](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input/overview.md)
+- Makes use of email [validators](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsEmail (default)
 
 ## Installation

package/docs/components/input-file/index.md

@@ -0,0 +1,3 @@
+# Input File ||20
+
+-> go to Overview