@lion/ui 0.3.0 → 0.3.2

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

@@ -11,21 +11,19 @@ import '@lion/ui/define/lion-checkbox-group.js';
 import '@lion/ui/define/lion-checkbox.js';
 ```
 
-```js preview-story
-export const main = () => html`
-  <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>
-  </lion-checkbox-group>
-`;
+```html preview-story
+<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>
+</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/951de3e9b282ce8b8797f9aae890f125f96ee5ce/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/91b582d8c9597873621e40ba61de7e90b0ae20ec/docs/components/form/overview.md)'s serialization result.
 
 ## Features
 
-Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/fieldset/overview.md),
+Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/docs/components/fieldset/overview.md),
 it has all the features a fieldset has.
 
 ## Installation
@@ -36,5 +34,6 @@ npm i --save @lion/ui
 
 ```js
 import '@lion/ui/define/lion-checkbox-group.js';
+import '@lion/ui/define/lion-checkbox-indeterminate.js';
 import '@lion/ui/define/lion-checkbox.js';
 ```

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

@@ -45,86 +45,72 @@ Our recommendation would be to set the `name` attribute only on the `lion-checkb
 
 You can pre-select options by targeting the `modelValue` object of the option and setting the `checked` property to `true`.
 
-```js preview-story
-export const preselect = () => html`
-  <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"
-      .modelValue=${{ value: 'Marie Curie', checked: true }}
-    ></lion-checkbox>
-  </lion-checkbox-group>
-`;
+```html preview-story
+<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-group>
 ```
 
 ## Disabled
 
 You can disable the entire group by setting the `disabled` attribute on the `<lion-checkbox-group>`.
 
-```js preview-story
-export const disabled = () => html`
-  <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"
-      .modelValue=${{ value: 'Marie Curie', checked: true }}
-    ></lion-checkbox>
-  </lion-checkbox-group>
-`;
+```html preview-story
+<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-group>
 ```
 
 ## Label
 
 You can use `slot="label"` instead of the `label` attribute for defining more complex labels, such as containing screen reader only text or an anchor.
 
-```js preview-story
-export const label = () => html`
-  <lion-checkbox-group name="scientists[]" label="Favorite scientists">
-    <lion-checkbox .choiceValue=${'Archimedes'}>
-      <label slot="label"
-        ><a href="https://wikipedia.org/wiki/Archimedes" target="_blank">Archimedes</a></label
-      >
-    </lion-checkbox>
-    <lion-checkbox .choiceValue=${'Francis Bacon'}>
-      <label slot="label"
-        ><a href="https://wikipedia.org/wiki/Francis_Bacon" target="_blank">Francis Bacon</a></label
-      >
-    </lion-checkbox>
-    <lion-checkbox .choiceValue=${'Marie Curie'}>
-      <label slot="label"
-        ><a href="https://wikipedia.org/wiki/Marie_Curie" target="_blank">Marie Curie</a></label
-      >
-    </lion-checkbox>
-  </lion-checkbox-group>
-`;
+```html preview-story
+<lion-checkbox-group name="scientists[]" label="Favorite scientists">
+  <lion-checkbox .choiceValue=${'Archimedes'}>
+    <label slot="label"
+      ><a href="https://wikipedia.org/wiki/Archimedes" target="_blank">Archimedes</a></label
+    >
+  </lion-checkbox>
+  <lion-checkbox .choiceValue=${'Francis Bacon'}>
+    <label slot="label"
+      ><a href="https://wikipedia.org/wiki/Francis_Bacon" target="_blank">Francis Bacon</a></label
+    >
+  </lion-checkbox>
+  <lion-checkbox .choiceValue=${'Marie Curie'}>
+    <label slot="label"
+      ><a href="https://wikipedia.org/wiki/Marie_Curie" target="_blank">Marie Curie</a></label
+    >
+  </lion-checkbox>
+</lion-checkbox-group>
 ```
 
 ## Help text
 
 You can add help text on each checkbox with `help-text` attribute on the `<lion-checkbox>`.
 
-```js preview-story
-export const helpText = () => html`
-  <lion-checkbox-group name="scientists[]" label="Favorite scientists">
-    <lion-checkbox
-      label="Archimedes"
-      .choiceValue=${'Archimedes'}
-      help-text="Archimedes of Syracuse was a Greek mathematician, physicist, engineer, inventor, and astronomer"
-    ></lion-checkbox>
-    <lion-checkbox
-      label="Francis Bacon"
-      .choiceValue=${'Francis Bacon'}
-      help-text="Francis Bacon, 1st Viscount St Alban also known as Lord Verulam, was an English philosopher and statesman who served as Attorney General and as Lord Chancellor of England"
-    ></lion-checkbox>
-    <lion-checkbox
-      label="Marie Curie"
-      .choiceValue=${'Marie Curie'}
-      help-text="Marie Skłodowska Curie born Maria Salomea Skłodowska, was a Polish and naturalized-French physicist and chemist who conducted pioneering research on radioactivity"
-    ></lion-checkbox>
-  </lion-checkbox-group>
-`;
+```html preview-story
+<lion-checkbox-group name="scientists[]" label="Favorite scientists">
+  <lion-checkbox
+    label="Archimedes"
+    .choiceValue=${'Archimedes'}
+    help-text="Archimedes of Syracuse was a Greek mathematician, physicist, engineer, inventor, and astronomer"
+  ></lion-checkbox>
+  <lion-checkbox
+    label="Francis Bacon"
+    .choiceValue=${'Francis Bacon'}
+    help-text="Francis Bacon, 1st Viscount St Alban also known as Lord Verulam, was an English philosopher and statesman who served as Attorney General and as Lord Chancellor of England"
+  ></lion-checkbox>
+  <lion-checkbox
+    label="Marie Curie"
+    .choiceValue=${'Marie Curie'}
+    help-text="Marie Skłodowska Curie born Maria Salomea Skłodowska, was a Polish and naturalized-French physicist and chemist who conducted pioneering research on radioactivity"
+  ></lion-checkbox>
+</lion-checkbox-group>
 ```
 
 ## Event
@@ -156,102 +142,84 @@ export const event = ({ shadowRoot }) => html`
 
 A `checkbox-indeterminate`'s value is neither true nor false, but is instead indeterminate, meaning that its state cannot be determined or stated in pure binary terms, based on it's `checkbox` children.
 
-```js preview-story
-export const indeterminateSiblings = () => html`
-  <lion-checkbox-group name="scientists[]" label="Favorite scientists">
-    <lion-checkbox-indeterminate label="Old Greek scientists">
-      <lion-checkbox
-        slot="checkbox"
-        label="Archimedes"
-        .choiceValue=${'Archimedes'}
-      ></lion-checkbox>
-      <lion-checkbox slot="checkbox" label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
-      <lion-checkbox
-        slot="checkbox"
-        label="Pythagoras"
-        .choiceValue=${'Pythagoras'}
-      ></lion-checkbox>
-    </lion-checkbox-indeterminate>
-    <lion-checkbox-indeterminate label="17th Century scientists">
-      <lion-checkbox
-        slot="checkbox"
-        label="Isaac Newton"
-        .choiceValue=${'Isaac Newton'}
-      ></lion-checkbox>
-      <lion-checkbox
-        slot="checkbox"
-        label="Galileo Galilei"
-        .choiceValue=${'Galileo Galilei'}
-      ></lion-checkbox>
-    </lion-checkbox-indeterminate>
-  </lion-checkbox-group>
-`;
+```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-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-indeterminate>
+</lion-checkbox-group>
 ```
 
 The `checkbox-indeterminate` can have another `checkbox-indeterminate` as a child.
 
-```js preview-story
-export const indeterminateChildren = () => html`
-  <lion-checkbox-group name="scientists[]" label="Favorite scientists">
-    <lion-checkbox-indeterminate label="Scientists">
+```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
-        slot="checkbox"
-        label="Isaac Newton"
-        .choiceValue=${'Isaac Newton'}
+        label="Archimedes"
+        .choiceValue=${'Archimedes'}
       ></lion-checkbox>
+      <lion-checkbox  label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
       <lion-checkbox
-        slot="checkbox"
-        label="Galileo Galilei"
-        .choiceValue=${'Galileo Galilei'}
+        label="Pythagoras"
+        .choiceValue=${'Pythagoras'}
       ></lion-checkbox>
-      <lion-checkbox-indeterminate slot="checkbox" label="Old Greek scientists">
-        <lion-checkbox
-          slot="checkbox"
-          label="Archimedes"
-          .choiceValue=${'Archimedes'}
-        ></lion-checkbox>
-        <lion-checkbox slot="checkbox" label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
-        <lion-checkbox
-          slot="checkbox"
-          label="Pythagoras"
-          .choiceValue=${'Pythagoras'}
-        ></lion-checkbox>
-      </lion-checkbox-indeterminate>
     </lion-checkbox-indeterminate>
-  </lion-checkbox-group>
-`;
+  </lion-checkbox-indeterminate>
+</lion-checkbox-group>
 ```
 
 You can also use `mixed-state` attribute so your indeterminate checkbox toggles through three states (indeterminate, checked, unchecked), where for indeterminate state the old children states are restored when you toggle back into this.
 
-```js preview-story
-export const mixedState = () => html`
-  <lion-checkbox-group name="scientists[]" label="Favorite scientists">
-    <lion-checkbox-indeterminate mixed-state label="Scientists">
+```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
-        slot="checkbox"
-        label="Isaac Newton"
-        .choiceValue=${'Isaac Newton'}
+        label="Archimedes"
+        .choiceValue=${'Archimedes'}
       ></lion-checkbox>
+      <lion-checkbox  label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
       <lion-checkbox
-        slot="checkbox"
-        label="Galileo Galilei"
-        .choiceValue=${'Galileo Galilei'}
+        label="Pythagoras"
+        .choiceValue=${'Pythagoras'}
       ></lion-checkbox>
-      <lion-checkbox-indeterminate mixed-state slot="checkbox" label="Old Greek scientists">
-        <lion-checkbox
-          slot="checkbox"
-          label="Archimedes"
-          .choiceValue=${'Archimedes'}
-        ></lion-checkbox>
-        <lion-checkbox slot="checkbox" label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
-        <lion-checkbox
-          slot="checkbox"
-          label="Pythagoras"
-          .choiceValue=${'Pythagoras'}
-        ></lion-checkbox>
-      </lion-checkbox-indeterminate>
     </lion-checkbox-indeterminate>
-  </lion-checkbox-group>
-`;
+  </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/951de3e9b282ce8b8797f9aae890f125f96ee5ce/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/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/combobox/extensions.md)
+[...show more](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/docs/components/combobox/extensions.md)
 
 ## Features
 

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/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/listbox/overview.md) for more information.
+See the [listbox documentation](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/951de3e9b282ce8b8797f9aae890f125f96ee5ce/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/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/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)
+- [form](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/docs/components/form/overview.md)
+- [checkbox-group](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/docs/components/checkbox-group/overview.md)
+- [radio-group](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/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
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/docs/fundamentals/systems/form/interaction-states.md)
+- Can have [validate](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/form/overview.md).
+It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/form/interaction-states.md)
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/951de3e9b282ce8b8797f9aae890f125f96ee5ce/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/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
+See the [system documentation](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/form/validate.md).
+- Can make use of [validation](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/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.
+- Based on our [input](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/docs/components/input/overview.md)
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/951de3e9b282ce8b8797f9aae890f125f96ee5ce/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/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/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.
+- Based on our [input](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/docs/components/input/overview.md)
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/951de3e9b282ce8b8797f9aae890f125f96ee5ce/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/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input-date/overview.md) for this.
+We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/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.
+- Based on our [input-date](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/docs/components/input-date/overview.md)
+- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/docs/components/calendar/overview.md) inside the datepicker
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/951de3e9b282ce8b8797f9aae890f125f96ee5ce/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/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/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
+- Based on our [input](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/docs/components/input/overview.md)
+- Makes use of email [validators](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input/overview.md)
+- Based on our [input](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input/overview.md)
+- Based on our [input](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/docs/components/input/overview.md)
 - Default label in different languages
-- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/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/91b582d8c9597873621e40ba61de7e90b0ae20ec/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

@@ -15,11 +15,11 @@ export const main = () => html`
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input/overview.md).
+- Based on our [input](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
 
 ## Installation
 

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

@@ -18,7 +18,7 @@ export const main = () => html`
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input/overview.md).
+- Based on our [input](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/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/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input/overview.md)
+- Extends our [input](https://github.com/ing-bank/lion/blob/91b582d8c9597873621e40ba61de7e90b0ae20ec/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