@lion/ui 0.23.0 → 0.24.0

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

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

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input Date: Overview'
+title: 'Overview'
 parts:
   - Input Date
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Input Date: Overview
+# 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.
 
@@ -28,11 +28,11 @@ import '@lion/ui/define/lion-input-date.js';
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/input/overview.md)
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/localize/dates.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 [formatDate](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
 - Option to override locale to change the formatting and parsing
 - Default label in different languages
-- Can make use of date 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 date specific [validators](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate

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

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

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input Datepicker: Overview'
+title: 'Overview'
 parts:
   - Input Datepicker
   - Overview
@@ -10,11 +10,11 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Input Datepicker: Overview
+# 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.
-We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/input-date/overview.md) for this.
+We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-date/overview.md) for this.
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -30,11 +30,11 @@ export const main = () => {
 ## Features
 
 - Input field with a datepicker to help to choose a date
-- Based on our [input-date](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/input-date/overview.md)
-- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/calendar/overview.md) inside the datepicker
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
+- Based on our [input-date](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-date/overview.md)
+- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/calendar/overview.md) inside the datepicker
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
 - Option to overwrite locale to change the formatting and parsing
-- Can make use of date 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 date specific [validators](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate

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

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

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input Email: Overview'
+title: 'Overview'
 parts:
   - Input Email
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Input Email: 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 email.
 
@@ -27,8 +27,8 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/input/overview.md)
-- Makes use of email [validators](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Based on our [input](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input/overview.md)
+- Makes use of email [validators](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsEmail (default)
 
 ## Installation

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

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

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input File: Overview'
+title: 'Overview'
 parts:
   - Input File
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Input File: Overview
+# Overview
 
 A web component based on the file input field.
 
@@ -27,7 +27,7 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/input/overview.md)
+- Based on our [input](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input/overview.md)
 - Default labels and validation messages in different languages
 - Options for multi file upload and drop-zone.
 

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input File: Use Cases'
+title: 'Use Cases'
 parts:
   - Input File
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Input File: Use Cases
+# Use Cases
 
 ```js script
 import { Required, Validator } from '@lion/ui/form-core.js';

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input Iban: Overview'
+title: 'Overview'
 parts:
   - Input Iban
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Input Iban: 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 IBAN (International Bank Account Number).
@@ -28,9 +28,9 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/input/overview.md)
+- Based on our [input](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input/overview.md)
 - Default label in different languages
-- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsIBAN (default)
   - IsCountryIBAN
 - Parses IBANs automatically

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

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

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input Range: Overview'
+title: 'Overview'
 parts:
   - Input Range
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Input Range: Overview
+# 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.
 
@@ -25,11 +25,11 @@ import '@lion/ui/define/lion-input-range.js';
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/input/overview.md).
+- Based on our [input](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input/overview.md).
 - Shows `modelValue` and `unit` above the range input.
 - Shows `min` and `max` value after the range input.
 - Can hide the `min` and `max` value via `no-min-max-labels`.
-- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
 
 ## Installation
 

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

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

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input Stepper: Overview'
+title: 'Overview'
 parts:
   - Input Stepper
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Input Stepper: Overview
+# 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.
 
@@ -30,7 +30,7 @@ loadDefaultFeedbackMessages();
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/input/overview.md).
+- Based on our [input](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input/overview.md).
 - Set `min` and `max` value to define the range.
 - Set `step` value in integer or decimal to increase and decrease the value.
 - Use `ArrowUp` or `ArrowDown` to update the value.

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

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

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input Tel: Overview'
+title: 'Overview'
 parts:
   - Input Tel
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Input Tel: Overview
+# Overview
 
 Input field for entering phone numbers, including validation, formatting and mobile keyboard support.
 
@@ -51,7 +51,7 @@ export const main = () => {
 
 ## Features
 
-- Extends our [input](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/input/overview.md)
+- Extends our [input](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input/overview.md)
 - Shows a mobile telephone keypad on mobile (by having a native `<input inputmode="tel">` inside)
 - Can be configured with a list of allowed region codes
 - Will be preconfigured with region derived from locale

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input Tel: Use Cases'
+title: 'Use Cases'
 parts:
   - Input Tel
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Input Tel: Use Cases
+# Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -34,7 +34,7 @@ Say we have the following telephone number from Madrid, Spain: `+34919930432`.
 It contains a [country code](https://en.wikipedia.org/wiki/Country_code) (34), an [area code](https://en.wikipedia.org/wiki/Telephone_numbering_plan#Area_code) (91) and a [dial code](https://en.wikipedia.org/wiki/Mobile_dial_code) (+34 91).
 Input Tel interprets phone numbers based on their [region code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2): a two character long region representation('ES' in the telephone number above).
 
-The table below lists all possible regions worldwide. When [allowed regions](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/input-tel/#allowed-regions) are not configured,
+The table below lists all possible regions worldwide. When [allowed regions](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-tel/#allowed-regions) are not configured,
 all of them will be supported as values of Input Tel.
 
 ```js story
@@ -49,11 +49,11 @@ export const regionCodesTable = () => {
 The active region (accessible via readonly accessor `.activeRegion`) determines how validation and formatting
 should be applied. It is dependent on the following factors:
 
-- [allowed regions](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/input-tel/#allowed-regions): a list that determines what is allowed to become .activeRegion. If
-  [.allowedRegions has only one entry](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/input-tel/#restrict-to-one-region), .activeRegion will always be this value.
+- [allowed regions](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-tel/#allowed-regions): a list that determines what is allowed to become .activeRegion. If
+  [.allowedRegions has only one entry](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-tel/#restrict-to-one-region), .activeRegion will always be this value.
 - the modelValue or viewValue: once it contains sufficient info to derive its region code (and
-  the derived code is inside [allowed regions](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/input-tel/#allowed-regions) if configured)
-- active locale (and the derived locale is inside [allowed regions](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/input-tel/#allowed-regions) if configured)
+  the derived code is inside [allowed regions](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-tel/#allowed-regions) if configured)
+- active locale (and the derived locale is inside [allowed regions](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-tel/#allowed-regions) if configured)
 
 What follows from the list above is that .activeRegion can change dynamically, after a value
 change in the text box by the user (or when locales or allowed regions would be changed by the
@@ -142,7 +142,7 @@ export const heuristic = () => {
 Once it is configured, validation and formatting will be restricted to those
 values that are present in this list.
 
-> Note that for [InputTelDropdown](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/input-tel-dropdown/index.md), only allowed regions will
+> Note that for [InputTelDropdown](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-tel-dropdown/index.md), only allowed regions will
 > be shown in the dropdown list.
 
 ```js preview-story

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

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

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input Tel Dropdown: Overview'
+title: 'Overview'
 parts:
   - Input Tel Dropdown
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Input Tel Dropdown: Overview
+# Overview
 
 Extension of Input Tel that prefixes a dropdown list that shows all possible regions / countries.
 
@@ -31,7 +31,7 @@ export const main = () => {
 
 ## Features
 
-- Extends our [input-tel](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/input-tel/overview.md)
+- Extends our [input-tel](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-tel/overview.md)
 - Shows dropdown list with all possible regions
 - Shows only allowed regions in dropdown list when .allowedRegions is configured
 - Highlights regions on top of dropdown list when .preferredRegions is configured

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

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

package/docs/components/listbox/overview.md

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

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

@@ -1,5 +1,5 @@
 ---
-title: 'Listbox: Use Cases'
+title: 'Use Cases'
 parts:
   - Listbox
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Listbox: Use Cases
+# Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -151,4 +151,4 @@ Navigation will skip over disabled options. Let's disable Artichoke and Brussel
 
 ## Validation
 
-A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/form/validate.md).
+A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md).

package/docs/components/menu/extensions.md

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

package/docs/components/menu/migration.md

@@ -1,5 +1,5 @@
 ---
-title: 'Menu: Migration from the prerelease'
+title: 'Migration from the prerelease'
 parts:
   - Menu
   - Migration
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Migration
 ---
 
-# Menu: Migration from the prerelease
+# Migration from the prerelease
 
 The menu shipped as prereleases of `@lion/ui` (dist-tag `menu-system`, driven by the
 `.changeset/pre.json` pre-mode of the same name): `0.16.1-menu-system.N` from the 2021 branch and

package/docs/components/menu/overview.md

@@ -1,5 +1,5 @@
 ---
-title: 'Menu: Overview'
+title: 'Overview'
 parts:
   - Menu
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Menu: Overview
+# Overview
 
 A menu is a widget that offers a list of choices to the user, such as a set of actions or functions. A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a sub menu, or by invoking a command, such as Shift + F10 in Windows, that opens a context specific menu. When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.
 

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

@@ -1,5 +1,5 @@
 ---
-title: 'Menu: Overview'
+title: 'Overview'
 parts:
   - Menu
   - Use Cases

package/docs/components/pagination/overview.md

@@ -1,5 +1,5 @@
 ---
-title: 'Pagination: Overview'
+title: 'Overview'
 parts:
   - Pagination
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Pagination: Overview
+# Overview
 
 A web component that handles pagination.
 

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

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

package/docs/components/progress-indicator/examples.md

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

package/docs/components/progress-indicator/overview.md

@@ -1,5 +1,5 @@
 ---
-title: 'Progress Indicator: Overview'
+title: 'Overview'
 parts:
   - Progress Indicator
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Progress Indicator: Overview
+# Overview
 
 A web component that implements accessibility requirements for progress indicators.