diff --git a/.markdownlint.json b/.markdownlint.json
index fd477ddfe..f1d68416d 100644
--- a/.markdownlint.json
+++ b/.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": ".,;。,;:!"
},
diff --git a/docs/components/accordion/index.md b/docs/components/accordion/index.md
index 80a5033ed..f8725b6d8 100644
--- a/docs/components/accordion/index.md
+++ b/docs/components/accordion/index.md
@@ -1,3 +1,13 @@
+---
+parts:
+ - Accordion
+title: Accordion
+eleventyNavigation:
+ key: Accordion
+ order: 0
+ title: Accordion
+---
+
# Accordion
-> go to Overview
diff --git a/docs/components/accordion/overview.md b/docs/components/accordion/overview.md
index 372a81f9f..67235c9f1 100644
--- a/docs/components/accordion/overview.md
+++ b/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
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.
diff --git a/docs/components/accordion/reference.md b/docs/components/accordion/reference.md
index b2236c7ae..08e644972 100644
--- a/docs/components/accordion/reference.md
+++ b/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
Everything you need to re-use the accordion.
diff --git a/docs/components/accordion/use-cases.md b/docs/components/accordion/use-cases.md
index 6ab94d599..9e6ab55d0 100644
--- a/docs/components/accordion/use-cases.md
+++ b/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';
diff --git a/docs/components/button/examples.md b/docs/components/button/examples.md
index c0b2dc607..be7765d0c 100644
--- a/docs/components/button/examples.md
+++ b/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';
diff --git a/docs/components/button/extensions.md b/docs/components/button/extensions.md
index 742fe793c..b05c06ecf 100644
--- a/docs/components/button/extensions.md
+++ b/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';
diff --git a/docs/components/button/index.md b/docs/components/button/index.md
index 02c3ebf2c..d5a9aaec1 100644
--- a/docs/components/button/index.md
+++ b/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
diff --git a/docs/components/button/overview.md b/docs/components/button/overview.md
index ef30f9fec..18f8eeb53 100644
--- a/docs/components/button/overview.md
+++ b/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.
diff --git a/docs/components/button/use-cases.md b/docs/components/button/use-cases.md
index e2e45ee9d..cce81caee 100644
--- a/docs/components/button/use-cases.md
+++ b/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';
diff --git a/docs/components/calendar/index.md b/docs/components/calendar/index.md
index bc37eb4d7..73dca582b 100644
--- a/docs/components/calendar/index.md
+++ b/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
diff --git a/docs/components/calendar/overview.md b/docs/components/calendar/overview.md
index f4eeecc76..9ac547f29 100644
--- a/docs/components/calendar/overview.md
+++ b/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.
diff --git a/docs/components/calendar/use-cases.md b/docs/components/calendar/use-cases.md
index a0ef3a79d..3f2a9bbb3 100644
--- a/docs/components/calendar/use-cases.md
+++ b/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';
diff --git a/docs/components/checkbox-group/index.md b/docs/components/checkbox-group/index.md
index f29e51936..0a7d0b68e 100644
--- a/docs/components/checkbox-group/index.md
+++ b/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
diff --git a/docs/components/checkbox-group/overview.md b/docs/components/checkbox-group/overview.md
index 56f610b89..8d7d9df8c 100644
--- a/docs/components/checkbox-group/overview.md
+++ b/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 ` ` 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.
diff --git a/docs/components/checkbox-group/use-cases.md b/docs/components/checkbox-group/use-cases.md
index a3dc43407..f9cfc3e75 100644
--- a/docs/components/checkbox-group/use-cases.md
+++ b/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';
diff --git a/docs/components/collapsible/examples.md b/docs/components/collapsible/examples.md
index a0c42d608..4f9e122dd 100644
--- a/docs/components/collapsible/examples.md
+++ b/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';
diff --git a/docs/components/collapsible/index.md b/docs/components/collapsible/index.md
index 118b374bd..274af8f79 100644
--- a/docs/components/collapsible/index.md
+++ b/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
diff --git a/docs/components/collapsible/overview.md b/docs/components/collapsible/overview.md
index 60cd88cc5..35538c515 100644
--- a/docs/components/collapsible/overview.md
+++ b/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.
diff --git a/docs/components/collapsible/use-cases.md b/docs/components/collapsible/use-cases.md
index 7a2030089..78a40eafb 100644
--- a/docs/components/collapsible/use-cases.md
+++ b/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';
diff --git a/docs/components/combobox/extensions.md b/docs/components/combobox/extensions.md
index 36cbf1650..4ce665de1 100644
--- a/docs/components/combobox/extensions.md
+++ b/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';
diff --git a/docs/components/combobox/index.md b/docs/components/combobox/index.md
index ac13b7839..0f2c04eeb 100644
--- a/docs/components/combobox/index.md
+++ b/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
diff --git a/docs/components/combobox/overview.md b/docs/components/combobox/overview.md
index b5f7fc9c1..2085c3c98 100644
--- a/docs/components/combobox/overview.md
+++ b/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:
diff --git a/docs/components/combobox/use-cases.md b/docs/components/combobox/use-cases.md
index 7de2c4c06..4d63e3d06 100644
--- a/docs/components/combobox/use-cases.md
+++ b/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:
diff --git a/docs/components/dialog/index.md b/docs/components/dialog/index.md
index a6d4406a9..ee88c5115 100644
--- a/docs/components/dialog/index.md
+++ b/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
diff --git a/docs/components/dialog/overview.md b/docs/components/dialog/overview.md
index 47aaab650..2e5ab65b5 100644
--- a/docs/components/dialog/overview.md
+++ b/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.
diff --git a/docs/components/dialog/use-cases.md b/docs/components/dialog/use-cases.md
index daa89cc96..ff2587f5d 100644
--- a/docs/components/dialog/use-cases.md
+++ b/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.
diff --git a/docs/components/drawer/index.md b/docs/components/drawer/index.md
index a00890323..568d61920 100644
--- a/docs/components/drawer/index.md
+++ b/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
diff --git a/docs/components/drawer/overview.md b/docs/components/drawer/overview.md
index 75c31f73e..56e95eddc 100644
--- a/docs/components/drawer/overview.md
+++ b/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.
diff --git a/docs/components/drawer/use-cases.md b/docs/components/drawer/use-cases.md
index a26a4cb08..ad944a7cc 100644
--- a/docs/components/drawer/use-cases.md
+++ b/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';
diff --git a/docs/components/fieldset/index.md b/docs/components/fieldset/index.md
index 6a3e4d0e0..e165213cc 100644
--- a/docs/components/fieldset/index.md
+++ b/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
diff --git a/docs/components/fieldset/overview.md b/docs/components/fieldset/overview.md
index 55150b0ac..711b7c820 100644
--- a/docs/components/fieldset/overview.md
+++ b/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';
diff --git a/docs/components/fieldset/use-cases.md b/docs/components/fieldset/use-cases.md
index 7819a7b2d..665c4d003 100644
--- a/docs/components/fieldset/use-cases.md
+++ b/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';
diff --git a/docs/components/form/index.md b/docs/components/form/index.md
index 647de681e..932ee79fd 100644
--- a/docs/components/form/index.md
+++ b/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
diff --git a/docs/components/form/overview.md b/docs/components/form/overview.md
index 886545a70..73f4411fc 100644
--- a/docs/components/form/overview.md
+++ b/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';
diff --git a/docs/components/form/use-cases.md b/docs/components/form/use-cases.md
index 888a0bbd1..3b2878c52 100644
--- a/docs/components/form/use-cases.md
+++ b/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';
diff --git a/docs/components/icon/index.md b/docs/components/icon/index.md
index 562a6b567..265a58cb6 100644
--- a/docs/components/icon/index.md
+++ b/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
diff --git a/docs/components/icon/overview.md b/docs/components/icon/overview.md
index 9a348a70c..953df94d0 100644
--- a/docs/components/icon/overview.md
+++ b/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.
diff --git a/docs/components/icon/use-cases.md b/docs/components/icon/use-cases.md
index bb76ef702..4ad175e7e 100644
--- a/docs/components/icon/use-cases.md
+++ b/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';
diff --git a/docs/components/index.md b/docs/components/index.md
index cb31eba9a..f55e4acc9 100644
--- a/docs/components/index.md
+++ b/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.
diff --git a/docs/components/input-amount/index.md b/docs/components/input-amount/index.md
index cfe5b8610..56af5b240 100644
--- a/docs/components/input-amount/index.md
+++ b/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
diff --git a/docs/components/input-amount/overview.md b/docs/components/input-amount/overview.md
index 8a2c988c6..fb0d04c18 100644
--- a/docs/components/input-amount/overview.md
+++ b/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.
diff --git a/docs/components/input-amount/use-cases.md b/docs/components/input-amount/use-cases.md
index 8fd96c7f4..3f3aab53f 100644
--- a/docs/components/input-amount/use-cases.md
+++ b/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';
diff --git a/docs/components/input-date/index.md b/docs/components/input-date/index.md
index 80badd2f1..130b56048 100644
--- a/docs/components/input-date/index.md
+++ b/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
diff --git a/docs/components/input-date/overview.md b/docs/components/input-date/overview.md
index e187401f4..f193e5467 100644
--- a/docs/components/input-date/overview.md
+++ b/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.
diff --git a/docs/components/input-date/use-cases.md b/docs/components/input-date/use-cases.md
index 5312a4510..884028ef5 100644
--- a/docs/components/input-date/use-cases.md
+++ b/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';
diff --git a/docs/components/input-datepicker/index.md b/docs/components/input-datepicker/index.md
index 4bbc7e814..4c73ffaf5 100644
--- a/docs/components/input-datepicker/index.md
+++ b/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
diff --git a/docs/components/input-datepicker/overview.md b/docs/components/input-datepicker/overview.md
index 4a2607b92..82b27dfa4 100644
--- a/docs/components/input-datepicker/overview.md
+++ b/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.
diff --git a/docs/components/input-datepicker/use-cases.md b/docs/components/input-datepicker/use-cases.md
index 8770520a2..80b7df3a3 100644
--- a/docs/components/input-datepicker/use-cases.md
+++ b/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';
diff --git a/docs/components/input-email/index.md b/docs/components/input-email/index.md
index 6790f52ef..05bc21ace 100644
--- a/docs/components/input-email/index.md
+++ b/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
diff --git a/docs/components/input-email/overview.md b/docs/components/input-email/overview.md
index 54ced4708..9596ef49b 100644
--- a/docs/components/input-email/overview.md
+++ b/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.
diff --git a/docs/components/input-email/use-cases.md b/docs/components/input-email/use-cases.md
index 01e505512..5cbffd793 100644
--- a/docs/components/input-email/use-cases.md
+++ b/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';
diff --git a/docs/components/input-file/index.md b/docs/components/input-file/index.md
index 25ee58a4f..4e36f855b 100644
--- a/docs/components/input-file/index.md
+++ b/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
diff --git a/docs/components/input-file/overview.md b/docs/components/input-file/overview.md
index 4c7ed506c..c74d0f8df 100644
--- a/docs/components/input-file/overview.md
+++ b/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.
diff --git a/docs/components/input-file/use-cases.md b/docs/components/input-file/use-cases.md
index 6e0d20543..6c6229273 100644
--- a/docs/components/input-file/use-cases.md
+++ b/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';
diff --git a/docs/components/input-iban/index.md b/docs/components/input-iban/index.md
index 58c150348..4ffcde418 100644
--- a/docs/components/input-iban/index.md
+++ b/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
diff --git a/docs/components/input-iban/overview.md b/docs/components/input-iban/overview.md
index e76a2e6da..6f2d8a45c 100644
--- a/docs/components/input-iban/overview.md
+++ b/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).
diff --git a/docs/components/input-iban/use-cases.md b/docs/components/input-iban/use-cases.md
index 03d75c6ee..303286e57 100644
--- a/docs/components/input-iban/use-cases.md
+++ b/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';
diff --git a/docs/components/input-range/index.md b/docs/components/input-range/index.md
index b6831f433..7dfb3f359 100644
--- a/docs/components/input-range/index.md
+++ b/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
diff --git a/docs/components/input-range/overview.md b/docs/components/input-range/overview.md
index 9ba5f4719..65df27c9e 100644
--- a/docs/components/input-range/overview.md
+++ b/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.
diff --git a/docs/components/input-range/use-cases.md b/docs/components/input-range/use-cases.md
index 67cfa9585..4540c94db 100644
--- a/docs/components/input-range/use-cases.md
+++ b/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';
diff --git a/docs/components/input-stepper/index.md b/docs/components/input-stepper/index.md
index c7c4d167a..2f1e07e1b 100644
--- a/docs/components/input-stepper/index.md
+++ b/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
diff --git a/docs/components/input-stepper/overview.md b/docs/components/input-stepper/overview.md
index fe0cc2d0a..f2ee77da1 100644
--- a/docs/components/input-stepper/overview.md
+++ b/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.
diff --git a/docs/components/input-stepper/use-cases.md b/docs/components/input-stepper/use-cases.md
index ff5a9ed32..4cb286f48 100644
--- a/docs/components/input-stepper/use-cases.md
+++ b/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';
diff --git a/docs/components/input-tel-dropdown/extensions.md b/docs/components/input-tel-dropdown/extensions.md
index 8b89196e5..601423d62 100644
--- a/docs/components/input-tel-dropdown/extensions.md
+++ b/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';
diff --git a/docs/components/input-tel-dropdown/index.md b/docs/components/input-tel-dropdown/index.md
index abb7dd364..e3f5eab23 100644
--- a/docs/components/input-tel-dropdown/index.md
+++ b/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
diff --git a/docs/components/input-tel-dropdown/overview.md b/docs/components/input-tel-dropdown/overview.md
index d7b766519..8815b68c8 100644
--- a/docs/components/input-tel-dropdown/overview.md
+++ b/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.
diff --git a/docs/components/input-tel-dropdown/use-cases.md b/docs/components/input-tel-dropdown/use-cases.md
index 6320bb369..9a1432bad 100644
--- a/docs/components/input-tel-dropdown/use-cases.md
+++ b/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';
diff --git a/docs/components/input-tel/index.md b/docs/components/input-tel/index.md
index a8a7921e1..53a538e33 100644
--- a/docs/components/input-tel/index.md
+++ b/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
diff --git a/docs/components/input-tel/overview.md b/docs/components/input-tel/overview.md
index bf91a90a5..ab9e2a899 100644
--- a/docs/components/input-tel/overview.md
+++ b/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.
diff --git a/docs/components/input-tel/use-cases.md b/docs/components/input-tel/use-cases.md
index be9618b69..6ad9e7f6a 100644
--- a/docs/components/input-tel/use-cases.md
+++ b/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';
diff --git a/docs/components/input/index.md b/docs/components/input/index.md
index a21c04dda..705f3f971 100644
--- a/docs/components/input/index.md
+++ b/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
diff --git a/docs/components/input/overview.md b/docs/components/input/overview.md
index d26208bb0..42dfd6a08 100644
--- a/docs/components/input/overview.md
+++ b/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';
diff --git a/docs/components/input/use-cases.md b/docs/components/input/use-cases.md
index 7882bf90a..b0082fff1 100644
--- a/docs/components/input/use-cases.md
+++ b/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';
diff --git a/docs/components/listbox/index.md b/docs/components/listbox/index.md
index 90a84aac0..1b472861f 100644
--- a/docs/components/listbox/index.md
+++ b/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
diff --git a/docs/components/listbox/overview.md b/docs/components/listbox/overview.md
index 6a0a6f8c7..12ce0615b 100644
--- a/docs/components/listbox/overview.md
+++ b/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
diff --git a/docs/components/listbox/use-cases.md b/docs/components/listbox/use-cases.md
index 4221ca47a..8113517c7 100644
--- a/docs/components/listbox/use-cases.md
+++ b/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';
diff --git a/docs/components/pagination/index.md b/docs/components/pagination/index.md
index e01c6abfa..176172ba6 100644
--- a/docs/components/pagination/index.md
+++ b/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
diff --git a/docs/components/pagination/overview.md b/docs/components/pagination/overview.md
index d59a42d5e..caccabffb 100644
--- a/docs/components/pagination/overview.md
+++ b/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.
diff --git a/docs/components/pagination/use-cases.md b/docs/components/pagination/use-cases.md
index 84061b6ac..2714636a3 100644
--- a/docs/components/pagination/use-cases.md
+++ b/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';
diff --git a/docs/components/progress-indicator/examples.md b/docs/components/progress-indicator/examples.md
index 3cf24cb97..e71e8cc25 100644
--- a/docs/components/progress-indicator/examples.md
+++ b/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';
diff --git a/docs/components/progress-indicator/index.md b/docs/components/progress-indicator/index.md
index c46b232bc..fa54a055c 100644
--- a/docs/components/progress-indicator/index.md
+++ b/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
diff --git a/docs/components/progress-indicator/overview.md b/docs/components/progress-indicator/overview.md
index d91926330..8b80794e6 100644
--- a/docs/components/progress-indicator/overview.md
+++ b/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.
diff --git a/docs/components/radio-group/index.md b/docs/components/radio-group/index.md
index e879ee0df..0b461f3fd 100644
--- a/docs/components/radio-group/index.md
+++ b/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
diff --git a/docs/components/radio-group/overview.md b/docs/components/radio-group/overview.md
index 19febaab2..5ffc085a2 100644
--- a/docs/components/radio-group/overview.md
+++ b/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 ` ` element. Its purpose is to provide a way for users to check a **single** option amongst a set of choices.
diff --git a/docs/components/radio-group/use-cases.md b/docs/components/radio-group/use-cases.md
index b1417e1fb..e96ce9f8f 100644
--- a/docs/components/radio-group/use-cases.md
+++ b/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';
diff --git a/docs/components/select-rich/examples.md b/docs/components/select-rich/examples.md
index 02c27e25c..8521ff7b6 100644
--- a/docs/components/select-rich/examples.md
+++ b/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';
diff --git a/docs/components/select-rich/index.md b/docs/components/select-rich/index.md
index 12b9705b7..8fd9500c2 100644
--- a/docs/components/select-rich/index.md
+++ b/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
diff --git a/docs/components/select-rich/overview.md b/docs/components/select-rich/overview.md
index 1a8bda4a5..d211a79de 100644
--- a/docs/components/select-rich/overview.md
+++ b/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 `` element.
It allows providing fully customized options and a fully customized invoker button and is meant to be used whenever the native `` doesn't provide enough styling, theming or user interaction opportunities.
diff --git a/docs/components/select-rich/use-cases.md b/docs/components/select-rich/use-cases.md
index b0fb3cf6d..05f4306dd 100644
--- a/docs/components/select-rich/use-cases.md
+++ b/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';
diff --git a/docs/components/select/index.md b/docs/components/select/index.md
index 4411641b4..53b675f94 100644
--- a/docs/components/select/index.md
+++ b/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
diff --git a/docs/components/select/overview.md b/docs/components/select/overview.md
index 8b7278551..a098d35d4 100644
--- a/docs/components/select/overview.md
+++ b/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`.
diff --git a/docs/components/select/use-cases.md b/docs/components/select/use-cases.md
index 3e84ac692..5c9d5a39e 100644
--- a/docs/components/select/use-cases.md
+++ b/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';
diff --git a/docs/components/steps/index.md b/docs/components/steps/index.md
index 3740c4013..98d5a1f45 100644
--- a/docs/components/steps/index.md
+++ b/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
diff --git a/docs/components/steps/overview.md b/docs/components/steps/overview.md
index fed19f6da..c79f38bc5 100644
--- a/docs/components/steps/overview.md
+++ b/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.
diff --git a/docs/components/steps/use-cases.md b/docs/components/steps/use-cases.md
index 756bc924d..e29af0fe3 100644
--- a/docs/components/steps/use-cases.md
+++ b/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';
diff --git a/docs/components/switch/index.md b/docs/components/switch/index.md
index b641d43f8..aa863a2c1 100644
--- a/docs/components/switch/index.md
+++ b/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
diff --git a/docs/components/switch/overview.md b/docs/components/switch/overview.md
index 112d3649e..996c9bec4 100644
--- a/docs/components/switch/overview.md
+++ b/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
The Switch is used to toggle a property or feature on or off.
diff --git a/docs/components/switch/reference.md b/docs/components/switch/reference.md
index eafcf1e99..10adffc09 100644
--- a/docs/components/switch/reference.md
+++ b/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
Everything you need to re-use the switch.
diff --git a/docs/components/switch/use-cases.md b/docs/components/switch/use-cases.md
index e1dd92ead..232ef6bef 100644
--- a/docs/components/switch/use-cases.md
+++ b/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';
diff --git a/docs/components/tabs/examples.md b/docs/components/tabs/examples.md
index 71a8c8638..28d5a1225 100644
--- a/docs/components/tabs/examples.md
+++ b/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';
diff --git a/docs/components/tabs/index.md b/docs/components/tabs/index.md
index 19b39162f..a73cd9767 100644
--- a/docs/components/tabs/index.md
+++ b/docs/components/tabs/index.md
@@ -1,3 +1,13 @@
-# Tabs ||50
+---
+parts:
+ - Tabs
+title: Tabs
+eleventyNavigation:
+ key: Tabs
+ order: 50
+ title: Tabs
+---
+
+# Tabs
-> go to Overview
diff --git a/docs/components/tabs/overview.md b/docs/components/tabs/overview.md
index a4a38e730..c8a88ea99 100644
--- a/docs/components/tabs/overview.md
+++ b/docs/components/tabs/overview.md
@@ -1,4 +1,16 @@
-# Tabs >> Overview ||10
+---
+parts:
+ - Tabs
+ - Overview
+title: 'Tabs: Overview'
+eleventyNavigation:
+ key: 'Tabs: Overview'
+ order: 10
+ parent: Tabs
+ title: Overview
+---
+
+# Tabs: Overview
A web component that allows users to quickly move between a small number of equally important views.
diff --git a/docs/components/tabs/use-cases.md b/docs/components/tabs/use-cases.md
index cf689ec6f..4862acf81 100644
--- a/docs/components/tabs/use-cases.md
+++ b/docs/components/tabs/use-cases.md
@@ -1,4 +1,16 @@
-# Tabs >> Use Cases ||20
+---
+parts:
+ - Tabs
+ - Use Cases
+title: 'Tabs: Use Cases'
+eleventyNavigation:
+ key: 'Tabs: Use Cases'
+ order: 20
+ parent: Tabs
+ title: Use Cases
+---
+
+# Tabs: Use Cases
```js script
import { LitElement, html } from '@mdjs/mdjs-preview';
diff --git a/docs/components/textarea/index.md b/docs/components/textarea/index.md
index 3a73891f0..dde37b9a2 100644
--- a/docs/components/textarea/index.md
+++ b/docs/components/textarea/index.md
@@ -1,3 +1,13 @@
-# Textarea ||50
+---
+parts:
+ - Textarea
+title: Textarea
+eleventyNavigation:
+ key: Textarea
+ order: 50
+ title: Textarea
+---
+
+# Textarea
-> go to Overview
diff --git a/docs/components/textarea/overview.md b/docs/components/textarea/overview.md
index 490fc59ff..6aada0aa3 100644
--- a/docs/components/textarea/overview.md
+++ b/docs/components/textarea/overview.md
@@ -1,4 +1,16 @@
-# Textarea >> Overview ||10
+---
+parts:
+ - Textarea
+ - Overview
+title: 'Textarea: Overview'
+eleventyNavigation:
+ key: 'Textarea: Overview'
+ order: 10
+ parent: Textarea
+ title: Overview
+---
+
+# Textarea: Overview
A webcomponent that enhances the functionality of the native ` ` element.
Its purpose is to provide a way for users to write text that is multiple lines long.
diff --git a/docs/components/textarea/use-cases.md b/docs/components/textarea/use-cases.md
index 6ce8fc033..82f1f8f03 100644
--- a/docs/components/textarea/use-cases.md
+++ b/docs/components/textarea/use-cases.md
@@ -1,4 +1,16 @@
-# Textarea >> Use Cases ||20
+---
+parts:
+ - Textarea
+ - Use Cases
+title: 'Textarea: Use Cases'
+eleventyNavigation:
+ key: 'Textarea: Use Cases'
+ order: 20
+ parent: Textarea
+ title: Use Cases
+---
+
+# Textarea: Use Cases
```js script
import { html } from '@mdjs/mdjs-preview';
diff --git a/docs/components/tooltip/examples.md b/docs/components/tooltip/examples.md
index 9e4c0f9d8..c1afe0324 100644
--- a/docs/components/tooltip/examples.md
+++ b/docs/components/tooltip/examples.md
@@ -1,4 +1,16 @@
-# Tooltip >> Examples ||30
+---
+parts:
+ - Tooltip
+ - Examples
+title: 'Tooltip: Examples'
+eleventyNavigation:
+ key: 'Tooltip: Examples'
+ order: 30
+ parent: Tooltip
+ title: Examples
+---
+
+# Tooltip: Examples
```js script
import { html } from '@mdjs/mdjs-preview';
diff --git a/docs/components/tooltip/index.md b/docs/components/tooltip/index.md
index 1f11bbce3..77d896a04 100644
--- a/docs/components/tooltip/index.md
+++ b/docs/components/tooltip/index.md
@@ -1,3 +1,13 @@
-# Tooltip ||60
+---
+parts:
+ - Tooltip
+title: Tooltip
+eleventyNavigation:
+ key: Tooltip
+ order: 60
+ title: Tooltip
+---
+
+# Tooltip
-> go to Overview
diff --git a/docs/components/tooltip/overview.md b/docs/components/tooltip/overview.md
index 70dbd9ac4..fbcdcafd0 100644
--- a/docs/components/tooltip/overview.md
+++ b/docs/components/tooltip/overview.md
@@ -1,4 +1,16 @@
-# Tooltip >> Overview ||10
+---
+parts:
+ - Tooltip
+ - Overview
+title: 'Tooltip: Overview'
+eleventyNavigation:
+ key: 'Tooltip: Overview'
+ order: 10
+ parent: Tooltip
+ title: Overview
+---
+
+# Tooltip: Overview
A web component used for basic popups on hover.
Its purpose is to show content appearing when the user hovers over an invoker element with the cursor or with the keyboard, or if the invoker element is focused.
diff --git a/docs/components/tooltip/use-cases.md b/docs/components/tooltip/use-cases.md
index 885929880..366e1f397 100644
--- a/docs/components/tooltip/use-cases.md
+++ b/docs/components/tooltip/use-cases.md
@@ -1,4 +1,16 @@
-# Tooltip >> Use Cases ||20
+---
+parts:
+ - Tooltip
+ - Use Cases
+title: 'Tooltip: Use Cases'
+eleventyNavigation:
+ key: 'Tooltip: Use Cases'
+ order: 20
+ parent: Tooltip
+ title: Use Cases
+---
+
+# Tooltip: Use Cases
```js script
import { css, html } from '@mdjs/mdjs-preview';
diff --git a/docs/fundamentals/node-tools/babel-plugin-extend-docs/index.md b/docs/fundamentals/node-tools/babel-plugin-extend-docs/index.md
index c6cbad30d..acf53681f 100644
--- a/docs/fundamentals/node-tools/babel-plugin-extend-docs/index.md
+++ b/docs/fundamentals/node-tools/babel-plugin-extend-docs/index.md
@@ -1 +1,13 @@
+---
+parts:
+ - Babel Extend Docs
+ - Node Tools
+title: 'Node Tools: Babel Extend Docs'
+eleventyNavigation:
+ key: Node Tools >> Babel Extend Docs
+ title: Babel Extend Docs
+ order: 10
+ parent: Node Tools
+---
+
# Node Tools >> Babel Extend Docs ||10
diff --git a/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md b/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md
index 9ab7db930..e31e3008e 100644
--- a/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md
+++ b/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Overview
+ - Babel Extend Docs
+ - Node Tools
+title: 'Babel Extend Docs: Overview'
+eleventyNavigation:
+ key: Node Tools >> Babel Extend Docs >> Overview
+ title: Overview
+ order: 10
+ parent: Node Tools >> Babel Extend Docs
+---
+
# Node Tools >> Babel Extend Docs >> Overview ||10
A plugin which rewrites imports and templates according to a configuration.
diff --git a/docs/fundamentals/node-tools/index.md b/docs/fundamentals/node-tools/index.md
index c3c1ec435..f9a97d4cf 100644
--- a/docs/fundamentals/node-tools/index.md
+++ b/docs/fundamentals/node-tools/index.md
@@ -1 +1,11 @@
+---
+parts:
+ - Node Tools
+title: Node Tools
+eleventyNavigation:
+ key: Node Tools
+ title: Node Tools
+ order: 30
+---
+
# Node Tools ||30
diff --git a/docs/fundamentals/node-tools/providence-analytics/index.md b/docs/fundamentals/node-tools/providence-analytics/index.md
index c7b945cab..f8a9700b7 100644
--- a/docs/fundamentals/node-tools/providence-analytics/index.md
+++ b/docs/fundamentals/node-tools/providence-analytics/index.md
@@ -1 +1,13 @@
+---
+parts:
+ - Providence Analytics
+ - Node Tools
+title: 'Node Tools: Providence Analytics'
+eleventyNavigation:
+ key: Node Tools >> Providence Analytics
+ title: Providence Analytics
+ order: 20
+ parent: Node Tools
+---
+
# Node Tools >> Providence Analytics ||20
diff --git a/docs/fundamentals/node-tools/providence-analytics/overview.md b/docs/fundamentals/node-tools/providence-analytics/overview.md
index 2ff65adfe..7fff59278 100644
--- a/docs/fundamentals/node-tools/providence-analytics/overview.md
+++ b/docs/fundamentals/node-tools/providence-analytics/overview.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Overview
+ - Providence Analytics
+ - Node Tools
+title: 'Providence Analytics: Overview'
+eleventyNavigation:
+ key: Node Tools >> Providence Analytics >> Overview
+ title: Overview
+ order: 10
+ parent: Node Tools >> Providence Analytics
+---
+
# Node Tools >> Providence Analytics >> Overview ||10
```js script
diff --git a/docs/fundamentals/node-tools/publish-docs/index.md b/docs/fundamentals/node-tools/publish-docs/index.md
index c7db8787c..4cd270cda 100644
--- a/docs/fundamentals/node-tools/publish-docs/index.md
+++ b/docs/fundamentals/node-tools/publish-docs/index.md
@@ -1 +1,13 @@
+---
+parts:
+ - Publish Docs
+ - Node Tools
+title: 'Node Tools: Publish Docs'
+eleventyNavigation:
+ key: Node Tools >> Publish Docs
+ title: Publish Docs
+ order: 10
+ parent: Node Tools
+---
+
# Node Tools >> Publish Docs ||10
diff --git a/docs/fundamentals/node-tools/publish-docs/overview.md b/docs/fundamentals/node-tools/publish-docs/overview.md
index 69941029c..d87d27cca 100644
--- a/docs/fundamentals/node-tools/publish-docs/overview.md
+++ b/docs/fundamentals/node-tools/publish-docs/overview.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Overview
+ - Publish Docs
+ - Node Tools
+title: 'Publish Docs: Overview'
+eleventyNavigation:
+ key: Node Tools >> Publish Docs >> Overview
+ title: Overview
+ order: 10
+ parent: Node Tools >> Publish Docs
+---
+
# Node Tools >> Publish Docs >> Overview ||10
A tool that copies and processes your documentation (in a monorepo) so it can be published/shipped with your package.
diff --git a/docs/fundamentals/node-tools/remark-extend/index.md b/docs/fundamentals/node-tools/remark-extend/index.md
index 1cbc65161..4ef9b0f6b 100644
--- a/docs/fundamentals/node-tools/remark-extend/index.md
+++ b/docs/fundamentals/node-tools/remark-extend/index.md
@@ -1 +1,13 @@
+---
+parts:
+ - Remark Extend
+ - Node Tools
+title: 'Node Tools: Remark Extend'
+eleventyNavigation:
+ key: Node Tools >> Remark Extend
+ title: Remark Extend
+ order: 30
+ parent: Node Tools
+---
+
# Node Tools >> Remark Extend ||30
diff --git a/docs/fundamentals/node-tools/remark-extend/overview.md b/docs/fundamentals/node-tools/remark-extend/overview.md
index 5ac7116df..886af8ac2 100644
--- a/docs/fundamentals/node-tools/remark-extend/overview.md
+++ b/docs/fundamentals/node-tools/remark-extend/overview.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Overview
+ - Remark Extend
+ - Node Tools
+title: 'Remark Extend: Overview'
+eleventyNavigation:
+ key: Node Tools >> Remark Extend >> Overview
+ title: Overview
+ order: 10
+ parent: Node Tools >> Remark Extend
+---
+
# Node Tools >> Remark Extend >> Overview ||10
A plugin for remark to extend markdown by importing from source files.
diff --git a/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/index.md b/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/index.md
index 818624291..7959e3907 100644
--- a/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/index.md
+++ b/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/index.md
@@ -1 +1,13 @@
+---
+parts:
+ - Extend Docs
+ - Node Tools
+title: 'Node Tools: Extend Docs'
+eleventyNavigation:
+ key: Node Tools >> Extend Docs
+ title: Extend Docs
+ order: 5
+ parent: Node Tools
+---
+
# Node Tools >> Extend Docs ||5
diff --git a/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md b/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md
index 81bd6e4b8..12c5857a8 100644
--- a/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md
+++ b/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Overview
+ - Extend Docs
+ - Node Tools
+title: 'Extend Docs: Overview'
+eleventyNavigation:
+ key: Node Tools >> Extend Docs >> Overview
+ title: Overview
+ order: 10
+ parent: Node Tools >> Extend Docs
+---
+
# Node Tools >> Extend Docs >> Overview ||10
When maintaining your own extension layer of lion you most likely want to maintain a similar documentation.
diff --git a/docs/fundamentals/rationales/TypeScript.md b/docs/fundamentals/rationales/TypeScript.md
index 58f6a1ccc..2961e278a 100644
--- a/docs/fundamentals/rationales/TypeScript.md
+++ b/docs/fundamentals/rationales/TypeScript.md
@@ -1,3 +1,15 @@
+---
+parts:
+ - TypeScript
+ - Rationales
+title: 'Rationales: TypeScript'
+eleventyNavigation:
+ key: Rationales >> TypeScript
+ title: TypeScript
+ order: 30
+ parent: Rationales
+---
+
# Rationales >> TypeScript ||30
[TypeScript](https://www.typescriptlang.org) is superset of JavaScript and a popular tool for getting strongly typed syntax and better autocompletion in JavaScript.
diff --git a/docs/fundamentals/rationales/accessibility.md b/docs/fundamentals/rationales/accessibility.md
index 1bbd5590d..a7ca77361 100644
--- a/docs/fundamentals/rationales/accessibility.md
+++ b/docs/fundamentals/rationales/accessibility.md
@@ -1,3 +1,15 @@
+---
+parts:
+ - Accessibility
+ - Rationales
+title: 'Rationales: Accessibility'
+eleventyNavigation:
+ key: Rationales >> Accessibility
+ title: Accessibility
+ order: 5
+ parent: Rationales
+---
+
# Rationales >> Accessibility ||5
In Lion accessibility is a first class citizen. That means accessibility is never an afterthought.
diff --git a/docs/fundamentals/rationales/index.md b/docs/fundamentals/rationales/index.md
index acbee3e8e..70b840b6a 100644
--- a/docs/fundamentals/rationales/index.md
+++ b/docs/fundamentals/rationales/index.md
@@ -1 +1,11 @@
+---
+parts:
+ - Rationales
+title: Rationales
+eleventyNavigation:
+ key: Rationales
+ title: Rationales
+ order: 50
+---
+
# Rationales ||50
diff --git a/docs/fundamentals/rationales/side-effects.md b/docs/fundamentals/rationales/side-effects.md
index d0755a00c..fc679011f 100644
--- a/docs/fundamentals/rationales/side-effects.md
+++ b/docs/fundamentals/rationales/side-effects.md
@@ -1,3 +1,15 @@
+---
+parts:
+ - Side Effects
+ - Rationales
+title: 'Rationales: Side Effects'
+eleventyNavigation:
+ key: Rationales >> Side Effects
+ title: Side Effects
+ order: 10
+ parent: Rationales
+---
+
# Rationales >> Side Effects ||10
All our packages are side effect free due to the fact that es modules are always side effect free even when changing other es modules. Only code which accesses browser globals like `window`, `console` in the root of the module will be treated a side effect and always included.
diff --git a/docs/fundamentals/rationales/versioning.md b/docs/fundamentals/rationales/versioning.md
index 57586fe99..4041e2719 100644
--- a/docs/fundamentals/rationales/versioning.md
+++ b/docs/fundamentals/rationales/versioning.md
@@ -1,3 +1,15 @@
+---
+parts:
+ - Versioning Lion
+ - Rationales
+title: 'Rationales: Versioning Lion'
+eleventyNavigation:
+ key: Rationales >> Versioning Lion
+ title: Versioning Lion
+ order: 20
+ parent: Rationales
+---
+
# Rationales >> Versioning Lion ||20
Since Lion is a monorepository where each package is published separately under the `@lion` scope, we have packages that depend on other packages.
diff --git a/docs/fundamentals/systems/core/SlotMixin.md b/docs/fundamentals/systems/core/SlotMixin.md
index ad3d3b7e2..4b2c1523c 100644
--- a/docs/fundamentals/systems/core/SlotMixin.md
+++ b/docs/fundamentals/systems/core/SlotMixin.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - SlotMixin
+ - Core
+ - Systems
+title: 'Core: SlotMixin'
+eleventyNavigation:
+ key: Systems >> Core >> SlotMixin
+ title: SlotMixin
+ order: 20
+ parent: Systems >> Core
+---
+
# Systems >> Core >> SlotMixin ||20
The SlotMixin is made for solving accessibility challenges that inherently come with the usage of shadow dom.
diff --git a/docs/fundamentals/systems/core/index.md b/docs/fundamentals/systems/core/index.md
index e141d885a..5379162a3 100644
--- a/docs/fundamentals/systems/core/index.md
+++ b/docs/fundamentals/systems/core/index.md
@@ -1,3 +1,15 @@
+---
+parts:
+ - Core
+ - Systems
+title: 'Systems: Core'
+eleventyNavigation:
+ key: Systems >> Core
+ title: Core
+ order: 10
+ parent: Systems
+---
+
# Systems >> Core ||10
-> go to Overview
diff --git a/docs/fundamentals/systems/core/overview.md b/docs/fundamentals/systems/core/overview.md
index eb1816c79..bfa9d63a4 100644
--- a/docs/fundamentals/systems/core/overview.md
+++ b/docs/fundamentals/systems/core/overview.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Overview
+ - Core
+ - Systems
+title: 'Core: Overview'
+eleventyNavigation:
+ key: Systems >> Core >> Overview
+ title: Overview
+ order: 10
+ parent: Systems >> Core
+---
+
# Systems >> Core >> Overview ||10
The core package is mostly for in-depth usage.
diff --git a/docs/fundamentals/systems/form/formatting-and-parsing.md b/docs/fundamentals/systems/form/formatting-and-parsing.md
index b5e6211f1..3ee15181f 100644
--- a/docs/fundamentals/systems/form/formatting-and-parsing.md
+++ b/docs/fundamentals/systems/form/formatting-and-parsing.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Formatting and Parsing
+ - Form
+ - Systems
+title: 'Form: Formatting and Parsing'
+eleventyNavigation:
+ key: Systems >> Form >> Formatting and Parsing
+ title: Formatting and Parsing
+ order: 21
+ parent: Systems >> Form
+---
+
# Systems >> Form >> Formatting and Parsing ||21
```js script
diff --git a/docs/fundamentals/systems/form/index.md b/docs/fundamentals/systems/form/index.md
index 8a202d272..72624fd7c 100644
--- a/docs/fundamentals/systems/form/index.md
+++ b/docs/fundamentals/systems/form/index.md
@@ -1,3 +1,15 @@
+---
+parts:
+ - Form
+ - Systems
+title: 'Systems: Form'
+eleventyNavigation:
+ key: Systems >> Form
+ title: Form
+ order: 20
+ parent: Systems
+---
+
# Systems >> Form ||20
-> go to Overview
diff --git a/docs/fundamentals/systems/form/interaction-states.md b/docs/fundamentals/systems/form/interaction-states.md
index 706d7e86f..0f0481d24 100644
--- a/docs/fundamentals/systems/form/interaction-states.md
+++ b/docs/fundamentals/systems/form/interaction-states.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Interaction States
+ - Form
+ - Systems
+title: 'Form: Interaction States'
+eleventyNavigation:
+ key: Systems >> Form >> Interaction States
+ title: Interaction States
+ order: 22
+ parent: Systems >> Form
+---
+
# Systems >> Form >> Interaction States ||22
```js script
diff --git a/docs/fundamentals/systems/form/model-value.md b/docs/fundamentals/systems/form/model-value.md
index 223d56fba..3476150fd 100644
--- a/docs/fundamentals/systems/form/model-value.md
+++ b/docs/fundamentals/systems/form/model-value.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - ModelValue
+ - Form
+ - Systems
+title: 'Form: ModelValue'
+eleventyNavigation:
+ key: Systems >> Form >> ModelValue
+ title: ModelValue
+ order: 20
+ parent: Systems >> Form
+---
+
# Systems >> Form >> ModelValue ||20
The modelValue or model can be considered as the ‘aorta’ of our form system.
diff --git a/docs/fundamentals/systems/form/overview.md b/docs/fundamentals/systems/form/overview.md
index 78085c7cb..ed7dc89ce 100644
--- a/docs/fundamentals/systems/form/overview.md
+++ b/docs/fundamentals/systems/form/overview.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Overview
+ - Form
+ - Systems
+title: 'Form: Overview'
+eleventyNavigation:
+ key: Systems >> Form >> Overview
+ title: Overview
+ order: 10
+ parent: Systems >> Form
+---
+
# Systems >> Form >> Overview ||10
This page should be used as a starting point when first using the Form System.
diff --git a/docs/fundamentals/systems/form/styling.md b/docs/fundamentals/systems/form/styling.md
index 7a14f3e78..58aa8eeb2 100644
--- a/docs/fundamentals/systems/form/styling.md
+++ b/docs/fundamentals/systems/form/styling.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Styling
+ - Form
+ - Systems
+title: 'Form: Styling'
+eleventyNavigation:
+ key: Systems >> Form >> Styling
+ title: Styling
+ order: 40
+ parent: Systems >> Form
+---
+
# Systems >> Form >> Styling ||40
```js script
diff --git a/docs/fundamentals/systems/form/use-cases.md b/docs/fundamentals/systems/form/use-cases.md
index 716e26094..ba7ee0dd1 100644
--- a/docs/fundamentals/systems/form/use-cases.md
+++ b/docs/fundamentals/systems/form/use-cases.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Use Cases
+ - Form
+ - Systems
+title: 'Form: Use Cases'
+eleventyNavigation:
+ key: Systems >> Form >> Use Cases
+ title: Use Cases
+ order: 50
+ parent: Systems >> Form
+---
+
# Systems >> Form >> Use Cases ||50
This is a meta package to show interaction between various form elements.
diff --git a/docs/fundamentals/systems/form/validate.md b/docs/fundamentals/systems/form/validate.md
index a9cd7b6f8..fdcc0a313 100644
--- a/docs/fundamentals/systems/form/validate.md
+++ b/docs/fundamentals/systems/form/validate.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Validate
+ - Form
+ - Systems
+title: 'Form: Validate'
+eleventyNavigation:
+ key: Systems >> Form >> Validate
+ title: Validate
+ order: 30
+ parent: Systems >> Form
+---
+
# Systems >> Form >> Validate ||30
```js script
diff --git a/docs/fundamentals/systems/icon/index.md b/docs/fundamentals/systems/icon/index.md
index 5957a2400..de2682681 100644
--- a/docs/fundamentals/systems/icon/index.md
+++ b/docs/fundamentals/systems/icon/index.md
@@ -1,3 +1,15 @@
+---
+parts:
+ - Icon
+ - Systems
+title: 'Systems: Icon'
+eleventyNavigation:
+ key: Systems >> Icon
+ title: Icon
+ order: 40
+ parent: Systems
+---
+
# Systems >> Icon ||40
-> go to Overview
diff --git a/docs/fundamentals/systems/icon/overview.md b/docs/fundamentals/systems/icon/overview.md
index 45d69a58d..7a91312d5 100644
--- a/docs/fundamentals/systems/icon/overview.md
+++ b/docs/fundamentals/systems/icon/overview.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Overview
+ - Icon
+ - Systems
+title: 'Icon: Overview'
+eleventyNavigation:
+ key: Systems >> Icon >> Overview
+ title: Overview
+ order: 10
+ parent: Systems >> Icon
+---
+
# Systems >> Icon >> Overview ||10
The icon system provides a way of defining icon sets which are lazily loaded on demand when
diff --git a/docs/fundamentals/systems/index.md b/docs/fundamentals/systems/index.md
index fcffc14f4..96c600e68 100644
--- a/docs/fundamentals/systems/index.md
+++ b/docs/fundamentals/systems/index.md
@@ -1 +1,11 @@
+---
+parts:
+ - Systems
+title: Systems
+eleventyNavigation:
+ key: Systems
+ title: Systems
+ order: 20
+---
+
# Systems ||20
diff --git a/docs/fundamentals/systems/localize/dates.md b/docs/fundamentals/systems/localize/dates.md
index 67e2e030a..53f64fdde 100644
--- a/docs/fundamentals/systems/localize/dates.md
+++ b/docs/fundamentals/systems/localize/dates.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Format Dates
+ - Localize
+ - Systems
+title: 'Localize: Format Dates'
+eleventyNavigation:
+ key: Systems >> Localize >> Format Dates
+ title: Format Dates
+ order: 40
+ parent: Systems >> Localize
+---
+
# Systems >> Localize >> Format Dates ||40
## Features
diff --git a/docs/fundamentals/systems/localize/index.md b/docs/fundamentals/systems/localize/index.md
index 2147313b8..2dd0a0a47 100644
--- a/docs/fundamentals/systems/localize/index.md
+++ b/docs/fundamentals/systems/localize/index.md
@@ -1,3 +1,15 @@
+---
+parts:
+ - Localize
+ - Systems
+title: 'Systems: Localize'
+eleventyNavigation:
+ key: Systems >> Localize
+ title: Localize
+ order: 30
+ parent: Systems
+---
+
# Systems >> Localize ||30
-> go to Overview
diff --git a/docs/fundamentals/systems/localize/numbers.md b/docs/fundamentals/systems/localize/numbers.md
index ff0240042..5719c6e79 100644
--- a/docs/fundamentals/systems/localize/numbers.md
+++ b/docs/fundamentals/systems/localize/numbers.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Format Numbers
+ - Localize
+ - Systems
+title: 'Localize: Format Numbers'
+eleventyNavigation:
+ key: Systems >> Localize >> Format Numbers
+ title: Format Numbers
+ order: 30
+ parent: Systems >> Localize
+---
+
# Systems >> Localize >> Format Numbers ||30
## Features
diff --git a/docs/fundamentals/systems/localize/overview.md b/docs/fundamentals/systems/localize/overview.md
index e26e71df9..3364b8c59 100644
--- a/docs/fundamentals/systems/localize/overview.md
+++ b/docs/fundamentals/systems/localize/overview.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Overview
+ - Localize
+ - Systems
+title: 'Localize: Overview'
+eleventyNavigation:
+ key: Systems >> Localize >> Overview
+ title: Overview
+ order: 10
+ parent: Systems >> Localize
+---
+
# Systems >> Localize >> Overview ||10
Is meant to translate text into multiple languages.
diff --git a/docs/fundamentals/systems/localize/rationale.md b/docs/fundamentals/systems/localize/rationale.md
index 3cb98d7dc..8a5035ed2 100644
--- a/docs/fundamentals/systems/localize/rationale.md
+++ b/docs/fundamentals/systems/localize/rationale.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Rationale
+ - Localize
+ - Systems
+title: 'Localize: Rationale'
+eleventyNavigation:
+ key: Systems >> Localize >> Rationale
+ title: Rationale
+ order: 60
+ parent: Systems >> Localize
+---
+
# Systems >> Localize >> Rationale ||60
## Requirements
diff --git a/docs/fundamentals/systems/localize/text.md b/docs/fundamentals/systems/localize/text.md
index 4f7e4fe12..951494557 100644
--- a/docs/fundamentals/systems/localize/text.md
+++ b/docs/fundamentals/systems/localize/text.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Translate Text
+ - Localize
+ - Systems
+title: 'Localize: Translate Text'
+eleventyNavigation:
+ key: Systems >> Localize >> Translate Text
+ title: Translate Text
+ order: 20
+ parent: Systems >> Localize
+---
+
# Systems >> Localize >> Translate Text ||20
## As a function
diff --git a/docs/fundamentals/systems/localize/use-cases.md b/docs/fundamentals/systems/localize/use-cases.md
index 19a5e23ac..eb1d2a35e 100644
--- a/docs/fundamentals/systems/localize/use-cases.md
+++ b/docs/fundamentals/systems/localize/use-cases.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Use Cases
+ - Localize
+ - Systems
+title: 'Localize: Use Cases'
+eleventyNavigation:
+ key: Systems >> Localize >> Use Cases
+ title: Use Cases
+ order: 50
+ parent: Systems >> Localize
+---
+
# Systems >> Localize >> Use Cases ||50
The localization system helps to manage localization data split into locales and automate its loading.
diff --git a/docs/fundamentals/systems/overlays/_configuration-positioning.md b/docs/fundamentals/systems/overlays/_configuration-positioning.md
index 8cdbb2838..e83de6e89 100644
--- a/docs/fundamentals/systems/overlays/_configuration-positioning.md
+++ b/docs/fundamentals/systems/overlays/_configuration-positioning.md
@@ -1,5 +1,16 @@
---
eleventyExcludeFromCollections: true
+parts:
+ - Positioning
+ - Configuration
+ - Overlays
+ - Systems
+title: 'Configuration: Positioning'
+eleventyNavigation:
+ key: Systems >> Overlays >> Configuration >> Positioning
+ title: Positioning
+ order: 40
+ parent: Systems >> Overlays >> Configuration
---
# Systems >> Overlays >> Configuration >> Positioning ||40
diff --git a/docs/fundamentals/systems/overlays/_edge-cases.md b/docs/fundamentals/systems/overlays/_edge-cases.md
index b0d47265d..006fe650b 100644
--- a/docs/fundamentals/systems/overlays/_edge-cases.md
+++ b/docs/fundamentals/systems/overlays/_edge-cases.md
@@ -1,5 +1,15 @@
---
eleventyExcludeFromCollections: true
+parts:
+ - Edge cases
+ - Overlays
+ - Systems
+title: 'Overlays: Edge cases'
+eleventyNavigation:
+ key: Systems >> Overlays >> Edge cases
+ title: Edge cases
+ order: 10
+ parent: Systems >> Overlays
---
# Systems >> Overlays >> Edge cases ||10
diff --git a/docs/fundamentals/systems/overlays/configuration.md b/docs/fundamentals/systems/overlays/configuration.md
index 2f69a1923..ebdc5f046 100644
--- a/docs/fundamentals/systems/overlays/configuration.md
+++ b/docs/fundamentals/systems/overlays/configuration.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Configuration
+ - Overlays
+ - Systems
+title: 'Overlays: Configuration'
+eleventyNavigation:
+ key: Systems >> Overlays >> Configuration
+ title: Configuration
+ order: 40
+ parent: Systems >> Overlays
+---
+
# Systems >> Overlays >> Configuration ||40
```js script
diff --git a/docs/fundamentals/systems/overlays/index.md b/docs/fundamentals/systems/overlays/index.md
index c532dd350..52eef91c9 100644
--- a/docs/fundamentals/systems/overlays/index.md
+++ b/docs/fundamentals/systems/overlays/index.md
@@ -1,3 +1,15 @@
+---
+parts:
+ - Overlays
+ - Systems
+title: 'Systems: Overlays'
+eleventyNavigation:
+ key: Systems >> Overlays
+ title: Overlays
+ order: 40
+ parent: Systems
+---
+
# Systems >> Overlays ||40
-> go to Overview
diff --git a/docs/fundamentals/systems/overlays/overview.md b/docs/fundamentals/systems/overlays/overview.md
index 08970848d..9c7acb183 100644
--- a/docs/fundamentals/systems/overlays/overview.md
+++ b/docs/fundamentals/systems/overlays/overview.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Overview
+ - Overlays
+ - Systems
+title: 'Overlays: Overview'
+eleventyNavigation:
+ key: Systems >> Overlays >> Overview
+ title: Overview
+ order: 10
+ parent: Systems >> Overlays
+---
+
# Systems >> Overlays >> Overview ||10
Supports different types of overlays like dialogs, toasts, tooltips, dropdown, etc.
diff --git a/docs/fundamentals/systems/overlays/rationale.md b/docs/fundamentals/systems/overlays/rationale.md
index d87991f8c..4e8d85a53 100644
--- a/docs/fundamentals/systems/overlays/rationale.md
+++ b/docs/fundamentals/systems/overlays/rationale.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Rationale
+ - Overlays
+ - Systems
+title: 'Overlays: Rationale'
+eleventyNavigation:
+ key: Systems >> Overlays >> Rationale
+ title: Rationale
+ order: 30
+ parent: Systems >> Overlays
+---
+
# Systems >> Overlays >> Rationale ||30
This page describes the goal and duties of the overlay system, mainly by identifying all different
diff --git a/docs/fundamentals/systems/overlays/use-cases.md b/docs/fundamentals/systems/overlays/use-cases.md
index 647d61c3f..213a7aa0c 100644
--- a/docs/fundamentals/systems/overlays/use-cases.md
+++ b/docs/fundamentals/systems/overlays/use-cases.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Use Cases
+ - Overlays
+ - Systems
+title: 'Overlays: Use Cases'
+eleventyNavigation:
+ key: Systems >> Overlays >> Use Cases
+ title: Use Cases
+ order: 20
+ parent: Systems >> Overlays
+---
+
# Systems >> Overlays >> Use Cases ||20
```js script
diff --git a/docs/fundamentals/tools/ajax/index.md b/docs/fundamentals/tools/ajax/index.md
index 75431c375..f2485fb15 100644
--- a/docs/fundamentals/tools/ajax/index.md
+++ b/docs/fundamentals/tools/ajax/index.md
@@ -1,3 +1,15 @@
+---
+parts:
+ - Ajax
+ - Tools
+title: 'Tools: Ajax'
+eleventyNavigation:
+ key: Tools >> Ajax
+ title: Ajax
+ order: 20
+ parent: Tools
+---
+
# Tools >> Ajax ||20
-> go to Overview
diff --git a/docs/fundamentals/tools/ajax/overview.md b/docs/fundamentals/tools/ajax/overview.md
index 0226d9618..663adfdbe 100644
--- a/docs/fundamentals/tools/ajax/overview.md
+++ b/docs/fundamentals/tools/ajax/overview.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Overview
+ - Ajax
+ - Tools
+title: 'Ajax: Overview'
+eleventyNavigation:
+ key: Tools >> Ajax >> Overview
+ title: Overview
+ order: 10
+ parent: Tools >> Ajax
+---
+
# Tools >> Ajax >> Overview ||10
`Ajax` is a small wrapper around `fetch` which:
diff --git a/docs/fundamentals/tools/ajax/use-cases.md b/docs/fundamentals/tools/ajax/use-cases.md
index 225df29ee..bacc10306 100644
--- a/docs/fundamentals/tools/ajax/use-cases.md
+++ b/docs/fundamentals/tools/ajax/use-cases.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Use Cases
+ - Ajax
+ - Tools
+title: 'Ajax: Use Cases'
+eleventyNavigation:
+ key: Tools >> Ajax >> Use Cases
+ title: Use Cases
+ order: 20
+ parent: Tools >> Ajax
+---
+
# Tools >> Ajax >> Use Cases ||20
```js script
diff --git a/docs/fundamentals/tools/helpers/action-logger.md b/docs/fundamentals/tools/helpers/action-logger.md
index d9e6d3e4d..d518a9fca 100644
--- a/docs/fundamentals/tools/helpers/action-logger.md
+++ b/docs/fundamentals/tools/helpers/action-logger.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Action Logger
+ - Helpers
+ - Tools
+title: 'Helpers: Action Logger'
+eleventyNavigation:
+ key: Tools >> Helpers >> Action Logger
+ title: Action Logger
+ order: 20
+ parent: Tools >> Helpers
+---
+
# Tools >> Helpers >> Action Logger ||20
A visual element to show action logs in demos `sb-action-logger`
diff --git a/docs/fundamentals/tools/helpers/index.md b/docs/fundamentals/tools/helpers/index.md
index e8bfaf192..6913eacf6 100644
--- a/docs/fundamentals/tools/helpers/index.md
+++ b/docs/fundamentals/tools/helpers/index.md
@@ -1,3 +1,15 @@
+---
+parts:
+ - Helpers
+ - Tools
+title: 'Tools: Helpers'
+eleventyNavigation:
+ key: Tools >> Helpers
+ title: Helpers
+ order: 0
+ parent: Tools
+---
+
# Tools >> Helpers
-> go to Overview
diff --git a/docs/fundamentals/tools/helpers/overview.md b/docs/fundamentals/tools/helpers/overview.md
index b87018c4b..e90e22db4 100644
--- a/docs/fundamentals/tools/helpers/overview.md
+++ b/docs/fundamentals/tools/helpers/overview.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Overview
+ - Helpers
+ - Tools
+title: 'Helpers: Overview'
+eleventyNavigation:
+ key: Tools >> Helpers >> Overview
+ title: Overview
+ order: 10
+ parent: Tools >> Helpers
+---
+
# Tools >> Helpers >> Overview ||10
A helpers package that contains several helpers that are used inside lion but can be used outside as well.
diff --git a/docs/fundamentals/tools/index.md b/docs/fundamentals/tools/index.md
index c32a745f3..22f5dcbf0 100644
--- a/docs/fundamentals/tools/index.md
+++ b/docs/fundamentals/tools/index.md
@@ -1 +1,11 @@
+---
+parts:
+ - Tools
+title: Tools
+eleventyNavigation:
+ key: Tools
+ title: Tools
+ order: 20
+---
+
# Tools ||20
diff --git a/docs/fundamentals/tools/singleton-manager/example-complex/index.md b/docs/fundamentals/tools/singleton-manager/example-complex/index.md
index 017b89e14..72f8d8279 100644
--- a/docs/fundamentals/tools/singleton-manager/example-complex/index.md
+++ b/docs/fundamentals/tools/singleton-manager/example-complex/index.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Example Complex
+ - Singleton Manager
+ - Tools
+title: 'Singleton Manager: Example Complex'
+eleventyNavigation:
+ key: Tools >> Singleton Manager >> Example Complex
+ title: Example Complex
+ order: 40
+ parent: Tools >> Singleton Manager
+---
+
# Tools >> Singleton Manager >> Example Complex ||40
In this SPA (Single Page Application) demo you will be able to reproduce the solution.
diff --git a/docs/fundamentals/tools/singleton-manager/example-fail/index.md b/docs/fundamentals/tools/singleton-manager/example-fail/index.md
index 82fe2a50b..4d638a30f 100644
--- a/docs/fundamentals/tools/singleton-manager/example-fail/index.md
+++ b/docs/fundamentals/tools/singleton-manager/example-fail/index.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Example Fail
+ - Singleton Manager
+ - Tools
+title: 'Singleton Manager: Example Fail'
+eleventyNavigation:
+ key: Tools >> Singleton Manager >> Example Fail
+ title: Example Fail
+ order: 20
+ parent: Tools >> Singleton Manager
+---
+
# Tools >> Singleton Manager >> Example Fail ||20
In this SPA (Single Page Application) demo you will be able to reproduce the issue.
diff --git a/docs/fundamentals/tools/singleton-manager/example-success/index.md b/docs/fundamentals/tools/singleton-manager/example-success/index.md
index bd93efb9e..c2b4e5892 100644
--- a/docs/fundamentals/tools/singleton-manager/example-success/index.md
+++ b/docs/fundamentals/tools/singleton-manager/example-success/index.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Example Success
+ - Singleton Manager
+ - Tools
+title: 'Singleton Manager: Example Success'
+eleventyNavigation:
+ key: Tools >> Singleton Manager >> Example Success
+ title: Example Success
+ order: 30
+ parent: Tools >> Singleton Manager
+---
+
# Tools >> Singleton Manager >> Example Success ||30
In this SPA (Single Page Application) demo you will be able to reproduce the solution.
diff --git a/docs/fundamentals/tools/singleton-manager/index.md b/docs/fundamentals/tools/singleton-manager/index.md
index 6dd7c7844..148819868 100644
--- a/docs/fundamentals/tools/singleton-manager/index.md
+++ b/docs/fundamentals/tools/singleton-manager/index.md
@@ -1,3 +1,15 @@
+---
+parts:
+ - Singleton Manager
+ - Tools
+title: 'Tools: Singleton Manager'
+eleventyNavigation:
+ key: Tools >> Singleton Manager
+ title: Singleton Manager
+ order: 20
+ parent: Tools
+---
+
# Tools >> Singleton Manager ||20
-> go to Overview
diff --git a/docs/fundamentals/tools/singleton-manager/overview.md b/docs/fundamentals/tools/singleton-manager/overview.md
index 484927365..622dec55c 100644
--- a/docs/fundamentals/tools/singleton-manager/overview.md
+++ b/docs/fundamentals/tools/singleton-manager/overview.md
@@ -1,3 +1,16 @@
+---
+parts:
+ - Overview
+ - Singleton Manager
+ - Tools
+title: 'Singleton Manager: Overview'
+eleventyNavigation:
+ key: Tools >> Singleton Manager >> Overview
+ title: Overview
+ order: 10
+ parent: Tools >> Singleton Manager
+---
+
# Tools >> Singleton Manager >> Overview ||10
A singleton manager provides a way to make sure a singleton instance loaded from multiple file locations stays a singleton.
diff --git a/docs/guides/how-to/create-a-custom-field.md b/docs/guides/how-to/create-a-custom-field.md
index ae608ae47..419b91ac5 100644
--- a/docs/guides/how-to/create-a-custom-field.md
+++ b/docs/guides/how-to/create-a-custom-field.md
@@ -1,4 +1,16 @@
-# How To >> Create a custom field ||20
+---
+parts:
+ - How To
+ - Create a custom field
+title: 'How To: Create a custom field'
+eleventyNavigation:
+ key: 'How To: Create a custom field'
+ order: 20
+ parent: How To
+ title: Create a custom field
+---
+
+# How To: Create a custom field
```js script
import { html, css, LitElement } from '@mdjs/mdjs-preview';
diff --git a/docs/guides/how-to/create-a-form.md b/docs/guides/how-to/create-a-form.md
index c8810d677..415000081 100644
--- a/docs/guides/how-to/create-a-form.md
+++ b/docs/guides/how-to/create-a-form.md
@@ -1,4 +1,16 @@
-# How To >> Create a form ||15
+---
+parts:
+ - How To
+ - Create a form
+title: 'How To: Create a form'
+eleventyNavigation:
+ key: 'How To: Create a form'
+ order: 15
+ parent: How To
+ title: Create a form
+---
+
+# How To: Create a form
Creating your own forms as an Application Developer is really simple. Only two rules need to be followed.
diff --git a/docs/guides/how-to/extend-a-native-input.md b/docs/guides/how-to/extend-a-native-input.md
index 124dbbf5d..1cb058875 100644
--- a/docs/guides/how-to/extend-a-native-input.md
+++ b/docs/guides/how-to/extend-a-native-input.md
@@ -1,4 +1,16 @@
-# How To >> Extend a native input ||20
+---
+parts:
+ - How To
+ - Extend a native input
+title: 'How To: Extend a native input'
+eleventyNavigation:
+ key: 'How To: Extend a native input'
+ order: 20
+ parent: How To
+ title: Extend a native input
+---
+
+# How To: Extend a native input
```js script
import { html } from '@mdjs/mdjs-preview';
diff --git a/docs/guides/how-to/get-started.md b/docs/guides/how-to/get-started.md
index cced37fd4..7faa15256 100644
--- a/docs/guides/how-to/get-started.md
+++ b/docs/guides/how-to/get-started.md
@@ -1,4 +1,16 @@
-# How To >> Get Started ||10
+---
+parts:
+ - How To
+ - Get Started
+title: 'How To: Get Started'
+eleventyNavigation:
+ key: 'How To: Get Started'
+ order: 10
+ parent: How To
+ title: Get Started
+---
+
+# How To: Get Started
## Technologies Used
diff --git a/docs/guides/how-to/index.md b/docs/guides/how-to/index.md
index 0ba076407..75b85a5a9 100644
--- a/docs/guides/how-to/index.md
+++ b/docs/guides/how-to/index.md
@@ -1 +1,11 @@
-# How To ||20
+---
+parts:
+ - How To
+title: How To
+eleventyNavigation:
+ key: How To
+ order: 20
+ title: How To
+---
+
+# How To
diff --git a/docs/guides/index.md b/docs/guides/index.md
index afd6ae69b..08fa4fb0d 100644
--- a/docs/guides/index.md
+++ b/docs/guides/index.md
@@ -1,4 +1,14 @@
-# Guides ||30
+---
+parts:
+ - Guides
+title: Guides
+eleventyNavigation:
+ key: Guides
+ order: 30
+ title: Guides
+---
+
+# Guides
Lion is a set of white label Web Components that can be extended to your own styled layer of components.
diff --git a/docs/guides/principles/definitions-and-terms.md b/docs/guides/principles/definitions-and-terms.md
index f34127a5e..ba73686f6 100644
--- a/docs/guides/principles/definitions-and-terms.md
+++ b/docs/guides/principles/definitions-and-terms.md
@@ -1,4 +1,16 @@
-# Principles >> Definitions and Terms ||20
+---
+parts:
+ - Principles
+ - Definitions and Terms
+title: 'Principles: Definitions and Terms'
+eleventyNavigation:
+ key: 'Principles: Definitions and Terms'
+ order: 20
+ parent: Principles
+ title: Definitions and Terms
+---
+
+# Principles: Definitions and Terms
Below you will find a list of definitions and terms that will be used throughout our code
documentation.
diff --git a/docs/guides/principles/index.md b/docs/guides/principles/index.md
index 4d902bfa1..58df571c8 100644
--- a/docs/guides/principles/index.md
+++ b/docs/guides/principles/index.md
@@ -1,4 +1,14 @@
-# Principles ||10
+---
+parts:
+ - Principles
+title: Principles
+eleventyNavigation:
+ key: Principles
+ order: 10
+ title: Principles
+---
+
+# Principles
Lion is a set of white label Web Components that can be extended to your own styled layer of components.
diff --git a/docs/guides/principles/scoped-elements.md b/docs/guides/principles/scoped-elements.md
index 42d7de4f5..0b4ea3f13 100644
--- a/docs/guides/principles/scoped-elements.md
+++ b/docs/guides/principles/scoped-elements.md
@@ -1,4 +1,16 @@
-# Principles >> Scoped Elements ||40
+---
+parts:
+ - Principles
+ - Scoped Elements
+title: 'Principles: Scoped Elements'
+eleventyNavigation:
+ key: 'Principles: Scoped Elements'
+ order: 40
+ parent: Principles
+ title: Scoped Elements
+---
+
+# Principles: Scoped Elements
The [CustomElementRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry) provides methods for registering custom elements. One of the limitations of working with this global registry is that multiple versions of the same element cannot co-exist. This causes bottlenecks in software delivery that should be managed by the teams and complex build systems. [Scoped Custom Element Registries](https://github.com/w3c/webcomponents/issues/716) is a proposal that will solve the problem. Since this functionality won't be available (especially not cross browser) anytime soon, we've adopted [OpenWC's Scoped Elements](https://open-wc.org/docs/development/scoped-elements/).
diff --git a/docs/guides/principles/styling.md b/docs/guides/principles/styling.md
index 87e24259d..b06b4fe43 100644
--- a/docs/guides/principles/styling.md
+++ b/docs/guides/principles/styling.md
@@ -1,4 +1,16 @@
-# Principles >> Styling ||30
+---
+parts:
+ - Principles
+ - Styling
+title: 'Principles: Styling'
+eleventyNavigation:
+ key: 'Principles: Styling'
+ order: 30
+ parent: Principles
+ title: Styling
+---
+
+# Principles: Styling
## Markup and styling
diff --git a/docs/guides/principles/subclasser-apis.md b/docs/guides/principles/subclasser-apis.md
index 4faa2a0d6..d70be22a3 100644
--- a/docs/guides/principles/subclasser-apis.md
+++ b/docs/guides/principles/subclasser-apis.md
@@ -1,4 +1,16 @@
-# Principles >> Subclasser apis ||50
+---
+parts:
+ - Principles
+ - Subclasser apis
+title: 'Principles: Subclasser apis'
+eleventyNavigation:
+ key: 'Principles: Subclasser apis'
+ order: 50
+ parent: Principles
+ title: Subclasser apis
+---
+
+# Principles: Subclasser apis
In order to make it easy for Subclassers to extend our components, we follow a certain set
of best practices naming conventions to make our code predictable.
diff --git a/package-lock.json b/package-lock.json
index f461a9403..7a2a461aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -50,6 +50,7 @@
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-wc": "^2.2.0",
"globby": "^14.0.2",
+ "gray-matter": "^4.0.3",
"husky": "^9.1.6",
"lint-staged": "^15.2.10",
"looks-same": "^9.0.1",
@@ -28884,7 +28885,7 @@
},
"packages/ui": {
"name": "@lion/ui",
- "version": "0.11.0",
+ "version": "0.11.1",
"license": "MIT",
"dependencies": {
"@bundled-es-modules/message-format": "^6.2.4",
diff --git a/package.json b/package.json
index dab8aa464..7c2b12e3a 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-wc": "^2.2.0",
"globby": "^14.0.2",
+ "gray-matter": "^4.0.3",
"husky": "^9.1.6",
"lint-staged": "^15.2.10",
"looks-same": "^9.0.1",
diff --git a/rocket.config.mjs b/rocket.config.mjs
index e7760d9e5..d5b3699e0 100644
--- a/rocket.config.mjs
+++ b/rocket.config.mjs
@@ -2,7 +2,8 @@ import { rocketLaunch } from '@rocket/launch';
import { rocketSearch } from '@rocket/search';
import { rocketBlog } from '@rocket/blog';
import { absoluteBaseUrlNetlify } from '@rocket/core/helpers';
-import { adjustPluginOptions } from 'plugins-manager';
+import { TitleMetaPlugin } from '@rocket/cli';
+import { adjustPluginOptions, removePlugin } from 'plugins-manager';
import { mdjsSetupCode } from '@mdjs/core';
import { copy } from '@web/rollup-plugin-copy';
@@ -32,4 +33,5 @@ export default {
return config;
}),
],
+ setupEleventyComputedConfig: [removePlugin(TitleMetaPlugin)]
};
diff --git a/scripts/convertNavigationOrder/convertNavigationOrder.mjs b/scripts/convertNavigationOrder/convertNavigationOrder.mjs
new file mode 100644
index 000000000..730bc23e0
--- /dev/null
+++ b/scripts/convertNavigationOrder/convertNavigationOrder.mjs
@@ -0,0 +1,24 @@
+import { writeFile } from 'node:fs/promises';
+import { globby } from 'globby';
+import matter from 'gray-matter';
+import { processContentWithTitle } from '@rocket/core/title';
+
+// since it's a one-time script, the path is just hardcoded
+const paths = await globby('docs/fundamentals/**/*.md');
+
+for (const path of paths) {
+ const grayMatterFile = await matter.read(path);
+
+ // save original values
+ const { eleventyNavigation, ...rest } = grayMatterFile.data;
+ // rocket values
+ const { eleventyNavigation: rocketEleventyNavigation, ...rocketRest } = processContentWithTitle(grayMatterFile.content) || {};
+ if (!rocketEleventyNavigation) {
+ // not all pages need to change
+ continue;
+ }
+ // merge them
+ grayMatterFile.data = { ...rest, ...rocketRest, eleventyNavigation: { ...eleventyNavigation, ...rocketEleventyNavigation } };
+
+ await writeFile(grayMatterFile.path, matter.stringify(grayMatterFile));
+}
diff --git a/scripts/create-api-tables.mjs b/scripts/create-api-tables.mjs
index 7d7576ae2..38c807db7 100644
--- a/scripts/create-api-tables.mjs
+++ b/scripts/create-api-tables.mjs
@@ -1,5 +1,6 @@
import fs from 'fs';
import { customElementsManifestToMarkdown } from '@custom-elements-manifest/to-markdown';
+import matter from 'gray-matter';
/**
* @param {string} text
@@ -47,8 +48,24 @@ for (let dir of componentDirs) {
dir = 'form';
}
- const folderHeading = isSystem ? 'Systems >> ' : '';
- let dirApiTableMd = `# ${folderHeading}${toSplitAndUpperCase(dir)} >> API Table ||90`;
+ const titleFromDir = toSplitAndUpperCase(dir);
+ const parts = ['API Table', titleFromDir];
+ if (isSystem) {
+ parts.push('Systems');
+ }
+ const title = `${titleFromDir}: API Table`;
+ const eleventyNavigation = {
+ key: parts.join(' >> '),
+ title: 'API Table',
+ order: 90,
+ parent: parts.slice(1).reverse().join(' >> ')
+ }
+
+ let dirApiTableMd = matter.stringify(`# ${title}`, {
+ parts,
+ title,
+ eleventyNavigation,
+ });
for (const c of classes) {
for (const mod of customElementsJson.modules) {