@lion/ui 0.11.1 → 0.11.3

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

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

package/docs/components/accordion/index.md

@@ -1,3 +1,13 @@
+---
+parts:
+  - Accordion
+title: Accordion
+eleventyNavigation:
+  key: Accordion
+  order: 0
+  title: Accordion
+---
+
 # Accordion
 
 -> go to Overview

package/docs/components/accordion/overview.md

@@ -1,4 +1,16 @@
-# Accordion >> Overview ||10
+---
+parts:
+  - Accordion
+  - Overview
+title: 'Accordion: Overview'
+eleventyNavigation:
+  key: 'Accordion: Overview'
+  order: 10
+  parent: Accordion
+  title: Overview
+---
+
+# Accordion: Overview
 
 <p class="lion-paragraph--emphasis">An accordion is a vertically stacked set of interactive headings that each contain a title representing a section of content. It allows users to toggle the display of sections of content.</p>
 

package/docs/components/accordion/reference.md

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

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

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

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

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

package/docs/components/button/examples.md

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

package/docs/components/button/extensions.md

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

package/docs/components/button/index.md

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

package/docs/components/button/overview.md

@@ -1,4 +1,16 @@
-# Button >> Overview ||10
+---
+parts:
+  - Button
+  - Overview
+title: 'Button: Overview'
+eleventyNavigation:
+  key: 'Button: Overview'
+  order: 10
+  parent: Button
+  title: Overview
+---
+
+# Button: Overview
 
 A button web component that is easily stylable and accessible.
 

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

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

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

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

package/docs/components/calendar/index.md

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

package/docs/components/calendar/overview.md

@@ -1,4 +1,16 @@
-# Calendar >> Overview ||10
+---
+parts:
+  - Calendar
+  - Overview
+title: 'Calendar: Overview'
+eleventyNavigation:
+  key: 'Calendar: Overview'
+  order: 10
+  parent: Calendar
+  title: Overview
+---
+
+# Calendar: Overview
 
 A reusable and accessible calendar view web component.
 

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

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

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

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

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

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

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

@@ -1,4 +1,16 @@
-# Checkbox Group >> Overview ||10
+---
+parts:
+  - Checkbox Group
+  - Overview
+title: 'Checkbox Group: Overview'
+eleventyNavigation:
+  key: 'Checkbox Group: Overview'
+  order: 10
+  parent: Checkbox Group
+  title: Overview
+---
+
+# Checkbox Group: Overview
 
 A checkbox group enhances the functionality of the native `<input type="checkbox">` element.
 Its purpose is to provide a way for users to check **multiple** options amongst a set of choices, or to function as a single toggle.
@@ -19,11 +31,11 @@ import '@lion/ui/define/lion-checkbox.js';
 </lion-checkbox-group>
 ```
 
-> Make sure that the checkbox-group also has a name attribute, this is necessary for our [form](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/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/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/form/overview.md)'s serialization result.
 
 ## Features
 
-Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/fieldset/overview.md),
+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.
 
 ## Installation

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

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

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

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

package/docs/components/collapsible/examples.md

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

package/docs/components/collapsible/index.md

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

package/docs/components/collapsible/overview.md

@@ -1,4 +1,16 @@
-# Collapsible >> Overview ||10
+---
+parts:
+  - Collapsible
+  - Overview
+title: 'Collapsible: Overview'
+eleventyNavigation:
+  key: 'Collapsible: Overview'
+  order: 10
+  parent: Collapsible
+  title: Overview
+---
+
+# Collapsible: Overview
 
 A combination of a button (the invoker) and a chunk of 'extra content'. This web component can be extended with an animation to disclose the extra content. There are two slots available respectively; `invoker` to specify the collapsible's invoker and `content` for the extra content of the collapsible.
 
@@ -22,7 +34,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/593b753f0f99acb36ea6009677bc7fdda9184184/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/0c3425c2b9f0cbb8c2680b033ba775170b92c641/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/collapsible/use-cases.md

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

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

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

package/docs/components/combobox/extensions.md

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

package/docs/components/combobox/index.md

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

package/docs/components/combobox/overview.md

@@ -1,4 +1,16 @@
-# Combobox >> Overview ||10
+---
+parts:
+  - Combobox
+  - Overview
+title: 'Combobox: Overview'
+eleventyNavigation:
+  key: 'Combobox: Overview'
+  order: 10
+  parent: Combobox
+  title: Overview
+---
+
+# Combobox: Overview
 
 A combobox is a widget made up of the combination of two distinct elements:
 
@@ -34,7 +46,7 @@ export const main = () => html`
 `;
 ```
 
-[...show more](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/combobox/extensions.md)
+[...show more](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/combobox/extensions.md)
 
 ## Features
 

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

@@ -1,4 +1,16 @@
-# Combobox >> Use Cases ||20
+---
+parts:
+  - Combobox
+  - Use Cases
+title: 'Combobox: Use Cases'
+eleventyNavigation:
+  key: 'Combobox: Use Cases'
+  order: 20
+  parent: Combobox
+  title: Use Cases
+---
+
+# Combobox: Use Cases
 
 A combobox is a widget made up of the combination of two distinct elements:
 
@@ -457,4 +469,4 @@ export const complexObjectChoiceValue = () =>
 ## Listbox compatibility
 
 All configurations that can be applied to `lion-listbox`, can be applied to `lion-combobox` as well.
-See the [listbox documentation](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/listbox/overview.md) for more information.
+See the [listbox documentation](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/listbox/overview.md) for more information.

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

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

package/docs/components/dialog/index.md

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

package/docs/components/dialog/overview.md

@@ -1,4 +1,16 @@
-# Dialog >> Overview ||10
+---
+parts:
+  - Dialog
+  - Overview
+title: 'Dialog: Overview'
+eleventyNavigation:
+  key: 'Dialog: Overview'
+  order: 10
+  parent: Dialog
+  title: Overview
+---
+
+# Dialog: Overview
 
 A web component that wraps a modal dialog controller.
 Its purpose is to make it easy to use our Overlay System declaratively.
@@ -54,6 +66,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/593b753f0f99acb36ea6009677bc7fdda9184184/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/0c3425c2b9f0cbb8c2680b033ba775170b92c641/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/dialog/use-cases.md

@@ -1,4 +1,16 @@
-# Dialog >> Use Cases ||20
+---
+parts:
+  - Dialog
+  - Use Cases
+title: 'Dialog: Use Cases'
+eleventyNavigation:
+  key: 'Dialog: Use Cases'
+  order: 20
+  parent: Dialog
+  title: Use Cases
+---
+
+# Dialog: Use Cases
 
 `lion-dialog` is a component wrapping a modal dialog controller.
 Its purpose is to make it easy to use our Overlay System declaratively.

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

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

package/docs/components/drawer/index.md

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