@lion/ui 0.11.1 → 0.11.3

package/docs/components/listbox/index.md

@@ -1,3 +1,13 @@
-# Listbox ||20
+---
+parts:
+  - Listbox
+title: Listbox
+eleventyNavigation:
+  key: Listbox
+  order: 20
+  title: Listbox
+---
+
+# Listbox
 
 -> go to Overview

package/docs/components/listbox/overview.md

@@ -1,4 +1,16 @@
-# Listbox >> Overview ||10
+---
+parts:
+  - Listbox
+  - Overview
+title: 'Listbox: Overview'
+eleventyNavigation:
+  key: 'Listbox: Overview'
+  order: 10
+  parent: Listbox
+  title: Overview
+---
+
+# Listbox: Overview
 
 A widget that presents a list of options and allows a user to select one or more of them.
 A listbox that allows a single option to be chosen is a `single-select listbox`; one that allows

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

@@ -1,4 +1,16 @@
-# Listbox >> Use Cases ||20
+---
+parts:
+  - Listbox
+  - Use Cases
+title: 'Listbox: Use Cases'
+eleventyNavigation:
+  key: 'Listbox: Use Cases'
+  order: 20
+  parent: Listbox
+  title: Use Cases
+---
+
+# Listbox: Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -139,4 +151,4 @@ Navigation will skip over disabled options. Let's disable Artichoke and Brussel
 
 ## 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/593b753f0f99acb36ea6009677bc7fdda9184184/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/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/validate.md).

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

@@ -1,4 +1,16 @@
-# Pagination >> API Table ||90 
+---
+parts:
+  - API Table
+  - Pagination
+title: 'Pagination: API Table'
+eleventyNavigation:
+  key: API Table >> Pagination
+  title: API Table
+  order: 90
+  parent: Pagination
+---
+# Pagination: API Table
+ 
 
 ## class: `LionPagination`, `lion-pagination`
 

package/docs/components/pagination/index.md

@@ -1,3 +1,13 @@
-# Pagination ||30
+---
+parts:
+  - Pagination
+title: Pagination
+eleventyNavigation:
+  key: Pagination
+  order: 30
+  title: Pagination
+---
+
+# Pagination
 
 -> go to Overview

package/docs/components/pagination/overview.md

@@ -1,4 +1,16 @@
-# Pagination >> Overview ||10
+---
+parts:
+  - Pagination
+  - Overview
+title: 'Pagination: Overview'
+eleventyNavigation:
+  key: 'Pagination: Overview'
+  order: 10
+  parent: Pagination
+  title: Overview
+---
+
+# Pagination: Overview
 
 A web component that handles pagination.
 

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

@@ -1,4 +1,16 @@
-# Pagination >> Use Cases ||20
+---
+parts:
+  - Pagination
+  - Use Cases
+title: 'Pagination: Use Cases'
+eleventyNavigation:
+  key: 'Pagination: Use Cases'
+  order: 20
+  parent: Pagination
+  title: Use Cases
+---
+
+# Pagination: Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/progress-indicator/api-table.md

@@ -1,4 +1,16 @@
-# Progress Indicator >> API Table ||90 
+---
+parts:
+  - API Table
+  - Progress Indicator
+title: 'Progress Indicator: API Table'
+eleventyNavigation:
+  key: API Table >> Progress Indicator
+  title: API Table
+  order: 90
+  parent: Progress Indicator
+---
+# Progress Indicator: API Table
+ 
 
 ## class: `LionProgressIndicator`, `lion-progress-indicator`
 

package/docs/components/progress-indicator/examples.md

@@ -1,4 +1,16 @@
-# Progress Indicator >> Examples ||30
+---
+parts:
+  - Progress Indicator
+  - Examples
+title: 'Progress Indicator: Examples'
+eleventyNavigation:
+  key: 'Progress Indicator: Examples'
+  order: 30
+  parent: Progress Indicator
+  title: Examples
+---
+
+# Progress Indicator: Examples
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/progress-indicator/index.md

@@ -1,3 +1,13 @@
-# Progress Indicator ||30
+---
+parts:
+  - Progress Indicator
+title: Progress Indicator
+eleventyNavigation:
+  key: Progress Indicator
+  order: 30
+  title: Progress Indicator
+---
+
+# Progress Indicator
 
 -> go to Overview

package/docs/components/progress-indicator/overview.md

@@ -1,4 +1,16 @@
-# Progress Indicator >> Overview ||10
+---
+parts:
+  - Progress Indicator
+  - Overview
+title: 'Progress Indicator: Overview'
+eleventyNavigation:
+  key: 'Progress Indicator: Overview'
+  order: 10
+  parent: Progress Indicator
+  title: Overview
+---
+
+# Progress Indicator: Overview
 
 A web component that implements accessibility requirements for progress indicators.
 

package/docs/components/radio-group/api-table.md

@@ -1,4 +1,16 @@
-# Radio Group >> API Table ||90 
+---
+parts:
+  - API Table
+  - Radio Group
+title: 'Radio Group: API Table'
+eleventyNavigation:
+  key: API Table >> Radio Group
+  title: API Table
+  order: 90
+  parent: Radio Group
+---
+# Radio Group: API Table
+ 
 
 ## class: `LionRadio`, `lion-radio`
 

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

@@ -1,3 +1,13 @@
-# Radio Group ||30
+---
+parts:
+  - Radio Group
+title: Radio Group
+eleventyNavigation:
+  key: Radio Group
+  order: 30
+  title: Radio Group
+---
+
+# Radio Group
 
 -> go to Overview

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

@@ -1,4 +1,16 @@
-# Radio Group >> Overview ||10
+---
+parts:
+  - Radio Group
+  - Overview
+title: 'Radio Group: Overview'
+eleventyNavigation:
+  key: 'Radio Group: Overview'
+  order: 10
+  parent: Radio Group
+  title: Overview
+---
+
+# Radio Group: Overview
 
 A web component that enhances the functionality of the native `<input type="radio">` element. Its purpose is to provide a way for users to check a **single** option amongst a set of choices.
 
@@ -20,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/593b753f0f99acb36ea6009677bc7fdda9184184/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/593b753f0f99acb36ea6009677bc7fdda9184184/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/0c3425c2b9f0cbb8c2680b033ba775170b92c641/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/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/select/overview.md) instead.
 
 ## Features
 
-Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/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/0c3425c2b9f0cbb8c2680b033ba775170b92c641/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/radio-group/use-cases.md

@@ -1,4 +1,16 @@
-# Radio Group >> Use Cases ||20
+---
+parts:
+  - Radio Group
+  - Use Cases
+title: 'Radio Group: Use Cases'
+eleventyNavigation:
+  key: 'Radio Group: Use Cases'
+  order: 20
+  parent: Radio Group
+  title: Use Cases
+---
+
+# Radio Group: Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

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

@@ -1,4 +1,16 @@
-# Select >> API Table ||90 
+---
+parts:
+  - API Table
+  - Select
+title: 'Select: API Table'
+eleventyNavigation:
+  key: API Table >> Select
+  title: API Table
+  order: 90
+  parent: Select
+---
+# Select: API Table
+ 
 
 ## class: `LionSelect`, `lion-select`
 

package/docs/components/select/index.md

@@ -1,3 +1,13 @@
-# Select ||40
+---
+parts:
+  - Select
+title: Select
+eleventyNavigation:
+  key: Select
+  order: 40
+  title: Select
+---
+
+# Select
 
 -> go to Overview

package/docs/components/select/overview.md

@@ -1,4 +1,16 @@
-# Select >> Overview ||10
+---
+parts:
+  - Select
+  - Overview
+title: 'Select: Overview'
+eleventyNavigation:
+  key: 'Select: Overview'
+  order: 10
+  parent: Select
+  title: Overview
+---
+
+# Select: Overview
 
 A web component that works as a wrapper around the native `select`.
 

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

@@ -1,4 +1,16 @@
-# Select >> Use Cases ||20
+---
+parts:
+  - Select
+  - Use Cases
+title: 'Select: Use Cases'
+eleventyNavigation:
+  key: 'Select: Use Cases'
+  order: 20
+  parent: Select
+  title: Use Cases
+---
+
+# Select: Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -53,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/593b753f0f99acb36ea6009677bc7fdda9184184/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/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/validate.md).
 
 ## Rendering and updating select options
 

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

@@ -1,4 +1,16 @@
-# Select Rich >> API Table ||90 
+---
+parts:
+  - API Table
+  - Select Rich
+title: 'Select Rich: API Table'
+eleventyNavigation:
+  key: API Table >> Select Rich
+  title: API Table
+  order: 90
+  parent: Select Rich
+---
+# Select Rich: API Table
+ 
 
 ## class: `LionSelectInvoker`, `lion-select-invoker`
 

package/docs/components/select-rich/examples.md

@@ -1,4 +1,16 @@
-# Select Rich >> Examples ||30
+---
+parts:
+  - Select Rich
+  - Examples
+title: 'Select Rich: Examples'
+eleventyNavigation:
+  key: 'Select Rich: Examples'
+  order: 30
+  parent: Select Rich
+  title: Examples
+---
+
+# Select Rich: Examples
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/select-rich/index.md

@@ -1,3 +1,13 @@
-# Select Rich ||40
+---
+parts:
+  - Select Rich
+title: Select Rich
+eleventyNavigation:
+  key: Select Rich
+  order: 40
+  title: Select Rich
+---
+
+# Select Rich
 
 -> go to Overview

package/docs/components/select-rich/overview.md

@@ -1,4 +1,16 @@
-# Select Rich >> Overview ||10
+---
+parts:
+  - Select Rich
+  - Overview
+title: 'Select Rich: Overview'
+eleventyNavigation:
+  key: 'Select Rich: Overview'
+  order: 10
+  parent: Select Rich
+  title: Overview
+---
+
+# Select Rich: Overview
 
 This web component is a 'rich' version of the native `<select>` element.
 It allows providing fully customized options and a fully customized invoker button and is meant to be used whenever the native `<select>` doesn't provide enough styling, theming or user interaction opportunities.

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

@@ -1,4 +1,16 @@
-# Select Rich >> Use Cases ||20
+---
+parts:
+  - Select Rich
+  - Use Cases
+title: 'Select Rich: Use Cases'
+eleventyNavigation:
+  key: 'Select Rich: Use Cases'
+  order: 20
+  parent: Select Rich
+  title: Use Cases
+---
+
+# Select Rich: Use Cases
 
 ```js script
 import { LitElement, html } from '@mdjs/mdjs-preview';
@@ -302,7 +314,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/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/select-rich/examples.md)).
+invoker used in [IntlSelectRich](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/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/steps/api-table.md

@@ -1,4 +1,16 @@
-# Steps >> API Table ||90 
+---
+parts:
+  - API Table
+  - Steps
+title: 'Steps: API Table'
+eleventyNavigation:
+  key: API Table >> Steps
+  title: API Table
+  order: 90
+  parent: Steps
+---
+# Steps: API Table
+ 
 
 ## class: `LionStep`, `lion-step`
 

package/docs/components/steps/index.md

@@ -1,3 +1,13 @@
-# Steps ||50
+---
+parts:
+  - Steps
+title: Steps
+eleventyNavigation:
+  key: Steps
+  order: 50
+  title: Steps
+---
+
+# Steps
 
 -> go to Overview

package/docs/components/steps/overview.md

@@ -1,4 +1,16 @@
-# Steps >> Overview ||10
+---
+parts:
+  - Steps
+  - Overview
+title: 'Steps: Overview'
+eleventyNavigation:
+  key: 'Steps: Overview'
+  order: 10
+  parent: Steps
+  title: Overview
+---
+
+# Steps: Overview
 
 A web component that can be used to break a single goal down into dependable sub-tasks.
 

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

@@ -1,4 +1,16 @@
-# Steps >> Use Cases ||20
+---
+parts:
+  - Steps
+  - Use Cases
+title: 'Steps: Use Cases'
+eleventyNavigation:
+  key: 'Steps: Use Cases'
+  order: 20
+  parent: Steps
+  title: Use Cases
+---
+
+# Steps: Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

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

@@ -1,4 +1,16 @@
-# Switch >> API Table ||90 
+---
+parts:
+  - API Table
+  - Switch
+title: 'Switch: API Table'
+eleventyNavigation:
+  key: API Table >> Switch
+  title: API Table
+  order: 90
+  parent: Switch
+---
+# Switch: API Table
+ 
 
 ## class: `LionSwitch`, `lion-switch`
 

package/docs/components/switch/index.md

@@ -1,3 +1,13 @@
-# Switch ||50
+---
+parts:
+  - Switch
+title: Switch
+eleventyNavigation:
+  key: Switch
+  order: 50
+  title: Switch
+---
+
+# Switch
 
 -> go to Overview

package/docs/components/switch/overview.md

@@ -1,4 +1,16 @@
-# Switch >> Overview ||10
+---
+parts:
+  - Switch
+  - Overview
+title: 'Switch: Overview'
+eleventyNavigation:
+  key: 'Switch: Overview'
+  order: 10
+  parent: Switch
+  title: Overview
+---
+
+# Switch: Overview
 
 <p class="lion-paragraph--emphasis">The Switch is used to toggle a property or feature on or off.</p>
 

package/docs/components/switch/reference.md

@@ -1,4 +1,16 @@
-# Switch >> Reference ||30
+---
+parts:
+  - Switch
+  - Reference
+title: 'Switch: Reference'
+eleventyNavigation:
+  key: 'Switch: Reference'
+  order: 30
+  parent: Switch
+  title: Reference
+---
+
+# Switch: Reference
 
 <p class="lion-paragraph--emphasis">Everything you need to re-use the switch.</p>
 

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

@@ -1,4 +1,16 @@
-# Switch >> Use Cases ||20
+---
+parts:
+  - Switch
+  - Use Cases
+title: 'Switch: Use Cases'
+eleventyNavigation:
+  key: 'Switch: Use Cases'
+  order: 20
+  parent: Switch
+  title: Use Cases
+---
+
+# Switch: Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

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

@@ -1,4 +1,16 @@
-# Tabs >> API Table ||90 
+---
+parts:
+  - API Table
+  - Tabs
+title: 'Tabs: API Table'
+eleventyNavigation:
+  key: API Table >> Tabs
+  title: API Table
+  order: 90
+  parent: Tabs
+---
+# Tabs: API Table
+ 
 
 ## class: `LionTabs`, `lion-tabs`
 

package/docs/components/tabs/examples.md

@@ -1,4 +1,16 @@
-# Tabs >> Examples ||30
+---
+parts:
+  - Tabs
+  - Examples
+title: 'Tabs: Examples'
+eleventyNavigation:
+  key: 'Tabs: Examples'
+  order: 30
+  parent: Tabs
+  title: Examples
+---
+
+# Tabs: Examples
 
 ```js script
 import { LitElement, html } from '@mdjs/mdjs-preview';
@@ -9,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/593b753f0f99acb36ea6009677bc7fdda9184184/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/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/blog/ing-open-sources-lion.md).
 
 ```js preview-story
 export const main = () => html`