ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

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

* fix: fixed frontmatter metadate for api-table MDs

* fix: fixed frontmatter eslint issue
This commit is contained in:
Pavlik Kiselev 2025-03-19 10:08:22 +01:00 committed by GitHub
parent ebd31ed90a
commit 11bbc5fff5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
183 changed files with 2244 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.markdownlint.json
View file

@ -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": ".,;。，；：！"
},

10
docs/components/accordion/index.md
View file

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

14
docs/components/accordion/overview.md
View file

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

14
docs/components/accordion/reference.md
View file

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

14
docs/components/accordion/use-cases.md
View file

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

14
docs/components/button/examples.md
View file

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

14
docs/components/button/extensions.md
View file

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

12
docs/components/button/index.md
View file

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

14
docs/components/button/overview.md
View file

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

14
docs/components/button/use-cases.md
View file

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

12
docs/components/calendar/index.md
View file

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

14
docs/components/calendar/overview.md
View file

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

14
docs/components/calendar/use-cases.md
View file

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

12
docs/components/checkbox-group/index.md
View file

@ -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

14
docs/components/checkbox-group/overview.md
View file

@ -1,4 +1,16 @@
# Checkbox Group >> Overview ||10
---
parts:
- Checkbox Group
- Overview
title: 'Checkbox Group: Overview'
eleventyNavigation:
key: 'Checkbox Group: Overview'
order: 10
parent: Checkbox Group
title: Overview
---
# Checkbox Group: Overview
A checkbox group enhances the functionality of the native `<input type="checkbox">` element.
Its purpose is to provide a way for users to check **multiple** options amongst a set of choices, or to function as a single toggle.

14
docs/components/checkbox-group/use-cases.md
View file

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

14
docs/components/collapsible/examples.md
View file

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

12
docs/components/collapsible/index.md
View file

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

14
docs/components/collapsible/overview.md
View file

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

14
docs/components/collapsible/use-cases.md
View file

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

14
docs/components/combobox/extensions.md
View file

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

12
docs/components/combobox/index.md
View file

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

14
docs/components/combobox/overview.md
View file

@ -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:

14
docs/components/combobox/use-cases.md
View file

@ -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:

12
docs/components/dialog/index.md
View file

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

14
docs/components/dialog/overview.md
View file

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

14
docs/components/dialog/use-cases.md
View file

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

12
docs/components/drawer/index.md
View file

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

14
docs/components/drawer/overview.md
View file

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

14
docs/components/drawer/use-cases.md
View file

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

12
docs/components/fieldset/index.md
View file

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

14
docs/components/fieldset/overview.md
View file

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

14
docs/components/fieldset/use-cases.md
View file

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

12
docs/components/form/index.md
View file

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

14
docs/components/form/overview.md
View file

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

14
docs/components/form/use-cases.md
View file

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

12
docs/components/icon/index.md
View file

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

14
docs/components/icon/overview.md
View file

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

14
docs/components/icon/use-cases.md
View file

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

12
docs/components/index.md
View file

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

12
docs/components/input-amount/index.md
View file

@ -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

14
docs/components/input-amount/overview.md
View file

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

14
docs/components/input-amount/use-cases.md
View file

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

12
docs/components/input-date/index.md
View file

@ -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

14
docs/components/input-date/overview.md
View file

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

14
docs/components/input-date/use-cases.md
View file

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

12
docs/components/input-datepicker/index.md
View file

@ -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

14
docs/components/input-datepicker/overview.md
View file

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

14
docs/components/input-datepicker/use-cases.md
View file

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

12
docs/components/input-email/index.md
View file

@ -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

14
docs/components/input-email/overview.md
View file

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

14
docs/components/input-email/use-cases.md
View file

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

12
docs/components/input-file/index.md
View file

@ -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

14
docs/components/input-file/overview.md
View file

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

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

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

12
docs/components/input-iban/index.md
View file

@ -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

14
docs/components/input-iban/overview.md
View file

@ -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).

14
docs/components/input-iban/use-cases.md
View file

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

12
docs/components/input-range/index.md
View file

@ -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

14
docs/components/input-range/overview.md
View file

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

14
docs/components/input-range/use-cases.md
View file

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

12
docs/components/input-stepper/index.md
View file

@ -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

14
docs/components/input-stepper/overview.md
View file

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

14
docs/components/input-stepper/use-cases.md
View file

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

14
docs/components/input-tel-dropdown/extensions.md
View file

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

12
docs/components/input-tel-dropdown/index.md
View file

@ -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

14
docs/components/input-tel-dropdown/overview.md
View file

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

14
docs/components/input-tel-dropdown/use-cases.md
View file

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

12
docs/components/input-tel/index.md
View file

@ -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

14
docs/components/input-tel/overview.md
View file

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

14
docs/components/input-tel/use-cases.md
View file

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

12
docs/components/input/index.md
View file

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

14
docs/components/input/overview.md
View file

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

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

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

12
docs/components/listbox/index.md
View file

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

14
docs/components/listbox/overview.md
View file

@ -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

14
docs/components/listbox/use-cases.md
View file

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

12
docs/components/pagination/index.md
View file

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

14
docs/components/pagination/overview.md
View file

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

14
docs/components/pagination/use-cases.md
View file

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

14
docs/components/progress-indicator/examples.md
View file

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

12
docs/components/progress-indicator/index.md
View file

@ -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

14
docs/components/progress-indicator/overview.md
View file

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

12
docs/components/radio-group/index.md
View file

@ -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

14
docs/components/radio-group/overview.md
View file

@ -1,4 +1,16 @@
# Radio Group >> Overview ||10
---
parts:
- Radio Group
- Overview
title: 'Radio Group: Overview'
eleventyNavigation:
key: 'Radio Group: Overview'
order: 10
parent: Radio Group
title: Overview
---
# Radio Group: Overview
A web component that enhances the functionality of the native `<input type="radio">` element. Its purpose is to provide a way for users to check a **single** option amongst a set of choices.

14
docs/components/radio-group/use-cases.md
View file

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

14
docs/components/select-rich/examples.md
View file

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

12
docs/components/select-rich/index.md
View file

@ -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

14
docs/components/select-rich/overview.md
View file

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

14
docs/components/select-rich/use-cases.md
View file

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

12
docs/components/select/index.md
View file

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

14
docs/components/select/overview.md
View file

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

14
docs/components/select/use-cases.md
View file

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

12
docs/components/steps/index.md
View file

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

14
docs/components/steps/overview.md
View file

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

14
docs/components/steps/use-cases.md
View file

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

12
docs/components/switch/index.md
View file

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

14
docs/components/switch/overview.md
View file

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

14
docs/components/switch/reference.md
View file

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

14
docs/components/switch/use-cases.md
View file

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

Some files were not shown because too many files have changed in this diff Show more