@lion/ui 0.23.0 → 0.24.0

package/docs/components/accordion/overview.md

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

package/docs/components/accordion/reference.md

@@ -1,5 +1,5 @@
 ---
-title: 'Accordion: Reference'
+title: 'Reference'
 parts:
   - Accordion
   - Reference
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Reference
 ---
 
-# Accordion: Reference
+# Reference
 
 <p class="lion-paragraph--emphasis">Everything you need to re-use the accordion.</p>
 

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

@@ -1,5 +1,5 @@
 ---
-title: 'Accordion: Use Cases'
+title: 'Use Cases'
 parts:
   - Accordion
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Accordion: Use Cases
+# Use Cases
 
 ```js script
 import { html as previewHtml } from '@mdjs/mdjs-preview';

package/docs/components/button/examples.md

@@ -1,5 +1,5 @@
 ---
-title: 'Button: Examples'
+title: 'Examples'
 parts:
   - Button
   - Examples
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Examples
 ---
 
-# Button: Examples
+# Examples
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/button/extensions.md

@@ -1,5 +1,5 @@
 ---
-title: 'Button: Extensions'
+title: 'Extensions'
 parts:
   - Button
   - Extensions
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Extensions
 ---
 
-# Button: Extensions
+# Extensions
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/button/overview.md

@@ -1,5 +1,5 @@
 ---
-title: 'Button: Overview'
+title: 'Overview'
 parts:
   - Overview
   - Button
@@ -10,7 +10,7 @@ eleventyNavigation:
   parent: Button
 ---
 
-# Button: Overview
+# Overview
 
 A button web component that is easily stylable and accessible.
 

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

@@ -1,5 +1,5 @@
 ---
-title: 'Button: Use Cases'
+title: 'Use Cases'
 parts:
   - Use Cases
   - Button
@@ -10,7 +10,7 @@ eleventyNavigation:
   parent: Button
 ---
 
-# Button: Use Cases
+# Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/calendar/overview.md

@@ -1,5 +1,5 @@
 ---
-title: 'Calendar: Overview'
+title: 'Overview'
 parts:
   - Calendar
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Calendar: Overview
+# Overview
 
 A reusable and accessible calendar view web component.
 

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

@@ -1,5 +1,5 @@
 ---
-title: 'Calendar: Use Cases'
+title: 'Use Cases'
 parts:
   - Calendar
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Calendar: Use Cases
+# Use Cases
 
 ```js script
 import { html, css } from '@mdjs/mdjs-preview';

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

@@ -1,5 +1,5 @@
 ---
-title: 'Checkbox Group: Overview'
+title: 'Overview'
 parts:
   - Checkbox Group
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Checkbox Group: Overview
+# 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.
@@ -31,11 +31,11 @@ import '@lion/ui/define/lion-checkbox.js';
 </lion-checkbox-group>
 ```
 
-> Make sure that the checkbox-group also has a name attribute, this is necessary for our [form](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/form/overview.md)'s serialization result.
+> Make sure that the checkbox-group also has a name attribute, this is necessary for our [form](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/form/overview.md)'s serialization result.
 
 ## Features
 
-Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/fieldset/overview.md),
+Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/fieldset/overview.md),
 it has all the features a fieldset has.
 
 ## Installation

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

@@ -1,5 +1,5 @@
 ---
-title: 'Checkbox Group: Use Cases'
+title: 'Use Cases'
 parts:
   - Checkbox Group
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Checkbox Group: Use Cases
+# Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/collapsible/examples.md

@@ -1,5 +1,5 @@
 ---
-title: 'Collapsible: Examples'
+title: 'Examples'
 parts:
   - Collapsible
   - Examples
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Examples
 ---
 
-# Collapsible: Examples
+# Examples
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/collapsible/overview.md

@@ -1,5 +1,5 @@
 ---
-title: 'Collapsible: Overview'
+title: 'Overview'
 parts:
   - Collapsible
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Collapsible: Overview
+# 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.
 
@@ -34,7 +34,7 @@ export const main = () => html`
 ## Features
 
 - Use `opened` attribute or `toggle()` method to render default open.
-- `invoker` slot can be custom template e.g. our [button](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/button/overview.md) or native `button` with custom styling.
+- `invoker` slot can be custom template e.g. our [button](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/button/overview.md) or native `button` with custom styling.
 - Observe the state with the help of `@opened-changed` event.
 - `show()` and `hide()` are helper methods to hide or show the content from outside.
 

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

@@ -1,5 +1,5 @@
 ---
-title: 'Collapsible: Use Cases'
+title: 'Use Cases'
 parts:
   - Collapsible
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Collapsible: Use Cases
+# Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/combobox/extensions.md

@@ -1,5 +1,5 @@
 ---
-title: 'Combobox: Extensions'
+title: 'Extensions'
 parts:
   - Combobox
   - Extensions
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Extensions
 ---
 
-# Combobox: Extensions
+# Extensions
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/combobox/overview.md

@@ -1,5 +1,5 @@
 ---
-title: 'Combobox: Overview'
+title: 'Overview'
 parts:
   - Combobox
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Combobox: Overview
+# Overview
 
 A combobox is a widget made up of the combination of two distinct elements:
 
@@ -46,7 +46,7 @@ export const main = () => html`
 `;
 ```
 
-[...show more](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/combobox/extensions.md)
+[...show more](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/combobox/extensions.md)
 
 ## Features
 

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

@@ -1,5 +1,5 @@
 ---
-title: 'Combobox: Use Cases'
+title: 'Use Cases'
 parts:
   - Combobox
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Combobox: Use Cases
+# Use Cases
 
 A combobox is a widget made up of the combination of two distinct elements:
 
@@ -558,4 +558,4 @@ export const complexObjectChoiceValue = () =>
 ## Listbox compatibility
 
 All configurations that can be applied to `lion-listbox`, can be applied to `lion-combobox` as well.
-See the [listbox documentation](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/listbox/overview.md) for more information.
+See the [listbox documentation](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/listbox/overview.md) for more information.

package/docs/components/dialog/overview.md

@@ -1,5 +1,5 @@
 ---
-title: 'Dialog: Overview'
+title: 'Overview'
 parts:
   - Dialog
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Dialog: Overview
+# Overview
 
 A web component that wraps a modal dialog controller.
 Its purpose is to make it easy to use our Overlay System declaratively.
@@ -66,6 +66,6 @@ import '@lion/ui/define/lion-dialog.js';
 ## Changing the configuration
 
 You can use the `.config` property on the dialog to change the configuration.
-The documentation of the full config object can be found in the `overlays` folder or here in [Overlay System - Configuration](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/overlays/configuration.md).
+The documentation of the full config object can be found in the `overlays` folder or here in [Overlay System - Configuration](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/overlays/configuration.md).
 
 The `config` property uses a setter to merge the passed configuration with the current, so you only **overwrite what you pass** when updating `config`.

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

@@ -1,5 +1,5 @@
 ---
-title: 'Dialog: Use Cases'
+title: 'Use Cases'
 parts:
   - Dialog
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Dialog: Use Cases
+# Use Cases
 
 `lion-dialog` is a component wrapping a modal dialog controller.
 Its purpose is to make it easy to use our Overlay System declaratively.

package/docs/components/drawer/overview.md

@@ -1,5 +1,5 @@
 ---
-title: 'Drawer: Overview'
+title: 'Overview'
 parts:
   - Drawer
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Drawer: Overview
+# 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.

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

@@ -1,5 +1,5 @@
 ---
-title: 'Drawer: Use Cases'
+title: 'Use Cases'
 parts:
   - Drawer
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Drawer: Use Cases
+# Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/fieldset/overview.md

@@ -1,5 +1,5 @@
 ---
-title: 'Fieldset: Overview'
+title: 'Overview'
 parts:
   - Fieldset
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Fieldset: Overview
+# Overview
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -32,9 +32,9 @@ export const main = () => html`
 
 We have three specific fieldset implementations:
 
-- [form](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/form/overview.md)
-- [checkbox-group](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/checkbox-group/overview.md)
-- [radio-group](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/radio-group/overview.md)
+- [form](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/form/overview.md)
+- [checkbox-group](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/checkbox-group/overview.md)
+- [radio-group](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/radio-group/overview.md)
 
 A native fieldset element should always have a legend-element for a11y purposes.
 However, our fieldset element is not native and should not have a legend-element.
@@ -43,8 +43,8 @@ Our fieldset instead has a label attribute or you can add a label with a div- or
 ## Features
 
 - Easy retrieval of form data based on field names
-- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/form/interaction-states.md)
-- Can have [validate](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/interaction-states.md)
+- Can have [validate](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
 - Can disable input fields on fieldset level
 - Accessible out of the box
 

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

@@ -1,5 +1,5 @@
 ---
-title: 'Fieldset: Use Cases'
+title: 'Use Cases'
 parts:
   - Fieldset
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Fieldset: Use Cases
+# Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/form/overview.md

@@ -1,5 +1,5 @@
 ---
-title: 'Form: Overview'
+title: 'Overview'
 parts:
   - Form
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Form: Overview
+# Overview
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -20,7 +20,7 @@ import '@lion/ui/define/lion-form.js';
 ```
 
 A web component that enhances the functionality of the native `form` component.
-It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/form/overview.md).
+It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/overview.md).
 
 ```js preview-story
 export const main = () => {
@@ -49,11 +49,11 @@ export const main = () => {
 - Data synchronization with models
 - Easy retrieval of form data based on field names
 - Advanced validation possibilities
-- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/form/interaction-states.md)
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/interaction-states.md)
 - Registration mechanism for form controls
 - Accessible out of the box
 
-For more information about fields that are designed for our `form`, please read [form system](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/form/overview.md).
+For more information about fields that are designed for our `form`, please read [form system](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/overview.md).
 
 ## Installation
 

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

@@ -1,5 +1,5 @@
 ---
-title: 'Form: Use Cases'
+title: 'Use Cases'
 parts:
   - Form
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Form: Use Cases
+# Use Cases
 
 ```js script
 import { html as previewHtml } from '@mdjs/mdjs-preview';
@@ -26,7 +26,7 @@ import '@lion/ui/define/lion-form.js';
 To submit a form, use a regular `<button>` (or `<lion-button-submit>`) somewhere inside the native `<form>`. Then, add a `submit` handler on the `<lion-form>`. You can use this event to do your own (pre-)submit logic, like getting the serialized form data and sending it to a backend API.
 
 Another example is checking if the form has errors, and focusing the first field with a validation error.
-To learn more about form validation, please take a look at [validate](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/form/validate.md).
+To learn more about form validation, please take a look at [validate](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md).
 
 To fire a submit from JavaScript, select the `<lion-form>` element and call `.submit()`.
 
@@ -128,7 +128,7 @@ export const prefilledData = () => {
 };
 ```
 
-Learn more about [formatting and parsing](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/form/formatting-and-parsing.md).
+Learn more about [formatting and parsing](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/formatting-and-parsing.md).
 
 ## Sub forms
 

package/docs/components/icon/overview.md

@@ -1,5 +1,5 @@
 ---
-title: 'Icon: Overview'
+title: 'Overview'
 parts:
   - Icon
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Icon: Overview
+# Overview
 
 A web component for displaying icons.
 

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

@@ -1,5 +1,5 @@
 ---
-title: 'Icon: Use Cases'
+title: 'Use Cases'
 parts:
   - Icon
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Icon: Use Cases
+# Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -25,7 +25,7 @@ import '@lion/ui/define/lion-icon.js';
 ## Icon sets
 
 Icons are displayed using icon sets. These are collections of icons, lazily loaded on demand for performance.
-See the [system documentation](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
+See the [system documentation](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
 
 ```js preview-story
 export const iconSets = () => html`

package/docs/components/input/overview.md

@@ -1,5 +1,5 @@
 ---
-title: 'Input: Overview'
+title: 'Overview'
 parts:
   - Input
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Input: Overview
+# Overview
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -35,7 +35,7 @@ export const main = () => html`<lion-input label="First Name"></lion-input>`;
   - **before**: does not have an active use case yet, but the option is in place.
   - **after**: can be used to show a currency or percentage.
 - Delegates attributes like `type`, `disabled`, `placeholder` and `readonly` to the native input.
-- Can make use of [validation](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/form/validate.md).
+- Can make use of [validation](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md).
 
 ## Installation
 

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input: Use Cases'
+title: 'Use Cases'
 parts:
   - Input
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Input: Use Cases
+# Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/input-amount/overview.md

@@ -1,5 +1,5 @@
 ---
-title: 'Input Amount: Overview'
+title: 'Overview'
 parts:
   - Input Amount
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Input Amount: Overview
+# 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.
 
@@ -36,13 +36,13 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/input/overview.md)
-- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input/overview.md)
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
 - Option to show currency as a suffix
 - Option to override locale to change the formatting and parsing
 - Option to provide additional format options overrides
 - Default label in different languages
-- Can make use of number specific [validators](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Can make use of number specific [validators](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsNumber (default)
   - MinNumber
   - MaxNumber

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input Amount: Use Cases'
+title: 'Use Cases'
 parts:
   - Input Amount
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Input Amount: Use Cases
+# Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';