@lion/ui 0.5.3 → 0.5.5

package/docs/components/checkbox-group/overview.md

@@ -19,11 +19,11 @@ import '@lion/ui/define/lion-checkbox.js';
 </lion-checkbox-group>
 ```
 
-> Make sure that the checkbox-group also has a name attribute, this is necessary for our [form](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/form/overview.md)'s serialization result.
+> Make sure that the checkbox-group also has a name attribute, this is necessary for our [form](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/form/overview.md)'s serialization result.
 
 ## Features
 
-Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/fieldset/overview.md),
+Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/fieldset/overview.md),
 it has all the features a fieldset has.
 
 ## Installation

package/docs/components/collapsible/overview.md

@@ -22,7 +22,7 @@ export const main = () => html`
 ## Features
 
 - Use `opened` attribute or `toggle()` method to render default open.
-- `invoker` slot can be custom template e.g. our [button](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/button/overview.md) or native `button` with custom styling.
+- `invoker` slot can be custom template e.g. our [button](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/button/overview.md) or native `button` with custom styling.
 - Observe the state with the help of `@opened-changed` event.
 - `show()` and `hide()` are helper methods to hide or show the content from outside.
 

package/docs/components/combobox/overview.md

@@ -33,7 +33,7 @@ export const main = () => html`
 `;
 ```
 
-[...show more](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/combobox/extensions.md)
+[...show more](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/combobox/extensions.md)
 
 ## Features
 

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

@@ -456,4 +456,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/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/listbox/overview.md) for more information.
+See the [listbox documentation](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/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/38c495ba1fde292e3f78d5d41676c669338afb46/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/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/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/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/form/overview.md)
-- [checkbox-group](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/checkbox-group/overview.md)
-- [radio-group](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/radio-group/overview.md)
+- [form](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/form/overview.md)
+- [checkbox-group](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/checkbox-group/overview.md)
+- [radio-group](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/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/38c495ba1fde292e3f78d5d41676c669338afb46/docs/fundamentals/systems/form/interaction-states.md)
-- Can have [validate](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/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/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/fundamentals/systems/form/interaction-states.md)
+- Can have [validate](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/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/38c495ba1fde292e3f78d5d41676c669338afb46/docs/fundamentals/systems/form/overview.md).
+It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/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/38c495ba1fde292e3f78d5d41676c669338afb46/docs/fundamentals/systems/form/interaction-states.md)
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/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/38c495ba1fde292e3f78d5d41676c669338afb46/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/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/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/38c495ba1fde292e3f78d5d41676c669338afb46/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
+See the [system documentation](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/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/38c495ba1fde292e3f78d5d41676c669338afb46/docs/fundamentals/systems/form/validate.md).
+- Can make use of [validation](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/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/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/input/overview.md)
-- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/input/overview.md)
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/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/38c495ba1fde292e3f78d5d41676c669338afb46/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/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsNumber (default)
   - MinNumber
   - MaxNumber

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/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/input/overview.md)
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/input/overview.md)
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/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/38c495ba1fde292e3f78d5d41676c669338afb46/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/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/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/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/input-date/overview.md) for this.
+We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/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/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/input-date/overview.md)
-- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/calendar/overview.md) inside the datepicker
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
+- Based on our [input-date](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/input-date/overview.md)
+- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/calendar/overview.md) inside the datepicker
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/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/38c495ba1fde292e3f78d5d41676c669338afb46/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/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate

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/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/input/overview.md)
-- Makes use of email [validators](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Based on our [input](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/input/overview.md)
+- Makes use of email [validators](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsEmail (default)
 
 ## Installation

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

@@ -15,7 +15,7 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/input/overview.md)
+- Based on our [input](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/input/overview.md)
 - Default labels and validation messages in different languages
 - Options for multi file upload and drop-zone.
 

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

@@ -106,7 +106,7 @@ When file has to be uploaded as soon as it is selected by the user. Use `file-li
 export const basicFileUpload = () => {
   return html`
     <lion-input-file
-      label="Label"
+      label="Passport"
       max-file-size="1024000"
       accept=".jpg,.svg,.xml,image/svg+xml"
       @file-list-changed="${ev => {
@@ -131,7 +131,7 @@ export const acceptValidator = () => {
   return html`
     <lion-input-file
       accept=".jpg,.svg,.xml,image/svg+xml"
-      label="Upload"
+      label="Passport"
       enable-drop-zone
       @file-list-changed="${ev => {
         console.log(ev.detail.newFiles);
@@ -151,7 +151,7 @@ export const sizeValidator = () => {
   return html`
     <lion-input-file
       max-file-size="2048"
-      label="Upload"
+      label="Passport"
       @file-list-changed="${ev => {
         console.log(ev.detail.newFiles);
       }}"
@@ -169,7 +169,7 @@ When file has to be uploaded as soon as it is selected by the user. Use `file-li
 export const multipleFileUpload = () => {
   return html`
     <lion-input-file
-      label="Upload"
+      label="Passport"
       name="upload"
       multiple
       max-file-size="1024000"
@@ -203,7 +203,7 @@ On every reload of page, the file upload component reverts to the initial state
 export const prefilledState = () => {
   return html`
     <lion-input-file
-      label="Upload"
+      label="Passport"
       name="myFiles"
       multiple
       .validators="${[new Required()]}"
@@ -272,7 +272,7 @@ export const withIngForm = () => {
   return html`
     <form @submit="${myFormSubmit}" @reset="${myFormReset}">
       <lion-input-file
-        label="Upload"
+        label="Passport"
         name="upload"
         multiple
         .validators="${[new Required(), new FilenameLengthValidator({ maxFilenameLength: 20 })]}"
@@ -321,7 +321,7 @@ Below is the flow:
 export const uploadWithoutFormSubmit = () => {
   return html`
     <lion-input-file
-      label="Upload"
+      label="Passport"
       name="upload"
       multiple
       upload-on-select
@@ -393,7 +393,7 @@ Drag and drop the files to be uploaded to the server.
 export const dragAndDrop = () => {
   return html`
     <lion-input-file
-      label="Upload"
+      label="Passport"
       name="myFiles"
       accept=".png"
       max-file-size="1024000"

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

@@ -16,9 +16,9 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/input/overview.md)
+- Based on our [input](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/input/overview.md)
 - Default label in different languages
-- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsIBAN (default)
   - IsCountryIBAN
 - Parses IBANs automatically

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

@@ -7,19 +7,17 @@ import { html } from '@mdjs/mdjs-preview';
 import '@lion/ui/define/lion-input-range.js';
 ```
 
-```js preview-story
-export const main = () => html`
-  <lion-input-range min="200" max="500" .modelValue="${300}" label="Input range"></lion-input-range>
-`;
+```html preview-story
+<lion-input-range min="200" max="500" .modelValue="${300}" label="Input range"></lion-input-range>
 ```
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/input/overview.md).
+- Based on our [input](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/input/overview.md).
 - Shows `modelValue` and `unit` above the range input.
 - Shows `min` and `max` value after the range input.
 - Can hide the `min` and `max` value via `no-min-max-labels`.
-- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
 
 ## Installation
 

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

@@ -7,66 +7,58 @@ import '@lion/ui/define/lion-input-range.js';
 
 ## Units
 
-```js preview-story
-export const units = () => html`
-  <style>
-    lion-input-range {
-      max-width: 400px;
-    }
-  </style>
-  <lion-input-range
-    min="0"
-    max="100"
-    .modelValue="${50}"
-    unit="%"
-    label="Percentage"
-  ></lion-input-range>
-`;
+```html preview-story
+<style>
+  lion-input-range {
+    max-width: 400px;
+  }
+</style>
+<lion-input-range
+  min="0"
+  max="100"
+  .modelValue="${50}"
+  unit="%"
+  label="Percentage"
+></lion-input-range>
 ```
 
 ## Steps
 
-```js preview-story
-export const steps = () => html`
-  <lion-input-range
-    style="max-width: 400px;"
-    min="200"
-    max="500"
-    step="50"
-    .modelValue="${300}"
-    label="Input range"
-    help-text="This slider uses increments of 50"
-  ></lion-input-range>
-`;
+```html preview-story
+<lion-input-range
+  style="max-width: 400px;"
+  min="200"
+  max="500"
+  step="50"
+  .modelValue="${300}"
+  label="Input range"
+  help-text="This slider uses increments of 50"
+></lion-input-range>
 ```
 
 ## Without Min Max Labels
 
-```js preview-story
-export const noMinMaxLabels = () => html`
-  <lion-input-range
-    style="max-width: 400px;"
-    no-min-max-labels
-    min="0"
-    max="100"
-    label="Input range"
-  ></lion-input-range>
-`;
+```html preview-story
+<lion-input-range
+  style="max-width: 400px;"
+  no-min-max-labels
+  min="0"
+  max="100"
+  label="Input range"
+></lion-input-range>
 ```
 
 ## Disabled
 
-```js preview-story
-export const disabled = () => html`
-  <lion-input-range
-    style="max-width: 400px;"
-    disabled
-    min="200"
-    max="500"
-    .modelValue="${300}"
-    label="Input range"
-  ></lion-input-range>
-`;
+```html preview-story
+<lion-input-range
+  style="max-width: 400px;"
+  disabled
+  min="200"
+  max="500"
+  .modelValue="${300}"
+  label="Input range"
+></lion-input-range>
 ```
 
 ## Range Styles

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

@@ -4,21 +4,21 @@ A web component that enables the user to increase and decrease a numeric value b
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
+import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
 import '@lion/ui/define/lion-input-stepper.js';
+loadDefaultFeedbackMessages();
 ```
 
-```js preview-story
-export const main = () => html`
-  <lion-input-stepper max="5" min="0" name="count">
-    <label slot="label">RSVP</label>
-    <div slot="help-text">Max. 5 guests</div>
-  </lion-input-stepper>
-`;
+```html preview-story
+<lion-input-stepper max="5" min="0" name="count">
+  <label slot="label">RSVP</label>
+  <div slot="help-text">Max. 5 guests</div>
+</lion-input-stepper>
 ```
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/input/overview.md).
+- Based on our [input](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/input/overview.md).
 - Set `min` and `max` value to define the range.
 - Set `step` value in integer or decimal to increase and decrease the value.
 - Use `ArrowUp` or `ArrowDown` to update the value.

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

@@ -2,40 +2,49 @@
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
+import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
 import '@lion/ui/define/lion-input-stepper.js';
+loadDefaultFeedbackMessages();
 ```
 
-## Default with no specification
+## Default
 
 When no range or step is defined, it can go infinite with default step value as `1`. You can also specify prefix content using `after` slot.
 
-```js preview-story
-export const defaultMode = () => html`
-  <label>How old is the existence?</label>
-  <lion-input-stepper name="year">
-    <div slot="after">In Billion Years</div>
-  </lion-input-stepper>
-`;
+```html preview-story
+<lion-input-stepper name="year">
+  <label slot="label">How old is the existence?</label>
+  <div slot="after" data-description>In Billion Years</div>
+</lion-input-stepper>
 ```
 
-## Step and Value
+## Attributes & Properties
+
+### Step and Value
 
 Use `step` attribute to specify the incrementor or decrementor difference and `value` to set the default value.
 
-```js preview-story
-export const steps = () => html`
-  <p><strong>Min:</strong> 100, <strong>Value:</strong> 200, <strong>Step:</strong> 100</p>
-  <lion-input-stepper min="100" step="100" name="value" value="200"></lion-input-stepper>
-`;
+```html preview-story
+<lion-input-stepper
+  label="Amount of oranges"
+  min="100"
+  step="100"
+  name="value"
+  value="200"
+></lion-input-stepper>
 ```
 
-## Range
+### Range
 
-Use `min` and `max` attribute to specify range.
+Use `min` and `max` attribute to specify a range.
 
-```js preview-story
-export const range = () => html`
-  <p><strong>Min:</strong> 200, <strong>Max:</strong> 500, <strong>Step:</strong> 100</p>
-  <lion-input-stepper min="200" max="500" name="value" step="100" value="200"></lion-input-stepper>
-`;
+```html preview-story
+<lion-input-stepper
+  label="Amount of oranges"
+  min="200"
+  max="500"
+  name="value"
+  step="100"
+  value="200"
+></lion-input-stepper>
 ```

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

@@ -39,7 +39,7 @@ export const main = () => {
 
 ## Features
 
-- Extends our [input](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/input/overview.md)
+- Extends our [input](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/input/overview.md)
 - Shows a mobile telephone keypad on mobile (by having a native `<input inputmode="tel">` inside)
 - Can be configured with a list of allowed region codes
 - Will be preconfigured with region derived from locale

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

@@ -22,7 +22,7 @@ Say we have the following telephone number from Madrid, Spain: `+34919930432`.
 It contains a [country code](https://en.wikipedia.org/wiki/Country_code) (34), an [area code](https://en.wikipedia.org/wiki/Telephone_numbering_plan#Area_code) (91) and a [dial code](https://en.wikipedia.org/wiki/Mobile_dial_code) (+34 91).
 Input Tel interprets phone numbers based on their [region code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2): a two character long region representation('ES' in the telephone number above).
 
-The table below lists all possible regions worldwide. When [allowed regions](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/input-tel/#allowed-regions) are not configured,
+The table below lists all possible regions worldwide. When [allowed regions](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/input-tel/#allowed-regions) are not configured,
 all of them will be supported as values of Input Tel.
 
 ```js story
@@ -37,11 +37,11 @@ export const regionCodesTable = () => {
 The active region (accessible via readonly accessor `.activeRegion`) determines how validation and formatting
 should be applied. It is dependent on the following factors:
 
-- [allowed regions](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/input-tel/#allowed-regions): a list that determines what is allowed to become .activeRegion. If
-  [.allowedRegions has only one entry](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/input-tel/#restrict-to-one-region), .activeRegion will always be this value.
+- [allowed regions](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/input-tel/#allowed-regions): a list that determines what is allowed to become .activeRegion. If
+  [.allowedRegions has only one entry](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/input-tel/#restrict-to-one-region), .activeRegion will always be this value.
 - the modelValue or viewValue: once it contains sufficient info to derive its region code (and
-  the derived code is inside [allowed regions](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/input-tel/#allowed-regions) if configured)
-- active locale (and the derived locale is inside [allowed regions](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/input-tel/#allowed-regions) if configured)
+  the derived code is inside [allowed regions](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/input-tel/#allowed-regions) if configured)
+- active locale (and the derived locale is inside [allowed regions](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/input-tel/#allowed-regions) if configured)
 
 What follows from the list above is that .activeRegion can change dynamically, after a value
 change in the text box by the user (or when locales or allowed regions would be changed by the
@@ -130,7 +130,7 @@ export const heuristic = () => {
 Once it is configured, validation and formatting will be restricted to those
 values that are present in this list.
 
-> Note that for [InputTelDropdown](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/input-tel-dropdown/index.md), only allowed regions will
+> Note that for [InputTelDropdown](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/input-tel-dropdown/index.md), only allowed regions will
 > be shown in the dropdown list.
 
 ```js preview-story

package/docs/components/input-tel-dropdown/overview.md

@@ -19,7 +19,7 @@ export const main = () => {
 
 ## Features
 
-- Extends our [input-tel](https://github.com/ing-bank/lion/blob/38c495ba1fde292e3f78d5d41676c669338afb46/docs/components/input-tel/overview.md)
+- Extends our [input-tel](https://github.com/ing-bank/lion/blob/a99f2e1dbfa5889d3f93ea39cd9c5aa84cc5b629/docs/components/input-tel/overview.md)
 - Shows dropdown list with all possible regions
 - Shows only allowed regions in dropdown list when .allowedRegions is configured
 - Highlights regions on top of dropdown list when .preferredRegions is configured