@lion/ui 0.7.8 → 0.8.0

package/docs/components/accordion/api-table.md

@@ -4,10 +4,11 @@
 
 ### Fields
 
-| Name           | Privacy | Type     | Default | Description                                 | Inherited From |
-| -------------- | ------- | -------- | ------- | ------------------------------------------- | -------------- |
-| `focusedIndex` | public  | `number` |         | index number of the focused accordion       |                |
-| `expanded`     | public  | `array`  |         | array of indices of the expanded accordions |                |
+| Name           | Privacy | Type      | Default | Description                                                            | Inherited From |
+| -------------- | ------- | --------- | ------- | ---------------------------------------------------------------------- | -------------- |
+| `focusedIndex` | public  | `number`  |         | index number of the focused accordion                                  |                |
+| `expanded`     | public  | `array`   |         | array of indices of the expanded accordions                            |                |
+| `exclusive`    | public  | `boolean` | `false` | exclusive property allows only one accordion slot to be open at a time |                |
 
 ### Methods
 
@@ -27,5 +28,6 @@
 | -------------- | ------------ | -------------- |
 | `focusedIndex` | focusedIndex |                |
 | `expanded`     | expanded     |                |
+| `exclusive`    | exclusive    |                |
 
 <hr/>

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

@@ -15,7 +15,7 @@ All accordion panels are collapsed by default.
   <h3 slot="invoker">
     <button>Sensory Factors</button>
   </h3>
-  <div slot="content" class="lion-paragraph-container">
+  <div slot="content">
     <p>
       The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas
       orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones,
@@ -52,7 +52,7 @@ Multiple accordion panels can be expanded at the same time. When content drops o
   <h3 slot="invoker">
     <button>Sensory Factors</button>
   </h3>
-  <div slot="content" class="lion-paragraph-container">
+  <div slot="content">
     <p>
       The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas
       orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones,
@@ -92,7 +92,7 @@ The invoker and content slots are ordered by DOM order. This means you can put a
   <h3 slot="invoker">
     <button>Nutritional value</button>
   </h3>
-  <div slot="content" class="lion-paragraph-container">
+  <div slot="content">
     <p>
       The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas
       orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones,
@@ -129,7 +129,7 @@ A header can be multiline.
       <small>or the experience of taste</small>
     </button>
   </h3>
-  <div slot="content" class="lion-paragraph-container">
+  <div slot="content">
     <p>
       The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas
       orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones,
@@ -160,6 +160,45 @@ A header can be multiline.
 </lion-accordion>
 ```
 
+## Exclusive
+
+Sometimes, it might be required to show only one expanded slot of the accordion at a time. For such instances, we have a feature called 'exclusive'. This allows the accordion to open only one and a time and closes the open slot when a new slot is clicked upon.
+
+This field takes in a Boolean value, which by default is false.
+
+```html preview-story
+<lion-accordion exclusive>
+  <h3 slot="invoker">
+    <button>This collapsible closes all other ones</button>
+  </h3>
+  <div slot="content">
+    <p>
+      The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas
+      orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones,
+      terpenes, and esters. Bitter limonoid compounds, such as limonin, decrease gradually during
+      development, whereas volatile aroma compounds tend to peak in mid– to late–season development.
+      Taste quality tends to improve later in harvests when there is a higher sugar/acid ratio with
+      less bitterness. As a citrus fruit, the orange is acidic, with pH levels ranging from 2.9 to
+      4.0.
+    </p>
+
+    <p>
+      Sensory qualities vary according to genetic background, environmental conditions during
+      development, ripeness at harvest, postharvest conditions, and storage duration.
+    </p>
+  </div>
+  <h3 slot="invoker">
+    <button>Same for this collapsible</button>
+  </h3>
+  <div slot="content">
+    Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat (table).
+    In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich source of
+    vitamin C, providing 64% of the Daily Value. No other micronutrients are present in significant
+    amounts (table).
+  </div>
+</lion-accordion>
+```
+
 ## Distribute New Elements
 
 Below, we demonstrate how you could dynamically add a new invoker + content.

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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/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/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/form/overview.md)'s serialization result.
 
 ## Features
 
-Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/fieldset/overview.md),
+Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/fieldset/overview.md),
 it has all the features a fieldset has.
 
 ## Installation

package/docs/components/checkbox-group/use-cases.md

@@ -31,10 +31,7 @@ Our recommendation would be to set the `name` attribute only on the `lion-checkb
 ## Example
 
 ```html
-<lion-checkbox-group
-  name="scientists[]"
-  label="Favorite scientists"
->
+<lion-checkbox-group name="scientists[]" label="Favorite scientists">
   <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
   <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
   <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
@@ -49,7 +46,7 @@ You can pre-select options by targeting the `modelValue` object of the option an
 <lion-checkbox-group name="scientists" label="Favorite scientists">
   <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
   <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}" checked></lion-checkbox>
-    <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
+  <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
 </lion-checkbox-group>
 ```
 
@@ -61,7 +58,7 @@ You can disable the entire group by setting the `disabled` attribute on the `<li
 <lion-checkbox-group name="scientists[]" label="Favorite scientists" disabled>
   <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
   <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
-    <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
+  <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
 </lion-checkbox-group>
 ```
 
@@ -145,25 +142,13 @@ A `checkbox-indeterminate`'s value is neither true nor false, but is instead ind
 ```html preview-story
 <lion-checkbox-group name="scientists[]" label="Favorite scientists">
   <lion-checkbox-indeterminate label="Old Greek scientists">
-    <lion-checkbox
-      label="Archimedes"
-      .choiceValue="${'Archimedes'}"
-    ></lion-checkbox>
-    <lion-checkbox  label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
-    <lion-checkbox
-      label="Pythagoras"
-      .choiceValue="${'Pythagoras'}"
-    ></lion-checkbox>
+    <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
+    <lion-checkbox label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
+    <lion-checkbox label="Pythagoras" .choiceValue="${'Pythagoras'}"></lion-checkbox>
   </lion-checkbox-indeterminate>
   <lion-checkbox-indeterminate label="17th Century scientists">
-    <lion-checkbox
-      label="Isaac Newton"
-      .choiceValue="${'Isaac Newton'}"
-    ></lion-checkbox>
-    <lion-checkbox
-      label="Galileo Galilei"
-      .choiceValue="${'Galileo Galilei'}"
-    ></lion-checkbox>
+    <lion-checkbox label="Isaac Newton" .choiceValue="${'Isaac Newton'}"></lion-checkbox>
+    <lion-checkbox label="Galileo Galilei" .choiceValue="${'Galileo Galilei'}"></lion-checkbox>
   </lion-checkbox-indeterminate>
 </lion-checkbox-group>
 ```
@@ -173,24 +158,12 @@ The `checkbox-indeterminate` can have another `checkbox-indeterminate` as a chil
 ```html preview-story
 <lion-checkbox-group name="scientists[]" label="Favorite scientists">
   <lion-checkbox-indeterminate label="Scientists">
-    <lion-checkbox
-      label="Isaac Newton"
-      .choiceValue="${'Isaac Newton'}"
-    ></lion-checkbox>
-    <lion-checkbox
-      label="Galileo Galilei"
-      .choiceValue="${'Galileo Galilei'}"
-    ></lion-checkbox>
-    <lion-checkbox-indeterminate  label="Old Greek scientists">
-      <lion-checkbox
-        label="Archimedes"
-        .choiceValue="${'Archimedes'}"
-      ></lion-checkbox>
-      <lion-checkbox  label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
-      <lion-checkbox
-        label="Pythagoras"
-        .choiceValue="${'Pythagoras'}"
-      ></lion-checkbox>
+    <lion-checkbox label="Isaac Newton" .choiceValue="${'Isaac Newton'}"></lion-checkbox>
+    <lion-checkbox label="Galileo Galilei" .choiceValue="${'Galileo Galilei'}"></lion-checkbox>
+    <lion-checkbox-indeterminate label="Old Greek scientists">
+      <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
+      <lion-checkbox label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
+      <lion-checkbox label="Pythagoras" .choiceValue="${'Pythagoras'}"></lion-checkbox>
     </lion-checkbox-indeterminate>
   </lion-checkbox-indeterminate>
 </lion-checkbox-group>
@@ -201,24 +174,12 @@ You can also use `mixed-state` attribute so your indeterminate checkbox toggles
 ```html preview-story
 <lion-checkbox-group name="scientists[]" label="Favorite scientists">
   <lion-checkbox-indeterminate mixed-state label="Scientists">
-    <lion-checkbox
-      label="Isaac Newton"
-      .choiceValue="${'Isaac Newton'}"
-    ></lion-checkbox>
-    <lion-checkbox
-      label="Galileo Galilei"
-      .choiceValue="${'Galileo Galilei'}"
-    ></lion-checkbox>
-    <lion-checkbox-indeterminate mixed-state  label="Old Greek scientists">
-      <lion-checkbox
-        label="Archimedes"
-        .choiceValue="${'Archimedes'}"
-      ></lion-checkbox>
-      <lion-checkbox  label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
-      <lion-checkbox
-        label="Pythagoras"
-        .choiceValue="${'Pythagoras'}"
-      ></lion-checkbox>
+    <lion-checkbox label="Isaac Newton" .choiceValue="${'Isaac Newton'}"></lion-checkbox>
+    <lion-checkbox label="Galileo Galilei" .choiceValue="${'Galileo Galilei'}"></lion-checkbox>
+    <lion-checkbox-indeterminate mixed-state label="Old Greek scientists">
+      <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
+      <lion-checkbox label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
+      <lion-checkbox label="Pythagoras" .choiceValue="${'Pythagoras'}"></lion-checkbox>
     </lion-checkbox-indeterminate>
   </lion-checkbox-indeterminate>
 </lion-checkbox-group>

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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/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/370b357bd3ab5667616801c496f59c79d71585ba/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

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

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

@@ -371,9 +371,8 @@ class DemoServerSide extends LitElement {
         .helpText="Returned from server: [${this.options.join(', ')}]"
       >
         <label slot="label" aria-live="polite"
-          >Server side completion ${this.loading
-            ? html`<span style="font-style: italic;">(loading...)</span>`
-            : ''}</label
+          >Server side completion
+          ${this.loading ? html`<span style="font-style: italic;">(loading...)</span>` : ''}</label
         >
         ${repeat(
           this.options,
@@ -458,4 +457,4 @@ export const complexObjectChoiceValue = () =>
 ## 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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/listbox/overview.md) for more information.
+See the [listbox documentation](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/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/370b357bd3ab5667616801c496f59c79d71585ba/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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/form/overview.md)
-- [checkbox-group](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/checkbox-group/overview.md)
-- [radio-group](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/radio-group/overview.md)
+- [form](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/form/overview.md)
+- [checkbox-group](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/checkbox-group/overview.md)
+- [radio-group](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/form/interaction-states.md)
-- Can have [validate](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/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/370b357bd3ab5667616801c496f59c79d71585ba/docs/fundamentals/systems/form/interaction-states.md)
+- Can have [validate](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/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/fieldset/use-cases.md

@@ -41,7 +41,12 @@ export const disabled = () => {
       <lion-input name="FirstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
       <lion-input name="LastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
       <lion-fieldset name="nameGroup2" label="Name">
-        <lion-input name="FirstName2" label="First Name" .modelValue="${'Foo'}" disabled></lion-input>
+        <lion-input
+          name="FirstName2"
+          label="First Name"
+          .modelValue="${'Foo'}"
+          disabled
+        ></lion-input>
         <lion-input name="LastName2" label="Last Name" .modelValue="${'Bar'}"></lion-input>
       </lion-fieldset>
     </lion-fieldset>
@@ -70,7 +75,9 @@ export const nestingFieldsets = () => html`
       Log everything to Action Logger
     </button>
     <br />
-    <button @click="${ev => console.log(ev.target.parentElement.formElements.nameGroup.modelValue)}">
+    <button
+      @click="${ev => console.log(ev.target.parentElement.formElements.nameGroup.modelValue)}"
+    >
       Log only Name fieldset to Action Logger
     </button>
   </lion-fieldset>

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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/form/overview.md).
+It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/docs/fundamentals/systems/form/overview.md).
 
 ```js preview-story
 export const main = () => {
@@ -37,11 +37,11 @@ export const main = () => {
 - 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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/form/interaction-states.md)
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/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/370b357bd3ab5667616801c496f59c79d71585ba/docs/fundamentals/systems/form/overview.md).
 
 ## Installation
 

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

@@ -55,7 +55,8 @@ export const formSubmit = () => {
           <button>Submit</button>
           <button
             type="button"
-            @click="${ev => ev.currentTarget.parentElement.parentElement.parentElement.resetGroup()}"
+            @click="${ev =>
+              ev.currentTarget.parentElement.parentElement.parentElement.resetGroup()}"
           >
             Reset
           </button>

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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
+See the [system documentation](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/form/validate.md).
+- Can make use of [validation](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/input/overview.md)
-- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/input/overview.md)
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/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/370b357bd3ab5667616801c496f59c79d71585ba/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

@@ -96,10 +96,10 @@ export const noDecimals = () => html`
   <lion-input-amount
     label="Amount"
     help-text="Prefilled and formatted"
-    .formatOptions="${({
+    .formatOptions="${{
       minimumFractionDigits: 0,
       maximumFractionDigits: 0,
-    })}"
+    }}"
     .modelValue="${20}"
   >
   </lion-input-amount>

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

@@ -16,11 +16,11 @@ import '@lion/ui/define/lion-input-date.js';
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/input/overview.md)
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/input/overview.md)
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/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/370b357bd3ab5667616801c496f59c79d71585ba/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate

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

@@ -58,12 +58,13 @@ export const withMinimumAndMaximumDate = () => {
     <lion-input-date
       label="MinMaxDate"
       .modelValue="${new Date('2018/05/30')}"
-      .validators="${[new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') })]}"
+      .validators="${[
+        new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') }),
+      ]}"
     >
       <div slot="help-text">
-        Enter a date between ${formatDate(new Date('2018/05/24'))} and ${formatDate(
-          new Date('2018/06/24'),
-        )}.
+        Enter a date between ${formatDate(new Date('2018/05/24'))} and
+        ${formatDate(new Date('2018/06/24'))}.
       </div>
     </lion-input-date>
   `;

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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/input-date/overview.md) for this.
+We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/input-date/overview.md)
-- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/calendar/overview.md) inside the datepicker
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
+- Based on our [input-date](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/input-date/overview.md)
+- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/calendar/overview.md) inside the datepicker
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/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/370b357bd3ab5667616801c496f59c79d71585ba/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

@@ -21,9 +21,8 @@ export const minimumAndMaximumDate = () => html`
     .validators="${[new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') })]}"
   >
     <div slot="help-text">
-      Enter a date between ${formatDate(new Date('2018/05/24'))} and ${formatDate(
-        new Date('2018/06/24'),
-      )}.
+      Enter a date between ${formatDate(new Date('2018/05/24'))} and
+      ${formatDate(new Date('2018/06/24'))}.
     </div>
   </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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/input/overview.md)
-- Makes use of email [validators](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Based on our [input](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/input/overview.md)
+- Makes use of email [validators](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/input/overview.md)
+- Based on our [input](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/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-iban/overview.md

@@ -16,9 +16,9 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/input/overview.md)
+- Based on our [input](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/input/overview.md)
 - Default label in different languages
-- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/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/370b357bd3ab5667616801c496f59c79d71585ba/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

@@ -13,11 +13,11 @@ import '@lion/ui/define/lion-input-range.js';
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/input/overview.md).
+- Based on our [input](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
 
 ## Installation
 

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

@@ -18,7 +18,7 @@ loadDefaultFeedbackMessages();
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/input/overview.md).
+- Based on our [input](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/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-tel/overview.md

@@ -39,7 +39,7 @@ export const main = () => {
 
 ## Features
 
-- Extends our [input](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/input/overview.md)
+- Extends our [input](https://github.com/ing-bank/lion/blob/370b357bd3ab5667616801c496f59c79d71585ba/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