@lion/ui 0.16.1 → 0.17.0-menu-system.1

package/docs/components/menu/overview.md

@@ -0,0 +1,422 @@
+---
+title: 'Menu: Overview'
+parts:
+  - Menu
+  - Overview
+eleventyNavigation:
+  key: 'Menu: Overview'
+  order: 10
+  parent: Menu
+  title: Overview
+---
+
+# Menu: Overview
+
+A menu is a widget that offers a list of choices to the user, such as a set of actions or functions. A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a sub menu, or by invoking a command, such as Shift + F10 in Windows, that opens a context specific menu. When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.
+
+A menu that is visually persistent is a menubar. A menubar is typically horizontal and is often used to create a menu bar similar to those found near the top of the window in many desktop applications, offering the user quick access to a consistent set of commands.
+
+A common convention for indicating that a menu item launches a dialog box is to append "…" (ellipsis) to the menu item label, e.g., "Save as …".
+
+> From [menu wai-aria best practices](https://www.w3.org/TR/wai-aria-practices/#menu)
+
+```js script
+import { html } from 'lit';
+import '@lion/ui/define/lion-item.js';
+import '@lion/ui/define/lion-menu.js';
+import '@lion/ui/define/lion-menu-overlay.js';
+import '@lion/ui/define/lion-tree.js';
+import '@lion/ui/define/lion-toolbar.js';
+import { applyMenuDemoStyles } from './applyMenuDemoStyles.js';
+
+applyMenuDemoStyles();
+```
+
+```js preview-story
+export const menuButton = () => html`
+  <nav>
+    <button data-invoker>Open menu</button>
+    <lion-menu-overlay>
+      <div role="menuitem">Go to Definition</div>
+      <div role="menuitem">Go to Type Definition</div>
+      <div>
+        <button role="menuitem" data-invoker>Peek</button>
+        <lion-menu-overlay>
+          <div role="menuitem">Peek Call Hierarchy</div>
+          <div role="separator"></div>
+          <div role="menuitem">Peek Definition</div>
+        </lion-menu-overlay>
+      </div>
+      <div role="separator"></div>
+      <div role="menuitem">Find all References</div>
+    </lion-menu-overlay>
+  </nav>
+`;
+```
+
+```js preview-story
+export const menuButtonZ = () => html`
+  <nav>
+    <button data-invoker for="menu">Open menu</button>
+    <lion-menu id="menu">
+      <lion-menuitem> Go to Definition </lion-menuitem>
+      <lion-menuitem> Go to Type Definition </lion-menuitem>
+      <lion-menuitem>
+        <button slot="invoker">Peek</button>
+        <lion-menu>
+          <lion-menuitem type="radio"> Peek Call Hierarchy </lion-menuitem>
+          <div role="separator"></div>
+          <lion-menuitem type="radio"> Peek Definition </lion-menuitem>
+        </lion-menu>
+      </lion-menuitem>
+      <div role="separator"></div>
+      <lion-menuitem type="checkbox"> Find all References </lion-menuitem>
+    </lion-menu>
+  </nav>
+`;
+```
+
+## Groups, menuitemradios and menuitemcheckboxes
+
+From [wai aria menu fragment](https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-2/menubar-2.html)
+
+```js preview-story
+export const groups = () => html`
+  <lion-menu bar invoker-interaction="hover">
+    <div>
+      <div role="menuitem">Font</div>
+      <lion-menu-overlay aria-label="Font">
+        <div role="menuitemradio">Sans-serif</div>
+        <div role="menuitemradio">Serif</div>
+        <div role="menuitemradio">Monospace</div>
+        <div role="menuitemradio">Fantasy</div>
+      </lion-menu-overlay>
+    </div>
+    <div>
+      <div role="menuitem">Style/Color</div>
+      <lion-menu-overlay aria-label="Style/Color">
+        <div role="menuitemcheckbox" aria-checked="true">Bold</div>
+        <div role="menuitemcheckbox" aria-checked="true">Italic</div>
+        <div role="separator"></div>
+        <div role="group" aria-label="Text Color">
+          <div role="menuitemradio" aria-checked="false">Black</div>
+          <div role="menuitemradio" aria-checked="false">Blue</div>
+          <div role="menuitemradio" aria-checked="true">Red</div>
+          <div role="menuitemradio" aria-checked="false">Green</div>
+        </div>
+        <div role="separator"></div>
+        <div role="group" aria-label="Text Decoration">
+          <div role="menuitemradio" aria-checked="true">None</div>
+          <div role="menuitemradio" aria-checked="false">Overline</div>
+          <div role="menuitemradio" aria-checked="false">Line-through</div>
+          <div role="menuitemradio" aria-checked="false">Underline</div>
+        </div>
+      </lion-menu-overlay>
+    </div>
+  </lion-menu>
+`;
+```
+
+## Tree
+
+```js preview-story
+export const tree = () => html`
+  <lion-tree>
+    <div role="treeitem">Fruits</div>
+    <lion-tree>
+      <div role="treeitem">Peek Call Hierarchy</div>
+      <div role="treeitem">Peek Definition</div>
+    </lion-tree>
+    <div role="treeitem">Vegetables</div>
+    <lion-tree>
+      <div role="treeitem">Peek Call Hierarchy</div>
+      <div>
+        <div role="treeitem">Peek</div>
+        <lion-tree>
+          <div role="treeitem">Peek Call Hierarchy</div>
+          <div role="treeitem">Peek Definition</div>
+        </lion-tree>
+      </div>
+    </lion-tree>
+    <div role="treeitem">Grains</div>
+    <lion-tree>
+      <div role="treeitem">Peek Call Hierarchy</div>
+      <div role="treeitem">Peek Definition</div>
+    </lion-tree>
+  </lion-tree>
+`;
+```
+
+## Disclosure menu
+
+See <https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-navigation.html>
+
+```js preview-story
+export const disclosureMenu = () => html`
+  <nav aria-label="Mythical University">
+    <lion-menu bar ._activeMode="${'tabbable-disclosure'}">
+      <div role="listitem">
+        <button data-invoker>About</button>
+        <lion-menu-overlay>
+          <div role="listitem">
+            <a href="#mythical-page-content">Overview</a>
+          </div>
+          <div role="listitem">
+            <a href="#mythical-page-content">Administration</a>
+          </div>
+          <div role="listitem">
+            <a href="#mythical-page-content">Facts</a>
+          </div>
+          <div role="listitem">
+            <a href="#mythical-page-content">Campus Tours</a>
+          </div>
+        </lion-menu-overlay>
+      </div>
+      <div role="listitem">
+        <button data-invoker>Admissions</button>
+        <lion-menu-overlay id="id_admissions_menu">
+          <div role="listitem">
+            <a href="#mythical-page-content">Apply</a>
+          </div>
+          <div role="listitem">
+            <a href="#mythical-page-content">Tuition</a>
+          </div>
+          <div role="listitem">
+            <a href="#mythical-page-content">Sign Up</a>
+          </div>
+          <div role="listitem">
+            <a href="#mythical-page-content">Visit</a>
+          </div>
+          <div role="listitem">
+            <a href="#mythical-page-content">Photo Tour</a>
+          </div>
+          <div role="listitem">
+            <a href="#mythical-page-content">Connect</a>
+          </div>
+        </lion-menu-overlay>
+      </div>
+      <div role="listitem">
+        <button data-invoker>Academics</button>
+        <lion-menu-overlay>
+          <div role="listitem">
+            <a href="#mythical-page-content">Colleges & Schools</a>
+          </div>
+          <div role="listitem">
+            <a href="#mythical-page-content">Programs of Study</a>
+          </div>
+          <div role="listitem">
+            <a href="#mythical-page-content">Honors Programs</a>
+          </div>
+          <div role="listitem">
+            <a href="#mythical-page-content">Online Courses</a>
+          </div>
+          <div role="listitem">
+            <a href="#mythical-page-content">Course Explorer</a>
+          </div>
+          <div role="listitem">
+            <a href="#mythical-page-content">Register for Class</a>
+          </div>
+          <div role="listitem">
+            <a href="#mythical-page-content">Academic Calendar</a>
+          </div>
+          <div role="listitem">
+            <a href="#mythical-page-content">Transcripts</a>
+          </div>
+        </lion-menu-overlay>
+      </div>
+    </lion-menu>
+  </nav>
+`;
+```
+
+## Disclosure menu with anchors on L1
+
+See <https://codepen.io/aardrian/pen/abyXxGw>
+
+```js preview-story
+export const disclosureMenuWithAnchorsOnL1 = () => html`
+ <nav aria-label="Mythical University">
+   <lion-menu bar ._activeMode="${'tabbable-disclosure'}">
+    <div role="listitem">
+      <a href="#mythical-page-content">About</a>
+      <button data-invoker aria-label="More About Pages">▼</button>
+      <lion-menu-overlay>
+        <div role="listitem">
+          <a href="#mythical-page-content">Overview</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Administration</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Facts</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Campus Tours</a>
+        </div>
+      </lion-menu-overlay>
+    </div>
+    <div role="listitem">
+      <a href="#mythical-page-content">Admissions</a>
+      <button data-invoker aria-label="More Admissions Pages">
+        ▼
+      </button>
+      <lion-menu-overlay id="id_admissions_menu">
+        <div role="listitem">
+          <a href="#mythical-page-content">Apply</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Tuition</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Sign Up</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Visit</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Photo Tour</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Connect</a>
+        </div>
+      </lion-menu-overlay>
+    </div>
+    <div role="listitem">
+      <a href="#mythical-page-content">Academics</a>
+      <button data-invoker aria-label="More Academics Pages">▼</button>
+      <lion-menu-overlay>
+        <div role="listitem">
+          <a href="#mythical-page-content">Colleges & Schools</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Programs of Study</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Honors Programs</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Online Courses</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Course Explorer</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Register for Class</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Academic Calendar</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Transcripts</a>
+        </div>
+      </lion-menu-overlay>
+    </div>
+  </ul>
+</nav>
+`;
+```
+
+## Toolbar
+
+From [wai aria toolbar](https://www.w3.org/TR/wai-aria-practices-1.2/examples/toolbar/toolbar.html)
+
+```js preview-story
+export const toolbar = () => html`
+  <lion-toolbar>
+    <div>
+      <button data-item title="bold" aria-label="Bold">
+        <span class="fas fa-bold" aria-hidden="true"></span>
+      </button>
+      <button data-item title="italic" aria-label="Italic">
+        <span class="fas fa-italic" aria-hidden="true"></span>
+      </button>
+      <button data-item title="underline" aria-label="Underline">
+        <span class="fas fa-underline" aria-hidden="true"></span>
+      </button>
+    </div>
+    <div role="separator"></div>
+    <div role="radiogroup" aria-label="Text Alignment">
+      <button data-item role="radio" aria-label="Text Align Left">
+        <span class="fas fa-align-left" aria-hidden="true"></span>
+      </button>
+      <button data-item role="radio" aria-label="Text Align Center">
+        <span class="fas fa-align-center" aria-hidden="true"></span>
+      </button>
+      <button data-item role="radio" aria-label="Text Align Right">
+        <span class="fas fa-align-right" aria-hidden="true"></span>
+      </button>
+    </div>
+    <div role="separator"></div>
+
+    <lion-spinbutton data-item now="20" min="12" max="40" unit="px"></lion-spinbutton>
+    <div role="separator"></div>
+
+    <div>
+      <div role="menuitem">Font</div>
+      <lion-menu-overlay aria-label="Font">
+        <div role="menuitemradio">Sans-serif</div>
+        <div role="menuitemradio">Serif</div>
+        <div role="menuitemradio">Monospace</div>
+        <div role="menuitemradio">Fantasy</div>
+      </lion-menu-overlay>
+    </div>
+    <div>
+      <div role="menuitem">Style/Color</div>
+      <lion-menu-overlay aria-label="Style/Color">
+        <div role="menuitemcheckbox" aria-checked="true">Bold</div>
+        <div role="menuitemcheckbox" aria-checked="true">Italic</div>
+        <div role="separator"></div>
+        <div role="group" aria-label="Text Color">
+          <div role="menuitemradio" aria-checked="false">Black</div>
+          <div role="menuitemradio" aria-checked="false">Blue</div>
+          <div role="menuitemradio" aria-checked="true">Red</div>
+          <div role="menuitemradio" aria-checked="false">Green</div>
+        </div>
+        <div role="separator"></div>
+        <div role="group" aria-label="Text Decoration">
+          <div role="menuitemradio" aria-checked="true">None</div>
+          <div role="menuitemradio" aria-checked="false">Overline</div>
+          <div role="menuitemradio" aria-checked="false">Line-through</div>
+          <div role="menuitemradio" aria-checked="false">Underline</div>
+        </div>
+      </lion-menu-overlay>
+    </div>
+  </lion-toolbar>
+`;
+```
+
+## Tree lion-item
+
+```js preview-story
+export const treeItem = () => html`
+  <lion-tree>
+    <lion-item>
+      <div>Fruits</div>
+      <lion-tree>
+        <lion-item>Peek Call Hierarchy</lion-item>
+        <lion-item>Peek Definition</lion-item>
+      </lion-tree>
+    </lion-item>
+    <lion-item>
+      <div>Vegetables</div>
+      <lion-tree>
+        <lion-item>Peek Call Hierarchy</lion-item>
+        <lion-item>
+          <div>Peek</div>
+          <lion-tree>
+            <lion-item>Peek Call Hierarchy</lion-item>
+            <lion-item>Peek Definition</lion-item>
+          </lion-tree>
+        </lion-item>
+      </lion-tree>
+    </lion-item>
+    <lion-item>
+      <div>Grains</div>
+      <lion-tree>
+        <lion-item>Peek Call Hierarchy</lion-item>
+        <lion-item>Peek Definition</lion-item>
+      </lion-tree>
+    </lion-item>
+  </lion-tree>
+`;
+```

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

@@ -32,12 +32,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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/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/800791cbc9a0c2191fd0ab6d934aa09eb012356c/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/800791cbc9a0c2191fd0ab6d934aa09eb012356c/docs/components/select/overview.md) instead.
 
 ## Features
 
-Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/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/800791cbc9a0c2191fd0ab6d934aa09eb012356c/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

@@ -65,7 +65,7 @@ Or by setting the `disabled` attribute on the entire `lion-select` field.
 
 ## 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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/systems/form/validate.md).
+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/800791cbc9a0c2191fd0ab6d934aa09eb012356c/docs/fundamentals/systems/form/validate.md).
 
 ## Rendering and updating select options
 

package/docs/components/select-rich/api-table.md

@@ -57,7 +57,7 @@ eleventyNavigation:
 <hr/>
  
 
-## class: `LionSelectRich`, `lion-select-rich`
+## class: `LionSelectRich`, `lion-field-with-select`
 
 ### Fields
 

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

@@ -29,7 +29,7 @@ You can set the full `modelValue` for each option, which includes the checked pr
 ```
 
 Note, when rendering with the help of the `cache` function imported from `lit/directives/cache.js`, setting model by
-the `modelValue` property is not fully supported. Consider setting the model by the `choiceValue` property instead. See [Setting model by `choiceValue` property](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/components/select-rich/#setting-model-by-the-choicevalue-property) for more details.
+the `modelValue` property is not fully supported. Consider setting the model by the `choiceValue` property instead. See [Setting model by `choiceValue` property](https://github.com/ing-bank/lion/blob/800791cbc9a0c2191fd0ab6d934aa09eb012356c/docs/components/select-rich/#setting-model-by-the-choicevalue-property) for more details.
 
 ### Setting model by the `choiceValue` property
 
@@ -328,7 +328,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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/components/select-rich/examples.md)).
+invoker used in [IntlSelectRich](https://github.com/ing-bank/lion/blob/800791cbc9a0c2191fd0ab6d934aa09eb012356c/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

@@ -21,7 +21,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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/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/800791cbc9a0c2191fd0ab6d934aa09eb012356c/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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/systems/core/overview.md) <br>
+1. [Systems](https://github.com/ing-bank/lion/blob/800791cbc9a0c2191fd0ab6d934aa09eb012356c/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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/tools/helpers/overview.md) <br>
+2. [Tools](https://github.com/ing-bank/lion/blob/800791cbc9a0c2191fd0ab6d934aa09eb012356c/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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md) <br>
+3. [Node Tools](https://github.com/ing-bank/lion/blob/800791cbc9a0c2191fd0ab6d934aa09eb012356c/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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/rationales/side-effects.md) <br>
+4. [Rationales](https://github.com/ing-bank/lion/blob/800791cbc9a0c2191fd0ab6d934aa09eb012356c/docs/fundamentals/rationales/side-effects.md) <br>
    The reasoning behind some of our decisions.

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

@@ -44,7 +44,7 @@ For a Mono Repository
    ```md
    # My Pkg
 
-   [=> See Source <=](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/docs/deep/dir/overview.md)
+   [=> See Source <=](https://github.com/ing-bank/lion/blob/800791cbc9a0c2191fd0ab6d934aa09eb012356c/docs/fundamentals/docs/deep/dir/overview.md)
    ```
 
 ## CLI flags
@@ -74,7 +74,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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/docs/deep/dir/overview.md)
+[=> See Source <=](https://github.com/ing-bank/lion/blob/800791cbc9a0c2191fd0ab6d934aa09eb012356c/docs/fundamentals/docs/deep/dir/overview.md)
 ```
 
 Add a `use-cases.md`
@@ -82,7 +82,7 @@ Add a `use-cases.md`
 👉 `packages/[my-package]/docs/use-cases.md`
 
 ```md
-[=> See Source <=](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/docs/deep/dir/use-cases.md)
+[=> See Source <=](https://github.com/ing-bank/lion/blob/800791cbc9a0c2191fd0ab6d934aa09eb012356c/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

@@ -20,7 +20,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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/node-tools/remark-extend/overview.md)
+- Import lion documentation and adjust it using [remark-extend](https://github.com/ing-bank/lion/blob/800791cbc9a0c2191fd0ab6d934aa09eb012356c/docs/fundamentals/node-tools/remark-extend/overview.md)
 - Renames named imports and all it's usage
 - Adjusts import paths
 - Replace tags in template literals
@@ -51,7 +51,7 @@ export default {
 
 ## Reusing documentation
 
-To take an existing documentation you can "import" it using [remark-extend](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/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/800791cbc9a0c2191fd0ab6d934aa09eb012356c/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

@@ -37,4 +37,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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/systems/core/SlotMixin.md)
+More details about SlotMixin can be found in the [SlotMixin documentation](https://github.com/ing-bank/lion/blob/800791cbc9a0c2191fd0ab6d934aa09eb012356c/docs/fundamentals/systems/core/SlotMixin.md)

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

@@ -76,28 +76,28 @@ Below configuration gives an example of all of them, after which we explain when
 
 ```js
 class MyAccessibleControl extends SlotMixin(LitElement) {
- get slots() {
-   return {
-     ...super.slots,
-     // Element
-     'public-element-slot': () => document.createElement('input'),
-     // TemplateResult
-     '_private-template-slot': () => html`<wc-rendered-to-light-dom></wc-rendered-to-light-dom>`,
-     // SlotRerenderObject
-     'rerenderable-slot': () => {
-       return {
-         template: html`<w-c>${this.litProperty}</w-c>`,
-       }
-     },
-     // undefined (conditional slot)
-     '': () => {
+  get slots() {
+    return {
+      ...super.slots,
+      // Element
+      'public-element-slot': () => document.createElement('input'),
+      // TemplateResult
+      '_private-template-slot': () => html`<wc-rendered-to-light-dom></wc-rendered-to-light-dom>`,
+      // SlotRerenderObject
+      'rerenderable-slot': () => {
+        return {
+          template: html`<w-c>${this.litProperty}</w-c>`,
+        };
+      },
+      // undefined (conditional slot)
+      '': () => {
         if (conditionApplies) {
           return html`<div>default slot</div>`;
         }
         return undefined;
       },
-   };
- }
+    };
+  }
 }
 ```
 
@@ -165,4 +165,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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/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/800791cbc9a0c2191fd0ab6d934aa09eb012356c/docs/fundamentals/systems/core/#slotfunctionresults), '' can be used to add content to the default slot

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

@@ -28,7 +28,7 @@ import { LitElement, html, render } from 'lit-element';
 
 ## Features
 
-- [function to deduplicate mixins (dedupeMixin)](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/systems/core/#deduping-of-mixins)
+- [function to deduplicate mixins (dedupeMixin)](https://github.com/ing-bank/lion/blob/800791cbc9a0c2191fd0ab6d934aa09eb012356c/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

@@ -36,7 +36,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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/components/input-amount/overview.md).
+> For an actual amount input, check out [lion-input-amount](https://github.com/ing-bank/lion/blob/800791cbc9a0c2191fd0ab6d934aa09eb012356c/docs/components/input-amount/overview.md).
 > This comes with its own formatter, parser, serializer.
 
 ### Parsers & modelValue
@@ -243,16 +243,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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/systems/form/assets/FormatMixinDiagram-1.svg 'Standard flow')
+![Standard flow](https://github.com/ing-bank/lion/blob/800791cbc9a0c2191fd0ab6d934aa09eb012356c/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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/systems/form/assets/FormatMixinDiagram-2.svg 'Unparseable flow')
+![Unparseable flow](https://github.com/ing-bank/lion/blob/800791cbc9a0c2191fd0ab6d934aa09eb012356c/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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/systems/form/assets/FormatMixinDiagram-3.svg 'Imperative flow')
+![Imperative flow](https://github.com/ing-bank/lion/blob/800791cbc9a0c2191fd0ab6d934aa09eb012356c/docs/fundamentals/systems/form/assets/FormatMixinDiagram-3.svg 'Imperative flow')