feat: migrated the navigation metadata from inline MD title decorations to frontmatter

* feat: migrated the navigation metadata from inline MD title decorations to frontmatter

* fix: fixed frontmatter metadate for api-table MDs

* fix: fixed frontmatter eslint issue

.markdownlint.json

@@ -5,6 +5,9 @@
   "fenced-code-language": false,
   "no-inline-html": false,
   "first-line-h1": false,
+  "single-h1": {
+    "front_matter_title": ""
+  },
   "no-trailing-punctuation": {
     "punctuation": ".,;。，；：！"
   },

docs/components/accordion/index.md

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

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>
 

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>
 

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';

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';

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';

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

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.
 

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';

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

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.
 

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';

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

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.

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';

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';

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

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.
 

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';

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';

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

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:
 

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:
 

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

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.

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.

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

docs/components/drawer/overview.md

@@ -1,4 +1,16 @@
-# Drawer >> Overview ||10
+---
+parts:
+  - Drawer
+  - Overview
+title: 'Drawer: Overview'
+eleventyNavigation:
+  key: 'Drawer: Overview'
+  order: 10
+  parent: Drawer
+  title: Overview
+---
+
+# Drawer: 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.

docs/components/drawer/use-cases.md

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

docs/components/fieldset/index.md

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

docs/components/fieldset/overview.md

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

docs/components/fieldset/use-cases.md

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

docs/components/form/index.md

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

docs/components/form/overview.md

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

docs/components/form/use-cases.md

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

docs/components/icon/index.md

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

docs/components/icon/overview.md

@@ -1,4 +1,16 @@
-# Icon >> Overview ||10
+---
+parts:
+  - Icon
+  - Overview
+title: 'Icon: Overview'
+eleventyNavigation:
+  key: 'Icon: Overview'
+  order: 10
+  parent: Icon
+  title: Overview
+---
+
+# Icon: Overview
 
 A web component for displaying icons.
 

docs/components/icon/use-cases.md

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

docs/components/index.md

@@ -1,4 +1,14 @@
-# Components ||40
+---
+parts:
+  - Components
+title: Components
+eleventyNavigation:
+  key: Components
+  order: 40
+  title: Components
+---
+
+# Components
 
 Components are one of the key building blocks of the design system. Their systematic reuse helps to create visual and functional consistency across products.
 

docs/components/input-amount/index.md

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

docs/components/input-amount/overview.md

@@ -1,4 +1,16 @@
-# Input Amount >> Overview ||10
+---
+parts:
+  - Input Amount
+  - Overview
+title: 'Input Amount: Overview'
+eleventyNavigation:
+  key: 'Input Amount: Overview'
+  order: 10
+  parent: Input Amount
+  title: Overview
+---
+
+# Input Amount: Overview
 
 A web component based on the generic text input field. Its purpose is to provide a way for users to fill in an amount.
 

docs/components/input-amount/use-cases.md

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

docs/components/input-date/index.md

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

docs/components/input-date/overview.md

@@ -1,4 +1,16 @@
-# Input Date >> Overview ||10
+---
+parts:
+  - Input Date
+  - Overview
+title: 'Input Date: Overview'
+eleventyNavigation:
+  key: 'Input Date: Overview'
+  order: 10
+  parent: Input Date
+  title: Overview
+---
+
+# Input Date: Overview
 
 A web component based on the generic text input field. Its purpose is to provide a way for users to fill in a date.
 

docs/components/input-date/use-cases.md

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

docs/components/input-datepicker/index.md

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

docs/components/input-datepicker/overview.md

@@ -1,4 +1,16 @@
-# Input Datepicker >> Overview ||10
+---
+parts:
+  - Input Datepicker
+  - Overview
+title: 'Input Datepicker: Overview'
+eleventyNavigation:
+  key: 'Input Datepicker: Overview'
+  order: 10
+  parent: Input Datepicker
+  title: Overview
+---
+
+# Input Datepicker: Overview
 
 A web component based on the date text input field. Its purpose is to provide a way for users to fill in a date with a datepicker.
 For an input field with a big range, such as `birthday-input`, a datepicker is not the best choice due to the high variance between possible inputs.

docs/components/input-datepicker/use-cases.md

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

docs/components/input-email/index.md

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

docs/components/input-email/overview.md

@@ -1,4 +1,16 @@
-# Input Email >> Overview ||10
+---
+parts:
+  - Input Email
+  - Overview
+title: 'Input Email: Overview'
+eleventyNavigation:
+  key: 'Input Email: Overview'
+  order: 10
+  parent: Input Email
+  title: Overview
+---
+
+# Input Email: Overview
 
 A web component based on the generic text input field. Its purpose is to provide a way for users to fill in an email.
 

docs/components/input-email/use-cases.md

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

docs/components/input-file/index.md

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

docs/components/input-file/overview.md

@@ -1,4 +1,16 @@
-# Input File >> Overview ||10
+---
+parts:
+  - Input File
+  - Overview
+title: 'Input File: Overview'
+eleventyNavigation:
+  key: 'Input File: Overview'
+  order: 10
+  parent: Input File
+  title: Overview
+---
+
+# Input File: Overview
 
 A web component based on the file input field.
 

docs/components/input-file/use-cases.md

@@ -1,4 +1,16 @@
-# Input File >> Use Cases ||20
+---
+parts:
+  - Input File
+  - Use Cases
+title: 'Input File: Use Cases'
+eleventyNavigation:
+  key: 'Input File: Use Cases'
+  order: 20
+  parent: Input File
+  title: Use Cases
+---
+
+# Input File: Use Cases
 
 ```js script
 import { Required, Validator } from '@lion/ui/form-core.js';

docs/components/input-iban/index.md

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

docs/components/input-iban/overview.md

@@ -1,4 +1,16 @@
-# Input Iban >> Overview ||10
+---
+parts:
+  - Input Iban
+  - Overview
+title: 'Input Iban: Overview'
+eleventyNavigation:
+  key: 'Input Iban: Overview'
+  order: 10
+  parent: Input Iban
+  title: Overview
+---
+
+# Input Iban: Overview
 
 A web component based on the generic text input field.
 Its purpose is to provide a way for users to fill in an IBAN (International Bank Account Number).

docs/components/input-iban/use-cases.md

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

docs/components/input-range/index.md

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

docs/components/input-range/overview.md

@@ -1,4 +1,16 @@
-# Input Range >> Overview ||10
+---
+parts:
+  - Input Range
+  - Overview
+title: 'Input Range: Overview'
+eleventyNavigation:
+  key: 'Input Range: Overview'
+  order: 10
+  parent: Input Range
+  title: Overview
+---
+
+# Input Range: Overview
 
 A web component based on the native range input. Its purpose is to provide a way for users to select one value from a range of values.
 

docs/components/input-range/use-cases.md

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

docs/components/input-stepper/index.md

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

docs/components/input-stepper/overview.md

@@ -1,4 +1,16 @@
-# Input Stepper >> Overview ||10
+---
+parts:
+  - Input Stepper
+  - Overview
+title: 'Input Stepper: Overview'
+eleventyNavigation:
+  key: 'Input Stepper: Overview'
+  order: 10
+  parent: Input Stepper
+  title: Overview
+---
+
+# Input Stepper: Overview
 
 A web component that enables the user to increase and decrease a numeric value by predefined range. It is a combination of two buttons and a number input field with an optional slot `after` to suffix the extra information.
 

docs/components/input-stepper/use-cases.md

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

docs/components/input-tel-dropdown/extensions.md

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

docs/components/input-tel-dropdown/index.md

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

docs/components/input-tel-dropdown/overview.md

@@ -1,4 +1,16 @@
-# Input Tel Dropdown >> Overview ||10
+---
+parts:
+  - Input Tel Dropdown
+  - Overview
+title: 'Input Tel Dropdown: Overview'
+eleventyNavigation:
+  key: 'Input Tel Dropdown: Overview'
+  order: 10
+  parent: Input Tel Dropdown
+  title: Overview
+---
+
+# Input Tel Dropdown: Overview
 
 Extension of Input Tel that prefixes a dropdown list that shows all possible regions / countries.
 

docs/components/input-tel-dropdown/use-cases.md

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

docs/components/input-tel/index.md

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

docs/components/input-tel/overview.md

@@ -1,4 +1,16 @@
-# Input Tel >> Overview ||10
+---
+parts:
+  - Input Tel
+  - Overview
+title: 'Input Tel: Overview'
+eleventyNavigation:
+  key: 'Input Tel: Overview'
+  order: 10
+  parent: Input Tel
+  title: Overview
+---
+
+# Input Tel: Overview
 
 Input field for entering phone numbers, including validation, formatting and mobile keyboard support.
 

docs/components/input-tel/use-cases.md

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

docs/components/input/index.md

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

docs/components/input/overview.md

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

docs/components/input/use-cases.md

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

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

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

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';

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

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.
 

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';

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';

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

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.
 

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

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.
 

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';

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';

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

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.

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';

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

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`.
 

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';

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

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.
 

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';

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

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>
 

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>
 

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';