@lion/ui 0.6.0-beta.0 → 0.6.0

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

@@ -3,8 +3,11 @@
 ```js script
 import { html } from '@mdjs/mdjs-preview';
 import { listboxData } from './src/listboxData.js';
+import { Required } from '@lion/ui/form-core.js';
+import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
 import '@lion/ui/define/lion-listbox.js';
 import '@lion/ui/define/lion-option.js';
+loadDefaultFeedbackMessages();
 ```
 
 ## Multiple choice
@@ -16,21 +19,19 @@ This will:
 - display a list of selected option representations next to the text box
 - make the value of type `Array` instead of `String`
 
-```js preview-story
-export const multiple = () => html`
-  <lion-listbox name="combo" label="Multiple" multiple-choice>
-    <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
-    <lion-option .choiceValue=${'Artichoke'}>Artichoke</lion-option>
-    <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
-    <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
-    <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
-    <lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option>
-    <lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option>
-    <lion-option .choiceValue=${'Brussels sprout'}>Brussels sprout</lion-option>
-    <lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option>
-    <lion-option .choiceValue=${'Carrot'}>Carrot</lion-option>
-  </lion-listbox>
-`;
+```html preview-story
+<lion-listbox name="combo" label="Multiple" multiple-choice>
+  <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
+  <lion-option .choiceValue=${'Artichoke'}>Artichoke</lion-option>
+  <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
+  <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
+  <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
+  <lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option>
+  <lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option>
+  <lion-option .choiceValue=${'Brussels sprout'}>Brussels sprout</lion-option>
+  <lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option>
+  <lion-option .choiceValue=${'Carrot'}>Carrot</lion-option>
+</lion-listbox>
 ```
 
 ## Orientation
@@ -39,45 +40,41 @@ When `orientation="horizontal"`, left and right arrow keys will be enabled, plus
 will be informed about the direction of the options.
 By default, `orientation="vertical"` is set, which enables up and down arrow keys.
 
-```js preview-story
-export const orientationHorizontal = () => html`
-  <lion-listbox name="combo" label="Orientation horizontal" orientation="horizontal">
-    <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
-    <lion-option .choiceValue=${'Artichoke'}>Artichoke</lion-option>
-    <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
-    <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
-    <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
-    <lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option>
-    <lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option>
-    <lion-option .choiceValue=${'Brussels sprout'}>Brussels sprout</lion-option>
-    <lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option>
-    <lion-option .choiceValue=${'Carrot'}>Carrot</lion-option>
-  </lion-listbox>
-`;
+```html preview-story
+<lion-listbox name="combo" label="Orientation horizontal" orientation="horizontal">
+  <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
+  <lion-option .choiceValue=${'Artichoke'}>Artichoke</lion-option>
+  <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
+  <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
+  <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
+  <lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option>
+  <lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option>
+  <lion-option .choiceValue=${'Brussels sprout'}>Brussels sprout</lion-option>
+  <lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option>
+  <lion-option .choiceValue=${'Carrot'}>Carrot</lion-option>
+</lion-listbox>
 ```
 
 With `multiple-choice` flag configured, multiple options can be checked.
 
-```js preview-story
-export const orientationHorizontalMultiple = () => html`
-  <lion-listbox
-    name="combo"
-    label="Orientation horizontal multiple"
-    orientation="horizontal"
-    multiple-choice
-  >
-    <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
-    <lion-option .choiceValue=${'Artichoke'}>Artichoke</lion-option>
-    <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
-    <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
-    <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
-    <lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option>
-    <lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option>
-    <lion-option .choiceValue=${'Brussels sprout'}>Brussels sprout</lion-option>
-    <lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option>
-    <lion-option .choiceValue=${'Carrot'}>Carrot</lion-option>
-  </lion-listbox>
-`;
+```html preview-story
+<lion-listbox
+  name="combo"
+  label="Orientation horizontal multiple"
+  orientation="horizontal"
+  multiple-choice
+>
+  <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
+  <lion-option .choiceValue=${'Artichoke'}>Artichoke</lion-option>
+  <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
+  <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
+  <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
+  <lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option>
+  <lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option>
+  <lion-option .choiceValue=${'Brussels sprout'}>Brussels sprout</lion-option>
+  <lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option>
+  <lion-option .choiceValue=${'Carrot'}>Carrot</lion-option>
+</lion-listbox>
 ```
 
 ## Selection-follows-focus
@@ -87,61 +84,59 @@ This behavior can usually be seen in `<select>` on the Windows platform.
 Note that this behavior cannot be used when multiple-choice is true.
 See [wai aria spec](https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus)
 
-```js preview-story
-export const selectionFollowsFocus = () => html`
-  <lion-listbox name="combo" label="Selection follows focus" selection-follows-focus>
-    <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
-    <lion-option .choiceValue=${'Artichoke'} disabled>Artichoke</lion-option>
-    <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
-    <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
-    <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
-    <lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option>
-    <lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option>
-    <lion-option .choiceValue=${'Brussels sprout'}>Brussels sprout</lion-option>
-    <lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option>
-    <lion-option .choiceValue=${'Carrot'}>Carrot</lion-option>
-  </lion-listbox>
-`;
+```html preview-story
+<lion-listbox name="combo" label="Selection follows focus" selection-follows-focus>
+  <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
+  <lion-option .choiceValue=${'Artichoke'} disabled>Artichoke</lion-option>
+  <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
+  <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
+  <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
+  <lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option>
+  <lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option>
+  <lion-option .choiceValue=${'Brussels sprout'}>Brussels sprout</lion-option>
+  <lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option>
+  <lion-option .choiceValue=${'Carrot'}>Carrot</lion-option>
+</lion-listbox>
 ```
 
 ## Rotate keyboard navigation
 
 `rotate-keyboard-navigation` attribute on the listbox will give the first option active state when navigated to the next option from last option.
 
-```js preview-story
-export const rotateKeyboardNavigation = () => html`
-  <lion-listbox name="combo" label="Rotate keyboard navigation" rotate-keyboard-navigation>
-    <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
-    <lion-option .choiceValue=${'Artichoke'}>Artichoke</lion-option>
-    <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
-    <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
-    <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
-    <lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option>
-    <lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option>
-    <lion-option .choiceValue=${'Brussels sprout'}>Brussels sprout</lion-option>
-    <lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option>
-    <lion-option .choiceValue=${'Carrot'}>Carrot</lion-option>
-  </lion-listbox>
-`;
+```html preview-story
+<lion-listbox name="combo" label="Rotate keyboard navigation" rotate-keyboard-navigation>
+  <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
+  <lion-option .choiceValue=${'Artichoke'}>Artichoke</lion-option>
+  <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
+  <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
+  <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
+  <lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option>
+  <lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option>
+  <lion-option .choiceValue=${'Brussels sprout'}>Brussels sprout</lion-option>
+  <lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option>
+  <lion-option .choiceValue=${'Carrot'}>Carrot</lion-option>
+</lion-listbox>
 ```
 
 ## Disabled options
 
 Navigation will skip over disabled options. Let's disable Artichoke and Brussel sprout, because they're gross.
 
-```js preview-story
-export const disabledRotateNavigation = () => html`
-  <lion-listbox name="combo" label="Rotate with disabled options" rotate-keyboard-navigation>
-    <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
-    <lion-option .choiceValue=${'Artichoke'} disabled>Artichoke</lion-option>
-    <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
-    <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
-    <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
-    <lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option>
-    <lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option>
-    <lion-option .choiceValue=${'Brussels sprout'} disabled>Brussels sprout</lion-option>
-    <lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option>
-    <lion-option .choiceValue=${'Carrot'}>Carrot</lion-option>
-  </lion-listbox>
-`;
+```html preview-story
+<lion-listbox name="combo" label="Rotate with disabled options" rotate-keyboard-navigation>
+  <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
+  <lion-option .choiceValue=${'Artichoke'} disabled>Artichoke</lion-option>
+  <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
+  <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
+  <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
+  <lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option>
+  <lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option>
+  <lion-option .choiceValue=${'Brussels sprout'} disabled>Brussels sprout</lion-option>
+  <lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option>
+  <lion-option .choiceValue=${'Carrot'}>Carrot</lion-option>
+</lion-listbox>
 ```
+
+## Validation
+
+A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/systems/form/validate.md).

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

@@ -20,12 +20,12 @@ export const main = () => html`
 `;
 ```
 
-- Make sure that to use a name attribute as it is necessary for our [form](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/components/form/overview.md)'s serialization result.
-- If you have many options for a user to pick from, consider using our [select](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/components/select/overview.md) instead.
+- Make sure that to use a name attribute as it is necessary for our [form](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/components/form/overview.md)'s serialization result.
+- If you have many options for a user to pick from, consider using our [select](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/components/select/overview.md) instead.
 
 ## Features
 
-Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/components/fieldset/overview.md), it has all the features a fieldset has.
+Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/components/fieldset/overview.md), it has all the features a fieldset has.
 
 - Get or set the checked value of the group:
   - modelValue (default) - `checkedValue()`

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

@@ -2,54 +2,55 @@
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
+import { Required } from '@lion/ui/form-core.js';
+import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
 import '@lion/ui/define/lion-select.js';
+loadDefaultFeedbackMessages();
 ```
 
 ## Pre-select
 
 You can preselect an option by setting the property modelValue.
 
-```js preview-story
-export const preSelect = () => html`
-  <lion-select name="favoriteColor" label="Favorite color" .modelValue=${'hotpink'}>
-    <select slot="input">
-      <option selected hidden value>Please select</option>
-      <option value="red">Red</option>
-      <option value="hotpink">Hotpink</option>
-      <option value="teal">Teal</option>
-    </select>
-  </lion-select>
-`;
+```html preview-story
+<lion-select name="favoriteColor" label="Favorite color" .modelValue=${'hotpink'}>
+  <select slot="input">
+    <option selected hidden value>Please select</option>
+    <option value="red">Red</option>
+    <option value="hotpink">Hotpink</option>
+    <option value="teal">Teal</option>
+  </select>
+</lion-select>
 ```
 
 ## Disabled
 
 You can disable an option by adding the `disabled` attribute to an option.
 
-```js preview-story
-export const disabledOption = () => html`
-  <lion-select name="favoriteColor" label="Favorite color">
-    <select slot="input">
-      <option selected hidden value>Please select</option>
-      <option value="red">Red</option>
-      <option value="hotpink" disabled>Hotpink</option>
-      <option value="teal">Teal</option>
-    </select>
-  </lion-select>
-`;
+```html preview-story
+<lion-select name="favoriteColor" label="Favorite color">
+  <select slot="input">
+    <option selected hidden value>Please select</option>
+    <option value="red">Red</option>
+    <option value="hotpink" disabled>Hotpink</option>
+    <option value="teal">Teal</option>
+  </select>
+</lion-select>
 ```
 
 Or by setting the `disabled` attribute on the entire `lion-select` field.
 
-```js preview-story
-export const disabledSelect = () => html`
-  <lion-select name="favoriteColor" label="Favorite color" disabled>
-    <select slot="input">
-      <option selected hidden value>Please select</option>
-      <option value="red">Red</option>
-      <option value="hotpink">Hotpink</option>
-      <option value="teal">Teal</option>
-    </select>
-  </lion-select>
-`;
+```html preview-story
+<lion-select name="favoriteColor" label="Favorite color" disabled>
+  <select slot="input">
+    <option selected hidden value>Please select</option>
+    <option value="red">Red</option>
+    <option value="hotpink">Hotpink</option>
+    <option value="teal">Teal</option>
+  </select>
+</lion-select>
 ```
+
+## Validation
+
+A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/systems/form/validate.md).

package/docs/components/select-rich/use-cases.md

@@ -302,7 +302,7 @@ LionSelectRich will give it acces to:
 - LionSelectRich itself, via `.hostElement`
 
 Code of an advanced custom invoker is shown below (this is the code for the
-invoker used in [IntlSelectRich](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/components/select-rich/examples.md)).
+invoker used in [IntlSelectRich](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/components/select-rich/examples.md)).
 The invoker is usually added in the invoker slot of the LionSelectRich subclass.
 However, it would also be possible for an application developer to provide the invoker
 by putting it in light dom:

package/docs/components/tabs/examples.md

@@ -9,7 +9,7 @@ import './src/lea-tab-panel.js';
 
 ## Lea Tabs
 
-Learn how to create the `lea tabs` in our ["introducing lion" blogpost](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/blog/ing-open-sources-lion.md).
+Learn how to create the `lea tabs` in our ["introducing lion" blogpost](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/blog/ing-open-sources-lion.md).
 
 ```js preview-story
 export const main = () => html`

package/docs/fundamentals/index.md

@@ -9,11 +9,11 @@ Here you find more details about what we offer.
 
 Let's see what each section describes.
 
-1. [Systems](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/systems/core/overview.md) <br>
+1. [Systems](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/systems/core/overview.md) <br>
    These are the fundamental systems that power all of our components.
-2. [Tools](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/tools/helpers/overview.md) <br>
+2. [Tools](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/tools/helpers/overview.md) <br>
    Frontend Tools useful for web development but are not visual and therefore are not components.
-3. [Node Tools](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md) <br>
+3. [Node Tools](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md) <br>
    Node tools to analyse the code and for extending the documentation.
-4. [Rationales](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/rationales/side-effects.md) <br>
+4. [Rationales](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/rationales/side-effects.md) <br>
    The reasoning behind some of our decisions.

package/docs/fundamentals/node-tools/providence-analytics/LocalConfiguration.md

@@ -45,7 +45,7 @@ export default {
 ### referenceCollections
 
 A list of file system paths. They can be defined relative from the current project root or they can be full paths.
-When a [MatchAnalyzer](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/node-tools/providence-analytics/analyzer.md) like `match-imports` or `match-subclasses` is used, the default reference(s) can be configured here. For instance: ['/path/to/@lion/ui/form.js']
+When a [MatchAnalyzer](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/node-tools/providence-analytics/analyzer.md) like `match-imports` or `match-subclasses` is used, the default reference(s) can be configured here. For instance: ['/path/to/@lion/ui/form.js']
 
 An example:
 

package/docs/fundamentals/node-tools/providence-analytics/QueryResult.md

@@ -108,4 +108,4 @@ QueryOutput structure could be simplified in the future.
 
 The output files stored in the file system always need to be machine independent:
 this means that all machine specific information, like a complete filepath, needs to be removed from a QueryOutput (paths relative from project root are still allowed).
-In that way, the caching mechanism (based on hash comparisons) as described in [Analyzer](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/node-tools/providence-analytics/analyzer.md) is guaranteed to work across different machines.
+In that way, the caching mechanism (based on hash comparisons) as described in [Analyzer](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/node-tools/providence-analytics/analyzer.md) is guaranteed to work across different machines.

package/docs/fundamentals/node-tools/providence-analytics/analyzer.md

@@ -7,7 +7,7 @@ A few examples are:
 - find-exports
 - match-imports
 
-An analyzer will give back a [QueryResult](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/node-tools/providence-analytics/QueryResult.md) that will be written to the file system by Providence.
+An analyzer will give back a [QueryResult](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/node-tools/providence-analytics/QueryResult.md) that will be written to the file system by Providence.
 All analyzers need to extend from the `Analyzer` base class, found in `src/program/analyzers/helpers`.
 
 ## Public api

package/docs/fundamentals/node-tools/providence-analytics/dashboard.md

@@ -1,6 +1,6 @@
 # Node Tools >> Providence Analytics >> Dashboard ||30
 
-An interactive overview of all aggregated [QueryResults](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/node-tools/providence-analytics/QueryResult.md) can be found in the dashboard.
+An interactive overview of all aggregated [QueryResults](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/node-tools/providence-analytics/QueryResult.md) can be found in the dashboard.
 The dashboard is a small nodejs server (based on es-dev-server + middleware) and a frontend
 application.
 

package/docs/fundamentals/node-tools/providence-analytics/overview.md

@@ -47,7 +47,7 @@ npm i --save-dev providence-analytics
 You are now ready to use providence in your project. All
 data will be stored in json files in the folder `./providence-output`
 
-![CLI](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/node-tools/providence-analytics/assets/provicli.gif 'CLI')
+![CLI](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/node-tools/providence-analytics/assets/provicli.gif 'CLI')
 
 ## Setup: Dashboard
 
@@ -76,7 +76,7 @@ export default {
 
 Run `npm run providence:dashboard`
 
-![dashboard](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/node-tools/providence-analytics/assets/providash.gif 'dashboard')
+![dashboard](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/node-tools/providence-analytics/assets/providash.gif 'dashboard')
 
 ## Setup: about result output
 
@@ -153,7 +153,7 @@ Now you will get a list of all predefined analyzers:
 - match-subclasses
 - etc...
 
-![Analyzer query](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/node-tools/providence-analytics/assets/analyzer-query.gif 'Analyzer query')
+![Analyzer query](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/node-tools/providence-analytics/assets/analyzer-query.gif 'Analyzer query')
 
 <!--
 ## Running providence from its own repo

package/docs/fundamentals/node-tools/publish-docs/overview.md

@@ -31,7 +31,7 @@ For a Mono Repository
    ```md
    # My Pkg
 
-   [=> See Source <=](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/docs/deep/dir/overview.md)
+   [=> See Source <=](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/docs/deep/dir/overview.md)
    ```
 
 ## CLI flags
@@ -61,7 +61,7 @@ Bring the `overview.md` in a docs folder along.
 👉 `packages/[my-package]/docs/overview.md`
 
 ```md
-[=> See Source <=](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/docs/deep/dir/overview.md)
+[=> See Source <=](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/docs/deep/dir/overview.md)
 ```
 
 Add a `use-cases.md`
@@ -69,7 +69,7 @@ Add a `use-cases.md`
 👉 `packages/[my-package]/docs/use-cases.md`
 
 ```md
-[=> See Source <=](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/docs/deep/dir/use-cases.md)
+[=> See Source <=](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/docs/deep/dir/use-cases.md)
 ```
 
 So you will end up with something like this in your package.

package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md

@@ -7,7 +7,7 @@ To do this automatically you can use this preset for [rocket](https://rocket.mod
 
 ## Features
 
-- Import lion documentation and adjust it using [remark-extend](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/node-tools/remark-extend/overview.md)
+- Import lion documentation and adjust it using [remark-extend](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/node-tools/remark-extend/overview.md)
 - Renames named imports and all it's usage
 - Adjusts import paths
 - Replace tags in template literals
@@ -38,7 +38,7 @@ export default {
 
 ## Reusing documentation
 
-To take an existing documentation you can "import" it using [remark-extend](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/node-tools/remark-extend/overview.md).
+To take an existing documentation you can "import" it using [remark-extend](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/node-tools/remark-extend/overview.md).
 
 As an example you can create `docs/components/tabs/overview.md`.
 

package/docs/fundamentals/rationales/accessibility.md

@@ -25,4 +25,4 @@ Internally, we delegate all intricacies involved in managing light dom to SlotMi
 SlotMixin automatically mediates between light dom provided by the user ('public slots') and light dom provided by the component author ('private slots').
 Also, SlotMixin allows to hook into the reactive update loop of LitElement (automatically rerendering on property changes) and it automatically respects
 the scoped registry belonging to the shadow root.
-More details about SlotMixin can be found in the [SlotMixin documentation](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/systems/core/SlotMixin.md)
+More details about SlotMixin can be found in the [SlotMixin documentation](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/systems/core/SlotMixin.md)

package/docs/fundamentals/systems/core/SlotMixin.md

@@ -152,4 +152,4 @@ This will make sure that the slot provided by the user always takes precedence a
 
 ### Default slot
 
-As can be seen in the example of [SlotFunctionResults](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/systems/core/#slotfunctionresults), '' can be used to add content to the default slot
+As can be seen in the example of [SlotFunctionResults](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/systems/core/#slotfunctionresults), '' can be used to add content to the default slot

package/docs/fundamentals/systems/core/overview.md

@@ -15,7 +15,7 @@ import { LitElement, html, render } from 'lit-element';
 
 ## Features
 
-- [function to deduplicate mixins (dedupeMixin)](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/systems/core/#deduping-of-mixins)
+- [function to deduplicate mixins (dedupeMixin)](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/systems/core/#deduping-of-mixins)
 - Mixin to handle disabled (DisabledMixin)
 - Mixin to handle disabled AND tabIndex (DisabledWithTabIndexMixin)
 - Mixin to manage auto-generated needed slot elements in light dom (SlotMixin)

package/docs/fundamentals/systems/form/formatting-and-parsing.md

@@ -23,7 +23,7 @@ Our fields can automatically format/parse/serialize user input or an input set i
 
 Below are some concrete examples of implementations of formatters and parsers mimicking a (basic) amount input.
 
-> For an actual amount input, check out [lion-input-amount](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/components/input-amount/overview.md).
+> For an actual amount input, check out [lion-input-amount](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/components/input-amount/overview.md).
 > This comes with its own formatter, parser, serializer.
 
 ### Parsers & modelValue
@@ -230,16 +230,16 @@ Below we show three flow diagrams to show the flow of formatting, serializing an
 
 Where a user changes the input with their keyboard:
 
-![Standard flow](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/systems/form/assets/FormatMixinDiagram-1.svg 'Standard flow')
+![Standard flow](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/systems/form/assets/FormatMixinDiagram-1.svg 'Standard flow')
 
 ### Unparseable flow
 
 Where a user sets the input to something that is not parseable by the parser:
 
-![Unparseable flow](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/systems/form/assets/FormatMixinDiagram-2.svg 'Unparseable flow')
+![Unparseable flow](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/systems/form/assets/FormatMixinDiagram-2.svg 'Unparseable flow')
 
 ### Imperative / programmatic flow
 
 Where the developer sets the modelValue of the input programmatically:
 
-![Imperative flow](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/systems/form/assets/FormatMixinDiagram-3.svg 'Imperative flow')
+![Imperative flow](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/systems/form/assets/FormatMixinDiagram-3.svg 'Imperative flow')

package/docs/fundamentals/systems/form/model-value.md

@@ -21,7 +21,7 @@ level, via:
 > Internal/private concepts like viewValue, formattedValue, serializedValue are therefore not
 > recommended as a means of interaction.
 
-For more information about parsing and the Unparseable type, see [Formatting and Parsing](https://github.com/ing-bank/lion/blob/c9eebcbc14469dea5d979737c5895faa980f31de/docs/fundamentals/systems/form/formatting-and-parsing.md)
+For more information about parsing and the Unparseable type, see [Formatting and Parsing](https://github.com/ing-bank/lion/blob/79a64674f8f644efe0468e5518c8cd5499c8a7cd/docs/fundamentals/systems/form/formatting-and-parsing.md)
 
 ### Event meta